diff --git a/app/components/DocSearch.jsx b/app/components/DocSearch.jsx
new file mode 100644
index 00000000..b8d2cf10
--- /dev/null
+++ b/app/components/DocSearch.jsx
@@ -0,0 +1,15 @@
+'use client'
+import { DocSearch } from '@docsearch/react';
+
+import '@docsearch/css';
+
+function App() {
+    return (
+        <DocSearch
+            appId="FGZELRBIJJ"
+            indexName="xiaogenban1993"
+            apiKey="3419620c268293f17f15d16b4f80d6c4"
+        />
+    );
+}
+export default App;
\ No newline at end of file
diff --git a/app/components/navbar-menu.jsx b/app/components/navbar-menu.jsx
index a9f99fc5..af1aa8f9 100644
--- a/app/components/navbar-menu.jsx
+++ b/app/components/navbar-menu.jsx
@@ -4,6 +4,7 @@ import { motion } from "framer-motion";
 import Link from "next/link";
 import Image from "next/image";
 import { cn } from "./cn";
+import DocSearch from '@/app/components/DocSearch'
 
 const transition = {
     type: "spring",
@@ -115,7 +116,7 @@ export default function Navbar({ className }) {
     const [active, setActive] = React.useState(null);
     return (
         <div
-            className={cn("fixed top-10 inset-x-0 max-w-[20rem] mx-auto z-50", className)}
+            className={cn("fixed top-10 inset-x-0 max-w-[25rem] mx-auto z-50", className)}
         >
             <Menu setActive={setActive}>
                 <MenuItem setActive={setActive} active={active} item={<span><a href="/">首页</a></span>}>
@@ -123,8 +124,15 @@ export default function Navbar({ className }) {
                 <MenuItem setActive={setActive} active={active} item={
                     <span>
                         <a href="https://github.com/sunwu51/notebook"><Image src="/github-mark-white.png" width={16} height={16} /></a>
-                    </span>}></MenuItem>
+                    </span>}>
+                </MenuItem>
+                <div style={{
+                    position: 'relative',
+                    right: '-30px'
+                }}>
+                    <DocSearch />
+                </div>
             </Menu>
-        </div>
+        </div >
     );
 }
\ No newline at end of file
diff --git a/app/layout.js b/app/layout.js
index 0203adc9..cfc35d26 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,5 +1,6 @@
 import { Inter } from "next/font/google";
 import NavBar from "@/app/components/navbar-menu";
+import DocSearch from "@/app/components/DocSearch"
 import "./globals.css";
 import "./prism-dracula.css";
 
diff --git a/package-lock.json b/package-lock.json
index b5a38866..6be3fcdc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@chakra-ui/react": "^2.8.2",
+        "@docsearch/react": "^3.6.0",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
         "@giscus/react": "^3.0.0",
@@ -45,6 +46,180 @@
         "tailwindcss": "^3.4.1"
       }
     },
+    "node_modules/@algolia/autocomplete-core": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
+      "integrity": "sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==",
+      "dependencies": {
+        "@algolia/autocomplete-plugin-algolia-insights": "1.9.3",
+        "@algolia/autocomplete-shared": "1.9.3"
+      }
+    },
+    "node_modules/@algolia/autocomplete-plugin-algolia-insights": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz",
+      "integrity": "sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.9.3"
+      },
+      "peerDependencies": {
+        "search-insights": ">= 1 < 3"
+      }
+    },
+    "node_modules/@algolia/autocomplete-preset-algolia": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz",
+      "integrity": "sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.9.3"
+      },
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
+    "node_modules/@algolia/autocomplete-shared": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz",
+      "integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==",
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
+    "node_modules/@algolia/cache-browser-local-storage": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.23.3.tgz",
+      "integrity": "sha512-vRHXYCpPlTDE7i6UOy2xE03zHF2C8MEFjPN2v7fRbqVpcOvAUQK81x3Kc21xyb5aSIpYCjWCZbYZuz8Glyzyyg==",
+      "dependencies": {
+        "@algolia/cache-common": "4.23.3"
+      }
+    },
+    "node_modules/@algolia/cache-common": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.23.3.tgz",
+      "integrity": "sha512-h9XcNI6lxYStaw32pHpB1TMm0RuxphF+Ik4o7tcQiodEdpKK+wKufY6QXtba7t3k8eseirEMVB83uFFF3Nu54A=="
+    },
+    "node_modules/@algolia/cache-in-memory": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.23.3.tgz",
+      "integrity": "sha512-yvpbuUXg/+0rbcagxNT7un0eo3czx2Uf0y4eiR4z4SD7SiptwYTpbuS0IHxcLHG3lq22ukx1T6Kjtk/rT+mqNg==",
+      "dependencies": {
+        "@algolia/cache-common": "4.23.3"
+      }
+    },
+    "node_modules/@algolia/client-account": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.23.3.tgz",
+      "integrity": "sha512-hpa6S5d7iQmretHHF40QGq6hz0anWEHGlULcTIT9tbUssWUriN9AUXIFQ8Ei4w9azD0hc1rUok9/DeQQobhQMA==",
+      "dependencies": {
+        "@algolia/client-common": "4.23.3",
+        "@algolia/client-search": "4.23.3",
+        "@algolia/transporter": "4.23.3"
+      }
+    },
+    "node_modules/@algolia/client-analytics": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.23.3.tgz",
+      "integrity": "sha512-LBsEARGS9cj8VkTAVEZphjxTjMVCci+zIIiRhpFun9jGDUlS1XmhCW7CTrnaWeIuCQS/2iPyRqSy1nXPjcBLRA==",
+      "dependencies": {
+        "@algolia/client-common": "4.23.3",
+        "@algolia/client-search": "4.23.3",
+        "@algolia/requester-common": "4.23.3",
+        "@algolia/transporter": "4.23.3"
+      }
+    },
+    "node_modules/@algolia/client-common": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.23.3.tgz",
+      "integrity": "sha512-l6EiPxdAlg8CYhroqS5ybfIczsGUIAC47slLPOMDeKSVXYG1n0qGiz4RjAHLw2aD0xzh2EXZ7aRguPfz7UKDKw==",
+      "dependencies": {
+        "@algolia/requester-common": "4.23.3",
+        "@algolia/transporter": "4.23.3"
+      }
+    },
+    "node_modules/@algolia/client-personalization": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.23.3.tgz",
+      "integrity": "sha512-3E3yF3Ocr1tB/xOZiuC3doHQBQ2zu2MPTYZ0d4lpfWads2WTKG7ZzmGnsHmm63RflvDeLK/UVx7j2b3QuwKQ2g==",
+      "dependencies": {
+        "@algolia/client-common": "4.23.3",
+        "@algolia/requester-common": "4.23.3",
+        "@algolia/transporter": "4.23.3"
+      }
+    },
+    "node_modules/@algolia/client-search": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.23.3.tgz",
+      "integrity": "sha512-P4VAKFHqU0wx9O+q29Q8YVuaowaZ5EM77rxfmGnkHUJggh28useXQdopokgwMeYw2XUht49WX5RcTQ40rZIabw==",
+      "dependencies": {
+        "@algolia/client-common": "4.23.3",
+        "@algolia/requester-common": "4.23.3",
+        "@algolia/transporter": "4.23.3"
+      }
+    },
+    "node_modules/@algolia/logger-common": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.23.3.tgz",
+      "integrity": "sha512-y9kBtmJwiZ9ZZ+1Ek66P0M68mHQzKRxkW5kAAXYN/rdzgDN0d2COsViEFufxJ0pb45K4FRcfC7+33YB4BLrZ+g=="
+    },
+    "node_modules/@algolia/logger-console": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.23.3.tgz",
+      "integrity": "sha512-8xoiseoWDKuCVnWP8jHthgaeobDLolh00KJAdMe9XPrWPuf1by732jSpgy2BlsLTaT9m32pHI8CRfrOqQzHv3A==",
+      "dependencies": {
+        "@algolia/logger-common": "4.23.3"
+      }
+    },
+    "node_modules/@algolia/recommend": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-4.23.3.tgz",
+      "integrity": "sha512-9fK4nXZF0bFkdcLBRDexsnGzVmu4TSYZqxdpgBW2tEyfuSSY54D4qSRkLmNkrrz4YFvdh2GM1gA8vSsnZPR73w==",
+      "dependencies": {
+        "@algolia/cache-browser-local-storage": "4.23.3",
+        "@algolia/cache-common": "4.23.3",
+        "@algolia/cache-in-memory": "4.23.3",
+        "@algolia/client-common": "4.23.3",
+        "@algolia/client-search": "4.23.3",
+        "@algolia/logger-common": "4.23.3",
+        "@algolia/logger-console": "4.23.3",
+        "@algolia/requester-browser-xhr": "4.23.3",
+        "@algolia/requester-common": "4.23.3",
+        "@algolia/requester-node-http": "4.23.3",
+        "@algolia/transporter": "4.23.3"
+      }
+    },
+    "node_modules/@algolia/requester-browser-xhr": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.23.3.tgz",
+      "integrity": "sha512-jDWGIQ96BhXbmONAQsasIpTYWslyjkiGu0Quydjlowe+ciqySpiDUrJHERIRfELE5+wFc7hc1Q5hqjGoV7yghw==",
+      "dependencies": {
+        "@algolia/requester-common": "4.23.3"
+      }
+    },
+    "node_modules/@algolia/requester-common": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.23.3.tgz",
+      "integrity": "sha512-xloIdr/bedtYEGcXCiF2muajyvRhwop4cMZo+K2qzNht0CMzlRkm8YsDdj5IaBhshqfgmBb3rTg4sL4/PpvLYw=="
+    },
+    "node_modules/@algolia/requester-node-http": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.23.3.tgz",
+      "integrity": "sha512-zgu++8Uj03IWDEJM3fuNl34s746JnZOWn1Uz5taV1dFyJhVM/kTNw9Ik7YJWiUNHJQXcaD8IXD1eCb0nq/aByA==",
+      "dependencies": {
+        "@algolia/requester-common": "4.23.3"
+      }
+    },
+    "node_modules/@algolia/transporter": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.23.3.tgz",
+      "integrity": "sha512-Wjl5gttqnf/gQKJA+dafnD0Y6Yw97yvfY8R9h0dQltX1GXTgNs1zWgvtWW0tHl1EgMdhAyw189uWiZMnL3QebQ==",
+      "dependencies": {
+        "@algolia/cache-common": "4.23.3",
+        "@algolia/logger-common": "4.23.3",
+        "@algolia/requester-common": "4.23.3"
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -1436,6 +1611,42 @@
         "node": ">=10"
       }
     },
+    "node_modules/@docsearch/css": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.6.0.tgz",
+      "integrity": "sha512-+sbxb71sWre+PwDK7X2T8+bhS6clcVMLwBPznX45Qu6opJcgRjAp7gYSDzVFp187J+feSj5dNBN1mJoi6ckkUQ=="
+    },
+    "node_modules/@docsearch/react": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.6.0.tgz",
+      "integrity": "sha512-HUFut4ztcVNmqy9gp/wxNbC7pTOHhgVVkHVGCACTuLhUKUhKAF9KYHJtMiLUJxEqiFLQiuri1fWF8zqwM/cu1w==",
+      "dependencies": {
+        "@algolia/autocomplete-core": "1.9.3",
+        "@algolia/autocomplete-preset-algolia": "1.9.3",
+        "@docsearch/css": "3.6.0",
+        "algoliasearch": "^4.19.1"
+      },
+      "peerDependencies": {
+        "@types/react": ">= 16.8.0 < 19.0.0",
+        "react": ">= 16.8.0 < 19.0.0",
+        "react-dom": ">= 16.8.0 < 19.0.0",
+        "search-insights": ">= 1 < 3"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "search-insights": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
@@ -4613,6 +4824,28 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/algoliasearch": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.23.3.tgz",
+      "integrity": "sha512-Le/3YgNvjW9zxIQMRhUHuhiUjAlKY/zsdZpfq4dlLqg6mEm0nL6yk+7f2hDOtLpxsgE4jSzDmvHL7nXdBp5feg==",
+      "dependencies": {
+        "@algolia/cache-browser-local-storage": "4.23.3",
+        "@algolia/cache-common": "4.23.3",
+        "@algolia/cache-in-memory": "4.23.3",
+        "@algolia/client-account": "4.23.3",
+        "@algolia/client-analytics": "4.23.3",
+        "@algolia/client-common": "4.23.3",
+        "@algolia/client-personalization": "4.23.3",
+        "@algolia/client-search": "4.23.3",
+        "@algolia/logger-common": "4.23.3",
+        "@algolia/logger-console": "4.23.3",
+        "@algolia/recommend": "4.23.3",
+        "@algolia/requester-browser-xhr": "4.23.3",
+        "@algolia/requester-common": "4.23.3",
+        "@algolia/requester-node-http": "4.23.3",
+        "@algolia/transporter": "4.23.3"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
@@ -11814,6 +12047,12 @@
         "compute-scroll-into-view": "^3.0.2"
       }
     },
+    "node_modules/search-insights": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.14.0.tgz",
+      "integrity": "sha512-OLN6MsPMCghDOqlCtsIsYgtsC0pnwVTyT9Mu6A3ewOj1DxvzZF6COrn2g86E/c05xbktB0XN04m/t1Z+n+fTGw==",
+      "peer": true
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
diff --git a/package.json b/package.json
index aa48b44e..d0c1ba40 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
+    "@docsearch/react": "^3.6.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@giscus/react": "^3.0.0",