diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx
index 8f1c51ce0f..7b712a9249 100644
--- a/frontend/src/Editor/Components/TextInput.jsx
+++ b/frontend/src/Editor/Components/TextInput.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 export const TextInput = function TextInput({
   height,
@@ -23,6 +23,7 @@ export const TextInput = function TextInput({
     borderRadius: `${styles.borderRadius}px`,
     color: darkMode && styles.textColor === '#000' ? '#fff' : styles.textColor,
     borderColor: styles.borderColor,
+    backgroundColor: darkMode && ['#fff'].includes(styles.backgroundColor) ? '#232e3c' : styles.backgroundColor,
   };
 
   useEffect(() => {
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index 00025a7a03..a07132e8a0 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -956,6 +956,11 @@ export const widgets = [
         displayName: 'Text Color',
         validation: { schema: { type: 'string' } },
       },
+      backgroundColor: {
+        type: 'color',
+        displayName: 'Background Color',
+        validation: { schema: { type: 'string' } },
+      },
       borderColor: {
         type: 'color',
         displayName: 'Border Color',
@@ -1029,6 +1034,7 @@ export const widgets = [
         borderRadius: { value: '{{0}}' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
+        backgroundColor: { value: '#fff' },
       },
     },
   },