chore: updated test script

refactor: updated test directory
refactor: reverted back as working directory is specified as frontend
2023-12-15 13:46:16 +05:30 · 2023-12-15 13:46:16 +05:30 · 2023-12-15 13:46:16 +05:30 · 2023-12-15 13:46:16 +05:30 · 2023-12-15 13:46:16 +05:30 · 2023-12-15 13:46:16 +05:30
410 changed files with 2276 additions and 17022 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,8 +1,9 @@
 # CODEOWNERS info: https://help.github.com/en/articles/about-code-owners
 # Owners are automatically requested for review for PRs that changes code
 # that they own.
+* @ankitnayan

-/frontend/ @YounixM
+/frontend/ @palashgdev @YounixM
 /frontend/src/container/MetricsApplication @srikanthccv
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
 /deploy/ @prashant-shahi
--- a/.github/workflows/jest-code-coverage.yml
+++ b/.github/workflows/jest-code-coverage.yml
@@ -0,0 +1,32 @@
+name: Code Coverage
+on:
+  push:
+    branches:
+      - develop
+      - main
+      - release/v*
+  pull_request:
+    branches:
+      - develop
+      - main
+      - release/v*
+jobs:
+  coverage:
+    runs-on: ubuntu-latest
+    permissions:
+      checks: write
+      pull-requests: write
+      contents: write
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+      - uses: jwalton/gh-find-current-pr@v1
+        id: findPr
+      - uses: ArtiomTr/jest-coverage-report-action@v2
+        with:
+          package-manager: yarn
+          working-directory: frontend
+          test-script: yarn jest:coverage
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          output: comment
+          prnumber: ${{ steps.findPr.outputs.number }}
--- a/README.de-de.md
+++ b/README.de-de.md
@@ -11,6 +11,7 @@
        <img alt="tweet" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a>
 </p>

+
 <h3 align="center">
  <a href="https://signoz.io/docs"><b>Dokumentation</b></a> &bull;
  <a href="https://github.com/SigNoz/signoz/blob/develop/README.md"><b>Readme auf Englisch </b></a> &bull;
@@ -39,13 +40,12 @@ SigNoz hilft Entwicklern, Anwendungen zu überwachen und Probleme in ihren berei
 👉 Einfache Einrichtung von Benachrichtigungen mit dem selbst erstellbaren Abfrage-Builder.

 ##
-
 ### Anwendung Metriken

 ![application_metrics](https://user-images.githubusercontent.com/83692067/226637410-900dbc5e-6705-4b11-a10c-bd0faeb2a92f.png)

-### Verteiltes Tracing

+### Verteiltes Tracing
 <img width="2068" alt="distributed_tracing_2 2" src="https://user-images.githubusercontent.com/83692067/226536447-bae58321-6a22-4ed3-af80-e3e964cb3489.png">

 <img width="2068" alt="distributed_tracing_1" src="https://user-images.githubusercontent.com/83692067/226536462-939745b6-4f9d-45a6-8016-814837e7f7b4.png">
@@ -62,18 +62,22 @@ SigNoz hilft Entwicklern, Anwendungen zu überwachen und Probleme in ihren berei

 ![exceptions_light](https://user-images.githubusercontent.com/83692067/226637967-4188d024-3ac9-4799-be95-f5ea9c45436f.png)

+
 ### Alarme

 <img width="2068" alt="alerts_management" src="https://user-images.githubusercontent.com/83692067/226536548-2c81e2e8-c12d-47e8-bad7-c6be79055def.png">

+
 <br /><br />

+
 ## Werde Teil unserer Slack Community

 Sag Hi zu uns auf [Slack](https://signoz.io/slack) 👋

 <br /><br />

+
 ## Funktionen:

 - Einheitliche Benutzeroberfläche für Metriken, Traces und Logs. Keine Notwendigkeit, zwischen Prometheus und Jaeger zu wechseln, um Probleme zu debuggen oder ein separates Log-Tool wie Elastic neben Ihrer Metriken- und Traces-Stack zu verwenden.
@@ -89,6 +93,7 @@ Sag Hi zu uns auf [Slack](https://signoz.io/slack) 👋

 <br /><br />

+
 ## Wieso SigNoz?

 Als Entwickler fanden wir es anstrengend, uns für jede kleine Funktion, die wir haben wollten, auf Closed Source SaaS Anbieter verlassen zu müssen. Closed Source Anbieter überraschen ihre Kunden zum Monatsende oft mit hohen Rechnungen, die keine Transparenz bzgl. der Kostenaufteilung bieten.
@@ -111,10 +116,12 @@ Wir unterstützen [OpenTelemetry](https://opentelemetry.io) als Bibliothek, mit
 - Elixir
 - Rust

+
 Hier findest du die vollständige Liste von unterstützten Programmiersprachen - https://opentelemetry.io/docs/

 <br /><br />

+
 ## Erste Schritte mit SigNoz

 ### Bereitstellung mit Docker
@@ -131,6 +138,7 @@ Bitte folge den [hier](https://signoz.io/docs/deployment/helm_chart) aufgelistet

 <br /><br />

+
 ## Vergleiche mit bekannten Tools

 ### SigNoz vs Prometheus
@@ -171,6 +179,7 @@ Wir haben Benchmarks veröffentlicht, die Loki mit SigNoz vergleichen. Schauen S

 <br /><br />

+
 ## Zum Projekt beitragen

 Wir ❤️ Beiträge zum Projekt, egal ob große oder kleine. Bitte lies dir zuerst die [CONTRIBUTING.md](CONTRIBUTING.md), durch, bevor du anfängst, Beiträge zu SigNoz zu machen.
@@ -188,8 +197,6 @@ Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem #c
 #### Frontend

 - [Palash Gupta](https://github.com/palashgdev)
- [Yunus M](https://github.com/YounixM)
- [Rajat Dabade](https://github.com/Rajat-Dabade)

 #### DevOps

@@ -197,12 +204,16 @@ Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem #c

 <br /><br />

+
 ## Dokumentation

 Du findest unsere Dokumentation unter https://signoz.io/docs/. Falls etwas unverständlich ist oder fehlt, öffne gerne ein Github Issue mit dem Label `documentation` oder schreib uns über den Community Slack Channel.

+
+
 <br /><br />

+
 ## Gemeinschaft

 Werde Teil der [slack community](https://signoz.io/slack) um mehr über verteilte Einzelschritt-Fehlersuche, Messung von Systemzuständen oder SigNoz zu erfahren und sich mit anderen Nutzern und Mitwirkenden in Verbindung zu setzen.
--- a/README.md
+++ b/README.md
@@ -199,13 +199,10 @@ Not sure how to get started? Just ping us on `#contributing` in our [slack commu
 #### Frontend

 - [Palash Gupta](https://github.com/palashgdev)
- [Yunus M](https://github.com/YounixM)
- [Rajat Dabade](https://github.com/Rajat-Dabade)

 #### DevOps

 - [Prashant Shahi](https://github.com/prashant-shahi)
- [Dhawal Sanghvi](https://github.com/dhawal1248)

 <br /><br />

--- a/README.zh-cn.md
+++ b/README.zh-cn.md
@@ -19,7 +19,7 @@
  <a href="https://twitter.com/SigNozHq"><b>Twitter</b></a>
 </h3>

-##
+## 

 SigNoz 帮助开发人员监控应用并排查已部署应用的问题。你可以使用 SigNoz 实现如下能力:

@@ -67,7 +67,7 @@ SigNoz 帮助开发人员监控应用并排查已部署应用的问题。你可

 ## 加入我们 Slack 社区

-来 [Slack](https://signoz.io/slack) 和我们打招呼吧 👋
+来 [Slack](https://signoz.io/slack) 和我们打招呼吧 👋  

 <br /><br />

@@ -83,7 +83,7 @@ SigNoz 帮助开发人员监控应用并排查已部署应用的问题。你可

 - 通过 服务名、操作方式、延迟、错误、标签/注释 过滤 traces 数据

- 通过聚合 trace 数据而获得业务相关的 metrics。 比如你可以通过 `customer_type: gold` 或者 `deployment_version: v2` 或者 `external_call: paypal` 获取错误率和 P99 延迟数据
+- 通过聚合 trace 数据而获得业务相关的 metrics。 比如你可以通过  `customer_type: gold` 或者 `deployment_version: v2` 或者 `external_call: paypal` 获取错误率和 P99 延迟数据

 - 原生支持 OpenTelemetry 日志，高级日志查询，自动收集 k8s 相关日志

@@ -101,7 +101,7 @@ SigNoz 帮助开发人员监控应用并排查已部署应用的问题。你可

 我们想做一个自托管并且可开源的工具，像 DataDog 和 NewRelic 那样， 为那些担心数据隐私和安全的公司提供第三方服务。

-作为开源的项目，你完全可以自己掌控你的配置、样本和更新。你同样可以基于 SigNoz 拓展特定的业务模块。
+作为开源的项目，你完全可以自己掌控你的配置、样本和更新。你同样可以基于 SigNoz 拓展特定的业务模块。 

 ### 支持的编程语言:

@@ -153,9 +153,9 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric

 而且, SigNoz 相较于 Jaeger 拥有更对的高级功能:

- Jaegar UI 不能提供任何基于 traces 的 metrics 查询和过滤。
+- Jaegar UI 不能提供任何基于 traces 的 metrics 查询和过滤。 

- Jaeger 不能针对过滤的 traces 做聚合。 比如， p99 延迟的请求有个标签是 customer_type='premium'。 而这些在 SigNoz 可以轻松做到。
+- Jaeger 不能针对过滤的 traces 做聚合。 比如， p99 延迟的请求有个标签是  customer_type='premium'。 而这些在 SigNoz 可以轻松做到。

 <p>&nbsp  </p>

@@ -185,7 +185,7 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric

 我们 ❤️ 你的贡献，无论大小。 请先阅读 [CONTRIBUTING.md](CONTRIBUTING.md) 再开始给 SigNoz 做贡献。

-如果你不知道如何开始？ 只需要在 [slack 社区](https://signoz.io/slack) 通过 `#contributing` 频道联系我们。
+如果你不知道如何开始？ 只需要在  [slack 社区](https://signoz.io/slack) 通过 `#contributing` 频道联系我们。

 ### 项目维护人员

@@ -199,8 +199,6 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric
 #### 前端

 - [Palash Gupta](https://github.com/palashgdev)
- [Yunus M](https://github.com/YounixM)
- [Rajat Dabade](https://github.com/Rajat-Dabade)

 #### 运维开发

--- a/deploy/docker-swarm/clickhouse-setup/docker-compose.yaml
+++ b/deploy/docker-swarm/clickhouse-setup/docker-compose.yaml
@@ -146,7 +146,7 @@ services:
        condition: on-failure

  query-service:
-    image: signoz/query-service:0.36.2
+    image: signoz/query-service:0.35.1
    command:
      [
        "-config=/root/config/prometheus.yml",
@@ -186,7 +186,7 @@ services:
    <<: *db-depend

  frontend:
-    image: signoz/frontend:0.36.2
+    image: signoz/frontend:0.35.1
    deploy:
      restart_policy:
        condition: on-failure
@@ -199,7 +199,7 @@ services:
      - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf

  otel-collector:
-    image: signoz/signoz-otel-collector:0.88.6
+    image: signoz/signoz-otel-collector:0.88.3
    command:
      [
        "--config=/etc/otel-collector-config.yaml",
@@ -237,7 +237,7 @@ services:
      - query-service

  otel-collector-migrator:
-      image: signoz/signoz-schema-migrator:0.88.6
+      image: signoz/signoz-schema-migrator:0.88.3
      deploy:
        restart_policy:
          condition: on-failure
@@ -250,7 +250,7 @@ services:
        # - clickhouse-3

  otel-collector-metrics:
-    image: signoz/signoz-otel-collector:0.88.6
+    image: signoz/signoz-otel-collector:0.88.3
    command:
      [
        "--config=/etc/otel-collector-metrics-config.yaml",
--- a/deploy/docker/clickhouse-setup/docker-compose-core.yaml
+++ b/deploy/docker/clickhouse-setup/docker-compose-core.yaml
@@ -66,7 +66,7 @@ services:
      - --storage.path=/data

  otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.6}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.3}
    container_name: otel-migrator
    command:
      - "--dsn=tcp://clickhouse:9000"
@@ -81,7 +81,7 @@ services:
  # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
  otel-collector:
    container_name: signoz-otel-collector
-    image: signoz/signoz-otel-collector:0.88.6
+    image: signoz/signoz-otel-collector:0.88.3
    command:
      [
        "--config=/etc/otel-collector-config.yaml",
@@ -118,7 +118,7 @@ services:

  otel-collector-metrics:
    container_name: signoz-otel-collector-metrics
-    image: signoz/signoz-otel-collector:0.88.6
+    image: signoz/signoz-otel-collector:0.88.3
    command:
      [
        "--config=/etc/otel-collector-metrics-config.yaml",
--- a/deploy/docker/clickhouse-setup/docker-compose.yaml
+++ b/deploy/docker/clickhouse-setup/docker-compose.yaml
@@ -164,7 +164,7 @@ services:
  # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`

  query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.36.2}
+    image: signoz/query-service:${DOCKER_TAG:-0.35.1}
    container_name: signoz-query-service
    command:
      [
@@ -203,7 +203,7 @@ services:
    <<: *db-depend

  frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.36.2}
+    image: signoz/frontend:${DOCKER_TAG:-0.35.1}
    container_name: signoz-frontend
    restart: on-failure
    depends_on:
@@ -215,7 +215,7 @@ services:
      - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf

  otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.6}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.3}
    container_name: otel-migrator
    command:
      - "--dsn=tcp://clickhouse:9000"
@@ -229,7 +229,7 @@ services:


  otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.6}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.3}
    container_name: signoz-otel-collector
    command:
      [
@@ -269,7 +269,7 @@ services:
        condition: service_healthy

  otel-collector-metrics:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.6}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.3}
    container_name: signoz-otel-collector-metrics
    command:
      [
--- a/ee/query-service/Dockerfile
+++ b/ee/query-service/Dockerfile
@@ -18,7 +18,6 @@ COPY ee/query-service/bin/query-service-${TARGETOS}-${TARGETARCH} /root/query-se

 # copy prometheus YAML config
 COPY pkg/query-service/config/prometheus.yml /root/config/prometheus.yml
-COPY pkg/query-service/templates /root/templates

 # Make query-service executable for non-root users
 RUN chmod 755 /root /root/query-service
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,9 +36,6 @@
 		"@mdx-js/loader": "2.3.0",
 		"@mdx-js/react": "2.3.0",
 		"@monaco-editor/react": "^4.3.1",
-		"@radix-ui/react-tabs": "1.0.4",
-		"@radix-ui/react-tooltip": "1.0.7",
-		"@signozhq/design-tokens": "0.0.8",
 		"@uiw/react-md-editor": "3.23.5",
 		"@xstate/react": "^3.0.0",
 		"ansi-to-html": "0.7.2",
--- a/frontend/public/Images/eyesEmoji.svg
+++ b/frontend/public/Images/eyesEmoji.svg
@@ -1,19 +0,0 @@
-<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.36806 25.9481C5.93935 25.9481 3.15283 21.7098 3.15283 16.5002C3.15283 11.2907 5.94157 7.05238 9.36806 7.05238C12.7945 7.05238 15.5833 11.2907 15.5833 16.5002C15.5833 21.7098 12.7945 25.9481 9.36806 25.9481Z" fill="#FAFAFA"/>
-<path d="M9.36815 7.49694C10.8414 7.49694 12.2524 8.38594 13.3391 10.0017C14.499 11.7241 15.139 14.0333 15.139 16.5003C15.139 18.9673 14.499 21.2764 13.3391 22.9989C12.2524 24.6146 10.8414 25.5036 9.36815 25.5036C7.89489 25.5036 6.48385 24.6146 5.39724 22.9989C4.23508 21.2764 3.59734 18.9673 3.59734 16.5003C3.59734 14.0333 4.23731 11.7241 5.39724 10.0017C6.48385 8.38594 7.89267 7.49694 9.36815 7.49694ZM9.36815 6.60794C5.69056 6.60794 2.7085 11.0374 2.7085 16.5003C2.7085 21.9632 5.69056 26.3926 9.36815 26.3926C13.0457 26.3926 16.0278 21.9632 16.0278 16.5003C16.0278 11.0374 13.0457 6.60794 9.36815 6.60794Z" fill="#B0BEC5"/>
-<path d="M7.47266 15.5762C6.87269 15.0118 7.00602 13.8919 7.77487 13.0741C7.81486 13.0319 7.85486 12.9919 7.89708 12.9541C7.55488 12.7608 7.17934 12.6519 6.78381 12.6519C5.18611 12.6519 3.89062 14.414 3.89062 16.585C3.89062 18.756 5.18611 20.5182 6.78381 20.5182C8.3815 20.5182 9.67699 18.756 9.67699 16.585C9.67699 16.1962 9.63477 15.8184 9.55699 15.4629C8.83703 15.9806 7.97708 16.0495 7.47266 15.5762Z" fill="url(#paint0_linear_2122_5062)"/>
-<path d="M22.6294 26.3932C26.3074 26.3932 29.289 21.9642 29.289 16.5008C29.289 11.0374 26.3074 6.60847 22.6294 6.60847C18.9514 6.60847 15.9697 11.0374 15.9697 16.5008C15.9697 21.9642 18.9514 26.3932 22.6294 26.3932Z" fill="#EEEEEE"/>
-<path d="M22.6283 25.9493C19.2018 25.9493 16.4131 21.711 16.4131 16.5014C16.4131 11.2919 19.2018 7.05357 22.6283 7.05357C26.0548 7.05357 28.8435 11.2919 28.8435 16.5014C28.8435 21.711 26.057 25.9493 22.6283 25.9493Z" fill="#FAFAFA"/>
-<path d="M22.6284 7.49816C24.1017 7.49816 25.5127 8.38716 26.5993 10.0029C27.7592 11.7254 28.3992 14.0345 28.3992 16.5015C28.3992 18.9685 27.7592 21.2777 26.5993 23.0001C25.5127 24.6159 24.1017 25.5049 22.6284 25.5049C21.1551 25.5049 19.7441 24.6159 18.6575 23.0001C17.4976 21.2777 16.8576 18.9685 16.8576 16.5015C16.8576 14.0345 17.4976 11.7254 18.6575 10.0029C19.7441 8.38716 21.1551 7.49816 22.6284 7.49816ZM22.6284 6.60916C18.9508 6.60916 15.9688 11.0386 15.9688 16.5015C15.9688 21.9644 18.9508 26.3939 22.6284 26.3939C26.306 26.3939 29.2881 21.9644 29.2881 16.5015C29.2881 11.0386 26.306 6.60916 22.6284 6.60916Z" fill="#B0BEC5"/>
-<path d="M20.7339 15.5767C20.1339 15.0123 20.2672 13.8924 21.0361 13.0746C21.0761 13.0324 21.1161 12.9924 21.1583 12.9546C20.8161 12.7613 20.4406 12.6524 20.045 12.6524C18.4473 12.6524 17.1519 14.4146 17.1519 16.5856C17.1519 18.7566 18.4473 20.5187 20.045 20.5187C21.6427 20.5187 22.9382 18.7566 22.9382 16.5856C22.9382 16.1967 22.896 15.8189 22.8182 15.4634C22.1005 15.9812 21.2383 16.05 20.7339 15.5767Z" fill="url(#paint1_linear_2122_5062)"/>
-<defs>
-<linearGradient id="paint0_linear_2122_5062" x1="6.78232" y1="12.651" x2="6.78232" y2="20.5188" gradientUnits="userSpaceOnUse">
-<stop stop-color="#424242"/>
-<stop offset="1" stop-color="#212121"/>
-</linearGradient>
-<linearGradient id="paint1_linear_2122_5062" x1="20.0449" y1="12.6515" x2="20.0449" y2="20.5193" gradientUnits="userSpaceOnUse">
-<stop stop-color="#424242"/>
-<stop offset="1" stop-color="#212121"/>
-</linearGradient>
-</defs>
-</svg>
--- a/frontend/public/Logos/cloudwatch.png
+++ b/frontend/public/Logos/cloudwatch.png
--- a/frontend/public/Logos/dotnet.png
+++ b/frontend/public/Logos/dotnet.png
--- a/frontend/public/Logos/heroku.png
+++ b/frontend/public/Logos/heroku.png
--- a/frontend/public/Logos/http.png
+++ b/frontend/public/Logos/http.png
--- a/frontend/public/Logos/signoz-brand-logo.svg
+++ b/frontend/public/Logos/signoz-brand-logo.svg
@@ -1,11 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2048_2251)">
-<path opacity="0.9" d="M8.02226 15.9866C3.56539 15.9866 -6.10352e-05 12.4896 -6.10352e-05 8.11832C-6.10352e-05 3.79075 3.56539 0.25 8.02226 0.25H13.0584C14.7075 0.25 15.9999 1.56139 15.9999 3.13506V8.11832C15.9999 12.4896 12.4345 15.9866 8.02226 15.9866Z" fill="#F25733"/>
-<path d="M7.95919 4.71207C4.63025 4.71207 2.75514 7.46868 2.67693 7.58603C2.48413 7.87508 2.48413 8.24888 2.67707 8.53816C2.75514 8.65528 4.63025 11.4119 7.95919 11.4119C11.2881 11.4119 13.1633 8.65528 13.2414 8.53792C13.4342 8.24888 13.4342 7.87508 13.2413 7.58582C13.1632 7.46868 11.2881 4.71207 7.95919 4.71207ZM3.13771 8.23088C3.06925 8.12832 3.06925 7.99571 3.13771 7.89307C3.20059 7.79867 4.53564 5.83764 6.92256 5.36723C5.84092 5.78476 5.07127 6.83485 5.07127 8.062C5.07127 9.28912 5.84092 10.3392 6.92256 10.7567C4.53564 10.2863 3.20059 8.32528 3.13771 8.23088ZM6.62838 8.062C6.62838 8.21488 6.50443 8.3388 6.35151 8.3388C6.19859 8.3388 6.07465 8.21488 6.07465 8.062C6.07465 7.02287 6.92003 6.17748 7.95916 6.17748C8.11207 6.17748 8.23599 6.30141 8.23599 6.45434C8.23599 6.60727 8.11207 6.73119 7.95916 6.73119C7.22535 6.73119 6.62838 7.32815 6.62838 8.062ZM7.95919 8.73504C7.58803 8.73504 7.2861 8.43312 7.2861 8.062C7.2861 7.69085 7.58803 7.3889 7.95919 7.3889C8.33039 7.3889 8.63231 7.69083 8.63231 8.062C8.63231 8.43312 8.33039 8.73504 7.95919 8.73504ZM12.7806 8.23088C12.7178 8.32528 11.3827 10.2863 8.99583 10.7567C10.0775 10.3392 10.8471 9.28912 10.8471 8.062C10.8471 6.83487 10.0775 5.78477 8.99583 5.36724C11.3827 5.83768 12.7178 7.7987 12.7806 7.89307C12.8491 7.99571 12.8491 8.12832 12.7806 8.23088Z" fill="#F9F2F9"/>
-</g>
-<defs>
-<clipPath id="clip0_2048_2251">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/frontend/public/Logos/vercel.png
+++ b/frontend/public/Logos/vercel.png
--- a/frontend/public/locales/en-GB/organizationsettings.json
+++ b/frontend/public/locales/en-GB/organizationsettings.json
@@ -14,6 +14,5 @@
 	"delete_domain_message": "Are you sure you want to delete this domain?",
 	"delete_domain": "Delete Domain",
 	"add_domain": "Add Domains",
-	"saml_settings": "Your SAML settings have been saved, please login from incognito window to confirm that it has been set up correctly",
-	"invite_link_share_manually": "After inviting members, please copy the invite link and send them the link manually"
+	"saml_settings":"Your SAML settings have been saved, please login from incognito window to confirm that it has been set up correctly"
 }
--- a/frontend/public/locales/en-GB/services.json
+++ b/frontend/public/locales/en-GB/services.json
@@ -1,3 +0,0 @@
-{
-	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via Intercom support."
-}
--- a/frontend/public/locales/en/organizationsettings.json
+++ b/frontend/public/locales/en/organizationsettings.json
@@ -14,6 +14,5 @@
 	"delete_domain_message": "Are you sure you want to delete this domain?",
 	"delete_domain": "Delete Domain",
 	"add_domain": "Add Domains",
-	"saml_settings": "Your SAML settings have been saved, please login from incognito window to confirm that it has been set up correctly",
-	"invite_link_share_manually": "After inviting members, please copy the invite link and send them the link manually"
+	"saml_settings":"Your SAML settings have been saved, please login from incognito window to confirm that it has been set up correctly"
 }
--- a/frontend/public/locales/en/services.json
+++ b/frontend/public/locales/en/services.json
@@ -1,3 +0,0 @@
-{
-	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via Intercom support."
-}
--- a/frontend/public/locales/en/titles.json
+++ b/frontend/public/locales/en/titles.json
@@ -31,7 +31,6 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
-	"OLD_LOGS_EXPLORER": "SigNoz | Old Logs Explorer",
 	"LIVE_LOGS": "SigNoz | Live Logs",
 	"LOGS_PIPELINES": "SigNoz | Logs Pipelines",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -112,25 +112,17 @@ export const MySettings = Loadable(
 );

 export const Logs = Loadable(
-	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
+	() => import(/* webpackChunkName: "Logs" */ 'pages/Logs'),
 );

 export const LogsExplorer = Loadable(
-	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/LogsModulePage'),
-);
-
-export const OldLogsExplorer = Loadable(
-	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/Logs'),
+	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/LogsExplorer'),
 );

 export const LiveLogs = Loadable(
 	() => import(/* webpackChunkName: "Live Logs" */ 'pages/LiveLogs'),
 );

-export const PipelinePage = Loadable(
-	() => import(/* webpackChunkName: "Pipelines" */ 'pages/LogsModulePage'),
-);
-
 export const Login = Loadable(
 	() => import(/* webpackChunkName: "Login" */ 'pages/Login'),
 );
@@ -159,6 +151,10 @@ export const LogsIndexToFields = Loadable(
 		import(/* webpackChunkName: "LogsIndexToFields Page" */ 'pages/LogsSettings'),
 );

+export const PipelinePage = Loadable(
+	() => import(/* webpackChunkName: "Pipelines" */ 'pages/Pipelines'),
+);
+
 export const BillingPage = Loadable(
 	() => import(/* webpackChunkName: "BillingPage" */ 'pages/Billing'),
 );
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -23,7 +23,6 @@ import {
 	LogsIndexToFields,
 	MySettings,
 	NewDashboardPage,
-	OldLogsExplorer,
 	Onboarding,
 	OrganizationSettings,
 	PasswordReset,
@@ -247,13 +246,6 @@ const routes: AppRoutes[] = [
 		key: 'LOGS_EXPLORER',
 		isPrivate: true,
 	},
-	{
-		path: ROUTES.OLD_LOGS_EXPLORER,
-		exact: true,
-		component: OldLogsExplorer,
-		key: 'OLD_LOGS_EXPLORER',
-		isPrivate: true,
-	},
 	{
 		path: ROUTES.LIVE_LOGS,
 		exact: true,
--- a/frontend/src/ReactI18/index.tsx
+++ b/frontend/src/ReactI18/index.tsx
@@ -1,10 +1,9 @@
+import cacheBursting from 'i18n-translations-hash.json';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';

-import cacheBursting from '../../i18n-translations-hash.json';
-
 i18n
 	// load translation using http -> see /public/locales
 	.use(Backend)
--- a/frontend/src/api/dashboard/queryRangeFormat.ts
+++ b/frontend/src/api/dashboard/queryRangeFormat.ts
@@ -1,15 +0,0 @@
-import { ApiV3Instance as axios } from 'api';
-import { ApiResponse } from 'types/api';
-import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
-import { QueryRangePayload } from 'types/api/metrics/getQueryRange';
-
-interface IQueryRangeFormat {
-	compositeQuery: ICompositeMetricQuery;
-}
-
-export const getQueryRangeFormat = (
-	props?: Partial<QueryRangePayload>,
-): Promise<IQueryRangeFormat> =>
-	axios
-		.post<ApiResponse<IQueryRangeFormat>>('/query_range/format', props)
-		.then((res) => res.data.data);
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss
@@ -1,91 +0,0 @@
-.custom-time-picker {
-	display: flex;
-	flex-direction: column;
-}
-
-.time-options-container {
-	.time-options-item {
-		margin: 2px 0;
-		padding: 8px;
-		border-radius: 2px;
-
-		&.active {
-			background-color: rgba($color: #000000, $alpha: 0.2);
-
-			&:hover {
-				cursor: pointer;
-				background-color: rgba($color: #000000, $alpha: 0.3);
-			}
-		}
-
-		&:hover {
-			cursor: pointer;
-			background-color: rgba($color: #000000, $alpha: 0.3);
-		}
-	}
-}
-
-.time-selection-dropdown-content {
-	min-width: 172px;
-	width: 100%;
-}
-
-.timeSelection-input {
-	display: flex;
-	gap: 8px;
-	height: 33px;
-	align-items: center;
-	padding: 4px 8px;
-	padding-left: 0px !important;
-
-	input::placeholder {
-		color: white;
-	}
-
-	input:focus::placeholder {
-		color: rgba($color: #ffffff, $alpha: 0.4);
-	}
-}
-
-.valid-format-error {
-	margin-top: 4px;
-	color: var(--bg-cherry-400) !important;
-	font-size: 13px !important;
-	font-weight: 400 !important;
-}
-
-.lightMode {
-	.time-options-container {
-		.time-options-item {
-			&.active {
-				background-color: rgba($color: #ffffff, $alpha: 0.2);
-
-				&:hover {
-					cursor: pointer;
-					background-color: rgba($color: #ffffff, $alpha: 0.3);
-				}
-			}
-
-			&:hover {
-				cursor: pointer;
-				background-color: rgba($color: #ffffff, $alpha: 0.3);
-			}
-		}
-	}
-
-	.timeSelection-input {
-		display: flex;
-		gap: 8px;
-		align-items: center;
-		padding: 4px 8px;
-		padding-left: 0px !important;
-
-		input::placeholder {
-			color: var(---bg-ink-300);
-		}
-
-		input:focus::placeholder {
-			color: rgba($color: #000000, $alpha: 0.4);
-		}
-	}
-}
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
@@ -1,310 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-import './CustomTimePicker.styles.scss';
-
-import { Input, Popover, Tooltip, Typography } from 'antd';
-import cx from 'classnames';
-import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
-import { Options } from 'container/TopNav/DateTimeSelection/config';
-import {
-	FixedDurationSuggestionOptions,
-	RelativeDurationSuggestionOptions,
-} from 'container/TopNav/DateTimeSelectionV2/config';
-import dayjs from 'dayjs';
-import { defaultTo, noop } from 'lodash-es';
-import debounce from 'lodash-es/debounce';
-import { CheckCircle, ChevronDown, Clock } from 'lucide-react';
-import {
-	ChangeEvent,
-	Dispatch,
-	SetStateAction,
-	useEffect,
-	useState,
-} from 'react';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';
-
-const maxAllowedMinTimeInMonths = 6;
-
-interface CustomTimePickerProps {
-	onSelect: (value: string) => void;
-	onError: (value: boolean) => void;
-	selectedValue: string;
-	selectedTime: string;
-	onValidCustomDateChange: ([t1, t2]: any[]) => void;
-	open: boolean;
-	setOpen: Dispatch<SetStateAction<boolean>>;
-	items: any[];
-	newPopover?: boolean;
-	customDateTimeVisible?: boolean;
-	setCustomDTPickerVisible?: Dispatch<SetStateAction<boolean>>;
-	onCustomDateHandler?: (dateTimeRange: DateTimeRangeType) => void;
-	handleGoLive?: () => void;
-}
-
-function CustomTimePicker({
-	onSelect,
-	onError,
-	items,
-	selectedValue,
-	selectedTime,
-	open,
-	setOpen,
-	onValidCustomDateChange,
-	newPopover,
-	customDateTimeVisible,
-	setCustomDTPickerVisible,
-	onCustomDateHandler,
-	handleGoLive,
-}: CustomTimePickerProps): JSX.Element {
-	const [
-		selectedTimePlaceholderValue,
-		setSelectedTimePlaceholderValue,
-	] = useState('Select / Enter Time Range');
-
-	const [inputValue, setInputValue] = useState('');
-	const [inputStatus, setInputStatus] = useState<'' | 'error' | 'success'>('');
-	const [inputErrorMessage, setInputErrorMessage] = useState<string | null>(
-		null,
-	);
-	const [isInputFocused, setIsInputFocused] = useState(false);
-
-	const getSelectedTimeRangeLabel = (
-		selectedTime: string,
-		selectedTimeValue: string,
-	): string => {
-		if (selectedTime === 'custom') {
-			return selectedTimeValue;
-		}
-
-		for (let index = 0; index < Options.length; index++) {
-			if (Options[index].value === selectedTime) {
-				return Options[index].label;
-			}
-		}
-		for (
-			let index = 0;
-			index < RelativeDurationSuggestionOptions.length;
-			index++
-		) {
-			if (RelativeDurationSuggestionOptions[index].value === selectedTime) {
-				return RelativeDurationSuggestionOptions[index].label;
-			}
-		}
-		for (let index = 0; index < FixedDurationSuggestionOptions.length; index++) {
-			if (FixedDurationSuggestionOptions[index].value === selectedTime) {
-				return FixedDurationSuggestionOptions[index].label;
-			}
-		}
-
-		return '';
-	};
-
-	useEffect(() => {
-		const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
-
-		setSelectedTimePlaceholderValue(value);
-	}, [selectedTime, selectedValue]);
-
-	const hide = (): void => {
-		setOpen(false);
-	};
-
-	const handleOpenChange = (newOpen: boolean): void => {
-		setOpen(newOpen);
-	};
-
-	const debouncedHandleInputChange = debounce((inputValue): void => {
-		const isValidFormat = /^(\d+)([mhdw])$/.test(inputValue);
-		if (isValidFormat) {
-			setInputStatus('success');
-			onError(false);
-			setInputErrorMessage(null);
-
-			const match = inputValue.match(/^(\d+)([mhdw])$/);
-
-			const value = parseInt(match[1], 10);
-			const unit = match[2];
-
-			const currentTime = dayjs();
-			const maxAllowedMinTime = currentTime.subtract(
-				maxAllowedMinTimeInMonths,
-				'month',
-			);
-			let minTime = null;
-
-			switch (unit) {
-				case 'm':
-					minTime = currentTime.subtract(value, 'minute');
-					break;
-
-				case 'h':
-					minTime = currentTime.subtract(value, 'hour');
-					break;
-				case 'd':
-					minTime = currentTime.subtract(value, 'day');
-					break;
-				case 'w':
-					minTime = currentTime.subtract(value, 'week');
-					break;
-				default:
-					break;
-			}
-
-			if (minTime && minTime < maxAllowedMinTime) {
-				setInputStatus('error');
-				onError(true);
-				setInputErrorMessage('Please enter time less than 6 months');
-			} else {
-				onValidCustomDateChange([minTime, currentTime]);
-			}
-		} else {
-			setInputStatus('error');
-			onError(true);
-			setInputErrorMessage(null);
-		}
-	}, 300);
-
-	const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
-		const inputValue = event.target.value;
-
-		if (inputValue.length > 0) {
-			setOpen(false);
-		} else {
-			setOpen(true);
-		}
-
-		setInputValue(inputValue);
-
-		// Call the debounced function with the input value
-		debouncedHandleInputChange(inputValue);
-	};
-
-	const handleSelect = (label: string, value: string): void => {
-		onSelect(value);
-		setSelectedTimePlaceholderValue(label);
-		setInputStatus('');
-		onError(false);
-		setInputErrorMessage(null);
-		setInputValue('');
-		if (value !== 'custom') {
-			hide();
-		}
-	};
-
-	const content = (
-		<div className="time-selection-dropdown-content">
-			<div className="time-options-container">
-				{items?.map(({ value, label }) => (
-					<div
-						onClick={(): void => {
-							handleSelect(label, value);
-						}}
-						key={value}
-						className={cx(
-							'time-options-item',
-							selectedValue === value ? 'active' : '',
-						)}
-					>
-						{label}
-					</div>
-				))}
-			</div>
-		</div>
-	);
-
-	const handleFocus = (): void => {
-		setIsInputFocused(true);
-	};
-
-	const handleBlur = (): void => {
-		setIsInputFocused(false);
-	};
-
-	return (
-		<div className="custom-time-picker">
-			<Popover
-				className="timeSelection-input-container"
-				placement="bottomRight"
-				getPopupContainer={popupContainer}
-				rootClassName="date-time-root"
-				content={
-					newPopover ? (
-						<CustomTimePickerPopoverContent
-							setIsOpen={setOpen}
-							customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
-							setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
-							onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
-							onSelectHandler={handleSelect}
-							handleGoLive={defaultTo(handleGoLive, noop)}
-							options={items}
-						/>
-					) : (
-						content
-					)
-				}
-				arrow={false}
-				trigger="hover"
-				open={open}
-				onOpenChange={handleOpenChange}
-				style={{
-					padding: 0,
-				}}
-			>
-				<Input
-					className="timeSelection-input"
-					type="text"
-					style={{
-						minWidth: '120px',
-						width: '100%',
-					}}
-					status={inputValue && inputStatus === 'error' ? 'error' : ''}
-					allowClear={!isInputFocused && selectedTime === 'custom'}
-					placeholder={
-						isInputFocused
-							? 'Time Format (1m or 2h or 3d or 4w)'
-							: selectedTimePlaceholderValue
-					}
-					value={inputValue}
-					onFocus={handleFocus}
-					onBlur={handleBlur}
-					onChange={handleInputChange}
-					prefix={
-						inputValue && inputStatus === 'success' ? (
-							<CheckCircle size={14} color="#51E7A8" />
-						) : (
-							<Tooltip title="Enter time in format (e.g., 1m, 2h, 3d, 4w)">
-								<Clock size={14} />
-							</Tooltip>
-						)
-					}
-					suffix={
-						<ChevronDown
-							size={14}
-							onClick={(): void => {
-								setOpen(!open);
-							}}
-						/>
-					}
-				/>
-			</Popover>
-
-			{inputStatus === 'error' && inputErrorMessage && (
-				<Typography.Title level={5} className="valid-format-error">
-					{inputErrorMessage}
-				</Typography.Title>
-			)}
-		</div>
-	);
-}
-
-export default CustomTimePicker;
-
-CustomTimePicker.defaultProps = {
-	newPopover: false,
-	customDateTimeVisible: false,
-	setCustomDTPickerVisible: noop,
-	onCustomDateHandler: noop,
-	handleGoLive: noop,
-};
--- a/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
@@ -1,121 +0,0 @@
-import { Button, DatePicker } from 'antd';
-import ROUTES from 'constants/routes';
-import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
-import {
-	FixedDurationSuggestionOptions,
-	Option,
-	RelativeDurationSuggestionOptions,
-} from 'container/TopNav/DateTimeSelectionV2/config';
-import dayjs, { Dayjs } from 'dayjs';
-import { Dispatch, SetStateAction, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
-
-interface CustomTimePickerPopoverContentProps {
-	options: any[];
-	setIsOpen: Dispatch<SetStateAction<boolean>>;
-	customDateTimeVisible: boolean;
-	setCustomDTPickerVisible: Dispatch<SetStateAction<boolean>>;
-	onCustomDateHandler: (dateTimeRange: DateTimeRangeType) => void;
-	onSelectHandler: (label: string, value: string) => void;
-	handleGoLive: () => void;
-}
-
-function CustomTimePickerPopoverContent({
-	options,
-	setIsOpen,
-	customDateTimeVisible,
-	setCustomDTPickerVisible,
-	onCustomDateHandler,
-	onSelectHandler,
-	handleGoLive,
-}: CustomTimePickerPopoverContentProps): JSX.Element {
-	const { RangePicker } = DatePicker;
-	const { pathname } = useLocation();
-
-	const isLogsExplorerPage = useMemo(() => pathname === ROUTES.LOGS_EXPLORER, [
-		pathname,
-	]);
-
-	const disabledDate = (current: Dayjs): boolean => {
-		const currentDay = dayjs(current);
-		return currentDay.isAfter(dayjs());
-	};
-
-	const onPopoverClose = (visible: boolean): void => {
-		if (!visible) {
-			setCustomDTPickerVisible(false);
-		}
-		setIsOpen(visible);
-	};
-
-	const onModalOkHandler = (date_time: any): void => {
-		if (date_time?.[1]) {
-			onPopoverClose(false);
-		}
-		onCustomDateHandler(date_time);
-	};
-	function getTimeChips(options: Option[]): JSX.Element {
-		return (
-			<div className="relative-date-time-section">
-				{options.map((option) => (
-					<Button
-						type="text"
-						className="time-btns"
-						key={option.label + option.value}
-						onClick={(): void => {
-							onSelectHandler(option.label, option.value);
-						}}
-					>
-						{option.label}
-					</Button>
-				))}
-			</div>
-		);
-	}
-
-	return (
-		<div className="date-time-popover">
-			<div className="date-time-options">
-				{isLogsExplorerPage && (
-					<Button className="data-time-live" type="text" onClick={handleGoLive}>
-						Live
-					</Button>
-				)}
-				{options.map((option) => (
-					<Button
-						type="text"
-						key={option.label + option.value}
-						onClick={(): void => {
-							onSelectHandler(option.label, option.value);
-						}}
-						className="date-time-options-btn"
-					>
-						{option.label}
-					</Button>
-				))}
-			</div>
-			<div className="relative-date-time">
-				{customDateTimeVisible ? (
-					<RangePicker
-						disabledDate={disabledDate}
-						allowClear
-						onCalendarChange={onModalOkHandler}
-					/>
-				) : (
-					<>
-						<div>
-							<div className="time-heading">RELATIVE TIMES</div>
-							<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
-						</div>
-						<div>
-							<div className="time-heading">FIXED TIMES</div>
-							<div>{getTimeChips(FixedDurationSuggestionOptions)}</div>
-						</div>
-					</>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default CustomTimePickerPopoverContent;
--- a/frontend/src/components/ExplorerCard/ExplorerCard.tsx
+++ b/frontend/src/components/ExplorerCard/ExplorerCard.tsx
@@ -6,6 +6,7 @@ import {
 } from '@ant-design/icons';
 import {
 	Button,
+	Card,
 	Col,
 	Dropdown,
 	MenuProps,
@@ -151,100 +152,95 @@ function ExplorerCard({
 	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
 	const saveButtonIcon = isQueryUpdated ? null : <SaveOutlined />;

-	const showSaveView = false;
-
 	return (
 		<>
-			{showSaveView && (
-				<ExplorerCardHeadContainer size="small">
-					<Row align="middle">
-						<Col span={6}>
-							<Space>
-								<Typography>Query Builder</Typography>
-								<TextToolTip
-									url={ExploreHeaderToolTip.url}
-									text={ExploreHeaderToolTip.text}
-									useFilledIcon={false}
-								/>
-							</Space>
-						</Col>
-						<OffSetCol span={18}>
-							<Space size="large">
-								{viewsData?.data.data && viewsData?.data.data.length && (
-									<Space>
-										<Select
-											getPopupContainer={popupContainer}
-											loading={isLoading || isRefetching}
-											showSearch
-											placeholder="Select a view"
-											dropdownStyle={DropDownOverlay}
-											dropdownMatchSelectWidth={false}
-											optionLabelProp="value"
-											value={viewName || undefined}
-										>
-											{viewsData?.data.data.map((view) => (
-												<Select.Option key={view.uuid} value={view.name}>
-													<MenuItemGenerator
-														viewName={view.name}
-														viewKey={viewKey}
-														createdBy={view.createdBy}
-														uuid={view.uuid}
-														refetchAllView={refetchAllView}
-														viewData={viewsData.data.data}
-														sourcePage={sourcepage}
-													/>
-												</Select.Option>
-											))}
-										</Select>
-									</Space>
-								)}
-								{isQueryUpdated && (
-									<Button
-										type="primary"
-										icon={<SaveOutlined />}
-										onClick={onUpdateQueryHandler}
+			<ExplorerCardHeadContainer size="small">
+				<Row align="middle">
+					<Col span={6}>
+						<Space>
+							<Typography>Query Builder</Typography>
+							<TextToolTip
+								url={ExploreHeaderToolTip.url}
+								text={ExploreHeaderToolTip.text}
+								useFilledIcon={false}
+							/>
+						</Space>
+					</Col>
+					<OffSetCol span={18}>
+						<Space size="large">
+							{viewsData?.data.data && viewsData?.data.data.length && (
+								<Space>
+									<Select
+										getPopupContainer={popupContainer}
+										loading={isLoading || isRefetching}
+										showSearch
+										placeholder="Select a view"
+										dropdownStyle={DropDownOverlay}
+										dropdownMatchSelectWidth={false}
+										optionLabelProp="value"
+										value={viewName || undefined}
 									>
-										Save changes
-									</Button>
-								)}
-								<Popover
-									getPopupContainer={popupContainer}
-									placement="bottomLeft"
-									trigger="click"
-									content={
-										<SaveViewWithName
-											sourcePage={sourcepage}
-											handlePopOverClose={handleOpenChange}
-											refetchAllView={refetchAllView}
-										/>
-									}
-									showArrow={false}
-									open={isOpen}
-									onOpenChange={handleOpenChange}
+										{viewsData?.data.data.map((view) => (
+											<Select.Option key={view.uuid} value={view.name}>
+												<MenuItemGenerator
+													viewName={view.name}
+													viewKey={viewKey}
+													createdBy={view.createdBy}
+													uuid={view.uuid}
+													refetchAllView={refetchAllView}
+													viewData={viewsData.data.data}
+													sourcePage={sourcepage}
+												/>
+											</Select.Option>
+										))}
+									</Select>
+								</Space>
+							)}
+							{isQueryUpdated && (
+								<Button
+									type="primary"
+									icon={<SaveOutlined />}
+									onClick={onUpdateQueryHandler}
 								>
-									<Button
-										type={saveButtonType}
-										icon={saveButtonIcon}
-										data-testid="traces-save-view-action"
-									>
-										{isQueryUpdated
-											? SaveButtonText.SAVE_AS_NEW_VIEW
-											: SaveButtonText.SAVE_VIEW}
-									</Button>
-								</Popover>
-								<ShareAltOutlined onClick={onCopyUrlHandler} />
-								{viewKey && (
-									<Dropdown trigger={['click']} menu={moreOptionMenu}>
-										<MoreOutlined />
-									</Dropdown>
-								)}
-							</Space>
-						</OffSetCol>
-					</Row>
-				</ExplorerCardHeadContainer>
-			)}
-
-			<div>{children}</div>
+									Save changes
+								</Button>
+							)}
+							<Popover
+								getPopupContainer={popupContainer}
+								placement="bottomLeft"
+								trigger="click"
+								content={
+									<SaveViewWithName
+										sourcePage={sourcepage}
+										handlePopOverClose={handleOpenChange}
+										refetchAllView={refetchAllView}
+									/>
+								}
+								showArrow={false}
+								open={isOpen}
+								onOpenChange={handleOpenChange}
+							>
+								<Button
+									type={saveButtonType}
+									icon={saveButtonIcon}
+									data-testid="traces-save-view-action"
+								>
+									{isQueryUpdated
+										? SaveButtonText.SAVE_AS_NEW_VIEW
+										: SaveButtonText.SAVE_VIEW}
+								</Button>
+							</Popover>
+							<ShareAltOutlined onClick={onCopyUrlHandler} />
+							{viewKey && (
+								<Dropdown trigger={['click']} menu={moreOptionMenu}>
+									<MoreOutlined />
+								</Dropdown>
+							)}
+						</Space>
+					</OffSetCol>
+				</Row>
+			</ExplorerCardHeadContainer>
+			<Card>{children}</Card>
 		</>
 	);
 }
--- a/frontend/src/components/ExplorerCard/styles.ts
+++ b/frontend/src/components/ExplorerCard/styles.ts
@@ -3,7 +3,6 @@ import styled, { CSSProperties } from 'styled-components';

 export const ExplorerCardHeadContainer = styled(Card)`
 	margin: 1rem 0;
-	padding: 0;
 `;

 export const OffSetCol = styled(Col)`
--- a/frontend/src/components/LogDetail/LogDetail.interfaces.ts
+++ b/frontend/src/components/LogDetail/LogDetail.interfaces.ts
@@ -3,11 +3,8 @@ import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ActionItemProps } from 'container/LogDetailedView/ActionItem';
 import { ILog } from 'types/api/logs/log';

-import { VIEWS } from './constants';
-
 export type LogDetailProps = {
 	log: ILog | null;
-	selectedTab: VIEWS;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
-	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
+	Pick<ActionItemProps, 'onClickActionItem'> &
 	Pick<DrawerProps, 'onClose'>;
--- a/frontend/src/components/LogDetail/LogDetails.styles.scss
+++ b/frontend/src/components/LogDetail/LogDetails.styles.scss
@@ -1,224 +0,0 @@
-.log-detail-drawer {
-	border-left: 1px solid var(--bg-slate-500);
-	background: var(--bg-ink-400);
-	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-	.ant-drawer-header {
-		padding: 8px 16px;
-		border-bottom: none;
-
-		align-items: stretch;
-
-		border-bottom: 1px solid var(--bg-slate-500);
-		background: var(--bg-ink-400);
-	}
-
-	.ant-drawer-close {
-		margin-inline-end: 0px;
-	}
-
-	.ant-drawer-body {
-		padding: 16px;
-	}
-
-	.title {
-		color: var(--text-vanilla-400);
-		font-family: Inter;
-		font-size: var(--font-size-sm);
-		font-style: normal;
-		font-weight: var(--font-weight-normal);
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-	}
-
-	.radio-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding-top: var(--padding-1);
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
-		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-	}
-
-	.log-detail-drawer__log {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		position: relative;
-
-		.log-body {
-			font-family: 'SF Mono';
-			font-family: 'Space Mono', monospace;
-
-			font-size: var(--font-size-sm);
-			font-weight: var(--font-weight-normal);
-			line-height: 18px;
-			letter-spacing: -0.07px;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			color: var(--text-vanilla-400);
-			opacity: 0.6;
-		}
-
-		.log-type-indicator {
-			height: 24px;
-			border: 2px solid var(--bg-slate-400);
-			border-radius: 5px;
-			margin-left: 0;
-
-			&.INFO {
-				border-color: #1d212d;
-			}
-
-			&.WARNING {
-				border-color: #ffcd56;
-			}
-
-			&.ERROR {
-				border-color: #e5484d;
-			}
-		}
-
-		.log-overflow-shadow {
-			background: linear-gradient(270deg, #121317 10.4%, rgba(18, 19, 23, 0) 100%);
-
-			width: 196px;
-			position: absolute;
-			right: 0;
-		}
-	}
-
-	.tabs-and-search {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin: 16px 0;
-
-		.action-btn {
-			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		.json-action-btn {
-			display: flex;
-			gap: 8px;
-		}
-	}
-
-	.views-tabs {
-		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);
-			width: 114px;
-		}
-
-		.tab::before {
-			background: var(--bg-slate-400);
-		}
-
-		.selected_view {
-			background: var(--bg-slate-300);
-			color: var(--text-vanilla-100);
-			border: 1px solid var(--bg-slate-400);
-		}
-
-		.selected_view::before {
-			background: var(--bg-slate-400);
-		}
-	}
-
-	.search-input {
-		margin-top: var(--margin-2);
-		border: 1px solid var(--bg-slate-400);
-		height: 46px;
-		padding: var(--padding-1) var(--padding-2);
-	}
-}
-
-.lightMode {
-	.ant-drawer-header {
-		border-bottom: 1px solid var(--bg-vanilla-400);
-		background: var(--bg-vanilla-100);
-	}
-
-	.log-detail-drawer {
-		.title {
-			color: var(--text-ink-300);
-		}
-
-		.log-detail-drawer__log {
-			.log-overflow-shadow {
-				background: linear-gradient(
-					270deg,
-					var(--bg-vanilla-100) 10.4%,
-					rgba(255, 255, 255, 0) 100%
-				);
-			}
-
-			.log-type-indicator {
-				border: 2px solid var(--bg-vanilla-400);
-			}
-
-			.ant-typography {
-				color: var(--text-ink-300);
-				background: transparent;
-			}
-		}
-
-		.radio-button {
-			border: 1px solid var(--bg-vanilla-400);
-			background: var(--bg-vanilla-100);
-			color: var(--text-ink-300);
-		}
-
-		.views-tabs {
-			.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);
-			}
-		}
-
-		.tabs-and-search {
-			.action-btn {
-				border: 1px solid var(--bg-vanilla-400);
-				background: var(--bg-vanilla-100);
-				color: var(--text-ink-300);
-			}
-		}
-
-		.search-input {
-			border: 1px solid var(--bg-vanilla-200);
-			background: var(--bg-vanilla-100);
-			color: var(--text-ink-300);
-		}
-	}
-}
--- a/frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss
+++ b/frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss
@@ -1,10 +0,0 @@
-.query-builder-search-wrapper {
-    margin-top: 10px;
-    height: 46px;
-    border: 1px solid var(--bg-slate-400);
-    border-bottom: none;
-
-    .ant-select-selector {
-        border: none !important;
-    }
-}
--- a/frontend/src/components/LogDetail/QueryBuilderSearchWrapper.tsx
+++ b/frontend/src/components/LogDetail/QueryBuilderSearchWrapper.tsx
@@ -1,77 +0,0 @@
-import './QueryBuilderSearchWrapper.styles.scss';
-
-import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import { Dispatch, SetStateAction, useEffect } from 'react';
-import { ILog } from 'types/api/logs/log';
-import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-function QueryBuilderSearchWrapper({
-	log,
-	filters,
-	contextQuery,
-	isEdit,
-	suffixIcon,
-	setFilters,
-	setContextQuery,
-}: QueryBuilderSearchWraperProps): JSX.Element {
-	const initialContextQuery = useInitialQuery(log);
-
-	useEffect(() => {
-		setContextQuery(initialContextQuery);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	const handleSearch = (tagFilters: TagFilter): void => {
-		const tagFiltersLength = tagFilters.items.length;
-
-		if (
-			(!tagFiltersLength && (!filters || !filters.items.length)) ||
-			tagFiltersLength === filters?.items.length ||
-			!contextQuery
-		)
-			return;
-
-		const nextQuery: Query = {
-			...contextQuery,
-			builder: {
-				...contextQuery.builder,
-				queryData: contextQuery.builder.queryData.map((item) => ({
-					...item,
-					filters: tagFilters,
-				})),
-			},
-		};
-
-		setFilters({ ...tagFilters });
-		setContextQuery({ ...nextQuery });
-	};
-
-	// eslint-disable-next-line react/jsx-no-useless-fragment
-	if (!contextQuery || !isEdit) return <></>;
-
-	return (
-		<QueryBuilderSearch
-			query={contextQuery?.builder.queryData[0]}
-			onChange={handleSearch}
-			className="query-builder-search-wrapper"
-			suffixIcon={suffixIcon}
-		/>
-	);
-}
-
-interface QueryBuilderSearchWraperProps {
-	log: ILog;
-	isEdit: boolean;
-	contextQuery: Query | undefined;
-	setContextQuery: Dispatch<SetStateAction<Query | undefined>>;
-	filters: TagFilter | null;
-	setFilters: Dispatch<SetStateAction<TagFilter | null>>;
-	suffixIcon?: React.ReactNode;
-}
-
-QueryBuilderSearchWrapper.defaultProps = {
-	suffixIcon: undefined,
-};
-
-export default QueryBuilderSearchWrapper;
--- a/frontend/src/components/LogDetail/constants.ts
+++ b/frontend/src/components/LogDetail/constants.ts
@@ -1,7 +0,0 @@
-export const VIEW_TYPES = {
-	OVERVIEW: 'OVERVIEW',
-	JSON: 'JSON',
-	CONTEXT: 'CONTEXT',
-} as const;
-
-export type VIEWS = typeof VIEW_TYPES[keyof typeof VIEW_TYPES];
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -1,207 +1,50 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import './LogDetails.styles.scss';
-
-import { Color, Spacing } from '@signozhq/design-tokens';
-import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/lib';
-import cx from 'classnames';
-import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
-import ContextView from 'container/LogDetailedView/ContextView/ContextView';
+import { Drawer, Tabs } from 'antd';
 import JSONView from 'container/LogDetailedView/JsonView';
-import Overview from 'container/LogDetailedView/Overview';
-import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useNotifications } from 'hooks/useNotifications';
-import {
-	Braces,
-	Copy,
-	Filter,
-	HardHat,
-	Table,
-	TextSelect,
-	X,
-} from 'lucide-react';
-import { useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
-import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import TableView from 'container/LogDetailedView/TableView';
+import { useMemo } from 'react';

-import { VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailProps } from './LogDetail.interfaces';
-import QueryBuilderSearchWrapper from './QueryBuilderSearchWrapper';

 function LogDetail({
 	log,
 	onClose,
 	onAddToQuery,
 	onClickActionItem,
-	selectedTab,
 }: LogDetailProps): JSX.Element {
-	const [, copyToClipboard] = useCopyToClipboard();
-	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
-
-	const [isFilterVisibile, setIsFilterVisible] = useState<boolean>(false);
-
-	const [contextQuery, setContextQuery] = useState<Query | undefined>();
-	const [filters, setFilters] = useState<TagFilter | null>(null);
-	const [isEdit, setIsEdit] = useState<boolean>(false);
-
-	const isDarkMode = useIsDarkMode();
-
-	const { notifications } = useNotifications();
-
-	const LogJsonData = log ? aggregateAttributesResourcesToString(log) : '';
-
-	const handleModeChange = (e: RadioChangeEvent): void => {
-		setSelectedView(e.target.value);
-		setIsEdit(false);
-		setIsFilterVisible(false);
-	};
-
-	const handleFilterVisible = (): void => {
-		setIsFilterVisible(!isFilterVisibile);
-		setIsEdit(!isEdit);
-	};
-
-	const drawerCloseHandler = (
-		e: React.MouseEvent | React.KeyboardEvent,
-	): void => {
-		if (onClose) {
-			onClose(e);
-		}
-	};
-
-	const handleJSONCopy = (): void => {
-		copyToClipboard(LogJsonData);
-		notifications.success({
-			message: 'Copied to clipboard',
-		});
-	};
-
-	if (!log) {
-		// eslint-disable-next-line react/jsx-no-useless-fragment
-		return <></>;
-	}
-
-	const logType = log?.attributes_string?.log_level || LogType.INFO;
+	const items = useMemo(
+		() => [
+			{
+				label: 'Table',
+				key: '1',
+				children: log && (
+					<TableView
+						logData={log}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onClickActionItem}
+					/>
+				),
+			},
+			{
+				label: 'JSON',
+				key: '2',
+				children: log && <JSONView logData={log} />,
+			},
+		],
+		[log, onAddToQuery, onClickActionItem],
+	);

 	return (
 		<Drawer
 			width="60%"
-			title={
-				<>
-					<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
-					<Typography.Text className="title">Log details</Typography.Text>
-				</>
-			}
+			title="Log Details"
 			placement="right"
-			// closable
-			onClose={drawerCloseHandler}
+			closable
+			onClose={onClose}
 			open={log !== null}
-			style={{
-				overscrollBehavior: 'contain',
-				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
-			}}
-			className="log-detail-drawer"
+			style={{ overscrollBehavior: 'contain' }}
 			destroyOnClose
-			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div className="log-detail-drawer__log">
-				<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-				<Tooltip title={log?.body} placement="left">
-					<Typography.Text className="log-body">{log?.body}</Typography.Text>
-				</Tooltip>
-
-				<div className="log-overflow-shadow">&nbsp;</div>
-			</div>
-
-			<div className="tabs-and-search">
-				<Radio.Group
-					className="views-tabs"
-					onChange={handleModeChange}
-					value={selectedView}
-				>
-					<Radio.Button
-						className={
-							// eslint-disable-next-line sonarjs/no-duplicate-string
-							selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
-						}
-						value={VIEW_TYPES.OVERVIEW}
-					>
-						<div className="view-title">
-							<Table size={14} />
-							Overview
-						</div>
-					</Radio.Button>
-					<Radio.Button
-						className={selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'}
-						value={VIEW_TYPES.JSON}
-					>
-						<div className="view-title">
-							<Braces size={14} />
-							JSON
-						</div>
-					</Radio.Button>
-					<Radio.Button
-						className={
-							selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
-						}
-						value={VIEW_TYPES.CONTEXT}
-					>
-						<div className="view-title">
-							<TextSelect size={14} />
-							Context
-						</div>
-					</Radio.Button>
-				</Radio.Group>
-
-				{selectedView === VIEW_TYPES.JSON && (
-					<div className="json-action-btn">
-						<Button
-							className="action-btn"
-							icon={<Copy size={16} />}
-							onClick={handleJSONCopy}
-						/>
-					</div>
-				)}
-
-				{selectedView === VIEW_TYPES.CONTEXT && (
-					<Button
-						className="action-btn"
-						icon={<Filter size={16} />}
-						onClick={handleFilterVisible}
-					/>
-				)}
-			</div>
-
-			<QueryBuilderSearchWrapper
-				isEdit={isEdit}
-				log={log}
-				filters={filters}
-				setContextQuery={setContextQuery}
-				setFilters={setFilters}
-				contextQuery={contextQuery}
-				suffixIcon={
-					<HardHat size={12} style={{ paddingRight: Spacing.PADDING_2 }} />
-				}
-			/>
-
-			{selectedView === VIEW_TYPES.OVERVIEW && (
-				<Overview
-					logData={log}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onClickActionItem}
-				/>
-			)}
-			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
-
-			{selectedView === VIEW_TYPES.CONTEXT && (
-				<ContextView
-					log={log}
-					filters={filters}
-					contextQuery={contextQuery}
-					isEdit={isEdit}
-				/>
-			)}
+			<Tabs defaultActiveKey="1" items={items} />
 		</Drawer>
 	);
 }
--- a/frontend/src/components/Logs/ListLogView/ListLogView.styles.scss
+++ b/frontend/src/components/Logs/ListLogView/ListLogView.styles.scss
@@ -1,103 +0,0 @@
-.log-field-key {
-	padding-right: 5px;
-	color: var(--text-vanilla-400, #c0c1c3);
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 18px; /* 128.571% */
-	letter-spacing: -0.07px;
-}
-.log-value {
-	color: var(--text-vanilla-400, #c0c1c3);
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 18px; /* 128.571% */
-	letter-spacing: -0.07px;
-}
-.log-line {
-	display: flex;
-	overflow: hidden;
-	.log-state-indicator {
-		padding-left: 0;
-	}
-	transition: background-color 0.2s ease-in;
-	&:hover {
-		background-color: rgba(171, 189, 255, 0.04) !important;
-	}
-}
-
-.log-selected-fields {
-	display: flex;
-	width: 100%;
-	overflow: hidden;
-	align-items: center;
-
-	.selected-log-field-key {
-		color: var(--bg-robin-400) !important;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 18px; /* 128.571% */
-		letter-spacing: -0.07px;
-	}
-
-	.selected-log-value {
-		color: var(--bg-sienna-500);
-		border-radius: 2px;
-		background: rgba(173, 127, 88, 0.08);
-		padding: 0px 2px;
-		margin-left: 7px;
-		font-weight: 400;
-		line-height: 18px;
-		letter-spacing: -0.07px;
-		font-size: 14px;
-	}
-
-	.selected-log-kv {
-		min-height: 24px;
-		display: flex;
-		align-items: center;
-	}
-}
-
-.log-action-buttons {
-	position: absolute;
-	transform: translate(-50%, -50%);
-	top: 50%;
-	right: 0;
-	cursor: pointer;
-	height: 32px;
-	width: 68px;
-	border-radius: 2px;
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	background: var(--bg-ink-400, #121317);
-	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-
-	.context-btn {
-		width: 50% !important;
-	}
-	.copy-link-btn {
-		width: 50% !important;
-		border-left: 1px solid var(--bg-slate-400, #1d212d) !important;
-	}
-
-	.ant-btn-default {
-		border: none;
-		box-shadow: none;
-	}
-}
-
-.lightMode {
-	.log-field-key {
-		color: var(--text-slate-400);
-	}
-	.log-value {
-		color: var(--text-slate-400);
-	}
-	.log-line {
-		&:hover {
-			background-color: var(--text-vanilla-200) !important;
-		}
-	}
-}
--- a/frontend/src/components/Logs/ListLogView/index.tsx
+++ b/frontend/src/components/Logs/ListLogView/index.tsx
@@ -1,32 +1,36 @@
-import './ListLogView.styles.scss';
-
-import { blue } from '@ant-design/colors';
+import { blue, grey, orange } from '@ant-design/colors';
+import {
+	CopyFilled,
+	ExpandAltOutlined,
+	LinkOutlined,
+	MonitorOutlined,
+} from '@ant-design/icons';
 import Convert from 'ansi-to-html';
-import { Typography } from 'antd';
+import { Button, Divider, Row, Typography } from 'antd';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
+import LogsExplorerContext from 'container/LogsExplorerContext';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import { useNotifications } from 'hooks/useNotifications';
 // utils
 import { FlatLogData } from 'lib/logs/flatLogData';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
+import { useCopyToClipboard } from 'react-use';
 // interfaces
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';

 // components
 import AddToQueryHOC, { AddToQueryHOCProps } from '../AddToQueryHOC';
-import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
-import LogStateIndicator, {
-	LogType,
-} from '../LogStateIndicator/LogStateIndicator';
+import CopyClipboardHOC from '../CopyClipboardHOC';
 // styles
 import {
 	Container,
 	LogContainer,
 	LogText,
+	SelectedLog,
 	Text,
 	TextContainer,
 } from './styles';
@@ -52,10 +56,12 @@ function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {

 	return (
 		<TextContainer>
-			<Text ellipsis type="secondary" className="log-field-key">
-				{`${fieldKey} : `}
+			<Text ellipsis type="secondary">
+				{`${fieldKey}: `}
 			</Text>
-			<LogText dangerouslySetInnerHTML={html} className="log-value" />
+			<CopyClipboardHOC textToCopy={fieldValue}>
+				<LogText dangerouslySetInnerHTML={html} />
+			</CopyClipboardHOC>
 		</TextContainer>
 	);
 }
@@ -66,73 +72,68 @@ function LogSelectedField({
 	onAddToQuery,
 }: LogSelectedFieldProps): JSX.Element {
 	return (
-		<div className="log-selected-fields">
+		<SelectedLog>
 			<AddToQueryHOC
 				fieldKey={fieldKey}
 				fieldValue={fieldValue}
 				onAddToQuery={onAddToQuery}
 			>
 				<Typography.Text>
-					<span style={{ color: blue[4] }} className="selected-log-field-key">
-						{fieldKey}
-					</span>
+					<span style={{ color: blue[4] }}>{fieldKey}</span>
 				</Typography.Text>
 			</AddToQueryHOC>
-			<Typography.Text ellipsis className="selected-log-kv">
-				<span className="selected-log-field-key">{': '}</span>
-				<span className="selected-log-value">{fieldValue || "''"}</span>
-			</Typography.Text>
-		</div>
+			<CopyClipboardHOC textToCopy={fieldValue}>
+				<Typography.Text ellipsis>
+					<span>{': '}</span>
+					<span style={{ color: orange[6] }}>{fieldValue || "''"}</span>
+				</Typography.Text>
+			</CopyClipboardHOC>
+		</SelectedLog>
 	);
 }

 type ListLogViewProps = {
 	logData: ILog;
 	selectedFields: IField[];
-	onSetActiveLog: (log: ILog) => void;
-	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 };

 function ListLogView({
 	logData,
 	selectedFields,
-	onSetActiveLog,
-	onAddToQuery,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);

-	const [hasActionButtons, setHasActionButtons] = useState<boolean>(false);
+	const [, setCopy] = useCopyToClipboard();
+	const { notifications } = useNotifications();
 	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
 		logData.id,
 	);
 	const {
 		activeLog: activeContextLog,
-		onAddToQuery: handleAddToQuery,
 		onSetActiveLog: handleSetActiveContextLog,
 		onClearActiveLog: handleClearActiveContextLog,
 	} = useActiveLog();
-
-	const handlerClearActiveContextLog = useCallback(
-		(event: React.MouseEvent | React.KeyboardEvent) => {
-			event.preventDefault();
-			event.stopPropagation();
-			handleClearActiveContextLog();
-		},
-		[handleClearActiveContextLog],
-	);
+	const {
+		activeLog,
+		onSetActiveLog,
+		onClearActiveLog,
+		onAddToQuery,
+	} = useActiveLog();

 	const handleDetailedView = useCallback(() => {
 		onSetActiveLog(logData);
 	}, [logData, onSetActiveLog]);

-	const handleShowContext = useCallback(
-		(event: React.MouseEvent) => {
-			event.preventDefault();
-			event.stopPropagation();
-			handleSetActiveContextLog(logData);
-		},
-		[logData, handleSetActiveContextLog],
-	);
+	const handleShowContext = useCallback(() => {
+		handleSetActiveContextLog(logData);
+	}, [logData, handleSetActiveContextLog]);
+
+	const handleCopyJSON = (): void => {
+		setCopy(JSON.stringify(logData, null, 2));
+		notifications.success({
+			message: 'Copied to clipboard',
+		});
+	};

 	const updatedSelecedFields = useMemo(
 		() => selectedFields.filter((e) => e.name !== 'id'),
@@ -147,64 +148,89 @@ function ListLogView({
 		[flattenLogData.timestamp],
 	);

-	const logType = logData?.attributes_string?.log_level || LogType.INFO;
-
-	const handleMouseEnter = (): void => {
-		setHasActionButtons(true);
-	};
-
-	const handleMouseLeave = (): void => {
-		setHasActionButtons(false);
-	};
-
 	return (
-		<>
-			<Container
-				$isActiveLog={isHighlighted}
-				onMouseEnter={handleMouseEnter}
-				onMouseLeave={handleMouseLeave}
-				onClick={handleDetailedView}
-			>
-				<div className="log-line">
-					<LogStateIndicator type={logType} />
-					<div>
-						<LogContainer>
-							<LogGeneralField fieldKey="Log" fieldValue={flattenLogData.body} />
-							{flattenLogData.stream && (
-								<LogGeneralField fieldKey="Stream" fieldValue={flattenLogData.stream} />
-							)}
-							<LogGeneralField fieldKey="Timestamp" fieldValue={timestampValue} />
-
-							{updatedSelecedFields.map((field) =>
-								isValidLogField(flattenLogData[field.name] as never) ? (
-									<LogSelectedField
-										key={field.name}
-										fieldKey={field.name}
-										fieldValue={flattenLogData[field.name] as never}
-										onAddToQuery={onAddToQuery}
-									/>
-								) : null,
-							)}
-						</LogContainer>
-					</div>
+		<Container $isActiveLog={isHighlighted}>
+			<div>
+				<LogContainer>
+					<>
+						<LogGeneralField fieldKey="log" fieldValue={flattenLogData.body} />
+						{flattenLogData.stream && (
+							<LogGeneralField fieldKey="stream" fieldValue={flattenLogData.stream} />
+						)}
+						<LogGeneralField fieldKey="timestamp" fieldValue={timestampValue} />
+					</>
+				</LogContainer>
+				<div>
+					{updatedSelecedFields.map((field) =>
+						isValidLogField(flattenLogData[field.name] as never) ? (
+							<LogSelectedField
+								key={field.name}
+								fieldKey={field.name}
+								fieldValue={flattenLogData[field.name] as never}
+								onAddToQuery={onAddToQuery}
+							/>
+						) : null,
+					)}
 				</div>
+			</div>
+			<Divider style={{ padding: 0, margin: '0.4rem 0', opacity: 0.5 }} />
+			<Row>
+				<Button
+					size="small"
+					type="text"
+					onClick={handleDetailedView}
+					style={{ color: blue[5] }}
+					icon={<ExpandAltOutlined />}
+				>
+					View Details
+				</Button>
+				<Button
+					size="small"
+					type="text"
+					onClick={handleCopyJSON}
+					style={{ color: grey[1] }}
+					icon={<CopyFilled />}
+				>
+					Copy JSON
+				</Button>

-				{hasActionButtons && isLogsExplorerPage && (
-					<LogLinesActionButtons
-						handleShowContext={handleShowContext}
-						onLogCopy={onLogCopy}
+				{isLogsExplorerPage && (
+					<>
+						<Button
+							size="small"
+							type="text"
+							onClick={handleShowContext}
+							style={{ color: grey[1] }}
+							icon={<MonitorOutlined />}
+						>
+							Show in Context
+						</Button>
+						<Button
+							size="small"
+							type="text"
+							onClick={onLogCopy}
+							style={{ color: grey[1] }}
+							icon={<LinkOutlined />}
+						>
+							Copy Link
+						</Button>
+					</>
+				)}
+
+				{activeContextLog && (
+					<LogsExplorerContext
+						log={activeContextLog}
+						onClose={handleClearActiveContextLog}
 					/>
 				)}
-			</Container>
-			{activeContextLog && (
 				<LogDetail
-					log={activeContextLog}
-					onAddToQuery={handleAddToQuery}
-					selectedTab={VIEW_TYPES.CONTEXT}
-					onClose={handlerClearActiveContextLog}
+					log={activeLog}
+					onClose={onClearActiveLog}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
 				/>
-			)}
-		</>
+			</Row>
+		</Container>
 	);
 }

--- a/frontend/src/components/Logs/ListLogView/styles.ts
+++ b/frontend/src/components/Logs/ListLogView/styles.ts
@@ -7,7 +7,6 @@ export const Container = styled(Card)<{
 }>`
 	width: 100% !important;
 	margin-bottom: 0.3rem;
-	cursor: pointer;
 	.ant-card-body {
 		padding: 0.3rem 0.6rem;
 	}
@@ -30,13 +29,11 @@ export const TextContainer = styled.div`

 export const LogContainer = styled.div`
 	margin-left: 0.5rem;
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
 `;

 export const LogText = styled.div`
 	display: inline-block;
+
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
--- a/frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss
+++ b/frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss
@@ -1,44 +0,0 @@
-.log-line-action-buttons {
-	display: flex;
-	position: absolute;
-	transform: translate(-50%, -50%);
-	top: 50%;
-	right: 0;
-	cursor: pointer;
-	border-radius: 2px;
-	border: 1px solid var(--bg-slate-400);
-	background: var(--bg-ink-400);
-
-	.ant-btn-default {
-		border: none;
-		box-shadow: none;
-		padding: 9px;
-		justify-content: center;
-		align-items: center;
-		display: flex;
-
-		&.active-tab {
-			background-color: var(--bg-slate-400);
-		}
-	}
-
-	.copy-log-btn {
-		border-left: 1px solid var(--bg-slate-400);
-		border-color: var(--bg-slate-400) !important;
-	}
-}
-
-.lightMode {
-	.log-line-action-buttons {
-		border: 1px solid var(--bg-vanilla-400);
-		background: var(--bg-vanilla-400);
-
-		.ant-btn-default {
-		}
-
-		.copy-log-btn {
-			border-left: 1px solid var(--bg-vanilla-400);
-			border-color: var(--bg-vanilla-400) !important;
-		}
-	}
-}
--- a/frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.tsx
+++ b/frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.tsx
@@ -1,42 +0,0 @@
-import './LogLinesActionButtons.styles.scss';
-
-import { LinkOutlined } from '@ant-design/icons';
-import { Button, Tooltip } from 'antd';
-import { TextSelect } from 'lucide-react';
-import { MouseEventHandler } from 'react';
-
-export interface LogLinesActionButtonsProps {
-	handleShowContext: MouseEventHandler<HTMLElement>;
-	onLogCopy: MouseEventHandler<HTMLElement>;
-	customClassName?: string;
-}
-export default function LogLinesActionButtons({
-	handleShowContext,
-	onLogCopy,
-	customClassName = '',
-}: LogLinesActionButtonsProps): JSX.Element {
-	return (
-		<div className={`log-line-action-buttons ${customClassName}`}>
-			<Tooltip title="Show Context">
-				<Button
-					size="small"
-					icon={<TextSelect size={14} />}
-					className="show-context-btn"
-					onClick={handleShowContext}
-				/>
-			</Tooltip>
-			<Tooltip title="Copy Link">
-				<Button
-					size="small"
-					icon={<LinkOutlined size={14} />}
-					onClick={onLogCopy}
-					className="copy-log-btn"
-				/>
-			</Tooltip>
-		</div>
-	);
-}
-
-LogLinesActionButtons.defaultProps = {
-	customClassName: '',
-};
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
@@ -1,34 +0,0 @@
-.log-state-indicator {
-	padding-left: 8px;
-
-	.line {
-		margin: 0 8px;
-		min-height: 24px;
-		height: 100%;
-		width: 3px;
-		border-radius: 50px;
-		background-color: transparent;
-
-		&.INFO {
-			background-color: #1d212d;
-		}
-
-		&.WARNING {
-			background-color: #ffcd56;
-		}
-
-		&.ERROR {
-			background-color: #e5484d;
-		}
-	}
-
-	&.isActive {
-		.dot {
-			color: var(--bg-robin-400, #7190f9);
-		}
-
-		.line {
-			background-color: var(--bg-robin-400, #7190f9);
-		}
-	}
-}
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx
@@ -1,28 +0,0 @@
-import './LogStateIndicator.styles.scss';
-
-import cx from 'classnames';
-
-export const LogType = {
-	INFO: 'INFO',
-	WARNING: 'WARNING',
-	ERROR: 'ERROR',
-};
-function LogStateIndicator({
-	type,
-	isActive,
-}: {
-	type: string;
-	isActive?: boolean;
-}): JSX.Element {
-	return (
-		<div className={cx('log-state-indicator', isActive ? 'isActive' : '')}>
-			<div className={cx('line', type)}> </div>
-		</div>
-	);
-}
-
-LogStateIndicator.defaultProps = {
-	isActive: false,
-};
-
-export default LogStateIndicator;
--- a/frontend/src/components/Logs/RawLogView/RawLogView.styles.scss
+++ b/frontend/src/components/Logs/RawLogView/RawLogView.styles.scss
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -1,9 +1,11 @@
-import './RawLogView.styles.scss';
-
+import {
+	ExpandAltOutlined,
+	LinkOutlined,
+	MonitorOutlined,
+} from '@ant-design/icons';
 import Convert from 'ansi-to-html';
-import { DrawerProps } from 'antd';
+import { Button, DrawerProps, Tooltip } from 'antd';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
 import LogsExplorerContext from 'container/LogsExplorerContext';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
@@ -20,12 +22,13 @@ import {
 	useState,
 } from 'react';

-import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
-import LogStateIndicator, {
-	LogType,
-} from '../LogStateIndicator/LogStateIndicator';
 // styles
-import { RawLogContent, RawLogViewContainer } from './styles';
+import {
+	ActionButtonsWrapper,
+	ExpandIconWrapper,
+	RawLogContent,
+	RawLogViewContainer,
+} from './styles';
 import { RawLogViewProps } from './types';

 const convert = new Convert();
@@ -42,6 +45,7 @@ function RawLogView({
 	);
 	const {
 		activeLog: activeContextLog,
+		onSetActiveLog: handleSetActiveContextLog,
 		onClearActiveLog: handleClearActiveContextLog,
 	} = useActiveLog();
 	const {
@@ -52,15 +56,12 @@ function RawLogView({
 	} = useActiveLog();

 	const [hasActionButtons, setHasActionButtons] = useState<boolean>(false);
-	const [selectedTab, setSelectedTab] = useState<VIEWS | undefined>();

 	const isDarkMode = useIsDarkMode();
 	const isReadOnlyLog = !isLogsExplorerPage || isReadOnly;

 	const severityText = data.severity_text ? `${data.severity_text} |` : '';

-	const logType = data?.attributes_string?.log_level || LogType.INFO;
-
 	const text = useMemo(
 		() =>
 			typeof data.timestamp === 'string'
@@ -73,7 +74,6 @@ function RawLogView({
 		if (activeContextLog || isReadOnly) return;

 		onSetActiveLog(data);
-		setSelectedTab(VIEW_TYPES.OVERVIEW);
 	}, [activeContextLog, isReadOnly, data, onSetActiveLog]);

 	const handleCloseLogDetail: DrawerProps['onClose'] = useCallback(
@@ -84,7 +84,6 @@ function RawLogView({
 			event.stopPropagation();

 			onClearActiveLog();
-			setSelectedTab(undefined);
 		},
 		[onClearActiveLog],
 	);
@@ -105,11 +104,9 @@ function RawLogView({
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-			// handleSetActiveContextLog(data);
-			setSelectedTab(VIEW_TYPES.CONTEXT);
-			onSetActiveLog(data);
+			handleSetActiveContextLog(data);
 		},
-		[data, onSetActiveLog],
+		[data, handleSetActiveContextLog],
 	);

 	const html = useMemo(
@@ -126,27 +123,37 @@ function RawLogView({
 			align="middle"
 			$isDarkMode={isDarkMode}
 			$isReadOnly={isReadOnly}
-			$isHightlightedLog={isHighlighted}
-			$isActiveLog={isActiveLog}
+			$isActiveLog={isHighlighted}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
 		>
-			<LogStateIndicator type={logType} />
+			{!isReadOnly && (
+				<ExpandIconWrapper flex="30px">
+					<ExpandAltOutlined />
+				</ExpandIconWrapper>
+			)}

 			<RawLogContent
 				$isReadOnly={isReadOnly}
 				$isActiveLog={isActiveLog}
-				$isDarkMode={isDarkMode}
 				$isTextOverflowEllipsisDisabled={isTextOverflowEllipsisDisabled}
 				linesPerRow={linesPerRow}
 				dangerouslySetInnerHTML={html}
 			/>

 			{hasActionButtons && (
-				<LogLinesActionButtons
-					handleShowContext={handleShowContext}
-					onLogCopy={onLogCopy}
-				/>
+				<ActionButtonsWrapper>
+					<Tooltip title="Show Context">
+						<Button
+							size="small"
+							icon={<MonitorOutlined />}
+							onClick={handleShowContext}
+						/>
+					</Tooltip>
+					<Tooltip title="Copy Link">
+						<Button size="small" icon={<LinkOutlined />} onClick={onLogCopy} />
+					</Tooltip>
+				</ActionButtonsWrapper>
 			)}

 			{activeContextLog && (
@@ -155,15 +162,12 @@ function RawLogView({
 					onClose={handleClearActiveContextLog}
 				/>
 			)}
-			{selectedTab && (
-				<LogDetail
-					selectedTab={selectedTab}
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-				/>
-			)}
+			<LogDetail
+				log={activeLog}
+				onClose={handleCloseLogDetail}
+				onAddToQuery={onAddToQuery}
+				onClickActionItem={onAddToQuery}
+			/>
 		</RawLogViewContainer>
 	);
 }
--- a/frontend/src/components/Logs/RawLogView/styles.ts
+++ b/frontend/src/components/Logs/RawLogView/styles.ts
@@ -1,5 +1,4 @@
 import { blue } from '@ant-design/colors';
-import { Color } from '@signozhq/design-tokens';
 import { Col, Row, Space } from 'antd';
 import styled from 'styled-components';
 import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs';
@@ -10,21 +9,20 @@ export const RawLogViewContainer = styled(Row)<{
 	$isDarkMode: boolean;
 	$isReadOnly?: boolean;
 	$isActiveLog?: boolean;
-	$isHightlightedLog: boolean;
 }>`
 	position: relative;
 	width: 100%;
-
-	display: flex;
-	alignitems: center;
+	font-weight: 700;
+	font-size: 0.625rem;
+	line-height: 1.25rem;

 	transition: background-color 0.2s ease-in;

 	${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)}

-	${({ $isReadOnly, $isActiveLog, $isDarkMode }): string =>
+	${({ $isReadOnly, $isDarkMode, $isActiveLog }): string =>
 		$isActiveLog
-			? getActiveLogBackground($isActiveLog, $isDarkMode)
+			? getActiveLogBackground()
 			: getDefaultLogBackground($isReadOnly, $isDarkMode)}
 `;

@@ -32,17 +30,13 @@ export const ExpandIconWrapper = styled(Col)`
 	color: ${blue[6]};
 	padding: 0.25rem 0.375rem;
 	cursor: pointer;
+	font-size: 12px;
 `;

 export const RawLogContent = styled.div<RawLogContentProps>`
 	margin-bottom: 0;
-	font-family: 'SF Mono', monospace;
-	font-family: 'Space Mono', monospace;
-	font-size: 13px;
-	font-weight: 400;
-	text-align: left;
-	color: ${({ $isDarkMode }): string =>
-		$isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400};
+	font-family: Fira Code, monospace;
+	font-weight: 300;

 	${({ $isTextOverflowEllipsisDisabled, linesPerRow }): string =>
 		$isTextOverflowEllipsisDisabled
@@ -54,12 +48,14 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 		line-clamp: ${linesPerRow}; 
 		-webkit-box-orient: vertical;`};

-	line-height: 24px;
-	letter-spacing: -0.07px;
-	padding: 4px;
+	font-size: 1rem;
+	line-height: 2rem;

 	cursor: ${({ $isActiveLog, $isReadOnly }): string =>
 		$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};
+
+	${({ $isActiveLog, $isReadOnly }): string =>
+		$isReadOnly && $isActiveLog ? 'padding: 0 1.5rem;' : ''}
 `;

 export const ActionButtonsWrapper = styled(Space)`
--- a/frontend/src/components/Logs/RawLogView/types.ts
+++ b/frontend/src/components/Logs/RawLogView/types.ts
@@ -12,6 +12,5 @@ export interface RawLogContentProps {
 	linesPerRow: number;
 	$isReadOnly?: boolean;
 	$isActiveLog?: boolean;
-	$isDarkMode?: boolean;
 	$isTextOverflowEllipsisDisabled?: boolean;
 }
--- a/frontend/src/components/Logs/TableView/config.ts
+++ b/frontend/src/components/Logs/TableView/config.ts
@@ -1,21 +1,12 @@
 import { TableProps } from 'antd';
 import { CSSProperties } from 'react';

-export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
-	return {
-		paddingTop: 4,
-		paddingBottom: 6,
-		paddingRight: 8,
-		paddingLeft: 8,
-		color: isDarkMode ? 'var(--bg-vanilla-400)' : 'var(--bg-slate-400)',
-		fontSize: '14px',
-		fontStyle: 'normal',
-		fontWeight: 400,
-		lineHeight: '18px',
-		letterSpacing: '-0.07px',
-		marginBottom: '0px',
-	};
-}
+export const defaultCellStyle: CSSProperties = {
+	paddingTop: 4,
+	paddingBottom: 6,
+	paddingRight: 8,
+	paddingLeft: 8,
+};

 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
--- a/frontend/src/components/Logs/TableView/styles.ts
+++ b/frontend/src/components/Logs/TableView/styles.ts
@@ -2,22 +2,18 @@ import styled from 'styled-components';

 interface TableBodyContentProps {
 	linesPerRow: number;
-	isDarkMode?: boolean;
 }

 export const TableBodyContent = styled.div<TableBodyContentProps>`
 	margin-bottom: 0;
-	color: ${(props): string =>
-		props.isDarkMode ? 'var(--bg-vanilla-400, #c0c1c3)' : 'var(--bg-slate-400)'};
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 18px; /* 128.571% */
-	letter-spacing: -0.07px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	display: -webkit-box;
 	-webkit-line-clamp: ${(props): number => props.linesPerRow};
 	line-clamp: ${(props): number => props.linesPerRow};
 	-webkit-box-orient: vertical;
+
+	font-size: 0.875rem;
+
+	line-height: 2rem;
 `;
--- a/frontend/src/components/Logs/TableView/useTableView.styles.scss
+++ b/frontend/src/components/Logs/TableView/useTableView.styles.scss
@@ -1,27 +0,0 @@
-.text {
-	color: var(--bg-vanilla-400);
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 18px; /* 128.571% */
-	letter-spacing: -0.07px;
-}
-
-.table-timestamp {
-	display: flex;
-	align-items: center;
-
-	.ant-typography {
-		margin-bottom: 0;
-	}
-
-	.log-state-indicator {
-		padding: 0px;
-	}
-}
-
-.lightMode {
-	.text {
-		color: var(--bg-slate-400);
-	}
-}
--- a/frontend/src/components/Logs/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -1,18 +1,22 @@
-import './useTableView.styles.scss';
-
+import {
+	ExpandAltOutlined,
+	LinkOutlined,
+	MonitorOutlined,
+} from '@ant-design/icons';
 import Convert from 'ansi-to-html';
-import { Typography } from 'antd';
+import { Button, Space, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { FlatLogData } from 'lib/logs/flatLogData';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';

-import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
-import { defaultTableStyle, getDefaultCellStyle } from './config';
+import { ExpandIconWrapper } from '../RawLogView/styles';
+import { defaultCellStyle, defaultTableStyle } from './config';
 import { TableBodyContent } from './styles';
 import {
+	ActionsColumnProps,
 	ColumnTypeRender,
 	UseTableViewProps,
 	UseTableViewResult,
@@ -20,15 +24,60 @@ import {

 const convert = new Convert();

-export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
-	const { logs, fields, linesPerRow, appendTo = 'center' } = props;
+function ActionsColumn({
+	logId,
+	logs,
+	onOpenLogsContext,
+}: ActionsColumnProps): JSX.Element {
+	const currentLog = useMemo(() => logs.find(({ id }) => id === logId), [
+		logs,
+		logId,
+	]);

-	const isDarkMode = useIsDarkMode();
+	const { onLogCopy } = useCopyLogLink(currentLog?.id);
+
+	const handleShowContext = useCallback(() => {
+		if (!onOpenLogsContext || !currentLog) return;
+
+		onOpenLogsContext(currentLog);
+	}, [currentLog, onOpenLogsContext]);
+
+	return (
+		<Space>
+			<Button
+				size="small"
+				onClick={handleShowContext}
+				icon={<MonitorOutlined />}
+			/>
+			<Button size="small" onClick={onLogCopy} icon={<LinkOutlined />} />
+		</Space>
+	);
+}
+
+export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
+	const {
+		logs,
+		fields,
+		linesPerRow,
+		appendTo = 'center',
+		onOpenLogsContext,
+		onClickExpand,
+	} = props;
+	const { isLogsExplorerPage } = useCopyLogLink();

 	const flattenLogData = useMemo(() => logs.map((log) => FlatLogData(log)), [
 		logs,
 	]);

+	const handleClickExpand = useCallback(
+		(index: number): void => {
+			if (!onClickExpand) return;
+
+			onClickExpand(logs[index]);
+		},
+		[logs, onClickExpand],
+	);
+
 	const columns: ColumnsType<Record<string, unknown>> = useMemo(() => {
 		const fieldColumns: ColumnsType<Record<string, unknown>> = fields
 			.filter((e) => e.name !== 'id')
@@ -38,7 +87,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 				key: name,
 				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
 					props: {
-						style: getDefaultCellStyle(isDarkMode),
+						style: defaultCellStyle,
 					},
 					children: (
 						<Typography.Paragraph ellipsis={{ rows: linesPerRow }}>
@@ -49,25 +98,38 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 			}));

 		return [
+			{
+				title: '',
+				dataIndex: 'id',
+				key: 'expand',
+				// https://github.com/ant-design/ant-design/discussions/36886
+				render: (_, item, index): ColumnTypeRender<Record<string, unknown>> => ({
+					props: {
+						style: defaultCellStyle,
+					},
+					children: (
+						<ExpandIconWrapper
+							onClick={(): void => {
+								handleClickExpand(index);
+							}}
+						>
+							<ExpandAltOutlined />
+						</ExpandIconWrapper>
+					),
+				}),
+			},
 			{
 				title: 'timestamp',
 				dataIndex: 'timestamp',
 				key: 'timestamp',
 				// https://github.com/ant-design/ant-design/discussions/36886
-				render: (field, item): ColumnTypeRender<Record<string, unknown>> => {
+				render: (field): ColumnTypeRender<Record<string, unknown>> => {
 					const date =
 						typeof field === 'string'
 							? dayjs(field).format()
 							: dayjs(field / 1e6).format();
 					return {
-						children: (
-							<div className="table-timestamp">
-								<LogStateIndicator type={item.log_level as string} />
-								<Typography.Paragraph ellipsis className="text">
-									{date}
-								</Typography.Paragraph>
-							</div>
-						),
+						children: <Typography.Paragraph ellipsis>{date}</Typography.Paragraph>,
 					};
 				},
 			},
@@ -86,14 +148,39 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								__html: convert.toHtml(dompurify.sanitize(field)),
 							}}
 							linesPerRow={linesPerRow}
-							isDarkMode={isDarkMode}
 						/>
 					),
 				}),
 			},
 			...(appendTo === 'end' ? fieldColumns : []),
+			...(isLogsExplorerPage
+				? ([
+						{
+							title: 'actions',
+							dataIndex: 'actions',
+							key: 'actions',
+							render: (_, log): ColumnTypeRender<Record<string, unknown>> => ({
+								children: (
+									<ActionsColumn
+										logId={(log.id as unknown) as string}
+										logs={logs}
+										onOpenLogsContext={onOpenLogsContext}
+									/>
+								),
+							}),
+						},
+				  ] as ColumnsType<Record<string, unknown>>)
+				: []),
 		];
-	}, [fields, appendTo, isDarkMode, linesPerRow]);
+	}, [
+		logs,
+		fields,
+		appendTo,
+		linesPerRow,
+		isLogsExplorerPage,
+		handleClickExpand,
+		onOpenLogsContext,
+	]);

 	return { columns, dataSource: flattenLogData };
 };
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
@@ -1,335 +0,0 @@
-.nested-menu-container {
-	z-index: 2;
-	position: absolute;
-	right: -2px;
-	margin: 6px 0;
-	width: 160px;
-
-	border-radius: 4px;
-
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	background: linear-gradient(
-		139deg,
-		rgba(18, 19, 23, 0.8) 0%,
-		rgba(18, 19, 23, 0.9) 98.68%
-	);
-
-	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-	backdrop-filter: blur(20px);
-
-	.menu-container {
-		padding: 12px;
-
-		.title {
-			font-family: Inter;
-			font-size: 11px;
-			font-weight: 600;
-			line-height: 18px;
-			letter-spacing: 0.08em;
-			text-align: left;
-			color: var(--bg-slate-200, #52575c);
-		}
-
-		.menu-items {
-			display: flex;
-			gap: 12px;
-			flex-direction: column;
-			margin-top: 12px;
-		}
-
-		.item {
-			font-family: Inter;
-			font-size: 13px;
-			font-weight: 400;
-			line-height: 17px;
-			letter-spacing: 0.01em;
-			text-align: left;
-
-			.item-label {
-				display: flex;
-				color: var(--bg-vanilla-400, #c0c1c3);
-				justify-content: space-between;
-			}
-
-			cursor: pointer;
-		}
-	}
-
-	.selected-item-content-container {
-		.add-new-column-header {
-			padding: 8px;
-		}
-
-		.title {
-			color: var(--bg-slate-200, #52575c);
-			font-family: Inter;
-			font-size: 11px;
-			font-style: normal;
-			font-weight: 600;
-			line-height: 18px; /* 163.636% */
-			letter-spacing: 0.88px;
-			text-transform: uppercase;
-
-			margin-bottom: 12px;
-
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-
-			.lucide {
-				color: var(--bg-vanilla-400, #c0c1c3);
-				cursor: pointer;
-			}
-		}
-
-		.horizontal-line {
-			height: 1px;
-			background: #1d212d;
-		}
-
-		.loading-container {
-			margin: 12px 0;
-		}
-
-		.item-content {
-			padding: 12px;
-
-			.max-lines-per-row-input {
-				display: flex;
-
-				border: 1px solid var(--bg-slate-400, #1d212d);
-
-				.ant-input-number-handler-wrap {
-					display: none;
-				}
-
-				.ant-input-number {
-					min-width: 36px;
-					width: auto;
-					border: 0px;
-					text-align: center;
-					height: 26px;
-					border-radius: 0;
-
-					&:active,
-					&:focus {
-						border: none;
-						box-shadow: none;
-					}
-				}
-
-				.ant-input-number-focused {
-					box-shadow: none !important;
-				}
-
-				.ant-input-number-input-wrap {
-					input {
-						text-align: center;
-						font-size: 13px;
-
-						&:active,
-						&:focus {
-							border: none;
-						}
-					}
-
-					&:active,
-					&:focus {
-						border: none;
-					}
-				}
-
-				.periscope-btn {
-					box-shadow: none;
-					padding: 6px 12px;
-					height: 26px;
-
-					border-radius: 0px 1px 1px 0px;
-					background: var(--bg-ink-300, #16181d);
-				}
-			}
-
-			.column-format,
-			.column-format-new-options {
-				display: flex;
-				gap: 12px;
-				flex-direction: column;
-				margin-top: 12px;
-
-				.column-name {
-					color: var(--bg-vanilla-400, #c0c1c3);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					gap: 8px;
-
-					cursor: pointer;
-
-					.name {
-						flex: 1;
-						overflow: hidden;
-						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-
-						cursor: pointer;
-					}
-
-					.delete-btn {
-						display: none;
-						flex: 0 0 16px;
-						cursor: pointer;
-					}
-
-					&:hover {
-						.delete-btn {
-							display: block;
-						}
-					}
-				}
-
-				overflow-x: hidden;
-
-				&::-webkit-scrollbar {
-					height: 1rem;
-					width: 0.2rem;
-				}
-			}
-
-			.column-format {
-				max-height: 150px;
-				overflow: auto;
-				overflow-x: hidden;
-			}
-
-			.column-format-new-options {
-				max-height: 150px;
-				overflow-y: auto;
-				overflow-x: hidden;
-			}
-
-			.column-divider {
-				margin: 12px 0;
-				border-top: 2px solid #1d212d;
-			}
-		}
-	}
-
-	&.active {
-		.nested-menu-container {
-			backdrop-filter: blur(18px);
-
-			.item {
-				.item-label {
-					color: var(--bg-vanilla-400, #c0c1c3);
-				}
-			}
-		}
-
-		.selected-item-content-container {
-			width: 110%;
-			margin-left: -5%;
-
-			border-radius: 4px;
-			border: 1px solid var(--bg-slate-400, #1d212d);
-			background: linear-gradient(
-				139deg,
-				rgba(18, 19, 23, 0.8) 0%,
-				rgba(18, 19, 23, 0.9) 98.68%
-			);
-
-			box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-			backdrop-filter: blur(20px);
-
-			.column-format {
-				margin-top: 0px;
-			}
-		}
-	}
-}
-
-.lightMode {
-	.nested-menu-container {
-		border: 1px solid var(--bg-vanilla-300);
-		background: linear-gradient(
-			139deg,
-			rgba(255, 255, 255, 0.8) 0%,
-			rgba(255, 255, 255, 0.9) 98.68%
-		);
-
-		box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
-
-		.menu-container {
-			.title {
-				color: var(--bg-ink-200);
-			}
-
-			.item {
-				.item-label {
-					color: var(--bg-ink-400);
-				}
-			}
-		}
-
-		.selected-item-content-container {
-			.title {
-				color: var(--bg-ink-200);
-
-				.lucide {
-					color: var(--bg-ink-300);
-				}
-			}
-
-			.horizontal-line {
-				background: var(--bg-vanilla-300);
-			}
-
-			.item-content {
-				.max-lines-per-row-input {
-					border: 1px solid var(--bg-vanilla-300);
-
-					.periscope-btn {
-						background: var(--bg-vanilla-300);
-					}
-				}
-
-				.column-format,
-				.column-format-new-options {
-					.column-name {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-		}
-
-		&.active {
-			.nested-menu-container {
-				backdrop-filter: blur(18px);
-
-				.item {
-					.item-label {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-
-			.selected-item-content-container {
-				border: 1px solid var(--bg-vanilla-300);
-				background: linear-gradient(
-					139deg,
-					rgba(255, 255, 255, 0.8) 0%,
-					rgba(255, 255, 255, 0.9) 98.68%
-				);
-
-				box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
-			}
-		}
-	}
-}
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
@@ -1,252 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import './LogsFormatOptionsMenu.styles.scss';
-
-import { Divider, Input, InputNumber, Tooltip } from 'antd';
-import cx from 'classnames';
-import { LogViewMode } from 'container/LogsTable';
-import { OptionsMenuConfig } from 'container/OptionsMenu/types';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Check, Minus, Plus, X } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
-
-interface LogsFormatOptionsMenuProps {
-	title: string;
-	items: any;
-	selectedOptionFormat: any;
-	config: OptionsMenuConfig;
-}
-
-export default function LogsFormatOptionsMenu({
-	title,
-	items,
-	selectedOptionFormat,
-	config,
-}: LogsFormatOptionsMenuProps): JSX.Element {
-	const { maxLines, format, addColumn } = config;
-	const [selectedItem, setSelectedItem] = useState(selectedOptionFormat);
-	const maxLinesNumber = (maxLines?.value as number) || 1;
-	const [maxLinesPerRow, setMaxLinesPerRow] = useState<number>(maxLinesNumber);
-
-	const [addNewColumn, setAddNewColumn] = useState(false);
-
-	const onChange = useCallback(
-		(key: LogViewMode) => {
-			if (!format) return;
-
-			format.onChange(key);
-		},
-		[format],
-	);
-
-	const handleMenuItemClick = (key: LogViewMode): void => {
-		setSelectedItem(key);
-		onChange(key);
-		setAddNewColumn(false);
-	};
-
-	const incrementMaxLinesPerRow = (): void => {
-		if (maxLinesPerRow < 10) {
-			setMaxLinesPerRow(maxLinesPerRow + 1);
-		}
-	};
-
-	const decrementMaxLinesPerRow = (): void => {
-		if (maxLinesPerRow > 1) {
-			setMaxLinesPerRow(maxLinesPerRow - 1);
-		}
-	};
-
-	const handleSearchValueChange = useDebouncedFn((event): void => {
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		const value = event?.target?.value || '';
-
-		if (addColumn && addColumn?.onSearch) {
-			addColumn?.onSearch(value);
-		}
-	}, 300);
-
-	const handleToggleAddNewColumn = (): void => {
-		setAddNewColumn(!addNewColumn);
-	};
-
-	// console.log('optionsMenuConfig', config);
-
-	const handleLinesPerRowChange = (maxLinesPerRow: number | null): void => {
-		if (
-			maxLinesPerRow &&
-			Number.isInteger(maxLinesNumber) &&
-			maxLinesPerRow > 1
-		) {
-			setMaxLinesPerRow(maxLinesPerRow);
-		}
-	};
-
-	useEffect(() => {
-		if (maxLinesPerRow && config && config.maxLines?.onChange) {
-			config.maxLines.onChange(maxLinesPerRow);
-		}
-	}, [maxLinesPerRow]);
-
-	return (
-		<div
-			className={cx(
-				'nested-menu-container',
-				addNewColumn && selectedItem !== 'raw' ? 'active' : '',
-			)}
-			onClick={(event): void => {
-				// this is to restrict click events to propogate to parent
-				event.stopPropagation();
-			}}
-		>
-			<div className="menu-container">
-				<div className="title"> {title} </div>
-
-				<div className="menu-items">
-					{items.map(
-						(item: any): JSX.Element => (
-							<div
-								className="item"
-								key={item.label}
-								onClick={(): void => handleMenuItemClick(item.key)}
-							>
-								<div className={cx('item-label')}>
-									{item.label}
-
-									{selectedItem === item.key && <Check size={12} />}
-								</div>
-							</div>
-						),
-					)}
-				</div>
-			</div>
-
-			{selectedItem && (
-				<div className="selected-item-content-container active">
-					{!addNewColumn && <div className="horizontal-line" />}
-
-					{addNewColumn && selectedItem !== 'raw' && (
-						<div className="add-new-column-header">
-							<div className="title">
-								{' '}
-								columns
-								<X size={14} onClick={handleToggleAddNewColumn} />{' '}
-							</div>
-
-							<Input
-								tabIndex={0}
-								type="text"
-								autoFocus
-								onFocus={addColumn?.onFocus}
-								// onBlur={addColumn?.onBlur}
-								onChange={handleSearchValueChange}
-								placeholder="Search..."
-							/>
-						</div>
-					)}
-
-					<div className="item-content">
-						{selectedItem === 'raw' && (
-							<>
-								<div className="title"> max lines per row </div>
-
-								<div className="raw-format max-lines-per-row-input">
-									<button
-										type="button"
-										className="periscope-btn"
-										onClick={decrementMaxLinesPerRow}
-									>
-										{' '}
-										<Minus size={12} />{' '}
-									</button>
-									<InputNumber
-										min={1}
-										max={10}
-										value={maxLinesPerRow}
-										onChange={handleLinesPerRowChange}
-									/>
-									<button
-										type="button"
-										className="periscope-btn"
-										onClick={incrementMaxLinesPerRow}
-									>
-										{' '}
-										<Plus size={12} />{' '}
-									</button>
-								</div>
-							</>
-						)}
-
-						{(selectedItem === 'table' || selectedItem === 'list') && (
-							<>
-								{!addNewColumn && (
-									<div className="title">
-										columns
-										<Plus size={14} onClick={handleToggleAddNewColumn} />{' '}
-									</div>
-								)}
-
-								<div className="column-format">
-									{addColumn?.value?.map(({ key, id }) => (
-										<div className="column-name" key={id}>
-											<div className="name">
-												<Tooltip placement="left" title={key}>
-													{key}
-												</Tooltip>
-											</div>
-											<X
-												className="delete-btn"
-												size={14}
-												onClick={(): void => addColumn.onRemove(id as string)}
-											/>
-										</div>
-									))}
-								</div>
-
-								{addColumn?.isFetching && (
-									<div className="loading-container"> Loading ... </div>
-								)}
-
-								{addNewColumn &&
-									addColumn &&
-									addColumn.value.length > 0 &&
-									addColumn.options &&
-									addColumn?.options?.length > 0 && (
-										<Divider className="column-divider" />
-									)}
-
-								{addNewColumn && (
-									<div className="column-format-new-options">
-										{addColumn?.options?.map(({ label, value }) => (
-											<div
-												className="column-name"
-												key={value}
-												onClick={(eve): void => {
-													console.log('coluimn name', label, value);
-
-													eve.stopPropagation();
-
-													if (addColumn && addColumn?.onSelect) {
-														addColumn?.onSelect(value, { label, disabled: false });
-													}
-												}}
-											>
-												<div className="name">
-													<Tooltip placement="left" title={label}>
-														{label}
-													</Tooltip>
-												</div>
-											</div>
-										))}
-									</div>
-								)}
-							</>
-						)}
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
--- a/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
+++ b/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
@@ -27,7 +27,6 @@ function DynamicColumnTable({
 	);

 	useEffect(() => {
-		setColumnsData(columns);
 		const visibleColumns = getVisibleColumns({
 			tablesource,
 			columnsData: columns,
@@ -43,7 +42,7 @@ function DynamicColumnTable({
 				: undefined,
 		);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [columns]);
+	}, []);

 	const onToggleHandler = (index: number) => (
 		checked: boolean,
--- a/frontend/src/constants/global.ts
+++ b/frontend/src/constants/global.ts
@@ -1,2 +0,0 @@
-const MAX_RPS_LIMIT = 100;
-export { MAX_RPS_LIMIT };
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -6,6 +6,7 @@ const ROUTES = {
 	TRACE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
 	TRACES_EXPLORER: '/traces-explorer',
+	SETTINGS: '/settings',
 	GET_STARTED: '/get-started',
 	USAGE_EXPLORER: '/usage-explorer',
 	APPLICATION: '/services',
@@ -22,18 +23,15 @@ const ROUTES = {
 	ERROR_DETAIL: '/error-detail',
 	VERSION: '/status',
 	MY_SETTINGS: '/my-settings',
-	SETTINGS: '/settings',
 	ORG_SETTINGS: '/settings/org-settings',
 	INGESTION_SETTINGS: '/settings/ingestion-settings',
 	SOMETHING_WENT_WRONG: '/something-went-wrong',
 	UN_AUTHORIZED: '/un-authorized',
 	NOT_FOUND: '/not-found',
-	LOGS_BASE: '/logs',
-	LOGS: '/logs/logs-explorer',
-	OLD_LOGS_EXPLORER: '/logs/old-logs-explorer',
-	LOGS_EXPLORER: '/logs/logs-explorer',
-	LIVE_LOGS: '/logs/logs-explorer/live',
-	LOGS_PIPELINES: '/logs/pipelines',
+	LOGS: '/logs',
+	LOGS_EXPLORER: '/logs-explorer',
+	LIVE_LOGS: '/logs-explorer/live',
+	LOGS_PIPELINES: '/pipelines',
 	HOME_PAGE: '/',
 	PASSWORD_RESET: '/password-reset',
 	LIST_LICENSES: '/licenses',
--- a/frontend/src/constants/theme.ts
+++ b/frontend/src/constants/theme.ts
@@ -1,6 +1,5 @@
 const themeColors = {
 	chartcolors: {
-		robin: '#3F5ECC',
 		dodgerBlue: '#2F80ED',
 		mediumOrchid: '#BB6BD9',
 		seaBuckthorn: '#F2994A',
--- a/frontend/src/container/AllAlertChannels/styles.ts
+++ b/frontend/src/container/AllAlertChannels/styles.ts
@@ -15,7 +15,6 @@ export const ButtonContainer = styled.div`
 		align-items: center;
 		margin-top: 1rem;
 		margin-bottom: 1rem;
-		padding-right: 1rem;
 	}
 `;

--- a/frontend/src/container/AppLayout/AppLayout.styles.scss
+++ b/frontend/src/container/AppLayout/AppLayout.styles.scss
@@ -1,61 +0,0 @@
-.app-layout {
-	position: relative;
-	height: 100%;
-	width: 100%;
-
-	.app-content {
-		width: 100%;
-		overflow: auto;
-
-		.content-container {
-			position: relative;
-			margin: 0 1rem;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
-			width: 100%;
-		}
-	}
-}
-
-.isDarkMode {
-	.app-layout {
-		.app-content {
-			background: #0b0c0e;
-		}
-	}
-}
-
-.isLightMode {
-	.app-layout {
-		.app-content {
-			background: #ffffff;
-		}
-	}
-}
-
-.trial-expiry-banner {
-	padding: 8px;
-	background-color: #f25733;
-	color: white;
-	text-align: center;
-}
-
-.upgrade-link {
-	padding: 0px;
-	padding-right: 4px;
-	display: inline !important;
-	color: white;
-	text-decoration: underline;
-	text-decoration-color: white;
-	text-decoration-thickness: 2px;
-	text-underline-offset: 2px;
-
-	&:hover {
-		color: white;
-		text-decoration: underline;
-		text-decoration-color: white;
-		text-decoration-thickness: 2px;
-		text-underline-offset: 2px;
-	}
-}
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -1,22 +1,13 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import './AppLayout.styles.scss';
-
-import { Flex } from 'antd';
 import getDynamicConfigs from 'api/dynamicConfigs/getDynamicConfigs';
 import getUserLatestVersion from 'api/user/getLatestVersion';
 import getUserVersion from 'api/user/getVersion';
-import cx from 'classnames';
 import ROUTES from 'constants/routes';
+import Header from 'container/Header';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { ReactNode, useEffect, useMemo, useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
@@ -34,20 +25,15 @@ import {
 	UPDATE_LATEST_VERSION_ERROR,
 } from 'types/actions/app';
 import AppReducer from 'types/reducer/app';
-import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';

 import { ChildrenContainer, Layout, LayoutContent } from './styles';
 import { getRouteKey } from './utils';

 function AppLayout(props: AppLayoutProps): JSX.Element {
-	const { isLoggedIn, user, role } = useSelector<AppState, AppReducer>(
+	const { isLoggedIn, user } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
 	);

-	const isDarkMode = useIsDarkMode();
-
-	const { data: licenseData, isFetching } = useLicense();
-
 	const { pathname } = useLocation();
 	const { t } = useTranslation(['titles']);

@@ -210,87 +196,25 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const renderFullScreen =
 		pathname === ROUTES.GET_STARTED || pathname === ROUTES.WORKSPACE_LOCKED;

-	const [showTrialExpiryBanner, setShowTrialExpiryBanner] = useState(false);
-
-	useEffect(() => {
-		if (
-			!isFetching &&
-			licenseData?.payload?.onTrial &&
-			!licenseData?.payload?.trialConvertedToSubscription &&
-			!licenseData?.payload?.workSpaceBlock &&
-			getRemainingDays(licenseData?.payload.trialEnd) < 7
-		) {
-			setShowTrialExpiryBanner(true);
-		}
-	}, [licenseData, isFetching]);
-
-	const handleUpgrade = (): void => {
-		if (role === 'ADMIN') {
-			history.push(ROUTES.BILLING);
-		}
-	};
-
-	const isLogsView = (): boolean =>
-		routeKey === 'LOGS' ||
-		routeKey === 'LOGS_EXPLORER' ||
-		routeKey === 'LOGS_PIPELINES';
-
-	useEffect(() => {
-		if (isDarkMode) {
-			document.body.classList.remove('lightMode');
-			document.body.classList.add('darkMode');
-		} else {
-			document.body.classList.add('lightMode');
-			document.body.classList.remove('darkMode');
-		}
-	}, [isDarkMode]);
-
 	return (
-		<Layout className={isDarkMode ? 'darkMode' : 'lightMode'}>
+		<Layout>
 			<Helmet>
 				<title>{pageTitle}</title>
 			</Helmet>

-			{showTrialExpiryBanner && (
-				<div className="trial-expiry-banner">
-					You are in free trial period. Your free trial will end on{' '}
-					<span>
-						{getFormattedDate(licenseData?.payload?.trialEnd || Date.now())}.
-					</span>
-					{role === 'ADMIN' ? (
-						<span>
-							{' '}
-							Please{' '}
-							<a className="upgrade-link" onClick={handleUpgrade}>
-								upgrade
-							</a>
-							to continue using SigNoz features.
-						</span>
-					) : (
-						'Please contact your administrator for upgrading to a paid plan.'
-					)}
-				</div>
-			)}
+			{isToDisplayLayout && <Header />}
+			<Layout>
+				{isToDisplayLayout && !renderFullScreen && <SideNav />}

-			<Flex className={cx('app-layout', isDarkMode ? 'darkMode' : 'lightMode')}>
-				{isToDisplayLayout && !renderFullScreen && (
-					<SideNav licenseData={licenseData} isFetching={isFetching} />
-				)}
-				<div className="app-content">
-					<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
-						<LayoutContent>
-							<ChildrenContainer
-								style={{
-									margin: isLogsView() ? 0 : ' 0 1rem',
-								}}
-							>
-								{isToDisplayLayout && !renderFullScreen && <TopNav />}
-								{children}
-							</ChildrenContainer>
-						</LayoutContent>
-					</ErrorBoundary>
-				</div>
-			</Flex>
+				<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+					<LayoutContent>
+						<ChildrenContainer>
+							{isToDisplayLayout && !renderFullScreen && <TopNav />}
+							{children}
+						</ChildrenContainer>
+					</LayoutContent>
+				</ErrorBoundary>
+			</Layout>
 		</Layout>
 	);
 }
--- a/frontend/src/container/AppLayout/styles.ts
+++ b/frontend/src/container/AppLayout/styles.ts
@@ -13,10 +13,10 @@ export const Layout = styled(LayoutComponent)`

 export const LayoutContent = styled(LayoutComponent.Content)`
 	overflow-y: auto;
-	height: 100%;
 `;

 export const ChildrenContainer = styled.div`
+	margin: 0 1rem;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
--- a/frontend/src/container/EditRules/index.tsx
+++ b/frontend/src/container/EditRules/index.tsx
@@ -7,18 +7,16 @@ function EditRules({ initialValue, ruleId }: EditRulesProps): JSX.Element {
 	const [formInstance] = Form.useForm();

 	return (
-		<div style={{ marginTop: '1rem' }}>
-			<FormAlertRules
-				alertType={
-					initialValue.alertType
-						? (initialValue.alertType as AlertTypes)
-						: AlertTypes.METRICS_BASED_ALERT
-				}
-				formInstance={formInstance}
-				initialValue={initialValue}
-				ruleId={ruleId}
-			/>
-		</div>
+		<FormAlertRules
+			alertType={
+				initialValue.alertType
+					? (initialValue.alertType as AlertTypes)
+					: AlertTypes.METRICS_BASED_ALERT
+			}
+			formInstance={formInstance}
+			initialValue={initialValue}
+			ruleId={ruleId}
+		/>
 	);
 }

--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
@@ -1,87 +0,0 @@
-.explorer-options {
-	display: flex;
-	gap: 16px;
-	padding: 8px 16px;
-	border-radius: 50px;
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	background: rgba(22, 24, 29, 0.6);
-	box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.25);
-	backdrop-filter: blur(20px);
-	position: fixed;
-	bottom: 16px;
-	left: calc(50% + 240px);
-	transform: translate(calc(-50% - 120px), 0);
-
-	hr {
-		border-color: #1d212d;
-	}
-
-	.view-options,
-	.actions {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: 8px;
-
-		button {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			gap: 8px;
-
-			border: 1px solid #1d2023;
-			color: #c0c1c3;
-			background-color: #161922;
-
-			box-shadow: none !important;
-
-			&.ant-btn-round {
-				padding-inline-start: 10px;
-				padding-inline-end: 8px;
-
-				font-weight: 500;
-			}
-
-			&.ant-btn-round:disabled {
-				background-color: rgba(209, 209, 209, 0.074);
-				color: #5f5f5f;
-			}
-		}
-
-		.ant-select-focused {
-			border-color: transparent !important;
-
-			.ant-select-selector {
-				border-color: transparent !important;
-				box-shadow: none !important;
-			}
-		}
-
-		.ant-select-selector {
-			border: transparent !important;
-			background-color: transparent !important;
-		}
-	}
-}
-
-.lightMode {
-	.explorer-options {
-		border: 1px solid var(--bg-vanilla-300);
-		background: rgba(255, 255, 255, 0.8);
-		box-shadow: 4px 4px 16px 4px rgba(255, 255, 255, 0.55);
-		backdrop-filter: blur(20px);
-
-		hr {
-			border-color: var(--bg-vanilla-300);
-		}
-
-		.view-options,
-		.actions {
-			button {
-				border: 1px solid var(--bg-vanilla-300);
-				color: var(--bg-ink-200);
-				background-color: var(--bg-vanilla-300);
-			}
-		}
-	}
-}
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -1,233 +0,0 @@
-import './ExplorerOptions.styles.scss';
-
-import { Button, Modal, Select, Tooltip } from 'antd';
-import axios from 'axios';
-import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import ExportPanelContainer from 'container/ExportPanel/ExportPanelContainer';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
-import { useUpdateView } from 'hooks/saveViews/useUpdateView';
-import useErrorNotification from 'hooks/useErrorNotification';
-import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
-import { useNotifications } from 'hooks/useNotifications';
-import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
-import { ConciergeBell, Disc3, Plus } from 'lucide-react';
-import { useCallback, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { DATASOURCE_VS_ROUTES } from './constants';
-
-function ExplorerOptions({
-	disabled,
-	isLoading,
-	onExport,
-	query,
-	sourcepage,
-}: ExplorerOptionsProps): JSX.Element {
-	const [isExport, setIsExport] = useState<boolean>(false);
-	const { notifications } = useNotifications();
-	const history = useHistory();
-
-	const onModalToggle = useCallback((value: boolean) => {
-		setIsExport(value);
-	}, []);
-
-	const onCreateAlertsHandler = useCallback(() => {
-		history.push(
-			`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
-				JSON.stringify(query),
-			)}`,
-		);
-	}, [history, query]);
-
-	const onCancel = (value: boolean) => (): void => {
-		onModalToggle(value);
-	};
-
-	const onAddToDashboard = (): void => {
-		setIsExport(true);
-	};
-
-	const {
-		data: viewsData,
-		isLoading: viewsIsLoading,
-		error,
-		isRefetching,
-		refetch: refetchAllView,
-	} = useGetAllViews(sourcepage);
-
-	const { currentQuery, panelType, isStagedQueryUpdated } = useQueryBuilder();
-
-	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
-	const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || '';
-
-	const { mutateAsync: updateViewAsync } = useUpdateView({
-		compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType),
-		viewKey,
-		extraData: '',
-		sourcePage: sourcepage,
-		viewName,
-	});
-
-	const showErrorNotification = (err: Error): void => {
-		notifications.error({
-			message: axios.isAxiosError(err) ? err.message : SOMETHING_WENT_WRONG,
-		});
-	};
-
-	const onUpdateQueryHandler = (): void => {
-		updateViewAsync(
-			{
-				compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType),
-				viewKey,
-				extraData: '',
-				sourcePage: sourcepage,
-				viewName,
-			},
-			{
-				onSuccess: () => {
-					notifications.success({
-						message: 'View Updated Successfully',
-					});
-					refetchAllView();
-				},
-				onError: (err) => {
-					showErrorNotification(err);
-				},
-			},
-		);
-	};
-
-	useErrorNotification(error);
-
-	const { handleExplorerTabChange } = useHandleExplorerTabChange();
-
-	const onMenuItemSelectHandler = useCallback(
-		({ key }: { key: string }): void => {
-			const currentViewDetails = getViewDetailsUsingViewKey(
-				key,
-				viewsData?.data.data,
-			);
-			if (!currentViewDetails) return;
-			const {
-				query,
-				name,
-				uuid,
-				panelType: currentPanelType,
-			} = currentViewDetails;
-
-			handleExplorerTabChange(currentPanelType, {
-				query,
-				name,
-				uuid,
-			});
-		},
-		[viewsData, handleExplorerTabChange],
-	);
-
-	const onClearHandler = (): void => {
-		history.replace(DATASOURCE_VS_ROUTES[sourcepage]);
-	};
-
-	const handleSelect = (
-		value: string,
-		option: { key: string; value: string },
-	): void => {
-		onMenuItemSelectHandler({
-			key: option.key,
-		});
-	};
-
-	const isQueryUpdated = isStagedQueryUpdated(viewsData?.data?.data, viewKey);
-
-	return (
-		<>
-			<div className="explorer-options">
-				{viewsData?.data.data && viewsData?.data.data.length && (
-					<>
-						<div className="view-options">
-							<Select<string, { key: string; value: string }>
-								getPopupContainer={popupContainer}
-								showSearch
-								placeholder="Select a view"
-								optionFilterProp="children"
-								loading={viewsIsLoading || isRefetching}
-								optionLabelProp="value"
-								value={viewName || undefined}
-								onSelect={handleSelect}
-								style={{
-									width: 150,
-								}}
-								allowClear
-								onClear={onClearHandler}
-							>
-								{viewsData?.data.data.map((view) => (
-									<Select.Option key={view.uuid} value={view.name}>
-										<Tooltip title={view.name} placement="right">
-											{view.name}
-										</Tooltip>
-									</Select.Option>
-								))}
-							</Select>
-
-							<Button
-								shape="round"
-								onClick={onUpdateQueryHandler}
-								disabled={!isQueryUpdated}
-							>
-								<Disc3 size={16} /> Save this view
-							</Button>
-						</div>
-
-						<hr />
-					</>
-				)}
-
-				<div className="actions">
-					<Button disabled={disabled} shape="circle" onClick={onCreateAlertsHandler}>
-						<ConciergeBell size={16} />
-					</Button>
-
-					<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}>
-						<Plus size={16} />
-					</Button>
-				</div>
-			</div>
-
-			<Modal
-				footer={null}
-				onOk={onCancel(false)}
-				onCancel={onCancel(false)}
-				open={isExport}
-				centered
-				destroyOnClose
-			>
-				<ExportPanelContainer
-					query={query}
-					isLoading={isLoading}
-					onExport={onExport}
-				/>
-			</Modal>
-		</>
-	);
-}
-
-export interface ExplorerOptionsProps {
-	isLoading?: boolean;
-	onExport: (dashboard: Dashboard | null) => void;
-	query: Query | null;
-	disabled: boolean;
-	sourcepage: DataSource;
-}
-
-ExplorerOptions.defaultProps = { isLoading: false };
-
-export default ExplorerOptions;
--- a/frontend/src/container/ExplorerOptions/constants.ts
+++ b/frontend/src/container/ExplorerOptions/constants.ts
@@ -1,8 +0,0 @@
-import ROUTES from 'constants/routes';
-import { DataSource } from 'types/common/queryBuilder';
-
-export const DATASOURCE_VS_ROUTES: Record<DataSource, string> = {
-	[DataSource.METRICS]: '',
-	[DataSource.TRACES]: ROUTES.TRACES_EXPLORER,
-	[DataSource.LOGS]: ROUTES.LOGS_EXPLORER,
-};
--- a/frontend/src/container/ExportPanel/ExportPanelContainer.tsx
+++ b/frontend/src/container/ExportPanel/ExportPanelContainer.tsx
@@ -16,10 +16,7 @@ import {
 } from './styles';
 import { filterOptions, getSelectOptions } from './utils';

-function ExportPanelContainer({
-	isLoading,
-	onExport,
-}: ExportPanelProps): JSX.Element {
+function ExportPanel({ isLoading, onExport }: ExportPanelProps): JSX.Element {
 	const { t } = useTranslation(['dashboard']);

 	const [selectedDashboardId, setSelectedDashboardId] = useState<string | null>(
@@ -121,4 +118,4 @@ function ExportPanelContainer({
 	);
 }

-export default ExportPanelContainer;
+export default ExportPanel;
--- a/frontend/src/container/ExportPanel/index.tsx
+++ b/frontend/src/container/ExportPanel/index.tsx
@@ -7,7 +7,7 @@ import { useCallback, useState } from 'react';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

-import ExportPanelContainer from './ExportPanelContainer';
+import ExportPanelContainer from './ExportPanel';

 function ExportPanel({
 	isLoading,
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
@@ -5,7 +5,6 @@ import GridPanelSwitch from 'container/GridPanelSwitch';
 import { getFormatNameByOptionId } from 'container/NewWidget/RightContainer/alertFomatCategories';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
 import { Time } from 'container/TopNav/DateTimeSelection/config';
-import { Time as TimeV2 } from 'container/TopNav/DateTimeSelectionV2/config';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -29,7 +28,7 @@ export interface ChartPreviewProps {
 	query: Query | null;
 	graphType?: PANEL_TYPES;
 	selectedTime?: timePreferenceType;
-	selectedInterval?: Time | TimeV2;
+	selectedInterval?: Time;
 	headline?: JSX.Element;
 	alertDef?: AlertDef;
 	userQueryKey?: string;
--- a/frontend/src/container/FormAlertRules/QuerySection.styles.scss
+++ b/frontend/src/container/FormAlertRules/QuerySection.styles.scss
@@ -1,56 +0,0 @@
-.alert-tabs {
-	.ant-tabs-tab {
-		border: none !important;
-		margin-left: 0px !important;
-		padding: 0px !important;
-
-		.nav-btns {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-		.ant-btn-default {
-			border-color: transparent;
-		}
-	}
-	.ant-tabs-tab-active {
-		.nav-btns {
-			background: var(--bg-slate-400) !important;
-		}
-	}
-
-	.ant-tabs-nav {
-		margin: 0px;
-		margin-bottom: 0.5rem;
-	}
-	.ant-tabs-nav::before {
-		border-bottom: none !important;
-	}
-	.ant-tabs-nav-list {
-		border: 1px solid var(--bg-slate-200);
-	}
-	.ant-tabs-tab + .ant-tabs-tab {
-		border-left: 1px solid var(--bg-slate-200) !important;
-	}
-
-	.stage-run-query {
-		display: flex;
-		align-items: center;
-	}
-}
-
-.lightMode {
-	.alert-tabs {
-		.ant-tabs-nav-list {
-			border: 1px solid var(--bg-vanilla-300);
-		}
-		.ant-tabs-tab + .ant-tabs-tab {
-			border-left: 1px solid var(--bg-vanilla-200) !important;
-		}
-		.ant-tabs-tab-active {
-			.nav-btns {
-				background: var(--bg-vanilla-300) !important;
-			}
-		}
-	}
-}
--- a/frontend/src/container/FormAlertRules/QuerySection.tsx
+++ b/frontend/src/container/FormAlertRules/QuerySection.tsx
@@ -1,10 +1,7 @@
-import './QuerySection.styles.scss';
-
 import { Button, Tabs } from 'antd';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QueryBuilder } from 'container/QueryBuilder';
-import { Atom, LucideAccessibility, Play, Terminal } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -52,51 +49,22 @@ function QuerySection({

 	const tabs = [
 		{
-			label: (
-				<Button className="nav-btns">
-					<Atom size={14} />
-				</Button>
-			),
+			label: t('tab_qb'),
 			key: EQueryType.QUERY_BUILDER,
 		},
 		{
-			label: (
-				<Button className="nav-btns">
-					<Terminal size={14} />
-				</Button>
-			),
+			label: t('tab_chquery'),
 			key: EQueryType.CLICKHOUSE,
 		},
 	];

 	const items = useMemo(
 		() => [
-			{
-				label: (
-					<Button className="nav-btns">
-						<Atom size={14} />
-					</Button>
-				),
-				key: EQueryType.QUERY_BUILDER,
-			},
-			{
-				label: (
-					<Button className="nav-btns">
-						<Terminal size={14} />
-					</Button>
-				),
-				key: EQueryType.CLICKHOUSE,
-			},
-			{
-				label: (
-					<Button className="nav-btns">
-						<LucideAccessibility size={14} />
-					</Button>
-				),
-				key: EQueryType.PROM,
-			},
+			{ label: t('tab_qb'), key: EQueryType.QUERY_BUILDER },
+			{ label: t('tab_chquery'), key: EQueryType.CLICKHOUSE },
+			{ label: t('tab_promql'), key: EQueryType.PROM },
 		],
-		[],
+		[t],
 	);

 	const renderTabs = (typ: AlertTypes): JSX.Element | null => {
@@ -105,54 +73,40 @@ function QuerySection({
 			case AlertTypes.LOGS_BASED_ALERT:
 			case AlertTypes.EXCEPTIONS_BASED_ALERT:
 				return (
-					<div className="alert-tabs">
-						<Tabs
-							type="card"
-							style={{ width: '100%' }}
-							defaultActiveKey={EQueryType.QUERY_BUILDER}
-							activeKey={queryCategory}
-							onChange={handleQueryCategoryChange}
-							tabBarExtraContent={
-								<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-									<Button
-										type="primary"
-										onClick={runQuery}
-										className="stage-run-query"
-										icon={<Play size={14} />}
-									>
-										Stage & Run Query
-									</Button>
-								</span>
-							}
-							items={tabs}
-						/>
-					</div>
+					<Tabs
+						type="card"
+						style={{ width: '100%' }}
+						defaultActiveKey={EQueryType.QUERY_BUILDER}
+						activeKey={queryCategory}
+						onChange={handleQueryCategoryChange}
+						tabBarExtraContent={
+							<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+								<Button type="primary" onClick={runQuery}>
+									Run Query
+								</Button>
+							</span>
+						}
+						items={tabs}
+					/>
 				);
 			case AlertTypes.METRICS_BASED_ALERT:
 			default:
 				return (
-					<div className="alert-tabs">
-						<Tabs
-							type="card"
-							style={{ width: '100%' }}
-							defaultActiveKey={EQueryType.QUERY_BUILDER}
-							activeKey={queryCategory}
-							onChange={handleQueryCategoryChange}
-							tabBarExtraContent={
-								<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-									<Button
-										type="primary"
-										onClick={runQuery}
-										className="stage-run-query"
-										icon={<Play size={14} />}
-									>
-										Stage & Run Query
-									</Button>
-								</span>
-							}
-							items={items}
-						/>
-					</div>
+					<Tabs
+						type="card"
+						style={{ width: '100%' }}
+						defaultActiveKey={EQueryType.QUERY_BUILDER}
+						activeKey={queryCategory}
+						onChange={handleQueryCategoryChange}
+						tabBarExtraContent={
+							<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+								<Button type="primary" onClick={runQuery}>
+									Run Query
+								</Button>
+							</span>
+						}
+						items={items}
+					/>
 				);
 		}
 	};
@@ -172,7 +126,7 @@ function QuerySection({
 		<>
 			<StepHeading> {t('alert_form_step1')}</StepHeading>
 			<FormContainer>
-				<div>{renderTabs(alertType)}</div>
+				<div style={{ display: 'flex' }}>{renderTabs(alertType)}</div>
 				{renderQuerySection(queryCategory)}
 			</FormContainer>
 		</>
--- a/frontend/src/container/FormAlertRules/styles.ts
+++ b/frontend/src/container/FormAlertRules/styles.ts
@@ -76,10 +76,6 @@ export const FormContainer = styled(Card)`
 	display: flex;
 	flex-direction: column;
 	border-radius: 4px;
-
-	.ant-card-body {
-		padding: 12px;
-	}
 `;

 export const TextareaMedium = styled(TextArea)`
--- a/frontend/src/container/FullViewHeader/FullViewHeader.styles.scss
+++ b/frontend/src/container/FullViewHeader/FullViewHeader.styles.scss
@@ -1,37 +0,0 @@
-.full-view-header-container {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding: 24px 0;
-
-	.brand-logo {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: 16px;
-		cursor: pointer;
-
-		img {
-			height: 32px;
-			width: 32px;
-		}
-
-		.brand-logo-name {
-			font-family: 'Work Sans', sans-serif;
-			font-size: 24px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 18px;
-
-			color: #fff;
-		}
-	}
-}
-
-.lightMode {
-	.brand-logo {
-		.brand-logo-name {
-			color: black;
-		}
-	}
-}
--- a/frontend/src/container/FullViewHeader/FullViewHeader.tsx
+++ b/frontend/src/container/FullViewHeader/FullViewHeader.tsx
@@ -1,28 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import './FullViewHeader.styles.scss';
-
-import history from 'lib/history';
-
-export default function FullViewHeader({
-	overrideRoute,
-}: {
-	overrideRoute?: string;
-}): React.ReactElement {
-	const handleLogoClick = (): void => {
-		history.push(overrideRoute || '/');
-	};
-	return (
-		<div className="full-view-header-container">
-			<div className="brand-logo" onClick={handleLogoClick}>
-				<img src="/Logos/signoz-brand-logo.svg" alt="SigNoz" />
-
-				<div className="brand-logo-name">SigNoz</div>
-			</div>
-		</div>
-	);
-}
-
-FullViewHeader.defaultProps = {
-	overrideRoute: '/',
-};
--- a/frontend/src/container/GantChart/GantChart.styles.scss
+++ b/frontend/src/container/GantChart/GantChart.styles.scss
@@ -1,16 +0,0 @@
-.span-container {
-	.spanDetails {
-		position: absolute;
-		height: 50px;
-		padding: 8px;
-		min-width: 150px;
-		background: lightcyan;
-		color: black;
-		bottom: 24px;
-		left: 0;
-
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-}
--- a/frontend/src/container/GantChart/Span/index.tsx
+++ b/frontend/src/container/GantChart/Span/index.tsx
@@ -1,96 +0,0 @@
-import '../GantChart.styles.scss';
-
-import { Popover, Typography } from 'antd';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import dayjs from 'dayjs';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useEffect } from 'react';
-import { toFixed } from 'utils/toFixed';
-
-import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles';
-
-interface SpanLengthProps {
-	globalStart: number;
-	startTime: number;
-	name: string;
-	width: string;
-	leftOffset: string;
-	bgColor: string;
-	inMsCount: number;
-}
-
-function Span(props: SpanLengthProps): JSX.Element {
-	const {
-		width,
-		leftOffset,
-		bgColor,
-		inMsCount,
-		startTime,
-		name,
-		globalStart,
-	} = props;
-	const isDarkMode = useIsDarkMode();
-	const { time, timeUnitName } = convertTimeToRelevantUnit(inMsCount);
-
-	useEffect(() => {
-		document.documentElement.scrollTop = document.documentElement.clientHeight;
-		document.documentElement.scrollLeft = document.documentElement.clientWidth;
-	}, []);
-
-	const getContent = (): JSX.Element => {
-		const timeStamp = dayjs(startTime).format('h:mm:ss:SSS A');
-		const startTimeInMs = startTime - globalStart;
-		return (
-			<div>
-				<Typography.Text style={{ marginBottom: '8px' }}>
-					{' '}
-					Duration : {inMsCount}
-				</Typography.Text>
-				<br />
-				<Typography.Text style={{ marginBottom: '8px' }}>
-					Start Time: {startTimeInMs}ms [{timeStamp}]{' '}
-				</Typography.Text>
-			</div>
-		);
-	};
-
-	return (
-		<SpanWrapper className="span-container">
-			<SpanLine
-				className="spanLine"
-				isDarkMode={isDarkMode}
-				bgColor={bgColor}
-				leftOffset={leftOffset}
-				width={width}
-			/>
-
-			<div>
-				<Popover
-					style={{
-						left: `${leftOffset}%`,
-					}}
-					title={name}
-					content={getContent()}
-					trigger="hover"
-					placement="left"
-					autoAdjustOverflow
-				>
-					<SpanBorder
-						className="spanTrack"
-						isDarkMode={isDarkMode}
-						bgColor={bgColor}
-						leftOffset={leftOffset}
-						width={width}
-					/>
-				</Popover>
-			</div>
-
-			<SpanText isDarkMode={isDarkMode} leftOffset={leftOffset}>{`${toFixed(
-				time,
-				2,
-			)} ${timeUnitName}`}</SpanText>
-		</SpanWrapper>
-	);
-}
-
-export default Span;
--- a/frontend/src/container/GantChart/SpanLength/index.tsx
+++ b/frontend/src/container/GantChart/SpanLength/index.tsx
@@ -0,0 +1,40 @@
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { toFixed } from 'utils/toFixed';
+
+import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles';
+
+interface SpanLengthProps {
+	width: string;
+	leftOffset: string;
+	bgColor: string;
+	inMsCount: number;
+}
+
+function SpanLength(props: SpanLengthProps): JSX.Element {
+	const { width, leftOffset, bgColor, inMsCount } = props;
+	const isDarkMode = useIsDarkMode();
+	const { time, timeUnitName } = convertTimeToRelevantUnit(inMsCount);
+	return (
+		<SpanWrapper>
+			<SpanLine
+				isDarkMode={isDarkMode}
+				bgColor={bgColor}
+				leftOffset={leftOffset}
+				width={width}
+			/>
+			<SpanBorder
+				isDarkMode={isDarkMode}
+				bgColor={bgColor}
+				leftOffset={leftOffset}
+				width={width}
+			/>
+			<SpanText isDarkMode={isDarkMode} leftOffset={leftOffset}>{`${toFixed(
+				time,
+				2,
+			)} ${timeUnitName}`}</SpanText>
+		</SpanWrapper>
+	);
+}
+
+export default SpanLength;
--- a/frontend/src/container/GantChart/SpanLength/styles.ts
+++ b/frontend/src/container/GantChart/SpanLength/styles.ts
--- a/frontend/src/container/GantChart/Trace/index.tsx
+++ b/frontend/src/container/GantChart/Trace/index.tsx
@@ -16,7 +16,7 @@ import {
 import { ITraceTree } from 'types/api/trace/getTraceItem';

 import { ITraceMetaData } from '..';
-import Span from '../Span';
+import SpanLength from '../SpanLength';
 import SpanName from '../SpanName';
 import { getMetaDataFromSpanTree, getTopLeftFromBody } from '../utils';
 import {
@@ -158,7 +158,7 @@ function Trace(props: TraceProps): JSX.Element {
 									isDarkMode={isDarkMode}
 									onClick={onClickTreeExpansion}
 								>
-									<Typography style={{ wordBreak: 'normal' }}>{totalSpans}</Typography>
+									<Typography>{totalSpans}</Typography>
 									<CaretContainer>{icon}</CaretContainer>
 								</CardComponent>
 							)}
@@ -169,10 +169,7 @@ function Trace(props: TraceProps): JSX.Element {
 					</StyledRow>
 				</StyledCol>
 				<Col flex="1">
-					<Span
-						globalStart={globalStart}
-						startTime={startTime}
-						name={name}
+					<SpanLength
 						leftOffset={nodeLeftOffset.toString()}
 						width={width.toString()}
 						bgColor={serviceColour}
--- a/frontend/src/container/GantChart/index.tsx
+++ b/frontend/src/container/GantChart/index.tsx
@@ -41,11 +41,7 @@ function GanttChart(props: GanttChartProps): JSX.Element {
 				onClick={handleCollapse}
 				title={isExpandAll ? 'Collapse All' : 'Expand All'}
 			>
-				{isExpandAll ? (
-					<MinusSquareOutlined style={{ fontSize: '16px', color: '#08c' }} />
-				) : (
-					<PlusSquareOutlined style={{ fontSize: '16px', color: '#08c' }} />
-				)}
+				{isExpandAll ? <MinusSquareOutlined /> : <PlusSquareOutlined />}
 			</CollapseButton>
 			<CardWrapper>
 				<Trace
--- a/frontend/src/container/GantChart/styles.ts
+++ b/frontend/src/container/GantChart/styles.ts
@@ -11,7 +11,6 @@ export const Wrapper = styled.ul`
 		border-left: 1px solid #434343;
 		padding-left: 1rem;
 		width: 100%;
-		margin: 0px;
 	}

 	ul li {
@@ -45,4 +44,6 @@ export const CardContainer = styled.li`
 export const CollapseButton = styled.div`
 	position: absolute;
 	top: 0;
+	left: 0;
+	font-size: 1.2rem;
 `;
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -1,5 +1,3 @@
-import '../GridCardLayout.styles.scss';
-
 import { Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
--- a/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
+++ b/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
@@ -14,7 +14,7 @@ import { Dropdown, MenuProps, Tooltip, Typography } from 'antd';
 import Spinner from 'components/Spinner';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
+import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import { ReactNode, useCallback, useMemo } from 'react';
@@ -71,7 +71,13 @@ function WidgetHeader({
 		);
 	}, [widget.id, widget.panelTypes, widget.query]);

-	const onCreateAlertsHandler = useCreateAlerts(widget);
+	const onCreateAlertsHandler = useCallback(() => {
+		history.push(
+			`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
+				JSON.stringify(widget.query),
+			)}`,
+		);
+	}, [widget]);

 	const keyMethodMapping = useMemo(
 		() => ({
--- a/frontend/src/container/GridTableComponent/styles.ts
+++ b/frontend/src/container/GridTableComponent/styles.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components';

 export const WrapperStyled = styled.div`
-	height: 95%;
+	height: 100%;
 	overflow: hidden;

 	& .ant-table-wrapper {
@@ -19,13 +19,5 @@ export const WrapperStyled = styled.div`
 	& .ant-table {
 		flex: 1;
 		overflow: auto;
-
-		> .ant-table-container {
-			> .ant-table-content {
-				> table {
-					min-width: 99% !important;
-				}
-			}
-		}
 	}
 `;
--- a/frontend/src/container/ListAlertRules/ListAlert.tsx
+++ b/frontend/src/container/ListAlertRules/ListAlert.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import { PlusOutlined } from '@ant-design/icons';
-import { Input, Typography } from 'antd';
-import type { ColumnsType } from 'antd/es/table/interface';
+import { Typography } from 'antd';
+import { ColumnsType } from 'antd/lib/table';
 import saveAlertApi from 'api/alerts/save';
 import DropDown from 'components/DropDown/DropDown';
 import {
@@ -14,12 +14,9 @@ import LabelColumn from 'components/TableRenderer/LabelColumn';
 import TextToolTip from 'components/TextToolTip';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import useSortableTable from 'hooks/ResizeTable/useSortableTable';
 import useComponentPermission from 'hooks/useComponentPermission';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
 import useInterval from 'hooks/useInterval';
 import { useNotifications } from 'hooks/useNotifications';
-import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { useCallback, useState } from 'react';
@@ -32,19 +29,12 @@ import { GettableAlert } from 'types/api/alerts/get';
 import AppReducer from 'types/reducer/app';

 import DeleteAlert from './DeleteAlert';
-import {
-	Button,
-	ButtonContainer,
-	ColumnButton,
-	SearchContainer,
-} from './styles';
+import { Button, ButtonContainer, ColumnButton } from './styles';
 import Status from './TableComponents/Status';
 import ToggleAlertState from './ToggleAlertState';
-import { filterAlerts } from './utils';
-
-const { Search } = Input;

 function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
+	const [data, setData] = useState<GettableAlert[]>(allAlertRules || []);
 	const { t } = useTranslation('common');
 	const { role, featureResponse } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
@@ -54,39 +44,13 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		role,
 	);

-	const params = useUrlQuery();
-	const orderColumnParam = params.get('columnKey');
-	const orderQueryParam = params.get('order');
-	const paginationParam = params.get('page');
-	const searchParams = params.get('search');
-	const [searchString, setSearchString] = useState<string>(searchParams || '');
-	const [data, setData] = useState<GettableAlert[]>(() => {
-		const value = searchString.toLowerCase();
-		const filteredData = filterAlerts(allAlertRules, value);
-		return filteredData || [];
-	});
-
-	// Type asuring
-	const sortingOrder: 'ascend' | 'descend' | null =
-		orderQueryParam === 'ascend' || orderQueryParam === 'descend'
-			? orderQueryParam
-			: null;
-
-	const { sortedInfo, handleChange } = useSortableTable<GettableAlert>(
-		sortingOrder,
-		orderColumnParam || '',
-		searchString,
-	);
-
 	const { notifications: notificationsApi } = useNotifications();

 	useInterval(() => {
 		(async (): Promise<void> => {
 			const { data: refetchData, status } = await refetch();
 			if (status === 'success') {
-				const value = searchString.toLowerCase();
-				const filteredData = filterAlerts(refetchData.payload || [], value);
-				setData(filteredData || []);
+				setData(refetchData?.payload || []);
 			}
 			if (status === 'error') {
 				notificationsApi.error({
@@ -164,13 +128,6 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		}
 	};

-	const handleSearch = useDebouncedFn((e: unknown) => {
-		const value = (e as React.BaseSyntheticEvent).target.value.toLowerCase();
-		setSearchString(value);
-		const filteredData = filterAlerts(allAlertRules, value);
-		setData(filteredData);
-	});
-
 	const dynamicColumns: ColumnsType<GettableAlert> = [
 		{
 			title: 'Created At',
@@ -185,10 +142,6 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				return prev - next;
 			},
 			render: DateComponent,
-			sortOrder:
-				sortedInfo.columnKey === DynamicColumnsKey.CreatedAt
-					? sortedInfo.order
-					: null,
 		},
 		{
 			title: 'Created By',
@@ -210,10 +163,6 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				return prev - next;
 			},
 			render: DateComponent,
-			sortOrder:
-				sortedInfo.columnKey === DynamicColumnsKey.UpdatedAt
-					? sortedInfo.order
-					: null,
 		},
 		{
 			title: 'Updated By',
@@ -234,7 +183,6 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				(b.state ? b.state.charCodeAt(0) : 1000) -
 				(a.state ? a.state.charCodeAt(0) : 1000),
 			render: (value): JSX.Element => <Status status={value} />,
-			sortOrder: sortedInfo.columnKey === 'state' ? sortedInfo.order : null,
 		},
 		{
 			title: 'Alert Name',
@@ -250,7 +198,6 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			render: (value, record): JSX.Element => (
 				<Typography.Link onClick={onEditHandler(record)}>{value}</Typography.Link>
 			),
-			sortOrder: sortedInfo.columnKey === 'name' ? sortedInfo.order : null,
 		},
 		{
 			title: 'Severity',
@@ -267,7 +214,6 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {

 				return <Typography>{severityValue}</Typography>;
 			},
-			sortOrder: sortedInfo.columnKey === 'severity' ? sortedInfo.order : null,
 		},
 		{
 			title: 'Labels',
@@ -325,37 +271,26 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {

 	return (
 		<>
-			<SearchContainer>
-				<Search
-					placeholder="Search by Alert Name, Severity and Labels"
-					onChange={handleSearch}
-					defaultValue={searchString}
+			<ButtonContainer>
+				<TextToolTip
+					{...{
+						text: `More details on how to create alerts`,
+						url: 'https://signoz.io/docs/userguide/alerts-management/',
+					}}
 				/>
-				<ButtonContainer>
-					<TextToolTip
-						{...{
-							text: `More details on how to create alerts`,
-							url: 'https://signoz.io/docs/userguide/alerts-management/',
-						}}
-					/>

-					{addNewAlert && (
-						<Button onClick={onClickNewAlertHandler} icon={<PlusOutlined />}>
-							New Alert
-						</Button>
-					)}
-				</ButtonContainer>
-			</SearchContainer>
+				{addNewAlert && (
+					<Button onClick={onClickNewAlertHandler} icon={<PlusOutlined />}>
+						New Alert
+					</Button>
+				)}
+			</ButtonContainer>
 			<DynamicColumnTable
 				tablesource={TableDataSource.Alert}
 				columns={columns}
 				rowKey="id"
 				dataSource={data}
 				dynamicColumns={dynamicColumns}
-				onChange={handleChange}
-				pagination={{
-					defaultCurrent: Number(paginationParam) || 1,
-				}}
 			/>
 		</>
 	);
--- a/frontend/src/container/ListAlertRules/styles.ts
+++ b/frontend/src/container/ListAlertRules/styles.ts
@@ -1,17 +1,11 @@
 import { Button as ButtonComponent } from 'antd';
 import styled from 'styled-components';

-export const SearchContainer = styled.div`
-	&&& {
-		display: flex;
-		margin-bottom: 2rem;
-		align-items: center;
-		gap: 2rem;
-	}
-`;
 export const ButtonContainer = styled.div`
 	&&& {
 		display: flex;
+		justify-content: flex-end;
+		margin-bottom: 2rem;
 		align-items: center;
 	}
 `;
--- a/frontend/src/container/ListAlertRules/utils.ts
+++ b/frontend/src/container/ListAlertRules/utils.ts
@@ -1,25 +0,0 @@
-import { GettableAlert } from 'types/api/alerts/get';
-
-export const filterAlerts = (
-	allAlertRules: GettableAlert[],
-	filter: string,
-): GettableAlert[] => {
-	const value = filter.toLowerCase();
-	return allAlertRules.filter((alert) => {
-		const alertName = alert.alert.toLowerCase();
-		const severity = alert.labels?.severity.toLowerCase();
-		const labels = Object.keys(alert.labels || {})
-			.filter((e) => e !== 'severity')
-			.join(' ')
-			.toLowerCase();
-
-		const labelValue = Object.values(alert.labels || {});
-
-		return (
-			alertName.includes(value) ||
-			severity?.includes(value) ||
-			labels.includes(value) ||
-			labelValue.includes(value)
-		);
-	});
-};
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -332,7 +332,7 @@ function DashboardsList(): JSX.Element {
 	);

 	return (
-		<Card style={{ margin: '16px 0' }}>
+		<Card>
 			{GetHeader}

 			<TableContainer>
--- a/frontend/src/container/ListOfDashboard/TableComponents/styles.ts
+++ b/frontend/src/container/ListOfDashboard/TableComponents/styles.ts
@@ -1,7 +1,8 @@
+import { blue } from '@ant-design/colors';
 import { Typography } from 'antd';
 import styled from 'styled-components';

 export const TableLinkText = styled(Typography.Text)`
-	color: #4e74f8 !important;
+	color: ${blue.primary} !important;
 	cursor: pointer;
 `;
--- a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
+++ b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
@@ -1,6 +1,4 @@
 import { Card, Typography } from 'antd';
-import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import Spinner from 'components/Spinner';
@@ -12,8 +10,8 @@ import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { Heading } from 'container/LogsTable/styles';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import useFontFaceObserver from 'hooks/useFontObserver';
 import { useEventSource } from 'providers/EventSource';
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -33,13 +31,6 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {

 	const { activeLogId } = useCopyLogLink();

-	const {
-		activeLog,
-		onClearActiveLog,
-		onAddToQuery,
-		onSetActiveLog,
-	} = useActiveLog();
-
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
@@ -51,6 +42,19 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 		[logs, activeLogId],
 	);

+	useFontFaceObserver(
+		[
+			{
+				family: 'Fira Code',
+				weight: '300',
+			},
+		],
+		options.format === 'raw',
+		{
+			timeout: 5000,
+		},
+	);
+
 	const selectedFields = convertKeysToColumnFields(options.selectColumns);

 	const getItemContent = useCallback(
@@ -62,22 +66,10 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 			}

 			return (
-				<ListLogView
-					key={log.id}
-					logData={log}
-					selectedFields={selectedFields}
-					onAddToQuery={onAddToQuery}
-					onSetActiveLog={onSetActiveLog}
-				/>
+				<ListLogView key={log.id} logData={log} selectedFields={selectedFields} />
 			);
 		},
-		[
-			onAddToQuery,
-			onSetActiveLog,
-			options.format,
-			options.maxLines,
-			selectedFields,
-		],
+		[options.format, options.maxLines, selectedFields],
 	);

 	useEffect(() => {
@@ -131,13 +123,6 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 					)}
 				</InfinityWrapperStyled>
 			)}
-			<LogDetail
-				selectedTab={VIEW_TYPES.OVERVIEW}
-				log={activeLog}
-				onClose={onClearActiveLog}
-				onAddToQuery={onAddToQuery}
-				onClickActionItem={onAddToQuery}
-			/>
 		</>
 	);
 }
--- a/frontend/src/container/LiveLogsTopNav/styles.ts
+++ b/frontend/src/container/LiveLogsTopNav/styles.ts
@@ -1,18 +1,19 @@
 import { Button, ButtonProps } from 'antd';
+import { themeColors } from 'constants/theme';
 import styled, { css, FlattenSimpleInterpolation } from 'styled-components';

 export const LiveButtonStyled = styled(Button)<ButtonProps>`
-	background-color: #1eb475;
+	background-color: rgba(${themeColors.buttonSuccessRgb}, 0.9);

 	${({ danger }): FlattenSimpleInterpolation =>
 		!danger
 			? css`
 					&:hover {
-						background-color: #1eb475 !important;
+						background-color: rgba(${themeColors.buttonSuccessRgb}, 1) !important;
 					}

 					&:active {
-						background-color: #1eb475 !important;
+						background-color: rgba(${themeColors.buttonSuccessRgb}, 0.7) !important;
 					}
 			  `
 			: css``}
--- a/frontend/src/container/LocalTopNav/index.tsx
+++ b/frontend/src/container/LocalTopNav/index.tsx
@@ -1,9 +1,7 @@
-import { Col, Row, Space, Typography } from 'antd';
-import ROUTES from 'constants/routes';
+import { Col, Row, Space } from 'antd';
 import NewExplorerCTA from 'container/NewExplorerCTA';
-import { FileText } from 'lucide-react';
-import { useLocation } from 'react-use';

+import ShowBreadcrumbs from '../TopNav/Breadcrumbs';
 import DateTimeSelector from '../TopNav/DateTimeSelection';
 import { Container } from './styles';
 import { LocalTopNavProps } from './types';
@@ -12,25 +10,13 @@ function LocalTopNav({
 	actions,
 	renderPermissions,
 }: LocalTopNavProps): JSX.Element | null {
-	const { pathname } = useLocation();
-
-	const isLiveLogsPage = pathname === ROUTES.LIVE_LOGS;
-
 	return (
 		<Container>
-			{isLiveLogsPage && (
-				<Col span={16}>
-					<Space>
-						<FileText color="#fff" size={16} />
+			<Col span={16}>
+				<ShowBreadcrumbs />
+			</Col>

-						<Typography.Title level={4} style={{ marginTop: 0, marginBottom: 0 }}>
-							Live Logs
-						</Typography.Title>
-					</Space>
-				</Col>
-			)}
-
-			<Col span={isLiveLogsPage ? 8 : 24}>
+			<Col span={8}>
 				<Row justify="end">
 					<Space align="start" size={30} direction="horizontal">
 						<NewExplorerCTA />
--- a/frontend/src/container/LocalTopNav/styles.ts
+++ b/frontend/src/container/LocalTopNav/styles.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components';

 export const Container = styled(Row)`
 	&&& {
-		margin-top: 1rem;
+		margin-top: 2rem;
 		min-height: 8vh;
 	}
 `;
--- a/frontend/src/container/LogDetailedView/ActionItem.tsx
+++ b/frontend/src/container/LogDetailedView/ActionItem.tsx
@@ -29,11 +29,11 @@ function ActionItem({
 		() => (
 			<Col>
 				<Button type="text" size="small" onClick={onClickHandler(OPERATORS.IN)}>
-					<PlusCircleOutlined size={12} /> Filter for value
+					<PlusCircleOutlined /> Filter for value
 				</Button>
 				<br />
 				<Button type="text" size="small" onClick={onClickHandler(OPERATORS.NIN)}>
-					<MinusCircleOutlined size={12} /> Filter out value
+					<MinusCircleOutlined /> Filter out value
 				</Button>
 			</Col>
 		),
--- a/frontend/src/container/LogDetailedView/ContextView/ContextView.styles.scss
+++ b/frontend/src/container/LogDetailedView/ContextView/ContextView.styles.scss
@@ -1,3 +0,0 @@
-.log-context-container {
-    border: 1px solid var(--bg-slate-400);
-}
--- a/frontend/src/container/LogDetailedView/ContextView/ContextView.tsx
+++ b/frontend/src/container/LogDetailedView/ContextView/ContextView.tsx
@@ -1,54 +0,0 @@
-import './ContextView.styles.scss';
-
-import RawLogView from 'components/Logs/RawLogView';
-import LogsContextList from 'container/LogsContextList';
-import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
-import { ILog } from 'types/api/logs/log';
-import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-interface LogContextProps {
-	log: ILog;
-	contextQuery: Query | undefined;
-	filters: TagFilter | null;
-	isEdit: boolean;
-}
-
-function ContextView({
-	log,
-	filters,
-	contextQuery,
-	isEdit,
-}: LogContextProps): JSX.Element {
-	// eslint-disable-next-line react/jsx-no-useless-fragment
-	if (!contextQuery) return <></>;
-
-	return (
-		<div className="log-context-container">
-			<LogsContextList
-				className="logs-context-list-asc"
-				order={ORDERBY_FILTERS.ASC}
-				filters={filters}
-				isEdit={isEdit}
-				log={log}
-				query={contextQuery}
-			/>
-			<RawLogView
-				isActiveLog
-				isReadOnly
-				isTextOverflowEllipsisDisabled={false}
-				data={log}
-				linesPerRow={1}
-			/>
-			<LogsContextList
-				className="logs-context-list-desc"
-				order={ORDERBY_FILTERS.DESC}
-				filters={filters}
-				isEdit={isEdit}
-				log={log}
-				query={contextQuery}
-			/>
-		</div>
-	);
-}
-
-export default ContextView;
--- a/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss
+++ b/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss
@@ -1,22 +0,0 @@
-.field-renderer-container {
-	display: flex !important;
-	gap: 8px;
-	align-items: center;
-	justify-content: space-between;
-
-	.label {
-		color: var(--text-robin-400);
-		font-family: SF Mono;
-		font-family: 'Space Mono', monospace;
-		font-size: 13px;
-		font-weight: var(--font-weight-normal);
-		line-height: 18px;
-		letter-spacing: -0.005em;
-		text-align: left;
-	}
-
-	.tags {
-		display: flex;
-		gap: 8;
-	}
-}
--- a/frontend/src/container/LogDetailedView/FieldRenderer.styles.ts
+++ b/frontend/src/container/LogDetailedView/FieldRenderer.styles.ts
@@ -3,23 +3,18 @@ import styled from 'styled-components';

 export const TagContainer = styled(Tag)`
 	&&& {
-		border-color: var(--bg-slate-400);
 		border-radius: 0.25rem;
+		padding: 0.063rem 0.5rem;
 		font-weight: 600;
-		font-size: var(--font-size-xs);
+		font-size: 0.75rem;
 		line-height: 1.25rem;
 	}
 `;

 export const TagLabel = styled.span`
 	font-weight: 400;
-	font-size: 12px;
 `;

 export const TagValue = styled.span`
-	color: var(--text-sakura-400);
-	/* background-color: var(--bg-slate-400); */
 	text-transform: capitalize;
-	font-size: var(--font-size-xs);
-	font-weight: 400;
 `;
--- a/frontend/src/container/LogDetailedView/FieldRenderer.tsx
+++ b/frontend/src/container/LogDetailedView/FieldRenderer.tsx
@@ -1,6 +1,4 @@
-import './FieldRenderer.styles.scss';
-
-import { Divider } from 'antd';
+import { blue } from '@ant-design/colors';

 import { TagContainer, TagLabel, TagValue } from './FieldRenderer.styles';
 import { FieldRendererProps } from './LogDetailedView.types';
@@ -10,29 +8,21 @@ function FieldRenderer({ field }: FieldRendererProps): JSX.Element {
 	const { dataType, newField, logType } = getFieldAttributes(field);

 	return (
-		<span className="field-renderer-container">
+		<span>
 			{dataType && newField && logType ? (
 				<>
-					<div className="label">{newField} </div>
-
-					<div className="tags">
-						<TagContainer>
-							<TagLabel>
-								type
-								<Divider type="vertical" />{' '}
-							</TagLabel>
-							<TagValue>{logType}</TagValue>
-						</TagContainer>
-						<TagContainer>
-							<TagLabel>
-								data type <Divider type="vertical" />{' '}
-							</TagLabel>
-							<TagValue>{dataType}</TagValue>
-						</TagContainer>
-					</div>
+					<span style={{ color: blue[4] }}>{newField} </span>
+					<TagContainer>
+						<TagLabel>Type: </TagLabel>
+						<TagValue>{logType}</TagValue>
+					</TagContainer>
+					<TagContainer>
+						<TagLabel>Data type: </TagLabel>
+						<TagValue>{dataType}</TagValue>
+					</TagContainer>
 				</>
 			) : (
-				<span className="label">{field}</span>
+				<span style={{ color: blue[4] }}>{field}</span>
 			)}
 		</span>
 	);
--- a/frontend/src/container/LogDetailedView/JsonView.styles.scss
+++ b/frontend/src/container/LogDetailedView/JsonView.styles.scss
@@ -1,46 +0,0 @@
-.json-view-container {
-	border-radius: 3px;
-	border: 1px solid var(--bg-slate-500);
-	padding-top: 16px;
-
-	.json-view-footer {
-		height: 36px;
-		display: flex;
-		align-items: center;
-		border-top: 1px solid var(--bg-slate-500);
-	}
-
-	.log-switch {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-
-		.wrap-word-switch {
-			display: flex;
-			gap: 8px;
-			margin-left: var(--margin-3);
-			align-items: center;
-		}
-
-		.log-switch-btn {
-			border: 1px solid var(--bg-slate-500);
-			background-color: var(--bg-slate-500);
-			width: 40px;
-			height: 100%;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	}
-}
-
-.lightMode {
-	.json-view-container {
-		.log-switch {
-			.log-switch-btn {
-				background: var(--bg-vanilla-200);
-				border: 1px solid var(--bg-vanilla-400);
-			}
-		}
-	}
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Rajat-Dabade	ced74603c0	chore: updated test script	2023-12-15 13:46:16 +05:30
Rajat-Dabade	f59fb81109	refactor: updated test directory	2023-12-15 13:46:16 +05:30
Rajat-Dabade	507e68a0c1	refactor: reverted back as working directory is specified as frontend	2023-12-15 13:46:16 +05:30
Rajat-Dabade	4ad8a1f3ad	refactor: shifted i18n to original location	2023-12-15 13:46:16 +05:30
Rajat-Dabade	19faf6a584	chore: updates	2023-12-15 13:46:16 +05:30
Rajat-Dabade	3978ada811	refactor: for push and pull request	2023-12-15 13:46:16 +05:30
Rajat-Dabade	0a04fc04a5	refactor: generate code coverage report on every push	2023-12-15 13:46:16 +05:30
Rajat-Dabade	7c9e333b84	refactor: added package-manager	2023-12-15 13:46:16 +05:30
Rajat-Dabade	dd78afb20f	refactor: updated the working directory	2023-12-15 13:46:16 +05:30
Rajat-Dabade	237d765376	refactor: updated github flow	2023-12-15 13:46:16 +05:30
Rajat-Dabade	85e865fb1b	refactor: updated token	2023-12-15 13:46:16 +05:30
Rajat-Dabade	975e5daf03	refactor: updated test case	2023-12-15 13:46:16 +05:30
Rajat-Dabade	8a532cca17	refactor: updated jest running command	2023-12-15 13:46:16 +05:30
Rajat-Dabade	b9c908719f	refactor: updated the command for jest	2023-12-15 13:46:16 +05:30
Rajat-Dabade	63c7b5e9e1	chore: minor changes	2023-12-15 13:46:16 +05:30
Rajat-Dabade	32eeb3d106	refactor: done some changes	2023-12-15 13:46:16 +05:30
Rajat-Dabade	1a4ec2bf00	feat: jest code coverage report	2023-12-15 13:46:16 +05:30