diff --git a/client/public/assets/mistral.png b/client/public/assets/mistral.png
index ff2f3e8b63..beaffab92c 100644
Binary files a/client/public/assets/mistral.png and b/client/public/assets/mistral.png differ
diff --git a/client/src/components/Chat/Messages/Message.tsx b/client/src/components/Chat/Messages/Message.tsx
index a0934d2bff..c95e6c9e0b 100644
--- a/client/src/components/Chat/Messages/Message.tsx
+++ b/client/src/components/Chat/Messages/Message.tsx
@@ -55,11 +55,11 @@ export default function Message(props: TMessageProps) {
         onTouchMove={handleScroll}
       >
         <div className="m-auto justify-center p-4 py-2 text-base md:gap-6 ">
-          <div className="} group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
+          <div className="final-completion group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
             <div className="relative flex flex-shrink-0 flex-col items-end">
               <div>
                 <div className="pt-0.5">
-                  <div className="gizmo-shadow-stroke flex h-5 w-5 items-center justify-center rounded-full">
+                  <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
                     {typeof icon === 'string' && /[^\\x00-\\x7F]+/.test(icon as string) ? (
                       <span className=" direction-rtl w-40 overflow-x-scroll">{icon}</span>
                     ) : (
diff --git a/client/src/components/Chat/Messages/MessageParts.tsx b/client/src/components/Chat/Messages/MessageParts.tsx
index ba18632a55..c1c16122b8 100644
--- a/client/src/components/Chat/Messages/MessageParts.tsx
+++ b/client/src/components/Chat/Messages/MessageParts.tsx
@@ -42,7 +42,7 @@ export default function Message(props: TMessageProps) {
         onTouchMove={handleScroll}
       >
         <div className="m-auto justify-center p-4 py-2 text-base md:gap-6 ">
-          <div className="} group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
+          <div className="group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
             <div className="relative flex flex-shrink-0 flex-col items-end">
               <div>
                 <div className="pt-0.5">
diff --git a/client/src/components/Endpoints/Icon.tsx b/client/src/components/Endpoints/Icon.tsx
index 4f65997b78..4d2ec9ae0b 100644
--- a/client/src/components/Endpoints/Icon.tsx
+++ b/client/src/components/Endpoints/Icon.tsx
@@ -46,13 +46,13 @@ const Icon: React.FC<IconProps> = (props) => {
       >
         {!user?.avatar && !user?.username ? (
           <div
-            style={{ 
-              backgroundColor: 'rgb(121, 137, 255)', 
-              width: '20px', 
-              height: '20px', 
-              boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px', 
+            style={{
+              backgroundColor: 'rgb(121, 137, 255)',
+              width: '20px',
+              height: '20px',
+              boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
             }}
-            className="relative flex h-9 w-9 items-center justify-center rounded-full p-1 text-white"
+            className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
           >
             <UserIcon />
           </div>
@@ -61,124 +61,138 @@ const Icon: React.FC<IconProps> = (props) => {
         )}
       </div>
     );
-  } else {
-    const endpointIcons = {
-      [EModelEndpoint.assistants]: {
-        icon: props.iconURL ? (
+  }
+
+  const endpointIcons = {
+    [EModelEndpoint.assistants]: {
+      icon: props.iconURL ? (
+        <div className="relative flex h-6 w-6 items-center justify-center">
           <div
             title={assistantName}
             style={{
               width: size,
               height: size,
             }}
-            className={cn('relative flex items-center justify-center', props.className ?? '')}
+            className={cn('overflow-hidden rounded-full', props.className ?? '')}
           >
-            <img className="rounded-full" src={props.iconURL} alt={assistantName} />
+            <img
+              className="shadow-stroke h-full w-full object-cover"
+              src={props.iconURL}
+              alt={assistantName}
+              style={{ height: '80', width: '80' }}
+            />
           </div>
-        ) : (
-          <div className="h-6 w-6">
-            <div className="relative flex h-full items-center justify-center rounded-full bg-white text-black">
-              <AssistantIcon />
-            </div>
+        </div>
+      ) : (
+        <div className="h-6 w-6">
+          <div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
+            <AssistantIcon className="h-2/3 w-2/3 text-gray-400" />
           </div>
-        ),
-        name: endpoint,
-      },
-      [EModelEndpoint.azureOpenAI]: {
-        icon: <AzureMinimalIcon size={size * 0.5555555555555556} />,
-        bg: 'linear-gradient(0.375turn, #61bde2, #4389d0)',
-        name: 'ChatGPT',
-      },
-      [EModelEndpoint.openAI]: {
-        icon: <GPTIcon size={size * 0.5555555555555556} />,
-        bg:
-          typeof model === 'string' && model.toLowerCase().includes('gpt-4')
-            ? '#AB68FF'
-            : '#19C37D',
-        name: 'ChatGPT',
-      },
-      [EModelEndpoint.gptPlugins]: {
-        icon: <Plugin size={size * 0.7} />,
-        bg: `rgba(69, 89, 164, ${button ? 0.75 : 1})`,
-        name: 'Plugins',
-      },
-      [EModelEndpoint.google]: {
-        icon: model?.toLowerCase()?.includes('code') ? (
-          <CodeyIcon size={size * 0.75} />
-        ) : model?.toLowerCase()?.includes('gemini') ? (
-          <GeminiIcon size={size * 0.7} />
-        ) : (
-          <PaLMIcon size={size * 0.7} />
-        ),
-        name: model?.toLowerCase()?.includes('code')
-          ? 'Codey'
-          : model?.toLowerCase()?.includes('gemini')
-            ? 'Gemini'
-            : 'PaLM2',
-      },
-      [EModelEndpoint.anthropic]: {
-        icon: <AnthropicIcon size={size * 0.5555555555555556} />,
-        bg: '#d09a74',
-        name: 'Claude',
-      },
-      [EModelEndpoint.bingAI]: {
-        icon: jailbreak ? (
-          <img src="/assets/bingai-jb.png" alt="Bing Icon" />
-        ) : (
-          <img src="/assets/bingai.png" alt="Sydney Icon" />
-        ),
-        name: jailbreak ? 'Sydney' : 'BingAI',
-      },
-      [EModelEndpoint.chatGPTBrowser]: {
-        icon: <GPTIcon size={size * 0.5555555555555556} />,
-        bg:
-          typeof model === 'string' && model.toLowerCase().includes('gpt-4')
-            ? '#AB68FF'
-            : `rgba(0, 163, 255, ${button ? 0.75 : 1})`,
-        name: 'ChatGPT',
-      },
-      [EModelEndpoint.custom]: {
-        icon: <CustomMinimalIcon size={size * 0.7} />,
-        name: 'Custom',
-      },
-      null: { icon: <GPTIcon size={size * 0.7} />, bg: 'grey', name: 'N/A' },
-      default: {
-        icon: (
-          <UnknownIcon
-            iconURL={props.iconURL}
-            endpoint={endpoint ?? ''}
-            className="icon-md"
-            context="message"
-          />
-        ),
-        name: endpoint,
-      },
-    };
+        </div>
+      ),
+      name: endpoint,
+    },
+    [EModelEndpoint.azureOpenAI]: {
+      icon: <AzureMinimalIcon size={size * 0.5555555555555556} />,
+      bg: 'linear-gradient(0.375turn, #61bde2, #4389d0)',
+      name: 'ChatGPT',
+    },
+    [EModelEndpoint.openAI]: {
+      icon: <GPTIcon size={size * 0.5555555555555556} />,
+      bg:
+        typeof model === 'string' && model.toLowerCase().includes('gpt-4') ? '#AB68FF' : '#19C37D',
+      name: 'ChatGPT',
+    },
+    [EModelEndpoint.gptPlugins]: {
+      icon: <Plugin size={size * 0.7} />,
+      bg: `rgba(69, 89, 164, ${button ? 0.75 : 1})`,
+      name: 'Plugins',
+    },
+    [EModelEndpoint.google]: {
+      icon: model?.toLowerCase()?.includes('code') ? (
+        <CodeyIcon size={size * 0.75} />
+      ) : model?.toLowerCase()?.includes('gemini') ? (
+        <GeminiIcon size={size * 0.7} />
+      ) : (
+        <PaLMIcon size={size * 0.7} />
+      ),
+      name: model?.toLowerCase()?.includes('code')
+        ? 'Codey'
+        : model?.toLowerCase()?.includes('gemini')
+          ? 'Gemini'
+          : 'PaLM2',
+    },
+    [EModelEndpoint.anthropic]: {
+      icon: <AnthropicIcon size={size * 0.5555555555555556} />,
+      bg: '#d09a74',
+      name: 'Claude',
+    },
+    [EModelEndpoint.bingAI]: {
+      icon: jailbreak ? (
+        <img src="/assets/bingai-jb.png" alt="Bing Icon" />
+      ) : (
+        <img src="/assets/bingai.png" alt="Sydney Icon" />
+      ),
+      name: jailbreak ? 'Sydney' : 'BingAI',
+    },
+    [EModelEndpoint.chatGPTBrowser]: {
+      icon: <GPTIcon size={size * 0.5555555555555556} />,
+      bg:
+        typeof model === 'string' && model.toLowerCase().includes('gpt-4')
+          ? '#AB68FF'
+          : `rgba(0, 163, 255, ${button ? 0.75 : 1})`,
+      name: 'ChatGPT',
+    },
+    [EModelEndpoint.custom]: {
+      icon: <CustomMinimalIcon size={size * 0.7} />,
+      name: 'Custom',
+    },
+    null: { icon: <GPTIcon size={size * 0.7} />, bg: 'grey', name: 'N/A' },
+    default: {
+      icon: (
+        <div className="h-6 w-6">
+          <div className="overflow-hidden rounded-full">
+            <UnknownIcon
+              iconURL={props.iconURL}
+              endpoint={endpoint ?? ''}
+              className="h-full w-full object-contain"
+              context="message"
+            />
+          </div>
+        </div>
+      ),
+      name: endpoint,
+    },
+  };
 
-    const { icon, bg, name } =
-      endpoint && endpointIcons[endpoint] ? endpointIcons[endpoint] : endpointIcons.default;
+  const { icon, bg, name } =
+    endpoint && endpointIcons[endpoint] ? endpointIcons[endpoint] : endpointIcons.default;
 
-    return (
-      <div
-        title={name}
-        style={{
-          width: size,
-          height: size,
-        }}
-        className={cn(
-          'relative flex items-center justify-center rounded-full text-black dark:text-white',
-          props.className || '',
-        )}
-      >
-        {icon}
-        {error && (
-          <span className="absolute right-0 top-[20px] -mr-2 flex h-3 w-3 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
-            !
-          </span>
-        )}
-      </div>
-    );
+  if (endpoint === EModelEndpoint.assistants) {
+    return icon;
   }
+
+  return (
+    <div
+      title={name}
+      style={{
+        background: bg || 'transparent',
+        width: size,
+        height: size,
+      }}
+      className={cn(
+        'relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white',
+        props.className || '',
+      )}
+    >
+      {icon}
+      {error && (
+        <span className="absolute right-0 top-[20px] -mr-2 flex h-3 w-3 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
+          !
+        </span>
+      )}
+    </div>
+  );
 };
 
 export default Icon;