diff --git a/src-tauri/src/ambient_light/publisher.rs b/src-tauri/src/ambient_light/publisher.rs
index 2827ad7..f18e5f3 100644
--- a/src-tauri/src/ambient_light/publisher.rs
+++ b/src-tauri/src/ambient_light/publisher.rs
@@ -57,7 +57,11 @@ impl LedColorsPublisher {
         let internal_tasks_version = self.inner_tasks_version.clone();
 
         tokio::spawn(async move {
-            let colors = screenshot_manager::get_display_colors(display_id, &sample_points, bound_scale_factor);
+            let colors = screenshot_manager::get_display_colors(
+                display_id,
+                &sample_points,
+                bound_scale_factor,
+            );
 
             if let Err(err) = colors {
                 warn!("Failed to get colors: {}", err);
@@ -86,7 +90,11 @@ impl LedColorsPublisher {
 
                 // log::info!("tick: {}ms", start.elapsed().as_millis());
                 start = tokio::time::Instant::now();
-                let colors = screenshot_manager::get_display_colors(display_id, &sample_points, bound_scale_factor);
+                let colors = screenshot_manager::get_display_colors(
+                    display_id,
+                    &sample_points,
+                    bound_scale_factor,
+                );
 
                 if let Err(err) = colors {
                     warn!("Failed to get colors: {}", err);
@@ -117,14 +125,18 @@ impl LedColorsPublisher {
         });
     }
 
-    fn start_all_colors_worker(&self, display_ids: Vec<u32>, mappers: Vec<SamplePointMapper>, mut display_colors_rx: broadcast::Receiver<(u32, Vec<u8>)>) {
+    fn start_all_colors_worker(
+        &self,
+        display_ids: Vec<u32>,
+        mappers: Vec<SamplePointMapper>,
+        mut display_colors_rx: broadcast::Receiver<(u32, Vec<u8>)>,
+    ) {
         let sorted_colors_tx = self.sorted_colors_tx.clone();
         let colors_tx = self.colors_tx.clone();
         log::debug!("start all_colors_worker");
 
         tokio::spawn(async move {
             for _ in 0..10 {
-
                 let sorted_colors_tx = sorted_colors_tx.write().await;
                 let colors_tx = colors_tx.write().await;
 
@@ -212,13 +224,12 @@ impl LedColorsPublisher {
 
                 let configs = configs.unwrap();
 
-
                 let mut inner_tasks_version = inner_tasks_version.write().await;
                 *inner_tasks_version = inner_tasks_version.overflowing_add(1).0;
                 drop(inner_tasks_version);
 
-
-                let (display_colors_tx, display_colors_rx) = broadcast::channel::<(u32, Vec<u8>)>(8);
+                let (display_colors_tx, display_colors_rx) =
+                    broadcast::channel::<(u32, Vec<u8>)>(8);
 
                 for sample_point_group in configs.sample_point_groups.clone() {
                     let display_id = sample_point_group.display_id;
@@ -343,7 +354,11 @@ impl LedColorsPublisher {
 
                     let bound_scale_factor = screenshot.bound_scale_factor;
 
-                    let colors_config = DisplaySamplePointGroup { display_id, points, bound_scale_factor };
+                    let colors_config = DisplaySamplePointGroup {
+                        display_id,
+                        points,
+                        bound_scale_factor,
+                    };
 
                     colors_configs.push(colors_config);
                 }
diff --git a/src/App.tsx b/src/App.tsx
index f61fe7e..cd629d7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { Routes, Route } from '@solidjs/router';
 import { LedStripConfiguration } from './components/led-strip-configuration/led-strip-configuration';
+import { WhiteBalance } from './components/white-balance/white-balance';
 
 function App() {
   return (
@@ -10,7 +11,7 @@ function App() {
       </div>
       <Routes>
         <Route path="/led-strips-configuration" component={LedStripConfiguration} />
-        <Route path="/white-balance" component={LedStripConfiguration} />
+        <Route path="/white-balance" component={WhiteBalance} />
       </Routes>
     </div>
   );
diff --git a/src/components/white-balance/color-slider.tsx b/src/components/white-balance/color-slider.tsx
new file mode 100644
index 0000000..74daec1
--- /dev/null
+++ b/src/components/white-balance/color-slider.tsx
@@ -0,0 +1,17 @@
+import { Component, JSX } from 'solid-js';
+
+type Props = {} & JSX.HTMLAttributes<HTMLInputElement>;
+
+export const ColorSlider: Component<Props> = (props) => {
+  return (
+    <input
+      type="range"
+      value="50"
+      {...props}
+      class={
+        'w-full h-2 bg-gradient-to-r rounded-lg appearance-none cursor-pointer dark:bg-gray-700 drop-shadow ' +
+        props.class
+      }
+    />
+  );
+};
diff --git a/src/components/white-balance/test-colors-bg.tsx b/src/components/white-balance/test-colors-bg.tsx
new file mode 100644
index 0000000..440aad1
--- /dev/null
+++ b/src/components/white-balance/test-colors-bg.tsx
@@ -0,0 +1,99 @@
+import { Component, createSignal } from 'solid-js';
+
+const ColorItem: Component<{
+  color: string;
+  position: [number, number];
+  size?: [number, number];
+  onClick?: (color: string) => void;
+}> = (props) => {
+  return (
+    <div
+      style={{
+        background: props.color,
+        'grid-row-start': props.position[0],
+        'grid-column-start': props.position[1],
+        'grid-row-end': props.position[0] + (props.size ? props.size[0] : 1),
+        'grid-column-end': props.position[1] + (props.size ? props.size[1] : 1),
+        cursor: props.onClick ? 'pointer' : 'default',
+      }}
+      onClick={() => {
+        props.onClick?.(props.color);
+      }}
+    />
+  );
+};
+
+export const TestColorsBg: Component = () => {
+  const [singleColor, setSingleColor] = createSignal<string | null>(null);
+
+  return (
+    <>
+      <section
+        class="grid grid-cols-[8] grid-rows-[8] h-full w-full"
+        classList={{
+          hidden: singleColor() !== null,
+        }}
+      >
+        <ColorItem color="#ff0000" position={[1, 1]} onClick={setSingleColor} />
+        <ColorItem color="#ffff00" position={[1, 2]} onClick={setSingleColor} />
+        <ColorItem color="#00ff00" position={[1, 3]} onClick={setSingleColor} />
+        <ColorItem color="#00ffff" position={[1, 4]} onClick={setSingleColor} />
+        <ColorItem color="#0000ff" position={[1, 5]} onClick={setSingleColor} />
+        <ColorItem color="#ff00ff" position={[1, 6]} onClick={setSingleColor} />
+        <ColorItem color="#ffffff" position={[1, 7]} onClick={setSingleColor} />
+        <ColorItem color="#000000" position={[1, 8]} onClick={setSingleColor} />
+        <ColorItem color="#ffff00" position={[2, 1]} onClick={setSingleColor} />
+        <ColorItem color="#00ff00" position={[3, 1]} onClick={setSingleColor} />
+        <ColorItem color="#00ffff" position={[4, 1]} onClick={setSingleColor} />
+        <ColorItem color="#0000ff" position={[5, 1]} onClick={setSingleColor} />
+        <ColorItem color="#ff00ff" position={[6, 1]} onClick={setSingleColor} />
+        <ColorItem color="#ffffff" position={[7, 1]} onClick={setSingleColor} />
+        <ColorItem color="#000000" position={[8, 1]} onClick={setSingleColor} />
+        <ColorItem color="#ffffff" position={[2, 8]} onClick={setSingleColor} />
+        <ColorItem color="#ff00ff" position={[3, 8]} onClick={setSingleColor} />
+        <ColorItem color="#0000ff" position={[4, 8]} onClick={setSingleColor} />
+        <ColorItem color="#00ffff" position={[5, 8]} onClick={setSingleColor} />
+        <ColorItem color="#00ff00" position={[6, 8]} onClick={setSingleColor} />
+        <ColorItem color="#ffff00" position={[7, 8]} onClick={setSingleColor} />
+        <ColorItem color="#ff0000" position={[8, 8]} onClick={setSingleColor} />
+        <ColorItem color="#ffffff" position={[8, 2]} onClick={setSingleColor} />
+        <ColorItem color="#ff00ff" position={[8, 3]} onClick={setSingleColor} />
+        <ColorItem color="#0000ff" position={[8, 4]} onClick={setSingleColor} />
+        <ColorItem color="#00ffff" position={[8, 5]} onClick={setSingleColor} />
+        <ColorItem color="#00ff00" position={[8, 6]} onClick={setSingleColor} />
+        <ColorItem color="#ffff00" position={[8, 7]} onClick={setSingleColor} />
+      </section>
+      <section
+        class="grid grid-cols-[8] grid-rows-[8] h-full w-full"
+        classList={{
+          hidden: singleColor() === null,
+        }}
+      >
+        <ColorItem
+          color={singleColor()!}
+          position={[1, 1]}
+          size={[1, 7]}
+          onClick={() => setSingleColor(null)}
+        />
+        <ColorItem
+          color={singleColor()!}
+          position={[8, 2]}
+          size={[1, 7]}
+          onClick={() => setSingleColor(null)}
+        />
+        <ColorItem
+          color={singleColor()!}
+          position={[2, 1]}
+          size={[7, 1]}
+          onClick={() => setSingleColor(null)}
+        />
+        <ColorItem
+          color={singleColor()!}
+          position={[1, 8]}
+          size={[7, 1]}
+          onClick={() => setSingleColor(null)}
+        />
+      </section>
+    </>
+  );
+};
diff --git a/src/components/white-balance/white-balance.tsx b/src/components/white-balance/white-balance.tsx
new file mode 100644
index 0000000..a853226
--- /dev/null
+++ b/src/components/white-balance/white-balance.tsx
@@ -0,0 +1,43 @@
+import { ColorSlider } from './color-slider';
+import { TestColorsBg } from './test-colors-bg';
+
+export const WhiteBalance = () => {
+  const exit = () => {
+    window.history.back();
+  };
+
+  return (
+    <section class="select-none">
+      <div class="absolute top-0 left-0 right-0 bottom-0">
+        <TestColorsBg />
+      </div>
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 max-w-lg bg-stone-200 p-5 rounded-xl drop-shadow">
+        <label class="flex items-center gap-2">
+          <span class="w-3 block">R:</span>
+          <ColorSlider class="from-cyan-500 to-red-500" />
+        </label>
+        <label class="flex items-center gap-2">
+          <span class="w-3 block">G:</span>
+          <ColorSlider class="from-pink-500 to-green-500" />
+        </label>
+        <label class="flex items-center gap-2">
+          <span class="w-3 block">B:</span>
+          <ColorSlider class="from-yellow-500 to-blue-500" />
+        </label>
+        <label class="flex items-center gap-2">
+          <span class="w-3 block">W:</span>
+          <ColorSlider class="from-yellow-50 to-cyan-50" />
+        </label>
+        <button
+          class="absolute -right-4 -top-4 rounded-full aspect-square bg-stone-300 p-1 shadow border border-stone-400"
+          onClick={exit}
+        >
+          X
+        </button>
+        <button class="absolute -right-4 -bottom-4 rounded-full aspect-square bg-stone-300 p-1 shadow border border-stone-400">
+          R
+        </button>
+      </div>
+    </section>
+  );
+};