diff --git a/src/App.vue b/src/App.vue
index 7324d7a..790f7ab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, nextTick } from 'vue'
 import PromptEditor from './components/PromptEditor.vue'
 import PromptManager from './components/PromptManager.vue'
 import PresetManager from './components/PresetManager.vue'
@@ -9,6 +9,14 @@ import GridBackground from './components/Background/GridBackground.vue'
 import DevtoolsBanner from './components/DevtoolsBanner.vue'
 import { usePromptStore } from './stores/promptStore'
 
+// Icons
+import IconEditor from './components/icons/IconEditor.vue'
+import IconPresets from './components/icons/IconPresets.vue'
+import IconManager from './components/icons/IconManager.vue'
+import IconTheme from './components/icons/IconTheme.vue'
+import IconBackground from './components/icons/IconBackground.vue'
+import IconGithub from './components/icons/IconGithub.vue'
+
 const currentView = ref<'editor' | 'manager' | 'presets'>('editor')
 const isDark = ref(false)
 const bgModes = ['particles', 'grid', 'gradient', 'off'] as const
@@ -39,10 +47,47 @@ onMounted(() => {
   }
 })
 
-function toggleTheme() {
-  isDark.value = !isDark.value
-  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
-  updateTheme()
+function toggleTheme(event: MouseEvent) {
+  const isAppearanceTransition = 'startViewTransition' in document
+    && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+  if (!isAppearanceTransition) {
+    isDark.value = !isDark.value
+    localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
+    updateTheme()
+    return
+  }
+
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y)
+  )
+
+  const transition = document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
+    updateTheme()
+    await nextTick()
+  })
+
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`
+    ]
+    document.documentElement.animate(
+      {
+        clipPath: clipPath,
+      },
+      {
+        duration: 400,
+        easing: 'ease-out',
+        pseudoElement: '::view-transition-new(root)',
+      }
+    )
+  })
 }
 
 function updateTheme() {
@@ -92,9 +137,7 @@ const bgModeLabel = computed(() => {
             title="打开 GitHub 仓库"
           >
             <!-- GitHub 标志 -->
-            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-              <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.49.5.09.682-.217.682-.483 0-.237-.009-.868-.013-1.705-2.782.604-3.37-1.342-3.37-1.342-.455-1.157-1.111-1.466-1.111-1.466-.908-.62.069-.607.069-.607 1.003.07 1.53 1.03 1.53 1.03.892 1.528 2.341 1.087 2.91.832.092-.646.35-1.087.637-1.338-2.221-.253-4.558-1.11-4.558-4.941 0-1.091.39-1.984 1.029-2.682-.104-.254-.446-1.274.098-2.656 0 0 .84-.269 2.753 1.025.798-.222 1.653-.333 2.504-.337.85.004 1.706.115 2.504.337 1.911-1.294 2.75-1.025 2.75-1.025.546 1.382.203 2.402.1 2.656.64.698 1.028 1.591 1.028 2.682 0 3.84-2.34 4.685-4.566 4.934.359.309.679.919.679 1.853 0 1.337-.012 2.415-.012 2.744 0 .268.18.577.688.479C19.137 20.163 22 16.416 22 12c0-5.523-4.477-10-10-10z"/>
-            </svg>
+            <IconGithub />
             <span class="app-title">提示词编辑器</span>
           </a>
         </div>
@@ -105,10 +148,7 @@ const bgModeLabel = computed(() => {
             :class="{ active: currentView === 'editor' }"
             @click="switchView('editor')"
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
+            <IconEditor width="16" height="16" />
             <span>编辑器</span>
           </button>
           <button 
@@ -116,11 +156,7 @@ const bgModeLabel = computed(() => {
             :class="{ active: currentView === 'presets' }"
             @click="switchView('presets')"
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" stroke="currentColor" stroke-width="2"/>
-              <polyline points="17,21 17,13 7,13 7,21" stroke="currentColor" stroke-width="2"/>
-              <polyline points="7,3 7,8 15,8" stroke="currentColor" stroke-width="2"/>
-            </svg>
+            <IconPresets width="16" height="16" />
             <span>预设管理</span>
           </button>
           <button 
@@ -128,46 +164,17 @@ const bgModeLabel = computed(() => {
             :class="{ active: currentView === 'manager' }"
             @click="switchView('manager')"
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M3 3h18v18H3zM9 9h6v6H9z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
+            <IconManager width="16" height="16" />
             <span>词库管理</span>
           </button>
         </nav>
 
         <div class="header-right">
           <button class="theme-toggle" @click="toggleTheme" title="切换主题">
-            <svg v-if="!isDark" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2"/>
-              <path d="m12 1 0 2m0 18 0 2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12l2 0m18 0 2 0M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
+            <IconTheme :is-dark="isDark" />
           </button>
           <button class="bg-toggle" :class="{ active: currentBgMode !== 'off' }" @click="cycleBackground" :title="bgModeLabel">
-            <!-- Particles Icon -->
-            <svg v-if="currentBgMode === 'particles'" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="6" cy="12" r="1.5" fill="currentColor"/>
-              <circle cx="12" cy="9" r="1.5" fill="currentColor"/>
-              <circle cx="18" cy="13" r="1.5" fill="currentColor"/>
-              <path d="M4 16c4-2 8-2 12 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-            </svg>
-            <!-- Grid Icon -->
-            <svg v-else-if="currentBgMode === 'grid'" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M3 3h18v18H3z" stroke="currentColor" stroke-width="2"/>
-              <path d="M3 9h18M3 15h18M9 3v18M15 3v18" stroke="currentColor" stroke-width="2"/>
-            </svg>
-            <!-- Gradient Icon -->
-            <svg v-else-if="currentBgMode === 'gradient'" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-              <path d="M8 12s1.5-2 4-2 4 2 4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-            <!-- Off Icon -->
-            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5 5l14 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              <circle cx="12" cy="12" r="6" stroke="currentColor" stroke-width="2"/>
-            </svg>
+            <IconBackground :mode="currentBgMode" />
           </button>
         </div>
       </div>
@@ -185,7 +192,20 @@ const bgModeLabel = computed(() => {
 </template>
 
 <style>
-/* 全局样式重置和变量定义 */
+/* View Transitions API styles */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+  z-index: 1;
+}
+::view-transition-new(root) {
+  z-index: 9999;
+}
+
 :root {
   /* 亮色主题 */
   --color-bg-primary: #ffffff;
diff --git a/src/components/icons/IconBackground.vue b/src/components/icons/IconBackground.vue
new file mode 100644
index 0000000..df971cf
--- /dev/null
+++ b/src/components/icons/IconBackground.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  mode: 'particles' | 'grid' | 'gradient' | 'off'
+}>()
+
+const iconName = computed(() => {
+  switch (props.mode) {
+    case 'particles': return 'icon-particles'
+    case 'grid': return 'icon-grid'
+    case 'gradient': return 'icon-gradient'
+    default: return 'icon-off'
+  }
+})
+</script>
+
+<template>
+  <div class="icon-bg-container">
+    <Transition name="icon-fade" mode="out-in">
+      <svg v-if="mode === 'particles'" key="particles" width="24" height="24" viewBox="0 0 24 24" fill="none" class="icon-particles">
+        <circle cx="6" cy="12" r="1.5" fill="currentColor" class="dot-1"/>
+        <circle cx="12" cy="9" r="1.5" fill="currentColor" class="dot-2"/>
+        <circle cx="18" cy="13" r="1.5" fill="currentColor" class="dot-3"/>
+        <path d="M4 16c4-2 8-2 12 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" class="wave"/>
+      </svg>
+      
+      <svg v-else-if="mode === 'grid'" key="grid" width="24" height="24" viewBox="0 0 24 24" fill="none" class="icon-grid">
+        <path d="M3 3h18v18H3z" stroke="currentColor" stroke-width="2" class="grid-border"/>
+        <path d="M3 9h18M3 15h18M9 3v18M15 3v18" stroke="currentColor" stroke-width="2" class="grid-lines"/>
+      </svg>
+      
+      <svg v-else-if="mode === 'gradient'" key="gradient" width="24" height="24" viewBox="0 0 24 24" fill="none" class="icon-gradient">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" class="gradient-circle"/>
+        <path d="M8 12s1.5-2 4-2 4 2 4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="gradient-wave"/>
+      </svg>
+      
+      <svg v-else key="off" width="24" height="24" viewBox="0 0 24 24" fill="none" class="icon-off">
+        <path d="M5 5l14 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        <circle cx="12" cy="12" r="6" stroke="currentColor" stroke-width="2"/>
+      </svg>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.icon-bg-container {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-fade-enter-active,
+.icon-fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.icon-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.8) rotate(-90deg);
+}
+
+.icon-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.8) rotate(90deg);
+}
+
+/* Animations */
+.dot-1, .dot-2, .dot-3 {
+  animation: float 3s ease-in-out infinite;
+}
+.dot-2 { animation-delay: 0.5s; }
+.dot-3 { animation-delay: 1s; }
+
+.grid-lines {
+  transition: opacity 0.3s;
+}
+.icon-grid:hover .grid-lines {
+  opacity: 0.5;
+}
+
+.gradient-circle {
+  transition: stroke-dasharray 0.5s;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-2px); }
+}
+
+.icon-bg-container:hover .wave {
+  animation: wave 2s linear infinite;
+}
+
+@keyframes wave {
+  0% { d: path("M4 16c4-2 8-2 12 0"); }
+  50% { d: path("M4 16c4 2 8 2 12 0"); }
+  100% { d: path("M4 16c4-2 8-2 12 0"); }
+}
+</style>
diff --git a/src/components/icons/IconEditor.vue b/src/components/icons/IconEditor.vue
new file mode 100644
index 0000000..41117fe
--- /dev/null
+++ b/src/components/icons/IconEditor.vue
@@ -0,0 +1,42 @@
+<template>
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    stroke-width="2" 
+    stroke-linecap="round" 
+    stroke-linejoin="round"
+    class="icon-editor"
+  >
+    <path class="paper" d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+    <path class="pencil" d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-editor {
+  overflow: visible;
+}
+
+.pencil {
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+
+.paper {
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+/* Hover effect handled by parent class usually, or we can use :hover if the svg itself is the target */
+:deep(.nav-btn:hover) .pencil,
+svg:hover .pencil {
+  transform: translate(2px, -2px) rotate(5deg);
+  animation: write 1s ease-in-out infinite alternate;
+}
+
+@keyframes write {
+  0% { transform: translate(0, 0) rotate(0); }
+  100% { transform: translate(2px, -2px) rotate(10deg); }
+}
+</style>
diff --git a/src/components/icons/IconGithub.vue b/src/components/icons/IconGithub.vue
new file mode 100644
index 0000000..9606a60
--- /dev/null
+++ b/src/components/icons/IconGithub.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg 
+    width="24" 
+    height="24" 
+    viewBox="0 0 24 24" 
+    xmlns="http://www.w3.org/2000/svg" 
+    aria-hidden="true"
+    class="icon-github"
+  >
+    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.49.5.09.682-.217.682-.483 0-.237-.009-.868-.013-1.705-2.782.604-3.37-1.342-3.37-1.342-.455-1.157-1.111-1.466-1.111-1.466-.908-.62.069-.607.069-.607 1.003.07 1.53 1.03 1.53 1.03.892 1.528 2.341 1.087 2.91.832.092-.646.35-1.087.637-1.338-2.221-.253-4.558-1.11-4.558-4.941 0-1.091.39-1.984 1.029-2.682-.104-.254-.446-1.274.098-2.656 0 0 .84-.269 2.753 1.025.798-.222 1.653-.333 2.504-.337.85.004 1.706.115 2.504.337 1.911-1.294 2.75-1.025 2.75-1.025.546 1.382.203 2.402.1 2.656.64.698 1.028 1.591 1.028 2.682 0 3.84-2.34 4.685-4.566 4.934.359.309.679.919.679 1.853 0 1.337-.012 2.415-.012 2.744 0 .268.18.577.688.479C19.137 20.163 22 16.416 22 12c0-5.523-4.477-10-10-10z"/>
+  </svg>
+</template>
+
+<style scoped>
+.icon-github {
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.icon-github:hover {
+  transform: scale(1.1) rotate(5deg);
+}
+</style>
diff --git a/src/components/icons/IconManager.vue b/src/components/icons/IconManager.vue
new file mode 100644
index 0000000..ee05341
--- /dev/null
+++ b/src/components/icons/IconManager.vue
@@ -0,0 +1,32 @@
+<template>
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    stroke-width="2" 
+    stroke-linecap="round" 
+    stroke-linejoin="round"
+    class="icon-manager"
+  >
+    <path class="disk-top" d="M21 5c0 1.66-4 3-9 3s-9-1.34-9-3 4-3 9-3 9 1.34 9 3z" />
+    <path class="disk-middle" d="M3 5v6c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+    <path class="disk-bottom" d="M3 11v6c0 1.66 4 3 9 3s9-1.34 9-3v-6" />
+  </svg>
+</template>
+
+<style scoped>
+.disk-top, .disk-middle, .disk-bottom {
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+:deep(.nav-btn:hover) .disk-top,
+svg:hover .disk-top {
+  transform: translateY(-1px);
+}
+
+:deep(.nav-btn:hover) .disk-bottom,
+svg:hover .disk-bottom {
+  transform: translateY(1px);
+}
+</style>
diff --git a/src/components/icons/IconPresets.vue b/src/components/icons/IconPresets.vue
new file mode 100644
index 0000000..ca673c8
--- /dev/null
+++ b/src/components/icons/IconPresets.vue
@@ -0,0 +1,33 @@
+<template>
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    stroke-width="2" 
+    stroke-linecap="round" 
+    stroke-linejoin="round"
+    class="icon-presets"
+  >
+    <path class="layout-main" d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+    <polyline class="layout-line-1" points="17 21 17 13 7 13 7 21" />
+    <polyline class="layout-line-2" points="7 3 7 8 15 8" />
+  </svg>
+</template>
+
+<style scoped>
+.layout-main, .layout-line-1, .layout-line-2 {
+  transition: all 0.3s ease;
+  transform-origin: center;
+}
+
+:deep(.nav-btn:hover) .layout-line-1,
+svg:hover .layout-line-1 {
+  transform: scaleY(0.9) translateY(1px);
+}
+
+:deep(.nav-btn:hover) .layout-line-2,
+svg:hover .layout-line-2 {
+  transform: translateX(1px);
+}
+</style>
diff --git a/src/components/icons/IconTheme.vue b/src/components/icons/IconTheme.vue
new file mode 100644
index 0000000..b329226
--- /dev/null
+++ b/src/components/icons/IconTheme.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+defineProps<{
+  isDark: boolean
+}>()
+</script>
+
+<template>
+  <div class="icon-theme-container">
+    <svg 
+      class="icon-sun"
+      :class="{ 'is-hidden': isDark }"
+      xmlns="http://www.w3.org/2000/svg" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      stroke="currentColor" 
+      stroke-width="2" 
+      stroke-linecap="round" 
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+    
+    <svg 
+      class="icon-moon"
+      :class="{ 'is-visible': isDark }"
+      xmlns="http://www.w3.org/2000/svg" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      stroke="currentColor" 
+      stroke-width="2" 
+      stroke-linecap="round" 
+      stroke-linejoin="round"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.icon-theme-container {
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.icon-sun {
+  opacity: 1;
+  transform: rotate(0) scale(1);
+}
+
+.icon-sun.is-hidden {
+  opacity: 0;
+  transform: rotate(90deg) scale(0.5);
+}
+
+.icon-moon {
+  opacity: 0;
+  transform: rotate(-90deg) scale(0.5);
+}
+
+.icon-moon.is-visible {
+  opacity: 1;
+  transform: rotate(0) scale(1);
+}
+
+/* Hover effects */
+.icon-theme-container:hover .icon-sun:not(.is-hidden) {
+  animation: spin 4s linear infinite;
+}
+
+.icon-theme-container:hover .icon-moon.is-visible {
+  animation: swing 2s ease-in-out infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes swing {
+  0%, 100% { transform: rotate(0) scale(1); }
+  50% { transform: rotate(-15deg) scale(1.1); }
+}
+</style>
diff --git a/src/style.css b/src/style.css
index 2875238..41029d0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -39,7 +39,7 @@ body {
     background-color: #ffffff;
   }
   a:hover {
-    color: #747bff;
+    color: #2da44e;
   }
   button {
     background-color: #f9f9f9;