diff --git a/src/component/product/ProductActive.jsx b/src/component/product/ProductActive.jsx
index 41d35ca..3f38495 100644
--- a/src/component/product/ProductActive.jsx
+++ b/src/component/product/ProductActive.jsx
@@ -5,6 +5,15 @@ import GeneralTab from "./settingsTab/GeneralTab";
 
 
 export default function ProductActive(){
+       const settingsObject = {
+            home_tab: { title: 'Home Page', controls: 'home', active: 'active show' },
+            footer_tab: { title: 'Footer', controls: 'footer', active: '' },
+            about_tab: { title: 'About Page', controls: 'about', active: '' },
+            contact_tab: { title: 'Contact Page', controls: 'contact', active: '' },
+            social_tab: { title: 'Socials', controls: 'social', active: '' },
+            template_tab: { title: 'Template', controls: 'template', active: '' },
+            color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '' },
+            };
 
     return(
         <>
@@ -42,56 +51,29 @@ export default function ProductActive(){
                 <div className="card-body">
                     <div className="tab tab-vertical">
                         <ul className="nav nav-tabs" role="tablist">
-                            <li className="nav-item">
-                                <a className="nav-link active show" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">General</a>
-                            </li>
-                            <li className="nav-item">
-                                <a className="nav-link" id="home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home Page</a>
-                            </li>
-                            <li className="nav-item">
-                                <a className="nav-link" id="footer-tab" data-bs-toggle="pill" data-bs-target="#footer" type="button" role="tab" aria-controls="footer" aria-selected="false">Footer</a>
-                            </li>
-                            <li className="nav-item">
-                                <a className="nav-link" id="about-tab" data-bs-toggle="pill" data-bs-target="#about" type="button" role="tab" aria-controls="about" aria-selected="false">About Page</a>
-                            </li>
-                           <li className="nav-item">
-                                <a className="nav-link" id="contact-tab" data-bs-toggle="pill" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="true">Contact Page</a>
-                            </li>
-                            <li className="nav-item">
-                                <a className="nav-link" id="social-tab" data-bs-toggle="pill" data-bs-target="#social" type="button" role="tab" aria-controls="social" aria-selected="false">Socials</a>
-                            </li>
-                            <li className="nav-item">
-                                <a className="nav-link" id="template-tab" data-bs-toggle="pill" data-bs-target="#template" type="button" role="tab" aria-controls="template" aria-selected="false">Template</a>
-                            </li>
-                            <li className="nav-item">
-                                <a className="nav-link" id="color-scheme-tab" data-bs-toggle="pill" data-bs-target="#color-scheme" type="button" role="tab" aria-controls="color-scheme" aria-selected="false">Color Scheme</a>
-                            </li>
+                            <>
+                                {Object.entries(settingsObject).map(([key, value]) => (
+                                    <li className="nav-item">
+                                      <a className={`nav-link ${value.active}`}
+                                         id={key} data-bs-toggle="pill"
+                                         data-bs-target={`#${value.controls}`}
+                                         type="button" role="tab"
+                                         aria-controls={value.controls}
+                                         aria-selected="true">{value.title}</a>
+                                    </li>
+                                ))}
+                             </>
                         </ul>
                         <div className="tab-content">
-                            <div className="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
-                                <GeneralTab name='General' />
-                            </div>
-                            <div className="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
-                                <GeneralTab name='Home Page' />
-                            </div>
-                            <div className="tab-pane fade" id="footer" role="tabpanel" aria-labelledby="footer-tab">
-                                <GeneralTab name='Footer' />
-                            </div>
-                            <div className="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
-                                <GeneralTab name='About Page' />
-                            </div>
-                            <div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
-                                <GeneralTab name='Contact Page' />
-                            </div>
-                            <div className="tab-pane fade" id="social" role="tabpanel" aria-labelledby="social-tab">
-                                <GeneralTab name='Socials' />
-                            </div>
-                            <div className="tab-pane fade" id="template" role="tabpanel" aria-labelledby="template-tab">
-                                <GeneralTab name='Template' />
-                            </div>
-                            <div className="tab-pane fade" id="color-scheme" role="tabpanel" aria-labelledby="color-scheme-tab">
-                                <GeneralTab name='Color Scheme' />
-                            </div>
+                            <>
+                                {Object.entries(settingsObject).map(([key, value]) => (
+                                    <div className={`tab-pane fade  ${value.active}`}
+                                         id={value.controls} role="tabpanel"
+                                         aria-labelledby={key}>
+                                         <GeneralTab name={value.title} />
+                                    </div>
+                                ))}
+                            </>
                         </div>
                     </div>
                 </div>
diff --git a/src/component/product/settingsTab/GeneralTab.jsx b/src/component/product/settingsTab/GeneralTab.jsx
index 3003619..41b345d 100644
--- a/src/component/product/settingsTab/GeneralTab.jsx
+++ b/src/component/product/settingsTab/GeneralTab.jsx
@@ -3,7 +3,7 @@ import React from 'react'
 export default function GeneralTab({name='Full Name'}) {
   return (
     <div className="page-account-form">
-        <div className="p-4">
+        <div className="p-0">
             <form>
                 <h4>{name}</h4>
                 <div className="form-row">