diff --git a/libs/hbb_common/protos/message.proto b/libs/hbb_common/protos/message.proto
index 273e7a6c5..f6c57b1e4 100644
--- a/libs/hbb_common/protos/message.proto
+++ b/libs/hbb_common/protos/message.proto
@@ -447,9 +447,9 @@ message PermissionInfo {
 
 enum ImageQuality {
   NotSet = 0;
-  Low = 50;
-  Balanced = 66;
-  Best = 100;
+  Low = 2;
+  Balanced = 3;
+  Best = 4;
 }
 
 message VideoCodecState {
diff --git a/src/client.rs b/src/client.rs
index ca5352ae4..d4cd44351 100644
--- a/src/client.rs
+++ b/src/client.rs
@@ -1005,17 +1005,17 @@ impl LoginConfigHandler {
         msg_out
     }
 
-    pub fn save_custom_image_quality(&mut self, custom_image_quality: i32) -> Message {
+    pub fn save_custom_image_quality(&mut self, image_quality: i32) -> Message {
         let mut misc = Misc::new();
         misc.set_option(OptionMessage {
-            custom_image_quality,
+            custom_image_quality: image_quality << 8,
             ..Default::default()
         });
         let mut msg_out = Message::new();
         msg_out.set_misc(misc);
         let mut config = self.load_config();
         config.image_quality = "custom".to_owned();
-        config.custom_image_quality = vec![custom_image_quality as _];
+        config.custom_image_quality = vec![image_quality as _];
         self.save_config(config);
         msg_out
     }
diff --git a/src/server/connection.rs b/src/server/connection.rs
index 77d41d4e0..46c730092 100644
--- a/src/server/connection.rs
+++ b/src/server/connection.rs
@@ -1114,13 +1114,15 @@ impl Connection {
     async fn update_option(&mut self, o: &OptionMessage) {
         log::info!("Option update: {:?}", o);
         if let Ok(q) = o.image_quality.enum_value() {
-            let mut image_quality = None;
+            let image_quality;
             if let ImageQuality::NotSet = q {
                 if o.custom_image_quality > 0 {
-                    image_quality = Some(o.custom_image_quality as _);
+                    image_quality = o.custom_image_quality;
+                } else {
+                    image_quality = ImageQuality::Balanced.value();
                 }
             } else {
-                image_quality = Some(q.value() as _)
+                image_quality = q.value();
             }
             video_service::VIDEO_QOS
                 .lock()
diff --git a/src/server/video_service.rs b/src/server/video_service.rs
index e3bdfa946..abc13a54c 100644
--- a/src/server/video_service.rs
+++ b/src/server/video_service.rs
@@ -52,6 +52,21 @@ lazy_static::lazy_static! {
     pub static ref VIDEO_QOS: Arc<Mutex<VideoQoS>> = Default::default();
 }
 
+trait Percent {
+    fn as_percent(&self) -> u32;
+}
+
+impl Percent for ImageQuality {
+    fn as_percent(&self) -> u32 {
+        match self {
+            ImageQuality::NotSet => 0,
+            ImageQuality::Low => 50,
+            ImageQuality::Balanced => 66,
+            ImageQuality::Best => 100,
+        }
+    }
+}
+
 pub struct VideoQoS {
     width: u32,
     height: u32,
@@ -93,8 +108,8 @@ impl Default for VideoQoS {
     fn default() -> Self {
         VideoQoS {
             fps: FPS,
-            user_image_quality: ImageQuality::Balanced.value() as _,
-            current_image_quality: ImageQuality::Balanced.value() as _,
+            user_image_quality: ImageQuality::Balanced.as_percent(),
+            current_image_quality: ImageQuality::Balanced.as_percent(),
             width: 0,
             height: 0,
             current_delay: 0,
@@ -147,13 +162,13 @@ impl VideoQoS {
             );
             self.state = current_state;
             self.debounce_count = 0;
-            self.update_quality();
+            self.refresh_quality();
         } else {
             self.debounce_count += 1;
         }
     }
 
-    fn update_quality(&mut self) {
+    fn refresh_quality(&mut self) {
         match self.state {
             DelayState::Normal => {
                 self.fps = FPS;
@@ -176,19 +191,15 @@ impl VideoQoS {
         self.updated = true;
     }
 
-    pub fn update_image_quality(&mut self, image_quality: Option<u32>) {
-        if let Some(image_quality) = image_quality {
-            if image_quality < 10 || image_quality > 200 {
-                self.current_image_quality = ImageQuality::Balanced.value() as _;
-            }
-            if self.current_image_quality != image_quality {
-                self.current_image_quality = image_quality;
-                let _ = self.generate_bitrate().ok();
-                self.updated = true;
-            }
-        } else {
-            self.current_image_quality = ImageQuality::Balanced.value() as _;
+    pub fn update_image_quality(&mut self, image_quality: i32) {
+        let image_quality = Self::convert_quality(image_quality) as _;
+        log::debug!("VideoQoS update_image_quality{}", image_quality);
+        if self.current_image_quality != image_quality {
+            self.current_image_quality = image_quality;
+            let _ = self.generate_bitrate().ok();
+            self.updated = true;
         }
+
         self.user_image_quality = self.current_image_quality;
     }
 
@@ -198,7 +209,7 @@ impl VideoQoS {
             bail!("Fail to generate_bitrate, width or height is not set");
         }
         if self.current_image_quality == 0 {
-            self.current_image_quality = ImageQuality::Balanced.value() as _;
+            self.current_image_quality = ImageQuality::Balanced.as_percent();
         }
 
         let base_bitrate = ((self.width * self.height) / 800) as u32;
@@ -227,6 +238,18 @@ impl VideoQoS {
     pub fn reset(&mut self) {
         *self = Default::default();
     }
+
+    pub fn convert_quality(q: i32) -> i32 {
+        if q == ImageQuality::Balanced.value() {
+            100 * 2 / 3
+        } else if q == ImageQuality::Low.value() {
+            100 / 2
+        } else if q == ImageQuality::Best.value() {
+            100
+        } else {
+            (q >> 8 & 0xFF) * 2
+        }
+    }
 }
 
 fn is_capturer_mag_supported() -> bool {
diff --git a/src/ui/header.tis b/src/ui/header.tis
index 98de03835..35a132c90 100644
--- a/src/ui/header.tis
+++ b/src/ui/header.tis
@@ -336,13 +336,13 @@ class Header: Reactor.Component {
 
 function handle_custom_image_quality() {
     var tmp = handler.get_custom_image_quality();
-    var bitrate = (tmp[0] || 100) / 2;
+    var bitrate = (tmp[0] || 50);
     msgbox("custom", "Custom Image Quality", "<div .form> \
           <div><input type=\"hslider\" style=\"width: 50%\" name=\"bitrate\" max=\"100\" min=\"10\" value=\"" + bitrate + "\"/ buddy=\"bitrate-buddy\"><b #bitrate-buddy>x</b>% Bitrate</div> \
       </div>", function(res=null) {
         if (!res) return;
         if (!res.bitrate) return;
-        handler.save_custom_image_quality(res.bitrate * 2);
+        handler.save_custom_image_quality(res.bitrate);
         toggleMenuState();
       });
 }