diff --git a/package-lock.json b/package-lock.json
index 80b1f085..0edad26b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,6 +74,7 @@
         "react-css-theme-switcher": "^0.3.0",
         "react-dom": "^18.3.1",
         "react-error-boundary": "^4.1.2",
+        "react-fast-marquee": "^1.6.5",
         "react-i18next": "^15.1.2",
         "react-icons": "^5.3.0",
         "react-input-pin-code": "^1.2.1",
@@ -31388,6 +31389,16 @@
       "version": "3.2.2",
       "license": "MIT"
     },
+    "node_modules/react-fast-marquee": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmmirror.com/react-fast-marquee/-/react-fast-marquee-1.6.5.tgz",
+      "integrity": "sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16.8.0 || ^18.0.0",
+        "react-dom": ">= 16.8.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-i18next": {
       "version": "15.1.2",
       "license": "MIT",
diff --git a/package.json b/package.json
index 1ec94d01..f9ecaf11 100644
--- a/package.json
+++ b/package.json
@@ -277,6 +277,7 @@
     "react-css-theme-switcher": "^0.3.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
+    "react-fast-marquee": "^1.6.5",
     "react-i18next": "^15.1.2",
     "react-icons": "^5.3.0",
     "react-input-pin-code": "^1.2.1",
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 2e4210dd..1efdcdd2 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -6,6 +6,7 @@ import { Atom, Merge, GitMerge, GitPullRequestArrow } from 'lucide-react'
 // import { PinInput } from 'react-input-pin-code'
 import SpotlightCard from '@stateless/Spotlight'
 import Typewriter from 'typewriter-effect'
+import Marquee from "react-fast-marquee"
 import FixTabPanel from '@stateless/FixTabPanel'
 import TypedText from '@stateless/TypedText'
 import ReMarkdown from '@stateless/ReMarkdown'
@@ -319,7 +320,7 @@ const Home = () => {
         <TagCloud />
       </section>
       <section style={{ margin: 20 }}>
-        <SlideLinear>
+        {/* <SlideLinear>
           <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }}></div>
           <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }}></div>
           <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }}></div>
@@ -328,9 +329,16 @@ const Home = () => {
           <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }}></div>
           <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }}></div>
           <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }}></div>
-        </SlideLinear>
+        </SlideLinear> */}
+        <Marquee autoFill direction="left" gradient gradientColor="rgba(255, 255, 255, 0.8)">
+          <div style={{ width: 200, height: 40, lineHeight: '40px', textAlign: 'center', background: '#aaa', margin: '0 10px', borderRadius: 4 }}>React</div>
+        </Marquee>
+      </section>
+      <section style={{ margin: 20 }}>
+        <Marquee autoFill direction="right" gradient gradientColor="rgba(255, 255, 255, 0.8)">
+          <div style={{ width: 200, height: 40, lineHeight: '40px', textAlign: 'center', background: '#aaa', margin: '0 10px', borderRadius: 4 }}>Vue</div>
+        </Marquee>
       </section>
-
       <section style={{ width: 600, margin: '30px 0' }}>
         <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
         <Flex align="center">