diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx b/clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx
index 338ac1c19..1e00589cb 100644
--- a/clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx
+++ b/clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx
@@ -94,12 +94,16 @@ export const Message = ({
   return (
     <div>
       {message.text == "Loading..." ? (
-        <div className="system">
+        <div
+          className={`system ${props.type === "ecommerce" ? "ecommerce" : ""}`}
+        >
           <LoadingIcon className="loading" />
         </div>
       ) : null}
       {message.type === "system" && message.text != "Loading..." ? (
-        <div className="system">
+        <div
+          className={`system ${props.type === "ecommerce" ? "ecommerce" : ""}`}
+        >
           {message.additional && props.type === "ecommerce" && (
             <div className="additional-image-links">
               {message.additional
diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
index d9cab2d1a..e6a169584 100644
--- a/clients/search-component/src/TrieveModal/index.css
+++ b/clients/search-component/src/TrieveModal/index.css
@@ -313,7 +313,7 @@ body {
       }
 
       .system {
-        @apply mt-2 sm:mt-8 mb-5 items-center overflow-ellipsis max-w-[100vw] sm:max-w-[530px];
+        @apply mt-2 sm:mt-8 mb-5 items-center overflow-ellipsis max-w-[100vw] sm:max-w-[330px];
 
         p {
           @apply pb-1;