diff --git a/frontend/src/Editor/Components/Checkbox.jsx b/frontend/src/Editor/Components/Checkbox.jsx
index d6f44dc9eb..47e82a7a12 100644
--- a/frontend/src/Editor/Components/Checkbox.jsx
+++ b/frontend/src/Editor/Components/Checkbox.jsx
@@ -11,9 +11,12 @@ export const Checkbox = function Checkbox({
   onComponentOptionChanged,
   onEvent,
 }) {
+  const [checked, setChecked] = React.useState(false);
   const label = component.definition.properties.label.value;
   const textColorProperty = component.definition.styles.textColor;
   const textColor = textColorProperty ? textColorProperty.value : '#000';
+  const checkboxColorProperty = component.definition.styles.checkboxColor;
+  const checkboxColor = checkboxColorProperty ? checkboxColorProperty.value : '#3c92dc';
   const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
   const disabledState = component.definition.styles?.disabledState?.value ?? false;
 
@@ -29,9 +32,10 @@ export const Checkbox = function Checkbox({
   }
 
   function toggleValue(e) {
-    const checked = e.target.checked;
-    onComponentOptionChanged(component, 'value', checked);
-    if (checked) {
+    const isChecked = e.target.checked;
+    setChecked(isChecked);
+    onComponentOptionChanged(component, 'value', isChecked);
+    if (isChecked) {
       onEvent('onCheck', { component });
     } else {
       onEvent('onUnCheck', { component });
@@ -55,6 +59,7 @@ export const Checkbox = function Checkbox({
           onClick={(e) => {
             toggleValue(e);
           }}
+          style={{ backgroundColor: checked ? `${checkboxColor}` : 'white' }}
         />
         <span className="form-check-label" style={{ color: textColor }}>
           {label}
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index c5e8b86ed9..a910573bd6 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -419,6 +419,7 @@ export const componentTypes = [
     },
     styles: {
       textColor: { type: 'color', displayName: 'Text Color' },
+      checkboxColor: { type: 'color', displayName: 'Checkbox Color' },
       visibility: { type: 'code', displayName: 'Visibility' },
       disabledState: { type: 'code', displayName: 'Disable' },
     },
@@ -434,6 +435,7 @@ export const componentTypes = [
       events: [],
       styles: {
         textColor: { value: '#000' },
+        checkboxColor: { value: '#3c92dc' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
       },