diff --git a/components/Hello/RenderHelloInteractiveMessage.tsx b/components/Hello/RenderHelloInteractiveMessage.tsx
index 3590be60..082d0a9d 100644
--- a/components/Hello/RenderHelloInteractiveMessage.tsx
+++ b/components/Hello/RenderHelloInteractiveMessage.tsx
@@ -35,7 +35,8 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
   };
 
   const renderInteractiveContent = () => {
-    switch (messageJson.type) {
+    const type = messageJson.type || message.message_type;
+    switch (type) {
       case 'button':
         return (
           <div className="flex flex-col gap-2">
@@ -149,7 +150,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
                             onClick={() => sendMessageToHello?.(row?.title)}
                           >
                             <div className="flex flex-col w-full items-start">
-                              <div className="font-medium break-words w-full">{row?.title}</div>
+                              <div className="font-medium break-words w-full text-inherit">{row?.title}</div>
                               {row?.description && (
                                 <div className="text-xs text-gray-500 mt-1 w-full">
                                   <div className="break-words" dangerouslySetInnerHTML={{ __html: linkify(row?.description) }}></div>
@@ -173,6 +174,17 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
           </div>
         );
 
+      case 'carousel':
+        return (
+          <CarouselMessage
+            messageJson={messageJson}
+            backgroundColor={backgroundColor}
+            textColor={textColor}
+            sendMessageToHello={sendMessageToHello}
+            renderHeader={renderHeader}
+          />
+        );
+
       default:
         return <div className="p-3 bg-gray-800 rounded-md">Unsupported Message Type</div>;
     }
@@ -185,4 +197,73 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
   );
 }
 
+function CarouselMessage({ messageJson, backgroundColor, textColor, sendMessageToHello, renderHeader }: any) {
+  return (
+    <div className="flex flex-col gap-2 max-w-[320px] sm:max-w-[400px] md:max-w-[500px] lg:max-w-[600px]">
+      {messageJson.body?.text && (
+        <div className="mb-2 px-1">
+          <div
+            className="text-sm"
+            dangerouslySetInnerHTML={{ __html: linkify(messageJson.body.text) }}
+          ></div>
+        </div>
+      )}
+
+      <div className="carousel rounded-box w-full max-w-fit overflow-x-auto gap-3 py-2 px-1">
+        {messageJson.action?.cards?.map((card: any, index: number) => {
+          return (
+            <div key={index} className="carousel-item relative w-56 flex-col border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 rounded-xl shadow-sm h-auto overflow-hidden flex-shrink-0 p-4">
+              {card.header && renderHeader(card.header)}
+
+              <div className="flex flex-col flex-grow">
+                {card.body?.text && (
+                  <div className="text-sm text-gray-800 dark:text-gray-200 mb-4 whitespace-pre-wrap">
+                    <div dangerouslySetInnerHTML={{ __html: linkify(card.body.text) }}></div>
+                  </div>
+                )}
+
+                <div className="flex flex-col gap-2 mt-auto pb-1 z-10 w-full min-h-min">
+                  {card.action?.name === 'cta_url' && card.action?.parameters?.url && (
+                    <a
+                      href={card.action?.parameters?.url || "#"}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="btn btn-sm rounded-md normal-case font-medium flex items-center justify-center gap-2"
+                      style={{ backgroundColor, color: textColor, border: "none" }}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <ExternalLink size={14} />
+                      {card.action?.parameters?.display_text || "View"}
+                    </a>
+                  )}
+
+                  {card.action?.buttons && card.action.buttons.map((button: any, bIndex: number) => (
+                    <button
+                      key={bIndex}
+                      className="btn btn-sm btn-outline rounded-md normal-case px-4 font-medium border-current"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        const title = button?.quick_reply?.title || button?.reply?.title || button?.title;
+                        if (title) sendMessageToHello?.(title);
+                      }}
+                    >
+                      {button?.quick_reply?.title || button?.reply?.title || button?.title}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {messageJson.footer?.text && (
+        <div className="text-xs text-gray-500 mt-1 px-1 italic">
+          <div dangerouslySetInnerHTML={{ __html: linkify(messageJson.footer.text) }}></div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default RenderHelloInteractiveMessage;
\ No newline at end of file
diff --git a/components/Interface-Chatbot/Messages/ImageWithFallback.tsx b/components/Interface-Chatbot/Messages/ImageWithFallback.tsx
index b67e2eb3..599b81a6 100644
--- a/components/Interface-Chatbot/Messages/ImageWithFallback.tsx
+++ b/components/Interface-Chatbot/Messages/ImageWithFallback.tsx
@@ -26,8 +26,8 @@ const FALLBACK_ICON = "https://cdn1.iconfinder.com/data/icons/leto-files/64/leto
 const getFileType = (url: string): string => {
   if (!url) return "other"; // e.g. null, undefined, empty string
   const extension = url?.split(".")?.pop()?.toLowerCase()?.split("?")[0] || "";
-  if (["jpg", "jpeg", "png", "gif", "webp", "bmp"].includes(extension)) return "image";
-  if (["mp4", "webm", "ogg"].includes(extension)) return "video";
+  if (["jpg", "jpeg", "png", "gif", "webp", "bmp", "svg"].includes(extension)) return "image";
+  if (["mp4", "webm", "ogg", "mov"].includes(extension)) return "video";
   if (["mp3", "wav", "aac", "flac"].includes(extension)) return "audio";
   if (["pdf"].includes(extension)) return "pdf";
   return "other"; // e.g. xlsx, csv, html, zip, etc.
@@ -45,7 +45,7 @@ const PlayIcon = () => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="text-white"
+    className="text-white mt-1"
   >
     <polygon points="5 3 19 12 5 21 5 3" />
   </svg>
@@ -53,21 +53,21 @@ const PlayIcon = () => (
 
 // Memoized error component
 const ErrorDisplay = () => (
-  <div className="w-60 h-40 flex items-center justify-center border rounded-md bg-gray-100 text-gray-500">
-    <FileWarning className="w-6 h-6 mr-2" />
-    Failed to load
+  <div className="w-64 h-48 flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-gray-700/60 rounded-2xl bg-gray-50/50 dark:bg-gray-800/20 backdrop-blur-sm transition-all text-gray-500 dark:text-gray-400 hover:bg-gray-100/50 dark:hover:bg-gray-800/40">
+    <div className="bg-gray-200/60 dark:bg-gray-700/50 p-3 rounded-full mb-3 ring-4 ring-gray-50 dark:ring-gray-800/50">
+      <FileWarning className="w-6 h-6 text-gray-400 dark:text-gray-500" />
+    </div>
+    <span className="text-sm font-medium">Failed to load media</span>
   </div>
 );
 
 // Memoized download button
 const DownloadButton = ({ onClick }: { onClick: () => void }) => (
   <button
-    onClick={onClick}
-    className="absolute top-2 right-2 px-2 pt-1 ml-2 bg-gray-200 shadow-md rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-200"
+    onClick={(e) => { e.stopPropagation(); onClick(); }}
+    className="absolute top-2 right-2 p-2 bg-white/70 dark:bg-black/50 backdrop-blur-md text-gray-800 dark:text-gray-200 shadow-md rounded-full md:opacity-0 md:group-hover:opacity-100 transition-all duration-300 hover:scale-110 hover:bg-white dark:hover:bg-black/80 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500/50 z-10"
   >
-    <div className="tooltip tooltip-left" data-tip="Download">
-      <Download size={18} />
-    </div>
+    <Download size={16} strokeWidth={2.5} />
   </button>
 );
 
@@ -112,7 +112,7 @@ const ImageWithFallback = ({
 
   // Memoized container classes
   const containerClasses = useMemo(() =>
-    `flex relative group ${isSmallScreen ? 'max-w-[80%]' : 'max-w-[40%]'} h-auto rounded-md cursor-pointer hover:opacity-90 transition-opacity`,
+    `flex relative group ${isSmallScreen ? 'max-w-[80%]' : 'max-w-[40%]'} h-auto rounded-2xl cursor-pointer transition-all duration-300`,
     [isSmallScreen]
   );
 
@@ -128,6 +128,7 @@ const ImageWithFallback = ({
             onError={handleError}
             onClick={handleClick}
             style={style}
+            className="rounded-2xl shadow-sm group-hover:shadow-md transition-all duration-300"
           />
         );
 
@@ -144,8 +145,8 @@ const ImageWithFallback = ({
             >
               <source src={src} type={videoType} />
             </video>
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="w-12 h-12 bg-black bg-opacity-50 rounded-full flex items-center justify-center">
+            <div className="absolute inset-0 flex items-center justify-center bg-black/10 group-hover:bg-black/20 transition-colors">
+              <div className="w-14 h-14 bg-black/40 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl border border-white/20 group-hover:scale-110 transition-transform duration-300">
                 <PlayIcon />
               </div>
             </div>
@@ -157,7 +158,7 @@ const ImageWithFallback = ({
             onError={handleError}
             style={style}
           >
-            <source src={src} type={videoType} />
+            <source src={src} />
             Your browser does not support the video tag.
           </video>
         );
diff --git a/components/Interface-Chatbot/Messages/UserMessage.tsx b/components/Interface-Chatbot/Messages/UserMessage.tsx
index 4a313281..e5ccdcef 100644
--- a/components/Interface-Chatbot/Messages/UserMessage.tsx
+++ b/components/Interface-Chatbot/Messages/UserMessage.tsx
@@ -55,7 +55,7 @@ const UserMessageCard = React.memo(({ message, backgroundColor, textColor, chatS
                 <div className="flex items-center gap-1 w-full justify-end">
                     <button
                         onClick={handleReplyClick}
-                        className={`w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-50 transition-all duration-300 ${showReplyButton ? 'opacity-100' : 'opacity-0'}`}
+                        className={`w-8 h-8 flex items-center justify-center rounded-full transition-all duration-300 ${showReplyButton ? 'opacity-100' : 'opacity-0'}`}
                         aria-label="Reply to message"
                     >
                         <Reply className="w-4 h-4 text-gray-600 dark:text-gray-300" />