fix: resolve custom time range selection issue in infra monitoring

chore: persist one chart per query toggle across refreshes and exports (#7884 )
feat: Funnel Details Page Base Structure (#7364 )
2025-05-12 17:38:02 +07:00 · 2025-05-12 05:16:13 +00:00 · 2025-05-12 10:16:26 +05:30 · 2025-05-11 17:10:55 +05:30 · 2025-05-11 16:38:45 +05:30 · 2025-05-11 14:09:24 +05:30
454 changed files with 23210 additions and 6874 deletions
--- a/.devenv/docker/clickhouse/compose.yaml
+++ b/.devenv/docker/clickhouse/compose.yaml
@@ -1,5 +1,4 @@
 services:
-
  clickhouse:
    image: clickhouse/clickhouse-server:24.1.2-alpine
    container_name: clickhouse
@@ -24,7 +23,6 @@ services:
      retries: 3
    depends_on:
      - zookeeper
-
  zookeeper:
    image: bitnami/zookeeper:3.7.1
    container_name: zookeeper
@@ -41,9 +39,8 @@ services:
      interval: 30s
      timeout: 5s
      retries: 3
-
  schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:0.111.29
+    image: signoz/signoz-schema-migrator:v0.111.41
    container_name: schema-migrator-sync
    command:
      - sync
@@ -55,9 +52,8 @@ services:
      clickhouse:
        condition: service_healthy
    restart: on-failure
-
  schema-migrator-async:
-    image: signoz/signoz-schema-migrator:0.111.29
+    image: signoz/signoz-schema-migrator:v0.111.41
    container_name: schema-migrator-async
    command:
      - async
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -2,7 +2,7 @@
 # Owners are automatically requested for review for PRs that changes code
 # that they own.

-/frontend/ @YounixM
+/frontend/ @SigNoz/frontend @YounixM
 /frontend/src/container/MetricsApplication @srikanthccv
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
 /deploy/ @SigNoz/devops
@@ -11,3 +11,4 @@
 /pkg/errors/ @grandwizard28
 /pkg/factory/ @grandwizard28
 /pkg/types/ @grandwizard28
+/pkg/sqlmigration/ @vikrantgupta25
--- a/.github/workflows/build-community.yaml
+++ b/.github/workflows/build-community.yaml
@@ -62,6 +62,7 @@ jobs:
    secrets: inherit
    with:
      PRIMUS_REF: main
+      GO_VERSION: 1.23
      GO_NAME: signoz-community
      GO_INPUT_ARTIFACT_CACHE_KEY: community-jsbuild-${{ github.sha }}
      GO_INPUT_ARTIFACT_PATH: frontend/build
--- a/.github/workflows/build-enterprise.yaml
+++ b/.github/workflows/build-enterprise.yaml
@@ -69,6 +69,7 @@ jobs:
          echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
          echo 'CUSTOMERIO_ID="${{ secrets.CUSTOMERIO_ID }}"' >> frontend/.env
          echo 'CUSTOMERIO_SITE_ID="${{ secrets.CUSTOMERIO_SITE_ID }}"' >> frontend/.env
+          echo 'USERPILOT_KEY="${{ secrets.USERPILOT_KEY }}"' >> frontend/.env
      - name: cache-dotenv
        uses: actions/cache@v4
        with:
@@ -93,6 +94,7 @@ jobs:
    secrets: inherit
    with:
      PRIMUS_REF: main
+      GO_VERSION: 1.23
      GO_INPUT_ARTIFACT_CACHE_KEY: enterprise-jsbuild-${{ github.sha }}
      GO_INPUT_ARTIFACT_PATH: frontend/build
      GO_BUILD_CONTEXT: ./ee/query-service
--- a/.github/workflows/build-staging.yaml
+++ b/.github/workflows/build-staging.yaml
@@ -64,8 +64,9 @@ jobs:
        run: |
          mkdir -p frontend
          echo 'CI=1' > frontend/.env
-          echo 'TUNNEL_URL=https://telemetry.staging.signoz.cloud/tunnel' >> frontend/.env
-          echo 'TUNNEL_DOMAIN=https://telemetry.staging.signoz.cloud' >> frontend/.env
+          echo 'TUNNEL_URL="${{ secrets.NP_TUNNEL_URL }}"' >> frontend/.env
+          echo 'TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
+          echo 'USERPILOT_KEY="${{ secrets.NP_USERPILOT_KEY }}"' >> frontend/.env
      - name: cache-dotenv
        uses: actions/cache@v4
        with:
@@ -90,6 +91,7 @@ jobs:
    secrets: inherit
    with:
      PRIMUS_REF: main
+      GO_VERSION: 1.23
      GO_INPUT_ARTIFACT_CACHE_KEY: staging-jsbuild-${{ github.sha }}
      GO_INPUT_ARTIFACT_PATH: frontend/build
      GO_BUILD_CONTEXT: ./ee/query-service
--- a/.github/workflows/goci.yaml
+++ b/.github/workflows/goci.yaml
@@ -18,6 +18,7 @@ jobs:
    with:
      PRIMUS_REF: main
      GO_TEST_CONTEXT: ./...
+      GO_VERSION: 1.23
  fmt:
    if: |
      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -26,6 +27,7 @@ jobs:
    secrets: inherit
    with:
      PRIMUS_REF: main
+      GO_VERSION: 1.23
  lint:
    if: |
      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -34,6 +36,7 @@ jobs:
    secrets: inherit
    with:
      PRIMUS_REF: main
+      GO_VERSION: 1.23
  build:
    if: |
      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -45,7 +48,7 @@ jobs:
      - name: go-install
        uses: actions/setup-go@v5
        with:
-          go-version: "1.22"
+          go-version: "1.23"
      - name: qemu-install
        uses: docker/setup-qemu-action@v3
      - name: aarch64-install
--- a/.github/workflows/gor-signoz-community.yaml
+++ b/.github/workflows/gor-signoz-community.yaml
@@ -58,7 +58,7 @@ jobs:
      - name: setup-go
        uses: actions/setup-go@v5
        with:
-          go-version: "1.22"
+          go-version: "1.23"
      - name: cross-compilation-tools
        if: matrix.os == 'ubuntu-latest'
        run: |
@@ -122,7 +122,7 @@ jobs:
      - name: setup-go
        uses: actions/setup-go@v5
        with:
-          go-version: "1.22"
+          go-version: "1.23"

      # copy the caches from build
      - name: get-sha
--- a/.github/workflows/gor-signoz.yaml
+++ b/.github/workflows/gor-signoz.yaml
@@ -35,6 +35,7 @@ jobs:
          echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> .env
          echo 'CUSTOMERIO_ID="${{ secrets.CUSTOMERIO_ID }}"' >> .env
          echo 'CUSTOMERIO_SITE_ID="${{ secrets.CUSTOMERIO_SITE_ID }}"' >> .env
+          echo 'USERPILOT_KEY="${{ secrets.USERPILOT_KEY }}"' >> .env
      - name: build-frontend
        run:  make js-build
      - name: upload-frontend-artifact
@@ -72,7 +73,7 @@ jobs:
      - name: setup-go
        uses: actions/setup-go@v5
        with:
-          go-version: "1.22"
+          go-version: "1.23"
      - name: cross-compilation-tools
        if: matrix.os == 'ubuntu-latest'
        run: |
@@ -135,7 +136,7 @@ jobs:
      - name: setup-go
        uses: actions/setup-go@v5
        with:
-          go-version: "1.22"
+          go-version: "1.23"

      # copy the caches from build
      - name: get-sha
--- a/.gitignore
+++ b/.gitignore
@@ -60,9 +60,7 @@ ee/query-service/db

 e2e/node_modules/
 e2e/test-results/
-e2e/playwright-report/
 e2e/blob-report/
-e2e/playwright/.cache/
 e2e/.auth

 # go
--- a/8
+++ b/8
@@ -76,9 +76,7 @@ go-run-enterprise: ## Runs the enterprise go backend server
 	go run -race \
 		$(GO_BUILD_CONTEXT_ENTERPRISE)/main.go \
 		--config ./conf/prometheus.yml \
-		--cluster cluster \
-		--use-logs-new-schema true \
-		--use-trace-new-schema true
+		--cluster cluster

 .PHONY: go-test
 go-test: ## Runs go unit tests
@@ -96,9 +94,7 @@ go-run-community: ## Runs the community go backend server
 	go run -race \
 		$(GO_BUILD_CONTEXT_COMMUNITY)/main.go \
 		--config ./conf/prometheus.yml \
-		--cluster cluster \
-		--use-logs-new-schema true \
-		--use-trace-new-schema true
+		--cluster cluster

 .PHONY: go-build-community $(GO_BUILD_ARCHS_COMMUNITY)
 go-build-community: ## Builds the go backend server for community
--- a/conf/example.yaml
+++ b/conf/example.yaml
@@ -50,7 +50,7 @@ cache:
    # Time-to-live for cache entries in memory. Specify the duration in ns
    ttl: 60000000000
    # The interval at which the cache will be cleaned up
-    cleanupInterval: 1m
+    cleanup_interval: 1m
  # redis: Uses Redis as the caching backend.
  redis:
    # The hostname or IP address of the Redis server.
--- a/deploy/docker-swarm/docker-compose.ha.yaml
+++ b/deploy/docker-swarm/docker-compose.ha.yaml
@@ -174,11 +174,9 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.80.0
+    image: signoz/signoz:v0.82.0
    command:
      - --config=/root/config/prometheus.yml
-      - --use-logs-new-schema=true
-      - --use-trace-new-schema=true
    ports:
      - "8080:8080" # signoz port
    #   - "6060:6060"     # pprof port
@@ -208,7 +206,7 @@ services:
      retries: 3
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.111.39
+    image: signoz/signoz-otel-collector:v0.111.41
    command:
      - --config=/etc/otel-collector-config.yaml
      - --manager-config=/etc/manager-config.yaml
@@ -232,7 +230,7 @@ services:
      - signoz
  schema-migrator:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.111.39
+    image: signoz/signoz-schema-migrator:v0.111.41
    deploy:
      restart_policy:
        condition: on-failure
--- a/deploy/docker-swarm/docker-compose.yaml
+++ b/deploy/docker-swarm/docker-compose.yaml
@@ -110,11 +110,9 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.80.0
+    image: signoz/signoz:v0.82.0
    command:
      - --config=/root/config/prometheus.yml
-      - --use-logs-new-schema=true
-      - --use-trace-new-schema=true
    ports:
      - "8080:8080" # signoz port
    #   - "6060:6060"     # pprof port
@@ -143,7 +141,7 @@ services:
      retries: 3
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.111.39
+    image: signoz/signoz-otel-collector:v0.111.41
    command:
      - --config=/etc/otel-collector-config.yaml
      - --manager-config=/etc/manager-config.yaml
@@ -167,7 +165,7 @@ services:
      - signoz
  schema-migrator:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.111.39
+    image: signoz/signoz-schema-migrator:v0.111.41
    deploy:
      restart_policy:
        condition: on-failure
--- a/deploy/docker-swarm/otel-collector-config.yaml
+++ b/deploy/docker-swarm/otel-collector-config.yaml
@@ -26,7 +26,7 @@ processors:
    detectors: [env, system]
    timeout: 2s
  signozspanmetrics/delta:
-    metrics_exporter: clickhousemetricswrite
+    metrics_exporter: clickhousemetricswrite, signozclickhousemetrics
    metrics_flush_interval: 60s
    latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
    dimensions_cache_size: 100000
@@ -64,8 +64,10 @@ exporters:
    endpoint: tcp://clickhouse:9000/signoz_metrics
    resource_to_telemetry_conversion:
      enabled: true
+    disable_v2: true
  clickhousemetricswrite/prometheus:
    endpoint: tcp://clickhouse:9000/signoz_metrics
+    disable_v2: true
  signozclickhousemetrics:
    dsn: tcp://clickhouse:9000/signoz_metrics
  clickhouselogsexporter:
--- a/deploy/docker/docker-compose.ha.yaml
+++ b/deploy/docker/docker-compose.ha.yaml
@@ -177,12 +177,10 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.80.0}
+    image: signoz/signoz:${VERSION:-v0.82.0}
    container_name: signoz
    command:
      - --config=/root/config/prometheus.yml
-      - --use-logs-new-schema=true
-      - --use-trace-new-schema=true
    ports:
      - "8080:8080" # signoz port
    #   - "6060:6060"     # pprof port
@@ -212,7 +210,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.111.39}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.41}
    container_name: signoz-otel-collector
    command:
      - --config=/etc/otel-collector-config.yaml
@@ -238,7 +236,7 @@ services:
        condition: service_healthy
  schema-migrator-sync:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.39}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
    container_name: schema-migrator-sync
    command:
      - sync
@@ -249,7 +247,7 @@ services:
        condition: service_healthy
  schema-migrator-async:
    !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.39}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
    container_name: schema-migrator-async
    command:
      - async
--- a/deploy/docker/docker-compose.yaml
+++ b/deploy/docker/docker-compose.yaml
@@ -110,12 +110,10 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.80.0}
+    image: signoz/signoz:${VERSION:-v0.82.0}
    container_name: signoz
    command:
      - --config=/root/config/prometheus.yml
-      - --use-logs-new-schema=true
-      - --use-trace-new-schema=true
    ports:
      - "8080:8080" # signoz port
    #   - "6060:6060"     # pprof port
@@ -144,7 +142,7 @@ services:
      retries: 3
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.39}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.41}
    container_name: signoz-otel-collector
    command:
      - --config=/etc/otel-collector-config.yaml
@@ -166,7 +164,7 @@ services:
        condition: service_healthy
  schema-migrator-sync:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.39}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
    container_name: schema-migrator-sync
    command:
      - sync
@@ -178,7 +176,7 @@ services:
    restart: on-failure
  schema-migrator-async:
    !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.39}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
    container_name: schema-migrator-async
    command:
      - async
--- a/deploy/docker/otel-collector-config.yaml
+++ b/deploy/docker/otel-collector-config.yaml
@@ -26,7 +26,7 @@ processors:
    detectors: [env, system]
    timeout: 2s
  signozspanmetrics/delta:
-    metrics_exporter: clickhousemetricswrite
+    metrics_exporter: clickhousemetricswrite, signozclickhousemetrics
    metrics_flush_interval: 60s
    latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
    dimensions_cache_size: 100000
@@ -62,10 +62,12 @@ exporters:
    use_new_schema: true
  clickhousemetricswrite:
    endpoint: tcp://clickhouse:9000/signoz_metrics
+    disable_v2: true
    resource_to_telemetry_conversion:
      enabled: true
  clickhousemetricswrite/prometheus:
    endpoint: tcp://clickhouse:9000/signoz_metrics
+    disable_v2: true
  signozclickhousemetrics:
    dsn: tcp://clickhouse:9000/signoz_metrics
  clickhouselogsexporter:
--- a/deploy/install.sh
+++ b/deploy/install.sh
@@ -93,7 +93,7 @@ check_os() {
            ;;
        Red\ Hat*)
            desired_os=1
-            os="red hat"
+            os="rhel"
            package_manager="yum"
            ;;
        CentOS*)
--- a/docs/contributing/go/errors.md
+++ b/docs/contributing/go/errors.md
@@ -0,0 +1,103 @@
+# Errors
+
+SigNoz includes its own structured [errors](/pkg/errors/errors.go) package. It's built on top of Go's `error` interface, extending it to add additional context that helps provide more meaningful error messages throughout the application.
+
+## How to use it?
+
+To use the SigNoz structured errors package, use these functions instead of the standard library alternatives:
+
+```go
+// Instead of errors.New()
+errors.New(typ, code, message)
+
+// Instead of fmt.Errorf()
+errors.Newf(typ, code, message, args...)
+```
+
+### Typ
+The Typ (read as Type, defined as `typ`) is used to categorize errors across the codebase and is loosely coupled with HTTP/GRPC status codes. All predefined types can be found in [pkg/errors/type.go](/pkg/errors/type.go). For example:
+
+- `TypeInvalidInput` - Indicates invalid input was provided
+- `TypeNotFound` - Indicates a resource was not found
+
+By design, `typ` is unexported and cannot be declared outside of [errors](/pkg/errors/errors.go) package. This ensures that it is consistent across the codebase and is used in a way that is meaningful.
+
+### Code
+Codes are used to provide more granular categorization within types. For instance, a type of `TypeInvalidInput` might have codes like `CodeInvalidEmail` or `CodeInvalidPassword`.
+
+To create new error codes, use the `errors.MustNewCode` function:
+
+```go
+var (
+    CodeThingAlreadyExists = errors.MustNewCode("thing_already_exists")
+    CodeThingNotFound = errors.MustNewCode("thing_not_found")
+)
+```
+
+> 💡 **Note**: Error codes must match the regex `^[a-z_]+$` otherwise the code will panic.
+
+## Show me some examples
+
+### Using the error
+A basic example of using the error:
+
+```go
+var (
+    CodeThingAlreadyExists = errors.MustNewCode("thing_already_exists")
+)
+
+func CreateThing(id string) error {
+  t, err := thing.GetFromStore(id)
+  if err != nil {
+    if errors.As(err, errors.TypeNotFound) {
+        // thing was not found, create it
+        return thing.Create(id)
+    }
+
+    // something else went wrong, wrap the error with more context
+    return errors.Wrapf(err, errors.TypeInternal, errors.CodeUnknown, "failed to get thing from store")
+  }
+
+  return errors.Newf(errors.TypeAlreadyExists, CodeThingAlreadyExists, "thing with id %s already exists", id)
+}
+```
+
+### Changing the error
+Sometimes you may want to change the error while preserving the message:
+
+```go
+func GetUserSecurely(id string) (*User, error) {
+    user, err := repository.GetUser(id)
+    if err != nil {
+        if errors.Ast(err, errors.TypeNotFound) {
+            // Convert NotFound to Forbidden for security reasons
+            return nil, errors.New(errors.TypeForbidden, errors.CodeAccessDenied, "access denied to requested resource")
+        }
+        return nil, err
+    }
+    return user, nil
+}
+```
+
+## Why do we need this?
+
+In a large codebase like SigNoz, error handling is critical for maintaining reliability, debuggability, and a good user experience. We believe that it is the **responsibility of a function** to return **well-defined** errors that **accurately describe what went wrong**. With our structured error system:
+
+- Functions can create precise errors with appropriate additional context
+- Callers can make informed decisions based on the additional context
+- Error context is preserved and enhanced as it moves up the call stack
+
+The caller (which can be another function or a HTTP/gRPC handler or something else entirely), can then choose to use this error to take appropriate actions such as:
+
+- A function can branch into different paths based on the context
+- An HTTP/gRPC handler can derive the correct status code and message from the error and send it to the client
+- Logging systems can capture structured error information for better diagnostics
+
+Although there might be cases where this might seem too verbose, it makes the code more maintainable and consistent. A little verbose code is better than clever code that doesn't provide enough context.
+
+## What should I remember?
+
+- Think about error handling as you write your code, not as an afterthought.
+- Always use the [errors](/pkg/errors/errors.go) package instead of the standard library's `errors.New()` or `fmt.Errorf()`.
+- Always assign appropriate codes to errors when creating them instead of using the "catch all" error codes defined in [pkg/errors/code.go](/pkg/errors/code.go).
+- Use `errors.Wrapf()` to add context to errors while preserving the original when appropriate.
--- a/docs/contributing/go/readme.md
+++ b/docs/contributing/go/readme.md
@@ -0,0 +1,11 @@
+# Go
+
+This document provides an overview of contributing to the SigNoz backend written in Go. The SigNoz backend is built with Go, focusing on performance, maintainability, and developer experience. We strive for clean, idiomatic code that follows established Go practices while addressing the unique needs of an observability platform.
+
+We adhere to three primary style guides as our foundation:
+
+- [Effective Go](https://go.dev/doc/effective_go) - For writing idiomatic Go code
+- [Code Review Comments](https://go.dev/wiki/CodeReviewComments) - For understanding common comments in code reviews
+- [Google Style Guide](https://google.github.io/styleguide/go/) - Additional practices from Google
+
+We **recommend** (almost enforce) reviewing these guides before contributing to the codebase. They provide valuable insights into writing idiomatic Go code and will help you understand our approach to backend development. In addition, we have a few additional rules that make certain areas stricter than the above which can be found in area-specific files in this package.
--- a/docs/contributing/go/sql.md
+++ b/docs/contributing/go/sql.md
@@ -0,0 +1,94 @@
+# SQL
+SigNoz utilizes a relational database to store metadata including organization information, user data and other settings.
+
+## How to use it?
+
+The database interface is defined in [SQLStore](/pkg/sqlstore/sqlstore.go). SigNoz leverages the Bun ORM to interact with the underlying database. To access the database instance, use the `BunDBCtx` function. For operations that require transactions across multiple database operations, use the `RunInTxCtx` function. This function embeds a transaction in the context, which propagates through various functions in the callback.
+
+```go
+type Thing struct {
+	bun.BaseModel
+
+	ID            types.Identifiable  `bun:",embed"`
+	SomeColumn    string              `bun:"some_column"`
+	TimeAuditable types.TimeAuditable `bun:",embed"`
+	OrgID         string              `bun:"org_id"`
+}
+
+func GetThing(ctx context.Context, id string) (*Thing, error) {
+	thing := new(Thing)
+	err := sqlstore.
+        BunDBCtx(ctx).
+        NewSelect().
+        Model(thing).
+        Where("id = ?", id).
+        Scan(ctx)
+
+    return thing, err
+}
+
+func CreateThing(ctx context.Context, thing *Thing) error {
+	return sqlstore.
+        BunDBCtx(ctx).
+        NewInsert().
+        Model(thing).
+        Exec(ctx)
+}
+```
+
+> 💡 **Note**: Always use line breaks while working with SQL queries to enhance code readability.
+
+> 💡 **Note**: Always use the `new` function to create new instances of structs.
+
+## What are hooks?
+
+Hooks are user-defined functions that execute before and/or after specific database operations. These hooks are particularly useful for generating telemetry data such as logs, traces, and metrics, providing visibility into database interactions. Hooks are defined in the [SQLStoreHook](/pkg/sqlstore/sqlstore.go) interface.
+
+## How is the schema designed?
+
+SigNoz implements a star schema design with the organizations table as the central entity. All other tables link to the organizations table via foreign key constraints on the `org_id` column. This design ensures that every entity within the system is either directly or indirectly associated with an organization.
+
+```mermaid
+erDiagram
+    ORGANIZATIONS {
+        string id PK
+        timestamp created_at
+        timestamp updated_at
+    }
+    ENTITY_A {
+        string id PK
+        timestamp created_at
+        timestamp updated_at
+        string org_id FK
+    }
+    ENTITY_B {
+        string id PK
+        timestamp created_at
+        timestamp updated_at
+        string org_id FK
+    }
+    
+    ORGANIZATIONS ||--o{ ENTITY_A : contains
+    ORGANIZATIONS ||--o{ ENTITY_B : contains
+```
+
+> 💡 **Note**: There are rare exceptions to the above star schema design. Consult with the maintainers before deviating from the above design.
+
+All tables follow a consistent primary key pattern using a `id` column (referenced by the `types.Identifiable` struct) and include `created_at` and `updated_at` columns (referenced by the `types.TimeAuditable` struct) for audit purposes.
+
+## How to write migrations?
+
+For schema migrations, use the [SQLMigration](/pkg/sqlmigration/sqlmigration.go) interface and write the migration in the same package. When creating migrations, adhere to these guidelines:
+
+- Do not implement **`ON CASCADE` foreign key constraints**. Deletion operations should be handled explicitly in application logic rather than delegated to the database.
+- Do not **import types from the types package** in the `sqlmigration` package. Instead, define the required types within the migration package itself. This practice ensures migration stability as the core types evolve over time.
+- Do not implement **`Down` migrations**. As the codebase matures, we may introduce this capability, but for now, the `Down` function should remain empty.
+- Always write **idempotent** migrations. This means that if the migration is run multiple times, it should not cause an error.
+- A migration which is **dependent on the underlying dialect** (sqlite, postgres, etc) should be written as part of the [SQLDialect](/pkg/sqlstore/sqlstore.go) interface. The implementation needs to go in the dialect specific package of the respective database.
+
+## What should I remember?
+
+- Use `BunDBCtx` and `RunInTxCtx` to access the database instance and execute transactions respectively.
+- While designing new tables, ensure the consistency of `id`, `created_at`, `updated_at` and an `org_id` column with a foreign key constraint to the `organizations` table (unless the table serves as a transitive entity not directly associated with an organization but indirectly associated with one).
+- Implement deletion logic in the application rather than relying on cascading deletes in the database.
+- While writing migrations, adhere to the guidelines mentioned above.
--- a/ee/query-service/Dockerfile.integration
+++ b/ee/query-service/Dockerfile.integration
@@ -1,4 +1,4 @@
-FROM golang:1.22-bullseye
+FROM golang:1.23-bullseye

 ARG OS="linux"
 ARG TARGETARCH
--- a/ee/query-service/anomaly/daily.go
+++ b/ee/query-service/anomaly/daily.go
@@ -5,6 +5,7 @@ import (

 	querierV2 "github.com/SigNoz/signoz/pkg/query-service/app/querier/v2"
 	"github.com/SigNoz/signoz/pkg/query-service/app/queryBuilder"
+	"github.com/SigNoz/signoz/pkg/valuer"
 )

 type DailyProvider struct {
@@ -37,7 +38,7 @@ func NewDailyProvider(opts ...GenericProviderOption[*DailyProvider]) *DailyProvi
 	return dp
 }

-func (p *DailyProvider) GetAnomalies(ctx context.Context, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
+func (p *DailyProvider) GetAnomalies(ctx context.Context, orgID valuer.UUID, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
 	req.Seasonality = SeasonalityDaily
-	return p.getAnomalies(ctx, req)
+	return p.getAnomalies(ctx, orgID, req)
 }
--- a/ee/query-service/anomaly/hourly.go
+++ b/ee/query-service/anomaly/hourly.go
@@ -5,6 +5,7 @@ import (

 	querierV2 "github.com/SigNoz/signoz/pkg/query-service/app/querier/v2"
 	"github.com/SigNoz/signoz/pkg/query-service/app/queryBuilder"
+	"github.com/SigNoz/signoz/pkg/valuer"
 )

 type HourlyProvider struct {
@@ -37,7 +38,7 @@ func NewHourlyProvider(opts ...GenericProviderOption[*HourlyProvider]) *HourlyPr
 	return hp
 }

-func (p *HourlyProvider) GetAnomalies(ctx context.Context, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
+func (p *HourlyProvider) GetAnomalies(ctx context.Context, orgID valuer.UUID, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
 	req.Seasonality = SeasonalityHourly
-	return p.getAnomalies(ctx, req)
+	return p.getAnomalies(ctx, orgID, req)
 }
--- a/ee/query-service/anomaly/provider.go
+++ b/ee/query-service/anomaly/provider.go
@@ -2,8 +2,10 @@ package anomaly

 import (
 	"context"
+
+	"github.com/SigNoz/signoz/pkg/valuer"
 )

 type Provider interface {
-	GetAnomalies(ctx context.Context, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error)
+	GetAnomalies(ctx context.Context, orgID valuer.UUID, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error)
 }
--- a/ee/query-service/anomaly/seasonal.go
+++ b/ee/query-service/anomaly/seasonal.go
@@ -5,11 +5,12 @@ import (
 	"math"
 	"time"

-	"github.com/SigNoz/signoz/pkg/query-service/cache"
+	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 	"github.com/SigNoz/signoz/pkg/query-service/postprocess"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/labels"
+	"github.com/SigNoz/signoz/pkg/valuer"
 	"go.uber.org/zap"
 )

@@ -59,9 +60,9 @@ func (p *BaseSeasonalProvider) getQueryParams(req *GetAnomaliesRequest) *anomaly
 	return prepareAnomalyQueryParams(req.Params, req.Seasonality)
 }

-func (p *BaseSeasonalProvider) getResults(ctx context.Context, params *anomalyQueryParams) (*anomalyQueryResults, error) {
+func (p *BaseSeasonalProvider) getResults(ctx context.Context, orgID valuer.UUID, params *anomalyQueryParams) (*anomalyQueryResults, error) {
 	zap.L().Info("fetching results for current period", zap.Any("currentPeriodQuery", params.CurrentPeriodQuery))
-	currentPeriodResults, _, err := p.querierV2.QueryRange(ctx, params.CurrentPeriodQuery)
+	currentPeriodResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.CurrentPeriodQuery)
 	if err != nil {
 		return nil, err
 	}
@@ -72,7 +73,7 @@ func (p *BaseSeasonalProvider) getResults(ctx context.Context, params *anomalyQu
 	}

 	zap.L().Info("fetching results for past period", zap.Any("pastPeriodQuery", params.PastPeriodQuery))
-	pastPeriodResults, _, err := p.querierV2.QueryRange(ctx, params.PastPeriodQuery)
+	pastPeriodResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.PastPeriodQuery)
 	if err != nil {
 		return nil, err
 	}
@@ -83,7 +84,7 @@ func (p *BaseSeasonalProvider) getResults(ctx context.Context, params *anomalyQu
 	}

 	zap.L().Info("fetching results for current season", zap.Any("currentSeasonQuery", params.CurrentSeasonQuery))
-	currentSeasonResults, _, err := p.querierV2.QueryRange(ctx, params.CurrentSeasonQuery)
+	currentSeasonResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.CurrentSeasonQuery)
 	if err != nil {
 		return nil, err
 	}
@@ -94,7 +95,7 @@ func (p *BaseSeasonalProvider) getResults(ctx context.Context, params *anomalyQu
 	}

 	zap.L().Info("fetching results for past season", zap.Any("pastSeasonQuery", params.PastSeasonQuery))
-	pastSeasonResults, _, err := p.querierV2.QueryRange(ctx, params.PastSeasonQuery)
+	pastSeasonResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.PastSeasonQuery)
 	if err != nil {
 		return nil, err
 	}
@@ -105,7 +106,7 @@ func (p *BaseSeasonalProvider) getResults(ctx context.Context, params *anomalyQu
 	}

 	zap.L().Info("fetching results for past 2 season", zap.Any("past2SeasonQuery", params.Past2SeasonQuery))
-	past2SeasonResults, _, err := p.querierV2.QueryRange(ctx, params.Past2SeasonQuery)
+	past2SeasonResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.Past2SeasonQuery)
 	if err != nil {
 		return nil, err
 	}
@@ -116,7 +117,7 @@ func (p *BaseSeasonalProvider) getResults(ctx context.Context, params *anomalyQu
 	}

 	zap.L().Info("fetching results for past 3 season", zap.Any("past3SeasonQuery", params.Past3SeasonQuery))
-	past3SeasonResults, _, err := p.querierV2.QueryRange(ctx, params.Past3SeasonQuery)
+	past3SeasonResults, _, err := p.querierV2.QueryRange(ctx, orgID, params.Past3SeasonQuery)
 	if err != nil {
 		return nil, err
 	}
@@ -335,9 +336,9 @@ func (p *BaseSeasonalProvider) getAnomalyScores(
 	return anomalyScoreSeries
 }

-func (p *BaseSeasonalProvider) getAnomalies(ctx context.Context, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
+func (p *BaseSeasonalProvider) getAnomalies(ctx context.Context, orgID valuer.UUID, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
 	anomalyParams := p.getQueryParams(req)
-	anomalyQueryResults, err := p.getResults(ctx, anomalyParams)
+	anomalyQueryResults, err := p.getResults(ctx, orgID, anomalyParams)
 	if err != nil {
 		return nil, err
 	}
--- a/ee/query-service/anomaly/weekly.go
+++ b/ee/query-service/anomaly/weekly.go
@@ -5,6 +5,7 @@ import (

 	querierV2 "github.com/SigNoz/signoz/pkg/query-service/app/querier/v2"
 	"github.com/SigNoz/signoz/pkg/query-service/app/queryBuilder"
+	"github.com/SigNoz/signoz/pkg/valuer"
 )

 type WeeklyProvider struct {
@@ -36,7 +37,7 @@ func NewWeeklyProvider(opts ...GenericProviderOption[*WeeklyProvider]) *WeeklyPr
 	return wp
 }

-func (p *WeeklyProvider) GetAnomalies(ctx context.Context, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
+func (p *WeeklyProvider) GetAnomalies(ctx context.Context, orgID valuer.UUID, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
 	req.Seasonality = SeasonalityWeekly
-	return p.getAnomalies(ctx, req)
+	return p.getAnomalies(ctx, orgID, req)
 }
--- a/ee/query-service/app/api/api.go
+++ b/ee/query-service/app/api/api.go
@@ -13,11 +13,12 @@ import (
 	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/apis/fields"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
+	"github.com/SigNoz/signoz/pkg/modules/quickfilter"
+	quickfilterscore "github.com/SigNoz/signoz/pkg/modules/quickfilter/core"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
-	"github.com/SigNoz/signoz/pkg/query-service/cache"
 	baseint "github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	rules "github.com/SigNoz/signoz/pkg/query-service/rules"
@@ -38,7 +39,6 @@ type APIHandlerOptions struct {
 	IntegrationsController        *integrations.Controller
 	CloudIntegrationsController   *cloudintegrations.Controller
 	LogsParsingPipelineController *logparsingpipeline.LogParsingPipelineController
-	Cache                         cache.Cache
 	Gateway                       *httputil.ReverseProxy
 	GatewayUrl                    string
 	// Querier Influx Interval
@@ -55,6 +55,8 @@ type APIHandler struct {

 // NewAPIHandler returns an APIHandler
 func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler, error) {
+	quickfiltermodule := quickfilterscore.NewQuickFilters(quickfilterscore.NewStore(signoz.SQLStore))
+	quickFilter := quickfilter.NewAPI(quickfiltermodule)
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		PreferSpanMetrics:             opts.PreferSpanMetrics,
@@ -64,11 +66,12 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		IntegrationsController:        opts.IntegrationsController,
 		CloudIntegrationsController:   opts.CloudIntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
-		Cache:                         opts.Cache,
 		FluxInterval:                  opts.FluxInterval,
 		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
 		FieldsAPI:                     fields.NewAPI(signoz.TelemetryStore),
 		Signoz:                        signoz,
+		QuickFilters:                  quickFilter,
+		QuickFilterModule:             quickfiltermodule,
 	})

 	if err != nil {
--- a/ee/query-service/app/api/auth.go
+++ b/ee/query-service/app/api/auth.go
@@ -134,7 +134,7 @@ func (ah *APIHandler) registerUser(w http.ResponseWriter, r *http.Request) {
 			return
 		}

-		_, registerError := baseauth.Register(ctx, req, ah.Signoz.Alertmanager, ah.Signoz.Modules.Organization)
+		_, registerError := baseauth.Register(ctx, req, ah.Signoz.Alertmanager, ah.Signoz.Modules.Organization, ah.QuickFilterModule)
 		if !registerError.IsNil() {
 			RespondError(w, apierr, nil)
 			return
--- a/ee/query-service/app/api/dashboard.go
+++ b/ee/query-service/app/api/dashboard.go
@@ -41,8 +41,8 @@ func (ah *APIHandler) lockUnlockDashboard(w http.ResponseWriter, r *http.Request
 		return
 	}

-	dashboard, err := dashboards.GetDashboard(r.Context(), claims.OrgID, uuid)
-	if err != nil {
+	dashboard, apiErr := dashboards.GetDashboard(r.Context(), claims.OrgID, uuid)
+	if apiErr != nil {
 		render.Error(w, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to get dashboard"))
 		return
 	}
@@ -53,8 +53,8 @@ func (ah *APIHandler) lockUnlockDashboard(w http.ResponseWriter, r *http.Request
 	}

 	// Lock/Unlock the dashboard
-	err = dashboards.LockUnlockDashboard(r.Context(), claims.OrgID, uuid, lock)
-	if err != nil {
+	apiErr = dashboards.LockUnlockDashboard(r.Context(), claims.OrgID, uuid, lock)
+	if apiErr != nil {
 		render.Error(w, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to lock/unlock dashboard"))
 		return
 	}
--- a/ee/query-service/app/api/queryrange.go
+++ b/ee/query-service/app/api/queryrange.go
@@ -7,14 +7,27 @@ import (
 	"net/http"

 	"github.com/SigNoz/signoz/ee/query-service/anomaly"
+	"github.com/SigNoz/signoz/pkg/http/render"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/queryBuilder"
 	"github.com/SigNoz/signoz/pkg/query-service/model"
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
 	"go.uber.org/zap"
 )

 func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
+	claims, err := authtypes.ClaimsFromContext(r.Context())
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}

 	bodyBytes, _ := io.ReadAll(r.Body)
 	r.Body = io.NopCloser(bytes.NewBuffer(bodyBytes))
@@ -29,7 +42,7 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 	queryRangeParams.Version = "v4"

 	// add temporality for each metric
-	temporalityErr := aH.PopulateTemporality(r.Context(), queryRangeParams)
+	temporalityErr := aH.PopulateTemporality(r.Context(), orgID, queryRangeParams)
 	if temporalityErr != nil {
 		zap.L().Error("Error while adding temporality for metrics", zap.Error(temporalityErr))
 		RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: temporalityErr}, nil)
@@ -85,30 +98,30 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 		switch seasonality {
 		case anomaly.SeasonalityWeekly:
 			provider = anomaly.NewWeeklyProvider(
-				anomaly.WithCache[*anomaly.WeeklyProvider](aH.opts.Cache),
+				anomaly.WithCache[*anomaly.WeeklyProvider](aH.Signoz.Cache),
 				anomaly.WithKeyGenerator[*anomaly.WeeklyProvider](queryBuilder.NewKeyGenerator()),
 				anomaly.WithReader[*anomaly.WeeklyProvider](aH.opts.DataConnector),
 			)
 		case anomaly.SeasonalityDaily:
 			provider = anomaly.NewDailyProvider(
-				anomaly.WithCache[*anomaly.DailyProvider](aH.opts.Cache),
+				anomaly.WithCache[*anomaly.DailyProvider](aH.Signoz.Cache),
 				anomaly.WithKeyGenerator[*anomaly.DailyProvider](queryBuilder.NewKeyGenerator()),
 				anomaly.WithReader[*anomaly.DailyProvider](aH.opts.DataConnector),
 			)
 		case anomaly.SeasonalityHourly:
 			provider = anomaly.NewHourlyProvider(
-				anomaly.WithCache[*anomaly.HourlyProvider](aH.opts.Cache),
+				anomaly.WithCache[*anomaly.HourlyProvider](aH.Signoz.Cache),
 				anomaly.WithKeyGenerator[*anomaly.HourlyProvider](queryBuilder.NewKeyGenerator()),
 				anomaly.WithReader[*anomaly.HourlyProvider](aH.opts.DataConnector),
 			)
 		default:
 			provider = anomaly.NewDailyProvider(
-				anomaly.WithCache[*anomaly.DailyProvider](aH.opts.Cache),
+				anomaly.WithCache[*anomaly.DailyProvider](aH.Signoz.Cache),
 				anomaly.WithKeyGenerator[*anomaly.DailyProvider](queryBuilder.NewKeyGenerator()),
 				anomaly.WithReader[*anomaly.DailyProvider](aH.opts.DataConnector),
 			)
 		}
-		anomalies, err := provider.GetAnomalies(r.Context(), &anomaly.GetAnomaliesRequest{Params: queryRangeParams})
+		anomalies, err := provider.GetAnomalies(r.Context(), orgID, &anomaly.GetAnomaliesRequest{Params: queryRangeParams})
 		if err != nil {
 			RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: err}, nil)
 			return
--- a/ee/query-service/app/server.go
+++ b/ee/query-service/app/server.go
@@ -19,6 +19,7 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/integrations/gateway"
 	"github.com/SigNoz/signoz/ee/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
+	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	"github.com/SigNoz/signoz/pkg/prometheus"
 	"github.com/SigNoz/signoz/pkg/signoz"
@@ -41,7 +42,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/app/opamp"
 	opAmpModel "github.com/SigNoz/signoz/pkg/query-service/app/opamp/model"
-	"github.com/SigNoz/signoz/pkg/query-service/cache"
 	baseconst "github.com/SigNoz/signoz/pkg/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/query-service/healthcheck"
 	baseint "github.com/SigNoz/signoz/pkg/query-service/interfaces"
@@ -57,7 +57,6 @@ type ServerOptions struct {
 	HTTPHostPort               string
 	PrivateHostPort            string
 	PreferSpanMetrics          bool
-	CacheConfigPath            string
 	FluxInterval               string
 	FluxIntervalForTraceDetail string
 	Cluster                    string
@@ -134,19 +133,10 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		serverOptions.SigNoz.Cache,
 	)

-	var c cache.Cache
-	if serverOptions.CacheConfigPath != "" {
-		cacheOpts, err := cache.LoadFromYAMLCacheConfigFile(serverOptions.CacheConfigPath)
-		if err != nil {
-			return nil, err
-		}
-		c = cache.NewCache(cacheOpts)
-	}
-
 	rm, err := makeRulesManager(
 		serverOptions.SigNoz.SQLStore.SQLxDB(),
 		reader,
-		c,
+		serverOptions.SigNoz.Cache,
 		serverOptions.SigNoz.Alertmanager,
 		serverOptions.SigNoz.SQLStore,
 		serverOptions.SigNoz.TelemetryStore,
@@ -223,7 +213,6 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		IntegrationsController:        integrationsController,
 		CloudIntegrationsController:   cloudIntegrationsController,
 		LogsParsingPipelineController: logParsingPipelineController,
-		Cache:                         c,
 		FluxInterval:                  fluxInterval,
 		Gateway:                       gatewayProxy,
 		GatewayUrl:                    serverOptions.GatewayUrl,
@@ -261,9 +250,15 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		&opAmpModel.AllAgents, agentConfMgr,
 	)

-	errorList := reader.PreloadMetricsMetadata(context.Background())
-	for _, er := range errorList {
-		zap.L().Error("failed to preload metrics metadata", zap.Error(er))
+	orgs, err := apiHandler.Signoz.Modules.Organization.GetAll(context.Background())
+	if err != nil {
+		return nil, err
+	}
+	for _, org := range orgs {
+		errorList := reader.PreloadMetricsMetadata(context.Background(), org.ID)
+		for _, er := range errorList {
+			zap.L().Error("failed to preload metrics metadata", zap.Error(er))
+		}
 	}

 	return s, nil
--- a/ee/query-service/main.go
+++ b/ee/query-service/main.go
@@ -72,6 +72,7 @@ func main() {
 	flag.DurationVar(&dialTimeout, "dial-timeout", 5*time.Second, "(the maximum time to establish a connection.)")
 	// Deprecated
 	flag.StringVar(&ruleRepoURL, "rules.repo-url", baseconst.AlertHelpPage, "(host address used to build rule link in alert messages)")
+	// Deprecated
 	flag.StringVar(&cacheConfigPath, "experimental.cache-config", "", "(cache config to use)")
 	flag.StringVar(&fluxInterval, "flux-interval", "5m", "(the interval to exclude data from being cached to avoid incorrect cache for data in motion)")
 	flag.StringVar(&fluxIntervalForTraceDetail, "flux-interval-trace-detail", "2m", "(the interval to exclude data from being cached to avoid incorrect cache for trace data in motion)")
@@ -138,7 +139,6 @@ func main() {
 		HTTPHostPort:               baseconst.HTTPHostPort,
 		PreferSpanMetrics:          preferSpanMetrics,
 		PrivateHostPort:            baseconst.PrivateHostPort,
-		CacheConfigPath:            cacheConfigPath,
 		FluxInterval:               fluxInterval,
 		FluxIntervalForTraceDetail: fluxIntervalForTraceDetail,
 		Cluster:                    cluster,
--- a/ee/query-service/rules/anomaly.go
+++ b/ee/query-service/rules/anomaly.go
@@ -12,10 +12,11 @@ import (
 	"go.uber.org/zap"

 	"github.com/SigNoz/signoz/ee/query-service/anomaly"
-	"github.com/SigNoz/signoz/pkg/query-service/cache"
+	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/query-service/common"
 	"github.com/SigNoz/signoz/pkg/query-service/model"
 	ruletypes "github.com/SigNoz/signoz/pkg/types/ruletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"

 	querierV2 "github.com/SigNoz/signoz/pkg/query-service/app/querier/v2"
 	"github.com/SigNoz/signoz/pkg/query-service/app/queryBuilder"
@@ -53,6 +54,7 @@ type AnomalyRule struct {

 func NewAnomalyRule(
 	id string,
+	orgID valuer.UUID,
 	p *ruletypes.PostableRule,
 	reader interfaces.Reader,
 	cache cache.Cache,
@@ -66,7 +68,7 @@ func NewAnomalyRule(
 		p.RuleCondition.Target = &target
 	}

-	baseRule, err := baserules.NewBaseRule(id, p, reader, opts...)
+	baseRule, err := baserules.NewBaseRule(id, orgID, p, reader, opts...)
 	if err != nil {
 		return nil, err
 	}
@@ -158,18 +160,18 @@ func (r *AnomalyRule) GetSelectedQuery() string {
 	return r.Condition().GetSelectedQueryName()
 }

-func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, ts time.Time) (ruletypes.Vector, error) {
+func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, ts time.Time) (ruletypes.Vector, error) {

 	params, err := r.prepareQueryRange(ts)
 	if err != nil {
 		return nil, err
 	}
-	err = r.PopulateTemporality(ctx, params)
+	err = r.PopulateTemporality(ctx, orgID, params)
 	if err != nil {
 		return nil, fmt.Errorf("internal error while setting temporality")
 	}

-	anomalies, err := r.provider.GetAnomalies(ctx, &anomaly.GetAnomaliesRequest{
+	anomalies, err := r.provider.GetAnomalies(ctx, orgID, &anomaly.GetAnomaliesRequest{
 		Params:      params,
 		Seasonality: r.seasonality,
 	})
@@ -204,7 +206,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 	prevState := r.State()

 	valueFormatter := formatter.FromUnit(r.Unit())
-	res, err := r.buildAndRunQuery(ctx, ts)
+	res, err := r.buildAndRunQuery(ctx, r.OrgID(), ts)

 	if err != nil {
 		return nil, err
--- a/ee/query-service/rules/manager.go
+++ b/ee/query-service/rules/manager.go
@@ -9,6 +9,7 @@ import (
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/labels"
 	ruletypes "github.com/SigNoz/signoz/pkg/types/ruletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/google/uuid"
 	"go.uber.org/zap"
 )
@@ -23,6 +24,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		// create a threshold rule
 		tr, err := baserules.NewThresholdRule(
 			ruleId,
+			opts.OrgID,
 			opts.Rule,
 			opts.Reader,
 			baserules.WithEvalDelay(opts.ManagerOpts.EvalDelay),
@@ -43,6 +45,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		// create promql rule
 		pr, err := baserules.NewPromRule(
 			ruleId,
+			opts.OrgID,
 			opts.Rule,
 			opts.Logger,
 			opts.Reader,
@@ -63,6 +66,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		// create anomaly rule
 		ar, err := NewAnomalyRule(
 			ruleId,
+			opts.OrgID,
 			opts.Rule,
 			opts.Reader,
 			opts.Cache,
@@ -119,6 +123,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 		// create a threshold rule
 		rule, err = baserules.NewThresholdRule(
 			alertname,
+			opts.OrgID,
 			parsedRule,
 			opts.Reader,
 			baserules.WithSendAlways(),
@@ -127,7 +132,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 		)

 		if err != nil {
-			zap.L().Error("failed to prepare a new threshold rule for test", zap.String("name", rule.Name()), zap.Error(err))
+			zap.L().Error("failed to prepare a new threshold rule for test", zap.String("name", alertname), zap.Error(err))
 			return 0, basemodel.BadRequest(err)
 		}

@@ -136,6 +141,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 		// create promql rule
 		rule, err = baserules.NewPromRule(
 			alertname,
+			opts.OrgID,
 			parsedRule,
 			opts.Logger,
 			opts.Reader,
@@ -146,13 +152,14 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 		)

 		if err != nil {
-			zap.L().Error("failed to prepare a new promql rule for test", zap.String("name", rule.Name()), zap.Error(err))
+			zap.L().Error("failed to prepare a new promql rule for test", zap.String("name", alertname), zap.Error(err))
 			return 0, basemodel.BadRequest(err)
 		}
 	} else if parsedRule.RuleType == ruletypes.RuleTypeAnomaly {
 		// create anomaly rule
 		rule, err = NewAnomalyRule(
 			alertname,
+			opts.OrgID,
 			parsedRule,
 			opts.Reader,
 			opts.Cache,
@@ -161,7 +168,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			baserules.WithSQLStore(opts.SQLStore),
 		)
 		if err != nil {
-			zap.L().Error("failed to prepare a new anomaly rule for test", zap.String("name", rule.Name()), zap.Error(err))
+			zap.L().Error("failed to prepare a new anomaly rule for test", zap.String("name", alertname), zap.Error(err))
 			return 0, basemodel.BadRequest(err)
 		}
 	} else {
@@ -187,7 +194,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap

 // newTask returns an appropriate group for
 // rule type
-func newTask(taskType baserules.TaskType, name string, frequency time.Duration, rules []baserules.Rule, opts *baserules.ManagerOptions, notify baserules.NotifyFunc, maintenanceStore ruletypes.MaintenanceStore, orgID string) baserules.Task {
+func newTask(taskType baserules.TaskType, name string, frequency time.Duration, rules []baserules.Rule, opts *baserules.ManagerOptions, notify baserules.NotifyFunc, maintenanceStore ruletypes.MaintenanceStore, orgID valuer.UUID) baserules.Task {
 	if taskType == baserules.TaskTypeCh {
 		return baserules.NewRuleTask(name, "", frequency, rules, opts, notify, maintenanceStore, orgID)
 	}
--- a/ee/sqlstore/postgressqlstore/provider.go
+++ b/ee/sqlstore/postgressqlstore/provider.go
@@ -106,3 +106,7 @@ func (provider *provider) WrapAlreadyExistsErrf(err error, code errors.Code, for

 	return err
 }
+
+func (dialect *dialect) ToggleForeignKeyConstraint(ctx context.Context, bun *bun.DB, enable bool) error {
+	return nil
+}
--- a/frontend/.prettierignore
+++ b/frontend/.prettierignore
@@ -1,6 +1,10 @@
 # Ignore artifacts:
 build
 coverage
+public/

 # Ignore all MD files:
-**/*.md
+**/*.md
+
+# Ignore all JSON files:
+**/*.json
--- a/frontend/example.env
+++ b/frontend/example.env
@@ -3,5 +3,4 @@ BUNDLE_ANALYSER="true"
 FRONTEND_API_ENDPOINT="http://localhost:8080/"
 INTERCOM_APP_ID="intercom-app-id"

-PLAYWRIGHT_TEST_BASE_URL="http://localhost:8080"
 CI="1"
--- a/frontend/jest.config.ts
+++ b/frontend/jest.config.ts
@@ -30,11 +30,6 @@ const config: Config.InitialOptions = {
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
 	moduleDirectories: ['node_modules', 'src'],
 	testEnvironment: 'jest-environment-jsdom',
-	testEnvironmentOptions: {
-		'jest-playwright': {
-			browsers: ['chromium', 'firefox', 'webkit'],
-		},
-	},
 	coverageThreshold: {
 		global: {
 			statements: 80,
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,10 +15,6 @@
 		"jest:coverage": "jest --coverage",
 		"jest:watch": "jest --watch",
 		"postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)",
-		"playwright": "NODE_ENV=testing playwright test --config=./playwright.config.ts",
-		"playwright:local:debug": "PWDEBUG=console yarn playwright --headed --browser=chromium",
-		"playwright:codegen:local": "playwright codegen http://localhost:3301",
-		"playwright:codegen:local:auth": "yarn playwright:codegen:local --load-storage=tests/auth.json",
 		"husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
 		"commitlint": "commitlint --edit $1",
 		"test": "jest",
@@ -82,6 +78,7 @@
 		"history": "4.10.1",
 		"html-webpack-plugin": "5.5.0",
 		"http-proxy-middleware": "3.0.3",
+		"http-status-codes": "2.3.0",
 		"i18next": "^21.6.12",
 		"i18next-browser-languagedetector": "^6.1.3",
 		"i18next-http-backend": "^1.3.2",
@@ -90,7 +87,7 @@
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
-		"lucide-react": "0.427.0",
+		"lucide-react": "0.498.0",
 		"mini-css-extract-plugin": "2.4.5",
 		"motion": "12.4.13",
 		"overlayscrollbars": "^2.8.1",
@@ -163,7 +160,6 @@
 		"@commitlint/config-conventional": "^16.2.4",
 		"@faker-js/faker": "9.3.0",
 		"@jest/globals": "^27.5.1",
-		"@playwright/test": "^1.22.0",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "13.4.0",
 		"@testing-library/user-event": "14.4.3",
@@ -257,6 +253,7 @@
 		"http-proxy-middleware": "3.0.3",
 		"cross-spawn": "7.0.5",
 		"cookie": "^0.7.1",
-		"serialize-javascript": "6.0.2"
+		"serialize-javascript": "6.0.2",
+		"prismjs": "1.30.0"
 	}
 }
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -1,23 +0,0 @@
-import { PlaywrightTestConfig } from '@playwright/test';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const config: PlaywrightTestConfig = {
-	forbidOnly: !!process.env.CI,
-	retries: process.env.CI ? 2 : 0,
-	preserveOutput: 'always',
-	name: 'Signoz',
-	testDir: './tests',
-	use: {
-		trace: 'retain-on-failure',
-		baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3301',
-	},
-	updateSnapshots: 'all',
-	fullyParallel: !!process.env.CI,
-	quiet: false,
-	testMatch: ['**/*.spec.ts'],
-	reporter: process.env.CI ? 'github' : 'list',
-};
-
-export default config;
--- a/frontend/public/Icons/empty-funnel-icon.svg
+++ b/frontend/public/Icons/empty-funnel-icon.svg
--- a/frontend/public/Icons/funnel-add.svg
+++ b/frontend/public/Icons/funnel-add.svg
@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke="#C0C1C3" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="m12.192 3.18-1.167 2.33-.583 1.165M7.31 12.74a.583.583 0 0 1-.835-.24L1.808 3.179"/><path d="M7 1.167c2.9 0 5.25.783 5.25 1.75 0 .966-2.35 1.75-5.25 1.75s-5.25-.784-5.25-1.75c0-.967 2.35-1.75 5.25-1.75ZM8.75 10.5h3.5M10.5 12.25v-3.5"/></g></svg>
--- a/frontend/public/Icons/solid-info-circle.svg
+++ b/frontend/public/Icons/solid-info-circle.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14.666A6.667 6.667 0 1 0 8 1.333a6.667 6.667 0 0 0 0 13.333Z" fill="#C0C1C3" stroke="#C0C1C3" stroke-width="2"/><path d="M8 11.333v-4H6.333M8 4.667h.007" stroke="#121317" stroke-width="1.333"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/frontend/public/Logos/datadog.svg
+++ b/frontend/public/Logos/datadog.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800.5 907.77" style="enable-background:new 0 0 800.5 907.77;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M303.36,238.61c31.36-21.37,71.76-12.97,65-6.53c-12.89,12.28,4.26,8.65,6.11,31.31
+	c1.36,16.69-4.09,25.88-8.78,31.11c-9.79,1.28-21.69,3.67-36.02,8.33c-8.48,2.76-15.85,5.82-22.31,8.9
+	c-1.7-1.11-3.55-2.47-5.74-4.36C279.5,288.19,280.24,254.37,303.36,238.61 M490.68,370.72c5.69-4.41,31.55-12.72,55.49-15.55
+	c12.57-1.48,30.49-2.34,34.31-0.2c7.59,4.19,7.59,17.16,2.39,29.14c-7.57,17.4-18.27,36.63-30.39,38.21
+	c-19.77,2.61-38.46-8.09-59.8-24.03C485.06,392.56,480.38,378.68,490.68,370.72 M526.75,201.27c29.19,13.58,25.37,39.42,26.18,54.6
+	c0.22,4.36,0.15,7.3-0.22,9.32c-4.04-2.19-10.43-3.8-20.56-3.35c-2.96,0.12-5.84,0.47-8.63,0.91c-10.77-5.77-17.21-17.06-23.1-29.06
+	c-0.54-1.11-0.96-2.1-1.36-3.06c-0.17-0.44-0.35-0.91-0.52-1.31c-0.07-0.22-0.12-0.39-0.2-0.59c-3.23-10.25-1.06-12.3,0.3-15.46
+	c1.41-3.23,6.68-5.89-1.11-8.58c-0.67-0.25-1.5-0.39-2.44-0.57C500.25,197.72,515.7,196.17,526.75,201.27 M367.62,510.22
+	c-31.45-20.19-63.99-49.15-78.22-65.18c-2.39-1.8-2-9.79-2-9.79c12.84,9.98,66.11,48.04,122.44,65.42
+	c19.87,6.14,50.36,8.46,76.81-6.53c20.21-11.46,44.54-31.43,59.06-52.01l2.66,4.61c-0.1,3.06-6.78,17.97-10.18,23.96
+	c6.14,3.53,10.72,4.49,17.55,6.36l46.64-7.27c16.74-27.04,28.74-70.65,15.95-112.16c-7.3-23.81-45.36-71.22-48.09-73.83
+	c-9.56-9.19,1.6-44.69-17.35-83.42C532.86,159.41,480.67,116.69,458,98.1c6.68,4.88,47.82,21.47,67,44.62
+	c1.8-2.39,2.54-14.82,4.19-17.97c-16.47-21.57-17.75-59.95-17.75-70.21c0-18.81-9.56-40.13-9.56-40.13s16.47,13.04,20.73,35.5
+	c5.03,26.6,15.75,47.55,29.93,65.28c26.84,33.43,51.08,50.58,63.33,38.23C630.53,138.58,601,72.2,563.28,35.15
+	C519.25-8.09,507.74-2.52,481.91,6.7c-20.61,7.35-31.75,65.87-85.47,64.71c-9.1-1.06-32.54-1.63-44.13-1.53
+	c6.04-8.43,11.22-14.94,11.22-14.94s-18.02,7.25-33.38,16.44l-1.18-1.77c5.18-10.92,10.75-17.82,10.75-17.82s-14.4,8.65-27.54,19.01
+	c2.39-13.02,11.44-21.27,11.44-21.27s-18.19,3.28-41.36,28.77c-26.33,7.2-32.66,11.93-53.64,21.22
+	c-34.12-7.44-50.21-19.45-65.55-41.56c-11.68-16.89-32.47-19.45-53.71-10.72c-30.97,12.8-70.14,30.33-70.14,30.33
+	s12.77-0.52,26.08,0.05c-18.22,6.9-35.72,16.39-35.72,16.39s8.53-0.3,19.06-0.12c-7.27,6.04-11.29,8.92-18.22,13.51
+	c-16.66,12.1-30.17,26.08-30.17,26.08s11.31-5.15,21.47-8.04c-7.1,16.27-21.18,28.25-18.59,48.17
+	c2.49,18.19,24.82,55.66,53.64,78.66c2.49,2,41.86,38.43,71.56,23.47c29.68-14.94,41.39-28.25,46.27-48.66
+	c5.74-23.44,2.47-41.17-9.79-92.05c-4.04-16.79-14.57-51.37-19.65-67.91l1.13-0.81c9.71,20.49,34.56,74.5,44.57,110.78
+	c15.63,56.57,10.75,85.27,3.6,95.79c-21.57,31.73-76.84,35.92-101.98,18.34c-3.85,60.91,9.76,87.73,14.37,101.24
+	c-2.29,15.53,7.77,44.37,7.77,44.37s1.13-13.11,5.74-20.02c1.23,15.41,9,33.72,9,33.72s-0.47-11.31,3.06-21.08
+	c4.98,8.43,8.63,10.43,13.34,16.76c4.71,16.47,14.15,28.5,14.15,28.5s-1.53-8.83-0.69-18.02c23.05,22.14,27.02,54.45,29.31,79.28
+	c6.46,68.26-107.63,122.54-129.74,165.24c-16.76,25.29-26.8,65.3,1.58,88.89c68.6,56.97,42.25,72.65,76.59,97.69
+	c47.11,34.34,106.05,18.96,126.11-8.97c27.93-38.92,20.76-75.63,10.38-109.97c-8.11-26.85-30.15-71.46-57.41-88.72
+	c-27.86-17.65-54.95-20.95-77.9-18.59l2.12-2.44c33.01-6.56,67.52-2.96,92.49,13.14c28.35,18.22,54.28,49.47,67.84,97.37
+	c15.38-2.19,17.55-3.18,31.63-5.18l-31.7-246.76L367.62,510.22z M385.94,819.52l-3.65-34.22l71.29-108.74l80.93,23.64l69.59-116.23
+	L687.52,639l63.38-132.92l22.53,242.07L385.94,819.52z M774.27,456.51l-254.72,46.17c-6.31,8.13-21.91,22.41-29.41,26.13
+	c-32.17,16.2-53.91,11.51-72.7,6.63c-12.08-3.06-19.08-4.78-29.11-9.29l-62.17,8.53l37.74,314.87l436.35-78.66L774.27,456.51z"/>
+</svg>
--- a/frontend/public/Logos/grafana.svg
+++ b/frontend/public/Logos/grafana.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 142.5 145.6" style="enable-background:new 0 0 142.5 145.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#565656;}
+	.st1{fill:url(#SVGID_1_);}
+</style>
+<g>
+	<path class="st0" d="M28.7,131.5c-0.3,7.9-6.6,14.1-14.4,14.1C6.1,145.6,0,139,0,130.9s6.6-14.7,14.7-14.7c3.6,0,7.2,1.6,10.2,4.4
+		l-2.3,2.9c-2.3-2-5.1-3.4-7.9-3.4c-5.9,0-10.8,4.8-10.8,10.8c0,6.1,4.6,10.8,10.4,10.8c5.2,0,9.3-3.8,10.2-8.8H12.6v-3.5h16.1
+		V131.5z"/>
+	<path class="st0" d="M42.3,129.5h-2.2c-2.4,0-4.4,2-4.4,4.4v11.4h-3.9v-19.6H35v1.6c1.1-1.1,2.7-1.6,4.6-1.6h4.2L42.3,129.5z"/>
+	<path class="st0" d="M63.7,145.3h-3.4v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
+		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4V145.3z M59.7,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
+		C57.1,141.2,59.1,139.3,59.7,137z"/>
+	<path class="st0" d="M71.5,124.7v1.1h6.2v3.4h-6.2v16.1h-3.8v-20.5c0-4.3,3.1-6.8,7-6.8h4.7l-1.6,3.7h-3.1
+		C72.9,121.6,71.5,123,71.5,124.7z"/>
+	<path class="st0" d="M98.5,145.3h-3.3v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
+		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4v19.6H98.5z M94.5,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
+		C92,141.2,93.9,139.3,94.5,137z"/>
+	<path class="st0" d="M119.4,133.8v11.5h-3.9v-11.6c0-2.4-2-4.4-4.4-4.4c-2.5,0-4.4,2-4.4,4.4v11.6h-3.9v-19.6h3.2v1.7
+		c1.4-1.3,3.3-2,5.2-2C115.8,125.5,119.4,129.2,119.4,133.8z"/>
+	<path class="st0" d="M142.4,145.3h-3.3v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
+		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4v19.6H142.4z M138.4,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
+		C135.9,141.2,137.8,139.3,138.4,137z"/>
+</g>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="71.25" y1="10.4893" x2="71.25" y2="113.3415" gradientTransform="matrix(1 0 0 -1 0 148.6)">
+	<stop  offset="0" style="stop-color:#FCEE1F"/>
+	<stop  offset="1" style="stop-color:#F15B2A"/>
+</linearGradient>
+<path class="st1" d="M122.9,49.9c-0.2-1.9-0.5-4.1-1.1-6.5c-0.6-2.4-1.6-5-2.9-7.8c-1.4-2.7-3.1-5.6-5.4-8.3
+	c-0.9-1.1-1.9-2.1-2.9-3.2c1.6-6.3-1.9-11.8-1.9-11.8c-6.1-0.4-9.9,1.9-11.3,2.9c-0.2-0.1-0.5-0.2-0.7-0.3c-1-0.4-2.1-0.8-3.2-1.2
+	c-1.1-0.3-2.2-0.7-3.3-0.9c-1.1-0.3-2.3-0.5-3.5-0.7c-0.2,0-0.4-0.1-0.6-0.1C83.5,3.6,75.9,0,75.9,0c-8.7,5.6-10.4,13.1-10.4,13.1
+	s0,0.2-0.1,0.4c-0.5,0.1-0.9,0.3-1.4,0.4c-0.6,0.2-1.3,0.4-1.9,0.7c-0.6,0.3-1.3,0.5-1.9,0.8c-1.3,0.6-2.5,1.2-3.8,1.9
+	c-1.2,0.7-2.4,1.4-3.5,2.2c-0.2-0.1-0.3-0.2-0.3-0.2c-11.7-4.5-22.1,0.9-22.1,0.9c-0.9,12.5,4.7,20.3,5.8,21.7
+	c-0.3,0.8-0.5,1.5-0.8,2.3c-0.9,2.8-1.5,5.7-1.9,8.7c-0.1,0.4-0.1,0.9-0.2,1.3c-10.8,5.3-14,16.3-14,16.3c9,10.4,19.6,11,19.6,11
+	l0,0c1.3,2.4,2.9,4.7,4.6,6.8c0.7,0.9,1.5,1.7,2.3,2.6c-3.3,9.4,0.5,17.3,0.5,17.3c10.1,0.4,16.7-4.4,18.1-5.5c1,0.3,2,0.6,3,0.9
+	c3.1,0.8,6.3,1.3,9.4,1.4c0.8,0,1.6,0,2.4,0h0.4H80h0.5H81l0,0c4.7,6.8,13.1,7.7,13.1,7.7c5.9-6.3,6.3-12.4,6.3-13.8l0,0
+	c0,0,0,0,0-0.1s0-0.2,0-0.2l0,0c0-0.1,0-0.2,0-0.3c1.2-0.9,2.4-1.8,3.6-2.8c2.4-2.1,4.4-4.6,6.2-7.2c0.2-0.2,0.3-0.5,0.5-0.7
+	c6.7,0.4,11.4-4.2,11.4-4.2c-1.1-7-5.1-10.4-5.9-11l0,0c0,0,0,0-0.1-0.1l-0.1-0.1l0,0l-0.1-0.1c0-0.4,0.1-0.8,0.1-1.3
+	c0.1-0.8,0.1-1.5,0.1-2.3v-0.6v-0.3v-0.1c0-0.2,0-0.1,0-0.2v-0.5v-0.6c0-0.2,0-0.4,0-0.6s0-0.4-0.1-0.6l-0.1-0.6l-0.1-0.6
+	c-0.1-0.8-0.3-1.5-0.4-2.3c-0.7-3-1.9-5.9-3.4-8.4c-1.6-2.6-3.5-4.8-5.7-6.8c-2.2-1.9-4.6-3.5-7.2-4.6c-2.6-1.2-5.2-1.9-7.9-2.2
+	c-1.3-0.2-2.7-0.2-4-0.2h-0.5h-0.1h-0.2h-0.2h-0.5c-0.2,0-0.4,0-0.5,0c-0.7,0.1-1.4,0.2-2,0.3c-2.7,0.5-5.2,1.5-7.4,2.8
+	c-2.2,1.3-4.1,3-5.7,4.9s-2.8,3.9-3.6,6.1c-0.8,2.1-1.3,4.4-1.4,6.5c0,0.5,0,1.1,0,1.6c0,0.1,0,0.3,0,0.4v0.4c0,0.3,0,0.5,0.1,0.8
+	c0.1,1.1,0.3,2.1,0.6,3.1c0.6,2,1.5,3.8,2.7,5.4s2.5,2.8,4,3.8s3,1.7,4.6,2.2c1.6,0.5,3.1,0.7,4.5,0.6c0.2,0,0.4,0,0.5,0
+	c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0c0.2,0,0.3,0,0.5,0h0.1h0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4-0.1,0.5-0.1c0.2,0,0.3-0.1,0.5-0.1
+	c0.3-0.1,0.7-0.2,1-0.3c0.6-0.2,1.2-0.5,1.8-0.7c0.6-0.3,1.1-0.6,1.5-0.9c0.1-0.1,0.3-0.2,0.4-0.3c0.5-0.4,0.6-1.1,0.2-1.6
+	c-0.4-0.4-1-0.5-1.5-0.3C88,74,87.9,74,87.7,74.1c-0.4,0.2-0.9,0.4-1.3,0.5c-0.5,0.1-1,0.3-1.5,0.4c-0.3,0-0.5,0.1-0.8,0.1
+	c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3,0-0.4,0s-0.3,0-0.4,0c-0.2,0-0.3,0-0.5,0c0,0-0.1,0,0,0h-0.1h-0.1c-0.1,0-0.1,0-0.2,0
+	s-0.3,0-0.4-0.1c-1.1-0.2-2.3-0.5-3.4-1c-1.1-0.5-2.2-1.2-3.1-2.1c-1-0.9-1.8-1.9-2.5-3.1c-0.7-1.2-1.1-2.5-1.3-3.8
+	c-0.1-0.7-0.2-1.4-0.1-2.1c0-0.2,0-0.4,0-0.6c0,0.1,0,0,0,0v-0.1v-0.1c0-0.1,0-0.2,0-0.3c0-0.4,0.1-0.7,0.2-1.1c0.5-3,2-5.9,4.3-8.1
+	c0.6-0.6,1.2-1.1,1.9-1.5c0.7-0.5,1.4-0.9,2.1-1.2c0.7-0.3,1.5-0.6,2.3-0.8s1.6-0.4,2.4-0.4c0.4,0,0.8-0.1,1.2-0.1
+	c0.1,0,0.2,0,0.3,0h0.3h0.2c0.1,0,0,0,0,0h0.1h0.3c0.9,0.1,1.8,0.2,2.6,0.4c1.7,0.4,3.4,1,5,1.9c3.2,1.8,5.9,4.5,7.5,7.8
+	c0.8,1.6,1.4,3.4,1.7,5.3c0.1,0.5,0.1,0.9,0.2,1.4v0.3V66c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3v0.3v0.3c0,0.2,0,0.6,0,0.8
+	c0,0.5-0.1,1-0.1,1.5c-0.1,0.5-0.1,1-0.2,1.5s-0.2,1-0.3,1.5c-0.2,1-0.6,1.9-0.9,2.9c-0.7,1.9-1.7,3.7-2.9,5.3
+	c-2.4,3.3-5.7,6-9.4,7.7c-1.9,0.8-3.8,1.5-5.8,1.8c-1,0.2-2,0.3-3,0.3H81h-0.2h-0.3H80h-0.3c0.1,0,0,0,0,0h-0.1
+	c-0.5,0-1.1,0-1.6-0.1c-2.2-0.2-4.3-0.6-6.4-1.2c-2.1-0.6-4.1-1.4-6-2.4c-3.8-2-7.2-4.9-9.9-8.2c-1.3-1.7-2.5-3.5-3.5-5.4
+	s-1.7-3.9-2.3-5.9c-0.6-2-0.9-4.1-1-6.2v-0.4v-0.1v-0.1v-0.2V60v-0.1v-0.1v-0.2v-0.5V59l0,0v-0.2c0-0.3,0-0.5,0-0.8
+	c0-1,0.1-2.1,0.3-3.2c0.1-1.1,0.3-2.1,0.5-3.2c0.2-1.1,0.5-2.1,0.8-3.2c0.6-2.1,1.3-4.1,2.2-6c1.8-3.8,4.1-7.2,6.8-9.9
+	c0.7-0.7,1.4-1.3,2.2-1.9c0.3-0.3,1-0.9,1.8-1.4c0.8-0.5,1.6-1,2.5-1.4c0.4-0.2,0.8-0.4,1.3-0.6c0.2-0.1,0.4-0.2,0.7-0.3
+	c0.2-0.1,0.4-0.2,0.7-0.3c0.9-0.4,1.8-0.7,2.7-1c0.2-0.1,0.5-0.1,0.7-0.2c0.2-0.1,0.5-0.1,0.7-0.2c0.5-0.1,0.9-0.2,1.4-0.4
+	c0.2-0.1,0.5-0.1,0.7-0.2c0.2,0,0.5-0.1,0.7-0.1c0.2,0,0.5-0.1,0.7-0.1l0.4-0.1l0.4-0.1c0.2,0,0.5-0.1,0.7-0.1
+	c0.3,0,0.5-0.1,0.8-0.1c0.2,0,0.6-0.1,0.8-0.1c0.2,0,0.3,0,0.5-0.1h0.3h0.2h0.2c0.3,0,0.5,0,0.8-0.1h0.4c0,0,0.1,0,0,0h0.1h0.2
+	c0.2,0,0.5,0,0.7,0c0.9,0,1.8,0,2.7,0c1.8,0.1,3.6,0.3,5.3,0.6c3.4,0.6,6.7,1.7,9.6,3.2c2.9,1.4,5.6,3.2,7.8,5.1
+	c0.1,0.1,0.3,0.2,0.4,0.4c0.1,0.1,0.3,0.2,0.4,0.4c0.3,0.2,0.5,0.5,0.8,0.7c0.3,0.2,0.5,0.5,0.8,0.7c0.2,0.3,0.5,0.5,0.7,0.8
+	c1,1,1.9,2.1,2.7,3.1c1.6,2.1,2.9,4.2,3.9,6.2c0.1,0.1,0.1,0.2,0.2,0.4c0.1,0.1,0.1,0.2,0.2,0.4s0.2,0.5,0.4,0.7
+	c0.1,0.2,0.2,0.5,0.3,0.7c0.1,0.2,0.2,0.5,0.3,0.7c0.4,0.9,0.7,1.8,1,2.7c0.5,1.4,0.8,2.6,1.1,3.6c0.1,0.4,0.5,0.7,0.9,0.7
+	c0.5,0,0.8-0.4,0.8-0.9C123,52.7,123,51.4,122.9,49.9z"/>
+</svg>
--- a/frontend/public/Logos/temporal.svg
+++ b/frontend/public/Logos/temporal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="none" viewBox="0 0 192 192"><rect width="192" height="192" fill="url(#paint0_linear_1452_5317)" rx="24"/><path fill="#F2F2F2" d="M123.34 68.6596C119.655 41.0484 110.327 18 96 18C81.6731 18 72.3454 41.0484 68.6596 68.6596C41.0484 72.3454 18 81.6731 18 96C18 110.327 41.0525 119.655 68.6596 123.34C72.3454 150.948 81.6731 174 96 174C110.327 174 119.655 150.948 123.34 123.34C150.952 119.655 174 110.327 174 96C174 81.6731 150.948 72.3454 123.34 68.6596ZM67.7583 115.298C41.3151 111.479 25.893 102.737 25.893 96C25.893 89.2629 41.3151 80.5212 67.7583 76.7021C67.1764 83.0674 66.8733 89.566 66.8733 96C66.8733 102.434 67.1764 108.937 67.7583 115.298ZM96 25.893C102.737 25.893 111.479 41.3151 115.298 67.7583C108.937 67.1764 102.434 66.8733 96 66.8733C89.566 66.8733 83.0633 67.1764 76.7021 67.7583C80.5212 41.3151 89.2629 25.893 96 25.893ZM124.242 115.298C122.94 115.488 117.602 116.114 116.252 116.248C116.118 117.602 115.488 122.936 115.302 124.238C111.483 150.681 102.741 166.103 96.0041 166.103C89.267 166.103 80.5253 150.681 76.7061 124.238C76.5202 122.936 75.8898 117.598 75.7564 116.248C75.1421 109.979 74.7703 103.246 74.7703 96C74.7703 88.7537 75.1421 82.0206 75.7564 75.7483C82.0247 75.134 88.7577 74.7622 96.0041 74.7622C103.25 74.7622 109.983 75.134 116.252 75.7483C117.606 75.8817 122.94 76.5121 124.242 76.698C150.685 80.5172 166.111 89.2629 166.111 95.996C166.111 102.729 150.685 111.479 124.242 115.298Z"/><defs><linearGradient id="paint0_linear_1452_5317" x1="183" x2="0" y1="192" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#444CE7"/><stop offset="1" stop-color="#B664FF"/></linearGradient></defs></svg>
--- a/frontend/scripts/typecheck-staged.sh
+++ b/frontend/scripts/typecheck-staged.sh
@@ -9,7 +9,7 @@ done
 # create temporary tsconfig which includes only passed files
 str="{
  \"extends\": \"./tsconfig.json\",
-  \"include\": [ \"src/typings/**/*.ts\",\"src/**/*.d.ts\", \"./babel.config.js\", \"./jest.config.ts\", \"./.eslintrc.js\",\"./__mocks__\",\"./conf/default.conf\",\"./public\",\"./tests\",\"./playwright.config.ts\",\"./commitlint.config.ts\",\"./webpack.config.js\",\"./webpack.config.prod.js\",\"./jest.setup.ts\",\"./**/*.d.ts\",$files]
+  \"include\": [ \"src/typings/**/*.ts\",\"src/**/*.d.ts\", \"./babel.config.js\", \"./jest.config.ts\", \"./.eslintrc.js\",\"./__mocks__\",\"./public\",\"./tests\",\"./commitlint.config.ts\",\"./webpack.config.js\",\"./webpack.config.prod.js\",\"./jest.setup.ts\",\"./**/*.d.ts\",$files]
 }"
 echo $str > tsconfig.tmp

--- a/frontend/src/AppRoutes/index.tsx
+++ b/frontend/src/AppRoutes/index.tsx
@@ -60,6 +60,8 @@ function App(): JSX.Element {

 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();

+	const [isSentryInitialized, setIsSentryInitialized] = useState(false);
+
 	const enableAnalytics = useCallback(
 		(user: IUser): void => {
 			// wait for the required data to be loaded before doing init for anything!
@@ -293,25 +295,29 @@ function App(): JSX.Element {
 				Userpilot.initialize(process.env.USERPILOT_KEY);
 			}

-			Sentry.init({
-				dsn: process.env.SENTRY_DSN,
-				tunnel: process.env.TUNNEL_URL,
-				environment: 'production',
-				integrations: [
-					Sentry.browserTracingIntegration(),
-					Sentry.replayIntegration({
-						maskAllText: false,
-						blockAllMedia: false,
-					}),
-				],
-				// Performance Monitoring
-				tracesSampleRate: 1.0, //  Capture 100% of the transactions
-				// Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-				tracePropagationTargets: [],
-				// Session Replay
-				replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-				replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-			});
+			if (!isSentryInitialized) {
+				Sentry.init({
+					dsn: process.env.SENTRY_DSN,
+					tunnel: process.env.TUNNEL_URL,
+					environment: 'production',
+					integrations: [
+						Sentry.browserTracingIntegration(),
+						Sentry.replayIntegration({
+							maskAllText: false,
+							blockAllMedia: false,
+						}),
+					],
+					// Performance Monitoring
+					tracesSampleRate: 1.0, //  Capture 100% of the transactions
+					// Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+					tracePropagationTargets: [],
+					// Session Replay
+					replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+					replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+				});
+
+				setIsSentryInitialized(true);
+			}
 		} else {
 			posthog.reset();
 			Sentry.close();
@@ -320,6 +326,7 @@ function App(): JSX.Element {
 				window.cioanalytics.reset();
 			}
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isCloudUser, isEnterpriseSelfHostedUser]);

 	// if the user is in logged in state
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -47,9 +47,10 @@ export const TracesFunnels = Loadable(
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),
 );
 export const TracesFunnelDetails = Loadable(
+	// eslint-disable-next-line sonarjs/no-identical-functions
 	() =>
 		import(
-			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesFunnelDetails'
+			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesModulePage'
 		),
 );

--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -531,6 +531,7 @@ export const oldRoutes = [
 	'/traces-save-views',
 	'/settings/access-tokens',
 	'/messaging-queues',
+	'/alerts/edit',
 ];

 export const oldNewRoutesMapping: Record<string, string> = {
@@ -541,6 +542,7 @@ export const oldNewRoutesMapping: Record<string, string> = {
 	'/traces-save-views': '/traces/saved-views',
 	'/settings/access-tokens': '/settings/api-keys',
 	'/messaging-queues': '/messaging-queues/overview',
+	'/alerts/edit': '/alerts/overview',
 };

 export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
--- a/frontend/src/api/ErrorResponseHandlerV2.ts
+++ b/frontend/src/api/ErrorResponseHandlerV2.ts
@@ -0,0 +1,46 @@
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+
+// reference - https://axios-http.com/docs/handling_errors
+export function ErrorResponseHandlerV2(error: AxiosError<ErrorV2Resp>): never {
+	const { response, request } = error;
+	// The request was made and the server responded with a status code
+	// that falls out of the range of 2xx
+	if (response) {
+		throw new APIError({
+			httpStatusCode: response.status || 500,
+			error: {
+				code: response.data.error.code,
+				message: response.data.error.message,
+				url: response.data.error.url,
+				errors: response.data.error.errors,
+			},
+		});
+	}
+	// The request was made but no response was received
+	// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+	// http.ClientRequest in node.js
+	if (request) {
+		throw new APIError({
+			httpStatusCode: error.status || 500,
+			error: {
+				code: error.code || error.name,
+				message: error.message,
+				url: '',
+				errors: [],
+			},
+		});
+	}
+
+	// Something happened in setting up the request that triggered an Error
+	throw new APIError({
+		httpStatusCode: error.status || 500,
+		error: {
+			code: error.name,
+			message: error.message,
+			url: '',
+			errors: [],
+		},
+	});
+}
--- a/frontend/src/api/channels/createEmail.ts
+++ b/frontend/src/api/channels/createEmail.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createEmail';

 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			email_configs: [
 				{
@@ -21,13 +21,12 @@ const create = async (
 		});

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

--- a/frontend/src/api/channels/createMsTeams.ts
+++ b/frontend/src/api/channels/createMsTeams.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createMsTeams';

 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			msteamsv2_configs: [
 				{
@@ -21,13 +21,12 @@ const create = async (
 		});

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

--- a/frontend/src/api/channels/createOpsgenie.ts
+++ b/frontend/src/api/channels/createOpsgenie.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';

 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			opsgenie_configs: [
 				{
@@ -24,13 +24,12 @@ const create = async (
 		});

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

--- a/frontend/src/api/channels/createPager.ts
+++ b/frontend/src/api/channels/createPager.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createPager';

 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			pagerduty_configs: [
 				{
@@ -29,13 +29,12 @@ const create = async (
 		});

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

--- a/frontend/src/api/channels/createSlack.ts
+++ b/frontend/src/api/channels/createSlack.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createSlack';

 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			slack_configs: [
 				{
@@ -22,13 +22,12 @@ const create = async (
 		});

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

--- a/frontend/src/api/channels/createWebhook.ts
+++ b/frontend/src/api/channels/createWebhook.ts
@@ -1,12 +1,12 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createWebhook';

 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
 		let httpConfig = {};
 		const username = props.username ? props.username.trim() : '';
@@ -28,7 +28,7 @@ const create = async (
 			};
 		}

-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			webhook_configs: [
 				{
@@ -40,13 +40,12 @@ const create = async (
 		});

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

--- a/frontend/src/api/channels/delete.ts
+++ b/frontend/src/api/channels/delete.ts
@@ -1,23 +1,22 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/delete';

 const deleteChannel = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.delete(`/channels/${props.id}`);
+		const response = await axios.delete<PayloadProps>(`/channels/${props.id}`);

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

--- a/frontend/src/api/channels/editEmail.ts
+++ b/frontend/src/api/channels/editEmail.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editEmail';

 const editEmail = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			email_configs: [
 				{
@@ -21,13 +21,12 @@ const editEmail = async (
 		});

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

--- a/frontend/src/api/channels/editMsTeams.ts
+++ b/frontend/src/api/channels/editMsTeams.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editMsTeams';

 const editMsTeams = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			msteamsv2_configs: [
 				{
@@ -21,13 +21,12 @@ const editMsTeams = async (
 		});

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

--- a/frontend/src/api/channels/editOpsgenie.ts
+++ b/frontend/src/api/channels/editOpsgenie.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorResponse, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editOpsgenie';

 const editOpsgenie = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			opsgenie_configs: [
 				{
@@ -25,13 +25,12 @@ const editOpsgenie = async (
 		});

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

--- a/frontend/src/api/channels/editPager.ts
+++ b/frontend/src/api/channels/editPager.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editPager';

 const editPager = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			pagerduty_configs: [
 				{
@@ -29,13 +29,12 @@ const editPager = async (
 		});

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

--- a/frontend/src/api/channels/editSlack.ts
+++ b/frontend/src/api/channels/editSlack.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editSlack';

 const editSlack = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			slack_configs: [
 				{
@@ -22,13 +22,12 @@ const editSlack = async (
 		});

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

--- a/frontend/src/api/channels/editWebhook.ts
+++ b/frontend/src/api/channels/editWebhook.ts
@@ -1,12 +1,12 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editWebhook';

 const editWebhook = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
 		let httpConfig = {};
 		const username = props.username ? props.username.trim() : '';
@@ -28,7 +28,7 @@ const editWebhook = async (
 			};
 		}

-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			webhook_configs: [
 				{
@@ -40,13 +40,12 @@ const editWebhook = async (
 		});

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

--- a/frontend/src/api/channels/get.ts
+++ b/frontend/src/api/channels/get.ts
@@ -1,23 +1,21 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/get';
+import { Channels } from 'types/api/channels/getAll';

-const get = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+const get = async (props: Props): Promise<SuccessResponseV2<Channels>> => {
 	try {
-		const response = await axios.get(`/channels/${props.id}`);
+		const response = await axios.get<PayloadProps>(`/channels/${props.id}`);

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

--- a/frontend/src/api/channels/getAll.ts
+++ b/frontend/src/api/channels/getAll.ts
@@ -1,23 +1,20 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/channels/getAll';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Channels, PayloadProps } from 'types/api/channels/getAll';

-const getAll = async (): Promise<
-	SuccessResponse<PayloadProps> | ErrorResponse
-> => {
+const getAll = async (): Promise<SuccessResponseV2<Channels[]>> => {
 	try {
-		const response = await axios.get('/channels');
+		const response = await axios.get<PayloadProps>('/channels');

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

--- a/frontend/src/api/channels/testEmail.ts
+++ b/frontend/src/api/channels/testEmail.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createEmail';

 const testEmail = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			email_configs: [
 				{
@@ -21,13 +21,12 @@ const testEmail = async (
 		});

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

--- a/frontend/src/api/channels/testMsTeams.ts
+++ b/frontend/src/api/channels/testMsTeams.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createMsTeams';

 const testMsTeams = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			msteamsv2_configs: [
 				{
@@ -21,13 +21,12 @@ const testMsTeams = async (
 		});

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

--- a/frontend/src/api/channels/testOpsgenie.ts
+++ b/frontend/src/api/channels/testOpsgenie.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';

 const testOpsgenie = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			opsgenie_configs: [
 				{
@@ -24,13 +24,12 @@ const testOpsgenie = async (
 		});

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

--- a/frontend/src/api/channels/testPager.ts
+++ b/frontend/src/api/channels/testPager.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createPager';

 const testPager = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			pagerduty_configs: [
 				{
@@ -29,13 +29,12 @@ const testPager = async (
 		});

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

--- a/frontend/src/api/channels/testSlack.ts
+++ b/frontend/src/api/channels/testSlack.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createSlack';

 const testSlack = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			slack_configs: [
 				{
@@ -22,13 +22,12 @@ const testSlack = async (
 		});

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

--- a/frontend/src/api/channels/testWebhook.ts
+++ b/frontend/src/api/channels/testWebhook.ts
@@ -1,12 +1,12 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createWebhook';

 const testWebhook = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
 		let httpConfig = {};
 		const username = props.username ? props.username.trim() : '';
@@ -28,7 +28,7 @@ const testWebhook = async (
 			};
 		}

-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			webhook_configs: [
 				{
@@ -40,13 +40,12 @@ const testWebhook = async (
 		});

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

--- a/frontend/src/api/login/login.ts
+++ b/frontend/src/api/login/login.ts
@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/user/login';
+
+const login = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>(`/login`, {
+			...props,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		// this line is never reached but ts isn't detecting the never type properly for the ErrorResponseHandlerV2
+		throw error;
+	}
+};
+
+export default login;
--- a/frontend/src/api/metricsExplorer/getInspectMetricsDetails.ts
+++ b/frontend/src/api/metricsExplorer/getInspectMetricsDetails.ts
@@ -0,0 +1,54 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface InspectMetricsRequest {
+	metricName: string;
+	start: number;
+	end: number;
+	filters: TagFilter;
+}
+
+export interface InspectMetricsResponse {
+	status: string;
+	data: {
+		series: InspectMetricsSeries[];
+	};
+}
+
+export interface InspectMetricsSeries {
+	title?: string;
+	strokeColor?: string;
+	labels: Record<string, string>;
+	labelsArray: Array<Record<string, string>>;
+	values: InspectMetricsTimestampValue[];
+}
+
+interface InspectMetricsTimestampValue {
+	timestamp: number;
+	value: string;
+}
+
+export const getInspectMetricsDetails = async (
+	request: InspectMetricsRequest,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponse<InspectMetricsResponse> | ErrorResponse> => {
+	try {
+		const response = await axios.post(`/metrics/inspect`, request, {
+			signal,
+			headers,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
--- a/frontend/src/api/traceFunnels/index.ts
+++ b/frontend/src/api/traceFunnels/index.ts
@@ -5,6 +5,7 @@ import {
 	CreateFunnelPayload,
 	CreateFunnelResponse,
 	FunnelData,
+	FunnelStepData,
 } from 'types/api/traceFunnels';

 const FUNNELS_BASE_PATH = '/trace-funnels';
@@ -13,7 +14,7 @@ export const createFunnel = async (
 	payload: CreateFunnelPayload,
 ): Promise<SuccessResponse<CreateFunnelResponse> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.post(
-		`${FUNNELS_BASE_PATH}/new-funnel`,
+		`${FUNNELS_BASE_PATH}/new`,
 		payload,
 	);

@@ -25,60 +26,45 @@ export const createFunnel = async (
 	};
 };

-interface GetFunnelsListParams {
-	search?: string;
-}
-
-export const getFunnelsList = async ({
-	search = '',
-}: GetFunnelsListParams = {}): Promise<
+export const getFunnelsList = async (): Promise<
 	SuccessResponse<FunnelData[]> | ErrorResponse
 > => {
-	const params = new URLSearchParams();
-	if (search.length) {
-		params.set('search', search);
-	}
-
-	const response: AxiosResponse = await axios.get(
-		`${FUNNELS_BASE_PATH}/list${
-			params.toString() ? `?${params.toString()}` : ''
-		}`,
-	);
+	const response: AxiosResponse = await axios.get(`${FUNNELS_BASE_PATH}/list`);

 	return {
 		statusCode: 200,
 		error: null,
 		message: '',
-		payload: response.data,
+		payload: response.data.data,
 	};
 };

 export const getFunnelById = async (
-	funnelId: string,
+	funnelId?: string,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.get(
-		`${FUNNELS_BASE_PATH}/get/${funnelId}`,
+		`${FUNNELS_BASE_PATH}/${funnelId}`,
 	);
-
 	return {
 		statusCode: 200,
 		error: null,
 		message: '',
-		payload: response.data,
+		payload: response.data.data,
 	};
 };

-interface RenameFunnelPayload {
-	id: string;
+export interface RenameFunnelPayload {
+	funnel_id: string;
 	funnel_name: string;
+	timestamp: number;
 }

 export const renameFunnel = async (
 	payload: RenameFunnelPayload,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.put(
-		`${FUNNELS_BASE_PATH}/${payload.id}/update`,
-		{ funnel_name: payload.funnel_name },
+		`${FUNNELS_BASE_PATH}/${payload.funnel_id}`,
+		payload,
 	);

 	return {
@@ -97,7 +83,7 @@ export const deleteFunnel = async (
 	payload: DeleteFunnelPayload,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.delete(
-		`${FUNNELS_BASE_PATH}/delete/${payload.id}`,
+		`${FUNNELS_BASE_PATH}/${payload.id}`,
 	);

 	return {
@@ -107,3 +93,247 @@ export const deleteFunnel = async (
 		payload: response.data,
 	};
 };
+
+export interface UpdateFunnelStepsPayload {
+	funnel_id: string;
+	steps: FunnelStepData[];
+	timestamp: number;
+}
+
+export const updateFunnelSteps = async (
+	payload: UpdateFunnelStepsPayload,
+): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.put(
+		`${FUNNELS_BASE_PATH}/steps/update`,
+		payload,
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Funnel steps updated successfully',
+		payload: response.data.data,
+	};
+};
+
+export interface ValidateFunnelPayload {
+	start_time: number;
+	end_time: number;
+}
+
+export interface ValidateFunnelResponse {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			trace_id: string;
+		};
+	}> | null;
+}
+
+export const validateFunnelSteps = async (
+	funnelId: string,
+	payload: ValidateFunnelPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<ValidateFunnelResponse> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/validate`,
+		payload,
+		{ signal },
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+
+export interface UpdateFunnelStepDetailsPayload {
+	funnel_id: string;
+	steps: Array<{
+		step_name: string;
+		description: string;
+	}>;
+	updated_at: number;
+}
+
+interface UpdateFunnelDescriptionPayload {
+	funnel_id: string;
+	description: string;
+}
+
+export const saveFunnelDescription = async (
+	payload: UpdateFunnelDescriptionPayload,
+): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.post(
+		`${FUNNELS_BASE_PATH}/save`,
+		payload,
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Funnel description updated successfully',
+		payload: response.data,
+	};
+};
+
+export interface FunnelOverviewPayload {
+	start_time: number;
+	end_time: number;
+	step_start?: number;
+	step_end?: number;
+}
+
+export interface FunnelOverviewResponse {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			avg_duration: number;
+			avg_rate: number;
+			conversion_rate: number | null;
+			errors: number;
+			p99_latency: number;
+		};
+	}>;
+}
+
+export const getFunnelOverview = async (
+	funnelId: string,
+	payload: FunnelOverviewPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<FunnelOverviewResponse> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/overview`,
+		payload,
+		{
+			signal,
+		},
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+
+export interface SlowTracesPayload {
+	start_time: number;
+	end_time: number;
+	step_a_order: number;
+	step_b_order: number;
+}
+
+export interface SlowTraceData {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			duration_ms: string;
+			span_count: number;
+			trace_id: string;
+		};
+	}>;
+}
+
+export const getFunnelSlowTraces = async (
+	funnelId: string,
+	payload: SlowTracesPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<SlowTraceData> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/slow-traces`,
+		payload,
+		{
+			signal,
+		},
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+export interface ErrorTracesPayload {
+	start_time: number;
+	end_time: number;
+	step_a_order: number;
+	step_b_order: number;
+}
+
+export interface ErrorTraceData {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			duration_ms: string;
+			span_count: number;
+			trace_id: string;
+		};
+	}>;
+}
+
+export const getFunnelErrorTraces = async (
+	funnelId: string,
+	payload: ErrorTracesPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<ErrorTraceData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/error-traces`,
+		payload,
+		{
+			signal,
+		},
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+
+export interface FunnelStepsPayload {
+	start_time: number;
+	end_time: number;
+}
+
+export interface FunnelStepGraphMetrics {
+	[key: `total_s${number}_spans`]: number;
+	[key: `total_s${number}_errored_spans`]: number;
+}
+
+export interface FunnelStepsResponse {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: FunnelStepGraphMetrics;
+	}>;
+}
+
+export const getFunnelSteps = async (
+	funnelId: string,
+	payload: FunnelStepsPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<FunnelStepsResponse> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/steps`,
+		payload,
+		{ signal },
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
--- a/frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx
+++ b/frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx
@@ -9,18 +9,27 @@ import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOpt
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { useCallback, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';

-interface SelectOptionConfig {
+export interface SelectOptionConfig {
 	placeholder: string;
 	queryParam: QueryParams;
 	filterType: string | string[];
+	shouldSetQueryParams?: boolean;
+	onChange?: (value: string | string[]) => void;
+	values?: string | string[];
+	isMultiple?: boolean;
 }

-function FilterSelect({
+export function FilterSelect({
 	placeholder,
 	queryParam,
 	filterType,
+	values,
+	shouldSetQueryParams,
+	onChange,
+	isMultiple,
 }: SelectOptionConfig): JSX.Element {
 	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
 		filterType,
@@ -30,20 +39,73 @@ function FilterSelect({
 	const history = useHistory();
 	const location = useLocation();

+	// Add state to track the current search input
+	const [searchValue, setSearchValue] = useState<string>('');
+
+	// Use externally provided `values` if `shouldSetQueryParams` is false, otherwise get from URL params.
+	const selectValue =
+		!shouldSetQueryParams && !!values?.length
+			? values
+			: getValuesFromQueryParams(queryParam, urlQuery) || [];
+
+	// Memoize options to include the typed value if not present
+	const mergedOptions = useMemo(() => {
+		if (
+			!!searchValue.trim().length &&
+			!options.some((opt) => opt.value === searchValue)
+		) {
+			return [{ value: searchValue, label: searchValue }, ...options];
+		}
+		return options;
+	}, [options, searchValue]);
+
+	const handleSelectChange = useCallback(
+		(value: string | string[]): void => {
+			handleSearch('');
+			setSearchValue(''); // Clear search value after selection
+			if (shouldSetQueryParams) {
+				setQueryParamsFromOptions(
+					value as string[],
+					urlQuery,
+					history,
+					location,
+					queryParam,
+				);
+			}
+			onChange?.(value);
+		},
+		[
+			handleSearch,
+			shouldSetQueryParams,
+			urlQuery,
+			history,
+			location,
+			queryParam,
+			onChange,
+		],
+	);
+
+	// Update searchValue on user input
+	const handleSearchInput = (input: string): void => {
+		setSearchValue(input);
+		handleSearch(input);
+	};
+
 	return (
 		<Select
 			key={filterType.toString()}
 			placeholder={placeholder}
 			showSearch
-			mode="multiple"
-			options={options}
+			// eslint-disable-next-line react/jsx-props-no-spreading
+			{...(isMultiple ? { mode: 'multiple' } : {})}
+			options={mergedOptions}
 			loading={isFetching}
 			className="config-select-option"
-			onSearch={handleSearch}
+			onSearch={handleSearchInput}
 			maxTagCount={4}
 			allowClear
 			maxTagPlaceholder={SelectMaxTagPlaceholder}
-			value={getValuesFromQueryParams(queryParam, urlQuery) || []}
+			value={selectValue}
 			notFoundContent={
 				isFetching ? (
 					<span>
@@ -53,14 +115,18 @@ function FilterSelect({
 					<span>No {placeholder} found</span>
 				)
 			}
-			onChange={(value): void => {
-				handleSearch('');
-				setQueryParamsFromOptions(value, urlQuery, history, location, queryParam);
-			}}
+			onChange={handleSelectChange}
 		/>
 	);
 }

+FilterSelect.defaultProps = {
+	shouldSetQueryParams: true,
+	onChange: (): void => {},
+	values: [],
+	isMultiple: true,
+};
+
 function CeleryOverviewConfigOptions(): JSX.Element {
 	const selectConfigs: SelectOptionConfig[] = [
 		{
--- a/frontend/src/components/ChangePercentagePill/ChangePercentagePill.styles.scss
+++ b/frontend/src/components/ChangePercentagePill/ChangePercentagePill.styles.scss
@@ -0,0 +1,40 @@
+.change-percentage-pill {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	padding: 1px 4px;
+	border-radius: 50px;
+
+	&__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	&__label {
+		font-family: 'Geist Mono';
+		font-size: 12px;
+		line-height: normal;
+	}
+	&--positive {
+		.change-percentage-pill {
+			&__icon {
+				color: var(--bg-forest-500);
+			}
+			&__label {
+				color: var(--bg-forest-500);
+			}
+		}
+	}
+	&--negative {
+		background: rgba(229, 72, 77, 0.1);
+
+		.change-percentage-pill {
+			&__icon {
+				color: var(--bg-cherry-500);
+			}
+			&__label {
+				color: var(--bg-cherry-500);
+			}
+		}
+	}
+}
--- a/frontend/src/components/ChangePercentagePill/ChangePercentagePill.tsx
+++ b/frontend/src/components/ChangePercentagePill/ChangePercentagePill.tsx
@@ -0,0 +1,38 @@
+import './ChangePercentagePill.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import cx from 'classnames';
+import { ArrowDown, ArrowUp } from 'lucide-react';
+
+interface ChangePercentagePillProps {
+	percentage: number;
+	direction: number;
+}
+function ChangePercentagePill({
+	percentage,
+	direction,
+}: ChangePercentagePillProps): JSX.Element | null {
+	if (direction === 0 || percentage === 0) {
+		return null;
+	}
+	const isPositive = direction > 0;
+	return (
+		<div
+			className={cx('change-percentage-pill', {
+				'change-percentage-pill--positive': isPositive,
+				'change-percentage-pill--negative': !isPositive,
+			})}
+		>
+			<div className="change-percentage-pill__icon">
+				{isPositive ? (
+					<ArrowUp size={12} color={Color.BG_FOREST_500} />
+				) : (
+					<ArrowDown size={12} color={Color.BG_CHERRY_500} />
+				)}
+			</div>
+			<div className="change-percentage-pill__label">{percentage}%</div>
+		</div>
+	);
+}
+
+export default ChangePercentagePill;
--- a/frontend/src/components/DropDown/DropDown.styles.scss
+++ b/frontend/src/components/DropDown/DropDown.styles.scss
@@ -1,11 +1,11 @@
 .dropdown-button {
-    color: #fff;
+	color: #fff;
 }

 .dropdown-button--dark {
-    color: #000;
+	color: #000;
 }

 .dropdown-icon {
-    font-size: 1.2rem;
-}
+	font-size: 1.2rem;
+}
--- a/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
+++ b/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
@@ -19,6 +19,7 @@ import {
 	initialQueryState,
 } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
+import { NANOSECONDS_TO_SECONDS } from 'container/InfraMonitoringK8s/constants';
 import {
 	CustomTimeType,
 	Time,
@@ -68,12 +69,14 @@ function HostMetricsDetails({
 		GlobalReducer
 	>((state) => state.globalTime);

-	const startMs = useMemo(() => Math.floor(Number(minTime) / 1000000000), [
-		minTime,
-	]);
-	const endMs = useMemo(() => Math.floor(Number(maxTime) / 1000000000), [
-		maxTime,
-	]);
+	const startMs = useMemo(
+		() => Math.floor(Number(minTime) / NANOSECONDS_TO_SECONDS),
+		[minTime],
+	);
+	const endMs = useMemo(
+		() => Math.floor(Number(maxTime) / NANOSECONDS_TO_SECONDS),
+		[maxTime],
+	);

 	const urlQuery = useUrlQuery();

@@ -141,8 +144,8 @@ function HostMetricsDetails({
 			const { maxTime, minTime } = GetMinMax(selectedTime);

 			setModalTimeRange({
-				startTime: Math.floor(minTime / 1000000000),
-				endTime: Math.floor(maxTime / 1000000000),
+				startTime: Math.floor(minTime / NANOSECONDS_TO_SECONDS),
+				endTime: Math.floor(maxTime / NANOSECONDS_TO_SECONDS),
 			});
 		}
 	}, [selectedTime, minTime, maxTime]);
@@ -161,15 +164,15 @@ function HostMetricsDetails({

 			if (interval === 'custom' && dateTimeRange) {
 				setModalTimeRange({
-					startTime: Math.floor(dateTimeRange[0] / 1000),
-					endTime: Math.floor(dateTimeRange[1] / 1000),
+					startTime: Math.floor(dateTimeRange[0] / NANOSECONDS_TO_SECONDS),
+					endTime: Math.floor(dateTimeRange[1] / NANOSECONDS_TO_SECONDS),
 				});
 			} else {
 				const { maxTime, minTime } = GetMinMax(interval);

 				setModalTimeRange({
-					startTime: Math.floor(minTime / 1000000000),
-					endTime: Math.floor(maxTime / 1000000000),
+					startTime: Math.floor(minTime / NANOSECONDS_TO_SECONDS),
+					endTime: Math.floor(maxTime / NANOSECONDS_TO_SECONDS),
 				});
 			}

@@ -318,8 +321,8 @@ function HostMetricsDetails({
 			const { maxTime, minTime } = GetMinMax(selectedTime);

 			setModalTimeRange({
-				startTime: Math.floor(minTime / 1000000000),
-				endTime: Math.floor(maxTime / 1000000000),
+				startTime: Math.floor(minTime / NANOSECONDS_TO_SECONDS),
+				endTime: Math.floor(maxTime / NANOSECONDS_TO_SECONDS),
 			});
 		}
 		setSelectedView(VIEW_TYPES.METRICS);
--- a/frontend/src/components/LearnMore/LearnMore.styles.scss
+++ b/frontend/src/components/LearnMore/LearnMore.styles.scss
@@ -1,14 +1,15 @@
 .learn-more {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 0;
-    font-family: Inter;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 18px; /* 128.571% */
-    letter-spacing: -0.07px;
-    &,&:hover {
-        color: var(--bg-robin-400) !important;    
-    }
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 0;
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+	&,
+	&:hover {
+		color: var(--bg-robin-400) !important;
+	}
 }
--- a/frontend/src/components/QuickFilters/QuickFilters.styles.scss
+++ b/frontend/src/components/QuickFilters/QuickFilters.styles.scss
@@ -3,6 +3,7 @@
 	flex-direction: column;
 	height: 100%;
 	border-right: 1px solid var(--bg-slate-400);
+	color: var(--bg-vanilla-100);

 	.header {
 		display: flex;
@@ -74,6 +75,7 @@
 	.quick-filters {
 		background-color: var(--bg-vanilla-100);
 		border-right: 1px solid var(--bg-vanilla-300);
+		color: var(--bg-ink-200);

 		.header {
 			border-bottom: 1px solid var(--bg-vanilla-300);
--- a/frontend/src/components/QuickFilters/tests/snapshots/QuickFilters.test.tsx.snap
+++ b/frontend/src/components/QuickFilters/tests/snapshots/QuickFilters.test.tsx.snap
@@ -110,6 +110,7 @@ exports[`Quick Filters renders correctly with default props 1`] = `
                class="left-action"
              >
                <svg
+                  aria-hidden="true"
                  class="lucide lucide-chevron-down"
                  cursor="pointer"
                  fill="none"
@@ -347,6 +348,7 @@ exports[`Quick Filters renders correctly with default props 1`] = `
                class="left-action"
              >
                <svg
+                  aria-hidden="true"
                  class="lucide lucide-chevron-right"
                  cursor="pointer"
                  fill="none"
--- a/frontend/src/components/ResizeTable/styles.ts
+++ b/frontend/src/components/ResizeTable/styles.ts
@@ -1,6 +1,9 @@
+import React from 'react';
 import styled from 'styled-components';

-export const SpanStyle = styled.span`
+type SpanProps = React.HTMLAttributes<HTMLSpanElement>;
+
+export const SpanStyle = styled.span<SpanProps>`
 	position: absolute;
 	right: -0.313rem;
 	bottom: 0;
@@ -12,7 +15,7 @@ export const SpanStyle = styled.span`
 	margin-right: 4px;
 `;

-export const DragSpanStyle = styled.span`
+export const DragSpanStyle = styled.span<SpanProps>`
 	display: flex;
 	margin: -1rem;
 	padding: 1rem;
--- a/frontend/src/components/SignozRadioGroup/SignozRadioGroup.styles.scss
+++ b/frontend/src/components/SignozRadioGroup/SignozRadioGroup.styles.scss
@@ -0,0 +1,55 @@
+.signoz-radio-group.ant-radio-group {
+	color: var(--text-vanilla-400);
+
+	.view-title {
+		display: flex;
+		gap: var(--margin-2);
+		align-items: center;
+		justify-content: center;
+		font-size: var(--font-size-xs);
+		font-style: normal;
+		font-weight: var(--font-weight-normal);
+	}
+
+	.tab {
+		border: 1px solid var(--bg-slate-400);
+		&:hover {
+			color: var(--text-vanilla-100);
+		}
+		&::before {
+			background: var(--bg-slate-400);
+		}
+	}
+
+	.selected_view {
+		&,
+		&:hover {
+			background: var(--bg-slate-300);
+			color: var(--text-vanilla-100);
+			border: 1px solid var(--bg-slate-400);
+		}
+		&::before {
+			background: var(--bg-slate-400);
+		}
+	}
+}
+
+// Light mode styles
+.lightMode {
+	.signoz-radio-group {
+		.tab {
+			background: var(--bg-vanilla-100);
+		}
+
+		.selected_view {
+			background: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-slate-300);
+			color: var(--text-ink-400);
+		}
+
+		.selected_view::before {
+			background: var(--bg-vanilla-300);
+			border-left: 1px solid var(--bg-slate-300);
+		}
+	}
+}
--- a/frontend/src/components/SignozRadioGroup/SignozRadioGroup.tsx
+++ b/frontend/src/components/SignozRadioGroup/SignozRadioGroup.tsx
@@ -0,0 +1,48 @@
+import './SignozRadioGroup.styles.scss';
+
+import { Radio } from 'antd';
+import { RadioChangeEvent } from 'antd/es/radio';
+
+interface Option {
+	value: string;
+	label: string;
+}
+
+interface SignozRadioGroupProps {
+	value: string;
+	options: Option[];
+	onChange: (e: RadioChangeEvent) => void;
+	className?: string;
+}
+
+function SignozRadioGroup({
+	value,
+	options,
+	onChange,
+	className = '',
+}: SignozRadioGroupProps): JSX.Element {
+	return (
+		<Radio.Group
+			value={value}
+			buttonStyle="solid"
+			className={`signoz-radio-group ${className}`}
+			onChange={onChange}
+		>
+			{options.map((option) => (
+				<Radio.Button
+					key={option.value}
+					value={option.value}
+					className={value === option.value ? 'selected_view tab' : 'tab'}
+				>
+					{option.label}
+				</Radio.Button>
+			))}
+		</Radio.Group>
+	);
+}
+
+SignozRadioGroup.defaultProps = {
+	className: '',
+};
+
+export default SignozRadioGroup;
--- a/frontend/src/components/TableRenderer/LabelColumn.styles.scss
+++ b/frontend/src/components/TableRenderer/LabelColumn.styles.scss
@@ -1,10 +1,9 @@
 .label-column {
+	display: flex;
+	flex-wrap: wrap;

-    display: flex;
-    flex-wrap: wrap;
-
-    .label-column--tag {
-        white-space: normal;
-        margin: 0.2rem 0.2rem;
-    }
+	.label-column--tag {
+		white-space: normal;
+		margin: 0.2rem 0.2rem;
+	}
 }
--- a/frontend/src/components/TextToolTip/TextToolTip.style.scss
+++ b/frontend/src/components/TextToolTip/TextToolTip.style.scss
@@ -1,3 +1,3 @@
 .overlay--text-wrap {
-    white-space: pre-wrap;
-}
+	white-space: pre-wrap;
+}
--- a/frontend/src/constants/features.ts
+++ b/frontend/src/constants/features.ts
@@ -8,5 +8,6 @@ export enum FeatureKeys {
 	PREMIUM_SUPPORT = 'PREMIUM_SUPPORT',
 	ANOMALY_DETECTION = 'ANOMALY_DETECTION',
 	ONBOARDING_V3 = 'ONBOARDING_V3',
+	THIRD_PARTY_API = 'THIRD_PARTY_API',
 	TRACE_FUNNELS = 'TRACE_FUNNELS',
 }
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -51,10 +51,13 @@ export const REACT_QUERY_KEY = {
 	GET_METRICS_LIST_FILTER_VALUES: 'GET_METRICS_LIST_FILTER_VALUES',
 	GET_METRIC_DETAILS: 'GET_METRIC_DETAILS',
 	GET_RELATED_METRICS: 'GET_RELATED_METRICS',
+	GET_INSPECT_METRICS_DETAILS: 'GET_INSPECT_METRICS_DETAILS',

-	// API Monitoring Query Keys
+	// Traces Funnels Query Keys
 	GET_DOMAINS_LIST: 'GET_DOMAINS_LIST',
+	GET_DOMAIN_METRICS_DATA: 'GET_DOMAIN_METRICS_DATA',
 	GET_ENDPOINTS_LIST_BY_DOMAIN: 'GET_ENDPOINTS_LIST_BY_DOMAIN',
+	GET_TOP_ERRORS_BY_DOMAIN: 'GET_TOP_ERRORS_BY_DOMAIN',
 	GET_NESTED_ENDPOINTS_LIST: 'GET_NESTED_ENDPOINTS_LIST',
 	GET_ENDPOINT_METRICS_DATA: 'GET_ENDPOINT_METRICS_DATA',
 	GET_ENDPOINT_STATUS_CODE_DATA: 'GET_ENDPOINT_STATUS_CODE_DATA',
@@ -68,4 +71,11 @@ export const REACT_QUERY_KEY = {
 		'GET_ENDPOINT_STATUS_CODE_LATENCY_BAR_CHARTS_DATA',
 	GET_FUNNELS_LIST: 'GET_FUNNELS_LIST',
 	GET_FUNNEL_DETAILS: 'GET_FUNNEL_DETAILS',
+	UPDATE_FUNNEL_STEPS: 'UPDATE_FUNNEL_STEPS',
+	VALIDATE_FUNNEL_STEPS: 'VALIDATE_FUNNEL_STEPS',
+	UPDATE_FUNNEL_STEP_DETAILS: 'UPDATE_FUNNEL_STEP_DETAILS',
+	GET_FUNNEL_OVERVIEW: 'GET_FUNNEL_OVERVIEW',
+	GET_FUNNEL_SLOW_TRACES: 'GET_FUNNEL_SLOW_TRACES',
+	GET_FUNNEL_ERROR_TRACES: 'GET_FUNNEL_ERROR_TRACES',
+	GET_FUNNEL_STEPS_GRAPH_DATA: 'GET_FUNNEL_STEPS_GRAPH_DATA',
 } as const;
--- a/frontend/src/container/APIKeys/APIKeys.tsx
+++ b/frontend/src/container/APIKeys/APIKeys.tsx
@@ -27,6 +27,7 @@ import axios, { AxiosError } from 'axios';
 import cx from 'classnames';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import { useGetAllAPIKeys } from 'hooks/APIKeys/useGetAllAPIKeys';
 import { useNotifications } from 'hooks/useNotifications';
 import {
@@ -52,6 +53,8 @@ import { useCopyToClipboard } from 'react-use';
 import { APIKeyProps } from 'types/api/pat/types';
 import { USER_ROLES } from 'types/roles';

+dayjs.extend(relativeTime);
+
 export const showErrorNotification = (
 	notifications: NotificationInstance,
 	err: Error,
@@ -495,7 +498,7 @@ function APIKeys(): JSX.Element {
 										expiresIn <= 3 ? 'danger' : 'warning',
 									)}
 								>
-									<span className="dot" /> Expires in {expiresIn} Days
+									<span className="dot" /> Expires {dayjs().to(expiresOn)}
 								</div>
 							)}

--- a/frontend/src/container/AllAlertChannels/AlertChannels.tsx
+++ b/frontend/src/container/AllAlertChannels/AlertChannels.tsx
@@ -10,7 +10,7 @@ import { useAppContext } from 'providers/App/App';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
-import { Channels, PayloadProps } from 'types/api/channels/getAll';
+import { Channels } from 'types/api/channels/getAll';

 import Delete from './Delete';

@@ -68,7 +68,7 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 }

 interface AlertChannelsProps {
-	allChannels: PayloadProps;
+	allChannels: Channels[];
 }

 export default AlertChannels;
--- a/frontend/src/container/AllAlertChannels/Delete.tsx
+++ b/frontend/src/container/AllAlertChannels/Delete.tsx
@@ -4,6 +4,7 @@ import deleteChannel from 'api/channels/delete';
 import { Dispatch, SetStateAction, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Channels } from 'types/api/channels/getAll';
+import APIError from 'types/api/error';

 function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -12,30 +13,20 @@ function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
 	const onClickHandler = async (): Promise<void> => {
 		try {
 			setLoading(true);
-			const response = await deleteChannel({
+			await deleteChannel({
 				id,
 			});

-			if (response.statusCode === 200) {
-				notifications.success({
-					message: 'Success',
-					description: t('channel_delete_success'),
-				});
-				setChannels((preChannels) => preChannels.filter((e) => e.id !== id));
-			} else {
-				notifications.error({
-					message: 'Error',
-					description: response.error || t('channel_delete_unexp_error'),
-				});
-			}
+			notifications.success({
+				message: 'Success',
+				description: t('channel_delete_success'),
+			});
+			setChannels((preChannels) => preChannels.filter((e) => e.id !== id));
 			setLoading(false);
 		} catch (error) {
 			notifications.error({
-				message: 'Error',
-				description:
-					error instanceof Error
-						? error.toString()
-						: t('channel_delete_unexp_error'),
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
 			});
 			setLoading(false);
 		}
--- a/frontend/src/container/AllAlertChannels/tests/AlertChannels.test.tsx
+++ b/frontend/src/container/AllAlertChannels/tests/AlertChannels.test.tsx
@@ -1,15 +1,7 @@
 import ROUTES from 'constants/routes';
 import AlertChannels from 'container/AllAlertChannels';
-import { allAlertChannels } from 'mocks-server/__mockdata__/alerts';
 import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';

-jest.mock('hooks/useFetch', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		payload: allAlertChannels,
-	})),
-}));
-
 const successNotification = jest.fn();
 jest.mock('hooks/useNotifications', () => ({
 	__esModule: true,
@@ -29,8 +21,11 @@ jest.mock('react-router-dom', () => ({
 }));

 describe('Alert Channels Settings List page', () => {
-	beforeEach(() => {
+	beforeEach(async () => {
 		render(<AlertChannels />);
+		await waitFor(() =>
+			expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
+		);
 	});
 	afterEach(() => {
 		jest.restoreAllMocks();
--- a/frontend/src/container/AllAlertChannels/tests/AlertChannelsNormalUser.test.tsx
+++ b/frontend/src/container/AllAlertChannels/tests/AlertChannelsNormalUser.test.tsx
@@ -1,15 +1,8 @@
+/* eslint-disable sonarjs/no-identical-functions */
 import ROUTES from 'constants/routes';
 import AlertChannels from 'container/AllAlertChannels';
-import { allAlertChannels } from 'mocks-server/__mockdata__/alerts';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';

-jest.mock('hooks/useFetch', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		payload: allAlertChannels,
-	})),
-}));
-
 const successNotification = jest.fn();
 jest.mock('hooks/useNotifications', () => ({
 	__esModule: true,
@@ -34,27 +27,31 @@ jest.mock('react-router-dom', () => ({
 }));

 describe('Alert Channels Settings List page (Normal User)', () => {
-	beforeEach(() => {
+	beforeEach(async () => {
 		render(<AlertChannels />);
+		await waitFor(() =>
+			expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
+		);
 	});
 	afterEach(() => {
 		jest.restoreAllMocks();
 	});
 	describe('Should display the Alert Channels page properly', () => {
-		it('Should check if "The alerts will be sent to all the configured channels." is visible ', () => {
-			expect(screen.getByText('sending_channels_note')).toBeInTheDocument();
+		it('Should check if "The alerts will be sent to all the configured channels." is visible ', async () => {
+			await waitFor(() =>
+				expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
+			);
 		});

-		it('Should check if "New Alert Channel" Button is visble and disabled', () => {
+		it('Should check if "New Alert Channel" Button is visble and disabled', async () => {
 			const newAlertButton = screen.getByRole('button', {
 				name: 'plus button_new_channel',
 			});
-			expect(newAlertButton).toBeInTheDocument();
+			await waitFor(() => expect(newAlertButton).toBeInTheDocument());
 			expect(newAlertButton).toBeDisabled();
 		});
 		it('Should check if the help icon is visible and displays "tooltip_notification_channels ', async () => {
 			const helpIcon = screen.getByLabelText('question-circle');
-
 			fireEvent.mouseOver(helpIcon);

 			await waitFor(() => {
@@ -64,13 +61,13 @@ describe('Alert Channels Settings List page (Normal User)', () => {
 		});
 	});
 	describe('Should check if the channels table is properly displayed', () => {
-		it('Should check if the table columns are properly displayed', () => {
+		it('Should check if the table columns are properly displayed', async () => {
 			expect(screen.getByText('column_channel_name')).toBeInTheDocument();
 			expect(screen.getByText('column_channel_type')).toBeInTheDocument();
 			expect(screen.queryByText('column_channel_action')).not.toBeInTheDocument();
 		});

-		it('Should check if the data in the table is displayed properly', () => {
+		it('Should check if the data in the table is displayed properly', async () => {
 			expect(screen.getByText('Dummy-Channel')).toBeInTheDocument();
 			expect(screen.getAllByText('slack')[0]).toBeInTheDocument();
 			expect(screen.queryByText('column_channel_edit')).not.toBeInTheDocument();
--- a/frontend/src/container/AllAlertChannels/tests/CreateAlertChannel.test.tsx
+++ b/frontend/src/container/AllAlertChannels/tests/CreateAlertChannel.test.tsx
@@ -119,12 +119,7 @@ describe('Create Alert Channel', () => {

 			fireEvent.click(saveButton);

-			await waitFor(() =>
-				expect(errorNotification).toHaveBeenCalledWith({
-					description: 'Something went wrong',
-					message: 'Error',
-				}),
-			);
+			await waitFor(() => expect(errorNotification).toHaveBeenCalled());
 		});
 		it('Should check if clicking on Test button shows "An alert has been sent to this channel" success message if testing passes', async () => {
 			server.use(
@@ -158,12 +153,7 @@ describe('Create Alert Channel', () => {

 			fireEvent.click(testButton);

-			await waitFor(() =>
-				expect(errorNotification).toHaveBeenCalledWith({
-					message: 'Error',
-					description: 'channel_test_failed',
-				}),
-			);
+			await waitFor(() => expect(errorNotification).toHaveBeenCalled());
 		});
 	});
 	describe('New Alert Channel Cascading Fields Based on Channel Type', () => {
--- a/frontend/src/container/AllAlertChannels/index.tsx
+++ b/frontend/src/container/AllAlertChannels/index.tsx
@@ -6,12 +6,15 @@ import Spinner from 'components/Spinner';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
-import useFetch from 'hooks/useFetch';
 import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
+import { Channels } from 'types/api/channels/getAll';
+import APIError from 'types/api/error';

 import AlertChannelsComponent from './AlertChannels';
 import { Button, ButtonContainer, RightActionContainer } from './styles';
@@ -29,21 +32,26 @@ function AlertChannels(): JSX.Element {
 		history.push(ROUTES.CHANNELS_NEW);
 	}, []);

-	const { loading, payload, error, errorMessage } = useFetch(getAll);
+	const { isLoading, data, error } = useQuery<
+		SuccessResponseV2<Channels[]>,
+		APIError
+	>(['getChannels'], {
+		queryFn: () => getAll(),
+	});

 	useEffect(() => {
-		if (!isUndefined(payload)) {
+		if (!isUndefined(data?.data)) {
 			logEvent('Alert Channel: Channel list page visited', {
-				number: payload?.length,
+				number: data?.data?.length,
 			});
 		}
-	}, [payload]);
+	}, [data?.data]);

 	if (error) {
-		return <Typography>{errorMessage}</Typography>;
+		return <Typography>{error.getErrorMessage()}</Typography>;
 	}

-	if (loading || payload === undefined) {
+	if (isLoading || isUndefined(data?.data)) {
 		return <Spinner tip={t('loading_channels_message')} height="90vh" />;
 	}

@@ -78,7 +86,7 @@ function AlertChannels(): JSX.Element {
 				</RightActionContainer>
 			</ButtonContainer>

-			<AlertChannelsComponent allChannels={payload} />
+			<AlertChannelsComponent allChannels={data?.data || []} />
 		</>
 	);
 }
--- a/frontend/src/container/ApiMonitoring/APIMonitoringUtils.test.tsx
+++ b/frontend/src/container/ApiMonitoring/APIMonitoringUtils.test.tsx
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/AllEndPoints.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/AllEndPoints.tsx
@@ -1,29 +1,17 @@
-import { LoadingOutlined } from '@ant-design/icons';
-import { Select, Spin, Table, Typography } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { ENTITY_VERSION_V4 } from 'constants/app';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { Select } from 'antd';
+import { initialQueriesMap } from 'constants/queryBuilder';
 import {
-	EndPointsTableRowData,
-	formatEndPointsDataForTable,
-	getEndPointsColumnsConfig,
-	getEndPointsQueryPayload,
+	getAllEndpointsWidgetData,
+	getGroupByFiltersFromGroupByValues,
 } from 'container/ApiMonitoring/utils';
+import GridCard from 'container/GridCardLayout/GridCard';
+import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueries } from 'react-query';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { SuccessResponse } from 'types/api';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';

-import ErrorState from './components/ErrorState';
-import ExpandedRow from './components/ExpandedRow';
-import { VIEW_TYPES, VIEWS } from './constants';
+import { SPAN_ATTRIBUTES, VIEWS } from './constants';

 function AllEndPoints({
 	domainName,
@@ -31,13 +19,27 @@ function AllEndPoints({
 	setSelectedView,
 	groupBy,
 	setGroupBy,
+	timeRange,
+	initialFilters,
+	setInitialFiltersEndPointStats,
 }: {
 	domainName: string;
 	setSelectedEndPointName: (name: string) => void;
 	setSelectedView: (tab: VIEWS) => void;
 	groupBy: IBuilderQuery['groupBy'];
 	setGroupBy: (groupBy: IBuilderQuery['groupBy']) => void;
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	initialFilters: IBuilderQuery['filters'];
+	setInitialFiltersEndPointStats: (filters: IBuilderQuery['filters']) => void;
 }): JSX.Element {
+	const [groupBySearchValue, setGroupBySearchValue] = useState<string>('');
+	const [allAvailableGroupByOptions, setAllAvailableGroupByOptions] = useState<{
+		[key: string]: any;
+	}>({});
+
 	const {
 		data: groupByFiltersData,
 		isLoading: isLoadingGroupByFilters,
@@ -45,7 +47,7 @@ function AllEndPoints({
 		dataSource: DataSource.TRACES,
 		aggregateAttribute: '',
 		aggregateOperator: 'noop',
-		searchText: '',
+		searchText: groupBySearchValue,
 		tagType: '',
 	});

@@ -53,130 +55,144 @@ function AllEndPoints({
 		{ value: string; label: string }[]
 	>([]);

-	const [expandedRowKeys, setExpandedRowKeys] = useState<React.Key[]>([]);
-
 	const handleGroupByChange = useCallback(
 		(value: IBuilderQuery['groupBy']) => {
-			const groupBy = [];
+			const newGroupBy = [];

 			for (let index = 0; index < value.length; index++) {
 				const element = (value[index] as unknown) as string;

-				const key = groupByFiltersData?.payload?.attributeKeys?.find(
-					(key) => key.key === element,
-				);
+				// Check if the key exists in our cached options first
+				if (allAvailableGroupByOptions[element]) {
+					newGroupBy.push(allAvailableGroupByOptions[element]);
+				} else {
+					// If not found in cache, check the current filtered results
+					const key = groupByFiltersData?.payload?.attributeKeys?.find(
+						(key) => key.key === element,
+					);

-				if (key) {
-					groupBy.push(key);
+					if (key) {
+						newGroupBy.push(key);
+					}
 				}
 			}
-			setGroupBy(groupBy);
+
+			setGroupBy(newGroupBy);
+			setGroupBySearchValue('');
 		},
-		[groupByFiltersData, setGroupBy],
+		[groupByFiltersData, setGroupBy, allAvailableGroupByOptions],
 	);

 	useEffect(() => {
 		if (groupByFiltersData?.payload) {
+			// Update dropdown options
 			setGroupByOptions(
 				groupByFiltersData?.payload?.attributeKeys?.map((filter) => ({
 					value: filter.key,
 					label: filter.key,
 				})) || [],
 			);
+
+			// Cache all available options to preserve selected values using functional update
+			// to avoid dependency on allAvailableGroupByOptions
+			setAllAvailableGroupByOptions((prevOptions) => {
+				const newOptions = { ...prevOptions };
+				groupByFiltersData?.payload?.attributeKeys?.forEach((filter) => {
+					newOptions[filter.key] = filter;
+				});
+				return newOptions;
+			});
 		}
-	}, [groupByFiltersData]);
+	}, [groupByFiltersData]); // Only depends on groupByFiltersData now

-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const queryPayloads = useMemo(
-		() =>
-			getEndPointsQueryPayload(
-				groupBy,
-				domainName,
-				Math.floor(minTime / 1e9),
-				Math.floor(maxTime / 1e9),
-			),
-		[groupBy, domainName, minTime, maxTime],
-	);
-
-	// Since only one query here
-	const endPointsDataQueries = useQueries(
-		queryPayloads.map((payload) => ({
-			queryKey: [
-				REACT_QUERY_KEY.GET_ENDPOINTS_LIST_BY_DOMAIN,
-				payload,
-				ENTITY_VERSION_V4,
-				groupBy,
-			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
-			enabled: !!payload,
-			staleTime: 60 * 1000, // 1 minute stale time : optimize this part
-		})),
-	);
-
-	const endPointsDataQuery = endPointsDataQueries[0];
-	const {
-		data: allEndPointsData,
-		isLoading,
-		isRefetching,
-		isError,
-		refetch,
-	} = endPointsDataQuery;
-
-	const endPointsColumnsConfig = useMemo(
-		() => getEndPointsColumnsConfig(groupBy.length > 0, expandedRowKeys),
-		[groupBy.length, expandedRowKeys],
-	);
-
-	const expandedRowRender = (record: EndPointsTableRowData): JSX.Element => (
-		<ExpandedRow
-			domainName={domainName}
-			selectedRowData={record}
-			setSelectedEndPointName={setSelectedEndPointName}
-			setSelectedView={setSelectedView}
-		/>
-	);
-
-	const handleGroupByRowClick = (record: EndPointsTableRowData): void => {
-		if (expandedRowKeys.includes(record.key)) {
-			setExpandedRowKeys(expandedRowKeys.filter((key) => key !== record.key));
-		} else {
-			setExpandedRowKeys((expandedRowKeys) => [...expandedRowKeys, record.key]);
+	// Cache existing selected options on component mount
+	useEffect(() => {
+		if (groupBy && groupBy.length > 0) {
+			setAllAvailableGroupByOptions((prevOptions) => {
+				const newOptions = { ...prevOptions };
+				groupBy.forEach((option) => {
+					newOptions[option.key] = option;
+				});
+				return newOptions;
+			});
 		}
-	};
+	}, [groupBy]); // Removed allAvailableGroupByOptions from dependencies

-	const handleRowClick = (record: EndPointsTableRowData): void => {
-		if (groupBy.length === 0) {
-			setSelectedEndPointName(record.endpointName); // this will open up the endpoint details tab
-			setSelectedView(VIEW_TYPES.ENDPOINT_DETAILS);
-			logEvent('API Monitoring: Endpoint name row clicked', {});
-		} else {
-			handleGroupByRowClick(record); // this will prepare the nested query payload
-		}
-	};
+	const currentQuery = initialQueriesMap[DataSource.TRACES];

-	const formattedEndPointsData = useMemo(
-		() =>
-			formatEndPointsDataForTable(
-				allEndPointsData?.payload?.data?.result[0]?.table?.rows,
-				groupBy,
-			),
-		[groupBy, allEndPointsData],
+	// Local state for filters, combining endpoint filter and search filters
+	const [filters, setFilters] = useState<IBuilderQuery['filters']>(() => {
+		// Initialize filters based on the initial endPointName prop
+		const initialItems = [...initialFilters.items];
+		return { op: 'AND', items: initialItems };
+	});
+
+	// Handler for changes from the QueryBuilderSearchV2 component
+	const handleFilterChange = useCallback(
+		(newFilters: IBuilderQuery['filters']): void => {
+			// 1. Update local filters state immediately
+			setFilters(newFilters);
+		},
+		[], // Dependencies for the callback
 	);

-	if (isError) {
-		return (
-			<div className="all-endpoints-error-state-wrapper">
-				<ErrorState refetch={refetch} />
-			</div>
-		);
-	}
+	const updatedCurrentQuery = useMemo(
+		() => ({
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					{
+						...currentQuery.builder.queryData[0],
+						dataSource: DataSource.TRACES,
+						filters, // Use the local filters state
+					},
+				],
+			},
+		}),
+		[filters, currentQuery],
+	);
+
+	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
+
+	const allEndpointsWidgetData = useMemo(
+		() => getAllEndpointsWidgetData(groupBy, domainName, filters),
+		[groupBy, domainName, filters],
+	);
+
+	const onRowClick = useCallback(
+		(props: any): void => {
+			setSelectedEndPointName(props[SPAN_ATTRIBUTES.URL_PATH] as string);
+			setSelectedView(VIEWS.ENDPOINT_STATS);
+			const initialItems = [
+				...filters.items,
+				...getGroupByFiltersFromGroupByValues(props, groupBy).items,
+			];
+			setInitialFiltersEndPointStats({
+				items: initialItems,
+				op: 'AND',
+			});
+		},
+		[
+			filters,
+			setInitialFiltersEndPointStats,
+			setSelectedEndPointName,
+			setSelectedView,
+			groupBy,
+		],
+	);

 	return (
 		<div className="all-endpoints-container">
+			<div className="all-endpoints-header">
+				<div className="filter-container">
+					<QueryBuilderSearchV2
+						query={query}
+						onChange={handleFilterChange}
+						placeholder="Search for filters..."
+					/>
+				</div>
+			</div>
 			<div className="group-by-container">
 				<div className="group-by-label"> Group by </div>
 				<Select
@@ -189,49 +205,17 @@ function AllEndPoints({
 					placeholder="Search for attribute"
 					options={groupByOptions}
 					onChange={handleGroupByChange}
+					onSearch={(value: string): void => setGroupBySearchValue(value)}
 				/>{' '}
 			</div>
 			<div className="endpoints-table-container">
-				<div className="endpoints-table-header">Endpoint overview</div>
-				<Table
-					columns={endPointsColumnsConfig}
-					loading={{
-						spinning: isLoading || isRefetching,
-						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-					}}
-					dataSource={isLoading || isRefetching ? [] : formattedEndPointsData}
-					locale={{
-						emptyText:
-							isLoading || isRefetching ? null : (
-								<div className="no-filtered-endpoints-message-container">
-									<div className="no-filtered-endpoints-message-content">
-										<img
-											src="/Icons/emptyState.svg"
-											alt="thinking-emoji"
-											className="empty-state-svg"
-										/>
-
-										<Typography.Text className="no-filtered-endpoints-message">
-											This query had no results. Edit your query and try again!
-										</Typography.Text>
-									</div>
-								</div>
-							),
-					}}
-					scroll={{ x: true }}
-					tableLayout="fixed"
-					onRow={(record): { onClick: () => void; className: string } => ({
-						onClick: (): void => handleRowClick(record),
-						className: 'clickable-row',
-					})}
-					expandable={{
-						expandedRowRender: groupBy.length > 0 ? expandedRowRender : undefined,
-						expandedRowKeys,
-						expandIconColumnIndex: -1,
-					}}
-					rowClassName={(_, index): string =>
-						index % 2 === 0 ? 'table-row-dark' : 'table-row-light'
-					}
+				<GridCard
+					widget={allEndpointsWidgetData}
+					isQueryEnabled
+					onDragSelect={(): void => {}}
+					customOnDragSelect={(): void => {}}
+					customTimeRange={timeRange}
+					customOnRowClick={onRowClick}
 				/>
 			</div>
 		</div>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke="#C0C1C3" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="m12.192 3.18-1.167 2.33-.583 1.165M7.31 12.74a.583.583 0 0 1-.835-.24L1.808 3.179"/><path d="M7 1.167c2.9 0 5.25.783 5.25 1.75 0 .966-2.35 1.75-5.25 1.75s-5.25-.784-5.25-1.75c0-.967 2.35-1.75 5.25-1.75ZM8.75 10.5h3.5M10.5 12.25v-3.5"/></g></svg>`
				`@@ -0,0 +1 @@`
				`<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14.666A6.667 6.667 0 1 0 8 1.333a6.667 6.667 0 0 0 0 13.333Z" fill="#C0C1C3" stroke="#C0C1C3" stroke-width="2"/><path d="M8 11.333v-4H6.333M8 4.667h.007" stroke="#121317" stroke-width="1.333"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="none" viewBox="0 0 192 192"><rect width="192" height="192" fill="url(#paint0_linear_1452_5317)" rx="24"/><path fill="#F2F2F2" d="M123.34 68.6596C119.655 41.0484 110.327 18 96 18C81.6731 18 72.3454 41.0484 68.6596 68.6596C41.0484 72.3454 18 81.6731 18 96C18 110.327 41.0525 119.655 68.6596 123.34C72.3454 150.948 81.6731 174 96 174C110.327 174 119.655 150.948 123.34 123.34C150.952 119.655 174 110.327 174 96C174 81.6731 150.948 72.3454 123.34 68.6596ZM67.7583 115.298C41.3151 111.479 25.893 102.737 25.893 96C25.893 89.2629 41.3151 80.5212 67.7583 76.7021C67.1764 83.0674 66.8733 89.566 66.8733 96C66.8733 102.434 67.1764 108.937 67.7583 115.298ZM96 25.893C102.737 25.893 111.479 41.3151 115.298 67.7583C108.937 67.1764 102.434 66.8733 96 66.8733C89.566 66.8733 83.0633 67.1764 76.7021 67.7583C80.5212 41.3151 89.2629 25.893 96 25.893ZM124.242 115.298C122.94 115.488 117.602 116.114 116.252 116.248C116.118 117.602 115.488 122.936 115.302 124.238C111.483 150.681 102.741 166.103 96.0041 166.103C89.267 166.103 80.5253 150.681 76.7061 124.238C76.5202 122.936 75.8898 117.598 75.7564 116.248C75.1421 109.979 74.7703 103.246 74.7703 96C74.7703 88.7537 75.1421 82.0206 75.7564 75.7483C82.0247 75.134 88.7577 74.7622 96.0041 74.7622C103.25 74.7622 109.983 75.134 116.252 75.7483C117.606 75.8817 122.94 76.5121 124.242 76.698C150.685 80.5172 166.111 89.2629 166.111 95.996C166.111 102.729 150.685 111.479 124.242 115.298Z"/><defs><linearGradient id="paint0_linear_1452_5317" x1="183" x2="0" y1="192" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#444CE7"/><stop offset="1" stop-color="#B664FF"/></linearGradient></defs></svg>