diff --git a/frontend/src/components/features/conversation/conversation-loading.tsx b/frontend/src/components/features/conversation/conversation-loading.tsx
index e556333588..cae7c2246a 100644
--- a/frontend/src/components/features/conversation/conversation-loading.tsx
+++ b/frontend/src/components/features/conversation/conversation-loading.tsx
@@ -1,12 +1,22 @@
 import { LoaderCircle } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
+import { cn } from "#/utils/utils";
 
-export function ConversationLoading() {
+type ConversationLoadingProps = {
+  className?: string;
+};
+
+export function ConversationLoading({ className }: ConversationLoadingProps) {
   const { t } = useTranslation();
 
   return (
-    <div className="bg-[#25272D] flex flex-col items-center justify-center h-full w-full">
+    <div
+      className={cn(
+        "bg-[#25272D] flex flex-col items-center justify-center h-full w-full",
+        className,
+      )}
+    >
       <LoaderCircle className="animate-spin w-16 h-16" color="white" />
       <span className="text-2xl font-normal leading-5 text-white p-4">
         {t(I18nKey.HOME$LOADING)}
diff --git a/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx b/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx
index 6a052f6a81..29332d2afc 100644
--- a/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx
+++ b/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-content/conversation-tab-content.tsx
@@ -58,7 +58,7 @@ export function ConversationTabContent() {
   const conversationTabTitle = t(activeTab.titleKey);
 
   if (shouldShownAgentLoading) {
-    return <ConversationLoading />;
+    return <ConversationLoading className="rounded-xl" />;
   }
 
   return (