diff --git a/ui/src/components/charts/DurationHistogram.tsx b/ui/src/components/charts/DurationHistogram.tsx
index 96e86367..e18828ae 100644
--- a/ui/src/components/charts/DurationHistogram.tsx
+++ b/ui/src/components/charts/DurationHistogram.tsx
@@ -51,15 +51,19 @@ export function DurationHistogram({ buckets }: DurationHistogramProps) {
       axes: [
         {
           stroke: chartColors.axis,
-          grid: { stroke: chartColors.grid, width: 1 },
+          grid: { show: false },
+          ticks: { show: false },
           font: '11px JetBrains Mono, monospace',
+          gap: 8,
           values: (_, ticks) => ticks.map((v) => `${Math.round(v)}ms`),
         },
         {
           stroke: chartColors.axis,
-          grid: { stroke: chartColors.grid, width: 1 },
+          grid: { stroke: chartColors.grid, width: 1, dash: [2, 4] },
+          ticks: { show: false },
           font: '11px JetBrains Mono, monospace',
           size: 40,
+          gap: 8,
         },
       ],
       series: [
diff --git a/ui/src/components/charts/LatencyHeatmap.tsx b/ui/src/components/charts/LatencyHeatmap.tsx
index 11965ba2..7a081eb8 100644
--- a/ui/src/components/charts/LatencyHeatmap.tsx
+++ b/ui/src/components/charts/LatencyHeatmap.tsx
@@ -43,14 +43,18 @@ export function LatencyHeatmap({ buckets }: LatencyHeatmapProps) {
       axes: [
         {
           stroke: chartColors.axis,
-          grid: { stroke: chartColors.grid, width: 1 },
+          grid: { show: false },
+          ticks: { show: false },
           font: '11px JetBrains Mono, monospace',
+          gap: 8,
         },
         {
           stroke: chartColors.axis,
-          grid: { stroke: chartColors.grid, width: 1 },
+          grid: { stroke: chartColors.grid, width: 1, dash: [2, 4] },
+          ticks: { show: false },
           font: '11px JetBrains Mono, monospace',
           size: 50,
+          gap: 8,
           values: (_, ticks) => ticks.map((v) => `${Math.round(v)}ms`),
         },
       ],
diff --git a/ui/src/components/charts/theme.ts b/ui/src/components/charts/theme.ts
index f79494d8..6d43c4a6 100644
--- a/ui/src/components/charts/theme.ts
+++ b/ui/src/components/charts/theme.ts
@@ -8,7 +8,7 @@ export const chartColors = {
   green: '#10b981',
   blue: '#3b82f6',
   purple: '#a855f7',
-  grid: 'rgba(30, 45, 61, 0.5)',
+  grid: 'rgba(30, 45, 61, 0.18)',
   axis: '#4a5e7a',
   text: '#8b9cb6',
   bg: '#111827',
@@ -36,16 +36,18 @@ export function baseOpts(width: number, height: number): Partial<uPlot.Options>
     axes: [
       {
         stroke: chartColors.axis,
-        grid: { stroke: chartColors.grid, width: 1 },
-        ticks: { stroke: chartColors.grid, width: 1 },
+        grid: { show: false },
+        ticks: { show: false },
         font: '11px JetBrains Mono, monospace',
+        gap: 8,
       },
       {
         stroke: chartColors.axis,
-        grid: { stroke: chartColors.grid, width: 1 },
-        ticks: { stroke: chartColors.grid, width: 1 },
+        grid: { stroke: chartColors.grid, width: 1, dash: [2, 4] },
+        ticks: { show: false },
         font: '11px JetBrains Mono, monospace',
         size: 50,
+        gap: 8,
       },
     ],
   };