diff --git a/packages/app/src/theme/themes/clickstack/_tokens.scss b/packages/app/src/theme/themes/clickstack/_tokens.scss
index 0c77f5498c..0651f8ef9d 100644
--- a/packages/app/src/theme/themes/clickstack/_tokens.scss
+++ b/packages/app/src/theme/themes/clickstack/_tokens.scss
@@ -200,6 +200,17 @@
   --color-chart-warning-highlight: #f5c94d;
   --color-chart-error-highlight: #ffa090;
 
+  /* Visualization Range Selector (minimap viewports, brush ranges, etc.) */
+  --color-viz-range-handle: var(--palette-brand-300);
+  --color-viz-range-handle-grip: var(--color-text-inverted);
+  --color-viz-range-border: var(--palette-brand-700);
+  --color-viz-range-overlay: rgb(0 0 0 / 20%);
+  --color-viz-range-brush: rgb(250 255 105 / 20%);
+  --color-viz-range-brush-border: rgb(250 255 105 / 50%);
+
+  /* Shadows */
+  --shadow-drawer: -4px 0 24px rgb(0 0 0 / 25%);
+
   /* Mantine Overrides */
   --mantine-color-body: var(--color-bg-body) !important;
   --mantine-color-text: var(--color-text) !important;
@@ -401,6 +412,17 @@
   --color-chart-warning-highlight: #f5c94d;
   --color-chart-error-highlight: #ffa090;
 
+  /* Visualization Range Selector (minimap viewports, brush ranges, etc.) */
+  --color-viz-range-handle: var(--mantine-color-indigo-8);
+  --color-viz-range-handle-grip: var(--mantine-color-indigo-1);
+  --color-viz-range-border: var(--mantine-color-indigo-8);
+  --color-viz-range-overlay: rgb(0 0 0 / 4%);
+  --color-viz-range-brush: rgb(67 126 239 / 20%);
+  --color-viz-range-brush-border: var(--mantine-color-indigo-8);
+
+  /* Shadows */
+  --shadow-drawer: -4px 0 24px rgb(0 0 0 / 4%);
+
   /* Mantine Overrides */
   --mantine-color-body: var(--color-bg-body) !important;
   --mantine-color-text: var(--color-text) !important;
diff --git a/packages/app/src/theme/themes/hyperdx/_tokens.scss b/packages/app/src/theme/themes/hyperdx/_tokens.scss
index 1503bbc4ae..88f8e6ff8b 100644
--- a/packages/app/src/theme/themes/hyperdx/_tokens.scss
+++ b/packages/app/src/theme/themes/hyperdx/_tokens.scss
@@ -116,6 +116,17 @@
   --color-chart-warning-highlight: #f5c94d;
   --color-chart-error-highlight: #ffa090;
 
+  /* Visualization Range Selector (minimap viewports, brush ranges, etc.) */
+  --color-viz-range-handle: var(--mantine-color-dark-2);
+  --color-viz-range-handle-grip: rgb(255 255 255 / 45%);
+  --color-viz-range-border: var(--mantine-color-dark-3);
+  --color-viz-range-overlay: rgb(0 0 0 / 20%);
+  --color-viz-range-brush: rgb(100 149 237 / 25%);
+  --color-viz-range-brush-border: rgb(100 149 237 / 60%);
+
+  /* Shadows */
+  --shadow-drawer: -4px 0 24px rgb(0 0 0 / 25%);
+
   /* Mantine Overrides */
   --mantine-color-body: var(--color-bg-body) !important;
   --mantine-color-text: var(--color-text);
@@ -228,6 +239,17 @@
   --color-chart-warning-highlight: #f5c94d;
   --color-chart-error-highlight: #ffa090;
 
+  /* Visualization Range Selector (minimap viewports, brush ranges, etc.) */
+  --color-viz-range-handle: var(--mantine-color-gray-5);
+  --color-viz-range-handle-grip: rgb(255 255 255 / 80%);
+  --color-viz-range-border: var(--mantine-color-gray-4);
+  --color-viz-range-overlay: rgb(0 0 0 / 10%);
+  --color-viz-range-brush: rgb(66 105 208 / 20%);
+  --color-viz-range-brush-border: rgb(66 105 208 / 50%);
+
+  /* Shadows */
+  --shadow-drawer: -4px 0 24px rgb(0 0 0 / 4%);
+
   /* Mantine Overrides */
   --mantine-color-body: var(--color-bg-body);
   --mantine-color-text: var(--color-text);