diff --git a/src/components/FeaturesHighlight.tsx b/src/components/FeaturesHighlight.tsx
new file mode 100644
index 0000000..54a4ef1
--- /dev/null
+++ b/src/components/FeaturesHighlight.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { Sparkles, Zap, Video } from 'lucide-react'
+
+const FeaturesHighlight: React.FC = () => {
+  const features = [
+    {
+      icon: Sparkles,
+      title: 'AI 智能剪辑',
+      description: '使用先进的 AI 技术，自动识别精彩片段，智能生成视频剪辑'
+    },
+    {
+      icon: Zap,
+      title: '高效处理',
+      description: '优化的渲染引擎，支持多种格式，快速导出高质量视频'
+    },
+    {
+      icon: Video,
+      title: '专业工具',
+      description: '丰富的编辑工具和特效，满足从入门到专业的各种需求'
+    }
+  ]
+
+  return (
+    <div className="bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg p-8 text-white">
+      <h2 className="text-2xl font-bold mb-4">强大的功能特性</h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {features.map((feature, index) => {
+          const IconComponent = feature.icon
+          return (
+            <div key={index} className="text-center">
+              <div className="inline-flex items-center justify-center w-12 h-12 bg-white/20 rounded-lg mb-4">
+                <IconComponent size={24} />
+              </div>
+              <h3 className="font-semibold mb-2">{feature.title}</h3>
+              <p className="text-primary-100 text-sm">{feature.description}</p>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default FeaturesHighlight
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
new file mode 100644
index 0000000..76aa5a9
--- /dev/null
+++ b/src/components/ProjectCard.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { Project } from '../services/projectService'
+import ProjectImage from './ProjectImage'
+
+interface ProjectCardProps {
+  project: Project
+  formatTimeAgo: (dateString: string) => string
+}
+
+const ProjectCard: React.FC<ProjectCardProps> = ({ project, formatTimeAgo }) => {
+  return (
+    <Link
+      to={`/projects/${project.id}`}
+      className="card overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
+    >
+      <div className="aspect-video overflow-hidden">
+        <ProjectImage
+          imagePath={project.product_image}
+          alt={project.name}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      <div className="p-4">
+        <h3 className="font-medium text-secondary-900 mb-1">{project.name}</h3>
+        <p className="text-sm text-secondary-600">{formatTimeAgo(project.updated_at)}</p>
+        {project.product_name && (
+          <p className="text-xs text-secondary-500 mt-1">{project.product_name}</p>
+        )}
+      </div>
+    </Link>
+  )
+}
+
+export default ProjectCard
diff --git a/src/components/ProjectImage.tsx b/src/components/ProjectImage.tsx
new file mode 100644
index 0000000..e0e218b
--- /dev/null
+++ b/src/components/ProjectImage.tsx
@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { Video } from 'lucide-react'
+
+interface ProjectImageProps {
+  imagePath: string
+  alt: string
+  className: string
+}
+
+const ProjectImage: React.FC<ProjectImageProps> = ({ imagePath, alt, className }) => {
+  const [imageSrc, setImageSrc] = useState<string>('')
+  const [imageLoading, setImageLoading] = useState(true)
+
+  useEffect(() => {
+    const loadImage = async () => {
+      if (!imagePath) {
+        setImageLoading(false)
+        return
+      }
+      
+      if (imagePath.startsWith('http') || imagePath.startsWith('data:')) {
+        setImageSrc(imagePath)
+        setImageLoading(false)
+        return
+      }
+      
+      try {
+        const dataUrl = await invoke<string>('read_image_as_data_url', { filePath: imagePath })
+        setImageSrc(dataUrl)
+      } catch (error) {
+        console.error('Failed to read image:', error)
+      } finally {
+        setImageLoading(false)
+      }
+    }
+
+    loadImage()
+  }, [imagePath])
+
+  if (imageLoading) {
+    return <div className={`${className} bg-secondary-200 animate-pulse`}></div>
+  }
+
+  if (!imageSrc) {
+    return (
+      <div className={`${className} bg-secondary-200 flex items-center justify-center`}>
+        <Video className="text-secondary-400" size={48} />
+      </div>
+    )
+  }
+
+  return <img src={imageSrc} alt={alt} className={className} />
+}
+
+export default ProjectImage
diff --git a/src/components/QuickActions.tsx b/src/components/QuickActions.tsx
new file mode 100644
index 0000000..8ce4f91
--- /dev/null
+++ b/src/components/QuickActions.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { FolderOpen, Music, Zap, Sparkles, Database, LucideIcon } from 'lucide-react'
+
+interface QuickAction {
+  icon: LucideIcon
+  label: string
+  description: string
+  path: string
+}
+
+const QuickActions: React.FC = () => {
+  const quickActions: QuickAction[] = [
+    { icon: Sparkles, label: 'AI 视频生成', description: '使用 AI 将图片转换为动态视频', path: '/ai-video' },
+    { icon: Music, label: '音频处理', description: '处理音频文件，添加效果', path: '/audio' },
+    { icon: Zap, label: 'AI 自动剪辑', description: '使用 AI 自动生成视频剪辑', path: '/editor' },
+    { icon: FolderOpen, label: '导入媒体', description: '导入视频、音频和图片文件', path: '/media' },
+    { icon: Database, label: 'KV 存储测试', description: '测试 Cloudflare KV 键值存储功能', path: '/kv-test' },
+  ]
+
+  return (
+    <div>
+      <h2 className="text-xl font-semibold text-secondary-900 mb-6">快速操作</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {quickActions.map((action, index) => {
+          const IconComponent = action.icon
+          return (
+            <Link
+              key={index}
+              to={action.path}
+              className="card p-6 hover:shadow-md transition-shadow group"
+            >
+              <div className="flex items-start space-x-4">
+                <div className="p-3 bg-primary-100 rounded-lg group-hover:bg-primary-200 transition-colors">
+                  <IconComponent className="text-primary-600" size={24} />
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-medium text-secondary-900 mb-1">{action.label}</h3>
+                  <p className="text-sm text-secondary-600">{action.description}</p>
+                </div>
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default QuickActions
diff --git a/src/components/RecentProjects.tsx b/src/components/RecentProjects.tsx
new file mode 100644
index 0000000..d4f4030
--- /dev/null
+++ b/src/components/RecentProjects.tsx
@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { Plus, Video } from 'lucide-react'
+import { ProjectService, Project } from '../services/projectService'
+import ProjectCard from './ProjectCard'
+
+const RecentProjects: React.FC = () => {
+  const [recentProjects, setRecentProjects] = useState<Project[]>([])
+  const [loading, setLoading] = useState(true)
+
+  // 加载最近的项目
+  useEffect(() => {
+    const loadRecentProjects = async () => {
+      try {
+        const response = await ProjectService.getAllProjects()
+        if (response.status && response.data) {
+          // 按更新时间排序，取最近的3个项目
+          const sortedProjects = response.data
+            .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
+            .slice(0, 3)
+          setRecentProjects(sortedProjects)
+        }
+      } catch (error) {
+        console.error('Failed to load recent projects:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadRecentProjects()
+  }, [])
+
+  // 格式化时间显示
+  const formatTimeAgo = (dateString: string): string => {
+    const now = new Date()
+    const date = new Date(dateString)
+    const diffInMs = now.getTime() - date.getTime()
+    const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60))
+    const diffInDays = Math.floor(diffInHours / 24)
+
+    if (diffInHours < 1) {
+      return '刚刚'
+    } else if (diffInHours < 24) {
+      return `${diffInHours} 小时前`
+    } else if (diffInDays < 7) {
+      return `${diffInDays} 天前`
+    } else {
+      return date.toLocaleDateString('zh-CN')
+    }
+  }
+
+  // 加载状态骨架屏
+  const LoadingSkeleton = () => (
+    <>
+      {Array.from({ length: 3 }).map((_, index) => (
+        <div key={index} className="card overflow-hidden">
+          <div className="aspect-video bg-secondary-200 animate-pulse"></div>
+          <div className="p-4">
+            <div className="h-4 bg-secondary-200 rounded animate-pulse mb-2"></div>
+            <div className="h-3 bg-secondary-200 rounded animate-pulse w-2/3"></div>
+          </div>
+        </div>
+      ))}
+    </>
+  )
+
+  // 空状态
+  const EmptyState = () => (
+    <div className="col-span-full text-center py-8">
+      <Video className="mx-auto text-secondary-400 mb-4" size={48} />
+      <p className="text-secondary-600 mb-4">还没有项目</p>
+      <Link
+        to="/projects"
+        className="btn-primary inline-flex items-center"
+      >
+        <Plus size={16} className="mr-2" />
+        创建第一个项目
+      </Link>
+    </div>
+  )
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-semibold text-secondary-900">最近项目</h2>
+        <Link
+          to="/projects"
+          className="text-primary-600 hover:text-primary-700 text-sm font-medium"
+        >
+          查看全部
+        </Link>
+      </div>
+      
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {loading ? (
+          <LoadingSkeleton />
+        ) : recentProjects.length > 0 ? (
+          recentProjects.map((project) => (
+            <ProjectCard
+              key={project.id}
+              project={project}
+              formatTimeAgo={formatTimeAgo}
+            />
+          ))
+        ) : (
+          <EmptyState />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default RecentProjects
diff --git a/src/components/WelcomeSection.tsx b/src/components/WelcomeSection.tsx
new file mode 100644
index 0000000..a53c6a5
--- /dev/null
+++ b/src/components/WelcomeSection.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { Plus } from 'lucide-react'
+
+const WelcomeSection: React.FC = () => {
+  return (
+    <div className="text-center py-8">
+      <h1 className="text-4xl font-bold text-secondary-900 mb-4">
+        欢迎使用 MixVideo V2
+      </h1>
+      <p className="text-lg text-secondary-600 mb-8">
+        专业的视频混剪软件，让创作更简单
+      </p>
+      <div className="flex items-center justify-center space-x-4">
+        <Link
+          to="/projects"
+          className="btn-primary flex items-center"
+        >
+          <Plus size={20} className="mr-2" />
+          创建新项目
+        </Link>
+        <Link
+          to="/templates"
+          className="btn-secondary"
+        >
+          浏览模板
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default WelcomeSection
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
deleted file mode 100644
index c1482ac..0000000
--- a/src/pages/HomePage.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Link } from 'react-router-dom'
-import { Plus, FolderOpen, Video, Music, Zap, Sparkles, Database } from 'lucide-react'
-import { invoke } from '@tauri-apps/api/core'
-import { ProjectService, Project } from '../services/projectService'
-
-const HomePage: React.FC = () => {
-  const [recentProjects, setRecentProjects] = useState<Project[]>([])
-  const [loading, setLoading] = useState(true)
-
-  // 加载最近的项目
-  useEffect(() => {
-    const loadRecentProjects = async () => {
-      try {
-        const response = await ProjectService.getAllProjects()
-        if (response.status && response.data) {
-          // 按更新时间排序，取最近的3个项目
-          const sortedProjects = response.data
-            .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
-            .slice(0, 3)
-          setRecentProjects(sortedProjects)
-        }
-      } catch (error) {
-        console.error('Failed to load recent projects:', error)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    loadRecentProjects()
-  }, [])
-
-  // 简化的图片组件
-  const ProjectImage: React.FC<{ imagePath: string; alt: string; className: string }> = ({
-    imagePath, alt, className
-  }) => {
-    const [imageSrc, setImageSrc] = useState<string>('')
-    const [imageLoading, setImageLoading] = useState(true)
-
-    useEffect(() => {
-      const loadImage = async () => {
-        if (!imagePath) {
-          setImageLoading(false)
-          return
-        }
-
-        if (imagePath.startsWith('http') || imagePath.startsWith('data:')) {
-          setImageSrc(imagePath)
-          setImageLoading(false)
-          return
-        }
-
-        try {
-          const dataUrl = await invoke<string>('read_image_as_data_url', { filePath: imagePath })
-          setImageSrc(dataUrl)
-        } catch (error) {
-          console.error('Failed to read image:', error)
-        } finally {
-          setImageLoading(false)
-        }
-      }
-
-      loadImage()
-    }, [imagePath])
-
-    if (imageLoading) {
-      return <div className={`${className} bg-secondary-200 animate-pulse`}></div>
-    }
-
-    if (!imageSrc) {
-      return (
-        <div className={`${className} bg-secondary-200 flex items-center justify-center`}>
-          <Video className="text-secondary-400" size={48} />
-        </div>
-      )
-    }
-
-    return <img src={imageSrc} alt={alt} className={className} />
-  }
-
-  // 格式化时间显示
-  const formatTimeAgo = (dateString: string): string => {
-    const now = new Date()
-    const date = new Date(dateString)
-    const diffInMs = now.getTime() - date.getTime()
-    const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60))
-    const diffInDays = Math.floor(diffInHours / 24)
-
-    if (diffInHours < 1) {
-      return '刚刚'
-    } else if (diffInHours < 24) {
-      return `${diffInHours} 小时前`
-    } else if (diffInDays < 7) {
-      return `${diffInDays} 天前`
-    } else {
-      return date.toLocaleDateString('zh-CN')
-    }
-  }
-
-  const quickActions = [
-    { icon: Sparkles, label: 'AI 视频生成', description: '使用 AI 将图片转换为动态视频', path: '/ai-video' },
-    { icon: Music, label: '音频处理', description: '处理音频文件，添加效果', path: '/audio' },
-    { icon: Zap, label: 'AI 自动剪辑', description: '使用 AI 自动生成视频剪辑', path: '/editor' },
-    { icon: FolderOpen, label: '导入媒体', description: '导入视频、音频和图片文件', path: '/media' },
-    { icon: Database, label: 'KV 存储测试', description: '测试 Cloudflare KV 键值存储功能', path: '/kv-test' },
-  ]
-
-
-  return (
-    <div className="p-6 space-y-8">
-      {/* Welcome Section */}
-      <div className="text-center py-8">
-        <h1 className="text-4xl font-bold text-secondary-900 mb-4">
-          欢迎使用 MixVideo V2
-        </h1>
-        <p className="text-lg text-secondary-600 mb-8">
-          专业的视频混剪软件，让创作更简单
-        </p>
-        <div className="flex items-center space-x-4">
-          <Link
-            to="/projects"
-            className="btn-primary px-8 py-3 text-lg"
-          >
-            <Plus className="mr-2" size={20} />
-            开始新项目
-          </Link>
-        </div>
-      </div>
-
-      {/* Quick Actions */}
-      <div>
-        <h2 className="text-2xl font-semibold text-secondary-900 mb-4">快速操作</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          {quickActions.map((action, index) => {
-            const Icon = action.icon
-            return (
-              <Link
-                key={index}
-                to={action.path}
-                className="card p-6 hover:shadow-md transition-shadow cursor-pointer group block"
-              >
-                <div className="flex flex-col items-center text-center space-y-3">
-                  <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center group-hover:bg-primary-200 transition-colors">
-                    <Icon className="text-primary-600" size={24} />
-                  </div>
-                  <h3 className="font-medium text-secondary-900">{action.label}</h3>
-                  <p className="text-sm text-secondary-600">{action.description}</p>
-                </div>
-              </Link>
-            )
-          })}
-        </div>
-      </div>
-
-      {/* Recent Projects */}
-      <div>
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-2xl font-semibold text-secondary-900">最近项目</h2>
-          <Link to="/projects" className="btn-ghost px-4 py-2">
-            查看全部
-          </Link>
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {loading ? (
-            // 加载状态
-            Array.from({ length: 3 }).map((_, index) => (
-              <div key={index} className="card overflow-hidden">
-                <div className="aspect-video bg-secondary-200 animate-pulse"></div>
-                <div className="p-4">
-                  <div className="h-4 bg-secondary-200 rounded animate-pulse mb-2"></div>
-                  <div className="h-3 bg-secondary-200 rounded animate-pulse w-2/3"></div>
-                </div>
-              </div>
-            ))
-          ) : recentProjects.length > 0 ? (
-            // 显示真实项目
-            recentProjects.map((project) => (
-              <Link
-                key={project.id}
-                to={`/projects/${project.id}`}
-                className="card overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
-              >
-                <div className="aspect-video overflow-hidden">
-                  <ProjectImage
-                    imagePath={project.product_image}
-                    alt={project.name}
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-                <div className="p-4">
-                  <h3 className="font-medium text-secondary-900 mb-1">{project.name}</h3>
-                  <p className="text-sm text-secondary-600">{formatTimeAgo(project.updated_at)}</p>
-                  {project.product_name && (
-                    <p className="text-xs text-secondary-500 mt-1">{project.product_name}</p>
-                  )}
-                </div>
-              </Link>
-            ))
-          ) : (
-            // 空状态
-            <div className="col-span-full text-center py-8">
-              <Video className="mx-auto text-secondary-400 mb-4" size={48} />
-              <p className="text-secondary-600 mb-4">还没有项目</p>
-              <Link
-                to="/projects"
-                className="btn-primary inline-flex items-center"
-              >
-                <Plus size={16} className="mr-2" />
-                创建第一个项目
-              </Link>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Features Highlight */}
-      <div className="bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg p-8 text-white">
-        <h2 className="text-2xl font-bold mb-4">强大的功能特性</h2>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div>
-            <h3 className="font-semibold mb-2">🎬 专业剪辑</h3>
-            <p className="text-primary-100">支持多轨道编辑、特效添加、字幕制作</p>
-          </div>
-          <div>
-            <h3 className="font-semibold mb-2">🎵 音频处理</h3>
-            <p className="text-primary-100">节拍检测、音频分离、智能混音</p>
-          </div>
-          <div>
-            <h3 className="font-semibold mb-2">🤖 AI 辅助</h3>
-            <p className="text-primary-100">自动剪辑、场景检测、内容理解</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Additional Content for Testing Scroll */}
-      <div className="space-y-6">
-        <h2 className="text-2xl font-semibold text-secondary-900">更多功能</h2>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="card p-6">
-            <h3 className="text-lg font-semibold mb-3">视频效果</h3>
-            <ul className="space-y-2 text-secondary-600">
-              <li>• 滤镜和颜色调整</li>
-              <li>• 转场效果</li>
-              <li>• 动画和运动图形</li>
-              <li>• 绿幕抠像</li>
-              <li>• 画中画效果</li>
-            </ul>
-          </div>
-
-          <div className="card p-6">
-            <h3 className="text-lg font-semibold mb-3">音频功能</h3>
-            <ul className="space-y-2 text-secondary-600">
-              <li>• 降噪和音频修复</li>
-              <li>• 音频均衡器</li>
-              <li>• 音频同步</li>
-              <li>• 语音识别</li>
-              <li>• 音频可视化</li>
-            </ul>
-          </div>
-
-          <div className="card p-6">
-            <h3 className="text-lg font-semibold mb-3">导出选项</h3>
-            <ul className="space-y-2 text-secondary-600">
-              <li>• 多种格式支持</li>
-              <li>• 自定义分辨率</li>
-              <li>• 批量导出</li>
-              <li>• 云端渲染</li>
-              <li>• 直播推流</li>
-            </ul>
-          </div>
-
-          <div className="card p-6">
-            <h3 className="text-lg font-semibold mb-3">协作功能</h3>
-            <ul className="space-y-2 text-secondary-600">
-              <li>• 团队协作</li>
-              <li>• 版本控制</li>
-              <li>• 评论和反馈</li>
-              <li>• 云端同步</li>
-              <li>• 权限管理</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="text-center py-8 border-t border-secondary-200">
-        <p className="text-secondary-600">
-          © 2025 MixVideo V2. 专业视频编辑软件，让创作更简单。
-        </p>
-      </div>
-    </div>
-  )
-}
-
-export default HomePage