diff --git a/web/pgadmin/static/js/helpers/withColorPicker.js b/web/pgadmin/static/js/helpers/withColorPicker.js
index 7cbc3992f..a37acc3ee 100644
--- a/web/pgadmin/static/js/helpers/withColorPicker.js
+++ b/web/pgadmin/static/js/helpers/withColorPicker.js
@@ -29,8 +29,11 @@ export function withColorPicker(Component) {
     };
     const eleRef = useRef();
     const pickrObj = useRef();
-    const onChangeRef = useRef(onChange);
-    const onSaveRef = useRef(onSave);
+    const onChangeRef = useRef();
+    const onSaveRef = useRef();
+
+    onChangeRef.current = onChange;
+    onSaveRef.current = onSave;
 
     const setColor = (newVal, silent) => {
       pickrObj.current?.setColor((_.isUndefined(newVal) || newVal == '') ? pickrOptions.defaultColor : newVal, silent);
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/components/MainToolBar.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/components/MainToolBar.jsx
index ff28cfae7..46532e563 100644
--- a/web/pgadmin/tools/erd/static/js/erd_tool/components/MainToolBar.jsx
+++ b/web/pgadmin/tools/erd/static/js/erd_tool/components/MainToolBar.jsx
@@ -55,10 +55,22 @@ const useStyles = makeStyles((theme)=>({
     border: '1px solid ' + theme.palette.default.borderColor,
     justifyContent: 'flex-start',
   },
+  fillColorIcon: (props)=>({
+    '& path[fill-opacity]': {
+      fillOpacity: 1,
+      color: props.fillColor ?? theme.palette.background.default,
+    }
+  }),
+  textColorIcon: (props)=>({
+    '& path[fill-opacity]': {
+      fillOpacity: 1,
+      color: props.textColor ?? theme.palette.text.primary,
+    }
+  }),
 }));
 
 export function MainToolBar({preferences, eventBus, fillColor, textColor}) {
-  const classes = useStyles();
+  const classes = useStyles({fillColor,textColor});
   const theme = useTheme();
   const [buttonsDisabled, setButtonsDisabled] = useState({
     'save': true,
@@ -231,7 +243,7 @@ export function MainToolBar({preferences, eventBus, fillColor, textColor}) {
             }} />
         </PgButtonGroup>
         <PgButtonGroup size="small">
-          <ColorButton title={gettext('Fill Color')} icon={<FormatColorFillRoundedIcon />}
+          <ColorButton title={gettext('Fill Color')} icon={<FormatColorFillRoundedIcon className={classes.fillColorIcon} />}
             value={fillColor ?? theme.palette.background.default} options={{
               allowSave: true,
             }}
@@ -242,7 +254,7 @@ export function MainToolBar({preferences, eventBus, fillColor, textColor}) {
                 eventBus.fireEvent(ERD_EVENTS.CHANGE_COLORS, null, textColor);
               }
             }}/>
-          <ColorButton title={gettext('Text Color')} icon={<FormatColorTextRoundedIcon />}
+          <ColorButton title={gettext('Text Color')} icon={<FormatColorTextRoundedIcon className={classes.textColorIcon} />}
             value={textColor ?? theme.palette.text.primary} options={{
               allowSave: true,
             }}
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx
index bbb6d2bfb..af6d64126 100644
--- a/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx
+++ b/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx
@@ -55,6 +55,7 @@ export class TableNodeModel extends DefaultNodeModel {
         };
         this.fireEvent(this._metadata, 'dataAvaiable');
         this.fireEvent({}, 'nodeUpdated');
+        this.fireEvent({}, 'selectionChanged');
       }).catch(()=>{
         this._metadata = {
           ...this._metadata,