diff --git a/package.json b/package.json
index 23b1929..adc19da 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "analyze": "pnpm clean && ANALYZE=true next build",
     "start": "next start",
     "lint": "next lint",
-    "clean": "rm -rf .next"
+    "clean": "rm -rf .next",
+    "serve": "serve -s out -p 3010"
   },
   "dependencies": {
     "@mdx-js/loader": "^3.0.1",
@@ -28,6 +29,7 @@
     "next": "14.2.6",
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.3.0",
+    "next-view-transitions": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
@@ -52,4 +54,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34c75e6..883b755 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       next-themes:
         specifier: ^0.3.0
         version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-view-transitions:
+        specifier: ^0.3.0
+        version: 0.3.0(next@14.2.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
         specifier: ^18
         version: 18.3.1
@@ -2063,6 +2066,13 @@ packages:
       react: ^16.8 || ^17 || ^18
       react-dom: ^16.8 || ^17 || ^18
 
+  next-view-transitions@0.3.0:
+    resolution: {integrity: sha512-EfMG4sQR48Q40apCl0rWqTvpDNk4TcdlFjcsGd2ZOBJMNlwfuB8lnwhOL5A0kKWnZwXlMgDPFXY7qwoOY+NhtQ==}
+    peerDependencies:
+      next: ^14.0.0
+      react: ^18.2.0
+      react-dom: ^18.2.0
+
   next@14.2.6:
     resolution: {integrity: sha512-57Su7RqXs5CBKKKOagt8gPhMM3CpjgbeQhrtei2KLAA1vTNm7jfKS+uDARkSW8ZETUflDCBIsUKGSyQdRs4U4g==}
     engines: {node: '>=18.17.0'}
@@ -5284,6 +5294,12 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  next-view-transitions@0.3.0(next@14.2.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      next: 14.2.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   next@14.2.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@next/env': 14.2.6
diff --git a/src/app/blog/BlogClientComponent.tsx b/src/app/blog/BlogClientComponent.tsx
index 65fe5b2..227269d 100644
--- a/src/app/blog/BlogClientComponent.tsx
+++ b/src/app/blog/BlogClientComponent.tsx
@@ -124,14 +124,14 @@ export default function BlogList() {
   return (
     <div className="container mx-auto px-4 py-8">
       <h1 className="text-4xl font-bold mb-8 text-center">博客文章</h1>
-      
+
       <BlogSearch
         searchTerm={searchTerm}
         onSearchChange={handleSearch}
         sortOption={sortOption}
         onSortChange={(value: SortOption) => setSortOption(value)}
       />
-      
+
       <TagList
         allTags={allTags}
         selectedTag={selectedTag}
@@ -140,7 +140,7 @@ export default function BlogList() {
         onToggleExpand={() => setIsTagsExpanded(!isTagsExpanded)}
         initialTagCount={INITIAL_TAG_COUNT}
       />
-      
+
       <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
         {isLoading ? (
           Array.from({ length: POSTS_PER_PAGE }).map((_, index) => (
@@ -187,7 +187,7 @@ export default function BlogList() {
           </div>
         )}
       </div>
-      
+
       {filteredPostsMemo.length > 0 && (
         <Pagination
           currentPage={currentPage}
diff --git a/src/app/blog/BlogPostCard.tsx b/src/app/blog/BlogPostCard.tsx
index 77e33cd..c9d7f69 100644
--- a/src/app/blog/BlogPostCard.tsx
+++ b/src/app/blog/BlogPostCard.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { motion } from "framer-motion";
 import {
   Card,
diff --git a/src/app/blog/[id]/BlogFooter.tsx b/src/app/blog/[id]/BlogFooter.tsx
index 7e71a1e..2d84602 100644
--- a/src/app/blog/[id]/BlogFooter.tsx
+++ b/src/app/blog/[id]/BlogFooter.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { Badge, Button } from "@/components/ui";
 import { BlogPost } from "@/data/blogPosts";
 
diff --git a/src/app/blog/[id]/RelatedPosts.tsx b/src/app/blog/[id]/RelatedPosts.tsx
index 62e53d8..a784920 100644
--- a/src/app/blog/[id]/RelatedPosts.tsx
+++ b/src/app/blog/[id]/RelatedPosts.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui";
 import { BlogPost } from "@/data/blogPosts";
 
diff --git a/src/app/blog/[id]/ShareButtons.tsx b/src/app/blog/[id]/ShareButtons.tsx
index ffb2d7c..b25aa6e 100644
--- a/src/app/blog/[id]/ShareButtons.tsx
+++ b/src/app/blog/[id]/ShareButtons.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { FaTwitter, FaFacebook, FaLinkedin } from "react-icons/fa";
 
 interface ShareButtonsProps {
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/src/app/favicon.ico and /dev/null differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 82a93fd..0ead0ff 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,8 @@ import Footer from "@/components/Footer";
 
 import { cn } from "@/lib/utils";
 
+import { ViewTransitions } from "next-view-transitions";
+
 import { ThemeProvider } from "next-themes";
 import AnimatedLayout from "@/components/AnimatedLayout";
 
@@ -22,24 +24,26 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="zh" suppressHydrationWarning className="h-full">
-      <link rel="icon" href="/next.svg" type="image/svg+xml" />
-      <body
-        className={cn(
-          `${inter.className} flex flex-col bg-background font-sans antialiased h-full`,
-          inter.variable
-        )}
-      >
-        <ThemeProvider attribute="class">
-          <Header />
-          <AnimatedLayout>
-            <main className="flex-grow container mx-auto px-4 h-full">
-              {children}
-            </main>
-          </AnimatedLayout>
-          <Footer />
-        </ThemeProvider>
-      </body>
-    </html>
+    <ViewTransitions>
+      <html lang="zh" suppressHydrationWarning className="h-full">
+        <link rel="icon" href="/next.svg" type="image/svg+xml" />
+        <body
+          className={cn(
+            `${inter.className} flex flex-col bg-background font-sans antialiased h-full`,
+            inter.variable
+          )}
+        >
+          <ThemeProvider attribute="class">
+            <Header />
+            <AnimatedLayout>
+              <main className="flex-grow container mx-auto px-4 h-full">
+                {children}
+              </main>
+            </AnimatedLayout>
+            <Footer />
+          </ThemeProvider>
+        </body>
+      </html>
+    </ViewTransitions>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e6caa84..9f0f8a0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { motion } from "framer-motion";
 import { blogPosts } from "@/data/blogPosts";
 
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 52b6562..24ccb66 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { Badge } from "@/components/ui/badge";
 
 export default function Footer() {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e4417b6..127c13f 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { usePathname } from "next/navigation";
 import ThemeToggle from "./ThemeToggle";
 import { Button } from "@/components/ui/button";
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3701646..2fc757a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,9 +6,6 @@ import animate from "tailwindcss-animate";
 const config = {
   darkMode: ["class"],
   content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
     "./src/**/*.{ts,tsx}",
   ],
   prefix: "",