diff --git a/packages/client/src/components/hermes/chat/ChatInput.vue b/packages/client/src/components/hermes/chat/ChatInput.vue
index fa27785b..63192278 100644
--- a/packages/client/src/components/hermes/chat/ChatInput.vue
+++ b/packages/client/src/components/hermes/chat/ChatInput.vue
@@ -4,12 +4,14 @@ import { useChatStore } from '@/stores/hermes/chat'
 import { useAppStore } from '@/stores/hermes/app'
 import { useProfilesStore } from '@/stores/hermes/profiles'
 import { fetchContextLength } from '@/api/hermes/sessions'
-import { NButton, NTooltip } from 'naive-ui'
+import { NButton, NTooltip, useMessage } from 'naive-ui'
 import { computed, ref, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import ImageCropDialog from './ImageCropDialog.vue'
 
 const chatStore = useChatStore()
 const { t } = useI18n()
+const toast = useMessage()
 const inputText = ref('')
 const textareaRef = ref<HTMLTextAreaElement>()
 const fileInputRef = ref<HTMLInputElement>()
@@ -18,6 +20,78 @@ const isDragging = ref(false)
 const dragCounter = ref(0)
 const isComposing = ref(false)
 
+// --- Avatar upload ---
+const avatarFileInputRef = ref<HTMLInputElement>()
+const showCropDialog = ref(false)
+const cropImageSrc = ref('')
+const cropFileName = ref('')
+const pendingAvatarFile = ref<File | null>(null)
+
+const ANIMATED_TYPES = ['image/gif', 'image/apng']
+function isAnimated(type: string): boolean {
+  return ANIMATED_TYPES.includes(type)
+}
+
+function handleUserAvatarClick() {
+  avatarFileInputRef.value?.click()
+}
+
+function handleAvatarFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (!input.files?.[0]) return
+  const file = input.files[0]
+  input.value = ''
+
+  // Validate file size (5MB)
+  if (file.size > 5 * 1024 * 1024) {
+    toast.error(t('avatar.fileTooLarge'))
+    return
+  }
+  // Validate file type
+  const validTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp']
+  if (!validTypes.includes(file.type)) {
+    toast.error(t('avatar.invalidType'))
+    return
+  }
+
+  // Animated images skip crop dialog
+  if (isAnimated(file.type)) {
+    void doUploadAvatar(file)
+    return
+  }
+
+  // Show crop dialog for static images
+  pendingAvatarFile.value = file
+  cropImageSrc.value = URL.createObjectURL(file)
+  cropFileName.value = file.name
+  showCropDialog.value = true
+}
+
+async function doUploadAvatar(file: File | Blob, fileName?: string) {
+  try {
+    await chatStore.uploadAvatar('user', file, fileName)
+    toast.success(t('avatar.uploadSuccess'))
+  } catch (err: any) {
+    toast.error(err.message || t('avatar.uploadFailed'))
+  }
+}
+
+function handleCropDone(blob: Blob) {
+  showCropDialog.value = false
+  const name = pendingAvatarFile.value?.name || 'avatar.png'
+  URL.revokeObjectURL(cropImageSrc.value)
+  cropImageSrc.value = ''
+  pendingAvatarFile.value = null
+  void doUploadAvatar(blob, name)
+}
+
+function handleCropCancel() {
+  showCropDialog.value = false
+  URL.revokeObjectURL(cropImageSrc.value)
+  cropImageSrc.value = ''
+  pendingAvatarFile.value = null
+}
+
 const canSend = computed(() => inputText.value.trim() || attachments.value.length > 0)
 
 // --- Context info ---
@@ -261,6 +335,30 @@ function isImage(type: string): boolean {
         class="file-input-hidden"
         @change="handleFileChange"
       />
+      <input
+        ref="avatarFileInputRef"
+        type="file"
+        accept="image/png,image/jpeg,image/gif,image/webp"
+        class="file-input-hidden"
+        @change="handleAvatarFileChange"
+      />
+      <NTooltip trigger="hover">
+        <template #trigger>
+          <div class="user-avatar-btn" @click="handleUserAvatarClick">
+            <img
+              v-if="chatStore.userAvatarUrl"
+              :src="chatStore.userAvatarUrl"
+              :alt="t('avatar.user')"
+              class="user-avatar-img"
+            />
+            <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+              <circle cx="12" cy="7" r="4"/>
+            </svg>
+          </div>
+        </template>
+        {{ t('avatar.changeUserAvatar') }}
+      </NTooltip>
       <textarea
         ref="textareaRef"
         v-model="inputText"
@@ -296,6 +394,13 @@ function isImage(type: string): boolean {
       </div>
     </div>
   </div>
+  <ImageCropDialog
+    :visible="showCropDialog"
+    :image-src="cropImageSrc"
+    :file-name="cropFileName"
+    @crop="handleCropDone"
+    @cancel="handleCropCancel"
+  />
 </template>
 
 <style scoped lang="scss">
@@ -423,6 +528,33 @@ function isImage(type: string): boolean {
   display: none;
 }
 
+.user-avatar-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  background: rgba(128, 128, 128, 0.15);
+  color: $text-muted;
+  overflow: hidden;
+  transition: background $transition-fast, transform $transition-fast;
+
+  &:hover {
+    background: rgba(128, 128, 128, 0.25);
+    transform: scale(1.05);
+  }
+}
+
+.user-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
 .input-wrapper {
   display: flex;
   align-items: center;
diff --git a/packages/client/src/components/hermes/chat/ImageCropDialog.vue b/packages/client/src/components/hermes/chat/ImageCropDialog.vue
new file mode 100644
index 00000000..739c311b
--- /dev/null
+++ b/packages/client/src/components/hermes/chat/ImageCropDialog.vue
@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { NButton, NSlider } from 'naive-ui'
+
+const props = defineProps<{
+  visible: boolean
+  imageSrc: string
+  fileName: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'crop', blob: Blob): void
+  (e: 'cancel'): void
+}>()
+
+const { t } = useI18n()
+
+const canvasRef = ref<HTMLCanvasElement>()
+const img = ref<HTMLImageElement | null>(null)
+
+const scale = ref(1)
+const offsetX = ref(0)
+const offsetY = ref(0)
+const isDragging = ref(false)
+const dragStartX = ref(0)
+const dragStartY = ref(0)
+const dragStartOffsetX = ref(0)
+const dragStartOffsetY = ref(0)
+
+const CROP_SIZE = 256 // output size in px
+
+// Load image
+watch(() => props.visible, async (v) => {
+  if (v && props.imageSrc) {
+    scale.value = 1
+    offsetX.value = 0
+    offsetY.value = 0
+    const image = new Image()
+    image.crossOrigin = 'anonymous'
+    image.onload = () => {
+      img.value = image
+      // Auto-fit: scale so the smaller dimension fills the crop area
+      const minDim = Math.min(image.width, image.height)
+      scale.value = CROP_SIZE / minDim
+      // Center
+      offsetX.value = (CROP_SIZE - image.width * scale.value) / 2
+      offsetY.value = (CROP_SIZE - image.height * scale.value) / 2
+      drawPreview()
+    }
+    image.src = props.imageSrc
+  }
+})
+
+// Zoom slider range
+const minScale = computed(() => {
+  if (!img.value) return 0.1
+  const minDim = Math.min(img.value.width, img.value.height)
+  return CROP_SIZE / minDim * 0.5
+})
+const maxScale = computed(() => {
+  if (!img.value) return 3
+  const minDim = Math.min(img.value.width, img.value.height)
+  return CROP_SIZE / minDim * 3
+})
+
+function drawPreview() {
+  const canvas = canvasRef.value
+  const image = img.value
+  if (!canvas || !image) return
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  canvas.width = CROP_SIZE
+  canvas.height = CROP_SIZE
+
+  // Clear with dark bg
+  ctx.fillStyle = '#1a1a1a'
+  ctx.fillRect(0, 0, CROP_SIZE, CROP_SIZE)
+
+  // Draw image with current transform
+  ctx.save()
+  ctx.translate(offsetX.value, offsetY.value)
+  ctx.scale(scale.value, scale.value)
+  ctx.drawImage(image, 0, 0)
+  ctx.restore()
+}
+
+// Watch for redraw on changes
+watch([scale, offsetX, offsetY], () => {
+  nextTick(drawPreview)
+})
+
+// Drag to pan
+function onPointerDown(e: PointerEvent) {
+  isDragging.value = true
+  dragStartX.value = e.clientX
+  dragStartY.value = e.clientY
+  dragStartOffsetX.value = offsetX.value
+  dragStartOffsetY.value = offsetY.value
+  ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (!isDragging.value) return
+  const dx = e.clientX - dragStartX.value
+  const dy = e.clientY - dragStartY.value
+  offsetX.value = dragStartOffsetX.value + dx
+  offsetY.value = dragStartOffsetY.value + dy
+}
+
+function onPointerUp() {
+  isDragging.value = false
+}
+
+function onWheel(e: WheelEvent) {
+  e.preventDefault()
+  const delta = e.deltaY > 0 ? 0.9 : 1.1
+  const newScale = Math.max(minScale.value, Math.min(maxScale.value, scale.value * delta))
+  // Zoom toward center of crop area
+  const centerX = CROP_SIZE / 2
+  const centerY = CROP_SIZE / 2
+  offsetX.value = centerX - (centerX - offsetX.value) * (newScale / scale.value)
+  offsetY.value = centerY - (centerY - offsetY.value) * (newScale / scale.value)
+  scale.value = newScale
+}
+
+function handleCrop() {
+  const canvas = canvasRef.value
+  if (!canvas) return
+  canvas.toBlob((blob) => {
+    if (blob) emit('crop', blob)
+  }, 'image/png', 0.92)
+}
+
+function handleCancel() {
+  emit('cancel')
+}
+
+// Keyboard
+function onKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Escape') handleCancel()
+  if (e.key === 'Enter') handleCrop()
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onKeyDown)
+})
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', onKeyDown)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="crop-overlay" @click.self="handleCancel">
+      <div class="crop-dialog">
+        <div class="crop-header">
+          <span class="crop-title">{{ t('avatar.cropTitle') }}</span>
+          <span class="crop-filename">{{ fileName }}</span>
+        </div>
+        <div
+          class="crop-canvas-wrap"
+          @pointerdown="onPointerDown"
+          @pointermove="onPointerMove"
+          @pointerup="onPointerUp"
+          @wheel="onWheel"
+        >
+          <canvas ref="canvasRef" class="crop-canvas" />
+          <div class="crop-grid">
+            <div class="grid-line h1"></div>
+            <div class="grid-line h2"></div>
+            <div class="grid-line v1"></div>
+            <div class="grid-line v2"></div>
+          </div>
+        </div>
+        <div class="crop-controls">
+          <span class="zoom-label">🔍</span>
+          <NSlider
+            v-model:value="scale"
+            :min="minScale"
+            :max="maxScale"
+            :step="0.01"
+            :tooltip="false"
+            class="zoom-slider"
+          />
+          <span class="zoom-pct">{{ Math.round(scale / (img ? CROP_SIZE / Math.min(img.width, img.height) : 1) * 100) }}%</span>
+        </div>
+        <div class="crop-actions">
+          <NButton size="small" @click="handleCancel">{{ t('common.cancel') }}</NButton>
+          <NButton size="small" type="primary" @click="handleCrop">{{ t('avatar.cropConfirm') }}</NButton>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as *;
+
+.crop-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.65);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+}
+
+.crop-dialog {
+  background: $bg-primary;
+  border-radius: $radius-lg;
+  padding: 20px;
+  min-width: 320px;
+  max-width: 400px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.crop-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.crop-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: $text-primary;
+}
+
+.crop-filename {
+  font-size: 12px;
+  color: $text-muted;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crop-canvas-wrap {
+  position: relative;
+  width: 256px;
+  height: 256px;
+  margin: 0 auto 12px;
+  border-radius: $radius-md;
+  overflow: hidden;
+  cursor: grab;
+  border: 1px solid $border-color;
+  touch-action: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.crop-canvas {
+  display: block;
+  width: 256px;
+  height: 256px;
+}
+
+.crop-grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  .grid-line {
+    position: absolute;
+    background: rgba(255, 255, 255, 0.2);
+
+    &.h1, &.h2 {
+      left: 0; right: 0; height: 1px;
+    }
+    &.h1 { top: 33.33%; }
+    &.h2 { top: 66.66%; }
+
+    &.v1, &.v2 {
+      top: 0; bottom: 0; width: 1px;
+    }
+    &.v1 { left: 33.33%; }
+    &.v2 { left: 66.66%; }
+  }
+}
+
+.crop-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding: 0 4px;
+}
+
+.zoom-label {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.zoom-slider {
+  flex: 1;
+}
+
+.zoom-pct {
+  font-size: 12px;
+  color: $text-muted;
+  min-width: 36px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.crop-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>
diff --git a/packages/client/src/components/hermes/chat/MessageItem.vue b/packages/client/src/components/hermes/chat/MessageItem.vue
index 4ca1c6e6..50497477 100644
--- a/packages/client/src/components/hermes/chat/MessageItem.vue
+++ b/packages/client/src/components/hermes/chat/MessageItem.vue
@@ -5,6 +5,7 @@ import { useI18n } from "vue-i18n";
 import { useMessage } from "naive-ui";
 import { downloadFile } from "@/api/hermes/download";
 import MarkdownRenderer from "./MarkdownRenderer.vue";
+import ImageCropDialog from "./ImageCropDialog.vue";
 import { parseThinking, countThinkingChars } from "@/utils/thinking-parser";
 import { useChatStore } from "@/stores/hermes/chat";
 import { useSettingsStore } from "@/stores/hermes/settings";
@@ -20,6 +21,75 @@ const props = defineProps<{ message: Message; highlight?: boolean }>();
 const { t } = useI18n();
 const toast = useMessage();
 
+// --- Assistant avatar upload ---
+const avatarFileInputRef = ref<HTMLInputElement>()
+const showCropDialog = ref(false)
+const cropImageSrc = ref('')
+const cropFileName = ref('')
+const pendingAvatarFile = ref<File | null>(null)
+
+const ANIMATED_TYPES = ['image/gif', 'image/apng']
+function isAnimated(type: string): boolean {
+  return ANIMATED_TYPES.includes(type)
+}
+
+function handleAssistantAvatarClick() {
+  avatarFileInputRef.value?.click()
+}
+
+function handleAvatarFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (!input.files?.[0]) return
+  const file = input.files[0]
+  input.value = ''
+
+  if (file.size > 5 * 1024 * 1024) {
+    toast.error(t('avatar.fileTooLarge'))
+    return
+  }
+  const validTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp']
+  if (!validTypes.includes(file.type)) {
+    toast.error(t('avatar.invalidType'))
+    return
+  }
+
+  if (isAnimated(file.type)) {
+    void doUploadAvatar(file)
+    return
+  }
+
+  pendingAvatarFile.value = file
+  cropImageSrc.value = URL.createObjectURL(file)
+  cropFileName.value = file.name
+  showCropDialog.value = true
+}
+
+async function doUploadAvatar(file: File | Blob, fileName?: string) {
+  try {
+    await chatStore.uploadAvatar('assistant', file, fileName)
+    toast.success(t('avatar.uploadSuccess'))
+  } catch (err: any) {
+    toast.error(err.message || t('avatar.uploadFailed'))
+  }
+}
+
+function handleCropDone(blob: Blob) {
+  showCropDialog.value = false
+  const name = pendingAvatarFile.value?.name || 'avatar.png'
+  URL.revokeObjectURL(cropImageSrc.value)
+  cropImageSrc.value = ''
+  pendingAvatarFile.value = null
+  void doUploadAvatar(blob, name)
+}
+
+function handleCropCancel() {
+  showCropDialog.value = false
+  URL.revokeObjectURL(cropImageSrc.value)
+  cropImageSrc.value = ''
+  pendingAvatarFile.value = null
+}
+
+
 const isSystem = computed(() => props.message.role === "system");
 const toolExpanded = ref(false);
 const previewUrl = ref<string | null>(null);
@@ -338,11 +408,21 @@ const renderedToolResult = computed(() => {
     </template>
     <template v-else>
       <div class="msg-body">
-        <img
+        <div class="assistant-avatar-wrap" @click="handleAssistantAvatarClick" :title="t('avatar.changeAiAvatar')">
+          <img
+            v-if="message.role === 'assistant'"
+            :src="chatStore.assistantAvatarUrl || '/logo.png'"
+            alt="Hermes"
+            class="msg-avatar"
+          />
+        </div>
+        <input
           v-if="message.role === 'assistant'"
-          src="/logo.png"
-          alt="Hermes"
-          class="msg-avatar"
+          ref="avatarFileInputRef"
+          type="file"
+          accept="image/png,image/jpeg,image/gif,image/webp"
+          class="avatar-file-hidden"
+          @change="handleAvatarFileChange"
         />
         <div class="msg-content" :class="message.role">
           <div class="message-bubble" :class="{ system: isSystem }">
@@ -456,6 +536,13 @@ const renderedToolResult = computed(() => {
       <img :src="previewUrl" class="image-preview-img" @click="previewUrl = null" />
     </div>
   </Teleport>
+  <ImageCropDialog
+    :visible="showCropDialog"
+    :image-src="cropImageSrc"
+    :file-name="cropFileName"
+    @crop="handleCropDone"
+    @cancel="handleCropCancel"
+  />
 </template>
 
 <style scoped lang="scss">
@@ -496,6 +583,24 @@ const renderedToolResult = computed(() => {
       height: 40px;
       flex-shrink: 0;
       margin-top: 2px;
+      border-radius: 50%;
+    }
+
+    .assistant-avatar-wrap {
+      cursor: pointer;
+      border-radius: 50%;
+      overflow: hidden;
+      transition: opacity $transition-fast, transform $transition-fast;
+      flex-shrink: 0;
+
+      &:hover {
+        opacity: 0.8;
+        transform: scale(1.05);
+      }
+
+      .msg-avatar {
+        margin-top: 0;
+      }
     }
 
     .message-bubble {
@@ -876,6 +981,10 @@ const renderedToolResult = computed(() => {
   border-radius: 4px;
 }
 
+.avatar-file-hidden {
+  display: none;
+}
+
 @media (max-width: $breakpoint-mobile) {
   .message.user .msg-body {
     max-width: 100%;
diff --git a/packages/client/src/components/hermes/chat/MessageList.vue b/packages/client/src/components/hermes/chat/MessageList.vue
index e3f02fef..1bf46166 100644
--- a/packages/client/src/components/hermes/chat/MessageList.vue
+++ b/packages/client/src/components/hermes/chat/MessageList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from "vue";
+import { ref, computed, watch, nextTick, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import MessageItem from "./MessageItem.vue";
 import { useChatStore } from "@/stores/hermes/chat";
@@ -12,6 +12,41 @@ const { t } = useI18n();
 const { isDark } = useTheme();
 const listRef = ref<HTMLElement>();
 
+// Custom thinking animation state
+const customAnimUrl = ref<string>('')
+const customAnimType = ref<'gif' | 'video'>('gif')
+const hasCustomAnim = computed(() => !!customAnimUrl.value)
+
+const thinkingSrc = computed(() => {
+  if (hasCustomAnim.value) return customAnimUrl.value
+  return isDark.value ? thinkingVideoDark : thinkingVideoLight
+})
+
+async function checkCustomAnimation() {
+  try {
+    const res = await fetch('/api/thinking-animation/status')
+    if (!res.ok) return
+    const data = await res.json()
+    if (data.hasCustom && data.url) {
+      // Add cache-buster to ensure fresh load after upload
+      customAnimUrl.value = data.url + '?t=' + Date.now()
+      customAnimType.value = data.type || 'gif'
+    }
+  } catch {
+    // Silently ignore — custom animation is optional
+  }
+}
+
+// Listen for animation upload events from picker
+function onTaUploaded() {
+  void checkCustomAnimation()
+}
+
+onMounted(() => {
+  void checkCustomAnimation()
+  window.addEventListener('ta-uploaded', onTaUploaded)
+})
+
 const displayMessages = computed(() =>
   chatStore.messages.filter((m) => m.role !== "tool"),
 );
@@ -120,8 +155,15 @@ watch(currentToolCalls, () => {
     />
     <Transition name="fade">
       <div v-if="chatStore.isRunActive" class="streaming-indicator">
+        <img
+          v-if="hasCustomAnim && customAnimType === 'gif'"
+          :src="thinkingSrc"
+          class="thinking-video"
+          alt="thinking"
+        />
         <video
-          :src="isDark ? thinkingVideoDark : thinkingVideoLight"
+          v-else
+          :src="thinkingSrc"
           autoplay
           loop
           muted
diff --git a/packages/client/src/components/hermes/settings/DisplaySettings.vue b/packages/client/src/components/hermes/settings/DisplaySettings.vue
index 35491ad2..0c050990 100644
--- a/packages/client/src/components/hermes/settings/DisplaySettings.vue
+++ b/packages/client/src/components/hermes/settings/DisplaySettings.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
 import { useTheme, type ThemeMode } from '@/composables/useTheme'
 import SettingRow from './SettingRow.vue'
+import ThinkingAnimationPicker from './ThinkingAnimationPicker.vue'
 
 const settingsStore = useSettingsStore()
 const message = useMessage()
@@ -58,13 +59,17 @@ function handleThemeChange(val: string) {
     <SettingRow :label="t('settings.display.busyInputMode')" :hint="t('settings.display.busyInputModeHint')">
       <NSwitch :value="settingsStore.display.busy_input_mode === 'interrupt'" @update:value="v => save({ busy_input_mode: v ? 'interrupt' : 'off' })" />
     </SettingRow>
+    <ThinkingAnimationPicker />
   </section>
 </template>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as *;
-
 .settings-section {
-  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.input-sm {
+  min-width: 120px;
 }
 </style>
diff --git a/packages/client/src/components/hermes/settings/ThinkingAnimationPicker.vue b/packages/client/src/components/hermes/settings/ThinkingAnimationPicker.vue
new file mode 100644
index 00000000..b4adbedc
--- /dev/null
+++ b/packages/client/src/components/hermes/settings/ThinkingAnimationPicker.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { NButton, NUpload, useMessage } from 'naive-ui'
+import type { UploadCustomRequestOptions } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import SettingRow from './SettingRow.vue'
+
+const { t } = useI18n()
+const message = useMessage()
+
+const hasCustom = ref(false)
+const customUrl = ref('')
+const customType = ref<'gif' | 'video'>('gif')
+const uploading = ref(false)
+
+async function checkStatus() {
+  try {
+    const res = await fetch('/api/thinking-animation/status')
+    const data = await res.json()
+    hasCustom.value = data.hasCustom
+    if (data.hasCustom) {
+      customUrl.value = data.url
+      customType.value = data.type
+    } else {
+      customUrl.value = ''
+    }
+  } catch {
+    hasCustom.value = false
+    customUrl.value = ''
+  }
+}
+
+async function handleUpload({ file }: UploadCustomRequestOptions) {
+  if (!file.file) return
+  const ext = file.name.split('.').pop()?.toLowerCase() || ''
+  if (!['gif', 'mp4', 'webm', 'mov', 'avi', 'mkv'].includes(ext)) {
+    message.error(t('settings.display.thinkingAnimationUnsupported'))
+    return
+  }
+  if (file.file.size > 100 * 1024 * 1024) {
+    message.error(t('settings.display.thinkingAnimationTooLarge'))
+    return
+  }
+  uploading.value = true
+  try {
+    const formData = new FormData()
+    formData.append('file', file.file, file.name)
+    const token = localStorage.getItem('hermes_api_key') || ''
+    const res = await fetch('/api/thinking-animation/upload', {
+      method: 'POST',
+      body: formData,
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    })
+    const data = await res.json()
+    if (data.success) {
+      hasCustom.value = true
+      customUrl.value = data.url
+      customType.value = data.type
+      message.success(t('settings.display.thinkingAnimationUploaded'))
+    } else {
+      message.error(data.error || t('settings.display.thinkingAnimationFailed'))
+    }
+  } catch (err) {
+    message.error(t('settings.display.thinkingAnimationFailed'))
+  } finally {
+    uploading.value = false
+  }
+}
+
+async function handleReset() {
+  try {
+    const token = localStorage.getItem('hermes_api_key') || ''
+    const res = await fetch('/api/thinking-animation', {
+      method: 'DELETE',
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    })
+    const data = await res.json()
+    if (data.success) {
+      hasCustom.value = false
+      customUrl.value = ''
+      message.success(t('settings.display.thinkingAnimationReset'))
+    }
+  } catch {
+    message.error(t('settings.display.thinkingAnimationFailed'))
+  }
+}
+
+onMounted(checkStatus)
+</script>
+
+<template>
+  <SettingRow
+    :label="t('settings.display.thinkingAnimation')"
+    :hint="t('settings.display.thinkingAnimationHint')"
+  >
+    <div class="thinking-animation-picker">
+      <div v-if="hasCustom && customUrl" class="thinking-animation-preview">
+        <img
+          v-if="customType === 'gif'"
+          :src="customUrl"
+          class="thinking-animation-thumb"
+          alt="Custom thinking animation"
+        />
+        <video
+          v-else
+          :src="customUrl"
+          class="thinking-animation-thumb"
+          autoplay
+          loop
+          muted
+        />
+        <NButton size="small" type="error" quaternary @click="handleReset">
+          {{ t('settings.display.thinkingAnimationReset') }}
+        </NButton>
+      </div>
+      <NUpload
+        v-else
+        :custom-request="handleUpload"
+        accept=".gif,.mp4,.webm,.mov,.avi,.mkv"
+        :max="1"
+        :disabled="uploading"
+        :show-file-list="false"
+      >
+        <NButton size="small" :loading="uploading" secondary>
+          {{ uploading ? t('settings.display.thinkingAnimationUploading') : t('settings.display.thinkingAnimationUpload') }}
+        </NButton>
+      </NUpload>
+    </div>
+  </SettingRow>
+</template>
+
+<style scoped>
+.thinking-animation-picker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.thinking-animation-preview {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.thinking-animation-thumb {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+}
+</style>
diff --git a/packages/client/src/components/layout/AppSidebar.vue b/packages/client/src/components/layout/AppSidebar.vue
index 53ec46bc..6b9bbbfc 100644
--- a/packages/client/src/components/layout/AppSidebar.vue
+++ b/packages/client/src/components/layout/AppSidebar.vue
@@ -5,7 +5,7 @@ import { useI18n } from "vue-i18n";
 import { NButton, NModal, useMessage } from "naive-ui";
 import { useAppStore } from "@/stores/hermes/app";
 import ModelSelector from "./ModelSelector.vue";
-import ProfileSelector from "./ProfileSelector.vue";
+import GatewayTabs from "./GatewayTabs.vue";
 import LanguageSwitch from "./LanguageSwitch.vue";
 import ThemeSwitch from "./ThemeSwitch.vue";
 import { useSessionSearch } from '@/composables/useSessionSearch'
@@ -247,7 +247,7 @@ function openChangelog() {
       </div>
     </nav>
 
-    <ProfileSelector />
+    <GatewayTabs />
     <ModelSelector />
 
     <div class="sidebar-footer">
diff --git a/packages/client/src/components/layout/GatewayTabs.vue b/packages/client/src/components/layout/GatewayTabs.vue
new file mode 100644
index 00000000..dd8a4ffb
--- /dev/null
+++ b/packages/client/src/components/layout/GatewayTabs.vue
@@ -0,0 +1,404 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick } from 'vue'
+import { NTooltip, NDropdown, useMessage } from 'naive-ui'
+import type { DropdownOption } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useProfilesStore } from '@/stores/hermes/profiles'
+
+const emit = defineEmits<{ (e: 'switch', name: string): void }>()
+
+const { t } = useI18n()
+const message = useMessage()
+const profilesStore = useProfilesStore()
+
+// Create profile
+const showCreate = ref(false)
+const createName = ref('')
+const creating = ref(false)
+
+// Rename profile
+const showRename = ref(false)
+const renameOld = ref('')
+const renameNew = ref('')
+const renaming = ref(false)
+
+const activeName = computed(() => profilesStore.activeProfileName ?? '')
+
+function contextOptions(): DropdownOption[] {
+  return [
+    { label: t('gatewayTabs.rename', 'Rename'), key: 'rename' },
+    { label: t('gatewayTabs.export', 'Export'), key: 'export' },
+    { type: 'divider', key: 'd1' },
+    {
+      label: t('gatewayTabs.delete', 'Delete'),
+      key: 'delete',
+      props: { style: { color: 'var(--error)' } },
+    },
+  ]
+}
+
+async function handleSwitch(name: string) {
+  if (name === activeName.value || profilesStore.switching) return
+  const ok = await profilesStore.switchProfile(name)
+  if (ok) {
+    message.success(t('profiles.switchSuccess', { name }))
+    emit('switch', name)
+  }
+}
+
+function handleCreate() {
+  createName.value = ''
+  showCreate.value = true
+  nextTick(() => {
+    const input = document.querySelector('.create-profile-input input') as HTMLInputElement
+    input?.focus()
+  })
+}
+
+async function doCreate() {
+  const name = createName.value.trim()
+  if (!name) {
+    message.warning(t('gatewayTabs.nameRequired', 'Profile name is required'))
+    return
+  }
+  creating.value = true
+  try {
+    const ok = await profilesStore.createProfile(name)
+    if (ok) {
+      message.success(t('gatewayTabs.created', { name }))
+      showCreate.value = false
+    } else {
+      message.error(t('gatewayTabs.createFailed', 'Failed to create profile'))
+    }
+  } finally {
+    creating.value = false
+  }
+}
+
+function handleRename(name: string) {
+  renameOld.value = name
+  renameNew.value = name
+  showRename.value = true
+  nextTick(() => {
+    const input = document.querySelector('.rename-profile-input input') as HTMLInputElement
+    input?.focus()
+    input?.select()
+  })
+}
+
+async function doRename() {
+  const newName = renameNew.value.trim()
+  if (!newName) {
+    message.warning(t('gatewayTabs.nameRequired', 'Profile name is required'))
+    return
+  }
+  if (newName === renameOld.value) {
+    showRename.value = false
+    return
+  }
+  renaming.value = true
+  try {
+    const ok = await profilesStore.renameProfile(renameOld.value, newName)
+    if (ok) {
+      message.success(t('gatewayTabs.renamed', { from: renameOld.value, to: newName }))
+      showRename.value = false
+    } else {
+      message.error(t('gatewayTabs.renameFailed', 'Failed to rename profile'))
+    }
+  } finally {
+    renaming.value = false
+  }
+}
+
+async function handleDelete(name: string) {
+  if (name === activeName.value) {
+    message.warning(t('gatewayTabs.cannotDeleteActive', 'Cannot delete the active profile'))
+    return
+  }
+  const ok = await profilesStore.deleteProfile(name)
+  if (ok) {
+    message.success(t('gatewayTabs.deleted', { name }))
+  } else {
+    message.error(t('gatewayTabs.deleteFailed', 'Failed to delete profile'))
+  }
+}
+
+async function handleExport(name: string) {
+  try {
+    const ok = await profilesStore.exportProfile(name)
+    if (ok) {
+      message.success(t('gatewayTabs.exported', { name }))
+    } else {
+      message.error(t('gatewayTabs.exportFailed', 'Failed to export profile'))
+    }
+  } catch {
+    message.error(t('gatewayTabs.exportFailed', 'Failed to export profile'))
+  }
+}
+
+function handleContextMenu(key: string, profileName: string) {
+  if (key === 'rename') handleRename(profileName)
+  else if (key === 'delete') handleDelete(profileName)
+  else if (key === 'export') handleExport(profileName)
+}
+
+onMounted(() => {
+  if (profilesStore.profiles.length === 0) {
+    profilesStore.fetchProfiles()
+  }
+})
+</script>
+
+<template>
+  <div class="gateway-tabs">
+    <div class="tabs-header">
+      <span class="tabs-label">{{ t('sidebar.profiles') }}</span>
+      <button class="tabs-add" @click="handleCreate" :title="t('gatewayTabs.create', 'Create profile')">+</button>
+    </div>
+    <div class="tabs-scroll">
+      <div class="tabs-list">
+        <NDropdown
+          v-for="p in profilesStore.profiles"
+          :key="p.name"
+          :options="contextOptions()"
+          trigger="click"
+          placement="bottom-start"
+          @select="(key) => handleContextMenu(key as string, p.name)"
+        >
+          <NTooltip :delay="400" placement="top">
+            <template #trigger>
+              <button
+                class="tab-btn"
+                :class="{ active: p.name === activeName, switching: profilesStore.switching && p.name === activeName }"
+                :disabled="profilesStore.switching"
+                @click="handleSwitch(p.name)"
+              >
+                <span class="tab-dot" :class="p.active ? 'running' : 'unknown'" />
+                <span class="tab-name" :title="p.alias || p.name">{{ p.alias || p.name }}</span>
+              </button>
+            </template>
+            <div class="tab-tooltip">
+              <div class="tooltip-name">{{ p.name }}</div>
+              <div v-if="p.model" class="tooltip-detail">{{ p.model }}</div>
+              <div v-if="p.gateway" class="tooltip-detail">{{ p.gateway }}</div>
+            </div>
+          </NTooltip>
+        </NDropdown>
+
+        <div v-if="profilesStore.profiles.length === 0 && !profilesStore.loading" class="tabs-empty">
+          {{ t('common.noData') }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Create profile inline -->
+    <div v-if="showCreate" class="tabs-inline-form">
+      <input
+        v-model="createName"
+        class="create-profile-input"
+        :placeholder="t('gatewayTabs.namePlaceholder', 'Profile name')"
+        @keydown.enter="doCreate"
+        @keydown.escape="showCreate = false"
+      />
+      <button class="form-btn confirm" :disabled="creating" @click="doCreate">✓</button>
+      <button class="form-btn cancel" @click="showCreate = false">✕</button>
+    </div>
+
+    <!-- Rename profile inline -->
+    <div v-if="showRename" class="tabs-inline-form">
+      <input
+        v-model="renameNew"
+        class="rename-profile-input"
+        :placeholder="t('gatewayTabs.namePlaceholder', 'Profile name')"
+        @keydown.enter="doRename"
+        @keydown.escape="showRename = false"
+      />
+      <button class="form-btn confirm" :disabled="renaming" @click="doRename">✓</button>
+      <button class="form-btn cancel" @click="showRename = false">✕</button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as *;
+
+.gateway-tabs {
+  padding: 0 12px;
+  margin-bottom: 8px;
+}
+
+.tabs-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.tabs-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.tabs-add {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1px solid $border-color;
+  background: transparent;
+  color: $text-muted;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background $transition-fast, color $transition-fast;
+
+  &:hover {
+    background: $bg-card-hover;
+    color: $text-primary;
+  }
+}
+
+.tabs-scroll {
+  overflow-x: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
+}
+
+.tabs-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tab-btn {
+  flex: 0 0 calc(50% - 2px);
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: $text-secondary;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background $transition-fast, border-color $transition-fast;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:hover {
+    background: $bg-card-hover;
+    border-color: $border-color;
+  }
+
+  &.active {
+    background: rgba(var(--accent-primary-rgb), 0.1);
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
+    color: $text-primary;
+    font-weight: 500;
+  }
+
+  &.switching {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.tab-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+
+  &.running { background: #18a058; }
+  &.unknown { background: $text-muted; }
+}
+
+.tab-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.tab-tooltip {
+  font-size: 12px;
+  line-height: 1.6;
+}
+.tooltip-name {
+  font-weight: 600;
+  color: $text-primary;
+}
+.tooltip-detail {
+  color: $text-muted;
+}
+.tooltip-backend {
+  color: $accent-primary;
+  font-family: monospace;
+  font-size: 11px;
+}
+
+.tabs-empty {
+  font-size: 12px;
+  color: $text-muted;
+  padding: 4px 0;
+}
+
+.tabs-inline-form {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+
+  input {
+    flex: 1;
+    min-width: 0;
+    padding: 3px 6px;
+    border: 1px solid $border-color;
+    border-radius: 4px;
+    background: $bg-input;
+    color: $text-primary;
+    font-size: 12px;
+    outline: none;
+
+    &:focus {
+      border-color: $accent-primary;
+    }
+  }
+}
+
+.form-btn {
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.confirm {
+    background: rgba(var(--accent-primary-rgb), 0.15);
+    color: $accent-primary;
+    &:hover { background: rgba(var(--accent-primary-rgb), 0.25); }
+  }
+  &.cancel {
+    background: transparent;
+    color: $text-muted;
+    &:hover { background: $bg-card-hover; }
+  }
+}
+</style>
diff --git a/packages/client/src/i18n/locales/de.ts b/packages/client/src/i18n/locales/de.ts
index 2bd880d4..5642e8ce 100644
--- a/packages/client/src/i18n/locales/de.ts
+++ b/packages/client/src/i18n/locales/de.ts
@@ -394,6 +394,16 @@ export default {
       themeLight: 'Hell',
       themeDark: 'Dunkel',
       themeSystem: 'System',
+      thinkingAnimation: 'Denk-Animation',
+      thinkingAnimationHint: 'Laden Sie eine benutzerdefinierte Animation (GIF, MP4, WebM, MOV, AVI, MKV) hoch, um die Standard-AI-Denk-Animation zu ersetzen',
+      thinkingAnimationUpload: 'Animation hochladen',
+      thinkingAnimationUploading: 'Hochladen...',
+      thinkingAnimationUploaded: 'Animation erfolgreich hochgeladen',
+      thinkingAnimationReset: 'Auf Standard zurücksetzen',
+      thinkingAnimationResetDone: 'Animation auf Standard zurückgesetzt',
+      thinkingAnimationFailed: 'Upload fehlgeschlagen',
+      thinkingAnimationUnsupported: 'Nicht unterstützter Dateityp (verwenden Sie GIF, MP4, WebM, MOV, AVI oder MKV)',
+      thinkingAnimationTooLarge: 'Datei zu groß (max. 100MB)',
     },
     agent: {
       maxTurns: 'Maximale Runden',
@@ -698,4 +708,35 @@ export default {
     download: 'Herunterladen',
     downloadFile: 'Datei herunterladen',
   },
+
+  gatewayTabs: {
+    rename: 'Umbenennen',
+    export: 'Exportieren',
+    delete: 'Löschen',
+    create: 'Profil erstellen',
+    nameRequired: 'Profilname erforderlich',
+    created: 'Profil erstellt',
+    createFailed: 'Erstellen fehlgeschlagen',
+    renamed: 'Umbenannt',
+    renameFailed: 'Umbenennen fehlgeschlagen',
+    deleted: 'Profil gelöscht',
+    deleteFailed: 'Löschen fehlgeschlagen',
+    exported: 'Exportiert',
+    exportFailed: 'Export fehlgeschlagen',
+    cannotDeleteActive: 'Aktives Profil kann nicht gelöscht werden',
+    namePlaceholder: 'Profilname',
+  },
+
+    avatar: {
+    user: 'Benutzeravatar',
+    assistant: 'KI-Avatar',
+    changeUserAvatar: 'Benutzeravatar ändern',
+    changeAiAvatar: 'KI-Avatar ändern',
+    cropTitle: 'Avatar zuschneiden',
+    cropConfirm: 'Anwenden',
+    uploadSuccess: 'Avatar aktualisiert',
+    uploadFailed: 'Upload fehlgeschlagen',
+    fileTooLarge: 'Datei zu groß (max. 5 MB)',
+    invalidType: 'Nicht unterstütztes Format. Verwenden Sie PNG, JPG, GIF oder WebP',
+  },
 }
diff --git a/packages/client/src/i18n/locales/en.ts b/packages/client/src/i18n/locales/en.ts
index 992ea4ae..edd93bb1 100644
--- a/packages/client/src/i18n/locales/en.ts
+++ b/packages/client/src/i18n/locales/en.ts
@@ -435,6 +435,16 @@ export default {
       themeLight: 'Light',
       themeDark: 'Dark',
       themeSystem: 'System',
+      thinkingAnimation: 'Thinking Animation',
+      thinkingAnimationHint: 'Upload a custom animation (GIF, MP4, WebM, MOV, AVI, MKV) to replace the default AI thinking animation',
+      thinkingAnimationUpload: 'Upload Animation',
+      thinkingAnimationUploading: 'Uploading...',
+      thinkingAnimationUploaded: 'Animation uploaded successfully',
+      thinkingAnimationReset: 'Reset to Default',
+      thinkingAnimationResetDone: 'Animation reset to default',
+      thinkingAnimationFailed: 'Upload failed',
+      thinkingAnimationUnsupported: 'Unsupported file type (use GIF, MP4, WebM, MOV, AVI, or MKV)',
+      thinkingAnimationTooLarge: 'File too large (max 100MB)',
     },
     agent: {
       maxTurns: 'Max Turns',
@@ -741,4 +751,35 @@ export default {
     new_0_4_2_4: 'Add pinned sessions and live monitor in Chat page',
     new_0_4_2_5: 'Fix builtin provider detection and model matching',
   },
+
+  gatewayTabs: {
+    rename: 'Rename',
+    export: 'Export',
+    delete: 'Delete',
+    create: 'Create profile',
+    nameRequired: 'Profile name is required',
+    created: 'Profile "{name}" created',
+    createFailed: 'Failed to create profile',
+    renamed: 'Renamed "{from}" to "{to}"',
+    renameFailed: 'Failed to rename profile',
+    deleted: 'Profile "{name}" deleted',
+    deleteFailed: 'Failed to delete profile',
+    exported: 'Profile "{name}" exported',
+    exportFailed: 'Failed to export profile',
+    cannotDeleteActive: 'Cannot delete the active profile',
+    namePlaceholder: 'Profile name',
+  },
+
+    avatar: {
+    user: 'User Avatar',
+    assistant: 'AI Avatar',
+    changeUserAvatar: 'Change user avatar',
+    changeAiAvatar: 'Change AI avatar',
+    cropTitle: 'Crop Avatar',
+    cropConfirm: 'Apply',
+    uploadSuccess: 'Avatar updated',
+    uploadFailed: 'Upload failed',
+    fileTooLarge: 'File too large (max 5MB)',
+    invalidType: 'Unsupported format. Use PNG, JPG, GIF, or WebP',
+  },
 }
diff --git a/packages/client/src/i18n/locales/es.ts b/packages/client/src/i18n/locales/es.ts
index df18059d..05a6dc3e 100644
--- a/packages/client/src/i18n/locales/es.ts
+++ b/packages/client/src/i18n/locales/es.ts
@@ -394,6 +394,16 @@ export default {
       themeLight: 'Claro',
       themeDark: 'Oscuro',
       themeSystem: 'Sistema',
+      thinkingAnimation: 'Animación de pensamiento',
+      thinkingAnimationHint: 'Sube una animación personalizada (GIF, MP4, WebM, MOV, AVI, MKV) para reemplazar la animación de pensamiento de IA predeterminada',
+      thinkingAnimationUpload: 'Subir animación',
+      thinkingAnimationUploading: 'Subiendo...',
+      thinkingAnimationUploaded: 'Animación subida exitosamente',
+      thinkingAnimationReset: 'Restablecer predeterminado',
+      thinkingAnimationResetDone: 'Animación restablecida a predeterminada',
+      thinkingAnimationFailed: 'Error al subir',
+      thinkingAnimationUnsupported: 'Tipo de archivo no compatible (usa GIF, MP4, WebM, MOV, AVI o MKV)',
+      thinkingAnimationTooLarge: 'Archivo demasiado grande (máx 100MB)',
     },
     agent: {
       maxTurns: 'Turnos maximos',
@@ -698,4 +708,35 @@ export default {
     download: 'Descargar',
     downloadFile: 'Descargar archivo',
   },
+
+  gatewayTabs: {
+    rename: 'Renombrar',
+    export: 'Exportar',
+    delete: 'Eliminar',
+    create: 'Crear perfil',
+    nameRequired: 'Se requiere nombre de perfil',
+    created: 'Perfil creado',
+    createFailed: 'Error al crear perfil',
+    renamed: 'Renombrado',
+    renameFailed: 'Error al renombrar',
+    deleted: 'Perfil eliminado',
+    deleteFailed: 'Error al eliminar',
+    exported: 'Perfil exportado',
+    exportFailed: 'Error al exportar',
+    cannotDeleteActive: 'No se puede eliminar el perfil activo',
+    namePlaceholder: 'Nombre del perfil',
+  },
+
+    avatar: {
+    user: 'Avatar de usuario',
+    assistant: 'Avatar de IA',
+    changeUserAvatar: 'Cambiar avatar de usuario',
+    changeAiAvatar: 'Cambiar avatar de IA',
+    cropTitle: 'Recortar avatar',
+    cropConfirm: 'Aplicar',
+    uploadSuccess: 'Avatar actualizado',
+    uploadFailed: 'Error al subir',
+    fileTooLarge: 'Archivo demasiado grande (máx. 5 MB)',
+    invalidType: 'Formato no soportado. Use PNG, JPG, GIF o WebP',
+  },
 }
diff --git a/packages/client/src/i18n/locales/fr.ts b/packages/client/src/i18n/locales/fr.ts
index acc2bdcf..e74cdb41 100644
--- a/packages/client/src/i18n/locales/fr.ts
+++ b/packages/client/src/i18n/locales/fr.ts
@@ -394,6 +394,16 @@ export default {
       themeLight: 'Clair',
       themeDark: 'Sombre',
       themeSystem: 'Systeme',
+      thinkingAnimation: 'Animation de réflexion',
+      thinkingAnimationHint: "Téléchargez une animation personnalisée (GIF, MP4, WebM, MOV, AVI, MKV) pour remplacer l'animation de réflexion IA par défaut",
+      thinkingAnimationUpload: "Télécharger l'animation",
+      thinkingAnimationUploading: 'Téléchargement...',
+      thinkingAnimationUploaded: 'Animation téléchargée avec succès',
+      thinkingAnimationReset: 'Rétablir par défaut',
+      thinkingAnimationResetDone: 'Animation rétablie par défaut',
+      thinkingAnimationFailed: 'Échec du téléchargement',
+      thinkingAnimationUnsupported: 'Type de fichier non pris en charge (utilisez GIF, MP4, WebM, MOV, AVI ou MKV)',
+      thinkingAnimationTooLarge: 'Fichier trop volumineux (max 100 Mo)',
     },
     agent: {
       maxTurns: 'Tours maximum',
@@ -698,4 +708,35 @@ export default {
     download: 'Telecharger',
     downloadFile: 'Telecharger le fichier',
   },
+
+  gatewayTabs: {
+    rename: 'Renommer',
+    export: 'Exporter',
+    delete: 'Supprimer',
+    create: 'Créer un profil',
+    nameRequired: 'Le nom du profil est requis',
+    created: 'Profil créé',
+    createFailed: 'Échec de la création',
+    renamed: 'Renommé',
+    renameFailed: 'Échec du renommage',
+    deleted: 'Profil supprimé',
+    deleteFailed: 'Échec de la suppression',
+    exported: 'Profil exporté',
+    exportFailed: "Échec de l'export",
+    cannotDeleteActive: 'Impossible de supprimer le profil actif',
+    namePlaceholder: 'Nom du profil',
+  },
+
+    avatar: {
+    user: 'Avatar utilisateur',
+    assistant: 'Avatar IA',
+    changeUserAvatar: "Changer l'avatar utilisateur",
+    changeAiAvatar: "Changer l'avatar IA",
+    cropTitle: "Recadrer l'avatar",
+    cropConfirm: 'Appliquer',
+    uploadSuccess: 'Avatar mis à jour',
+    uploadFailed: "Échec de l'envoi",
+    fileTooLarge: 'Fichier trop volumineux (max 5 Mo)',
+    invalidType: 'Format non pris en charge. Utilisez PNG, JPG, GIF ou WebP',
+  },
 }
diff --git a/packages/client/src/i18n/locales/ja.ts b/packages/client/src/i18n/locales/ja.ts
index c55e1ae0..4a549f84 100644
--- a/packages/client/src/i18n/locales/ja.ts
+++ b/packages/client/src/i18n/locales/ja.ts
@@ -394,6 +394,16 @@ export default {
       themeLight: 'ライト',
       themeDark: 'ダーク',
       themeSystem: 'システム',
+      thinkingAnimation: '思考アニメーション',
+      thinkingAnimationHint: 'カスタムアニメーション（GIF、MP4、WebM、MOV、AVI、MKV）をアップロードして、デフォルトのAI思考アニメーションを置き換えます',
+      thinkingAnimationUpload: 'アニメーションをアップロード',
+      thinkingAnimationUploading: 'アップロード中...',
+      thinkingAnimationUploaded: 'アニメーションのアップロードが成功しました',
+      thinkingAnimationReset: 'デフォルトに戻す',
+      thinkingAnimationResetDone: 'デフォルトアニメーションに戻しました',
+      thinkingAnimationFailed: 'アップロードに失敗しました',
+      thinkingAnimationUnsupported: 'サポートされていないファイル形式（GIF、MP4、WebM、MOV、AVI、MKVを使用）',
+      thinkingAnimationTooLarge: 'ファイルが大きすぎます（最大100MB）',
     },
     agent: {
       maxTurns: '最大ターン数',
@@ -698,4 +708,35 @@ export default {
     download: 'ダウンロード',
     downloadFile: 'ファイルをダウンロード',
   },
+
+  gatewayTabs: {
+    rename: '名前変更',
+    export: 'エクスポート',
+    delete: '削除',
+    create: 'プロファイル作成',
+    nameRequired: 'プロファイル名を入力してください',
+    created: 'プロファイル作成しました',
+    createFailed: 'プロファイルの作成に失敗しました',
+    renamed: '名前変更しました',
+    renameFailed: '名前の変更に失敗しました',
+    deleted: 'プロファイル削除しました',
+    deleteFailed: 'プロファイルの削除に失敗しました',
+    exported: 'エクスポートしました',
+    exportFailed: 'エクスポートに失敗しました',
+    cannotDeleteActive: 'アクティブなプロファイルは削除できません',
+    namePlaceholder: 'プロファイル名',
+  },
+
+    avatar: {
+    user: 'ユーザーアバター',
+    assistant: 'AIアバター',
+    changeUserAvatar: 'ユーザーアバターを変更',
+    changeAiAvatar: 'AIアバターを変更',
+    cropTitle: 'アバターを切り抜く',
+    cropConfirm: '適用',
+    uploadSuccess: 'アバターを更新しました',
+    uploadFailed: 'アップロードに失敗しました',
+    fileTooLarge: 'ファイルが大きすぎます（最大5MB）',
+    invalidType: 'サポートされていない形式です。PNG、JPG、GIF、WebPを使用してください',
+  },
 }
diff --git a/packages/client/src/i18n/locales/ko.ts b/packages/client/src/i18n/locales/ko.ts
index aa09ccdb..8122691b 100644
--- a/packages/client/src/i18n/locales/ko.ts
+++ b/packages/client/src/i18n/locales/ko.ts
@@ -394,6 +394,16 @@ export default {
       themeLight: '라이트',
       themeDark: '다크',
       themeSystem: '시스템',
+      thinkingAnimation: '사고 애니메이션',
+      thinkingAnimationHint: '커스텀 애니메이션(GIF, MP4, WebM, MOV, AVI, MKV)을 업로드하여 기본 AI 사고 애니메이션을 대체합니다',
+      thinkingAnimationUpload: '애니메이션 업로드',
+      thinkingAnimationUploading: '업로드 중...',
+      thinkingAnimationUploaded: '애니메이션이 성공적으로 업로드되었습니다',
+      thinkingAnimationReset: '기본값으로 복원',
+      thinkingAnimationResetDone: '기본 애니메이션으로 복원되었습니다',
+      thinkingAnimationFailed: '업로드에 실패했습니다',
+      thinkingAnimationUnsupported: '지원되지 않는 파일 형식(GIF, MP4, WebM, MOV, AVI, MKV 사용)',
+      thinkingAnimationTooLarge: '파일이 너무 큽니다(최대 100MB)',
     },
     agent: {
       maxTurns: '최대 턴 수',
@@ -698,4 +708,35 @@ export default {
     download: '다운로드',
     downloadFile: '파일 다운로드',
   },
+
+  gatewayTabs: {
+    rename: '이름 변경',
+    export: '내보내기',
+    delete: '삭제',
+    create: '프로필 생성',
+    nameRequired: '프로필 이름을 입력하세요',
+    created: '프로필 생성됨',
+    createFailed: '프로필 생성 실패',
+    renamed: '이름 변경됨',
+    renameFailed: '이름 변경 실패',
+    deleted: '프로필 삭제됨',
+    deleteFailed: '프로필 삭제 실패',
+    exported: '내보내기 완료',
+    exportFailed: '내보내기 실패',
+    cannotDeleteActive: '활성 프로필은 삭제할 수 없습니다',
+    namePlaceholder: '프로필 이름',
+  },
+
+    avatar: {
+    user: '사용자 아바타',
+    assistant: 'AI 아바타',
+    changeUserAvatar: '사용자 아바타 변경',
+    changeAiAvatar: 'AI 아바타 변경',
+    cropTitle: '아바타 자르기',
+    cropConfirm: '적용',
+    uploadSuccess: '아바타가 업데이트되었습니다',
+    uploadFailed: '업로드 실패',
+    fileTooLarge: '파일이 너무 큽니다 (최대 5MB)',
+    invalidType: '지원되지 않는 형식입니다. PNG, JPG, GIF 또는 WebP를 사용하세요',
+  },
 }
diff --git a/packages/client/src/i18n/locales/pt.ts b/packages/client/src/i18n/locales/pt.ts
index 02183f33..c9d75ec6 100644
--- a/packages/client/src/i18n/locales/pt.ts
+++ b/packages/client/src/i18n/locales/pt.ts
@@ -394,6 +394,16 @@ export default {
       themeLight: 'Claro',
       themeDark: 'Escuro',
       themeSystem: 'Sistema',
+      thinkingAnimation: 'Animação de pensamento',
+      thinkingAnimationHint: 'Envie uma animação personalizada (GIF, MP4, WebM, MOV, AVI, MKV) para substituir a animação de pensamento de IA padrão',
+      thinkingAnimationUpload: 'Enviar animação',
+      thinkingAnimationUploading: 'Enviando...',
+      thinkingAnimationUploaded: 'Animação enviada com sucesso',
+      thinkingAnimationReset: 'Redefinir para padrão',
+      thinkingAnimationResetDone: 'Animação redefinida para o padrão',
+      thinkingAnimationFailed: 'Falha no envio',
+      thinkingAnimationUnsupported: 'Tipo de arquivo não suportado (use GIF, MP4, WebM, MOV, AVI ou MKV)',
+      thinkingAnimationTooLarge: 'Arquivo muito grande (máx 100MB)',
     },
     agent: {
       maxTurns: 'Maximo de turnos',
@@ -698,4 +708,35 @@ export default {
     download: 'Baixar',
     downloadFile: 'Baixar arquivo',
   },
+
+  gatewayTabs: {
+    rename: 'Renomear',
+    export: 'Exportar',
+    delete: 'Excluir',
+    create: 'Criar perfil',
+    nameRequired: 'Nome do perfil obrigatório',
+    created: 'Perfil criado',
+    createFailed: 'Falha ao criar perfil',
+    renamed: 'Renomeado',
+    renameFailed: 'Falha ao renomear',
+    deleted: 'Perfil excluído',
+    deleteFailed: 'Falha ao excluir',
+    exported: 'Perfil exportado',
+    exportFailed: 'Falha ao exportar',
+    cannotDeleteActive: 'Não é possível excluir o perfil ativo',
+    namePlaceholder: 'Nome do perfil',
+  },
+
+    avatar: {
+    user: 'Avatar do usuário',
+    assistant: 'Avatar da IA',
+    changeUserAvatar: 'Alterar avatar do usuário',
+    changeAiAvatar: 'Alterar avatar da IA',
+    cropTitle: 'Cortar avatar',
+    cropConfirm: 'Aplicar',
+    uploadSuccess: 'Avatar atualizado',
+    uploadFailed: 'Falha no upload',
+    fileTooLarge: 'Arquivo muito grande (máx. 5 MB)',
+    invalidType: 'Formato não suportado. Use PNG, JPG, GIF ou WebP',
+  },
 }
diff --git a/packages/client/src/i18n/locales/zh.ts b/packages/client/src/i18n/locales/zh.ts
index a274fb22..ca5b2f76 100644
--- a/packages/client/src/i18n/locales/zh.ts
+++ b/packages/client/src/i18n/locales/zh.ts
@@ -427,6 +427,16 @@ export default {
       themeLight: '浅色',
       themeDark: '暗色',
       themeSystem: '跟随系统',
+      thinkingAnimation: '思考动画',
+      thinkingAnimationHint: '上传自定义动画（GIF、MP4、WebM、MOV、AVI、MKV）替换默认 AI 思考动画',
+      thinkingAnimationUpload: '上传动画',
+      thinkingAnimationUploading: '上传中...',
+      thinkingAnimationUploaded: '动画上传成功',
+      thinkingAnimationReset: '恢复默认',
+      thinkingAnimationResetDone: '已恢复默认动画',
+      thinkingAnimationFailed: '上传失败',
+      thinkingAnimationUnsupported: '不支持的文件类型（请使用 GIF、MP4、WebM、MOV、AVI 或 MKV）',
+      thinkingAnimationTooLarge: '文件过大（最大 100MB）',
     },
     agent: {
       maxTurns: '最大轮次',
@@ -743,4 +753,35 @@ export default {
     new_0_4_2_4: 'Chat 页面新增固定会话和实时监控',
     new_0_4_2_5: '修复内置 Provider 检测和模型匹配问题',
   },
+
+  gatewayTabs: {
+    rename: '重命名',
+    export: '导出',
+    delete: '删除',
+    create: '新建配置',
+    nameRequired: '请输入配置名称',
+    created: '配置 "{name}" 已创建',
+    createFailed: '创建配置失败',
+    renamed: '"{from}" 已重命名为 "{to}"',
+    renameFailed: '重命名失败',
+    deleted: '配置 "{name}" 已删除',
+    deleteFailed: '删除配置失败',
+    exported: '配置 "{name}" 已导出',
+    exportFailed: '导出配置失败',
+    cannotDeleteActive: '无法删除当前活动配置',
+    namePlaceholder: '配置名称',
+  },
+
+    avatar: {
+    user: '用户头像',
+    assistant: 'AI 头像',
+    changeUserAvatar: '更换用户头像',
+    changeAiAvatar: '更换 AI 头像',
+    cropTitle: '裁剪头像',
+    cropConfirm: '应用',
+    uploadSuccess: '头像已更新',
+    uploadFailed: '上传失败',
+    fileTooLarge: '文件过大（最大 5MB）',
+    invalidType: '不支持的格式，请使用 PNG、JPG、GIF 或 WebP',
+  },
 }
diff --git a/packages/client/src/stores/hermes/chat.ts b/packages/client/src/stores/hermes/chat.ts
index 965f5784..109ce8b8 100644
--- a/packages/client/src/stores/hermes/chat.ts
+++ b/packages/client/src/stores/hermes/chat.ts
@@ -1225,6 +1225,76 @@ export const useChatStore = defineStore('chat', () => {
     thinkingObservation.clear()
   }
 
+  // --- Avatar state ---
+  const userAvatarUrl = ref<string | null>(null)
+  const assistantAvatarUrl = ref<string | null>(null)
+
+  function getProfileName(): string {
+    return useProfilesStore().activeProfileName || 'default'
+  }
+
+  async function loadAvatars() {
+    const profile = getProfileName()
+    try {
+      const res = await fetch(`/api/avatar/${encodeURIComponent(profile)}/status`)
+      if (!res.ok) return
+      const data = await res.json()
+      // Add cache-buster to force reload
+      const ts = Date.now()
+      userAvatarUrl.value = data.user?.exists
+        ? `${data.user.url}?t=${ts}`
+        : null
+      assistantAvatarUrl.value = data.assistant?.exists
+        ? `${data.assistant.url}?t=${ts}`
+        : null
+    } catch {
+      // Silently ignore — avatars are optional
+    }
+  }
+
+  async function uploadAvatar(type: 'user' | 'assistant', file: File | Blob, fileName?: string) {
+    const profile = getProfileName()
+    const formData = new FormData()
+    formData.append('file', file, fileName || `${type}.png`)
+    const token = localStorage.getItem('hermes_api_key') || ''
+    const res = await fetch(`/api/avatar/${encodeURIComponent(profile)}/${type}`, {
+      method: 'POST',
+      body: formData,
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    })
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}))
+      throw new Error(err.error || `Upload failed: ${res.status}`)
+    }
+    const data = await res.json()
+    // Update local state
+    const ts = Date.now()
+    if (type === 'user') {
+      userAvatarUrl.value = `${data.url}?t=${ts}`
+    } else {
+      assistantAvatarUrl.value = `${data.url}?t=${ts}`
+    }
+    return data
+  }
+
+  async function deleteAvatar(type: 'user' | 'assistant') {
+    const profile = getProfileName()
+    const token = localStorage.getItem('hermes_api_key') || ''
+    const res = await fetch(`/api/avatar/${encodeURIComponent(profile)}/${type}`, {
+      method: 'DELETE',
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    })
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}))
+      throw new Error(err.error || `Delete failed: ${res.status}`)
+    }
+    if (type === 'user') {
+      userAvatarUrl.value = null
+    } else {
+      assistantAvatarUrl.value = null
+    }
+  }
+
   return {
     sessions,
     activeSessionId,
@@ -1252,5 +1322,12 @@ export const useChatStore = defineStore('chat', () => {
     noteReasoningStart,
     noteReasoningEnd,
     clearThinkingObservationFor,
+
+    // Avatar
+    userAvatarUrl,
+    assistantAvatarUrl,
+    loadAvatars,
+    uploadAvatar,
+    deleteAvatar,
   }
 })
diff --git a/packages/client/src/views/hermes/ChatView.vue b/packages/client/src/views/hermes/ChatView.vue
index a22eaafc..eb046eab 100644
--- a/packages/client/src/views/hermes/ChatView.vue
+++ b/packages/client/src/views/hermes/ChatView.vue
@@ -14,6 +14,8 @@ onMounted(async () => {
   // 先加载 profile，确保缓存 key 使用正确的 profile name
   await profilesStore.fetchProfiles()
   chatStore.loadSessions()
+  // Load avatars for current profile
+  chatStore.loadAvatars()
 })
 </script>
 
diff --git a/packages/server/src/controllers/avatar.ts b/packages/server/src/controllers/avatar.ts
new file mode 100644
index 00000000..33dd6a81
--- /dev/null
+++ b/packages/server/src/controllers/avatar.ts
@@ -0,0 +1,206 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync, unlinkSync, readdirSync } from 'fs'
+import { resolve, join, basename, extname } from 'path'
+import { randomBytes } from 'crypto'
+import { config } from '../config'
+
+const DATA_DIR = join(config.dataDir, 'avatars')
+const ALLOWED_TYPES = ['user', 'assistant']
+const ALLOWED_EXTS = ['.png', '.jpg', '.jpeg', '.gif', '.webp']
+const ANIMATED_EXTS = ['.gif', '.apng']
+const MAX_SIZE = 5 * 1024 * 1024 // 5MB
+
+// MIME map
+const MIME_MAP: Record<string, string> = {
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+}
+
+// Ensure data directory exists
+if (!existsSync(DATA_DIR)) {
+  mkdirSync(DATA_DIR, { recursive: true })
+}
+
+/** Resolve the avatar directory for a given profile */
+function avatarDir(profile: string): string {
+  // Sanitize profile name to prevent path traversal
+  const safe = basename(profile)
+  if (safe !== profile || safe === '.' || safe === '..') {
+    throw new Error('Invalid profile name')
+  }
+  return join(DATA_DIR, safe)
+}
+
+/** Resolve the avatar file path */
+function avatarPath(profile: string, type: string): string | null {
+  if (!ALLOWED_TYPES.includes(type)) return null
+  const dir = avatarDir(profile)
+  // Check for any allowed extension
+  for (const ext of ALLOWED_EXTS) {
+    const p = join(dir, `${type}${ext}`)
+    if (existsSync(p)) return p
+  }
+  return null
+}
+
+/** Split multipart body into parts */
+function splitMultipart(raw: Buffer, boundary: Buffer): Buffer[] {
+  const parts: Buffer[] = []
+  let start = 0
+  while (true) {
+    const idx = raw.indexOf(boundary, start)
+    if (idx === -1) break
+    if (start > 0) {
+      const end = idx - 2 // before \r\n
+      if (end > start) parts.push(raw.subarray(start, end))
+    }
+    start = idx + boundary.length + 2 // skip \r\n after boundary
+  }
+  return parts
+}
+
+/** GET /api/avatar/:profile/:type — public (serving avatar images) */
+export async function getAvatar(ctx: any) {
+  const { profile, type } = ctx.params
+  if (!ALLOWED_TYPES.includes(type)) {
+    ctx.status = 400; ctx.body = { error: 'Invalid type' }; return
+  }
+  try {
+    const filePath = avatarPath(profile, type)
+    if (!filePath) {
+      ctx.status = 404; ctx.body = { error: 'Not found' }; return
+    }
+    const ext = extname(filePath).toLowerCase()
+    ctx.set('Content-Type', MIME_MAP[ext] || 'application/octet-stream')
+    ctx.set('Cache-Control', 'public, max-age=86400')
+    ctx.body = readFileSync(filePath)
+  } catch {
+    ctx.status = 400; ctx.body = { error: 'Invalid profile' }
+  }
+}
+
+/** GET /api/avatar/:profile/status — public (check avatar existence) */
+export async function getStatus(ctx: any) {
+  const { profile } = ctx.params
+  try {
+    const dir = avatarDir(profile)
+    const result: Record<string, { exists: boolean; url?: string }> = {}
+    for (const type of ALLOWED_TYPES) {
+      const filePath = avatarPath(profile, type)
+      if (filePath) {
+        const ext = basename(filePath)
+        result[type] = { exists: true, url: `/api/avatar/${encodeURIComponent(profile)}/${type}` }
+      } else {
+        result[type] = { exists: false }
+      }
+    }
+    ctx.body = result
+  } catch {
+    ctx.status = 400; ctx.body = { error: 'Invalid profile' }
+  }
+}
+
+/** POST /api/avatar/:profile/:type — protected (upload avatar) */
+export async function uploadAvatar(ctx: any) {
+  const { profile, type } = ctx.params
+  if (!ALLOWED_TYPES.includes(type)) {
+    ctx.status = 400; ctx.body = { error: 'Invalid type' }; return
+  }
+
+  const contentType = ctx.get('content-type') || ''
+  if (!contentType.startsWith('multipart/form-data')) {
+    ctx.status = 400; ctx.body = { error: 'Expected multipart/form-data' }; return
+  }
+  const boundary = '--' + contentType.split('boundary=')[1]
+  if (!boundary) {
+    ctx.status = 400; ctx.body = { error: 'Missing boundary' }; return
+  }
+
+  const chunks: Buffer[] = []
+  let totalSize = 0
+  for await (const chunk of ctx.req) {
+    totalSize += chunk.length
+    if (totalSize > MAX_SIZE) {
+      ctx.status = 413; ctx.body = { error: `File too large (max ${MAX_SIZE / 1024 / 1024}MB)` }; return
+    }
+    chunks.push(chunk)
+  }
+  const raw = Buffer.concat(chunks)
+  const boundaryBuf = Buffer.from(boundary)
+  const parts = splitMultipart(raw, boundaryBuf)
+
+  for (const part of parts) {
+    const headerEnd = part.indexOf(Buffer.from('\r\n\r\n'))
+    if (headerEnd === -1) continue
+    const header = part.subarray(0, headerEnd).toString('utf-8')
+    const data = part.subarray(headerEnd + 4, part.length - 2)
+
+    let filename = ''
+    const filenameStarMatch = header.match(/filename\*=UTF-8''(.+)/i)
+    if (filenameStarMatch) {
+      filename = decodeURIComponent(filenameStarMatch[1])
+    } else {
+      const filenameMatch = header.match(/filename="([^"]+)"/)
+      if (!filenameMatch) continue
+      filename = filenameMatch[1]
+    }
+
+    const ext = extname(filename).toLowerCase()
+    if (!ALLOWED_EXTS.includes(ext)) {
+      ctx.status = 400; ctx.body = { error: `Unsupported file type: ${ext}. Allowed: ${ALLOWED_EXTS.join(', ')}` }; return
+    }
+
+    // Ensure profile directory exists
+    let dir: string
+    try {
+      dir = avatarDir(profile)
+    } catch {
+      ctx.status = 400; ctx.body = { error: 'Invalid profile name' }; return
+    }
+    if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
+
+    // Delete old avatar files for this type
+    for (const oldExt of ALLOWED_EXTS) {
+      const oldPath = join(dir, `${type}${oldExt}`)
+      if (existsSync(oldPath)) {
+        try { unlinkSync(oldPath) } catch {}
+      }
+    }
+
+    // Save new file
+    const savedName = `${type}${ext}`
+    writeFileSync(join(dir, savedName), data)
+
+    const url = `/api/avatar/${encodeURIComponent(profile)}/${type}`
+    ctx.body = {
+      success: true,
+      type,
+      profile,
+      size: data.length,
+      url,
+    }
+    return
+  }
+
+  ctx.status = 400; ctx.body = { error: 'No file found in upload' }
+}
+
+/** DELETE /api/avatar/:profile/:type — protected (delete avatar) */
+export async function deleteAvatar(ctx: any) {
+  const { profile, type } = ctx.params
+  if (!ALLOWED_TYPES.includes(type)) {
+    ctx.status = 400; ctx.body = { error: 'Invalid type' }; return
+  }
+
+  try {
+    const filePath = avatarPath(profile, type)
+    if (filePath) {
+      unlinkSync(filePath)
+    }
+    ctx.body = { success: true, type, profile }
+  } catch {
+    ctx.status = 400; ctx.body = { error: 'Invalid profile' }
+  }
+}
diff --git a/packages/server/src/controllers/thinking-animation.ts b/packages/server/src/controllers/thinking-animation.ts
new file mode 100644
index 00000000..4ce169c9
--- /dev/null
+++ b/packages/server/src/controllers/thinking-animation.ts
@@ -0,0 +1,162 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync, unlinkSync } from 'fs'
+import { resolve, join, basename } from 'path'
+import { randomBytes } from 'crypto'
+import { config } from '../config'
+
+const DATA_DIR = join(config.dataDir, 'thinking-animation')
+const ALLOWED_EXTS = ['.gif', '.mp4', '.webm', '.mov', '.avi', '.mkv']
+const MAX_SIZE = 100 * 1024 * 1024 // 100MB
+
+// Ensure data directory exists
+if (!existsSync(DATA_DIR)) {
+  mkdirSync(DATA_DIR, { recursive: true })
+}
+
+/** Safe path resolution to prevent traversal */
+function safePath(filename: string): string | null {
+  const cleaned = basename(filename)
+  if (cleaned !== filename || cleaned === '.' || cleaned === '..') return null
+  const ext = '.' + cleaned.split('.').pop()?.toLowerCase()
+  if (!ALLOWED_EXTS.includes(ext)) return null
+  return join(DATA_DIR, cleaned)
+}
+
+/** Split multipart body into parts */
+function splitMultipart(raw: Buffer, boundary: Buffer): Buffer[] {
+  const parts: Buffer[] = []
+  let start = 0
+  while (true) {
+    const idx = raw.indexOf(boundary, start)
+    if (idx === -1) break
+    if (start > 0) {
+      const end = idx - 2 // before \r\n
+      if (end > start) parts.push(raw.subarray(start, end))
+    }
+    start = idx + boundary.length + 2 // skip \r\n after boundary
+  }
+  return parts
+}
+
+/** GET /api/thinking-animation/status — public */
+export async function getStatus(ctx: any) {
+  if (!existsSync(DATA_DIR)) {
+    ctx.body = { hasCustom: false }; return
+  }
+  const { readdirSync } = await import('fs')
+  const files = readdirSync(DATA_DIR).filter(f => {
+    const ext = '.' + f.split('.').pop()?.toLowerCase()
+    return ALLOWED_EXTS.includes(ext)
+  })
+  if (files.length === 0) {
+    ctx.body = { hasCustom: false }; return
+  }
+  const file = files[0]
+  const ext = '.' + file.split('.').pop()?.toLowerCase()
+  ctx.body = {
+    hasCustom: true,
+    filename: file,
+    type: ext === '.gif' ? 'gif' : 'video',
+    url: `/api/thinking-animation/file/${encodeURIComponent(file)}`
+  }
+}
+
+/** GET /api/thinking-animation/file/:filename — public */
+export async function getFile(ctx: any) {
+  const filename = ctx.params.filename
+  const filePath = safePath(filename)
+  if (!filePath || !existsSync(filePath)) {
+    ctx.status = 404; ctx.body = { error: 'Not found' }; return
+  }
+  const ext = '.' + filename.split('.').pop()?.toLowerCase()
+  const mimeMap: Record<string, string> = {
+    '.gif': 'image/gif', '.mp4': 'video/mp4', '.webm': 'video/webm',
+    '.mov': 'video/quicktime', '.avi': 'video/x-msvideo', '.mkv': 'video/x-matroska'
+  }
+  ctx.set('Content-Type', mimeMap[ext] || 'application/octet-stream')
+  ctx.set('Cache-Control', 'public, max-age=86400')
+  ctx.body = readFileSync(filePath)
+}
+
+/** POST /api/thinking-animation/upload — protected */
+export async function upload(ctx: any) {
+  const contentType = ctx.get('content-type') || ''
+  if (!contentType.startsWith('multipart/form-data')) {
+    ctx.status = 400; ctx.body = { error: 'Expected multipart/form-data' }; return
+  }
+  const boundary = '--' + contentType.split('boundary=')[1]
+  if (!boundary) {
+    ctx.status = 400; ctx.body = { error: 'Missing boundary' }; return
+  }
+
+  const chunks: Buffer[] = []
+  let totalSize = 0
+  for await (const chunk of ctx.req) {
+    totalSize += chunk.length
+    if (totalSize > MAX_SIZE) {
+      ctx.status = 413; ctx.body = { error: `File too large (max ${MAX_SIZE / 1024 / 1024}MB)` }; return
+    }
+    chunks.push(chunk)
+  }
+  const raw = Buffer.concat(chunks)
+  const boundaryBuf = Buffer.from(boundary)
+  const parts = splitMultipart(raw, boundaryBuf)
+
+  for (const part of parts) {
+    const headerEnd = part.indexOf(Buffer.from('\r\n\r\n'))
+    if (headerEnd === -1) continue
+    const header = part.subarray(0, headerEnd).toString('utf-8')
+    const data = part.subarray(headerEnd + 4, part.length - 2)
+
+    let filename = ''
+    const filenameStarMatch = header.match(/filename\*=UTF-8''(.+)/i)
+    if (filenameStarMatch) {
+      filename = decodeURIComponent(filenameStarMatch[1])
+    } else {
+      const filenameMatch = header.match(/filename="([^"]+)"/)
+      if (!filenameMatch) continue
+      filename = filenameMatch[1]
+    }
+
+    const ext = '.' + filename.split('.').pop()?.toLowerCase()
+    if (!ALLOWED_EXTS.includes(ext)) {
+      ctx.status = 400; ctx.body = { error: `Unsupported file type: ${ext}` }; return
+    }
+
+    // Delete old animation files
+    const { readdirSync } = await import('fs')
+    if (existsSync(DATA_DIR)) {
+      for (const old of readdirSync(DATA_DIR)) {
+        try { unlinkSync(join(DATA_DIR, old)) } catch {}
+      }
+    }
+
+    // Save new file with random name
+    const savedName = randomBytes(8).toString('hex') + ext
+    writeFileSync(join(DATA_DIR, savedName), data)
+
+    ctx.body = {
+      success: true,
+      filename: savedName,
+      originalName: filename,
+      size: data.length,
+      type: ext === '.gif' ? 'gif' : 'video',
+      url: `/api/thinking-animation/file/${encodeURIComponent(savedName)}`
+    }
+    return
+  }
+
+  ctx.status = 400; ctx.body = { error: 'No file found in upload' }
+}
+
+/** DELETE /api/thinking-animation — protected */
+export async function resetAnimation(ctx: any) {
+  if (!existsSync(DATA_DIR)) {
+    ctx.body = { success: true }; return
+  }
+  const { readdirSync } = await import('fs')
+  const files = readdirSync(DATA_DIR)
+  for (const f of files) {
+    try { unlinkSync(join(DATA_DIR, f)) } catch {}
+  }
+  ctx.body = { success: true }
+}
diff --git a/packages/server/src/routes/avatar.ts b/packages/server/src/routes/avatar.ts
new file mode 100644
index 00000000..76490c6c
--- /dev/null
+++ b/packages/server/src/routes/avatar.ts
@@ -0,0 +1,12 @@
+import Router from '@koa/router'
+import * as ctrl from '../controllers/avatar'
+
+// Public routes (no auth required) — needed for <img src>
+export const avatarPublicRoutes = new Router()
+avatarPublicRoutes.get('/api/avatar/:profile/status', ctrl.getStatus)
+avatarPublicRoutes.get('/api/avatar/:profile/:type', ctrl.getAvatar)
+
+// Protected routes (auth required)
+export const avatarProtectedRoutes = new Router()
+avatarProtectedRoutes.post('/api/avatar/:profile/:type', ctrl.uploadAvatar)
+avatarProtectedRoutes.delete('/api/avatar/:profile/:type', ctrl.deleteAvatar)
diff --git a/packages/server/src/routes/index.ts b/packages/server/src/routes/index.ts
index f1294b54..7b0daa02 100644
--- a/packages/server/src/routes/index.ts
+++ b/packages/server/src/routes/index.ts
@@ -27,6 +27,12 @@ import { jobRoutes } from './hermes/jobs'
 import { proxyRoutes, proxyMiddleware } from './hermes/proxy'
 import { groupChatRoutes, setGroupChatServer } from './hermes/group-chat'
 
+// Thinking animation routes
+import { thinkingAnimationPublicRoutes, thinkingAnimationProtectedRoutes } from './thinking-animation'
+
+// Avatar routes
+import { avatarPublicRoutes, avatarProtectedRoutes } from './avatar'
+
 /**
  * Register all routes on the Koa app.
  * Public routes are registered first, then auth middleware,
@@ -37,6 +43,8 @@ export function registerRoutes(app: any, requireAuth: (ctx: Context, next: Next)
   app.use(healthRoutes.routes())
   app.use(webhookRoutes.routes())
   app.use(authPublicRoutes.routes())
+  app.use(thinkingAnimationPublicRoutes.routes())
+  app.use(avatarPublicRoutes.routes())
 
   // --- Auth middleware: all routes below require authentication ---
   app.use(requireAuth)
@@ -62,6 +70,8 @@ export function registerRoutes(app: any, requireAuth: (ctx: Context, next: Next)
   app.use(fileRoutes.routes())              // Must be before proxy (proxy catch-all matches everything)
   app.use(downloadRoutes.routes())          // Must be before proxy
   app.use(jobRoutes.routes())               // Must be before proxy
+  app.use(thinkingAnimationProtectedRoutes.routes())
+  app.use(avatarProtectedRoutes.routes())
   app.use(proxyRoutes.routes())
 
   // Proxy catch-all middleware (must be last)
diff --git a/packages/server/src/routes/thinking-animation.ts b/packages/server/src/routes/thinking-animation.ts
new file mode 100644
index 00000000..2f464b75
--- /dev/null
+++ b/packages/server/src/routes/thinking-animation.ts
@@ -0,0 +1,12 @@
+import Router from '@koa/router'
+import * as ctrl from '../controllers/thinking-animation'
+
+// Public routes (no auth required) — needed for <img>/<video> src
+export const thinkingAnimationPublicRoutes = new Router()
+thinkingAnimationPublicRoutes.get('/api/thinking-animation/status', ctrl.getStatus)
+thinkingAnimationPublicRoutes.get('/api/thinking-animation/file/:filename', ctrl.getFile)
+
+// Protected routes (auth required)
+export const thinkingAnimationProtectedRoutes = new Router()
+thinkingAnimationProtectedRoutes.post('/api/thinking-animation/upload', ctrl.upload)
+thinkingAnimationProtectedRoutes.delete('/api/thinking-animation', ctrl.resetAnimation)
diff --git a/packages/server/src/services/hermes/gateway-manager.ts b/packages/server/src/services/hermes/gateway-manager.ts
index 92416f97..2fd51911 100644
--- a/packages/server/src/services/hermes/gateway-manager.ts
+++ b/packages/server/src/services/hermes/gateway-manager.ts
@@ -578,15 +578,14 @@ export class GatewayManager {
         try { await this.stop(name) } catch { }
       }
 
-      await this.resolvePort(name)
-
-      // Skip remote profiles — local hermes command cannot start remote gateways
+      // Skip remote profiles BEFORE resolvePort — local port checks fail on remote IPs
       const { host } = this.readProfilePort(name)
       if (host && host !== '127.0.0.1' && host !== 'localhost') {
         logger.info('%s: remote profile (host=%s), skipping auto-start', name, host)
         continue
       }
 
+      await this.resolvePort(name)
       toStart.push(name)
     }