diff --git a/Includes/Modules/CountdownTimer/assets/src/components/DesignTab.js b/Includes/Modules/CountdownTimer/assets/src/components/DesignTab.js
index 934571a6..74bffcbf 100644
--- a/Includes/Modules/CountdownTimer/assets/src/components/DesignTab.js
+++ b/Includes/Modules/CountdownTimer/assets/src/components/DesignTab.js
@@ -21,28 +21,36 @@ function DesignTab( props ) {
     noop,
     options,
     handleSelect,
+    undoHandler,
+    showUndoIcon
   } = props;
 
   return (
     <Fragment>
       <SettingsSection>
         <ColourPicker
+          undoHandler={undoHandler}
           name={"widget_background_color"}
           fieldValue={formData.widget_background_color}
+          showUndoIcon={showUndoIcon?.widget_background_color}
           changeHandler={onFieldChange}
           title={__("Widget Background Color", "storegrowth-sales-booster")}
         />
 
         <ColourPicker
+          undoHandler={undoHandler}
           name={"border_color"}
           fieldValue={formData.border_color}
+          showUndoIcon={showUndoIcon?.border_color}
           changeHandler={onFieldChange}
           title={__("Border Color", "storegrowth-sales-booster")}
         />
 
         <ColourPicker
+          undoHandler={undoHandler}
           name={"heading_text_color"}
           fieldValue={formData.heading_text_color}
+          showUndoIcon={showUndoIcon?.heading_text_color}
           changeHandler={onFieldChange}
           title={__("Heading Text Color", "storegrowth-sales-booster")}
         />
@@ -53,20 +61,11 @@ function DesignTab( props ) {
         />
       </SettingsSection>
 
-      <Templates formData={ formData } setFormData={ setFormData } />
-
-      {/*<Form.Item label="Theme" labelAlign="left">*/}
-      {/*  <div className="sgsb-countdown-theme">*/}
-      {/*    {options.map((option, index) => (*/}
-      {/*      <Selector*/}
-      {/*        key={index}*/}
-      {/*        option={option}*/}
-      {/*        onSelect={() => handleSelect(option.theme)}*/}
-      {/*        isSelected={option.theme === formData.selected_theme}*/}
-      {/*      />*/}
-      {/*    ))}*/}
-      {/*  </div>*/}
-      {/*</Form.Item>*/}
+      <Templates
+        formData={ formData }
+        setFormData={ setFormData }
+        showUndoIcon={ showUndoIcon }
+      />
     </Fragment>
   );
 }
diff --git a/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js b/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js
index 7b9fe2b0..bffc7fb2 100644
--- a/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js
+++ b/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js
@@ -56,11 +56,6 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) {
     ...initialSalesCountdownData,
   });
 
-  const [showUndo, setShowUndo] = useState( false );
-  const [undoData, setUndoData] = useState({
-    ...initialSalesCountdownData,
-  });
-
   const onFormReset = () => {
     setFormData({ ...initialSalesCountdownData });
     setShowUndo( false );
@@ -138,14 +133,40 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) {
     onFieldChange("selected_theme", theme);
   };
 
+  const [showUndo, setShowUndo] = useState({
+    border_color            : false,
+    heading_text_color      : false,
+    widget_background_color : false
+  });
+
+  const [undoData, setUndoData] = useState({
+    ...initialSalesCountdownData,
+  });
+
+  const colorKeyStack = [
+    'border_color',
+    'heading_text_color',
+    'widget_background_color'
+  ];
+
   const onFieldChange = (key, value) => {
     setFormData({ ...formData, [key]: value });
-    setShowUndo( true );
+    if ( colorKeyStack?.includes( key ) ) {
+      setShowUndo({ ...showUndo, [key]: true });
+    }
   };
 
-  const onUndoClick = () => {
-    setShowUndo( false );
-    setFormData({ ...undoData });
+  const onUndoClick = ( key ) => {
+    if ( colorKeyStack?.includes( key ) ) {
+      setShowUndo({
+        ...showUndo,
+        [key]: false,
+      });
+      setFormData({
+        ...formData,
+        [key]: undoData?.[key],
+      });
+    }
   };
 
   const noop = () => {};
@@ -181,6 +202,8 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) {
       title: __("Design", "storegrowth-sales-booster"),
       panel: (
         <DesignTab
+          showUndoIcon={ showUndo }
+          undoHandler={ onUndoClick }
           formData={ formData }
           setFormData={ setFormData }
           onFieldChange={ onFieldChange }
@@ -205,8 +228,6 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) {
         <PanelRow>
           <PanelSettings
             tabPanels={tabPanels}
-            showUndoIcon={showUndo}
-            undoHandler={onUndoClick}
             changeHandler={changeTab}
             activeTab={tabName ? tabName : "general"}
             colSpan={showPreview && tabName ? 12 : 24}
diff --git a/Includes/Modules/CountdownTimer/assets/src/components/Templates.js b/Includes/Modules/CountdownTimer/assets/src/components/Templates.js
index c6530632..f899875e 100644
--- a/Includes/Modules/CountdownTimer/assets/src/components/Templates.js
+++ b/Includes/Modules/CountdownTimer/assets/src/components/Templates.js
@@ -7,7 +7,7 @@ import {applyFilters} from "@wordpress/hooks";
 import RadioTemplate from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/RadioTemplate";
 import CountDownTwo from "./Templates/CountDownTwo";
 
-const Templates = ( { formData, setFormData } ) => {
+const Templates = ( { formData, setFormData, showUndoIcon } ) => {
     let templates = [
         { key: 'ct-layout-1', component: <CountDownOne /> },
         { key: 'ct-layout-2', component: <CountDownTwo /> },
@@ -41,6 +41,10 @@ const Templates = ( { formData, setFormData } ) => {
     );
 
     const onTemplateChange = ( name, value ) => {
+        for ( let key in showUndoIcon ) {
+            showUndoIcon[key] = false;
+        }
+
         setFormData( {
             ...formData,
             ...templateStyles?.[ value ]
diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js
index 974555c3..7de427a1 100644
--- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js
+++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js
@@ -19,6 +19,8 @@ function DesignTab(props) {
         buttonLoading,
         fontFamily,
         onFormReset,
+        undoHandler,
+        showUndoIcon
     } = props;
 
     return (
@@ -51,31 +53,39 @@ function DesignTab(props) {
                 ) }
 
                 <ColourPicker
-                    name={'background_color'}
                     colSpan={12}
-                    fieldValue={formData.background_color}
+                    name={'background_color'}
+                    undoHandler={undoHandler}
                     changeHandler={onFieldChange}
+                    fieldValue={formData.background_color}
+                    showUndoIcon={showUndoIcon?.background_color}
                     title={__('Background Color', 'storegrowth-sales-booster')}
                 />
                 <ColourPicker
-                    name={'text_color'}
                     colSpan={12}
-                    fieldValue={formData.text_color}
+                    name={'text_color'}
+                    undoHandler={undoHandler}
                     changeHandler={onFieldChange}
+                    fieldValue={formData.text_color}
+                    showUndoIcon={showUndoIcon?.text_color}
                     title={__('Text Color', 'storegrowth-sales-booster')}
                 />
                 <ColourPicker
-                    name={'icon_color'}
                     colSpan={12}
-                    fieldValue={formData.icon_color}
+                    name={'icon_color'}
+                    undoHandler={undoHandler}
                     changeHandler={onFieldChange}
+                    fieldValue={formData.icon_color}
+                    showUndoIcon={showUndoIcon?.icon_color}
                     title={__('Icon Color', 'storegrowth-sales-booster')}
                 />
                 <ColourPicker
-                    name={'close_icon_color'}
                     colSpan={12}
+                    undoHandler={undoHandler}
+                    name={'close_icon_color'}
                     changeHandler={onFieldChange}
                     fieldValue={formData.close_icon_color}
+                    showUndoIcon={showUndoIcon?.close_icon_color}
                     title={__('Close Button Color', 'storegrowth-sales-booster')}
                 />
                 { Boolean( formData.btn_style ) && (
@@ -83,22 +93,30 @@ function DesignTab(props) {
                         <ColourPicker
                             colSpan={12}
                             name={'btn_color'}
-                            fieldValue={formData.btn_color}
+                            undoHandler={undoHandler}
                             changeHandler={onFieldChange}
+                            fieldValue={formData.btn_color}
+                            showUndoIcon={showUndoIcon?.btn_color}
                             title={__('CTA Background', 'storegrowth-sales-booster')}
                         />
                         <ColourPicker
                             colSpan={12}
                             name={'btn_text_color'}
+                            undoHandler={undoHandler}
                             changeHandler={onFieldChange}
                             fieldValue={formData.btn_text_color}
+                            showUndoIcon={showUndoIcon?.btn_text_color}
                             title={__( 'CTA Text Color', 'storegrowth-sales-booster')}
                         />
                     </Fragment>
                 ) }
             </SettingsSection>
 
-            <Templates formData={ formData } setFormData={ setFormData } />
+            <Templates
+                formData={ formData }
+                setFormData={ setFormData }
+                showUndoIcon={ showUndoIcon }
+            />
 
             <ActionsHandler
                 resetHandler={onFormReset}
diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js
index 124b02d1..93922ddf 100644
--- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js
+++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js
@@ -58,11 +58,6 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod
 
   const [formData, setFormData] = useState({ ...initialShipData });
 
-  const [showUndo, setShowUndo] = useState( false );
-  const [undoData, setUndoData] = useState({
-    ...initialShipData,
-  });
-
   const onFormReset = () => {
     setFormData({ ...initialShipData });
     setShowUndo( false );
@@ -130,6 +125,28 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod
     return !!pattern.test( input );
   };
 
+  const [showUndo, setShowUndo] = useState({
+    btn_color        : false,
+    text_color       : false,
+    icon_color       : false,
+    btn_text_color   : false,
+    close_icon_color : false,
+    background_color : false,
+  });
+
+  const [undoData, setUndoData] = useState({
+    ...initialShipData,
+  });
+
+  const colorKeyStack = [
+    'btn_color',
+    'text_color',
+    'icon_color',
+    'btn_text_color',
+    'close_icon_color',
+    'background_color'
+  ];
+
   const onFieldChange = (key, value) => {
     if ( key === 'btn_target' ) {
       setIsValidUrl( validateURL( value ) );
@@ -140,12 +157,22 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod
       [key]: value,
     });
 
-    setShowUndo( true );
+    if ( colorKeyStack?.includes( key ) ) {
+      setShowUndo({ ...showUndo, [key]: true });
+    }
   };
 
-  const onUndoClick = () => {
-    setShowUndo( false );
-    setFormData({ ...undoData });
+  const onUndoClick = ( key ) => {
+    if ( colorKeyStack?.includes( key ) ) {
+      setShowUndo({
+        ...showUndo,
+        [key]: false,
+      });
+      setFormData({
+        ...formData,
+        [key]: undoData?.[key],
+      });
+    }
   };
 
   const changeTab = (key) => {
@@ -213,6 +240,8 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod
       title: __("Design", "storegrowth-sales-booster"),
       panel: (
         <DesignTab
+          showUndoIcon={showUndo}
+          undoHandler={onUndoClick}
           formData={formData}
           isValid={isValidUrl}
           setFormData={setFormData}
diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates.js
index 0062b282..fb2c6fd2 100644
--- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates.js
+++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates.js
@@ -6,7 +6,7 @@ import ShippingBarOne from "./Templates/ShippingBarOne";
 import {applyFilters} from "@wordpress/hooks";
 import RadioTemplate from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/RadioTemplate";
 
-const Templates = ( { formData, setFormData } ) => {
+const Templates = ( { formData, setFormData, showUndoIcon } ) => {
     let templates = [
         { key: 'shipping_bar_one', component: <ShippingBarOne /> },
     ];
@@ -46,6 +46,10 @@ const Templates = ( { formData, setFormData } ) => {
     );
 
     const onTemplateChange = ( name, value ) => {
+        for ( let key in showUndoIcon ) {
+            showUndoIcon[key] = false;
+        }
+
         setFormData( {
             ...formData,
             ...templateStyles?.[ value ]
diff --git a/assets/src/admin.scss b/assets/src/admin.scss
index b38ea749..9b1ec54d 100644
--- a/assets/src/admin.scss
+++ b/assets/src/admin.scss
@@ -2033,14 +2033,12 @@ End Settings Sidebar
       .settings-panel {
         margin-right: 32px;
 
-        .ant-tabs-extra-content {
-          .dashicons {
+        .dashicons {
+          color: #0875ff;
+          cursor: pointer;
+          &.dashicons-undo {
             color: #0875ff;
             cursor: pointer;
-            &.dashicons-undo {
-              color: #0875ff;
-              cursor: pointer;
-            }
           }
         }
 
diff --git a/assets/src/components/settings/Panels/PanelSettings/Fields/ColorPicker.js b/assets/src/components/settings/Panels/PanelSettings/Fields/ColorPicker.js
index 2fc1b48c..92fa9334 100644
--- a/assets/src/components/settings/Panels/PanelSettings/Fields/ColorPicker.js
+++ b/assets/src/components/settings/Panels/PanelSettings/Fields/ColorPicker.js
@@ -10,10 +10,12 @@ const ColourPicker = ( {
     name,
     title,
     tooltip,
+    undoHandler,
     changeHandler,
     colSpan = 24,
     fieldValue = '#82B9FF',
-    needUpgrade = false
+    needUpgrade = false,
+    showUndoIcon = false,
 } ) => {
     const colors = [
         '#000000',
@@ -64,16 +66,26 @@ const ColourPicker = ( {
                 </div>
             </Col>
             <Col span={9}>
-                {/* Handle settings color-picker field by using dynamic props */}
-                <ColorPicker
-                    value={ fieldValue }
-                    presets={ presetColors }
-                    disabled={ needUpgrade }
-                    className={ `settings-field color-picker-field` }
-                    onChange={ ( v, hex ) => changeHandler( name, hex ) }
-                />
+                <div
+                    style={ {
+                        gap            : 16,
+                        display        : 'flex',
+                        alignItems     : 'center',
+                        justifyContent : 'flex-end',
+                    } }
+                >
+                    { showUndoIcon && <span onClick={ () => undoHandler( name ) } className="dashicons dashicons-undo"></span> }
+                    {/* Handle settings color-picker field by using dynamic props */}
+                    <ColorPicker
+                        value={fieldValue}
+                        presets={presetColors}
+                        disabled={needUpgrade}
+                        className={`settings-field color-picker-field`}
+                        onChange={(v, hex) => changeHandler(name, hex)}
+                    />
+                </div>
             </Col>
-            { needUpgrade && <UpgradeOverlay /> }
+            {needUpgrade && <UpgradeOverlay/>}
         </FieldWrapper>
     );
 }
diff --git a/assets/src/components/settings/Panels/PanelSettings/TabPanels.js b/assets/src/components/settings/Panels/PanelSettings/TabPanels.js
index 8674dc25..13e12a99 100644
--- a/assets/src/components/settings/Panels/PanelSettings/TabPanels.js
+++ b/assets/src/components/settings/Panels/PanelSettings/TabPanels.js
@@ -2,16 +2,13 @@ import { Tabs } from "antd";
 
 const { TabPane } = Tabs;
 
-const TabPanels = ( { tabPanels, activeTab, changeHandler, classes, undoHandler, showUndoIcon = false } ) => {
+const TabPanels = ( { tabPanels, activeTab, changeHandler, classes } ) => {
     return (
         // Handle settings tab & panels preview by using props.
         <Tabs
             className={ `${classes}` }
             activeKey={ activeTab }
             onTabClick={ changeHandler }
-            tabBarExtraContent={ {
-                right: showUndoIcon && ( <span onClick={ undoHandler } className="dashicons dashicons-undo"></span> )
-            } }
         >
             { tabPanels && tabPanels?.map( tab => (
                 <TabPane tab={ tab?.title } key={ tab?.key }>
diff --git a/assets/src/components/settings/Panels/PanelSettings/index.js b/assets/src/components/settings/Panels/PanelSettings/index.js
index 1db69094..cfe819f4 100644
--- a/assets/src/components/settings/Panels/PanelSettings/index.js
+++ b/assets/src/components/settings/Panels/PanelSettings/index.js
@@ -4,10 +4,8 @@ import TabPanels from "./TabPanels";
 const PanelSettings = ( {
     tabPanels,
     activeTab,
-    undoHandler,
     changeHandler,
     colSpan = 12,
-    showUndoIcon = false
 } ) => {
     return (
         // Handle settings column width dynamically by using colSpan.
@@ -16,8 +14,6 @@ const PanelSettings = ( {
             <TabPanels
                 tabPanels={ tabPanels }
                 activeTab={ activeTab }
-                undoHandler={ undoHandler }
-                showUndoIcon={ showUndoIcon }
                 changeHandler={ changeHandler }
                 classes={ `settings-panel ${ colSpan === 24 ? 'full-width' : '' }` }
             />