diff --git a/web/ui/mantine-ui/src/pages/query/UPlotChart.tsx b/web/ui/mantine-ui/src/pages/query/UPlotChart.tsx
index a1e73c361d..64188a46ff 100644
--- a/web/ui/mantine-ui/src/pages/query/UPlotChart.tsx
+++ b/web/ui/mantine-ui/src/pages/query/UPlotChart.tsx
@@ -337,7 +337,7 @@ const getOptions = (
   // see https://github.com/leeoniya/uPlot/issues/973.
   drawOrder: ["series", "axes"],
   focus: {
-    alpha: 0.4,
+    alpha: 1,
   },
   axes: [
     // X axis (time).
@@ -345,7 +345,7 @@ const getOptions = (
       labelSize: 20,
       stroke: light ? "#333" : "#eee",
       ticks: {
-        stroke: light ? "#333" : "#eee",
+        stroke: light ? "#00000010" : "#ffffff20",
       },
       grid: {
         show: false,
@@ -357,17 +357,12 @@ const getOptions = (
     // Y axis (sample value).
     {
       values: (_u: uPlot, splits: number[]) => splits.map(formatYAxisTickValue),
-      // border: {
-      //   show: true,
-      //   stroke: light ? "#00000010" : "#ffffff10",
-      //   width: 2,
-      // },
       ticks: {
-        stroke: light ? "#00000010" : "#ffffff10",
+        stroke: light ? "#00000010" : "#ffffff20",
       },
       grid: {
         show: true,
-        stroke: light ? "#00000010" : "#ffffff10",
+        stroke: light ? "#00000010" : "#ffffff20",
         width: 2,
         dash: [],
       },
diff --git a/web/ui/mantine-ui/src/pages/query/uplot.css b/web/ui/mantine-ui/src/pages/query/uplot.css
index 1768b38750..8d09328919 100644
--- a/web/ui/mantine-ui/src/pages/query/uplot.css
+++ b/web/ui/mantine-ui/src/pages/query/uplot.css
@@ -101,3 +101,17 @@
     height: 10px;
   }
 }
+
+.u-select {
+  background: rgba(255, 200, 150, 0.2);
+}
+
+.u-hz .u-cursor-x,
+.u-vt .u-cursor-y {
+  border-right: 1px dashed light-dark(#607d8b, #90adbc);
+}
+
+.u-hz .u-cursor-y,
+.u-vt .u-cursor-x {
+  border-bottom: 1px dashed light-dark(#607d8b, #90adbc);
+}