diff --git a/frontend/src/Editor/Components/NumberInput.jsx b/frontend/src/Editor/Components/NumberInput.jsx
index 966509e99c..599b46ac1b 100644
--- a/frontend/src/Editor/Components/NumberInput.jsx
+++ b/frontend/src/Editor/Components/NumberInput.jsx
@@ -9,7 +9,7 @@ export const NumberInput = function NumberInput({
   darkMode,
   fireEvent,
 }) {
-  const { visibility, borderRadius, borderColor } = styles;
+  const { visibility, borderRadius, borderColor, backgroundColor } = styles;
 
   const textColor = darkMode && ['#232e3c', '#000000ff'].includes(styles.textColor) ? '#fff' : styles.textColor;
 
@@ -43,6 +43,15 @@ export const NumberInput = function NumberInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
+  const computedStyles = {
+    height,
+    display: visibility ? '' : 'none',
+    borderRadius: `${borderRadius}px`,
+    borderColor,
+    color: textColor,
+    backgroundColor: darkMode && ['#ffffff', '#ffffffff'].includes(backgroundColor) ? '#000000' : backgroundColor,
+  };
+
   return (
     <input
       disabled={styles.disabledState}
@@ -50,13 +59,7 @@ export const NumberInput = function NumberInput({
       type="number"
       className="form-control"
       placeholder={properties.placeholder}
-      style={{
-        height,
-        display: visibility ? '' : 'none',
-        borderRadius: `${borderRadius}px`,
-        borderColor,
-        color: textColor,
-      }}
+      style={computedStyles}
       value={value}
       data-cy={`draggable-widget-${String(component.name).toLowerCase()}`}
     />
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index df4c0289e4..00025a7a03 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -1100,6 +1100,10 @@ export const widgets = [
           schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
         },
       },
+      backgroundColor: {
+        type: 'color',
+        displayName: 'Background Color',
+      },
       borderColor: {
         type: 'color',
         displayName: 'Border Color',
@@ -1132,6 +1136,7 @@ export const widgets = [
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
         borderRadius: { value: '{{0}}' },
+        backgroundColor: { value: '#ffffffff' },
         borderColor: { value: '#fff' },
         textColor: { value: '#232e3c' },
       },
@@ -1220,7 +1225,7 @@ export const widgets = [
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
         borderRadius: { value: '{{0}}' },
-        backgroundColor: { value: '#fff' },
+        backgroundColor: { value: '#ffffff' },
       },
     },
   },