diff --git a/src/form/Range/Range.story.tsx b/src/form/Range/Range.story.tsx
index c53a3519..3407f288 100644
--- a/src/form/Range/Range.story.tsx
+++ b/src/form/Range/Range.story.tsx
@@ -5,7 +5,14 @@ import { debounce } from 'lodash';
 
 export default {
   title: 'Components/Form/Range',
-  component: Range
+  component: Range,
+  decorators: [
+    Story => (
+      <div className="bg-panel p-20">
+        <Story />
+      </div>
+    )
+  ]
 };
 
 export const Single = () => {
@@ -21,6 +28,20 @@ export const Single = () => {
   );
 };
 
+export const SingleShowHighlight = () => {
+  const [state, setState] = useState<number>(20);
+  return (
+    <RangeSingle
+      onChange={setState}
+      min={10}
+      max={50}
+      value={state}
+      className="w-[250px] mt-5"
+      showHighlight
+    />
+  );
+};
+
 export const SingleDisabled = () => {
   const [state, setState] = useState<number>(20);
   return (
diff --git a/src/form/Range/RangeDouble.tsx b/src/form/Range/RangeDouble.tsx
index 048295b7..fbdfd9bb 100644
--- a/src/form/Range/RangeDouble.tsx
+++ b/src/form/Range/RangeDouble.tsx
@@ -10,7 +10,7 @@ import React, {
 import { motion, useMotionValue } from 'framer-motion';
 import { RangeProps, RangeTooltip } from './RangeTooltip';
 import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
 import { RangeTheme } from './RangeTheme';
 
 export const RangeDouble: FC<RangeProps<[number, number]>> = ({
@@ -230,7 +230,9 @@ export const RangeDouble: FC<RangeProps<[number, number]>> = ({
         )}
       </motion.div>
       <div
-        className={theme.rangeHighlight}
+        className={cn(theme.rangeHighlight.base, {
+          [theme.rangeHighlight.disabled]: disabled
+        })}
         style={{
           width: `${maxPercentage - minPercentage}%`,
           marginLeft: `${minPercentage}%`
diff --git a/src/form/Range/RangeSingle.tsx b/src/form/Range/RangeSingle.tsx
index 71253b0b..d0d2d5b7 100644
--- a/src/form/Range/RangeSingle.tsx
+++ b/src/form/Range/RangeSingle.tsx
@@ -9,10 +9,17 @@ import React, {
 import { motion, useMotionValue } from 'framer-motion';
 import { RangeProps, RangeTooltip } from './RangeTooltip';
 import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
 import { RangeTheme } from './RangeTheme';
 
-export const RangeSingle: FC<RangeProps<number>> = ({
+export interface RangeSingleProps extends RangeProps<number> {
+  /**
+   * Display the highlight when true
+   */
+  showHighlight?: boolean;
+}
+
+export const RangeSingle: FC<RangeSingleProps> = ({
   disabled,
   style,
   handleClassName,
@@ -24,6 +31,7 @@ export const RangeSingle: FC<RangeProps<number>> = ({
   valueDisplay = 'hover',
   valueFormat = value => value.toLocaleString(),
   step = 1,
+  showHighlight = false,
   theme: customTheme
 }) => {
   const [currentValue, setCurrentValue] = useState<number>(value);
@@ -79,6 +87,7 @@ export const RangeSingle: FC<RangeProps<number>> = ({
   const [hovering, setHovering] = useState(false);
   const [focused, setFocused] = useState(false);
   const tooltipVisible = dragging || focused || hovering;
+  const maxPercentage = ((currentValue - min) / (max - min)) * 100;
 
   const theme: RangeTheme = useComponentTheme('range', customTheme);
 
@@ -133,6 +142,16 @@ export const RangeSingle: FC<RangeProps<number>> = ({
           valueFormat(currentValue)
         )}
       </motion.div>
+      {showHighlight && (
+        <div
+          className={cn(theme.rangeHighlight.base, {
+            [theme.rangeHighlight.disabled]: disabled
+          })}
+          style={{
+            width: `${maxPercentage}%`
+          }}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/form/Range/RangeTheme.ts b/src/form/Range/RangeTheme.ts
index 7977afa1..317f73f3 100644
--- a/src/form/Range/RangeTheme.ts
+++ b/src/form/Range/RangeTheme.ts
@@ -1,7 +1,10 @@
 export interface RangeTheme {
   base: string;
   drag: string;
-  rangeHighlight: string;
+  rangeHighlight: {
+    base: string;
+    disabled: string;
+  };
   disabled: string;
   inputWrapper: {
     base: string;
@@ -13,13 +16,16 @@ export interface RangeTheme {
 
 const baseTheme: RangeTheme = {
   base: 'relative box-border w-full h-0.5',
-  drag: 'absolute w-3.5 h-3.5 -left-[7px] -top-[7px] rounded-full',
+  drag: 'absolute w-4 h-4 -left-2 -top-2 rounded-full',
   inputWrapper: {
     base: 'cursor-pointer inline-block relative h-full w-full rounded-full',
     disabled: 'cursor-not-allowed'
   },
-  rangeHighlight: 'pointer-events-none h-0.5',
-  disabled: 'cursor-not-allowed opacity-60',
+  rangeHighlight: {
+    base: 'pointer-events-none h-0.5',
+    disabled: 'cursor-not-allowed'
+  },
+  disabled: 'cursor-not-allowed',
   input: 'absolute left-[-9999px]', // The hidden input used for keyboard controls
   tooltip:
     'absolute top-[-45px] -translate-x-2/4 whitespace-nowrap text-center left-2/4 rounded-lg p-2.5'
@@ -27,12 +33,24 @@ const baseTheme: RangeTheme = {
 
 export const rangeTheme: RangeTheme = {
   ...baseTheme,
-  base: [baseTheme.base, 'bg-surface'].join(' '),
+  base: [baseTheme.base, 'bg-surface light:bg-gray-200'].join(' '),
   inputWrapper: {
     ...baseTheme.inputWrapper,
-    base: [baseTheme.inputWrapper.base, 'bg-primary'].join(' ')
+    base: [
+      baseTheme.inputWrapper.base,
+      'bg-primary-active hover:bg-primary-hover shadow-[0px_4px_4px_0px_rgba(0,0,0,0.20)]'
+    ].join(' '),
+    disabled: [
+      baseTheme.inputWrapper.disabled,
+      'bg-secondary-inactive hover:bg-secondary-inactive'
+    ].join(' ')
+  },
+  rangeHighlight: {
+    base: [baseTheme.rangeHighlight.base, 'bg-primary-active'].join(' '),
+    disabled: [baseTheme.rangeHighlight.disabled, 'bg-secondary-inactive'].join(
+      ' '
+    )
   },
-  rangeHighlight: [baseTheme.rangeHighlight, 'bg-primary'].join(' '),
   tooltip: [baseTheme.tooltip, 'text-surface-content bg-surface'].join(' ')
 };
 
@@ -46,10 +64,13 @@ export const legacyRangeTheme: RangeTheme = {
     baseTheme.drag,
     'top-[calc(-1_*_(var(--range-handle-size)_-_var(--range-track-size))_/_2)] left-[calc(-1_*_var(--range-handle-size)_/_2)] w-[var(--range-handle-size)] h-[var(--range-handle-size)] bg-[var(--range-handle-background)] rounded-[var(--range-handle-border-radius)]'
   ].join(' '),
-  rangeHighlight: [
-    baseTheme.rangeHighlight,
-    'h-[var(--range-track-size)] bg-[var(--range-track-active-background)]'
-  ].join(' '),
+  rangeHighlight: {
+    ...baseTheme.rangeHighlight,
+    base: [
+      baseTheme.rangeHighlight.base,
+      'h-[var(--range-track-size)] bg-[var(--range-track-active-background)]'
+    ].join(' ')
+  },
   tooltip: [
     baseTheme.tooltip,
     'rounded-[var(--border-radius-md)] [padding:_var(--spacing-md)] bg-[var(--tooltip-background)] text-[var(--tooltip-color)]'
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0a215c3a..6c164cee 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,16 +7,16 @@ export const colorPalette = {
   white: '#FFFFFF',
   black: '#000000',
   gray: {
-    100: '#F2F3F7',
-    200: '#E2E2EA',
-    300: '#C6CBD9',
-    400: '#9A9AAF',
-    500: '#7E7E8F',
-    600: '#656575',
-    700: '#535362',
-    800: '#2E2E3A',
-    900: '#262631',
-    950: '#16161E'
+    100: '#F7F7FA',
+    200: '#E6E6F0',
+    300: '#C9C9D6',
+    400: '#77778C',
+    500: '#5C5C73',
+    600: '#3D3D4D',
+    700: '#242433',
+    800: '#1E1E2E',
+    900: '#11111F',
+    950: '#02020F'
   },
   magenta: {
     100: '#FAE5F6',
@@ -276,7 +276,7 @@ const config: Config = {
           DEFAULT: colorPalette.charade,
           active: colorPalette.charade,
           hover: colorPalette.gray[700],
-          inactive: colorPalette.gray[800]
+          inactive: colorPalette.gray[600]
         },
         success: {
           DEFAULT: colorPalette.green[500],