diff --git a/app/components/home/Hero.tsx b/app/components/home/Hero.tsx
index 9e7c691..0f6a9cd 100644
--- a/app/components/home/Hero.tsx
+++ b/app/components/home/Hero.tsx
@@ -1,62 +1,80 @@
+"use client"
+
 import Link from 'next/link';
 import Image from 'next/image';
-import Img from './img.png';
-import { cn } from '@/utils/cn';
-import { buttonVariants } from '@/app/components/ui/button';
+import { useState } from 'react';
+const images = [  
+  '/assets/images/preview/shiro.png', 
+  '/assets/images/preview/kami.png',
+  '/assets/images/preview/console.png'
+];
+const imageNames = ['Shiro主题','Kami主题','控制台'];
+import { cn } from 'utils/cn';
+import { buttonVariants } from 'app/components/ui/button';
 import { LuCirclePlay } from "react-icons/lu";
 import { FaGithub } from "react-icons/fa";
 
 export function Hero() {
-    return (
-      <div className="container relative z-[2] flex flex-col overflow-hidden border-x border-t rounded-t-2xl bg-fd-background px-6 pt-12 max-md:text-center md:px-12 md:pt-16 [.uwu_&]:hidden">
-        <h1 className="mb-8 text-4xl font-medium">
-          Mix Space
-          <br />
-          An Alternative Personal Space.
-        </h1>
-        <p className="mb-8 text-fd-muted-foreground md:max-w-[80%] md:text-xl">
-          Mix Space 是一个小型个人空间站点程序。不同于传统的博客程序，采用前后端分离设计，
-          适合那些喜欢写不同风格或类型的写作爱好者。
-        </p>
-        <div className="inline-flex items-center gap-3 max-md:mx-auto">
-          <Link
-            href="/docs/core"
-            className={cn(
-              buttonVariants({ size: 'lg', className: 'rounded-full' }),
-            )}
-          >
-            <LuCirclePlay className="size-4 mr-2" /> 开始使用
-          </Link>
-          <a
-            href="https://github.com/mx-space"
-            className={cn(
-              buttonVariants({
-                size: 'lg',
-                variant: 'outline',
-                className: 'rounded-full bg-fd-background flex items-center',
-              }),
-            )}
-          >
-            <FaGithub className="size-4 mr-2" /> Github
-          </a>
+  const [currentImage, setCurrentImage] = useState(0); 
+  return (
+    <div className="container relative z-[2] flex flex-col overflow-hidden rounded-lg bg-background px-6 pt-12 max-md:text-center md:px-12 md:pt-16">
+      <h1 className="mb-8 text-4xl font-medium">
+        Mix Space
+        <br />
+        An Alternative Personal Space.
+      </h1>
+      <p className="mb-8 text-muted-foreground md:max-w-[80%] md:text-xl">
+        Mix Space 是一个小型个人空间站点程序。不同于传统的博客程序，采用前后端分离设计，
+        适合那些喜欢写不同风格或类型的写作爱好者。
+      </p>
+      <div className="inline-flex items-center gap-3 max-md:mx-auto">
+        <Link
+          href="/docs/core"
+          className={cn(
+            buttonVariants({ size: 'lg', className: 'rounded-full' }),
+          )}
+        >
+          <LuCirclePlay className="size-4 mr-2" /> 开始使用
+        </Link>
+        <a
+          href="https://github.com/mx-space"
+          className={cn(
+            buttonVariants({
+              size: 'lg',
+              variant: 'outline',
+              className: 'rounded-full bg-background flex items-center',
+            }),
+          )}
+        >
+          <FaGithub className="size-4 mr-2" /> Github
+        </a>
+      </div>
+      <div className="relative mt-8">
+        <div className="flex justify-center gap-2 mb-4">
+          {images.map((_, index) => (
+            <button
+              key={index}
+              onClick={() => setCurrentImage(index)}
+              className={`px-3 py-1 text-sm rounded-full transition-colors ${
+                index === currentImage
+                  ? 'bg-primary text-white'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              }`}
+            >
+              {imageNames[index]}
+            </button>
+          ))}
         </div>
         <Image
-          src={Img}
+          src={images[currentImage]}
           alt="preview"
-          className="mb-[-100px] mt-8 min-w-[800px] select-none duration-1000 animate-in fade-in slide-in-from-bottom-12 md:mb-[-170px] md:min-w-[1100px]"
+          width={1200}
+          height={675}
+          className="w-full max-w-[1200px] select-none duration-1000 animate-in fade-in slide-in-from-bottom-12"
           priority
         />
-        <div
-          className="absolute inset-0 z-[-1]"
-          style={{
-            backgroundImage: [
-              'radial-gradient(ellipse at top, transparent 60%, hsla(250,90%,90%,0.2))',
-              'linear-gradient(to bottom, transparent 30%, hsl(var(--primary) / 0.2))',
-              'linear-gradient(to bottom, hsl(var(--background)) 40%, transparent)',
-              'repeating-linear-gradient(45deg, transparent,transparent 60px, hsl(var(--primary)) 61px, transparent 62px)',
-            ].join(', '),
-          }}
-        />
       </div>
-    );
-  }
\ No newline at end of file
+      <div className="absolute inset-0 z-[-1] bg-gradient-to-b from-background/50 to-background" />
+    </div>
+  );
+}
diff --git a/content/docs/themes/community.mdx b/content/docs/themes/community.mdx
index ca1b42e..8a82976 100644
--- a/content/docs/themes/community.mdx
+++ b/content/docs/themes/community.mdx
@@ -11,7 +11,7 @@ import { FileText } from 'lucide-react'
 <Cards>
 <Card
   title="GitHub Action构建Shiroi Docker镜像"
-  href="https://blog.sotkg.com/2024/10/https-www-sotkg-com-posts-site-shiroi-docker-deployment.html"
+  href="https://blog.sotkg.com/posts/site/shiroi-docker-deployment"
   icon={<FileText />}
   target="_blank"
 >前端部署方式拓展博文教程 | By Mikuの鬆 </Card>
diff --git a/package.json b/package.json
index 9e1a8b6..7fd5874 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "copy-to-clipboard": "^3.3.3",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv": "^16.4.7",
-    "framer-motion": "^11.16.2",
+    "framer-motion": "^11.16.4",
     "fumadocs-core": "14.6.4",
     "fumadocs-mdx": "11.2.1",
     "fumadocs-typescript": "^3.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b8db1c3..95201ea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,8 +39,8 @@ importers:
         specifier: ^16.4.7
         version: 16.4.7
       framer-motion:
-        specifier: ^11.16.2
-        version: 11.16.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^11.16.4
+        version: 11.16.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       fumadocs-core:
         specifier: 14.6.4
         version: 14.6.4(@oramacloud/client@2.1.4)(@types/react@19.0.4)(next@15.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -1492,9 +1492,9 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  electron-to-chromium@1.5.79:
-    resolution: {integrity: sha512-nYOxJNxQ9Om4EC88BE4pPoNI8xwSFf8pU/BAeOl4Hh/b/i6V4biTAzwV7pXi3ARKeoYO5JZKMIXTryXSVer5RA==}
-
+  electron-to-chromium@1.5.80:
+    resolution: {integrity: sha512-LTrKpW0AqIuHwmlVNV+cjFYTnXtM9K37OGhpe0ZI10ScPSxqVSryZHIY3WnCS5NSYbBODRTZyhRMS2h5FAEqAw==}
+    
   emoji-regex-xs@1.0.0:
     resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
 
@@ -1629,8 +1629,9 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
-  framer-motion@11.16.2:
-    resolution: {integrity: sha512-M946d8UhmI4lVZ4Wy2bLxw7D7LWw+OZTK5eCFCpGJNpUKt17oCP7+bBM3iKp6PfJF30ngBxsdxssFjLdD85ThA==}
+  framer-motion@11.16.4:
+    resolution: {integrity: sha512-7ncPlBjrYX6iQXcTSw1kvZcHSVjEuOAW3uWuu+/+chUS4UWBMe8kCjniE4VMc2/BMo0su0Uw9sw0aWS9anpPWA==}
+    
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.0.0 || ^19.0.0
@@ -2168,8 +2169,8 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  motion-dom@11.16.1:
-    resolution: {integrity: sha512-XVNf3iCfZn9OHPZYJQy5YXXLn0NuPNvtT3YCat89oAnr4D88Cr52KqFgKa8dWElBK8uIoQhpJMJEG+dyniYycQ==}
+  motion-dom@11.16.4:
+    resolution: {integrity: sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==}
 
   motion-utils@11.16.0:
     resolution: {integrity: sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==}
@@ -3835,7 +3836,7 @@ snapshots:
   browserslist@4.24.4:
     dependencies:
       caniuse-lite: 1.0.30001692
-      electron-to-chromium: 1.5.79
+      electron-to-chromium: 1.5.80
       node-releases: 2.0.19
       update-browserslist-db: 1.1.2(browserslist@4.24.4)
 
@@ -4058,7 +4059,7 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
-  electron-to-chromium@1.5.79: {}
+  electron-to-chromium@1.5.80: {}
 
   emoji-regex-xs@1.0.0: {}
 
@@ -4255,9 +4256,10 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
-  framer-motion@11.16.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+  framer-motion@11.16.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
-      motion-dom: 11.16.1
+      motion-dom: 11.16.4
+
       motion-utils: 11.16.0
       tslib: 2.8.1
     optionalDependencies:
@@ -5147,7 +5149,8 @@ snapshots:
 
   minipass@7.1.2: {}
 
-  motion-dom@11.16.1:
+  motion-dom@11.16.4:
+  
     dependencies:
       motion-utils: 11.16.0
 
diff --git a/app/components/home/img.png b/public/assets/images/preview/console.png
similarity index 100%
rename from app/components/home/img.png
rename to public/assets/images/preview/console.png