diff --git a/frontend/src/Editor/Components/verticalDivider.jsx b/frontend/src/Editor/Components/verticalDivider.jsx
index dbbe87a43d..66922be921 100644
--- a/frontend/src/Editor/Components/verticalDivider.jsx
+++ b/frontend/src/Editor/Components/verticalDivider.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
-export const VerticalDivider = function Divider({ styles, height, width, dataCy }) {
+export const VerticalDivider = function Divider({ styles, height, width, dataCy, darkMode }) {
   const { visibility, dividerColor } = styles;
-  const color = dividerColor ?? '#E7E8EA';
+  const color =
+    dividerColor === '' || ['#000', '#000000'].includes(dividerColor) ? (darkMode ? '#fff' : '#000') : dividerColor;
 
   return (
     <div
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index 0a892c74a6..04fd008fc3 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -4414,7 +4414,7 @@ export const widgets = [
       events: [],
       styles: {
         visibility: { value: '{{true}}' },
-        dividerColor: { value: '' },
+        dividerColor: { value: '#000000' },
       },
     },
   },