diff --git a/src-tauri/src/ambient_light/config.rs b/src-tauri/src/ambient_light/config.rs
index c00972d..922c5e9 100644
--- a/src-tauri/src/ambient_light/config.rs
+++ b/src-tauri/src/ambient_light/config.rs
@@ -33,6 +33,16 @@ pub struct ColorCalibration {
     b: f32,
 }
 
+impl ColorCalibration {
+    pub fn to_bytes(&self) -> [u8; 3] {
+        [
+            (self.r * 255.0) as u8,
+            (self.g * 255.0) as u8,
+            (self.b * 255.0) as u8,
+        ]
+    }
+}
+
 #[derive(Clone, Serialize, Deserialize, Debug)]
 pub struct LedStripConfigGroup {
     pub strips: Vec<LedStripConfig>,
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 6841223..2ea43f9 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -181,6 +181,12 @@ async fn set_color_calibration(calibration: ColorCalibration) -> Result<(), Stri
         })
 }
 
+#[tauri::command]
+async fn read_config() -> ambient_light::LedStripConfigGroup {
+    let config_manager = ambient_light::ConfigManager::global().await;
+    config_manager.configs().await
+}
+
 #[tokio::main]
 async fn main() {
     env_logger::init();
@@ -204,6 +210,7 @@ async fn main() {
             move_strip_part,
             reverse_led_strip_part,
             set_color_calibration,
+            read_config,
         ])
         .register_uri_scheme_protocol("ambient-light", move |_app, request| {
             let response = ResponseBuilder::new().header("Access-Control-Allow-Origin", "*");
diff --git a/src-tauri/src/rpc/mqtt.rs b/src-tauri/src/rpc/mqtt.rs
index 819e270..98e57b7 100644
--- a/src-tauri/src/rpc/mqtt.rs
+++ b/src-tauri/src/rpc/mqtt.rs
@@ -5,10 +5,13 @@ use std::time::Duration;
 use time::{format_description, OffsetDateTime};
 use tokio::{sync::OnceCell, task};
 
+use crate::ambient_light::{ColorCalibration, ConfigManager};
+
 const DISPLAY_TOPIC: &'static str = "display-ambient-light/display";
 const DESKTOP_TOPIC: &'static str = "display-ambient-light/desktop";
 const DISPLAY_BRIGHTNESS_TOPIC: &'static str = "display-ambient-light/board/brightness";
 const BOARD_SEND_CMD: &'static str = "display-ambient-light/board/cmd";
+const COLOR_CALIBRATION: &'static str = "display-ambient-light/desktop/color-calibration";
 
 pub struct MqttRpc {
     client: mqtt::AsyncClient,
@@ -165,6 +168,7 @@ impl MqttRpc {
         // self.subscribe_board()?;
         // self.subscribe_display()?;
         self.broadcast_desktop_online();
+        Self::publish_color_calibration_worker();
         anyhow::Ok(())
     }
 
@@ -182,6 +186,31 @@ impl MqttRpc {
             .map_err(|err| anyhow::anyhow!("subscribe board failed. {:?}", err))
             .map(|_| ())
     }
+    fn publish_color_calibration_worker() {
+        tokio::spawn(async move {
+            let mqtt = Self::global().await;
+            let config_manager = ConfigManager::global().await;
+            let mut config_receiver = config_manager.clone_config_update_receiver();
+
+            let config = config_manager.configs().await;
+            if let Err(err) = mqtt
+                .publish_color_calibration(config.color_calibration)
+                .await
+            {
+                warn!("can not publish color calibration. {}", err);
+            }
+
+            while config_receiver.changed().await.is_ok() {
+                let config = config_receiver.borrow().clone();
+                if let Err(err) = mqtt
+                    .publish_color_calibration(config.color_calibration)
+                    .await
+                {
+                    warn!("can not publish color calibration. {}", err);
+                }
+            }
+        });
+    }
 
     fn broadcast_desktop_online(&self) {
         let client = self.client.to_owned();
@@ -238,4 +267,15 @@ impl MqttRpc {
             .await
             .map_err(|error| anyhow::anyhow!("mqtt publish failed. {}", error))
     }
+
+    pub async fn publish_color_calibration(&self, payload: ColorCalibration) -> anyhow::Result<()> {
+        self.client
+            .publish(mqtt::Message::new(
+                COLOR_CALIBRATION,
+                payload.to_bytes(),
+                mqtt::QOS_1,
+            ))
+            .await
+            .map_err(|error| anyhow::anyhow!("mqtt publish color calibration failed. {}", error))
+    }
 }
diff --git a/src/App.tsx b/src/App.tsx
index cd629d7..aff76c9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,23 @@
 import { Routes, Route } from '@solidjs/router';
 import { LedStripConfiguration } from './components/led-strip-configuration/led-strip-configuration';
 import { WhiteBalance } from './components/white-balance/white-balance';
+import { createEffect } from 'solid-js';
+import { invoke } from '@tauri-apps/api';
+import { setLedStripStore } from './stores/led-strip.store';
+import { LedStripConfigContainer } from './models/led-strip-config';
 
 function App() {
+  createEffect(() => {
+    invoke<LedStripConfigContainer>('read_config').then((config) => {
+      console.log('read config', config);
+      setLedStripStore({
+        strips: config.strips,
+        mappers: config.mappers,
+        colorCalibration: config.color_calibration,
+      });
+    });
+  });
+
   return (
     <div>
       <div>