diff --git a/src/assets/images/generate-loading.gif b/src/assets/images/generate-loading.gif
deleted file mode 100644
index 4c24ff8..0000000
Binary files a/src/assets/images/generate-loading.gif and /dev/null differ
diff --git a/src/assets/images/generate-loading.mp4 b/src/assets/images/generate-loading.mp4
new file mode 100644
index 0000000..e47145c
Binary files /dev/null and b/src/assets/images/generate-loading.mp4 differ
diff --git a/src/views/home/agent/components/Item.vue b/src/views/home/agent/components/Item.vue
index b273801..89398a1 100644
--- a/src/views/home/agent/components/Item.vue
+++ b/src/views/home/agent/components/Item.vue
@@ -1,6 +1,9 @@
 <template>
 	<div class="agent-item">
-		<div class="message-wrapper flex" :class="{ 'is-user': content.isUser,'is-loading': content.loading }">
+		<div
+			class="message-wrapper flex"
+			:class="{ 'is-user': content.isUser, 'is-loading': content.loading }"
+		>
 			<div class="thumb">
 				<img :src="content.isUser ? userThumb : agentThumb" class="thumb-icon" />
 			</div>
@@ -36,7 +39,14 @@
 				</div>
 			</div>
 			<div class="message-context loading" v-show="content.loading">
-				<img src="@/assets/images/generate-loading.gif" alt="loading" class="loading-gif" />
+				<!-- <img src="@/assets/images/generate-loading.gif" alt="loading" class="loading-gif" /> -->
+				<video
+					src="@/assets/images/generate-loading.mp4"
+					autoplay
+					loop
+					muted
+					class="loading-gif"
+				></video>
 			</div>
 			<div class="message-context" v-show="content.thinking">
 				<div class="thinking">