fix: changed the querying mechanism from using @parameterization to $ parameterization

chore: remove routing policies feature flag (#9249 )
chore(statsreporter): fix azure IMDS endpoint in statsreporter (#9243 )
2025-10-07 12:45:54 +05:30 · 2025-10-04 21:39:18 +05:30 · 2025-10-03 17:00:06 +00:00 · 2025-10-03 21:50:56 +05:30 · 2025-10-03 19:47:15 +05:30 · 2025-10-03 05:42:42 +00:00
248 changed files with 17568 additions and 2109 deletions
--- a/.devenv/docker/clickhouse/compose.yaml
+++ b/.devenv/docker/clickhouse/compose.yaml
@@ -42,7 +42,7 @@ services:
      timeout: 5s
      retries: 3
  schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.6
    container_name: schema-migrator-sync
    command:
      - sync
@@ -55,7 +55,7 @@ services:
        condition: service_healthy
    restart: on-failure
  schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.6
    container_name: schema-migrator-async
    command:
      - async
--- a/.gitignore
+++ b/.gitignore
@@ -230,6 +230,6 @@ poetry.toml
 # LSP config files
 pyrightconfig.json

-# End of https://www.toptal.com/developers/gitignore/api/python

-frontend/.cursor/rules/
+# cursor files
+frontend/.cursor/
--- 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.95.0
+    image: signoz/signoz:v0.96.1
    command:
      - --config=/root/config/prometheus.yml
    ports:
@@ -209,7 +209,7 @@ services:
      retries: 3
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.5
+    image: signoz/signoz-otel-collector:v0.129.6
    command:
      - --config=/etc/otel-collector-config.yaml
      - --manager-config=/etc/manager-config.yaml
@@ -233,7 +233,7 @@ services:
      - signoz
  schema-migrator:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.6
    deploy:
      restart_policy:
        condition: on-failure
--- 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.95.0
+    image: signoz/signoz:v0.96.1
    command:
      - --config=/root/config/prometheus.yml
    ports:
@@ -150,7 +150,7 @@ services:
      retries: 3
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.5
+    image: signoz/signoz-otel-collector:v0.129.6
    command:
      - --config=/etc/otel-collector-config.yaml
      - --manager-config=/etc/manager-config.yaml
@@ -176,7 +176,7 @@ services:
      - signoz
  schema-migrator:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.6
    deploy:
      restart_policy:
        condition: on-failure
--- 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.95.0}
+    image: signoz/signoz:${VERSION:-v0.96.1}
    container_name: signoz
    command:
      - --config=/root/config/prometheus.yml
@@ -213,7 +213,7 @@ services:
  # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.6}
    container_name: signoz-otel-collector
    command:
      - --config=/etc/otel-collector-config.yaml
@@ -239,7 +239,7 @@ services:
        condition: service_healthy
  schema-migrator-sync:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.6}
    container_name: schema-migrator-sync
    command:
      - sync
@@ -250,7 +250,7 @@ services:
        condition: service_healthy
  schema-migrator-async:
    !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.6}
    container_name: schema-migrator-async
    command:
      - async
--- 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.95.0}
+    image: signoz/signoz:${VERSION:-v0.96.1}
    container_name: signoz
    command:
      - --config=/root/config/prometheus.yml
@@ -144,7 +144,7 @@ services:
      retries: 3
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.6}
    container_name: signoz-otel-collector
    command:
      - --config=/etc/otel-collector-config.yaml
@@ -166,7 +166,7 @@ services:
        condition: service_healthy
  schema-migrator-sync:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.6}
    container_name: schema-migrator-sync
    command:
      - sync
@@ -178,7 +178,7 @@ services:
    restart: on-failure
  schema-migrator-async:
    !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.6}
    container_name: schema-migrator-async
    command:
      - async
--- a/ee/authz/openfgaschema/base.fga
+++ b/ee/authz/openfgaschema/base.fga
@@ -26,10 +26,6 @@ type resources
    define create: [user, role#assignee]
    define list: [user, role#assignee]

-    define read: [user, role#assignee]
-    define update: [user, role#assignee]
-    define delete: [user, role#assignee]
-
 type resource
  relations
      define read: [user, anonymous, role#assignee]
--- a/ee/http/middleware/authz.go
+++ b/ee/http/middleware/authz.go
@@ -107,7 +107,7 @@ func (middleware *AuthZ) OpenAccess(next http.HandlerFunc) http.HandlerFunc {
 }

 // Check middleware accepts the relation, typeable, parentTypeable (for direct access + group relations) and a callback function to derive selector and parentSelectors on per request basis.
-func (middleware *AuthZ) Check(next http.HandlerFunc, relation authtypes.Relation, translation authtypes.Relation, typeable authtypes.Typeable, parentTypeable authtypes.Typeable, cb authtypes.SelectorCallbackFn) http.HandlerFunc {
+func (middleware *AuthZ) Check(next http.HandlerFunc, relation authtypes.Relation, translation authtypes.Relation, typeable authtypes.Typeable, cb authtypes.SelectorCallbackFn) http.HandlerFunc {
 	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
 		claims, err := authtypes.ClaimsFromContext(req.Context())
 		if err != nil {
@@ -115,13 +115,13 @@ func (middleware *AuthZ) Check(next http.HandlerFunc, relation authtypes.Relatio
 			return
 		}

-		selector, parentSelectors, err := cb(req)
+		selector, err := cb(req.Context(), claims)
 		if err != nil {
 			render.Error(rw, err)
 			return
 		}

-		err = middleware.authzService.CheckWithTupleCreation(req.Context(), claims, relation, typeable, selector, parentTypeable, parentSelectors...)
+		err = middleware.authzService.CheckWithTupleCreation(req.Context(), claims, relation, typeable, selector)
 		if err != nil {
 			render.Error(rw, err)
 			return
--- a/ee/query-service/app/server.go
+++ b/ee/query-service/app/server.go
@@ -325,17 +325,7 @@ func (s *Server) Stop(ctx context.Context) error {
 	return nil
 }

-func makeRulesManager(
-	ch baseint.Reader,
-	cache cache.Cache,
-	alertmanager alertmanager.Alertmanager,
-	sqlstore sqlstore.SQLStore,
-	telemetryStore telemetrystore.TelemetryStore,
-	prometheus prometheus.Prometheus,
-	orgGetter organization.Getter,
-	querier querier.Querier,
-	logger *slog.Logger,
-) (*baserules.Manager, error) {
+func makeRulesManager(ch baseint.Reader, cache cache.Cache, alertmanager alertmanager.Alertmanager, sqlstore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, prometheus prometheus.Prometheus, orgGetter organization.Getter, querier querier.Querier, logger *slog.Logger) (*baserules.Manager, error) {
 	ruleStore := sqlrulestore.NewRuleStore(sqlstore)
 	maintenanceStore := sqlrulestore.NewMaintenanceStore(sqlstore)
 	// create manager opts
--- a/ee/query-service/rules/anomaly.go
+++ b/ee/query-service/rules/anomaly.go
@@ -251,7 +251,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 				continue
 			}
 		}
-		results, err := r.Threshold.ShouldAlert(*series)
+		results, err := r.Threshold.ShouldAlert(*series, r.Unit())
 		if err != nil {
 			return nil, err
 		}
@@ -301,7 +301,7 @@ func (r *AnomalyRule) buildAndRunQueryV5(ctx context.Context, orgID valuer.UUID,
 				continue
 			}
 		}
-		results, err := r.Threshold.ShouldAlert(*series)
+		results, err := r.Threshold.ShouldAlert(*series, r.Unit())
 		if err != nil {
 			return nil, err
 		}
@@ -336,14 +336,19 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 	resultFPs := map[uint64]struct{}{}
 	var alerts = make(map[uint64]*ruletypes.Alert, len(res))

+	ruleReceivers := r.Threshold.GetRuleReceivers()
+	ruleReceiverMap := make(map[string][]string)
+	for _, value := range ruleReceivers {
+		ruleReceiverMap[value.Name] = value.Channels
+	}
+
 	for _, smpl := range res {
 		l := make(map[string]string, len(smpl.Metric))
 		for _, lbl := range smpl.Metric {
 			l[lbl.Name] = lbl.Value
 		}
-
 		value := valueFormatter.Format(smpl.V, r.Unit())
-		threshold := valueFormatter.Format(r.TargetVal(), r.Unit())
+		threshold := valueFormatter.Format(smpl.Target, smpl.TargetUnit)
 		r.logger.DebugContext(ctx, "Alert template data for rule", "rule_name", r.Name(), "formatter", valueFormatter.Name(), "value", value, "threshold", threshold)

 		tmplData := ruletypes.AlertTemplateData(l, value, threshold)
@@ -387,6 +392,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 		}
 		if smpl.IsMissing {
 			lb.Set(labels.AlertNameLabel, "[No data] "+r.Name())
+			lb.Set(labels.NoDataLabel, "true")
 		}

 		lbs := lb.Labels()
@@ -407,13 +413,12 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 			State:             model.StatePending,
 			Value:             smpl.V,
 			GeneratorURL:      r.GeneratorURL(),
-			Receivers:         r.PreferredChannels(),
+			Receivers:         ruleReceiverMap[lbs.Map()[ruletypes.LabelThresholdName]],
 			Missing:           smpl.IsMissing,
 		}
 	}

 	r.logger.InfoContext(ctx, "number of alerts found", "rule_name", r.Name(), "alerts_count", len(alerts))
-
 	// alerts[h] is ready, add or update active list now
 	for h, a := range alerts {
 		// Check whether we already have alerting state for the identifying label set.
@@ -422,7 +427,9 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro

 			alert.Value = a.Value
 			alert.Annotations = a.Annotations
-			alert.Receivers = r.PreferredChannels()
+			if v, ok := alert.Labels.Map()[ruletypes.LabelThresholdName]; ok {
+				alert.Receivers = ruleReceiverMap[v]
+			}
 			continue
 		}

--- a/ee/query-service/rules/manager.go
+++ b/ee/query-service/rules/manager.go
@@ -126,7 +126,6 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 	if parsedRule.RuleType == ruletypes.RuleTypeThreshold {

 		// add special labels for test alerts
-		parsedRule.Annotations[labels.AlertSummaryLabel] = fmt.Sprintf("The rule threshold is set to %.4f, and the observed metric value is {{$value}}.", *parsedRule.RuleCondition.Target)
 		parsedRule.Labels[labels.RuleSourceLabel] = ""
 		parsedRule.Labels[labels.AlertRuleIdLabel] = ""

--- a/frontend/jest.config.ts
+++ b/frontend/jest.config.ts
@@ -3,6 +3,7 @@ import type { Config } from '@jest/types';
 const USE_SAFE_NAVIGATE_MOCK_PATH = '<rootDir>/__mocks__/useSafeNavigate.ts';

 const config: Config.InitialOptions = {
+	silent: true,
 	clearMocks: true,
 	coverageDirectory: 'coverage',
 	coverageReporters: ['text', 'cobertura', 'html', 'json-summary'],
--- a/frontend/public/Images/cloud.svg
+++ b/frontend/public/Images/cloud.svg
@@ -0,0 +1,81 @@
+
+	<svg
+						width="32"
+						height="32"
+						viewBox="0 0 32 32"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M19.11 16.8483L14.0369 17.7304C14.0369 17.7304 12.3481 22.0324 12.2437 22.3235C12.1392 22.6146 12.1437 23.0746 12.6037 23.0746C13.1881 23.0746 16.1546 23.0591 16.1546 23.0591C16.1546 23.0591 15.4346 26.5322 15.3924 26.8433C15.3502 27.1544 15.6835 27.4277 15.9768 27.1144C16.2701 26.8011 20.3121 21.6058 20.4877 21.3525C20.801 20.8992 20.4988 20.4814 20.1433 20.4614C19.7877 20.4414 17.4056 20.4925 17.4056 20.4925L19.11 16.8483Z"
+							fill="#FECA18"
+						/>
+						<path
+							d="M17.7589 17.4527C17.7589 17.4527 16.6279 19.9548 16.5856 20.097C16.4612 20.5192 17.0078 20.6903 17.1634 20.3481C17.3189 20.0037 18.6655 17.2194 18.6655 17.2194L17.7589 17.4527Z"
+							fill="#FDB900"
+						/>
+						<path
+							d="M12.8859 22.2592C13.1836 22.2503 15.7968 22.2436 16.0146 22.2281C16.4213 22.1969 16.4835 22.7591 16.0146 22.7591C15.528 22.7591 12.9637 22.768 12.8081 22.7747C12.4481 22.7925 12.3992 22.2747 12.8859 22.2592Z"
+							fill="#FDB900"
+						/>
+						<path
+							d="M14.9813 17.1127C14.9813 17.1127 13.6481 20.4592 13.5725 20.7103C13.2592 21.7591 14.3858 21.728 14.6836 21.1325C14.8302 20.837 16.2635 17.8016 16.3257 17.2527C16.3879 16.7061 14.9813 17.1127 14.9813 17.1127Z"
+							fill="#FFE36A"
+						/>
+						<path
+							d="M15.3347 21.0148C15.1436 20.8837 14.9125 20.9992 14.7725 21.2192C14.6325 21.4392 14.428 21.797 14.7414 21.9858C15.0236 22.1547 15.2724 21.8147 15.3835 21.657C15.4924 21.4992 15.6324 21.217 15.3347 21.0148Z"
+							fill="#FFE36A"
+						/>
+						<path
+							d="M17.6301 21.7326C17.1212 21.6237 16.9568 22.0459 16.8479 22.5459C16.739 23.0459 16.3302 24.6636 16.2546 25.0635C16.1457 25.6257 16.6612 25.7057 16.8812 25.188C17.0457 24.8013 17.759 23.057 17.8501 22.7792C17.9901 22.3592 18.1456 21.8437 17.6301 21.7326Z"
+							fill="#FFE36A"
+						/>
+						<path
+							d="M25.7585 12.0573C25.7585 12.0573 26.3363 4.28441 19.69 3.2978C13.7147 2.41118 12.5415 8.08421 12.5415 8.08421C12.5415 8.08421 10.2838 7.55757 8.66166 9.00639C7.05064 10.4463 7.17508 12.1507 7.17508 12.1507C7.17508 12.1507 3.20195 11.524 2.79531 14.935C2.41533 18.1215 7.11286 17.3282 7.11286 17.3282L29.4183 15.686C29.4183 15.686 29.9472 14.0106 28.2606 12.7462C27.2585 11.9929 25.7585 12.0573 25.7585 12.0573Z"
+							fill="#E4EAEE"
+						/>
+						<path
+							d="M13.7347 13.8196C13.9213 13.7574 14.9857 14.6662 18.0522 14.6951C22.2653 14.7373 25.4563 12.2552 25.4563 12.2552C25.4563 12.2552 25.5629 13.0108 25.2274 13.5485C24.8096 14.2151 24.163 14.3418 24.163 14.3418C24.163 14.3418 25.3318 15.1551 26.9362 15.0307C28.3828 14.9173 29.4294 14.4262 29.4294 14.4262C29.4294 14.4262 29.5694 15.1395 29.4916 15.8351C29.3361 17.2217 28.5228 17.7861 27.6251 17.8883C26.9651 17.9638 21.3276 17.9905 19.0122 18.0127C16.9256 18.0327 6.29285 18.2994 5.20624 18.1794C4.07963 18.0549 3.22412 17.3772 2.91303 16.4061C2.67526 15.6706 2.78859 15.1973 2.78859 15.1973C2.78859 15.1973 4.85959 15.7462 6.02175 15.6151C7.48167 15.4484 8.46162 14.5307 8.46162 14.5307C8.46162 14.5307 9.33713 15.0307 11.277 14.864C12.9458 14.7173 13.7347 13.8196 13.7347 13.8196Z"
+							fill="url(#paint0_radial_811_5475)"
+						/>
+						<path
+							d="M24.8653 18.2661C24.6386 18.1394 23.832 18.8927 23.3787 19.346C23.1009 19.6238 22.2165 20.3504 22.0965 21.0504C21.7988 22.7703 23.7698 23.1614 24.552 22.3637C25.143 21.7615 25.0364 20.586 25.0364 20.1904C25.0386 19.6416 25.1475 18.4216 24.8653 18.2661Z"
+							fill="#52C0EE"
+						/>
+						<path
+							d="M8.67058 19.1904C8.45504 19.0659 7.68174 19.7948 7.24621 20.237C6.97956 20.5058 6.13294 21.2103 6.01294 21.8947C5.71962 23.5723 7.5973 23.9657 8.34837 23.1924C8.91501 22.608 8.82168 21.4591 8.82391 21.0725C8.82613 20.537 8.93723 19.3459 8.67058 19.1904Z"
+							fill="#52C0EE"
+						/>
+						<path
+							d="M12.2548 24.1634C12.0126 24.0723 11.1971 24.8145 10.7438 25.2678C10.466 25.5456 9.64386 26.2566 9.52386 26.9566C9.2261 28.6765 11.1349 29.0832 11.9171 28.2854C12.5081 27.6832 12.4104 26.5077 12.4015 26.1122C12.3793 25.0812 12.4215 24.2256 12.2548 24.1634Z"
+							fill="#52C0EE"
+						/>
+						<path
+							d="M23.5054 20.4926C23.1943 20.3304 22.8165 20.3993 22.5765 20.8992C22.3365 21.3992 22.5343 21.797 22.7854 21.9103C23.0743 22.0436 23.432 21.9214 23.672 21.5147C23.912 21.1081 23.7654 20.6281 23.5054 20.4926Z"
+							fill="#B2E6FE"
+						/>
+						<path
+							d="M10.6682 26.4279C10.3482 26.3168 9.99715 26.4345 9.83716 26.9478C9.67717 27.4611 9.92382 27.8122 10.1794 27.8878C10.4749 27.9744 10.7993 27.8078 10.9727 27.3834C11.1438 26.9589 10.9349 26.5212 10.6682 26.4279Z"
+							fill="#B2E6FE"
+						/>
+						<path
+							d="M7.12613 21.3258C6.78837 21.2325 6.43283 21.3769 6.30395 21.9169C6.17507 22.4569 6.45061 22.8035 6.71948 22.8613C7.03058 22.9302 7.35278 22.7369 7.50389 22.288C7.65277 21.8436 7.41056 21.4036 7.12613 21.3258Z"
+							fill="#B2E6FE"
+						/>
+						<defs>
+							<radialGradient
+								id="paint0_radial_811_5475"
+								cx="0"
+								cy="0"
+								r="1"
+								gradientTransform="matrix(0.18837 -6.53799 9.79456 0.282554 16.401 18.5051)"
+								gradientUnits="userSpaceOnUse"
+							>
+								<stop offset="0.1934" stopColor="#FFE366" />
+								<stop offset="0.3305" stopColor="#EDDD82" />
+								<stop offset="0.5709" stopColor="#D0D4AD" />
+								<stop offset="0.7589" stopColor="#BFCFC7" />
+								<stop offset="0.8699" stopColor="#B8CDD1" />
+							</radialGradient>
+						</defs>
+					</svg>
--- a/frontend/src/api/alerts/createAlertRule.ts
+++ b/frontend/src/api/alerts/createAlertRule.ts
@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	AlertRuleV2,
+	PostableAlertRuleV2,
+} from 'types/api/alerts/alertTypesV2';
+
+export interface CreateAlertRuleResponse {
+	data: AlertRuleV2;
+	status: string;
+}
+
+const createAlertRule = async (
+	props: PostableAlertRuleV2,
+): Promise<SuccessResponse<CreateAlertRuleResponse> | ErrorResponse> => {
+	const response = await axios.post(`/rules`, {
+		...props,
+	});
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default createAlertRule;
--- a/frontend/src/api/alerts/testAlertRule.ts
+++ b/frontend/src/api/alerts/testAlertRule.ts
@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PostableAlertRuleV2 } from 'types/api/alerts/alertTypesV2';
+
+export interface TestAlertRuleResponse {
+	data: {
+		alertCount: number;
+		message: string;
+	};
+	status: string;
+}
+
+const testAlertRule = async (
+	props: PostableAlertRuleV2,
+): Promise<SuccessResponse<TestAlertRuleResponse> | ErrorResponse> => {
+	const response = await axios.post(`/testRule`, {
+		...props,
+	});
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default testAlertRule;
--- a/frontend/src/api/alerts/updateAlertRule.ts
+++ b/frontend/src/api/alerts/updateAlertRule.ts
@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PostableAlertRuleV2 } from 'types/api/alerts/alertTypesV2';
+
+export interface UpdateAlertRuleResponse {
+	data: string;
+	status: string;
+}
+
+const updateAlertRule = async (
+	id: string,
+	postableAlertRule: PostableAlertRuleV2,
+): Promise<SuccessResponse<UpdateAlertRuleResponse> | ErrorResponse> => {
+	const response = await axios.put(`/rules/${id}`, {
+		...postableAlertRule,
+	});
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default updateAlertRule;
--- a/frontend/src/api/routingPolicies/createRoutingPolicy.ts
+++ b/frontend/src/api/routingPolicies/createRoutingPolicy.ts
@@ -0,0 +1,34 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+
+export interface CreateRoutingPolicyBody {
+	name: string;
+	expression: string;
+	channels: string[];
+	description?: string;
+}
+
+export interface CreateRoutingPolicyResponse {
+	success: boolean;
+	message: string;
+}
+
+const createRoutingPolicy = async (
+	props: CreateRoutingPolicyBody,
+): Promise<
+	SuccessResponseV2<CreateRoutingPolicyResponse> | ErrorResponseV2
+> => {
+	try {
+		const response = await axios.post(`/route_policies`, props);
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default createRoutingPolicy;
--- a/frontend/src/api/routingPolicies/deleteRoutingPolicy.ts
+++ b/frontend/src/api/routingPolicies/deleteRoutingPolicy.ts
@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+
+export interface DeleteRoutingPolicyResponse {
+	success: boolean;
+	message: string;
+}
+
+const deleteRoutingPolicy = async (
+	routingPolicyId: string,
+): Promise<
+	SuccessResponseV2<DeleteRoutingPolicyResponse> | ErrorResponseV2
+> => {
+	try {
+		const response = await axios.delete(`/route_policies/${routingPolicyId}`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default deleteRoutingPolicy;
--- a/frontend/src/api/routingPolicies/getRoutingPolicies.ts
+++ b/frontend/src/api/routingPolicies/getRoutingPolicies.ts
@@ -0,0 +1,40 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+
+export interface ApiRoutingPolicy {
+	id: string;
+	name: string;
+	expression: string;
+	description: string;
+	channels: string[];
+	createdAt: string;
+	updatedAt: string;
+	createdBy: string;
+	updatedBy: string;
+}
+
+export interface GetRoutingPoliciesResponse {
+	status: string;
+	data?: ApiRoutingPolicy[];
+}
+
+export const getRoutingPolicies = async (
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<GetRoutingPoliciesResponse> | ErrorResponseV2> => {
+	try {
+		const response = await axios.get('/route_policies', {
+			signal,
+			headers,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
--- a/frontend/src/api/routingPolicies/updateRoutingPolicy.ts
+++ b/frontend/src/api/routingPolicies/updateRoutingPolicy.ts
@@ -0,0 +1,38 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+
+export interface UpdateRoutingPolicyBody {
+	name: string;
+	expression: string;
+	channels: string[];
+	description: string;
+}
+
+export interface UpdateRoutingPolicyResponse {
+	success: boolean;
+	message: string;
+}
+
+const updateRoutingPolicy = async (
+	id: string,
+	props: UpdateRoutingPolicyBody,
+): Promise<
+	SuccessResponseV2<UpdateRoutingPolicyResponse> | ErrorResponseV2
+> => {
+	try {
+		const response = await axios.put(`/route_policies/${id}`, {
+			...props,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default updateRoutingPolicy;
--- a/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts
+++ b/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts
@@ -634,4 +634,260 @@ describe('prepareQueryRangePayloadV5', () => {
 			}),
 		);
 	});
+
+	it('builds payload for builder queries with filters array but no filter expression', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q8',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [
+						baseBuilderQuery({
+							dataSource: DataSource.LOGS,
+							filter: { expression: '' },
+							filters: {
+								items: [
+									{
+										id: '1',
+										key: { key: 'service.name', type: 'string' },
+										op: '=',
+										value: 'payment-service',
+									},
+									{
+										id: '2',
+										key: { key: 'http.status_code', type: 'number' },
+										op: '>=',
+										value: 400,
+									},
+									{
+										id: '3',
+										key: { key: 'message', type: 'string' },
+										op: 'contains',
+										value: 'error',
+									},
+								],
+								op: 'AND',
+							},
+						}),
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result.legendMap).toEqual({ A: 'Legend A' });
+		expect(result.queryPayload.compositeQuery.queries).toHaveLength(1);
+
+		const builderQuery = result.queryPayload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		const logSpec = builderQuery.spec as LogBuilderQuery;
+
+		expect(logSpec.name).toBe('A');
+		expect(logSpec.signal).toBe('logs');
+		expect(logSpec.filter).toEqual({
+			expression:
+				"service.name = 'payment-service' AND http.status_code >= 400 AND message contains 'error'",
+		});
+	});
+
+	it('uses filter.expression when only expression is provided', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q9',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [
+						baseBuilderQuery({
+							dataSource: DataSource.LOGS,
+							filter: { expression: 'http.status_code >= 500' },
+							filters: (undefined as unknown) as IBuilderQuery['filters'],
+						}),
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+		const builderQuery = result.queryPayload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		const logSpec = builderQuery.spec as LogBuilderQuery;
+		expect(logSpec.filter).toEqual({ expression: 'http.status_code >= 500' });
+	});
+
+	it('derives expression from filters when filter is undefined', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q10',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [
+						baseBuilderQuery({
+							dataSource: DataSource.LOGS,
+							filter: (undefined as unknown) as IBuilderQuery['filter'],
+							filters: {
+								items: [
+									{
+										id: '1',
+										key: { key: 'service.name', type: 'string' },
+										op: '=',
+										value: 'checkout',
+									},
+								],
+								op: 'AND',
+							},
+						}),
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+		const builderQuery = result.queryPayload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		const logSpec = builderQuery.spec as LogBuilderQuery;
+		expect(logSpec.filter).toEqual({ expression: "service.name = 'checkout'" });
+	});
+
+	it('prefers filter.expression over filters when both are present', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q11',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [
+						baseBuilderQuery({
+							dataSource: DataSource.LOGS,
+							filter: { expression: "service.name = 'frontend'" },
+							filters: {
+								items: [
+									{
+										id: '1',
+										key: { key: 'service.name', type: 'string' },
+										op: '=',
+										value: 'backend',
+									},
+								],
+								op: 'AND',
+							},
+						}),
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+		const builderQuery = result.queryPayload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		const logSpec = builderQuery.spec as LogBuilderQuery;
+		expect(logSpec.filter).toEqual({ expression: "service.name = 'frontend'" });
+	});
+
+	it('returns empty expression when neither filter nor filters provided', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q12',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [
+						baseBuilderQuery({
+							dataSource: DataSource.LOGS,
+							filter: (undefined as unknown) as IBuilderQuery['filter'],
+							filters: (undefined as unknown) as IBuilderQuery['filters'],
+						}),
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+		const builderQuery = result.queryPayload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		const logSpec = builderQuery.spec as LogBuilderQuery;
+		expect(logSpec.filter).toEqual({ expression: '' });
+	});
+
+	it('returns empty expression when filters provided with empty items', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q13',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [
+						baseBuilderQuery({
+							dataSource: DataSource.LOGS,
+							filter: { expression: '' },
+							filters: { items: [], op: 'AND' },
+						}),
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+		const builderQuery = result.queryPayload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		const logSpec = builderQuery.spec as LogBuilderQuery;
+		expect(logSpec.filter).toEqual({ expression: '' });
+	});
 });
--- a/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts
+++ b/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts
@@ -1,5 +1,6 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable sonarjs/no-identical-functions */
+import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
@@ -14,6 +15,7 @@ import {
 	BaseBuilderQuery,
 	FieldContext,
 	FieldDataType,
+	Filter,
 	FunctionName,
 	GroupByKey,
 	Having,
@@ -111,6 +113,23 @@ function isDeprecatedField(fieldName: string): boolean {
 	);
 }

+function getFilter(queryData: IBuilderQuery): Filter {
+	const { filter } = queryData;
+	if (filter?.expression) {
+		return {
+			expression: filter.expression,
+		};
+	}
+
+	if (queryData.filters && queryData.filters?.items?.length > 0) {
+		return convertFiltersToExpression(queryData.filters);
+	}
+
+	return {
+		expression: '',
+	};
+}
+
 function createBaseSpec(
 	queryData: IBuilderQuery,
 	requestType: RequestType,
@@ -124,7 +143,7 @@ function createBaseSpec(
 	return {
 		stepInterval: queryData?.stepInterval || null,
 		disabled: queryData.disabled,
-		filter: queryData?.filter?.expression ? queryData.filter : undefined,
+		filter: getFilter(queryData),
 		groupBy:
 			queryData.groupBy?.length > 0
 				? queryData.groupBy.map(
--- a/frontend/src/components/CeleryTask/useNavigateToExplorer.ts
+++ b/frontend/src/components/CeleryTask/useNavigateToExplorer.ts
@@ -42,18 +42,31 @@ export function useNavigateToExplorer(): (
 				builder: {
 					...widgetQuery.builder,
 					queryData: widgetQuery.builder.queryData
-						.map((item) => ({
-							...item,
-							dataSource,
-							aggregateOperator: MetricAggregateOperator.NOOP,
-							filters: {
-								...item.filters,
-								items: [...(item.filters?.items || []), ...selectedFilters],
-								op: item.filters?.op || 'AND',
-							},
-							groupBy: [],
-							disabled: false,
-						}))
+						.map((item) => {
+							// filter out filters with unique ids
+							const seen = new Set();
+							const filterItems = [
+								...(item.filters?.items || []),
+								...selectedFilters,
+							].filter((item) => {
+								if (seen.has(item.id)) return false;
+								seen.add(item.id);
+								return true;
+							});
+
+							return {
+								...item,
+								dataSource,
+								aggregateOperator: MetricAggregateOperator.NOOP,
+								filters: {
+									...item.filters,
+									items: filterItems,
+									op: item.filters?.op || 'AND',
+								},
+								groupBy: [],
+								disabled: false,
+							};
+						})
 						.slice(0, 1),
 					queryFormulas: [],
 				},
--- a/frontend/src/components/ChangelogModal/ChangelogModal.tsx
+++ b/frontend/src/components/ChangelogModal/ChangelogModal.tsx
@@ -87,7 +87,7 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {

 	const onClickUpdateWorkspace = (): void => {
 		window.open(
-			'https://github.com/SigNoz/signoz/releases',
+			'https://signoz.io/upgrade-path',
 			'_blank',
 			'noopener,noreferrer',
 		);
--- a/frontend/src/components/ChangelogModal/test/ChangelogModal.test.tsx
+++ b/frontend/src/components/ChangelogModal/test/ChangelogModal.test.tsx
@@ -91,7 +91,7 @@ describe('ChangelogModal', () => {
 		renderChangelog();
 		fireEvent.click(screen.getByText('Update my workspace'));
 		expect(window.open).toHaveBeenCalledWith(
-			'https://github.com/SigNoz/signoz/releases',
+			'https://signoz.io/upgrade-path',
 			'_blank',
 			'noopener,noreferrer',
 		);
--- a/frontend/src/components/ErrorBoundaryHOC/README.md
+++ b/frontend/src/components/ErrorBoundaryHOC/README.md
@@ -0,0 +1,117 @@
+# withErrorBoundary HOC
+
+A Higher-Order Component (HOC) that wraps React components with ErrorBoundary to provide error handling and recovery.
+
+## Features
+
+- **Automatic Error Catching**: Catches JavaScript errors in any component tree
+- **Integration**: Automatically reports errors with context
+- **Custom Fallback UI**: Supports custom error fallback components
+- **Error Logging**: Optional custom error handlers for additional logging
+- **TypeScript Support**: Fully typed with proper generics
+- **Component Context**: Automatically adds component name to tags
+
+## Basic Usage
+
+```tsx
+import { withErrorBoundary } from 'components/HOC';
+
+// Wrap any component
+const SafeComponent = withErrorBoundary(MyComponent);
+
+// Use it like any other component
+<SafeComponent prop1="value1" prop2="value2" />
+```
+
+## Advanced Usage
+
+### Custom Fallback Component
+
+```tsx
+const CustomFallback = () => (
+  <div>
+    <h3>Oops! Something went wrong</h3>
+    <button onClick={() => window.location.reload()}>Reload</button>
+  </div>
+);
+
+const SafeComponent = withErrorBoundary(MyComponent, {
+  fallback: <CustomFallback />
+});
+```
+
+### Custom Error Handler
+
+```tsx
+const SafeComponent = withErrorBoundary(MyComponent, {
+  onError: (error, componentStack, eventId) => {
+    console.error('Component error:', error);
+    // Send to analytics, logging service, etc.
+  }
+});
+```
+
+### Sentry Configuration
+
+```tsx
+const SafeComponent = withErrorBoundary(MyComponent, {
+  sentryOptions: {
+    tags: {
+      section: 'dashboard',
+      priority: 'high',
+      feature: 'metrics'
+    },
+    level: 'error'
+  }
+});
+```
+
+## API Reference
+
+### `withErrorBoundary<P>(component, options?)`
+
+#### Parameters
+
+- `component: ComponentType<P>` - The React component to wrap
+- `options?: WithErrorBoundaryOptions` - Configuration options
+
+#### Options
+
+```tsx
+interface WithErrorBoundaryOptions {
+  /** Custom fallback component to render when an error occurs */
+  fallback?: ReactElement;
+  
+  /** Custom error handler function */
+  onError?: (
+    error: unknown,
+    componentStack: string | undefined,
+    eventId: string
+  ) => void;
+  
+  /** Additional props to pass to the Sentry ErrorBoundary */
+  sentryOptions?: {
+    tags?: Record<string, string>;
+    level?: Sentry.SeverityLevel;
+  };
+}
+```
+
+## When to Use
+
+- **Critical Components**: Wrap important UI components that shouldn't crash the entire app
+- **Third-party Integrations**: Wrap components that use external libraries
+- **Data-heavy Components**: Wrap components that process complex data
+- **Route Components**: Wrap page-level components to prevent navigation issues
+
+## Best Practices
+
+1. **Use Sparingly**: Don't wrap every component - focus on critical ones
+2. **Meaningful Fallbacks**: Provide helpful fallback UI that guides users
+3. **Log Errors**: Always implement error logging for debugging
+4. **Component Names**: Ensure components have proper `displayName` for debugging
+5. **Test Error Scenarios**: Test that your error boundaries work as expected
+
+## Examples
+
+See `withErrorBoundary.example.tsx` for complete usage examples.
--- a/frontend/src/components/ErrorBoundaryHOC/tests/withErrorBoundary.test.tsx
+++ b/frontend/src/components/ErrorBoundaryHOC/tests/withErrorBoundary.test.tsx
@@ -0,0 +1,211 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import withErrorBoundary, {
+	WithErrorBoundaryOptions,
+} from '../withErrorBoundary';
+
+// Mock dependencies before imports
+jest.mock('@sentry/react', () => {
+	const ReactMock = jest.requireActual('react');
+
+	class MockErrorBoundary extends ReactMock.Component<
+		{
+			children: React.ReactNode;
+			fallback: React.ReactElement;
+			onError?: (error: Error, componentStack: string, eventId: string) => void;
+			beforeCapture?: (scope: {
+				setTag: (key: string, value: string) => void;
+				setLevel: (level: string) => void;
+			}) => void;
+		},
+		{ hasError: boolean }
+	> {
+		constructor(props: MockErrorBoundary['props']) {
+			super(props);
+			this.state = { hasError: false };
+		}
+
+		static getDerivedStateFromError(): { hasError: boolean } {
+			return { hasError: true };
+		}
+
+		componentDidCatch(error: Error, errorInfo: { componentStack: string }): void {
+			const { beforeCapture, onError } = this.props;
+			if (beforeCapture) {
+				const mockScope = {
+					setTag: jest.fn(),
+					setLevel: jest.fn(),
+				};
+				beforeCapture(mockScope);
+			}
+			if (onError) {
+				onError(error, errorInfo.componentStack, 'mock-event-id');
+			}
+		}
+
+		render(): React.ReactNode {
+			const { hasError } = this.state;
+			const { fallback, children } = this.props;
+			if (hasError) {
+				return <div data-testid="error-boundary-fallback">{fallback}</div>;
+			}
+			return <div data-testid="app-error-boundary">{children}</div>;
+		}
+	}
+
+	return {
+		ErrorBoundary: MockErrorBoundary,
+		SeverityLevel: {
+			error: 'error',
+			warning: 'warning',
+			info: 'info',
+		},
+	};
+});
+
+jest.mock(
+	'../../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback',
+	() =>
+		function MockErrorBoundaryFallback(): JSX.Element {
+			return (
+				<div data-testid="default-error-fallback">Default Error Fallback</div>
+			);
+		},
+);
+
+// Test component that can throw errors
+interface TestComponentProps {
+	shouldThrow?: boolean;
+	message?: string;
+}
+
+function TestComponent({
+	shouldThrow = false,
+	message = 'Test Component',
+}: TestComponentProps): JSX.Element {
+	if (shouldThrow) {
+		throw new Error('Test error');
+	}
+	return <div data-testid="test-component">{message}</div>;
+}
+
+TestComponent.defaultProps = {
+	shouldThrow: false,
+	message: 'Test Component',
+};
+
+// Test component with display name
+function NamedComponent(): JSX.Element {
+	return <div data-testid="named-component">Named Component</div>;
+}
+NamedComponent.displayName = 'NamedComponent';
+
+describe('withErrorBoundary', () => {
+	// Suppress console errors for cleaner test output
+	const originalError = console.error;
+	beforeAll(() => {
+		console.error = jest.fn();
+	});
+
+	afterAll(() => {
+		console.error = originalError;
+	});
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should wrap component with ErrorBoundary and render successfully', () => {
+		// Arrange
+		const SafeComponent = withErrorBoundary(TestComponent);
+
+		// Act
+		render(<SafeComponent message="Hello World" />);
+
+		// Assert
+		expect(screen.getByTestId('app-error-boundary')).toBeInTheDocument();
+		expect(screen.getByTestId('test-component')).toBeInTheDocument();
+		expect(screen.getByText('Hello World')).toBeInTheDocument();
+	});
+
+	it('should render fallback UI when component throws error', () => {
+		// Arrange
+		const SafeComponent = withErrorBoundary(TestComponent);
+
+		// Act
+		render(<SafeComponent shouldThrow />);
+
+		// Assert
+		expect(screen.getByTestId('error-boundary-fallback')).toBeInTheDocument();
+		expect(screen.getByTestId('default-error-fallback')).toBeInTheDocument();
+	});
+
+	it('should render custom fallback component when provided', () => {
+		// Arrange
+		const customFallback = (
+			<div data-testid="custom-fallback">Custom Error UI</div>
+		);
+		const options: WithErrorBoundaryOptions = {
+			fallback: customFallback,
+		};
+		const SafeComponent = withErrorBoundary(TestComponent, options);
+
+		// Act
+		render(<SafeComponent shouldThrow />);
+
+		// Assert
+		expect(screen.getByTestId('error-boundary-fallback')).toBeInTheDocument();
+		expect(screen.getByTestId('custom-fallback')).toBeInTheDocument();
+		expect(screen.getByText('Custom Error UI')).toBeInTheDocument();
+	});
+
+	it('should call custom error handler when error occurs', () => {
+		// Arrange
+		const mockErrorHandler = jest.fn();
+		const options: WithErrorBoundaryOptions = {
+			onError: mockErrorHandler,
+		};
+		const SafeComponent = withErrorBoundary(TestComponent, options);
+
+		// Act
+		render(<SafeComponent shouldThrow />);
+
+		// Assert
+		expect(mockErrorHandler).toHaveBeenCalledWith(
+			expect.any(Error),
+			expect.any(String),
+			'mock-event-id',
+		);
+		expect(mockErrorHandler).toHaveBeenCalledTimes(1);
+	});
+
+	it('should set correct display name for debugging', () => {
+		// Arrange & Act
+		const SafeTestComponent = withErrorBoundary(TestComponent);
+		const SafeNamedComponent = withErrorBoundary(NamedComponent);
+
+		// Assert
+		expect(SafeTestComponent.displayName).toBe(
+			'withErrorBoundary(TestComponent)',
+		);
+		expect(SafeNamedComponent.displayName).toBe(
+			'withErrorBoundary(NamedComponent)',
+		);
+	});
+
+	it('should handle component without display name', () => {
+		// Arrange
+		function AnonymousComponent(): JSX.Element {
+			return <div>Anonymous</div>;
+		}
+
+		// Act
+		const SafeAnonymousComponent = withErrorBoundary(AnonymousComponent);
+
+		// Assert
+		expect(SafeAnonymousComponent.displayName).toBe(
+			'withErrorBoundary(AnonymousComponent)',
+		);
+	});
+});
--- a/frontend/src/components/ErrorBoundaryHOC/index.ts
+++ b/frontend/src/components/ErrorBoundaryHOC/index.ts
@@ -0,0 +1,2 @@
+export type { WithErrorBoundaryOptions } from './withErrorBoundary';
+export { default as withErrorBoundary } from './withErrorBoundary';
--- a/frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.example.tsx
+++ b/frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.example.tsx
@@ -0,0 +1,143 @@
+import { Button } from 'antd';
+import { useState } from 'react';
+
+import { withErrorBoundary } from './index';
+
+/**
+ * Example component that can throw errors
+ */
+function ProblematicComponent(): JSX.Element {
+	const [shouldThrow, setShouldThrow] = useState(false);
+
+	if (shouldThrow) {
+		throw new Error('This is a test error from ProblematicComponent!');
+	}
+
+	return (
+		<div style={{ padding: '20px' }}>
+			<h3>Problematic Component</h3>
+			<p>This component can throw errors when the button is clicked.</p>
+			<Button type="primary" onClick={(): void => setShouldThrow(true)} danger>
+				Trigger Error
+			</Button>
+		</div>
+	);
+}
+
+/**
+ * Basic usage - wraps component with default error boundary
+ */
+export const SafeProblematicComponent = withErrorBoundary(ProblematicComponent);
+
+/**
+ * Usage with custom fallback component
+ */
+function CustomErrorFallback(): JSX.Element {
+	return (
+		<div
+			style={{ padding: '20px', border: '1px solid red', borderRadius: '4px' }}
+		>
+			<h4 style={{ color: 'red' }}>Custom Error Fallback</h4>
+			<p>Something went wrong in this specific component!</p>
+			<Button onClick={(): void => window.location.reload()}>Reload Page</Button>
+		</div>
+	);
+}
+
+export const SafeProblematicComponentWithCustomFallback = withErrorBoundary(
+	ProblematicComponent,
+	{
+		fallback: <CustomErrorFallback />,
+	},
+);
+
+/**
+ * Usage with custom error handler
+ */
+export const SafeProblematicComponentWithErrorHandler = withErrorBoundary(
+	ProblematicComponent,
+	{
+		onError: (error, errorInfo) => {
+			console.error('Custom error handler:', error);
+			console.error('Error info:', errorInfo);
+			// You could also send to analytics, logging service, etc.
+		},
+		sentryOptions: {
+			tags: {
+				section: 'dashboard',
+				priority: 'high',
+			},
+			level: 'error',
+		},
+	},
+);
+
+/**
+ * Example of wrapping an existing component from the codebase
+ */
+function ExistingComponent({
+	title,
+	data,
+}: {
+	title: string;
+	data: any[];
+}): JSX.Element {
+	// This could be any existing component that might throw errors
+	return (
+		<div>
+			<h4>{title}</h4>
+			<ul>
+				{data.map((item, index) => (
+					// eslint-disable-next-line react/no-array-index-key
+					<li key={index}>{item.name}</li>
+				))}
+			</ul>
+		</div>
+	);
+}
+
+export const SafeExistingComponent = withErrorBoundary(ExistingComponent, {
+	sentryOptions: {
+		tags: {
+			component: 'ExistingComponent',
+			feature: 'data-display',
+		},
+	},
+});
+
+/**
+ * Usage examples in a container component
+ */
+export function ErrorBoundaryExamples(): JSX.Element {
+	const sampleData = [
+		{ name: 'Item 1' },
+		{ name: 'Item 2' },
+		{ name: 'Item 3' },
+	];
+
+	return (
+		<div style={{ padding: '20px' }}>
+			<h2>Error Boundary HOC Examples</h2>
+
+			<div style={{ marginBottom: '20px' }}>
+				<h3>1. Basic Usage</h3>
+				<SafeProblematicComponent />
+			</div>
+
+			<div style={{ marginBottom: '20px' }}>
+				<h3>2. With Custom Fallback</h3>
+				<SafeProblematicComponentWithCustomFallback />
+			</div>
+
+			<div style={{ marginBottom: '20px' }}>
+				<h3>3. With Custom Error Handler</h3>
+				<SafeProblematicComponentWithErrorHandler />
+			</div>
+
+			<div style={{ marginBottom: '20px' }}>
+				<h3>4. Wrapped Existing Component</h3>
+				<SafeExistingComponent title="Sample Data" data={sampleData} />
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.tsx
@@ -0,0 +1,99 @@
+import * as Sentry from '@sentry/react';
+import { ComponentType, ReactElement } from 'react';
+
+import ErrorBoundaryFallback from '../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+
+/**
+ * Configuration options for the ErrorBoundary HOC
+ */
+interface WithErrorBoundaryOptions {
+	/** Custom fallback component to render when an error occurs */
+	fallback?: ReactElement;
+	/** Custom error handler function */
+	onError?: (
+		error: unknown,
+		componentStack: string | undefined,
+		eventId: string,
+	) => void;
+	/** Additional props to pass to the ErrorBoundary */
+	sentryOptions?: {
+		tags?: Record<string, string>;
+		level?: Sentry.SeverityLevel;
+	};
+}
+
+/**
+ * Higher-Order Component that wraps a component with ErrorBoundary
+ *
+ * @param WrappedComponent - The component to wrap with error boundary
+ * @param options - Configuration options for the error boundary
+ *
+ * @example
+ * // Basic usage
+ * const SafeComponent = withErrorBoundary(MyComponent);
+ *
+ * @example
+ * // With custom fallback
+ * const SafeComponent = withErrorBoundary(MyComponent, {
+ *   fallback: <div>Something went wrong!</div>
+ * });
+ *
+ * @example
+ * // With custom error handler
+ * const SafeComponent = withErrorBoundary(MyComponent, {
+ *   onError: (error, errorInfo) => {
+ *     console.error('Component error:', error, errorInfo);
+ *   }
+ * });
+ */
+function withErrorBoundary<P extends Record<string, unknown>>(
+	WrappedComponent: ComponentType<P>,
+	options: WithErrorBoundaryOptions = {},
+): ComponentType<P> {
+	const {
+		fallback = <ErrorBoundaryFallback />,
+		onError,
+		sentryOptions = {},
+	} = options;
+
+	function WithErrorBoundaryComponent(props: P): JSX.Element {
+		return (
+			<Sentry.ErrorBoundary
+				fallback={fallback}
+				beforeCapture={(scope): void => {
+					// Add component name to context
+					scope.setTag(
+						'component',
+						WrappedComponent.displayName || WrappedComponent.name || 'Unknown',
+					);
+
+					// Add any custom tags
+					if (sentryOptions.tags) {
+						Object.entries(sentryOptions.tags).forEach(([key, value]) => {
+							scope.setTag(key, value);
+						});
+					}
+
+					// Set severity level if provided
+					if (sentryOptions.level) {
+						scope.setLevel(sentryOptions.level);
+					}
+				}}
+				onError={onError}
+			>
+				{/* eslint-disable-next-line react/jsx-props-no-spreading */}
+				<WrappedComponent {...props} />
+			</Sentry.ErrorBoundary>
+		);
+	}
+
+	// Set display name for debugging purposes
+	WithErrorBoundaryComponent.displayName = `withErrorBoundary(${
+		WrappedComponent.displayName || WrappedComponent.name || 'Component'
+	})`;
+
+	return WithErrorBoundaryComponent;
+}
+
+export default withErrorBoundary;
+export type { WithErrorBoundaryOptions };
--- a/frontend/src/components/HeaderRightSection/HeaderRightSection.tsx
+++ b/frontend/src/components/HeaderRightSection/HeaderRightSection.tsx
@@ -2,6 +2,7 @@ import './HeaderRightSection.styles.scss';

 import { Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Globe, Inbox, SquarePen } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -20,13 +21,15 @@ function HeaderRightSection({
 	enableAnnouncements,
 	enableShare,
 	enableFeedback,
-}: HeaderRightSectionProps): JSX.Element {
+}: HeaderRightSectionProps): JSX.Element | null {
 	const location = useLocation();

 	const [openFeedbackModal, setOpenFeedbackModal] = useState(false);
 	const [openShareURLModal, setOpenShareURLModal] = useState(false);
 	const [openAnnouncementsModal, setOpenAnnouncementsModal] = useState(false);

+	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
+
 	const handleOpenFeedbackModal = useCallback((): void => {
 		logEvent('Feedback: Clicked', {
 			page: location.pathname,
@@ -63,9 +66,11 @@ function HeaderRightSection({
 		setOpenShareURLModal(open);
 	};

+	const isLicenseEnabled = isEnterpriseSelfHostedUser || isCloudUser;
+
 	return (
 		<div className="header-right-section-container">
-			{enableFeedback && (
+			{enableFeedback && isLicenseEnabled && (
 				<Popover
 					rootClassName="header-section-popover-root"
 					className="shareable-link-popover"
--- a/frontend/src/components/HeaderRightSection/tests/HeaderRightSection.test.tsx
+++ b/frontend/src/components/HeaderRightSection/tests/HeaderRightSection.test.tsx
@@ -5,6 +5,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useLocation } from 'react-router-dom';

 import HeaderRightSection from '../HeaderRightSection';
@@ -44,8 +45,13 @@ jest.mock('../AnnouncementsModal', () => ({
 	),
 }));

+jest.mock('hooks/useGetTenantLicense', () => ({
+	useGetTenantLicense: jest.fn(),
+}));
+
 const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
+const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;

 const defaultProps = {
 	enableAnnouncements: true,
@@ -61,6 +67,13 @@ describe('HeaderRightSection', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockUseLocation.mockReturnValue(mockLocation);
+		// Default to licensed user (Enterprise or Cloud)
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: true,
+			isEnterpriseSelfHostedUser: false,
+			isCommunityUser: false,
+			isCommunityEnterpriseUser: false,
+		});
 	});

 	it('should render all buttons when all features are enabled', () => {
@@ -189,4 +202,84 @@ describe('HeaderRightSection', () => {
 		expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
 		expect(screen.queryByTestId('share-modal')).not.toBeInTheDocument();
 	});
+
+	it('should show feedback button for Cloud users when feedback is enabled', () => {
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: true,
+			isEnterpriseSelfHostedUser: false,
+			isCommunityUser: false,
+			isCommunityEnterpriseUser: false,
+		});
+
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const feedbackButton = document.querySelector('.lucide-square-pen');
+		expect(feedbackButton).toBeInTheDocument();
+	});
+
+	it('should show feedback button for Enterprise self-hosted users when feedback is enabled', () => {
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: false,
+			isEnterpriseSelfHostedUser: true,
+			isCommunityUser: false,
+			isCommunityEnterpriseUser: false,
+		});
+
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const feedbackButton = document.querySelector('.lucide-square-pen');
+		expect(feedbackButton).toBeInTheDocument();
+	});
+
+	it('should hide feedback button for Community users even when feedback is enabled', () => {
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: false,
+			isEnterpriseSelfHostedUser: false,
+			isCommunityUser: true,
+			isCommunityEnterpriseUser: false,
+		});
+
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const feedbackButton = document.querySelector('.lucide-square-pen');
+		expect(feedbackButton).not.toBeInTheDocument();
+	});
+
+	it('should hide feedback button for Community Enterprise users even when feedback is enabled', () => {
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: false,
+			isEnterpriseSelfHostedUser: false,
+			isCommunityUser: false,
+			isCommunityEnterpriseUser: true,
+		});
+
+		render(<HeaderRightSection {...defaultProps} />);
+
+		const feedbackButton = document.querySelector('.lucide-square-pen');
+		expect(feedbackButton).not.toBeInTheDocument();
+	});
+
+	it('should render correct number of buttons when feedback is hidden due to license', () => {
+		mockUseGetTenantLicense.mockReturnValue({
+			isCloudUser: false,
+			isEnterpriseSelfHostedUser: false,
+			isCommunityUser: true,
+			isCommunityEnterpriseUser: false,
+		});
+
+		render(<HeaderRightSection {...defaultProps} />);
+
+		// Should have 2 buttons (announcements + share) instead of 3
+		const buttons = screen.getAllByRole('button');
+		expect(buttons).toHaveLength(2);
+
+		// Verify which buttons are present
+		expect(screen.getByRole('button', { name: /share/i })).toBeInTheDocument();
+		const inboxIcon = document.querySelector('.lucide-inbox');
+		expect(inboxIcon).toBeInTheDocument();
+
+		// Verify feedback button is not present
+		const feedbackIcon = document.querySelector('.lucide-square-pen');
+		expect(feedbackIcon).not.toBeInTheDocument();
+	});
 });
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
@@ -26,7 +26,7 @@ interface LogsFormatOptionsMenuProps {
 	config: OptionsMenuConfig;
 }

-export default function LogsFormatOptionsMenu({
+function OptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
@@ -49,7 +49,6 @@ export default function LogsFormatOptionsMenu({
 	const [selectedValue, setSelectedValue] = useState<string | null>(null);
 	const listRef = useRef<HTMLDivElement>(null);
 	const initialMouseEnterRef = useRef<boolean>(false);
-	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);

 	const onChange = useCallback(
 		(key: LogViewMode) => {
@@ -209,7 +208,7 @@ export default function LogsFormatOptionsMenu({
 		};
 	}, [selectedValue]);

-	const popoverContent = (
+	return (
 		<div
 			className={cx(
 				'nested-menu-container',
@@ -447,15 +446,30 @@ export default function LogsFormatOptionsMenu({
 			)}
 		</div>
 	);
+}
+
+function LogsFormatOptionsMenu({
+	items,
+	selectedOptionFormat,
+	config,
+}: LogsFormatOptionsMenuProps): JSX.Element {
+	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 	return (
 		<Popover
-			content={popoverContent}
+			content={
+				<OptionsMenu
+					items={items}
+					selectedOptionFormat={selectedOptionFormat}
+					config={config}
+				/>
+			}
 			trigger="click"
 			placement="bottomRight"
 			arrow={false}
 			open={isPopoverOpen}
 			onOpenChange={setIsPopoverOpen}
 			rootClassName="format-options-popover"
+			destroyTooltipOnHide
 		>
 			<Button
 				className="periscope-btn ghost"
@@ -465,3 +479,5 @@ export default function LogsFormatOptionsMenu({
 		</Popover>
 	);
 }
+
+export default LogsFormatOptionsMenu;
--- a/frontend/src/components/LogsFormatOptionsMenu/tests/LogsFormatOptionsMenu.test.tsx
+++ b/frontend/src/components/LogsFormatOptionsMenu/tests/LogsFormatOptionsMenu.test.tsx
@@ -0,0 +1,157 @@
+import { FontSize } from 'container/OptionsMenu/types';
+import { fireEvent, render, waitFor } from 'tests/test-utils';
+
+import LogsFormatOptionsMenu from '../LogsFormatOptionsMenu';
+
+const mockUpdateFormatting = jest.fn();
+
+jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
+	usePreferenceSync: (): any => ({
+		preferences: {
+			columns: [],
+			formatting: {
+				maxLines: 2,
+				format: 'table',
+				fontSize: 'small',
+				version: 1,
+			},
+		},
+		loading: false,
+		error: null,
+		updateColumns: jest.fn(),
+		updateFormatting: mockUpdateFormatting,
+	}),
+}));
+
+describe('LogsFormatOptionsMenu (unit)', () => {
+	beforeEach(() => {
+		mockUpdateFormatting.mockClear();
+	});
+
+	function setup(): {
+		getByTestId: ReturnType<typeof render>['getByTestId'];
+		findItemByLabel: (label: string) => Element | undefined;
+		formatOnChange: jest.Mock<any, any>;
+		maxLinesOnChange: jest.Mock<any, any>;
+		fontSizeOnChange: jest.Mock<any, any>;
+	} {
+		const items = [
+			{ key: 'raw', label: 'Raw', data: { title: 'max lines per row' } },
+			{ key: 'list', label: 'Default' },
+			{ key: 'table', label: 'Column', data: { title: 'columns' } },
+		];
+
+		const formatOnChange = jest.fn();
+		const maxLinesOnChange = jest.fn();
+		const fontSizeOnChange = jest.fn();
+
+		const { getByTestId } = render(
+			<LogsFormatOptionsMenu
+				items={items}
+				selectedOptionFormat="table"
+				config={{
+					format: { value: 'table', onChange: formatOnChange },
+					maxLines: { value: 2, onChange: maxLinesOnChange },
+					fontSize: { value: FontSize.SMALL, onChange: fontSizeOnChange },
+					addColumn: {
+						isFetching: false,
+						value: [],
+						options: [],
+						onFocus: jest.fn(),
+						onBlur: jest.fn(),
+						onSearch: jest.fn(),
+						onSelect: jest.fn(),
+						onRemove: jest.fn(),
+					},
+				}}
+			/>,
+		);
+
+		// Open the popover menu by default for each test
+		const formatButton = getByTestId('periscope-btn-format-options');
+		fireEvent.click(formatButton);
+
+		const getMenuItems = (): Element[] =>
+			Array.from(document.querySelectorAll('.menu-items .item'));
+		const findItemByLabel = (label: string): Element | undefined =>
+			getMenuItems().find((el) => (el.textContent || '').includes(label));
+
+		return {
+			getByTestId,
+			findItemByLabel,
+			formatOnChange,
+			maxLinesOnChange,
+			fontSizeOnChange,
+		};
+	}
+
+	// Covers: opens menu, changes format selection, updates max-lines, changes font size
+	it('opens and toggles format selection', async () => {
+		const { findItemByLabel, formatOnChange } = setup();
+
+		// Assert initial selection
+		const columnItem = findItemByLabel('Column') as Element;
+		expect(document.querySelectorAll('.menu-items .item svg')).toHaveLength(1);
+		expect(columnItem.querySelector('svg')).toBeInTheDocument();
+
+		// Change selection to 'Raw'
+		const rawItem = findItemByLabel('Raw') as Element;
+		fireEvent.click(rawItem as HTMLElement);
+		await waitFor(() => {
+			const rawEl = findItemByLabel('Raw') as Element;
+			expect(document.querySelectorAll('.menu-items .item svg')).toHaveLength(1);
+			expect(rawEl.querySelector('svg')).toBeInTheDocument();
+		});
+		expect(formatOnChange).toHaveBeenCalledWith('raw');
+	});
+
+	it('increments max-lines and calls onChange', async () => {
+		const { maxLinesOnChange } = setup();
+
+		// Increment max lines
+		const input = document.querySelector(
+			'.max-lines-per-row-input input',
+		) as HTMLInputElement;
+		const initial = Number(input.value);
+		const buttons = document.querySelectorAll(
+			'.max-lines-per-row-input .periscope-btn',
+		);
+		const incrementBtn = buttons[1] as HTMLElement;
+		fireEvent.click(incrementBtn);
+
+		await waitFor(() => {
+			expect(Number(input.value)).toBe(initial + 1);
+		});
+		await waitFor(() => {
+			expect(maxLinesOnChange).toHaveBeenCalledWith(initial + 1);
+		});
+	});
+
+	it('changes font size to MEDIUM and calls onChange', async () => {
+		const { fontSizeOnChange } = setup();
+		// Open font dropdown
+		const fontButton = document.querySelector(
+			'.font-size-container .value',
+		) as HTMLElement;
+		fireEvent.click(fontButton);
+
+		// Choose MEDIUM
+		const optionButtons = Array.from(
+			document.querySelectorAll('.font-size-dropdown .option-btn'),
+		);
+		const mediumBtn = optionButtons[1] as HTMLElement;
+		fireEvent.click(mediumBtn);
+
+		await waitFor(() => {
+			expect(
+				document.querySelectorAll('.font-size-dropdown .option-btn .icon'),
+			).toHaveLength(1);
+			expect(
+				(optionButtons[1] as Element).querySelector('.icon'),
+			).toBeInTheDocument();
+		});
+		await waitFor(() => {
+			expect(fontSizeOnChange).toHaveBeenCalledWith(FontSize.MEDIUM);
+		});
+	});
+});
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
@@ -97,7 +97,7 @@ function QuerySearch({
 	onRun?: (query: string) => void;
 }): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-	const [query, setQuery] = useState<string>('');
+	const [query, setQuery] = useState<string>(queryData.filter?.expression || '');
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
 	const [activeKey, setActiveKey] = useState<string>('');
 	const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
@@ -108,10 +108,6 @@ function QuerySearch({
 		errors: [],
 	});

-	const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });
-	const [isFocused, setIsFocused] = useState(false);
-	const [hasInteractedWithQB, setHasInteractedWithQB] = useState(false);
-
 	const handleQueryValidation = (newQuery: string): void => {
 		try {
 			const validationResponse = validateQuery(newQuery);
@@ -131,28 +127,13 @@ function QuerySearch({

 	useEffect(() => {
 		const newQuery = queryData.filter?.expression || '';
-		// Only update query from external source when editor is not focused
-		// When focused, just update the lastExternalQuery to track changes
+		// Only mark as external change if the query actually changed from external source
 		if (newQuery !== lastExternalQuery) {
 			setQuery(newQuery);
 			setIsExternalQueryChange(true);
 			setLastExternalQuery(newQuery);
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [queryData.filter?.expression]);
-
-	useEffect(() => {
-		// Update the query when the editor is blurred and the query has changed
-		// Only call onChange if the editor has been focused before (not on initial mount)
-		if (
-			!isFocused &&
-			hasInteractedWithQB &&
-			query !== queryData.filter?.expression
-		) {
-			onChange(query);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isFocused]);
+	}, [queryData.filter?.expression, lastExternalQuery]);

 	// Validate query when it changes externally (from queryData)
 	useEffect(() => {
@@ -168,6 +149,9 @@ function QuerySearch({

 	const [showExamples] = useState(false);

+	const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });
+	const [isFocused, setIsFocused] = useState(false);
+
 	const [
 		isFetchingCompleteValuesList,
 		setIsFetchingCompleteValuesList,
@@ -181,9 +165,6 @@ function QuerySearch({
 	const lastFetchedKeyRef = useRef<string>('');
 	const lastValueRef = useRef<string>('');
 	const isMountedRef = useRef<boolean>(true);
-	const [shouldRunQueryPostUpdate, setShouldRunQueryPostUpdate] = useState(
-		false,
-	);

 	const { handleRunQuery } = useQueryBuilder();

@@ -229,7 +210,6 @@ function QuerySearch({

 			return (): void => clearTimeout(timeoutId);
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[isFocused],
 	);

@@ -575,6 +555,7 @@ function QuerySearch({

 	const handleChange = (value: string): void => {
 		setQuery(value);
+		onChange(value);
 		// Mark as internal change to avoid triggering external validation
 		setIsExternalQueryChange(false);
 		// Update lastExternalQuery to prevent external validation trigger
@@ -1238,25 +1219,6 @@ function QuerySearch({
 		</div>
 	);

-	// Effect to handle query run after update
-	useEffect(
-		() => {
-			// Only run the query post updating the filter expression.
-			// This runs the query in the next update cycle of react, when it's guaranteed that the query is updated.
-			// Because both the things are sequential and react batches the updates so it was still taking the old query.
-			if (shouldRunQueryPostUpdate) {
-				if (onRun && typeof onRun === 'function') {
-					onRun(query);
-				} else {
-					handleRunQuery();
-				}
-				setShouldRunQueryPostUpdate(false);
-			}
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[shouldRunQueryPostUpdate, handleRunQuery, onRun],
-	);
-
 	return (
 		<div className="code-mirror-where-clause">
 			{editingMode && (
@@ -1331,7 +1293,6 @@ function QuerySearch({
 					theme={isDarkMode ? copilot : githubLight}
 					onChange={handleChange}
 					onUpdate={handleUpdate}
-					data-testid="query-where-clause-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
@@ -1368,14 +1329,11 @@ function QuerySearch({
 									// and instead run a custom action
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
-										if (
-											onChange &&
-											typeof onChange === 'function' &&
-											query !== queryData.filter?.expression
-										) {
-											onChange(query);
+										if (onRun && typeof onRun === 'function') {
+											onRun(query);
+										} else {
+											handleRunQuery();
 										}
-										setShouldRunQueryPostUpdate(true);
 										return true;
 									},
 								},
@@ -1394,13 +1352,8 @@ function QuerySearch({
 					}}
 					onFocus={(): void => {
 						setIsFocused(true);
-						setHasInteractedWithQB(true);
 					}}
 					onBlur={handleBlur}
-					onCreateEditor={(view: EditorView): EditorView => {
-						editorRef.current = view;
-						return view;
-					}}
 				/>

 				{query && validation.isValid === false && !isFocused && (
--- a/frontend/src/components/QueryBuilderV2/QueryV2/tests/QuerySearch.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/tests/QuerySearch.test.tsx
@@ -222,28 +222,6 @@ describe('QuerySearch', () => {
 		expect(screen.getByPlaceholderText(PLACEHOLDER_TEXT)).toBeInTheDocument();
 	});

-	it('calls onChange on blur after user edits', async () => {
-		const handleChange = jest.fn() as jest.MockedFunction<(v: string) => void>;
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<QuerySearch
-				onChange={handleChange}
-				queryData={initialQueriesMap.metrics.builder.queryData[0]}
-				dataSource={DataSource.METRICS}
-			/>,
-		);
-
-		const editor = screen.getByTestId(TESTID_EDITOR);
-		await user.click(editor);
-		await user.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
-		// Blur triggers validation + onChange (only if focused at least once and value changed)
-		editor.blur();
-
-		await waitFor(() => expect(handleChange).toHaveBeenCalledTimes(1));
-		expect(handleChange.mock.calls[0][0]).toContain("service.name = 'frontend'");
-	});
-
 	it('fetches key suggestions when typing a key (debounced)', async () => {
 		jest.useFakeTimers();
 		const advance = (ms: number): void => {
--- a/frontend/src/components/RouteTab/RouteTab.test.tsx
+++ b/frontend/src/components/RouteTab/RouteTab.test.tsx
@@ -1,6 +1,6 @@
-import { fireEvent, render, screen } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
+import { fireEvent, render, screen } from 'tests/test-utils';

 import RouteTab from './index';
 import { RouteTabProps } from './types';
--- a/frontend/src/components/RouteTab/index.tsx
+++ b/frontend/src/components/RouteTab/index.tsx
@@ -61,8 +61,6 @@ function RouteTab({
 			defaultActiveKey={currentRoute?.key || activeKey}
 			animated
 			items={items}
-			// eslint-disable-next-line react/jsx-props-no-spreading
-			{...rest}
 			tabBarExtraContent={
 				showRightSection && (
 					<HeaderRightSection
@@ -72,6 +70,8 @@ function RouteTab({
 					/>
 				)
 			}
+			// eslint-disable-next-line react/jsx-props-no-spreading ---- TODO: remove this once follow the linting rules
+			{...rest}
 		/>
 	);
 }
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -86,4 +86,7 @@ export const REACT_QUERY_KEY = {
 	SPAN_LOGS: 'SPAN_LOGS',
 	SPAN_BEFORE_LOGS: 'SPAN_BEFORE_LOGS',
 	SPAN_AFTER_LOGS: 'SPAN_AFTER_LOGS',
+
+	// Routing Policies Query Keys
+	GET_ROUTING_POLICIES: 'GET_ROUTING_POLICIES',
 } as const;
--- a/frontend/src/container/AllError/index.tsx
+++ b/frontend/src/container/AllError/index.tsx
@@ -482,7 +482,7 @@ function AllErrors(): JSX.Element {
 			pagination={{
 				pageSize: getUpdatedPageSize,
 				responsive: true,
-				current: getUpdatedOffset / 10 + 1,
+				current: Math.floor(getUpdatedOffset / getUpdatedPageSize) + 1,
 				position: ['bottomLeft'],
 				total: errorCountResponse.data?.payload || 0,
 			}}
--- a/frontend/src/container/AllError/tests/AllError.test.tsx
+++ b/frontend/src/container/AllError/tests/AllError.test.tsx
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';

-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ENVIRONMENT } from 'constants/env';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
@@ -137,4 +137,70 @@ describe('Exceptions - All Errors', () => {
 			}),
 		);
 	});
+
+	describe('pagination edge cases', () => {
+		it('should navigate to page 2 when pageSize=100 and clicking next', async () => {
+			// Arrange: start with pageSize=100 and offset=0
+			render(
+				<Exceptions
+					initUrl={[
+						`/exceptions?pageSize=100&offset=0&order=ascending&orderParam=serviceName`,
+					]}
+				/>,
+			);
+
+			// Wait for initial load
+			await screen.findByText(/redis timeout/i);
+
+			const nextPageItem = screen.getByTitle('Next Page');
+			const nextPageButton = nextPageItem.querySelector(
+				'button',
+			) as HTMLButtonElement;
+			fireEvent.click(nextPageButton);
+
+			await waitFor(() => {
+				const qp = new URLSearchParams(window.location.search);
+				expect(qp.get('offset')).toBe('100');
+			});
+			const queryParams = new URLSearchParams(window.location.search);
+			expect(queryParams.get('pageSize')).toBe('100');
+			expect(queryParams.get('offset')).toBe('100');
+		});
+
+		it('initializes current page from URL (offset/pageSize)', async () => {
+			// offset=100, pageSize=100 => current page should be 2
+			render(
+				<Exceptions
+					initUrl={[
+						`/exceptions?pageSize=100&offset=100&order=ascending&orderParam=serviceName`,
+					]}
+				/>,
+			);
+			await screen.findByText(/redis timeout/i);
+			const activeItem = document.querySelector('.ant-pagination-item-active');
+			expect(activeItem?.textContent).toBe('2');
+			const qp = new URLSearchParams(window.location.search);
+			expect(qp.get('pageSize')).toBe('100');
+			expect(qp.get('offset')).toBe('100');
+		});
+
+		it('clicking a numbered page updates offset correctly', async () => {
+			// pageSize=100, click page 3 => offset = 200
+			render(
+				<Exceptions
+					initUrl={[
+						`/exceptions?pageSize=100&offset=0&order=ascending&orderParam=serviceName`,
+					]}
+				/>,
+			);
+			await screen.findByText(/redis timeout/i);
+			const page3Item = screen.getByTitle('3');
+			const page3Anchor = page3Item.querySelector('a') as HTMLAnchorElement;
+			fireEvent.click(page3Anchor);
+			await waitFor(() => {
+				const qp = new URLSearchParams(window.location.search);
+				expect(qp.get('offset')).toBe('200');
+			});
+		});
+	});
 });
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx
@@ -1,6 +1,7 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin, Switch, Table, Tooltip, Typography } from 'antd';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
+import { withErrorBoundary } from 'components/ErrorBoundaryHOC';
 import { DEFAULT_ENTITY_VERSION, ENTITY_VERSION_V4 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
@@ -248,4 +249,4 @@ function TopErrors({
 	);
 }

-export default TopErrors;
+export default withErrorBoundary(TopErrors);
--- a/frontend/src/container/CreateAlertRule/index.tsx
+++ b/frontend/src/container/CreateAlertRule/index.tsx
@@ -2,6 +2,7 @@ import { Form, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
+import CreateAlertV2 from 'container/CreateAlertV2';
 import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
@@ -125,6 +126,16 @@ function CreateRules(): JSX.Element {
 		);
 	}

+	const showNewCreateAlertsPageFlag =
+		queryParams.get('showNewCreateAlertsPage') === 'true';
+
+	if (
+		showNewCreateAlertsPageFlag &&
+		alertType !== AlertTypes.ANOMALY_BASED_ALERT
+	) {
+		return <CreateAlertV2 alertType={alertType} />;
+	}
+
 	return (
 		<FormAlertRules
 			alertType={alertType}
--- a/frontend/src/container/CreateAlertV2/AlertCondition/AlertCondition.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/AlertCondition.tsx
@@ -1,21 +1,34 @@
 import './styles.scss';

 import { Button, Tooltip } from 'antd';
+import getAllChannels from 'api/channels/getAll';
 import classNames from 'classnames';
-import { Activity, ChartLine } from 'lucide-react';
+import { ChartLine } from 'lucide-react';
+import { useQuery } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
+import { Channels } from 'types/api/channels/getAll';
+import APIError from 'types/api/error';

 import { useCreateAlertState } from '../context';
 import AdvancedOptions from '../EvaluationSettings/AdvancedOptions';
 import Stepper from '../Stepper';
-import { showCondensedLayout } from '../utils';
 import AlertThreshold from './AlertThreshold';
 import AnomalyThreshold from './AnomalyThreshold';
 import { ANOMALY_TAB_TOOLTIP, THRESHOLD_TAB_TOOLTIP } from './constants';

 function AlertCondition(): JSX.Element {
 	const { alertType, setAlertType } = useCreateAlertState();
-	const showCondensedLayoutFlag = showCondensedLayout();
+
+	const {
+		data,
+		isLoading: isLoadingChannels,
+		isError: isErrorChannels,
+		refetch: refreshChannels,
+	} = useQuery<SuccessResponseV2<Channels[]>, APIError>(['getChannels'], {
+		queryFn: () => getAllChannels(),
+	});
+	const channels = data?.data || [];

 	const showMultipleTabs =
 		alertType === AlertTypes.ANOMALY_BASED_ALERT ||
@@ -27,15 +40,16 @@ function AlertCondition(): JSX.Element {
 			icon: <ChartLine size={14} data-testid="threshold-view" />,
 			value: AlertTypes.METRICS_BASED_ALERT,
 		},
-		...(showMultipleTabs
-			? [
-					{
-						label: 'Anomaly',
-						icon: <Activity size={14} data-testid="anomaly-view" />,
-						value: AlertTypes.ANOMALY_BASED_ALERT,
-					},
-			  ]
-			: []),
+		// Hide anomaly tab for now
+		// ...(showMultipleTabs
+		// 	? [
+		// 			{
+		// 				label: 'Anomaly',
+		// 				icon: <Activity size={14} data-testid="anomaly-view" />,
+		// 				value: AlertTypes.ANOMALY_BASED_ALERT,
+		// 			},
+		// 	  ]
+		// 	: []),
 	];

 	const handleAlertTypeChange = (value: AlertTypes): void => {
@@ -76,13 +90,25 @@ function AlertCondition(): JSX.Element {
 					))}
 				</div>
 			</div>
-			{alertType !== AlertTypes.ANOMALY_BASED_ALERT && <AlertThreshold />}
-			{alertType === AlertTypes.ANOMALY_BASED_ALERT && <AnomalyThreshold />}
-			{showCondensedLayoutFlag ? (
-				<div className="condensed-advanced-options-container">
-					<AdvancedOptions />
-				</div>
-			) : null}
+			{alertType !== AlertTypes.ANOMALY_BASED_ALERT && (
+				<AlertThreshold
+					channels={channels}
+					isLoadingChannels={isLoadingChannels}
+					isErrorChannels={isErrorChannels}
+					refreshChannels={refreshChannels}
+				/>
+			)}
+			{alertType === AlertTypes.ANOMALY_BASED_ALERT && (
+				<AnomalyThreshold
+					channels={channels}
+					isLoadingChannels={isLoadingChannels}
+					isErrorChannels={isErrorChannels}
+					refreshChannels={refreshChannels}
+				/>
+			)}
+			<div className="condensed-advanced-options-container">
+				<AdvancedOptions />
+			</div>
 		</div>
 	);
 }
--- a/frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx
@@ -1,14 +1,13 @@
 import './styles.scss';
+import '../EvaluationSettings/styles.scss';

-import { Button, Select, Typography } from 'antd';
-import getAllChannels from 'api/channels/getAll';
+import { Button, Select, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import getRandomColor from 'lib/getRandomColor';
 import { Plus } from 'lucide-react';
-import { useQuery } from 'react-query';
-import { SuccessResponseV2 } from 'types/api';
-import { Channels } from 'types/api/channels/getAll';
-import APIError from 'types/api/error';
+import { useEffect } from 'react';
+import { v4 } from 'uuid';

 import { useCreateAlertState } from '../context';
 import {
@@ -19,34 +18,47 @@ import {
 	THRESHOLD_OPERATOR_OPTIONS,
 } from '../context/constants';
 import EvaluationSettings from '../EvaluationSettings/EvaluationSettings';
-import { showCondensedLayout } from '../utils';
 import ThresholdItem from './ThresholdItem';
-import { UpdateThreshold } from './types';
+import { AnomalyAndThresholdProps, UpdateThreshold } from './types';
 import {
 	getCategoryByOptionId,
 	getCategorySelectOptionByName,
+	getMatchTypeTooltip,
 	getQueryNames,
+	RoutingPolicyBanner,
 } from './utils';

-function AlertThreshold(): JSX.Element {
+function AlertThreshold({
+	channels,
+	isLoadingChannels,
+	isErrorChannels,
+	refreshChannels,
+}: AnomalyAndThresholdProps): JSX.Element {
 	const {
 		alertState,
 		thresholdState,
 		setThresholdState,
+		notificationSettings,
+		setNotificationSettings,
 	} = useCreateAlertState();
-	const { data, isLoading: isLoadingChannels } = useQuery<
-		SuccessResponseV2<Channels[]>,
-		APIError
-	>(['getChannels'], {
-		queryFn: () => getAllChannels(),
-	});
-	const showCondensedLayoutFlag = showCondensedLayout();
-	const channels = data?.data || [];

 	const { currentQuery } = useQueryBuilder();

 	const queryNames = getQueryNames(currentQuery);

+	useEffect(() => {
+		if (
+			queryNames.length > 0 &&
+			!queryNames.some((query) => query.value === thresholdState.selectedQuery)
+		) {
+			setThresholdState({
+				type: 'SET_SELECTED_QUERY',
+				payload: queryNames[0].value,
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [queryNames, thresholdState.selectedQuery]);
+
 	const selectedCategory = getCategoryByOptionId(alertState.yAxisUnit || '');
 	const categorySelectOptions = getCategorySelectOptionByName(
 		selectedCategory || '',
@@ -55,11 +67,15 @@ function AlertThreshold(): JSX.Element {
 	const addThreshold = (): void => {
 		let newThreshold;
 		if (thresholdState.thresholds.length === 1) {
-			newThreshold = INITIAL_WARNING_THRESHOLD;
+			newThreshold = { ...INITIAL_WARNING_THRESHOLD, id: v4() };
 		} else if (thresholdState.thresholds.length === 2) {
-			newThreshold = INITIAL_INFO_THRESHOLD;
+			newThreshold = { ...INITIAL_INFO_THRESHOLD, id: v4() };
 		} else {
-			newThreshold = INITIAL_RANDOM_THRESHOLD;
+			newThreshold = {
+				...INITIAL_RANDOM_THRESHOLD,
+				id: v4(),
+				color: getRandomColor(),
+			};
 		}
 		setThresholdState({
 			type: 'SET_THRESHOLDS',
@@ -85,17 +101,71 @@ function AlertThreshold(): JSX.Element {
 		});
 	};

-	const evaluationWindowContext = showCondensedLayoutFlag ? (
-		<EvaluationSettings />
-	) : (
-		<strong>Evaluation Window.</strong>
+	const onTooltipOpenChange = (open: boolean): void => {
+		// Stop propagation of click events on tooltip text to dropdown
+		if (open) {
+			setTimeout(() => {
+				const tooltipElement = document.querySelector(
+					'.copyable-tooltip .ant-tooltip-inner',
+				);
+				if (tooltipElement) {
+					tooltipElement.addEventListener(
+						'click',
+						(e) => {
+							e.stopPropagation();
+							e.preventDefault();
+						},
+						true,
+					);
+					tooltipElement.addEventListener(
+						'mousedown',
+						(e) => {
+							e.stopPropagation();
+							e.preventDefault();
+						},
+						true,
+					);
+				}
+			}, 0);
+		}
+	};
+
+	const matchTypeOptionsWithTooltips = THRESHOLD_MATCH_TYPE_OPTIONS.map(
+		(option) => ({
+			...option,
+			label: (
+				<Tooltip
+					title={getMatchTypeTooltip(option.value, thresholdState.operator)}
+					placement="left"
+					overlayClassName="copyable-tooltip"
+					overlayStyle={{
+						maxWidth: '450px',
+						minWidth: '400px',
+					}}
+					overlayInnerStyle={{
+						padding: '12px 16px',
+						userSelect: 'text',
+						WebkitUserSelect: 'text',
+						MozUserSelect: 'text',
+						msUserSelect: 'text',
+					}}
+					mouseEnterDelay={0.2}
+					trigger={['hover', 'click']}
+					destroyTooltipOnHide={false}
+					onOpenChange={onTooltipOpenChange}
+				>
+					<span style={{ display: 'block', width: '100%' }}>{option.label}</span>
+				</Tooltip>
+			),
+		}),
 	);

 	return (
 		<div
-			className={classNames('alert-threshold-container', {
-				'condensed-alert-threshold-container': showCondensedLayoutFlag,
-			})}
+			className={classNames(
+				'alert-threshold-container',
+				'condensed-alert-threshold-container',
+			)}
 		>
 			{/* Main condition sentence */}
 			<div className="alert-condition-sentences">
@@ -114,8 +184,7 @@ function AlertThreshold(): JSX.Element {
 						style={{ width: 80 }}
 						options={queryNames}
 					/>
-				</div>
-				<div className="alert-condition-sentence">
+					<Typography.Text className="sentence-text">is</Typography.Text>
 					<Select
 						value={thresholdState.operator}
 						onChange={(value): void => {
@@ -124,7 +193,7 @@ function AlertThreshold(): JSX.Element {
 								payload: value,
 							});
 						}}
-						style={{ width: 120 }}
+						style={{ width: 180 }}
 						options={THRESHOLD_OPERATOR_OPTIONS}
 					/>
 					<Typography.Text className="sentence-text">
@@ -138,11 +207,11 @@ function AlertThreshold(): JSX.Element {
 								payload: value,
 							});
 						}}
-						style={{ width: 140 }}
-						options={THRESHOLD_MATCH_TYPE_OPTIONS}
+						style={{ width: 180 }}
+						options={matchTypeOptionsWithTooltips}
 					/>
 					<Typography.Text className="sentence-text">
-						during the {evaluationWindowContext}
+						during the <EvaluationSettings />
 					</Typography.Text>
 				</div>
 			</div>
@@ -158,6 +227,8 @@ function AlertThreshold(): JSX.Element {
 						channels={channels}
 						isLoadingChannels={isLoadingChannels}
 						units={categorySelectOptions}
+						isErrorChannels={isErrorChannels}
+						refreshChannels={refreshChannels}
 					/>
 				))}
 				<Button
@@ -169,6 +240,11 @@ function AlertThreshold(): JSX.Element {
 					Add Threshold
 				</Button>
 			</div>
+
+			<RoutingPolicyBanner
+				notificationSettings={notificationSettings}
+				setNotificationSettings={setNotificationSettings}
+			/>
 		</div>
 	);
 }
--- a/frontend/src/container/CreateAlertV2/AlertCondition/AnomalyThreshold.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/AnomalyThreshold.tsx
@@ -1,5 +1,6 @@
 import { Select, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useAppContext } from 'providers/App/App';
 import { useMemo } from 'react';

 import { useCreateAlertState } from '../context';
@@ -10,10 +11,26 @@ import {
 	ANOMALY_THRESHOLD_OPERATOR_OPTIONS,
 	ANOMALY_TIME_DURATION_OPTIONS,
 } from '../context/constants';
-import { getQueryNames } from './utils';
+import { AnomalyAndThresholdProps } from './types';
+import {
+	getQueryNames,
+	NotificationChannelsNotFoundContent,
+	RoutingPolicyBanner,
+} from './utils';

-function AnomalyThreshold(): JSX.Element {
-	const { thresholdState, setThresholdState } = useCreateAlertState();
+function AnomalyThreshold({
+	channels,
+	isLoadingChannels,
+	isErrorChannels,
+	refreshChannels,
+}: AnomalyAndThresholdProps): JSX.Element {
+	const { user } = useAppContext();
+	const {
+		thresholdState,
+		setThresholdState,
+		notificationSettings,
+		setNotificationSettings,
+	} = useCreateAlertState();

 	const { currentQuery } = useQueryBuilder();

@@ -27,7 +44,11 @@ function AnomalyThreshold(): JSX.Element {
 		return options;
 	}, []);

-	const updateThreshold = (id: string, field: string, value: string): void => {
+	const updateThreshold = (
+		id: string,
+		field: string,
+		value: string | string[],
+	): void => {
 		setThresholdState({
 			type: 'SET_THRESHOLDS',
 			payload: thresholdState.thresholds.map((t) =>
@@ -53,7 +74,6 @@ function AnomalyThreshold(): JSX.Element {
 								payload: value,
 							});
 						}}
-						style={{ width: 80 }}
 						options={queryNames}
 					/>
 					<Typography.Text
@@ -71,12 +91,11 @@ function AnomalyThreshold(): JSX.Element {
 								payload: value,
 							});
 						}}
-						style={{ width: 80 }}
 						options={ANOMALY_TIME_DURATION_OPTIONS}
 					/>
 				</div>
-				{/* Sentence 2 */}
 				<div className="alert-condition-sentence">
+					{/* Sentence 2 */}
 					<Typography.Text data-testid="threshold-text" className="sentence-text">
 						is
 					</Typography.Text>
@@ -90,7 +109,6 @@ function AnomalyThreshold(): JSX.Element {
 								value.toString(),
 							);
 						}}
-						style={{ width: 80 }}
 						options={deviationOptions}
 					/>
 					<Typography.Text data-testid="deviations-text" className="sentence-text">
@@ -105,7 +123,6 @@ function AnomalyThreshold(): JSX.Element {
 								payload: value,
 							});
 						}}
-						style={{ width: 80 }}
 						options={ANOMALY_THRESHOLD_OPERATOR_OPTIONS}
 					/>
 					<Typography.Text
@@ -123,7 +140,6 @@ function AnomalyThreshold(): JSX.Element {
 								payload: value,
 							});
 						}}
-						style={{ width: 80 }}
 						options={ANOMALY_THRESHOLD_MATCH_TYPE_OPTIONS}
 					/>
 				</div>
@@ -141,7 +157,6 @@ function AnomalyThreshold(): JSX.Element {
 								payload: value,
 							});
 						}}
-						style={{ width: 80 }}
 						options={ANOMALY_ALGORITHM_OPTIONS}
 					/>
 					<Typography.Text
@@ -159,14 +174,58 @@ function AnomalyThreshold(): JSX.Element {
 								payload: value,
 							});
 						}}
-						style={{ width: 80 }}
 						options={ANOMALY_SEASONALITY_OPTIONS}
 					/>
-					<Typography.Text data-testid="seasonality-text" className="sentence-text">
-						seasonality
-					</Typography.Text>
+					{notificationSettings.routingPolicies ? (
+						<>
+							<Typography.Text
+								data-testid="seasonality-text"
+								className="sentence-text"
+							>
+								seasonality to
+							</Typography.Text>
+							<Select
+								value={thresholdState.thresholds[0].channels}
+								onChange={(value): void =>
+									updateThreshold(thresholdState.thresholds[0].id, 'channels', value)
+								}
+								style={{ width: 350 }}
+								options={channels.map((channel) => ({
+									value: channel.id,
+									label: channel.name,
+								}))}
+								mode="multiple"
+								placeholder="Select notification channels"
+								showSearch
+								maxTagCount={2}
+								maxTagPlaceholder={(omittedValues): string =>
+									`+${omittedValues.length} more`
+								}
+								maxTagTextLength={10}
+								filterOption={(input, option): boolean =>
+									option?.label?.toLowerCase().includes(input.toLowerCase()) || false
+								}
+								status={isErrorChannels ? 'error' : undefined}
+								disabled={isLoadingChannels}
+								notFoundContent={
+									<NotificationChannelsNotFoundContent
+										user={user}
+										refreshChannels={refreshChannels}
+									/>
+								}
+							/>
+						</>
+					) : (
+						<Typography.Text data-testid="seasonality-text" className="sentence-text">
+							seasonality
+						</Typography.Text>
+					)}
 				</div>
 			</div>
+			<RoutingPolicyBanner
+				notificationSettings={notificationSettings}
+				setNotificationSettings={setNotificationSettings}
+			/>
 		</div>
 	);
 }
--- a/frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx
@@ -1,8 +1,12 @@
-import { Button, Input, Select, Space, Tooltip, Typography } from 'antd';
-import { ChartLine, CircleX } from 'lucide-react';
+import { Button, Input, Select, Tooltip, Typography } from 'antd';
+import { CircleX, Trash } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
 import { useMemo, useState } from 'react';

+import { useCreateAlertState } from '../context';
+import { AlertThresholdOperator } from '../context/types';
 import { ThresholdItemProps } from './types';
+import { NotificationChannelsNotFoundContent } from './utils';

 function ThresholdItem({
 	threshold,
@@ -11,7 +15,12 @@ function ThresholdItem({
 	showRemoveButton,
 	channels,
 	units,
+	isErrorChannels,
+	refreshChannels,
+	isLoadingChannels,
 }: ThresholdItemProps): JSX.Element {
+	const { user } = useAppContext();
+	const { thresholdState, notificationSettings } = useCreateAlertState();
 	const [showRecoveryThreshold, setShowRecoveryThreshold] = useState(false);

 	const yAxisUnitSelect = useMemo(() => {
@@ -45,6 +54,31 @@ function ThresholdItem({
 		return component;
 	}, [units, threshold.unit, updateThreshold, threshold.id]);

+	const getOperatorSymbol = (): string => {
+		switch (thresholdState.operator) {
+			case AlertThresholdOperator.IS_ABOVE:
+				return '>';
+			case AlertThresholdOperator.IS_BELOW:
+				return '<';
+			case AlertThresholdOperator.IS_EQUAL_TO:
+				return '=';
+			case AlertThresholdOperator.IS_NOT_EQUAL_TO:
+				return '!=';
+			default:
+				return '';
+		}
+	};
+
+	// const addRecoveryThreshold = (): void => {
+	// 	setShowRecoveryThreshold(true);
+	// 	updateThreshold(threshold.id, 'recoveryThresholdValue', 0);
+	// };
+
+	const removeRecoveryThreshold = (): void => {
+		setShowRecoveryThreshold(false);
+		updateThreshold(threshold.id, 'recoveryThresholdValue', null);
+	};
+
 	return (
 		<div key={threshold.id} className="threshold-item">
 			<div className="threshold-row">
@@ -54,80 +88,111 @@ function ThresholdItem({
 						style={{ backgroundColor: threshold.color }}
 					/>
 				</div>
-				<Space className="threshold-controls">
-					<div className="threshold-inputs">
-						<Input.Group>
-							<Input
-								placeholder="Enter threshold name"
-								value={threshold.label}
-								onChange={(e): void =>
-									updateThreshold(threshold.id, 'label', e.target.value)
-								}
-								style={{ width: 260 }}
-							/>
-							<Input
-								placeholder="Enter threshold value"
-								value={threshold.thresholdValue}
-								onChange={(e): void =>
-									updateThreshold(threshold.id, 'thresholdValue', e.target.value)
-								}
-								style={{ width: 210 }}
-							/>
-							{yAxisUnitSelect}
-						</Input.Group>
-					</div>
-					<Typography.Text className="sentence-text">to</Typography.Text>
-					<Select
-						value={threshold.channels}
-						onChange={(value): void =>
-							updateThreshold(threshold.id, 'channels', value)
+				<div className="threshold-controls">
+					<Input
+						placeholder="Enter threshold name"
+						value={threshold.label}
+						onChange={(e): void =>
+							updateThreshold(threshold.id, 'label', e.target.value)
 						}
-						style={{ width: 260 }}
-						options={channels.map((channel) => ({
-							value: channel.id,
-							label: channel.name,
-						}))}
-						mode="multiple"
-						placeholder="Select notification channels"
+						style={{ width: 200 }}
 					/>
+					<Typography.Text className="sentence-text">on value</Typography.Text>
+					<Typography.Text className="sentence-text highlighted-text">
+						{getOperatorSymbol()}
+					</Typography.Text>
+					<Input
+						placeholder="Enter threshold value"
+						value={threshold.thresholdValue}
+						onChange={(e): void =>
+							updateThreshold(threshold.id, 'thresholdValue', e.target.value)
+						}
+						style={{ width: 100 }}
+						type="number"
+					/>
+					{yAxisUnitSelect}
+					{!notificationSettings.routingPolicies && (
+						<>
+							<Typography.Text className="sentence-text">send to</Typography.Text>
+							<Select
+								value={threshold.channels}
+								onChange={(value): void =>
+									updateThreshold(threshold.id, 'channels', value)
+								}
+								style={{ width: 350 }}
+								options={channels.map((channel) => ({
+									value: channel.name,
+									label: channel.name,
+								}))}
+								mode="multiple"
+								placeholder="Select notification channels"
+								showSearch
+								maxTagCount={2}
+								maxTagPlaceholder={(omittedValues): string =>
+									`+${omittedValues.length} more`
+								}
+								maxTagTextLength={10}
+								filterOption={(input, option): boolean =>
+									option?.label?.toLowerCase().includes(input.toLowerCase()) || false
+								}
+								status={isErrorChannels ? 'error' : undefined}
+								disabled={isLoadingChannels}
+								notFoundContent={
+									<NotificationChannelsNotFoundContent
+										user={user}
+										refreshChannels={refreshChannels}
+									/>
+								}
+							/>
+						</>
+					)}
+					{showRecoveryThreshold && (
+						<>
+							<Typography.Text className="sentence-text">recover on</Typography.Text>
+							<Input
+								placeholder="Enter recovery threshold value"
+								value={threshold.recoveryThresholdValue ?? ''}
+								onChange={(e): void =>
+									updateThreshold(threshold.id, 'recoveryThresholdValue', e.target.value)
+								}
+								style={{ width: 100 }}
+								type="number"
+							/>
+							<Tooltip title="Remove recovery threshold">
+								<Button
+									type="default"
+									icon={<Trash size={16} />}
+									onClick={removeRecoveryThreshold}
+									className="icon-btn"
+								/>
+							</Tooltip>
+						</>
+					)}
 					<Button.Group>
-						{!showRecoveryThreshold && (
-							<Button
-								type="default"
-								icon={<ChartLine size={16} />}
-								className="icon-btn"
-								onClick={(): void => setShowRecoveryThreshold(true)}
-							/>
-						)}
+						{/* TODO: Add recovery threshold back once the functionality is implemented */}
+						{/* {!showRecoveryThreshold && (
+							<Tooltip title="Add recovery threshold">
+								<Button
+									type="default"
+									icon={<ChartLine size={16} />}
+									className="icon-btn"
+									onClick={addRecoveryThreshold}
+								/>
+							</Tooltip>
+						)} */}
 						{showRemoveButton && (
-							<Button
-								type="default"
-								icon={<CircleX size={16} />}
-								onClick={(): void => removeThreshold(threshold.id)}
-								className="icon-btn"
-							/>
+							<Tooltip title="Remove threshold">
+								<Button
+									type="default"
+									icon={<CircleX size={16} />}
+									onClick={(): void => removeThreshold(threshold.id)}
+									className="icon-btn"
+								/>
+							</Tooltip>
 						)}
 					</Button.Group>
-				</Space>
+				</div>
 			</div>
-			{showRecoveryThreshold && (
-				<Input.Group className="recovery-threshold-input-group">
-					<Input
-						placeholder="Recovery threshold"
-						disabled
-						style={{ width: 260 }}
-						className="recovery-threshold-label"
-					/>
-					<Input
-						placeholder="Enter recovery threshold value"
-						value={threshold.recoveryThresholdValue}
-						onChange={(e): void =>
-							updateThreshold(threshold.id, 'recoveryThresholdValue', e.target.value)
-						}
-						style={{ width: 210 }}
-					/>
-				</Input.Group>
-			)}
 		</div>
 	);
 }
--- a/frontend/src/container/CreateAlertV2/AlertCondition/tests/AlertCondition.test.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/tests/AlertCondition.test.tsx
@@ -3,6 +3,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { MemoryRouter } from 'react-router-dom';
+import { AlertTypes } from 'types/api/alerts/alertTypes';

 import { CreateAlertProvider } from '../../context';
 import AlertCondition from '../AlertCondition';
@@ -105,7 +106,7 @@ const renderAlertCondition = (
 	return render(
 		<MemoryRouter initialEntries={initialEntries}>
 			<QueryClientProvider client={queryClient}>
-				<CreateAlertProvider>
+				<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
 					<AlertCondition />
 				</CreateAlertProvider>
 			</QueryClientProvider>
@@ -126,9 +127,10 @@ describe('AlertCondition', () => {

 		// Verify default alertType is METRICS_BASED_ALERT (shows AlertThreshold component)
 		expect(screen.getByTestId(ALERT_THRESHOLD_TEST_ID)).toBeInTheDocument();
-		expect(
-			screen.queryByTestId(ANOMALY_THRESHOLD_TEST_ID),
-		).not.toBeInTheDocument();
+		// TODO: uncomment this when anomaly tab is implemented
+		// expect(
+		// 	screen.queryByTestId(ANOMALY_THRESHOLD_TEST_ID),
+		// ).not.toBeInTheDocument();

 		// Verify threshold tab is active by default
 		const thresholdTab = screen.getByText(THRESHOLD_TAB_TEXT);
@@ -136,7 +138,8 @@ describe('AlertCondition', () => {

 		// Verify both tabs are visible (METRICS_BASED_ALERT supports multiple tabs)
 		expect(screen.getByText(THRESHOLD_TAB_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
+		// TODO: uncomment this when anomaly tab is implemented
+		// expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
 	});

 	it('renders threshold tab by default', () => {
@@ -151,7 +154,8 @@ describe('AlertCondition', () => {
 		).not.toBeInTheDocument();
 	});

-	it('renders anomaly tab when alert type supports multiple tabs', () => {
+	// TODO: Unskip this when anomaly tab is implemented
+	it.skip('renders anomaly tab when alert type supports multiple tabs', () => {
 		renderAlertCondition();
 		expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
 		expect(screen.getByTestId(ANOMALY_VIEW_TEST_ID)).toBeInTheDocument();
@@ -165,7 +169,8 @@ describe('AlertCondition', () => {
 		).not.toBeInTheDocument();
 	});

-	it('shows AnomalyThreshold component when alert type is anomaly based', () => {
+	// TODO: Unskip this when anomaly tab is implemented
+	it.skip('shows AnomalyThreshold component when alert type is anomaly based', () => {
 		renderAlertCondition();

 		// Click on anomaly tab to switch to anomaly-based alert
@@ -176,7 +181,8 @@ describe('AlertCondition', () => {
 		expect(screen.queryByTestId(ALERT_THRESHOLD_TEST_ID)).not.toBeInTheDocument();
 	});

-	it('switches between threshold and anomaly tabs', () => {
+	// TODO: Unskip this when anomaly tab is implemented
+	it.skip('switches between threshold and anomaly tabs', () => {
 		renderAlertCondition();

 		// Initially shows threshold component
@@ -201,7 +207,8 @@ describe('AlertCondition', () => {
 		).not.toBeInTheDocument();
 	});

-	it('applies active tab styling correctly', () => {
+	// TODO: Unskip this when anomaly tab is implemented
+	it.skip('applies active tab styling correctly', () => {
 		renderAlertCondition();

 		const thresholdTab = screen.getByText(THRESHOLD_TAB_TEXT);
@@ -222,21 +229,21 @@ describe('AlertCondition', () => {
 	it('shows multiple tabs for METRICS_BASED_ALERT', () => {
 		renderAlertCondition('METRIC_BASED_ALERT');

-		// Both tabs should be visible
+		// TODO: uncomment this when anomaly tab is implemented
 		expect(screen.getByText(THRESHOLD_TAB_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
+		// expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
 		expect(screen.getByTestId(THRESHOLD_VIEW_TEST_ID)).toBeInTheDocument();
-		expect(screen.getByTestId(ANOMALY_VIEW_TEST_ID)).toBeInTheDocument();
+		// expect(screen.getByTestId(ANOMALY_VIEW_TEST_ID)).toBeInTheDocument();
 	});

 	it('shows multiple tabs for ANOMALY_BASED_ALERT', () => {
 		renderAlertCondition('ANOMALY_BASED_ALERT');

-		// Both tabs should be visible
 		expect(screen.getByText(THRESHOLD_TAB_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
 		expect(screen.getByTestId(THRESHOLD_VIEW_TEST_ID)).toBeInTheDocument();
-		expect(screen.getByTestId(ANOMALY_VIEW_TEST_ID)).toBeInTheDocument();
+		// TODO: uncomment this when anomaly tab is implemented
+		// expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
+		// expect(screen.getByTestId(ANOMALY_VIEW_TEST_ID)).toBeInTheDocument();
 	});

 	it('shows only threshold tab for LOGS_BASED_ALERT', () => {
--- a/frontend/src/container/CreateAlertV2/AlertCondition/tests/AlertThreshold.test.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/tests/AlertThreshold.test.tsx
@@ -3,11 +3,23 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { MemoryRouter } from 'react-router-dom';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { Channels } from 'types/api/channels/getAll';

 import { CreateAlertProvider } from '../../context';
 import AlertThreshold from '../AlertThreshold';

+const mockChannels: Channels[] = [];
+const mockRefreshChannels = jest.fn();
+const mockIsLoadingChannels = false;
+const mockIsErrorChannels = false;
+const mockProps = {
+	channels: mockChannels,
+	isLoadingChannels: mockIsLoadingChannels,
+	isErrorChannels: mockIsErrorChannels,
+	refreshChannels: mockRefreshChannels,
+};
+
 jest.mock('uplot', () => {
 	const paths = {
 		spline: jest.fn(),
@@ -96,10 +108,14 @@ jest.mock('container/NewWidget/RightContainer/alertFomatCategories', () => ({
 	]),
 }));

+jest.mock('container/CreateAlertV2/utils', () => ({
+	...jest.requireActual('container/CreateAlertV2/utils'),
+}));
+
 const TEST_STRINGS = {
 	ADD_THRESHOLD: 'Add Threshold',
 	AT_LEAST_ONCE: 'AT LEAST ONCE',
-	IS_ABOVE: 'IS ABOVE',
+	IS_ABOVE: 'ABOVE',
 } as const;

 const createTestQueryClient = (): QueryClient =>
@@ -116,8 +132,8 @@ const renderAlertThreshold = (): ReturnType<typeof render> => {
 	return render(
 		<MemoryRouter>
 			<QueryClientProvider client={queryClient}>
-				<CreateAlertProvider>
-					<AlertThreshold />
+				<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
+					<AlertThreshold {...mockProps} />
 				</CreateAlertProvider>
 			</QueryClientProvider>
 		</MemoryRouter>,
@@ -125,7 +141,10 @@ const renderAlertThreshold = (): ReturnType<typeof render> => {
 };

 const verifySelectRenders = (title: string): void => {
-	const select = screen.getByTitle(title);
+	let select = screen.queryByTitle(title);
+	if (!select) {
+		select = screen.getByText(title);
+	}
 	expect(select).toBeInTheDocument();
 };

@@ -139,7 +158,9 @@ describe('AlertThreshold', () => {
 		expect(screen.getByText('Send a notification when')).toBeInTheDocument();
 		expect(screen.getByText('the threshold(s)')).toBeInTheDocument();
 		expect(screen.getByText('during the')).toBeInTheDocument();
-		expect(screen.getByText('Evaluation Window.')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('condensed-evaluation-settings-container'),
+		).toBeInTheDocument();
 	});

 	it('renders query selection dropdown', async () => {
@@ -189,11 +210,11 @@ describe('AlertThreshold', () => {

 		// First addition should add WARNING threshold
 		fireEvent.click(addButton);
-		expect(screen.getByText('WARNING')).toBeInTheDocument();
+		expect(screen.getByText('warning')).toBeInTheDocument();

 		// Second addition should add INFO threshold
 		fireEvent.click(addButton);
-		expect(screen.getByText('INFO')).toBeInTheDocument();
+		expect(screen.getByText('info')).toBeInTheDocument();

 		// Third addition should add random threshold
 		fireEvent.click(addButton);
@@ -265,7 +286,7 @@ describe('AlertThreshold', () => {
 		renderAlertThreshold();

 		// Should have initial critical threshold
-		expect(screen.getByText('CRITICAL')).toBeInTheDocument();
+		expect(screen.getByText('critical')).toBeInTheDocument();
 		verifySelectRenders(TEST_STRINGS.IS_ABOVE);
 		verifySelectRenders(TEST_STRINGS.AT_LEAST_ONCE);
 	});
--- a/frontend/src/container/CreateAlertV2/AlertCondition/tests/AnomalyThreshold.test.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/tests/AnomalyThreshold.test.tsx
@@ -1,14 +1,15 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { render, screen } from '@testing-library/react';
-import {
-	INITIAL_ALERT_STATE,
-	INITIAL_ALERT_THRESHOLD_STATE,
-} from 'container/CreateAlertV2/context/constants';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
+import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
+import * as appHooks from 'providers/App/App';

 import * as context from '../../context';
 import AnomalyThreshold from '../AnomalyThreshold';

+jest.spyOn(appHooks, 'useAppContext').mockReturnValue(getAppContextMockState());
+
 jest.mock('uplot', () => {
 	const paths = {
 		spline: jest.fn(),
@@ -23,12 +24,12 @@ jest.mock('uplot', () => {

 const mockSetAlertState = jest.fn();
 const mockSetThresholdState = jest.fn();
-jest.spyOn(context, 'useCreateAlertState').mockReturnValue({
-	alertState: INITIAL_ALERT_STATE,
-	setAlertState: mockSetAlertState,
-	thresholdState: INITIAL_ALERT_THRESHOLD_STATE,
-	setThresholdState: mockSetThresholdState,
-} as any);
+jest.spyOn(context, 'useCreateAlertState').mockReturnValue(
+	createMockAlertContextState({
+		setThresholdState: mockSetThresholdState,
+		setAlertState: mockSetAlertState,
+	}),
+);

 // Mock useQueryBuilder hook
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
@@ -54,7 +55,14 @@ jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 }));

 const renderAnomalyThreshold = (): ReturnType<typeof render> =>
-	render(<AnomalyThreshold />);
+	render(
+		<AnomalyThreshold
+			channels={[]}
+			isLoadingChannels={false}
+			isErrorChannels={false}
+			refreshChannels={jest.fn()}
+		/>,
+	);

 describe('AnomalyThreshold', () => {
 	beforeEach(() => {
--- a/frontend/src/container/CreateAlertV2/AlertCondition/tests/ThresholdItem.test.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/tests/ThresholdItem.test.tsx
@@ -2,15 +2,37 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { fireEvent, render, screen } from '@testing-library/react';
 import { DefaultOptionType } from 'antd/es/select';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
+import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
+import * as appHooks from 'providers/App/App';
 import { Channels } from 'types/api/channels/getAll';

+import * as context from '../../context';
 import ThresholdItem from '../ThresholdItem';
 import { ThresholdItemProps } from '../types';

-// Mock the enableRecoveryThreshold utility
-jest.mock('../../utils', () => ({
-	enableRecoveryThreshold: jest.fn(() => true),
-}));
+jest.spyOn(appHooks, 'useAppContext').mockReturnValue(getAppContextMockState());
+
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock: any = jest.fn(() => ({
+		paths,
+	}));
+	uplotMock.paths = paths;
+	return uplotMock;
+});
+
+const mockSetAlertState = jest.fn();
+const mockSetThresholdState = jest.fn();
+jest.spyOn(context, 'useCreateAlertState').mockReturnValue(
+	createMockAlertContextState({
+		setThresholdState: mockSetThresholdState,
+		setAlertState: mockSetAlertState,
+	}),
+);

 const TEST_CONSTANTS = {
 	THRESHOLD_ID: 'test-threshold-1',
@@ -21,6 +43,7 @@ const TEST_CONSTANTS = {
 	CHANNEL_2: 'channel-2',
 	CHANNEL_3: 'channel-3',
 	EMAIL_CHANNEL_NAME: 'Email Channel',
+	EMAIL_CHANNEL_TRUNCATED: 'Email Chan...',
 	ENTER_THRESHOLD_NAME: 'Enter threshold name',
 	ENTER_THRESHOLD_VALUE: 'Enter threshold value',
 	ENTER_RECOVERY_THRESHOLD_VALUE: 'Enter recovery threshold value',
@@ -59,6 +82,8 @@ const defaultProps: ThresholdItemProps = {
 	channels: mockChannels,
 	isLoadingChannels: false,
 	units: mockUnits,
+	isErrorChannels: false,
+	refreshChannels: jest.fn(),
 };

 const renderThresholdItem = (
@@ -77,10 +102,11 @@ const verifySelectorWidth = (
 	expect(selector.closest('.ant-select')).toHaveStyle(`width: ${expectedWidth}`);
 };

-const showRecoveryThreshold = (): void => {
-	const recoveryButton = screen.getByRole('button', { name: '' });
-	fireEvent.click(recoveryButton);
-};
+// TODO: Unskip this when recovery threshold is implemented
+// const showRecoveryThreshold = (): void => {
+// 	const recoveryButton = screen.getByRole('button', { name: '' });
+// 	fireEvent.click(recoveryButton);
+// };

 const verifyComponentRendersWithLoading = (): void => {
 	expect(
@@ -122,7 +148,7 @@ describe('ThresholdItem', () => {
 		const valueInput = screen.getByPlaceholderText(
 			TEST_CONSTANTS.ENTER_THRESHOLD_VALUE,
 		);
-		expect(valueInput).toHaveValue('100');
+		expect(valueInput).toHaveValue(100);
 	});

 	it('renders unit selector with correct value', () => {
@@ -132,15 +158,6 @@ describe('ThresholdItem', () => {
 		expect(screen.getByText('Bytes')).toBeInTheDocument();
 	});

-	it('renders channels selector with correct value', () => {
-		renderThresholdItem();
-
-		// Check for the channels selector by looking for the displayed text
-		expect(
-			screen.getByText(TEST_CONSTANTS.EMAIL_CHANNEL_NAME),
-		).toBeInTheDocument();
-	});
-
 	it('updates threshold label when label input changes', () => {
 		const updateThreshold = jest.fn();
 		renderThresholdItem({ updateThreshold });
@@ -212,38 +229,31 @@ describe('ThresholdItem', () => {

 		// The remove button is the second button (with circle-x icon)
 		const buttons = screen.getAllByRole('button');
-		expect(buttons).toHaveLength(2); // Recovery button + remove button
+		expect(buttons).toHaveLength(1); // remove button
 	});

 	it('does not show remove button when showRemoveButton is false', () => {
 		renderThresholdItem({ showRemoveButton: false });

-		// Only the recovery button should be present
-		const buttons = screen.getAllByRole('button');
-		expect(buttons).toHaveLength(1); // Only recovery button
+		// No buttons should be present
+		const buttons = screen.queryAllByRole('button');
+		expect(buttons).toHaveLength(0);
 	});

 	it('calls removeThreshold when remove button is clicked', () => {
 		const removeThreshold = jest.fn();
 		renderThresholdItem({ showRemoveButton: true, removeThreshold });

-		// The remove button is the second button (with circle-x icon)
+		// The remove button is the first button (with circle-x icon)
 		const buttons = screen.getAllByRole('button');
-		const removeButton = buttons[1]; // Second button is the remove button
+		const removeButton = buttons[0];
 		fireEvent.click(removeButton);

 		expect(removeThreshold).toHaveBeenCalledWith(TEST_CONSTANTS.THRESHOLD_ID);
 	});

-	it('shows recovery threshold button when recovery threshold is enabled', () => {
-		renderThresholdItem();
-
-		// The recovery button is the first button (with chart-line icon)
-		const buttons = screen.getAllByRole('button');
-		expect(buttons).toHaveLength(1); // Recovery button
-	});
-
-	it('shows recovery threshold inputs when recovery button is clicked', () => {
+	// TODO: Unskip this when recovery threshold is implemented
+	it.skip('shows recovery threshold inputs when recovery button is clicked', () => {
 		renderThresholdItem();

 		// The recovery button is the first button (with chart-line icon)
@@ -251,13 +261,16 @@ describe('ThresholdItem', () => {
 		const recoveryButton = buttons[0]; // First button is the recovery button
 		fireEvent.click(recoveryButton);

-		expect(screen.getByPlaceholderText('Recovery threshold')).toBeInTheDocument();
+		expect(
+			screen.getByPlaceholderText('Enter recovery threshold value'),
+		).toBeInTheDocument();
 		expect(
 			screen.getByPlaceholderText(TEST_CONSTANTS.ENTER_RECOVERY_THRESHOLD_VALUE),
 		).toBeInTheDocument();
 	});

-	it('updates recovery threshold value when input changes', () => {
+	// TODO: Unskip this when recovery threshold is implemented
+	it.skip('updates recovery threshold value when input changes', () => {
 		const updateThreshold = jest.fn();
 		renderThresholdItem({ updateThreshold });

@@ -290,22 +303,6 @@ describe('ThresholdItem', () => {
 		verifyUnitSelectorDisabled();
 	});

-	it('renders channels as multiple select options', () => {
-		renderThresholdItem();
-
-		// Check that channels are rendered as multiple select
-		expect(
-			screen.getByText(TEST_CONSTANTS.EMAIL_CHANNEL_NAME),
-		).toBeInTheDocument();
-
-		// Should be able to select multiple channels
-		const channelSelectors = screen.getAllByRole('combobox');
-		const channelSelector = channelSelectors[1]; // Second combobox is the channels selector
-		fireEvent.change(channelSelector, {
-			target: { value: [TEST_CONSTANTS.CHANNEL_1, TEST_CONSTANTS.CHANNEL_2] },
-		});
-	});
-
 	it('handles empty threshold values correctly', () => {
 		const emptyThreshold = {
 			...mockThreshold,
@@ -318,7 +315,7 @@ describe('ThresholdItem', () => {
 		renderThresholdItem({ threshold: emptyThreshold });

 		expect(screen.getByPlaceholderText('Enter threshold name')).toHaveValue('');
-		expect(screen.getByPlaceholderText('Enter threshold value')).toHaveValue('0');
+		expect(screen.getByPlaceholderText('Enter threshold value')).toHaveValue(0);
 	});

 	it('renders with correct input widths', () => {
@@ -331,13 +328,13 @@ describe('ThresholdItem', () => {
 			TEST_CONSTANTS.ENTER_THRESHOLD_VALUE,
 		);

-		expect(labelInput).toHaveStyle('width: 260px');
-		expect(valueInput).toHaveStyle('width: 210px');
+		expect(labelInput).toHaveStyle('width: 200px');
+		expect(valueInput).toHaveStyle('width: 100px');
 	});

 	it('renders channels selector with correct width', () => {
 		renderThresholdItem();
-		verifySelectorWidth(1, '260px');
+		verifySelectorWidth(1, '350px');
 	});

 	it('renders unit selector with correct width', () => {
@@ -350,37 +347,14 @@ describe('ThresholdItem', () => {
 		verifyComponentRendersWithLoading();
 	});

-	it('renders recovery threshold with correct initial value', () => {
+	it.skip('renders recovery threshold with correct initial value', () => {
 		renderThresholdItem();
-		showRecoveryThreshold();
+		// showRecoveryThreshold();

 		const recoveryValueInput = screen.getByPlaceholderText(
 			TEST_CONSTANTS.ENTER_RECOVERY_THRESHOLD_VALUE,
 		);
-		expect(recoveryValueInput).toHaveValue('80');
-	});
-
-	it('renders recovery threshold label as disabled', () => {
-		renderThresholdItem();
-		showRecoveryThreshold();
-
-		const recoveryLabelInput = screen.getByPlaceholderText('Recovery threshold');
-		expect(recoveryLabelInput).toBeDisabled();
-	});
-
-	it('renders correct channel options', () => {
-		renderThresholdItem();
-
-		// Check that channels are rendered
-		expect(
-			screen.getByText(TEST_CONSTANTS.EMAIL_CHANNEL_NAME),
-		).toBeInTheDocument();
-
-		// Should be able to select different channels
-		const channelSelectors = screen.getAllByRole('combobox');
-		const channelSelector = channelSelectors[1]; // Second combobox is the channels selector
-		fireEvent.change(channelSelector, { target: { value: 'channel-2' } });
-		expect(screen.getByText('Slack Channel')).toBeInTheDocument();
+		expect(recoveryValueInput).toHaveValue(80);
 	});

 	it('handles threshold without channels', () => {
--- a/frontend/src/container/CreateAlertV2/AlertCondition/styles.scss
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/styles.scss
@@ -67,7 +67,7 @@
 	padding-right: 72px;
 	background-color: var(--bg-ink-500);
 	border: 1px solid var(--bg-slate-400);
-	width: fit-content;
+	width: 100%;

 	.alert-condition-sentences {
 		display: flex;
@@ -90,7 +90,7 @@
 			}

 			.ant-select {
-				width: 240px !important;
+				width: 240px;

 				.ant-select-selector {
 					background-color: var(--bg-ink-300);
@@ -148,6 +148,7 @@
 					display: flex;
 					align-items: center;
 					gap: 8px;
+					flex-wrap: wrap;

 					.ant-input {
 						background-color: var(--bg-ink-400);
@@ -277,6 +278,29 @@
 			}
 		}
 	}
+
+	.routing-policies-info-banner {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		margin-top: 16px;
+		background-color: #4568dc1a;
+		border: 1px solid var(--bg-robin-500);
+		padding: 8px 16px;
+
+		.ant-typography {
+			color: var(--bg-robin-500);
+		}
+	}
+}
+
+.anomaly-threshold-container {
+	.ant-select {
+		.ant-select-selector {
+			min-width: 150px;
+		}
+	}
 }

 .condensed-alert-threshold-container,
@@ -293,7 +317,8 @@
 	.ant-btn {
 		display: flex;
 		align-items: center;
-		width: 240px;
+		min-width: 240px;
+		width: auto;
 		justify-content: space-between;
 		background-color: var(--bg-ink-300);
 		border: 1px solid var(--bg-slate-400);
@@ -301,6 +326,7 @@
 		.evaluate-alert-conditions-button-left {
 			color: var(--bg-vanilla-400);
 			font-size: 12px;
+			flex-shrink: 0;
 		}

 		.evaluate-alert-conditions-button-right {
@@ -308,6 +334,7 @@
 			align-items: center;
 			color: var(--bg-vanilla-400);
 			gap: 8px;
+			flex-shrink: 0;

 			.evaluate-alert-conditions-button-right-text {
 				font-size: 12px;
@@ -318,3 +345,235 @@
 		}
 	}
 }
+
+.lightMode {
+	.alert-condition-container {
+		.alert-condition {
+			.alert-condition-tabs {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-300);
+
+				.explorer-view-option {
+					border-left: 0.5px solid var(--bg-vanilla-300);
+					border-bottom: 0.5px solid var(--bg-vanilla-300);
+
+					&.active-tab {
+						background-color: var(--bg-vanilla-100);
+
+						&:hover {
+							background-color: var(--bg-vanilla-100) !important;
+						}
+					}
+
+					&:disabled {
+						background-color: var(--bg-vanilla-300);
+					}
+
+					&:hover {
+						color: var(--bg-ink-400);
+					}
+				}
+			}
+		}
+	}
+
+	.alert-threshold-container,
+	.anomaly-threshold-container {
+		background-color: var(--bg-vanilla-100);
+		border: 1px solid var(--bg-vanilla-300);
+
+		.alert-condition-sentences {
+			.alert-condition-sentence {
+				.sentence-text {
+					color: var(--text-ink-400);
+				}
+
+				.ant-select {
+					.ant-select-selector {
+						background-color: var(--bg-vanilla-300);
+						border: 1px solid var(--bg-vanilla-300);
+						color: var(--text-ink-400);
+
+						&:hover {
+							border-color: var(--bg-ink-300);
+						}
+
+						&:focus {
+							border-color: var(--bg-ink-300);
+							box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+						}
+					}
+
+					.ant-select-selection-item {
+						color: var(--bg-ink-400);
+					}
+
+					.ant-select-arrow {
+						color: var(--bg-ink-400);
+					}
+				}
+			}
+		}
+
+		.thresholds-section {
+			.threshold-item {
+				.threshold-row {
+					.threshold-controls {
+						.threshold-inputs {
+							display: flex;
+							align-items: center;
+							gap: 8px;
+						}
+
+						.ant-input {
+							background-color: var(--bg-vanilla-200);
+							border: 1px solid var(--bg-vanilla-300);
+							color: var(--bg-ink-400);
+
+							&:hover {
+								border-color: var(--bg-ink-300);
+							}
+
+							&:focus {
+								border-color: var(--bg-ink-300);
+								box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+							}
+						}
+
+						.ant-select {
+							.ant-select-selector {
+								background-color: var(--bg-vanilla-200);
+								border: 1px solid var(--bg-vanilla-300);
+								color: var(--bg-ink-400);
+
+								&:hover {
+									border-color: var(--bg-ink-300);
+								}
+
+								&:focus {
+									border-color: var(--bg-ink-300);
+									box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+								}
+							}
+
+							.ant-select-selection-item {
+								color: var(--bg-ink-400);
+							}
+
+							.ant-select-arrow {
+								color: var(--bg-ink-400);
+							}
+						}
+
+						.icon-btn {
+							color: var(--bg-ink-400);
+							border: 1px solid var(--bg-vanilla-300);
+						}
+					}
+				}
+
+				.recovery-threshold-input-group {
+					.recovery-threshold-btn {
+						color: var(--bg-ink-400);
+						background-color: var(--bg-vanilla-200) !important;
+						border: 1px solid var(--bg-vanilla-300);
+					}
+
+					.ant-input {
+						background-color: var(--bg-vanilla-200);
+						border: 1px solid var(--bg-vanilla-300);
+						color: var(--bg-ink-400);
+
+						&:hover {
+							border-color: var(--bg-ink-300);
+						}
+
+						&:focus {
+							border-color: var(--bg-ink-300);
+							box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+						}
+					}
+				}
+			}
+
+			.add-threshold-btn,
+			.ant-btn.add-threshold-btn {
+				border: 1px dashed var(--bg-vanilla-300);
+				color: var(--bg-ink-300);
+				background-color: transparent;
+
+				.ant-typography {
+					color: var(--bg-ink-400);
+				}
+
+				&:hover {
+					border-color: var(--bg-ink-300);
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+	}
+
+	.condensed-evaluation-settings-container {
+		.ant-btn {
+			background-color: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-vanilla-300);
+			min-width: 240px;
+			width: auto;
+
+			.evaluate-alert-conditions-button-left {
+				color: var(--bg-ink-400);
+				flex-shrink: 0;
+			}
+
+			.evaluate-alert-conditions-button-right {
+				color: var(--bg-ink-400);
+				flex-shrink: 0;
+
+				.evaluate-alert-conditions-button-right-text {
+					background-color: var(--bg-vanilla-300);
+				}
+			}
+		}
+	}
+}
+
+.highlighted-text {
+	font-weight: bold;
+	color: var(--bg-robin-400);
+	margin: 0 4px;
+}
+
+// Tooltip styles
+.tooltip-content {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-start;
+
+	.tooltip-description {
+		margin-bottom: 8px;
+
+		span {
+			font-weight: bold;
+			color: var(--bg-robin-400);
+		}
+	}
+
+	.tooltip-example {
+		margin-bottom: 8px;
+		color: #8b92a0;
+	}
+
+	.tooltip-link {
+		.tooltip-link-text {
+			color: #1890ff;
+			font-size: 11px;
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+}
--- a/frontend/src/container/CreateAlertV2/AlertCondition/types.ts
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/types.ts
@@ -1,14 +1,18 @@
 import { DefaultOptionType } from 'antd/es/select';
 import { Channels } from 'types/api/channels/getAll';

-import { Threshold } from '../context/types';
+import {
+	NotificationSettingsAction,
+	NotificationSettingsState,
+	Threshold,
+} from '../context/types';

 export type UpdateThreshold = {
 	(thresholdId: string, field: 'channels', value: string[]): void;
 	(
 		thresholdId: string,
 		field: Exclude<keyof Threshold, 'channels'>,
-		value: string,
+		value: string | number | null,
 	): void;
 };

@@ -20,4 +24,20 @@ export interface ThresholdItemProps {
 	channels: Channels[];
 	isLoadingChannels: boolean;
 	units: DefaultOptionType[];
+	isErrorChannels: boolean;
+	refreshChannels: () => void;
+}
+
+export interface AnomalyAndThresholdProps {
+	channels: Channels[];
+	isLoadingChannels: boolean;
+	isErrorChannels: boolean;
+	refreshChannels: () => void;
+}
+
+export interface RoutingPolicyBannerProps {
+	notificationSettings: NotificationSettingsState;
+	setNotificationSettings: (
+		notificationSettings: NotificationSettingsAction,
+	) => void;
 }
--- a/frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx
@@ -1,9 +1,19 @@
+import { Button, Flex, Switch, Typography } from 'antd';
 import { BaseOptionType, DefaultOptionType, SelectProps } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
 import { Y_AXIS_CATEGORIES } from 'components/YAxisUnitSelector/constants';
+import ROUTES from 'constants/routes';
+import {
+	AlertThresholdMatchType,
+	AlertThresholdOperator,
+} from 'container/CreateAlertV2/context/types';
 import { getSelectedQueryOptions } from 'container/FormAlertRules/utils';
+import { IUser } from 'providers/App/types';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
+import { USER_ROLES } from 'types/roles';
+
+import { RoutingPolicyBannerProps } from './types';

 export function getQueryNames(currentQuery: Query): BaseOptionType[] {
 	const involvedQueriesInTraceOperator = getInvolvedQueriesInTraceOperator(
@@ -44,3 +54,360 @@ export function getCategorySelectOptionByName(
 		) || []
 	);
 }
+
+const getOperatorWord = (op: AlertThresholdOperator): string => {
+	switch (op) {
+		case AlertThresholdOperator.IS_ABOVE:
+			return 'exceed';
+		case AlertThresholdOperator.IS_BELOW:
+			return 'fall below';
+		case AlertThresholdOperator.IS_EQUAL_TO:
+			return 'equal';
+		case AlertThresholdOperator.IS_NOT_EQUAL_TO:
+			return 'not equal';
+		default:
+			return 'exceed';
+	}
+};
+
+const getThresholdValue = (op: AlertThresholdOperator): number => {
+	switch (op) {
+		case AlertThresholdOperator.IS_ABOVE:
+			return 80;
+		case AlertThresholdOperator.IS_BELOW:
+			return 50;
+		case AlertThresholdOperator.IS_EQUAL_TO:
+			return 100;
+		case AlertThresholdOperator.IS_NOT_EQUAL_TO:
+			return 0;
+		default:
+			return 80;
+	}
+};
+
+const getDataPoints = (
+	matchType: AlertThresholdMatchType,
+	op: AlertThresholdOperator,
+): number[] => {
+	const dataPointMap: Record<
+		AlertThresholdMatchType,
+		Record<AlertThresholdOperator, number[]>
+	> = {
+		[AlertThresholdMatchType.AT_LEAST_ONCE]: {
+			[AlertThresholdOperator.IS_BELOW]: [60, 45, 40, 55, 35],
+			[AlertThresholdOperator.IS_EQUAL_TO]: [95, 100, 105, 90, 100],
+			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [5, 0, 10, 15, 0],
+			[AlertThresholdOperator.IS_ABOVE]: [75, 85, 90, 78, 95],
+			[AlertThresholdOperator.ABOVE_BELOW]: [75, 85, 90, 78, 95],
+		},
+		[AlertThresholdMatchType.ALL_THE_TIME]: {
+			[AlertThresholdOperator.IS_BELOW]: [45, 40, 35, 42, 38],
+			[AlertThresholdOperator.IS_EQUAL_TO]: [100, 100, 100, 100, 100],
+			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [5, 10, 15, 8, 12],
+			[AlertThresholdOperator.IS_ABOVE]: [85, 87, 90, 88, 95],
+			[AlertThresholdOperator.ABOVE_BELOW]: [85, 87, 90, 88, 95],
+		},
+		[AlertThresholdMatchType.ON_AVERAGE]: {
+			[AlertThresholdOperator.IS_BELOW]: [60, 40, 45, 35, 45],
+			[AlertThresholdOperator.IS_EQUAL_TO]: [95, 105, 100, 95, 105],
+			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [5, 10, 15, 8, 12],
+			[AlertThresholdOperator.IS_ABOVE]: [75, 85, 90, 78, 95],
+			[AlertThresholdOperator.ABOVE_BELOW]: [75, 85, 90, 78, 95],
+		},
+		[AlertThresholdMatchType.IN_TOTAL]: {
+			[AlertThresholdOperator.IS_BELOW]: [8, 5, 10, 12, 8],
+			[AlertThresholdOperator.IS_EQUAL_TO]: [20, 20, 20, 20, 20],
+			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [10, 15, 25, 5, 30],
+			[AlertThresholdOperator.IS_ABOVE]: [10, 15, 25, 5, 30],
+			[AlertThresholdOperator.ABOVE_BELOW]: [10, 15, 25, 5, 30],
+		},
+		[AlertThresholdMatchType.LAST]: {
+			[AlertThresholdOperator.IS_BELOW]: [75, 85, 90, 78, 45],
+			[AlertThresholdOperator.IS_EQUAL_TO]: [75, 85, 90, 78, 100],
+			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [75, 85, 90, 78, 25],
+			[AlertThresholdOperator.IS_ABOVE]: [75, 85, 90, 78, 95],
+			[AlertThresholdOperator.ABOVE_BELOW]: [75, 85, 90, 78, 95],
+		},
+	};
+
+	return dataPointMap[matchType]?.[op] || [75, 85, 90, 78, 95];
+};
+
+const getTooltipOperatorSymbol = (op: AlertThresholdOperator): string => {
+	const symbolMap: Record<AlertThresholdOperator, string> = {
+		[AlertThresholdOperator.IS_ABOVE]: '>',
+		[AlertThresholdOperator.IS_BELOW]: '<',
+		[AlertThresholdOperator.IS_EQUAL_TO]: '=',
+		[AlertThresholdOperator.IS_NOT_EQUAL_TO]: '!=',
+		[AlertThresholdOperator.ABOVE_BELOW]: '>',
+	};
+	return symbolMap[op] || '>';
+};
+
+const handleTooltipClick = (
+	e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
+): void => {
+	e.stopPropagation();
+};
+
+function TooltipContent({
+	children,
+}: {
+	children: React.ReactNode;
+}): JSX.Element {
+	return (
+		<div
+			role="button"
+			tabIndex={0}
+			onClick={handleTooltipClick}
+			onKeyDown={(e): void => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					handleTooltipClick(e);
+				}
+			}}
+			className="tooltip-content"
+		>
+			{children}
+		</div>
+	);
+}
+
+function TooltipExample({
+	children,
+	dataPoints,
+	operatorSymbol,
+	thresholdValue,
+	matchType,
+}: {
+	children: React.ReactNode;
+	dataPoints: number[];
+	operatorSymbol: string;
+	thresholdValue: number;
+	matchType: AlertThresholdMatchType;
+}): JSX.Element {
+	return (
+		<div className="tooltip-example">
+			<strong>Example:</strong>
+			<br />
+			Say, For a 5-minute window (configured in Evaluation settings), 1 min
+			aggregation interval (set up in query) → 5{' '}
+			{matchType === AlertThresholdMatchType.IN_TOTAL
+				? 'error counts'
+				: 'data points'}
+			: [{dataPoints.join(', ')}]<br />
+			With threshold {operatorSymbol} {thresholdValue}: {children}
+		</div>
+	);
+}
+
+function TooltipLink(): JSX.Element {
+	return (
+		<div className="tooltip-link">
+			<a
+				href="https://signoz.io/docs"
+				target="_blank"
+				rel="noopener noreferrer"
+				className="tooltip-link-text"
+			>
+				Learn more
+			</a>
+		</div>
+	);
+}
+
+export const getMatchTypeTooltip = (
+	matchType: AlertThresholdMatchType,
+	operator: AlertThresholdOperator,
+): React.ReactNode => {
+	const operatorSymbol = getTooltipOperatorSymbol(operator);
+	const operatorWord = getOperatorWord(operator);
+	const thresholdValue = getThresholdValue(operator);
+	const dataPoints = getDataPoints(matchType, operator);
+	const getMatchingPointsCount = (): number =>
+		dataPoints.filter((p) => {
+			switch (operator) {
+				case AlertThresholdOperator.IS_ABOVE:
+					return p > thresholdValue;
+				case AlertThresholdOperator.IS_BELOW:
+					return p < thresholdValue;
+				case AlertThresholdOperator.IS_EQUAL_TO:
+					return p === thresholdValue;
+				case AlertThresholdOperator.IS_NOT_EQUAL_TO:
+					return p !== thresholdValue;
+				default:
+					return p > thresholdValue;
+			}
+		}).length;
+
+	switch (matchType) {
+		case AlertThresholdMatchType.AT_LEAST_ONCE:
+			return (
+				<TooltipContent>
+					<div className="tooltip-description">
+						Data is aggregated at each interval within your evaluation window,
+						creating multiple data points. This option triggers if <span>ANY</span> of
+						those aggregated data points crosses the threshold.
+					</div>
+					<TooltipExample
+						dataPoints={dataPoints}
+						operatorSymbol={operatorSymbol}
+						thresholdValue={thresholdValue}
+						matchType={matchType}
+					>
+						Alert triggers ({getMatchingPointsCount()} points {operatorWord}{' '}
+						{thresholdValue})
+					</TooltipExample>
+					<TooltipLink />
+				</TooltipContent>
+			);
+
+		case AlertThresholdMatchType.ALL_THE_TIME:
+			return (
+				<TooltipContent>
+					<div className="tooltip-description">
+						Data is aggregated at each interval within your evaluation window,
+						creating multiple data points. This option triggers if <span>ALL</span>{' '}
+						aggregated data points cross the threshold.
+					</div>
+					<TooltipExample
+						dataPoints={dataPoints}
+						operatorSymbol={operatorSymbol}
+						thresholdValue={thresholdValue}
+						matchType={matchType}
+					>
+						Alert triggers (all points {operatorWord} {thresholdValue})<br />
+						If any point was {thresholdValue}, no alert would fire
+					</TooltipExample>
+					<TooltipLink />
+				</TooltipContent>
+			);
+
+		case AlertThresholdMatchType.ON_AVERAGE: {
+			const average = (
+				dataPoints.reduce((a, b) => a + b, 0) / dataPoints.length
+			).toFixed(1);
+			return (
+				<TooltipContent>
+					<div className="tooltip-description">
+						Data is aggregated at each interval within your evaluation window,
+						creating multiple data points. This option triggers if the{' '}
+						<span>AVERAGE</span> of all aggregated data points crosses the threshold.
+					</div>
+					<TooltipExample
+						dataPoints={dataPoints}
+						operatorSymbol={operatorSymbol}
+						thresholdValue={thresholdValue}
+						matchType={matchType}
+					>
+						Alert triggers (average = {average})
+					</TooltipExample>
+					<TooltipLink />
+				</TooltipContent>
+			);
+		}
+
+		case AlertThresholdMatchType.IN_TOTAL: {
+			const total = dataPoints.reduce((a, b) => a + b, 0);
+			return (
+				<TooltipContent>
+					<div className="tooltip-description">
+						Data is aggregated at each interval within your evaluation window,
+						creating multiple data points. This option triggers if the{' '}
+						<span>SUM</span> of all aggregated data points crosses the threshold.
+					</div>
+					<TooltipExample
+						dataPoints={dataPoints}
+						operatorSymbol={operatorSymbol}
+						thresholdValue={thresholdValue}
+						matchType={matchType}
+					>
+						Alert triggers (total = {total})
+					</TooltipExample>
+					<TooltipLink />
+				</TooltipContent>
+			);
+		}
+
+		case AlertThresholdMatchType.LAST: {
+			const lastPoint = dataPoints[dataPoints.length - 1];
+			return (
+				<TooltipContent>
+					<div className="tooltip-description">
+						Data is aggregated at each interval within your evaluation window,
+						creating multiple data points. This option triggers based on the{' '}
+						<span>MOST RECENT</span> aggregated data point only.
+					</div>
+					<TooltipExample
+						dataPoints={dataPoints}
+						operatorSymbol={operatorSymbol}
+						thresholdValue={thresholdValue}
+						matchType={matchType}
+					>
+						Alert triggers (last point = {lastPoint})
+					</TooltipExample>
+					<TooltipLink />
+				</TooltipContent>
+			);
+		}
+
+		default:
+			return '';
+	}
+};
+
+export function NotificationChannelsNotFoundContent({
+	user,
+	refreshChannels,
+}: {
+	user: IUser;
+	refreshChannels: () => void;
+}): JSX.Element {
+	return (
+		<Flex justify="space-between">
+			<Flex gap={4} align="center">
+				<Typography.Text>No channels yet.</Typography.Text>
+				{user?.role === USER_ROLES.ADMIN ? (
+					<Typography.Text>
+						Create one
+						<Button
+							style={{ padding: '0 4px' }}
+							type="link"
+							onClick={(): void => {
+								window.open(ROUTES.CHANNELS_NEW, '_blank');
+							}}
+						>
+							here.
+						</Button>
+					</Typography.Text>
+				) : (
+					<Typography.Text>Please ask your admin to create one.</Typography.Text>
+				)}
+			</Flex>
+			<Button type="text" onClick={refreshChannels}>
+				Refresh
+			</Button>
+		</Flex>
+	);
+}
+
+export function RoutingPolicyBanner({
+	notificationSettings,
+	setNotificationSettings,
+}: RoutingPolicyBannerProps): JSX.Element {
+	return (
+		<div className="routing-policies-info-banner">
+			<Typography.Text>
+				Use <strong>Routing Policies</strong> for dynamic routing
+			</Typography.Text>
+			<Switch
+				checked={notificationSettings.routingPolicies}
+				onChange={(value): void => {
+					setNotificationSettings({
+						type: 'SET_ROUTING_POLICIES',
+						payload: value,
+					});
+				}}
+			/>
+		</div>
+	);
+}
--- a/frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx
+++ b/frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx
@@ -1,5 +1,6 @@
 import './styles.scss';

+import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useCallback, useMemo } from 'react';
 import { Labels } from 'types/api/alerts/def';
@@ -8,7 +9,7 @@ import { useCreateAlertState } from '../context';
 import LabelsInput from './LabelsInput';

 function CreateAlertHeader(): JSX.Element {
-	const { alertState, setAlertState } = useCreateAlertState();
+	const { alertState, setAlertState, isEditMode } = useCreateAlertState();

 	const { currentQuery } = useQueryBuilder();

@@ -34,11 +35,14 @@ function CreateAlertHeader(): JSX.Element {
 	);

 	return (
-		<div className="alert-header">
-			<div className="alert-header__tab-bar">
-				<div className="alert-header__tab">New Alert Rule</div>
-			</div>
-
+		<div
+			className={classNames('alert-header', { 'edit-alert-header': isEditMode })}
+		>
+			{!isEditMode && (
+				<div className="alert-header__tab-bar">
+					<div className="alert-header__tab">New Alert Rule</div>
+				</div>
+			)}
 			<div className="alert-header__content">
 				<input
 					type="text"
@@ -49,15 +53,6 @@ function CreateAlertHeader(): JSX.Element {
 					className="alert-header__input title"
 					placeholder="Enter alert rule name"
 				/>
-				<input
-					type="text"
-					value={alertState.description}
-					onChange={(e): void =>
-						setAlertState({ type: 'SET_ALERT_DESCRIPTION', payload: e.target.value })
-					}
-					className="alert-header__input description"
-					placeholder="Click to add description..."
-				/>
 				<LabelsInput
 					labels={alertState.labels}
 					onLabelsChange={(labels: Labels): void =>
--- a/frontend/src/container/CreateAlertV2/CreateAlertHeader/tests/CreateAlertHeader.test.tsx
+++ b/frontend/src/container/CreateAlertV2/CreateAlertHeader/tests/CreateAlertHeader.test.tsx
@@ -1,9 +1,28 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { fireEvent, render, screen } from '@testing-library/react';
+import { defaultPostableAlertRuleV2 } from 'container/CreateAlertV2/constants';
+import { getCreateAlertLocalStateFromAlertDef } from 'container/CreateAlertV2/utils';
+import { AlertTypes } from 'types/api/alerts/alertTypes';

+import * as useCreateAlertRuleHook from '../../../../hooks/alerts/useCreateAlertRule';
+import * as useTestAlertRuleHook from '../../../../hooks/alerts/useTestAlertRule';
+import * as useUpdateAlertRuleHook from '../../../../hooks/alerts/useUpdateAlertRule';
 import { CreateAlertProvider } from '../../context';
 import CreateAlertHeader from '../CreateAlertHeader';

+jest.spyOn(useCreateAlertRuleHook, 'useCreateAlertRule').mockReturnValue({
+	mutate: jest.fn(),
+	isLoading: false,
+} as any);
+jest.spyOn(useTestAlertRuleHook, 'useTestAlertRule').mockReturnValue({
+	mutate: jest.fn(),
+	isLoading: false,
+} as any);
+jest.spyOn(useUpdateAlertRuleHook, 'useUpdateAlertRule').mockReturnValue({
+	mutate: jest.fn(),
+	isLoading: false,
+} as any);
+
 jest.mock('uplot', () => {
 	const paths = {
 		spline: jest.fn(),
@@ -25,9 +44,11 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));

+const ENTER_ALERT_RULE_NAME_PLACEHOLDER = 'Enter alert rule name';
+
 const renderCreateAlertHeader = (): ReturnType<typeof render> =>
 	render(
-		<CreateAlertProvider>
+		<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
 			<CreateAlertHeader />
 		</CreateAlertProvider>,
 	);
@@ -40,16 +61,10 @@ describe('CreateAlertHeader', () => {

 	it('renders name input with placeholder', () => {
 		renderCreateAlertHeader();
-		const nameInput = screen.getByPlaceholderText('Enter alert rule name');
-		expect(nameInput).toBeInTheDocument();
-	});
-
-	it('renders description input with placeholder', () => {
-		renderCreateAlertHeader();
-		const descriptionInput = screen.getByPlaceholderText(
-			'Click to add description...',
+		const nameInput = screen.getByPlaceholderText(
+			ENTER_ALERT_RULE_NAME_PLACEHOLDER,
 		);
-		expect(descriptionInput).toBeInTheDocument();
+		expect(nameInput).toBeInTheDocument();
 	});

 	it('renders LabelsInput component', () => {
@@ -59,19 +74,30 @@ describe('CreateAlertHeader', () => {

 	it('updates name when typing in name input', () => {
 		renderCreateAlertHeader();
-		const nameInput = screen.getByPlaceholderText('Enter alert rule name');
+		const nameInput = screen.getByPlaceholderText(
+			ENTER_ALERT_RULE_NAME_PLACEHOLDER,
+		);

 		fireEvent.change(nameInput, { target: { value: 'Test Alert' } });

 		expect(nameInput).toHaveValue('Test Alert');
 	});

-	it('updates description when typing in description input', () => {
-		renderCreateAlertHeader();
-		const descriptionInput = screen.getByPlaceholderText(
-			'Click to add description...',
+	it('renders the header with title when isEditMode is true', () => {
+		render(
+			<CreateAlertProvider
+				isEditMode
+				initialAlertType={AlertTypes.METRICS_BASED_ALERT}
+				initialAlertState={getCreateAlertLocalStateFromAlertDef(
+					defaultPostableAlertRuleV2,
+				)}
+			>
+				<CreateAlertHeader />
+			</CreateAlertProvider>,
 		);
-		fireEvent.change(descriptionInput, { target: { value: 'Test Description' } });
-		expect(descriptionInput).toHaveValue('Test Description');
+		expect(screen.queryByText('New Alert Rule')).not.toBeInTheDocument();
+		expect(
+			screen.getByPlaceholderText(ENTER_ALERT_RULE_NAME_PLACEHOLDER),
+		).toHaveValue('TEST_ALERT');
 	});
 });
--- a/frontend/src/container/CreateAlertV2/CreateAlertHeader/styles.scss
+++ b/frontend/src/container/CreateAlertV2/CreateAlertHeader/styles.scss
@@ -3,21 +3,6 @@
 	font-family: inherit;
 	color: var(--text-vanilla-100);

-	/* Top bar with diagonal stripes */
-	&__tab-bar {
-		height: 32px;
-		display: flex;
-		align-items: center;
-		background: repeating-linear-gradient(
-			-45deg,
-			#0f0f0f,
-			#0f0f0f 10px,
-			#101010 10px,
-			#101010 20px
-		);
-		padding-left: 0;
-	}
-
 	/* Tab block visuals */
 	&__tab {
 		display: flex;
@@ -44,6 +29,8 @@
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
+		min-width: 300px;
+		flex: 1;
 	}

 	&__input.title {
@@ -51,6 +38,8 @@
 		font-weight: 500;
 		background-color: transparent;
 		color: var(--text-vanilla-100);
+		width: 100%;
+		min-width: 300px;
 	}

 	&__input:focus,
@@ -64,6 +53,15 @@
 		background-color: transparent;
 		color: var(--text-vanilla-300);
 	}
+
+	.ant-btn {
+		display: flex;
+		gap: 4px;
+		align-items: center;
+		color: var(--text-vanilla-100);
+		border: 1px solid var(--bg-slate-300);
+		margin-right: 16px;
+	}
 }

 .labels-input {
@@ -149,3 +147,74 @@
 		}
 	}
 }
+
+.lightMode {
+	.alert-header {
+		background-color: var(--bg-vanilla-100);
+		color: var(--text-ink-100);
+
+		&__tab {
+			background-color: var(--bg-vanilla-100);
+			color: var(--text-ink-100);
+		}
+
+		&__tab::before {
+			color: var(--bg-ink-100);
+		}
+
+		&__content {
+			background: var(--bg-vanilla-100);
+		}
+
+		&__input.title {
+			color: var(--text-ink-100);
+		}
+
+		&__input.description {
+			color: var(--text-ink-300);
+		}
+	}
+
+	.edit-alert-header {
+		width: 100%;
+	}
+
+	.edit-alert-header .alert-header__content {
+		background: var(--bg-vanilla-200);
+	}
+
+	.labels-input {
+		&__add-button {
+			color: var(--bg-ink-400);
+			border: 1px solid var(--bg-vanilla-300);
+			background-color: var(--bg-vanilla-100);
+
+			&:hover {
+				border-color: var(--bg-ink-300);
+				color: var(--bg-ink-500);
+			}
+		}
+
+		&__label-pill {
+			background-color: #ad7f581a;
+			color: var(--bg-sienna-400);
+			border: 1px solid var(--bg-sienna-500);
+		}
+
+		&__remove-button {
+			color: var(--bg-sienna-400);
+
+			&:hover {
+				color: var(--text-ink-100);
+			}
+		}
+
+		&__input {
+			color: var(--bg-ink-500);
+
+			&::placeholder {
+				color: var(--bg-ink-300);
+			}
+		}
+	}
+}
--- a/frontend/src/container/CreateAlertV2/CreateAlertV2.styles.scss
+++ b/frontend/src/container/CreateAlertV2/CreateAlertV2.styles.scss
@@ -1,17 +1,20 @@
-$top-nav-background-1: #0f0f0f;
-$top-nav-background-2: #101010;
-
 .create-alert-v2-container {
 	background-color: var(--bg-ink-500);
+	padding-bottom: 100px;
 }

-.top-nav-container {
-	background: repeating-linear-gradient(
-		-45deg,
-		$top-nav-background-1,
-		$top-nav-background-1 10px,
-		$top-nav-background-2 10px,
-		$top-nav-background-2 20px
-	);
-	margin-bottom: 0;
+.lightMode {
+	.create-alert-v2-container {
+		background-color: var(--bg-vanilla-100);
+	}
+}
+
+.sticky-page-spinner {
+	position: fixed;
+	inset: 0;
+	display: grid;
+	place-items: center;
+	background: rgba(0, 0, 0, 0.35);
+	z-index: 10000;
+	pointer-events: auto;
 }
--- a/frontend/src/container/CreateAlertV2/CreateAlertV2.tsx
+++ b/frontend/src/container/CreateAlertV2/CreateAlertV2.tsx
@@ -2,34 +2,36 @@ import './CreateAlertV2.styles.scss';

 import { initialQueriesMap } from 'constants/queryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';

 import AlertCondition from './AlertCondition';
 import { CreateAlertProvider } from './context';
+import { buildInitialAlertDef } from './context/utils';
 import CreateAlertHeader from './CreateAlertHeader';
-import EvaluationSettings from './EvaluationSettings';
+import Footer from './Footer';
 import NotificationSettings from './NotificationSettings';
 import QuerySection from './QuerySection';
-import { showCondensedLayout } from './utils';
+import { CreateAlertV2Props } from './types';
+import { Spinner } from './utils';

-function CreateAlertV2({
-	initialQuery = initialQueriesMap.metrics,
-}: {
-	initialQuery?: Query;
-}): JSX.Element {
-	useShareBuilderUrl({ defaultValue: initialQuery });
+function CreateAlertV2({ alertType }: CreateAlertV2Props): JSX.Element {
+	const queryToRedirect = buildInitialAlertDef(alertType);
+	const currentQueryToRedirect = mapQueryDataFromApi(
+		queryToRedirect.condition.compositeQuery,
+	);

-	const showCondensedLayoutFlag = showCondensedLayout();
+	useShareBuilderUrl({ defaultValue: currentQueryToRedirect });

 	return (
-		<CreateAlertProvider>
+		<CreateAlertProvider initialAlertType={alertType}>
+			<Spinner />
 			<div className="create-alert-v2-container">
 				<CreateAlertHeader />
 				<QuerySection />
 				<AlertCondition />
-				{!showCondensedLayoutFlag ? <EvaluationSettings /> : null}
 				<NotificationSettings />
 			</div>
+			<Footer />
 		</CreateAlertProvider>
 	);
 }
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx
@@ -2,7 +2,7 @@ import './styles.scss';

 import { Switch, Tooltip, Typography } from 'antd';
 import { Info } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { IAdvancedOptionItemProps } from '../types';

@@ -12,9 +12,14 @@ function AdvancedOptionItem({
 	input,
 	tooltipText,
 	onToggle,
+	defaultShowInput,
 }: IAdvancedOptionItemProps): JSX.Element {
 	const [showInput, setShowInput] = useState<boolean>(false);

+	useEffect(() => {
+		setShowInput(defaultShowInput);
+	}, [defaultShowInput]);
+
 	const handleOnToggle = (): void => {
 		onToggle?.();
 		setShowInput((currentShowInput) => !currentShowInput);
@@ -42,7 +47,7 @@ function AdvancedOptionItem({
 				>
 					{input}
 				</div>
-				<Switch onChange={handleOnToggle} />
+				<Switch onChange={handleOnToggle} checked={showInput} />
 			</div>
 		</div>
 	);
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/styles.scss
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/styles.scss
@@ -114,6 +114,14 @@
 					height: 32px;
 					border: 1px solid var(--bg-slate-400);

+					&:hover {
+						border-color: var(--bg-vanilla-300);
+					}
+
+					&:focus {
+						border-color: var(--bg-vanilla-300);
+					}
+
 					.ant-select-selection-placeholder {
 						font-family: 'Space Mono';
 					}
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx
@@ -1,5 +1,4 @@
-import { Collapse, Input, Select, Typography } from 'antd';
-import { Y_AXIS_CATEGORIES } from 'components/YAxisUnitSelector/constants';
+import { Collapse, Input, Typography } from 'antd';

 import { useCreateAlertState } from '../context';
 import AdvancedOptionItem from './AdvancedOptionItem';
@@ -8,10 +7,6 @@ import EvaluationCadence from './EvaluationCadence';
 function AdvancedOptions(): JSX.Element {
 	const { advancedOptions, setAdvancedOptions } = useCreateAlertState();

-	const timeOptions = Y_AXIS_CATEGORIES.find(
-		(category) => category.name === 'Time',
-	)?.units.map((unit) => ({ label: unit.name, value: unit.id }));
-
 	return (
 		<div className="advanced-options-container">
 			<Collapse bordered={false}>
@@ -38,24 +33,16 @@ function AdvancedOptions(): JSX.Element {
 									}
 									value={advancedOptions.sendNotificationIfDataIsMissing.toleranceLimit}
 								/>
-								<Select
-									style={{ width: 120 }}
-									options={timeOptions}
-									placeholder="Select time unit"
-									onChange={(value): void =>
-										setAdvancedOptions({
-											type: 'SET_SEND_NOTIFICATION_IF_DATA_IS_MISSING',
-											payload: {
-												toleranceLimit:
-													advancedOptions.sendNotificationIfDataIsMissing.toleranceLimit,
-												timeUnit: value as string,
-											},
-										})
-									}
-									value={advancedOptions.sendNotificationIfDataIsMissing.timeUnit}
-								/>
+								<Typography.Text>Minutes</Typography.Text>
 							</div>
 						}
+						onToggle={(): void =>
+							setAdvancedOptions({
+								type: 'TOGGLE_SEND_NOTIFICATION_IF_DATA_IS_MISSING',
+								payload: !advancedOptions.sendNotificationIfDataIsMissing.enabled,
+							})
+						}
+						defaultShowInput={advancedOptions.sendNotificationIfDataIsMissing.enabled}
 					/>
 					<AdvancedOptionItem
 						title="Minimum data required"
@@ -80,8 +67,16 @@ function AdvancedOptions(): JSX.Element {
 								<Typography.Text>Datapoints</Typography.Text>
 							</div>
 						}
+						onToggle={(): void =>
+							setAdvancedOptions({
+								type: 'TOGGLE_ENFORCE_MINIMUM_DATAPOINTS',
+								payload: !advancedOptions.enforceMinimumDatapoints.enabled,
+							})
+						}
+						defaultShowInput={advancedOptions.enforceMinimumDatapoints.enabled}
 					/>
-					<AdvancedOptionItem
+					{/* TODO: Add back when the functionality is implemented */}
+					{/* <AdvancedOptionItem
 						title="Account for data delay"
 						description="Shift the evaluation window backwards to account for data processing delays."
 						tooltipText="Use when your data takes time to arrive on the platform. For example, if logs typically arrive 5 minutes late, set a 5-minute delay so the alert checks the correct time window."
@@ -119,7 +114,7 @@ function AdvancedOptions(): JSX.Element {
 								/>
 							</div>
 						}
-					/>
+					/> */}
 				</Collapse.Panel>
 			</Collapse>
 		</div>
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx
@@ -1,8 +1,8 @@
 import './styles.scss';
 import '../AdvancedOptionItem/styles.scss';

-import { Button, Input, Select, Tooltip, Typography } from 'antd';
-import { Info, Plus } from 'lucide-react';
+import { Input, Select, Tooltip, Typography } from 'antd';
+import { Info } from 'lucide-react';
 import { useEffect, useState } from 'react';

 import { useCreateAlertState } from '../../context';
@@ -36,10 +36,10 @@ function EvaluationCadence(): JSX.Element {
 		);
 	}, [advancedOptions.evaluationCadence.mode]);

-	const showCustomSchedule = (): void => {
-		setIsEvaluationCadenceDetailsVisible(true);
-		setIsCustomScheduleButtonVisible(false);
-	};
+	// const showCustomSchedule = (): void => {
+	// 	setIsEvaluationCadenceDetailsVisible(true);
+	// 	setIsCustomScheduleButtonVisible(false);
+	// };

 	return (
 		<div className="evaluation-cadence-container">
@@ -98,13 +98,14 @@ function EvaluationCadence(): JSX.Element {
 								}
 							/>
 						</Input.Group>
-						<Button
+						{/* TODO: Add custom schedule back once the functionality is implemented */}
+						{/* <Button
 							className="advanced-option-item-button"
 							onClick={showCustomSchedule}
 						>
 							<Plus size={12} />
 							<Typography.Text>Add custom schedule</Typography.Text>
-						</Button>
+						</Button> */}
 					</div>
 				)}
 			</div>
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/styles.scss
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/styles.scss
@@ -164,6 +164,14 @@
 							background-color: var(--bg-ink-300);
 							border: 1px solid var(--bg-slate-400);
 							color: var(--bg-vanilla-100);
+
+							&:hover {
+								border-color: var(--bg-vanilla-300);
+							}
+
+							&:focus {
+								border-color: var(--bg-vanilla-300);
+							}
 						}
 					}

@@ -529,6 +537,15 @@
 								background-color: var(--bg-vanilla-300);
 								border: 1px solid var(--bg-vanilla-300);
 								color: var(--bg-ink-400);
+
+								&:hover {
+									border-color: var(--bg-ink-300);
+								}
+
+								&:focus {
+									border-color: var(--bg-ink-300);
+									box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+								}
 							}
 						}

--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationSettings.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationSettings.tsx
@@ -1,28 +1,19 @@
 import './styles.scss';

-import { Button, Popover, Typography } from 'antd';
+import { Button, Popover } from 'antd';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import { useState } from 'react';
-import { AlertTypes } from 'types/api/alerts/alertTypes';

 import { useCreateAlertState } from '../context';
-import Stepper from '../Stepper';
-import { showCondensedLayout } from '../utils';
-import AdvancedOptions from './AdvancedOptions';
 import EvaluationWindowPopover from './EvaluationWindowPopover';
 import { getEvaluationWindowTypeText, getTimeframeText } from './utils';

 function EvaluationSettings(): JSX.Element {
-	const {
-		alertType,
-		evaluationWindow,
-		setEvaluationWindow,
-	} = useCreateAlertState();
+	const { evaluationWindow, setEvaluationWindow } = useCreateAlertState();
 	const [
 		isEvaluationWindowPopoverOpen,
 		setIsEvaluationWindowPopoverOpen,
 	] = useState(false);
-	const showCondensedLayoutFlag = showCondensedLayout();

 	const popoverContent = (
 		<Popover
@@ -57,33 +48,12 @@ function EvaluationSettings(): JSX.Element {
 		</Popover>
 	);

-	// Layout consists of only the evaluation window popover
-	if (showCondensedLayoutFlag) {
-		return (
-			<div
-				className="condensed-evaluation-settings-container"
-				data-testid="condensed-evaluation-settings-container"
-			>
-				{popoverContent}
-			</div>
-		);
-	}
-
-	// Layout consists of
-	// - Stepper header
-	// - Evaluation window popover
-	// - Advanced options
 	return (
-		<div className="evaluation-settings-container">
-			<Stepper stepNumber={3} label="Evaluation settings" />
-			{alertType !== AlertTypes.ANOMALY_BASED_ALERT && (
-				<div className="evaluate-alert-conditions-container">
-					<Typography.Text>Check conditions using data from</Typography.Text>
-					<div className="evaluate-alert-conditions-separator" />
-					{popoverContent}
-				</div>
-			)}
-			<AdvancedOptions />
+		<div
+			className="condensed-evaluation-settings-container"
+			data-testid="condensed-evaluation-settings-container"
+		>
+			{popoverContent}
 		</div>
 	);
 }
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx
@@ -3,8 +3,8 @@ import { useMemo } from 'react';

 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
 import {
-	CUMULATIVE_WINDOW_DESCRIPTION,
-	ROLLING_WINDOW_DESCRIPTION,
+	getCumulativeWindowDescription,
+	getRollingWindowDescription,
 	TIMEZONE_DATA,
 } from '../constants';
 import TimeInput from '../TimeInput';
@@ -116,7 +116,9 @@ function EvaluationWindowDetails({
 	if (isCurrentHour) {
 		return (
 			<div className="evaluation-window-details">
-				<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
+				<Typography.Text>
+					{getCumulativeWindowDescription(evaluationWindow.timeframe)}
+				</Typography.Text>
 				<Typography.Text>{displayText}</Typography.Text>
 				<div className="select-group">
 					<Typography.Text>STARTING AT MINUTE</Typography.Text>
@@ -134,7 +136,9 @@ function EvaluationWindowDetails({
 	if (isCurrentDay) {
 		return (
 			<div className="evaluation-window-details">
-				<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
+				<Typography.Text>
+					{getCumulativeWindowDescription(evaluationWindow.timeframe)}
+				</Typography.Text>
 				<Typography.Text>{displayText}</Typography.Text>
 				<div className="select-group time-select-group">
 					<Typography.Text>STARTING AT</Typography.Text>
@@ -159,7 +163,9 @@ function EvaluationWindowDetails({
 	if (isCurrentMonth) {
 		return (
 			<div className="evaluation-window-details">
-				<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
+				<Typography.Text>
+					{getCumulativeWindowDescription(evaluationWindow.timeframe)}
+				</Typography.Text>
 				<Typography.Text>{displayText}</Typography.Text>
 				<div className="select-group">
 					<Typography.Text>STARTING ON DAY</Typography.Text>
@@ -192,7 +198,9 @@ function EvaluationWindowDetails({

 	return (
 		<div className="evaluation-window-details">
-			<Typography.Text>{ROLLING_WINDOW_DESCRIPTION}</Typography.Text>
+			<Typography.Text>
+				{getRollingWindowDescription(evaluationWindow.timeframe)}
+			</Typography.Text>
 			<Typography.Text>Specify custom duration</Typography.Text>
 			<Typography.Text>{displayText}</Typography.Text>
 			<div className="select-group">
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx
@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import { Check } from 'lucide-react';

 import {
-	CUMULATIVE_WINDOW_DESCRIPTION,
 	EVALUATION_WINDOW_TIMEFRAME,
 	EVALUATION_WINDOW_TYPE,
-	ROLLING_WINDOW_DESCRIPTION,
+	getCumulativeWindowDescription,
+	getRollingWindowDescription,
 } from '../constants';
 import {
 	CumulativeWindowTimeframes,
@@ -96,7 +96,9 @@ function EvaluationWindowPopover({
 			}
 			return (
 				<div className="selection-content">
-					<Typography.Text>{ROLLING_WINDOW_DESCRIPTION}</Typography.Text>
+					<Typography.Text>
+						{getRollingWindowDescription(evaluationWindow.timeframe)}
+					</Typography.Text>
 					<Button type="link">Read the docs</Button>
 				</div>
 			);
@@ -108,7 +110,9 @@ function EvaluationWindowPopover({
 		) {
 			return (
 				<div className="selection-content">
-					<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
+					<Typography.Text>
+						{getCumulativeWindowDescription(evaluationWindow.timeframe)}
+					</Typography.Text>
 					<Button type="link">Read the docs</Button>
 				</div>
 			);
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/AdvancedOptionItem.test.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/AdvancedOptionItem.test.tsx
@@ -33,6 +33,7 @@ describe('AdvancedOptionItem', () => {
 				title={defaultProps.title}
 				description={defaultProps.description}
 				input={defaultProps.input}
+				defaultShowInput={false}
 			/>,
 		);

@@ -50,6 +51,7 @@ describe('AdvancedOptionItem', () => {
 				title={defaultProps.title}
 				description={defaultProps.description}
 				input={defaultProps.input}
+				defaultShowInput={false}
 			/>,
 		);

@@ -65,6 +67,7 @@ describe('AdvancedOptionItem', () => {
 				title={defaultProps.title}
 				description={defaultProps.description}
 				input={defaultProps.input}
+				defaultShowInput={false}
 			/>,
 		);

@@ -88,6 +91,7 @@ describe('AdvancedOptionItem', () => {
 				title={defaultProps.title}
 				description={defaultProps.description}
 				input={defaultProps.input}
+				defaultShowInput={false}
 			/>,
 		);

@@ -117,6 +121,7 @@ describe('AdvancedOptionItem', () => {
 				title={defaultProps.title}
 				description={defaultProps.description}
 				input={defaultProps.input}
+				defaultShowInput={false}
 			/>,
 		);

@@ -146,6 +151,7 @@ describe('AdvancedOptionItem', () => {
 				title={defaultProps.title}
 				description={defaultProps.description}
 				input={defaultProps.input}
+				defaultShowInput={false}
 			/>,
 		);

@@ -160,9 +166,24 @@ describe('AdvancedOptionItem', () => {
 				description={defaultProps.description}
 				input={defaultProps.input}
 				tooltipText="mock tooltip text"
+				defaultShowInput={false}
 			/>,
 		);
 		const tooltipIcon = screen.getByTestId('tooltip-icon');
 		expect(tooltipIcon).toBeInTheDocument();
 	});
+
+	it('should show input when defaultShowInput is true', () => {
+		render(
+			<AdvancedOptionItem
+				title={defaultProps.title}
+				description={defaultProps.description}
+				input={defaultProps.input}
+				defaultShowInput
+			/>,
+		);
+		const inputElement = screen.getByTestId(TEST_INPUT_TEST_ID);
+		expect(inputElement).toBeInTheDocument();
+		expect(inputElement).toBeVisible();
+	});
 });
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/AdvancedOptions.test.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/AdvancedOptions.test.tsx
@@ -28,9 +28,10 @@ describe('AdvancedOptions', () => {
 		expect(
 			screen.queryByText(MINIMUM_DATA_REQUIRED_TEXT),
 		).not.toBeInTheDocument();
-		expect(
-			screen.queryByText(ACCOUNT_FOR_DATA_DELAY_TEXT),
-		).not.toBeInTheDocument();
+		// TODO: Uncomment this when account for data delay is implemented
+		// expect(
+		// 	screen.queryByText(ACCOUNT_FOR_DATA_DELAY_TEXT),
+		// ).not.toBeInTheDocument();
 	});

 	it('should be able to expand the advanced options', () => {
@@ -42,9 +43,10 @@ describe('AdvancedOptions', () => {
 		expect(
 			screen.queryByText(MINIMUM_DATA_REQUIRED_TEXT),
 		).not.toBeInTheDocument();
-		expect(
-			screen.queryByText(ACCOUNT_FOR_DATA_DELAY_TEXT),
-		).not.toBeInTheDocument();
+		// TODO: Uncomment this when account for data delay is implemented
+		// expect(
+		// 	screen.queryByText(ACCOUNT_FOR_DATA_DELAY_TEXT),
+		// ).not.toBeInTheDocument();

 		const collapse = screen.getByRole('button', { name: /ADVANCED OPTIONS/i });
 		fireEvent.click(collapse);
@@ -52,7 +54,8 @@ describe('AdvancedOptions', () => {
 		expect(screen.getByText('How often to check')).toBeInTheDocument();
 		expect(screen.getByText('Alert when data stops coming')).toBeInTheDocument();
 		expect(screen.getByText('Minimum data required')).toBeInTheDocument();
-		expect(screen.getByText('Account for data delay')).toBeInTheDocument();
+		// TODO: Uncomment this when account for data delay is implemented
+		// expect(screen.getByText('Account for data delay')).toBeInTheDocument();
 	});

 	it('"Alert when data stops coming" works as expected', () => {
@@ -112,7 +115,7 @@ describe('AdvancedOptions', () => {
 		});
 	});

-	it('"Account for data delay" works as expected', () => {
+	it.skip('"Account for data delay" works as expected', () => {
 		render(<AdvancedOptions />);

 		const collapse = screen.getByRole('button', { name: /ADVANCED OPTIONS/i });
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/EvaluationCadence.test.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/EvaluationCadence.test.tsx
@@ -64,10 +64,12 @@ describe('EvaluationCadence', () => {
 		).toBeInTheDocument();
 		expect(screen.getByPlaceholderText('Enter time')).toHaveValue(1);
 		expect(screen.getByText('Minutes')).toBeInTheDocument();
-		expect(screen.getByText(ADD_CUSTOM_SCHEDULE_TEXT)).toBeInTheDocument();
+		// TODO: Uncomment this when add custom schedule button is implemented
+		// expect(screen.getByText(ADD_CUSTOM_SCHEDULE_TEXT)).toBeInTheDocument();
 	});

-	it('should hide the input group when add custom schedule button is clicked', () => {
+	// TODO: Unskip this when add custom schedule button is implemented
+	it.skip('should hide the input group when add custom schedule button is clicked', () => {
 		render(<EvaluationCadence />);

 		expect(
@@ -84,12 +86,14 @@ describe('EvaluationCadence', () => {
 		).toBeInTheDocument();
 	});

-	it('should not show the edit custom schedule component in default mode', () => {
+	// TODO: Unskip this when add custom schedule button is implemented
+	it.skip('should not show the edit custom schedule component in default mode', () => {
 		render(<EvaluationCadence />);
 		expect(screen.queryByTestId('edit-custom-schedule')).not.toBeInTheDocument();
 	});

-	it('should show the custom schedule text when the mode is custom with selected values', () => {
+	// TODO: Unskip this when add custom schedule button is implemented
+	it.skip('should show the custom schedule text when the mode is custom with selected values', () => {
 		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
 			createMockAlertContextState({
 				advancedOptions: {
@@ -118,7 +122,8 @@ describe('EvaluationCadence', () => {
 		).not.toBeInTheDocument();
 	});

-	it('should show evaluation cadence details component when clicked on add custom schedule button', () => {
+	// TODO: Unskip this when add custom schedule button is implemented
+	it.skip('should show evaluation cadence details component when clicked on add custom schedule button', () => {
 		render(<EvaluationCadence />);

 		expect(
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/EvaluationSettings.test.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/EvaluationSettings.test.tsx
@@ -1,11 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import * as alertState from 'container/CreateAlertV2/context';
-import * as utils from 'container/CreateAlertV2/utils';
-import { AlertTypes } from 'types/api/alerts/alertTypes';

 import EvaluationSettings from '../EvaluationSettings';
 import { createMockAlertContextState } from './testUtils';

+jest.mock('container/CreateAlertV2/utils', () => ({
+	...jest.requireActual('container/CreateAlertV2/utils'),
+}));
+
 const mockSetEvaluationWindow = jest.fn();
 jest.spyOn(alertState, 'useCreateAlertState').mockReturnValue(
 	createMockAlertContextState({
@@ -13,52 +15,14 @@ jest.spyOn(alertState, 'useCreateAlertState').mockReturnValue(
 	}),
 );

-jest.mock('../AdvancedOptions', () => ({
-	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="advanced-options">AdvancedOptions</div>
-	),
-}));
-
-const EVALUATION_SETTINGS_TEXT = 'Evaluation settings';
-const CHECK_CONDITIONS_USING_DATA_FROM_TEXT =
-	'Check conditions using data from';
-
 describe('EvaluationSettings', () => {
-	it('should render the default evaluation settings layout', () => {
-		render(<EvaluationSettings />);
-		expect(screen.getByText(EVALUATION_SETTINGS_TEXT)).toBeInTheDocument();
-		expect(
-			screen.getByText(CHECK_CONDITIONS_USING_DATA_FROM_TEXT),
-		).toBeInTheDocument();
-		expect(screen.getByTestId('advanced-options')).toBeInTheDocument();
-	});
-
-	it('should not render evaluation window for anomaly based alert', () => {
-		jest.spyOn(alertState, 'useCreateAlertState').mockReturnValueOnce(
-			createMockAlertContextState({
-				alertType: AlertTypes.ANOMALY_BASED_ALERT,
-			}),
-		);
-		render(<EvaluationSettings />);
-		expect(screen.getByText(EVALUATION_SETTINGS_TEXT)).toBeInTheDocument();
-		expect(
-			screen.queryByText(CHECK_CONDITIONS_USING_DATA_FROM_TEXT),
-		).not.toBeInTheDocument();
-	});
-
 	it('should render the condensed evaluation settings layout', () => {
-		jest.spyOn(utils, 'showCondensedLayout').mockReturnValueOnce(true);
 		render(<EvaluationSettings />);
-		// Header, check conditions using data from and advanced options should be hidden
-		expect(screen.queryByText(EVALUATION_SETTINGS_TEXT)).not.toBeInTheDocument();
-		expect(
-			screen.queryByText(CHECK_CONDITIONS_USING_DATA_FROM_TEXT),
-		).not.toBeInTheDocument();
-		expect(screen.queryByTestId('advanced-options')).not.toBeInTheDocument();
-		// Only evaluation window popover should be visible
 		expect(
 			screen.getByTestId('condensed-evaluation-settings-container'),
 		).toBeInTheDocument();
+		// Verify that default option is selected
+		expect(screen.getByText('Rolling')).toBeInTheDocument();
+		expect(screen.getByText('Last 5 minutes')).toBeInTheDocument();
 	});
 });
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/EvaluationWindowDetails.test.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/EvaluationWindowDetails.test.tsx
@@ -24,9 +24,12 @@ describe('EvaluationWindowDetails', () => {
 			/>,
 		);
 		expect(
-			screen.getByText(
-				'A Rolling Window has a fixed size and shifts its starting point over time based on when the rules are evaluated.',
-			),
+			screen.getAllByText(
+				(_, element) =>
+					element?.textContent?.includes(
+						'Monitors data over a fixed time period that moves forward continuously',
+					) ?? false,
+			)[0],
 		).toBeInTheDocument();
 		expect(screen.getByText('Specify custom duration')).toBeInTheDocument();
 		expect(screen.getByText('Last 5 Minutes')).toBeInTheDocument();
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/EvaluationWindowPopover.test.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/EvaluationWindowPopover.test.tsx
@@ -125,9 +125,12 @@ describe('EvaluationWindowPopover', () => {
 			/>,
 		);
 		expect(
-			screen.getByText(
-				'A Rolling Window has a fixed size and shifts its starting point over time based on when the rules are evaluated.',
-			),
+			screen.getAllByText(
+				(_, element) =>
+					element?.textContent?.includes(
+						'Monitors data over a fixed time period that moves forward continuously',
+					) ?? false,
+			)[0],
 		).toBeInTheDocument();
 		expect(
 			screen.queryByTestId(EVALUATION_WINDOW_DETAILS_TEST_ID),
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/testUtils.ts
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/tests/testUtils.ts
@@ -26,6 +26,14 @@ export const createMockAlertContextState = (
 	setEvaluationWindow: jest.fn(),
 	notificationSettings: INITIAL_NOTIFICATION_SETTINGS_STATE,
 	setNotificationSettings: jest.fn(),
+	discardAlertRule: jest.fn(),
+	testAlertRule: jest.fn(),
+	isCreatingAlertRule: false,
+	isTestingAlertRule: false,
+	createAlertRule: jest.fn(),
+	isUpdatingAlertRule: false,
+	updateAlertRule: jest.fn(),
+	isEditMode: false,
 	...overrides,
 });

--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/constants.ts
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/constants.ts
@@ -62,8 +62,87 @@ export const TIMEZONE_DATA = generateTimezoneData().map((timezone) => ({
 	value: timezone.value,
 }));

-export const CUMULATIVE_WINDOW_DESCRIPTION =
-	'A Cumulative Window has a fixed starting point and expands over time.';
+export const getCumulativeWindowDescription = (timeframe?: string): string => {
+	let example = '';
+	switch (timeframe) {
+		case 'currentHour':
+			example =
+				'An hourly cumulative window for error count alerts when errors exceed 100. Starting at the top of the hour, it tracks: 20 errors by :15, 55 by :30, 105 by :45 (alert fires).';
+			break;
+		case 'currentDay':
+			example =
+				'A daily cumulative window for sales alerts when total revenue exceeds $10,000. Starting at midnight, it tracks: $2,000 by 9 AM, $5,500 by noon, $11,000 by 3 PM (alert fires).';
+			break;
+		case 'currentMonth':
+			example =
+				'A monthly cumulative window for expense alerts when spending exceeds $50,000. Starting on the 1st, it tracks: $15,000 by the 7th, $32,000 by the 15th, $51,000 by the 22nd (alert fires).';
+			break;
+		default:
+			example = '';
+	}
+	return `Monitors data accumulated since a fixed starting point. The window grows over time, keeping all historical data from the start.\n\nExample: ${example}`;
+};

-export const ROLLING_WINDOW_DESCRIPTION =
-	'A Rolling Window has a fixed size and shifts its starting point over time based on when the rules are evaluated.';
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export const getRollingWindowDescription = (duration?: string): string => {
+	let timeWindow = '5-minute';
+	let examples = '14:01:00-14:06:00, 14:02:00-14:07:00';
+
+	if (duration) {
+		const match = duration.match(/^(\d+)([mhs])/);
+		if (match) {
+			const value = parseInt(match[1], 10);
+			const unit = match[2];
+
+			if (unit === 'm' && !Number.isNaN(value)) {
+				timeWindow = `${value}-minute`;
+				const endMinutes1 = 1 + value;
+				const endMinutes2 = 2 + value;
+				examples = `14:01:00-14:${String(endMinutes1).padStart(
+					2,
+					'0',
+				)}:00, 14:02:00-14:${String(endMinutes2).padStart(2, '0')}:00`;
+			} else if (unit === 'h' && !Number.isNaN(value)) {
+				timeWindow = `${value}-hour`;
+				const endHour1 = 14 + value;
+				const endHour2 = 14 + value;
+				examples = `14:00:00-${String(endHour1).padStart(
+					2,
+					'0',
+				)}:00:00, 14:01:00-${String(endHour2).padStart(2, '0')}:01:00`;
+			} else if (unit === 's' && !Number.isNaN(value)) {
+				timeWindow = `${value}-second`;
+				examples = `14:01:00-14:01:${String(value).padStart(
+					2,
+					'0',
+				)}, 14:01:01-14:01:${String(1 + value).padStart(2, '0')}`;
+			}
+		} else if (duration === 'custom') {
+			timeWindow = '5-minute';
+			examples = '14:01:00-14:06:00, 14:02:00-14:07:00';
+		} else if (duration.includes('h')) {
+			const hours = parseInt(duration, 10);
+			if (!Number.isNaN(hours)) {
+				timeWindow = `${hours}-hour`;
+				const endHour = 14 + hours;
+				examples = `14:00:00-${String(endHour).padStart(
+					2,
+					'0',
+				)}:00:00, 14:01:00-${String(endHour).padStart(2, '0')}:01:00`;
+			}
+		} else if (duration.includes('m')) {
+			const minutes = parseInt(duration, 10);
+			if (!Number.isNaN(minutes)) {
+				timeWindow = `${minutes}-minute`;
+				const endMinutes1 = 1 + minutes;
+				const endMinutes2 = 2 + minutes;
+				examples = `14:01:00-14:${String(endMinutes1).padStart(
+					2,
+					'0',
+				)}:00, 14:02:00-14:${String(endMinutes2).padStart(2, '0')}:00`;
+			}
+		}
+	}
+
+	return `Monitors data over a fixed time period that moves forward continuously.\n\nExample: A ${timeWindow} rolling window for error rate alerts with 1 minute evaluation cadence. Unlike fixed windows, this checks continuously: ${examples}, etc.`;
+};
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/styles.scss
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/styles.scss
@@ -209,6 +209,16 @@

 			.ant-select {
 				width: 40px;
+
+				.ant-select-selector {
+					&:hover {
+						border-color: var(--bg-vanilla-300);
+					}
+
+					&:focus {
+						border-color: var(--bg-vanilla-300);
+					}
+				}
 			}
 		}
 	}
@@ -231,6 +241,14 @@
 			border: 1px solid var(--bg-slate-400);
 			color: var(--bg-vanilla-100);
 			height: 32px;
+
+			&:hover {
+				border-color: var(--bg-vanilla-300);
+			}
+
+			&:focus {
+				border-color: var(--bg-vanilla-300);
+			}
 		}

 		&:hover {
@@ -379,6 +397,14 @@
 				background-color: var(--bg-vanilla-300);
 				border: 1px solid var(--bg-vanilla-300);
 				color: var(--bg-ink-400);
+
+				&:hover {
+					border-color: var(--bg-ink-300);
+				}
+
+				&:focus {
+					border-color: var(--bg-ink-300);
+				}
 			}

 			&:hover {
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/types.ts
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/types.ts
@@ -11,6 +11,7 @@ export interface IAdvancedOptionItemProps {
 	input: JSX.Element;
 	tooltipText?: string;
 	onToggle?: () => void;
+	defaultShowInput: boolean;
 }

 export enum RollingWindowTimeframes {
--- a/frontend/src/container/CreateAlertV2/Footer/Footer.tsx
+++ b/frontend/src/container/CreateAlertV2/Footer/Footer.tsx
@@ -0,0 +1,193 @@
+import './styles.scss';
+
+import { toast } from '@signozhq/sonner';
+import { Button, Tooltip, Typography } from 'antd';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { Check, Send, X } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+
+import { useCreateAlertState } from '../context';
+import {
+	buildCreateThresholdAlertRulePayload,
+	validateCreateAlertState,
+} from './utils';
+
+function Footer(): JSX.Element {
+	const {
+		alertType,
+		alertState: basicAlertState,
+		thresholdState,
+		advancedOptions,
+		evaluationWindow,
+		notificationSettings,
+		discardAlertRule,
+		createAlertRule,
+		isCreatingAlertRule,
+		testAlertRule,
+		isTestingAlertRule,
+		updateAlertRule,
+		isUpdatingAlertRule,
+		isEditMode,
+	} = useCreateAlertState();
+	const { currentQuery } = useQueryBuilder();
+	const { safeNavigate } = useSafeNavigate();
+
+	const handleDiscard = (): void => {
+		discardAlertRule();
+		safeNavigate('/alerts');
+	};
+
+	const alertValidationMessage = useMemo(
+		() =>
+			validateCreateAlertState({
+				alertType,
+				basicAlertState,
+				thresholdState,
+				advancedOptions,
+				evaluationWindow,
+				notificationSettings,
+				query: currentQuery,
+			}),
+		[
+			alertType,
+			basicAlertState,
+			thresholdState,
+			advancedOptions,
+			evaluationWindow,
+			notificationSettings,
+			currentQuery,
+		],
+	);
+
+	const handleTestNotification = useCallback((): void => {
+		const payload = buildCreateThresholdAlertRulePayload({
+			alertType,
+			basicAlertState,
+			thresholdState,
+			advancedOptions,
+			evaluationWindow,
+			notificationSettings,
+			query: currentQuery,
+		});
+		testAlertRule(payload, {
+			onSuccess: (response) => {
+				if (response.payload?.data?.alertCount === 0) {
+					toast.error(
+						'No alerts found during the evaluation. This happens when rule condition is unsatisfied. You may adjust the rule threshold and retry.',
+					);
+					return;
+				}
+				toast.success('Test notification sent successfully');
+			},
+			onError: (error) => {
+				toast.error(error.message);
+			},
+		});
+	}, [
+		alertType,
+		basicAlertState,
+		thresholdState,
+		advancedOptions,
+		evaluationWindow,
+		notificationSettings,
+		currentQuery,
+		testAlertRule,
+	]);
+
+	const handleSaveAlert = useCallback((): void => {
+		const payload = buildCreateThresholdAlertRulePayload({
+			alertType,
+			basicAlertState,
+			thresholdState,
+			advancedOptions,
+			evaluationWindow,
+			notificationSettings,
+			query: currentQuery,
+		});
+		if (isEditMode) {
+			updateAlertRule(payload, {
+				onSuccess: () => {
+					toast.success('Alert rule updated successfully');
+					safeNavigate('/alerts');
+				},
+				onError: (error) => {
+					toast.error(error.message);
+				},
+			});
+		} else {
+			createAlertRule(payload, {
+				onSuccess: () => {
+					toast.success('Alert rule created successfully');
+					safeNavigate('/alerts');
+				},
+				onError: (error) => {
+					toast.error(error.message);
+				},
+			});
+		}
+	}, [
+		alertType,
+		basicAlertState,
+		thresholdState,
+		advancedOptions,
+		evaluationWindow,
+		notificationSettings,
+		currentQuery,
+		isEditMode,
+		updateAlertRule,
+		createAlertRule,
+		safeNavigate,
+	]);
+
+	const disableButtons =
+		isCreatingAlertRule || isTestingAlertRule || isUpdatingAlertRule;
+
+	const saveAlertButton = useMemo(() => {
+		let button = (
+			<Button
+				type="primary"
+				onClick={handleSaveAlert}
+				disabled={disableButtons || Boolean(alertValidationMessage)}
+			>
+				<Check size={14} />
+				<Typography.Text>Save Alert Rule</Typography.Text>
+			</Button>
+		);
+		if (alertValidationMessage) {
+			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
+		}
+		return button;
+	}, [alertValidationMessage, disableButtons, handleSaveAlert]);
+
+	const testAlertButton = useMemo(() => {
+		let button = (
+			<Button
+				type="default"
+				onClick={handleTestNotification}
+				disabled={disableButtons || Boolean(alertValidationMessage)}
+			>
+				<Send size={14} />
+				<Typography.Text>Test Notification</Typography.Text>
+			</Button>
+		);
+		if (alertValidationMessage) {
+			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
+		}
+		return button;
+	}, [alertValidationMessage, disableButtons, handleTestNotification]);
+
+	return (
+		<div className="create-alert-v2-footer">
+			<Button type="default" onClick={handleDiscard} disabled={disableButtons}>
+				<X size={14} /> Discard
+			</Button>
+			<div className="button-group">
+				{testAlertButton}
+				{saveAlertButton}
+			</div>
+		</div>
+	);
+}
+
+export default Footer;
--- a/frontend/src/container/CreateAlertV2/Footer/tests/Footer.test.tsx
+++ b/frontend/src/container/CreateAlertV2/Footer/tests/Footer.test.tsx
@@ -0,0 +1,248 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import {
+	AlertThresholdMatchType,
+	AlertThresholdOperator,
+} from 'container/CreateAlertV2/context/types';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
+
+import * as createAlertState from '../../context';
+import Footer from '../Footer';
+
+// Mock the hooks used by Footer component
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: jest.fn(),
+}));
+
+const mockCreateAlertRule = jest.fn();
+const mockTestAlertRule = jest.fn();
+const mockUpdateAlertRule = jest.fn();
+const mockDiscardAlertRule = jest.fn();
+
+// Import the mocked hooks
+const { useQueryBuilder } = jest.requireMock(
+	'hooks/queryBuilder/useQueryBuilder',
+);
+const { useSafeNavigate } = jest.requireMock('hooks/useSafeNavigate');
+
+const mockAlertContextState = createMockAlertContextState({
+	createAlertRule: mockCreateAlertRule,
+	testAlertRule: mockTestAlertRule,
+	updateAlertRule: mockUpdateAlertRule,
+	discardAlertRule: mockDiscardAlertRule,
+	alertState: {
+		name: 'Test Alert',
+		labels: {},
+		yAxisUnit: undefined,
+	},
+	thresholdState: {
+		selectedQuery: 'A',
+		operator: AlertThresholdOperator.ABOVE_BELOW,
+		matchType: AlertThresholdMatchType.AT_LEAST_ONCE,
+		evaluationWindow: '5m0s',
+		algorithm: 'standard',
+		seasonality: 'hourly',
+		thresholds: [
+			{
+				id: '1',
+				label: 'CRITICAL',
+				thresholdValue: 0,
+				recoveryThresholdValue: null,
+				unit: '',
+				channels: ['test-channel'],
+				color: '#ff0000',
+			},
+		],
+	},
+});
+
+jest
+	.spyOn(createAlertState, 'useCreateAlertState')
+	.mockReturnValue(mockAlertContextState);
+
+const SAVE_ALERT_RULE_TEXT = 'Save Alert Rule';
+const TEST_NOTIFICATION_TEXT = 'Test Notification';
+const DISCARD_TEXT = 'Discard';
+
+describe('Footer', () => {
+	beforeEach(() => {
+		useQueryBuilder.mockReturnValue({
+			currentQuery: {
+				builder: {
+					queryData: [],
+					queryFormulas: [],
+				},
+				promql: [],
+				clickhouse_sql: [],
+				queryType: 'builder',
+			},
+		});
+
+		useSafeNavigate.mockReturnValue({
+			safeNavigate: jest.fn(),
+		});
+	});
+
+	it('should render the component with 3 buttons', () => {
+		render(<Footer />);
+		expect(screen.getByText(SAVE_ALERT_RULE_TEXT)).toBeInTheDocument();
+		expect(screen.getByText(TEST_NOTIFICATION_TEXT)).toBeInTheDocument();
+		expect(screen.getByText(DISCARD_TEXT)).toBeInTheDocument();
+	});
+
+	it('discard action works correctly', () => {
+		render(<Footer />);
+		fireEvent.click(screen.getByText(DISCARD_TEXT));
+		expect(mockDiscardAlertRule).toHaveBeenCalled();
+	});
+
+	it('save alert rule action works correctly', () => {
+		render(<Footer />);
+		fireEvent.click(screen.getByText(SAVE_ALERT_RULE_TEXT));
+		expect(mockCreateAlertRule).toHaveBeenCalled();
+	});
+
+	it('update alert rule action works correctly', () => {
+		jest.spyOn(createAlertState, 'useCreateAlertState').mockReturnValueOnce({
+			...mockAlertContextState,
+			isEditMode: true,
+		});
+		render(<Footer />);
+		fireEvent.click(screen.getByText(SAVE_ALERT_RULE_TEXT));
+		expect(mockUpdateAlertRule).toHaveBeenCalled();
+	});
+
+	it('test notification action works correctly', () => {
+		render(<Footer />);
+		fireEvent.click(screen.getByText(TEST_NOTIFICATION_TEXT));
+		expect(mockTestAlertRule).toHaveBeenCalled();
+	});
+
+	it('all buttons are disabled when creating alert rule', () => {
+		jest.spyOn(createAlertState, 'useCreateAlertState').mockReturnValueOnce({
+			...mockAlertContextState,
+			isCreatingAlertRule: true,
+		});
+		render(<Footer />);
+
+		expect(
+			screen.getByRole('button', { name: /save alert rule/i }),
+		).toBeDisabled();
+		expect(
+			screen.getByRole('button', { name: /test notification/i }),
+		).toBeDisabled();
+		expect(screen.getByRole('button', { name: /discard/i })).toBeDisabled();
+	});
+
+	it('all buttons are disabled when updating alert rule', () => {
+		jest.spyOn(createAlertState, 'useCreateAlertState').mockReturnValueOnce({
+			...mockAlertContextState,
+			isUpdatingAlertRule: true,
+		});
+		render(<Footer />);
+
+		// Target the button elements directly instead of the text spans inside them
+		expect(
+			screen.getByRole('button', { name: /save alert rule/i }),
+		).toBeDisabled();
+		expect(
+			screen.getByRole('button', { name: /test notification/i }),
+		).toBeDisabled();
+		expect(screen.getByRole('button', { name: /discard/i })).toBeDisabled();
+	});
+
+	it('all buttons are disabled when testing alert rule', () => {
+		jest.spyOn(createAlertState, 'useCreateAlertState').mockReturnValueOnce({
+			...mockAlertContextState,
+			isTestingAlertRule: true,
+		});
+		render(<Footer />);
+
+		// Target the button elements directly instead of the text spans inside them
+		expect(
+			screen.getByRole('button', { name: /save alert rule/i }),
+		).toBeDisabled();
+		expect(
+			screen.getByRole('button', { name: /test notification/i }),
+		).toBeDisabled();
+		expect(screen.getByRole('button', { name: /discard/i })).toBeDisabled();
+	});
+
+	it('create and test buttons are disabled when alert name is missing', () => {
+		jest.spyOn(createAlertState, 'useCreateAlertState').mockReturnValueOnce({
+			...mockAlertContextState,
+			alertState: {
+				...mockAlertContextState.alertState,
+				name: '',
+			},
+		});
+		render(<Footer />);
+
+		expect(
+			screen.getByRole('button', { name: /save alert rule/i }),
+		).toBeDisabled();
+		expect(
+			screen.getByRole('button', { name: /test notification/i }),
+		).toBeDisabled();
+	});
+
+	it('create and test buttons are disabled when notifcation channels are missing and routing policies are disabled', () => {
+		jest.spyOn(createAlertState, 'useCreateAlertState').mockReturnValueOnce({
+			...mockAlertContextState,
+			notificationSettings: {
+				...mockAlertContextState.notificationSettings,
+				routingPolicies: false,
+			},
+			thresholdState: {
+				...mockAlertContextState.thresholdState,
+				thresholds: [
+					{
+						...mockAlertContextState.thresholdState.thresholds[0],
+						channels: [],
+					},
+				],
+			},
+		});
+
+		render(<Footer />);
+
+		expect(
+			screen.getByRole('button', { name: /save alert rule/i }),
+		).toBeDisabled();
+		expect(
+			screen.getByRole('button', { name: /test notification/i }),
+		).toBeDisabled();
+	});
+
+	it('buttons are enabled even with no notification channels when routing policies are enabled', () => {
+		jest.spyOn(createAlertState, 'useCreateAlertState').mockReturnValueOnce({
+			...mockAlertContextState,
+			notificationSettings: {
+				...mockAlertContextState.notificationSettings,
+				routingPolicies: true,
+			},
+			thresholdState: {
+				...mockAlertContextState.thresholdState,
+				thresholds: [
+					{
+						...mockAlertContextState.thresholdState.thresholds[0],
+						channels: [],
+					},
+				],
+			},
+		});
+
+		render(<Footer />);
+
+		expect(
+			screen.getByRole('button', { name: /save alert rule/i }),
+		).toBeEnabled();
+		expect(
+			screen.getByRole('button', { name: /test notification/i }),
+		).toBeEnabled();
+		expect(screen.getByRole('button', { name: /discard/i })).toBeEnabled();
+	});
+});
--- a/frontend/src/container/CreateAlertV2/Footer/tests/utils.test.ts
+++ b/frontend/src/container/CreateAlertV2/Footer/tests/utils.test.ts
@@ -0,0 +1,524 @@
+import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import {
+	INITIAL_ADVANCED_OPTIONS_STATE,
+	INITIAL_ALERT_STATE,
+	INITIAL_ALERT_THRESHOLD_STATE,
+	INITIAL_EVALUATION_WINDOW_STATE,
+	INITIAL_NOTIFICATION_SETTINGS_STATE,
+} from 'container/CreateAlertV2/context/constants';
+import {
+	AdvancedOptionsState,
+	EvaluationWindowState,
+	NotificationSettingsState,
+} from 'container/CreateAlertV2/context/types';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
+import { EQueryType } from 'types/common/dashboard';
+
+import { BuildCreateAlertRulePayloadArgs } from '../types';
+import {
+	buildCreateThresholdAlertRulePayload,
+	getAlertOnAbsentProps,
+	getEnforceMinimumDatapointsProps,
+	getEvaluationProps,
+	getFormattedTimeValue,
+	getNotificationSettingsProps,
+	validateCreateAlertState,
+} from '../utils';
+
+describe('Footer utils', () => {
+	describe('getFormattedTimeValue', () => {
+		it('for 60 seconds', () => {
+			expect(getFormattedTimeValue(60, UniversalYAxisUnit.SECONDS)).toBe('60s');
+		});
+		it('for 60 minutes', () => {
+			expect(getFormattedTimeValue(60, UniversalYAxisUnit.MINUTES)).toBe('60m');
+		});
+		it('for 60 hours', () => {
+			expect(getFormattedTimeValue(60, UniversalYAxisUnit.HOURS)).toBe('60h');
+		});
+		it('for 60 days', () => {
+			expect(getFormattedTimeValue(60, UniversalYAxisUnit.DAYS)).toBe('60d');
+		});
+	});
+
+	describe('validateCreateAlertState', () => {
+		const args: BuildCreateAlertRulePayloadArgs = {
+			alertType: AlertTypes.METRICS_BASED_ALERT,
+			basicAlertState: INITIAL_ALERT_STATE,
+			thresholdState: INITIAL_ALERT_THRESHOLD_STATE,
+			advancedOptions: INITIAL_ADVANCED_OPTIONS_STATE,
+			evaluationWindow: INITIAL_EVALUATION_WINDOW_STATE,
+			notificationSettings: INITIAL_NOTIFICATION_SETTINGS_STATE,
+			query: initialQueriesMap.metrics,
+		};
+
+		it('when alert name is not provided', () => {
+			expect(validateCreateAlertState(args)).toBeDefined();
+			expect(validateCreateAlertState(args)).toBe('Please enter an alert name');
+		});
+
+		it('when threshold label is not provided', () => {
+			const currentArgs: BuildCreateAlertRulePayloadArgs = {
+				...args,
+				basicAlertState: {
+					...args.basicAlertState,
+					name: 'test name',
+				},
+				thresholdState: {
+					...args.thresholdState,
+					thresholds: [
+						{
+							...args.thresholdState.thresholds[0],
+							label: '',
+						},
+					],
+				},
+			};
+			expect(validateCreateAlertState(currentArgs)).toBeDefined();
+			expect(validateCreateAlertState(currentArgs)).toBe(
+				'Please enter a label for each threshold',
+			);
+		});
+
+		it('when threshold channels are not provided', () => {
+			const currentArgs: BuildCreateAlertRulePayloadArgs = {
+				...args,
+				basicAlertState: {
+					...args.basicAlertState,
+					name: 'test name',
+				},
+			};
+			expect(validateCreateAlertState(currentArgs)).toBeDefined();
+			expect(validateCreateAlertState(currentArgs)).toBe(
+				'Please select at least one channel for each threshold or enable routing policies',
+			);
+		});
+
+		it('when threshold channels are not provided but routing policies are enabled', () => {
+			const currentArgs: BuildCreateAlertRulePayloadArgs = {
+				...args,
+				basicAlertState: {
+					...args.basicAlertState,
+					name: 'test name',
+				},
+				notificationSettings: {
+					...args.notificationSettings,
+					routingPolicies: true,
+				},
+			};
+			expect(validateCreateAlertState(currentArgs)).toBeNull();
+		});
+
+		it('when threshold channels are provided', () => {
+			const currentArgs: BuildCreateAlertRulePayloadArgs = {
+				...args,
+				basicAlertState: {
+					...args.basicAlertState,
+					name: 'test name',
+				},
+				thresholdState: {
+					...args.thresholdState,
+					thresholds: [
+						{
+							...args.thresholdState.thresholds[0],
+							channels: ['test channel'],
+						},
+					],
+				},
+			};
+			expect(validateCreateAlertState(currentArgs)).toBeNull();
+		});
+	});
+
+	describe('getNotificationSettingsProps', () => {
+		it('when initial notification settings are provided', () => {
+			const notificationSettings = INITIAL_NOTIFICATION_SETTINGS_STATE;
+			const props = getNotificationSettingsProps(notificationSettings);
+			expect(props).toBeDefined();
+			expect(props).toStrictEqual({
+				groupBy: [],
+				renotify: {
+					enabled: false,
+					interval: '30m',
+					alertStates: [],
+				},
+				usePolicy: false,
+			});
+		});
+	});
+
+	it('renotification is enabled', () => {
+		const notificationSettings: NotificationSettingsState = {
+			...INITIAL_NOTIFICATION_SETTINGS_STATE,
+			reNotification: {
+				enabled: true,
+				value: 30,
+				unit: UniversalYAxisUnit.MINUTES,
+				conditions: ['firing'],
+			},
+		};
+		const props = getNotificationSettingsProps(notificationSettings);
+		expect(props).toBeDefined();
+		expect(props).toStrictEqual({
+			groupBy: [],
+			renotify: {
+				enabled: true,
+				interval: '30m',
+				alertStates: ['firing'],
+			},
+			usePolicy: false,
+		});
+	});
+
+	it('routing policies are enabled', () => {
+		const notificationSettings: NotificationSettingsState = {
+			...INITIAL_NOTIFICATION_SETTINGS_STATE,
+			routingPolicies: true,
+		};
+		const props = getNotificationSettingsProps(notificationSettings);
+		expect(props).toBeDefined();
+		expect(props).toStrictEqual({
+			groupBy: [],
+			renotify: {
+				enabled: false,
+				interval: '30m',
+				alertStates: [],
+			},
+			usePolicy: true,
+		});
+	});
+
+	it('group by notifications are provided', () => {
+		const notificationSettings: NotificationSettingsState = {
+			...INITIAL_NOTIFICATION_SETTINGS_STATE,
+			multipleNotifications: ['test group'],
+		};
+		const props = getNotificationSettingsProps(notificationSettings);
+		expect(props).toBeDefined();
+		expect(props).toStrictEqual({
+			groupBy: ['test group'],
+			renotify: {
+				enabled: false,
+				interval: '30m',
+				alertStates: [],
+			},
+			usePolicy: false,
+		});
+	});
+
+	describe('getAlertOnAbsentProps', () => {
+		it('when alert on absent is disabled', () => {
+			const advancedOptions: AdvancedOptionsState = {
+				...INITIAL_ADVANCED_OPTIONS_STATE,
+				sendNotificationIfDataIsMissing: {
+					enabled: false,
+					toleranceLimit: 0,
+					timeUnit: UniversalYAxisUnit.MINUTES,
+				},
+			};
+			const props = getAlertOnAbsentProps(advancedOptions);
+			expect(props).toBeDefined();
+			expect(props).toStrictEqual({
+				alertOnAbsent: false,
+			});
+		});
+
+		it('when alert on absent is enabled', () => {
+			const advancedOptions: AdvancedOptionsState = {
+				...INITIAL_ADVANCED_OPTIONS_STATE,
+				sendNotificationIfDataIsMissing: {
+					enabled: true,
+					toleranceLimit: 13,
+					timeUnit: UniversalYAxisUnit.MINUTES,
+				},
+			};
+			const props = getAlertOnAbsentProps(advancedOptions);
+			expect(props).toBeDefined();
+			expect(props).toStrictEqual({
+				alertOnAbsent: true,
+				absentFor: 13,
+			});
+		});
+	});
+
+	describe('getEnforceMinimumDatapointsProps', () => {
+		it('when enforce minimum datapoints is disabled', () => {
+			const advancedOptions: AdvancedOptionsState = {
+				...INITIAL_ADVANCED_OPTIONS_STATE,
+				enforceMinimumDatapoints: {
+					enabled: false,
+					minimumDatapoints: 0,
+				},
+			};
+			const props = getEnforceMinimumDatapointsProps(advancedOptions);
+			expect(props).toBeDefined();
+			expect(props).toStrictEqual({
+				requireMinPoints: false,
+			});
+		});
+
+		it('when enforce minimum datapoints is enabled', () => {
+			const advancedOptions: AdvancedOptionsState = {
+				...INITIAL_ADVANCED_OPTIONS_STATE,
+				enforceMinimumDatapoints: {
+					enabled: true,
+					minimumDatapoints: 12,
+				},
+			};
+			const props = getEnforceMinimumDatapointsProps(advancedOptions);
+			expect(props).toBeDefined();
+			expect(props).toStrictEqual({
+				requireMinPoints: true,
+				requiredNumPoints: 12,
+			});
+		});
+	});
+
+	describe('getEvaluationProps', () => {
+		const advancedOptions: AdvancedOptionsState = {
+			...INITIAL_ADVANCED_OPTIONS_STATE,
+			evaluationCadence: {
+				...INITIAL_ADVANCED_OPTIONS_STATE.evaluationCadence,
+				mode: 'default',
+				default: {
+					value: 12,
+					timeUnit: UniversalYAxisUnit.MINUTES,
+				},
+			},
+		};
+
+		it('for rolling window with non-custom timeframe', () => {
+			const evaluationWindow: EvaluationWindowState = {
+				...INITIAL_EVALUATION_WINDOW_STATE,
+				windowType: 'rolling',
+				timeframe: '5m0s',
+			};
+			const props = getEvaluationProps(evaluationWindow, advancedOptions);
+			expect(props).toBeDefined();
+			expect(props).toStrictEqual({
+				kind: 'rolling',
+				spec: {
+					evalWindow: '5m0s',
+					frequency: '12m',
+				},
+			});
+		});
+
+		it('for rolling window with custom timeframe', () => {
+			const evaluationWindow: EvaluationWindowState = {
+				...INITIAL_EVALUATION_WINDOW_STATE,
+				windowType: 'rolling',
+				timeframe: 'custom',
+				startingAt: {
+					...INITIAL_EVALUATION_WINDOW_STATE.startingAt,
+					number: '13',
+					unit: UniversalYAxisUnit.MINUTES,
+				},
+			};
+			const props = getEvaluationProps(evaluationWindow, advancedOptions);
+			expect(props).toBeDefined();
+			expect(props).toStrictEqual({
+				kind: 'rolling',
+				spec: {
+					evalWindow: '13m',
+					frequency: '12m',
+				},
+			});
+		});
+
+		it('for cumulative window with current hour', () => {
+			const evaluationWindow: EvaluationWindowState = {
+				...INITIAL_EVALUATION_WINDOW_STATE,
+				windowType: 'cumulative',
+				timeframe: 'currentHour',
+				startingAt: {
+					...INITIAL_EVALUATION_WINDOW_STATE.startingAt,
+					number: '14',
+					timezone: 'UTC',
+				},
+			};
+			const props = getEvaluationProps(evaluationWindow, advancedOptions);
+			expect(props).toBeDefined();
+			expect(props).toStrictEqual({
+				kind: 'cumulative',
+				spec: {
+					schedule: { type: 'hourly', minute: 14 },
+					frequency: '12m',
+					timezone: 'UTC',
+				},
+			});
+		});
+
+		it('for cumulative window with current day', () => {
+			const evaluationWindow: EvaluationWindowState = {
+				...INITIAL_EVALUATION_WINDOW_STATE,
+				windowType: 'cumulative',
+				timeframe: 'currentDay',
+				startingAt: {
+					...INITIAL_EVALUATION_WINDOW_STATE.startingAt,
+					time: '15:43:00',
+					timezone: 'UTC',
+				},
+			};
+			const props = getEvaluationProps(evaluationWindow, advancedOptions);
+			expect(props).toBeDefined();
+			expect(props).toStrictEqual({
+				kind: 'cumulative',
+				spec: {
+					schedule: { type: 'daily', hour: 15, minute: 43 },
+					frequency: '12m',
+					timezone: 'UTC',
+				},
+			});
+		});
+
+		it('for cumulative window with current month', () => {
+			const evaluationWindow: EvaluationWindowState = {
+				...INITIAL_EVALUATION_WINDOW_STATE,
+				windowType: 'cumulative',
+				timeframe: 'currentMonth',
+				startingAt: {
+					...INITIAL_EVALUATION_WINDOW_STATE.startingAt,
+					number: '17',
+					timezone: 'UTC',
+					time: '16:34:00',
+				},
+			};
+			const props = getEvaluationProps(evaluationWindow, advancedOptions);
+			expect(props).toBeDefined();
+			expect(props).toStrictEqual({
+				kind: 'cumulative',
+				spec: {
+					schedule: { type: 'monthly', day: 17, hour: 16, minute: 34 },
+					frequency: '12m',
+					timezone: 'UTC',
+				},
+			});
+		});
+	});
+
+	describe('buildCreateThresholdAlertRulePayload', () => {
+		const mockCreateAlertContextState = createMockAlertContextState();
+		const INITIAL_BUILD_CREATE_ALERT_RULE_PAYLOAD_ARGS: BuildCreateAlertRulePayloadArgs = {
+			basicAlertState: mockCreateAlertContextState.alertState,
+			thresholdState: mockCreateAlertContextState.thresholdState,
+			advancedOptions: mockCreateAlertContextState.advancedOptions,
+			evaluationWindow: mockCreateAlertContextState.evaluationWindow,
+			notificationSettings: mockCreateAlertContextState.notificationSettings,
+			query: initialQueriesMap.metrics,
+			alertType: mockCreateAlertContextState.alertType,
+		};
+
+		it('verify buildCreateThresholdAlertRulePayload', () => {
+			const props = buildCreateThresholdAlertRulePayload(
+				INITIAL_BUILD_CREATE_ALERT_RULE_PAYLOAD_ARGS,
+			);
+			expect(props).toBeDefined();
+			expect(props).toStrictEqual({
+				alert: '',
+				alertType: 'METRIC_BASED_ALERT',
+				annotations: {
+					description:
+						'This alert is fired when the defined metric (current value: {{$value}}) crosses the threshold ({{$threshold}})',
+					summary:
+						'This alert is fired when the defined metric (current value: {{$value}}) crosses the threshold ({{$threshold}})',
+				},
+				condition: {
+					alertOnAbsent: false,
+					compositeQuery: {
+						builderQueries: undefined,
+						chQueries: undefined,
+						panelType: 'graph',
+						promQueries: undefined,
+						queries: [
+							{
+								spec: {
+									aggregations: [
+										{
+											metricName: '',
+											reduceTo: undefined,
+											spaceAggregation: 'sum',
+											temporality: undefined,
+											timeAggregation: 'count',
+										},
+									],
+									disabled: false,
+									filter: {
+										expression: '',
+									},
+									functions: undefined,
+									groupBy: undefined,
+									having: undefined,
+									legend: undefined,
+									limit: undefined,
+									name: 'A',
+									offset: undefined,
+									order: undefined,
+									selectFields: undefined,
+									signal: 'metrics',
+									source: '',
+									stepInterval: null,
+								},
+								type: 'builder_query',
+							},
+						],
+						queryType: 'builder',
+						unit: undefined,
+					},
+					requireMinPoints: false,
+					selectedQueryName: 'A',
+					thresholds: {
+						kind: 'basic',
+						spec: [
+							{
+								channels: [],
+								matchType: '1',
+								name: 'critical',
+								op: '1',
+								target: 0,
+								targetUnit: '',
+							},
+						],
+					},
+				},
+				evaluation: {
+					kind: 'rolling',
+					spec: {
+						evalWindow: '5m0s',
+						frequency: '1m',
+					},
+				},
+				labels: {},
+				notificationSettings: {
+					groupBy: [],
+					renotify: {
+						enabled: false,
+						interval: '30m',
+						alertStates: [],
+					},
+					usePolicy: false,
+				},
+				ruleType: 'threshold_rule',
+				schemaVersion: 'v2alpha1',
+				source: 'http://localhost/',
+				version: 'v5',
+			});
+		});
+
+		it('verify for promql query type', () => {
+			const currentArgs: BuildCreateAlertRulePayloadArgs = {
+				...INITIAL_BUILD_CREATE_ALERT_RULE_PAYLOAD_ARGS,
+				query: {
+					...INITIAL_BUILD_CREATE_ALERT_RULE_PAYLOAD_ARGS.query,
+					queryType: EQueryType.PROM,
+				},
+			};
+			const props = buildCreateThresholdAlertRulePayload(currentArgs);
+			expect(props).toBeDefined();
+			expect(props.condition.compositeQuery.queryType).toBe('promql');
+			expect(props.ruleType).toBe('promql_rule');
+		});
+	});
+});
--- a/frontend/src/container/CreateAlertV2/Footer/index.ts
+++ b/frontend/src/container/CreateAlertV2/Footer/index.ts
@@ -0,0 +1,3 @@
+import Footer from './Footer';
+
+export default Footer;
--- a/frontend/src/container/CreateAlertV2/Footer/styles.scss
+++ b/frontend/src/container/CreateAlertV2/Footer/styles.scss
@@ -0,0 +1,51 @@
+.create-alert-v2-footer {
+	position: fixed;
+	bottom: 0;
+	left: 63px;
+	right: 0;
+	background-color: var(--bg-ink-500);
+	height: 70px;
+	border-top: 1px solid var(--bg-slate-500);
+	padding: 16px 24px;
+	z-index: 1000;
+	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.button-group {
+		display: flex;
+		gap: 12px;
+	}
+
+	.ant-btn {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.ant-btn-default {
+		background-color: var(--bg-slate-500);
+		border: 1px solid var(--bg-slate-400);
+		color: var(--bg-vanilla-400);
+	}
+}
+
+.lightMode {
+	.create-alert-v2-footer {
+		background-color: var(--bg-vanilla-100);
+		border-top: 1px solid var(--bg-vanilla-300);
+
+		.ant-btn-default {
+			background-color: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-vanilla-400);
+			color: var(--bg-ink-400);
+		}
+
+		.ant-btn-primary {
+			.ant-typography {
+				color: var(--bg-vanilla-100);
+			}
+		}
+	}
+}
--- a/frontend/src/container/CreateAlertV2/Footer/types.ts
+++ b/frontend/src/container/CreateAlertV2/Footer/types.ts
@@ -0,0 +1,20 @@
+import { AlertTypes } from 'types/api/alerts/alertTypes';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import {
+	AdvancedOptionsState,
+	AlertState,
+	AlertThresholdState,
+	EvaluationWindowState,
+	NotificationSettingsState,
+} from '../context/types';
+
+export interface BuildCreateAlertRulePayloadArgs {
+	alertType: AlertTypes;
+	basicAlertState: AlertState;
+	thresholdState: AlertThresholdState;
+	advancedOptions: AdvancedOptionsState;
+	evaluationWindow: EvaluationWindowState;
+	notificationSettings: NotificationSettingsState;
+	query: Query;
+}
--- a/frontend/src/container/CreateAlertV2/Footer/utils.tsx
+++ b/frontend/src/container/CreateAlertV2/Footer/utils.tsx
@@ -0,0 +1,345 @@
+import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { AlertDetectionTypes } from 'container/FormAlertRules';
+import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
+import {
+	BasicThreshold,
+	PostableAlertRuleV2,
+} from 'types/api/alerts/alertTypesV2';
+import { EQueryType } from 'types/common/dashboard';
+import { compositeQueryToQueryEnvelope } from 'utils/compositeQueryToQueryEnvelope';
+
+import {
+	AdvancedOptionsState,
+	EvaluationWindowState,
+	NotificationSettingsState,
+} from '../context/types';
+import { BuildCreateAlertRulePayloadArgs } from './types';
+
+// Get formatted time/unit pairs for create alert api payload
+export function getFormattedTimeValue(timeValue: number, unit: string): string {
+	const unitMap: Record<string, string> = {
+		[UniversalYAxisUnit.SECONDS]: 's',
+		[UniversalYAxisUnit.MINUTES]: 'm',
+		[UniversalYAxisUnit.HOURS]: 'h',
+		[UniversalYAxisUnit.DAYS]: 'd',
+	};
+	return `${timeValue}${unitMap[unit]}`;
+}
+
+// Validate create alert api payload
+export function validateCreateAlertState(
+	args: BuildCreateAlertRulePayloadArgs,
+): string | null {
+	const { basicAlertState, thresholdState, notificationSettings } = args;
+
+	// Validate alert name
+	if (!basicAlertState.name) {
+		return 'Please enter an alert name';
+	}
+
+	// Validate threshold state if routing policies is not enabled
+	for (let i = 0; i < thresholdState.thresholds.length; i++) {
+		const threshold = thresholdState.thresholds[i];
+		if (!threshold.label) {
+			return 'Please enter a label for each threshold';
+		}
+		if (!notificationSettings.routingPolicies && !threshold.channels.length) {
+			return 'Please select at least one channel for each threshold or enable routing policies';
+		}
+	}
+
+	return null;
+}
+
+// Get notification settings props for create alert api payload
+export function getNotificationSettingsProps(
+	notificationSettings: NotificationSettingsState,
+): PostableAlertRuleV2['notificationSettings'] {
+	const notificationSettingsProps: PostableAlertRuleV2['notificationSettings'] = {
+		groupBy: notificationSettings.multipleNotifications || [],
+		usePolicy: notificationSettings.routingPolicies,
+		renotify: {
+			enabled: notificationSettings.reNotification.enabled,
+			interval: getFormattedTimeValue(
+				notificationSettings.reNotification.value,
+				notificationSettings.reNotification.unit,
+			),
+			alertStates: notificationSettings.reNotification.conditions,
+		},
+	};
+
+	return notificationSettingsProps;
+}
+
+// Get alert on absent props for create alert api payload
+export function getAlertOnAbsentProps(
+	advancedOptions: AdvancedOptionsState,
+): Partial<PostableAlertRuleV2['condition']> {
+	if (advancedOptions.sendNotificationIfDataIsMissing.enabled) {
+		return {
+			alertOnAbsent: true,
+			absentFor: advancedOptions.sendNotificationIfDataIsMissing.toleranceLimit,
+		};
+	}
+	return {
+		alertOnAbsent: false,
+	};
+}
+
+// Get enforce minimum datapoints props for create alert api payload
+export function getEnforceMinimumDatapointsProps(
+	advancedOptions: AdvancedOptionsState,
+): Partial<PostableAlertRuleV2['condition']> {
+	if (advancedOptions.enforceMinimumDatapoints.enabled) {
+		return {
+			requireMinPoints: true,
+			requiredNumPoints:
+				advancedOptions.enforceMinimumDatapoints.minimumDatapoints,
+		};
+	}
+	return {
+		requireMinPoints: false,
+	};
+}
+
+// Get evaluation props for create alert api payload
+export function getEvaluationProps(
+	evaluationWindow: EvaluationWindowState,
+	advancedOptions: AdvancedOptionsState,
+): PostableAlertRuleV2['evaluation'] {
+	const frequency = getFormattedTimeValue(
+		advancedOptions.evaluationCadence.default.value,
+		advancedOptions.evaluationCadence.default.timeUnit,
+	);
+
+	if (
+		evaluationWindow.windowType === 'rolling' &&
+		evaluationWindow.timeframe !== 'custom'
+	) {
+		return {
+			kind: evaluationWindow.windowType,
+			spec: {
+				evalWindow: evaluationWindow.timeframe,
+				frequency,
+			},
+		};
+	}
+
+	if (
+		evaluationWindow.windowType === 'rolling' &&
+		evaluationWindow.timeframe === 'custom'
+	) {
+		return {
+			kind: evaluationWindow.windowType,
+			spec: {
+				evalWindow: getFormattedTimeValue(
+					Number(evaluationWindow.startingAt.number),
+					evaluationWindow.startingAt.unit,
+				),
+				frequency,
+			},
+		};
+	}
+
+	// Only cumulative window type left now
+	if (evaluationWindow.timeframe === 'currentHour') {
+		return {
+			kind: evaluationWindow.windowType,
+			spec: {
+				schedule: {
+					type: 'hourly',
+					minute: Number(evaluationWindow.startingAt.number),
+				},
+				frequency,
+				timezone: evaluationWindow.startingAt.timezone,
+			},
+		};
+	}
+
+	if (evaluationWindow.timeframe === 'currentDay') {
+		// time is in the format of "HH:MM:SS"
+		const [hour, minute] = evaluationWindow.startingAt.time.split(':');
+		return {
+			kind: evaluationWindow.windowType,
+			spec: {
+				schedule: {
+					type: 'daily',
+					hour: Number(hour),
+					minute: Number(minute),
+				},
+				frequency,
+				timezone: evaluationWindow.startingAt.timezone,
+			},
+		};
+	}
+
+	if (evaluationWindow.timeframe === 'currentMonth') {
+		// time is in the format of "HH:MM:SS"
+		const [hour, minute] = evaluationWindow.startingAt.time.split(':');
+		return {
+			kind: evaluationWindow.windowType,
+			spec: {
+				schedule: {
+					type: 'monthly',
+					day: Number(evaluationWindow.startingAt.number),
+					hour: Number(hour),
+					minute: Number(minute),
+				},
+				frequency,
+				timezone: evaluationWindow.startingAt.timezone,
+			},
+		};
+	}
+
+	return {
+		kind: evaluationWindow.windowType,
+		spec: {
+			evalWindow: evaluationWindow.timeframe,
+			frequency,
+		},
+	};
+}
+
+// Build Create Threshold Alert Rule Payload
+export function buildCreateThresholdAlertRulePayload(
+	args: BuildCreateAlertRulePayloadArgs,
+): PostableAlertRuleV2 {
+	const {
+		alertType,
+		basicAlertState,
+		thresholdState,
+		evaluationWindow,
+		advancedOptions,
+		notificationSettings,
+		query,
+	} = args;
+
+	const compositeQuery = compositeQueryToQueryEnvelope({
+		builderQueries: {
+			...mapQueryDataToApi(query.builder.queryData, 'queryName').data,
+			...mapQueryDataToApi(query.builder.queryFormulas, 'queryName').data,
+		},
+		promQueries: mapQueryDataToApi(query.promql, 'name').data,
+		chQueries: mapQueryDataToApi(query.clickhouse_sql, 'name').data,
+		queryType: query.queryType,
+		panelType: PANEL_TYPES.TIME_SERIES,
+		unit: basicAlertState.yAxisUnit,
+	});
+
+	// Thresholds
+	const thresholds: BasicThreshold[] = thresholdState.thresholds.map(
+		(threshold) => ({
+			name: threshold.label,
+			target: parseFloat(threshold.thresholdValue.toString()),
+			matchType: thresholdState.matchType,
+			op: thresholdState.operator,
+			channels: threshold.channels,
+			targetUnit: threshold.unit,
+		}),
+	);
+
+	// Alert on absent data
+	const alertOnAbsentProps = getAlertOnAbsentProps(advancedOptions);
+
+	// Enforce minimum datapoints
+	const enforceMinimumDatapointsProps = getEnforceMinimumDatapointsProps(
+		advancedOptions,
+	);
+
+	// Notification settings
+	const notificationSettingsProps = getNotificationSettingsProps(
+		notificationSettings,
+	);
+
+	// Evaluation
+	const evaluationProps = getEvaluationProps(evaluationWindow, advancedOptions);
+
+	let ruleType: string = AlertDetectionTypes.THRESHOLD_ALERT;
+	if (query.queryType === EQueryType.PROM) {
+		ruleType = 'promql_rule';
+	}
+
+	return {
+		alert: basicAlertState.name,
+		ruleType,
+		alertType,
+		condition: {
+			thresholds: {
+				kind: 'basic',
+				spec: thresholds,
+			},
+			compositeQuery,
+			selectedQueryName: thresholdState.selectedQuery,
+			...alertOnAbsentProps,
+			...enforceMinimumDatapointsProps,
+		},
+		evaluation: evaluationProps,
+		labels: basicAlertState.labels,
+		annotations: {
+			description: notificationSettings.description,
+			summary: notificationSettings.description,
+		},
+		notificationSettings: notificationSettingsProps,
+		version: 'v5',
+		schemaVersion: 'v2alpha1',
+		source: window?.location.toString(),
+	};
+}
+
+// Build Create Anomaly Alert Rule Payload
+// TODO: Update this function before enabling anomaly alert rule creation
+export function buildCreateAnomalyAlertRulePayload(
+	args: BuildCreateAlertRulePayloadArgs,
+): PostableAlertRuleV2 {
+	const {
+		alertType,
+		basicAlertState,
+		query,
+		notificationSettings,
+		evaluationWindow,
+		advancedOptions,
+	} = args;
+
+	const compositeQuery = compositeQueryToQueryEnvelope({
+		builderQueries: {
+			...mapQueryDataToApi(query.builder.queryData, 'queryName').data,
+			...mapQueryDataToApi(query.builder.queryFormulas, 'queryName').data,
+		},
+		promQueries: mapQueryDataToApi(query.promql, 'name').data,
+		chQueries: mapQueryDataToApi(query.clickhouse_sql, 'name').data,
+		queryType: query.queryType,
+		panelType: PANEL_TYPES.TIME_SERIES,
+		unit: basicAlertState.yAxisUnit,
+	});
+
+	const alertOnAbsentProps = getAlertOnAbsentProps(advancedOptions);
+	const enforceMinimumDatapointsProps = getEnforceMinimumDatapointsProps(
+		advancedOptions,
+	);
+	const evaluationProps = getEvaluationProps(evaluationWindow, advancedOptions);
+	const notificationSettingsProps = getNotificationSettingsProps(
+		notificationSettings,
+	);
+
+	return {
+		alert: basicAlertState.name,
+		ruleType: AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
+		alertType,
+		condition: {
+			compositeQuery,
+			...alertOnAbsentProps,
+			...enforceMinimumDatapointsProps,
+		},
+		labels: basicAlertState.labels,
+		annotations: {
+			description: notificationSettings.description,
+			summary: notificationSettings.description,
+		},
+		notificationSettings: notificationSettingsProps,
+		evaluation: evaluationProps,
+		version: '',
+		schemaVersion: '',
+		source: window?.location.toString(),
+	};
+}
--- a/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx
+++ b/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx
@@ -1,4 +1,4 @@
-import { Button, Popover, Tooltip, Typography } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import TextArea from 'antd/lib/input/TextArea';
 import { Info } from 'lucide-react';

@@ -10,46 +10,46 @@ function NotificationMessage(): JSX.Element {
 		setNotificationSettings,
 	} = useCreateAlertState();

-	const templateVariables = [
-		{ variable: '{{alertname}}', description: 'Name of the alert rule' },
-		{
-			variable: '{{value}}',
-			description: 'Current value that triggered the alert',
-		},
-		{
-			variable: '{{threshold}}',
-			description: 'Threshold value from alert condition',
-		},
-		{ variable: '{{unit}}', description: 'Unit of measurement for the metric' },
-		{
-			variable: '{{severity}}',
-			description: 'Alert severity level (Critical, Warning, Info)',
-		},
-		{
-			variable: '{{queryname}}',
-			description: 'Name of the query that triggered the alert',
-		},
-		{
-			variable: '{{labels}}',
-			description: 'All labels associated with the alert',
-		},
-		{
-			variable: '{{timestamp}}',
-			description: 'Timestamp when alert was triggered',
-		},
-	];
+	// const templateVariables = [
+	// 	{ variable: '{{alertname}}', description: 'Name of the alert rule' },
+	// 	{
+	// 		variable: '{{value}}',
+	// 		description: 'Current value that triggered the alert',
+	// 	},
+	// 	{
+	// 		variable: '{{threshold}}',
+	// 		description: 'Threshold value from alert condition',
+	// 	},
+	// 	{ variable: '{{unit}}', description: 'Unit of measurement for the metric' },
+	// 	{
+	// 		variable: '{{severity}}',
+	// 		description: 'Alert severity level (Critical, Warning, Info)',
+	// 	},
+	// 	{
+	// 		variable: '{{queryname}}',
+	// 		description: 'Name of the query that triggered the alert',
+	// 	},
+	// 	{
+	// 		variable: '{{labels}}',
+	// 		description: 'All labels associated with the alert',
+	// 	},
+	// 	{
+	// 		variable: '{{timestamp}}',
+	// 		description: 'Timestamp when alert was triggered',
+	// 	},
+	// ];

-	const templateVariableContent = (
-		<div className="template-variable-content">
-			<Typography.Text strong>Available Template Variables:</Typography.Text>
-			{templateVariables.map((item) => (
-				<div className="template-variable-content-item" key={item.variable}>
-					<code>{item.variable}</code>
-					<Typography.Text>{item.description}</Typography.Text>
-				</div>
-			))}
-		</div>
-	);
+	// const templateVariableContent = (
+	// 	<div className="template-variable-content">
+	// 		<Typography.Text strong>Available Template Variables:</Typography.Text>
+	// 		{templateVariables.map((item) => (
+	// 			<div className="template-variable-content-item" key={item.variable}>
+	// 				<code>{item.variable}</code>
+	// 				<Typography.Text>{item.description}</Typography.Text>
+	// 			</div>
+	// 		))}
+	// 	</div>
+	// );

 	return (
 		<div className="notification-message-container">
@@ -67,12 +67,13 @@ function NotificationMessage(): JSX.Element {
 					</Typography.Text>
 				</div>
 				<div className="notification-message-header-actions">
-					<Popover content={templateVariableContent}>
+					{/* TODO: Add back when the functionality is implemented */}
+					{/* <Popover content={templateVariableContent}>
 						<Button type="text">
 							<Info size={12} />
 							Variables
 						</Button>
-					</Popover>
+					</Popover> */}
 				</div>
 			</div>
 			<TextArea
--- a/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx
+++ b/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx
@@ -4,18 +4,15 @@ import { Input, Select, Typography } from 'antd';

 import { useCreateAlertState } from '../context';
 import {
-	ADVANCED_OPTIONS_TIME_UNIT_OPTIONS as RE_NOTIFICATION_UNIT_OPTIONS,
 	RE_NOTIFICATION_CONDITION_OPTIONS,
+	RE_NOTIFICATION_TIME_UNIT_OPTIONS,
 } from '../context/constants';
 import AdvancedOptionItem from '../EvaluationSettings/AdvancedOptionItem';
 import Stepper from '../Stepper';
-import { showCondensedLayout } from '../utils';
 import MultipleNotifications from './MultipleNotifications';
 import NotificationMessage from './NotificationMessage';

 function NotificationSettings(): JSX.Element {
-	const showCondensedLayoutFlag = showCondensedLayout();
-
 	const {
 		notificationSettings,
 		setNotificationSettings,
@@ -45,7 +42,7 @@ function NotificationSettings(): JSX.Element {
 				value={notificationSettings.reNotification.unit || null}
 				placeholder="Select unit"
 				disabled={!notificationSettings.reNotification.enabled}
-				options={RE_NOTIFICATION_UNIT_OPTIONS}
+				options={RE_NOTIFICATION_TIME_UNIT_OPTIONS}
 				onChange={(value): void => {
 					setNotificationSettings({
 						type: 'SET_RE_NOTIFICATION',
@@ -82,10 +79,7 @@ function NotificationSettings(): JSX.Element {

 	return (
 		<div className="notification-settings-container">
-			<Stepper
-				stepNumber={showCondensedLayoutFlag ? 3 : 4}
-				label="Notification settings"
-			/>
+			<Stepper stepNumber={3} label="Notification settings" />
 			<NotificationMessage />
 			<div className="notification-settings-content">
 				<MultipleNotifications />
@@ -103,6 +97,7 @@ function NotificationSettings(): JSX.Element {
 							},
 						});
 					}}
+					defaultShowInput={notificationSettings.reNotification.enabled}
 				/>
 			</div>
 		</div>
--- a/frontend/src/container/CreateAlertV2/NotificationSettings/tests/NotificationSettings.test.tsx
+++ b/frontend/src/container/CreateAlertV2/NotificationSettings/tests/NotificationSettings.test.tsx
@@ -1,7 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import * as createAlertContext from 'container/CreateAlertV2/context';
 import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
-import * as utils from 'container/CreateAlertV2/utils';

 import NotificationSettings from '../NotificationSettings';

@@ -24,6 +23,10 @@ jest.mock(
 	}),
 );

+jest.mock('container/CreateAlertV2/utils', () => ({
+	...jest.requireActual('container/CreateAlertV2/utils'),
+}));
+
 const initialNotificationSettings = createMockAlertContextState()
 	.notificationSettings;
 const mockSetNotificationSettings = jest.fn();
@@ -37,10 +40,10 @@ const REPEAT_NOTIFICATIONS_TEXT = 'Repeat notifications';
 const ENTER_TIME_INTERVAL_TEXT = 'Enter time interval...';

 describe('NotificationSettings', () => {
-	it('renders the notification settings tab with step number 4 and default values', () => {
+	it('renders the notification settings tab with step number 3 and default values', () => {
 		render(<NotificationSettings />);
 		expect(screen.getByText('Notification settings')).toBeInTheDocument();
-		expect(screen.getByText('4')).toBeInTheDocument();
+		expect(screen.getByText('3')).toBeInTheDocument();
 		expect(screen.getByTestId('multiple-notifications')).toBeInTheDocument();
 		expect(screen.getByTestId('notification-message')).toBeInTheDocument();
 		expect(screen.getByText(REPEAT_NOTIFICATIONS_TEXT)).toBeInTheDocument();
@@ -51,15 +54,6 @@ describe('NotificationSettings', () => {
 		).toBeInTheDocument();
 	});

-	it('renders the notification settings tab with step number 3 in condensed layout', () => {
-		jest.spyOn(utils, 'showCondensedLayout').mockReturnValueOnce(true);
-		render(<NotificationSettings />);
-		expect(screen.getByText('Notification settings')).toBeInTheDocument();
-		expect(screen.getByText('3')).toBeInTheDocument();
-		expect(screen.getByTestId('multiple-notifications')).toBeInTheDocument();
-		expect(screen.getByTestId('notification-message')).toBeInTheDocument();
-	});
-
 	describe('Repeat notifications', () => {
 		it('renders the repeat notifications with inputs hidden when the repeat notifications switch is off', () => {
 			render(<NotificationSettings />);
--- a/frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss
+++ b/frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss
@@ -84,12 +84,28 @@
 			.ant-select {
 				.ant-select-selector {
 					width: 120px;
+
+					&:hover {
+						border-color: var(--bg-vanilla-300);
+					}
+
+					&:focus {
+						border-color: var(--bg-vanilla-300);
+					}
 				}
 			}

 			.ant-select-multiple {
 				.ant-select-selector {
 					width: 200px;
+
+					&:hover {
+						border-color: var(--bg-vanilla-300);
+					}
+
+					&:focus {
+						border-color: var(--bg-vanilla-300);
+					}
 				}
 			}
 		}
@@ -202,6 +218,15 @@
 					flex-shrink: 0;
 					.ant-select-selector {
 						border: 1px solid var(--bg-slate-400);
+
+						&:hover {
+							border-color: var(--bg-vanilla-300);
+						}
+
+						&:focus {
+							border-color: var(--bg-vanilla-300);
+							box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+						}
 					}
 				}

@@ -327,6 +352,15 @@
 				.ant-select {
 					.ant-select-selector {
 						border: 1px solid var(--bg-vanilla-300);
+
+						&:hover {
+							border-color: var(--bg-ink-300);
+						}
+
+						&:focus {
+							border-color: var(--bg-ink-300);
+							box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+						}
 					}
 				}

--- a/frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx
+++ b/frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx
@@ -1,3 +1,4 @@
+import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import ChartPreviewComponent from 'container/FormAlertRules/ChartPreview';
@@ -16,7 +17,7 @@ export interface ChartPreviewProps {

 function ChartPreview({ alertDef }: ChartPreviewProps): JSX.Element {
 	const { currentQuery, panelType, stagedQuery } = useQueryBuilder();
-	const { thresholdState, alertState } = useCreateAlertState();
+	const { thresholdState, alertState, setAlertState } = useCreateAlertState();
 	const { selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -25,14 +26,24 @@ function ChartPreview({ alertDef }: ChartPreviewProps): JSX.Element {

 	const yAxisUnit = alertState.yAxisUnit || '';

+	const headline = (
+		<div className="chart-preview-headline">
+			<PlotTag
+				queryType={currentQuery.queryType}
+				panelType={panelType || PANEL_TYPES.TIME_SERIES}
+			/>
+			<YAxisUnitSelector
+				value={alertState.yAxisUnit}
+				onChange={(value): void => {
+					setAlertState({ type: 'SET_Y_AXIS_UNIT', payload: value });
+				}}
+			/>
+		</div>
+	);
+
 	const renderQBChartPreview = (): JSX.Element => (
 		<ChartPreviewComponent
-			headline={
-				<PlotTag
-					queryType={currentQuery.queryType}
-					panelType={panelType || PANEL_TYPES.TIME_SERIES}
-				/>
-			}
+			headline={headline}
 			name=""
 			query={stagedQuery}
 			selectedInterval={globalSelectedInterval}
@@ -40,19 +51,13 @@ function ChartPreview({ alertDef }: ChartPreviewProps): JSX.Element {
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
-			showSideLegend
 			additionalThresholds={thresholdState.thresholds}
 		/>
 	);

 	const renderPromAndChQueryChartPreview = (): JSX.Element => (
 		<ChartPreviewComponent
-			headline={
-				<PlotTag
-					queryType={currentQuery.queryType}
-					panelType={panelType || PANEL_TYPES.TIME_SERIES}
-				/>
-			}
+			headline={headline}
 			name="Chart Preview"
 			query={stagedQuery}
 			alertDef={alertDef}
@@ -60,7 +65,6 @@ function ChartPreview({ alertDef }: ChartPreviewProps): JSX.Element {
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
-			showSideLegend
 			additionalThresholds={thresholdState.thresholds}
 		/>
 	);
--- a/frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx
+++ b/frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx
@@ -2,12 +2,13 @@ import './styles.scss';

 import { Button } from 'antd';
 import classNames from 'classnames';
-import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import QuerySectionComponent from 'container/FormAlertRules/QuerySection';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { BarChart2, DraftingCompass, FileText, ScrollText } from 'lucide-react';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';

 import { useCreateAlertState } from '../context';
 import Stepper from '../Stepper';
@@ -15,17 +16,20 @@ import ChartPreview from './ChartPreview';
 import { buildAlertDefForChartPreview } from './utils';

 function QuerySection(): JSX.Element {
-	const { currentQuery, handleRunQuery } = useQueryBuilder();
 	const {
-		alertState,
-		setAlertState,
-		alertType,
-		setAlertType,
-		thresholdState,
-	} = useCreateAlertState();
+		currentQuery,
+		handleRunQuery,
+		redirectWithQueryBuilderData,
+	} = useQueryBuilder();
+	const { alertType, setAlertType, thresholdState } = useCreateAlertState();

 	const alertDef = buildAlertDefForChartPreview({ alertType, thresholdState });

+	const onQueryCategoryChange = (val: EQueryType): void => {
+		const query: Query = { ...currentQuery, queryType: val };
+		redirectWithQueryBuilderData(query);
+	};
+
 	const tabs = [
 		{
 			label: 'Metrics',
@@ -51,17 +55,8 @@ function QuerySection(): JSX.Element {

 	return (
 		<div className="query-section">
-			<Stepper
-				stepNumber={1}
-				label="Define the query you want to set an alert on"
-			/>
+			<Stepper stepNumber={1} label="Define the query" />
 			<ChartPreview alertDef={alertDef} />
-			<YAxisUnitSelector
-				value={alertState.yAxisUnit}
-				onChange={(value): void => {
-					setAlertState({ type: 'SET_Y_AXIS_UNIT', payload: value });
-				}}
-			/>
 			<div className="query-section-tabs">
 				<div className="query-section-query-actions">
 					{tabs.map((tab) => (
@@ -82,7 +77,7 @@ function QuerySection(): JSX.Element {
 			</div>
 			<QuerySectionComponent
 				queryCategory={currentQuery.queryType}
-				setQueryCategory={(): void => {}}
+				setQueryCategory={onQueryCategoryChange}
 				alertType={alertType}
 				runQuery={handleRunQuery}
 				alertDef={alertDef}
--- a/frontend/src/container/CreateAlertV2/QuerySection/tests/ChartPreview.test.tsx
+++ b/frontend/src/container/CreateAlertV2/QuerySection/tests/ChartPreview.test.tsx
@@ -134,7 +134,7 @@ const renderChartPreview = (): ReturnType<typeof render> =>
 		<Provider store={store}>
 			<QueryClientProvider client={queryClient}>
 				<MemoryRouter>
-					<CreateAlertProvider>
+					<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
 						<ChartPreview alertDef={mockAlertDef} />
 					</CreateAlertProvider>
 				</MemoryRouter>
--- a/frontend/src/container/CreateAlertV2/QuerySection/tests/QuerySection.test.tsx
+++ b/frontend/src/container/CreateAlertV2/QuerySection/tests/QuerySection.test.tsx
@@ -2,6 +2,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { QueryParams } from 'constants/query';
+import { AlertDetectionTypes } from 'container/FormAlertRules';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -104,7 +105,7 @@ const renderQuerySection = (): ReturnType<typeof render> =>
 		<Provider store={store}>
 			<QueryClientProvider client={queryClient}>
 				<MemoryRouter>
-					<CreateAlertProvider>
+					<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
 						<QuerySection />
 					</CreateAlertProvider>
 				</MemoryRouter>
@@ -135,7 +136,7 @@ describe('QuerySection', () => {
 		expect(screen.getByTestId('stepper')).toBeInTheDocument();
 		expect(screen.getByTestId('step-number')).toHaveTextContent('1');
 		expect(screen.getByTestId('step-label')).toHaveTextContent(
-			'Define the query you want to set an alert on',
+			'Define the query',
 		);

 		// Check if ChartPreview is rendered
@@ -186,6 +187,7 @@ describe('QuerySection', () => {
 			expect.any(Object),
 			{
 				[QueryParams.alertType]: AlertTypes.LOGS_BASED_ALERT,
+				[QueryParams.ruleType]: AlertDetectionTypes.THRESHOLD_ALERT,
 			},
 			undefined,
 			true,
@@ -200,6 +202,7 @@ describe('QuerySection', () => {
 			expect.any(Object),
 			{
 				[QueryParams.alertType]: AlertTypes.TRACES_BASED_ALERT,
+				[QueryParams.ruleType]: AlertDetectionTypes.THRESHOLD_ALERT,
 			},
 			undefined,
 			true,
--- a/frontend/src/container/CreateAlertV2/QuerySection/styles.scss
+++ b/frontend/src/container/CreateAlertV2/QuerySection/styles.scss
@@ -77,6 +77,14 @@
 			.ant-select-selector {
 				border: 1px solid var(--bg-slate-400);
 				background: var(--bg-ink-300);
+
+				&:hover {
+					border-color: var(--bg-vanilla-300);
+				}
+
+				&:focus {
+					border-color: var(--bg-vanilla-300);
+				}
 			}
 		}
 	}
@@ -88,6 +96,18 @@
 				border: 1px solid var(--bg-slate-500);
 				.ant-card-body {
 					background-color: var(--bg-ink-500);
+
+					.chart-preview-headline {
+						display: flex;
+						align-items: flex-start;
+						justify-content: space-between;
+						gap: 8px;
+						width: 100%;
+
+						.y-axis-unit-selector-component {
+							margin-top: 0;
+						}
+					}
 				}
 			}
 		}
@@ -99,3 +119,78 @@
 		border: 1px solid var(--bg-slate-400);
 	}
 }
+
+.lightMode {
+	.query-section {
+		.query-section-tabs {
+			.query-section-query-actions {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-300);
+
+				.explorer-view-option {
+					border-left: 0.5px solid var(--bg-vanilla-300);
+					border-bottom: 0.5px solid var(--bg-vanilla-300);
+
+					&.active-tab {
+						background-color: var(--bg-vanilla-300);
+
+						&:hover {
+							background-color: var(--bg-vanilla-100) !important;
+						}
+					}
+
+					&:disabled {
+						background-color: var(--bg-vanilla-300);
+					}
+
+					&:hover {
+						color: var(--bg-ink-400);
+					}
+				}
+			}
+		}
+
+		.y-axis-unit-selector-component {
+			.ant-select {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-300);
+
+					&:hover {
+						border-color: var(--bg-ink-300);
+					}
+
+					&:focus {
+						border-color: var(--bg-ink-300);
+						box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+					}
+				}
+			}
+		}
+
+		.chart-preview-container {
+			.alert-chart-container {
+				.ant-card {
+					border: 1px solid var(--bg-vanilla-300);
+					.ant-card-body {
+						background-color: var(--bg-vanilla-100);
+					}
+
+					.ant-card-body {
+						.chart-preview-header {
+							.plot-tag {
+								background-color: var(--bg-vanilla-300);
+								color: var(--bg-slate-100);
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.alert-query-section-container {
+			background-color: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300);
+		}
+	}
+}
--- a/frontend/src/container/CreateAlertV2/Stepper/styles.scss
+++ b/frontend/src/container/CreateAlertV2/Stepper/styles.scss
@@ -42,3 +42,22 @@
 	background-position: center;
 	margin-left: 8px;
 }
+
+.lightMode {
+	.step-number {
+		background-color: var(--bg-robin-400);
+		color: var(--text-slate-400);
+	}
+
+	.step-label {
+		color: var(--bg-ink-300);
+	}
+
+	.dotted-line {
+		background-image: radial-gradient(
+			circle,
+			var(--bg-ink-200) 1px,
+			transparent 1px
+		);
+	}
+}
--- a/frontend/src/container/CreateAlertV2/tests/utils.test.tsx
+++ b/frontend/src/container/CreateAlertV2/tests/utils.test.tsx
@@ -0,0 +1,358 @@
+import { Color } from '@signozhq/design-tokens';
+import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
+import { PostableAlertRuleV2 } from 'types/api/alerts/alertTypesV2';
+
+import { defaultPostableAlertRuleV2 } from '../constants';
+import { INITIAL_ALERT_STATE } from '../context/constants';
+import {
+	AlertThresholdMatchType,
+	AlertThresholdOperator,
+} from '../context/types';
+import {
+	getAdvancedOptionsStateFromAlertDef,
+	getColorForThreshold,
+	getCreateAlertLocalStateFromAlertDef,
+	getEvaluationWindowStateFromAlertDef,
+	getNotificationSettingsStateFromAlertDef,
+	getThresholdStateFromAlertDef,
+	parseGoTime,
+} from '../utils';
+
+describe('CreateAlertV2 utils', () => {
+	describe('getColorForThreshold', () => {
+		it('should return the correct color for the pre-defined threshold', () => {
+			expect(getColorForThreshold('critical')).toBe(Color.BG_SAKURA_500);
+			expect(getColorForThreshold('warning')).toBe(Color.BG_AMBER_500);
+			expect(getColorForThreshold('info')).toBe(Color.BG_ROBIN_500);
+		});
+	});
+
+	describe('parseGoTime', () => {
+		it('should return the correct time and unit for the given input', () => {
+			expect(parseGoTime('1h')).toStrictEqual({
+				time: 1,
+				unit: UniversalYAxisUnit.HOURS,
+			});
+			expect(parseGoTime('1m')).toStrictEqual({
+				time: 1,
+				unit: UniversalYAxisUnit.MINUTES,
+			});
+			expect(parseGoTime('1s')).toStrictEqual({
+				time: 1,
+				unit: UniversalYAxisUnit.SECONDS,
+			});
+			expect(parseGoTime('1h0m')).toStrictEqual({
+				time: 1,
+				unit: UniversalYAxisUnit.HOURS,
+			});
+		});
+	});
+
+	describe('getEvaluationWindowStateFromAlertDef', () => {
+		it('for rolling window with non-custom timeframe', () => {
+			const args: PostableAlertRuleV2 = {
+				...defaultPostableAlertRuleV2,
+				evaluation: {
+					...defaultPostableAlertRuleV2.evaluation,
+					kind: 'rolling',
+					spec: {
+						evalWindow: '5m0s',
+					},
+				},
+			};
+			const props = getEvaluationWindowStateFromAlertDef(args);
+			expect(props).toBeDefined();
+			expect(props).toMatchObject({
+				windowType: 'rolling',
+				timeframe: '5m0s',
+			});
+		});
+
+		it('for rolling window with custom timeframe', () => {
+			const args: PostableAlertRuleV2 = {
+				...defaultPostableAlertRuleV2,
+				evaluation: {
+					...defaultPostableAlertRuleV2.evaluation,
+					kind: 'rolling',
+					spec: {
+						evalWindow: '13m0s',
+					},
+				},
+			};
+			const props = getEvaluationWindowStateFromAlertDef(args);
+			expect(props).toBeDefined();
+			expect(props).toMatchObject({
+				windowType: 'rolling',
+				timeframe: 'custom',
+				startingAt: {
+					number: '13',
+					unit: UniversalYAxisUnit.MINUTES,
+				},
+			});
+		});
+
+		it('for cumulative window with current hour', () => {
+			const args: PostableAlertRuleV2 = {
+				...defaultPostableAlertRuleV2,
+				evaluation: {
+					kind: 'cumulative',
+					spec: {
+						schedule: {
+							type: 'hourly',
+							minute: 14,
+						},
+					},
+				},
+			};
+			const props = getEvaluationWindowStateFromAlertDef(args);
+			expect(props).toBeDefined();
+			expect(props).toMatchObject({
+				windowType: 'cumulative',
+				timeframe: 'currentHour',
+				startingAt: {
+					number: '14',
+				},
+			});
+		});
+
+		it('for cumulative window with current day', () => {
+			const args: PostableAlertRuleV2 = {
+				...defaultPostableAlertRuleV2,
+				evaluation: {
+					...defaultPostableAlertRuleV2.evaluation,
+					kind: 'cumulative',
+					spec: {
+						schedule: {
+							type: 'daily',
+							hour: 14,
+							minute: 15,
+						},
+					},
+				},
+			};
+			const props = getEvaluationWindowStateFromAlertDef(args);
+			expect(props).toBeDefined();
+			expect(props).toMatchObject({
+				windowType: 'cumulative',
+				timeframe: 'currentDay',
+				startingAt: {
+					time: '14:15:00',
+				},
+			});
+		});
+
+		it('for cumulative window with current month', () => {
+			const args: PostableAlertRuleV2 = {
+				...defaultPostableAlertRuleV2,
+				evaluation: {
+					...defaultPostableAlertRuleV2.evaluation,
+					kind: 'cumulative',
+					spec: {
+						schedule: {
+							type: 'monthly',
+							day: 12,
+							hour: 16,
+							minute: 34,
+						},
+						timezone: 'UTC',
+					},
+				},
+			};
+			const props = getEvaluationWindowStateFromAlertDef(args);
+			expect(props).toBeDefined();
+			expect(props).toMatchObject({
+				windowType: 'cumulative',
+				timeframe: 'currentMonth',
+				startingAt: {
+					number: '12',
+					timezone: 'UTC',
+					time: '16:34:00',
+				},
+			});
+		});
+	});
+
+	describe('getNotificationSettingsStateFromAlertDef', () => {
+		it('should return the correct notification settings state for the given alert def', () => {
+			const args: PostableAlertRuleV2 = {
+				...defaultPostableAlertRuleV2,
+				notificationSettings: {
+					groupBy: ['email'],
+					renotify: {
+						enabled: true,
+						interval: '1m0s',
+						alertStates: ['firing'],
+					},
+					usePolicy: true,
+				},
+			};
+			const props = getNotificationSettingsStateFromAlertDef(args);
+			expect(props).toBeDefined();
+			expect(props).toMatchObject({
+				multipleNotifications: ['email'],
+				reNotification: {
+					enabled: true,
+					value: 1,
+					unit: UniversalYAxisUnit.MINUTES,
+					conditions: ['firing'],
+				},
+				description:
+					'This alert is fired when the defined metric (current value: {{$value}}) crosses the threshold ({{$threshold}})',
+				routingPolicies: true,
+			});
+		});
+
+		it('when renotification is not provided', () => {
+			const args: PostableAlertRuleV2 = {
+				...defaultPostableAlertRuleV2,
+				notificationSettings: {
+					groupBy: ['email'],
+					usePolicy: false,
+				},
+			};
+			const props = getNotificationSettingsStateFromAlertDef(args);
+			expect(props).toBeDefined();
+			expect(props).toMatchObject({
+				multipleNotifications: ['email'],
+				reNotification: {
+					enabled: false,
+					value: 30,
+					unit: UniversalYAxisUnit.MINUTES,
+					conditions: [],
+				},
+			});
+		});
+	});
+
+	describe('getAdvancedOptionsStateFromAlertDef', () => {
+		it('should return the correct advanced options state for the given alert def', () => {
+			const args: PostableAlertRuleV2 = {
+				...defaultPostableAlertRuleV2,
+				condition: {
+					...defaultPostableAlertRuleV2.condition,
+					compositeQuery: {
+						...defaultPostableAlertRuleV2.condition.compositeQuery,
+						unit: UniversalYAxisUnit.MINUTES,
+					},
+					requiredNumPoints: 13,
+					requireMinPoints: true,
+					alertOnAbsent: true,
+					absentFor: 12,
+				},
+				evaluation: {
+					...defaultPostableAlertRuleV2.evaluation,
+					spec: {
+						frequency: '1m0s',
+					},
+				},
+			};
+			const props = getAdvancedOptionsStateFromAlertDef(args);
+			expect(props).toBeDefined();
+			expect(props).toMatchObject({
+				sendNotificationIfDataIsMissing: {
+					enabled: true,
+					toleranceLimit: 12,
+					timeUnit: UniversalYAxisUnit.MINUTES,
+				},
+				enforceMinimumDatapoints: {
+					enabled: true,
+					minimumDatapoints: 13,
+				},
+				evaluationCadence: {
+					mode: 'default',
+					default: {
+						value: 1,
+						timeUnit: UniversalYAxisUnit.MINUTES,
+					},
+				},
+			});
+		});
+	});
+
+	describe('getThresholdStateFromAlertDef', () => {
+		const args: PostableAlertRuleV2 = {
+			...defaultPostableAlertRuleV2,
+			annotations: {
+				summary: 'test summary',
+				description: 'test description',
+			},
+			condition: {
+				...defaultPostableAlertRuleV2.condition,
+				thresholds: {
+					kind: 'basic',
+					spec: [
+						{
+							name: 'critical',
+							target: 1,
+							targetUnit: UniversalYAxisUnit.MINUTES,
+							channels: ['email'],
+							matchType: AlertThresholdMatchType.AT_LEAST_ONCE,
+							op: AlertThresholdOperator.IS_ABOVE,
+						},
+					],
+				},
+				selectedQueryName: 'test',
+			},
+		};
+		const props = getThresholdStateFromAlertDef(args);
+		expect(props).toBeDefined();
+		expect(props).toMatchObject({
+			selectedQuery: 'test',
+			operator: AlertThresholdOperator.IS_ABOVE,
+			matchType: AlertThresholdMatchType.AT_LEAST_ONCE,
+			thresholds: [
+				{
+					id: expect.any(String),
+					label: 'critical',
+					thresholdValue: 1,
+					recoveryThresholdValue: null,
+					unit: UniversalYAxisUnit.MINUTES,
+					color: Color.BG_SAKURA_500,
+					channels: ['email'],
+				},
+			],
+		});
+	});
+
+	describe('getCreateAlertLocalStateFromAlertDef', () => {
+		it('should return the correct create alert local state for the given alert def', () => {
+			const args: PostableAlertRuleV2 = {
+				...defaultPostableAlertRuleV2,
+				annotations: {
+					summary: 'test summary',
+					description: 'test description',
+				},
+				alert: 'test-alert',
+				labels: {
+					severity: 'warning',
+					team: 'test-team',
+				},
+				condition: {
+					...defaultPostableAlertRuleV2.condition,
+					compositeQuery: {
+						...defaultPostableAlertRuleV2.condition.compositeQuery,
+						unit: UniversalYAxisUnit.MINUTES,
+					},
+				},
+			};
+			const props = getCreateAlertLocalStateFromAlertDef(args);
+			expect(props).toBeDefined();
+			expect(props).toMatchObject({
+				basicAlertState: {
+					...INITIAL_ALERT_STATE,
+					name: 'test-alert',
+					labels: {
+						severity: 'warning',
+						team: 'test-team',
+					},
+					yAxisUnit: UniversalYAxisUnit.MINUTES,
+				},
+				// as we have already verified these utils in their respective tests
+				thresholdState: expect.any(Object),
+				advancedOptionsState: expect.any(Object),
+				evaluationWindowState: expect.any(Object),
+				notificationSettingsState: expect.any(Object),
+			});
+		});
+	});
+});
--- a/frontend/src/container/CreateAlertV2/constants.ts
+++ b/frontend/src/container/CreateAlertV2/constants.ts
@@ -0,0 +1,74 @@
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import {
+	initialQueryBuilderFormValuesMap,
+	initialQueryPromQLData,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
+import {
+	NEW_ALERT_SCHEMA_VERSION,
+	PostableAlertRuleV2,
+} from 'types/api/alerts/alertTypesV2';
+import { EQueryType } from 'types/common/dashboard';
+
+const defaultAnnotations = {
+	description:
+		'This alert is fired when the defined metric (current value: {{$value}}) crosses the threshold ({{$threshold}})',
+	summary:
+		'The rule threshold is set to {{$threshold}}, and the observed metric value is {{$value}}',
+};
+
+const defaultNotificationSettings: PostableAlertRuleV2['notificationSettings'] = {
+	groupBy: [],
+	renotify: {
+		enabled: false,
+		interval: '30m',
+		alertStates: [],
+	},
+	usePolicy: false,
+};
+
+const defaultEvaluation: PostableAlertRuleV2['evaluation'] = {
+	kind: 'rolling',
+	spec: {
+		evalWindow: '5m0s',
+		frequency: '1m',
+	},
+};
+
+export const defaultPostableAlertRuleV2: PostableAlertRuleV2 = {
+	alertType: AlertTypes.METRICS_BASED_ALERT,
+	version: ENTITY_VERSION_V5,
+	schemaVersion: NEW_ALERT_SCHEMA_VERSION,
+	condition: {
+		compositeQuery: {
+			builderQueries: {
+				A: initialQueryBuilderFormValuesMap.metrics,
+			},
+			promQueries: { A: initialQueryPromQLData },
+			chQueries: {
+				A: {
+					name: 'A',
+					query: ``,
+					legend: '',
+					disabled: false,
+				},
+			},
+			queryType: EQueryType.QUERY_BUILDER,
+			panelType: PANEL_TYPES.TIME_SERIES,
+			unit: undefined,
+		},
+		selectedQueryName: 'A',
+		alertOnAbsent: true,
+		absentFor: 10,
+		requireMinPoints: false,
+		requiredNumPoints: 0,
+	},
+	labels: {
+		severity: 'warning',
+	},
+	annotations: defaultAnnotations,
+	notificationSettings: defaultNotificationSettings,
+	alert: 'TEST_ALERT',
+	evaluation: defaultEvaluation,
+};
--- a/frontend/src/container/CreateAlertV2/context/constants.ts
+++ b/frontend/src/container/CreateAlertV2/context/constants.ts
@@ -21,16 +21,15 @@ import {

 export const INITIAL_ALERT_STATE: AlertState = {
 	name: '',
-	description: '',
 	labels: {},
 	yAxisUnit: undefined,
 };

 export const INITIAL_CRITICAL_THRESHOLD: Threshold = {
 	id: v4(),
-	label: 'CRITICAL',
+	label: 'critical',
 	thresholdValue: 0,
-	recoveryThresholdValue: 0,
+	recoveryThresholdValue: null,
 	unit: '',
 	channels: [],
 	color: Color.BG_SAKURA_500,
@@ -38,9 +37,9 @@ export const INITIAL_CRITICAL_THRESHOLD: Threshold = {

 export const INITIAL_WARNING_THRESHOLD: Threshold = {
 	id: v4(),
-	label: 'WARNING',
+	label: 'warning',
 	thresholdValue: 0,
-	recoveryThresholdValue: 0,
+	recoveryThresholdValue: null,
 	unit: '',
 	channels: [],
 	color: Color.BG_AMBER_500,
@@ -48,9 +47,9 @@ export const INITIAL_WARNING_THRESHOLD: Threshold = {

 export const INITIAL_INFO_THRESHOLD: Threshold = {
 	id: v4(),
-	label: 'INFO',
+	label: 'info',
 	thresholdValue: 0,
-	recoveryThresholdValue: 0,
+	recoveryThresholdValue: null,
 	unit: '',
 	channels: [],
 	color: Color.BG_ROBIN_500,
@@ -60,7 +59,7 @@ export const INITIAL_RANDOM_THRESHOLD: Threshold = {
 	id: v4(),
 	label: '',
 	thresholdValue: 0,
-	recoveryThresholdValue: 0,
+	recoveryThresholdValue: null,
 	unit: '',
 	channels: [],
 	color: getRandomColor(),
@@ -80,9 +79,11 @@ export const INITIAL_ADVANCED_OPTIONS_STATE: AdvancedOptionsState = {
 	sendNotificationIfDataIsMissing: {
 		toleranceLimit: 15,
 		timeUnit: UniversalYAxisUnit.MINUTES,
+		enabled: false,
 	},
 	enforceMinimumDatapoints: {
 		minimumDatapoints: 0,
+		enabled: false,
 	},
 	delayEvaluation: {
 		delay: 5,
@@ -120,10 +121,10 @@ export const INITIAL_EVALUATION_WINDOW_STATE: EvaluationWindowState = {
 };

 export const THRESHOLD_OPERATOR_OPTIONS = [
-	{ value: AlertThresholdOperator.IS_ABOVE, label: 'IS ABOVE' },
-	{ value: AlertThresholdOperator.IS_BELOW, label: 'IS BELOW' },
-	{ value: AlertThresholdOperator.IS_EQUAL_TO, label: 'IS EQUAL TO' },
-	{ value: AlertThresholdOperator.IS_NOT_EQUAL_TO, label: 'IS NOT EQUAL TO' },
+	{ value: AlertThresholdOperator.IS_ABOVE, label: 'ABOVE' },
+	{ value: AlertThresholdOperator.IS_BELOW, label: 'BELOW' },
+	{ value: AlertThresholdOperator.IS_EQUAL_TO, label: 'EQUAL TO' },
+	{ value: AlertThresholdOperator.IS_NOT_EQUAL_TO, label: 'NOT EQUAL TO' },
 ];

 export const ANOMALY_THRESHOLD_OPERATOR_OPTIONS = [
@@ -169,7 +170,11 @@ export const ADVANCED_OPTIONS_TIME_UNIT_OPTIONS = [
 	{ value: UniversalYAxisUnit.SECONDS, label: 'Seconds' },
 	{ value: UniversalYAxisUnit.MINUTES, label: 'Minutes' },
 	{ value: UniversalYAxisUnit.HOURS, label: 'Hours' },
-	{ value: UniversalYAxisUnit.DAYS, label: 'Days' },
+];
+
+export const RE_NOTIFICATION_TIME_UNIT_OPTIONS = [
+	{ value: UniversalYAxisUnit.MINUTES, label: 'Minutes' },
+	{ value: UniversalYAxisUnit.HOURS, label: 'Hours' },
 ];

 export const NOTIFICATION_MESSAGE_PLACEHOLDER =
@@ -177,16 +182,17 @@ export const NOTIFICATION_MESSAGE_PLACEHOLDER =

 export const RE_NOTIFICATION_CONDITION_OPTIONS = [
 	{ value: 'firing', label: 'Firing' },
-	{ value: 'no-data', label: 'No Data' },
+	{ value: 'nodata', label: 'No Data' },
 ];

 export const INITIAL_NOTIFICATION_SETTINGS_STATE: NotificationSettingsState = {
 	multipleNotifications: [],
 	reNotification: {
 		enabled: false,
-		value: 1,
+		value: 30,
 		unit: UniversalYAxisUnit.MINUTES,
 		conditions: [],
 	},
 	description: NOTIFICATION_MESSAGE_PLACEHOLDER,
+	routingPolicies: false,
 };
--- a/frontend/src/container/CreateAlertV2/context/index.tsx
+++ b/frontend/src/container/CreateAlertV2/context/index.tsx
@@ -1,4 +1,8 @@
 import { QueryParams } from 'constants/query';
+import { AlertDetectionTypes } from 'container/FormAlertRules';
+import { useCreateAlertRule } from 'hooks/alerts/useCreateAlertRule';
+import { useTestAlertRule } from 'hooks/alerts/useTestAlertRule';
+import { useUpdateAlertRule } from 'hooks/alerts/useUpdateAlertRule';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import {
@@ -47,7 +51,7 @@ export const useCreateAlertState = (): ICreateAlertContextProps => {
 export function CreateAlertProvider(
 	props: ICreateAlertProviderProps,
 ): JSX.Element {
-	const { children } = props;
+	const { children, initialAlertState, isEditMode, ruleId } = props;

 	const [alertState, setAlertState] = useReducer(
 		alertCreationReducer,
@@ -72,6 +76,10 @@ export function CreateAlertProvider(
 				currentQueryToRedirect,
 				{
 					[QueryParams.alertType]: value,
+					[QueryParams.ruleType]:
+						value === AlertTypes.ANOMALY_BASED_ALERT
+							? AlertDetectionTypes.ANOMALY_DETECTION_ALERT
+							: AlertDetectionTypes.THRESHOLD_ALERT,
 				},
 				undefined,
 				true,
@@ -107,6 +115,65 @@ export function CreateAlertProvider(
 		});
 	}, [alertType]);

+	useEffect(() => {
+		if (isEditMode && initialAlertState) {
+			setAlertState({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.basicAlertState,
+			});
+			setThresholdState({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.thresholdState,
+			});
+			setEvaluationWindow({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.evaluationWindowState,
+			});
+			setAdvancedOptions({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.advancedOptionsState,
+			});
+			setNotificationSettings({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.notificationSettingsState,
+			});
+		}
+	}, [initialAlertState, isEditMode]);
+
+	const discardAlertRule = useCallback(() => {
+		setAlertState({
+			type: 'RESET',
+		});
+		setThresholdState({
+			type: 'RESET',
+		});
+		setEvaluationWindow({
+			type: 'RESET',
+		});
+		setAdvancedOptions({
+			type: 'RESET',
+		});
+		setNotificationSettings({
+			type: 'RESET',
+		});
+		handleAlertTypeChange(AlertTypes.METRICS_BASED_ALERT);
+	}, [handleAlertTypeChange]);
+
+	const {
+		mutate: createAlertRule,
+		isLoading: isCreatingAlertRule,
+	} = useCreateAlertRule();
+
+	const {
+		mutate: testAlertRule,
+		isLoading: isTestingAlertRule,
+	} = useTestAlertRule();
+
+	const {
+		mutate: updateAlertRule,
+		isLoading: isUpdatingAlertRule,
+	} = useUpdateAlertRule(ruleId || '');
+
 	const contextValue: ICreateAlertContextProps = useMemo(
 		() => ({
 			alertState,
@@ -121,6 +188,14 @@ export function CreateAlertProvider(
 			setAdvancedOptions,
 			notificationSettings,
 			setNotificationSettings,
+			discardAlertRule,
+			createAlertRule,
+			isCreatingAlertRule,
+			testAlertRule,
+			isTestingAlertRule,
+			updateAlertRule,
+			isUpdatingAlertRule,
+			isEditMode: isEditMode || false,
 		}),
 		[
 			alertState,
@@ -130,6 +205,14 @@ export function CreateAlertProvider(
 			evaluationWindow,
 			advancedOptions,
 			notificationSettings,
+			discardAlertRule,
+			createAlertRule,
+			isCreatingAlertRule,
+			testAlertRule,
+			isTestingAlertRule,
+			updateAlertRule,
+			isUpdatingAlertRule,
+			isEditMode,
 		],
 	);

--- a/frontend/src/container/CreateAlertV2/context/types.ts
+++ b/frontend/src/container/CreateAlertV2/context/types.ts
@@ -1,8 +1,16 @@
+import { CreateAlertRuleResponse } from 'api/alerts/createAlertRule';
+import { TestAlertRuleResponse } from 'api/alerts/testAlertRule';
+import { UpdateAlertRuleResponse } from 'api/alerts/updateAlertRule';
 import { Dayjs } from 'dayjs';
 import { Dispatch } from 'react';
+import { UseMutateFunction } from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
+import { PostableAlertRuleV2 } from 'types/api/alerts/alertTypesV2';
 import { Labels } from 'types/api/alerts/def';

+import { GetCreateAlertLocalStateFromAlertDefReturn } from '../types';
+
 export interface ICreateAlertContextProps {
 	alertState: AlertState;
 	setAlertState: Dispatch<CreateAlertAction>;
@@ -16,10 +24,37 @@ export interface ICreateAlertContextProps {
 	setEvaluationWindow: Dispatch<EvaluationWindowAction>;
 	notificationSettings: NotificationSettingsState;
 	setNotificationSettings: Dispatch<NotificationSettingsAction>;
+	isCreatingAlertRule: boolean;
+	createAlertRule: UseMutateFunction<
+		SuccessResponse<CreateAlertRuleResponse, unknown> | ErrorResponse,
+		Error,
+		PostableAlertRuleV2,
+		unknown
+	>;
+	isTestingAlertRule: boolean;
+	testAlertRule: UseMutateFunction<
+		SuccessResponse<TestAlertRuleResponse, unknown> | ErrorResponse,
+		Error,
+		PostableAlertRuleV2,
+		unknown
+	>;
+	discardAlertRule: () => void;
+	isUpdatingAlertRule: boolean;
+	updateAlertRule: UseMutateFunction<
+		SuccessResponse<UpdateAlertRuleResponse, unknown> | ErrorResponse,
+		Error,
+		PostableAlertRuleV2,
+		unknown
+	>;
+	isEditMode: boolean;
 }

 export interface ICreateAlertProviderProps {
 	children: React.ReactNode;
+	initialAlertType: AlertTypes;
+	initialAlertState?: GetCreateAlertLocalStateFromAlertDefReturn;
+	isEditMode?: boolean;
+	ruleId?: string;
 }

 export enum AlertCreationStep {
@@ -31,23 +66,22 @@ export enum AlertCreationStep {

 export interface AlertState {
 	name: string;
-	description: string;
 	labels: Labels;
 	yAxisUnit: string | undefined;
 }

 export type CreateAlertAction =
 	| { type: 'SET_ALERT_NAME'; payload: string }
-	| { type: 'SET_ALERT_DESCRIPTION'; payload: string }
 	| { type: 'SET_ALERT_LABELS'; payload: Labels }
 	| { type: 'SET_Y_AXIS_UNIT'; payload: string | undefined }
+	| { type: 'SET_INITIAL_STATE'; payload: AlertState }
 	| { type: 'RESET' };

 export interface Threshold {
 	id: string;
 	label: string;
 	thresholdValue: number;
-	recoveryThresholdValue: number;
+	recoveryThresholdValue: number | null;
 	unit: string;
 	channels: string[];
 	color: string;
@@ -108,15 +142,18 @@ export type AlertThresholdAction =
 	| { type: 'SET_ALGORITHM'; payload: string }
 	| { type: 'SET_SEASONALITY'; payload: string }
 	| { type: 'SET_THRESHOLDS'; payload: Threshold[] }
+	| { type: 'SET_INITIAL_STATE'; payload: AlertThresholdState }
 	| { type: 'RESET' };

 export interface AdvancedOptionsState {
 	sendNotificationIfDataIsMissing: {
 		toleranceLimit: number;
 		timeUnit: string;
+		enabled: boolean;
 	};
 	enforceMinimumDatapoints: {
 		minimumDatapoints: number;
+		enabled: boolean;
 	};
 	delayEvaluation: {
 		delay: number;
@@ -147,10 +184,18 @@ export type AdvancedOptionsAction =
 			type: 'SET_SEND_NOTIFICATION_IF_DATA_IS_MISSING';
 			payload: { toleranceLimit: number; timeUnit: string };
 	  }
+	| {
+			type: 'TOGGLE_SEND_NOTIFICATION_IF_DATA_IS_MISSING';
+			payload: boolean;
+	  }
 	| {
 			type: 'SET_ENFORCE_MINIMUM_DATAPOINTS';
 			payload: { minimumDatapoints: number };
 	  }
+	| {
+			type: 'TOGGLE_ENFORCE_MINIMUM_DATAPOINTS';
+			payload: boolean;
+	  }
 	| {
 			type: 'SET_DELAY_EVALUATION';
 			payload: { delay: number; timeUnit: string };
@@ -169,6 +214,7 @@ export type AdvancedOptionsAction =
 			};
 	  }
 	| { type: 'SET_EVALUATION_CADENCE_MODE'; payload: EvaluationCadenceMode }
+	| { type: 'SET_INITIAL_STATE'; payload: AdvancedOptionsState }
 	| { type: 'RESET' };

 export interface EvaluationWindowState {
@@ -190,6 +236,7 @@ export type EvaluationWindowAction =
 			payload: { time: string; number: string; timezone: string; unit: string };
 	  }
 	| { type: 'SET_EVALUATION_CADENCE_MODE'; payload: EvaluationCadenceMode }
+	| { type: 'SET_INITIAL_STATE'; payload: EvaluationWindowState }
 	| { type: 'RESET' };

 export type EvaluationCadenceMode = 'default' | 'custom' | 'rrule';
@@ -200,9 +247,10 @@ export interface NotificationSettingsState {
 		enabled: boolean;
 		value: number;
 		unit: string;
-		conditions: ('firing' | 'no-data')[];
+		conditions: ('firing' | 'nodata')[];
 	};
 	description: string;
+	routingPolicies: boolean;
 }

 export type NotificationSettingsAction =
@@ -216,8 +264,10 @@ export type NotificationSettingsAction =
 				enabled: boolean;
 				value: number;
 				unit: string;
-				conditions: ('firing' | 'no-data')[];
+				conditions: ('firing' | 'nodata')[];
 			};
 	  }
 	| { type: 'SET_DESCRIPTION'; payload: string }
+	| { type: 'SET_ROUTING_POLICIES'; payload: boolean }
+	| { type: 'SET_INITIAL_STATE'; payload: NotificationSettingsState }
 	| { type: 'RESET' };
--- a/frontend/src/container/CreateAlertV2/context/utils.tsx
+++ b/frontend/src/container/CreateAlertV2/context/utils.tsx
@@ -41,11 +41,6 @@ export const alertCreationReducer = (
 				...state,
 				name: action.payload,
 			};
-		case 'SET_ALERT_DESCRIPTION':
-			return {
-				...state,
-				description: action.payload,
-			};
 		case 'SET_ALERT_LABELS':
 			return {
 				...state,
@@ -58,6 +53,8 @@ export const alertCreationReducer = (
 			};
 		case 'RESET':
 			return INITIAL_ALERT_STATE;
+		case 'SET_INITIAL_STATE':
+			return action.payload;
 		default:
 			return state;
 	}
@@ -99,6 +96,10 @@ export function getInitialAlertTypeFromURL(
 	urlSearchParams: URLSearchParams,
 	currentQuery: Query,
 ): AlertTypes {
+	const ruleType = urlSearchParams.get(QueryParams.ruleType);
+	if (ruleType === 'anomaly_rule') {
+		return AlertTypes.ANOMALY_BASED_ALERT;
+	}
 	const alertTypeFromURL = urlSearchParams.get(QueryParams.alertType);
 	return alertTypeFromURL
 		? (alertTypeFromURL as AlertTypes)
@@ -120,6 +121,8 @@ export const alertThresholdReducer = (
 			return { ...state, thresholds: action.payload };
 		case 'RESET':
 			return INITIAL_ALERT_THRESHOLD_STATE;
+		case 'SET_INITIAL_STATE':
+			return action.payload;
 		default:
 			return state;
 	}
@@ -131,9 +134,38 @@ export const advancedOptionsReducer = (
 ): AdvancedOptionsState => {
 	switch (action.type) {
 		case 'SET_SEND_NOTIFICATION_IF_DATA_IS_MISSING':
-			return { ...state, sendNotificationIfDataIsMissing: action.payload };
+			return {
+				...state,
+				sendNotificationIfDataIsMissing: {
+					...state.sendNotificationIfDataIsMissing,
+					toleranceLimit: action.payload.toleranceLimit,
+					timeUnit: action.payload.timeUnit,
+				},
+			};
+		case 'TOGGLE_SEND_NOTIFICATION_IF_DATA_IS_MISSING':
+			return {
+				...state,
+				sendNotificationIfDataIsMissing: {
+					...state.sendNotificationIfDataIsMissing,
+					enabled: action.payload,
+				},
+			};
 		case 'SET_ENFORCE_MINIMUM_DATAPOINTS':
-			return { ...state, enforceMinimumDatapoints: action.payload };
+			return {
+				...state,
+				enforceMinimumDatapoints: {
+					...state.enforceMinimumDatapoints,
+					minimumDatapoints: action.payload.minimumDatapoints,
+				},
+			};
+		case 'TOGGLE_ENFORCE_MINIMUM_DATAPOINTS':
+			return {
+				...state,
+				enforceMinimumDatapoints: {
+					...state.enforceMinimumDatapoints,
+					enabled: action.payload,
+				},
+			};
 		case 'SET_DELAY_EVALUATION':
 			return { ...state, delayEvaluation: action.payload };
 		case 'SET_EVALUATION_CADENCE':
@@ -146,6 +178,8 @@ export const advancedOptionsReducer = (
 				...state,
 				evaluationCadence: { ...state.evaluationCadence, mode: action.payload },
 			};
+		case 'SET_INITIAL_STATE':
+			return action.payload;
 		case 'RESET':
 			return INITIAL_ADVANCED_OPTIONS_STATE;
 		default:
@@ -174,6 +208,8 @@ export const evaluationWindowReducer = (
 			return { ...state, startingAt: action.payload };
 		case 'RESET':
 			return INITIAL_EVALUATION_WINDOW_STATE;
+		case 'SET_INITIAL_STATE':
+			return action.payload;
 		default:
 			return state;
 	}
@@ -190,8 +226,12 @@ export const notificationSettingsReducer = (
 			return { ...state, reNotification: action.payload };
 		case 'SET_DESCRIPTION':
 			return { ...state, description: action.payload };
+		case 'SET_ROUTING_POLICIES':
+			return { ...state, routingPolicies: action.payload };
 		case 'RESET':
 			return INITIAL_NOTIFICATION_SETTINGS_STATE;
+		case 'SET_INITIAL_STATE':
+			return action.payload;
 		default:
 			return state;
 	}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
nikhilmantri0902	824ca62c61	fix: changed the querying mechanism from using @parameterization to $ parameterization	2025-10-07 12:45:54 +05:30
Amlan Kumar Nandy	c770a1a4e1	chore: remove routing policies feature flag (#9249 )	2025-10-04 21:39:18 +05:30
Nageshbansal	101b3668b5	chore(statsreporter): fix azure IMDS endpoint in statsreporter (#9243 )	2025-10-03 17:00:06 +00:00
Srikanth Chekuri	1b1aa4915b	chore: link to docs, QB flavour for expr and update options (#9246 )	2025-10-03 21:50:56 +05:30
aniketio-ctrl	f9a70a3a69	chore: notification routing \| added notificaiton routing via expression based routes (#9195 ) * chore: added custom distpatcher * feat(notification-grouping): added notification grouping * feat(notification-grouping): addded integration test dependency * feat(notification-grouping): linting and test cases * feat(notification-grouping): linting and test cases * feat(notification-grouping): linting and test cases * feat(notification-grouping): addded integration test dependency * feat(notification-grouping): debug log lines * feat(notification-grouping): debug log lines * feat(notification-grouping): debug log lines * feat(notification-grouping): addded integration test dependency * feat(notification-grouping): addded integration test dependency * feat(notification-grouping): addded integration test dependency * feat(notification-grouping): added structure changes * feat(notification-grouping): added structure changes * feat(notification-routing): added notification routing * chore(notification-grouping): added notificaiton grouping * Update pkg/alertmanager/nfmanager/rulebasednotification/provider.go Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> * chore(notification-grouping): added renotification interval * fix(notification-grouping): added fix for renotification * chore(notificaiton-grouping): added no data renotify * chore(notificaiton-grouping): added no data renotify * chore(notificaiton-grouping): added no data renotify * chore(notification-grouping): added no data renotify interval * chore(notification-grouping): removed errors package from dispatcher * chore(notification-grouping): removed errors package from dispatcher * chore(notification-grouping): removed unwanted tests * chore(notification-grouping): removed unwanted pkg name * chore(notification-grouping): added delete notification setting * chore(notification-grouping): added delete notification setting * Update pkg/alertmanager/nfmanager/nfmanagertest/provider.go Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> * chore(notification-grouping): removed nfmanager config\| notification settings in postable rule * chore(notification-grouping): removed nfmanager config\| notification settings in postable rule * chore(notification-grouping): added test for dispatcher * chore(notification-grouping): added test for dispatcher * chore(notification-grouping): go linting errors * chore(notification-grouping): added test cases for aggGroupPerRoute * chore(notification-grouping): added test cases for aggGroupPerRoute * chore(notification-grouping): corrected get notification config logic * Update pkg/alertmanager/nfmanager/rulebasednotification/provider_test.go Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> * chore(notification-routing): added notification routing policies * feat(notification-routing): added test cases for dispatcher * chore(notification-routing): added notification routing policies * chore(notification-routing): added notification routing policies * Apply suggestions from code review Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> * chore(notification-routing): added notification routing policies * chore(notification-routing): added notification routing policies * Update pkg/alertmanager/alertmanagerserver/distpatcher_test.go Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> * chore(notification-routing): sorted imports * chore(notification-routing): minor edit \|pr resolve comments * chore(notification-grouping): corrected dispatcher test cases * chore(notification-routing): added notification routing policies * chore(notification-routing): corrected race condition in test * chore: resolved pr comments * chore: passing threshold value to tempalte * chore: completed delete rule functionality * chore: added grouping disabled functionality * chore: added grouping disabled functionality * chore(notification-routing): resolved pr comments * chore(notification-routing): resolved pr comments * chore(notification-routing): resolved pr comments * chore(notification-routing): sorted imports * chore(notification-routing): fix linting errors * chore(notification-routing): removed enabled flags * fix: test rule multiple threhsold (#9224) * chore: corrected linting errors * chore: corrected linting errors * chore: corrected linting errors * chore: corrected linting errors * chore: corrected migration errors * chore: corrected migration errors * chore: corrected migration errors * chore: corrected migration errors * Update pkg/sqlmigration/049_add_route_policy.go Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> * chore: added org_is as foreign key * chore: resolved pr comments * chore: removed route store unused --------- Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com> Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>	2025-10-03 19:47:15 +05:30
Nityananda Gohain	d3be2632b6	fix: exists/not exists for resource attributes (#9129 ) * fix: exists/not exists for resource attributes * fix: update tests * fix: remove unwanted changes --------- Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>	2025-10-03 05:42:42 +00:00
Srikanth Chekuri	78e4f4f386	fix: handle resource/attribute context collision with expression using paranthesis (#9240 )	2025-10-03 10:16:06 +05:30
Amlan Kumar Nandy	cbb24d9a34	chore: edit alerts api integration (#9210 )	2025-09-30 17:37:47 +00:00
Nageshbansal	9ffe0d8143	chore(statsreporter): add nomad, vultr, aca platform detection (#9220 )	2025-09-30 16:31:43 +05:30
Amlan Kumar Nandy	1a1ef5aff8	chore: create alerts ux improvements and api integration (#9165 )	2025-09-29 17:03:29 +00:00
Abhi kumar	8b21ba5db9	ISSUE:2806 - View traces/logs functionality across the product with new QB (#9207 ) * fix: issue-2806 view traces/logs functionality across the product with new qb * test: added test for getfilter * test: updated tests	2025-09-29 19:12:50 +05:30
Vikrant Gupta	1b818dd05d	feat(authz): build role module (#9136 ) * feat(authz): build role module * feat(authz): build role module * feat(authz): refactor the role module to move transactions out * feat(authz): add handler implementation except patch objects * feat(authz): added the missing handler * feat(authz): added changes for selectors * feat(authz): added changes for selectors * feat(authz): added changes for selectors * feat(authz): make the role create handler just to create metadata * feat(authz): address review comments * feat(authz): address review comments * feat(authz): address review comments * feat(authz): address review comments	2025-09-29 17:45:52 +05:30
Aditya Singh	3c3641493e	fix: fix page offset in exceptions tab (#9184 )	2025-09-28 12:45:56 +00:00
Amlan Kumar Nandy	411414fa45	chore: add routing polices page (#9198 )	2025-09-27 21:02:14 +05:30
aniketio-ctrl	735b90722d	chore(notification grouping): added custom grouping in signoz dispatcher (#8812 )	2025-09-26 13:24:58 +00:00
Yunus M	8b485de584	chore: create a HOC to wrap components with ErrorBoundary (#9096 ) * chore: create a HOC to wrap components with ErrorBoundary * feat: move svg to public, use render from test-utils	2025-09-26 18:07:59 +05:30
Abhi kumar	d595dcc222	fix: added fix for passing activeLogId in query range in log context view (#9180 ) * fix: added fix for passing activitylogId in query range in log context view * chore: added tests	2025-09-26 13:17:38 +05:30
Ekansh Gupta	7ddaa84387	feat: add materialise ttl = 0 in set ttl v2 (#9189 )	2025-09-26 05:44:13 +00:00
Niladri Adhikary	6d5f0adab9	fix: prevent panels with all queries disabled (#9093 ) Signed-off-by: “niladrix719” <niladrix719@gmail.com>	2025-09-26 01:08:35 +00:00
primus-bot[bot]	2c19f0171f	chore(release): bump to v0.96.1 (#9194 ) Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>	2025-09-25 20:47:24 +05:30
Abhi kumar	9a5bcb6b64	revert: removed changes done for cursor position jump fix (#9193 )	2025-09-25 13:57:05 +00:00
Aditya Singh	96cdf21a92	Fix: Opening logs link broken (Pref framework) (#9182 ) * fix: logs popover content logic extracted out * fix: logs popover content in live view * fix: destory popover on close * feat: add logs format tests * feat: minor refactor * feat: test case refactor * feat: remove menu refs in logs live view	2025-09-25 13:44:05 +00:00
Yunus M	1aa5f5d0e1	fix: extra content passed by consuming component (#9191 )	2025-09-25 13:30:40 +00:00
Vishal Sharma	6ac812b5af	chore: change update workspace URL to upgrade guide (#9178 ) * chore: change update workspace URL to upgrade guide * chore: change upgrade workspace url	2025-09-25 16:38:38 +05:30
Vikrant Gupta	0b4831ca04	chore(authz): bump up openfga version (#9175 ) * chore(authz): bump up openfga version * chore(authz): bump up openfga version * chore(authz): bump up openfga version --------- Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>	2025-09-25 13:07:48 +05:30
primus-bot[bot]	340aa9ec21	chore(release): bump to v0.96.0 (#9179 ) Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com> Co-authored-by: Vikrant Gupta <vikrant@signoz.io> Co-authored-by: Priyanshu Shrivastava <priyanshu@signoz.io>	2025-09-25 12:51:25 +05:30
Yunus M	5a47a4349b	feat: hide feedback for non licensed users (#9176 )	2025-09-25 12:40:21 +05:30
Ekansh Gupta	80f0c6dd92	feat: added cold storage in set ttl v2 method (#9151 ) * feat: added cold storage in set ttl v2 method * feat: standardised cold storage ttl to days * feat: added coldstorage ttl in response structure of get api	2025-09-25 06:57:20 +00:00
Yunus M	c0acc69f87	fix: revert queryKey update to re-enable cancel run (#9105 )	2025-09-25 12:05:02 +05:30