diff --git a/src/component/product/settingsTab/ColorStyleConfigure.jsx b/src/component/product/settingsTab/ColorStyleConfigure.jsx
new file mode 100644
index 0000000..54822a2
--- /dev/null
+++ b/src/component/product/settingsTab/ColorStyleConfigure.jsx
@@ -0,0 +1,6 @@
+const  ColorStyleConfigure =()=>{
+
+    return <>COLOR CONFIG</>
+}
+
+export default  ColorStyleConfigure
\ No newline at end of file
diff --git a/src/component/product/settingsTab/GeneralTab.jsx b/src/component/product/settingsTab/GeneralTab.jsx
index 9bf5c66..9133e98 100644
--- a/src/component/product/settingsTab/GeneralTab.jsx
+++ b/src/component/product/settingsTab/GeneralTab.jsx
@@ -7,6 +7,7 @@ import {IoMdArrowDropdown} from 'react-icons/io';
 import queryKeys from '../../../services/queryKeys';
 import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder';
 import URLConfiguration from "./URLConfiguration";
+import ColorStyleConfigure from "./ColorStyleConfigure";
 
 const GeneralTab = memo(({
                              name = 'Full Name',
@@ -117,7 +118,9 @@ const GeneralTab = memo(({
                                     {(tabKey === 'url_config_tab') && <URLConfiguration name={name} data={sortedData}
                                                                                         isCustom={isCustom}
                                                                                         productData={productData}/>}
-                                    {(tabKey==='color_scheme_tab')} && <>This is Color Tab</>}
+                                    {(tabKey === 'color_scheme_tab') && <ColorStyleConfigure name={name} data={sortedData}
+                                                                                             isCustom={isCustom}
+                                                                                             productData={productData}/>}
                                 </>
                                 :
                                 <div className="page-account-form">