diff --git a/client/src/utils/getIcon.jsx b/client/src/utils/getIcon.jsx
index 2b03df40a3..9e3970ef39 100644
--- a/client/src/utils/getIcon.jsx
+++ b/client/src/utils/getIcon.jsx
@@ -6,7 +6,7 @@ import BingIcon from '../components/svg/BingIcon';
 
 const getIcon = props => {
   // { size = 30, isCreatedByUser, model, chatGptLabel, error, ...props }
-  const { size = 30, isCreatedByUser, button } = props;
+  const { size = 30, isCreatedByUser, button, model } = props;
 
   if (isCreatedByUser)
     return (
@@ -38,9 +38,9 @@ const getIcon = props => {
       const { chatGptLabel } = props;
 
       icon = <GPTIcon size={size * 0.7} />;
-      bg = chatGptLabel
+      bg = model && model.toLowerCase() === 'gpt-4' ? 'black' : (chatGptLabel
         ? `rgba(16, 163, 127, ${button ? 0.75 : 1})`
-        : `rgba(16, 163, 127, ${button ? 0.75 : 1})`;
+        : `rgba(16, 163, 127, ${button ? 0.75 : 1})`);
       name = chatGptLabel || 'ChatGPT';
     } else if (endpoint === 'bingAI') {
       const { jailbreak } = props;
@@ -50,7 +50,7 @@ const getIcon = props => {
       name = jailbreak ? 'Sydney' : 'BingAI';
     } else if (endpoint === 'chatGPTBrowser') {
       icon = <GPTIcon size={size * 0.7} />;
-      bg = `rgba(0, 163, 255, ${button ? 0.75 : 1})`;
+      bg = model && model.toLowerCase() === 'gpt-4' ? 'black' : `rgba(0, 163, 255, ${button ? 0.75 : 1})`;
       name = 'ChatGPT';
     } else if (endpoint === null) {
       icon = <GPTIcon size={size * 0.7} />;