From 58874b2ff1743d55b353741c19c874cc5a10794d Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 7 Nov 2025 16:05:20 +0000
Subject: [PATCH 01/49] refactor: Update styles to use Mantine color variables
 for consistency

---
 .../app/src/components/PageHeader.module.scss |  4 +-
 packages/app/src/components/Table.module.scss | 20 ++++----
 packages/app/styles/AlertsPage.module.scss    | 10 ++--
 packages/app/styles/AppNav.module.scss        | 30 ++++++------
 .../app/styles/EndpointSubpanel.module.scss   |  2 +-
 packages/app/styles/HDXLineChart.module.scss  | 12 ++---
 packages/app/styles/LogSidePanel.module.scss  | 40 ++++++++--------
 packages/app/styles/LogTable.module.scss      |  2 +-
 packages/app/styles/SearchPage.module.scss    | 21 +++++----
 .../app/styles/SessionSubpanelV2.module.scss  | 32 ++++++-------
 packages/app/styles/app.scss                  | 29 ++++++------
 .../design-tokens/_semantic-colors.scss       | 46 +++++++++++++++++++
 packages/app/styles/variables.scss            | 14 +-----
 13 files changed, 149 insertions(+), 113 deletions(-)
 create mode 100644 packages/app/styles/design-tokens/_semantic-colors.scss

diff --git a/packages/app/src/components/PageHeader.module.scss b/packages/app/src/components/PageHeader.module.scss
index 7a557e2bd..f12fd625f 100644
--- a/packages/app/src/components/PageHeader.module.scss
+++ b/packages/app/src/components/PageHeader.module.scss
@@ -3,8 +3,8 @@
 .header {
   align-items: center;
   background-color: $body-bg;
-  border-bottom: 1px solid $slate-950;
-  color: $slate-200;
+  border-bottom: 1px solid var(--mantine-color-dark-9);
+  color: var(--mantine-color-dark-2);
   display: flex;
   font-weight: 500;
   height: 60px;
diff --git a/packages/app/src/components/Table.module.scss b/packages/app/src/components/Table.module.scss
index 09a7193c3..e7be363d7 100644
--- a/packages/app/src/components/Table.module.scss
+++ b/packages/app/src/components/Table.module.scss
@@ -22,7 +22,7 @@ $horizontalPadding: 12px;
     }
 
     tr {
-      border-bottom: 1px solid $slate-950;
+      border-bottom: 1px solid var(--mantine-color-dark-9);
     }
 
     tbody {
@@ -32,7 +32,7 @@ $horizontalPadding: 12px;
     }
 
     th {
-      color: $slate-300;
+      color: var(--mantine-color-dark-3);
       text-transform: uppercase;
       font-size: 9px;
       font-weight: 500;
@@ -103,7 +103,7 @@ $horizontalPadding: 12px;
 }
 
 .emptyMessage {
-  color: $slate-500;
+  color: var(--mantine-color-dark-5);
   text-align: center;
   padding: 10px;
 }
@@ -112,19 +112,19 @@ $horizontalPadding: 12px;
   display: flex;
   gap: 4px;
   border-radius: 4px;
-  background-color: $slate-950;
-  border: 1px solid $slate-900;
-  color: $slate-300;
+  background-color: var(--mantine-color-dark-9);
+  border: 1px solid var(--mantine-color-dark-9);
+  color: var(--mantine-color-dark-3);
   text-align: center;
   font-size: 11px;
 
   &:hover {
-    background-color: $slate-900;
-    border-color: $slate-800;
+    background-color: var(--mantine-color-dark-9);
+    border-color: var(--mantine-color-dark-8);
   }
 
   &:active {
-    background-color: $slate-950;
-    border-color: $slate-950;
+    background-color: var(--mantine-color-dark-9);
+    border-color: var(--mantine-color-dark-9);
   }
 }
diff --git a/packages/app/styles/AlertsPage.module.scss b/packages/app/styles/AlertsPage.module.scss
index 375fc2244..5ddfd87f3 100644
--- a/packages/app/styles/AlertsPage.module.scss
+++ b/packages/app/styles/AlertsPage.module.scss
@@ -1,11 +1,11 @@
 @import './variables';
 
 .sectionHeader {
-  border-bottom: 1px solid $slate-950;
+  border-bottom: 1px solid var(--mantine-color-dark-9);
   margin-top: 30px;
   padding-bottom: 10px;
   font-size: 14px;
-  color: $slate-400;
+  color: var(--mantine-color-dark-4);
 }
 
 .historyCardWrapper {
@@ -22,7 +22,7 @@
 .historyCard {
   width: 4px;
   height: 16px;
-  background-color: $slate-950;
+  background-color: var(--mantine-color-dark-9);
   border-radius: 2px;
   margin: 0 1px;
   cursor: pointer;
@@ -48,12 +48,12 @@
   justify-content: space-between;
   gap: 16px;
   padding: 12px 0;
-  border-bottom: 1px solid $slate-950;
+  border-bottom: 1px solid var(--mantine-color-dark-9);
 }
 
 .alertLink {
   font-weight: 500;
-  color: $slate-200;
+  color: var(--mantine-color-dark-2);
   text-decoration: none;
 
   &:hover {
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index cbd4c0943..bf54b69f5 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -6,13 +6,13 @@
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
-  border-right: 1px solid $slate-950;
+  border-right: 1px solid var(--mantine-color-dark-9);
 }
 
 .list {
-  // background-color: #00000030;
-  // border-bottom: 1px solid $slate-950;
-  border-top: 1px solid $slate-950;
+  // background-color: #00000030;background-color
+  // border-bottom: 1px solid var(--mantine-color-dark-9);border-bottom
+  border-top: 1px solid var(--mantine-color-dark-9);
   overflow-x: hidden;
   max-width: 100%;
   padding: 4px 16px;
@@ -32,7 +32,7 @@
 }
 
 .listGroupName {
-  color: $slate-400;
+  color: var(--mantine-color-dark-4);
   text-transform: uppercase;
   font-size: 11px;
   letter-spacing: 1px;
@@ -42,11 +42,11 @@
   display: flex;
   align-items: center;
 
-  // justify-content: space-between;
+  // justify-content: space-between;justify-content
   gap: 6px;
 
   &:hover {
-    color: $slate-300;
+    color: var(--mantine-color-dark-3);
     cursor: pointer;
   }
 }
@@ -55,7 +55,7 @@
   display: flex;
   justify-content: space-between;
   text-decoration: none;
-  color: $slate-200;
+  color: var(--mantine-color-dark-2);
   font-size: 13px;
   margin-bottom: 4px;
   max-width: 100%;
@@ -67,7 +67,7 @@
   gap: 10px;
 
   &:hover {
-    color: $slate-100;
+    color: var(--mantine-color-dark-1);
   }
 
   &:focus-visible {
@@ -81,7 +81,7 @@
 }
 
 .listEmptyMsg {
-  color: $slate-400;
+  color: var(--mantine-color-dark-4);
   font-size: 12px;
   margin: 8px 16px;
   overflow: hidden;
@@ -89,12 +89,12 @@
 }
 
 .listLinkActive {
-  // color: $green;
+  // color: $green;color
   color: var(--mantine-color-green-3);
   font-weight: 500;
 
   &:hover {
-    // color: $green;
+    // color: $green;color
     color: var(--mantine-color-green-3);
   }
 }
@@ -102,8 +102,8 @@
 .kbd {
   white-space: nowrap;
   letter-spacing: -1px;
-  color: $slate-400;
-  background: $slate-950;
+  color: var(--mantine-color-dark-4);
+  background: var(--mantine-color-dark-9);
   border-radius: 4px;
   padding: 0 4px;
   font-size: 10px;
@@ -129,7 +129,7 @@
   }
 
   &:active {
-    // background: var(--mantine-color-gray-9);
+    // background: var(--mantine-color-gray-9);background
     transform: translate(0, 1px);
   }
 }
diff --git a/packages/app/styles/EndpointSubpanel.module.scss b/packages/app/styles/EndpointSubpanel.module.scss
index 0a0af3926..7a2cc99a1 100644
--- a/packages/app/styles/EndpointSubpanel.module.scss
+++ b/packages/app/styles/EndpointSubpanel.module.scss
@@ -7,5 +7,5 @@
   height: 100%;
   background-color: $body-bg;
   box-shadow: 0 0 100px 40px rgb(0 0 0 / 70%);
-  border-left: 1px solid $slate-900;
+  border-left: 1px solid var(--mantine-color-dark-9);
 }
diff --git a/packages/app/styles/HDXLineChart.module.scss b/packages/app/styles/HDXLineChart.module.scss
index 99ebea253..b01a8f8aa 100644
--- a/packages/app/styles/HDXLineChart.module.scss
+++ b/packages/app/styles/HDXLineChart.module.scss
@@ -22,10 +22,10 @@
 }
 
 .legendMoreLink {
-  color: $slate-400;
+  color: var(--mantine-color-dark-4);
   cursor: pointer;
   text-decoration: underline;
-  text-decoration-color: $slate-700;
+  text-decoration-color: var(--mantine-color-dark-7);
 }
 
 .legendTooltipContent {
@@ -43,15 +43,15 @@
   border: 1px solid #5f6776;
   border-radius: 2px;
 
-  // background-color: rgb(0 0 0 / 80%);
-  // backdrop-filter: blur(2px);
-  // border-radius: 4px;
+  // background-color: rgb(0 0 0 / 80%);background-color
+  // backdrop-filter: blur(2px);backdrop-filter
+  // border-radius: 4px;border-radius
   font-size: 11px;
 }
 
 .chartTooltipHeader {
   padding: 2px 12px;
-  color: $slate-200;
+  color: var(--mantine-color-dark-2);
   border-bottom: 1px solid var(--mantine-color-dark-4);
 }
 
diff --git a/packages/app/styles/LogSidePanel.module.scss b/packages/app/styles/LogSidePanel.module.scss
index 3e000c436..1b2e33ffc 100644
--- a/packages/app/styles/LogSidePanel.module.scss
+++ b/packages/app/styles/LogSidePanel.module.scss
@@ -1,6 +1,6 @@
 @import './variables';
 
-// TODO: Use variables for spacings;
+// TODO: Use variables for spacings;TODO
 $padding-x: 24px;
 
 .panel {
@@ -10,7 +10,7 @@ $padding-x: 24px;
   height: 100%;
   background-color: $body-bg;
   box-shadow: 0 0 100px 40px rgb(0 0 0 / 70%);
-  border-left: 1px solid $slate-900;
+  border-left: 1px solid var(--mantine-color-dark-9);
 }
 
 .panelDragBar {
@@ -21,7 +21,7 @@ $padding-x: 24px;
   background-color: transparent;
 
   &:hover {
-    background-color: $slate-900;
+    background-color: var(--mantine-color-dark-9);
     transition: background-color 0.2s ease-in-out;
   }
 }
@@ -30,7 +30,7 @@ $padding-x: 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid $slate-900;
+  border-bottom: 1px solid var(--mantine-color-dark-9);
   padding: 12px $padding-x;
 }
 
@@ -47,14 +47,14 @@ $padding-x: 24px;
 }
 
 .severityChip {
-  background: $slate-800;
+  background: var(--mantine-color-dark-8);
   padding: 4px 12px;
   border-radius: 16px;
   margin-right: 8px;
 }
 
 .loadingState {
-  color: $slate-600;
+  color: var(--mantine-color-dark-6);
   width: 100%;
   margin: $padding-x;
   font-size: 16px;
@@ -70,22 +70,22 @@ $padding-x: 24px;
 
 .panelSectionWrapperTitle {
   padding: 18px 24px;
-  border-bottom: 1px solid $slate-950;
+  border-bottom: 1px solid var(--mantine-color-dark-9);
 }
 
 .kbdShortcuts {
-  background: $slate-950;
-  border-top: 1px solid $slate-900;
+  background: var(--mantine-color-dark-9);
+  border-top: 1px solid var(--mantine-color-dark-9);
   padding: 12px $padding-x;
-  color: $slate-300;
+  color: var(--mantine-color-dark-3);
   font-size: 11px;
 }
 
 .kbd {
   display: inline-block;
-  background: $slate-900;
+  background: var(--mantine-color-dark-9);
   letter-spacing: 0.5px;
-  border: 1px solid $slate-500;
+  border: 1px solid var(--mantine-color-dark-5);
   border-radius: 4px;
   padding: 1px 6px;
   margin: 0 2px;
@@ -94,11 +94,11 @@ $padding-x: 24px;
 .kbdDivider {
   height: 21px;
   width: 1px;
-  background: $slate-800;
+  background: var(--mantine-color-dark-8);
 }
 
 .lineContext {
-  color: $slate-300;
+  color: var(--mantine-color-dark-3);
   background-color: #ffffff08;
   padding: 8px 0;
   border-radius: 4px;
@@ -106,13 +106,13 @@ $padding-x: 24px;
 }
 
 .lineContextCurrentLine {
-  background-color: $slate-800;
-  color: $slate-100;
+  background-color: var(--mantine-color-dark-8);
+  color: var(--mantine-color-dark-1);
   font-weight: 600;
 
   .lineContextLineNo {
-    color: $slate-100;
-    border-right-color: $slate-600;
+    color: var(--mantine-color-dark-1);
+    border-right-color: var(--mantine-color-dark-6);
   }
 }
 
@@ -120,13 +120,13 @@ $padding-x: 24px;
   display: inline-block;
   width: 60px;
   text-align: right;
-  border-right: 1px solid $slate-950;
+  border-right: 1px solid var(--mantine-color-dark-9);
   padding-right: 12px;
   margin-right: 12px;
 }
 
 .emptyMessage {
-  color: $slate-500;
+  color: var(--mantine-color-dark-5);
   text-align: center;
   padding: 10px;
 }
diff --git a/packages/app/styles/LogTable.module.scss b/packages/app/styles/LogTable.module.scss
index 177b7d60a..15160bce6 100644
--- a/packages/app/styles/LogTable.module.scss
+++ b/packages/app/styles/LogTable.module.scss
@@ -44,7 +44,7 @@ $button-height: 18px;
 .expandedRowContent {
   max-height: 400px;
   overflow: auto;
-  background-color: $slate-950;
+  background-color: var(--mantine-color-dark-9);
   padding: 12px;
 }
 
diff --git a/packages/app/styles/SearchPage.module.scss b/packages/app/styles/SearchPage.module.scss
index 3ae43cf25..5350c2451 100644
--- a/packages/app/styles/SearchPage.module.scss
+++ b/packages/app/styles/SearchPage.module.scss
@@ -48,11 +48,11 @@
 
   &:hover {
     cursor: pointer;
-    color: $slate-300 !important;
+    color: var(--mantine-color-dark-3) !important;
   }
 
   &:active {
-    color: $slate-500 !important;
+    color: var(--mantine-color-dark-5) !important;
   }
 }
 
@@ -83,20 +83,20 @@
     align-items: center;
     padding: 0 4px;
     gap: 4px;
-    background-color: $slate-950;
+    background-color: var(--mantine-color-dark-9);
 
     .textButton {
       padding: 2px 4px;
       border-radius: 3px;
 
       &:hover {
-        background-color: $slate-800;
-        color: $slate-200;
+        background-color: var(--mantine-color-dark-8);
+        color: var(--mantine-color-dark-2);
       }
 
       &:active {
-        background-color: $slate-700;
-        color: $slate-100;
+        background-color: var(--mantine-color-dark-7);
+        color: var(--mantine-color-dark-1);
       }
     }
   }
@@ -106,7 +106,8 @@
       opacity: 1;
     }
 
-    background-color: $slate-950;
+    /* TODO COLOR BG */
+    background-color: var(--mantine-color-dark-1);
 
     .filterActions {
       display: flex;
@@ -137,12 +138,12 @@
 
 @keyframes highlight {
   0% {
-    background-color: $slate-950;
+    background-color: var(--mantine-color-dark-9);
     transform: scale(1.02);
   }
 
   50% {
-    background-color: $slate-900;
+    background-color: var(--mantine-color-dark-9);
     transform: scale(1.01);
   }
 
diff --git a/packages/app/styles/SessionSubpanelV2.module.scss b/packages/app/styles/SessionSubpanelV2.module.scss
index 1abf3b4fe..0408767ee 100644
--- a/packages/app/styles/SessionSubpanelV2.module.scss
+++ b/packages/app/styles/SessionSubpanelV2.module.scss
@@ -10,7 +10,7 @@
 
 .eventList {
   width: 300px;
-  border-right: 1px solid $slate-950;
+  border-right: 1px solid var(--mantine-color-dark-9);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -22,7 +22,7 @@
   flex-direction: column;
   gap: 6px;
   padding: 8px;
-  border-bottom: 1px solid $slate-950;
+  border-bottom: 1px solid var(--mantine-color-dark-9);
 }
 
 .eventListContainer {
@@ -32,7 +32,7 @@
 
 .eventRow {
   padding: 6px 12px;
-  border-bottom: 1px solid $slate-950;
+  border-bottom: 1px solid var(--mantine-color-dark-9);
   cursor: pointer;
   font-size: 12px;
   display: flex;
@@ -71,7 +71,7 @@
 }
 
 .eventRowIcon {
-  background: $slate-800;
+  background: var(--mantine-color-dark-8);
   width: 26px;
   height: 26px;
   display: flex;
@@ -108,7 +108,7 @@
   padding: 2px;
   margin: -2px;
   border-radius: 2px;
-  color: $slate-300;
+  color: var(--mantine-color-dark-3);
   font-size: 11px;
   align-self: center;
 
@@ -120,10 +120,10 @@
 .eventRowTitle {
   font-size: 12px;
   font-weight: bold;
-  color: $slate-200;
+  color: var(--mantine-color-dark-2);
 
   span {
-    color: $slate-400 !important;
+    color: var(--mantine-color-dark-4) !important;
     font-size: 11px;
     font-weight: normal;
 
@@ -137,7 +137,7 @@
 
 .eventRowDescription {
   font-size: 11px;
-  color: $slate-300;
+  color: var(--mantine-color-dark-3);
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
@@ -160,8 +160,8 @@
   justify-content: space-between;
   align-items: center;
   padding: 6px 12px;
-  background-color: $slate-950;
-  border-bottom: 1px solid $slate-900;
+  background-color: var(--mantine-color-dark-9);
+  border-bottom: 1px solid var(--mantine-color-dark-9);
   width: 100%;
   max-width: 100%;
   gap: 12px;
@@ -169,7 +169,7 @@
 
 .playerHeaderUrl {
   font-size: 11px;
-  color: $slate-200;
+  color: var(--mantine-color-dark-2);
   width: 100%;
   max-width: 100%;
   overflow: hidden;
@@ -184,14 +184,14 @@
     45deg,
     #ffffff10,
     #ffffff10 15px,
-    $slate-950 15px,
-    $slate-950 30px
+    var(--mantine-color-dark-9) 15px,
+    var(--mantine-color-dark-9) 30px
   );
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
-  color: $slate-300;
+  color: var(--mantine-color-dark-3);
 }
 
 .domPlayerWrapper {
@@ -219,7 +219,7 @@
   display: flex;
   padding: 6px 12px;
   align-items: center;
-  border-top: 1px solid $slate-950;
+  border-top: 1px solid var(--mantine-color-dark-9);
 }
 
 .playerToolbar {
@@ -227,7 +227,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 14px 20px;
-  border-top: 1px solid $slate-950;
+  border-top: 1px solid var(--mantine-color-dark-9);
 
   > div {
     flex: 1;
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index 061ad7d55..420e1b5f4 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -1,6 +1,7 @@
 /* stylelint-disable */
 
 @import './variables';
+@import './design-tokens/_semantic-colors';
 @import '~bootstrap/scss/bootstrap';
 @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css');
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap');
@@ -24,10 +25,10 @@
 html,
 body,
 html[class~='dark'] body {
-  background-color: $body-bg;
+  background-color: var(--color-bg-body);
 }
 .bg-body {
-  background-color: $body-bg;
+  background-color: var(--color-bg-body);
 }
 .bg-hdx-dark {
   background-color: $bg-hdx-dark;
@@ -90,27 +91,27 @@ html[class~='dark'] body {
 }
 
 .text-slate-700 {
-  color: $slate-700;
+  color: var(--mantine-color-dark-7);
 }
 
 .text-slate-600 {
-  color: $slate-600;
+  color: var(--mantine-color-dark-6);
 }
 
 .text-slate-500 {
-  color: $slate-500;
+  color: var(--mantine-color-dark-5);
 }
 
 .text-slate-400 {
-  color: $slate-400;
+  color: var(--mantine-color-dark-4);
 }
 
 .text-slate-300 {
-  color: $slate-300;
+  color: var(--mantine-color-dark-3);
 }
 
 .text-slate-200 {
-  color: $slate-200;
+  color: var(--mantine-color-dark-2);
 }
 
 .text-muted-hover {
@@ -715,13 +716,13 @@ body {
   pointer-events: none;
 }
 
-html.hdx-theme-light {
-  filter: invert(1) hue-rotate(180deg) brightness(1.05);
-}
+// html.hdx-theme-light {
+//   filter: invert(1) hue-rotate(180deg) brightness(1.05);
+// }
 
-html.hdx-theme-light .hdx-background-image {
-  display: none;
-}
+// html.hdx-theme-light .hdx-background-image {
+//   display: none;
+// }
 
 a.mantine-focus-auto:hover {
   color: inherit;
diff --git a/packages/app/styles/design-tokens/_semantic-colors.scss b/packages/app/styles/design-tokens/_semantic-colors.scss
new file mode 100644
index 000000000..c88089936
--- /dev/null
+++ b/packages/app/styles/design-tokens/_semantic-colors.scss
@@ -0,0 +1,46 @@
+:root {
+  /* Backgrounds */
+  --color-bg-body: var(--mantine-color-dark-9);
+  --color-bg-surface: var(--mantine-color-dark-8);
+  --color-bg-subtle: var(--mantine-color-dark-7);
+  --color-bg-sidebar: var(--mantine-color-dark-8);
+  --color-bg-header: var(--mantine-color-dark-8);
+  --color-bg-modal: var(--mantine-color-dark-7);
+  --color-bg-hover: var(--mantine-color-dark-6);
+  --color-bg-active: var(--mantine-color-dark-5);
+
+  /* Borders & Dividers */
+  --color-border: var(--mantine-color-dark-6);
+  --color-border-subtle: var(--mantine-color-dark-7);
+  --color-border-strong: var(--mantine-color-dark-4);
+
+  /* Text */
+  --color-text-primary: var(--mantine-color-dark-0);
+  --color-text-secondary: var(--mantine-color-dark-2);
+  --color-text-muted: var(--mantine-color-dark-3);
+  --color-text-inverse: var(--mantine-color-dark-9);
+
+  /* Icons */
+  --color-icon-primary: var(--mantine-color-dark-1);
+  --color-icon-muted: var(--mantine-color-dark-4);
+
+  /* Overlay & Backdrop */
+  --color-overlay: rgb(0 0 0 / 50%);
+  --color-backdrop: rgb(0 0 0 / 30%);
+
+  /* States */
+  --color-state-hover: var(--mantine-color-dark-6);
+  --color-state-selected: var(--mantine-color-dark-5);
+  --color-state-focus: var(--mantine-color-dark-4);
+
+  /* Semantic Highlights (using Mantine's core palette) */
+  --color-accent: var(--mantine-color-blue-5);
+  --color-success: var(--mantine-color-green-5);
+  --color-warning: var(--mantine-color-yellow-5);
+  --color-error: var(--mantine-color-red-5);
+
+  /* Code / Misc UI */
+  --color-bg-code: var(--mantine-color-dark-8);
+  --color-border-code: var(--mantine-color-dark-6);
+  --color-bg-kbd: var(--mantine-color-dark-9);
+}
diff --git a/packages/app/styles/variables.scss b/packages/app/styles/variables.scss
index e0b1219f7..97d0b6524 100644
--- a/packages/app/styles/variables.scss
+++ b/packages/app/styles/variables.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable */
 /**
   Colors
 */
@@ -20,19 +21,6 @@ $body-bg: #0f1215;
 $code-color: #4bb74a;
 $info: $purple;
 
-// TODO: Adjust contrast ratios
-$slate-50: #f6f7f9;
-$slate-100: #eceef2;
-$slate-200: #d5dae2;
-$slate-300: #b1bbc8;
-$slate-400: #8695aa;
-$slate-500: #677890;
-$slate-600: #526077;
-$slate-700: #434e61;
-$slate-800: #3a4352;
-$slate-900: #343a46;
-$slate-950: #25292e;
-
 /**
   Spacing
 */

From c3bcef75d85f97d5c638c03189a8583853e49973 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 7 Nov 2025 16:12:39 +0000
Subject: [PATCH 02/49] refactor: Enhance theme handling and improve
 ThemeWrapper for Mantine integration

---
 packages/app/pages/_app.tsx       | 15 ++++++++++-----
 packages/app/src/ThemeWrapper.tsx |  4 +++-
 packages/app/styles/app.scss      | 10 +++-------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/app/pages/_app.tsx b/packages/app/pages/_app.tsx
index 5d9086568..9aa27484c 100644
--- a/packages/app/pages/_app.tsx
+++ b/packages/app/pages/_app.tsx
@@ -96,13 +96,11 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   }, []);
 
   useEffect(() => {
-    document.documentElement.className =
-      userPreferences.theme === 'dark' ? 'hdx-theme-dark' : 'hdx-theme-light';
     // TODO: Remove after migration to Mantine
     document.body.style.fontFamily = userPreferences.font
       ? `"${userPreferences.font}", sans-serif`
       : '"IBM Plex Mono"';
-  }, [userPreferences.theme, userPreferences.font]);
+  }, [userPreferences.font]);
 
   const getLayout = Component.getLayout ?? (page => page);
 
@@ -117,14 +115,21 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         />
         <meta name="theme-color" content="#25292e"></meta>
         <meta name="google" content="notranslate" />
-        <ColorSchemeScript forceColorScheme="dark" />
+        <ColorSchemeScript
+          forceColorScheme={userPreferences.theme === 'dark' ? 'dark' : 'light'}
+        />
       </Head>
 
       <SSRProvider>
         <HDXQueryParamProvider>
           <QueryParamProvider adapter={NextAdapter}>
             <QueryClientProvider client={queryClient}>
-              <ThemeWrapper fontFamily={userPreferences.font}>
+              <ThemeWrapper
+                fontFamily={userPreferences.font}
+                colorScheme={
+                  userPreferences.theme === 'dark' ? 'dark' : 'light'
+                }
+              >
                 {getLayout(<Component {...pageProps} />)}
                 {confirmModal}
               </ThemeWrapper>
diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index 0a700b02f..bfa932684 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -142,15 +142,17 @@ const makeTheme = ({
 
 export const ThemeWrapper = ({
   fontFamily,
+  colorScheme = 'dark',
   children,
 }: {
   fontFamily?: string;
+  colorScheme?: 'dark' | 'light';
   children: React.ReactNode;
 }) => {
   const theme = React.useMemo(() => makeTheme({ fontFamily }), [fontFamily]);
 
   return (
-    <MantineProvider forceColorScheme="dark" theme={theme}>
+    <MantineProvider forceColorScheme={colorScheme} theme={theme}>
       <Notifications zIndex={999999} />
       {children}
     </MantineProvider>
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index 420e1b5f4..076db1c65 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -716,13 +716,9 @@ body {
   pointer-events: none;
 }
 
-// html.hdx-theme-light {
-//   filter: invert(1) hue-rotate(180deg) brightness(1.05);
-// }
-
-// html.hdx-theme-light .hdx-background-image {
-//   display: none;
-// }
+[data-mantine-color-scheme='light'] .hdx-background-image {
+  display: none;
+}
 
 a.mantine-focus-auto:hover {
   color: inherit;

From 3b026213a8560ae7e996b8d7f03f13db693554a8 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 10 Nov 2025 12:01:07 +0000
Subject: [PATCH 03/49] Refactor styles and components for improved theming and
 consistency

- Updated button colors and variants across ClickhousePage, DBChartPage, and DBSearchPage for better visual consistency.
- Refined ActionIcon styles in ThemeWrapper to enhance default and subtle variants.
- Adjusted background and border colors in various components to align with new semantic color variables.
- Replaced hardcoded colors with CSS variables for better theme management in stylesheets.
- Removed deprecated design tokens and introduced new semantic color definitions for dark and light modes.
- Added custom utility classes for layout and spacing to supplement Bootstrap utilities.
- Cleaned up unused styles and variables to streamline the codebase.
---
 packages/app/src/AppNav.components.tsx        |   5 +-
 packages/app/src/AppNav.tsx                   |  11 +-
 packages/app/src/AutocompleteInput.tsx        | 374 +++++++++---------
 packages/app/src/ClickhousePage.tsx           |   1 -
 packages/app/src/DBChartPage.tsx              |   2 +-
 packages/app/src/DBSearchPage.tsx             |  16 +-
 packages/app/src/HDXMultiSeriesTimeChart.tsx  |   5 +-
 packages/app/src/ThemeWrapper.tsx             |  48 ++-
 .../app/src/components/DBRowSidePanel.tsx     |   2 +-
 .../src/components/DBTable/TableHeader.tsx    |   2 +-
 .../app/src/components/PageHeader.module.scss |   8 +-
 packages/app/src/components/SQLEditor.tsx     |   3 +-
 .../app/src/components/SQLInlineEditor.tsx    |   4 +-
 packages/app/src/components/Table.module.scss |   4 +-
 packages/app/styles/AppNav.module.scss        |  19 +-
 .../app/styles/EndpointSubpanel.module.scss   |   2 +-
 packages/app/styles/LogSidePanel.module.scss  |   9 +-
 packages/app/styles/LogTable.module.scss      |  10 +-
 packages/app/styles/SearchPage.module.scss    |  11 +-
 packages/app/styles/_bootstrap-utilities.scss |  26 ++
 packages/app/styles/_semantic-colors.scss     | 126 ++++++
 packages/app/styles/_utilities.scss           | 201 ++++++++++
 packages/app/styles/app.scss                  | 266 ++-----------
 .../design-tokens/_semantic-colors.scss       |  46 ---
 packages/app/styles/variables.scss            |   7 +-
 25 files changed, 664 insertions(+), 544 deletions(-)
 create mode 100644 packages/app/styles/_bootstrap-utilities.scss
 create mode 100644 packages/app/styles/_semantic-colors.scss
 create mode 100644 packages/app/styles/_utilities.scss
 delete mode 100644 packages/app/styles/design-tokens/_semantic-colors.scss

diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
index 620b31d0b..f17d68004 100644
--- a/packages/app/src/AppNav.components.tsx
+++ b/packages/app/src/AppNav.components.tsx
@@ -320,9 +320,9 @@ export const AppNavLink = ({
         data-testid={testId}
         href={href}
         className={cx(
+          styles.listLink,
+          { [styles.listLinkActive]: pathname?.includes(href) },
           className,
-          'text-decoration-none d-flex justify-content-between align-items-center fs-7 text-muted-hover',
-          { 'fw-600 text-success': pathname?.includes(href) },
         )}
       >
         <span>
@@ -350,7 +350,6 @@ export const AppNavLink = ({
         <ActionIcon
           data-testid={`${testId}-toggle`}
           variant="subtle"
-          color="dark.2"
           size="sm"
           onClick={onToggle}
         >
diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index 7dbc8977d..956443c52 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -69,7 +69,6 @@ function NewDashboardButton() {
           py="0px"
           px="sm"
           fw={400}
-          color="gray.2"
         >
           <span className="pe-2">+</span> Create Dashboard
         </Button>
@@ -84,7 +83,6 @@ function NewDashboardButton() {
       py="0px"
       px="sm"
       fw={400}
-      color="gray.2"
       onClick={() =>
         createDashboard.mutate(
           {
@@ -619,7 +617,6 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
             </Link>
             <Button
               variant="subtle"
-              color="gray.4"
               p={isCollapsed ? '0px' : '8px'}
               h="32px"
               size="md"
@@ -751,13 +748,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                     <NewDashboardButton />
 
                     {isDashboardsLoading ? (
-                      <Loader
-                        color="gray.7"
-                        variant="dots"
-                        mx="md"
-                        my="xs"
-                        size="sm"
-                      />
+                      <Loader variant="dots" mx="md" my="xs" size="sm" />
                     ) : (
                       !IS_LOCAL_MODE && (
                         <>
diff --git a/packages/app/src/AutocompleteInput.tsx b/packages/app/src/AutocompleteInput.tsx
index 8ad602368..2f5dfadc1 100644
--- a/packages/app/src/AutocompleteInput.tsx
+++ b/packages/app/src/AutocompleteInput.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import Fuse from 'fuse.js';
-import { OverlayTrigger } from 'react-bootstrap';
-import { Textarea, UnstyledButton } from '@mantine/core';
+import { Popover, Textarea, UnstyledButton } from '@mantine/core';
+import { Background } from '@xyflow/react';
 
 import { useQueryHistory } from '@/utils';
 
@@ -131,210 +131,196 @@ export default function AutocompleteInput({
   const ref = useRef<HTMLDivElement>(null);
 
   return (
-    <OverlayTrigger
-      rootClose
-      onToggle={opened => {
-        // if opened is transitioning to false, but input is focused, ignore it
-        if (!opened && isSearchInputFocused) {
-          return;
-        }
-
-        setIsInputDropdownOpen(opened);
+    <Popover
+      opened={isInputDropdownOpen}
+      onChange={setIsInputDropdownOpen}
+      position="bottom-start"
+      offset={8}
+      width="target"
+      withinPortal
+      closeOnClickOutside
+      closeOnEscape
+      styles={{
+        dropdown: {
+          maxWidth:
+            (inputRef.current?.clientWidth || 0) > 300
+              ? inputRef.current?.clientWidth
+              : 720,
+          width: '100%',
+          zIndex,
+        },
       }}
-      show={isInputDropdownOpen}
-      placement="bottom-start"
-      delay={{ show: 0, hide: 0 }}
-      overlay={({ style, ...props }) => (
-        <div
-          className="bg-body border border-dark rounded"
+    >
+      <Popover.Target>
+        <Textarea
+          ref={inputRef}
+          placeholder={placeholder}
+          className="fs-8"
+          value={value}
+          size={size}
+          autosize
+          minRows={1}
+          maxRows={4}
           style={{
-            ...style,
-            maxWidth:
-              (inputRef.current?.clientWidth || 0) > 300
-                ? inputRef.current?.clientWidth
-                : 720,
-            width: '100%',
-            zIndex,
+            flexGrow: 1,
+            resize: 'none',
           }}
-          {...props}
-        >
-          {aboveSuggestions != null && (
-            <div className="d-flex p-2 flex-wrap px-3">{aboveSuggestions}</div>
-          )}
-          <div>
-            {suggestedProperties.length > 0 && (
-              <div className="border-top border-dark fs-8 py-2">
-                <div className="d-flex justify-content-between px-3 mb-2">
-                  <div className="me-2 text-light">{suggestionsHeader}</div>
-                  {suggestedProperties.length > suggestionsLimit && (
-                    <div className="text-muted">
-                      (Showing Top {suggestionsLimit})
-                    </div>
-                  )}
-                </div>
-                {suggestedProperties
-                  .slice(0, suggestionsLimit)
-                  .map(({ value, label }, i) => (
-                    <div
-                      className={`py-2 px-3 ${
-                        selectedAutocompleteIndex === i ? 'bg-hdx-dark' : ''
-                      }`}
-                      role="button"
-                      key={value}
-                      onMouseOver={() => {
-                        setSelectedAutocompleteIndex(i);
-                      }}
-                      onClick={() => {
-                        onAcceptSuggestion(value);
-                      }}
-                    >
-                      <span className="me-1">{label}</span>
-                    </div>
-                  ))}
-              </div>
-            )}
-          </div>
-          {belowSuggestions != null && (
-            <div className="border-top border-dark bg-body px-3 pt-2 pb-1 mt-2 fs-8 d-flex align-items-center text-muted flex-wrap">
-              {belowSuggestions}
-            </div>
-          )}
-          <div>
-            {showSearchHistory && (
-              <div className="border-top border-dark fs-8 py-2">
-                <div className="text-muted fs-8 fw-bold me-1 px-3">
-                  Search History:
-                </div>
-                {queryHistoryList.map(({ value, label }, i) => {
-                  return (
-                    <UnstyledButton
-                      className={`d-block w-100 text-start text-muted fw-normal px-3 py-2 fs-8 ${
-                        selectedQueryHistoryIndex === i ? 'bg-hdx-dark' : ''
-                      }`}
-                      key={value}
-                      onMouseOver={() => setSelectedQueryHistoryIndex(i)}
-                      onClick={() => onSelectSearchHistory(value)}
-                    >
-                      <span className="me-1 text-truncate">{label}</span>
-                    </UnstyledButton>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-      popperConfig={{
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [0, 8],
-            },
-          },
-        ],
-      }}
-      trigger={[]}
-    >
-      <Textarea
-        ref={inputRef}
-        placeholder={placeholder}
-        className="fs-8"
-        value={value}
-        size={size}
-        autosize
-        minRows={1}
-        maxRows={4}
-        style={{
-          flexGrow: 1,
-          resize: 'none',
-        }}
-        data-testid={dataTestId}
-        onChange={e => onChange(e.target.value)}
-        onFocus={() => {
-          setSelectedAutocompleteIndex(-1);
-          setSelectedQueryHistoryIndex(-1);
-          setIsSearchInputFocused(true);
-        }}
-        onBlur={() => {
-          setSelectedAutocompleteIndex(-1);
-          setSelectedQueryHistoryIndex(-1);
-          setIsSearchInputFocused(false);
-        }}
-        onKeyDown={e => {
-          if (e.key === 'Escape' && e.target instanceof HTMLTextAreaElement) {
-            e.target.blur();
-          }
+          data-testid={dataTestId}
+          onChange={e => onChange(e.target.value)}
+          onFocus={() => {
+            setSelectedAutocompleteIndex(-1);
+            setSelectedQueryHistoryIndex(-1);
+            setIsSearchInputFocused(true);
+          }}
+          onBlur={() => {
+            setSelectedAutocompleteIndex(-1);
+            setSelectedQueryHistoryIndex(-1);
+            setIsSearchInputFocused(false);
+          }}
+          onKeyDown={e => {
+            if (e.key === 'Escape' && e.target instanceof HTMLTextAreaElement) {
+              e.target.blur();
+            }
 
-          // Autocomplete Navigation/Acceptance Keys
-          if (e.key === 'Tab' && e.target instanceof HTMLTextAreaElement) {
-            if (
-              suggestedProperties.length > 0 &&
-              selectedAutocompleteIndex < suggestedProperties.length &&
-              selectedAutocompleteIndex >= 0
-            ) {
-              e.preventDefault();
-              onAcceptSuggestion(
-                suggestedProperties[selectedAutocompleteIndex].value,
-              );
+            // Autocomplete Navigation/Acceptance Keys
+            if (e.key === 'Tab' && e.target instanceof HTMLTextAreaElement) {
+              if (
+                suggestedProperties.length > 0 &&
+                selectedAutocompleteIndex < suggestedProperties.length &&
+                selectedAutocompleteIndex >= 0
+              ) {
+                e.preventDefault();
+                onAcceptSuggestion(
+                  suggestedProperties[selectedAutocompleteIndex].value,
+                );
+              }
             }
-          }
-          if (e.key === 'Enter' && e.target instanceof HTMLTextAreaElement) {
-            if (
-              suggestedProperties.length > 0 &&
-              selectedAutocompleteIndex < suggestedProperties.length &&
-              selectedAutocompleteIndex >= 0
-            ) {
-              e.preventDefault();
-              onAcceptSuggestion(
-                suggestedProperties[selectedAutocompleteIndex].value,
-              );
-            } else {
-              // Allow shift+enter to still create new lines
-              if (!e.shiftKey) {
+            if (e.key === 'Enter' && e.target instanceof HTMLTextAreaElement) {
+              if (
+                suggestedProperties.length > 0 &&
+                selectedAutocompleteIndex < suggestedProperties.length &&
+                selectedAutocompleteIndex >= 0
+              ) {
                 e.preventDefault();
-                if (queryHistoryType && value) {
-                  setQueryHistory(value);
+                onAcceptSuggestion(
+                  suggestedProperties[selectedAutocompleteIndex].value,
+                );
+              } else {
+                // Allow shift+enter to still create new lines
+                if (!e.shiftKey) {
+                  e.preventDefault();
+                  if (queryHistoryType && value) {
+                    setQueryHistory(value);
+                  }
+                  onSubmit?.();
                 }
-                onSubmit?.();
               }
             }
-          }
-          if (
-            e.key === 'ArrowDown' &&
-            e.target instanceof HTMLTextAreaElement
-          ) {
-            if (suggestedProperties.length > 0) {
-              setSelectedAutocompleteIndex(
-                Math.min(
-                  selectedAutocompleteIndex + 1,
-                  suggestedProperties.length - 1,
-                  suggestionsLimit - 1,
-                ),
-              );
+            if (
+              e.key === 'ArrowDown' &&
+              e.target instanceof HTMLTextAreaElement
+            ) {
+              if (suggestedProperties.length > 0) {
+                setSelectedAutocompleteIndex(
+                  Math.min(
+                    selectedAutocompleteIndex + 1,
+                    suggestedProperties.length - 1,
+                    suggestionsLimit - 1,
+                  ),
+                );
+              }
             }
-          }
-          if (e.key === 'ArrowUp' && e.target instanceof HTMLTextAreaElement) {
-            if (suggestedProperties.length > 0) {
-              setSelectedAutocompleteIndex(
-                Math.max(selectedAutocompleteIndex - 1, 0),
-              );
+            if (
+              e.key === 'ArrowUp' &&
+              e.target instanceof HTMLTextAreaElement
+            ) {
+              if (suggestedProperties.length > 0) {
+                setSelectedAutocompleteIndex(
+                  Math.max(selectedAutocompleteIndex - 1, 0),
+                );
+              }
             }
+          }}
+          rightSectionWidth={ref.current?.clientWidth ?? 'auto'}
+          rightSection={
+            language != null && onLanguageChange != null ? (
+              <div ref={ref}>
+                <InputLanguageSwitch
+                  showHotkey={showHotkey && isSearchInputFocused}
+                  language={language}
+                  onLanguageChange={onLanguageChange}
+                />
+              </div>
+            ) : undefined
           }
-        }}
-        rightSectionWidth={ref.current?.clientWidth ?? 'auto'}
-        rightSection={
-          language != null && onLanguageChange != null ? (
-            <div ref={ref}>
-              <InputLanguageSwitch
-                showHotkey={showHotkey && isSearchInputFocused}
-                language={language}
-                onLanguageChange={onLanguageChange}
-              />
+        />
+      </Popover.Target>
+      <Popover.Dropdown className="bg-surface border rounded p-0">
+        {aboveSuggestions != null && (
+          <div className="d-flex p-2 flex-wrap px-3">{aboveSuggestions}</div>
+        )}
+        <div>
+          {suggestedProperties.length > 0 && (
+            <div className="border-top border-dark fs-8 py-2">
+              <div className="d-flex justify-content-between px-3 mb-2">
+                <div className="me-2 text-light">{suggestionsHeader}</div>
+                {suggestedProperties.length > suggestionsLimit && (
+                  <div className="text-muted">
+                    (Showing Top {suggestionsLimit})
+                  </div>
+                )}
+              </div>
+              {suggestedProperties
+                .slice(0, suggestionsLimit)
+                .map(({ value, label }, i) => (
+                  <div
+                    className={`py-2 px-3 ${
+                      selectedAutocompleteIndex === i ? 'bg-hdx-dark' : ''
+                    }`}
+                    role="button"
+                    key={value}
+                    onMouseOver={() => {
+                      setSelectedAutocompleteIndex(i);
+                    }}
+                    onClick={() => {
+                      onAcceptSuggestion(value);
+                    }}
+                  >
+                    <span className="me-1">{label}</span>
+                  </div>
+                ))}
+            </div>
+          )}
+        </div>
+        {belowSuggestions != null && (
+          <div className="border-top border-dark bg-body px-3 pt-2 pb-1 mt-2 fs-8 d-flex align-items-center text-muted flex-wrap">
+            {belowSuggestions}
+          </div>
+        )}
+        <div>
+          {showSearchHistory && (
+            <div className="border-top border-dark fs-8 py-2">
+              <div className="text-muted fs-8 fw-bold me-1 px-3">
+                Search History:
+              </div>
+              {queryHistoryList.map(({ value, label }, i) => {
+                return (
+                  <UnstyledButton
+                    className={`d-block w-100 text-start text-muted fw-normal px-3 py-2 fs-8 ${
+                      selectedQueryHistoryIndex === i ? 'bg-hdx-dark' : ''
+                    }`}
+                    key={value}
+                    onMouseOver={() => setSelectedQueryHistoryIndex(i)}
+                    onClick={() => onSelectSearchHistory(value)}
+                  >
+                    <span className="me-1 text-truncate">{label}</span>
+                  </UnstyledButton>
+                );
+              })}
             </div>
-          ) : undefined
-        }
-      />
-    </OverlayTrigger>
+          )}
+        </div>
+      </Popover.Dropdown>
+    </Popover>
   );
 }
diff --git a/packages/app/src/ClickhousePage.tsx b/packages/app/src/ClickhousePage.tsx
index 90d9dd9ae..88375d11a 100644
--- a/packages/app/src/ClickhousePage.tsx
+++ b/packages/app/src/ClickhousePage.tsx
@@ -607,7 +607,6 @@ function ClickhousePage() {
                   latencyFilter.latencyMax != null ? (
                     <Button
                       size="xs"
-                      color="gray.4"
                       variant="subtle"
                       onClick={() => {
                         // Clears the min/max latency filters that are used to filter the query results
diff --git a/packages/app/src/DBChartPage.tsx b/packages/app/src/DBChartPage.tsx
index ffb8a6395..af8889155 100644
--- a/packages/app/src/DBChartPage.tsx
+++ b/packages/app/src/DBChartPage.tsx
@@ -119,7 +119,7 @@ function AIAssistant({
     return (
       <Box mb="sm">
         <Alert
-          color="dark.3"
+          color="dark"
           icon={<i className="bi bi-info-circle" />}
           variant="outline"
           withCloseButton
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 10142ec80..c515591f0 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -1315,7 +1315,6 @@ function DBSearchPage() {
                 <ActionIcon
                   data-testid="source-settings-menu"
                   variant="subtle"
-                  color="dark.2"
                   size="sm"
                   title="Edit Source"
                 >
@@ -1384,9 +1383,7 @@ function DBSearchPage() {
               {!savedSearchId ? (
                 <Button
                   data-testid="save-search-button"
-                  variant="outline"
-                  color="dark.2"
-                  px="xs"
+                  variant="default"
                   size="xs"
                   onClick={onSaveSearch}
                   style={{ flexShrink: 0 }}
@@ -1396,9 +1393,7 @@ function DBSearchPage() {
               ) : (
                 <Button
                   data-testid="update-search-button"
-                  variant="outline"
-                  color="dark.2"
-                  px="xs"
+                  variant="default"
                   size="xs"
                   onClick={() => {
                     setSaveSearchModalState('update');
@@ -1411,9 +1406,7 @@ function DBSearchPage() {
               {!IS_LOCAL_MODE && (
                 <Button
                   data-testid="alerts-button"
-                  variant="outline"
-                  color="dark.2"
-                  px="xs"
+                  variant="default"
                   size="xs"
                   onClick={openAlertModal}
                   style={{ flexShrink: 0 }}
@@ -1430,8 +1423,7 @@ function DBSearchPage() {
                   >
                     <Button
                       data-testid="tags-button"
-                      variant="outline"
-                      color="dark.2"
+                      variant="default"
                       px="xs"
                       size="xs"
                       style={{ flexShrink: 0 }}
diff --git a/packages/app/src/HDXMultiSeriesTimeChart.tsx b/packages/app/src/HDXMultiSeriesTimeChart.tsx
index a6ff8b802..fe1648fd5 100644
--- a/packages/app/src/HDXMultiSeriesTimeChart.tsx
+++ b/packages/app/src/HDXMultiSeriesTimeChart.tsx
@@ -476,10 +476,7 @@ export const MemoChart = memo(function MemoChart({
           })}
         </defs>
         {isHovered && (
-          <CartesianGrid
-            strokeDasharray="3 3"
-            stroke="var(--mantine-color-dark-6)"
-          />
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
         )}
         <XAxis
           dataKey={timestampKey ?? 'ts_bucket'}
diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index bfa932684..a7d8858a5 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  ActionIcon,
   Button,
   MantineProvider,
   MantineThemeOverride,
@@ -18,6 +19,7 @@ const makeTheme = ({
   fontFamily,
   primaryColor: 'green',
   primaryShade: 8,
+  autoContrast: true,
   white: '#fff',
   fontSizes: {
     xxs: '11px',
@@ -104,14 +106,14 @@ const makeTheme = ({
     Select: Select.extend({
       styles: {
         input: {
-          border: '1px solid var(--mantine-color-gray-7)',
+          border: '1px solid var(--color-border)',
         },
       },
     }),
     Input: {
       styles: {
         input: {
-          border: '1px solid var(--mantine-color-gray-7)',
+          border: '1px solid var(--color-border)',
         },
       },
     },
@@ -137,6 +139,48 @@ const makeTheme = ({
         return { root: {} };
       },
     }),
+    ActionIcon: ActionIcon.extend({
+      defaultProps: {
+        variant: 'subtle',
+        color: 'gray',
+      },
+      styles: (theme, props) => {
+        // Subtle variant stays transparent
+        if (props.variant === 'subtle') {
+          return {
+            root: {
+              backgroundColor: 'transparent !important',
+              color: `${theme.colors.gray[0]} !important`,
+              '&:hover': {
+                backgroundColor: `${theme.colors.dark[6]} !important`,
+              },
+              '&:active': {
+                backgroundColor: `${theme.colors.dark[5]} !important`,
+              },
+            },
+          };
+        }
+
+        // Default variant
+        if (props.variant === 'default') {
+          return {
+            root: {
+              backgroundColor: `${theme.colors.dark[6]} !important`,
+              color: `${theme.colors.gray[0]} !important`,
+              border: 'none !important',
+              '&:hover': {
+                backgroundColor: `${theme.colors.dark[5]} !important`,
+              },
+              '&:active': {
+                backgroundColor: `${theme.colors.dark[4]} !important`,
+              },
+            },
+          };
+        }
+
+        return {};
+      },
+    }),
   },
 });
 
diff --git a/packages/app/src/components/DBRowSidePanel.tsx b/packages/app/src/components/DBRowSidePanel.tsx
index ecef6336c..39805b634 100644
--- a/packages/app/src/components/DBRowSidePanel.tsx
+++ b/packages/app/src/components/DBRowSidePanel.tsx
@@ -535,7 +535,7 @@ export default function DBRowSidePanelErrorBoundary({
                   An error occurred while rendering this event.
                 </div>
 
-                <div className="px-2 py-1 m-2 fs-7 font-monospace bg-dark-grey p-4">
+                <div className="px-2 py-1 m-2 fs-7 font-monospace bg-body p-4">
                   {error?.error?.message}
                 </div>
               </Stack>
diff --git a/packages/app/src/components/DBTable/TableHeader.tsx b/packages/app/src/components/DBTable/TableHeader.tsx
index e25338df9..c4d731afd 100644
--- a/packages/app/src/components/DBTable/TableHeader.tsx
+++ b/packages/app/src/components/DBTable/TableHeader.tsx
@@ -83,7 +83,7 @@ export default function TableHeader({
               onMouseDown={header.getResizeHandler()}
               onTouchStart={header.getResizeHandler()}
               className={cx(
-                `resizer text-gray-600 cursor-col-resize`,
+                `resizer text-cursor-col-resize`,
                 header.column.getIsResizing() && 'isResizing',
               )}
             >
diff --git a/packages/app/src/components/PageHeader.module.scss b/packages/app/src/components/PageHeader.module.scss
index f12fd625f..7bcaadbbc 100644
--- a/packages/app/src/components/PageHeader.module.scss
+++ b/packages/app/src/components/PageHeader.module.scss
@@ -1,10 +1,8 @@
-@import '../../styles/variables';
-
 .header {
   align-items: center;
-  background-color: $body-bg;
-  border-bottom: 1px solid var(--mantine-color-dark-9);
-  color: var(--mantine-color-dark-2);
+  background-color: var(--color-bg-body);
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-default);
   display: flex;
   font-weight: 500;
   height: 60px;
diff --git a/packages/app/src/components/SQLEditor.tsx b/packages/app/src/components/SQLEditor.tsx
index beb0434eb..a730f6251 100644
--- a/packages/app/src/components/SQLEditor.tsx
+++ b/packages/app/src/components/SQLEditor.tsx
@@ -42,9 +42,8 @@ export default function SQLEditor({
     <Paper
       flex="auto"
       shadow="none"
-      bg="dark.6"
       style={{
-        border: '1px solid var(--mantine-color-gray-7)',
+        bg: 'var(--color-bg-field)',
         display: 'flex',
         alignItems: 'center',
       }}
diff --git a/packages/app/src/components/SQLInlineEditor.tsx b/packages/app/src/components/SQLInlineEditor.tsx
index f7fa56846..6962e35ff 100644
--- a/packages/app/src/components/SQLInlineEditor.tsx
+++ b/packages/app/src/components/SQLInlineEditor.tsx
@@ -309,9 +309,9 @@ export default function SQLInlineEditor({
     <Paper
       flex="auto"
       shadow="none"
-      bg="dark.6"
       style={{
-        border: `1px solid ${error ? 'var(--mantine-color-red-7)' : 'var(--mantine-color-gray-7)'}`,
+        backgroundColor: 'var(--color-bg-field)',
+        border: `1px solid ${error ? 'var(--mantine-color-red-7)' : 'var(--color-border)'}`,
         display: 'flex',
         alignItems: 'center',
         minHeight: size === 'xs' ? 30 : 36,
diff --git a/packages/app/src/components/Table.module.scss b/packages/app/src/components/Table.module.scss
index e7be363d7..52333e3b0 100644
--- a/packages/app/src/components/Table.module.scss
+++ b/packages/app/src/components/Table.module.scss
@@ -22,7 +22,7 @@ $horizontalPadding: 12px;
     }
 
     tr {
-      border-bottom: 1px solid var(--mantine-color-dark-9);
+      border-bottom: 1px solid var(--color-border);
     }
 
     tbody {
@@ -32,7 +32,7 @@ $horizontalPadding: 12px;
     }
 
     th {
-      color: var(--mantine-color-dark-3);
+      color: red;
       text-transform: uppercase;
       font-size: 9px;
       font-weight: 500;
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index bf54b69f5..40a4fdc1d 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable */
 @import './variables';
 
 .wrapper {
@@ -6,13 +7,11 @@
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
-  border-right: 1px solid var(--mantine-color-dark-9);
+  border-right: 1px solid var(--color-border);
 }
 
 .list {
-  // background-color: #00000030;background-color
-  // border-bottom: 1px solid var(--mantine-color-dark-9);border-bottom
-  border-top: 1px solid var(--mantine-color-dark-9);
+  border-top: 1px solid var(--color-border);
   overflow-x: hidden;
   max-width: 100%;
   padding: 4px 16px;
@@ -21,7 +20,7 @@
 
 .scrollbar {
   .thumb {
-    background-color: var(--mantine-color-gray-9);
+    background-color: var(--color-border);
   }
 }
 
@@ -42,7 +41,7 @@
   display: flex;
   align-items: center;
 
-  // justify-content: space-between;justify-content
+  // justify-content: space-between;
   gap: 6px;
 
   &:hover {
@@ -89,12 +88,12 @@
 }
 
 .listLinkActive {
-  // color: $green;color
+  // color: $green;
   color: var(--mantine-color-green-3);
   font-weight: 500;
 
   &:hover {
-    // color: $green;color
+    // color: $green;
     color: var(--mantine-color-green-3);
   }
 }
@@ -121,15 +120,13 @@
 .appNavMenu {
   pointer-events: all;
   cursor: pointer;
-  box-shadow: 0 5px 10px 10px #0f1215e0;
-  background: var(--mantine-color-gray-9);
 
   &:hover {
     background: var(--mantine-color-gray-8);
   }
 
   &:active {
-    // background: var(--mantine-color-gray-9);background
+    // background: var(--mantine-color-gray-9);
     transform: translate(0, 1px);
   }
 }
diff --git a/packages/app/styles/EndpointSubpanel.module.scss b/packages/app/styles/EndpointSubpanel.module.scss
index 7a2cc99a1..1fa7f3b6d 100644
--- a/packages/app/styles/EndpointSubpanel.module.scss
+++ b/packages/app/styles/EndpointSubpanel.module.scss
@@ -5,7 +5,7 @@
   flex-direction: column;
   font-size: 12px;
   height: 100%;
-  background-color: $body-bg;
+  background: var(--color-bg-body);
   box-shadow: 0 0 100px 40px rgb(0 0 0 / 70%);
   border-left: 1px solid var(--mantine-color-dark-9);
 }
diff --git a/packages/app/styles/LogSidePanel.module.scss b/packages/app/styles/LogSidePanel.module.scss
index 1b2e33ffc..76773891f 100644
--- a/packages/app/styles/LogSidePanel.module.scss
+++ b/packages/app/styles/LogSidePanel.module.scss
@@ -1,6 +1,7 @@
+/* stylelint-disable */
 @import './variables';
 
-// TODO: Use variables for spacings;TODO
+// TODO: Use variables for spacings;
 $padding-x: 24px;
 
 .panel {
@@ -8,9 +9,9 @@ $padding-x: 24px;
   flex-direction: column;
   font-size: 12px;
   height: 100%;
-  background-color: $body-bg;
+  background: var(--color-bg-body);
   box-shadow: 0 0 100px 40px rgb(0 0 0 / 70%);
-  border-left: 1px solid var(--mantine-color-dark-9);
+  border-left: 1px solid var(--color-border);
 }
 
 .panelDragBar {
@@ -30,7 +31,7 @@ $padding-x: 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid var(--mantine-color-dark-9);
+  border-bottom: 1px solid var(--color-border);
   padding: 12px $padding-x;
 }
 
diff --git a/packages/app/styles/LogTable.module.scss b/packages/app/styles/LogTable.module.scss
index 15160bce6..a37c90928 100644
--- a/packages/app/styles/LogTable.module.scss
+++ b/packages/app/styles/LogTable.module.scss
@@ -20,7 +20,7 @@ $button-height: 18px;
   position: relative;
 
   &__selected {
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
     font-weight: bold;
   }
 
@@ -29,7 +29,7 @@ $button-height: 18px;
   }
 
   &:hover .rowContentButton {
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
   }
 
   &:has(.expandButton:hover) .rowButtons {
@@ -44,7 +44,7 @@ $button-height: 18px;
 .expandedRowContent {
   max-height: 400px;
   overflow: auto;
-  background-color: var(--mantine-color-dark-9);
+  background-color: var(--color-bg-body);
   padding: 12px;
 }
 
@@ -90,7 +90,7 @@ $button-height: 18px;
 .expandButtonSeparator {
   width: 1px;
   height: calc($button-height - 8px);
-  border-right: 1px solid var(--mantine-color-dark-4);
+  border-right: 1px solid var(--color-border);
   margin-left: 2px;
   margin-right: 2px;
   display: inline-block;
@@ -126,7 +126,7 @@ $button-height: 18px;
   &:active {
     outline: none;
     box-shadow: none;
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-surface);
   }
 
   &.isWrapped {
diff --git a/packages/app/styles/SearchPage.module.scss b/packages/app/styles/SearchPage.module.scss
index 5350c2451..562920b4f 100644
--- a/packages/app/styles/SearchPage.module.scss
+++ b/packages/app/styles/SearchPage.module.scss
@@ -8,11 +8,11 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #00000030;
+  background-color: var(--color-bg-muted);
   word-break: break-all;
   flex-shrink: 0;
   flex-grow: 0;
-  border-right: 1px solid var(--mantine-color-dark-6);
+  border-right: 1px solid var(--color-border);
   overflow: hidden;
   z-index: 3; // higher z-index to be above other elements
 
@@ -154,14 +154,14 @@
 }
 
 .searchStatsContainer {
-  background-color: $bg-hdx-dark;
+  background-color: var(--color-bg-body);
   padding-inline: var(--mantine-spacing-xs);
   padding-block: var(--mantine-spacing-xxs);
   z-index: 3;
 }
 
 .timeChartContainer {
-  background-color: $bg-hdx-dark;
+  background-color: var(--color-bg-body);
   padding-inline: var(--mantine-spacing-xs);
   padding-block: var(--mantine-spacing-xxs);
   height: 120px;
@@ -169,7 +169,8 @@
 }
 
 .searchForm {
-  background-color: $body-bg;
+  background: var(--color-bg-body);
   z-index: 4;
   padding-bottom: var(--mantine-spacing-xs);
+  border-bottom: 1px solid var(--color-border);
 }
diff --git a/packages/app/styles/_bootstrap-utilities.scss b/packages/app/styles/_bootstrap-utilities.scss
new file mode 100644
index 000000000..97efcd59b
--- /dev/null
+++ b/packages/app/styles/_bootstrap-utilities.scss
@@ -0,0 +1,26 @@
+/* stylelint-disable */
+// Bootstrap layout utility classes only
+// This provides classes like d-flex, flex-column, m-*, p-*, etc.
+// Excludes color utilities to avoid conflicts with custom colors
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/maps';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/utilities';
+
+// Override utilities to only include layout classes (no color utilities)
+$utilities: map-remove(
+  $utilities,
+  'color',
+  'background-color',
+  'gradient',
+  'text-color',
+  'link-color',
+  'link-offset',
+  'link-underline',
+  'link-underline-opacity'
+);
+
+// Generate utility classes
+@import '~bootstrap/scss/utilities/api';
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
new file mode 100644
index 000000000..5e68e3be5
--- /dev/null
+++ b/packages/app/styles/_semantic-colors.scss
@@ -0,0 +1,126 @@
+:root {
+  /* Semantic Highlights (same for both themes) */
+  --color-accent: var(--mantine-color-blue-5);
+  --color-success: var(--mantine-color-green-5);
+  --color-warning: var(--mantine-color-yellow-5);
+  --color-error: var(--mantine-color-red-5);
+
+  /* click-ui neutral and slate palettes */
+  --palette-neutral-base: #212121;
+  --palette-neutral-900: #151515;
+  --palette-neutral-800: #1d1d1d;
+  --palette-neutral-750: #1f1f1c;
+  --palette-neutral-725: #282828;
+  --palette-neutral-712: #323232;
+  --palette-neutral-700: #414141;
+  --palette-neutral-600: #606060;
+  --palette-neutral-500: #808080;
+  --palette-neutral-400: #a0a0a0;
+  --palette-neutral-300: #c0c0c0;
+  --palette-neutral-200: #dfdfdf;
+  --palette-neutral-100: #f9f9f9;
+  --palette-neutral-0: #fff;
+  --palette-brand-base: #fbff46;
+  --palette-slate-base: #373439;
+  --palette-slate-900: #161517;
+  --palette-slate-800: #302e32;
+  --palette-slate-700: #53575f;
+  --palette-slate-600: #696e79;
+  --palette-slate-500: #808691;
+  --palette-slate-400: #9a9ea7;
+  --palette-slate-300: #b3b6bd;
+  --palette-slate-200: #cccfd3;
+  --palette-slate-100: #e6e7e9;
+  --palette-slate-50: #f6f7fa;
+  --palette-slate-25: #fbfcff;
+}
+
+/* Dark Mode (default) */
+[data-mantine-color-scheme='dark'] {
+  /* Backgrounds */
+  --color-bg-body: var(--palette-neutral-base);
+  --color-bg-surface: var(--palette-neutral-725);
+  --color-bg-muted: var(--palette-neutral-750);
+  --color-bg-sidebar: var(--palette-neutral-750);
+  --color-bg-header: var(--palette-neutral-900);
+  --color-bg-hover: var(--palette-neutral-700);
+  --color-bg-active: var(--palette-neutral-600);
+  --color-bg-field: var(--palette-color-slate-725);
+
+  /* Borders & Dividers */
+  --color-border: var(--palette-neutral-712);
+
+  /* Text */
+  --color-text-primary: var(--mantine-color-dark-0);
+  --color-text-primary-hover: var(--mantine-color-green-3);
+  --color-text-secondary: var(--mantine-color-dark-2);
+  --color-text-muted: var(--mantine-color-dark-3);
+  --color-text-muted-hover: var(--mantine-color-dark-1);
+  --color-text-inverse: var(--mantine-color-dark-9);
+  --color-text-success: var(--mantine-color-dark-0);
+  --color-text-success-hover: var(--mantine-color-green-3);
+
+  /* Icons */
+  --color-icon-primary: var(--mantine-color-dark-1);
+  --color-icon-muted: var(--mantine-color-dark-4);
+
+  /* Overlay & Backdrop */
+  --color-overlay: rgb(0 0 0 / 50%);
+  --color-backdrop: rgb(0 0 0 / 30%);
+
+  /* States */
+  --color-state-hover: var(--mantine-color-dark-6);
+  --color-state-selected: var(--mantine-color-dark-5);
+  --color-state-focus: var(--mantine-color-dark-4);
+
+  /* Code / Misc UI */
+  --color-bg-code: var(--mantine-color-dark-8);
+  --color-border-code: var(--mantine-color-dark-6);
+  --color-bg-kbd: var(--mantine-color-dark-9);
+}
+
+/* Light Mode */
+[data-mantine-color-scheme='light'] {
+  /* Backgrounds - inverted (dark becomes light) */
+  --color-bg-body: var(--palette-neutral-0);
+  --color-bg-surface: var(--palette-neutral-0);
+  --color-bg-muted: var(--palette-slate-50);
+  --color-bg-sidebar: var(--palette-neutral-0);
+  --color-bg-header: var(--mantine-color-dark-1);
+  --color-bg-modal: var(--palette-neutral-0);
+  --color-bg-hover: var(--mantine-color-dark-3);
+  --color-bg-active: var(--mantine-color-dark-4);
+  --color-bg-field: var(--palette-color-slate-25);
+
+  /* Borders & Dividers - inverted */
+  --color-border: var(--palette-slate-100);
+
+  /* Text - inverted */
+  --color-text-default: var(--palette-slate-900);
+  --color-text-primary: var(--mantine-color-green-5);
+  --color-text-primary-hover: var(--mantine-color-green-6);
+  --color-text-secondary: var(--mantine-color-dark-7);
+  --color-text-muted: var(--palette-slate-600);
+  --color-text-muted-hover: var(--palette-slate-900);
+  --color-text-inverse: var(--mantine-color-dark-0);
+  --color-text-success: var(--mantine-color-green-8);
+  --color-text-success-hover: var(--mantine-color-green-9);
+
+  /* Icons - inverted */
+  --color-icon-primary: var(--mantine-color-dark-8);
+  --color-icon-muted: var(--mantine-color-dark-5);
+
+  /* Overlay & Backdrop */
+  --color-overlay: rgb(0 0 0 / 30%);
+  --color-backdrop: rgb(0 0 0 / 10%);
+
+  /* States - inverted */
+  --color-state-hover: var(--mantine-color-dark-3);
+  --color-state-selected: var(--mantine-color-dark-4);
+  --color-state-focus: var(--mantine-color-dark-5);
+
+  /* Code / Misc UI - inverted */
+  --color-bg-code: var(--mantine-color-dark-1);
+  --color-border-code: var(--mantine-color-dark-3);
+  --color-bg-kbd: var(--mantine-color-dark-0);
+}
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
new file mode 100644
index 000000000..37655ef0f
--- /dev/null
+++ b/packages/app/styles/_utilities.scss
@@ -0,0 +1,201 @@
+// Custom utility classes for HyperDX
+// These supplement Bootstrap utilities with Mantine-based styling
+
+// Background utilities
+.bg-surface {
+  background-color: var(--color-bg-surface) !important;
+}
+
+.bg-body {
+  background-color: var(--color-bg-body) !important;
+}
+
+.bg-hdx-dark {
+  background-color: var(--color-bg-surface);
+}
+
+// Border utilities
+.border {
+  border: 1px solid var(--color-border) !important;
+}
+
+.border-top {
+  border-top: 1px solid var(--color-border) !important;
+}
+
+.border-bottom {
+  border-bottom: 1px solid var(--color-border) !important;
+}
+
+.border-start {
+  border-left: 1px solid var(--color-border) !important;
+}
+
+.border-end {
+  border-right: 1px solid var(--color-border) !important;
+}
+
+.border-dark {
+  border-color: var(--color-border) !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+// Rounded utilities
+.rounded {
+  border-radius: var(--mantine-radius-default) !important;
+}
+
+.rounded-sm {
+  border-radius: var(--mantine-radius-sm) !important;
+}
+
+.rounded-lg {
+  border-radius: var(--mantine-radius-lg) !important;
+}
+
+.rounded-0 {
+  border-radius: 0 !important;
+}
+
+// Text color utilities
+.text-muted {
+  color: var(--color-text-muted) !important;
+}
+
+.text-light {
+  color: var(--color-text) !important;
+}
+
+.text-primary {
+  color: var(--color-text-primary) !important;
+}
+
+.text-success {
+  color: var(--color-text-success) !important;
+}
+
+.text-danger {
+  color: var(--color-text-danger) !important;
+}
+
+.text-warning {
+  color: var(--color-text-warning) !important;
+}
+
+// Font size utilities
+.fs-8 {
+  font-size: var(--mantine-font-size-xs) !important;
+}
+
+.fs-7 {
+  font-size: var(--mantine-font-size-sm) !important;
+}
+
+// Font weight utilities
+.fw-normal {
+  font-weight: 400 !important;
+}
+
+.fw-bold {
+  font-weight: 700 !important;
+}
+
+.fw-500 {
+  font-weight: 500 !important;
+}
+
+.fw-600 {
+  font-weight: 600 !important;
+}
+
+// Padding utilities (to supplement Bootstrap if needed)
+.p-0 {
+  padding: 0 !important;
+}
+
+.p-2 {
+  padding: var(--mantine-spacing-sm) !important;
+}
+
+.p-3 {
+  padding: var(--mantine-spacing-md) !important;
+}
+
+.px-3 {
+  padding-left: var(--mantine-spacing-md) !important;
+  padding-right: var(--mantine-spacing-md) !important;
+}
+
+.py-2 {
+  padding-top: var(--mantine-spacing-sm) !important;
+  padding-bottom: var(--mantine-spacing-sm) !important;
+}
+
+.pt-2 {
+  padding-top: var(--mantine-spacing-sm) !important;
+}
+
+.pb-1 {
+  padding-bottom: var(--mantine-spacing-xs) !important;
+}
+
+// Margin utilities
+.m-0 {
+  margin: 0 !important;
+}
+
+.me-1 {
+  margin-right: var(--mantine-spacing-xs) !important;
+}
+
+.me-2 {
+  margin-right: var(--mantine-spacing-sm) !important;
+}
+
+.mb-2 {
+  margin-bottom: var(--mantine-spacing-sm) !important;
+}
+
+.mt-2 {
+  margin-top: var(--mantine-spacing-sm) !important;
+}
+
+// Width utilities
+.w-100 {
+  width: 100% !important;
+}
+
+.w-auto {
+  width: auto !important;
+}
+
+// Display utilities (supplement Bootstrap)
+.d-block {
+  display: block !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+// Text alignment
+.text-start {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-end {
+  text-align: right !important;
+}
+
+.text-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index 076db1c65..1c747cf11 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -1,8 +1,14 @@
 /* stylelint-disable */
 
-@import './variables';
-@import './design-tokens/_semantic-colors';
-@import '~bootstrap/scss/bootstrap';
+// @import './variables';
+@import './_semantic-colors';
+
+// Bootstrap utilities only (d-flex, flex-column, m-*, p-*, etc.)
+@import './bootstrap-utilities';
+
+// Custom utilities (bg-surface, border-dark, etc.)
+@import './utilities';
+
 @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css');
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
@@ -22,20 +28,19 @@
   font-family: 'IBM Plex Mono', monospace;
 }
 
-html,
-body,
-html[class~='dark'] body {
-  background-color: var(--color-bg-body);
-}
+
 .bg-body {
-  background-color: var(--color-bg-body);
+  background-color: var(--color-bg-body) !important;
+}
+.bg-surface {
+  background-color: var(--color-bg-surface) !important;
 }
 .bg-hdx-dark {
-  background-color: $bg-hdx-dark;
+  background-color: var(--color-bg-surface);
 }
 
 .bg-grey {
-  background-color: $bg-grey;
+  background-color: red;
 }
 
 .bg-light-grey {
@@ -52,12 +57,10 @@ html[class~='dark'] body {
   background-color: inherit;
 }
 
-.bg-dark-grey {
-  background-color: $bg-dark-grey;
-}
+
 .bg-default-dark-grey-hover {
   &:hover {
-    background-color: $bg-dark-grey;
+    background-color: var(--color-bg-surface-hover);
   }
 }
 
@@ -82,12 +85,12 @@ html[class~='dark'] body {
 }
 
 .text-success {
-  color: var(--mantine-color-green-3) !important;
+  color: var(--color-text-success);
 }
 
 // Darker than text-muted
 .text-gray-600 {
-  color: $gray-600;
+   color: var(--mantine-color-dark-6);
 }
 
 .text-slate-700 {
@@ -115,7 +118,7 @@ html[class~='dark'] body {
 }
 
 .text-muted-hover {
-  color: $text-muted;
+  color: var(--color-text-muted-hover);
   transition: color 0.2s ease;
   &:hover {
     color: #fff;
@@ -123,45 +126,25 @@ html[class~='dark'] body {
 }
 
 .text-muted-hover-black {
-  color: $text-muted;
+  color: var(--color-text-muted);
   transition: color 0.2s ease;
   &:hover {
     color: black;
   }
 }
 
-.text-white-hover {
-  color: $white;
-  transition: color 0.2s ease;
-  &:hover {
-    color: $text-muted;
-  }
-}
 
+// TODO remove
 .text-white-hover-green {
-  color: $white;
-  transition: color 0.2s ease;
-  &:hover {
-    color: $green;
-  }
-}
-
-.text-purple-hover {
-  color: $text-purple;
+  color: var(--color-text);
   transition: color 0.2s ease;
   &:hover {
-    color: darken($text-purple, 5);
+    color: var(--color-green);
   }
 }
 
+// TODO remove
 .text-white-hover-success-trigger {
-  transition: color 0.2s ease;
-  .child-hover-trigger {
-    color: $white;
-  }
-  &:hover .child-hover-trigger {
-    color: $green;
-  }
 }
 
 :root {
@@ -172,7 +155,7 @@ html[class~='dark'] body {
 
 body {
   font-family: 'IBM Plex Mono', monospace;
-  font-size: $font-size-base * 0.875;
+  font-size: var(--mantine-font-size-sm);
 }
 
 .accordion-button,
@@ -212,120 +195,12 @@ body {
   font-weight: 500;
 }
 
-.btn-brand-primary {
-  // @include button-variant(#fff, #8256d0, #ffffff00);
-  @include button-variant($purple, #ffffff00, white);
-  background-image: linear-gradient(
-    89.91deg,
-    $purple 0.06%,
-    #245ab2 99.9%
-  ) !important;
-  border: 0;
-  font-weight: 500;
-  box-shadow: 0px 0px 10px 0px #8256d0b2;
-
-  transition: opacity 0.2s;
-
-  &:hover {
-    opacity: 0.9;
-    border: 0;
-  }
-  &:focus {
-    box-shadow: none;
-  }
-}
-.btn-outline-brand-primary {
-  // @include button-outline-variant(white, white, #8256d0, #8256d0);
-  position: relative;
-
-  $border: 2px;
-  color: #fff;
-  background: $body-bg;
-  background-clip: padding-box; /* !importanté */
-  border: solid $border transparent; /* !importanté */
 
-  &:hover {
-    color: $text-muted;
-    &:before {
-      background: $purple;
-    }
-  }
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: -$border; /* !importanté */
-    border-radius: inherit; /* !importanté */
-    background: linear-gradient(89.91deg, $purple 0.06%, #245ab2 99.9%);
-    z-index: -1;
-  }
-
-  .btn-check:focus + &,
-  &:focus {
-    box-shadow: 0 0 0 $btn-focus-width rgba($purple, 0.5);
-  }
-}
-.btn-dark {
-  background: #151515af;
-  &:hover {
-    background: #4d4d4d;
-  }
-}
-
-.outline-green-gradient {
-  position: relative;
-
-  $border: 1px;
-  background-clip: padding-box; /* !importanté */
-  border: solid $border transparent; /* !importanté */
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: -$border; /* !importanté */
-    border-radius: inherit; /* !importanté */
-    background: linear-gradient(
-      300.9deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(0, 202, 51, 0.144) 100%
-    );
-    z-index: -1;
-  }
-}
-
-.primary-text {
-  background: linear-gradient(91.75deg, $purple 2.76%, #317bf5 93.09%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.fs-0 {
-  @include font-size(3rem);
-  @include rfs(3.5rem, line-height);
-  // @include font-size(3rem);
-  // font-size: 48px;
-}
-
-.bg-purple {
-  background-color: $bg-purple;
-}
-.bg-purple-active {
-  background-color: $bg-purple-active;
-}
 .bg-warning-transparent {
-  background-color: rgba($yellow, 0.15);
+  background-color: color-mix(in srgb, var(--mantine-color-yellow-5) 15%, transparent);
 }
 .bg-danger-transparent {
-  background-color: rgba($red, 0.15);
+  background-color: color-mix(in srgb, var(--mantine-color-red-5) 15%, transparent);
 }
 
 .transition-width {
@@ -340,48 +215,6 @@ body {
   min-height: 65vh;
 }
 
-.gradient-divider {
-  height: 1px;
-  background: radial-gradient(
-    50% 243.6% at 50% 50%,
-    #3788f6 0%,
-    rgba(130, 86, 208, 0) 100%
-  );
-  opacity: 0.6;
-  transform: matrix(1, 0, 0, -1, 0, 0);
-}
-
-.opacity-90 {
-  opacity: 0.9;
-}
-
-.rotate-90 {
-  transform: rotate(90deg);
-}
-
-.rounded-10 {
-  border-radius: 25px;
-}
-
-/* Overwrite boostrap table */
-.table > :not(:first-child) {
-  border-top: none;
-}
-.table th {
-  font-weight: 500;
-}
-.table-dark {
-  --bs-table-bg: transparent;
-  --bs-table-striped-bg: #2c3034;
-  --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #373b3e;
-  --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #323539;
-  --bs-table-hover-color: #fff;
-  color: #fff;
-  border-color: #373b3e;
-}
-
 /* Custom Components */
 
 .player-skipping-overlay {
@@ -404,7 +237,7 @@ body {
     width: 15px;
     height: 15px;
     background-color: rgba(#fff, 0.5);
-    border: 2px solid rgba($gray-100, 0.75);
+    border: 2px solid var(--color-border);
     border-radius: 50%;
     position: absolute;
     pointer-events: none; // Make sure the rrweb mouse doesn't obscure elements below it for the inspector
@@ -471,18 +304,6 @@ body {
   }
 }
 
-.TimelineEventTooltip {
-  .tooltip {
-    z-index: 9999 !important;
-  }
-  .tooltip-inner {
-    max-width: 300px;
-    background: $bg-purple-active;
-  }
-  .tooltip-arrow::before {
-    border-top-color: $bg-purple-active;
-  }
-}
 
 @keyframes animatedglow {
   0% {
@@ -514,13 +335,6 @@ body {
   }
 }
 
-// Backend logs debugger UI
-.LogEvent {
-  code {
-    color: $text-muted;
-  }
-}
-
 .parent-hover-trigger {
   .child-hover-trigger {
     visibility: hidden;
@@ -543,13 +357,13 @@ body {
   }
 
   &.input-bg .ds-react-select__control {
-    background: $input-bg;
+    background: var(--color-bg-field);
   }
 
   .ds-react-select__control {
     // background: $bg-dark;
     background: transparent;
-    border: 1px solid #212223;
+    border: 1px solid var(--color-border);
     // @apply bg-white dark:bg-neutral-700 border-2 border-neutral-300 dark:border-neutral-700 hover:border-neutral-400 dark:hover:border-neutral-500;
   }
 
@@ -558,24 +372,24 @@ body {
   }
 
   .ds-react-select__menu {
-    background: $bg-hdx-dark;
-    border: 1px solid $text-muted;
+    background: var(--color-bg-surface);
+    border: 1px solid var(--color-text);
     // @apply bg-neutral-100 dark:bg-neutral-700 border-2 border-neutral-300 dark:border-neutral-600;
   }
 
   .ds-react-select__option {
-    color: $text-light;
+    color: var(--color-text);
     // background: $bg-dark;
     // @apply text-neutral-600 dark:text-neutral-200 bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-800;
   }
   .ds-react-select__option--is-focused {
-    background: $gray-900;
+    background: var(--color-bg-field-hover);
   }
   .ds-react-select__multi-value {
-    background: $gray-900;
+    background: var(--color-bg-field);
 
     .ds-react-select__multi-value__label {
-      color: $text-light;
+      color: var(--color-text);
     }
   }
 
@@ -583,14 +397,14 @@ body {
     width: 0;
   }
   .ds-react-select__indicator {
-    color: $text-muted;
+    color: var(--color-text-muted);
   }
 
   .ds-react-select__input-container,
   .ds-react-select__placeholder,
   .ds-react-select__single-value {
     // @apply text-neutral-600 dark:text-neutral-200;
-    color: $text-muted;
+    color: var(--color-text);
     // background: $bg-dark;
     background: transparent;
   }
diff --git a/packages/app/styles/design-tokens/_semantic-colors.scss b/packages/app/styles/design-tokens/_semantic-colors.scss
deleted file mode 100644
index c88089936..000000000
--- a/packages/app/styles/design-tokens/_semantic-colors.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-:root {
-  /* Backgrounds */
-  --color-bg-body: var(--mantine-color-dark-9);
-  --color-bg-surface: var(--mantine-color-dark-8);
-  --color-bg-subtle: var(--mantine-color-dark-7);
-  --color-bg-sidebar: var(--mantine-color-dark-8);
-  --color-bg-header: var(--mantine-color-dark-8);
-  --color-bg-modal: var(--mantine-color-dark-7);
-  --color-bg-hover: var(--mantine-color-dark-6);
-  --color-bg-active: var(--mantine-color-dark-5);
-
-  /* Borders & Dividers */
-  --color-border: var(--mantine-color-dark-6);
-  --color-border-subtle: var(--mantine-color-dark-7);
-  --color-border-strong: var(--mantine-color-dark-4);
-
-  /* Text */
-  --color-text-primary: var(--mantine-color-dark-0);
-  --color-text-secondary: var(--mantine-color-dark-2);
-  --color-text-muted: var(--mantine-color-dark-3);
-  --color-text-inverse: var(--mantine-color-dark-9);
-
-  /* Icons */
-  --color-icon-primary: var(--mantine-color-dark-1);
-  --color-icon-muted: var(--mantine-color-dark-4);
-
-  /* Overlay & Backdrop */
-  --color-overlay: rgb(0 0 0 / 50%);
-  --color-backdrop: rgb(0 0 0 / 30%);
-
-  /* States */
-  --color-state-hover: var(--mantine-color-dark-6);
-  --color-state-selected: var(--mantine-color-dark-5);
-  --color-state-focus: var(--mantine-color-dark-4);
-
-  /* Semantic Highlights (using Mantine's core palette) */
-  --color-accent: var(--mantine-color-blue-5);
-  --color-success: var(--mantine-color-green-5);
-  --color-warning: var(--mantine-color-yellow-5);
-  --color-error: var(--mantine-color-red-5);
-
-  /* Code / Misc UI */
-  --color-bg-code: var(--mantine-color-dark-8);
-  --color-border-code: var(--mantine-color-dark-6);
-  --color-bg-kbd: var(--mantine-color-dark-9);
-}
diff --git a/packages/app/styles/variables.scss b/packages/app/styles/variables.scss
index 97d0b6524..fc70f7f15 100644
--- a/packages/app/styles/variables.scss
+++ b/packages/app/styles/variables.scss
@@ -11,13 +11,10 @@ $red: #ff5d5b;
 $blue: #3788f6;
 $purple: #8f57f3;
 $gray-100: #f8f9fa;
-$body-color: $gray-100;
-$bg-hdx-dark: #1a1d23;
 $bg-dark-grey: #1f2429;
 $bg-grey: #21272e;
 $bg-purple: #2e273b;
 $bg-purple-active: #4a4eb5;
-$body-bg: #0f1215;
 $code-color: #4bb74a;
 $info: $purple;
 
@@ -79,9 +76,7 @@ $font-sizes: (
 $input-bg: #ffffff1a;
 $input-border-width: 0;
 $input-group-addon-bg: $input-bg;
-$form-select-indicator-color: $body-color;
 $accordion-button-bg: $bg-purple;
 $accordion-button-active-bg: $bg-purple-active;
-$accordion-button-active-color: $body-color;
-$accordion-bg: $body-bg;
+$accordion-bg: var(--color-bg-body);
 $accordion-border-radius: 5px;

From 9816b3ed5da12a0a292595162cbbca8e40a8d34a Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 10 Nov 2025 13:14:06 +0000
Subject: [PATCH 04/49] feat: Update theme styles and component colors

- Added muted variant styles for Card and Paper components in ThemeWrapper.
- Removed color prop from multiple Text and Button components to use default theme colors.
- Updated background colors in various components to use new color variables.
- Refactored styles in Table and LogTable modules for consistency with new color scheme.
- Removed unused color classes and variables to streamline styles.
- Enhanced hover effects for buttons and text elements for better UX.
---
 packages/app/src/AlertsPage.tsx               |  3 +-
 packages/app/src/AppNav.components.tsx        |  1 -
 packages/app/src/AppNav.tsx                   |  8 +--
 packages/app/src/BenchmarkPage.tsx            | 12 +---
 packages/app/src/ClickhousePage.tsx           | 36 +++++-----
 packages/app/src/Clipboard.tsx                |  8 ++-
 packages/app/src/DBDashboardImportPage.tsx    |  2 +-
 packages/app/src/DBDashboardPage.tsx          | 15 ++---
 packages/app/src/DBSearchPage.tsx             | 20 +++---
 packages/app/src/DBSearchPageAlertModal.tsx   |  6 +-
 packages/app/src/DBServiceMapPage.tsx         |  6 +-
 packages/app/src/DashboardFiltersModal.tsx    |  2 +-
 packages/app/src/InstallInstructionsModal.tsx | 19 +++---
 packages/app/src/KubernetesDashboardPage.tsx  |  4 +-
 packages/app/src/LogSidePanelElements.tsx     |  4 +-
 packages/app/src/Logo.tsx                     |  8 +--
 .../app/src/NamespaceDetailsSidePanel.tsx     |  4 +-
 packages/app/src/NodeDetailsSidePanel.tsx     |  4 +-
 packages/app/src/OnboardingChecklist.tsx      | 15 +----
 packages/app/src/PodDetailsSidePanel.tsx      |  4 +-
 packages/app/src/ServicesDashboardPage.tsx    | 34 +++-------
 packages/app/src/TeamPage.tsx                 | 65 +++++--------------
 packages/app/src/ThemeWrapper.tsx             | 40 +++++++++++-
 .../app/src/components/ConfirmDeleteMenu.tsx  |  2 +-
 .../app/src/components/ConnectionForm.tsx     | 12 ++--
 packages/app/src/components/DBDeltaChart.tsx  |  4 +-
 .../src/components/DBEditTimeChartForm.tsx    |  9 ++-
 .../app/src/components/DBHeatmapChart.tsx     |  4 +-
 .../app/src/components/DBHistogramChart.tsx   |  2 +-
 .../src/components/DBRowSidePanelHeader.tsx   | 14 ++--
 packages/app/src/components/DBRowTable.tsx    |  2 +-
 .../src/components/DBSearchPageFilters.tsx    |  6 +-
 .../src/components/DBTable/TableHeader.tsx    |  2 +-
 packages/app/src/components/DBTimeChart.tsx   |  6 +-
 packages/app/src/components/DBTracePanel.tsx  | 13 +---
 .../app/src/components/ExceptionSubpanel.tsx  |  2 +-
 .../src/components/NetworkPropertyPanel.tsx   |  2 +-
 packages/app/src/components/NumberFormat.tsx  |  2 +-
 .../app/src/components/OnboardingModal.tsx    |  6 +-
 .../app/src/components/SQLInlineEditor.tsx    |  1 -
 .../Search/DBSearchHeatmapChart.tsx           |  2 +-
 .../src/components/SearchTotalCountChart.tsx  |  2 +-
 .../ServiceDashboardDbQuerySidePanel.tsx      |  8 +--
 ...rviceDashboardEndpointPerformanceChart.tsx |  4 +-
 .../ServiceDashboardEndpointSidePanel.tsx     |  8 +--
 .../ServiceDashboardSlowestEventsTile.tsx     |  4 +-
 packages/app/src/components/SourceForm.tsx    | 12 +---
 .../app/src/components/SpanEventsSubpanel.tsx |  1 -
 packages/app/src/components/Table.module.scss | 16 ++---
 .../src/components/TimePicker/TimePicker.tsx  |  8 +--
 packages/app/styles/AppNav.module.scss        | 20 +++---
 packages/app/styles/LogTable.module.scss      | 22 +++----
 packages/app/styles/_semantic-colors.scss     |  7 +-
 packages/app/styles/_utilities.scss           | 13 ++++
 packages/app/styles/app.scss                  | 19 ------
 packages/app/styles/variables.scss            |  4 +-
 56 files changed, 230 insertions(+), 329 deletions(-)

diff --git a/packages/app/src/AlertsPage.tsx b/packages/app/src/AlertsPage.tsx
index 808f88567..30ad630ca 100644
--- a/packages/app/src/AlertsPage.tsx
+++ b/packages/app/src/AlertsPage.tsx
@@ -30,7 +30,6 @@ function AlertHistoryCard({ history }: { history: AlertHistory }) {
   return (
     <Tooltip
       label={latestHighestValue + ' ' + formatRelative(start, today)}
-      color="dark"
       withArrow
     >
       <div
@@ -63,7 +62,7 @@ function AlertHistoryCardList({ history }: { history: AlertHistory[] }) {
   return (
     <div className={styles.historyCardWrapper}>
       {paddingItems.map((_, index) => (
-        <Tooltip label="No data" color="dark" withArrow key={index}>
+        <Tooltip label="No data" withArrow key={index}>
           <div className={styles.historyCard} />
         </Tooltip>
       ))}
diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
index f17d68004..69874cbe3 100644
--- a/packages/app/src/AppNav.components.tsx
+++ b/packages/app/src/AppNav.components.tsx
@@ -334,7 +334,6 @@ export const AppNavLink = ({
                 <Badge
                   size="xs"
                   ms="xs"
-                  color="gray.4"
                   autoContrast
                   radius="sm"
                   className="align-text-bottom"
diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index 956443c52..bc9175ab4 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -664,13 +664,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                 <Collapse in={isSearchExpanded}>
                   <div className={styles.list}>
                     {isLogViewsLoading ? (
-                      <Loader
-                        color="gray.7"
-                        variant="dots"
-                        mx="md"
-                        my="xs"
-                        size="sm"
-                      />
+                      <Loader variant="dots" mx="md" my="xs" size="sm" />
                     ) : (
                       !IS_LOCAL_MODE && (
                         <>
diff --git a/packages/app/src/BenchmarkPage.tsx b/packages/app/src/BenchmarkPage.tsx
index c4ae68e2c..cf4846f49 100644
--- a/packages/app/src/BenchmarkPage.tsx
+++ b/packages/app/src/BenchmarkPage.tsx
@@ -235,9 +235,7 @@ function BenchmarkPage() {
           <Grid>
             <Grid.Col span={6}>
               <Stack>
-                <Text size="lg" c="gray.4">
-                  Query 1
-                </Text>
+                <Text size="lg">Query 1</Text>
                 <ConnectionSelectControlled
                   control={control}
                   name="connections.0"
@@ -247,9 +245,7 @@ function BenchmarkPage() {
             </Grid.Col>
             <Grid.Col span={6}>
               <Stack>
-                <Text size="lg" c="gray.4">
-                  Query 2
-                </Text>
+                <Text size="lg">Query 2</Text>
                 <ConnectionSelectControlled
                   control={control}
                   name="connections.1"
@@ -273,9 +269,7 @@ function BenchmarkPage() {
               <Text size="lg" c="gray.2">
                 Query Estimate & Indexes
               </Text>
-              <Text c="gray.4" size="sm">
-                Index utilization of your query
-              </Text>
+              <Text size="sm">Index utilization of your query</Text>
             </Stack>
           </Grid.Col>
           <Grid.Col span={6}>
diff --git a/packages/app/src/ClickhousePage.tsx b/packages/app/src/ClickhousePage.tsx
index 88375d11a..88585ffeb 100644
--- a/packages/app/src/ClickhousePage.tsx
+++ b/packages/app/src/ClickhousePage.tsx
@@ -59,7 +59,7 @@ function InfrastructureTab({
     <Grid mt="md">
       <Grid.Col span={6}>
         <ChartBox style={{ minHeight: 400 }}>
-          <Text size="sm" c="gray.4" mb="sm">
+          <Text size="sm" mb="sm">
             CPU Usage (Cores)
           </Text>
           <DBTimeChart
@@ -86,7 +86,7 @@ function InfrastructureTab({
       </Grid.Col>
       <Grid.Col span={6}>
         <ChartBox style={{ minHeight: 400 }}>
-          <Text size="sm" c="gray.4" mb="sm">
+          <Text size="sm" mb="sm">
             Memory Usage
           </Text>
           <DBTimeChart
@@ -112,7 +112,7 @@ function InfrastructureTab({
       </Grid.Col>
       <Grid.Col span={6}>
         <ChartBox style={{ minHeight: 400 }}>
-          <Text size="sm" c="gray.4" mb="sm">
+          <Text size="sm" mb="sm">
             Disk
           </Text>
           <DBTimeChart
@@ -146,7 +146,7 @@ function InfrastructureTab({
       </Grid.Col>
       <Grid.Col span={6}>
         <ChartBox style={{ minHeight: 400 }}>
-          <Text size="sm" c="gray.4" mb="sm">
+          <Text size="sm" mb="sm">
             S3 Requests
           </Text>
           <DBTimeChart
@@ -198,10 +198,10 @@ function InfrastructureTab({
       </Grid.Col>
       <Grid.Col span={6}>
         <ChartBox style={{ minHeight: 400 }}>
-          <Text size="sm" c="gray.4" mb="xs">
+          <Text size="sm" mb="xs">
             Network
           </Text>
-          <Text size="xs" c="gray.4" mb="sm">
+          <Text size="xs" mb="sm">
             Network activity for the entire machine, not only Clickhouse.
           </Text>
           <DBTimeChart
@@ -249,7 +249,7 @@ function InsertsTab({
       <Grid.Col span={12}>
         <ChartBox style={{ minHeight: 400 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
+            <Text size="sm">
               Insert{' '}
               {insertsBy === 'queries'
                 ? 'Queries'
@@ -323,9 +323,7 @@ function InsertsTab({
       <Grid.Col span={12}>
         <ChartBox style={{ minHeight: 200, height: 200 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Max Active Parts per Partition
-            </Text>
+            <Text size="sm">Max Active Parts per Partition</Text>
           </Group>
           <DBTimeChart
             config={{
@@ -355,10 +353,10 @@ function InsertsTab({
       </Grid.Col>
       <Grid.Col span={12}>
         <ChartBox style={{ height: 400 }}>
-          <Text size="sm" c="gray.4" mb="sm">
+          <Text size="sm" mb="sm">
             Active Parts Per Partition
           </Text>
-          <Text size="xs" c="gray.4" mb="md">
+          <Text size="xs" mb="md">
             Recommended to stay under 300, ClickHouse will automatically
             throttle inserts after 1,000 parts per partition and stop inserts at
             3,000 parts per partition.
@@ -499,9 +497,7 @@ function ClickhousePage() {
       <OnboardingModal requireSource={false} />
       <Group justify="space-between">
         <Group>
-          <Text c="gray.4" size="xl">
-            Clickhouse Dashboard
-          </Text>
+          <Text size="xl">Clickhouse Dashboard</Text>
           <ConnectionSelectControlled
             control={control}
             name="connection"
@@ -557,7 +553,7 @@ function ClickhousePage() {
             {/* <Grid.Col span={12}>
           <ChartBox style={{ minHeight: 300, height: 300 }}>
             <Group justify="space-between" align="center" mb="md">
-              <Text size="sm" c="gray.4" ms="xs">
+              <Text size="sm"  ms="xs">
                 Select P95 Query Latency
               </Text>
               <SegmentedControl
@@ -600,7 +596,7 @@ function ClickhousePage() {
             <Grid.Col span={12}>
               <ChartBox style={{ height: 250 }}>
                 <Flex justify="space-between" align="center">
-                  <Text size="sm" c="gray.4" ms="xs">
+                  <Text size="sm" ms="xs">
                     Query Latency
                   </Text>
                   {latencyFilter.latencyMin != null ||
@@ -656,7 +652,7 @@ function ClickhousePage() {
             </Grid.Col>
             <Grid.Col span={12}>
               <ChartBox style={{ height: 400 }}>
-                <Text size="sm" c="gray.4" mb="md">
+                <Text size="sm" mb="md">
                   Query Count by Table
                 </Text>
 
@@ -697,7 +693,7 @@ function ClickhousePage() {
             </Grid.Col>
             <Grid.Col span={12}>
               <ChartBox style={{ height: 400 }}>
-                <Text size="sm" c="gray.4" mb="md">
+                <Text size="sm" mb="md">
                   Most Time Consuming Query Patterns
                 </Text>
                 <DBTableChart
@@ -755,7 +751,7 @@ function ClickhousePage() {
             </Grid.Col>
             <Grid.Col span={12}>
               <ChartBox style={{ height: 400 }}>
-                <Text size="sm" c="gray.4" mb="md">
+                <Text size="sm" mb="md">
                   Slowest Queries
                 </Text>
                 <DBSqlRowTable
diff --git a/packages/app/src/Clipboard.tsx b/packages/app/src/Clipboard.tsx
index 34b1f626a..2edeb1f5b 100644
--- a/packages/app/src/Clipboard.tsx
+++ b/packages/app/src/Clipboard.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import cx from 'classnames';
-import { Button } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Button } from '@mantine/core';
 
 export default function Clipboard({
   text,
@@ -23,8 +23,10 @@ export default function Clipboard({
       }}
     >
       <Button
-        variant="link"
-        className={cx('px-0 text-decoration-none fs-7', className)}
+        variant="subtle"
+        p={0}
+        className={cx('text-decoration-none', className)}
+        size="xs"
       >
         {children({ isCopied })}
       </Button>
diff --git a/packages/app/src/DBDashboardImportPage.tsx b/packages/app/src/DBDashboardImportPage.tsx
index de11ebb5a..276a4be5b 100644
--- a/packages/app/src/DBDashboardImportPage.tsx
+++ b/packages/app/src/DBDashboardImportPage.tsx
@@ -3,7 +3,6 @@ import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { filter } from 'lodash';
-import { Container } from 'react-bootstrap';
 import { Controller, useForm } from 'react-hook-form';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { z } from 'zod';
@@ -13,6 +12,7 @@ import { DashboardTemplateSchema } from '@hyperdx/common-utils/dist/types';
 import {
   Button,
   Collapse,
+  Container,
   Group,
   Input,
   Stack,
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index b1590fc47..82b407f80 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -249,7 +249,6 @@ const Tile = forwardRef(
                   <Button
                     data-testid={`tile-alerts-button-${chart.id}`}
                     variant="subtle"
-                    color="gray.4"
                     size="xxs"
                     onClick={onEditClick}
                     title="Alerts"
@@ -262,7 +261,6 @@ const Tile = forwardRef(
               <Button
                 data-testid={`tile-duplicate-button-${chart.id}`}
                 variant="subtle"
-                color="gray.4"
                 size="xxs"
                 onClick={onDuplicateClick}
                 title="Duplicate"
@@ -273,7 +271,6 @@ const Tile = forwardRef(
                 data-testid={`tile-edit-button-${chart.id}`}
                 variant="subtle"
                 size="xxs"
-                color="gray.4"
                 onClick={onEditClick}
                 title="Edit"
               >
@@ -283,7 +280,6 @@ const Tile = forwardRef(
                 data-testid={`tile-delete-button-${chart.id}`}
                 variant="subtle"
                 size="xxs"
-                color="gray.4"
                 onClick={onDeleteClick}
                 title="Delete"
               >
@@ -481,7 +477,6 @@ function DashboardName({
               ms="xs"
               variant="subtle"
               size="xs"
-              color="gray.4"
               onClick={() => setEditing(true)}
             >
               <i className="bi bi-pencil"></i>
@@ -882,7 +877,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
       {IS_LOCAL_MODE === false && isLocalDashboard && isLocalDashboardEmpty && (
         <Paper my="lg" p="md">
           <Flex justify="space-between" align="center">
-            <Text c="gray.4" size="sm">
+            <Text size="sm">
               This is a temporary dashboard and can not be saved.
             </Text>
             <Button
@@ -917,8 +912,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
               onChange={handleUpdateTags}
             >
               <Button
-                variant="outline"
-                color="dark.2"
+                variant="default"
                 px="xs"
                 size="xs"
                 style={{ flexShrink: 0 }}
@@ -993,7 +987,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             </Menu>
           )}
         </Group>
-        {/* <Button variant="outline" color="gray.4" size="sm">
+        {/* <Button variant="outline" size="sm">
           Save
         </Button> */}
       </Flex>
@@ -1057,10 +1051,9 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
         >
           <Button
             onClick={() => setIsLive(prev => !prev)}
-            color={isLive ? 'green' : 'gray'}
             mr={6}
             size="sm"
-            variant="outline"
+            variant={isLive ? 'filled' : 'default'}
             title={isLive ? 'Disable auto-refresh' : 'Enable auto-refresh'}
           >
             Live
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index c515591f0..71fa13f6f 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -177,7 +177,7 @@ function SearchNumRows({
 
   const numRows = data?.[0]?.rows;
   return (
-    <Text size="xs" c="gray.4" mb={4}>
+    <Text size="xs" mb={4}>
       {isLoading
         ? 'Scanned Rows ...'
         : error || !numRows
@@ -307,7 +307,7 @@ function SaveSearchModal({
         <Stack>
           {chartConfig != null ? (
             <Card withBorder>
-              <Text c="gray.4" size="xs" mb="xs">
+              <Text size="xs" mb="xs">
                 SELECT
               </Text>
               <Text
@@ -315,13 +315,13 @@ function SaveSearchModal({
                 size="xs"
                 c="gray.2"
               >{`${chartConfig.select}`}</Text>
-              <Text c="gray.4" size="xs" mb="xs">
+              <Text size="xs" mb="xs">
                 FROM
               </Text>
               <Text mb="sm" size="xs" c="gray.2">
                 {chartConfig?.from.databaseName}.{chartConfig?.from.tableName}
               </Text>
-              <Text c="gray.4" size="xs" mb="xs">
+              <Text size="xs" mb="xs">
                 WHERE
               </Text>
               {chartConfig.where ? (
@@ -329,11 +329,11 @@ function SaveSearchModal({
                   {chartConfig.where}
                 </Text>
               ) : (
-                <Text size="xxs" c="gray.4" fs="italic">
+                <Text size="xxs" fs="italic">
                   None
                 </Text>
               )}
-              <Text c="gray.4" size="xs" mb="xs" mt="sm">
+              <Text size="xs" mb="xs" mt="sm">
                 ORDER BY
               </Text>
               <Text size="xs" c="gray.2">
@@ -341,10 +341,10 @@ function SaveSearchModal({
               </Text>
             </Card>
           ) : (
-            <Text c="gray.4">Loading Chart Config...</Text>
+            <Text>Loading Chart Config...</Text>
           )}
           <Box>
-            <Text c="gray.4" size="xs" mb="xs">
+            <Text size="xs" mb="xs">
               Name
             </Text>
             <InputControlled
@@ -355,7 +355,7 @@ function SaveSearchModal({
             />
           </Box>
           <Box mb="sm">
-            <Text c="gray.4" size="xs" mb="xs">
+            <Text size="xs" mb="xs">
               Tags
             </Text>
             <Group gap="xs" align="center" mb="xs">
@@ -1570,7 +1570,7 @@ function DBSearchPage() {
         {!queryReady ? (
           <Paper shadow="xs" p="xl" h="100%">
             <Center mih={100} h="100%">
-              <Text size="sm" c="gray.4">
+              <Text size="sm">
                 Please start by selecting a database, table, and timestamp
                 column above to view data.
               </Text>
diff --git a/packages/app/src/DBSearchPageAlertModal.tsx b/packages/app/src/DBSearchPageAlertModal.tsx
index 18cc2d540..d6986cd54 100644
--- a/packages/app/src/DBSearchPageAlertModal.tsx
+++ b/packages/app/src/DBSearchPageAlertModal.tsx
@@ -103,7 +103,7 @@ const AlertForm = ({
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Stack gap="xs">
-        <Paper px="md" py="sm" bg="dark.6" radius="xs">
+        <Paper px="md" py="sm" radius="xs">
           <Text size="xxs" opacity={0.5}>
             Trigger
           </Text>
@@ -155,7 +155,7 @@ const AlertForm = ({
             size="xs"
           />
         </Paper>
-        <Paper px="md" py="sm" bg="dark.6" radius="xs">
+        <Paper px="md" py="sm" radius="xs">
           <Text size="xxs" opacity={0.5} mb={4}>
             Send to
           </Text>
@@ -186,7 +186,7 @@ const AlertForm = ({
       </Accordion>
 
       {defaultValues?.createdBy && (
-        <Paper px="md" py="sm" bg="dark.6" radius="xs" mt="sm">
+        <Paper px="md" py="sm" radius="xs" mt="sm">
           <Text size="xxs" opacity={0.5} mb={4}>
             Created by
           </Text>
diff --git a/packages/app/src/DBServiceMapPage.tsx b/packages/app/src/DBServiceMapPage.tsx
index 6d381f50a..7b2dec401 100644
--- a/packages/app/src/DBServiceMapPage.tsx
+++ b/packages/app/src/DBServiceMapPage.tsx
@@ -95,9 +95,7 @@ function DBServiceMapPage() {
     >
       <Group mb="md" justify="space-between">
         <Group>
-          <Text c="gray.4" size="xl">
-            Service Map
-          </Text>
+          <Text size="xl">Service Map</Text>
           <SourceSelectControlled
             control={control}
             name="source"
@@ -109,7 +107,7 @@ function DBServiceMapPage() {
           />
         </Group>
         <Group justify="flex-end">
-          <Text c="gray.4" bg="inherit" size="sm">
+          <Text bg="inherit" size="sm">
             Sampling {samplingLabel}
           </Text>
           <div style={{ minWidth: '200px' }}>
diff --git a/packages/app/src/DashboardFiltersModal.tsx b/packages/app/src/DashboardFiltersModal.tsx
index a912778cd..532001a2b 100644
--- a/packages/app/src/DashboardFiltersModal.tsx
+++ b/packages/app/src/DashboardFiltersModal.tsx
@@ -191,7 +191,7 @@ const DashboardFilterEditForm = ({
             </CustomInputWrapper>
 
             <Group justify="flex-end" my="xs">
-              <Button variant="outline" color="gray.2" onClick={onCancel}>
+              <Button variant="default" onClick={onCancel}>
                 Cancel
               </Button>
               <Button type="submit">Save filter</Button>
diff --git a/packages/app/src/InstallInstructionsModal.tsx b/packages/app/src/InstallInstructionsModal.tsx
index 4c96cc63e..5a17ebe7f 100644
--- a/packages/app/src/InstallInstructionsModal.tsx
+++ b/packages/app/src/InstallInstructionsModal.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import { Button, Modal } from 'react-bootstrap';
+import { Button, Modal } from '@mantine/core';
 
 import api from './api';
 import Clipboard from './Clipboard';
@@ -17,7 +17,7 @@ function CopyableValue({
         return (
           <div
             className={cx(
-              'd-flex fs-6 py-2 px-3 bg-grey rounded align-items-center justify-content-between cursor-pointer text-white-hover',
+              'd-flex fs-6 py-2 px-3 bg-muted rounded align-items-center justify-content-between cursor-pointer text-white-hover',
               {
                 'text-success': isCopied,
               },
@@ -56,14 +56,13 @@ export default function InstallInstructionModal({
 
   return (
     <Modal
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onHide={onHide}
-      show={show}
+      opened={show}
+      onClose={onHide}
+      title="Start Sending Telemetry"
       size="lg"
+      centered
     >
-      <Modal.Body className="bg-hdx-dark rounded inter">
-        <div className="fs-4 mb-4">Start Sending Telemetry</div>
+      <div className="inter">
         {team != null && (
           <div className="mb-4">
             <CopyableValue
@@ -175,11 +174,11 @@ export default function InstallInstructionModal({
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
         <div className="mt-4">
-          <Button variant="dark" onClick={() => onHide()}>
+          <Button variant="default" onClick={() => onHide()}>
             Cancel
           </Button>
         </div>
-      </Modal.Body>
+      </div>
     </Modal>
   );
 }
diff --git a/packages/app/src/KubernetesDashboardPage.tsx b/packages/app/src/KubernetesDashboardPage.tsx
index 839452457..9821180b1 100644
--- a/packages/app/src/KubernetesDashboardPage.tsx
+++ b/packages/app/src/KubernetesDashboardPage.tsx
@@ -999,9 +999,7 @@ function KubernetesDashboardPage() {
       )}
       <Group justify="space-between">
         <Group>
-          <Text c="gray.4" size="xl">
-            Kubernetes Dashboard
-          </Text>
+          <Text size="xl">Kubernetes Dashboard</Text>
           <SourceSelectControlled
             name="logSourceId"
             control={control}
diff --git a/packages/app/src/LogSidePanelElements.tsx b/packages/app/src/LogSidePanelElements.tsx
index 96a8edfd6..96666f2ec 100644
--- a/packages/app/src/LogSidePanelElements.tsx
+++ b/packages/app/src/LogSidePanelElements.tsx
@@ -240,7 +240,7 @@ const LevelChip = React.memo(({ level }: { level?: string }) => {
     ? 'text-danger bg-danger'
     : level.includes('warn') || level.includes('warning')
       ? 'text-warning bg-warning'
-      : 'text-slate-300 bg-grey';
+      : 'text-slate-300 bg-muted';
 
   return (
     <span
@@ -546,7 +546,7 @@ export const SourceMapsFtux = () => {
       mt="xs"
       onClose={() => setIsDismissed(true)}
     >
-      <Text size="xs" c="gray.4">
+      <Text size="xs">
         <Icon name="code-square" /> Some of the stack frames are pointing to
         minified files. Use hyperdx-cli to upload your source maps and see the
         original code.
diff --git a/packages/app/src/Logo.tsx b/packages/app/src/Logo.tsx
index 181fd7662..fe2db80cc 100644
--- a/packages/app/src/Logo.tsx
+++ b/packages/app/src/Logo.tsx
@@ -31,13 +31,7 @@ export default function Logo({
   };
 
   return (
-    <div
-      className="align-items-center d-flex"
-      style={{
-        color: 'white',
-        userSelect: 'none',
-      }}
-    >
+    <div className="align-items-center d-flex">
       <div
         className="me-2"
         style={{ marginBottom: configs[size].iconMarginBottom }}
diff --git a/packages/app/src/NamespaceDetailsSidePanel.tsx b/packages/app/src/NamespaceDetailsSidePanel.tsx
index f414309ec..b5398b64e 100644
--- a/packages/app/src/NamespaceDetailsSidePanel.tsx
+++ b/packages/app/src/NamespaceDetailsSidePanel.tsx
@@ -46,9 +46,7 @@ const PodDetailsProperty = React.memo(
         <Text size="xs" color="gray.6">
           {label}
         </Text>
-        <Text size="sm" color="gray.3">
-          {value}
-        </Text>
+        <Text size="sm">{value}</Text>
       </div>
     );
   },
diff --git a/packages/app/src/NodeDetailsSidePanel.tsx b/packages/app/src/NodeDetailsSidePanel.tsx
index f45c28e57..5ff191f9b 100644
--- a/packages/app/src/NodeDetailsSidePanel.tsx
+++ b/packages/app/src/NodeDetailsSidePanel.tsx
@@ -50,9 +50,7 @@ const PodDetailsProperty = React.memo(
         <Text size="xs" color="gray.6">
           {label}
         </Text>
-        <Text size="sm" color="gray.3">
-          {value}
-        </Text>
+        <Text size="sm">{value}</Text>
       </div>
     );
   },
diff --git a/packages/app/src/OnboardingChecklist.tsx b/packages/app/src/OnboardingChecklist.tsx
index a805664f1..ee56fec02 100644
--- a/packages/app/src/OnboardingChecklist.tsx
+++ b/packages/app/src/OnboardingChecklist.tsx
@@ -146,19 +146,10 @@ const OnboardingChecklist = ({
   }
 
   return (
-    <Card
-      withBorder
-      p="xs"
-      mb="sm"
-      radius="md"
-      style={{
-        background: 'var(--mantine-color-dark-8)',
-        borderColor: 'var(--mantine-color-dark-4)',
-      }}
-    >
+    <Card withBorder p="xs" mb="sm" radius="md">
       <Group justify="space-between" align="center" mb={isCollapsed ? 0 : 'xs'}>
         <Group gap="xs" align="center">
-          <Text size="sm" fw="bold" c="gray.3">
+          <Text size="sm" fw="bold">
             Get Started
           </Text>
           <Badge
@@ -199,7 +190,7 @@ const OnboardingChecklist = ({
                       : 'none',
                     backgroundColor: step.isComplete
                       ? 'transparent'
-                      : 'var(--mantine-color-dark-5)',
+                      : 'var(--color-text)',
                     color: step.isComplete
                       ? 'var(--mantine-color-green-6)'
                       : 'var(--mantine-color-gray-5)',
diff --git a/packages/app/src/PodDetailsSidePanel.tsx b/packages/app/src/PodDetailsSidePanel.tsx
index 78faa643f..ec10a1874 100644
--- a/packages/app/src/PodDetailsSidePanel.tsx
+++ b/packages/app/src/PodDetailsSidePanel.tsx
@@ -45,9 +45,7 @@ const PodDetailsProperty = React.memo(
         <Text size="xs" color="gray.6">
           {label}
         </Text>
-        <Text size="sm" color="gray.3">
-          {value}
-        </Text>
+        <Text size="sm">{value}</Text>
       </div>
     );
   },
diff --git a/packages/app/src/ServicesDashboardPage.tsx b/packages/app/src/ServicesDashboardPage.tsx
index 939d8ba58..bb586dda0 100644
--- a/packages/app/src/ServicesDashboardPage.tsx
+++ b/packages/app/src/ServicesDashboardPage.tsx
@@ -174,9 +174,7 @@ export function EndpointLatencyChart({
   return (
     <ChartBox style={{ height: 350 }}>
       <Group justify="space-between" align="center" mb="sm">
-        <Text size="sm" c="gray.4">
-          Request Latency
-        </Text>
+        <Text size="sm">Request Latency</Text>
         <Box>
           <Button.Group>
             <Button
@@ -302,9 +300,7 @@ function HttpTab({
       <Grid.Col span={6}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Request Error Rate
-            </Text>
+            <Text size="sm">Request Error Rate</Text>
             <SegmentedControl
               size="xs"
               value={reqChartType}
@@ -354,9 +350,7 @@ function HttpTab({
       <Grid.Col span={6}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Request Throughput
-            </Text>
+            <Text size="sm">Request Throughput</Text>
           </Group>
           {source && (
             <DBTimeChart
@@ -389,9 +383,7 @@ function HttpTab({
       <Grid.Col span={6}>
         <ChartBox style={{ height: 350, overflow: 'auto' }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              20 Top Most Time Consuming Endpoints
-            </Text>
+            <Text size="sm">20 Top Most Time Consuming Endpoints</Text>
           </Group>
 
           {source && (
@@ -466,7 +458,7 @@ function HttpTab({
       <Grid.Col span={12}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
+            <Text size="sm">
               Top 20{' '}
               {topEndpointsChartType === 'time'
                 ? 'Most Time Consuming'
@@ -569,9 +561,7 @@ function DatabaseTab({
       <Grid.Col span={6}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Total Time Consumed per Query
-            </Text>
+            <Text size="sm">Total Time Consumed per Query</Text>
           </Group>
           {source && (
             <DBTimeChart
@@ -604,9 +594,7 @@ function DatabaseTab({
       <Grid.Col span={6}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Throughput per Query
-            </Text>
+            <Text size="sm">Throughput per Query</Text>
           </Group>
           {source && (
             <DBTimeChart
@@ -642,9 +630,7 @@ function DatabaseTab({
       <Grid.Col span={12}>
         <ChartBox style={{ height: 350, overflow: 'auto' }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Top 20 Most Time Consuming Queries
-            </Text>
+            <Text size="sm">Top 20 Most Time Consuming Queries</Text>
             <Box>
               <Button.Group>
                 <Button
@@ -815,9 +801,7 @@ function ErrorsTab({
       <Grid.Col span={12}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Error Events per Service
-            </Text>
+            <Text size="sm">Error Events per Service</Text>
           </Group>
           {source && (
             <DBTimeChart
diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
index b4f64b289..39ed951c2 100644
--- a/packages/app/src/TeamPage.tsx
+++ b/packages/app/src/TeamPage.tsx
@@ -93,9 +93,7 @@ function ConnectionsSection() {
 
   return (
     <Box id="connections">
-      <Text size="md" c="gray.4">
-        Connections
-      </Text>
+      <Text size="md">Connections</Text>
       <Divider my="md" />
       <Card>
         <Stack mb="md">
@@ -119,7 +117,6 @@ function ConnectionsSection() {
                 {editedConnectionId !== c.id && (
                   <Button
                     variant="subtle"
-                    color="gray.4"
                     onClick={() => setEditedConnectionId(c.id)}
                     size="sm"
                   >
@@ -129,7 +126,6 @@ function ConnectionsSection() {
                 {editedConnectionId === c.id && (
                   <Button
                     variant="subtle"
-                    color="gray.4"
                     onClick={() => setEditedConnectionId(null)}
                     size="sm"
                   >
@@ -156,7 +152,6 @@ function ConnectionsSection() {
           (IS_LOCAL_MODE ? (connections?.length ?? 0) < 1 : true) && (
             <Button
               variant="outline"
-              color="gray.4"
               onClick={() => setIsCreatingConnection(true)}
             >
               Add Connection
@@ -193,11 +188,9 @@ function SourcesSection() {
 
   return (
     <Box id="sources">
-      <Text size="md" c="gray.4">
-        Sources
-      </Text>
+      <Text size="md">Sources</Text>
       <Divider my="md" />
-      <Card>
+      <Card variant="muted">
         <Stack>
           {sources?.map(s => (
             <>
@@ -227,7 +220,6 @@ function SourcesSection() {
                 {editedSourceId !== s.id && (
                   <Button
                     variant="subtle"
-                    color="gray.4"
                     onClick={() => setEditedSourceId(s.id)}
                     size="sm"
                   >
@@ -237,7 +229,6 @@ function SourcesSection() {
                 {editedSourceId === s.id && (
                   <Button
                     variant="subtle"
-                    color="gray.4"
                     onClick={() => setEditedSourceId(null)}
                     size="sm"
                   >
@@ -264,11 +255,7 @@ function SourcesSection() {
             />
           )}
           {!IS_LOCAL_MODE && !isCreatingSource && (
-            <Button
-              variant="outline"
-              onClick={() => setIsCreatingSource(true)}
-              color="gray.4"
-            >
+            <Button variant="default" onClick={() => setIsCreatingSource(true)}>
               Add Source
             </Button>
           )}
@@ -467,9 +454,7 @@ function TeamMembersSection() {
 
   return (
     <Box id="team_members">
-      <Text size="md" c="gray.4">
-        Team
-      </Text>
+      <Text size="md">Team</Text>
       <Divider my="md" />
 
       <Card>
@@ -627,7 +612,7 @@ function TeamMembersSection() {
         show={deleteTeamMemberConfirmationModalData.id != null}
         size="lg"
       >
-        <BSModal.Body className="bg-grey rounded">
+        <BSModal.Body className="bg-muted rounded">
           <h3 className="text-muted">Delete Team Member</h3>
           <p className="text-muted">
             Deleting this team member (
@@ -741,11 +726,9 @@ function IntegrationsSection() {
 
   return (
     <Box id="integrations">
-      <Text size="md" c="gray.4">
-        Integrations
-      </Text>
+      <Text size="md">Integrations</Text>
       <Divider my="md" />
-      <Card>
+      <Card variant="muted">
         <Text mb="xs">Webhooks</Text>
 
         <Stack>
@@ -770,7 +753,6 @@ function IntegrationsSection() {
                     <>
                       <Button
                         variant="subtle"
-                        color="gray.4"
                         onClick={() => setEditedWebhookId(webhook._id)}
                         size="compact-xs"
                         leftSection={<IconPencil size={14} />}
@@ -787,7 +769,6 @@ function IntegrationsSection() {
                   {editedWebhookId === webhook._id && (
                     <Button
                       variant="subtle"
-                      color="gray.4"
                       onClick={() => setEditedWebhookId(null)}
                       size="compact-xs"
                     >
@@ -812,7 +793,7 @@ function IntegrationsSection() {
         </Stack>
 
         {!isAddWebhookModalOpen ? (
-          <Button variant="outline" color="gray.4" onClick={openWebhookModal}>
+          <Button variant="outline" onClick={openWebhookModal}>
             Add Webhook
           </Button>
         ) : (
@@ -866,11 +847,9 @@ function TeamNameSection() {
   );
   return (
     <Box id="team_name">
-      <Text size="md" c="gray.4">
-        Team Name
-      </Text>
+      <Text size="md">Team Name</Text>
       <Divider my="md" />
-      <Card>
+      <Card variant="muted">
         {isEditingTeamName ? (
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <Group gap="xs">
@@ -1136,11 +1115,9 @@ function TeamQueryConfigSection() {
 
   return (
     <Box id="team_name">
-      <Text size="md" c="gray.4">
-        ClickHouse Client Settings
-      </Text>
+      <Text size="md">ClickHouse Client Settings</Text>
       <Divider my="md" />
-      <Card>
+      <Card variant="muted">
         <Stack>
           <ClickhouseSettingForm
             settingKey="searchRowLimit"
@@ -1254,14 +1231,10 @@ function ApiKeysSection() {
 
   return (
     <Box id="api_keys">
-      <Text size="md" c="gray.4">
-        API Keys
-      </Text>
+      <Text size="md">API Keys</Text>
       <Divider my="md" />
-      <Card>
-        <Text c="gray.3" mb="md">
-          Ingestion API Key
-        </Text>
+      <Card variant="muted" mb="md">
+        <Text mb="md">Ingestion API Key</Text>
         <Group gap="xs">
           {team?.apiKey && (
             <APIKeyCopyButton value={team.apiKey} dataTestId="api-key" />
@@ -1317,11 +1290,9 @@ function ApiKeysSection() {
         </MModal>
       </Card>
       {!isLoadingMe && me != null && (
-        <Card>
+        <Card variant="muted">
           <Card.Section p="md">
-            <Text c="gray.3" mb="md">
-              Personal API Access Key
-            </Text>
+            <Text mb="md">Personal API Access Key</Text>
             <APIKeyCopyButton value={me.accessKey} dataTestId="api-key" />
           </Card.Section>
         </Card>
diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index a7d8858a5..3cfc404ce 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -118,12 +118,50 @@ const makeTheme = ({
       },
     },
     Card: {
+      styles: (_theme: any, props: any) => {
+        if (props.variant === 'muted') {
+          return {
+            root: {
+              backgroundColor: 'var(--color-bg-muted)',
+              border: '1px solid var(--color-border)',
+            },
+          };
+        }
+        return {
+          root: {
+            backgroundColor: 'var(--color-bg-surface)',
+          },
+        };
+      },
+    },
+    Divider: {
       styles: {
         root: {
-          backgroundColor: '#191B1F',
+          borderColor: 'var(--color-border)',
         },
       },
     },
+    Paper: {
+      classNames: (_theme: any, props: any) => {
+        if (props.variant === 'muted') {
+          return {
+            root: 'paper-muted',
+          };
+        }
+        return {};
+      },
+      styles: (_theme: any, props: any) => {
+        if (props.variant === 'muted') {
+          return {
+            root: {
+              backgroundColor: 'var(--color-bg-muted)',
+              border: '1px solid var(--color-border)',
+            },
+          };
+        }
+        return {};
+      },
+    },
     Button: Button.extend({
       vars: (theme, props) => {
         if (props.size === 'xxs') {
diff --git a/packages/app/src/components/ConfirmDeleteMenu.tsx b/packages/app/src/components/ConfirmDeleteMenu.tsx
index 911964b7f..c0dfc71e1 100644
--- a/packages/app/src/components/ConfirmDeleteMenu.tsx
+++ b/packages/app/src/components/ConfirmDeleteMenu.tsx
@@ -8,7 +8,7 @@ export default function ConfirmDeleteMenu({
   return (
     <Menu withArrow>
       <Menu.Target>
-        <Button variant="outline" color="gray.4" size="xs">
+        <Button variant="outline" size="xs">
           Delete
         </Button>
       </Menu.Target>
diff --git a/packages/app/src/components/ConnectionForm.tsx b/packages/app/src/components/ConnectionForm.tsx
index fd23f52f9..b6ea1a2be 100644
--- a/packages/app/src/components/ConnectionForm.tsx
+++ b/packages/app/src/components/ConnectionForm.tsx
@@ -209,7 +209,7 @@ export function ConnectionForm({
     >
       <Stack gap="md">
         <Box>
-          <Text c="gray.4" size="xs" mb="xs">
+          <Text size="xs" mb="xs">
             Connection Name
           </Text>
           <InputControlled
@@ -221,7 +221,7 @@ export function ConnectionForm({
           />
         </Box>
         <Box>
-          <Text c="gray.4" size="xs" mb="xs">
+          <Text size="xs" mb="xs">
             Host
           </Text>
           <InputControlled
@@ -233,7 +233,7 @@ export function ConnectionForm({
           />
         </Box>
         <Box>
-          <Text c="gray.4" size="xs" mb="xs">
+          <Text size="xs" mb="xs">
             Username
           </Text>
           <InputControlled
@@ -244,14 +244,13 @@ export function ConnectionForm({
           />
         </Box>
         <Box>
-          <Text c="gray.4" size="xs" mb="xs">
+          <Text size="xs" mb="xs">
             Password
           </Text>
           {!showUpdatePassword && !isNew && (
             <Button
               data-testid="update-password-button"
               variant="outline"
-              color="gray.4"
               onClick={() => {
                 setShowUpdatePassword(true);
               }}
@@ -272,7 +271,6 @@ export function ConnectionForm({
                 <Button
                   data-testid="cancel-password-button"
                   variant="outline"
-                  color="gray.4"
                   onClick={() => {
                     setShowUpdatePassword(false);
                     resetField('password');
@@ -339,7 +337,7 @@ export function ConnectionForm({
             />
           )}
           {onClose && showCancelButton && (
-            <Button variant="outline" color="gray.4" onClick={onClose}>
+            <Button variant="outline" onClick={onClose}>
               Cancel
             </Button>
           )}
diff --git a/packages/app/src/components/DBDeltaChart.tsx b/packages/app/src/components/DBDeltaChart.tsx
index df2ab35a3..262f970ea 100644
--- a/packages/app/src/components/DBDeltaChart.tsx
+++ b/packages/app/src/components/DBDeltaChart.tsx
@@ -166,7 +166,7 @@ const HDXBarChartTooltip = withErrorBoundary(
         <div className={styles.chartTooltip}>
           <div className={styles.chartTooltipContent}>
             {title && (
-              <Text size="xs" mb="xs" c="gray.4">
+              <Text size="xs" mb="xs">
                 {title}
               </Text>
             )}
@@ -212,7 +212,7 @@ function PropertyComparisonChart({
 
   return (
     <div style={{ width: 340, height: 120 }}>
-      <Text size="xs" c="gray.4" ta="center" title={name}>
+      <Text size="xs" ta="center" title={name}>
         {truncateMiddle(name, 32)}
       </Text>
       <ResponsiveContainer width="100%" height="100%">
diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx
index 47575089f..4402f0f09 100644
--- a/packages/app/src/components/DBEditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm.tsx
@@ -677,7 +677,7 @@ export default function EditTimeChartForm({
         )}
       />
       <Flex align="center" gap="sm" mb="sm">
-        <Text c="gray.4" size="sm" className="text-nowrap">
+        <Text size="sm" className="text-nowrap">
           Chart Name
         </Text>
         <InputControlled
@@ -715,7 +715,7 @@ export default function EditTimeChartForm({
       ) : (
         <>
           <Flex mb="md" align="center" gap="sm">
-            <Text c="gray.4" pe="md" size="sm">
+            <Text pe="md" size="sm">
               Data Source
             </Text>
             <SourceSelectControlled
@@ -758,7 +758,6 @@ export default function EditTimeChartForm({
                   <Divider mt="md" mb="sm" />
                   <Flex align="center" mt="sm">
                     <Text
-                      c="gray.4"
                       me="sm"
                       size="sm"
                       style={{
@@ -888,7 +887,7 @@ export default function EditTimeChartForm({
       {alert && (
         <Paper my="sm">
           <Stack gap="xs">
-            <Paper px="md" py="sm" bg="dark.6" radius="xs">
+            <Paper px="md" py="sm" radius="xs">
               <Group gap="xs" justify="space-between">
                 <Group gap="xs">
                   <Text size="sm" opacity={0.7}>
@@ -1005,7 +1004,7 @@ export default function EditTimeChartForm({
       {!queryReady && activeTab !== 'markdown' ? (
         <Paper shadow="xs" p="xl">
           <Center mih={400}>
-            <Text size="sm" c="gray.4">
+            <Text size="sm">
               Please start by selecting a database, table, and timestamp column
               above and then click the play button to query data.
             </Text>
diff --git a/packages/app/src/components/DBHeatmapChart.tsx b/packages/app/src/components/DBHeatmapChart.tsx
index ee0ee1c57..d0eda7419 100644
--- a/packages/app/src/components/DBHeatmapChart.tsx
+++ b/packages/app/src/components/DBHeatmapChart.tsx
@@ -481,7 +481,7 @@ function HeatmapContainer({
   if (isLoading || isMinMaxLoading) {
     return (
       <Paper shadow="xs" p="xl">
-        <Text size="sm" c="gray.4" ta="center">
+        <Text size="sm" ta="center">
           Loading...
         </Text>
       </Paper>
@@ -539,7 +539,7 @@ function HeatmapContainer({
   if (time.length < 2 || generatedTsBuckets?.length < 2) {
     return (
       <Paper shadow="xs" p="xl">
-        <Text size="sm" c="gray.4" ta="center">
+        <Text size="sm" ta="center">
           Not enough data points to render heatmap. Try expanding your search
           criteria.
         </Text>
diff --git a/packages/app/src/components/DBHistogramChart.tsx b/packages/app/src/components/DBHistogramChart.tsx
index 81aa466ac..6fb506fa5 100644
--- a/packages/app/src/components/DBHistogramChart.tsx
+++ b/packages/app/src/components/DBHistogramChart.tsx
@@ -154,7 +154,7 @@ const HDXHistogramChartTooltip = (props: any) => {
 
     return (
       <div
-        className="bg-grey px-3 py-2 rounded fs-8"
+        className="bg-muted px-3 py-2 rounded fs-8"
         style={{ pointerEvents: 'auto' }}
       >
         <div className="mb-2">
diff --git a/packages/app/src/components/DBRowSidePanelHeader.tsx b/packages/app/src/components/DBRowSidePanelHeader.tsx
index 5975a6452..233294738 100644
--- a/packages/app/src/components/DBRowSidePanelHeader.tsx
+++ b/packages/app/src/components/DBRowSidePanelHeader.tsx
@@ -198,12 +198,12 @@ export default function DBRowSidePanelHeader({
       <Flex>
         {severityText && <LogLevel level={severityText} />}
         {severityText && isValidDate(date) && (
-          <Text size="xs" mx="xs" c="gray.4">
+          <Text size="xs" mx="xs">
             &middot;
           </Text>
         )}
         {isValidDate(date) && (
-          <Text c="gray.4" size="xs">
+          <Text size="xs">
             <FormatTime value={date} /> &middot;{' '}
             {formatDistanceToNowStrictShort(date)} ago
           </Text>
@@ -211,7 +211,6 @@ export default function DBRowSidePanelHeader({
       </Flex>
       {mainContent ? (
         <Paper
-          bg="dark.7"
           p="xs"
           mt="sm"
           style={{
@@ -222,15 +221,12 @@ export default function DBRowSidePanelHeader({
           ref={headerRef}
         >
           <Flex justify="space-between" mb="xs">
-            <Text size="xs" c="gray.4">
-              {mainContentHeader}
-            </Text>
+            <Text size="xs">{mainContentHeader}</Text>
             {/* Toggles expanded sidebar header*/}
             {headerHeight >= maxBoxHeight && (
               <Button
                 size="compact-xs"
                 variant="subtle"
-                color="gray.3"
                 onClick={() =>
                   setUserPreference({
                     ...userPreferences,
@@ -262,8 +258,8 @@ export default function DBRowSidePanelHeader({
           )}
         </Paper>
       ) : (
-        <Paper bg="dark.7" p="xs" mt="sm">
-          <Text size="xs" c="gray.4" mb="xs">
+        <Paper p="xs" mt="sm">
+          <Text size="xs" mb="xs">
             [Empty]
           </Text>
         </Paper>
diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx
index 3d2fae54c..24f42e30b 100644
--- a/packages/app/src/components/DBRowTable.tsx
+++ b/packages/app/src/components/DBRowTable.tsx
@@ -946,7 +946,7 @@ export const RawLogTable = memo(
             })}
             <tr>
               <td colSpan={800}>
-                <div className="rounded fs-7 bg-grey text-center d-flex align-items-center justify-content-center mt-3">
+                <div className="rounded fs-7 bg-muted text-center d-flex align-items-center justify-content-center mt-3">
                   {isLoading ? (
                     <div className="my-3">
                       <div className="spin-animate d-inline-block">
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index e6b675837..1e90b90af 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -934,15 +934,15 @@ const DBSearchPageFiltersComponent = ({
             placement="right"
           >
             <Tabs.List w="100%">
-              <Tabs.Tab value="results" size="xs" c="gray.4" h="24px">
+              <Tabs.Tab value="results" size="xs" h="24px">
                 <Text size="xs">Results Table</Text>
               </Tabs.Tab>
               {showDelta && (
-                <Tabs.Tab value="delta" size="xs" c="gray.4" h="24px">
+                <Tabs.Tab value="delta" size="xs" h="24px">
                   <Text size="xs">Event Deltas</Text>
                 </Tabs.Tab>
               )}
-              <Tabs.Tab value="pattern" size="xs" c="gray.4" h="24px">
+              <Tabs.Tab value="pattern" size="xs" h="24px">
                 <Text size="xs">Event Patterns</Text>
               </Tabs.Tab>
             </Tabs.List>
diff --git a/packages/app/src/components/DBTable/TableHeader.tsx b/packages/app/src/components/DBTable/TableHeader.tsx
index c4d731afd..288812f0f 100644
--- a/packages/app/src/components/DBTable/TableHeader.tsx
+++ b/packages/app/src/components/DBTable/TableHeader.tsx
@@ -47,7 +47,7 @@ export default function TableHeader({
           >
             <>
               {header.isPlaceholder ? null : (
-                <Text truncate="end" size="xs" flex="1" c="white">
+                <Text truncate="end" size="xs" flex="1">
                   {flexRender(
                     header.column.columnDef.header,
                     header.getContext(),
diff --git a/packages/app/src/components/DBTimeChart.tsx b/packages/app/src/components/DBTimeChart.tsx
index b29a141bf..8b09f2c86 100644
--- a/packages/app/src/components/DBTimeChart.tsx
+++ b/packages/app/src/components/DBTimeChart.tsx
@@ -264,7 +264,7 @@ function DBTimeChartComponent({
         // only View Events for single series
         (!Array.isArray(config.select) || config.select.length === 1) ? (
           <div
-            className="bg-grey px-3 py-2 rounded fs-8"
+            className="bg-muted px-3 py-2 rounded fs-8"
             style={{
               zIndex: 5,
               position: 'absolute',
@@ -290,7 +290,7 @@ function DBTimeChartComponent({
         ) : null}
         {/* {totalGroups > groupKeys.length ? (
                 <div
-                  className="bg-grey px-3 py-2 rounded fs-8"
+                  className="bg-muted px-3 py-2 rounded fs-8"
                   style={{
                     zIndex: 5,
                     position: 'absolute',
@@ -310,7 +310,7 @@ function DBTimeChartComponent({
                 ) : null*/}
         {showDisplaySwitcher && (
           <div
-            className="bg-grey px-3 py-2 rounded fs-8"
+            className="bg-muted px-3 py-2 rounded fs-8"
             style={{
               zIndex: 5,
               position: 'absolute',
diff --git a/packages/app/src/components/DBTracePanel.tsx b/packages/app/src/components/DBTracePanel.tsx
index d3cbad969..7b452d65c 100644
--- a/packages/app/src/components/DBTracePanel.tsx
+++ b/packages/app/src/components/DBTracePanel.tsx
@@ -134,7 +134,6 @@ export default function DBTracePanel({
           {traceId != null && (
             <Button
               variant="subtle"
-              color="gray.4"
               size="xs"
               onClick={() => setShowTraceIdInput(v => !v)}
             >
@@ -143,7 +142,7 @@ export default function DBTracePanel({
           )}
         </Flex>
         <Group gap="sm">
-          <Text size="sm" c="gray.4">
+          <Text size="sm">
             {parentSourceData?.kind === SourceKind.Log
               ? 'Trace Source'
               : 'Correlated Log Source'}
@@ -153,9 +152,7 @@ export default function DBTracePanel({
       </Flex>
       {(showTraceIdInput || !traceId) && parentSourceId != null && (
         <Stack gap="xs">
-          <Text c="gray.4" size="xs">
-            Trace ID Expression
-          </Text>
+          <Text size="xs">Trace ID Expression</Text>
           <Flex>
             <SQLInlineEditorControlled
               tableConnection={tcFromSource(parentSourceData)}
@@ -185,7 +182,6 @@ export default function DBTracePanel({
             <Button
               ms="sm"
               variant="outline"
-              color="gray.4"
               onClick={() => setShowTraceIdInput(false)}
               size="xs"
             >
@@ -216,7 +212,6 @@ export default function DBTracePanel({
             </Text>
             <Badge
               size="xs"
-              color="gray.4"
               autoContrast
               radius="sm"
               className="align-text-bottom"
@@ -275,9 +270,7 @@ export default function DBTracePanel({
       {traceSourceData != null && !eventRowWhere && (
         <Paper shadow="xs" p="xl" mt="md">
           <Center mih={100}>
-            <Text size="sm" c="gray.4">
-              Please select a span above to view details.
-            </Text>
+            <Text size="sm">Please select a span above to view details.</Text>
           </Center>
         </Paper>
       )}
diff --git a/packages/app/src/components/ExceptionSubpanel.tsx b/packages/app/src/components/ExceptionSubpanel.tsx
index 72ac4f385..ac1e50dd9 100644
--- a/packages/app/src/components/ExceptionSubpanel.tsx
+++ b/packages/app/src/components/ExceptionSubpanel.tsx
@@ -328,7 +328,7 @@ const LevelChip = React.memo(({ level }: { level?: string }) => {
     ? 'text-danger bg-danger'
     : level.includes('warn') || level.includes('warning')
       ? 'text-warning bg-warning'
-      : 'text-slate-300 bg-grey';
+      : 'text-slate-300 bg-muted';
 
   return (
     <span
diff --git a/packages/app/src/components/NetworkPropertyPanel.tsx b/packages/app/src/components/NetworkPropertyPanel.tsx
index fc20a96b6..87b15da2b 100644
--- a/packages/app/src/components/NetworkPropertyPanel.tsx
+++ b/packages/app/src/components/NetworkPropertyPanel.tsx
@@ -232,7 +232,7 @@ export function NetworkPropertySubpanel({
             });
           }}
         >
-          <Button size="xs" color="gray.4" variant="light">
+          <Button size="xs" variant="light">
             <i className="bi bi-terminal-plus me-2" />
             Copy Request as Curl
           </Button>
diff --git a/packages/app/src/components/NumberFormat.tsx b/packages/app/src/components/NumberFormat.tsx
index 32da916b2..69cf25428 100644
--- a/packages/app/src/components/NumberFormat.tsx
+++ b/packages/app/src/components/NumberFormat.tsx
@@ -115,7 +115,7 @@ export const NumberFormatForm: React.VFC<{
         </div>
 
         <div style={{ marginTop: -6 }}>
-          <Paper p="xs" py={4} bg="dark.8">
+          <Paper p="xs" py={4}>
             <div
               className="text-slate-400"
               style={{
diff --git a/packages/app/src/components/OnboardingModal.tsx b/packages/app/src/components/OnboardingModal.tsx
index fffb33bf5..3f4f1f33a 100644
--- a/packages/app/src/components/OnboardingModal.tsx
+++ b/packages/app/src/components/OnboardingModal.tsx
@@ -366,7 +366,7 @@ export default function OnboardingModal({
             />
           )}
           {!IS_LOCAL_MODE && (
-            <Text size="xs" mt="md" c="gray.4">
+            <Text size="xs" mt="md">
               You can always add and edit connections later.
             </Text>
           )}
@@ -375,7 +375,6 @@ export default function OnboardingModal({
             data-testid="demo-server-button"
             variant="outline"
             w="100%"
-            color="gray.4"
             onClick={handleDemoServerClick}
           >
             Connect to Demo Server
@@ -386,7 +385,6 @@ export default function OnboardingModal({
         <>
           <Button
             variant="subtle"
-            color="gray.4"
             onClick={() => setStep('connection')}
             p="xs"
             mb="md"
@@ -403,7 +401,7 @@ export default function OnboardingModal({
               setStep(undefined);
             }}
           />
-          <Text size="xs" mt="lg" c="gray.4">
+          <Text size="xs" mt="lg">
             You can always add and edit sources later.
           </Text>
         </>
diff --git a/packages/app/src/components/SQLInlineEditor.tsx b/packages/app/src/components/SQLInlineEditor.tsx
index 6962e35ff..2cc999e8c 100644
--- a/packages/app/src/components/SQLInlineEditor.tsx
+++ b/packages/app/src/components/SQLInlineEditor.tsx
@@ -320,7 +320,6 @@ export default function SQLInlineEditor({
     >
       {label != null && (
         <Text
-          c="gray.4"
           mx="4px"
           size="xs"
           fw="bold"
diff --git a/packages/app/src/components/Search/DBSearchHeatmapChart.tsx b/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
index 09d288594..c0806cc84 100644
--- a/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
+++ b/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
@@ -124,7 +124,7 @@ export function DBSearchHeatmapChart({
       ) : (
         <Paper shadow="xs" p="xl" h="100%">
           <Center mih={100} h="100%">
-            <Text size="sm" c="gray.4">
+            <Text size="sm">
               Please highlight an outlier range in the heatmap to view the delta
               chart.
             </Text>
diff --git a/packages/app/src/components/SearchTotalCountChart.tsx b/packages/app/src/components/SearchTotalCountChart.tsx
index e1a02d4bd..b57f579bb 100644
--- a/packages/app/src/components/SearchTotalCountChart.tsx
+++ b/packages/app/src/components/SearchTotalCountChart.tsx
@@ -59,7 +59,7 @@ export default function SearchTotalCountChart({
   );
 
   return (
-    <Text size="xs" c="gray.4" mb={4}>
+    <Text size="xs" mb={4}>
       {isLoading ? (
         <span className="effect-pulse">&middot;&middot;&middot; Results</span>
       ) : totalCount !== null && !isError ? (
diff --git a/packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx b/packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx
index 21f424257..c17f1b31c 100644
--- a/packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx
+++ b/packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx
@@ -95,9 +95,7 @@ export default function ServiceDashboardDbQuerySidePanel({
               <Grid.Col span={6}>
                 <ChartBox style={{ height: 350 }}>
                   <Group justify="space-between" align="center" mb="sm">
-                    <Text size="sm" c="gray.4">
-                      Total Query Time
-                    </Text>
+                    <Text size="sm">Total Query Time</Text>
                   </Group>
                   {source && (
                     <DBTimeChart
@@ -125,9 +123,7 @@ export default function ServiceDashboardDbQuerySidePanel({
               <Grid.Col span={6}>
                 <ChartBox style={{ height: 350 }}>
                   <Group justify="space-between" align="center" mb="sm">
-                    <Text size="sm" c="gray.4">
-                      Query Throughput
-                    </Text>
+                    <Text size="sm">Query Throughput</Text>
                   </Group>
                   {source && (
                     <DBTimeChart
diff --git a/packages/app/src/components/ServiceDashboardEndpointPerformanceChart.tsx b/packages/app/src/components/ServiceDashboardEndpointPerformanceChart.tsx
index 19dcd94dc..5618faa92 100644
--- a/packages/app/src/components/ServiceDashboardEndpointPerformanceChart.tsx
+++ b/packages/app/src/components/ServiceDashboardEndpointPerformanceChart.tsx
@@ -88,9 +88,7 @@ export default function ServiceDashboardEndpointPerformanceChart({
   return (
     <ChartBox style={{ height: 350, overflow: 'auto' }}>
       <Group justify="space-between" align="center" mb="sm">
-        <Text size="sm" c="gray.4">
-          20 Top Most Time Consuming Operations
-        </Text>
+        <Text size="sm">20 Top Most Time Consuming Operations</Text>
       </Group>
       {source && (
         <DBListBarChart
diff --git a/packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx b/packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx
index 9a8e3990a..7834dda41 100644
--- a/packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx
+++ b/packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx
@@ -100,9 +100,7 @@ export default function ServiceDashboardEndpointSidePanel({
               <Grid.Col span={6}>
                 <ChartBox style={{ height: 350 }}>
                   <Group justify="space-between" align="center" mb="sm">
-                    <Text size="sm" c="gray.4">
-                      Request Error Rate
-                    </Text>
+                    <Text size="sm">Request Error Rate</Text>
                   </Group>
                   {source && (
                     <DBTimeChart
@@ -134,9 +132,7 @@ export default function ServiceDashboardEndpointSidePanel({
               <Grid.Col span={6}>
                 <ChartBox style={{ height: 350 }}>
                   <Group justify="space-between" align="center" mb="sm">
-                    <Text size="sm" c="gray.4">
-                      Request Throughput
-                    </Text>
+                    <Text size="sm">Request Throughput</Text>
                   </Group>
                   {source && (
                     <DBTimeChart
diff --git a/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx b/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
index 81fd5f11c..20ae05e46 100644
--- a/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
+++ b/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
@@ -64,9 +64,7 @@ export default function SlowestEventsTile({
   return (
     <ChartBox style={{ height }}>
       <Group justify="space-between" align="center" mb="sm">
-        <Text size="sm" c="gray.4">
-          {title}
-        </Text>
+        <Text size="sm">{title}</Text>
         <Text size="xs" c="dark.2">
           (Slower than {roundedP95}ms)
         </Text>
diff --git a/packages/app/src/components/SourceForm.tsx b/packages/app/src/components/SourceForm.tsx
index 184aca33e..a0a8c6b16 100644
--- a/packages/app/src/components/SourceForm.tsx
+++ b/packages/app/src/components/SourceForm.tsx
@@ -120,7 +120,6 @@ function FormRow({
         )}
       </Stack>
       <Text
-        c="gray.4"
         me="sm"
         style={{
           ...(!helpText ? { opacity: 0, pointerEvents: 'none' } : {}),
@@ -196,7 +195,6 @@ export function LogTableModelForm({ control, watch }: TableModelProps) {
               underline="always"
               onClick={() => setShowOptionalFields(true)}
               size="xs"
-              c="gray.4"
             >
               <Text me="sm" span>
                 <i className="bi bi-gear" />
@@ -209,7 +207,6 @@ export function LogTableModelForm({ control, watch }: TableModelProps) {
               onClick={() => setShowOptionalFields(false)}
               size="xs"
               variant="subtle"
-              color="gray.4"
             >
               Hide Optional Fields
             </Button>
@@ -1126,15 +1123,10 @@ export function TableSourceForm({
     >
       <Stack gap="md" mb="md">
         <Flex justify="space-between" align="center" mb="lg">
-          <Text c="gray.4">Source Settings</Text>
+          <Text>Source Settings</Text>
           <Group>
             {onCancel && (
-              <Button
-                variant="outline"
-                color="gray.4"
-                onClick={onCancel}
-                size="xs"
-              >
+              <Button variant="outline" onClick={onCancel} size="xs">
                 Cancel
               </Button>
             )}
diff --git a/packages/app/src/components/SpanEventsSubpanel.tsx b/packages/app/src/components/SpanEventsSubpanel.tsx
index ff18ee724..f99919069 100644
--- a/packages/app/src/components/SpanEventsSubpanel.tsx
+++ b/packages/app/src/components/SpanEventsSubpanel.tsx
@@ -124,7 +124,6 @@ export const SpanEventsSubpanel = ({
             variant="default"
             size="xs"
             my="sm"
-            c="gray.4"
             onClick={handleToggleMoreRows}
           >
             {isExpanded ? (
diff --git a/packages/app/src/components/Table.module.scss b/packages/app/src/components/Table.module.scss
index 52333e3b0..4d8abc4c6 100644
--- a/packages/app/src/components/Table.module.scss
+++ b/packages/app/src/components/Table.module.scss
@@ -103,7 +103,7 @@ $horizontalPadding: 12px;
 }
 
 .emptyMessage {
-  color: var(--mantine-color-dark-5);
+  color: var(--color-text);
   text-align: center;
   padding: 10px;
 }
@@ -112,19 +112,19 @@ $horizontalPadding: 12px;
   display: flex;
   gap: 4px;
   border-radius: 4px;
-  background-color: var(--mantine-color-dark-9);
-  border: 1px solid var(--mantine-color-dark-9);
-  color: var(--mantine-color-dark-3);
+  background-color: var(--color-bg-field);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
   text-align: center;
   font-size: 11px;
 
   &:hover {
-    background-color: var(--mantine-color-dark-9);
-    border-color: var(--mantine-color-dark-8);
+    background-color: var(--color-bg-field-hover);
+    border-color: var(--color-border);
   }
 
   &:active {
-    background-color: var(--mantine-color-dark-9);
-    border-color: var(--mantine-color-dark-9);
+    background-color: var(--color-bg-surface-hover);
+    border-color: var(--color-border);
   }
 }
diff --git a/packages/app/src/components/TimePicker/TimePicker.tsx b/packages/app/src/components/TimePicker/TimePicker.tsx
index f4a623942..e3f9697ea 100644
--- a/packages/app/src/components/TimePicker/TimePicker.tsx
+++ b/packages/app/src/components/TimePicker/TimePicker.tsx
@@ -235,8 +235,8 @@ export const TimePicker = ({
           styles={{
             input: {
               color: isLiveMode
-                ? 'var(--mantine-color-green-5)'
-                : 'var(--mantine-color-gray-1)',
+                ? 'var(--color-text-success)'
+                : 'var(--color-text)',
             },
           }}
           rightSection={
@@ -445,7 +445,7 @@ export const TimePicker = ({
                 </>
               )}
             </Stack>
-            <Text size="xxs" lh={1.2} c="gray.7">
+            <Text size="xxs" lh={1.2}>
               You can use natural language to select dates (e.g. yesterday, last
               monday at 5pm)
             </Text>
@@ -454,7 +454,7 @@ export const TimePicker = ({
               justify="flex-end"
               mt={8}
               pt={8}
-              style={{ borderTop: '1px solid #282828' }}
+              style={{ borderTop: '1px solid var(--color-border)' }}
             >
               <Button
                 data-testid="time-picker-apply"
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index 40a4fdc1d..6f10f366e 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -31,7 +31,7 @@
 }
 
 .listGroupName {
-  color: var(--mantine-color-dark-4);
+  color: var(--color-text-muted);
   text-transform: uppercase;
   font-size: 11px;
   letter-spacing: 1px;
@@ -45,7 +45,7 @@
   gap: 6px;
 
   &:hover {
-    color: var(--mantine-color-dark-3);
+    color: var(--color-text);
     cursor: pointer;
   }
 }
@@ -54,7 +54,7 @@
   display: flex;
   justify-content: space-between;
   text-decoration: none;
-  color: var(--mantine-color-dark-2);
+  color: var(--color-text-muted);
   font-size: 13px;
   margin-bottom: 4px;
   max-width: 100%;
@@ -66,7 +66,7 @@
   gap: 10px;
 
   &:hover {
-    color: var(--mantine-color-dark-1);
+    color: var(--color-text);
   }
 
   &:focus-visible {
@@ -80,7 +80,7 @@
 }
 
 .listEmptyMsg {
-  color: var(--mantine-color-dark-4);
+  color: var(--color-text-muted);
   font-size: 12px;
   margin: 8px 16px;
   overflow: hidden;
@@ -89,20 +89,20 @@
 
 .listLinkActive {
   // color: $green;
-  color: var(--mantine-color-green-3);
+  color: var(--color-text-success);
   font-weight: 500;
 
   &:hover {
     // color: $green;
-    color: var(--mantine-color-green-3);
+    color: var(--color-text-success);
   }
 }
 
 .kbd {
   white-space: nowrap;
   letter-spacing: -1px;
-  color: var(--mantine-color-dark-4);
-  background: var(--mantine-color-dark-9);
+  color: var(--color-text-muted);
+  background: var(--color-bg-surface);
   border-radius: 4px;
   padding: 0 4px;
   font-size: 10px;
@@ -122,7 +122,7 @@
   cursor: pointer;
 
   &:hover {
-    background: var(--mantine-color-gray-8);
+    background: var(--color-bg-muted);
   }
 
   &:active {
diff --git a/packages/app/styles/LogTable.module.scss b/packages/app/styles/LogTable.module.scss
index a37c90928..8a6134f04 100644
--- a/packages/app/styles/LogTable.module.scss
+++ b/packages/app/styles/LogTable.module.scss
@@ -9,7 +9,7 @@ $button-height: 18px;
 }
 
 .tableHead {
-  background: var(--mantine-color-dark-8);
+  background: var(--color-bg-surface);
   position: sticky;
   top: 0;
   z-index: 1;
@@ -62,19 +62,19 @@ $button-height: 18px;
   min-height: $button-height;
 
   &:hover {
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
   }
 
   &:focus,
   &:focus-visible {
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
     outline: none;
   }
 
   &:active {
     outline: none;
     box-shadow: none;
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
   }
 
   svg {
@@ -119,7 +119,7 @@ $button-height: 18px;
 
   &:focus,
   &:focus-visible {
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
     outline: none;
   }
 
@@ -159,8 +159,8 @@ $button-height: 18px;
 .iconActionButton {
   padding: 4px;
   border-radius: 4px;
-  background-color: var(--mantine-color-dark-4);
-  border: 1px solid var(--mantine-color-dark-3);
+  background-color: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   width: 20px;
   height: 20px;
   display: flex;
@@ -174,7 +174,7 @@ $button-height: 18px;
   }
 
   &.copied {
-    color: var(--mantine-color-green-6);
+    color: var(--color-success);
   }
 }
 
@@ -192,11 +192,7 @@ $button-height: 18px;
 
   > span:hover {
     border-radius: 4px;
-    background-color: color-mix(
-      in srgb,
-      var(--mantine-color-dark-2) 30%,
-      transparent
-    );
+    background-color: var(--color-bg-muted-hover);
   }
 
   &.chart {
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 5e68e3be5..f7e91f02b 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -41,16 +41,19 @@
   --color-bg-body: var(--palette-neutral-base);
   --color-bg-surface: var(--palette-neutral-725);
   --color-bg-muted: var(--palette-neutral-750);
+  --color-bg-muted-hover: var(--palette-neutral-700);
   --color-bg-sidebar: var(--palette-neutral-750);
   --color-bg-header: var(--palette-neutral-900);
   --color-bg-hover: var(--palette-neutral-700);
   --color-bg-active: var(--palette-neutral-600);
   --color-bg-field: var(--palette-color-slate-725);
+  --color-bg-field-hover: var(--palette-color-slate-600);
 
   /* Borders & Dividers */
   --color-border: var(--palette-neutral-712);
 
   /* Text */
+  --color-text: var(--mantine-color-dark-0);
   --color-text-primary: var(--mantine-color-dark-0);
   --color-text-primary-hover: var(--mantine-color-green-3);
   --color-text-secondary: var(--mantine-color-dark-2);
@@ -85,18 +88,20 @@
   --color-bg-body: var(--palette-neutral-0);
   --color-bg-surface: var(--palette-neutral-0);
   --color-bg-muted: var(--palette-slate-50);
+  --color-bg-muted-hover: var(--palette-slate-100);
   --color-bg-sidebar: var(--palette-neutral-0);
   --color-bg-header: var(--mantine-color-dark-1);
   --color-bg-modal: var(--palette-neutral-0);
   --color-bg-hover: var(--mantine-color-dark-3);
   --color-bg-active: var(--mantine-color-dark-4);
   --color-bg-field: var(--palette-color-slate-25);
+  --color-bg-field-hover: var(--palette-slate-50);
 
   /* Borders & Dividers - inverted */
   --color-border: var(--palette-slate-100);
 
   /* Text - inverted */
-  --color-text-default: var(--palette-slate-900);
+  --color-text: var(--palette-slate-900);
   --color-text-primary: var(--mantine-color-green-5);
   --color-text-primary-hover: var(--mantine-color-green-6);
   --color-text-secondary: var(--mantine-color-dark-7);
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
index 37655ef0f..43c2a3eec 100644
--- a/packages/app/styles/_utilities.scss
+++ b/packages/app/styles/_utilities.scss
@@ -14,6 +14,10 @@
   background-color: var(--color-bg-surface);
 }
 
+.bg-muted {
+  background-color: var(--color-bg-muted);
+}
+
 // Border utilities
 .border {
   border: 1px solid var(--color-border) !important;
@@ -65,6 +69,15 @@
   color: var(--color-text-muted) !important;
 }
 
+.text-muted-hover {
+  color: var(--color-text-muted);
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-text-muted-hover);
+  }
+}
+
 .text-light {
   color: var(--color-text) !important;
 }
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index 1c747cf11..8f4fb2dfe 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -39,10 +39,6 @@
   background-color: var(--color-bg-surface);
 }
 
-.bg-grey {
-  background-color: red;
-}
-
 .bg-light-grey {
   background-color: #37414d;
 }
@@ -117,21 +113,6 @@
   color: var(--mantine-color-dark-2);
 }
 
-.text-muted-hover {
-  color: var(--color-text-muted-hover);
-  transition: color 0.2s ease;
-  &:hover {
-    color: #fff;
-  }
-}
-
-.text-muted-hover-black {
-  color: var(--color-text-muted);
-  transition: color 0.2s ease;
-  &:hover {
-    color: black;
-  }
-}
 
 
 // TODO remove
diff --git a/packages/app/styles/variables.scss b/packages/app/styles/variables.scss
index fc70f7f15..f15357a3a 100644
--- a/packages/app/styles/variables.scss
+++ b/packages/app/styles/variables.scss
@@ -12,7 +12,7 @@ $blue: #3788f6;
 $purple: #8f57f3;
 $gray-100: #f8f9fa;
 $bg-dark-grey: #1f2429;
-$bg-grey: #21272e;
+$bg-muted: #21272e;
 $bg-purple: #2e273b;
 $bg-purple-active: #4a4eb5;
 $code-color: #4bb74a;
@@ -42,7 +42,7 @@ $spacers: (
 $navbar-dark-active-color: $green;
 $navbar-dark-color: rgba(#fff, 0.75);
 $navbar-dark-hover-color: rgba(#fff, 1);
-$dropdown-dark-bg: $bg-grey;
+$dropdown-dark-bg: $bg-muted;
 $popover-bg: $bg-purple;
 $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
 

From 36b9e7ad9129799e221c29b13ecf80ed3259401c Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 10 Nov 2025 15:03:45 +0000
Subject: [PATCH 05/49] refactor: Update background colors to use 'bg-muted'
 for consistency across components

---
 packages/app/src/AppNav.components.tsx        |  2 +-
 packages/app/src/AutocompleteInput.tsx        |  4 +-
 packages/app/src/DBChartPage.tsx              |  2 +-
 packages/app/src/DBSearchPage.tsx             |  2 +-
 packages/app/src/DBServiceMapPage.tsx         |  2 +-
 packages/app/src/HDXMultiSeriesTableChart.tsx |  8 +-
 packages/app/src/SessionsPage.tsx             |  2 +-
 packages/app/src/TeamPage.tsx                 |  2 +-
 packages/app/src/ThemeWrapper.tsx             |  2 +-
 packages/app/src/components/DBRowTable.tsx    |  4 +-
 .../src/components/DBTable/TableHeader.tsx    |  2 +-
 packages/app/src/components/EventTag.tsx      |  4 +-
 .../app/src/components/HyperJson.module.scss  | 51 +++++-----
 packages/app/styles/AppNav.module.scss        |  1 +
 packages/app/styles/LogTable.module.scss      |  5 +-
 packages/app/styles/_semantic-colors.scss     | 99 +++++++++----------
 packages/app/styles/_utilities.scss           |  4 -
 packages/app/styles/app.scss                  |  4 +-
 18 files changed, 92 insertions(+), 108 deletions(-)

diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
index 69874cbe3..062169ff2 100644
--- a/packages/app/src/AppNav.components.tsx
+++ b/packages/app/src/AppNav.components.tsx
@@ -33,7 +33,7 @@ export const AppNavContext = React.createContext<{
 
 export const AppNavCloudBanner = () => {
   return (
-    <div className="my-3 bg-hdx-dark rounded p-2 text-center">
+    <div className="my-3 bg-muted rounded p-2 text-center">
       <span className="text-slate-300 fs-8">
         Ready to deploy on ClickHouse Cloud?
       </span>
diff --git a/packages/app/src/AutocompleteInput.tsx b/packages/app/src/AutocompleteInput.tsx
index 2f5dfadc1..943990530 100644
--- a/packages/app/src/AutocompleteInput.tsx
+++ b/packages/app/src/AutocompleteInput.tsx
@@ -275,7 +275,7 @@ export default function AutocompleteInput({
                 .map(({ value, label }, i) => (
                   <div
                     className={`py-2 px-3 ${
-                      selectedAutocompleteIndex === i ? 'bg-hdx-dark' : ''
+                      selectedAutocompleteIndex === i ? 'bg-muted' : ''
                     }`}
                     role="button"
                     key={value}
@@ -307,7 +307,7 @@ export default function AutocompleteInput({
                 return (
                   <UnstyledButton
                     className={`d-block w-100 text-start text-muted fw-normal px-3 py-2 fs-8 ${
-                      selectedQueryHistoryIndex === i ? 'bg-hdx-dark' : ''
+                      selectedQueryHistoryIndex === i ? 'bg-muted' : ''
                     }`}
                     key={value}
                     onMouseOver={() => setSelectedQueryHistoryIndex(i)}
diff --git a/packages/app/src/DBChartPage.tsx b/packages/app/src/DBChartPage.tsx
index af8889155..6e81c5b20 100644
--- a/packages/app/src/DBChartPage.tsx
+++ b/packages/app/src/DBChartPage.tsx
@@ -223,7 +223,7 @@ function DBChartExplorerPage() {
   );
 
   return (
-    <Box data-testid="chart-explorer-page" p="sm" className="bg-hdx-dark">
+    <Box data-testid="chart-explorer-page" p="sm" className="bg-muted">
       <Head>
         <title>Chart Explorer - HyperDX</title>
       </Head>
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 71fa13f6f..8b697ea45 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -1565,7 +1565,7 @@ function DBSearchPage() {
       <Flex
         direction="column"
         style={{ overflow: 'hidden', height: '100%' }}
-        className="bg-hdx-dark"
+        className="bg-muted"
       >
         {!queryReady ? (
           <Paper shadow="xs" p="xl" h="100%">
diff --git a/packages/app/src/DBServiceMapPage.tsx b/packages/app/src/DBServiceMapPage.tsx
index 7b2dec401..cf6b45ef9 100644
--- a/packages/app/src/DBServiceMapPage.tsx
+++ b/packages/app/src/DBServiceMapPage.tsx
@@ -90,7 +90,7 @@ function DBServiceMapPage() {
     <Box
       data-testid="service-map-page"
       p="sm"
-      className="bg-hdx-dark"
+      className="bg-muted"
       style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}
     >
       <Group mb="md" justify="space-between">
diff --git a/packages/app/src/HDXMultiSeriesTableChart.tsx b/packages/app/src/HDXMultiSeriesTableChart.tsx
index 1fb595d8d..ab8f93bdb 100644
--- a/packages/app/src/HDXMultiSeriesTableChart.tsx
+++ b/packages/app/src/HDXMultiSeriesTableChart.tsx
@@ -196,13 +196,9 @@ export const Table = ({
   );
 
   return (
-    <div
-      className="overflow-auto h-100 fs-8 bg-inherit dark:bg-dark"
-      ref={tableContainerRef}
-    >
-      <table className="w-100 bg-inherit" style={{ tableLayout: 'fixed' }}>
+    <div className="overflow-auto h-100 fs-8" ref={tableContainerRef}>
+      <table className="w-100" style={{ tableLayout: 'fixed' }}>
         <thead
-          className="bg-inherit"
           style={{
             background: 'inherit',
             position: 'sticky',
diff --git a/packages/app/src/SessionsPage.tsx b/packages/app/src/SessionsPage.tsx
index 349c8157f..edab3148c 100644
--- a/packages/app/src/SessionsPage.tsx
+++ b/packages/app/src/SessionsPage.tsx
@@ -84,7 +84,7 @@ function SessionCard({
   return (
     <div
       data-testid={`session-card-${sessionId}`}
-      className="bg-hdx-dark rounded p-3 d-flex align-items-center justify-content-between text-white-hover-success-trigger"
+      className="bg-muted rounded p-3 d-flex align-items-center justify-content-between text-white-hover-success-trigger"
       onClick={onClick}
       role="button"
     >
diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
index 39ed951c2..fcecac4bb 100644
--- a/packages/app/src/TeamPage.tsx
+++ b/packages/app/src/TeamPage.tsx
@@ -95,7 +95,7 @@ function ConnectionsSection() {
     <Box id="connections">
       <Text size="md">Connections</Text>
       <Divider my="md" />
-      <Card>
+      <Card variant="muted">
         <Stack mb="md">
           {connections?.map(c => (
             <Box key={c.id}>
diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index 3cfc404ce..f5e8f7a99 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -129,7 +129,7 @@ const makeTheme = ({
         }
         return {
           root: {
-            backgroundColor: 'var(--color-bg-surface)',
+            backgroundColor: 'var(--color-bg-body)',
           },
         };
       },
diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx
index 24f42e30b..64b4582f1 100644
--- a/packages/app/src/components/DBRowTable.tsx
+++ b/packages/app/src/components/DBRowTable.tsx
@@ -720,7 +720,7 @@ export const RawLogTable = memo(
     return (
       <div
         data-testid="search-results-table"
-        className="overflow-auto h-100 fs-8 bg-inherit"
+        className="overflow-auto h-100 fs-8"
         onScroll={e => {
           fetchMoreOnBottomReached(e.target as HTMLDivElement);
 
@@ -740,7 +740,7 @@ export const RawLogTable = memo(
             config={config}
           />
         )}
-        <table className={cx('w-100 bg-inherit', styles.table)} id={tableId}>
+        <table className={cx('w-100', styles.table)} id={tableId}>
           <thead className={styles.tableHead}>
             {table.getHeaderGroups().map(headerGroup => (
               <tr key={headerGroup.id}>
diff --git a/packages/app/src/components/DBTable/TableHeader.tsx b/packages/app/src/components/DBTable/TableHeader.tsx
index 288812f0f..6c9f8cb02 100644
--- a/packages/app/src/components/DBTable/TableHeader.tsx
+++ b/packages/app/src/components/DBTable/TableHeader.tsx
@@ -20,7 +20,7 @@ export default function TableHeader({
 }) {
   return (
     <th
-      className="overflow-hidden bg-hdx-dark"
+      className="overflow-hidden bg-muted"
       key={header.id}
       colSpan={header.colSpan}
       style={{
diff --git a/packages/app/src/components/EventTag.tsx b/packages/app/src/components/EventTag.tsx
index 60a5bf73e..2d9c185dd 100644
--- a/packages/app/src/components/EventTag.tsx
+++ b/packages/app/src/components/EventTag.tsx
@@ -29,7 +29,7 @@ export default function EventTag({
 
   if (!hasActions) {
     return (
-      <div key={name} className="bg-hdx-dark px-2 py-0.5 me-1 my-1">
+      <div key={name} className="bg-muted px-2 py-0.5 me-1 my-1">
         {displayedKey || name}: {value}
       </div>
     );
@@ -46,7 +46,7 @@ export default function EventTag({
       <Popover.Target>
         <div
           key={name}
-          className="text-muted-hover bg-hdx-dark px-2 py-0.5 me-1 my-1 cursor-pointer"
+          className="text-muted-hover bg-muted px-2 py-0.5 me-1 my-1 cursor-pointer"
           onClick={() => setOpened(!opened)}
         >
           {displayedKey || name}: {value}
diff --git a/packages/app/src/components/HyperJson.module.scss b/packages/app/src/components/HyperJson.module.scss
index 799158044..dbbb18ce8 100644
--- a/packages/app/src/components/HyperJson.module.scss
+++ b/packages/app/src/components/HyperJson.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable */
 .container {
   display: flex;
   height: 100%;
@@ -37,7 +38,7 @@
   overflow: hidden;
 
   &:hover {
-    background-color: #26282b;
+    background-color: var(--color-bg-muted);
 
     .lineMenu {
       display: flex;
@@ -47,7 +48,7 @@
   &.expanded {
     .object,
     .array {
-      color: #999;
+      color: var(--color-text-muted);
     }
   }
 
@@ -64,7 +65,7 @@
     }
 
     &:active {
-      background-color: #1e1f21;
+      background-color: var(--color-bg-muted-hover);
     }
   }
 }
@@ -77,24 +78,24 @@
   top: 0;
   height: calc(100% + 1px);
   max-height: 24px;
-  border-bottom: 1px solid #34373e;
+  border-bottom: 1px solid var(color-border);
 }
 
 .lineMenuBtn {
   border: 0;
   background-color: rgb(0 0 0 / 20%);
   backdrop-filter: blur(4px);
-  color: #b8b7c9;
-  border-left: 1px solid #444;
+  color: var(--color-text);
+  border-left: 1px solid var(--color-border);
   padding: 0 8px;
   height: 100%;
 
   &:hover {
-    background-color: #34373e;
+    background-color: var(--color-bg-muted-hover);
   }
 
   &:active {
-    background-color: #1e1f21;
+    background-color: var(--color-bg-muted);
   }
 }
 
@@ -104,7 +105,7 @@
 
 .clickable {
   &:active {
-    background-color: #1e1f21;
+    background-color: var(--color-bg-muted-hover);
   }
 }
 
@@ -119,7 +120,7 @@
 
   &:hover,
   &:focus {
-    background-color: #26282b;
+    background-color: var(--color-bg-muted);
 
     .hoverContent {
       display: flex;
@@ -129,7 +130,7 @@
   .hoverContent {
     position: absolute;
     left: 100%;
-    background-color: #26282b;
+    background-color: var(--color-bg-muted);
     padding-right: 8px;
     padding-left: 4px;
   }
@@ -141,21 +142,21 @@
 
 .jsonBtn {
   display: block;
-  color: #b8b7c9;
+  color: var(--color-text-secondary);
   cursor: pointer;
-  background-color: #26282b;
+  background-color: var(--color-bg-muted);
   font-size: 11px;
-  border: 1px solid #444;
+  border: 1px solid var(--color-border);
   border-radius: 3px;
   padding: 0 6px;
   margin-bottom: 2px;
 
   &:hover {
-    background-color: #444;
+    background-color: var(--color-border);
   }
 
   &:active {
-    background-color: #1e1f21;
+    background-color: var(--color-bg-muted-hover);
   }
 }
 
@@ -169,7 +170,7 @@
 .key {
   align-items: center;
   width: auto;
-  color: #8378ff;
+  color: var(--color-json-key);
   cursor: pointer;
   display: flex;
   gap: 6px;
@@ -178,7 +179,7 @@
   // @extend .clickable;
 
   i {
-    color: #555;
+    color: var(--color-json-punctuation);
     margin-right: -4px;
   }
 }
@@ -203,37 +204,37 @@
 }
 
 .string {
-  color: #a6e22e;
+  color: var(--color-json-string);
   word-break: break-all;
 
   // margin-left: -6px;margin-left
   &::before,
   &::after {
     content: '"';
-    color: #888;
+    color: var(--color-json-punctuation);
   }
 }
 
 .number {
-  color: #f90;
+  color: var(--color-json-number);
 }
 
 .boolean {
-  color: #f90;
+  color: var(--color-json-boolean);
 }
 
 .object {
-  color: #a6e22e;
+  color: var(--color-json-object);
   font-size: 11px;
 }
 
 .array {
-  color: #a6e22e;
+  color: var(--color-json-array);
   font-size: 11px;
 }
 
 .expandMoreProps {
-  color: #f90;
+  color: var(--color-json-number);
   font-weight: 500;
 
   i {
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index 6f10f366e..b52a081d8 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -8,6 +8,7 @@
   flex-flow: column nowrap;
   justify-content: space-between;
   border-right: 1px solid var(--color-border);
+  background: var(--color-bg-sidebar);
 }
 
 .list {
diff --git a/packages/app/styles/LogTable.module.scss b/packages/app/styles/LogTable.module.scss
index 8a6134f04..f3c25845d 100644
--- a/packages/app/styles/LogTable.module.scss
+++ b/packages/app/styles/LogTable.module.scss
@@ -6,10 +6,11 @@ $button-height: 18px;
   table-layout: fixed;
   border-spacing: 0;
   border-collapse: separate;
+  background: var(--color-bg-body);
 }
 
 .tableHead {
-  background: var(--color-bg-surface);
+  background: var(--color-bg-body);
   position: sticky;
   top: 0;
   z-index: 1;
@@ -126,7 +127,7 @@ $button-height: 18px;
   &:active {
     outline: none;
     box-shadow: none;
-    background-color: var(--color-bg-surface);
+    background-color: var(--color-bg-muted);
   }
 
   &.isWrapped {
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index f7e91f02b..5ffcb5dc3 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -4,53 +4,24 @@
   --color-success: var(--mantine-color-green-5);
   --color-warning: var(--mantine-color-yellow-5);
   --color-error: var(--mantine-color-red-5);
-
-  /* click-ui neutral and slate palettes */
-  --palette-neutral-base: #212121;
-  --palette-neutral-900: #151515;
-  --palette-neutral-800: #1d1d1d;
-  --palette-neutral-750: #1f1f1c;
-  --palette-neutral-725: #282828;
-  --palette-neutral-712: #323232;
-  --palette-neutral-700: #414141;
-  --palette-neutral-600: #606060;
-  --palette-neutral-500: #808080;
-  --palette-neutral-400: #a0a0a0;
-  --palette-neutral-300: #c0c0c0;
-  --palette-neutral-200: #dfdfdf;
-  --palette-neutral-100: #f9f9f9;
-  --palette-neutral-0: #fff;
-  --palette-brand-base: #fbff46;
-  --palette-slate-base: #373439;
-  --palette-slate-900: #161517;
-  --palette-slate-800: #302e32;
-  --palette-slate-700: #53575f;
-  --palette-slate-600: #696e79;
-  --palette-slate-500: #808691;
-  --palette-slate-400: #9a9ea7;
-  --palette-slate-300: #b3b6bd;
-  --palette-slate-200: #cccfd3;
-  --palette-slate-100: #e6e7e9;
-  --palette-slate-50: #f6f7fa;
-  --palette-slate-25: #fbfcff;
 }
 
 /* Dark Mode (default) */
 [data-mantine-color-scheme='dark'] {
   /* Backgrounds */
-  --color-bg-body: var(--palette-neutral-base);
-  --color-bg-surface: var(--palette-neutral-725);
-  --color-bg-muted: var(--palette-neutral-750);
-  --color-bg-muted-hover: var(--palette-neutral-700);
-  --color-bg-sidebar: var(--palette-neutral-750);
-  --color-bg-header: var(--palette-neutral-900);
-  --color-bg-hover: var(--palette-neutral-700);
-  --color-bg-active: var(--palette-neutral-600);
-  --color-bg-field: var(--palette-color-slate-725);
-  --color-bg-field-hover: var(--palette-color-slate-600);
+  --color-bg-body: var(--mantine-color-dark-9);
+  --color-bg-surface: var(--mantine-color-dark-7);
+  --color-bg-muted: var(--mantine-color-dark-8);
+  --color-bg-muted-hover: var(--mantine-color-dark-7);
+  --color-bg-sidebar: var(--mantine-color-dark-9);
+  --color-bg-header: var(--mantine-color-dark-9);
+  --color-bg-hover: var(--mantine-color-dark-7);
+  --color-bg-active: var(--mantine-color-dark-6);
+  --color-bg-field: var(--mantine-color-dark-6);
+  --color-bg-field-hover: var(--mantine-color-dark-6);
 
   /* Borders & Dividers */
-  --color-border: var(--palette-neutral-712);
+  --color-border: var(--mantine-color-dark-6);
 
   /* Text */
   --color-text: var(--mantine-color-dark-0);
@@ -80,33 +51,42 @@
   --color-bg-code: var(--mantine-color-dark-8);
   --color-border-code: var(--mantine-color-dark-6);
   --color-bg-kbd: var(--mantine-color-dark-9);
+
+  /* JSON Syntax Highlighting */
+  --color-json-string: var(--mantine-color-green-4);
+  --color-json-number: var(--mantine-color-orange-4);
+  --color-json-boolean: var(--mantine-color-orange-4);
+  --color-json-key: var(--mantine-color-violet-4);
+  --color-json-object: var(--mantine-color-green-4);
+  --color-json-array: var(--mantine-color-green-4);
+  --color-json-punctuation: var(--mantine-color-dark-4);
 }
 
 /* Light Mode */
 [data-mantine-color-scheme='light'] {
   /* Backgrounds - inverted (dark becomes light) */
-  --color-bg-body: var(--palette-neutral-0);
-  --color-bg-surface: var(--palette-neutral-0);
-  --color-bg-muted: var(--palette-slate-50);
-  --color-bg-muted-hover: var(--palette-slate-100);
-  --color-bg-sidebar: var(--palette-neutral-0);
-  --color-bg-header: var(--mantine-color-dark-1);
-  --color-bg-modal: var(--palette-neutral-0);
-  --color-bg-hover: var(--mantine-color-dark-3);
-  --color-bg-active: var(--mantine-color-dark-4);
-  --color-bg-field: var(--palette-color-slate-25);
-  --color-bg-field-hover: var(--palette-slate-50);
+  --color-bg-body: var(--mantine-color-white);
+  --color-bg-surface: var(--mantine-color-gray-1);
+  --color-bg-muted: #f6f6fa;
+  --color-bg-muted-hover: #e6e8ed;
+  --color-bg-sidebar: var(--mantine-color-white);
+  --color-bg-header: var(--mantine-color-gray-1);
+  --color-bg-modal: var(--mantine-color-white);
+  --color-bg-hover: var(--mantine-color-gray-3);
+  --color-bg-active: var(--mantine-color-gray-4);
+  --color-bg-field: var(--mantine-color-white);
+  --color-bg-field-hover: var(--mantine-color-gray-1);
 
   /* Borders & Dividers - inverted */
-  --color-border: var(--palette-slate-100);
+  --color-border: var(--mantine-color-gray-1);
 
   /* Text - inverted */
-  --color-text: var(--palette-slate-900);
+  --color-text: var(--mantine-color-dark-9);
   --color-text-primary: var(--mantine-color-green-5);
   --color-text-primary-hover: var(--mantine-color-green-6);
   --color-text-secondary: var(--mantine-color-dark-7);
-  --color-text-muted: var(--palette-slate-600);
-  --color-text-muted-hover: var(--palette-slate-900);
+  --color-text-muted: var(--mantine-color-dark-6);
+  --color-text-muted-hover: var(--mantine-color-dark-9);
   --color-text-inverse: var(--mantine-color-dark-0);
   --color-text-success: var(--mantine-color-green-8);
   --color-text-success-hover: var(--mantine-color-green-9);
@@ -128,4 +108,13 @@
   --color-bg-code: var(--mantine-color-dark-1);
   --color-border-code: var(--mantine-color-dark-3);
   --color-bg-kbd: var(--mantine-color-dark-0);
+
+  /* JSON Syntax Highlighting */
+  --color-json-string: var(--mantine-color-green-7);
+  --color-json-number: var(--mantine-color-orange-7);
+  --color-json-boolean: var(--mantine-color-orange-7);
+  --color-json-key: var(--mantine-color-violet-7);
+  --color-json-object: var(--mantine-color-green-7);
+  --color-json-array: var(--mantine-color-green-7);
+  --color-json-punctuation: var(--mantine-color-dark-5);
 }
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
index 43c2a3eec..0359f0457 100644
--- a/packages/app/styles/_utilities.scss
+++ b/packages/app/styles/_utilities.scss
@@ -10,10 +10,6 @@
   background-color: var(--color-bg-body) !important;
 }
 
-.bg-hdx-dark {
-  background-color: var(--color-bg-surface);
-}
-
 .bg-muted {
   background-color: var(--color-bg-muted);
 }
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index 8f4fb2dfe..960c01003 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -35,8 +35,8 @@
 .bg-surface {
   background-color: var(--color-bg-surface) !important;
 }
-.bg-hdx-dark {
-  background-color: var(--color-bg-surface);
+.bg-muted {
+  background-color: var(--color-bg-muted);
 }
 
 .bg-light-grey {

From 31cf822938b1dae2a3575a300fd68f0a150a2597 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 10 Nov 2025 16:31:39 +0000
Subject: [PATCH 06/49] refactor: Update color variables for consistency and
 remove unused background classes

---
 packages/app/src/AutocompleteInput.tsx        |  2 +-
 packages/app/src/OnboardingChecklist.tsx      |  1 -
 .../src/components/DBSearchPageFilters.tsx    |  6 ++++-
 packages/app/styles/AppNav.module.scss        |  6 -----
 packages/app/styles/SearchPage.module.scss    | 25 +++++++++---------
 packages/app/styles/_semantic-colors.scss     | 26 ++++++++++++-------
 packages/app/styles/app.scss                  | 10 -------
 7 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/packages/app/src/AutocompleteInput.tsx b/packages/app/src/AutocompleteInput.tsx
index 943990530..edec949a9 100644
--- a/packages/app/src/AutocompleteInput.tsx
+++ b/packages/app/src/AutocompleteInput.tsx
@@ -255,7 +255,7 @@ export default function AutocompleteInput({
           }
         />
       </Popover.Target>
-      <Popover.Dropdown className="bg-surface border rounded p-0">
+      <Popover.Dropdown className="p-0">
         {aboveSuggestions != null && (
           <div className="d-flex p-2 flex-wrap px-3">{aboveSuggestions}</div>
         )}
diff --git a/packages/app/src/OnboardingChecklist.tsx b/packages/app/src/OnboardingChecklist.tsx
index ee56fec02..005efc68f 100644
--- a/packages/app/src/OnboardingChecklist.tsx
+++ b/packages/app/src/OnboardingChecklist.tsx
@@ -219,7 +219,6 @@ const OnboardingChecklist = ({
                   <Text
                     size="sm"
                     fw="500"
-                    c={step.isComplete ? 'gray.5' : 'gray.3'}
                     style={{
                       textDecoration: step.isComplete ? 'line-through' : 'none',
                       opacity: step.isComplete ? 0.8 : 1,
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 1e90b90af..9cbc225ae 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -181,7 +181,11 @@ export const FilterCheckbox = ({
           >
             <Text
               size="xs"
-              c={value === 'excluded' ? 'red.4' : 'gray.3'}
+              c={
+                value === 'excluded'
+                  ? 'var(--color-text-danger)'
+                  : 'var(--color-text)'
+              }
               truncate="end"
               flex={1}
               title={label}
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index b52a081d8..413e75b26 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -57,12 +57,10 @@
   text-decoration: none;
   color: var(--color-text-muted);
   font-size: 13px;
-  margin-bottom: 4px;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-left: 16px;
   user-select: none;
   gap: 10px;
 
@@ -74,10 +72,6 @@
     outline: none;
     border-left: 2px solid $green;
   }
-
-  &:last-of-type {
-    margin-bottom: 12px;
-  }
 }
 
 .listEmptyMsg {
diff --git a/packages/app/styles/SearchPage.module.scss b/packages/app/styles/SearchPage.module.scss
index 562920b4f..8bac46b10 100644
--- a/packages/app/styles/SearchPage.module.scss
+++ b/packages/app/styles/SearchPage.module.scss
@@ -26,11 +26,11 @@
       min-height: 20px;
       background-color: transparent;
       border: none !important;
-      color: var(--mantine-color-gray-3);
+      color: var(--color-text-secondary);
       font-size: var(--mantine-font-size-xs);
 
       &::placeholder {
-        color: var(--mantine-color-gray-6);
+        color: var(--color-text-muted);
         font-weight: bold;
       }
 
@@ -48,11 +48,11 @@
 
   &:hover {
     cursor: pointer;
-    color: var(--mantine-color-dark-3) !important;
+    color: var(--color-text-muted) !important;
   }
 
   &:active {
-    color: var(--mantine-color-dark-5) !important;
+    color: var(--color-text-muted) !important;
   }
 }
 
@@ -83,20 +83,20 @@
     align-items: center;
     padding: 0 4px;
     gap: 4px;
-    background-color: var(--mantine-color-dark-9);
+    background-color: var(--color-bg-body);
 
     .textButton {
       padding: 2px 4px;
       border-radius: 3px;
 
       &:hover {
-        background-color: var(--mantine-color-dark-8);
-        color: var(--mantine-color-dark-2);
+        background-color: var(--color-bg-muted);
+        color: var(--color-text-secondary);
       }
 
       &:active {
-        background-color: var(--mantine-color-dark-7);
-        color: var(--mantine-color-dark-1);
+        background-color: var(--color-bg-muted);
+        color: var(--color-text);
       }
     }
   }
@@ -106,8 +106,7 @@
       opacity: 1;
     }
 
-    /* TODO COLOR BG */
-    background-color: var(--mantine-color-dark-1);
+    background-color: var(--color-bg-surface);
 
     .filterActions {
       display: flex;
@@ -138,12 +137,12 @@
 
 @keyframes highlight {
   0% {
-    background-color: var(--mantine-color-dark-9);
+    background-color: var(--color-bg-body);
     transform: scale(1.02);
   }
 
   50% {
-    background-color: var(--mantine-color-dark-9);
+    background-color: var(--color-bg-body);
     transform: scale(1.01);
   }
 
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 5ffcb5dc3..25aa17592 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -9,16 +9,16 @@
 /* Dark Mode (default) */
 [data-mantine-color-scheme='dark'] {
   /* Backgrounds */
-  --color-bg-body: var(--mantine-color-dark-9);
-  --color-bg-surface: var(--mantine-color-dark-7);
-  --color-bg-muted: var(--mantine-color-dark-8);
-  --color-bg-muted-hover: var(--mantine-color-dark-7);
-  --color-bg-sidebar: var(--mantine-color-dark-9);
-  --color-bg-header: var(--mantine-color-dark-9);
-  --color-bg-hover: var(--mantine-color-dark-7);
-  --color-bg-active: var(--mantine-color-dark-6);
+  --color-bg-body: var(--mantine-color-dark-7);
+  --color-bg-surface: var(--mantine-color-dark-6);
+  --color-bg-muted: var(--mantine-color-dark-7);
+  --color-bg-muted-hover: var(--mantine-color-dark-6);
+  --color-bg-sidebar: var(--mantine-color-dark-7);
+  --color-bg-header: var(--mantine-color-dark-7);
+  --color-bg-hover: var(--mantine-color-dark-6);
+  --color-bg-active: var(--mantine-color-dark-5);
   --color-bg-field: var(--mantine-color-dark-6);
-  --color-bg-field-hover: var(--mantine-color-dark-6);
+  --color-bg-field-hover: var(--mantine-color-dark-5);
 
   /* Borders & Dividers */
   --color-border: var(--mantine-color-dark-6);
@@ -33,6 +33,7 @@
   --color-text-inverse: var(--mantine-color-dark-9);
   --color-text-success: var(--mantine-color-dark-0);
   --color-text-success-hover: var(--mantine-color-green-3);
+  --color-text-danger: var(--mantine-color-red-4);
 
   /* Icons */
   --color-icon-primary: var(--mantine-color-dark-1);
@@ -60,10 +61,16 @@
   --color-json-object: var(--mantine-color-green-4);
   --color-json-array: var(--mantine-color-green-4);
   --color-json-punctuation: var(--mantine-color-dark-4);
+
+  /* Mantine Overrides */
+  --mantine-color-body: var(--color-bg-body) !important;
 }
 
 /* Light Mode */
 [data-mantine-color-scheme='light'] {
+  /* Mantine Overrides */
+  --mantine-color-body: var(--color-bg-body);
+
   /* Backgrounds - inverted (dark becomes light) */
   --color-bg-body: var(--mantine-color-white);
   --color-bg-surface: var(--mantine-color-gray-1);
@@ -90,6 +97,7 @@
   --color-text-inverse: var(--mantine-color-dark-0);
   --color-text-success: var(--mantine-color-green-8);
   --color-text-success-hover: var(--mantine-color-green-9);
+  --color-text-danger: var(--mantine-color-red-7);
 
   /* Icons - inverted */
   --color-icon-primary: var(--mantine-color-dark-8);
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index 960c01003..02770e155 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -29,16 +29,6 @@
 }
 
 
-.bg-body {
-  background-color: var(--color-bg-body) !important;
-}
-.bg-surface {
-  background-color: var(--color-bg-surface) !important;
-}
-.bg-muted {
-  background-color: var(--color-bg-muted);
-}
-
 .bg-light-grey {
   background-color: #37414d;
 }

From 8bce06b4ce790d14a354c2ce4ad1dd368993cb04 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 10 Nov 2025 19:55:43 +0000
Subject: [PATCH 07/49] refactor: Update AppNavLink icon handling and improve
 styling consistency

---
 packages/app/src/AppNav.components.tsx    |  6 ++--
 packages/app/src/AppNav.tsx               | 43 +++++++++++++++--------
 packages/app/src/AutocompleteInput.tsx    |  2 +-
 packages/app/src/DBChartPage.tsx          |  2 +-
 packages/app/src/Logo.tsx                 | 11 ++----
 packages/app/src/SearchInputV2.tsx        | 12 +++----
 packages/app/src/ThemeWrapper.tsx         | 21 +++++++++++
 packages/app/styles/AppNav.module.scss    | 17 ++++++---
 packages/app/styles/_semantic-colors.scss | 15 ++++----
 packages/app/styles/_utilities.scss       |  4 +++
 10 files changed, 86 insertions(+), 47 deletions(-)

diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
index 062169ff2..21b998f23 100644
--- a/packages/app/src/AppNav.components.tsx
+++ b/packages/app/src/AppNav.components.tsx
@@ -295,7 +295,7 @@ export const AppNavHelpMenu = ({
 export const AppNavLink = ({
   className,
   label,
-  iconName,
+  icon,
   href,
   isExpanded,
   onToggle,
@@ -303,7 +303,7 @@ export const AppNavLink = ({
 }: {
   className?: string;
   label: React.ReactNode;
-  iconName: string;
+  icon: React.ReactNode;
   href: string;
   isExpanded?: boolean;
   onToggle?: () => void;
@@ -326,7 +326,7 @@ export const AppNavLink = ({
         )}
       >
         <span>
-          <i className={`bi ${iconName} pe-2 text-slate-300`} />{' '}
+          <span className={styles.linkIcon}>{icon}</span>
           {!isCollapsed && (
             <span>
               {label}
diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index bc9175ab4..b84da4ee5 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -13,6 +13,7 @@ import {
 import HyperDX from '@hyperdx/browser';
 import { AlertState } from '@hyperdx/common-utils/dist/types';
 import {
+  ActionIcon,
   Badge,
   Box,
   Button,
@@ -24,6 +25,16 @@ import {
   ScrollArea,
 } from '@mantine/core';
 import { useDisclosure, useLocalStorage } from '@mantine/hooks';
+import {
+  IconBell,
+  IconChartLine,
+  IconDeviceLaptop,
+  IconFileText,
+  IconLayoutGrid,
+  IconLayoutSidebarLeftCollapse,
+  IconSettings,
+  IconSitemap,
+} from '@tabler/icons-react';
 
 import {
   useCreateDashboard,
@@ -615,18 +626,16 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                 </Group>
               )}
             </Link>
-            <Button
-              variant="subtle"
-              p={isCollapsed ? '0px' : '8px'}
-              h="32px"
-              size="md"
+            <ActionIcon
+              variant="transparent"
+              size="sm"
               className={isCollapsed ? 'mt-4' : ''}
-              style={{ marginRight: -4 }}
+              style={{ marginRight: -4, marginLeft: -4 }}
               title="Collapse/Expand Navigation"
               onClick={() => setIsPreferCollapsed((v: boolean) => !v)}
             >
-              <i className="bi bi-layout-sidebar"></i>
-            </Button>
+              <IconLayoutSidebarLeftCollapse size={16} />
+            </ActionIcon>
           </div>
         </div>
         <ScrollArea
@@ -644,7 +653,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
             <div className="mt-2">
               <AppNavLink
                 label="Search"
-                iconName="bi-layout-text-sidebar-reverse"
+                icon={<IconFileText size={16} />}
                 href="/search"
                 className={cx({
                   'text-success fw-600':
@@ -710,28 +719,32 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
               <AppNavLink
                 label="Chart Explorer"
                 href="/chart"
-                iconName="bi-graph-up"
+                icon={<IconChartLine size={16} />}
               />
               {!IS_LOCAL_MODE && (
-                <AppNavLink label="Alerts" href="/alerts" iconName="bi-bell" />
+                <AppNavLink
+                  label="Alerts"
+                  href="/alerts"
+                  icon={<IconBell size={16} />}
+                />
               )}
               <AppNavLink
                 label="Client Sessions"
                 href="/sessions"
-                iconName="bi-laptop"
+                icon={<IconDeviceLaptop size={16} />}
               />
 
               <AppNavLink
                 label="Service Map"
                 href="/service-map"
-                iconName="bi-diagram-2-fill"
+                icon={<IconSitemap size={16} />}
                 isBeta
               />
 
               <AppNavLink
                 label="Dashboards"
                 href="/dashboards"
-                iconName="bi-grid-1x2"
+                icon={<IconLayoutGrid size={16} />}
                 isExpanded={isDashboardsExpanded}
                 onToggle={() => setIsDashboardExpanded(!isDashboardsExpanded)}
               />
@@ -836,7 +849,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                   <AppNavLink
                     label="Team Settings"
                     href="/team"
-                    iconName="bi-gear"
+                    icon={<IconSettings size={16} />}
                   />
                 </Box>
               )}
diff --git a/packages/app/src/AutocompleteInput.tsx b/packages/app/src/AutocompleteInput.tsx
index edec949a9..ec3e64ba5 100644
--- a/packages/app/src/AutocompleteInput.tsx
+++ b/packages/app/src/AutocompleteInput.tsx
@@ -293,7 +293,7 @@ export default function AutocompleteInput({
           )}
         </div>
         {belowSuggestions != null && (
-          <div className="border-top border-dark bg-body px-3 pt-2 pb-1 mt-2 fs-8 d-flex align-items-center text-muted flex-wrap">
+          <div className="border-top px-3 pt-2 pb-1 mt-2 fs-8 d-flex align-items-center text-muted flex-wrap">
             {belowSuggestions}
           </div>
         )}
diff --git a/packages/app/src/DBChartPage.tsx b/packages/app/src/DBChartPage.tsx
index 6e81c5b20..cca93b43c 100644
--- a/packages/app/src/DBChartPage.tsx
+++ b/packages/app/src/DBChartPage.tsx
@@ -223,7 +223,7 @@ function DBChartExplorerPage() {
   );
 
   return (
-    <Box data-testid="chart-explorer-page" p="sm" className="bg-muted">
+    <Box data-testid="chart-explorer-page" p="sm">
       <Head>
         <title>Chart Explorer - HyperDX</title>
       </Head>
diff --git a/packages/app/src/Logo.tsx b/packages/app/src/Logo.tsx
index fe2db80cc..0fc44cfe7 100644
--- a/packages/app/src/Logo.tsx
+++ b/packages/app/src/Logo.tsx
@@ -11,31 +11,24 @@ export default function Logo({
     sm: {
       fontSize: 14,
       iconSize: 14,
-      iconMarginBottom: 3,
     },
     md: {
       fontSize: 16,
       iconSize: 16,
-      iconMarginBottom: 3,
     },
     lg: {
       fontSize: 18,
       iconSize: 18,
-      iconMarginBottom: 3,
     },
     xl: {
       fontSize: 22,
       iconSize: 22,
-      iconMarginBottom: 3,
     },
   };
 
   return (
-    <div className="align-items-center d-flex">
-      <div
-        className="me-2"
-        style={{ marginBottom: configs[size].iconMarginBottom }}
-      >
+    <div className="align-items-center d-flex gap-2">
+      <div className="d-flex align-items-center justify-content-center">
         <Icon size={configs[size].iconSize} />
       </div>
 
diff --git a/packages/app/src/SearchInputV2.tsx b/packages/app/src/SearchInputV2.tsx
index e338c25d7..7428d015e 100644
--- a/packages/app/src/SearchInputV2.tsx
+++ b/packages/app/src/SearchInputV2.tsx
@@ -118,7 +118,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Full Text:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-muted-hover p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -133,7 +133,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Substring:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-muted-hover p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -148,7 +148,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Exact:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-muted-hover p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -163,7 +163,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Not:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-muted-hover p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -178,7 +178,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Existence:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-muted-hover p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -193,7 +193,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Boolean:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-muted-hover p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index f5e8f7a99..064f19943 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -113,6 +113,7 @@ const makeTheme = ({
     Input: {
       styles: {
         input: {
+          backgroundColor: 'var(--color-bg-field)',
           border: '1px solid var(--color-border)',
         },
       },
@@ -138,6 +139,26 @@ const makeTheme = ({
       styles: {
         root: {
           borderColor: 'var(--color-border)',
+          borderTopColor: 'var(--color-border)',
+          '--divider-color': 'var(--color-border)',
+          '--item-border-color': 'var(--color-border)',
+        },
+      },
+    },
+    Accordion: {
+      styles: {
+        control: {
+          '--item-border-color': 'var(--color-border)',
+        },
+        item: {
+          borderColor: 'var(--color-border)',
+        },
+      },
+    },
+    UnstyledButton: {
+      styles: {
+        root: {
+          '--item-border-color': 'var(--color-border)',
         },
       },
     },
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index 413e75b26..2ed245632 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -74,6 +74,18 @@
   }
 }
 
+.linkIcon {
+  margin-right: 8px;
+  display: inline-flex;
+  vertical-align: middle;
+  transition: all 0.2s ease-in-out;
+
+   &:hover {
+    // color: $green;
+    color: var(--color-text-success);
+  }
+}
+
 .listEmptyMsg {
   color: var(--color-text-muted);
   font-size: 12px;
@@ -87,10 +99,7 @@
   color: var(--color-text-success);
   font-weight: 500;
 
-  &:hover {
-    // color: $green;
-    color: var(--color-text-success);
-  }
+ 
 }
 
 .kbd {
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 25aa17592..7e138de49 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -12,7 +12,7 @@
   --color-bg-body: var(--mantine-color-dark-7);
   --color-bg-surface: var(--mantine-color-dark-6);
   --color-bg-muted: var(--mantine-color-dark-7);
-  --color-bg-muted-hover: var(--mantine-color-dark-6);
+  --color-bg-muted-hover: var(--mantine-color-dark-5);
   --color-bg-sidebar: var(--mantine-color-dark-7);
   --color-bg-header: var(--mantine-color-dark-7);
   --color-bg-hover: var(--mantine-color-dark-6);
@@ -21,14 +21,14 @@
   --color-bg-field-hover: var(--mantine-color-dark-5);
 
   /* Borders & Dividers */
-  --color-border: var(--mantine-color-dark-6);
+  --color-border: var(--mantine-color-dark-5);
 
   /* Text */
   --color-text: var(--mantine-color-dark-0);
   --color-text-primary: var(--mantine-color-dark-0);
   --color-text-primary-hover: var(--mantine-color-green-3);
   --color-text-secondary: var(--mantine-color-dark-2);
-  --color-text-muted: var(--mantine-color-dark-3);
+  --color-text-muted: var(--mantine-color-dark-2);
   --color-text-muted-hover: var(--mantine-color-dark-1);
   --color-text-inverse: var(--mantine-color-dark-9);
   --color-text-success: var(--mantine-color-dark-0);
@@ -81,22 +81,21 @@
   --color-bg-modal: var(--mantine-color-white);
   --color-bg-hover: var(--mantine-color-gray-3);
   --color-bg-active: var(--mantine-color-gray-4);
-  --color-bg-field: var(--mantine-color-white);
+  --color-bg-field: var(--color-bg-muted);
   --color-bg-field-hover: var(--mantine-color-gray-1);
 
   /* Borders & Dividers - inverted */
-  --color-border: var(--mantine-color-gray-1);
+  --color-border: var(--mantine-color-gray-2);
 
   /* Text - inverted */
   --color-text: var(--mantine-color-dark-9);
   --color-text-primary: var(--mantine-color-green-5);
   --color-text-primary-hover: var(--mantine-color-green-6);
-  --color-text-secondary: var(--mantine-color-dark-7);
+  --color-text-secondary: var(--mantine-color-gray-5);
   --color-text-muted: var(--mantine-color-dark-6);
   --color-text-muted-hover: var(--mantine-color-dark-9);
   --color-text-inverse: var(--mantine-color-dark-0);
-  --color-text-success: var(--mantine-color-green-8);
-  --color-text-success-hover: var(--mantine-color-green-9);
+  --color-text-success: var(--mantine-color-green-9);
   --color-text-danger: var(--mantine-color-red-7);
 
   /* Icons - inverted */
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
index 0359f0457..2c13e47a9 100644
--- a/packages/app/styles/_utilities.scss
+++ b/packages/app/styles/_utilities.scss
@@ -14,6 +14,10 @@
   background-color: var(--color-bg-muted);
 }
 
+.bg-muted-hover {
+  background-color: var(--color-bg-muted-hover);
+}
+
 // Border utilities
 .border {
   border: 1px solid var(--color-border) !important;

From 0a3507ca8a33319da3d0537043f9d1da2638d801 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 10 Nov 2025 21:27:41 +0000
Subject: [PATCH 08/49] Refactor components to remove color props and replace
 with new color variables; update styles for consistency across the
 application; enhance accessibility by adjusting text properties; modify
 button variants for improved UI/UX; streamline form elements and layout for
 better responsiveness; clean up unused imports and redundant code; ensure
 uniformity in text sizes and colors throughout the application.

---
 packages/app/src/AppNav.components.tsx        |   2 +-
 packages/app/src/AppNav.tsx                   |   1 -
 packages/app/src/BenchmarkPage.tsx            |   4 +-
 packages/app/src/DBChartPage.tsx              |   2 +-
 packages/app/src/DBDashboardImportPage.tsx    |   6 +-
 packages/app/src/DBDashboardPage.tsx          |   2 +-
 packages/app/src/DBSearchPage.tsx             |  16 +-
 packages/app/src/DBSearchPageAlertModal.tsx   |   6 +-
 packages/app/src/DashboardFiltersModal.tsx    |   6 +-
 packages/app/src/JoinTeamPage.tsx             |  31 ++--
 packages/app/src/LandingHeader.tsx            | 156 +++++++++++++-----
 packages/app/src/LogSidePanelElements.tsx     |   9 +-
 packages/app/src/Logo.tsx                     |  14 +-
 packages/app/src/OnboardingChecklist.tsx      |  16 +-
 packages/app/src/PlaybarSlider.tsx            |   6 +-
 packages/app/src/TeamPage.tsx                 |   2 +-
 packages/app/src/UserPreferencesModal.tsx     |   4 +-
 .../app/src/components/ColorSwatchInput.tsx   |   8 +-
 .../app/src/components/ContextSidePanel.tsx   |   2 -
 .../src/components/DBEditTimeChartForm.tsx    |   1 -
 .../app/src/components/DBRowOverviewPanel.tsx |  12 +-
 .../src/components/DBRowSidePanelHeader.tsx   |   2 +-
 .../src/components/DBSearchPageFilters.tsx    |  12 +-
 packages/app/src/components/DBTracePanel.tsx  |   6 +-
 .../src/components/DBTraceWaterfallChart.tsx  |   3 +-
 .../src/components/InputLanguageSwitch.tsx    |   4 +-
 .../app/src/components/KubeComponents.tsx     |   4 +-
 .../ServiceDashboardSlowestEventsTile.tsx     |   4 +-
 packages/app/src/components/SourceForm.tsx    |   2 +-
 packages/app/styles/AlertsPage.module.scss    |  16 +-
 packages/app/styles/AppNav.module.scss        |   5 +-
 .../styles/DashboardFiltersModal.module.scss  |   6 +-
 packages/app/styles/LogSidePanel.module.scss  |  42 ++---
 33 files changed, 230 insertions(+), 182 deletions(-)

diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
index 21b998f23..1a9daba20 100644
--- a/packages/app/src/AppNav.components.tsx
+++ b/packages/app/src/AppNav.components.tsx
@@ -251,7 +251,7 @@ export const AppNavHelpMenu = ({
             <Menu.Label>
               Help{' '}
               {version && (
-                <Text size="xs" c="gray.7" component="span">
+                <Text size="xs" component="span">
                   v{version}
                 </Text>
               )}
diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index b84da4ee5..5faeb2f1f 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -615,7 +615,6 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                     <Badge
                       size="xs"
                       color="gray"
-                      bg="gray.8"
                       variant="light"
                       fw="normal"
                       title="Showing time in UTC"
diff --git a/packages/app/src/BenchmarkPage.tsx b/packages/app/src/BenchmarkPage.tsx
index cf4846f49..127253123 100644
--- a/packages/app/src/BenchmarkPage.tsx
+++ b/packages/app/src/BenchmarkPage.tsx
@@ -266,9 +266,7 @@ function BenchmarkPage() {
         <Grid mt="md">
           <Grid.Col span={12}>
             <Stack>
-              <Text size="lg" c="gray.2">
-                Query Estimate & Indexes
-              </Text>
+              <Text size="lg">Query Estimate & Indexes</Text>
               <Text size="sm">Index utilization of your query</Text>
             </Stack>
           </Grid.Col>
diff --git a/packages/app/src/DBChartPage.tsx b/packages/app/src/DBChartPage.tsx
index cca93b43c..cefe165f4 100644
--- a/packages/app/src/DBChartPage.tsx
+++ b/packages/app/src/DBChartPage.tsx
@@ -126,7 +126,7 @@ function AIAssistant({
           onClose={() => setAlertDismissed(true)}
           p="xxs"
         >
-          <Text size="xs" c="dark.2" pt="2px">
+          <Text size="xs" pt="2px">
             New AI Assistant available, enable with configuring the{' '}
             <code>ANTHROPIC_API_KEY</code> environment variable on the HyperDX
             server.
diff --git a/packages/app/src/DBDashboardImportPage.tsx b/packages/app/src/DBDashboardImportPage.tsx
index 276a4be5b..8b71a9af8 100644
--- a/packages/app/src/DBDashboardImportPage.tsx
+++ b/packages/app/src/DBDashboardImportPage.tsx
@@ -110,21 +110,21 @@ function FileSelection({
                 <Dropzone.Accept>
                   <IconUpload
                     size={52}
-                    color="var(--mantine-color-green-4)"
+                    color="var(--color-text-success)"
                     stroke={1.5}
                   />
                 </Dropzone.Accept>
                 <Dropzone.Reject>
                   <IconX
                     size={52}
-                    color="var(--mantine-color-red-6)"
+                    color="var(--color-text-danger)"
                     stroke={1.5}
                   />
                 </Dropzone.Reject>
                 <Dropzone.Idle>
                   <IconFile
                     size={52}
-                    color="var(--mantine-color-dimmed)"
+                    color="var(--color-text-muted)"
                     stroke={1.5}
                   />
                 </Dropzone.Idle>
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index 82b407f80..423813d6d 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -231,7 +231,7 @@ const Tile = forwardRef(
         onTouchEnd={onTouchEnd}
       >
         <div className="d-flex justify-content-between align-items-center mb-2 cursor-grab">
-          <Text size="sm" c="gray.2" ms="xs">
+          <Text size="sm" ms="xs">
             {chart.config.name}
           </Text>
           {hovered ? (
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 8b697ea45..0e225fee1 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -310,24 +310,18 @@ function SaveSearchModal({
               <Text size="xs" mb="xs">
                 SELECT
               </Text>
-              <Text
-                mb="sm"
-                size="xs"
-                c="gray.2"
-              >{`${chartConfig.select}`}</Text>
+              <Text mb="sm" size="xs">{`${chartConfig.select}`}</Text>
               <Text size="xs" mb="xs">
                 FROM
               </Text>
-              <Text mb="sm" size="xs" c="gray.2">
+              <Text mb="sm" size="xs">
                 {chartConfig?.from.databaseName}.{chartConfig?.from.tableName}
               </Text>
               <Text size="xs" mb="xs">
                 WHERE
               </Text>
               {chartConfig.where ? (
-                <Text size="xs" c="gray.2">
-                  {chartConfig.where}
-                </Text>
+                <Text size="xs">{chartConfig.where}</Text>
               ) : (
                 <Text size="xxs" fs="italic">
                   None
@@ -336,9 +330,7 @@ function SaveSearchModal({
               <Text size="xs" mb="xs" mt="sm">
                 ORDER BY
               </Text>
-              <Text size="xs" c="gray.2">
-                {chartConfig.orderBy}
-              </Text>
+              <Text size="xs">{chartConfig.orderBy}</Text>
             </Card>
           ) : (
             <Text>Loading Chart Config...</Text>
diff --git a/packages/app/src/DBSearchPageAlertModal.tsx b/packages/app/src/DBSearchPageAlertModal.tsx
index d6986cd54..5c9448abb 100644
--- a/packages/app/src/DBSearchPageAlertModal.tsx
+++ b/packages/app/src/DBSearchPageAlertModal.tsx
@@ -374,7 +374,7 @@ export const DBSearchPageAlertModal = ({
         />
         <Stack gap={0} mb="md">
           <Group>
-            <Text c="dark.1" size="sm">
+            <Text size="sm">
               Alerts for <strong>{savedSearch?.name}</strong>
             </Text>
             {!id && (
@@ -387,9 +387,7 @@ export const DBSearchPageAlertModal = ({
               />
             )}
           </Group>
-          <Text c="dark.2" size="xxs">
-            {savedSearch?.where}
-          </Text>
+          <Text size="xxs">{savedSearch?.where}</Text>
         </Stack>
 
         <Tabs value={activeIndex} onChange={setTab} mb="xs">
diff --git a/packages/app/src/DashboardFiltersModal.tsx b/packages/app/src/DashboardFiltersModal.tsx
index 532001a2b..0f75ce13a 100644
--- a/packages/app/src/DashboardFiltersModal.tsx
+++ b/packages/app/src/DashboardFiltersModal.tsx
@@ -218,7 +218,7 @@ const EmptyState = ({ onCreateFilter, onClose }: EmptyStateProps) => {
           Add filters to let users quickly narrow data on key columns. Saved
           filters will stay with this dashboard.
         </Text>
-        <Button variant="outline" color="gray.2" onClick={onCreateFilter}>
+        <Button variant="filled" onClick={onCreateFilter}>
           Add new filter
         </Button>
       </Stack>
@@ -258,9 +258,9 @@ const DashboardFiltersList = ({
           <Paper
             key={filter.id}
             withBorder
-            bg={'dark.5'}
             className={styles.filterPaper}
             p="xs"
+            variant="muted"
           >
             <Group justify="space-between" className={styles.filterHeader}>
               <Text size="xs">{filter.name}</Text>
@@ -296,7 +296,7 @@ const DashboardFiltersList = ({
       </Stack>
 
       <Group justify="center" my="sm">
-        <Button variant="outline" color="gray.2" onClick={onAddNew}>
+        <Button variant="filled" onClick={onAddNew}>
           Add new filter
         </Button>
       </Group>
diff --git a/packages/app/src/JoinTeamPage.tsx b/packages/app/src/JoinTeamPage.tsx
index a3f865c6d..1b99c7489 100644
--- a/packages/app/src/JoinTeamPage.tsx
+++ b/packages/app/src/JoinTeamPage.tsx
@@ -1,7 +1,6 @@
 import { useRouter } from 'next/router';
 import { NextSeo } from 'next-seo';
-import { Button, Form } from 'react-bootstrap';
-import { Paper } from '@mantine/core';
+import { Button, Paper, Text, TextInput } from '@mantine/core';
 
 export default function JoinTeam() {
   const router = useRouter();
@@ -17,32 +16,30 @@ export default function JoinTeam() {
           </div>
           <Paper p="xl" withBorder>
             <div className="text-center">
-              <Form
+              <form
                 className="text-start"
                 action={`/api/team/setup/${token}`}
                 method="POST"
               >
-                <Form.Label
-                  htmlFor="password"
-                  className="text-start text-muted fs-7 mb-1"
-                >
-                  Password
-                </Form.Label>
-                <Form.Control
+                <TextInput
                   id="password"
                   name="password"
                   type="password"
-                  className="border-0"
+                  label="Password"
+                  styles={{
+                    label: {
+                      fontSize: '0.875rem',
+                      color: 'var(--color-text-muted)',
+                      marginBottom: 4,
+                    },
+                  }}
                 />
                 {err != null && (
-                  <div
-                    className="text-danger mt-2"
-                    data-test-id="auth-error-msg"
-                  >
+                  <Text c="red" mt="sm" data-test-id="auth-error-msg">
                     {err === 'invalid'
                       ? 'Password is invalid'
                       : 'Unknown error occurred, please try again later.'}
-                  </div>
+                  </Text>
                 )}
                 <div className="text-center mt-4">
                   <Button
@@ -54,7 +51,7 @@ export default function JoinTeam() {
                     Setup a password
                   </Button>
                 </div>
-              </Form>
+              </form>
             </div>
           </Paper>
         </div>
diff --git a/packages/app/src/LandingHeader.tsx b/packages/app/src/LandingHeader.tsx
index b2adf9290..988e29c46 100644
--- a/packages/app/src/LandingHeader.tsx
+++ b/packages/app/src/LandingHeader.tsx
@@ -1,11 +1,11 @@
 // @ts-nocheck TODO: remove this line
 
 import Link from 'next/link';
-import { Button, Container, Nav, Navbar, NavDropdown } from 'react-bootstrap';
+import { Anchor, Burger, Button, Container, Group } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 
 import api from './api';
 import Logo from './Logo';
-import NavHoverDropdown from './NavHoverDropdown';
 
 export default function LandingHeader({
   activeKey,
@@ -18,69 +18,145 @@ export default function LandingHeader({
   const isLoggedIn = Boolean(me);
 
   const { data: installation } = api.useInstallation();
+  const [opened, { toggle }] = useDisclosure(false);
 
   return (
     <>
-      <Navbar
-        collapseOnSelect
-        expand="lg"
-        variant="dark"
-        fixed="top"
-        style={{ background: '#0f1216b3', backdropFilter: 'blur(12px)' }}
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          background: '#0f1216b3',
+          backdropFilter: 'blur(12px)',
+          zIndex: 100,
+        }}
       >
-        <Container fluid className="mx-md-4 mt-3">
-          <Navbar.Brand href="/">
-            <Logo />
-          </Navbar.Brand>
-          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-          <Navbar.Collapse className="justify-content-end">
-            <Nav style={{ fontSize: 14 }} activeKey={activeKey}>
-              <Nav.Link href="https://hyperdx.io" className="mx-2">
+        <Container fluid px="xl" py="md">
+          <Group justify="space-between" align="center">
+            <Link href="/" style={{ textDecoration: 'none' }}>
+              <Logo />
+            </Link>
+
+            <Burger
+              opened={opened}
+              onClick={toggle}
+              hiddenFrom="lg"
+              color="white"
+            />
+
+            <Group gap="md" visibleFrom="lg" style={{ fontSize: 14 }}>
+              <Anchor
+                href="https://hyperdx.io"
+                underline="never"
+                style={{ fontWeight: activeKey === 'cloud' ? 600 : 400 }}
+              >
                 HyperDX Cloud
-              </Nav.Link>
-              <Nav.Link
+              </Anchor>
+              <Anchor
                 href="https://clickhouse.com/docs/use-cases/observability/clickstack"
-                className="mx-2"
+                underline="never"
+                style={{ fontWeight: activeKey === 'docs' ? 600 : 400 }}
               >
                 Docs
-              </Nav.Link>
+              </Anchor>
               {!isLoggedIn && installation?.isTeamExisting === true && (
-                <Nav.Link
+                <Anchor
                   href="/login"
-                  active={activeKey === '/login'}
-                  className="mx-2"
+                  underline="never"
+                  style={{ fontWeight: activeKey === '/login' ? 600 : 400 }}
                 >
                   Login
-                </Nav.Link>
+                </Anchor>
               )}
               {!isLoggedIn &&
                 activeKey !== '/register' &&
                 installation?.isTeamExisting === false && (
-                  <div className="d-flex align-items-center mx-2">
-                    <Link href={'/register'} passHref legacyBehavior>
-                      <Button variant="outline-success" className="fs-7.5">
-                        Setup Account
-                      </Button>
-                    </Link>
-                  </div>
+                  <Link href="/register" passHref legacyBehavior>
+                    <Button
+                      component="a"
+                      variant="outline"
+                      color="green"
+                      size="sm"
+                    >
+                      Setup Account
+                    </Button>
+                  </Link>
                 )}
               {isLoggedIn && (
-                <div className="d-flex align-items-center mx-2">
-                  <Link href="/search" passHref legacyBehavior>
+                <Link href="/search" passHref legacyBehavior>
+                  <Button
+                    component="a"
+                    variant="outline"
+                    color="green"
+                    size="sm"
+                  >
+                    Go to Search
+                  </Button>
+                </Link>
+              )}
+            </Group>
+          </Group>
+
+          {/* Mobile menu */}
+          {opened && (
+            <Group gap="sm" mt="md" hiddenFrom="lg" style={{ fontSize: 14 }}>
+              <Anchor
+                href="https://hyperdx.io"
+                underline="never"
+                style={{ fontWeight: activeKey === 'cloud' ? 600 : 400 }}
+              >
+                HyperDX Cloud
+              </Anchor>
+              <Anchor
+                href="https://clickhouse.com/docs/use-cases/observability/clickstack"
+                underline="never"
+                style={{ fontWeight: activeKey === 'docs' ? 600 : 400 }}
+              >
+                Docs
+              </Anchor>
+              {!isLoggedIn && installation?.isTeamExisting === true && (
+                <Anchor
+                  href="/login"
+                  underline="never"
+                  style={{ fontWeight: activeKey === '/login' ? 600 : 400 }}
+                >
+                  Login
+                </Anchor>
+              )}
+              {!isLoggedIn &&
+                activeKey !== '/register' &&
+                installation?.isTeamExisting === false && (
+                  <Link href="/register" passHref legacyBehavior>
                     <Button
-                      variant="outline-success"
-                      className="px-3"
+                      component="a"
+                      variant="outline"
+                      color="green"
                       size="sm"
+                      fullWidth
                     >
-                      Go to Search
+                      Setup Account
                     </Button>
                   </Link>
-                </div>
+                )}
+              {isLoggedIn && (
+                <Link href="/search" passHref legacyBehavior>
+                  <Button
+                    component="a"
+                    variant="outline"
+                    color="green"
+                    size="sm"
+                    fullWidth
+                  >
+                    Go to Search
+                  </Button>
+                </Link>
               )}
-            </Nav>
-          </Navbar.Collapse>
+            </Group>
+          )}
         </Container>
-      </Navbar>
+      </div>
       {!fixed && <div style={{ height: 70 }} />}
     </>
   );
diff --git a/packages/app/src/LogSidePanelElements.tsx b/packages/app/src/LogSidePanelElements.tsx
index 96666f2ec..fd34bc166 100644
--- a/packages/app/src/LogSidePanelElements.tsx
+++ b/packages/app/src/LogSidePanelElements.tsx
@@ -3,9 +3,8 @@ import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import cx from 'classnames';
 import { format } from 'date-fns';
-import { CloseButton } from 'react-bootstrap';
 import { JSONTree } from 'react-json-tree';
-import { Alert, Button, Text, Tooltip } from '@mantine/core';
+import { Alert, Button, CloseButton, Text, Tooltip } from '@mantine/core';
 import { ColumnDef, Row, Table } from '@tanstack/react-table';
 
 import HyperJson from './components/HyperJson';
@@ -518,11 +517,7 @@ export const LogSidePanelKbdShortcuts = () => {
             <Kbd>ESC</Kbd> to close
           </div>
         </div>
-        <CloseButton
-          variant="white"
-          aria-label="Hide"
-          onClick={handleDismiss}
-        />
+        <CloseButton aria-label="Hide" onClick={handleDismiss} />
       </div>
     </div>
   );
diff --git a/packages/app/src/Logo.tsx b/packages/app/src/Logo.tsx
index 0fc44cfe7..ed2e755f5 100644
--- a/packages/app/src/Logo.tsx
+++ b/packages/app/src/Logo.tsx
@@ -11,24 +11,34 @@ export default function Logo({
     sm: {
       fontSize: 14,
       iconSize: 14,
+      iconMarginBottom: 3,
     },
     md: {
       fontSize: 16,
       iconSize: 16,
+      iconMarginBottom: 3,
     },
     lg: {
       fontSize: 18,
       iconSize: 18,
+      iconMarginBottom: 3,
     },
     xl: {
       fontSize: 22,
       iconSize: 22,
+      iconMarginBottom: 3,
     },
   };
 
   return (
-    <div className="align-items-center d-flex gap-2">
-      <div className="d-flex align-items-center justify-content-center">
+    <div className="align-items-center d-flex">
+      <div
+        className="me-2"
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+        }}
+      >
         <Icon size={configs[size].iconSize} />
       </div>
 
diff --git a/packages/app/src/OnboardingChecklist.tsx b/packages/app/src/OnboardingChecklist.tsx
index 005efc68f..15fc1addc 100644
--- a/packages/app/src/OnboardingChecklist.tsx
+++ b/packages/app/src/OnboardingChecklist.tsx
@@ -186,14 +186,14 @@ const OnboardingChecklist = ({
                     alignItems: 'center',
                     justifyContent: 'center',
                     border: step.isComplete
-                      ? '1px solid var(--mantine-color-green-6)'
+                      ? '1px solid var(--color-text-success)'
                       : 'none',
                     backgroundColor: step.isComplete
                       ? 'transparent'
                       : 'var(--color-text)',
                     color: step.isComplete
-                      ? 'var(--mantine-color-green-6)'
-                      : 'var(--mantine-color-gray-5)',
+                      ? 'var(--color-text-success)'
+                      : 'var(--color-text-muted)',
                     flexShrink: 0,
                   }}
                 >
@@ -226,9 +226,7 @@ const OnboardingChecklist = ({
                   >
                     {step.title}
                   </Text>
-                  <Text size="xs" c="gray.6">
-                    {step.description}
-                  </Text>
+                  <Text size="xs">{step.description}</Text>
                 </div>
 
                 {!step.isComplete && (step.href || step.onClick) && (
@@ -236,7 +234,7 @@ const OnboardingChecklist = ({
                     className="bi bi-arrow-right"
                     style={{
                       fontSize: 12,
-                      color: 'var(--mantine-color-gray-5)',
+                      color: 'var(--color-text-muted)',
                     }}
                   />
                 )}
@@ -257,7 +255,7 @@ const OnboardingChecklist = ({
                       borderRadius: 6,
                       cursor: 'pointer',
                       ':hover': {
-                        backgroundColor: 'var(--mantine-color-dark-7)',
+                        backgroundColor: 'var(--color-bg-muted)',
                       },
                     }}
                   >
@@ -278,7 +276,7 @@ const OnboardingChecklist = ({
                     borderRadius: 6,
                     cursor: 'pointer',
                     ':hover': {
-                      backgroundColor: 'var(--mantine-color-dark-7)',
+                      backgroundColor: 'var(--color-bg-hover)',
                     },
                   }}
                 >
diff --git a/packages/app/src/PlaybarSlider.tsx b/packages/app/src/PlaybarSlider.tsx
index 950324ad6..7360f016c 100644
--- a/packages/app/src/PlaybarSlider.tsx
+++ b/packages/app/src/PlaybarSlider.tsx
@@ -61,10 +61,10 @@ export const PlaybarSlider = ({
             className={styles.markerDot}
             style={{
               backgroundColor: mark.isSuccess
-                ? 'var(--mantine-color-green-6)'
+                ? 'var(--color-text-success)'
                 : mark.isError
-                  ? 'var(--mantine-color-red-6)'
-                  : 'var(--mantine-color-gray-6)',
+                  ? 'var(--color-text-danger)'
+                  : 'var(--color-text-muted)',
               left: `${((mark.ts - min) / (max - min)) * 100}%`,
             }}
             onClick={() => onChange(mark.ts)}
diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
index fcecac4bb..1417e7a7c 100644
--- a/packages/app/src/TeamPage.tsx
+++ b/packages/app/src/TeamPage.tsx
@@ -1006,7 +1006,7 @@ function ClickhouseSettingForm({
         </InputLabel>
         {tooltip && (
           <Tooltip label={tooltip}>
-            <Text c="gray.5" size="sm" style={{ cursor: 'help' }}>
+            <Text size="sm" style={{ cursor: 'help' }}>
               <i className="bi bi-question-circle" />
             </Text>
           </Tooltip>
diff --git a/packages/app/src/UserPreferencesModal.tsx b/packages/app/src/UserPreferencesModal.tsx
index 453578177..f5efcf8d7 100644
--- a/packages/app/src/UserPreferencesModal.tsx
+++ b/packages/app/src/UserPreferencesModal.tsx
@@ -63,7 +63,7 @@ const SettingContainer = ({
       <div style={{ flex: 1 }}>
         {label}
         {description && (
-          <Text c="gray.6" size="xs" mt={2}>
+          <Text size="xs" mt={2}>
             {description}
           </Text>
         )}
@@ -87,7 +87,7 @@ export const UserPreferencesModal = ({
       title={
         <>
           <span>Preferences</span>
-          <Text size="xs" c="gray.6" mt={6}>
+          <Text size="xs" mt={6}>
             Customize your experience
           </Text>
         </>
diff --git a/packages/app/src/components/ColorSwatchInput.tsx b/packages/app/src/components/ColorSwatchInput.tsx
index d52e7751f..326a06d8b 100644
--- a/packages/app/src/components/ColorSwatchInput.tsx
+++ b/packages/app/src/components/ColorSwatchInput.tsx
@@ -57,15 +57,11 @@ export const ColorSwatchInput = ({
         >
           {value ? (
             <Group gap="xs">
-              <Text size="xs" c="gray.5">
-                Color
-              </Text>
+              <Text size="xs">Color</Text>
               <ColorSwatch color={value} size={14} />
             </Group>
           ) : (
-            <Text size="xs" c="gray.5">
-              Choose color
-            </Text>
+            <Text size="xs">Choose color</Text>
           )}
         </Button>
       </Popover.Target>
diff --git a/packages/app/src/components/ContextSidePanel.tsx b/packages/app/src/components/ContextSidePanel.tsx
index 7a520abb5..8ffb50bae 100644
--- a/packages/app/src/components/ContextSidePanel.tsx
+++ b/packages/app/src/components/ContextSidePanel.tsx
@@ -247,8 +247,6 @@ export default function ContextSubpanel({
         <Flex direction="column" mih="0px" style={{ flexGrow: 1 }}>
           <Group justify="space-between" p="sm">
             <SegmentedControl
-              bg="dark.7"
-              color="dark.5"
               size="xs"
               data={generateSegmentedControlData()}
               value={contextBy}
diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx
index 4402f0f09..ff0f183e9 100644
--- a/packages/app/src/components/DBEditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm.tsx
@@ -229,7 +229,6 @@ function ChartSeriesEditorComponent({
             )}
           </Group>
         }
-        c="dark.2"
         labelPosition="right"
         mb={8}
         mt="sm"
diff --git a/packages/app/src/components/DBRowOverviewPanel.tsx b/packages/app/src/components/DBRowOverviewPanel.tsx
index 34e5b1eac..76dc86f61 100644
--- a/packages/app/src/components/DBRowOverviewPanel.tsx
+++ b/packages/app/src/components/DBRowOverviewPanel.tsx
@@ -196,7 +196,7 @@ export function RowOverviewPanel({
         {isHttpRequest && (
           <Accordion.Item value="network">
             <Accordion.Control>
-              <Text size="sm" c="gray.2" ps="md">
+              <Text size="sm" ps="md">
                 HTTP Request
               </Text>
             </Accordion.Control>
@@ -215,7 +215,7 @@ export function RowOverviewPanel({
         {hasException && (
           <Accordion.Item value="exception">
             <Accordion.Control>
-              <Text size="sm" c="gray.2" ps="md">
+              <Text size="sm" ps="md">
                 Exception
               </Text>
             </Accordion.Control>
@@ -236,7 +236,7 @@ export function RowOverviewPanel({
         {hasSpanEvents && (
           <Accordion.Item value="spanEvents">
             <Accordion.Control>
-              <Text size="sm" c="gray.2" ps="md">
+              <Text size="sm" ps="md">
                 Span Events
               </Text>
             </Accordion.Control>
@@ -251,7 +251,7 @@ export function RowOverviewPanel({
         {Object.keys(topLevelAttributes).length > 0 && (
           <Accordion.Item value="topLevelAttributes">
             <Accordion.Control>
-              <Text size="sm" c="gray.2" ps="md">
+              <Text size="sm" ps="md">
                 Top Level Attributes
               </Text>
             </Accordion.Control>
@@ -268,7 +268,7 @@ export function RowOverviewPanel({
 
         <Accordion.Item value="eventAttributes">
           <Accordion.Control>
-            <Text size="sm" c="gray.2" ps="md">
+            <Text size="sm" ps="md">
               {source.kind === 'log' ? 'Log' : 'Span'} Attributes
             </Text>
           </Accordion.Control>
@@ -284,7 +284,7 @@ export function RowOverviewPanel({
 
         <Accordion.Item value="resourceAttributes">
           <Accordion.Control>
-            <Text size="sm" c="gray.2" ps="md">
+            <Text size="sm" ps="md">
               Resource Attributes
             </Text>
           </Accordion.Control>
diff --git a/packages/app/src/components/DBRowSidePanelHeader.tsx b/packages/app/src/components/DBRowSidePanelHeader.tsx
index 233294738..9fefec759 100644
--- a/packages/app/src/components/DBRowSidePanelHeader.tsx
+++ b/packages/app/src/components/DBRowSidePanelHeader.tsx
@@ -99,7 +99,7 @@ function BreadcrumbNavigation({
 
     // Add current level
     items.push(
-      <Text key="current" size="sm" c="gray.2">
+      <Text key="current" size="sm">
         Selected Event
       </Text>,
     );
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 9cbc225ae..4c728eec3 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -101,7 +101,7 @@ export const TextButton = ({
       className={classes.textButton}
       data-testid={dataTestId}
     >
-      <Text size="xxs" c="gray.6" lh={1} ms={ms}>
+      <Text size="xxs" lh={1} ms={ms}>
         {label}
       </Text>
     </UnstyledButton>
@@ -223,7 +223,7 @@ export const FilterCheckbox = ({
         />
       </div>
       {pinned && (
-        <Text size="xxs" c="gray.6">
+        <Text size="xxs">
           <i className="bi bi-pin-angle-fill"></i>
         </Text>
       )}
@@ -1006,9 +1006,7 @@ const DBSearchPageFiltersComponent = ({
             </Flex>
           ) : (
             shownFacets.length === 0 && (
-              <Text size="xxs" c="gray.6">
-                No filters available
-              </Text>
+              <Text size="xxs">No filters available</Text>
             )
           )}
           {/* Show facets even when loading to ensure pinned filters are visible while loading */}
@@ -1072,10 +1070,10 @@ const DBSearchPageFiltersComponent = ({
 
           {showMoreFields && (
             <div>
-              <Text size="xs" c="gray.6" fw="bold">
+              <Text size="xs" fw="bold">
                 Not seeing a filter?
               </Text>
-              <Text size="xxs" c="gray.6">
+              <Text size="xxs">
                 {`Try searching instead (e.g. column:foo)`}
               </Text>
             </div>
diff --git a/packages/app/src/components/DBTracePanel.tsx b/packages/app/src/components/DBTracePanel.tsx
index 7b452d65c..8d0226fa6 100644
--- a/packages/app/src/components/DBTracePanel.tsx
+++ b/packages/app/src/components/DBTracePanel.tsx
@@ -127,7 +127,7 @@ export default function DBTracePanel({
     <div data-testid={dataTestId}>
       <Flex align="center" justify="space-between" mb="sm">
         <Flex align="center">
-          <Text c="dark.2" size="xs" me="xs">
+          <Text size="xs" me="xs">
             {parentSourceData?.traceIdExpression}:{' '}
             {traceId || 'No trace id found for event'}
           </Text>
@@ -207,7 +207,7 @@ export default function DBTracePanel({
         <>
           <Divider my="md" />
           <Group>
-            <Text size="sm" c="dark.2" my="sm">
+            <Text size="sm" my="sm">
               Service Map
             </Text>
             <Badge
@@ -227,7 +227,7 @@ export default function DBTracePanel({
             />
           </div>
           <Divider my="md" />
-          <Text size="sm" c="dark.2" my="sm">
+          <Text size="sm" my="sm">
             Event Details
           </Text>
           <TabBar
diff --git a/packages/app/src/components/DBTraceWaterfallChart.tsx b/packages/app/src/components/DBTraceWaterfallChart.tsx
index 4e10f0969..f68eee34d 100644
--- a/packages/app/src/components/DBTraceWaterfallChart.tsx
+++ b/packages/app/src/components/DBTraceWaterfallChart.tsx
@@ -486,7 +486,6 @@ export function DBTraceWaterfallChartContainer({
               ></div>
             ))}
             <Text
-              c="dark.2"
               span
               me="xxs"
               style={{
@@ -502,7 +501,7 @@ export function DBTraceWaterfallChartContainer({
                 }`}
               />{' '}
             </Text>
-            <Text span size="xxs" c="dark.2" me="xs" pt="2px">
+            <Text span size="xxs" me="xs" pt="2px">
               {result.children.length > 0 ? `(${result.children.length})` : ''}
             </Text>
             <Text
diff --git a/packages/app/src/components/InputLanguageSwitch.tsx b/packages/app/src/components/InputLanguageSwitch.tsx
index 06f556df6..312c14b60 100644
--- a/packages/app/src/components/InputLanguageSwitch.tsx
+++ b/packages/app/src/components/InputLanguageSwitch.tsx
@@ -24,9 +24,7 @@ export default function InputLanguageSwitch({
       >
         SQL
       </Text>
-      <Text c="dark.2" size="xs">
-        |
-      </Text>
+      <Text size="xs">|</Text>
       <Text
         size="xs"
         role="button"
diff --git a/packages/app/src/components/KubeComponents.tsx b/packages/app/src/components/KubeComponents.tsx
index d8edf4184..8e348b807 100644
--- a/packages/app/src/components/KubeComponents.tsx
+++ b/packages/app/src/components/KubeComponents.tsx
@@ -131,7 +131,7 @@ const renderKubeEvent = (source: TSource) => (event: KubeEvent) => {
   return (
     <Timeline.Item key={event.id}>
       <Link href={href} passHref legacyBehavior>
-        <Anchor size="xs" fz={11} c="gray.6" title={event.timestamp}>
+        <Anchor size="xs" fz={11} title={event.timestamp}>
           <FormatTime value={event.timestamp} />
         </Anchor>
       </Link>
@@ -285,7 +285,7 @@ export const KubeTimeline = ({
       <Timeline bulletSize={12} lineWidth={1}>
         {podEventsAfterAnchor.map(renderKubeEvent(logSource))}
         <Timeline.Item key={anchorEvent.timestamp} ref={anchorRef}>
-          <Text size="xs" fz={11} c="gray.6" title={anchorEvent.timestamp}>
+          <Text size="xs" fz={11} title={anchorEvent.timestamp}>
             <FormatTime value={anchorEvent.timestamp} />
           </Text>
           <Group gap="xs" my={4}>
diff --git a/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx b/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
index 20ae05e46..eeff9d15d 100644
--- a/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
+++ b/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
@@ -65,9 +65,7 @@ export default function SlowestEventsTile({
     <ChartBox style={{ height }}>
       <Group justify="space-between" align="center" mb="sm">
         <Text size="sm">{title}</Text>
-        <Text size="xs" c="dark.2">
-          (Slower than {roundedP95}ms)
-        </Text>
+        <Text size="xs">(Slower than {roundedP95}ms)</Text>
       </Group>
       {isLoading && !data ? (
         <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
diff --git a/packages/app/src/components/SourceForm.tsx b/packages/app/src/components/SourceForm.tsx
index a0a8c6b16..c5cad69c7 100644
--- a/packages/app/src/components/SourceForm.tsx
+++ b/packages/app/src/components/SourceForm.tsx
@@ -112,7 +112,7 @@ function FormRow({
         }}
       >
         {typeof label === 'string' ? (
-          <Text tt="capitalize" c="gray.6" size="sm">
+          <Text tt="capitalize" size="sm">
             {label}
           </Text>
         ) : (
diff --git a/packages/app/styles/AlertsPage.module.scss b/packages/app/styles/AlertsPage.module.scss
index 5ddfd87f3..a3e18cb94 100644
--- a/packages/app/styles/AlertsPage.module.scss
+++ b/packages/app/styles/AlertsPage.module.scss
@@ -1,11 +1,11 @@
 @import './variables';
 
 .sectionHeader {
-  border-bottom: 1px solid var(--mantine-color-dark-9);
+  border-bottom: 1px solid var(--color-border);
   margin-top: 30px;
   padding-bottom: 10px;
   font-size: 14px;
-  color: var(--mantine-color-dark-4);
+  color: var(--color-text-muted);
 }
 
 .historyCardWrapper {
@@ -22,7 +22,7 @@
 .historyCard {
   width: 4px;
   height: 16px;
-  background-color: var(--mantine-color-dark-9);
+  background-color: var(--color-bg-muted);
   border-radius: 2px;
   margin: 0 1px;
   cursor: pointer;
@@ -34,11 +34,11 @@
   }
 
   &.ok {
-    background-color: #00d474;
+    background-color: var(--color-success);
   }
 
   &.alarm {
-    background-color: #e74c3c;
+    background-color: var(--color-danger);
   }
 }
 
@@ -48,15 +48,15 @@
   justify-content: space-between;
   gap: 16px;
   padding: 12px 0;
-  border-bottom: 1px solid var(--mantine-color-dark-9);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .alertLink {
   font-weight: 500;
-  color: var(--mantine-color-dark-2);
+  color: var(--color-text-secondary);
   text-decoration: none;
 
   &:hover {
-    color: #fff;
+    color: var(--color-text);
   }
 }
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index 2ed245632..fe38722d2 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -70,7 +70,7 @@
 
   &:focus-visible {
     outline: none;
-    border-left: 2px solid $green;
+    background: var(--color-bg-muted);
   }
 }
 
@@ -78,7 +78,7 @@
   margin-right: 8px;
   display: inline-flex;
   vertical-align: middle;
-  transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out  ;
 
    &:hover {
     // color: $green;
@@ -130,7 +130,6 @@
   }
 
   &:active {
-    // background: var(--mantine-color-gray-9);
     transform: translate(0, 1px);
   }
 }
diff --git a/packages/app/styles/DashboardFiltersModal.module.scss b/packages/app/styles/DashboardFiltersModal.module.scss
index 0b6f39841..10ba0c9ea 100644
--- a/packages/app/styles/DashboardFiltersModal.module.scss
+++ b/packages/app/styles/DashboardFiltersModal.module.scss
@@ -1,8 +1,8 @@
 .filtersContainer {
   max-height: 400px;
   overflow-y: auto;
-  border-top: 1px solid var(--mantine-color-dark-4);
-  border-bottom: 1px solid var(--mantine-color-dark-4);
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
   padding: var(--mantine-spacing-sm) 0;
   margin-bottom: var(--mantine-spacing-xs) 0;
 }
@@ -18,6 +18,6 @@
 
 .deleteButton {
   &:hover {
-    color: var(--mantine-color-red-4);
+    color: var(--color-text-danger);
   }
 }
diff --git a/packages/app/styles/LogSidePanel.module.scss b/packages/app/styles/LogSidePanel.module.scss
index 76773891f..abc92d19f 100644
--- a/packages/app/styles/LogSidePanel.module.scss
+++ b/packages/app/styles/LogSidePanel.module.scss
@@ -22,7 +22,7 @@ $padding-x: 24px;
   background-color: transparent;
 
   &:hover {
-    background-color: var(--mantine-color-dark-9);
+    background-color: var(--color-border);
     transition: background-color 0.2s ease-in-out;
   }
 }
@@ -48,14 +48,14 @@ $padding-x: 24px;
 }
 
 .severityChip {
-  background: var(--mantine-color-dark-8);
+  background: var(--color-bg-surface);
   padding: 4px 12px;
   border-radius: 16px;
   margin-right: 8px;
 }
 
 .loadingState {
-  color: var(--mantine-color-dark-6);
+  color: var(--color-text-muted);
   width: 100%;
   margin: $padding-x;
   font-size: 16px;
@@ -64,29 +64,29 @@ $padding-x: 24px;
 }
 
 .panelSectionWrapper {
-  background-color: #14171b;
+  background-color: var(--color-bg-surface);
   margin: 12px 0;
   border-radius: 6px;
 }
 
 .panelSectionWrapperTitle {
   padding: 18px 24px;
-  border-bottom: 1px solid var(--mantine-color-dark-9);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .kbdShortcuts {
-  background: var(--mantine-color-dark-9);
-  border-top: 1px solid var(--mantine-color-dark-9);
+  background: var(--color-bg-surface);
+  border-top: 1px solid var(--color-border);
   padding: 12px $padding-x;
-  color: var(--mantine-color-dark-3);
+  color: var(--color-text-secondary);
   font-size: 11px;
 }
 
 .kbd {
   display: inline-block;
-  background: var(--mantine-color-dark-9);
+  background: var(--color-bg-surface);
   letter-spacing: 0.5px;
-  border: 1px solid var(--mantine-color-dark-5);
+  border: 1px solid var(--color-border);
   border-radius: 4px;
   padding: 1px 6px;
   margin: 0 2px;
@@ -95,25 +95,25 @@ $padding-x: 24px;
 .kbdDivider {
   height: 21px;
   width: 1px;
-  background: var(--mantine-color-dark-8);
+  background: var(--color-bg-muted);
 }
 
 .lineContext {
-  color: var(--mantine-color-dark-3);
-  background-color: #ffffff08;
+  color: var(--color-text-secondary);
+  background-color: var(--color-bg-hover);
   padding: 8px 0;
   border-radius: 4px;
   margin-top: 8px;
 }
 
 .lineContextCurrentLine {
-  background-color: var(--mantine-color-dark-8);
-  color: var(--mantine-color-dark-1);
+  background-color: var(--color-bg-muted);
+  color: var(--color-text);
   font-weight: 600;
 
   .lineContextLineNo {
-    color: var(--mantine-color-dark-1);
-    border-right-color: var(--mantine-color-dark-6);
+    color: var(--color-text);
+    border-right-color: var(--color-border);
   }
 }
 
@@ -121,13 +121,13 @@ $padding-x: 24px;
   display: inline-block;
   width: 60px;
   text-align: right;
-  border-right: 1px solid var(--mantine-color-dark-9);
+  border-right: 1px solid var(--color-border);
   padding-right: 12px;
   margin-right: 12px;
 }
 
 .emptyMessage {
-  color: var(--mantine-color-dark-5);
+  color: var(--color-text-muted);
   text-align: center;
   padding: 10px;
 }
@@ -152,10 +152,10 @@ $padding-x: 24px;
   cursor: pointer;
 
   &:hover {
-    background-color: #ffffff08;
+    background-color: var(--color-bg-hover);
   }
 
   &:active {
-    background-color: #ffffff12;
+    background-color: var(--color-bg-muted);
   }
 }

From 5809853187f2b63b7eac4d34f8cce0caa3b7eaa3 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 10 Nov 2025 21:43:39 +0000
Subject: [PATCH 09/49] refactor: Remove unused react-bootstrap-range-slider
 dependency and clean up related code; replace NavHoverDropdown with Mantine's
 Button component; update styles in SessionSidePanel and various SCSS files
 for consistency and improved theming; delete obsolete variables.scss file.

---
 packages/app/package.json                     |  1 -
 packages/app/src/NavHoverDropdown.tsx         | 17 ----
 packages/app/src/SessionSidePanel.tsx         | 12 +--
 packages/app/src/components/Table.module.scss |  2 -
 packages/app/styles/AlertsPage.module.scss    |  2 -
 packages/app/styles/AppNav.module.scss        |  2 -
 .../app/styles/EndpointSubpanel.module.scss   |  2 -
 packages/app/styles/HDXLineChart.module.scss  |  7 +-
 packages/app/styles/LogSidePanel.module.scss  |  1 -
 packages/app/styles/LogTable.module.scss      |  2 -
 packages/app/styles/SearchPage.module.scss    |  2 -
 .../app/styles/SessionSubpanelV2.module.scss  | 52 ++++++------
 packages/app/styles/variables.scss            | 82 -------------------
 yarn.lock                                     | 15 ----
 14 files changed, 32 insertions(+), 167 deletions(-)
 delete mode 100644 packages/app/src/NavHoverDropdown.tsx
 delete mode 100644 packages/app/styles/variables.scss

diff --git a/packages/app/package.json b/packages/app/package.json
index 504515111..e03029477 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -77,7 +77,6 @@
     "object-hash": "^3.0.0",
     "react": "18.3.1",
     "react-bootstrap": "^2.4.0",
-    "react-bootstrap-range-slider": "^3.0.8",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.3.1",
     "react-error-boundary": "^3.1.4",
diff --git a/packages/app/src/NavHoverDropdown.tsx b/packages/app/src/NavHoverDropdown.tsx
deleted file mode 100644
index 57856d760..000000000
--- a/packages/app/src/NavHoverDropdown.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useState } from 'react';
-import { NavDropdown } from 'react-bootstrap';
-
-export default function NavHoverDropdown(
-  props: React.ComponentProps<typeof NavDropdown>,
-) {
-  const [show, setShow] = useState(false);
-  return (
-    <NavDropdown
-      {...props}
-      show={show}
-      onClick={() => setShow(v => !v)}
-      onMouseEnter={() => setShow(true)}
-      onMouseLeave={() => setShow(false)}
-    />
-  );
-}
diff --git a/packages/app/src/SessionSidePanel.tsx b/packages/app/src/SessionSidePanel.tsx
index 710242075..8820d549e 100644
--- a/packages/app/src/SessionSidePanel.tsx
+++ b/packages/app/src/SessionSidePanel.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { Button } from 'react-bootstrap';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { useHotkeys } from 'react-hotkeys-hook';
 import {
@@ -8,6 +7,7 @@ import {
   SearchConditionLanguage,
   TSource,
 } from '@hyperdx/common-utils/dist/types';
+import { Button } from '@mantine/core';
 import { Drawer } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 
@@ -122,19 +122,19 @@ export default function SessionSidePanel({
                   }}
                 >
                   <Button
-                    variant="dark"
-                    className="text-muted-hover mx-2 d-flex align-items-center fs-8"
+                    variant="default"
                     size="sm"
+                    leftSection={<i className="bi bi-link-45deg fs-7.5" />}
+                    style={{ fontSize: '12px' }}
                   >
-                    <i className="bi bi-link-45deg me-2 fs-7.5" />
                     Share Session
                   </Button>
                 </CopyToClipboard>
                 <Button
-                  variant="dark"
-                  className="text-muted-hover d-flex align-items-center"
+                  variant="default"
                   size="sm"
                   onClick={onClose}
+                  style={{ padding: '4px 8px' }}
                 >
                   <i className="bi bi-x-lg" />
                 </Button>
diff --git a/packages/app/src/components/Table.module.scss b/packages/app/src/components/Table.module.scss
index 4d8abc4c6..36780b020 100644
--- a/packages/app/src/components/Table.module.scss
+++ b/packages/app/src/components/Table.module.scss
@@ -1,5 +1,3 @@
-@import '../../styles/variables';
-
 $compactVerticalPadding: 6px;
 $normalVerticalPadding: 10px;
 $comfortableVerticalPadding: 14px;
diff --git a/packages/app/styles/AlertsPage.module.scss b/packages/app/styles/AlertsPage.module.scss
index a3e18cb94..1bb663088 100644
--- a/packages/app/styles/AlertsPage.module.scss
+++ b/packages/app/styles/AlertsPage.module.scss
@@ -1,5 +1,3 @@
-@import './variables';
-
 .sectionHeader {
   border-bottom: 1px solid var(--color-border);
   margin-top: 30px;
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index fe38722d2..4582f8e8f 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -1,6 +1,4 @@
 /* stylelint-disable */
-@import './variables';
-
 .wrapper {
   height: 100vh;
   max-height: 100vh;
diff --git a/packages/app/styles/EndpointSubpanel.module.scss b/packages/app/styles/EndpointSubpanel.module.scss
index 1fa7f3b6d..5c7fe115e 100644
--- a/packages/app/styles/EndpointSubpanel.module.scss
+++ b/packages/app/styles/EndpointSubpanel.module.scss
@@ -1,5 +1,3 @@
-@import './variables';
-
 .panel {
   display: flex;
   flex-direction: column;
diff --git a/packages/app/styles/HDXLineChart.module.scss b/packages/app/styles/HDXLineChart.module.scss
index b01a8f8aa..f13c711d8 100644
--- a/packages/app/styles/HDXLineChart.module.scss
+++ b/packages/app/styles/HDXLineChart.module.scss
@@ -1,5 +1,4 @@
-@import './variables';
-
+/* stylelint-disable */
 .legend {
   display: flex;
   flex-wrap: wrap;
@@ -42,10 +41,6 @@
   background-color: rgba(#1a1d23, 0.75);
   border: 1px solid #5f6776;
   border-radius: 2px;
-
-  // background-color: rgb(0 0 0 / 80%);background-color
-  // backdrop-filter: blur(2px);backdrop-filter
-  // border-radius: 4px;border-radius
   font-size: 11px;
 }
 
diff --git a/packages/app/styles/LogSidePanel.module.scss b/packages/app/styles/LogSidePanel.module.scss
index abc92d19f..95b067ead 100644
--- a/packages/app/styles/LogSidePanel.module.scss
+++ b/packages/app/styles/LogSidePanel.module.scss
@@ -1,5 +1,4 @@
 /* stylelint-disable */
-@import './variables';
 
 // TODO: Use variables for spacings;
 $padding-x: 24px;
diff --git a/packages/app/styles/LogTable.module.scss b/packages/app/styles/LogTable.module.scss
index f3c25845d..38b50532e 100644
--- a/packages/app/styles/LogTable.module.scss
+++ b/packages/app/styles/LogTable.module.scss
@@ -1,5 +1,3 @@
-@import './variables';
-
 $button-height: 18px;
 
 .table {
diff --git a/packages/app/styles/SearchPage.module.scss b/packages/app/styles/SearchPage.module.scss
index 8bac46b10..595c2087f 100644
--- a/packages/app/styles/SearchPage.module.scss
+++ b/packages/app/styles/SearchPage.module.scss
@@ -1,5 +1,3 @@
-@import './variables';
-
 /* stylelint-disable selector-pseudo-class-no-unknown */
 .filtersPanel {
   position: relative;
diff --git a/packages/app/styles/SessionSubpanelV2.module.scss b/packages/app/styles/SessionSubpanelV2.module.scss
index 0408767ee..ba7efd69e 100644
--- a/packages/app/styles/SessionSubpanelV2.module.scss
+++ b/packages/app/styles/SessionSubpanelV2.module.scss
@@ -1,5 +1,3 @@
-@import './variables';
-
 .wrapper {
   height: 100%;
   width: 100%;
@@ -10,7 +8,7 @@
 
 .eventList {
   width: 300px;
-  border-right: 1px solid var(--mantine-color-dark-9);
+  border-right: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -22,7 +20,7 @@
   flex-direction: column;
   gap: 6px;
   padding: 8px;
-  border-bottom: 1px solid var(--mantine-color-dark-9);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .eventListContainer {
@@ -32,7 +30,7 @@
 
 .eventRow {
   padding: 6px 12px;
-  border-bottom: 1px solid var(--mantine-color-dark-9);
+  border-bottom: 1px solid var(--color-border);
   cursor: pointer;
   font-size: 12px;
   display: flex;
@@ -43,17 +41,17 @@
 
 .eventRowError {
   .eventRowIcon {
-    background: $red;
+    background: var(--color-text-danger);
   }
 
   .eventRowTitle {
-    color: $red;
+    color: var(--color-text-danger);
   }
 }
 
 .eventRowSuccess {
   .eventRowIcon {
-    background: $green;
+    background: var(--color-text-success);
 
     i {
       color: #000;
@@ -61,17 +59,17 @@
   }
 
   .eventRowTitle {
-    color: $green;
+    color: var(--color-text-success);
   }
 }
 
 .eventRowHighlighted {
-  background-color: #ffffff20;
+  background-color: var(--color-bg-muted);
   padding-left: 20px;
 }
 
 .eventRowIcon {
-  background: var(--mantine-color-dark-8);
+  background: var(--color-text);
   width: 26px;
   height: 26px;
   display: flex;
@@ -100,7 +98,7 @@
   border-radius: 2px;
 
   &:hover {
-    background: #ffffff15;
+    background: var(--color-bg-hover);
   }
 }
 
@@ -108,22 +106,22 @@
   padding: 2px;
   margin: -2px;
   border-radius: 2px;
-  color: var(--mantine-color-dark-3);
+  color: var(--color-text-muted);
   font-size: 11px;
   align-self: center;
 
   &:hover {
-    background: #ffffff15;
+    background: var(--color-bg-muted);
   }
 }
 
 .eventRowTitle {
   font-size: 12px;
   font-weight: bold;
-  color: var(--mantine-color-dark-2);
+  color: var(--color-text);
 
   span {
-    color: var(--mantine-color-dark-4) !important;
+    color: var(--color-text-secondary) !important;
     font-size: 11px;
     font-weight: normal;
 
@@ -137,7 +135,7 @@
 
 .eventRowDescription {
   font-size: 11px;
-  color: var(--mantine-color-dark-3);
+  color: var(--color-text-muted);
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
@@ -160,8 +158,8 @@
   justify-content: space-between;
   align-items: center;
   padding: 6px 12px;
-  background-color: var(--mantine-color-dark-9);
-  border-bottom: 1px solid var(--mantine-color-dark-9);
+  background-color: var(--color-bg-surface);
+  border-bottom: 1px solid var(--color-border);
   width: 100%;
   max-width: 100%;
   gap: 12px;
@@ -169,7 +167,7 @@
 
 .playerHeaderUrl {
   font-size: 11px;
-  color: var(--mantine-color-dark-2);
+  color: var(--color-text);
   width: 100%;
   max-width: 100%;
   overflow: hidden;
@@ -182,16 +180,16 @@
   overflow: hidden;
   background: repeating-linear-gradient(
     45deg,
-    #ffffff10,
-    #ffffff10 15px,
-    var(--mantine-color-dark-9) 15px,
-    var(--mantine-color-dark-9) 30px
+    var(--color-bg-hover),
+    var(--color-bg-hover) 15px,
+    var(--color-bg-surface) 15px,
+    var(--color-bg-surface) 30px
   );
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
-  color: var(--mantine-color-dark-3);
+  color: var(--color-text-muted);
 }
 
 .domPlayerWrapper {
@@ -219,7 +217,7 @@
   display: flex;
   padding: 6px 12px;
   align-items: center;
-  border-top: 1px solid var(--mantine-color-dark-9);
+  border-top: 1px solid var(--color-border);
 }
 
 .playerToolbar {
@@ -227,7 +225,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 14px 20px;
-  border-top: 1px solid var(--mantine-color-dark-9);
+  border-top: 1px solid var(--color-border);
 
   > div {
     flex: 1;
diff --git a/packages/app/styles/variables.scss b/packages/app/styles/variables.scss
deleted file mode 100644
index f15357a3a..000000000
--- a/packages/app/styles/variables.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-/* stylelint-disable */
-/**
-  Colors
-*/
-
-$text-muted: #dadada;
-$text-purple: #9357ff; // This isn't a bootstrap variable
-$text-light: #f8f8f2;
-$green: #50fa7b;
-$red: #ff5d5b;
-$blue: #3788f6;
-$purple: #8f57f3;
-$gray-100: #f8f9fa;
-$bg-dark-grey: #1f2429;
-$bg-muted: #21272e;
-$bg-purple: #2e273b;
-$bg-purple-active: #4a4eb5;
-$code-color: #4bb74a;
-$info: $purple;
-
-/**
-  Spacing
-*/
-$spacer: 1rem;
-$spacers: (
-  0: 0,
-  0\.5: $spacer * 0.125,
-  1: $spacer * 0.25,
-  2: $spacer * 0.5,
-  2\.5: $spacer * 0.75,
-  3: $spacer,
-  4: $spacer * 1.5,
-  4\.5: $spacer * 2,
-  5: $spacer * 3,
-  6: $spacer * 4,
-  7: $spacer * 5,
-  8: $spacer * 8,
-  10: $spacer * 10,
-  14: $spacer * 14,
-  16: $spacer * 16,
-);
-$navbar-dark-active-color: $green;
-$navbar-dark-color: rgba(#fff, 0.75);
-$navbar-dark-hover-color: rgba(#fff, 1);
-$dropdown-dark-bg: $bg-muted;
-$popover-bg: $bg-purple;
-$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;
-
-// scss-docs-end font-variables
-
-// scss-docs-start font-sizes
-$font-sizes: (
-  1: $h1-font-size,
-  2: $h2-font-size,
-  3: $h3-font-size,
-  4: $h4-font-size,
-  5: $h5-font-size,
-  5\.5: $font-size-base * 1.125,
-  6: $h6-font-size,
-  7: $font-size-base * 0.875,
-  7\.5: $font-size-base * 0.8125,
-  8: $font-size-base * 0.75,
-  8\.5: $font-size-base * 0.625,
-  9: $font-size-base * 0.5,
-) !default;
-
-// scss-docs-end font-sizes
-
-$input-bg: #ffffff1a;
-$input-border-width: 0;
-$input-group-addon-bg: $input-bg;
-$accordion-button-bg: $bg-purple;
-$accordion-button-active-bg: $bg-purple-active;
-$accordion-bg: var(--color-bg-body);
-$accordion-border-radius: 5px;
diff --git a/yarn.lock b/yarn.lock
index aa74ee958..ea2edc6ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4490,7 +4490,6 @@ __metadata:
     prettier: "npm:^3.3.2"
     react: "npm:18.3.1"
     react-bootstrap: "npm:^2.4.0"
-    react-bootstrap-range-slider: "npm:^3.0.8"
     react-copy-to-clipboard: "npm:^5.1.0"
     react-dom: "npm:18.3.1"
     react-error-boundary: "npm:^3.1.4"
@@ -24525,20 +24524,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-bootstrap-range-slider@npm:^3.0.8":
-  version: 3.0.8
-  resolution: "react-bootstrap-range-slider@npm:3.0.8"
-  dependencies:
-    classnames: "npm:^2.3.1"
-    prop-types: "npm:^15.7.2"
-  peerDependencies:
-    react: ">=17.0.0"
-    react-bootstrap: ">=1.0.0"
-    react-dom: ">=17.0.0"
-  checksum: 10c0/508d90bc7e6e15b6d45b95c3805c55f5c1809882b138fe5ed908def3a90ed381195f926f4c6bcc5ff1cf4c94b4a745a8fb256abd1fc0cd3e01494471e06cd5c3
-  languageName: node
-  linkType: hard
-
 "react-bootstrap@npm:^2.4.0":
   version: 2.7.2
   resolution: "react-bootstrap@npm:2.7.2"

From b98b7addbc01463037b9d3ab9b1eb57f4c885a87 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 10 Nov 2025 21:54:56 +0000
Subject: [PATCH 10/49] refactor: Replace react-bootstrap Modal with Mantine's
 Modal component; update related modal handling and styling for consistency

---
 packages/app/src/TeamPage.tsx | 87 +++++++++++++++++------------------
 1 file changed, 42 insertions(+), 45 deletions(-)

diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
index 1417e7a7c..484258f1f 100644
--- a/packages/app/src/TeamPage.tsx
+++ b/packages/app/src/TeamPage.tsx
@@ -1,7 +1,6 @@
 import { Fragment, useCallback, useMemo, useState } from 'react';
 import Head from 'next/head';
 import { HTTPError } from 'ky';
-import { Button as BSButton, Modal as BSModal } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { DEFAULT_METADATA_MAX_ROWS_TO_READ } from '@hyperdx/common-utils/dist/core/metadata';
@@ -18,7 +17,7 @@ import {
   Group,
   InputLabel,
   Loader,
-  Modal as MModal,
+  Modal,
   Stack,
   Table,
   Text,
@@ -587,7 +586,7 @@ function TeamMembersSection() {
         </Card.Section>
       </Card>
 
-      <MModal
+      <Modal
         centered
         onClose={() => setTeamInviteModalShow(false)}
         opened={teamInviteModalShow}
@@ -597,58 +596,56 @@ function TeamMembersSection() {
           onSubmit={onSubmitTeamInviteForm}
           isSubmitting={saveTeamInvitation.isPending}
         />
-      </MModal>
+      </Modal>
 
-      <BSModal
-        aria-labelledby="contained-modal-title-vcenter"
+      <Modal
         centered
-        onHide={() =>
+        onClose={() =>
           setDeleteTeamMemberConfirmationModalData({
             mode: null,
             id: null,
             email: null,
           })
         }
-        show={deleteTeamMemberConfirmationModalData.id != null}
+        opened={deleteTeamMemberConfirmationModalData.id != null}
         size="lg"
+        title="Delete Team Member"
       >
-        <BSModal.Body className="bg-muted rounded">
-          <h3 className="text-muted">Delete Team Member</h3>
-          <p className="text-muted">
+        <Stack>
+          <Text>
             Deleting this team member (
             {deleteTeamMemberConfirmationModalData.email}) will revoke their
             access to the team&apos;s resources and services. This action is not
             reversible.
-          </p>
-          <BSButton
-            variant="outline-secondary"
-            className="mt-2 px-4 ms-2 float-end"
-            size="sm"
-            onClick={() =>
-              setDeleteTeamMemberConfirmationModalData({
-                mode: null,
-                id: null,
-                email: null,
-              })
-            }
-          >
-            Cancel
-          </BSButton>
-          <BSButton
-            variant="outline-danger"
-            className="mt-2 px-4 float-end"
-            size="sm"
-            onClick={() =>
-              deleteTeamMemberConfirmationModalData.id &&
-              onConfirmDeleteTeamMember(
-                deleteTeamMemberConfirmationModalData.id,
-              )
-            }
-          >
-            Confirm
-          </BSButton>
-        </BSModal.Body>
-      </BSModal>
+          </Text>
+          <Group justify="flex-end" gap="xs">
+            <Button
+              variant="default"
+              onClick={() =>
+                setDeleteTeamMemberConfirmationModalData({
+                  mode: null,
+                  id: null,
+                  email: null,
+                })
+              }
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="outline"
+              color="red"
+              onClick={() =>
+                deleteTeamMemberConfirmationModalData.id &&
+                onConfirmDeleteTeamMember(
+                  deleteTeamMemberConfirmationModalData.id,
+                )
+              }
+            >
+              Confirm
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </Box>
   );
 }
@@ -1249,7 +1246,7 @@ function ApiKeysSection() {
             </Button>
           )}
         </Group>
-        <MModal
+        <Modal
           aria-labelledby="contained-modal-title-vcenter"
           centered
           onClose={() => setRotateApiKeyConfirmationModalShow(false)}
@@ -1261,7 +1258,7 @@ function ApiKeysSection() {
             </Text>
           }
         >
-          <MModal.Body>
+          <Modal.Body>
             <Text size="md">
               Rotating the API key will invalidate your existing API key and
               generate a new one for you. This action is <b>not reversible</b>.
@@ -1286,8 +1283,8 @@ function ApiKeysSection() {
                 Confirm
               </Button>
             </Group>
-          </MModal.Body>
-        </MModal>
+          </Modal.Body>
+        </Modal>
       </Card>
       {!isLoadingMe && me != null && (
         <Card variant="muted">

From b27b8f06299d919df32684eaae9b93efb215ac04 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 10 Nov 2025 22:08:22 +0000
Subject: [PATCH 11/49] refactor: Remove SSRProvider from MyApp component;
 simplify layout structure and improve readability; adjust Badge component
 usage in AppNavLink for better consistency; update ThemeWrapper to remove
 default radius for enhanced theming flexibility

---
 packages/app/pages/_app.tsx            | 35 +++++++++++---------------
 packages/app/src/AppNav.components.tsx | 22 +++++-----------
 packages/app/src/ThemeWrapper.tsx      |  1 -
 3 files changed, 21 insertions(+), 37 deletions(-)

diff --git a/packages/app/pages/_app.tsx b/packages/app/pages/_app.tsx
index 9aa27484c..bac4fce90 100644
--- a/packages/app/pages/_app.tsx
+++ b/packages/app/pages/_app.tsx
@@ -5,7 +5,6 @@ import Head from 'next/head';
 import { NextAdapter } from 'next-query-params';
 import randomUUID from 'crypto-randomuuid';
 import { enableMapSet } from 'immer';
-import SSRProvider from 'react-bootstrap/SSRProvider';
 import { QueryParamProvider } from 'use-query-params';
 import HyperDX from '@hyperdx/browser';
 import { ColorSchemeScript } from '@mantine/core';
@@ -120,25 +119,21 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         />
       </Head>
 
-      <SSRProvider>
-        <HDXQueryParamProvider>
-          <QueryParamProvider adapter={NextAdapter}>
-            <QueryClientProvider client={queryClient}>
-              <ThemeWrapper
-                fontFamily={userPreferences.font}
-                colorScheme={
-                  userPreferences.theme === 'dark' ? 'dark' : 'light'
-                }
-              >
-                {getLayout(<Component {...pageProps} />)}
-                {confirmModal}
-              </ThemeWrapper>
-              <ReactQueryDevtools initialIsOpen={true} />
-              {background}
-            </QueryClientProvider>
-          </QueryParamProvider>
-        </HDXQueryParamProvider>
-      </SSRProvider>
+      <HDXQueryParamProvider>
+        <QueryParamProvider adapter={NextAdapter}>
+          <QueryClientProvider client={queryClient}>
+            <ThemeWrapper
+              fontFamily={userPreferences.font}
+              colorScheme={userPreferences.theme === 'dark' ? 'dark' : 'light'}
+            >
+              {getLayout(<Component {...pageProps} />)}
+              {confirmModal}
+            </ThemeWrapper>
+            <ReactQueryDevtools initialIsOpen={true} />
+            {background}
+          </QueryClientProvider>
+        </QueryParamProvider>
+      </HDXQueryParamProvider>
     </React.Fragment>
   );
 }
diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
index 1a9daba20..8215416ad 100644
--- a/packages/app/src/AppNav.components.tsx
+++ b/packages/app/src/AppNav.components.tsx
@@ -327,24 +327,14 @@ export const AppNavLink = ({
       >
         <span>
           <span className={styles.linkIcon}>{icon}</span>
-          {!isCollapsed && (
-            <span>
-              {label}
-              {isBeta && (
-                <Badge
-                  size="xs"
-                  ms="xs"
-                  autoContrast
-                  radius="sm"
-                  className="align-text-bottom"
-                >
-                  Beta
-                </Badge>
-              )}
-            </span>
-          )}
+          {!isCollapsed && <span>{label}</span>}
         </span>
       </Link>
+      {!isCollapsed && isBeta && (
+        <Badge size="xs" radius="sm" color="gray" style={{ marginRight: 8 }}>
+          Beta
+        </Badge>
+      )}
       {!isCollapsed && onToggle && (
         <ActionIcon
           data-testid={`${testId}-toggle`}
diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index 064f19943..d8d07a78b 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -14,7 +14,6 @@ const makeTheme = ({
 }: {
   fontFamily?: string;
 }): MantineThemeOverride => ({
-  defaultRadius: 'xs',
   cursorType: 'pointer',
   fontFamily,
   primaryColor: 'green',

From 339e6fe22cafd61521f0ff71ed173526addb2040 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 10 Nov 2025 23:02:37 +0000
Subject: [PATCH 12/49] refactor: Update button variants and background classes
 for consistency; enhance color usage across components; streamline styles for
 improved theming and accessibility

---
 packages/app/src/DBDashboardPage.tsx                |  2 +-
 packages/app/src/DBSearchPage.tsx                   |  2 +-
 packages/app/src/DBServiceMapPage.tsx               |  2 +-
 packages/app/src/TeamPage.tsx                       |  4 +---
 packages/app/src/ThemeWrapper.tsx                   | 13 +++++++++++++
 packages/app/src/TimelineChart.tsx                  | 12 ++++++++----
 packages/app/src/components/ColorSwatchInput.tsx    |  1 -
 packages/app/src/components/ContextSidePanel.tsx    |  2 --
 packages/app/src/components/DBEditTimeChartForm.tsx |  2 +-
 packages/app/src/components/DBInfraPanel.tsx        |  4 ----
 packages/app/src/components/DBRowTable.tsx          | 10 ++++------
 packages/app/src/components/DBSearchPageFilters.tsx |  4 ++--
 .../app/src/components/DBTraceWaterfallChart.tsx    |  4 ++--
 packages/app/src/components/ExceptionSubpanel.tsx   |  2 +-
 packages/app/src/components/InputLanguageSwitch.tsx |  6 +++---
 packages/app/src/components/Table.module.scss       |  2 +-
 .../app/src/components/TimePicker/TimePicker.tsx    |  7 ++++++-
 packages/app/styles/TimelineChart.module.scss       |  6 +++++-
 packages/app/styles/_semantic-colors.scss           |  2 ++
 19 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index 423813d6d..8885610f4 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -926,7 +926,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
           {!isLocalDashboard /* local dashboards cant be "deleted" */ && (
             <Menu width={250}>
               <Menu.Target>
-                <Button variant="outline" color="dark.2" px="xs" size="xs">
+                <Button variant="default" px="xs" size="xs">
                   <i className="bi bi-three-dots-vertical" />
                 </Button>
               </Menu.Target>
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 0e225fee1..57cb2a1bd 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -1557,7 +1557,7 @@ function DBSearchPage() {
       <Flex
         direction="column"
         style={{ overflow: 'hidden', height: '100%' }}
-        className="bg-muted"
+        className="bg-body"
       >
         {!queryReady ? (
           <Paper shadow="xs" p="xl" h="100%">
diff --git a/packages/app/src/DBServiceMapPage.tsx b/packages/app/src/DBServiceMapPage.tsx
index cf6b45ef9..1ad2c9b3b 100644
--- a/packages/app/src/DBServiceMapPage.tsx
+++ b/packages/app/src/DBServiceMapPage.tsx
@@ -90,7 +90,7 @@ function DBServiceMapPage() {
     <Box
       data-testid="service-map-page"
       p="sm"
-      className="bg-muted"
+      className="bg-body"
       style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}
     >
       <Group mb="md" justify="space-between">
diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
index 484258f1f..e43ca6b44 100644
--- a/packages/app/src/TeamPage.tsx
+++ b/packages/app/src/TeamPage.tsx
@@ -998,9 +998,7 @@ function ClickhouseSettingForm({
   return (
     <Stack gap="xs" mb="md">
       <Group gap="xs">
-        <InputLabel c="gray.3" size="md">
-          {label}
-        </InputLabel>
+        <InputLabel size="md">{label}</InputLabel>
         {tooltip && (
           <Tooltip label={tooltip}>
             <Text size="sm" style={{ cursor: 'help' }}>
diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index d8d07a78b..fb65aa186 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -6,6 +6,7 @@ import {
   MantineThemeOverride,
   rem,
   Select,
+  Text,
 } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 
@@ -182,6 +183,18 @@ const makeTheme = ({
         return {};
       },
     },
+    Text: Text.extend({
+      styles: (theme, props) => {
+        if (props.variant === 'danger') {
+          return {
+            root: {
+              color: 'var(--color-text-danger)',
+            },
+          };
+        }
+        return {};
+      },
+    }),
     Button: Button.extend({
       vars: (theme, props) => {
         if (props.size === 'xxs') {
diff --git a/packages/app/src/TimelineChart.tsx b/packages/app/src/TimelineChart.tsx
index 96f831ef1..032220b99 100644
--- a/packages/app/src/TimelineChart.tsx
+++ b/packages/app/src/TimelineChart.tsx
@@ -2,6 +2,7 @@ import { memo, RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import cx from 'classnames';
 import { Tooltip } from '@mantine/core';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { color } from '@uiw/react-codemirror';
 
 import useResizable from './hooks/useResizable';
 import { useDrag, usePrevious } from './utils';
@@ -165,7 +166,7 @@ function TimelineXAxis({
           width: 1,
           marginRight: -1,
           marginLeft: i === 0 ? 0 : `${percSpacing.toFixed(6)}%`,
-          background: 'rgba(255, 255, 255, 0.08)',
+          background: 'var(--color-bg-surface)',
         }}
       >
         <div className="ms-2 text-slate-400 fs-8.5">
@@ -338,6 +339,7 @@ type Row = {
   style?: any;
   type?: string;
   className?: string;
+  isActive?: boolean;
 };
 
 export default function TimelineChart({
@@ -560,6 +562,7 @@ export default function TimelineChart({
                   'd-flex align-items-center overflow-hidden',
                   row.className,
                   styles.timelineRow,
+                  row.isActive && styles.timelineRowActive,
                 )}`}
                 style={{
                   // position: 'absolute',
@@ -582,7 +585,7 @@ export default function TimelineChart({
                   <div
                     className={resizeStyles.resizeHandle}
                     onMouseDown={startResize}
-                    style={{ backgroundColor: '#3a3a44' }}
+                    style={{ backgroundColor: 'var(--color-bg-neutral)' }}
                   />
                 </div>
                 <NewTimelineRow
@@ -590,10 +593,11 @@ export default function TimelineChart({
                   height={rowHeight}
                   maxVal={maxVal}
                   eventStyles={{
-                    boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.5)',
                     borderRadius: 2,
                     fontSize: rowHeight * 0.5,
-                    border: '1px solid #FFFFFF10',
+                    border: '1px solid var(--color-border)',
+                    backgroundColor: 'var(--color-bg-neutral)',
+                    color: 'var(--color-text)',
                   }}
                   scale={scale}
                   offset={offset}
diff --git a/packages/app/src/components/ColorSwatchInput.tsx b/packages/app/src/components/ColorSwatchInput.tsx
index 326a06d8b..83e0aca20 100644
--- a/packages/app/src/components/ColorSwatchInput.tsx
+++ b/packages/app/src/components/ColorSwatchInput.tsx
@@ -52,7 +52,6 @@ export const ColorSwatchInput = ({
           size="compact-xs"
           variant="light"
           color="gray"
-          bg="gray.8"
           onClick={() => setOpened(o => !o)}
         >
           {value ? (
diff --git a/packages/app/src/components/ContextSidePanel.tsx b/packages/app/src/components/ContextSidePanel.tsx
index 8ffb50bae..c0045e026 100644
--- a/packages/app/src/components/ContextSidePanel.tsx
+++ b/packages/app/src/components/ContextSidePanel.tsx
@@ -285,8 +285,6 @@ export default function ContextSubpanel({
               />
             )}
             <SegmentedControl
-              bg="dark.7"
-              color="dark.5"
               size="xs"
               data={[
                 { label: '100ms', value: ms('100ms').toString() },
diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx
index ff0f183e9..003f12022 100644
--- a/packages/app/src/components/DBEditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm.tsx
@@ -703,7 +703,7 @@ export default function EditTimeChartForm({
               },
             }}
           />
-          <Box p="md" bg="dark.6" mb="md">
+          <Box p="md" mb="md">
             <HDXMarkdownChart
               config={{
                 markdown: watch('markdown') || 'Preview',
diff --git a/packages/app/src/components/DBInfraPanel.tsx b/packages/app/src/components/DBInfraPanel.tsx
index 1b79c9ebd..895f5d9d2 100644
--- a/packages/app/src/components/DBInfraPanel.tsx
+++ b/packages/app/src/components/DBInfraPanel.tsx
@@ -74,8 +74,6 @@ const InfraSubpanelGroup = ({
         <Group align="center">
           <h4 className="text-slate-300 fs-6 m-0">{title}</h4>
           <SegmentedControl
-            bg="dark.7"
-            color="dark.5"
             size="xs"
             data={[
               { label: '30m', value: '30m' },
@@ -88,8 +86,6 @@ const InfraSubpanelGroup = ({
         </Group>
         <Group align="center">
           <SegmentedControl
-            bg="dark.7"
-            color="dark.5"
             size="xs"
             data={[
               { label: 'SM', value: 'sm' },
diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx
index 64b4582f1..ee96ebca0 100644
--- a/packages/app/src/components/DBRowTable.tsx
+++ b/packages/app/src/components/DBRowTable.tsx
@@ -1020,12 +1020,12 @@ export const RawLogTable = memo(
                     dedupedRows.length === 0 ? (
                     <div className="my-3" data-testid="db-row-table-no-results">
                       No results found.
-                      <Text mt="sm" c="gray.3">
+                      <Text mt="sm">
                         Try checking the query explainer in the search bar if
                         there are any search syntax issues.
                       </Text>
                       {dateRange?.[0] != null && dateRange?.[1] != null ? (
-                        <Text mt="sm" c="gray.3">
+                        <Text mt="sm">
                           Searched Time Range:{' '}
                           {formatDistance(dateRange?.[1], dateRange?.[0])} {'('}
                           <FormatTime
@@ -1389,14 +1389,12 @@ function DBSqlRowTableComponent({
           </Text>
           <Box mah={100} style={{ overflow: 'auto' }}>
             {noisyPatterns.data?.map(p => (
-              <Text c="gray.3" fz="xs" key={p.id}>
+              <Text fz="xs" key={p.id}>
                 {p.pattern}
               </Text>
             ))}
             {noisyPatternIds.length === 0 && (
-              <Text c="gray.3" fz="xs">
-                No noisy patterns found
-              </Text>
+              <Text fz="xs">No noisy patterns found</Text>
             )}
           </Box>
         </Box>
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 4c728eec3..a3fa79eae 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -122,7 +122,7 @@ const FilterPercentage = ({ percentage, isLoading }: FilterPercentageProps) => {
         : `~${Math.round(percentage)}%`;
 
   return (
-    <Text size="xs" c="gray.3" className={isLoading ? 'effect-pulse' : ''}>
+    <Text size="xs" className={isLoading ? 'effect-pulse' : ''}>
       {formattedPercentage}
     </Text>
   );
@@ -991,7 +991,7 @@ const DBSearchPageFiltersComponent = ({
                   withArrow
                   label="Denoise results will visually remove events matching common event patterns from the results table."
                 >
-                  <Text size="xs" c="gray.3" mt="-1px">
+                  <Text size="xs" mt="-1px">
                     <i className="bi bi-noise-reduction"></i> Denoise Results
                   </Text>
                 </Tooltip>
diff --git a/packages/app/src/components/DBTraceWaterfallChart.tsx b/packages/app/src/components/DBTraceWaterfallChart.tsx
index f68eee34d..a98941024 100644
--- a/packages/app/src/components/DBTraceWaterfallChart.tsx
+++ b/packages/app/src/components/DBTraceWaterfallChart.tsx
@@ -476,7 +476,7 @@ export function DBTraceWaterfallChartContainer({
               <div
                 key={index}
                 style={{
-                  borderLeft: '1px solid var(--mantine-color-dark-4)',
+                  borderLeft: '1px solid var(--color-border)',
                   marginLeft: 5,
                   width: 8,
                   minWidth: 8,
@@ -530,8 +530,8 @@ export function DBTraceWaterfallChartContainer({
       style: {
         // paddingTop: 1,
         marginTop: i === 0 ? 32 : 0,
-        backgroundColor: isHighlighted ? '#202127' : undefined,
       },
+      isActive: isHighlighted,
       events: [
         {
           id,
diff --git a/packages/app/src/components/ExceptionSubpanel.tsx b/packages/app/src/components/ExceptionSubpanel.tsx
index ac1e50dd9..5ab5eb1b2 100644
--- a/packages/app/src/components/ExceptionSubpanel.tsx
+++ b/packages/app/src/components/ExceptionSubpanel.tsx
@@ -540,7 +540,7 @@ export const ExceptionSubpanel = ({
           firstException && (
             <>
               <div>
-                <Text fw="bold" component="span" size="sm" c="red.6">
+                <Text fw="bold" component="span" size="sm" variant="danger">
                   {firstException.type}:{' '}
                 </Text>
                 <span className="text-muted">{firstException.value}</span>
diff --git a/packages/app/src/components/InputLanguageSwitch.tsx b/packages/app/src/components/InputLanguageSwitch.tsx
index 312c14b60..0d1bfbb46 100644
--- a/packages/app/src/components/InputLanguageSwitch.tsx
+++ b/packages/app/src/components/InputLanguageSwitch.tsx
@@ -12,12 +12,12 @@ export default function InputLanguageSwitch({
   return (
     <Flex wrap="nowrap" gap="xxxs" px="sm">
       {showHotkey && (
-        <Text c="gray.3" size="xxs" bg="gray.8" px={4} py={0} mr={4} lh={1.4}>
+        <Text size="xxs" bg="gray.8" px={4} py={0} mr={4} lh={1.4}>
           /
         </Text>
       )}
       <Text
-        c={language === 'sql' ? 'green' : 'dark.0'}
+        c={language === 'sql' ? 'green' : 'gray'}
         onClick={() => onLanguageChange('sql')}
         size="xs"
         role="button"
@@ -28,7 +28,7 @@ export default function InputLanguageSwitch({
       <Text
         size="xs"
         role="button"
-        c={language === 'lucene' ? 'green' : 'dark.0'}
+        c={language === 'lucene' ? 'green' : 'gray'}
         onClick={() => onLanguageChange('lucene')}
       >
         Lucene
diff --git a/packages/app/src/components/Table.module.scss b/packages/app/src/components/Table.module.scss
index 36780b020..263fdcf3a 100644
--- a/packages/app/src/components/Table.module.scss
+++ b/packages/app/src/components/Table.module.scss
@@ -122,7 +122,7 @@ $horizontalPadding: 12px;
   }
 
   &:active {
-    background-color: var(--color-bg-surface-hover);
+    background-color: var(--color-bg-field-hover);
     border-color: var(--color-border);
   }
 }
diff --git a/packages/app/src/components/TimePicker/TimePicker.tsx b/packages/app/src/components/TimePicker/TimePicker.tsx
index e3f9697ea..46b4777c8 100644
--- a/packages/app/src/components/TimePicker/TimePicker.tsx
+++ b/packages/app/src/components/TimePicker/TimePicker.tsx
@@ -241,7 +241,12 @@ export const TimePicker = ({
           }}
           rightSection={
             opened && (
-              <Text size="xxs" bg="gray.8" px={4}>
+              <Text
+                size="xxs"
+                bg="var(--color-bg-active)"
+                px={4}
+                c="var(--color-text)"
+              >
                 d
               </Text>
             )
diff --git a/packages/app/styles/TimelineChart.module.scss b/packages/app/styles/TimelineChart.module.scss
index 4836aeef6..fbcb44282 100644
--- a/packages/app/styles/TimelineChart.module.scss
+++ b/packages/app/styles/TimelineChart.module.scss
@@ -2,10 +2,14 @@
   cursor: pointer;
 
   &:hover {
-    background-color: #aaaaff07;
+    background-color: var(--color-bg-muted);
   }
 }
 
+.timelineRowActive {
+  background-color: var(--color-bg-surface);
+}
+
 .labelContainer {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 7e138de49..dcd817d96 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -19,6 +19,7 @@
   --color-bg-active: var(--mantine-color-dark-5);
   --color-bg-field: var(--mantine-color-dark-6);
   --color-bg-field-hover: var(--mantine-color-dark-5);
+  --color-bg-neutral: var(--mantine-color-dark-4);
 
   /* Borders & Dividers */
   --color-border: var(--mantine-color-dark-5);
@@ -83,6 +84,7 @@
   --color-bg-active: var(--mantine-color-gray-4);
   --color-bg-field: var(--color-bg-muted);
   --color-bg-field-hover: var(--mantine-color-gray-1);
+  --color-bg-neutral: var(--mantine-color-gray-5);
 
   /* Borders & Dividers - inverted */
   --color-border: var(--mantine-color-gray-2);

From 8823ef80a63c7ba086185b0c5c5a158e4f1e30f1 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 11 Nov 2025 09:31:15 +0000
Subject: [PATCH 13/49] refactor: Update TabItem component to use CSS variables
 for background colors; adjust height for improved styling consistency;
 enhance BreadcrumbNavigation text color for better visibility; implement
 custom cursor style for table column resizing; modify semantic colors for
 improved theming and accessibility.

---
 packages/app/src/TabItem.tsx                         | 6 ++++--
 packages/app/src/components/DBRowSidePanelHeader.tsx | 2 +-
 packages/app/src/components/DBTable/TableHeader.tsx  | 4 +++-
 packages/app/src/components/Table.module.scss        | 6 ++++++
 packages/app/styles/_semantic-colors.scss            | 9 +++++----
 5 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/TabItem.tsx b/packages/app/src/TabItem.tsx
index 1a8da8641..1863bead1 100644
--- a/packages/app/src/TabItem.tsx
+++ b/packages/app/src/TabItem.tsx
@@ -23,11 +23,13 @@ export default function TabItem({
       {...props}
     >
       <span>{children}</span>
-      <div className="w-100 mt-2" style={{ height: 4 }}>
+      <div className="w-100 mt-2" style={{ height: 2 }}>
         <div
           className="h-100 w-100"
           style={{
-            background: active ? '#50FA7B' : '#242d33',
+            background: active
+              ? 'var(--color-bg-success)'
+              : 'var(--color-border)',
           }}
         ></div>
       </div>
diff --git a/packages/app/src/components/DBRowSidePanelHeader.tsx b/packages/app/src/components/DBRowSidePanelHeader.tsx
index 9fefec759..6b9c13102 100644
--- a/packages/app/src/components/DBRowSidePanelHeader.tsx
+++ b/packages/app/src/components/DBRowSidePanelHeader.tsx
@@ -89,7 +89,7 @@ function BreadcrumbNavigation({
             onClick={() => handleBreadcrumbItemClick(index)}
             style={{ textDecoration: 'none' }}
           >
-            <Text size="sm" c="blue.4" style={{ cursor: 'pointer' }}>
+            <Text size="sm" c="blue" style={{ cursor: 'pointer' }}>
               {index === 0 ? 'Original Event' : crumb.label}
             </Text>
           </UnstyledButton>
diff --git a/packages/app/src/components/DBTable/TableHeader.tsx b/packages/app/src/components/DBTable/TableHeader.tsx
index 6c9f8cb02..c4ca3bfac 100644
--- a/packages/app/src/components/DBTable/TableHeader.tsx
+++ b/packages/app/src/components/DBTable/TableHeader.tsx
@@ -9,6 +9,8 @@ import { flexRender, Header } from '@tanstack/react-table';
 
 import { UNDEFINED_WIDTH } from '@/tableUtils';
 
+import styles from '../Table.module.scss';
+
 export default function TableHeader({
   isLast,
   header,
@@ -83,7 +85,7 @@ export default function TableHeader({
               onMouseDown={header.getResizeHandler()}
               onTouchStart={header.getResizeHandler()}
               className={cx(
-                `resizer text-cursor-col-resize`,
+                `resizer ${styles.cursorColResize}`,
                 header.column.getIsResizing() && 'isResizing',
               )}
             >
diff --git a/packages/app/src/components/Table.module.scss b/packages/app/src/components/Table.module.scss
index 263fdcf3a..965bab986 100644
--- a/packages/app/src/components/Table.module.scss
+++ b/packages/app/src/components/Table.module.scss
@@ -126,3 +126,9 @@ $horizontalPadding: 12px;
     border-color: var(--color-border);
   }
 }
+
+.cursorColResize {
+  cursor: col-resize;
+  display: flex;
+  align-items: center;
+}
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index dcd817d96..d1e615e00 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -1,7 +1,6 @@
 :root {
   /* Semantic Highlights (same for both themes) */
   --color-accent: var(--mantine-color-blue-5);
-  --color-success: var(--mantine-color-green-5);
   --color-warning: var(--mantine-color-yellow-5);
   --color-error: var(--mantine-color-red-5);
 }
@@ -20,6 +19,7 @@
   --color-bg-field: var(--mantine-color-dark-6);
   --color-bg-field-hover: var(--mantine-color-dark-5);
   --color-bg-neutral: var(--mantine-color-dark-4);
+  --color-bg-success: var(--mantine-color-green-5);
 
   /* Borders & Dividers */
   --color-border: var(--mantine-color-dark-5);
@@ -32,7 +32,7 @@
   --color-text-muted: var(--mantine-color-dark-2);
   --color-text-muted-hover: var(--mantine-color-dark-1);
   --color-text-inverse: var(--mantine-color-dark-9);
-  --color-text-success: var(--mantine-color-dark-0);
+  --color-text-success: var(--mantine-color-green-4);
   --color-text-success-hover: var(--mantine-color-green-3);
   --color-text-danger: var(--mantine-color-red-4);
 
@@ -85,6 +85,7 @@
   --color-bg-field: var(--color-bg-muted);
   --color-bg-field-hover: var(--mantine-color-gray-1);
   --color-bg-neutral: var(--mantine-color-gray-5);
+  --color-bg-success: var(--mantine-color-green-8);
 
   /* Borders & Dividers - inverted */
   --color-border: var(--mantine-color-gray-2);
@@ -119,10 +120,10 @@
   --color-bg-kbd: var(--mantine-color-dark-0);
 
   /* JSON Syntax Highlighting */
-  --color-json-string: var(--mantine-color-green-7);
+  --color-json-string: var(--mantine-color-green-9);
   --color-json-number: var(--mantine-color-orange-7);
   --color-json-boolean: var(--mantine-color-orange-7);
-  --color-json-key: var(--mantine-color-violet-7);
+  --color-json-key: var(--mantine-color-violet-9);
   --color-json-object: var(--mantine-color-green-7);
   --color-json-array: var(--mantine-color-green-7);
   --color-json-punctuation: var(--mantine-color-dark-5);

From 957c0e0d7f7348db70dd7c1c760c12c07f8215fe Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 11 Nov 2025 09:43:20 +0000
Subject: [PATCH 14/49] refactor: Remove unused semantic color variables for
 improved clarity and maintainability

---
 packages/app/styles/_semantic-colors.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index d1e615e00..aed6966b3 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -1,10 +1,3 @@
-:root {
-  /* Semantic Highlights (same for both themes) */
-  --color-accent: var(--mantine-color-blue-5);
-  --color-warning: var(--mantine-color-yellow-5);
-  --color-error: var(--mantine-color-red-5);
-}
-
 /* Dark Mode (default) */
 [data-mantine-color-scheme='dark'] {
   /* Backgrounds */

From c6ffb2a894b1cdd02f42a0f097fdcd3e8b1f05d2 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 11 Nov 2025 10:03:20 +0000
Subject: [PATCH 15/49] refactor: Remove Bootstrap dependencies and replace
 layout utilities with custom implementations for improved consistency and
 maintainability

---
 packages/app/package.json                     |   2 -
 packages/app/styles/_bootstrap-utilities.scss | 872 +++++++++++++++++-
 packages/app/styles/_utilities.scss           |  92 +-
 yarn.lock                                     | 148 +--
 4 files changed, 854 insertions(+), 260 deletions(-)

diff --git a/packages/app/package.json b/packages/app/package.json
index e03029477..e79e0a29f 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -50,7 +50,6 @@
     "@uiw/codemirror-themes": "^4.23.3",
     "@uiw/react-codemirror": "^4.23.3",
     "@xyflow/react": "^12.9.0",
-    "bootstrap": "^5.1.3",
     "chrono-node": "^2.7.8",
     "classnames": "^2.3.1",
     "crypto-js": "^4.2.0",
@@ -76,7 +75,6 @@
     "nuqs": "^1.17.0",
     "object-hash": "^3.0.0",
     "react": "18.3.1",
-    "react-bootstrap": "^2.4.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.3.1",
     "react-error-boundary": "^3.1.4",
diff --git a/packages/app/styles/_bootstrap-utilities.scss b/packages/app/styles/_bootstrap-utilities.scss
index 97efcd59b..fde8a751e 100644
--- a/packages/app/styles/_bootstrap-utilities.scss
+++ b/packages/app/styles/_bootstrap-utilities.scss
@@ -1,26 +1,848 @@
 /* stylelint-disable */
-// Bootstrap layout utility classes only
-// This provides classes like d-flex, flex-column, m-*, p-*, etc.
-// Excludes color utilities to avoid conflicts with custom colors
-
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/maps';
-@import '~bootstrap/scss/mixins';
-@import '~bootstrap/scss/utilities';
-
-// Override utilities to only include layout classes (no color utilities)
-$utilities: map-remove(
-  $utilities,
-  'color',
-  'background-color',
-  'gradient',
-  'text-color',
-  'link-color',
-  'link-offset',
-  'link-underline',
-  'link-underline-opacity'
-);
-
-// Generate utility classes
-@import '~bootstrap/scss/utilities/api';
+// Custom layout utility classes to replace Bootstrap
+// Provides classes like d-flex, flex-column, m-*, p-*, etc.
+
+// Display utilities
+.d-none {
+  display: none !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+// Flexbox utilities
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.flex-fill {
+  flex: 1 1 auto !important;
+}
+
+.flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+// Justify content
+.justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.justify-content-evenly {
+  justify-content: space-evenly !important;
+}
+
+// Align items
+.align-items-start {
+  align-items: flex-start !important;
+}
+
+.align-items-end {
+  align-items: flex-end !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.align-items-baseline {
+  align-items: baseline !important;
+}
+
+.align-items-stretch {
+  align-items: stretch !important;
+}
+
+// Align content
+.align-content-start {
+  align-content: flex-start !important;
+}
+
+.align-content-end {
+  align-content: flex-end !important;
+}
+
+.align-content-center {
+  align-content: center !important;
+}
+
+.align-content-between {
+  align-content: space-between !important;
+}
+
+.align-content-around {
+  align-content: space-around !important;
+}
+
+.align-content-stretch {
+  align-content: stretch !important;
+}
+
+// Align self
+.align-self-auto {
+  align-self: auto !important;
+}
+
+.align-self-start {
+  align-self: flex-start !important;
+}
+
+.align-self-end {
+  align-self: flex-end !important;
+}
+
+.align-self-center {
+  align-self: center !important;
+}
+
+.align-self-baseline {
+  align-self: baseline !important;
+}
+
+.align-self-stretch {
+  align-self: stretch !important;
+}
+
+// Gap utilities (using Mantine spacing)
+.gap-0 {
+  gap: 0 !important;
+}
+
+.gap-1 {
+  gap: var(--mantine-spacing-xs) !important;
+}
+
+.gap-2 {
+  gap: var(--mantine-spacing-sm) !important;
+}
+
+.gap-3 {
+  gap: var(--mantine-spacing-md) !important;
+}
+
+.gap-4 {
+  gap: var(--mantine-spacing-lg) !important;
+}
+
+.gap-5 {
+  gap: var(--mantine-spacing-xl) !important;
+}
+
+// Margin utilities (using Mantine spacing)
+.m-0 {
+  margin: 0 !important;
+}
+
+.m-1 {
+  margin: var(--mantine-spacing-xs) !important;
+}
+
+.m-2 {
+  margin: var(--mantine-spacing-sm) !important;
+}
+
+.m-3 {
+  margin: var(--mantine-spacing-md) !important;
+}
+
+.m-4 {
+  margin: var(--mantine-spacing-lg) !important;
+}
+
+.m-5 {
+  margin: var(--mantine-spacing-xl) !important;
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+// Margin top
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mt-1 {
+  margin-top: var(--mantine-spacing-xs) !important;
+}
+
+.mt-2 {
+  margin-top: var(--mantine-spacing-sm) !important;
+}
+
+.mt-3 {
+  margin-top: var(--mantine-spacing-md) !important;
+}
+
+.mt-4 {
+  margin-top: var(--mantine-spacing-lg) !important;
+}
+
+.mt-5 {
+  margin-top: var(--mantine-spacing-xl) !important;
+}
+
+.mt-auto {
+  margin-top: auto !important;
+}
+
+// Margin bottom
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.mb-1 {
+  margin-bottom: var(--mantine-spacing-xs) !important;
+}
+
+.mb-2 {
+  margin-bottom: var(--mantine-spacing-sm) !important;
+}
+
+.mb-3 {
+  margin-bottom: var(--mantine-spacing-md) !important;
+}
+
+.mb-4 {
+  margin-bottom: var(--mantine-spacing-lg) !important;
+}
+
+.mb-5 {
+  margin-bottom: var(--mantine-spacing-xl) !important;
+}
+
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+// Margin start (left in LTR)
+.ms-0 {
+  margin-inline-start: 0 !important;
+}
+
+.ms-1 {
+  margin-inline-start: var(--mantine-spacing-xs) !important;
+}
+
+.ms-2 {
+  margin-inline-start: var(--mantine-spacing-sm) !important;
+}
+
+.ms-3 {
+  margin-inline-start: var(--mantine-spacing-md) !important;
+}
+
+.ms-4 {
+  margin-inline-start: var(--mantine-spacing-lg) !important;
+}
+
+.ms-5 {
+  margin-inline-start: var(--mantine-spacing-xl) !important;
+}
+
+.ms-auto {
+  margin-inline-start: auto !important;
+}
+
+// Margin end (right in LTR)
+.me-0 {
+  margin-inline-end: 0 !important;
+}
+
+.me-1 {
+  margin-inline-end: var(--mantine-spacing-xs) !important;
+}
+
+.me-2 {
+  margin-inline-end: var(--mantine-spacing-sm) !important;
+}
+
+.me-3 {
+  margin-inline-end: var(--mantine-spacing-md) !important;
+}
+
+.me-4 {
+  margin-inline-end: var(--mantine-spacing-lg) !important;
+}
+
+.me-5 {
+  margin-inline-end: var(--mantine-spacing-xl) !important;
+}
+
+.me-auto {
+  margin-inline-end: auto !important;
+}
+
+// Margin x-axis
+.mx-0 {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.mx-1 {
+  margin-left: var(--mantine-spacing-xs) !important;
+  margin-right: var(--mantine-spacing-xs) !important;
+}
+
+.mx-2 {
+  margin-left: var(--mantine-spacing-sm) !important;
+  margin-right: var(--mantine-spacing-sm) !important;
+}
+
+.mx-3 {
+  margin-left: var(--mantine-spacing-md) !important;
+  margin-right: var(--mantine-spacing-md) !important;
+}
+
+.mx-4 {
+  margin-left: var(--mantine-spacing-lg) !important;
+  margin-right: var(--mantine-spacing-lg) !important;
+}
+
+.mx-5 {
+  margin-left: var(--mantine-spacing-xl) !important;
+  margin-right: var(--mantine-spacing-xl) !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+// Margin y-axis
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.my-1 {
+  margin-top: var(--mantine-spacing-xs) !important;
+  margin-bottom: var(--mantine-spacing-xs) !important;
+}
+
+.my-2 {
+  margin-top: var(--mantine-spacing-sm) !important;
+  margin-bottom: var(--mantine-spacing-sm) !important;
+}
+
+.my-3 {
+  margin-top: var(--mantine-spacing-md) !important;
+  margin-bottom: var(--mantine-spacing-md) !important;
+}
+
+.my-4 {
+  margin-top: var(--mantine-spacing-lg) !important;
+  margin-bottom: var(--mantine-spacing-lg) !important;
+}
+
+.my-5 {
+  margin-top: var(--mantine-spacing-xl) !important;
+  margin-bottom: var(--mantine-spacing-xl) !important;
+}
+
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+// Padding utilities (using Mantine spacing)
+.p-0 {
+  padding: 0 !important;
+}
+
+.p-1 {
+  padding: var(--mantine-spacing-xs) !important;
+}
+
+.p-2 {
+  padding: var(--mantine-spacing-sm) !important;
+}
+
+.p-3 {
+  padding: var(--mantine-spacing-md) !important;
+}
+
+.p-4 {
+  padding: var(--mantine-spacing-lg) !important;
+}
+
+.p-5 {
+  padding: var(--mantine-spacing-xl) !important;
+}
+
+// Padding top
+.pt-0 {
+  padding-top: 0 !important;
+}
+
+.pt-1 {
+  padding-top: var(--mantine-spacing-xs) !important;
+}
+
+.pt-2 {
+  padding-top: var(--mantine-spacing-sm) !important;
+}
+
+.pt-3 {
+  padding-top: var(--mantine-spacing-md) !important;
+}
+
+.pt-4 {
+  padding-top: var(--mantine-spacing-lg) !important;
+}
+
+.pt-5 {
+  padding-top: var(--mantine-spacing-xl) !important;
+}
+
+// Padding bottom
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+
+.pb-1 {
+  padding-bottom: var(--mantine-spacing-xs) !important;
+}
+
+.pb-2 {
+  padding-bottom: var(--mantine-spacing-sm) !important;
+}
+
+.pb-3 {
+  padding-bottom: var(--mantine-spacing-md) !important;
+}
+
+.pb-4 {
+  padding-bottom: var(--mantine-spacing-lg) !important;
+}
+
+.pb-5 {
+  padding-bottom: var(--mantine-spacing-xl) !important;
+}
+
+// Padding start (left in LTR)
+.ps-0 {
+  padding-inline-start: 0 !important;
+}
+
+.ps-1 {
+  padding-inline-start: var(--mantine-spacing-xs) !important;
+}
+
+.ps-2 {
+  padding-inline-start: var(--mantine-spacing-sm) !important;
+}
+
+.ps-3 {
+  padding-inline-start: var(--mantine-spacing-md) !important;
+}
+
+.ps-4 {
+  padding-inline-start: var(--mantine-spacing-lg) !important;
+}
+
+.ps-5 {
+  padding-inline-start: var(--mantine-spacing-xl) !important;
+}
+
+// Padding end (right in LTR)
+.pe-0 {
+  padding-inline-end: 0 !important;
+}
+
+.pe-1 {
+  padding-inline-end: var(--mantine-spacing-xs) !important;
+}
+
+.pe-2 {
+  padding-inline-end: var(--mantine-spacing-sm) !important;
+}
+
+.pe-3 {
+  padding-inline-end: var(--mantine-spacing-md) !important;
+}
+
+.pe-4 {
+  padding-inline-end: var(--mantine-spacing-lg) !important;
+}
+
+.pe-5 {
+  padding-inline-end: var(--mantine-spacing-xl) !important;
+}
+
+// Padding x-axis
+.px-0 {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.px-1 {
+  padding-left: var(--mantine-spacing-xs) !important;
+  padding-right: var(--mantine-spacing-xs) !important;
+}
+
+.px-2 {
+  padding-left: var(--mantine-spacing-sm) !important;
+  padding-right: var(--mantine-spacing-sm) !important;
+}
+
+.px-3 {
+  padding-left: var(--mantine-spacing-md) !important;
+  padding-right: var(--mantine-spacing-md) !important;
+}
+
+.px-4 {
+  padding-left: var(--mantine-spacing-lg) !important;
+  padding-right: var(--mantine-spacing-lg) !important;
+}
+
+.px-5 {
+  padding-left: var(--mantine-spacing-xl) !important;
+  padding-right: var(--mantine-spacing-xl) !important;
+}
+
+.px-6 {
+  padding-left: calc(var(--mantine-spacing-xl) * 1.5) !important;
+  padding-right: calc(var(--mantine-spacing-xl) * 1.5) !important;
+}
+
+// Padding y-axis
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.py-1 {
+  padding-top: var(--mantine-spacing-xs) !important;
+  padding-bottom: var(--mantine-spacing-xs) !important;
+}
+
+.py-2 {
+  padding-top: var(--mantine-spacing-sm) !important;
+  padding-bottom: var(--mantine-spacing-sm) !important;
+}
+
+.py-3 {
+  padding-top: var(--mantine-spacing-md) !important;
+  padding-bottom: var(--mantine-spacing-md) !important;
+}
+
+.py-4 {
+  padding-top: var(--mantine-spacing-lg) !important;
+  padding-bottom: var(--mantine-spacing-lg) !important;
+}
+
+.py-5 {
+  padding-top: var(--mantine-spacing-xl) !important;
+  padding-bottom: var(--mantine-spacing-xl) !important;
+}
+
+// Width utilities
+.w-25 {
+  width: 25% !important;
+}
+
+.w-50 {
+  width: 50% !important;
+}
+
+.w-75 {
+  width: 75% !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.w-auto {
+  width: auto !important;
+}
+
+// Height utilities
+.h-25 {
+  height: 25% !important;
+}
+
+.h-50 {
+  height: 50% !important;
+}
+
+.h-75 {
+  height: 75% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.h-auto {
+  height: auto !important;
+}
+
+// Viewport height/width
+.vh-100 {
+  height: 100vh !important;
+}
+
+.vw-100 {
+  width: 100vw !important;
+}
+
+.min-vh-100 {
+  min-height: 100vh !important;
+}
+
+.min-vw-100 {
+  min-width: 100vw !important;
+}
+
+// Min/Max width
+.mw-100 {
+  max-width: 100% !important;
+}
+
+.min-w-0 {
+  min-width: 0 !important;
+}
+
+// Position utilities
+.position-static {
+  position: static !important;
+}
+
+.position-relative {
+  position: relative !important;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.position-fixed {
+  position: fixed !important;
+}
+
+.position-sticky {
+  position: sticky !important;
+}
+
+// Position values
+.top-0 {
+  top: 0 !important;
+}
+
+.top-50 {
+  top: 50% !important;
+}
+
+.top-100 {
+  top: 100% !important;
+}
+
+.bottom-0 {
+  bottom: 0 !important;
+}
+
+.bottom-50 {
+  bottom: 50% !important;
+}
+
+.bottom-100 {
+  bottom: 100% !important;
+}
+
+.start-0 {
+  left: 0 !important;
+}
+
+.start-50 {
+  left: 50% !important;
+}
+
+.start-100 {
+  left: 100% !important;
+}
+
+.end-0 {
+  right: 0 !important;
+}
+
+.end-50 {
+  right: 50% !important;
+}
+
+.end-100 {
+  right: 100% !important;
+}
+
+// Fixed positioning helpers
+.fixed-top {
+  position: fixed !important;
+  top: 0 !important;
+  right: 0 !important;
+  left: 0 !important;
+  z-index: 1030 !important;
+}
+
+.fixed-bottom {
+  position: fixed !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  z-index: 1030 !important;
+}
+
+// Overflow utilities
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
+// Text utilities
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+// Pointer events
+.pe-none {
+  pointer-events: none !important;
+}
+
+.pe-auto {
+  pointer-events: auto !important;
+}
+
+// Cursor
+.cursor-pointer {
+  cursor: pointer !important;
+}
+
+// Visibility
+.visible {
+  visibility: visible !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+// Table utilities
+.table {
+  width: 100%;
+  margin-bottom: 1rem;
+  color: var(--color-text);
+  vertical-align: top;
+  border-color: var(--color-border);
+}
+
+// Text alignment
+.text-start {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-end {
+  text-align: right !important;
+}
+
+// Text wrapping
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
index 2c13e47a9..aca8aa227 100644
--- a/packages/app/styles/_utilities.scss
+++ b/packages/app/styles/_utilities.scss
@@ -1,5 +1,6 @@
 // Custom utility classes for HyperDX
-// These supplement Bootstrap utilities with Mantine-based styling
+// These are HyperDX-specific utilities using semantic color tokens
+// Layout utilities (spacing, display, flexbox, etc.) are in _bootstrap-utilities.scss
 
 // Background utilities
 .bg-surface {
@@ -123,92 +124,3 @@
 .fw-600 {
   font-weight: 600 !important;
 }
-
-// Padding utilities (to supplement Bootstrap if needed)
-.p-0 {
-  padding: 0 !important;
-}
-
-.p-2 {
-  padding: var(--mantine-spacing-sm) !important;
-}
-
-.p-3 {
-  padding: var(--mantine-spacing-md) !important;
-}
-
-.px-3 {
-  padding-left: var(--mantine-spacing-md) !important;
-  padding-right: var(--mantine-spacing-md) !important;
-}
-
-.py-2 {
-  padding-top: var(--mantine-spacing-sm) !important;
-  padding-bottom: var(--mantine-spacing-sm) !important;
-}
-
-.pt-2 {
-  padding-top: var(--mantine-spacing-sm) !important;
-}
-
-.pb-1 {
-  padding-bottom: var(--mantine-spacing-xs) !important;
-}
-
-// Margin utilities
-.m-0 {
-  margin: 0 !important;
-}
-
-.me-1 {
-  margin-right: var(--mantine-spacing-xs) !important;
-}
-
-.me-2 {
-  margin-right: var(--mantine-spacing-sm) !important;
-}
-
-.mb-2 {
-  margin-bottom: var(--mantine-spacing-sm) !important;
-}
-
-.mt-2 {
-  margin-top: var(--mantine-spacing-sm) !important;
-}
-
-// Width utilities
-.w-100 {
-  width: 100% !important;
-}
-
-.w-auto {
-  width: auto !important;
-}
-
-// Display utilities (supplement Bootstrap)
-.d-block {
-  display: block !important;
-}
-
-.d-flex {
-  display: flex !important;
-}
-
-// Text alignment
-.text-start {
-  text-align: left !important;
-}
-
-.text-center {
-  text-align: center !important;
-}
-
-.text-end {
-  text-align: right !important;
-}
-
-.text-truncate {
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-}
diff --git a/yarn.lock b/yarn.lock
index ea2edc6ae..e7ab304f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2750,7 +2750,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.21.0
   resolution: "@babel/runtime@npm:7.21.0"
   dependencies:
@@ -4453,7 +4453,6 @@ __metadata:
     "@uiw/codemirror-themes": "npm:^4.23.3"
     "@uiw/react-codemirror": "npm:^4.23.3"
     "@xyflow/react": "npm:^12.9.0"
-    bootstrap: "npm:^5.1.3"
     chrono-node: "npm:^2.7.8"
     classnames: "npm:^2.3.1"
     crypto-js: "npm:^4.2.0"
@@ -4489,7 +4488,6 @@ __metadata:
     postcss-preset-mantine: "npm:^1.15.0"
     prettier: "npm:^3.3.2"
     react: "npm:18.3.1"
-    react-bootstrap: "npm:^2.4.0"
     react-copy-to-clipboard: "npm:^5.1.0"
     react-dom: "npm:18.3.1"
     react-error-boundary: "npm:^3.1.4"
@@ -7962,48 +7960,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-aria/ssr@npm:^3.4.1":
-  version: 3.5.0
-  resolution: "@react-aria/ssr@npm:3.5.0"
-  dependencies:
-    "@swc/helpers": "npm:^0.4.14"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 10c0/d81b7bf30b5fc20e315ff17a4d4daff5535194ac483dee502314dc0cae21fb50954e0fe8a632cc766bf7a16616088f7583d601522dd86b9c3acae2261d115b37
-  languageName: node
-  linkType: hard
-
-"@restart/hooks@npm:^0.4.6, @restart/hooks@npm:^0.4.7":
-  version: 0.4.9
-  resolution: "@restart/hooks@npm:0.4.9"
-  dependencies:
-    dequal: "npm:^2.0.2"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 10c0/2f34918bc3174a399b9d7f0f43abec505a494da33f787e612581a35b71fdc3ca5064772e991ac4a6991db31ce3e1fde0e1facbe24e80489a44e1a09f79d7a619
-  languageName: node
-  linkType: hard
-
-"@restart/ui@npm:^1.4.1":
-  version: 1.6.1
-  resolution: "@restart/ui@npm:1.6.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.20.7"
-    "@popperjs/core": "npm:^2.11.6"
-    "@react-aria/ssr": "npm:^3.4.1"
-    "@restart/hooks": "npm:^0.4.7"
-    "@types/warning": "npm:^3.0.0"
-    dequal: "npm:^2.0.3"
-    dom-helpers: "npm:^5.2.0"
-    uncontrollable: "npm:^7.2.1"
-    warning: "npm:^4.0.3"
-  peerDependencies:
-    react: ">=16.14.0"
-    react-dom: ">=16.14.0"
-  checksum: 10c0/1e0def88033d00ad6b216ad95e292d253271ace3b5ae2e965b4acfbec687b1bc33509072848a535130825c6d72c7b47695a178b28caf4dc4a10a618a9ff9a7d0
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-android-arm-eabi@npm:4.35.0":
   version: 4.35.0
   resolution: "@rollup/rollup-android-arm-eabi@npm:4.35.0"
@@ -9209,15 +9165,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:^0.4.14":
-  version: 0.4.14
-  resolution: "@swc/helpers@npm:0.4.14"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/a8bd2e291fca73aa35ff316fb1aa9fb9554856518c8bf64ab5a355fb587d79d04d67f95033012fcdc94f507d22484871d95dc72efdd9ff13cc5d0ac68dfba999
-  languageName: node
-  linkType: hard
-
 "@tabler/icons-react@npm:^3.5.0":
   version: 3.5.0
   resolution: "@tabler/icons-react@npm:3.5.0"
@@ -10412,7 +10359,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-transition-group@npm:^4.4.0, @types/react-transition-group@npm:^4.4.4":
+"@types/react-transition-group@npm:^4.4.0":
   version: 4.4.5
   resolution: "@types/react-transition-group@npm:4.4.5"
   dependencies:
@@ -10598,13 +10545,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/warning@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "@types/warning@npm:3.0.0"
-  checksum: 10c0/e2936be93a02b1027e10dfe61e64e426a6996adeff736221a4c3ba47f6e25a1566f65d5183d70992cf5c13ec844280cafc872884b389c02bf04cd86042e2be7b
-  languageName: node
-  linkType: hard
-
 "@types/webidl-conversions@npm:*":
   version: 7.0.0
   resolution: "@types/webidl-conversions@npm:7.0.0"
@@ -12426,15 +12366,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bootstrap@npm:^5.1.3":
-  version: 5.2.3
-  resolution: "bootstrap@npm:5.2.3"
-  peerDependencies:
-    "@popperjs/core": ^2.11.6
-  checksum: 10c0/3db5d1e1047fb17ee5b62d830597424179f9cffd2139a89e932ee6bb66b7ec5bdb519028ec07d633bb1926a7fea6c4b5625846478da272f6aacd74d4920dbeb9
-  languageName: node
-  linkType: hard
-
 "bowser@npm:^2.11.0":
   version: 2.11.0
   resolution: "bowser@npm:2.11.0"
@@ -14717,7 +14648,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-helpers@npm:^5.0.1, dom-helpers@npm:^5.2.0, dom-helpers@npm:^5.2.1":
+"dom-helpers@npm:^5.0.1":
   version: 5.2.1
   resolution: "dom-helpers@npm:5.2.1"
   dependencies:
@@ -24146,18 +24077,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types-extra@npm:^1.1.0":
-  version: 1.1.1
-  resolution: "prop-types-extra@npm:1.1.1"
-  dependencies:
-    react-is: "npm:^16.3.2"
-    warning: "npm:^4.0.0"
-  peerDependencies:
-    react: ">=0.14.0"
-  checksum: 10c0/5521568f331f0ba426681fe368f8d43d58f5f3d7a82cd63411abad579d4ac2e6667dff0f76ace6bf7d61468c490c4201a1f658020fad0fb6bbf77e7902604380
-  languageName: node
-  linkType: hard
-
 "prop-types@npm:15.x, prop-types@npm:^15.0.0, prop-types@npm:^15.5.7, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
@@ -24524,33 +24443,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-bootstrap@npm:^2.4.0":
-  version: 2.7.2
-  resolution: "react-bootstrap@npm:2.7.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.17.2"
-    "@restart/hooks": "npm:^0.4.6"
-    "@restart/ui": "npm:^1.4.1"
-    "@types/react-transition-group": "npm:^4.4.4"
-    classnames: "npm:^2.3.1"
-    dom-helpers: "npm:^5.2.1"
-    invariant: "npm:^2.2.4"
-    prop-types: "npm:^15.8.1"
-    prop-types-extra: "npm:^1.1.0"
-    react-transition-group: "npm:^4.4.2"
-    uncontrollable: "npm:^7.2.1"
-    warning: "npm:^4.0.3"
-  peerDependencies:
-    "@types/react": ">=16.14.8"
-    react: ">=16.14.0"
-    react-dom: ">=16.14.0"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/712c98ed14bea14f4aa4fb7af686b959c5d31c57ad95333fdc6ca75a822b3ce948785b89f38465e34687fab75f76f56e6ab765d9e99ba510d451abed41d3898b
-  languageName: node
-  linkType: hard
-
 "react-colorful@npm:^5.1.2":
   version: 5.6.1
   resolution: "react-colorful@npm:5.6.1"
@@ -24729,7 +24621,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1, react-is@npm:^16.3.2, react-is@npm:^16.7.0":
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
@@ -24773,13 +24665,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-lifecycles-compat@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "react-lifecycles-compat@npm:3.0.4"
-  checksum: 10c0/1d0df3c85af79df720524780f00c064d53a9dd1899d785eddb7264b378026979acbddb58a4b7e06e7d0d12aa1494fd5754562ee55d32907b15601068dae82c27
-  languageName: node
-  linkType: hard
-
 "react-markdown@npm:^8.0.4":
   version: 8.0.5
   resolution: "react-markdown@npm:8.0.5"
@@ -25023,7 +24908,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-transition-group@npm:4.4.5, react-transition-group@npm:^4.3.0, react-transition-group@npm:^4.4.2, react-transition-group@npm:^4.4.5":
+"react-transition-group@npm:4.4.5, react-transition-group@npm:^4.3.0, react-transition-group@npm:^4.4.5":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"
   dependencies:
@@ -28574,20 +28459,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uncontrollable@npm:^7.2.1":
-  version: 7.2.1
-  resolution: "uncontrollable@npm:7.2.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.6.3"
-    "@types/react": "npm:>=16.9.11"
-    invariant: "npm:^2.2.4"
-    react-lifecycles-compat: "npm:^3.0.4"
-  peerDependencies:
-    react: ">=15.0.0"
-  checksum: 10c0/81473e892027a99f1ead6b9afd16db65097651cd36c4b6db710728f206f1fc4b82ba9170ecb4a1127a23857e01ba51c0194d0a7cfeecfea61ba9418e0276cb56
-  languageName: node
-  linkType: hard
-
 "undefsafe@npm:^2.0.5":
   version: 2.0.5
   resolution: "undefsafe@npm:2.0.5"
@@ -29288,15 +29159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.0, warning@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "warning@npm:4.0.3"
-  dependencies:
-    loose-envify: "npm:^1.0.0"
-  checksum: 10c0/aebab445129f3e104c271f1637fa38e55eb25f968593e3825bd2f7a12bd58dc3738bb70dc8ec85826621d80b4acfed5a29ebc9da17397c6125864d72301b937e
-  languageName: node
-  linkType: hard
-
 "watchpack@npm:^2.2.0, watchpack@npm:^2.4.1":
   version: 2.4.1
   resolution: "watchpack@npm:2.4.1"

From c3fa4d7a6254fa7d63afbaa471a6f05e13b26a9c Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 11 Nov 2025 11:33:33 +0000
Subject: [PATCH 16/49] refactor: Update background color classes to use new
 highlighted color variable; remove unused color classes for improved clarity
 and maintainability

---
 packages/app/src/HDXMultiSeriesTableChart.tsx |   2 +-
 packages/app/src/SearchInputV2.tsx            |  12 +-
 packages/app/src/SessionsPage.tsx             |   2 +-
 .../app/src/components/HyperJson.module.scss  |   8 +-
 packages/app/styles/LogTable.module.scss      |   2 +-
 packages/app/styles/_semantic-colors.scss     |   3 +-
 packages/app/styles/_utilities.scss           |  36 ++++
 packages/app/styles/app.scss                  | 163 ------------------
 8 files changed, 51 insertions(+), 177 deletions(-)

diff --git a/packages/app/src/HDXMultiSeriesTableChart.tsx b/packages/app/src/HDXMultiSeriesTableChart.tsx
index ab8f93bdb..352c79d95 100644
--- a/packages/app/src/HDXMultiSeriesTableChart.tsx
+++ b/packages/app/src/HDXMultiSeriesTableChart.tsx
@@ -251,7 +251,7 @@ export const Table = ({
             return (
               <tr
                 key={virtualRow.key}
-                className="bg-default-dark-grey-hover"
+                className="bg-muted-hover"
                 data-index={virtualRow.index}
                 ref={rowVirtualizer.measureElement}
               >
diff --git a/packages/app/src/SearchInputV2.tsx b/packages/app/src/SearchInputV2.tsx
index 7428d015e..3fc1e99f4 100644
--- a/packages/app/src/SearchInputV2.tsx
+++ b/packages/app/src/SearchInputV2.tsx
@@ -118,7 +118,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Full Text:</span>
             <code
-              className="text-muted bg-muted-hover p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -133,7 +133,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Substring:</span>
             <code
-              className="text-muted bg-muted-hover p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -148,7 +148,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Exact:</span>
             <code
-              className="text-muted bg-muted-hover p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -163,7 +163,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Not:</span>
             <code
-              className="text-muted bg-muted-hover p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -178,7 +178,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Existence:</span>
             <code
-              className="text-muted bg-muted-hover p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -193,7 +193,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Boolean:</span>
             <code
-              className="text-muted bg-muted-hover p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
diff --git a/packages/app/src/SessionsPage.tsx b/packages/app/src/SessionsPage.tsx
index edab3148c..5f5b5bf96 100644
--- a/packages/app/src/SessionsPage.tsx
+++ b/packages/app/src/SessionsPage.tsx
@@ -84,7 +84,7 @@ function SessionCard({
   return (
     <div
       data-testid={`session-card-${sessionId}`}
-      className="bg-muted rounded p-3 d-flex align-items-center justify-content-between text-white-hover-success-trigger"
+      className="bg-muted rounded p-3 d-flex align-items-center justify-content-between"
       onClick={onClick}
       role="button"
     >
diff --git a/packages/app/src/components/HyperJson.module.scss b/packages/app/src/components/HyperJson.module.scss
index dbbb18ce8..d31a30f7e 100644
--- a/packages/app/src/components/HyperJson.module.scss
+++ b/packages/app/src/components/HyperJson.module.scss
@@ -65,7 +65,7 @@
     }
 
     &:active {
-      background-color: var(--color-bg-muted-hover);
+      background-color: var(--color-bg-highlighted);
     }
   }
 }
@@ -91,7 +91,7 @@
   height: 100%;
 
   &:hover {
-    background-color: var(--color-bg-muted-hover);
+    background-color: var(--color-bg-highlighted);
   }
 
   &:active {
@@ -105,7 +105,7 @@
 
 .clickable {
   &:active {
-    background-color: var(--color-bg-muted-hover);
+    background-color: var(--color-bg-highlighted);
   }
 }
 
@@ -156,7 +156,7 @@
   }
 
   &:active {
-    background-color: var(--color-bg-muted-hover);
+    background-color: var(--color-bg-highlighted);
   }
 }
 
diff --git a/packages/app/styles/LogTable.module.scss b/packages/app/styles/LogTable.module.scss
index 38b50532e..6221206a6 100644
--- a/packages/app/styles/LogTable.module.scss
+++ b/packages/app/styles/LogTable.module.scss
@@ -191,7 +191,7 @@ $button-height: 18px;
 
   > span:hover {
     border-radius: 4px;
-    background-color: var(--color-bg-muted-hover);
+    background-color: var(--color-bg-highlighted);
   }
 
   &.chart {
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index aed6966b3..e5cdfcb23 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -5,6 +5,7 @@
   --color-bg-surface: var(--mantine-color-dark-6);
   --color-bg-muted: var(--mantine-color-dark-7);
   --color-bg-muted-hover: var(--mantine-color-dark-5);
+  --color-bg-highlighted: var(--mantine-color-dark-5);
   --color-bg-sidebar: var(--mantine-color-dark-7);
   --color-bg-header: var(--mantine-color-dark-7);
   --color-bg-hover: var(--mantine-color-dark-6);
@@ -69,7 +70,7 @@
   --color-bg-body: var(--mantine-color-white);
   --color-bg-surface: var(--mantine-color-gray-1);
   --color-bg-muted: #f6f6fa;
-  --color-bg-muted-hover: #e6e8ed;
+  --color-bg-highlighted: #e6e8ed;
   --color-bg-sidebar: var(--mantine-color-white);
   --color-bg-header: var(--mantine-color-gray-1);
   --color-bg-modal: var(--mantine-color-white);
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
index aca8aa227..8a8f50515 100644
--- a/packages/app/styles/_utilities.scss
+++ b/packages/app/styles/_utilities.scss
@@ -19,6 +19,18 @@
   background-color: var(--color-bg-muted-hover);
 }
 
+.bg-highlighted {
+  background-color: var(--color-bg-highlighted);
+}
+
+.bg-danger-transparent {
+  background-color: color-mix(
+    in srgb,
+    var(--mantine-color-red-5) 15%,
+    transparent
+  );
+}
+
 // Border utilities
 .border {
   border: 1px solid var(--color-border) !important;
@@ -124,3 +136,27 @@
 .fw-600 {
   font-weight: 600 !important;
 }
+
+.cursor-default {
+  cursor: default;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-col-resize {
+  cursor: col-resize;
+}
+
+.cursor-zoom-in {
+  cursor: zoom-in !important;
+}
+
+.cursor-crosshair {
+  cursor: crosshair !important;
+}
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index 02770e155..23be93a9d 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -29,95 +29,6 @@
 }
 
 
-.bg-light-grey {
-  background-color: #37414d;
-}
-.bg-light-grey-hover {
-  background-color: #37414d;
-  &:hover {
-    background-color: #4e5c6d;
-  }
-}
-
-.bg-inherit {
-  background-color: inherit;
-}
-
-
-.bg-default-dark-grey-hover {
-  &:hover {
-    background-color: var(--color-bg-surface-hover);
-  }
-}
-
-.border-grey-top {
-  border-top: 1px solid #393939;
-}
-.border-grey-bottom {
-  border-bottom: 1px solid #393939;
-}
-.border-grey {
-  border-color: #393939 !important;
-}
-.border-grey-gradient {
-  box-shadow: 0 0 0 1px rgb(82 82 82 / 60%);
-}
-
-.fw-500 {
-  font-weight: 500;
-}
-.fw-600 {
-  font-weight: 600;
-}
-
-.text-success {
-  color: var(--color-text-success);
-}
-
-// Darker than text-muted
-.text-gray-600 {
-   color: var(--mantine-color-dark-6);
-}
-
-.text-slate-700 {
-  color: var(--mantine-color-dark-7);
-}
-
-.text-slate-600 {
-  color: var(--mantine-color-dark-6);
-}
-
-.text-slate-500 {
-  color: var(--mantine-color-dark-5);
-}
-
-.text-slate-400 {
-  color: var(--mantine-color-dark-4);
-}
-
-.text-slate-300 {
-  color: var(--mantine-color-dark-3);
-}
-
-.text-slate-200 {
-  color: var(--mantine-color-dark-2);
-}
-
-
-
-// TODO remove
-.text-white-hover-green {
-  color: var(--color-text);
-  transition: color 0.2s ease;
-  &:hover {
-    color: var(--color-green);
-  }
-}
-
-// TODO remove
-.text-white-hover-success-trigger {
-}
-
 :root {
   --mantine-webkit-font-smoothing: inherit;
   --mantine-moz-font-smoothing: inherit;
@@ -138,56 +49,12 @@ body {
   }
 }
 
-.cursor-default {
-  cursor: default;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.cursor-grab {
-  cursor: grab;
-}
-
-.cursor-col-resize {
-  cursor: col-resize;
-}
-
-.cursor-zoom-in {
-  cursor: zoom-in !important;
-}
-
-.cursor-crosshair {
-  cursor: crosshair !important;
-}
-
 .nav-link.active {
   font-weight: 500;
 }
 
 
-.bg-warning-transparent {
-  background-color: color-mix(in srgb, var(--mantine-color-yellow-5) 15%, transparent);
-}
-.bg-danger-transparent {
-  background-color: color-mix(in srgb, var(--mantine-color-red-5) 15%, transparent);
-}
-
-.transition-width {
-  transition: width 0.2s ease-in-out;
-}
-
-.transition-height {
-  transition: height 0.2s ease-in-out;
-}
-
-.min-height-65vh {
-  min-height: 65vh;
-}
-
 /* Custom Components */
-
 .player-skipping-overlay {
   position: absolute;
   z-index: 10;
@@ -422,30 +289,6 @@ body {
   fill: rgba(204, 204, 204, 0.2) !important;
 }
 
-.white-text-gradient {
-  background: linear-gradient(180deg, #ffffff 0%, #c1c1c1 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  text-fill-color: transparent;
-}
-// For the landing green->purple bg gradient card
-.fancy-card-bg {
-  background:
-    radial-gradient(
-        79.84% 219.18% at 89.97% 87.4%,
-        rgba(80, 250, 219, 0.06) 0%,
-        rgba(164, 42, 238, 0.051) 100%
-      )
-      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.075) 0%,
-      rgba(255, 255, 255, 0.045) 100%
-    );
-  border-radius: 4px;
-}
-
 .effect-pulse {
   animation: pulse 1s infinite;
 }
@@ -515,9 +358,3 @@ a.mantine-focus-auto:hover {
     outline: none;
   }
 }
-
-.u-select {
-  border: 1px solid #50fa7b;
-  background: #50fa7a0d !important;
-  color: #2E224788;
-}

From f032082dd45d0668e4b35fa92778a92834748317 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 11 Nov 2025 11:39:57 +0000
Subject: [PATCH 17/49] refactor: Update LandingHeader and ThemeWrapper
 components to use CSS variables for background and border styles; enhance
 link color based on active state for improved theming and consistency

---
 packages/app/src/LandingHeader.tsx | 6 +++++-
 packages/app/src/ThemeWrapper.tsx  | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/LandingHeader.tsx b/packages/app/src/LandingHeader.tsx
index 988e29c46..a6bf47ea9 100644
--- a/packages/app/src/LandingHeader.tsx
+++ b/packages/app/src/LandingHeader.tsx
@@ -28,8 +28,9 @@ export default function LandingHeader({
           top: 0,
           left: 0,
           right: 0,
-          background: '#0f1216b3',
+          background: 'var(--color-bg-body)',
           backdropFilter: 'blur(12px)',
+          border: '1px solid var(--color-border)',
           zIndex: 100,
         }}
       >
@@ -49,6 +50,7 @@ export default function LandingHeader({
             <Group gap="md" visibleFrom="lg" style={{ fontSize: 14 }}>
               <Anchor
                 href="https://hyperdx.io"
+                c={activeKey === 'cloud' ? 'green' : 'gray'}
                 underline="never"
                 style={{ fontWeight: activeKey === 'cloud' ? 600 : 400 }}
               >
@@ -56,6 +58,7 @@ export default function LandingHeader({
               </Anchor>
               <Anchor
                 href="https://clickhouse.com/docs/use-cases/observability/clickstack"
+                c={activeKey === 'docs' ? 'green' : 'gray'}
                 underline="never"
                 style={{ fontWeight: activeKey === 'docs' ? 600 : 400 }}
               >
@@ -64,6 +67,7 @@ export default function LandingHeader({
               {!isLoggedIn && installation?.isTeamExisting === true && (
                 <Anchor
                   href="/login"
+                  c={activeKey === '/login' ? 'green' : 'gray'}
                   underline="never"
                   style={{ fontWeight: activeKey === '/login' ? 600 : 400 }}
                 >
diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index fb65aa186..06c83c416 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -180,7 +180,11 @@ const makeTheme = ({
             },
           };
         }
-        return {};
+        return {
+          root: {
+            border: '1px solid var(--color-border)',
+          },
+        };
       },
     },
     Text: Text.extend({

From e9f6b7368ff7d3c8b08d01dc4c04a63010f294c5 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 11 Nov 2025 11:49:48 +0000
Subject: [PATCH 18/49] refactor: Remove unused text color classes for improved
 clarity and maintainability across multiple components

---
 packages/app/src/AlertsPage.tsx               | 24 +++++-----
 packages/app/src/AppNav.components.tsx        | 13 ++----
 packages/app/src/AppNav.tsx                   |  2 +-
 packages/app/src/AuthPage.tsx                 | 17 ++-----
 packages/app/src/DBDashboardPage.tsx          |  4 +-
 packages/app/src/DBSearchPageAlertModal.tsx   |  9 ++--
 packages/app/src/DOMPlayer.tsx                |  4 +-
 packages/app/src/KubernetesDashboardPage.tsx  | 16 +++----
 packages/app/src/LogSidePanelElements.tsx     | 44 +++++++------------
 packages/app/src/OnboardingChecklist.tsx      |  2 +-
 packages/app/src/SessionSubpanel.tsx          |  2 +-
 packages/app/src/SessionsPage.tsx             |  4 +-
 packages/app/src/TeamPage.tsx                 | 14 +++---
 packages/app/src/TimelineChart.tsx            |  4 +-
 .../app/src/components/DBHeatmapChart.tsx     |  4 +-
 packages/app/src/components/DBInfraPanel.tsx  |  2 +-
 .../app/src/components/ExceptionSubpanel.tsx  | 40 +++++++----------
 packages/app/src/components/HyperJson.tsx     |  6 +--
 .../src/components/NetworkPropertyPanel.tsx   |  4 +-
 packages/app/src/components/NumberFormat.tsx  |  5 +--
 .../app/src/components/SpanEventsSubpanel.tsx |  8 ++--
 .../app/src/components/StacktraceFrame.tsx    |  6 +--
 packages/app/src/components/Tags.tsx          | 11 ++---
 .../components/TeamSettings/WebhookForm.tsx   |  2 +-
 24 files changed, 93 insertions(+), 154 deletions(-)

diff --git a/packages/app/src/AlertsPage.tsx b/packages/app/src/AlertsPage.tsx
index 97dcb0eaa..ae3a1471f 100644
--- a/packages/app/src/AlertsPage.tsx
+++ b/packages/app/src/AlertsPage.tsx
@@ -84,7 +84,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
           {alert.dashboard?.name}
           {tileName ? (
             <>
-              <i className="bi bi-chevron-right fs-8 mx-1 text-slate-400" />
+              <i className="bi bi-chevron-right fs-8 mx-1 " />
               {tileName}
             </>
           ) : null}
@@ -123,7 +123,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
       <>
         If value is {alert.thresholdType === 'above' ? 'over' : 'under'}{' '}
         <span className="fw-bold">{alert.threshold}</span>
-        <span className="text-slate-400">&middot;</span>
+        <span>&middot;</span>
       </>
     );
   }, [alert]);
@@ -172,16 +172,16 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
               className={styles.alertLink}
               title={linkTitle}
             >
-              <i className={`bi ${alertIcon} text-slate-200 me-2 fs-8`} />
+              <i className={`bi ${alertIcon} me-2 fs-8`} />
               {alertName}
             </Link>
           </div>
-          <div className="text-slate-400 fs-8 d-flex gap-2">
+          <div className="fs-8 d-flex gap-2">
             {alertType}
             {notificationMethod}
             {alert.createdBy && (
               <>
-                <span className="text-slate-400">&middot;</span>
+                <span>&middot;</span>
                 <span>
                   Created by {alert.createdBy.name || alert.createdBy.email}
                 </span>
@@ -219,7 +219,7 @@ function AlertCardList({ alerts }: { alerts: AlertsPageItem[] }) {
           <i className="bi bi-check-lg"></i> OK
         </div>
         {okData.length === 0 && (
-          <div className="text-center text-slate-400 my-4 fs-8">No alerts</div>
+          <div className="text-center my-4 fs-8">No alerts</div>
         )}
         {okData.map((alert, index) => (
           <AlertDetails key={index} alert={alert} />
@@ -243,7 +243,7 @@ export default function AlertsPage() {
       <div className="my-4">
         <Container maw={1500}>
           <Alert
-            icon={<i className="bi bi-info-circle-fill text-slate-400" />}
+            icon={<i className="bi bi-info-circle-fill " />}
             color="gray"
             py="xs"
             mt="md"
@@ -259,19 +259,15 @@ export default function AlertsPage() {
             from dashboard charts and saved searches.
           </Alert>
           {isLoading ? (
-            <div className="text-center text-slate-400 my-4 fs-8">
-              Loading...
-            </div>
+            <div className="text-center my-4 fs-8">Loading...</div>
           ) : isError ? (
-            <div className="text-center text-slate-400 my-4 fs-8">Error</div>
+            <div className="text-center my-4 fs-8">Error</div>
           ) : alerts?.length ? (
             <>
               <AlertCardList alerts={alerts} />
             </>
           ) : (
-            <div className="text-center text-slate-400 my-4 fs-8">
-              No alerts created yet
-            </div>
+            <div className="text-center my-4 fs-8">No alerts created yet</div>
           )}
         </Container>
       </div>
diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
index 8215416ad..b19c3f3cb 100644
--- a/packages/app/src/AppNav.components.tsx
+++ b/packages/app/src/AppNav.components.tsx
@@ -34,9 +34,7 @@ export const AppNavContext = React.createContext<{
 export const AppNavCloudBanner = () => {
   return (
     <div className="my-3 bg-muted rounded p-2 text-center">
-      <span className="text-slate-300 fs-8">
-        Ready to deploy on ClickHouse Cloud?
-      </span>
+      <span className="fs-8">Ready to deploy on ClickHouse Cloud?</span>
       <div className="mt-2 mb-2">
         <Link
           href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started#deploy-with-clickhouse-cloud"
@@ -141,7 +139,7 @@ export const AppNavUserMenu = ({
                     </Text>
                   </div>
                 </Tooltip>
-                <Icon name="chevron-right" className="fs-8 text-slate-400" />
+                <Icon name="chevron-right" className="fs-8 " />
               </>
             )}
           </Group>
@@ -237,12 +235,7 @@ export const AppNavHelpMenu = ({
         >
           <Menu.Target>
             <UnstyledButton data-testid="help-menu-trigger" w="100%">
-              <Group
-                align="center"
-                justify="center"
-                h={size}
-                className="text-slate-200 "
-              >
+              <Group align="center" justify="center" h={size}>
                 <Icon name="question-lg" />
               </Group>
             </UnstyledButton>
diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index 5faeb2f1f..41213127c 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -153,7 +153,7 @@ function SearchInput({
       placeholder={placeholder}
       value={value}
       onChange={e => onChange(e.currentTarget.value)}
-      leftSection={<i className="bi bi-search fs-8 ps-1 text-slate-400" />}
+      leftSection={<i className="bi bi-search fs-8 ps-1 " />}
       onKeyDown={handleKeyDown}
       rightSection={
         value ? (
diff --git a/packages/app/src/AuthPage.tsx b/packages/app/src/AuthPage.tsx
index ff9137785..a1ce1fe32 100644
--- a/packages/app/src/AuthPage.tsx
+++ b/packages/app/src/AuthPage.tsx
@@ -124,10 +124,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
       <LandingHeader activeKey={`/${action}`} fixed />
       <div className="d-flex justify-content-center align-items-center vh-100">
         <div style={{ width: '26rem' }}>
-          <div
-            className="text-center mb-2 fs-5 text-slate-300"
-            style={{ marginTop: -30 }}
-          >
+          <div className="text-center mb-2 fs-5 " style={{ marginTop: -30 }}>
             {config.IS_OSS && isRegister
               ? 'Setup '
               : isRegister
@@ -136,7 +133,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
             <span className="text-success fw-bold">HyperDX</span>
           </div>
           {action === 'login' && (
-            <div className="text-center mb-2 text-slate-300">Welcome back!</div>
+            <div className="text-center mb-2 ">Welcome back!</div>
           )}
           {isRegister && config.IS_OSS === true && (
             <div className="text-center mb-2 text-muted">
@@ -243,19 +240,13 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
               )}
 
               {isRegister && config.IS_OSS === false && (
-                <div
-                  data-test-id="login-link"
-                  className="text-center fs-8 text-slate-400"
-                >
+                <div data-test-id="login-link" className="text-center fs-8 ">
                   Already have an account? <Link href="/login">Log in</Link>{' '}
                   instead.
                 </div>
               )}
               {action === 'login' && config.IS_OSS === false && (
-                <div
-                  data-test-id="register-link"
-                  className="text-center fs-8 text-slate-400"
-                >
+                <div data-test-id="register-link" className="text-center fs-8 ">
                   Don{"'"}t have an account yet?{' '}
                   <Link href="/register">Register</Link> instead.
                 </div>
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index 8885610f4..01b18d178 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -241,9 +241,7 @@ const Tile = forwardRef(
                   size={5}
                   zIndex={1}
                   color={alertIndicatorColor}
-                  label={
-                    !alert && <span className="text-slate-400 fs-8">+</span>
-                  }
+                  label={!alert && <span className="fs-8">+</span>}
                   mr={4}
                 >
                   <Button
diff --git a/packages/app/src/DBSearchPageAlertModal.tsx b/packages/app/src/DBSearchPageAlertModal.tsx
index df44c6104..6aef74ff8 100644
--- a/packages/app/src/DBSearchPageAlertModal.tsx
+++ b/packages/app/src/DBSearchPageAlertModal.tsx
@@ -56,7 +56,7 @@ const SavedSearchAlertFormSchema = z
   .passthrough();
 
 const CHANNEL_ICONS = {
-  webhook: <i className="bi bi-slack fs-7 text-slate-400" />,
+  webhook: <i className="bi bi-slack fs-7 " />,
 };
 
 const AlertForm = ({
@@ -166,7 +166,7 @@ const AlertForm = ({
         </Paper>
         {groupBy && thresholdType === AlertThresholdType.BELOW && (
           <MantineAlert
-            icon={<i className="bi bi-info-circle-fill text-slate-400" />}
+            icon={<i className="bi bi-info-circle-fill " />}
             bg="dark.6"
             py="xs"
           >
@@ -417,10 +417,7 @@ export const DBSearchPageAlertModal = ({
             ))}
             <Tabs.Tab value="stage">
               <Group gap={4}>
-                <i
-                  className="bi bi-plus fs-5 text-slate-400"
-                  style={{ marginLeft: -8 }}
-                />
+                <i className="bi bi-plus fs-5 " style={{ marginLeft: -8 }} />
                 New Alert
               </Group>
             </Tabs.Tab>
diff --git a/packages/app/src/DOMPlayer.tsx b/packages/app/src/DOMPlayer.tsx
index d19c44ad2..fae926312 100644
--- a/packages/app/src/DOMPlayer.tsx
+++ b/packages/app/src/DOMPlayer.tsx
@@ -43,13 +43,13 @@ const URLHoverCard = memo(({ url }: { url: string }) => {
           <table className="table fs-8 mb-0">
             <tr>
               <td>
-                <i className="bi bi-globe fs-8 text-slate-300"></i>
+                <i className="bi bi-globe fs-8 "></i>
               </td>
               <td>{parsedUrl?.host}</td>
             </tr>
             <tr>
               <td>
-                <i className="bi bi-link-45deg text-slate-300 fs-7"></i>
+                <i className="bi bi-link-45deg fs-7"></i>
               </td>
               <td>{parsedUrl?.pathname}</td>
             </tr>
diff --git a/packages/app/src/KubernetesDashboardPage.tsx b/packages/app/src/KubernetesDashboardPage.tsx
index 55acd62f3..5d2f4a93e 100644
--- a/packages/app/src/KubernetesDashboardPage.tsx
+++ b/packages/app/src/KubernetesDashboardPage.tsx
@@ -83,7 +83,7 @@ const Th = React.memo<{
       {children}
       {!!sort && (
         <i
-          className={`ps-1 text-slate-400 fs-8.5 bi bi-caret-${
+          className={`ps-1 fs-8.5 bi bi-caret-${
             sort === 'asc' ? 'up-fill' : 'down-fill'
           }`}
         />
@@ -350,13 +350,11 @@ export const InfraPodsStatusTable = ({
           {isLoading ? (
             <TableLoading />
           ) : isError ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
+            <div className="p-4 text-center text-muted fs-8">
               Unable to load pod metrics
             </div>
           ) : podsList.length === 0 ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
-              No pods found
-            </div>
+            <div className="p-4 text-center text-muted fs-8">No pods found</div>
           ) : (
             <Table horizontalSpacing="md" highlightOnHover>
               <Table.Thead className="muted-thead">
@@ -596,11 +594,11 @@ const NodesTable = ({
           {isLoading ? (
             <TableLoading />
           ) : isError ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
+            <div className="p-4 text-center text-muted fs-8">
               Unable to load nodes
             </div>
           ) : nodesList.length === 0 ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
+            <div className="p-4 text-center text-muted fs-8">
               No nodes found
             </div>
           ) : (
@@ -793,11 +791,11 @@ const NamespacesTable = ({
           {isLoading ? (
             <TableLoading />
           ) : isError ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
+            <div className="p-4 text-center text-muted fs-8">
               Unable to load namespaces
             </div>
           ) : namespacesList.length === 0 ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
+            <div className="p-4 text-center text-muted fs-8">
               No namespaces found
             </div>
           ) : (
diff --git a/packages/app/src/LogSidePanelElements.tsx b/packages/app/src/LogSidePanelElements.tsx
index fd34bc166..68fad8a29 100644
--- a/packages/app/src/LogSidePanelElements.tsx
+++ b/packages/app/src/LogSidePanelElements.tsx
@@ -38,7 +38,7 @@ export const CollapsibleSection = ({
         onClick={() => setCollapsed(!collapsed)}
       >
         <i className={`bi bi-chevron-${collapsed ? 'right' : 'down'} me-2`}></i>
-        <div className="fs-7 text-slate-200">{title}</div>
+        <div className="fs-7">{title}</div>
       </div>
       {collapsed ? null : <div className="mb-4">{children}</div>}
     </div>
@@ -72,7 +72,7 @@ export const StacktraceValue = ({
         borderRight: '1px solid #ffffff20',
       }}
     >
-      <div className="text-slate-400">{label}</div>
+      <div>{label}</div>
       <div className="fs-7">{value}</div>
     </div>
   );
@@ -137,10 +137,7 @@ export const StacktraceRow = ({
               withArrow
               color="gray"
             >
-              <i
-                className="bi bi-box-seam text-slate-400 me-2"
-                title="in_app: false"
-              />
+              <i className="bi bi-box-seam me-2" title="in_app: false" />
             </Tooltip>
           )}
           {augmentedFrame && (
@@ -206,11 +203,7 @@ export const stacktraceColumns: ColumnDef<StacktraceFrame>[] = [
  * Breadcrumbs
  */
 
-const Url = ({ url }: { url?: string }) => (
-  <span className="text-slate-300" title={url}>
-    {url}
-  </span>
-);
+const Url = ({ url }: { url?: string }) => <span title={url}>{url}</span>;
 
 const StatusChip = React.memo(({ status }: { status?: number }) => {
   if (!status) {
@@ -239,7 +232,7 @@ const LevelChip = React.memo(({ level }: { level?: string }) => {
     ? 'text-danger bg-danger'
     : level.includes('warn') || level.includes('warning')
       ? 'text-warning bg-warning'
-      : 'text-slate-300 bg-muted';
+      : 'bg-muted';
 
   return (
     <span
@@ -256,7 +249,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
     header: 'Category',
     size: 180,
     cell: ({ row }) => (
-      <span className="text-slate-300 d-flex align-items-center gap-2">
+      <span className="d-flex align-items-center gap-2">
         {row.original.category}
         {row.original.category === 'console' && (
           <LevelChip level={row.original.level} />
@@ -282,7 +275,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         return (
           <div className="text-truncate">
             <span>{method} </span>
-            <span className="text-slate-300" title={url}>
+            <span title={url}>
               <Url url={url} />
             </span>
           </div>
@@ -294,11 +287,11 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         const { from, to } = row.original.data;
         return (
           <div className="text-truncate">
-            <span className="text-slate-300" title={from}>
+            <span title={from}>
               <Url url={from} />
             </span>
             <span>{' → '}</span>
-            <span className="text-slate-300" title={to}>
+            <span title={to}>
               <Url url={to} />
             </span>
           </div>
@@ -309,10 +302,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
       if (row.original.category === 'console') {
         const { message } = row.original;
         return (
-          <pre
-            className="text-slate-300 mb-0 text-truncate fs-8"
-            title={message}
-          >
+          <pre className="mb-0 text-truncate fs-8" title={message}>
             {message}
           </pre>
         );
@@ -322,14 +312,14 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         return <div className="text-truncate">{row.original.message}</div>;
       }
 
-      return <span className="text-slate-500">Empty</span>;
+      return <span className="text-muted">Empty</span>;
     },
   },
   {
     header: 'Timestamp',
     size: 220,
     cell: ({ row }) => (
-      <span className="text-slate-500">
+      <span className="text-muted">
         <FormatTime value={row.original.timestamp * 1000} format="withMs" />
       </span>
     ),
@@ -370,7 +360,7 @@ export const headerColumns: ColumnDef<[string, string]>[] = [
     header: 'Header',
     size: 260,
     cell: ({ row }) => (
-      <div className="text-slate-300 text-truncate" title={row.original[0]}>
+      <div className="text-truncate" title={row.original[0]}>
         {row.original[0]}
       </div>
     ),
@@ -394,9 +384,7 @@ export const networkColumns: ColumnDef<{
     accessorKey: 'label',
     header: 'Label',
     size: 260,
-    cell: ({ row }) => (
-      <span className="text-slate-300">{row.original.label}</span>
-    ),
+    cell: ({ row }) => <span>{row.original.label}</span>,
   },
   {
     size: UNDEFINED_WIDTH,
@@ -474,9 +462,9 @@ export const NetworkBody = ({
           )}
         </pre>
       ) : body === '' ? (
-        <div className="text-slate-400 px-4 py-3">{emptyMessage}</div>
+        <div className="px-4 py-3">{emptyMessage}</div>
       ) : (
-        <div className="text-slate-400 px-4 py-3">{notCollectedMessage}</div>
+        <div className="px-4 py-3">{notCollectedMessage}</div>
       )}
     </>
   );
diff --git a/packages/app/src/OnboardingChecklist.tsx b/packages/app/src/OnboardingChecklist.tsx
index 15fc1addc..7fac421bb 100644
--- a/packages/app/src/OnboardingChecklist.tsx
+++ b/packages/app/src/OnboardingChecklist.tsx
@@ -166,7 +166,7 @@ const OnboardingChecklist = ({
           onClick={() => setIsCollapsed(!isCollapsed)}
         >
           <i
-            className={`bi bi-chevron-${isCollapsed ? 'down' : 'up'} text-slate-400`}
+            className={`bi bi-chevron-${isCollapsed ? 'down' : 'up'} `}
             style={{ fontSize: 12 }}
           />
         </ActionIcon>
diff --git a/packages/app/src/SessionSubpanel.tsx b/packages/app/src/SessionSubpanel.tsx
index cab77049f..1a187093e 100644
--- a/packages/app/src/SessionSubpanel.tsx
+++ b/packages/app/src/SessionSubpanel.tsx
@@ -607,7 +607,7 @@ export default function SessionSubpanel({
                 {showRelativeTime ? (
                   <>
                     {formatmmss((focus?.ts ?? 0) - minTs)}
-                    <span className="fw-normal text-slate-300 ms-2">
+                    <span className="fw-normal ms-2">
                       {' / '}
                       {formatmmss(maxTs - minTs)}
                     </span>
diff --git a/packages/app/src/SessionsPage.tsx b/packages/app/src/SessionsPage.tsx
index 5f5b5bf96..7012262cb 100644
--- a/packages/app/src/SessionsPage.tsx
+++ b/packages/app/src/SessionsPage.tsx
@@ -509,7 +509,7 @@ export default function SessionsPage() {
           <>
             {sessionSource && sessionSource.kind !== SourceKind.Session && (
               <Alert
-                icon={<i className="bi bi-info-circle-fill text-slate-400" />}
+                icon={<i className="bi bi-info-circle-fill " />}
                 color="gray"
                 py="xs"
                 mt="md"
@@ -543,7 +543,7 @@ function SessionSetupInstructions() {
   return (
     <>
       <Stack w={500} mx="auto" mt="xl" gap="xxs">
-        <i className="bi bi-laptop text-slate-600 fs-1"></i>
+        <i className="bi bi-laptop text-muted fs-1"></i>
         <Text c="gray" fw={500} size="xs">
           Instructions
         </Text>
diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
index e43ca6b44..8a501036f 100644
--- a/packages/app/src/TeamPage.tsx
+++ b/packages/app/src/TeamPage.tsx
@@ -71,7 +71,7 @@ function InviteTeamMemberForm({
           placeholder="you@company.com"
           withAsterisk={false}
         />
-        <div className="text-slate-300 fs-8">
+        <div className="fs-8">
           The invite link will automatically expire after 30 days.
         </div>
         <Button variant="light" type="submit" disabled={!email || isSubmitting}>
@@ -459,7 +459,7 @@ function TeamMembersSection() {
       <Card>
         <Card.Section withBorder py="sm" px="lg">
           <Group align="center" justify="space-between">
-            <div className="text-slate-300 fs-7">Team Members</div>
+            <div className="fs-7">Team Members</div>
             <Button
               variant="light"
               leftSection={<i className="bi bi-person-plus-fill" />}
@@ -490,7 +490,7 @@ function TeamMembersSection() {
                       <Group mt={4} fz="xs">
                         <div>{member.email}</div>
                         {member.hasPasswordAuth && (
-                          <div className="text-slate-300">
+                          <div>
                             <i className="bi bi-lock-fill" /> Password Auth
                           </div>
                         )}
@@ -888,12 +888,12 @@ function TeamNameSection() {
           </form>
         ) : (
           <Group gap="lg">
-            <div className="text-slate-300 fs-7">{team.name}</div>
+            <div className="fs-7">{team.name}</div>
             {hasAdminAccess && (
               <Button
                 size="xs"
                 variant="default"
-                leftSection={<i className="bi bi-pencil text-slate-300" />}
+                leftSection={<i className="bi bi-pencil " />}
                 onClick={() => {
                   setIsEditingTeamName(true);
                 }}
@@ -1087,7 +1087,7 @@ function ClickhouseSettingForm({
             <Button
               size="xs"
               variant="default"
-              leftSection={<i className="bi bi-pencil text-slate-300" />}
+              leftSection={<i className="bi bi-pencil " />}
               onClick={() => setIsEditing(true)}
             >
               Change
@@ -1174,7 +1174,7 @@ const APIKeyCopyButton = ({
         variant={copied ? 'light' : 'default'}
         color="gray"
         rightSection={
-          <div className="text-slate-300 ms-2 text-nowrap">
+          <div className="ms-2 text-nowrap">
             {copied ? (
               <i className="bi bi-check-lg me-2" />
             ) : (
diff --git a/packages/app/src/TimelineChart.tsx b/packages/app/src/TimelineChart.tsx
index b78c0c553..6434a8cfa 100644
--- a/packages/app/src/TimelineChart.tsx
+++ b/packages/app/src/TimelineChart.tsx
@@ -169,9 +169,7 @@ function TimelineXAxis({
           background: 'var(--color-bg-surface)',
         }}
       >
-        <div className="ms-2 text-slate-400 fs-8.5">
-          {renderMs(i * interval)}
-        </div>
+        <div className="ms-2 fs-8.5">{renderMs(i * interval)}</div>
       </div>,
     );
   }
diff --git a/packages/app/src/components/DBHeatmapChart.tsx b/packages/app/src/components/DBHeatmapChart.tsx
index d0eda7419..8aa2976ae 100644
--- a/packages/app/src/components/DBHeatmapChart.tsx
+++ b/packages/app/src/components/DBHeatmapChart.tsx
@@ -845,7 +845,7 @@ function Heatmap({
             }}
           />
           <div
-            className="px-2 py-1 fs-8 text-slate-200"
+            className="px-2 py-1 fs-8"
             style={{
               position: 'absolute',
               top: highlightedPoint.yCoord + 5,
@@ -885,7 +885,7 @@ function Heatmap({
       )}
       {selectingInfo != null && onFilter != null && (
         <div
-          className="px-2 py-1 text-slate-200 fs-8"
+          className="px-2 py-1 fs-8"
           style={{
             backdropFilter: 'blur(4px)',
             backgroundColor: 'rgba(#1A1D23 0.4)',
diff --git a/packages/app/src/components/DBInfraPanel.tsx b/packages/app/src/components/DBInfraPanel.tsx
index 895f5d9d2..7d074cc44 100644
--- a/packages/app/src/components/DBInfraPanel.tsx
+++ b/packages/app/src/components/DBInfraPanel.tsx
@@ -72,7 +72,7 @@ const InfraSubpanelGroup = ({
     <div data-testid={`infra-subpanel-${fieldPrefix}`}>
       <Group justify="space-between" align="center">
         <Group align="center">
-          <h4 className="text-slate-300 fs-6 m-0">{title}</h4>
+          <h4 className="fs-6 m-0">{title}</h4>
           <SegmentedControl
             size="xs"
             data={[
diff --git a/packages/app/src/components/ExceptionSubpanel.tsx b/packages/app/src/components/ExceptionSubpanel.tsx
index 5ab5eb1b2..a8ad8d8ed 100644
--- a/packages/app/src/components/ExceptionSubpanel.tsx
+++ b/packages/app/src/components/ExceptionSubpanel.tsx
@@ -62,17 +62,17 @@ export const StacktraceFrame = ({
   return (
     <Group gap="xs" display="inline-flex">
       <div
-        className="text-slate-200 fs-8"
+        className=" fs-8"
         style={{
           opacity: isLoading ? 0.8 : 1,
           filter: isLoading ? 'blur(1px)' : 'none',
         }}
       >
         {filename}
-        <span className="text-slate-400">
+        <span>
           :{lineno}:{colno}
         </span>
-        <span className="text-slate-400">{' in '}</span>
+        <span>{' in '}</span>
         {functionName && (
           <span
             style={{
@@ -127,7 +127,7 @@ export const CollapsibleSection = ({
         onClick={() => setCollapsed(!collapsed)}
       >
         <i className={`bi bi-chevron-${collapsed ? 'right' : 'down'} me-2`}></i>
-        <div className="fs-7 text-slate-200">{title}</div>
+        <div className="fs-7">{title}</div>
       </div>
       {collapsed ? null : <div className="mb-4">{children}</div>}
     </div>
@@ -161,7 +161,7 @@ export const StacktraceValue = ({
         borderRight: '1px solid #ffffff20',
       }}
     >
-      <div className="text-slate-400">{label}</div>
+      <div>{label}</div>
       <div className="fs-7">{value}</div>
     </div>
   );
@@ -226,10 +226,7 @@ export const StacktraceRow = ({
               withArrow
               color="gray"
             >
-              <i
-                className="bi bi-box-seam text-slate-400 me-2"
-                title="in_app: false"
-              />
+              <i className="bi bi-box-seam me-2" title="in_app: false" />
             </Tooltip>
           )}
           {augmentedFrame && (
@@ -295,11 +292,7 @@ export const stacktraceColumns: ColumnDef<TStacktraceFrame>[] = [
  * Breadcrumbs
  */
 
-const Url = ({ url }: { url?: string }) => (
-  <span className="text-slate-300" title={url}>
-    {url}
-  </span>
-);
+const Url = ({ url }: { url?: string }) => <span title={url}>{url}</span>;
 
 const StatusChip = React.memo(({ status }: { status?: number }) => {
   if (!status) {
@@ -328,7 +321,7 @@ const LevelChip = React.memo(({ level }: { level?: string }) => {
     ? 'text-danger bg-danger'
     : level.includes('warn') || level.includes('warning')
       ? 'text-warning bg-warning'
-      : 'text-slate-300 bg-muted';
+      : 'bg-muted';
 
   return (
     <span
@@ -345,7 +338,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
     header: 'Category',
     size: 180,
     cell: ({ row }) => (
-      <span className="text-slate-300 d-flex align-items-center gap-2">
+      <span className="d-flex align-items-center gap-2">
         {row.original.category}
         {row.original.category === 'console' && (
           <LevelChip level={row.original.level} />
@@ -371,7 +364,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         return (
           <div className="text-truncate">
             <span>{method} </span>
-            <span className="text-slate-300" title={url}>
+            <span title={url}>
               <Url url={url} />
             </span>
           </div>
@@ -383,11 +376,11 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         const { from, to } = row.original.data;
         return (
           <div className="text-truncate">
-            <span className="text-slate-300" title={from}>
+            <span title={from}>
               <Url url={from} />
             </span>
             <span>{' → '}</span>
-            <span className="text-slate-300" title={to}>
+            <span title={to}>
               <Url url={to} />
             </span>
           </div>
@@ -398,10 +391,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
       if (row.original.category === 'console') {
         const { message } = row.original;
         return (
-          <pre
-            className="text-slate-300 mb-0 text-truncate fs-8"
-            title={message}
-          >
+          <pre className="mb-0 text-truncate fs-8" title={message}>
             {message}
           </pre>
         );
@@ -411,14 +401,14 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         return <div className="text-truncate">{row.original.message}</div>;
       }
 
-      return <span className="text-slate-500">Empty</span>;
+      return <span className="text-muted">Empty</span>;
     },
   },
   {
     header: 'Timestamp',
     size: 220,
     cell: ({ row }) => (
-      <span className="text-slate-500">
+      <span className="text-muted">
         <FormatTime value={row.original.timestamp * 1000} format="withMs" />
       </span>
     ),
diff --git a/packages/app/src/components/HyperJson.tsx b/packages/app/src/components/HyperJson.tsx
index 91de551bb..a691afeff 100644
--- a/packages/app/src/components/HyperJson.tsx
+++ b/packages/app/src/components/HyperJson.tsx
@@ -408,11 +408,7 @@ const HyperJson = ({
             [styles.withLineWrap]: lineWrap,
           })}
         >
-          {isEmpty ? (
-            <div className="text-slate-400">Empty</div>
-          ) : (
-            <TreeNode data={data} />
-          )}
+          {isEmpty ? <div>Empty</div> : <TreeNode data={data} />}
         </div>
       </HydrateAtoms>
     </Provider>
diff --git a/packages/app/src/components/NetworkPropertyPanel.tsx b/packages/app/src/components/NetworkPropertyPanel.tsx
index 87b15da2b..4d41a1bb9 100644
--- a/packages/app/src/components/NetworkPropertyPanel.tsx
+++ b/packages/app/src/components/NetworkPropertyPanel.tsx
@@ -179,9 +179,9 @@ export const NetworkBody = ({
           )}
         </pre>
       ) : body === '' ? (
-        <div className="text-slate-400 px-4 py-3">{emptyMessage}</div>
+        <div className="px-4 py-3">{emptyMessage}</div>
       ) : (
-        <div className="text-slate-400 px-4 py-3">{notCollectedMessage}</div>
+        <div className="px-4 py-3">{notCollectedMessage}</div>
       )}
     </>
   );
diff --git a/packages/app/src/components/NumberFormat.tsx b/packages/app/src/components/NumberFormat.tsx
index 69cf25428..8a9e41987 100644
--- a/packages/app/src/components/NumberFormat.tsx
+++ b/packages/app/src/components/NumberFormat.tsx
@@ -117,7 +117,6 @@ export const NumberFormatForm: React.VFC<{
         <div style={{ marginTop: -6 }}>
           <Paper p="xs" py={4}>
             <div
-              className="text-slate-400"
               style={{
                 fontSize: 11,
               }}
@@ -130,9 +129,7 @@ export const NumberFormatForm: React.VFC<{
 
         {values.output !== 'time' && (
           <div>
-            <div className="text-slate-300 fs-8 mt-2 fw-bold mb-1">
-              Decimals
-            </div>
+            <div className="fs-8 mt-2 fw-bold mb-1">Decimals</div>
             <Slider
               mb="xl"
               min={0}
diff --git a/packages/app/src/components/SpanEventsSubpanel.tsx b/packages/app/src/components/SpanEventsSubpanel.tsx
index f99919069..65f5c7bbb 100644
--- a/packages/app/src/components/SpanEventsSubpanel.tsx
+++ b/packages/app/src/components/SpanEventsSubpanel.tsx
@@ -22,7 +22,7 @@ const spanEventColumns: ColumnDef<SpanEventData>[] = [
     header: 'Timestamp',
     size: 120,
     cell: ({ row }) => (
-      <span className="text-slate-500">
+      <span className="text-muted">
         <FormatTime
           value={new Date(row.original.Timestamp).getTime()}
           format="withMs"
@@ -35,7 +35,7 @@ const spanEventColumns: ColumnDef<SpanEventData>[] = [
     header: 'Name',
     size: 180,
     cell: ({ row }) => (
-      <span className="text-slate-300 d-flex align-items-center gap-2">
+      <span className="d-flex align-items-center gap-2">
         {row.original.Name}
       </span>
     ),
@@ -53,7 +53,7 @@ const spanEventColumns: ColumnDef<SpanEventData>[] = [
           </Box>
         );
       }
-      return <span className="text-slate-500">Empty</span>;
+      return <span className="text-muted">Empty</span>;
     },
   },
 ];
@@ -93,7 +93,7 @@ export const SpanEventsSubpanel = ({
 
   if (!sortedEvents || sortedEvents.length === 0) {
     return (
-      <div className="p-3 text-slate-500 fs-7">
+      <div className="p-3 text-muted fs-7">
         No span events available for this trace
       </div>
     );
diff --git a/packages/app/src/components/StacktraceFrame.tsx b/packages/app/src/components/StacktraceFrame.tsx
index 1079f83be..5849f646f 100644
--- a/packages/app/src/components/StacktraceFrame.tsx
+++ b/packages/app/src/components/StacktraceFrame.tsx
@@ -16,17 +16,17 @@ export const StacktraceFrame = ({
   return (
     <Group gap="xs" display="inline-flex">
       <div
-        className="text-slate-200 fs-8"
+        className=" fs-8"
         style={{
           opacity: isLoading ? 0.8 : 1,
           filter: isLoading ? 'blur(1px)' : 'none',
         }}
       >
         {filename}
-        <span className="text-slate-400">
+        <span>
           :{lineno}:{colno}
         </span>
-        <span className="text-slate-400">{' in '}</span>
+        <span>{' in '}</span>
         {functionName && (
           <span
             style={{
diff --git a/packages/app/src/components/Tags.tsx b/packages/app/src/components/Tags.tsx
index 55310796f..20f9dac8c 100644
--- a/packages/app/src/components/Tags.tsx
+++ b/packages/app/src/components/Tags.tsx
@@ -101,7 +101,7 @@ export const Tags = React.memo(
               color="gray"
               style={{ cursor: 'pointer' }}
             >
-              <i className="bi bi-tags text-slate-300 fs-7" />
+              <i className="bi bi-tags fs-7" />
             </ActionIcon>
           )}
         </Popover.Target>
@@ -127,11 +127,10 @@ export const Tags = React.memo(
           />
           <ScrollArea viewportProps={{ style: { maxHeight: 200 } }}>
             {filtered.length === 0 && (
-              <div className="pt-3 px-4 fs-8 text-slate-400 text-center">
+              <div className="pt-3 px-4 fs-8 text-center">
                 {allowCreate ? (
                   <>
-                    Type and press <span className="text-slate-300">Enter</span>{' '}
-                    to create new tag
+                    Type and press <span>Enter</span> to create new tag
                   </>
                 ) : (
                   'No tags found'
@@ -171,9 +170,7 @@ export const Tags = React.memo(
             </Checkbox.Group>
           </ScrollArea>
           <div className="p-2 border-top border-dark d-flex justify-content-between align-items-center">
-            <div className="ms-2 fs-8 text-slate-400">
-              {values.length || 'None'} selected
-            </div>
+            <div className="ms-2 fs-8 ">{values.length || 'None'} selected</div>
             {values.length >= 1 && (
               <Button
                 variant="default"
diff --git a/packages/app/src/components/TeamSettings/WebhookForm.tsx b/packages/app/src/components/TeamSettings/WebhookForm.tsx
index 1c1b6f14e..a328a923f 100644
--- a/packages/app/src/components/TeamSettings/WebhookForm.tsx
+++ b/packages/app/src/components/TeamSettings/WebhookForm.tsx
@@ -373,7 +373,7 @@ export function WebhookForm({
             />
           </div>,
           <Alert
-            icon={<i className="bi bi-info-circle-fill text-slate-400" />}
+            icon={<i className="bi bi-info-circle-fill " />}
             key="5"
             className="mb-4"
             color="gray"

From a8a526bcff52c8aca5f263b86fefd86089cdfea1 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 11 Nov 2025 12:00:52 +0000
Subject: [PATCH 19/49] refactor: Update ThemeWrapper to use CSS variables for
 colors; enhance bootstrap utilities documentation for clarity

---
 packages/app/src/ThemeWrapper.tsx             | 18 +++++++++---------
 packages/app/styles/_bootstrap-utilities.scss | 16 +++++++++++++++-
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index 06c83c416..6333d1ee7 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -224,13 +224,13 @@ const makeTheme = ({
         if (props.variant === 'subtle') {
           return {
             root: {
-              backgroundColor: 'transparent !important',
-              color: `${theme.colors.gray[0]} !important`,
+              backgroundColor: 'transparent',
+              color: 'var(--color-text)',
               '&:hover': {
-                backgroundColor: `${theme.colors.dark[6]} !important`,
+                backgroundColor: 'var(--color-bg-hover)',
               },
               '&:active': {
-                backgroundColor: `${theme.colors.dark[5]} !important`,
+                backgroundColor: 'var(--color-bg-muted)',
               },
             },
           };
@@ -240,14 +240,14 @@ const makeTheme = ({
         if (props.variant === 'default') {
           return {
             root: {
-              backgroundColor: `${theme.colors.dark[6]} !important`,
-              color: `${theme.colors.gray[0]} !important`,
-              border: 'none !important',
+              backgroundColor: 'var(--color-bg-hover)',
+              color: 'var(--color-text)',
+              border: 'none',
               '&:hover': {
-                backgroundColor: `${theme.colors.dark[5]} !important`,
+                backgroundColor: 'var(--color-bg-muted)',
               },
               '&:active': {
-                backgroundColor: `${theme.colors.dark[4]} !important`,
+                backgroundColor: 'var(--color-bg-surface)',
               },
             },
           };
diff --git a/packages/app/styles/_bootstrap-utilities.scss b/packages/app/styles/_bootstrap-utilities.scss
index fde8a751e..82d532ad6 100644
--- a/packages/app/styles/_bootstrap-utilities.scss
+++ b/packages/app/styles/_bootstrap-utilities.scss
@@ -1,6 +1,20 @@
 /* stylelint-disable */
 // Custom layout utility classes to replace Bootstrap
-// Provides classes like d-flex, flex-column, m-*, p-*, etc.
+// 
+// WHY THIS FILE EXISTS:
+// This project migrated from Bootstrap to Mantine UI components, but Bootstrap utility
+// classes (d-flex, p-3, m-2, etc.) are used extensively throughout the codebase in 
+// hundreds of components. Rather than refactoring all components to use Mantine's prop-based
+// styling system (which would be a massive undertaking), we've recreated the most commonly 
+// used Bootstrap utilities here using Mantine's spacing variables.
+//
+// FUTURE CONSIDERATION:
+// As components are refactored, prefer using Mantine's native props:
+// - <Box p="md" /> instead of <div className="p-3" />
+// - <Flex gap="sm" /> instead of <div className="d-flex gap-2" />
+// - <Stack /> instead of <div className="d-flex flex-column" />
+//
+// This file provides classes like d-flex, flex-column, m-*, p-*, etc.
 
 // Display utilities
 .d-none {

From e16173179d61318f8a14c3bfe23f09bca81a0e88 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 11 Nov 2025 13:19:00 +0000
Subject: [PATCH 20/49] refactor: Remove unused Background import from
 AutocompleteInput for improved clarity

---
 packages/app/src/AutocompleteInput.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/app/src/AutocompleteInput.tsx b/packages/app/src/AutocompleteInput.tsx
index ec3e64ba5..bcdff6ff5 100644
--- a/packages/app/src/AutocompleteInput.tsx
+++ b/packages/app/src/AutocompleteInput.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import Fuse from 'fuse.js';
 import { Popover, Textarea, UnstyledButton } from '@mantine/core';
-import { Background } from '@xyflow/react';
 
 import { useQueryHistory } from '@/utils';
 

From 13f130615dc5d3aa4383486b97f3c3f6f94b765d Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 11 Nov 2025 13:40:51 +0000
Subject: [PATCH 21/49] refactor: Update dark mode background and surface
 colors for improved contrast and consistency

---
 packages/app/styles/_semantic-colors.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index e5cdfcb23..3dea0bc28 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -1,13 +1,13 @@
 /* Dark Mode (default) */
 [data-mantine-color-scheme='dark'] {
   /* Backgrounds */
-  --color-bg-body: var(--mantine-color-dark-7);
-  --color-bg-surface: var(--mantine-color-dark-6);
+  --color-bg-body: var(--mantine-color-dark-8);
+  --color-bg-surface: var(--mantine-color-dark-5);
   --color-bg-muted: var(--mantine-color-dark-7);
-  --color-bg-muted-hover: var(--mantine-color-dark-5);
+  --color-bg-muted-hover: var(--mantine-color-dark-6);
   --color-bg-highlighted: var(--mantine-color-dark-5);
-  --color-bg-sidebar: var(--mantine-color-dark-7);
-  --color-bg-header: var(--mantine-color-dark-7);
+  --color-bg-sidebar: var(--mantine-color-dark-8);
+  --color-bg-header: var(--mantine-color-dark-8);
   --color-bg-hover: var(--mantine-color-dark-6);
   --color-bg-active: var(--mantine-color-dark-5);
   --color-bg-field: var(--mantine-color-dark-6);
@@ -70,6 +70,7 @@
   --color-bg-body: var(--mantine-color-white);
   --color-bg-surface: var(--mantine-color-gray-1);
   --color-bg-muted: #f6f6fa;
+  --color-bg-muted-hover: #e6e8ed;
   --color-bg-highlighted: #e6e8ed;
   --color-bg-sidebar: var(--mantine-color-white);
   --color-bg-header: var(--mantine-color-gray-1);

From d530c01b1ecaea9426dd2fe31dddd6198762a342 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 11 Nov 2025 23:38:39 +0000
Subject: [PATCH 22/49] refactor: Update DSSelect to use Mantine's Select
 component; enhance table styling and improve session side panel layout;
 adjust semantic colors and utility classes for better theming

---
 packages/app/src/DSSelect.tsx                    | 16 +++++++++-------
 packages/app/src/HDXMultiSeriesTableChart.tsx    |  7 +++++--
 packages/app/src/SessionSidePanel.tsx            |  5 ++---
 .../app/src/components/DBTable/TableHeader.tsx   |  2 +-
 .../app/styles/SessionSubpanelV2.module.scss     | 10 +++++-----
 packages/app/styles/_semantic-colors.scss        |  6 ++++--
 packages/app/styles/_utilities.scss              |  4 +++-
 7 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/app/src/DSSelect.tsx b/packages/app/src/DSSelect.tsx
index 3a417ea79..0a5392241 100644
--- a/packages/app/src/DSSelect.tsx
+++ b/packages/app/src/DSSelect.tsx
@@ -1,4 +1,4 @@
-import Select from 'react-select';
+import { Select } from '@mantine/core';
 
 export default function DSSelect<
   Option extends { value: string | undefined; label: React.ReactNode },
@@ -15,12 +15,14 @@ export default function DSSelect<
 }) {
   return (
     <Select
-      isDisabled={disabled}
-      options={options}
-      className="ds-select"
-      value={options.find(v => v.value === value)}
-      onChange={newValue => onChange(newValue?.value)}
-      classNamePrefix="ds-react-select"
+      disabled={disabled}
+      data={options.map(opt => ({
+        value: opt.value ?? '',
+        label: typeof opt.label === 'string' ? opt.label : String(opt.label),
+      }))}
+      value={value ?? null}
+      onChange={newValue => onChange(newValue ?? undefined)}
+      clearable
     />
   );
 }
diff --git a/packages/app/src/HDXMultiSeriesTableChart.tsx b/packages/app/src/HDXMultiSeriesTableChart.tsx
index 352c79d95..618ac6961 100644
--- a/packages/app/src/HDXMultiSeriesTableChart.tsx
+++ b/packages/app/src/HDXMultiSeriesTableChart.tsx
@@ -197,7 +197,10 @@ export const Table = ({
 
   return (
     <div className="overflow-auto h-100 fs-8" ref={tableContainerRef}>
-      <table className="w-100" style={{ tableLayout: 'fixed' }}>
+      <table
+        className="w-100"
+        style={{ tableLayout: 'fixed', borderCollapse: 'collapse' }}
+      >
         <thead
           style={{
             background: 'inherit',
@@ -225,7 +228,7 @@ export const Table = ({
                             <CsvExportButton
                               data={csvData}
                               filename="HyperDX_table_results"
-                              className="fs-8 text-muted-hover ms-2"
+                              className="fs-8 ms-2"
                               title="Download table as CSV"
                             >
                               <i className="bi bi-download" />
diff --git a/packages/app/src/SessionSidePanel.tsx b/packages/app/src/SessionSidePanel.tsx
index 8820d549e..9b85871ff 100644
--- a/packages/app/src/SessionSidePanel.tsx
+++ b/packages/app/src/SessionSidePanel.tsx
@@ -85,11 +85,10 @@ export default function SessionSidePanel({
       styles={{
         body: {
           padding: 0,
-          background: '#0F1216',
           height: '100vh',
         },
       }}
-      className="border-start border-dark"
+      className="border-start"
     >
       <ZIndexContext.Provider value={zIndex}>
         <div className="d-flex flex-column h-100">
@@ -111,7 +110,7 @@ export default function SessionSidePanel({
                   <span>{session?.sessionCount} Events</span>
                 </div>
               </div>
-              <div className="d-flex">
+              <div className="d-flex gap-2">
                 <CopyToClipboard
                   text={window.location.href}
                   onCopy={() => {
diff --git a/packages/app/src/components/DBTable/TableHeader.tsx b/packages/app/src/components/DBTable/TableHeader.tsx
index c4ca3bfac..11199c1e5 100644
--- a/packages/app/src/components/DBTable/TableHeader.tsx
+++ b/packages/app/src/components/DBTable/TableHeader.tsx
@@ -22,7 +22,7 @@ export default function TableHeader({
 }) {
   return (
     <th
-      className="overflow-hidden bg-muted"
+      className="overflow-hidden"
       key={header.id}
       colSpan={header.colSpan}
       style={{
diff --git a/packages/app/styles/SessionSubpanelV2.module.scss b/packages/app/styles/SessionSubpanelV2.module.scss
index ba7efd69e..513a1ca54 100644
--- a/packages/app/styles/SessionSubpanelV2.module.scss
+++ b/packages/app/styles/SessionSubpanelV2.module.scss
@@ -41,7 +41,7 @@
 
 .eventRowError {
   .eventRowIcon {
-    background: var(--color-text-danger);
+    background: var(--color-bg-danger);
   }
 
   .eventRowTitle {
@@ -51,7 +51,7 @@
 
 .eventRowSuccess {
   .eventRowIcon {
-    background: var(--color-text-success);
+    background: var(--color-bg-success);
 
     i {
       color: #000;
@@ -69,7 +69,7 @@
 }
 
 .eventRowIcon {
-  background: var(--color-text);
+  background: var(--color-bg-neutral);
   width: 26px;
   height: 26px;
   display: flex;
@@ -98,7 +98,7 @@
   border-radius: 2px;
 
   &:hover {
-    background: var(--color-bg-hover);
+    background: var(--color-bg-highlighted);
   }
 }
 
@@ -111,7 +111,7 @@
   align-self: center;
 
   &:hover {
-    background: var(--color-bg-muted);
+    background: var(--color-bg-highlighted);
   }
 }
 
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 3dea0bc28..6b4b38ae3 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -4,7 +4,6 @@
   --color-bg-body: var(--mantine-color-dark-8);
   --color-bg-surface: var(--mantine-color-dark-5);
   --color-bg-muted: var(--mantine-color-dark-7);
-  --color-bg-muted-hover: var(--mantine-color-dark-6);
   --color-bg-highlighted: var(--mantine-color-dark-5);
   --color-bg-sidebar: var(--mantine-color-dark-8);
   --color-bg-header: var(--mantine-color-dark-8);
@@ -14,6 +13,8 @@
   --color-bg-field-hover: var(--mantine-color-dark-5);
   --color-bg-neutral: var(--mantine-color-dark-4);
   --color-bg-success: var(--mantine-color-green-5);
+  --color-bg-danger: var(--mantine-color-red-5);
+  --color-bg-warning: var(--mantine-color-orange-5);
 
   /* Borders & Dividers */
   --color-border: var(--mantine-color-dark-5);
@@ -70,7 +71,6 @@
   --color-bg-body: var(--mantine-color-white);
   --color-bg-surface: var(--mantine-color-gray-1);
   --color-bg-muted: #f6f6fa;
-  --color-bg-muted-hover: #e6e8ed;
   --color-bg-highlighted: #e6e8ed;
   --color-bg-sidebar: var(--mantine-color-white);
   --color-bg-header: var(--mantine-color-gray-1);
@@ -81,6 +81,8 @@
   --color-bg-field-hover: var(--mantine-color-gray-1);
   --color-bg-neutral: var(--mantine-color-gray-5);
   --color-bg-success: var(--mantine-color-green-8);
+  --color-bg-danger: var(--mantine-color-red-8);
+  --color-bg-warning: var(--mantine-color-orange-8);
 
   /* Borders & Dividers - inverted */
   --color-border: var(--mantine-color-gray-2);
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
index 8a8f50515..2373a057e 100644
--- a/packages/app/styles/_utilities.scss
+++ b/packages/app/styles/_utilities.scss
@@ -16,7 +16,9 @@
 }
 
 .bg-muted-hover {
-  background-color: var(--color-bg-muted-hover);
+  &:hover {
+    background-color: var(--color-bg-muted);
+  }
 }
 
 .bg-highlighted {

From 9dc4f10bd07d556504b0316c6c6de99e98bdfe8b Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 11:25:48 +0000
Subject: [PATCH 23/49] refactor: Update button icons to use
 IconPlayerPlayFilled; enhance styling for better theming and consistency
 across components

---
 packages/app/src/AuthPage.tsx                 |   2 +-
 packages/app/src/AutocompleteInput.tsx        |   2 +-
 packages/app/src/DBDashboardPage.tsx          |  21 +-
 packages/app/src/DBSearchPage.tsx             |   5 +-
 packages/app/src/ServicesDashboardPage.tsx    |   3 +-
 packages/app/src/SessionEventList.tsx         |   3 +-
 packages/app/src/SessionsPage.tsx             |   3 +-
 packages/app/src/ThemeWrapper.tsx             |   2 +-
 .../src/components/DBEditTimeChartForm.tsx    |   4 +-
 .../src/components/InputLanguageSwitch.tsx    |  14 +-
 .../app/src/components/SQLInlineEditor.tsx    |   2 +-
 .../Search/DBSearchHeatmapChart.tsx           |   4 +-
 .../src/components/TimePicker/TimePicker.tsx  |  17 +-
 .../app/styles/EndpointSubpanel.module.scss   |   4 +-
 packages/app/styles/HDXLineChart.module.scss  |  10 +-
 .../app/styles/ResizablePanel.module.scss     |   8 +-
 .../styles/SourceSelectControlled.module.scss |   5 +-
 packages/app/styles/_bootstrap-utilities.scss | 187 +++++++++++-------
 packages/app/styles/_semantic-colors.scss     |   2 +-
 packages/app/styles/app.scss                  |   7 +-
 20 files changed, 180 insertions(+), 125 deletions(-)

diff --git a/packages/app/src/AuthPage.tsx b/packages/app/src/AuthPage.tsx
index a1ce1fe32..70f03870f 100644
--- a/packages/app/src/AuthPage.tsx
+++ b/packages/app/src/AuthPage.tsx
@@ -184,7 +184,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
                         placeholder="Confirm Password"
                         {...form.confirmPassword}
                       />
-                      <Notification color="gray.7" withCloseButton={false}>
+                      <Notification withCloseButton={false}>
                         <PasswordCheck password={currentPassword} />
                       </Notification>
                     </>
diff --git a/packages/app/src/AutocompleteInput.tsx b/packages/app/src/AutocompleteInput.tsx
index bcdff6ff5..0cd6ce1ff 100644
--- a/packages/app/src/AutocompleteInput.tsx
+++ b/packages/app/src/AutocompleteInput.tsx
@@ -292,7 +292,7 @@ export default function AutocompleteInput({
           )}
         </div>
         {belowSuggestions != null && (
-          <div className="border-top px-3 pt-2 pb-1 mt-2 fs-8 d-flex align-items-center text-muted flex-wrap">
+          <div className="border-top px-3 pt-2 pb-1 fs-8 d-flex align-items-center text-muted flex-wrap">
             {belowSuggestions}
           </div>
         )}
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index 01b18d178..2cd84cba4 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -45,7 +45,7 @@ import {
 } from '@mantine/core';
 import { useHover } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
-import { IconFilterEdit } from '@tabler/icons-react';
+import { IconFilterEdit, IconPlayerPlayFilled } from '@tabler/icons-react';
 
 import { ContactSupportText } from '@/components/ContactSupportText';
 import EditTimeChartForm from '@/components/DBEditTimeChartForm';
@@ -212,7 +212,7 @@ const Tile = forwardRef(
     return (
       <div
         data-testid={`dashboard-tile-${chart.id}`}
-        className={`p-2 ${className} d-flex flex-column ${
+        className={`p-2 ${className} d-flex flex-column bg-muted rounded ${
           isHighlighed && 'dashboard-chart-highlighted'
         }`}
         id={`chart-${chart.id}`}
@@ -221,9 +221,6 @@ const Tile = forwardRef(
         key={chart.id}
         ref={ref}
         style={{
-          background:
-            'linear-gradient(180deg, rgba(250,250,250,0.018) 0%, rgba(250,250,250,0.008) 100%)',
-          borderRadius: 2,
           ...style,
         }}
         onMouseDown={onMouseDown}
@@ -247,6 +244,7 @@ const Tile = forwardRef(
                   <Button
                     data-testid={`tile-alerts-button-${chart.id}`}
                     variant="subtle"
+                    color="gray"
                     size="xxs"
                     onClick={onEditClick}
                     title="Alerts"
@@ -259,6 +257,7 @@ const Tile = forwardRef(
               <Button
                 data-testid={`tile-duplicate-button-${chart.id}`}
                 variant="subtle"
+                color="gray"
                 size="xxs"
                 onClick={onDuplicateClick}
                 title="Duplicate"
@@ -268,6 +267,7 @@ const Tile = forwardRef(
               <Button
                 data-testid={`tile-edit-button-${chart.id}`}
                 variant="subtle"
+                color="gray"
                 size="xxs"
                 onClick={onEditClick}
                 title="Edit"
@@ -277,6 +277,7 @@ const Tile = forwardRef(
               <Button
                 data-testid={`tile-delete-button-${chart.id}`}
                 variant="subtle"
+                color="gray"
                 size="xxs"
                 onClick={onDeleteClick}
                 title="Delete"
@@ -1062,9 +1063,8 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             onClick={refresh}
             loading={manualRefreshCooloff}
             disabled={manualRefreshCooloff}
-            color="gray"
             mr={6}
-            variant="outline"
+            variant="default"
             title="Refresh dashboard"
             px="xs"
           >
@@ -1073,8 +1073,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
         </Tooltip>
         <Tooltip withArrow label="Edit Filters" fz="xs" color="gray">
           <Button
-            variant="outline"
-            color="gray"
+            variant="default"
             px="xs"
             mr={6}
             onClick={() => setShowFiltersModal(true)}
@@ -1082,8 +1081,8 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             <IconFilterEdit strokeWidth={1} />
           </Button>
         </Tooltip>
-        <Button variant="outline" type="submit" color="green">
-          <i className="bi bi-play"></i>
+        <Button variant="outline" type="submit">
+          <IconPlayerPlayFilled size={16} />
         </Button>
       </Flex>
       <DashboardFilters
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 57cb2a1bd..c7ec365bb 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -57,6 +57,7 @@ import {
   useDocumentVisibility,
 } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
+import { IconPlayerPlayFilled } from '@tabler/icons-react';
 import { keepPreviousData, useIsFetching } from '@tanstack/react-query';
 import { SortingState } from '@tanstack/react-table';
 import CodeMirror from '@uiw/react-codemirror';
@@ -1538,9 +1539,9 @@ function DBSearchPage() {
             data-testid="search-submit-button"
             variant="outline"
             type="submit"
-            color={formState.isDirty ? 'green' : 'gray.4'}
+            color={formState.isDirty ? 'var(--color-text-success)' : 'gray'}
           >
-            <i className="bi bi-play"></i>
+            <IconPlayerPlayFilled size={16} />
           </Button>
         </Flex>
       </form>
diff --git a/packages/app/src/ServicesDashboardPage.tsx b/packages/app/src/ServicesDashboardPage.tsx
index bb586dda0..ef0f51f85 100644
--- a/packages/app/src/ServicesDashboardPage.tsx
+++ b/packages/app/src/ServicesDashboardPage.tsx
@@ -24,6 +24,7 @@ import {
   Text,
   Tooltip,
 } from '@mantine/core';
+import { IconPlayerPlayFilled } from '@tabler/icons-react';
 
 import {
   ERROR_RATE_PERCENTAGE_NUMBER_FORMAT,
@@ -1002,7 +1003,7 @@ function ServicesDashboardPage() {
               </Button>
             </Tooltip>
             <Button variant="outline" type="submit" px="sm">
-              <i className="bi bi-play"></i>
+              <IconPlayerPlayFilled size={16} />
             </Button>
           </Group>
         </Group>
diff --git a/packages/app/src/SessionEventList.tsx b/packages/app/src/SessionEventList.tsx
index 3c1e8c2e4..0f9906ef1 100644
--- a/packages/app/src/SessionEventList.tsx
+++ b/packages/app/src/SessionEventList.tsx
@@ -3,6 +3,7 @@ import cx from 'classnames';
 import { ChartConfigWithOptDateRange } from '@hyperdx/common-utils/dist/types';
 import { ScrollArea, Skeleton, Stack } from '@mantine/core';
 import { useThrottledCallback, useThrottledValue } from '@mantine/hooks';
+import { IconPlayerPlayFilled } from '@tabler/icons-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import useRowWhere from '@/hooks/useRowWhere';
@@ -78,7 +79,7 @@ const EventRow = React.forwardRef(
           </div>
         </div>
         <div className={styles.eventRowTimestamp} onClick={onTimeClick}>
-          <i className="bi bi-play-fill me-1 fs-8" />
+          <IconPlayerPlayFilled size={12} className="me-1" />
           {event.formattedTimestamp}
         </div>
       </div>
diff --git a/packages/app/src/SessionsPage.tsx b/packages/app/src/SessionsPage.tsx
index 7012262cb..a0fdaf6a5 100644
--- a/packages/app/src/SessionsPage.tsx
+++ b/packages/app/src/SessionsPage.tsx
@@ -36,6 +36,7 @@ import {
   Text,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
+import { IconPlayerPlayFilled } from '@tabler/icons-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { SourceSelectControlled } from '@/components/SourceSelect';
@@ -490,7 +491,7 @@ export default function SessionsPage() {
                 }}
               />
               <Button variant="outline" type="submit" px="sm">
-                <i className="bi bi-play"></i>
+                <IconPlayerPlayFilled size={16} />
               </Button>
             </Group>
           </Flex>
diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index 6333d1ee7..a4d20dbf2 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -247,7 +247,7 @@ const makeTheme = ({
                 backgroundColor: 'var(--color-bg-muted)',
               },
               '&:active': {
-                backgroundColor: 'var(--color-bg-surface)',
+                backgroundColor: 'var(--color-bg-muted)',
               },
             },
           };
diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx
index 003f12022..b0e85b572 100644
--- a/packages/app/src/components/DBEditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm.tsx
@@ -47,6 +47,7 @@ import {
   Text,
   Textarea,
 } from '@mantine/core';
+import { IconPlayerPlayFilled } from '@tabler/icons-react';
 
 import { AGG_FNS } from '@/ChartUtils';
 import { AlertChannelForm, getAlertReferenceLines } from '@/components/Alerts';
@@ -992,10 +993,9 @@ export default function EditTimeChartForm({
               data-testid="chart-run-query-button"
               variant="outline"
               type="submit"
-              color="green"
               onClick={onSubmit}
             >
-              <i className="bi bi-play"></i>
+              <IconPlayerPlayFilled size={16} />
             </Button>
           )}
         </Flex>
diff --git a/packages/app/src/components/InputLanguageSwitch.tsx b/packages/app/src/components/InputLanguageSwitch.tsx
index 0d1bfbb46..1da0d6aa5 100644
--- a/packages/app/src/components/InputLanguageSwitch.tsx
+++ b/packages/app/src/components/InputLanguageSwitch.tsx
@@ -12,12 +12,20 @@ export default function InputLanguageSwitch({
   return (
     <Flex wrap="nowrap" gap="xxxs" px="sm">
       {showHotkey && (
-        <Text size="xxs" bg="gray.8" px={4} py={0} mr={4} lh={1.4}>
+        <Text
+          size="xxs"
+          bg="var(--color-bg-neutral)"
+          c="white"
+          px={4}
+          py={0}
+          mr={4}
+          lh={1.4}
+        >
           /
         </Text>
       )}
       <Text
-        c={language === 'sql' ? 'green' : 'gray'}
+        c={language === 'sql' ? 'var(--color-text-success)' : 'gray'}
         onClick={() => onLanguageChange('sql')}
         size="xs"
         role="button"
@@ -28,7 +36,7 @@ export default function InputLanguageSwitch({
       <Text
         size="xs"
         role="button"
-        c={language === 'lucene' ? 'green' : 'gray'}
+        c={language === 'lucene' ? 'var(--color-text-success)' : 'gray'}
         onClick={() => onLanguageChange('lucene')}
       >
         Lucene
diff --git a/packages/app/src/components/SQLInlineEditor.tsx b/packages/app/src/components/SQLInlineEditor.tsx
index 2cc999e8c..a652499cb 100644
--- a/packages/app/src/components/SQLInlineEditor.tsx
+++ b/packages/app/src/components/SQLInlineEditor.tsx
@@ -311,7 +311,7 @@ export default function SQLInlineEditor({
       shadow="none"
       style={{
         backgroundColor: 'var(--color-bg-field)',
-        border: `1px solid ${error ? 'var(--mantine-color-red-7)' : 'var(--color-border)'}`,
+        border: `1px solid ${error ? 'var(--color-bg-danger)' : 'var(--color-border)'}`,
         display: 'flex',
         alignItems: 'center',
         minHeight: size === 'xs' ? 30 : 36,
diff --git a/packages/app/src/components/Search/DBSearchHeatmapChart.tsx b/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
index c0806cc84..da28a0abe 100644
--- a/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
+++ b/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
@@ -17,7 +17,7 @@ import { ActionIcon } from '@mantine/core';
 import { Paper } from '@mantine/core';
 import { Center } from '@mantine/core';
 import { Text } from '@mantine/core';
-import { IconPlayerPlay } from '@tabler/icons-react';
+import { IconPlayerPlayFilled } from '@tabler/icons-react';
 
 import { getDurationMsExpression } from '@/source';
 
@@ -196,7 +196,7 @@ function DBSearchHeatmapForm({
           h="auto"
           title="Run"
         >
-          <IconPlayerPlay />
+          <IconPlayerPlayFilled />
         </ActionIcon>
       </Flex>
     </form>
diff --git a/packages/app/src/components/TimePicker/TimePicker.tsx b/packages/app/src/components/TimePicker/TimePicker.tsx
index 46b4777c8..5ddedbdb8 100644
--- a/packages/app/src/components/TimePicker/TimePicker.tsx
+++ b/packages/app/src/components/TimePicker/TimePicker.tsx
@@ -22,11 +22,10 @@ import {
 } from '@mantine/core';
 import { DateInput, DateInputProps } from '@mantine/dates';
 import { useDisclosure } from '@mantine/hooks';
+import { IconBolt, IconCalendarFilled } from '@tabler/icons-react';
 
 import { useUserPreferences } from '@/useUserPreferences';
 
-import { Icon } from '../Icon';
-
 import { TimePickerMode } from './types';
 import { useTimePickerForm } from './useTimePickerForm';
 import {
@@ -224,12 +223,9 @@ export const TimePicker = ({
           data-testid="time-picker-input"
           leftSection={
             isLiveMode ? (
-              <Icon
-                name="lightning-charge-fill"
-                className="fs-8 text-success"
-              />
+              <IconBolt size={16} className="text-success" />
             ) : (
-              <Icon name="calendar-fill" className="fs-8" />
+              <IconCalendarFilled size={16} />
             )
           }
           styles={{
@@ -241,12 +237,7 @@ export const TimePicker = ({
           }}
           rightSection={
             opened && (
-              <Text
-                size="xxs"
-                bg="var(--color-bg-active)"
-                px={4}
-                c="var(--color-text)"
-              >
+              <Text size="xxs" bg="var(--color-bg-neutral)" px={4} c="white">
                 d
               </Text>
             )
diff --git a/packages/app/styles/EndpointSubpanel.module.scss b/packages/app/styles/EndpointSubpanel.module.scss
index 5c7fe115e..e90235cea 100644
--- a/packages/app/styles/EndpointSubpanel.module.scss
+++ b/packages/app/styles/EndpointSubpanel.module.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   font-size: 12px;
   height: 100%;
-  background: var(--color-bg-body);
+  background: var(--color-bg-surface);
   box-shadow: 0 0 100px 40px rgb(0 0 0 / 70%);
-  border-left: 1px solid var(--mantine-color-dark-9);
+  border-left: 1px solid var(--color-border);
 }
diff --git a/packages/app/styles/HDXLineChart.module.scss b/packages/app/styles/HDXLineChart.module.scss
index f13c711d8..c5821545a 100644
--- a/packages/app/styles/HDXLineChart.module.scss
+++ b/packages/app/styles/HDXLineChart.module.scss
@@ -21,10 +21,9 @@
 }
 
 .legendMoreLink {
-  color: var(--mantine-color-dark-4);
+  color: var(--color-text-muted);
   cursor: pointer;
   text-decoration: underline;
-  text-decoration-color: var(--mantine-color-dark-7);
 }
 
 .legendTooltipContent {
@@ -38,16 +37,15 @@
 
 .chartTooltip {
   backdrop-filter: blur(8px);
-  background-color: rgba(#1a1d23, 0.75);
-  border: 1px solid #5f6776;
+  background-color: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 2px;
   font-size: 11px;
 }
 
 .chartTooltipHeader {
   padding: 2px 12px;
-  color: var(--mantine-color-dark-2);
-  border-bottom: 1px solid var(--mantine-color-dark-4);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .chartTooltipContent {
diff --git a/packages/app/styles/ResizablePanel.module.scss b/packages/app/styles/ResizablePanel.module.scss
index f0934951d..f6b2e5e44 100644
--- a/packages/app/styles/ResizablePanel.module.scss
+++ b/packages/app/styles/ResizablePanel.module.scss
@@ -10,11 +10,11 @@
 
   &:hover,
   &:active {
-    background-color: var(--mantine-color-dark-3);
+    background-color: var(--color-bg-neutral);
   }
 
   &:active {
-    background-color: var(--mantine-color-dark-4);
+    background-color: var(--color-bg-neutral);
     width: 8px;
     margin-right: -1px;
   }
@@ -32,11 +32,11 @@
 
   &:hover,
   &:active {
-    background-color: var(--mantine-color-dark-3);
+    background-color: var(--color-bg-neutral);
   }
 
   &:active {
-    background-color: var(--mantine-color-dark-4);
+    background-color: var(--color-bg-neutral);
     height: 8px;
     margin-bottom: -1px;
   }
diff --git a/packages/app/styles/SourceSelectControlled.module.scss b/packages/app/styles/SourceSelectControlled.module.scss
index b8a438c99..efc8e37e6 100644
--- a/packages/app/styles/SourceSelectControlled.module.scss
+++ b/packages/app/styles/SourceSelectControlled.module.scss
@@ -1,13 +1,12 @@
 .sourceSchemaPreviewButton {
   pointer-events: all;
   font-size: var(--mantine-font-size-xxs);
-  background-color: var(--mantine-color-gray-9);
-  color: var(--mantine-color-gray-2);
+  color: var(--color-text-success);
   padding-inline: var(--mantine-spacing-xxxs);
   border-radius: var(--mantine-radius-xs);
 
   &:hover {
-    color: var(--mantine-color-gray-1);
+    color: var(--color-text-success-hover);
     cursor: pointer;
   }
 }
diff --git a/packages/app/styles/_bootstrap-utilities.scss b/packages/app/styles/_bootstrap-utilities.scss
index 82d532ad6..860c0167e 100644
--- a/packages/app/styles/_bootstrap-utilities.scss
+++ b/packages/app/styles/_bootstrap-utilities.scss
@@ -428,79 +428,103 @@
   margin-bottom: auto !important;
 }
 
-// Padding utilities (using Mantine spacing)
+// Padding utilities
 .p-0 {
   padding: 0 !important;
 }
 
+.p-0\.5 {
+  padding: .125rem !important;
+}
+
 .p-1 {
-  padding: var(--mantine-spacing-xs) !important;
+  padding: .25rem !important;
 }
 
 .p-2 {
-  padding: var(--mantine-spacing-sm) !important;
+  padding: .5rem !important;
 }
 
 .p-3 {
-  padding: var(--mantine-spacing-md) !important;
+  padding: 1rem !important;
 }
 
 .p-4 {
-  padding: var(--mantine-spacing-lg) !important;
+  padding: 1.5rem !important;
+}
+
+.p-4\.5 {
+  padding: 2rem !important;
 }
 
 .p-5 {
-  padding: var(--mantine-spacing-xl) !important;
+  padding: 3rem !important;
 }
 
-// Padding top
-.pt-0 {
-  padding-top: 0 !important;
+// Padding bottom
+.pb-0 {
+    padding-bottom: 0!important
 }
 
-.pt-1 {
-  padding-top: var(--mantine-spacing-xs) !important;
+.pb-0\.5 {
+    padding-bottom: .125rem!important
 }
 
-.pt-2 {
-  padding-top: var(--mantine-spacing-sm) !important;
+.pb-1 {
+    padding-bottom: .25rem!important
 }
 
-.pt-3 {
-  padding-top: var(--mantine-spacing-md) !important;
+.pb-2 {
+    padding-bottom: .5rem!important
 }
 
-.pt-4 {
-  padding-top: var(--mantine-spacing-lg) !important;
+.pb-3 {
+    padding-bottom: 1rem!important
 }
 
-.pt-5 {
-  padding-top: var(--mantine-spacing-xl) !important;
+.pb-4 {
+    padding-bottom: 1.5rem!important
 }
 
-// Padding bottom
-.pb-0 {
-  padding-bottom: 0 !important;
+.pb-4\.5 {
+    padding-bottom: 2rem!important
 }
 
-.pb-1 {
-  padding-bottom: var(--mantine-spacing-xs) !important;
+.pb-5 {
+    padding-bottom: 3rem!important
 }
 
-.pb-2 {
-  padding-bottom: var(--mantine-spacing-sm) !important;
+// Padding top
+.pt-0 {
+  padding-top: 0 !important;
 }
 
-.pb-3 {
-  padding-bottom: var(--mantine-spacing-md) !important;
+.pt-0\.5 {
+  padding-top: .125rem !important;
 }
 
-.pb-4 {
-  padding-bottom: var(--mantine-spacing-lg) !important;
+.pt-1 {
+  padding-top: .25rem !important;
 }
 
-.pb-5 {
-  padding-bottom: var(--mantine-spacing-xl) !important;
+.pt-2 {
+  padding-top: .5rem !important;
+}
+
+.pt-3 {
+  padding-top: 1rem !important;
+}
+
+.pt-4 {
+  padding-top: 1.5rem !important;
+}
+
+.pt-4\.5 {
+  padding-top: 2rem !important;
+}
+
+.pt-5 {
+  padding-top: 3rem !important;
 }
 
 // Padding start (left in LTR)
@@ -508,24 +532,32 @@
   padding-inline-start: 0 !important;
 }
 
+.ps-0\.5 {
+  padding-inline-start: .125rem !important;
+}
+
 .ps-1 {
-  padding-inline-start: var(--mantine-spacing-xs) !important;
+  padding-inline-start: .25rem !important;
 }
 
 .ps-2 {
-  padding-inline-start: var(--mantine-spacing-sm) !important;
+  padding-inline-start: .5rem !important;
 }
 
 .ps-3 {
-  padding-inline-start: var(--mantine-spacing-md) !important;
+  padding-inline-start: 1rem !important;
 }
 
 .ps-4 {
-  padding-inline-start: var(--mantine-spacing-lg) !important;
+  padding-inline-start: 1.5rem !important;
+}
+
+.ps-4\.5 {
+  padding-inline-start: 2rem !important;
 }
 
 .ps-5 {
-  padding-inline-start: var(--mantine-spacing-xl) !important;
+  padding-inline-start: 3rem !important;
 }
 
 // Padding end (right in LTR)
@@ -533,24 +565,32 @@
   padding-inline-end: 0 !important;
 }
 
+.pe-0\.5 {
+  padding-inline-end: .125rem !important;
+}
+
 .pe-1 {
-  padding-inline-end: var(--mantine-spacing-xs) !important;
+  padding-inline-end: .25rem !important;
 }
 
 .pe-2 {
-  padding-inline-end: var(--mantine-spacing-sm) !important;
+  padding-inline-end: .5rem !important;
 }
 
 .pe-3 {
-  padding-inline-end: var(--mantine-spacing-md) !important;
+  padding-inline-end: 1rem !important;
 }
 
 .pe-4 {
-  padding-inline-end: var(--mantine-spacing-lg) !important;
+  padding-inline-end: 1.5rem !important;
+}
+
+.pe-4\.5 {
+  padding-inline-end: 2rem !important;
 }
 
 .pe-5 {
-  padding-inline-end: var(--mantine-spacing-xl) !important;
+  padding-inline-end: 3rem !important;
 }
 
 // Padding x-axis
@@ -559,34 +599,39 @@
   padding-right: 0 !important;
 }
 
+.px-0\.5 {
+  padding-left: .125rem !important;
+  padding-right: .125rem !important;
+}
+
 .px-1 {
-  padding-left: var(--mantine-spacing-xs) !important;
-  padding-right: var(--mantine-spacing-xs) !important;
+  padding-left: .25rem !important;
+  padding-right: .25rem !important;
 }
 
 .px-2 {
-  padding-left: var(--mantine-spacing-sm) !important;
-  padding-right: var(--mantine-spacing-sm) !important;
+  padding-left: .5rem !important;
+  padding-right: .5rem !important;
 }
 
 .px-3 {
-  padding-left: var(--mantine-spacing-md) !important;
-  padding-right: var(--mantine-spacing-md) !important;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
 }
 
 .px-4 {
-  padding-left: var(--mantine-spacing-lg) !important;
-  padding-right: var(--mantine-spacing-lg) !important;
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
 }
 
-.px-5 {
-  padding-left: var(--mantine-spacing-xl) !important;
-  padding-right: var(--mantine-spacing-xl) !important;
+.px-4\.5 {
+  padding-left: 2rem !important;
+  padding-right: 2rem !important;
 }
 
-.px-6 {
-  padding-left: calc(var(--mantine-spacing-xl) * 1.5) !important;
-  padding-right: calc(var(--mantine-spacing-xl) * 1.5) !important;
+.px-5 {
+  padding-left: 3rem !important;
+  padding-right: 3rem !important;
 }
 
 // Padding y-axis
@@ -595,29 +640,39 @@
   padding-bottom: 0 !important;
 }
 
+.py-0\.5 {
+  padding-top: .125rem !important;
+  padding-bottom: .125rem !important;
+}
+
 .py-1 {
-  padding-top: var(--mantine-spacing-xs) !important;
-  padding-bottom: var(--mantine-spacing-xs) !important;
+  padding-top: .25rem !important;
+  padding-bottom: .25rem !important;
 }
 
 .py-2 {
-  padding-top: var(--mantine-spacing-sm) !important;
-  padding-bottom: var(--mantine-spacing-sm) !important;
+  padding-top: .5rem !important;
+  padding-bottom: .5rem !important;
 }
 
 .py-3 {
-  padding-top: var(--mantine-spacing-md) !important;
-  padding-bottom: var(--mantine-spacing-md) !important;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
 }
 
 .py-4 {
-  padding-top: var(--mantine-spacing-lg) !important;
-  padding-bottom: var(--mantine-spacing-lg) !important;
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.py-4\.5 {
+  padding-top: 2rem !important;
+  padding-bottom: 2rem !important;
 }
 
 .py-5 {
-  padding-top: var(--mantine-spacing-xl) !important;
-  padding-bottom: var(--mantine-spacing-xl) !important;
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
 }
 
 // Width utilities
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 6b4b38ae3..44a7fa025 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -69,7 +69,7 @@
 
   /* Backgrounds - inverted (dark becomes light) */
   --color-bg-body: var(--mantine-color-white);
-  --color-bg-surface: var(--mantine-color-gray-1);
+  --color-bg-surface: var(--mantine-color-white);
   --color-bg-muted: #f6f6fa;
   --color-bg-highlighted: #e6e8ed;
   --color-bg-sidebar: var(--mantine-color-white);
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index 23be93a9d..980671926 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -256,12 +256,13 @@ body {
   opacity: 1 !important;
 }
 .react-grid-item > .react-resizable-handle::after {
-  // border-color: rgba($green, 0.4) !important;
-  border-color: rgba(#FAFAFA, 0.8) !important;
-  right: -4px;
+  border-color: var(--color-text) !important;
+  right: -4px ;
   bottom: -4px;
   width: 4px;
   height: 4px;
+  border-right: 2px solid var(--color-text) !important;
+  border-bottom: 2px solid var(--color-text) !important;
 }
 
 // Nextra Overrides

From 5a15c78068f67cc5e4d251c192d083f8f7561cc2 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 11:41:43 +0000
Subject: [PATCH 24/49] refactor: Enhance styling for SessionCard and add hover
 effects; introduce new SCSS utilities for better theming and interactivity

---
 packages/app/src/SessionsPage.tsx            |  9 ++++-----
 packages/app/styles/SessionsPage.module.scss | 11 +++++++++++
 packages/app/styles/_utilities.scss          |  6 ++++++
 packages/app/styles/app.scss                 |  7 +++++++
 4 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 packages/app/styles/SessionsPage.module.scss

diff --git a/packages/app/src/SessionsPage.tsx b/packages/app/src/SessionsPage.tsx
index a0fdaf6a5..f05ddf104 100644
--- a/packages/app/src/SessionsPage.tsx
+++ b/packages/app/src/SessionsPage.tsx
@@ -54,6 +54,8 @@ import { useSource, useSources } from './source';
 import { FormatTime } from './useFormatTime';
 import { formatDistanceToNowStrictShort } from './utils';
 
+import styles from '../styles/SessionsPage.module.scss';
+
 function SessionCard({
   email,
   maxTime,
@@ -85,14 +87,11 @@ function SessionCard({
   return (
     <div
       data-testid={`session-card-${sessionId}`}
-      className="bg-muted rounded p-3 d-flex align-items-center justify-content-between"
+      className={`bg-muted rounded p-3 d-flex align-items-center justify-content-between ${styles.sessionCard}`}
       onClick={onClick}
       role="button"
     >
-      <div
-        style={{ width: '50%', maxWidth: 500 }}
-        className="child-hover-trigger"
-      >
+      <div style={{ width: '50%', maxWidth: 500 }} className={styles.emailText}>
         {email || `Anonymous Session ${sessionId}`}
       </div>
       <div>
diff --git a/packages/app/styles/SessionsPage.module.scss b/packages/app/styles/SessionsPage.module.scss
new file mode 100644
index 000000000..c79d2cf8f
--- /dev/null
+++ b/packages/app/styles/SessionsPage.module.scss
@@ -0,0 +1,11 @@
+.sessionCard {
+  &:hover {
+    .emailText {
+      color: var(--color-text-success);
+    }
+  }
+}
+
+.emailText {
+  transition: color 0.2s ease;
+}
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
index 2373a057e..ddbf016b9 100644
--- a/packages/app/styles/_utilities.scss
+++ b/packages/app/styles/_utilities.scss
@@ -25,6 +25,12 @@
   background-color: var(--color-bg-highlighted);
 }
 
+.bg-highlighted-hover {
+  &:hover {
+    background-color: var(--color-bg-highlighted);
+  }
+}
+
 .bg-danger-transparent {
   background-color: color-mix(
     in srgb,
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index 980671926..fe4769250 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -359,3 +359,10 @@ a.mantine-focus-auto:hover {
     outline: none;
   }
 }
+
+// Global cursor pointer for interactive elements
+button,
+a,
+[role='button'] {
+  cursor: pointer;
+}

From f0768bf40502a3ad8e27fe1f7c181280f40555be Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 11:57:42 +0000
Subject: [PATCH 25/49] refactor: Update ThemeWrapper for improved theming and
 consistency

---
 packages/app/src/ThemeWrapper.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index a4d20dbf2..761b78de7 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -3,6 +3,7 @@ import {
   ActionIcon,
   Button,
   MantineProvider,
+  MantineTheme,
   MantineThemeOverride,
   rem,
   Select,
@@ -77,7 +78,6 @@ const makeTheme = ({
       '#1A1B1E',
       '#141517',
       '#101113',
-      '#14171b',
     ],
   },
   headings: {
@@ -119,7 +119,7 @@ const makeTheme = ({
       },
     },
     Card: {
-      styles: (_theme: any, props: any) => {
+      styles: (_theme: MantineTheme, props: { variant?: string }) => {
         if (props.variant === 'muted') {
           return {
             root: {
@@ -163,7 +163,7 @@ const makeTheme = ({
       },
     },
     Paper: {
-      classNames: (_theme: any, props: any) => {
+      classNames: (_theme: MantineTheme, props: { variant?: string }) => {
         if (props.variant === 'muted') {
           return {
             root: 'paper-muted',
@@ -171,7 +171,7 @@ const makeTheme = ({
         }
         return {};
       },
-      styles: (_theme: any, props: any) => {
+      styles: (_theme: MantineTheme, props: { variant?: string }) => {
         if (props.variant === 'muted') {
           return {
             root: {

From 2679c98ea445da5885188c6679828e81712cca7f Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 12:00:22 +0000
Subject: [PATCH 26/49] Merge branch 'main' into update-color-vars


From ef9b039d8bf7769dafc703f04865ed44aaf70796 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 12:58:51 +0000
Subject: [PATCH 27/49] refactor: Clean up test structure for Dashboard
 workflow; improve readability and maintainability

---
 packages/app/src/DBDashboardPage.tsx              | 6 +++++-
 packages/app/tests/e2e/features/dashboard.spec.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index 2cd84cba4..ae123e6e4 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -1081,7 +1081,11 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             <IconFilterEdit strokeWidth={1} />
           </Button>
         </Tooltip>
-        <Button variant="outline" type="submit">
+        <Button
+          data-testid="search-submit-button"
+          variant="outline"
+          type="submit"
+        >
           <IconPlayerPlayFilled size={16} />
         </Button>
       </Flex>
diff --git a/packages/app/tests/e2e/features/dashboard.spec.ts b/packages/app/tests/e2e/features/dashboard.spec.ts
index b3ef269fe..21c1d6db8 100644
--- a/packages/app/tests/e2e/features/dashboard.spec.ts
+++ b/packages/app/tests/e2e/features/dashboard.spec.ts
@@ -187,7 +187,7 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
 
       const runButton = page
         .locator(
-          '[data-testid="search-submit-button"], button:has-text("Search"), i.bi-play',
+          '[data-testid="search-submit-button"], button:has-text("Search")',
         )
         .first();
       await expect(runButton).toBeVisible();

From 5c71d5028f9211f75115688bdbd60fce0b93a709 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 13:40:29 +0000
Subject: [PATCH 28/49] Add react-select back to DSSelect

---
 packages/app/src/DSSelect.tsx | 16 +++++++---------
 packages/app/styles/app.scss  | 31 ++++++++++++++-----------------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/packages/app/src/DSSelect.tsx b/packages/app/src/DSSelect.tsx
index 0a5392241..3a417ea79 100644
--- a/packages/app/src/DSSelect.tsx
+++ b/packages/app/src/DSSelect.tsx
@@ -1,4 +1,4 @@
-import { Select } from '@mantine/core';
+import Select from 'react-select';
 
 export default function DSSelect<
   Option extends { value: string | undefined; label: React.ReactNode },
@@ -15,14 +15,12 @@ export default function DSSelect<
 }) {
   return (
     <Select
-      disabled={disabled}
-      data={options.map(opt => ({
-        value: opt.value ?? '',
-        label: typeof opt.label === 'string' ? opt.label : String(opt.label),
-      }))}
-      value={value ?? null}
-      onChange={newValue => onChange(newValue ?? undefined)}
-      clearable
+      isDisabled={disabled}
+      options={options}
+      className="ds-select"
+      value={options.find(v => v.value === value)}
+      onChange={newValue => onChange(newValue?.value)}
+      classNamePrefix="ds-react-select"
     />
   );
 }
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index fe4769250..dce5d7940 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -169,7 +169,7 @@ body {
 
 .ds-table.table-hover {
   tr.data-row:hover {
-    background-color: #151515af;
+    background-color: var(--color-bg-muted);
   }
 }
 
@@ -199,30 +199,27 @@ body {
   }
 
   .ds-react-select__control {
-    // background: $bg-dark;
-    background: transparent;
+    background: var(--color-bg-field);
     border: 1px solid var(--color-border);
-    // @apply bg-white dark:bg-neutral-700 border-2 border-neutral-300 dark:border-neutral-700 hover:border-neutral-400 dark:hover:border-neutral-500;
-  }
-
-  .ds-react-select__control--is-focused {
-    // @apply border-neutral-500 hover:border-neutral-500 dark:border-neutral-400 dark:hover:border-neutral-400 shadow-none;
   }
 
   .ds-react-select__menu {
-    background: var(--color-bg-surface);
-    border: 1px solid var(--color-text);
-    // @apply bg-neutral-100 dark:bg-neutral-700 border-2 border-neutral-300 dark:border-neutral-600;
+    background: var(--color-bg-field);
+    border: 1px solid var(--color-border);
   }
 
   .ds-react-select__option {
     color: var(--color-text);
-    // background: $bg-dark;
-    // @apply text-neutral-600 dark:text-neutral-200 bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-800;
   }
+
   .ds-react-select__option--is-focused {
-    background: var(--color-bg-field-hover);
+    background: var(--color-bg-muted);
   }
+
+  .ds-react-select__option--is-selected {
+    background: var(--color-bg-muted);
+  }
+
   .ds-react-select__multi-value {
     background: var(--color-bg-field);
 
@@ -251,9 +248,9 @@ body {
 // React Grid for Dashboarding
 .react-grid-item.react-grid-placeholder {
   // Override the default placeholder color from red
-  background: rgba(#A1A1AA, 0.05) !important;
-  border: 1px solid rgba(#FAFAFA, 0.4) !important;
-  opacity: 1 !important;
+  background: var(--color-bg-muted) !important;
+  border: 1px solid var(--color-border) !important;
+  opacity: 0.4 !important;
 }
 .react-grid-item > .react-resizable-handle::after {
   border-color: var(--color-text) !important;

From ce815ecd2d9ad534a16c35f92f257e708a68829e Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 14:25:37 +0000
Subject: [PATCH 29/49] refactor: Update padding utilities to use Mantine
 spacing variables for consistency

---
 packages/app/styles/_bootstrap-utilities.scss | 129 +++++++++---------
 1 file changed, 65 insertions(+), 64 deletions(-)

diff --git a/packages/app/styles/_bootstrap-utilities.scss b/packages/app/styles/_bootstrap-utilities.scss
index 860c0167e..dee4f1ec2 100644
--- a/packages/app/styles/_bootstrap-utilities.scss
+++ b/packages/app/styles/_bootstrap-utilities.scss
@@ -428,37 +428,38 @@
   margin-bottom: auto !important;
 }
 
-// Padding utilities
+// Padding utilities (using Mantine spacing as base unit: 1rem)
+// Bootstrap scale: 0.25rem increments (p-1 = 0.25rem, p-2 = 0.5rem, etc.)
 .p-0 {
   padding: 0 !important;
 }
 
 .p-0\.5 {
-  padding: .125rem !important;
+  padding: calc(var(--mantine-spacing-md) * 0.125) !important; // 0.125rem
 }
 
 .p-1 {
-  padding: .25rem !important;
+  padding: calc(var(--mantine-spacing-md) * 0.25) !important; // 0.25rem
 }
 
 .p-2 {
-  padding: .5rem !important;
+  padding: calc(var(--mantine-spacing-md) * 0.5) !important; // 0.5rem
 }
 
 .p-3 {
-  padding: 1rem !important;
+  padding: var(--mantine-spacing-md) !important; // 1rem
 }
 
 .p-4 {
-  padding: 1.5rem !important;
+  padding: calc(var(--mantine-spacing-md) * 1.5) !important; // 1.5rem
 }
 
 .p-4\.5 {
-  padding: 2rem !important;
+  padding: calc(var(--mantine-spacing-md) * 2) !important; // 2rem
 }
 
 .p-5 {
-  padding: 3rem !important;
+  padding: calc(var(--mantine-spacing-md) * 3) !important; // 3rem
 }
 
 // Padding bottom
@@ -467,31 +468,31 @@
 }
 
 .pb-0\.5 {
-    padding-bottom: .125rem!important
+    padding-bottom: calc(var(--mantine-spacing-md) * 0.125)!important
 }
 
 .pb-1 {
-    padding-bottom: .25rem!important
+    padding-bottom: calc(var(--mantine-spacing-md) * 0.25)!important
 }
 
 .pb-2 {
-    padding-bottom: .5rem!important
+    padding-bottom: calc(var(--mantine-spacing-md) * 0.5)!important
 }
 
 .pb-3 {
-    padding-bottom: 1rem!important
+    padding-bottom: var(--mantine-spacing-md)!important
 }
 
 .pb-4 {
-    padding-bottom: 1.5rem!important
+    padding-bottom: calc(var(--mantine-spacing-md) * 1.5)!important
 }
 
 .pb-4\.5 {
-    padding-bottom: 2rem!important
+    padding-bottom: calc(var(--mantine-spacing-md) * 2)!important
 }
 
 .pb-5 {
-    padding-bottom: 3rem!important
+    padding-bottom: calc(var(--mantine-spacing-md) * 3)!important
 }
 
 // Padding top
@@ -500,31 +501,31 @@
 }
 
 .pt-0\.5 {
-  padding-top: .125rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 0.125) !important;
 }
 
 .pt-1 {
-  padding-top: .25rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 0.25) !important;
 }
 
 .pt-2 {
-  padding-top: .5rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 0.5) !important;
 }
 
 .pt-3 {
-  padding-top: 1rem !important;
+  padding-top: var(--mantine-spacing-md) !important;
 }
 
 .pt-4 {
-  padding-top: 1.5rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 1.5) !important;
 }
 
 .pt-4\.5 {
-  padding-top: 2rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 2) !important;
 }
 
 .pt-5 {
-  padding-top: 3rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 3) !important;
 }
 
 // Padding start (left in LTR)
@@ -533,31 +534,31 @@
 }
 
 .ps-0\.5 {
-  padding-inline-start: .125rem !important;
+  padding-inline-start: calc(var(--mantine-spacing-md) * 0.125) !important;
 }
 
 .ps-1 {
-  padding-inline-start: .25rem !important;
+  padding-inline-start: calc(var(--mantine-spacing-md) * 0.25) !important;
 }
 
 .ps-2 {
-  padding-inline-start: .5rem !important;
+  padding-inline-start: calc(var(--mantine-spacing-md) * 0.5) !important;
 }
 
 .ps-3 {
-  padding-inline-start: 1rem !important;
+  padding-inline-start: var(--mantine-spacing-md) !important;
 }
 
 .ps-4 {
-  padding-inline-start: 1.5rem !important;
+  padding-inline-start: calc(var(--mantine-spacing-md) * 1.5) !important;
 }
 
 .ps-4\.5 {
-  padding-inline-start: 2rem !important;
+  padding-inline-start: calc(var(--mantine-spacing-md) * 2) !important;
 }
 
 .ps-5 {
-  padding-inline-start: 3rem !important;
+  padding-inline-start: calc(var(--mantine-spacing-md) * 3) !important;
 }
 
 // Padding end (right in LTR)
@@ -566,31 +567,31 @@
 }
 
 .pe-0\.5 {
-  padding-inline-end: .125rem !important;
+  padding-inline-end: calc(var(--mantine-spacing-md) * 0.125) !important;
 }
 
 .pe-1 {
-  padding-inline-end: .25rem !important;
+  padding-inline-end: calc(var(--mantine-spacing-md) * 0.25) !important;
 }
 
 .pe-2 {
-  padding-inline-end: .5rem !important;
+  padding-inline-end: calc(var(--mantine-spacing-md) * 0.5) !important;
 }
 
 .pe-3 {
-  padding-inline-end: 1rem !important;
+  padding-inline-end: var(--mantine-spacing-md) !important;
 }
 
 .pe-4 {
-  padding-inline-end: 1.5rem !important;
+  padding-inline-end: calc(var(--mantine-spacing-md) * 1.5) !important;
 }
 
 .pe-4\.5 {
-  padding-inline-end: 2rem !important;
+  padding-inline-end: calc(var(--mantine-spacing-md) * 2) !important;
 }
 
 .pe-5 {
-  padding-inline-end: 3rem !important;
+  padding-inline-end: calc(var(--mantine-spacing-md) * 3) !important;
 }
 
 // Padding x-axis
@@ -600,38 +601,38 @@
 }
 
 .px-0\.5 {
-  padding-left: .125rem !important;
-  padding-right: .125rem !important;
+  padding-left: calc(var(--mantine-spacing-md) * 0.125) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 0.125) !important;
 }
 
 .px-1 {
-  padding-left: .25rem !important;
-  padding-right: .25rem !important;
+  padding-left: calc(var(--mantine-spacing-md) * 0.25) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 0.25) !important;
 }
 
 .px-2 {
-  padding-left: .5rem !important;
-  padding-right: .5rem !important;
+  padding-left: calc(var(--mantine-spacing-md) * 0.5) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 0.5) !important;
 }
 
 .px-3 {
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
+  padding-left: var(--mantine-spacing-md) !important;
+  padding-right: var(--mantine-spacing-md) !important;
 }
 
 .px-4 {
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
+  padding-left: calc(var(--mantine-spacing-md) * 1.5) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 1.5) !important;
 }
 
 .px-4\.5 {
-  padding-left: 2rem !important;
-  padding-right: 2rem !important;
+  padding-left: calc(var(--mantine-spacing-md) * 2) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 2) !important;
 }
 
 .px-5 {
-  padding-left: 3rem !important;
-  padding-right: 3rem !important;
+  padding-left: calc(var(--mantine-spacing-md) * 3) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 3) !important;
 }
 
 // Padding y-axis
@@ -641,38 +642,38 @@
 }
 
 .py-0\.5 {
-  padding-top: .125rem !important;
-  padding-bottom: .125rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 0.125) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 0.125) !important;
 }
 
 .py-1 {
-  padding-top: .25rem !important;
-  padding-bottom: .25rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 0.25) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 0.25) !important;
 }
 
 .py-2 {
-  padding-top: .5rem !important;
-  padding-bottom: .5rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 0.5) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 0.5) !important;
 }
 
 .py-3 {
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
+  padding-top: var(--mantine-spacing-md) !important;
+  padding-bottom: var(--mantine-spacing-md) !important;
 }
 
 .py-4 {
-  padding-top: 1.5rem !important;
-  padding-bottom: 1.5rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 1.5) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 1.5) !important;
 }
 
 .py-4\.5 {
-  padding-top: 2rem !important;
-  padding-bottom: 2rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 2) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 2) !important;
 }
 
 .py-5 {
-  padding-top: 3rem !important;
-  padding-bottom: 3rem !important;
+  padding-top: calc(var(--mantine-spacing-md) * 3) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 3) !important;
 }
 
 // Width utilities

From 6019cd82a45f0cfb7b6e64c0954209c58b7cb3b6 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 14:31:45 +0000
Subject: [PATCH 30/49] Add changeset

---
 .changeset/semantic-color-tokens.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/semantic-color-tokens.md

diff --git a/.changeset/semantic-color-tokens.md b/.changeset/semantic-color-tokens.md
new file mode 100644
index 000000000..4086a14d7
--- /dev/null
+++ b/.changeset/semantic-color-tokens.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": minor
+---
+
+feat: Remove bootstrap, adopt semantic tokens, and improve Mantine UI usage

From 55215da82935caee83c8a0871944540037d5cfb6 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 15:05:49 +0000
Subject: [PATCH 31/49] refactor: Enhance user and help menu trigger styles for
 better responsiveness and interaction

---
 packages/app/src/AppNav.components.tsx | 25 ++-------
 packages/app/styles/AppNav.module.scss | 74 ++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 20 deletions(-)

diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
index b19c3f3cb..03bff6710 100644
--- a/packages/app/src/AppNav.components.tsx
+++ b/packages/app/src/AppNav.components.tsx
@@ -82,16 +82,9 @@ export const AppNavUserMenu = ({
       <Menu.Target>
         <Paper
           data-testid="user-menu-trigger"
-          m="sm"
-          mt={8}
-          px={8}
-          py={4}
-          radius="md"
-          {...(isCollapsed && {
-            p: 2,
-            bg: 'transparent',
+          className={cx(styles.userMenuTrigger, {
+            [styles.userMenuTriggerCollapsed]: isCollapsed,
           })}
-          className={styles.appNavMenu}
         >
           <Group gap="xs" wrap="nowrap" miw={0}>
             <Avatar size="sm" radius="xl" color="green">
@@ -211,21 +204,13 @@ export const AppNavHelpMenu = ({
   ] = useDisclosure(false);
 
   // const isTeamHasNoData = useIsTeamHasNoData();
-  const size = 28;
 
   return (
     <>
       <Paper
-        mb={8}
-        ml="sm"
-        withBorder
-        w={size}
-        h={size}
-        radius="xl"
-        {...(isCollapsed && {
-          ml: 'sm',
+        className={cx(styles.helpMenuTrigger, {
+          [styles.helpMenuTriggerCollapsed]: isCollapsed,
         })}
-        className={styles.appNavMenu}
       >
         <Menu
           withArrow
@@ -235,7 +220,7 @@ export const AppNavHelpMenu = ({
         >
           <Menu.Target>
             <UnstyledButton data-testid="help-menu-trigger" w="100%">
-              <Group align="center" justify="center" h={size}>
+              <Group align="center" justify="center" h={28}>
                 <Icon name="question-lg" />
               </Group>
             </UnstyledButton>
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index 4582f8e8f..ab4161dc3 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -131,3 +131,77 @@
     transform: translate(0, 1px);
   }
 }
+
+// User menu trigger styling
+.userMenuTrigger {
+  pointer-events: all;
+  cursor: pointer;
+  margin: 8px 0.875rem 0.875rem;
+  padding: 4px 8px;
+  border-radius: 8px;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+  max-width: 100%;
+  overflow: hidden;
+
+  &:hover {
+    background: var(--color-bg-muted);
+  }
+
+  &:active {
+    transform: translate(0, 1px);
+  }
+
+  &Collapsed {
+    padding: 2px;
+    margin: 8px auto 0.875rem;
+    background: transparent;
+    border: none !important;
+    width: fit-content;
+
+    &:hover {
+      background: var(--color-bg-muted);
+    }
+
+    &:active {
+      transform: translate(0, 1px);
+    }
+  }
+}
+
+// Help menu trigger styling
+.helpMenuTrigger {
+  pointer-events: all;
+  cursor: pointer;
+  margin: 0 0.875rem 8px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 1px solid var(--color-border);
+  transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: var(--color-bg-muted);
+    border-color: var(--color-border-strong);
+  }
+
+  &:active {
+    transform: translate(0, 1px);
+  }
+
+  &Collapsed {
+    margin: 0 auto 8px;
+    border: none;
+    background: transparent;
+
+    &:hover {
+      background: var(--color-bg-muted);
+    }
+
+    &:active {
+      transform: translate(0, 1px);
+    }
+  }
+}

From 2461d5f183a9c24500bc1c073ef64d10f9433885 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 15:37:59 +0000
Subject: [PATCH 32/49] Fix codemirror styles

---
 .../src/components/DBSearchPageFilters.tsx    |  1 -
 packages/app/src/components/SQLEditor.tsx     |  5 +-
 .../app/src/components/SQLInlineEditor.tsx    | 51 ++++++++++++++++++-
 packages/app/src/components/Table.module.scss |  4 +-
 packages/app/styles/_semantic-colors.scss     |  4 +-
 5 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 3c0a9b51a..ee843bf78 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -151,7 +151,6 @@ export const FilterCheckbox = ({
         onClick={() => onChange?.(!value)}
         style={{ minWidth: 0 }}
         wrap="nowrap"
-        align="flex-start"
       >
         <Checkbox
           checked={!!value}
diff --git a/packages/app/src/components/SQLEditor.tsx b/packages/app/src/components/SQLEditor.tsx
index a730f6251..7f3463e9c 100644
--- a/packages/app/src/components/SQLEditor.tsx
+++ b/packages/app/src/components/SQLEditor.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
 import { acceptCompletion, startCompletion } from '@codemirror/autocomplete';
 import { sql, SQLDialect } from '@codemirror/lang-sql';
-import { Flex, Group, Paper, Text } from '@mantine/core';
+import { Flex, Group, Paper, Text, useMantineColorScheme } from '@mantine/core';
 import CodeMirror, {
   Compartment,
   EditorView,
@@ -34,6 +34,7 @@ export default function SQLEditor({
   placeholder,
   value,
 }: SQLInlineEditorProps) {
+  const { colorScheme } = useMantineColorScheme();
   const ref = useRef<ReactCodeMirrorRef>(null);
 
   const compartmentRef = useRef<Compartment>(new Compartment());
@@ -55,7 +56,7 @@ export default function SQLEditor({
           ref={ref}
           value={value}
           onChange={onChange}
-          theme={'dark'}
+          theme={colorScheme === 'dark' ? 'dark' : 'light'}
           minHeight={'100px'}
           extensions={[
             styleTheme,
diff --git a/packages/app/src/components/SQLInlineEditor.tsx b/packages/app/src/components/SQLInlineEditor.tsx
index a652499cb..3181242f6 100644
--- a/packages/app/src/components/SQLInlineEditor.tsx
+++ b/packages/app/src/components/SQLInlineEditor.tsx
@@ -13,7 +13,13 @@ import {
   Field,
   TableConnectionChoice,
 } from '@hyperdx/common-utils/dist/core/metadata';
-import { Flex, Paper, Text, Tooltip } from '@mantine/core';
+import {
+  Flex,
+  Paper,
+  Text,
+  Tooltip,
+  useMantineColorScheme,
+} from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 import CodeMirror, {
   Compartment,
@@ -136,6 +142,46 @@ const createStyleTheme = (allowMultiline: boolean = false) =>
       whiteSpace: 'nowrap',
       wordWrap: 'break-word',
       maxWidth: '100%',
+      backgroundColor: 'var(--color-bg-field) !important',
+      border: '1px solid var(--color-border) !important',
+      borderRadius: '8px',
+      boxShadow:
+        '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      padding: '4px',
+    },
+    '& .cm-tooltip-autocomplete > ul': {
+      fontFamily: 'inherit',
+      maxHeight: '300px',
+    },
+    '& .cm-tooltip-autocomplete > ul > li': {
+      padding: '4px 8px',
+      borderRadius: '4px',
+      cursor: 'pointer',
+      color: 'var(--color-text)',
+    },
+    '& .cm-tooltip-autocomplete > ul > li[aria-selected]': {
+      backgroundColor: 'var(--color-bg-field-highlighted) !important',
+      color: 'var(--color-text-muted) !important',
+    },
+    '& .cm-tooltip-autocomplete .cm-completionLabel': {
+      color: 'var(--color-text)',
+    },
+    '& .cm-tooltip-autocomplete .cm-completionDetail': {
+      color: 'var(--color-text-muted)',
+      fontStyle: 'normal',
+      marginLeft: '8px',
+    },
+    '& .cm-tooltip-autocomplete .cm-completionInfo': {
+      backgroundColor: 'var(--color-bg-field)',
+      border: '1px solid var(--color-border)',
+      borderRadius: '4px',
+      padding: '8px',
+      color: 'var(--color-text)',
+    },
+    '& .cm-completionIcon': {
+      width: '16px',
+      marginRight: '6px',
+      opacity: 0.7,
     },
     '& .cm-scroller': {
       overflowX: 'hidden',
@@ -167,6 +213,7 @@ export default function SQLInlineEditor({
   parentRef,
   allowMultiline = false,
 }: SQLInlineEditorProps & TableConnectionChoice) {
+  const { colorScheme } = useMantineColorScheme();
   const _tableConnections = tableConnection
     ? [tableConnection]
     : tableConnections;
@@ -341,7 +388,7 @@ export default function SQLInlineEditor({
           ref={ref}
           value={value}
           onChange={onChange}
-          theme={'dark'}
+          theme={colorScheme === 'dark' ? 'dark' : 'light'}
           onFocus={() => {
             setIsFocused(true);
           }}
diff --git a/packages/app/src/components/Table.module.scss b/packages/app/src/components/Table.module.scss
index 965bab986..9bde9cb56 100644
--- a/packages/app/src/components/Table.module.scss
+++ b/packages/app/src/components/Table.module.scss
@@ -117,12 +117,12 @@ $horizontalPadding: 12px;
   font-size: 11px;
 
   &:hover {
-    background-color: var(--color-bg-field-hover);
+    background-color: var(--color-bg-field-highlighted);
     border-color: var(--color-border);
   }
 
   &:active {
-    background-color: var(--color-bg-field-hover);
+    background-color: var(--color-bg-field-highlighted);
     border-color: var(--color-border);
   }
 }
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 44a7fa025..2b9a63758 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -10,7 +10,7 @@
   --color-bg-hover: var(--mantine-color-dark-6);
   --color-bg-active: var(--mantine-color-dark-5);
   --color-bg-field: var(--mantine-color-dark-6);
-  --color-bg-field-hover: var(--mantine-color-dark-5);
+  --color-bg-field-highlighted: var(--mantine-color-dark-4);
   --color-bg-neutral: var(--mantine-color-dark-4);
   --color-bg-success: var(--mantine-color-green-5);
   --color-bg-danger: var(--mantine-color-red-5);
@@ -78,7 +78,7 @@
   --color-bg-hover: var(--mantine-color-gray-3);
   --color-bg-active: var(--mantine-color-gray-4);
   --color-bg-field: var(--color-bg-muted);
-  --color-bg-field-hover: var(--mantine-color-gray-1);
+  --color-bg-field-highlighted: var(--mantine-color-gray-1);
   --color-bg-neutral: var(--mantine-color-gray-5);
   --color-bg-success: var(--mantine-color-green-8);
   --color-bg-danger: var(--mantine-color-red-8);

From 94290345aef8354d203a0adfc4cf0f26df717a58 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 15:53:37 +0000
Subject: [PATCH 33/49] refactor: Update theme colors and improve user menu
 trigger hover effect

---
 packages/app/src/ThemeWrapper.tsx      | 20 ++++++++++----------
 packages/app/styles/AppNav.module.scss |  1 -
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index 761b78de7..b1d1c1fed 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -40,18 +40,18 @@ const makeTheme = ({
     xl: 'calc(2rem * var(--mantine-scale))',
   },
   colors: {
-    // https://mantine.dev/colors-generator/?color=09D99C
+    // https://uicolors.app/generate/00c28a
     green: [
-      '#e2fff8',
-      '#cefef0',
-      '#a0fbe0',
-      '#6df9cf',
-      '#09D99C', // Toned Down
-      '#2ff5b8',
-      '#1ef5b3',
-      '#09da9d',
+      '#eafff6',
+      '#cdfee7',
+      '#a0fad5',
+      '#63f2bf',
+      '#25e2a5',
       '#00c28a',
-      '#00a875',
+      '#00a475',
+      '#008362',
+      '#00674e',
+      '#005542',
     ],
     // https://mantine.dev/colors-generator/?color=A1A1AA
     // Customized with FAFAFA, D7D8DB, A1A1AA
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index ab4161dc3..a8f75a6e2 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -79,7 +79,6 @@
   transition: all 0.2s ease-in-out  ;
 
    &:hover {
-    // color: $green;
     color: var(--color-text-success);
   }
 }

From 0687e9588880109e82e265cad44ec61cee6b412a Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 12 Nov 2025 17:03:58 +0000
Subject: [PATCH 34/49] Adress PR review

---
 packages/app/src/AppNav.components.tsx        |   3 +-
 packages/app/src/AppNav.tsx                   |   8 +-
 packages/app/src/AutocompleteInput.tsx        |   2 +
 packages/app/src/Icon.tsx                     |   4 +-
 .../app/src/components/DBRowDataPanel.tsx     |   2 +-
 .../app/src/components/DBRowJsonViewer.tsx    |   2 +-
 .../app/src/components/DBRowOverviewPanel.tsx |   2 +-
 .../components/DBSqlRowTableWithSidebar.tsx   |   4 +-
 packages/app/src/components/EventTag.tsx      |   4 +-
 .../app/src/components/ExpandableRowTable.tsx |   2 +-
 .../app/src/components/HyperJson.module.scss  |   1 +
 packages/app/styles/AppNav.module.scss        |   5 +-
 packages/app/styles/LogTable.module.scss      |   3 +-
 packages/app/styles/_bootstrap-utilities.scss | 137 +++++++++++++-----
 packages/app/styles/_semantic-colors.scss     |   8 +-
 15 files changed, 127 insertions(+), 60 deletions(-)

diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
index 03bff6710..ef443349e 100644
--- a/packages/app/src/AppNav.components.tsx
+++ b/packages/app/src/AppNav.components.tsx
@@ -302,8 +302,9 @@ export const AppNavLink = ({
           { [styles.listLinkActive]: pathname?.includes(href) },
           className,
         )}
+        style={{ display: 'flex', alignItems: 'center' }}
       >
-        <span>
+        <span style={{ display: 'flex', alignItems: 'center' }}>
           <span className={styles.linkIcon}>{icon}</span>
           {!isCollapsed && <span>{label}</span>}
         </span>
diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index 41213127c..194723327 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -27,13 +27,13 @@ import {
 import { useDisclosure, useLocalStorage } from '@mantine/hooks';
 import {
   IconBell,
-  IconChartLine,
+  IconChartDots,
   IconDeviceLaptop,
-  IconFileText,
   IconLayoutGrid,
   IconLayoutSidebarLeftCollapse,
   IconSettings,
   IconSitemap,
+  IconTable,
 } from '@tabler/icons-react';
 
 import {
@@ -652,7 +652,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
             <div className="mt-2">
               <AppNavLink
                 label="Search"
-                icon={<IconFileText size={16} />}
+                icon={<IconTable size={16} />}
                 href="/search"
                 className={cx({
                   'text-success fw-600':
@@ -718,7 +718,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
               <AppNavLink
                 label="Chart Explorer"
                 href="/chart"
-                icon={<IconChartLine size={16} />}
+                icon={<IconChartDots size={16} />}
               />
               {!IS_LOCAL_MODE && (
                 <AppNavLink
diff --git a/packages/app/src/AutocompleteInput.tsx b/packages/app/src/AutocompleteInput.tsx
index 0cd6ce1ff..41afb53b9 100644
--- a/packages/app/src/AutocompleteInput.tsx
+++ b/packages/app/src/AutocompleteInput.tsx
@@ -178,6 +178,8 @@ export default function AutocompleteInput({
           }}
           onKeyDown={e => {
             if (e.key === 'Escape' && e.target instanceof HTMLTextAreaElement) {
+              e.preventDefault();
+              setIsInputDropdownOpen(false);
               e.target.blur();
             }
 
diff --git a/packages/app/src/Icon.tsx b/packages/app/src/Icon.tsx
index a5ad90b93..36fc35ee9 100644
--- a/packages/app/src/Icon.tsx
+++ b/packages/app/src/Icon.tsx
@@ -10,11 +10,11 @@ export default function Icon({ size = 16 }: { size?: number }) {
       <g clipPath="url(#clip0_614_1164)">
         <path
           d="M256 0L477.703 128V384L256 512L34.2975 384V128L256 0Z"
-          fill="#4FFA7A"
+          fill="var(--color-bg-brand)"
         />
         <path
           d="M311.365 84.4663C314.818 86.9946 316.431 92.1862 315.256 96.9926L284.313 223.563H341.409C344.836 223.563 347.936 226.127 349.295 230.086C350.655 234.046 350.014 238.644 347.665 241.786L210.211 425.598C207.472 429.26 203.089 430.062 199.635 427.534C196.182 425.005 194.569 419.814 195.744 415.007L226.686 288.437H169.591C166.164 288.437 163.064 285.873 161.705 281.914C160.345 277.954 160.986 273.356 163.335 270.214L300.789 86.4023C303.528 82.7403 307.911 81.938 311.365 84.4663Z"
-          fill="#080A0B"
+          fill="var(--color-text-inverted)"
         />
       </g>
       <defs>
diff --git a/packages/app/src/components/DBRowDataPanel.tsx b/packages/app/src/components/DBRowDataPanel.tsx
index d6535d72a..36e6258e7 100644
--- a/packages/app/src/components/DBRowDataPanel.tsx
+++ b/packages/app/src/components/DBRowDataPanel.tsx
@@ -192,7 +192,7 @@ export function RowDataPanel({
   const jsonColumns = getJSONColumnNames(data?.meta);
 
   return (
-    <div className="flex-grow-1 bg-body overflow-auto" data-testid={dataTestId}>
+    <div className="flex-grow-1 overflow-auto" data-testid={dataTestId}>
       <Box mx="md" my="sm">
         <DBRowJsonViewer data={firstRow} jsonColumns={jsonColumns} />
       </Box>
diff --git a/packages/app/src/components/DBRowJsonViewer.tsx b/packages/app/src/components/DBRowJsonViewer.tsx
index 585b747a0..c4b44a2d3 100644
--- a/packages/app/src/components/DBRowJsonViewer.tsx
+++ b/packages/app/src/components/DBRowJsonViewer.tsx
@@ -403,7 +403,7 @@ export function DBRowJsonViewer({
   const jsonOptions = useAtomValue(viewerOptionsAtom);
 
   return (
-    <div className="flex-grow-1 bg-body overflow-auto">
+    <div className="flex-grow-1 overflow-auto">
       <Box py="xs">
         <Group gap="xs">
           <Input
diff --git a/packages/app/src/components/DBRowOverviewPanel.tsx b/packages/app/src/components/DBRowOverviewPanel.tsx
index 39316abfe..4b57956ec 100644
--- a/packages/app/src/components/DBRowOverviewPanel.tsx
+++ b/packages/app/src/components/DBRowOverviewPanel.tsx
@@ -160,7 +160,7 @@ export function RowOverviewPanel({
       : undefined;
 
   return (
-    <div className="flex-grow-1 bg-body overflow-auto" data-testid={dataTestId}>
+    <div className="flex-grow-1 overflow-auto" data-testid={dataTestId}>
       {!hideHeader && (
         <Box px="32px" pt="md">
           <DBRowSidePanelHeader
diff --git a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
index 89d8f632f..564268422 100644
--- a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
+++ b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
@@ -138,7 +138,7 @@ function RowOverviewPanelWrapper({
 
   return (
     <div className="position-relative">
-      <div className="bg-body px-3 pt-2 position-relative">
+      <div className="px-3 pt-2 position-relative">
         <TabBar
           className="fs-8"
           items={[
@@ -155,7 +155,7 @@ function RowOverviewPanelWrapper({
           onClick={setActiveTab}
         />
       </div>
-      <div className="bg-body">
+      <div>
         {activeTab === InlineTab.Overview && (
           <div className="inline-overview-panel">
             <RowOverviewPanel source={source} rowId={rowId} />
diff --git a/packages/app/src/components/EventTag.tsx b/packages/app/src/components/EventTag.tsx
index 2d9c185dd..5c3789f77 100644
--- a/packages/app/src/components/EventTag.tsx
+++ b/packages/app/src/components/EventTag.tsx
@@ -29,7 +29,7 @@ export default function EventTag({
 
   if (!hasActions) {
     return (
-      <div key={name} className="bg-muted px-2 py-0.5 me-1 my-1">
+      <div key={name} className="bg-highlighted px-2 py-0.5 me-1 my-1">
         {displayedKey || name}: {value}
       </div>
     );
@@ -46,7 +46,7 @@ export default function EventTag({
       <Popover.Target>
         <div
           key={name}
-          className="text-muted-hover bg-muted px-2 py-0.5 me-1 my-1 cursor-pointer"
+          className="bg-highlighted px-2 py-0.5 me-1 my-1 cursor-pointer"
           onClick={() => setOpened(!opened)}
         >
           {displayedKey || name}: {value}
diff --git a/packages/app/src/components/ExpandableRowTable.tsx b/packages/app/src/components/ExpandableRowTable.tsx
index 4f0468653..a2ac254b2 100644
--- a/packages/app/src/components/ExpandableRowTable.tsx
+++ b/packages/app/src/components/ExpandableRowTable.tsx
@@ -51,7 +51,7 @@ export const ExpandedLogRow = memo(
         <td colSpan={columnsLength} className="p-0 border-0">
           <div className={cx('mx-2 mb-2 rounded', styles.expandedRowContent)}>
             <div className="position-relative">
-              <div className="bg-body px-3 pt-2 position-relative">
+              <div className="px-3 pt-2 position-relative">
                 {openSidebar && (
                   <button
                     type="button"
diff --git a/packages/app/src/components/HyperJson.module.scss b/packages/app/src/components/HyperJson.module.scss
index d31a30f7e..5b339fcf7 100644
--- a/packages/app/src/components/HyperJson.module.scss
+++ b/packages/app/src/components/HyperJson.module.scss
@@ -6,6 +6,7 @@
   flex-direction: column;
   padding: 0 4px;
   font-size: 12px;
+  background-color: var(--color-bg-surface);
 }
 
 .withTabulate {
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index a8f75a6e2..9f8a2affc 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -75,10 +75,11 @@
 .linkIcon {
   margin-right: 8px;
   display: inline-flex;
+  align-items: center;
   vertical-align: middle;
-  transition: all 0.2s ease-in-out  ;
+  transition: all 0.2s ease-in-out;
 
-   &:hover {
+  &:hover {
     color: var(--color-text-success);
   }
 }
diff --git a/packages/app/styles/LogTable.module.scss b/packages/app/styles/LogTable.module.scss
index 6221206a6..ae28a6c14 100644
--- a/packages/app/styles/LogTable.module.scss
+++ b/packages/app/styles/LogTable.module.scss
@@ -43,8 +43,7 @@ $button-height: 18px;
 .expandedRowContent {
   max-height: 400px;
   overflow: auto;
-  background-color: var(--color-bg-body);
-  padding: 12px;
+  background-color: var(--color-bg-muted);
 }
 
 .expandButton {
diff --git a/packages/app/styles/_bootstrap-utilities.scss b/packages/app/styles/_bootstrap-utilities.scss
index dee4f1ec2..ec08d3dec 100644
--- a/packages/app/styles/_bootstrap-utilities.scss
+++ b/packages/app/styles/_bootstrap-utilities.scss
@@ -211,29 +211,38 @@
   gap: var(--mantine-spacing-xl) !important;
 }
 
-// Margin utilities (using Mantine spacing)
+// Margin utilities (using Mantine spacing as base unit: 1rem)
+// Bootstrap scale: 0.25rem increments (m-1 = 0.25rem, m-2 = 0.5rem, etc.)
 .m-0 {
   margin: 0 !important;
 }
 
+.m-0\.5 {
+  margin: calc(var(--mantine-spacing-md) * 0.125) !important; // 0.125rem
+}
+
 .m-1 {
-  margin: var(--mantine-spacing-xs) !important;
+  margin: calc(var(--mantine-spacing-md) * 0.25) !important; // 0.25rem
 }
 
 .m-2 {
-  margin: var(--mantine-spacing-sm) !important;
+  margin: calc(var(--mantine-spacing-md) * 0.5) !important; // 0.5rem
 }
 
 .m-3 {
-  margin: var(--mantine-spacing-md) !important;
+  margin: var(--mantine-spacing-md) !important; // 1rem
 }
 
 .m-4 {
-  margin: var(--mantine-spacing-lg) !important;
+  margin: calc(var(--mantine-spacing-md) * 1.5) !important; // 1.5rem
+}
+
+.m-4\.5 {
+  margin: calc(var(--mantine-spacing-md) * 2) !important; // 2rem
 }
 
 .m-5 {
-  margin: var(--mantine-spacing-xl) !important;
+  margin: calc(var(--mantine-spacing-md) * 3) !important; // 3rem
 }
 
 .m-auto {
@@ -245,12 +254,16 @@
   margin-top: 0 !important;
 }
 
+.mt-0\.5 {
+  margin-top: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
 .mt-1 {
-  margin-top: var(--mantine-spacing-xs) !important;
+  margin-top: calc(var(--mantine-spacing-md) * 0.25) !important;
 }
 
 .mt-2 {
-  margin-top: var(--mantine-spacing-sm) !important;
+  margin-top: calc(var(--mantine-spacing-md) * 0.5) !important;
 }
 
 .mt-3 {
@@ -258,11 +271,15 @@
 }
 
 .mt-4 {
-  margin-top: var(--mantine-spacing-lg) !important;
+  margin-top: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.mt-4\.5 {
+  margin-top: calc(var(--mantine-spacing-md) * 2) !important;
 }
 
 .mt-5 {
-  margin-top: var(--mantine-spacing-xl) !important;
+  margin-top: calc(var(--mantine-spacing-md) * 3) !important;
 }
 
 .mt-auto {
@@ -274,12 +291,16 @@
   margin-bottom: 0 !important;
 }
 
+.mb-0\.5 {
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
 .mb-1 {
-  margin-bottom: var(--mantine-spacing-xs) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.25) !important;
 }
 
 .mb-2 {
-  margin-bottom: var(--mantine-spacing-sm) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.5) !important;
 }
 
 .mb-3 {
@@ -287,11 +308,15 @@
 }
 
 .mb-4 {
-  margin-bottom: var(--mantine-spacing-lg) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.mb-4\.5 {
+  margin-bottom: calc(var(--mantine-spacing-md) * 2) !important;
 }
 
 .mb-5 {
-  margin-bottom: var(--mantine-spacing-xl) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 3) !important;
 }
 
 .mb-auto {
@@ -303,12 +328,16 @@
   margin-inline-start: 0 !important;
 }
 
+.ms-0\.5 {
+  margin-inline-start: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
 .ms-1 {
-  margin-inline-start: var(--mantine-spacing-xs) !important;
+  margin-inline-start: calc(var(--mantine-spacing-md) * 0.25) !important;
 }
 
 .ms-2 {
-  margin-inline-start: var(--mantine-spacing-sm) !important;
+  margin-inline-start: calc(var(--mantine-spacing-md) * 0.5) !important;
 }
 
 .ms-3 {
@@ -316,11 +345,15 @@
 }
 
 .ms-4 {
-  margin-inline-start: var(--mantine-spacing-lg) !important;
+  margin-inline-start: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.ms-4\.5 {
+  margin-inline-start: calc(var(--mantine-spacing-md) * 2) !important;
 }
 
 .ms-5 {
-  margin-inline-start: var(--mantine-spacing-xl) !important;
+  margin-inline-start: calc(var(--mantine-spacing-md) * 3) !important;
 }
 
 .ms-auto {
@@ -332,12 +365,16 @@
   margin-inline-end: 0 !important;
 }
 
+.me-0\.5 {
+  margin-inline-end: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
 .me-1 {
-  margin-inline-end: var(--mantine-spacing-xs) !important;
+  margin-inline-end: calc(var(--mantine-spacing-md) * 0.25) !important;
 }
 
 .me-2 {
-  margin-inline-end: var(--mantine-spacing-sm) !important;
+  margin-inline-end: calc(var(--mantine-spacing-md) * 0.5) !important;
 }
 
 .me-3 {
@@ -345,11 +382,15 @@
 }
 
 .me-4 {
-  margin-inline-end: var(--mantine-spacing-lg) !important;
+  margin-inline-end: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.me-4\.5 {
+  margin-inline-end: calc(var(--mantine-spacing-md) * 2) !important;
 }
 
 .me-5 {
-  margin-inline-end: var(--mantine-spacing-xl) !important;
+  margin-inline-end: calc(var(--mantine-spacing-md) * 3) !important;
 }
 
 .me-auto {
@@ -362,14 +403,19 @@
   margin-right: 0 !important;
 }
 
+.mx-0\.5 {
+  margin-left: calc(var(--mantine-spacing-md) * 0.125) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
 .mx-1 {
-  margin-left: var(--mantine-spacing-xs) !important;
-  margin-right: var(--mantine-spacing-xs) !important;
+  margin-left: calc(var(--mantine-spacing-md) * 0.25) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 0.25) !important;
 }
 
 .mx-2 {
-  margin-left: var(--mantine-spacing-sm) !important;
-  margin-right: var(--mantine-spacing-sm) !important;
+  margin-left: calc(var(--mantine-spacing-md) * 0.5) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 0.5) !important;
 }
 
 .mx-3 {
@@ -378,13 +424,18 @@
 }
 
 .mx-4 {
-  margin-left: var(--mantine-spacing-lg) !important;
-  margin-right: var(--mantine-spacing-lg) !important;
+  margin-left: calc(var(--mantine-spacing-md) * 1.5) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.mx-4\.5 {
+  margin-left: calc(var(--mantine-spacing-md) * 2) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 2) !important;
 }
 
 .mx-5 {
-  margin-left: var(--mantine-spacing-xl) !important;
-  margin-right: var(--mantine-spacing-xl) !important;
+  margin-left: calc(var(--mantine-spacing-md) * 3) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 3) !important;
 }
 
 .mx-auto {
@@ -398,14 +449,19 @@
   margin-bottom: 0 !important;
 }
 
+.my-0\.5 {
+  margin-top: calc(var(--mantine-spacing-md) * 0.125) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
 .my-1 {
-  margin-top: var(--mantine-spacing-xs) !important;
-  margin-bottom: var(--mantine-spacing-xs) !important;
+  margin-top: calc(var(--mantine-spacing-md) * 0.25) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.25) !important;
 }
 
 .my-2 {
-  margin-top: var(--mantine-spacing-sm) !important;
-  margin-bottom: var(--mantine-spacing-sm) !important;
+  margin-top: calc(var(--mantine-spacing-md) * 0.5) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.5) !important;
 }
 
 .my-3 {
@@ -414,13 +470,18 @@
 }
 
 .my-4 {
-  margin-top: var(--mantine-spacing-lg) !important;
-  margin-bottom: var(--mantine-spacing-lg) !important;
+  margin-top: calc(var(--mantine-spacing-md) * 1.5) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.my-4\.5 {
+  margin-top: calc(var(--mantine-spacing-md) * 2) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 2) !important;
 }
 
 .my-5 {
-  margin-top: var(--mantine-spacing-xl) !important;
-  margin-bottom: var(--mantine-spacing-xl) !important;
+  margin-top: calc(var(--mantine-spacing-md) * 3) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 3) !important;
 }
 
 .my-auto {
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 2b9a63758..89da11f5b 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -15,18 +15,19 @@
   --color-bg-success: var(--mantine-color-green-5);
   --color-bg-danger: var(--mantine-color-red-5);
   --color-bg-warning: var(--mantine-color-orange-5);
+  --color-bg-brand: #4ffa7a;
 
   /* Borders & Dividers */
   --color-border: var(--mantine-color-dark-5);
 
   /* Text */
   --color-text: var(--mantine-color-dark-0);
+  --color-text-inverted: var(--mantine-color-dark-9);
   --color-text-primary: var(--mantine-color-dark-0);
   --color-text-primary-hover: var(--mantine-color-green-3);
   --color-text-secondary: var(--mantine-color-dark-2);
   --color-text-muted: var(--mantine-color-dark-2);
   --color-text-muted-hover: var(--mantine-color-dark-1);
-  --color-text-inverse: var(--mantine-color-dark-9);
   --color-text-success: var(--mantine-color-green-4);
   --color-text-success-hover: var(--mantine-color-green-3);
   --color-text-danger: var(--mantine-color-red-4);
@@ -83,19 +84,20 @@
   --color-bg-success: var(--mantine-color-green-8);
   --color-bg-danger: var(--mantine-color-red-8);
   --color-bg-warning: var(--mantine-color-orange-8);
+  --color-bg-brand: var(--mantine-color-green-8);
 
   /* Borders & Dividers - inverted */
   --color-border: var(--mantine-color-gray-2);
 
   /* Text - inverted */
   --color-text: var(--mantine-color-dark-9);
+  --color-text-inverted: var(--mantine-color-white);
   --color-text-primary: var(--mantine-color-green-5);
   --color-text-primary-hover: var(--mantine-color-green-6);
   --color-text-secondary: var(--mantine-color-gray-5);
   --color-text-muted: var(--mantine-color-dark-6);
   --color-text-muted-hover: var(--mantine-color-dark-9);
-  --color-text-inverse: var(--mantine-color-dark-0);
-  --color-text-success: var(--mantine-color-green-9);
+  --color-text-success: var(--mantine-color-green-8);
   --color-text-danger: var(--mantine-color-red-7);
 
   /* Icons - inverted */

From 7bb48a918e07ef89ee066d2e8cb2e7de1a2c85f3 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 13 Nov 2025 10:48:41 +0000
Subject: [PATCH 35/49] refactor: Update import paths

---
 packages/app/styles/app.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index dce5d7940..aa1a8b029 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -1,13 +1,11 @@
 /* stylelint-disable */
-
-// @import './variables';
 @import './_semantic-colors';
 
 // Bootstrap utilities only (d-flex, flex-column, m-*, p-*, etc.)
-@import './bootstrap-utilities';
+@import './_bootstrap-utilities';
 
 // Custom utilities (bg-surface, border-dark, etc.)
-@import './utilities';
+@import './_utilities';
 
 @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css');
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap');

From a18f92ee50d6695400c9845aca504455c7e574c6 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 13 Nov 2025 13:10:08 +0000
Subject: [PATCH 36/49] Onboarding styles

---
 packages/app/src/Clipboard.tsx                |  3 +-
 packages/app/src/InstallInstructionsModal.tsx | 43 +++++++++++--------
 packages/app/src/OnboardingChecklist.tsx      | 10 +++--
 packages/app/styles/_bootstrap-utilities.scss | 37 ++++++++++++++++
 packages/app/styles/_semantic-colors.scss     |  6 +--
 packages/app/styles/_utilities.scss           |  8 ++--
 6 files changed, 78 insertions(+), 29 deletions(-)

diff --git a/packages/app/src/Clipboard.tsx b/packages/app/src/Clipboard.tsx
index 2edeb1f5b..8b3f6fdab 100644
--- a/packages/app/src/Clipboard.tsx
+++ b/packages/app/src/Clipboard.tsx
@@ -23,10 +23,11 @@ export default function Clipboard({
       }}
     >
       <Button
-        variant="subtle"
+        variant="default"
         p={0}
         className={cx('text-decoration-none', className)}
         size="xs"
+        fullWidth
       >
         {children({ isCopied })}
       </Button>
diff --git a/packages/app/src/InstallInstructionsModal.tsx b/packages/app/src/InstallInstructionsModal.tsx
index 5a17ebe7f..99fee6046 100644
--- a/packages/app/src/InstallInstructionsModal.tsx
+++ b/packages/app/src/InstallInstructionsModal.tsx
@@ -12,12 +12,12 @@ function CopyableValue({
   value: string;
 }) {
   return (
-    <Clipboard text={value} className="d-block mx-auto p-0 w-100">
+    <Clipboard text={value} className="d-flex mx-auto p-0 w-100">
       {({ isCopied }) => {
         return (
           <div
             className={cx(
-              'd-flex fs-6 py-2 px-3 bg-muted rounded align-items-center justify-content-between cursor-pointer text-white-hover',
+              'd-flex w-100 py-2 px-2 gap-2 rounded align-items-center justify-content-between cursor-pointer',
               {
                 'text-success': isCopied,
               },
@@ -25,7 +25,7 @@ function CopyableValue({
           >
             <div className="fs-7 d-flex text-truncate align-items-center">
               {label}
-              <pre className="mb-0 user-select-all d-inline text-truncate fs-7 lh-1">
+              <pre className="m-0 user-select-all d-inline text-truncate fs-7 lh-1">
                 {value}
               </pre>
             </div>
@@ -36,7 +36,7 @@ function CopyableValue({
                   'bi-clipboard-check': isCopied,
                 })}
               ></i>
-              {isCopied ? 'Copied to Clipboard!' : 'Copy'}
+              {isCopied ? 'Copied!' : 'Copy'}
             </div>
           </div>
         );
@@ -79,95 +79,104 @@ export default function InstallInstructionModal({
           Click on a link below to view installation instructions for your
           application.
         </div>
-        <div className="fs-5 mb-2">Backend</div>
-        <div className="fs-6 mb-2">
+        <div className="fs-6 mb-2">Backend</div>
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/nodejs"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Node.js
           </a>
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
-        <div className="fs-6 mb-2">
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/golang"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Go
           </a>
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
-        <div className="fs-6 mb-2">
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/python"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Python
           </a>
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
-        <div className="fs-6 mb-2">
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/java"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Java
           </a>
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
-        <div className="fs-6 mb-2">
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/elixir"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Elixir
           </a>
           <span className="ms-2 text-muted">(Logs)</span>
         </div>
-        <div className="fs-6 mb-2">
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/ruby-on-rails"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Ruby on Rails
           </a>
           <span className="ms-2 text-muted">(Traces)</span>
         </div>
-        <div className="fs-5 mb-2 mt-4">Platform</div>
-        <div className="fs-6 mb-2">
+        <div className="fs-6 mb-2 mt-4">Platform</div>
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/ingesting-data/kubernetes"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Kubernetes
           </a>
           <span className="ms-2 text-muted">(Logs + Metrics)</span>
         </div>
-        <div className="fs-5 mb-2 mt-4">Browser</div>
-        <div className="fs-6 mb-2">
+        <div className="fs-6 mb-2 mt-4">Browser</div>
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/browser"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             JavaScript/TypeScript
           </a>
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
-        <div className="fs-5 mb-2 mt-4">Data Collector</div>
-        <div className="fs-6 mb-2">
+        <div className="fs-6 mb-2 mt-4">Data Collector</div>
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/ingesting-data/opentelemetry#sending-otel-data"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             OpenTelemetry
           </a>
diff --git a/packages/app/src/OnboardingChecklist.tsx b/packages/app/src/OnboardingChecklist.tsx
index 7fac421bb..9d46f744d 100644
--- a/packages/app/src/OnboardingChecklist.tsx
+++ b/packages/app/src/OnboardingChecklist.tsx
@@ -187,13 +187,13 @@ const OnboardingChecklist = ({
                     justifyContent: 'center',
                     border: step.isComplete
                       ? '1px solid var(--color-text-success)'
-                      : 'none',
+                      : '1px solid var(--color-border)',
                     backgroundColor: step.isComplete
                       ? 'transparent'
-                      : 'var(--color-text)',
+                      : 'var(--color-bg-muted)',
                     color: step.isComplete
                       ? 'var(--color-text-success)'
-                      : 'var(--color-text-muted)',
+                      : 'var(--color-text)',
                     flexShrink: 0,
                   }}
                 >
@@ -226,7 +226,9 @@ const OnboardingChecklist = ({
                   >
                     {step.title}
                   </Text>
-                  <Text size="xs">{step.description}</Text>
+                  <Text size="xs" c="dimmed">
+                    {step.description}
+                  </Text>
                 </div>
 
                 {!step.isComplete && (step.href || step.onClick) && (
diff --git a/packages/app/styles/_bootstrap-utilities.scss b/packages/app/styles/_bootstrap-utilities.scss
index ec08d3dec..2d70a7f98 100644
--- a/packages/app/styles/_bootstrap-utilities.scss
+++ b/packages/app/styles/_bootstrap-utilities.scss
@@ -977,3 +977,40 @@
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
 }
+
+// Font size utilities
+.fs-1 {
+  font-size: 2.5rem !important; // 40px
+}
+
+.fs-2 {
+  font-size: 2rem !important; // 32px
+}
+
+.fs-3 {
+  font-size: 1.75rem !important; // 28px
+}
+
+.fs-4 {
+  font-size: 1.5rem !important; // 24px
+}
+
+.fs-5 {
+  font-size: 1.25rem !important; // 20px
+}
+
+.fs-6 {
+  font-size: 1rem !important; // 16px (base)
+}
+
+.fs-7 {
+  font-size: 0.875rem !important; // 14px
+}
+
+.fs-8 {
+  font-size: 0.75rem !important; // 12px
+}
+
+.fs-9 {
+  font-size: 0.625rem !important; // 10px
+}
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 89da11f5b..ed9ec4814 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -23,7 +23,7 @@
   /* Text */
   --color-text: var(--mantine-color-dark-0);
   --color-text-inverted: var(--mantine-color-dark-9);
-  --color-text-primary: var(--mantine-color-dark-0);
+  --color-text-primary: var(--mantine-color-green-4);
   --color-text-primary-hover: var(--mantine-color-green-3);
   --color-text-secondary: var(--mantine-color-dark-2);
   --color-text-muted: var(--mantine-color-dark-2);
@@ -92,8 +92,8 @@
   /* Text - inverted */
   --color-text: var(--mantine-color-dark-9);
   --color-text-inverted: var(--mantine-color-white);
-  --color-text-primary: var(--mantine-color-green-5);
-  --color-text-primary-hover: var(--mantine-color-green-6);
+  --color-text-primary: var(--mantine-color-green-8);
+  --color-text-primary-hover: var(--mantine-color-green-9);
   --color-text-secondary: var(--mantine-color-gray-5);
   --color-text-muted: var(--mantine-color-dark-6);
   --color-text-muted-hover: var(--mantine-color-dark-9);
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
index ddbf016b9..67bc0bc38 100644
--- a/packages/app/styles/_utilities.scss
+++ b/packages/app/styles/_utilities.scss
@@ -103,14 +103,14 @@
   color: var(--color-text) !important;
 }
 
-.text-primary {
-  color: var(--color-text-primary) !important;
-}
-
 .text-success {
   color: var(--color-text-success) !important;
 }
 
+.text-link {
+  color: var(--color-text-primary) !important;
+}
+
 .text-danger {
   color: var(--color-text-danger) !important;
 }

From 0cac4ff60be7886a53a452866f30afab8e89a9a3 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 13 Nov 2025 13:20:05 +0000
Subject: [PATCH 37/49] style: update AppNav layout and add bottom section
 gradient

---
 packages/app/src/AppNav.tsx            |  4 +---
 packages/app/styles/AppNav.module.scss | 25 +++++++++++++------------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index 194723327..9a6900eaf 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -868,11 +868,9 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
         </ScrollArea>
 
         <div
+          className={styles.bottomSection}
           style={{
             width: navWidth,
-            position: 'absolute',
-            bottom: 0,
-            pointerEvents: 'none',
           }}
         >
           <AppNavHelpMenu
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index 9f8a2affc..5b3cb93c1 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -119,18 +119,6 @@
   }
 }
 
-.appNavMenu {
-  pointer-events: all;
-  cursor: pointer;
-
-  &:hover {
-    background: var(--color-bg-muted);
-  }
-
-  &:active {
-    transform: translate(0, 1px);
-  }
-}
 
 // User menu trigger styling
 .userMenuTrigger {
@@ -205,3 +193,16 @@
     }
   }
 }
+
+// Bottom section with gradient overlay
+.bottomSection {
+  position: absolute;
+  bottom: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    to top,
+    var(--color-bg-sidebar) 50%,
+    transparent 100%
+  );
+  padding-top: 40px;
+}

From 30e1d38e2f9a3890ce561a28ff4475879052ec7f Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 13 Nov 2025 15:39:09 +0000
Subject: [PATCH 38/49] Fix search filters search input

---
 packages/app/src/components/DBSearchPageFilters.tsx | 12 +++---------
 packages/app/styles/SearchPage.module.scss          |  1 -
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index ee843bf78..1a2c33203 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -457,6 +457,7 @@ export const FilterGroup = ({
               component={UnstyledButton}
               flex="1"
               p="0"
+              pr="xxxs"
               data-testid="filter-group-control"
               classNames={{
                 chevron: 'm-0',
@@ -488,15 +489,8 @@ export const FilterGroup = ({
                     }
                   }}
                   styles={{ input: { transition: 'padding 0.2s' } }}
-                  rightSectionWidth={isExpanded ? 20 : 2}
-                  rightSection={
-                    <IconSearch
-                      size={15}
-                      stroke={2}
-                      className={`${isExpanded ? 'opacity-100' : 'opacity-0'}`}
-                      style={{ transition: 'opacity 0.4s 0.2s' }}
-                    />
-                  }
+                  rightSectionWidth={20}
+                  rightSection={<IconSearch size={12} stroke={2} />}
                   classNames={{
                     input: 'ps-0.5',
                   }}
diff --git a/packages/app/styles/SearchPage.module.scss b/packages/app/styles/SearchPage.module.scss
index 595c2087f..1d344fd27 100644
--- a/packages/app/styles/SearchPage.module.scss
+++ b/packages/app/styles/SearchPage.module.scss
@@ -23,7 +23,6 @@
       height: 20px;
       min-height: 20px;
       background-color: transparent;
-      border: none !important;
       color: var(--color-text-secondary);
       font-size: var(--mantine-font-size-xs);
 

From 0b373221ef57da49e6703a90e632747e81c480ec Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 13 Nov 2025 16:00:27 +0000
Subject: [PATCH 39/49] feat: enhance CopyButton with size prop and update
 SQLPreview integration style: add hover effect for success text utility class

---
 .../app/src/components/ChartSQLPreview.tsx    | 24 ++++++++++++++-----
 .../src/components/InputLanguageSwitch.tsx    |  1 +
 .../src/components/SourceSchemaPreview.tsx    | 19 +++++++++++----
 packages/app/styles/_semantic-colors.scss     |  1 +
 packages/app/styles/_utilities.scss           |  9 +++++++
 5 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/components/ChartSQLPreview.tsx b/packages/app/src/components/ChartSQLPreview.tsx
index d3b00d671..c128a312b 100644
--- a/packages/app/src/components/ChartSQLPreview.tsx
+++ b/packages/app/src/components/ChartSQLPreview.tsx
@@ -4,6 +4,7 @@ import { sql } from '@codemirror/lang-sql';
 import { format } from '@hyperdx/common-utils/dist/sqlFormatter';
 import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import { Button, Paper } from '@mantine/core';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
 import CodeMirror from '@uiw/react-codemirror';
 
 import { useRenderedSqlChartConfig } from '@/hooks/useChartConfig';
@@ -19,20 +20,29 @@ function tryFormat(data?: string) {
   }
 }
 
-function CopyButton({ text = '' }: { text?: string }) {
+function CopyButton({
+  text = '',
+  size = 'md',
+}: {
+  text?: string;
+  size?: 'xs' | 'md';
+}) {
   const [copied, setCopied] = useState(false);
 
+  const iconSize = size === 'xs' ? 14 : 16;
+  const buttonSize = size === 'xs' ? 'compact-xs' : 'sm';
+
   return (
     <CopyToClipboard text={text ?? ''} onCopy={() => setCopied(true)}>
       <Button
-        variant={copied ? 'light' : 'outline'}
-        color="gray"
+        variant={copied ? 'light' : 'default'}
+        size={buttonSize}
         className="position-absolute top-0 end-0"
       >
         {copied ? (
-          <i className="bi bi-check-lg me-2" />
+          <IconCheck size={iconSize} className="me-2" />
         ) : (
-          <i className="bi bi-clipboard-fill me-2" />
+          <IconCopy size={iconSize} className="me-2" />
         )}
         {copied ? 'Copied!' : 'Copy'}
       </Button>
@@ -44,10 +54,12 @@ export function SQLPreview({
   data,
   formatData = true,
   enableCopy = false,
+  copyButtonSize = 'md',
 }: {
   data?: string;
   formatData?: boolean;
   enableCopy?: boolean;
+  copyButtonSize?: 'xs' | 'md';
 }) {
   const displayed = formatData ? tryFormat(data) : data;
 
@@ -66,7 +78,7 @@ export function SQLPreview({
         extensions={[sql()]}
         editable={false}
       />
-      {enableCopy && <CopyButton text={displayed} />}
+      {enableCopy && <CopyButton text={displayed} size={copyButtonSize} />}
     </div>
   );
 }
diff --git a/packages/app/src/components/InputLanguageSwitch.tsx b/packages/app/src/components/InputLanguageSwitch.tsx
index 1da0d6aa5..b79ced8a9 100644
--- a/packages/app/src/components/InputLanguageSwitch.tsx
+++ b/packages/app/src/components/InputLanguageSwitch.tsx
@@ -36,6 +36,7 @@ export default function InputLanguageSwitch({
       <Text
         size="xs"
         role="button"
+        fw={500}
         c={language === 'lucene' ? 'var(--color-text-success)' : 'gray'}
         onClick={() => onLanguageChange('lucene')}
       >
diff --git a/packages/app/src/components/SourceSchemaPreview.tsx b/packages/app/src/components/SourceSchemaPreview.tsx
index 7b8a73f4b..9aa01aa22 100644
--- a/packages/app/src/components/SourceSchemaPreview.tsx
+++ b/packages/app/src/components/SourceSchemaPreview.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { MetricsDataType, TSource } from '@hyperdx/common-utils/dist/types';
-import { Modal, Paper, Tabs, TextProps, Tooltip } from '@mantine/core';
+import { Modal, Paper, Tabs, Text, TextProps, Tooltip } from '@mantine/core';
 import { IconCode } from '@tabler/icons-react';
 
 import { useTableMetadata } from '@/hooks/useMetadata';
@@ -32,16 +32,18 @@ const SourceSchemaInfoIcon = ({
     <Tooltip
       label={tooltipText}
       color="dark"
-      c="white"
       position="right"
       onClick={() => isEnabled && onClick()}
     >
       {variant === 'text' ? (
-        <span
+        <Text
+          fw={500}
+          size="xs"
+          className="text-sucess-hover"
           style={{ cursor: isEnabled ? 'pointer' : 'default', ...iconStyles }}
         >
           Schema
-        </span>
+        </Text>
       ) : (
         <IconCode size={16} />
       )}
@@ -67,7 +69,13 @@ const TableSchemaPreview = ({
   });
 
   return (
-    <Paper flex="auto" shadow="none" radius="sm" style={{ overflow: 'hidden' }}>
+    <Paper
+      flex="auto"
+      shadow="none"
+      radius="sm"
+      p="xs"
+      style={{ overflow: 'hidden' }}
+    >
       {isLoading ? (
         <div className="spin-animate d-inline-block">
           <i className="bi bi-arrow-repeat" />
@@ -76,6 +84,7 @@ const TableSchemaPreview = ({
         <SQLPreview
           data={data?.create_table_query ?? 'Schema is not available'}
           enableCopy={!!data?.create_table_query}
+          copyButtonSize="xs"
         />
       )}
     </Paper>
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index ed9ec4814..d973189dc 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -98,6 +98,7 @@
   --color-text-muted: var(--mantine-color-dark-6);
   --color-text-muted-hover: var(--mantine-color-dark-9);
   --color-text-success: var(--mantine-color-green-8);
+  --color-text-success-hover: var(--mantine-color-green-9);
   --color-text-danger: var(--mantine-color-red-7);
 
   /* Icons - inverted */
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
index 67bc0bc38..65e2e7130 100644
--- a/packages/app/styles/_utilities.scss
+++ b/packages/app/styles/_utilities.scss
@@ -107,6 +107,15 @@
   color: var(--color-text-success) !important;
 }
 
+.text-success-hover {
+  color: var(--color-text-success);
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-text-success-hover);
+  }
+}
+
 .text-link {
   color: var(--color-text-primary) !important;
 }

From 80637d71599cffe61eeee4d6c4eb8b062f990367 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 13 Nov 2025 19:44:56 +0000
Subject: [PATCH 40/49] Address PR review.

---
 packages/app/src/LogSidePanelElements.tsx      | 10 +++-------
 .../app/src/components/HyperJson.module.scss   |  9 ---------
 packages/app/styles/AppNav.module.scss         |  6 ++----
 packages/app/styles/LogSidePanel.module.scss   | 18 ++++++++----------
 4 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/packages/app/src/LogSidePanelElements.tsx b/packages/app/src/LogSidePanelElements.tsx
index 68fad8a29..01f5c2a9c 100644
--- a/packages/app/src/LogSidePanelElements.tsx
+++ b/packages/app/src/LogSidePanelElements.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import cx from 'classnames';
 import { format } from 'date-fns';
 import { JSONTree } from 'react-json-tree';
-import { Alert, Button, CloseButton, Text, Tooltip } from '@mantine/core';
+import { Alert, Button, CloseButton, Kbd, Text, Tooltip } from '@mantine/core';
 import { ColumnDef, Row, Table } from '@tanstack/react-table';
 
 import HyperJson from './components/HyperJson';
@@ -473,10 +473,6 @@ export const NetworkBody = ({
 /**
  * Keyboard shortcuts
  */
-export const Kbd = ({ children }: { children: string }) => (
-  <div className={styles.kbd}>{children}</div>
-);
-
 export const LogSidePanelKbdShortcuts = () => {
   const [isDismissed, setDismissed] = useLocalStorage<boolean>(
     'kbd-shortcuts-dismissed',
@@ -496,8 +492,8 @@ export const LogSidePanelKbdShortcuts = () => {
       <div className="d-flex justify-content-between align-items-center ">
         <div className="d-flex align-items-center gap-3">
           <div>
-            Use <Kbd>←</Kbd>
-            <Kbd>→</Kbd> arrow keys or <Kbd>k</Kbd>
+            Use <Kbd className="me-1">←</Kbd>
+            <Kbd>→</Kbd> arrow keys or <Kbd className="me-1">k</Kbd>
             <Kbd>j</Kbd> to move through events
           </div>
           <div className={styles.kbdDivider} />
diff --git a/packages/app/src/components/HyperJson.module.scss b/packages/app/src/components/HyperJson.module.scss
index 5b339fcf7..09156b588 100644
--- a/packages/app/src/components/HyperJson.module.scss
+++ b/packages/app/src/components/HyperJson.module.scss
@@ -6,7 +6,6 @@
   flex-direction: column;
   padding: 0 4px;
   font-size: 12px;
-  background-color: var(--color-bg-surface);
 }
 
 .withTabulate {
@@ -31,8 +30,6 @@
   display: flex;
   gap: 10px;
   padding: 2px 8px;
-
-  // margin: 0 -10px;margin
   align-items: flex-start;
   border-radius: 3px;
   position: relative;
@@ -100,10 +97,6 @@
   }
 }
 
-.nestedLine {
-  // margin-bottom: 8px;margin-bottom
-}
-
 .clickable {
   &:active {
     background-color: var(--color-bg-highlighted);
@@ -162,7 +155,6 @@
 }
 
 .keyContainer {
-  // min-width: 160px;min-width
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -208,7 +200,6 @@
   color: var(--color-json-string);
   word-break: break-all;
 
-  // margin-left: -6px;margin-left
   &::before,
   &::after {
     content: '"';
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index 5b3cb93c1..7267f2895 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -1,4 +1,5 @@
 /* stylelint-disable */
+
 .wrapper {
   height: 100vh;
   max-height: 100vh;
@@ -39,8 +40,6 @@
   width: 100%;
   display: flex;
   align-items: center;
-
-  // justify-content: space-between;
   gap: 6px;
 
   &:hover {
@@ -93,7 +92,6 @@
 }
 
 .listLinkActive {
-  // color: $green;
   color: var(--color-text-success);
   font-weight: 500;
 
@@ -172,7 +170,7 @@
 
   &:hover {
     background: var(--color-bg-muted);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-border);
   }
 
   &:active {
diff --git a/packages/app/styles/LogSidePanel.module.scss b/packages/app/styles/LogSidePanel.module.scss
index 95b067ead..bf98a091d 100644
--- a/packages/app/styles/LogSidePanel.module.scss
+++ b/packages/app/styles/LogSidePanel.module.scss
@@ -1,7 +1,5 @@
 /* stylelint-disable */
 
-// TODO: Use variables for spacings;
-$padding-x: 24px;
 
 .panel {
   display: flex;
@@ -31,11 +29,11 @@ $padding-x: 24px;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid var(--color-border);
-  padding: 12px $padding-x;
+  padding: 12px var(--mantine-spacing-xl);
 }
 
 .panelDetails {
-  padding: $padding-x;
+  padding: var(--mantine-spacing-xl);
   padding-bottom: 16px;
   display: flex;
   flex-direction: column;
@@ -43,7 +41,7 @@ $padding-x: 24px;
 }
 
 .panelContent {
-  padding: 0 $padding-x;
+  padding: 0 var(--mantine-spacing-xl);
 }
 
 .severityChip {
@@ -56,14 +54,14 @@ $padding-x: 24px;
 .loadingState {
   color: var(--color-text-muted);
   width: 100%;
-  margin: $padding-x;
+  margin: var(--mantine-spacing-xl);
   font-size: 16px;
   text-align: center;
   flex-grow: 1;
 }
 
 .panelSectionWrapper {
-  background-color: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   margin: 12px 0;
   border-radius: 6px;
 }
@@ -74,9 +72,9 @@ $padding-x: 24px;
 }
 
 .kbdShortcuts {
-  background: var(--color-bg-surface);
+  background: var(--color-bg-muted);
   border-top: 1px solid var(--color-border);
-  padding: 12px $padding-x;
+  padding: 12px var(--mantine-spacing-xl);
   color: var(--color-text-secondary);
   font-size: 11px;
 }
@@ -94,7 +92,7 @@ $padding-x: 24px;
 .kbdDivider {
   height: 21px;
   width: 1px;
-  background: var(--color-bg-muted);
+  background: var(--color-border);
 }
 
 .lineContext {

From b503e0e576e9635ccfb752761aa3b07b18a5d607 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 14 Nov 2025 15:07:03 +0000
Subject: [PATCH 41/49] Resolve dot colors to color

---
 packages/app/src/DBDashboardPage.tsx                 |  6 +++---
 packages/app/src/DBSearchPage.tsx                    |  4 ++--
 packages/app/src/DBSearchPageAlertModal.tsx          |  2 +-
 packages/app/src/DOMPlayer.tsx                       |  2 +-
 packages/app/src/HDXMultiSeriesTableChart.tsx        |  2 +-
 packages/app/src/KubernetesDashboardPage.tsx         | 12 ++++++------
 packages/app/src/NamespaceDetailsSidePanel.tsx       |  2 +-
 packages/app/src/NodeDetailsSidePanel.tsx            |  2 +-
 packages/app/src/PlaybarSlider.tsx                   |  2 +-
 packages/app/src/PodDetailsSidePanel.tsx             |  2 +-
 packages/app/src/ServicesDashboardPage.tsx           | 12 ++++++------
 packages/app/src/SessionEventList.tsx                |  4 ++--
 packages/app/src/SessionSubpanel.tsx                 |  6 +++---
 packages/app/src/SessionsPage.tsx                    |  4 ++--
 packages/app/src/TeamPage.tsx                        |  7 +++----
 packages/app/src/components/ChartBox.tsx             |  6 +++---
 packages/app/src/components/DBEditTimeChartForm.tsx  |  6 +++---
 packages/app/src/components/DBRowJsonViewer.tsx      |  2 +-
 packages/app/src/components/DBSearchPageFilters.tsx  |  4 ++--
 packages/app/src/components/ExceptionSubpanel.tsx    |  6 ++----
 packages/app/src/components/LogLevel.tsx             |  2 +-
 .../src/components/Search/DBSearchHeatmapChart.tsx   |  4 ++--
 packages/app/src/components/SearchPageActionBar.tsx  |  2 +-
 .../app/src/components/TimePicker/TimePicker.tsx     |  2 +-
 packages/app/styles/_semantic-colors.scss            |  2 +-
 25 files changed, 51 insertions(+), 54 deletions(-)

diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index ae123e6e4..de1800d58 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -45,7 +45,7 @@ import {
 } from '@mantine/core';
 import { useHover } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
-import { IconFilterEdit, IconPlayerPlayFilled } from '@tabler/icons-react';
+import { IconFilterEdit, IconPlayerPlay } from '@tabler/icons-react';
 
 import { ContactSupportText } from '@/components/ContactSupportText';
 import EditTimeChartForm from '@/components/DBEditTimeChartForm';
@@ -1086,7 +1086,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
           variant="outline"
           type="submit"
         >
-          <IconPlayerPlayFilled size={16} />
+          <IconPlayerPlay size={16} />
         </Button>
       </Flex>
       <DashboardFilters
@@ -1150,7 +1150,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
         data-testid="add-new-tile-button"
         variant="outline"
         mt="sm"
-        color={dashboard?.tiles.length === 0 ? 'green' : 'dark.3'}
+        color={dashboard?.tiles.length === 0 ? 'green' : 'gray'}
         fw={400}
         onClick={onAddTile}
         w="100%"
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index d8a94a132..07a76ebb6 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -57,7 +57,7 @@ import {
   useDocumentVisibility,
 } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
-import { IconPlayerPlayFilled } from '@tabler/icons-react';
+import { IconPlayerPlay } from '@tabler/icons-react';
 import { useIsFetching } from '@tanstack/react-query';
 import { SortingState } from '@tanstack/react-table';
 import CodeMirror from '@uiw/react-codemirror';
@@ -1538,7 +1538,7 @@ function DBSearchPage() {
             type="submit"
             color={formState.isDirty ? 'var(--color-text-success)' : 'gray'}
           >
-            <IconPlayerPlayFilled size={16} />
+            <IconPlayerPlay size={16} />
           </Button>
         </Flex>
       </form>
diff --git a/packages/app/src/DBSearchPageAlertModal.tsx b/packages/app/src/DBSearchPageAlertModal.tsx
index 6aef74ff8..900a43176 100644
--- a/packages/app/src/DBSearchPageAlertModal.tsx
+++ b/packages/app/src/DBSearchPageAlertModal.tsx
@@ -167,7 +167,7 @@ const AlertForm = ({
         {groupBy && thresholdType === AlertThresholdType.BELOW && (
           <MantineAlert
             icon={<i className="bi bi-info-circle-fill " />}
-            bg="dark.6"
+            bg="dark"
             py="xs"
           >
             <Text size="sm" opacity={0.7}>
diff --git a/packages/app/src/DOMPlayer.tsx b/packages/app/src/DOMPlayer.tsx
index fae926312..7ada3c501 100644
--- a/packages/app/src/DOMPlayer.tsx
+++ b/packages/app/src/DOMPlayer.tsx
@@ -470,7 +470,7 @@ export default function DOMPlayer({
         <ActionIcon
           onClick={() => setPlayerFullWidth(!playerFullWidth)}
           size="sm"
-          color="gray.7"
+          color="gray"
         >
           {playerFullWidth ? (
             <i className="bi bi-list"></i>
diff --git a/packages/app/src/HDXMultiSeriesTableChart.tsx b/packages/app/src/HDXMultiSeriesTableChart.tsx
index 618ac6961..1a40fd9ba 100644
--- a/packages/app/src/HDXMultiSeriesTableChart.tsx
+++ b/packages/app/src/HDXMultiSeriesTableChart.tsx
@@ -203,9 +203,9 @@ export const Table = ({
       >
         <thead
           style={{
-            background: 'inherit',
             position: 'sticky',
             top: 0,
+            background: 'var(--color-bg-body)',
           }}
         >
           {table.getHeaderGroups().map(headerGroup => (
diff --git a/packages/app/src/KubernetesDashboardPage.tsx b/packages/app/src/KubernetesDashboardPage.tsx
index 15f1a3f79..b5c9f81da 100644
--- a/packages/app/src/KubernetesDashboardPage.tsx
+++ b/packages/app/src/KubernetesDashboardPage.tsx
@@ -426,7 +426,7 @@ export const InfraPodsStatusTable = ({
                           >
                             <Text
                               span
-                              c={pod.cpuLimitUtilization ? undefined : 'gray.7'}
+                              c={pod.cpuLimitUtilization ? undefined : 'gray'}
                             >
                               {pod.cpuLimitUtilization
                                 ? formatNumber(
@@ -447,7 +447,7 @@ export const InfraPodsStatusTable = ({
                           >
                             <Text
                               span
-                              c={pod.memLimitUtilization ? undefined : 'gray.7'}
+                              c={pod.memLimitUtilization ? undefined : 'gray'}
                             >
                               {pod.memLimitUtilization
                                 ? formatNumber(
@@ -459,7 +459,7 @@ export const InfraPodsStatusTable = ({
                           </Tooltip>
                         </Table.Td>
                         <Table.Td>
-                          <Text span c={pod.uptime ? undefined : 'gray.7'}>
+                          <Text span c={pod.uptime ? undefined : 'gray'}>
                             {pod.uptime ? formatUptime(pod.uptime) : '–'}
                           </Text>
                         </Table.Td>
@@ -467,10 +467,10 @@ export const InfraPodsStatusTable = ({
                           <Text
                             color={
                               pod.restarts >= 10
-                                ? 'red.6'
+                                ? 'red'
                                 : pod.restarts >= 5
-                                  ? 'yellow.3'
-                                  : 'grey.7'
+                                  ? 'yellow'
+                                  : 'gray'
                             }
                           >
                             {pod.restarts}
diff --git a/packages/app/src/NamespaceDetailsSidePanel.tsx b/packages/app/src/NamespaceDetailsSidePanel.tsx
index b5398b64e..4ca8cc16e 100644
--- a/packages/app/src/NamespaceDetailsSidePanel.tsx
+++ b/packages/app/src/NamespaceDetailsSidePanel.tsx
@@ -43,7 +43,7 @@ const PodDetailsProperty = React.memo(
     if (!value) return null;
     return (
       <div className="pe-4">
-        <Text size="xs" color="gray.6">
+        <Text size="xs" color="gray">
           {label}
         </Text>
         <Text size="sm">{value}</Text>
diff --git a/packages/app/src/NodeDetailsSidePanel.tsx b/packages/app/src/NodeDetailsSidePanel.tsx
index 5ff191f9b..56d14353b 100644
--- a/packages/app/src/NodeDetailsSidePanel.tsx
+++ b/packages/app/src/NodeDetailsSidePanel.tsx
@@ -47,7 +47,7 @@ const PodDetailsProperty = React.memo(
     if (!value) return null;
     return (
       <div className="pe-4">
-        <Text size="xs" color="gray.6">
+        <Text size="xs" color="gray">
           {label}
         </Text>
         <Text size="sm">{value}</Text>
diff --git a/packages/app/src/PlaybarSlider.tsx b/packages/app/src/PlaybarSlider.tsx
index 7360f016c..9fd01f558 100644
--- a/packages/app/src/PlaybarSlider.tsx
+++ b/packages/app/src/PlaybarSlider.tsx
@@ -87,7 +87,7 @@ export const PlaybarSlider = ({
     <div className={styles.wrapper}>
       <div className={styles.markers}>{markersContent}</div>
       <Slider
-        color={playerState === 'playing' ? 'green' : 'gray.5'}
+        color={playerState === 'playing' ? 'green' : 'gray'}
         size="sm"
         min={min}
         max={max}
diff --git a/packages/app/src/PodDetailsSidePanel.tsx b/packages/app/src/PodDetailsSidePanel.tsx
index ec10a1874..a8cdb492b 100644
--- a/packages/app/src/PodDetailsSidePanel.tsx
+++ b/packages/app/src/PodDetailsSidePanel.tsx
@@ -42,7 +42,7 @@ const PodDetailsProperty = React.memo(
     if (!value) return null;
     return (
       <div className="pe-4">
-        <Text size="xs" color="gray.6">
+        <Text size="xs" color="gray">
           {label}
         </Text>
         <Text size="sm">{value}</Text>
diff --git a/packages/app/src/ServicesDashboardPage.tsx b/packages/app/src/ServicesDashboardPage.tsx
index ef0f51f85..7863055ec 100644
--- a/packages/app/src/ServicesDashboardPage.tsx
+++ b/packages/app/src/ServicesDashboardPage.tsx
@@ -24,7 +24,7 @@ import {
   Text,
   Tooltip,
 } from '@mantine/core';
-import { IconPlayerPlayFilled } from '@tabler/icons-react';
+import { IconPlayerPlay } from '@tabler/icons-react';
 
 import {
   ERROR_RATE_PERCENTAGE_NUMBER_FORMAT,
@@ -180,7 +180,7 @@ export function EndpointLatencyChart({
           <Button.Group>
             <Button
               variant="subtle"
-              color={latencyChartType === 'line' ? 'green' : 'dark.2'}
+              color={latencyChartType === 'line' ? 'green' : 'gray'}
               size="xs"
               title="Line Chart"
               onClick={() => setLatencyChartType('line')}
@@ -190,7 +190,7 @@ export function EndpointLatencyChart({
 
             <Button
               variant="subtle"
-              color={latencyChartType === 'histogram' ? 'green' : 'dark.2'}
+              color={latencyChartType === 'histogram' ? 'green' : 'gray'}
               size="xs"
               title="Histogram"
               onClick={() => setLatencyChartType('histogram')}
@@ -636,7 +636,7 @@ function DatabaseTab({
               <Button.Group>
                 <Button
                   variant="subtle"
-                  color={chartType === 'list' ? 'green' : 'dark.2'}
+                  color={chartType === 'list' ? 'green' : 'gray'}
                   size="xs"
                   title="List"
                   onClick={() => setChartType('list')}
@@ -646,7 +646,7 @@ function DatabaseTab({
 
                 <Button
                   variant="subtle"
-                  color={chartType === 'table' ? 'green' : 'dark.2'}
+                  color={chartType === 'table' ? 'green' : 'gray'}
                   size="xs"
                   title="Table"
                   onClick={() => setChartType('table')}
@@ -1003,7 +1003,7 @@ function ServicesDashboardPage() {
               </Button>
             </Tooltip>
             <Button variant="outline" type="submit" px="sm">
-              <IconPlayerPlayFilled size={16} />
+              <IconPlayerPlay size={16} />
             </Button>
           </Group>
         </Group>
diff --git a/packages/app/src/SessionEventList.tsx b/packages/app/src/SessionEventList.tsx
index 0f9906ef1..a0ffe2a35 100644
--- a/packages/app/src/SessionEventList.tsx
+++ b/packages/app/src/SessionEventList.tsx
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { ChartConfigWithOptDateRange } from '@hyperdx/common-utils/dist/types';
 import { ScrollArea, Skeleton, Stack } from '@mantine/core';
 import { useThrottledCallback, useThrottledValue } from '@mantine/hooks';
-import { IconPlayerPlayFilled } from '@tabler/icons-react';
+import { IconPlayerPlay } from '@tabler/icons-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import useRowWhere from '@/hooks/useRowWhere';
@@ -79,7 +79,7 @@ const EventRow = React.forwardRef(
           </div>
         </div>
         <div className={styles.eventRowTimestamp} onClick={onTimeClick}>
-          <IconPlayerPlayFilled size={12} className="me-1" />
+          <IconPlayerPlay size={12} className="me-1" />
           {event.formattedTimestamp}
         </div>
       </div>
diff --git a/packages/app/src/SessionSubpanel.tsx b/packages/app/src/SessionSubpanel.tsx
index 1a187093e..dd5fce090 100644
--- a/packages/app/src/SessionSubpanel.tsx
+++ b/packages/app/src/SessionSubpanel.tsx
@@ -622,7 +622,7 @@ export default function SessionSubpanel({
             <Tooltip label="Go 15 seconds back" color="gray">
               <ActionIcon
                 variant="filled"
-                color="gray.8"
+                color="gray"
                 size="md"
                 radius="xl"
                 onClick={skipBackward}
@@ -637,7 +637,7 @@ export default function SessionSubpanel({
             >
               <ActionIcon
                 variant="filled"
-                color="gray.8"
+                color="gray"
                 size="lg"
                 radius="xl"
                 onClick={togglePlayerState}
@@ -652,7 +652,7 @@ export default function SessionSubpanel({
             <Tooltip label="Skip 15 seconds" color="gray">
               <ActionIcon
                 variant="filled"
-                color="gray.8"
+                color="gray"
                 size="md"
                 radius="xl"
                 onClick={skipForward}
diff --git a/packages/app/src/SessionsPage.tsx b/packages/app/src/SessionsPage.tsx
index f05ddf104..2b67e3310 100644
--- a/packages/app/src/SessionsPage.tsx
+++ b/packages/app/src/SessionsPage.tsx
@@ -36,7 +36,7 @@ import {
   Text,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
-import { IconPlayerPlayFilled } from '@tabler/icons-react';
+import { IconPlayerPlay } from '@tabler/icons-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { SourceSelectControlled } from '@/components/SourceSelect';
@@ -490,7 +490,7 @@ export default function SessionsPage() {
                 }}
               />
               <Button variant="outline" type="submit" px="sm">
-                <IconPlayerPlayFilled size={16} />
+                <IconPlayerPlay size={16} />
               </Button>
             </Group>
           </Flex>
diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
index 8a501036f..f4f461c20 100644
--- a/packages/app/src/TeamPage.tsx
+++ b/packages/app/src/TeamPage.tsx
@@ -550,7 +550,7 @@ function TeamMembersSection() {
                       </span>
                     </Table.Td>
                     <Table.Td>
-                      <Badge variant="dot" color="gray.6" fw="normal" tt="none">
+                      <Badge variant="dot" color="gray" fw="normal" tt="none">
                         Pending Invite
                       </Badge>
                       <CopyToClipboard text={invitation.url}>
@@ -1263,8 +1263,7 @@ function ApiKeysSection() {
             </Text>
             <Group justify="end">
               <Button
-                variant="outline"
-                color="gray.5"
+                variant="default"
                 className="mt-2 px-4 ms-2 float-end"
                 size="sm"
                 onClick={() => setRotateApiKeyConfirmationModalShow(false)}
@@ -1273,7 +1272,7 @@ function ApiKeysSection() {
               </Button>
               <Button
                 variant="outline"
-                color="red.6"
+                color="red"
                 className="mt-2 px-4 float-end"
                 size="sm"
                 onClick={onConfirmUpdateTeamApiKey}
diff --git a/packages/app/src/components/ChartBox.tsx b/packages/app/src/components/ChartBox.tsx
index e5345dd7c..bb1cd6f8d 100644
--- a/packages/app/src/components/ChartBox.tsx
+++ b/packages/app/src/components/ChartBox.tsx
@@ -15,9 +15,9 @@ export function ChartBox({
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
-        background:
-          'linear-gradient(180deg, rgba(250,250,250,0.018) 0%, rgba(250,250,250,0.008) 100%)',
-        borderRadius: 2,
+        background: 'var(--color-bg-body)',
+        borderRadius: 'var(--mantine-radius-sm)',
+        border: '1px solid var(--color-border)',
         ...style,
       }}
     >
diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx
index b0e85b572..67b283d8a 100644
--- a/packages/app/src/components/DBEditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm.tsx
@@ -47,7 +47,7 @@ import {
   Text,
   Textarea,
 } from '@mantine/core';
-import { IconPlayerPlayFilled } from '@tabler/icons-react';
+import { IconPlayerPlay } from '@tabler/icons-react';
 
 import { AGG_FNS } from '@/ChartUtils';
 import { AlertChannelForm, getAlertReferenceLines } from '@/components/Alerts';
@@ -961,7 +961,7 @@ export default function EditTimeChartForm({
           {onClose != null && (
             <Button
               variant="subtle"
-              color="dark.2"
+              color="dark"
               onClick={onClose}
               disabled={isSaving}
             >
@@ -995,7 +995,7 @@ export default function EditTimeChartForm({
               type="submit"
               onClick={onSubmit}
             >
-              <IconPlayerPlayFilled size={16} />
+              <IconPlayerPlay size={16} />
             </Button>
           )}
         </Flex>
diff --git a/packages/app/src/components/DBRowJsonViewer.tsx b/packages/app/src/components/DBRowJsonViewer.tsx
index c4b44a2d3..1a051b424 100644
--- a/packages/app/src/components/DBRowJsonViewer.tsx
+++ b/packages/app/src/components/DBRowJsonViewer.tsx
@@ -76,7 +76,7 @@ function HyperJsonMenu() {
   return (
     <Group>
       <UnstyledButton
-        color="gray.0"
+        color="gray"
         onClick={() =>
           setJsonOptions({ ...jsonOptions, lineWrap: !jsonOptions.lineWrap })
         }
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 1a2c33203..e33c120a4 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -575,7 +575,7 @@ export const FilterGroup = ({
               ))}
               {optionsLoading ? (
                 <Group m={6} gap="xs">
-                  <Loader size={12} color="gray.6" />
+                  <Loader size={12} color="gray" />
                   <Text c="dimmed" size="xs">
                     Loading...
                   </Text>
@@ -618,7 +618,7 @@ export const FilterGroup = ({
                   <div className="d-flex m-1">
                     {loadMoreLoading ? (
                       <Group m={6} gap="xs">
-                        <Loader size={12} color="gray.6" />
+                        <Loader size={12} color="gray" />
                         <Text c="dimmed" size="xs">
                           Loading more...
                         </Text>
diff --git a/packages/app/src/components/ExceptionSubpanel.tsx b/packages/app/src/components/ExceptionSubpanel.tsx
index a8ad8d8ed..8d78b0343 100644
--- a/packages/app/src/components/ExceptionSubpanel.tsx
+++ b/packages/app/src/components/ExceptionSubpanel.tsx
@@ -611,8 +611,7 @@ export const ExceptionSubpanel = ({
 
         {stacktraceHiddenRowsCount ? (
           <Button
-            variant="outline"
-            color="gray.6"
+            variant="default"
             size="xs"
             m="xs"
             onClick={handleStacktraceToggleMoreRows}
@@ -641,8 +640,7 @@ export const ExceptionSubpanel = ({
             />
             {breadcrumbHiddenRowsCount ? (
               <Button
-                variant="outline"
-                color="gray.6"
+                variant="default"
                 size="xs"
                 m="xs"
                 onClick={handleBreadcrumbToggleMoreRows}
diff --git a/packages/app/src/components/LogLevel.tsx b/packages/app/src/components/LogLevel.tsx
index c3d148416..9cb1af3eb 100644
--- a/packages/app/src/components/LogLevel.tsx
+++ b/packages/app/src/components/LogLevel.tsx
@@ -17,7 +17,7 @@ export default function LogLevel({
           ? 'red'
           : levelClass === 'warn'
             ? 'yellow'
-            : 'gray.4'
+            : 'gray'
       }
       {...props}
     >
diff --git a/packages/app/src/components/Search/DBSearchHeatmapChart.tsx b/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
index da28a0abe..c0806cc84 100644
--- a/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
+++ b/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
@@ -17,7 +17,7 @@ import { ActionIcon } from '@mantine/core';
 import { Paper } from '@mantine/core';
 import { Center } from '@mantine/core';
 import { Text } from '@mantine/core';
-import { IconPlayerPlayFilled } from '@tabler/icons-react';
+import { IconPlayerPlay } from '@tabler/icons-react';
 
 import { getDurationMsExpression } from '@/source';
 
@@ -196,7 +196,7 @@ function DBSearchHeatmapForm({
           h="auto"
           title="Run"
         >
-          <IconPlayerPlayFilled />
+          <IconPlayerPlay />
         </ActionIcon>
       </Flex>
     </form>
diff --git a/packages/app/src/components/SearchPageActionBar.tsx b/packages/app/src/components/SearchPageActionBar.tsx
index 95f2b0b78..ea62adb55 100644
--- a/packages/app/src/components/SearchPageActionBar.tsx
+++ b/packages/app/src/components/SearchPageActionBar.tsx
@@ -12,7 +12,7 @@ export default function SearchPageActionBar({
       <Menu.Target>
         <Button
           variant="outline"
-          color="dark.2"
+          color="gray"
           px="xs"
           size="xs"
           style={{ flexShrink: 0 }}
diff --git a/packages/app/src/components/TimePicker/TimePicker.tsx b/packages/app/src/components/TimePicker/TimePicker.tsx
index 5ddedbdb8..52c03f255 100644
--- a/packages/app/src/components/TimePicker/TimePicker.tsx
+++ b/packages/app/src/components/TimePicker/TimePicker.tsx
@@ -318,7 +318,7 @@ export const TimePicker = ({
               <Stack gap={0} p="xs">
                 {relativeTimeOptions.map((item, index) =>
                   item === 'divider' ? (
-                    <Divider key={index} my={4} color="gray.9" />
+                    <Divider key={index} my={4} />
                   ) : (
                     <Button
                       key={item[0]}
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index d973189dc..b7ec5e15b 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -78,7 +78,7 @@
   --color-bg-modal: var(--mantine-color-white);
   --color-bg-hover: var(--mantine-color-gray-3);
   --color-bg-active: var(--mantine-color-gray-4);
-  --color-bg-field: var(--color-bg-muted);
+  --color-bg-field: #ececf5;
   --color-bg-field-highlighted: var(--mantine-color-gray-1);
   --color-bg-neutral: var(--mantine-color-gray-5);
   --color-bg-success: var(--mantine-color-green-8);

From cb3b7b5bcb9006f0880109ad60d5fec30cdad314 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 14 Nov 2025 15:55:34 +0000
Subject: [PATCH 42/49] Fix listLink padding left

---
 packages/app/styles/AppNav.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index 7267f2895..32b6244c3 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -60,6 +60,7 @@
   white-space: nowrap;
   user-select: none;
   gap: 10px;
+  padding-left: 16px;
 
   &:hover {
     color: var(--color-text);

From 38a30ad1a5350ee37b05152a667127887caed0aa Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 14 Nov 2025 16:21:02 +0000
Subject: [PATCH 43/49] refactor: update navigation link styles to use
 nestedLink and nestedLinkActive classes

---
 packages/app/src/AppNav.tsx            | 20 +++++++-------
 packages/app/styles/AppNav.module.scss | 36 +++++++++++++++++++++-----
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index 9a6900eaf..581451832 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -470,8 +470,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
         key={savedSearch.id}
         tabIndex={0}
         className={cx(
-          styles.listLink,
-          savedSearch.id === query.savedSearchId && styles.listLinkActive,
+          styles.nestedLink,
+          savedSearch.id === query.savedSearchId && styles.nestedLinkActive,
         )}
         title={savedSearch.name}
         draggable
@@ -533,8 +533,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
         href={`/dashboards/${dashboard.id}`}
         key={dashboard.id}
         tabIndex={0}
-        className={cx(styles.listLink, {
-          [styles.listLinkActive]: dashboard.id === query.dashboardId,
+        className={cx(styles.nestedLink, {
+          [styles.nestedLinkActive]: dashboard.id === query.dashboardId,
         })}
         draggable
         data-dashboardid={dashboard.id}
@@ -808,8 +808,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                       <Link
                         href={`/clickhouse`}
                         tabIndex={0}
-                        className={cx(styles.listLink, {
-                          [styles.listLinkActive]:
+                        className={cx(styles.nestedLink, {
+                          [styles.nestedLinkActive]:
                             pathname.startsWith('/clickhouse'),
                         })}
                       >
@@ -818,8 +818,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                       <Link
                         href={`/services`}
                         tabIndex={0}
-                        className={cx(styles.listLink, {
-                          [styles.listLinkActive]:
+                        className={cx(styles.nestedLink, {
+                          [styles.nestedLinkActive]:
                             pathname.startsWith('/services'),
                         })}
                       >
@@ -829,8 +829,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                         <Link
                           href={`/kubernetes`}
                           tabIndex={0}
-                          className={cx(styles.listLink, {
-                            [styles.listLinkActive]:
+                          className={cx(styles.nestedLink, {
+                            [styles.nestedLinkActive]:
                               pathname.startsWith('/kubernetes'),
                           })}
                           data-testid="k8s-dashboard-nav-link"
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index 32b6244c3..aa089b925 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -35,7 +35,8 @@
   text-transform: uppercase;
   font-size: 11px;
   letter-spacing: 1px;
-  margin-bottom: 6px;
+  margin-bottom: 2x;
+  margin-top: 6px;
   padding-left: 16px;
   width: 100%;
   display: flex;
@@ -52,15 +53,14 @@
   display: flex;
   justify-content: space-between;
   text-decoration: none;
-  color: var(--color-text-muted);
-  font-size: 13px;
+  color: var(--color-text);
+  font-size: 14px;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   user-select: none;
   gap: 10px;
-  padding-left: 16px;
 
   &:hover {
     color: var(--color-text);
@@ -92,11 +92,35 @@
   text-overflow: ellipsis;
 }
 
-.listLinkActive {
+.nestedLink {
+  display: block;
+  color: var(--color-text);
+  text-decoration: none;
+  font-size: 12px;
+  padding-left: 16px;
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+   &:hover {
+    color: var(--color-text-success);
+  }
+
+  &:focus-visible {
+    outline: none;
+    background: var(--color-bg-muted);
+  }
+}
+
+.nestedLinkActive {
   color: var(--color-text-success);
   font-weight: 500;
+}
 
- 
+.listLinkActive {
+  color: var(--color-text-success);
+  font-weight: 500;
 }
 
 .kbd {

From 4e2fe3349f84d0145ecc76728f499c6f3f8067b7 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 14 Nov 2025 16:23:52 +0000
Subject: [PATCH 44/49] fix: update listLink hover color to use success color

---
 packages/app/styles/AppNav.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index aa089b925..204f88521 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -63,7 +63,7 @@
   gap: 10px;
 
   &:hover {
-    color: var(--color-text);
+    color: var(--color-text-success);
   }
 
   &:focus-visible {

From 4b0a76fd62bedf905380c4f2d47d28525dbe499f Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 14 Nov 2025 16:37:02 +0000
Subject: [PATCH 45/49] fix: add padding-block to nestedLink for improved
 spacing

---
 packages/app/styles/AppNav.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index 204f88521..226e8738c 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -98,6 +98,7 @@
   text-decoration: none;
   font-size: 12px;
   padding-left: 16px;
+  padding-block: 2px;
   transition: all 0.2s ease-in-out;
   overflow: hidden;
   text-overflow: ellipsis;

From 68c726a5ba980af1a877184e7d9aaed059fc7754 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 14 Nov 2025 17:07:15 +0000
Subject: [PATCH 46/49] fix: update ServiceMapSidePanel text color and badge
 styling

---
 .../src/components/ServiceMap/ServiceMapSidePanel.tsx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/ServiceMap/ServiceMapSidePanel.tsx b/packages/app/src/components/ServiceMap/ServiceMapSidePanel.tsx
index dfe192719..74d187eab 100644
--- a/packages/app/src/components/ServiceMap/ServiceMapSidePanel.tsx
+++ b/packages/app/src/components/ServiceMap/ServiceMapSidePanel.tsx
@@ -20,17 +20,10 @@ export default function ServiceMapSidePanel({
   return (
     <Stack w="100%">
       <Group gap={0}>
-        <Text size="sm" c="gray.2" ps="sm">
+        <Text size="sm" ps="sm">
           Service Map
         </Text>
-        <Badge
-          size="xs"
-          ms="xs"
-          color="gray.4"
-          autoContrast
-          radius="sm"
-          className="align-text-bottom"
-        >
+        <Badge size="xs" ms="xs" color="gray" autoContrast radius="sm">
           Beta
         </Badge>
       </Group>

From fb281fbdd7bd43325ed73889fa6997c454a4a667 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 14 Nov 2025 17:15:54 +0000
Subject: [PATCH 47/49] fix: update NewDashboardButton color to use CSS
 variable for text color

---
 packages/app/src/AppNav.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index 581451832..8bdab0395 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -77,6 +77,7 @@ function NewDashboardButton() {
         <Button
           data-testid="create-dashboard-button"
           variant="transparent"
+          color="var(--color-text)"
           py="0px"
           px="sm"
           fw={400}
@@ -91,6 +92,7 @@ function NewDashboardButton() {
     <Button
       data-testid="create-dashboard-button"
       variant="transparent"
+      color="var(--color-text)"
       py="0px"
       px="sm"
       fw={400}

From 1a8b3d5a70d9fbd6d8ed544c15127fc9b91cb91b Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 14 Nov 2025 17:38:15 +0000
Subject: [PATCH 48/49] fix: increase font size of nestedLink from 12px to 13px
 for better readability

---
 packages/app/styles/AppNav.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index 226e8738c..16bc37445 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -96,7 +96,7 @@
   display: block;
   color: var(--color-text);
   text-decoration: none;
-  font-size: 12px;
+  font-size: 13px;
   padding-left: 16px;
   padding-block: 2px;
   transition: all 0.2s ease-in-out;

From ecab514b4e7489590ca4608974ab40df94ff1efe Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 14 Nov 2025 17:39:33 +0000
Subject: [PATCH 49/49] Update changelog

---
 .changeset/semantic-color-tokens.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/semantic-color-tokens.md b/.changeset/semantic-color-tokens.md
index 4086a14d7..e0cef9738 100644
--- a/.changeset/semantic-color-tokens.md
+++ b/.changeset/semantic-color-tokens.md
@@ -2,4 +2,4 @@
 "@hyperdx/app": minor
 ---
 
-feat: Remove bootstrap, adopt semantic tokens, and improve Mantine UI usage
+feat: Remove `bootstrap`, `react-bootstrap` and unused `react-bootstrap-range-slider`, adopt semantic tokens, and improve Mantine UI usage