diff --git a/docusaurus.config.js b/docusaurus.config.js
index aa2e8858..34cbd5f1 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -8,14 +8,10 @@ module.exports = {
   favicon: 'img/favicon.ico',
   organizationName: 'grid-js',
   projectName: 'website',
+
   themeConfig: {
     image: '/img/social.png',
-    algolia: {
-      appId: 'FIXME',
-      apiKey: '15086b8795378f5116d77008d1c3ebf0',
-      indexName: 'gridjs',
-      algoliaOptions: {} // Optional, if provided by Algolia
-    },
+
     navbar: {
       hideOnScroll: true,
       title: 'Grid.js',
@@ -24,120 +20,81 @@ module.exports = {
         src: 'img/logo.svg',
       },
       items: [
-        {
-          to: 'docs',
-          activeBasePath: 'docs',
-          label: 'Docs',
-          position: 'left',
-        },
-        {
-          to: 'docs/examples/hello-world',
-          activeBasePath: 'docs/examples',
-          label: 'Examples',
-          position: 'left'
-        },
-        {
-          to: 'docs/sponsors', label: 'Support Grid.js', position: 'left'
-        },
-        {
-          to: 'docs/community', label: 'Community', position: 'left'
-        },
-        {
-          to: 'blog', label: 'Blog', position: 'left'
-        },
-        {
-          href: 'https://www.npmjs.com/package/gridjs',
-          label: 'NPM',
-          position: 'right',
-        },
-        {
-          href: 'https://github.com/grid-js/gridjs',
-          label: 'GitHub',
-          position: 'right',
-        },
+        { to: 'docs', activeBasePath: 'docs', label: 'Docs', position: 'left' },
+        { to: 'docs/examples/hello-world', activeBasePath: 'docs/examples', label: 'Examples', position: 'left' },
+        { to: 'docs/sponsors', label: 'Support Grid.js', position: 'left' },
+        { to: 'docs/community', label: 'Community', position: 'left' },
+        { to: 'blog', label: 'Blog', position: 'left' },
+        { href: 'https://www.npmjs.com/package/gridjs', label: 'NPM', position: 'right' },
+        { href: 'https://github.com/grid-js/gridjs', label: 'GitHub', position: 'right' },
       ],
     },
+
     footer: {
       style: 'dark',
       links: [
         {
           title: 'Docs',
           items: [
-            {
-              label: 'Getting Started',
-              to: 'docs',
-            },
-            {
-              label: 'Examples',
-              to: 'docs/examples/hello-world',
-            },
+            { label: 'Getting Started', to: 'docs' },
+            { label: 'Examples', to: 'docs/examples/hello-world' },
           ],
         },
         {
           title: 'Community',
           items: [
-            {
-              label: 'Stack Overflow',
-              href: 'https://stackoverflow.com/questions/tagged/gridjs',
-            },
-            {
-              label: 'Discord',
-              href: 'https://discord.gg/K55BwDY',
-            },
-            {
-              label: 'Twitter',
-              href: 'https://twitter.com/grid_js',
-            },
+            { label: 'Stack Overflow', href: 'https://stackoverflow.com/questions/tagged/gridjs' },
+            { label: 'Discord', href: 'https://discord.gg/K55BwDY' },
+            { label: 'Twitter', href: 'https://twitter.com/grid_js' },
           ],
         },
         {
           title: 'More',
           items: [
-            {
-              label: 'Blog',
-              to: 'blog',
-            },
-            {
-              label: 'GitHub',
-              href: 'https://github.com/grid-js/gridjs',
-            },
+            { label: 'Blog', to: 'blog' },
+            { label: 'GitHub', href: 'https://github.com/grid-js/gridjs' },
           ],
         },
       ],
       copyright: `Copyright © ${new Date().getFullYear()} Grid.js`,
     },
   },
+
   presets: [
     [
       '@docusaurus/preset-classic',
       {
-        sitemap: {
-          changefreq: 'weekly',
-          priority: 0.5,
-        },
+        sitemap: { changefreq: 'weekly', priority: 0.5 },
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
-          editUrl:
-            'https://github.com/grid-js/website/edit/master/',
+          editUrl: 'https://github.com/grid-js/website/edit/master/',
         },
         blog: {
           showReadingTime: true,
-          editUrl:
-            'https://github.com/grid-js/website/edit/master/blog/',
-        },
-        theme: {
-          customCss: require.resolve('./src/css/custom.css')
-        },
-        googleAnalytics: {
-          trackingID: 'UA-167499954-1',
+          editUrl: 'https://github.com/grid-js/website/edit/master/blog/',
         },
+        theme: { customCss: require.resolve('./src/css/custom.css') },
+        googleAnalytics: { trackingID: 'UA-167499954-1' },
       },
     ],
   ],
+
   themes: [require.resolve('@docusaurus/theme-live-codeblock')],
+
   plugins: [
-    path.resolve(__dirname, './plugins/tailwind')
-  ]
+    path.resolve(__dirname, './plugins/tailwind'),
+
+    // ✅ Local search (no Algolia)
+    [
+      require.resolve('@cmfcmf/docusaurus-search-local'),
+      {
+        indexDocs: true,
+        indexBlog: true,
+        indexPages: true,
+        language: ['en'],
+      },
+    ],
+  ],
 };
diff --git a/package-lock.json b/package-lock.json
index 9c8a3cb0..35f8541f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "react-dom": "^17.0.2"
       },
       "devDependencies": {
+        "@cmfcmf/docusaurus-search-local": "^1.2.0",
         "@types/faker": "^5.5.6"
       }
     },
@@ -34,6 +35,84 @@
         "@algolia/autocomplete-shared": "1.7.2"
       }
     },
+    "node_modules/@algolia/autocomplete-js": {
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-js/-/autocomplete-js-1.19.4.tgz",
+      "integrity": "sha512-ZkwsuTTIEuw+hbsIooMrNLvTVulUSSKqJT3ZeYYd//kA5fHaFf2/T0BDmd9qSGxZRhT5WS8AJYjFARLmj5x08g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/autocomplete-core": "1.19.4",
+        "@algolia/autocomplete-preset-algolia": "1.19.4",
+        "@algolia/autocomplete-shared": "1.19.4",
+        "htm": "^3.1.1",
+        "preact": "^10.13.2"
+      },
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.5.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
+    "node_modules/@algolia/autocomplete-js/node_modules/@algolia/autocomplete-core": {
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.19.4.tgz",
+      "integrity": "sha512-yVwXLrfwQ3dAndY12j1pfa0oyC5hTDv+/dgwvVHj57dY3zN6PbAmcHdV5DOOdGJrCMXff+fsPr8G2Ik8zWOPTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/autocomplete-plugin-algolia-insights": "1.19.4",
+        "@algolia/autocomplete-shared": "1.19.4"
+      }
+    },
+    "node_modules/@algolia/autocomplete-js/node_modules/@algolia/autocomplete-preset-algolia": {
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.19.4.tgz",
+      "integrity": "sha512-WhX4mYosy7yBDjkB6c/ag+WKICjvV2fqQv/+NWJlpvnk2JtMaZByi73F6svpQX945J+/PxpQe8YIRBZHuYsLAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.19.4"
+      },
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
+    "node_modules/@algolia/autocomplete-js/node_modules/@algolia/autocomplete-shared": {
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.19.4.tgz",
+      "integrity": "sha512-V7tYDgRXP0AqL4alwZBWNm1HPWjJvEU94Nr7Qa2cuPcIAbsTAj7M/F/+Pv/iwOWXl3N7tzVzNkOWm7sX6JT1SQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
+    "node_modules/@algolia/autocomplete-plugin-algolia-insights": {
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.19.4.tgz",
+      "integrity": "sha512-K6TQhTKxx0Es1ZbjlAQjgm/QLDOtKvw23MX0xmpvO7AwkmlmaEXo2PwHdVSs3Bquv28CkO2BYKks7jVSIdcXUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.19.4"
+      },
+      "peerDependencies": {
+        "search-insights": ">= 1 < 3"
+      }
+    },
+    "node_modules/@algolia/autocomplete-plugin-algolia-insights/node_modules/@algolia/autocomplete-shared": {
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.19.4.tgz",
+      "integrity": "sha512-V7tYDgRXP0AqL4alwZBWNm1HPWjJvEU94Nr7Qa2cuPcIAbsTAj7M/F/+Pv/iwOWXl3N7tzVzNkOWm7sX6JT1SQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
     "node_modules/@algolia/autocomplete-preset-algolia": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.7.2.tgz",
@@ -51,6 +130,13 @@
       "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.7.2.tgz",
       "integrity": "sha512-QCckjiC7xXHIUaIL3ektBtjJ0w7tTA3iqKcAE/Hjn1lZ5omp7i3Y4e09rAr9ZybqirL7AbxCLLq0Ra5DDPKeug=="
     },
+    "node_modules/@algolia/autocomplete-theme-classic": {
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-theme-classic/-/autocomplete-theme-classic-1.19.4.tgz",
+      "integrity": "sha512-/qE8BETNFbul4WrrUyBYgaaKcgFPk0Px9FDKADnr3HlIkXquRpcFHTxXK16jdwXb33yrcXaAVSQZRfUUSSnxVA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@algolia/cache-browser-local-storage": {
       "version": "4.14.2",
       "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.14.2.tgz",
@@ -116,6 +202,7 @@
       "version": "4.14.2",
       "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.14.2.tgz",
       "integrity": "sha512-L5zScdOmcZ6NGiVbLKTvP02UbxZ0njd5Vq9nJAmPFtjffUSOGEp11BmD2oMJ5QvARgx2XbX4KzTTNS5ECYIMWw==",
+      "peer": true,
       "dependencies": {
         "@algolia/client-common": "4.14.2",
         "@algolia/requester-common": "4.14.2",
@@ -206,6 +293,7 @@
       "version": "7.20.2",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.2.tgz",
       "integrity": "sha512-w7DbG8DtMrJcFOi4VrLm+8QM4az8Mo+PuLBKLp2zrYRCow8W/f9xiXm5sN53C8HksCyDQwCKha9JiDoIyPjT2g==",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -1953,6 +2041,33 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cmfcmf/docusaurus-search-local": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@cmfcmf/docusaurus-search-local/-/docusaurus-search-local-1.2.0.tgz",
+      "integrity": "sha512-Tc0GhRBsfZAiB+f6BoPB8YCQap6JzzcDyJ0dLSCSzWQ6wdWvDlTBrHc1YqR8q8AZ+STRszL5eZpZFi5dbTCdYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/autocomplete-js": "^1.8.2",
+        "@algolia/autocomplete-theme-classic": "^1.8.2",
+        "@algolia/client-search": "^4.12.0",
+        "algoliasearch": "^4.12.0",
+        "cheerio": "^1.0.0-rc.9",
+        "clsx": "^1.1.1",
+        "lunr-languages": "^1.4.0",
+        "mark.js": "^8.11.1",
+        "tslib": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@docusaurus/core": "^2.0.0",
+        "nodejieba": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "nodejieba": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -2851,6 +2966,7 @@
       "version": "7.12.9",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz",
       "integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/generator": "^7.12.5",
@@ -2989,6 +3105,7 @@
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
       "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3329,6 +3446,7 @@
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.5.1.tgz",
       "integrity": "sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==",
+      "peer": true,
       "dependencies": {
         "@babel/core": "^7.19.6",
         "@svgr/babel-preset": "^6.5.1",
@@ -3625,6 +3743,7 @@
       "version": "18.0.25",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.25.tgz",
       "integrity": "sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -3905,6 +4024,7 @@
       "version": "8.8.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
       "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3960,6 +4080,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -4019,6 +4140,7 @@
       "version": "4.14.2",
       "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.14.2.tgz",
       "integrity": "sha512-ngbEQonGEmf8dyEh5f+uOIihv4176dgbuOZspiuhmTTBRBuzWu3KCGHre6uHj5YyuC7pNvQGzB6ZNJyZi0z+Sg==",
+      "peer": true,
       "dependencies": {
         "@algolia/cache-browser-local-storage": "4.14.2",
         "@algolia/cache-common": "4.14.2",
@@ -4484,6 +4606,7 @@
           "url": "https://tidelift.com/funding/github/npm/browserslist"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001400",
         "electron-to-chromium": "^1.4.251",
@@ -5241,6 +5364,7 @@
       "version": "8.11.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
       "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -5490,6 +5614,7 @@
       "version": "8.11.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
       "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -7043,6 +7168,7 @@
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/gridjs/-/gridjs-6.0.6.tgz",
       "integrity": "sha512-TZ20nY+weE/wlyXOd3A9FJyJlsJ/MrHr6frMgUHFN29RmWZCYtnyfF0zuspXC81oePwSJeSZ8HY651aeyX8+rQ==",
+      "peer": true,
       "dependencies": {
         "preact": "^10.11.3"
       }
@@ -7298,6 +7424,13 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/htm": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz",
+      "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/html-entities": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
@@ -8223,6 +8356,13 @@
         "node": ">=10"
       }
     },
+    "node_modules/lunr-languages": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/lunr-languages/-/lunr-languages-1.14.0.tgz",
+      "integrity": "sha512-hWUAb2KqM3L7J5bcrngszzISY4BxrXn/Xhbb9TTCJYEGqlR1nG67/M14sp09+PTIRklobrn57IAxcdcO/ZFyNA==",
+      "dev": true,
+      "license": "MPL-1.1"
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -8253,6 +8393,13 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/mark.js": {
+      "version": "8.11.1",
+      "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
+      "integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/markdown-escapes": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
@@ -8449,6 +8596,7 @@
       "version": "8.11.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
       "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -9126,6 +9274,7 @@
           "url": "https://tidelift.com/funding/github/npm/postcss"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -9695,9 +9844,10 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/preact": {
-      "version": "10.11.3",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
-      "integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==",
+      "version": "10.28.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.1.tgz",
+      "integrity": "sha512-u1/ixq/lVQI0CakKNvLDEcW5zfCjUQfZdK9qqWuIJtsezuyG6pk9TWj75GMuI/EzRSZB/VAE43sNWWZfiy8psw==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -9946,6 +10096,7 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
       "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -10068,6 +10219,7 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
       "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -10158,6 +10310,7 @@
       "version": "5.5.2",
       "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz",
       "integrity": "sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==",
+      "peer": true,
       "dependencies": {
         "@types/react": "*",
         "prop-types": "^15.6.2"
@@ -10185,6 +10338,7 @@
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
       "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
@@ -10446,6 +10600,7 @@
       "version": "7.12.9",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz",
       "integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/generator": "^7.12.5",
@@ -10921,6 +11076,14 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/search-insights": {
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.3.tgz",
+      "integrity": "sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -11855,9 +12018,10 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/type-fest": {
       "version": "2.19.0",
@@ -11910,16 +12074,17 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
-      "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "license": "Apache-2.0",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/ua-parser-js": {
@@ -12559,6 +12724,7 @@
       "version": "5.75.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
       "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -12657,6 +12823,7 @@
       "version": "8.11.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
       "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -12787,6 +12954,7 @@
       "version": "8.11.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
       "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
diff --git a/package.json b/package.json
index 8cf75d43..d932e72b 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     ]
   },
   "devDependencies": {
+    "@cmfcmf/docusaurus-search-local": "^1.2.0",
     "@types/faker": "^5.5.6"
   }
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index 99a851d0..865d8fa4 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 import Head from '@docusaurus/Head';
 import AnnouncementBar from '@theme/AnnouncementBar';
 import LayoutProvider from '@theme/Layout/Provider';
@@ -45,6 +45,7 @@ const features = [
     title: <>Free and open-source</>,
     icon: <>
       <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+        {/* FIX: path kamu tadi kepotong/typo, ini dibalikin yang bener */}
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
       </svg>
     </>,
@@ -61,7 +62,7 @@ const generateData = () => {
   const data = [];
   for (let i = 0; i < limit; i++) {
     const country = faker.address.country();
-    const job =faker.name.jobArea();
+    const job = faker.name.jobArea();
 
     data.push([
       faker.name.firstName(),
@@ -90,47 +91,184 @@ function Feature({icon, title, description}) {
 }
 
 function Features() {
-  return (<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-    <div className="py-12 bg-white">
-      <div className="max-w-xl mx-auto px-4 sm:px-6 lg:max-w-screen-xl lg:px-8">
-        <div className="lg:grid lg:grid-cols-3 lg:gap-8">
-          {features.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
+  return (
+    <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+      <div className="py-12 bg-white">
+        <div className="max-w-xl mx-auto px-4 sm:px-6 lg:max-w-screen-xl lg:px-8">
+          <div className="lg:grid lg:grid-cols-3 lg:gap-8">
+            {features.map((props, idx) => (
+              <Feature key={idx} {...props} />
+            ))}
+          </div>
         </div>
       </div>
     </div>
-  </div>);
+  );
 }
 
-function Header() {
-  const [isMenuOpen, setMenuState] = useState(false);
-  const gridRef = useRef(null);
+/**
+ * FixedTable:
+ * - LOOK & FEEL: tetap pakai class bawaan Grid.js Mermaid (mermaid.min.css)
+ * - Pagination: Previous + 1..N + Next, semuanya di dalam .gridjs-pages (biar CSS kepake dan ga "PreviousNext")
+ * - Sort icon: pakai <button class="gridjs-sort ..."> (biar icon muncul)
+ * - BUGFIX: Sorting TIDAK reset page (page tetap, yang berubah cuma urutan datanya)
+ */
+function FixedTable() {
+  const pageSize = 5;
+
+  // data dibuat sekali biar stabil (kayak gridjs render sekali)
+  const data = useMemo(() => generateData(), []);
+
+  // sort state: null = belum sort (default gridjs: icon neutral semua)
+  const [sortKey, setSortKey] = useState(null); // 0=name,1=job,2=country
+  const [sortDir, setSortDir] = useState("asc"); // asc | desc
+
+  // pagination state
+  const [page, setPage] = useState(1);
+
+  const sorted = useMemo(() => {
+    if (sortKey === null) return data;
 
+    const copy = [...data];
+    copy.sort((a, b) => {
+      const av = String(a[sortKey]).toLowerCase();
+      const bv = String(b[sortKey]).toLowerCase();
+      if (av < bv) return sortDir === "asc" ? -1 : 1;
+      if (av > bv) return sortDir === "asc" ? 1 : -1;
+      return 0;
+    });
+    return copy;
+  }, [data, sortKey, sortDir]);
+
+  const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+
+  // clamp page kalau out of range (defensive)
   useEffect(() => {
-    if (gridRef.current.childNodes.length > 0) return;
-
-    new Grid({
-      data: generateData(),
-      columns: [
-        {
-          name: 'Name',
-        },
-        {
-          name: 'Job',
-        },
-        {
-          name: 'Country'
-        }
-      ],
-      sort: true,
-      pagination: {
-        enabled: true,
-        summary: false,
-        limit: 5
+    setPage((p) => Math.min(Math.max(1, p), totalPages));
+  }, [totalPages]);
+
+  const pageRows = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return sorted.slice(start, start + pageSize);
+  }, [sorted, page]);
+
+  // Sorting TIDAK reset page
+  const toggleSort = (keyIndex) => {
+    setSortKey((prev) => {
+      if (prev === keyIndex) {
+        setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+        return prev;
       }
-    }).render(gridRef.current);
-  });
+      setSortDir("asc");
+      return keyIndex;
+    });
+  };
+
+  const SortButton = ({ active }) => {
+    // ini mengikuti CSS mermaid.min.css:
+    // button.gridjs-sort-neutral / asc / desc
+    const cls = !active
+      ? "gridjs-sort-neutral"
+      : (sortDir === "asc" ? "gridjs-sort-asc" : "gridjs-sort-desc");
+
+    return (
+      <button
+        type="button"
+        className={`gridjs-sort ${cls}`}
+        aria-label="Sort column"
+        tabIndex={-1}
+      />
+    );
+  };
+
+  return (
+    <div className="gridjs gridjs-container" style={{ width: "100%" }}>
+      <div className="gridjs-wrapper" style={{ width: "100%" }}>
+        <table className="gridjs-table" style={{ width: "100%" }}>
+          <thead className="gridjs-thead">
+            <tr className="gridjs-tr">
+              <th
+                className="gridjs-th gridjs-th-sort"
+                onClick={() => toggleSort(0)}
+                tabIndex={0}
+              >
+                <div className="gridjs-th-content">Name</div>
+                <SortButton active={sortKey === 0} />
+              </th>
+
+              <th
+                className="gridjs-th gridjs-th-sort"
+                onClick={() => toggleSort(1)}
+                tabIndex={0}
+              >
+                <div className="gridjs-th-content">Job</div>
+                <SortButton active={sortKey === 1} />
+              </th>
+
+              <th
+                className="gridjs-th gridjs-th-sort"
+                onClick={() => toggleSort(2)}
+                tabIndex={0}
+              >
+                <div className="gridjs-th-content">Country</div>
+                <SortButton active={sortKey === 2} />
+              </th>
+            </tr>
+          </thead>
+
+          <tbody className="gridjs-tbody">
+            {pageRows.map((row, idx) => (
+              <tr key={`${row[0]}-${row[1]}-${row[2]}-${idx}`} className="gridjs-tr">
+                <td className="gridjs-td">{row[0]}</td>
+                <td className="gridjs-td">{row[1]}</td>
+                <td className="gridjs-td">{row[2]}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Footer + pagination: struktur harus mirip Grid.js biar mermaid.min.css kepake */}
+      <div className="gridjs-footer">
+        <div className="gridjs-pagination">
+          {/* summary dimatiin sesuai config awal kamu */}
+          <div className="gridjs-pages">
+            <button
+              type="button"
+              disabled={page === 1}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              Previous
+            </button>
+
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
+              <button
+                key={p}
+                type="button"
+                className={p === page ? "gridjs-currentPage" : ""}
+                onClick={() => setPage(p)}
+              >
+                {p}
+              </button>
+            ))}
+
+            <button
+              type="button"
+              disabled={page === totalPages}
+              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Header() {
+  const [isMenuOpen, setMenuState] = useState(false);
+  const gridRef = useRef(null); // masih ada di code kamu, tapi gak kepake sekarang (gapapa)
 
   return (
     <div className="relative bg-white overflow-hidden">
@@ -274,7 +412,8 @@ function Header() {
                 <rect x="118" width="404" height="784" fill="url(#4f4f415c-a0e9-44c2-9601-6ded5a34a13e)"/>
               </svg>
               <div className="relative mx-auto w-full rounded-lg lg:max-w-md">
-                <div ref={gridRef} />
+                {/* CUMA TABLE YANG DIGANTI */}
+                <FixedTable />
               </div>
             </div>
           </div>
@@ -307,7 +446,7 @@ function Footer() {
                     </a>
                   </li>
                   <li className="mt-4">
-                    <a href="#" className="text-base leading-6 text-gray-300 hover:text-white">
+                    <a href="/docs/sponsors" className="text-base leading-6 text-gray-300 hover:text-white">
                       Contribute
                     </a>
                   </li>
@@ -334,7 +473,7 @@ function Footer() {
                     </a>
                   </li>
                   <li className="mt-4">
-                    <a href="#" className="text-base leading-6 text-gray-300 hover:text-white">
+                    <a href="https://stackoverflow.com/questions/tagged/gridjs" className="text-base leading-6 text-gray-300 hover:text-white">
                       StackOverflow
                     </a>
                   </li>
@@ -353,17 +492,17 @@ function Footer() {
                     </a>
                   </li>
                   <li className="mt-4">
-                    <a href="#" className="text-base leading-6 text-gray-300 hover:text-white">
+                    <a href="https://github.com/grid-js/gridjs/graphs/contributors" className="text-base leading-6 text-gray-300 hover:text-white">
                       Contributors
                     </a>
                   </li>
                   <li className="mt-4">
-                    <a href="https://github.com/grid-js/gridjs" className="text-base leading-6 text-gray-300 hover:text-white" target="_blank">
+                    <a href="https://github.com/grid-js/gridjs" className="text-base leading-6 text-gray-300 hover:text-white" target="_blank" rel="noreferrer">
                       GitHub
                     </a>
                   </li>
                   <li className="mt-4">
-                    <a href="https://introjs.com" title="Intro.js is a lightweight library for creating step-by-step customer onboarding" className="text-base leading-6 text-gray-300 hover:text-white" target="_blank">
+                    <a href="https://introjs.com" title="Intro.js is a lightweight library for creating step-by-step customer onboarding" className="text-base leading-6 text-gray-300 hover:text-white" target="_blank" rel="noreferrer">
                       Intro.js
                     </a>
                   </li>
@@ -514,8 +653,8 @@ function Home() {
           <meta name="twitter:card" content="summary_large_image" />
           <meta name="twitter:site" content="@grid_js" />
           <meta name="twitter:creator" content="@afshinmeh" />
-
         </Head>
+
         <AnnouncementBar />
 
         <Header />
diff --git a/src/theme/Footer/index.js b/src/theme/Footer/index.js
new file mode 100644
index 00000000..414dea08
--- /dev/null
+++ b/src/theme/Footer/index.js
@@ -0,0 +1,116 @@
+import React from "react";
+import * as style from "./styles.module.css";
+
+export default function Footer() {
+  return (
+    <div className={`bg-gray-800 ${style.footer}`}>
+      <div className="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
+          <div className="grid grid-cols-2 gap-8 xl:col-span-2">
+            <div className="md:grid md:grid-cols-2 md:gap-8">
+              <div>
+                <h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+                  Grid.js
+                </h4>
+                <ul className="mt-4">
+                  <li>
+                    <a href="/docs/install" className="text-base leading-6 text-gray-300 hover:text-white">
+                      Install
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a href="/docs/examples/hello-world" className="text-base leading-6 text-gray-300 hover:text-white">
+                      Examples
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a href="/docs/sponsors" className="text-base leading-6 text-gray-300 hover:text-white">
+                      Contribute
+                    </a>
+                  </li>
+                </ul>
+              </div>
+
+              <div className="mt-12 md:mt-0">
+                <h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+                  Support
+                </h4>
+                <ul className="mt-4">
+                  <li>
+                    <a href="/docs" className="text-base leading-6 text-gray-300 hover:text-white">
+                      Documentation
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a href="/docs/community" className="text-base leading-6 text-gray-300 hover:text-white">
+                      Community
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a href="https://discord.com/invite/K55BwDY" className="text-base leading-6 text-gray-300 hover:text-white">
+                      Chat
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a href="https://stackoverflow.com/questions/tagged/gridjs" className="text-base leading-6 text-gray-300 hover:text-white">
+                      StackOverflow
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div className="md:grid md:grid-cols-2 md:gap-8">
+              <div>
+                <h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+                  Team
+                </h4>
+                <ul className="mt-4">
+                  <li>
+                    <a href="/blog" className="text-base leading-6 text-gray-300 hover:text-white">
+                      Blog
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a href="https://github.com/grid-js/gridjs/graphs/contributors" className="text-base leading-6 text-gray-300 hover:text-white">
+                      Contributors
+                    </a>
+                  </li>
+                  <li className="mt-4">
+                    <a
+                      href="https://github.com/grid-js/gridjs"
+                      className="text-base leading-6 text-gray-300 hover:text-white"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      GitHub
+                    </a>
+                  </li>
+                </ul>
+              </div>
+
+              <div className="mt-12 md:mt-0">
+                <h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+                  Legal
+                </h4>
+                <ul className="mt-4">
+                  <li>
+                    <a href="/docs/license" className="text-base leading-6 text-gray-300 hover:text-white">
+                      License
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
+          <p className="text-base leading-6 text-gray-400">
+            &copy; 2023 Usablica. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/theme/Footer/styles.module.css b/src/theme/Footer/styles.module.css
new file mode 100644
index 00000000..08aeda56
--- /dev/null
+++ b/src/theme/Footer/styles.module.css
@@ -0,0 +1,8 @@
+/* stylelint-disable docusaurus/copyright-header */
+a:hover {
+  text-decoration: none !important;
+}
+
+.footer ul {
+  list-style: none;
+}
\ No newline at end of file