diff --git a/packages/ringcentral-widgets/components/SettingsPanel/index.js b/packages/ringcentral-widgets/components/SettingsPanel/index.js
index a88ab97b20..00bb6f5c7b 100644
--- a/packages/ringcentral-widgets/components/SettingsPanel/index.js
+++ b/packages/ringcentral-widgets/components/SettingsPanel/index.js
@@ -158,6 +158,7 @@ export default function SettingsPanel({
       </IconLine>
     ) :
     null;
+  // if the Switch component is disabled then the text to describe it will be a disabled color.
   const autoLog = showAutoLog ? (
     <IconLine
       icon={
@@ -168,7 +169,9 @@ export default function SettingsPanel({
         />
       }
     >
-      {i18n.getString('autoLogCalls', currentLocale)}
+      <span className={classnames(disableAutoLogEnabled && styles.disableText)}>
+        {i18n.getString('autoLogCalls', currentLocale)}
+      </span>
     </IconLine>
   ) :
     null;
diff --git a/packages/ringcentral-widgets/components/SettingsPanel/styles.scss b/packages/ringcentral-widgets/components/SettingsPanel/styles.scss
index 4b6c042eb8..7874b57ee2 100644
--- a/packages/ringcentral-widgets/components/SettingsPanel/styles.scss
+++ b/packages/ringcentral-widgets/components/SettingsPanel/styles.scss
@@ -70,3 +70,7 @@
   padding: 0 10px;
   margin-bottom: -2px;
 }
+
+.disableText{
+  color: $smoke;
+}
diff --git a/packages/ringcentral-widgets/components/Switch/styles.scss b/packages/ringcentral-widgets/components/Switch/styles.scss
index 0c7d8ff6d9..f839e3c187 100644
--- a/packages/ringcentral-widgets/components/Switch/styles.scss
+++ b/packages/ringcentral-widgets/components/Switch/styles.scss
@@ -12,6 +12,8 @@ $slider-size: #{$switch-height - 2 * $switch-padding};
   width: $switch-width;
   height: $switch-height;
   vertical-align: middle;
+  background-color: white;
+  border-radius: $switch-height;
 }
 
 /* Hide default HTML checkbox */
@@ -46,8 +48,12 @@ $slider-size: #{$switch-height - 2 * $switch-padding};
 }
 
 .disable {
+  .slider {
+    opacity: 0.4;
+    background-color: $smoke;
+  }
   input:checked + .slider {
-    background-color: #ccc;
+    background-color: $rc-blue;
   }
   input:focus + .slider {
     box-shadow: 0 0 1px #ccc;