diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 9dc679f..8a828a8 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -93,9 +93,9 @@ const HeadBar: FC = () => {
             </li>
             <li className="DocSearch-wrapper">
               <DocSearch
-                appId="R2IYF7ETH7"
-                indexName="599cec31baffa4868cae4e79f180729b"
-                apiKey="docsearch"
+                appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID ?? ''}
+                indexName="RUA"
+                apiKey={process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ADMIN_KEY ?? ''}
               />
             </li>
           </ul>
diff --git a/components/RUA/RUASandpack.tsx b/components/RUA/RUASandpack.tsx
index 8d28024..cd81fc2 100644
--- a/components/RUA/RUASandpack.tsx
+++ b/components/RUA/RUASandpack.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC } from 'react';
 import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
 import '@codesandbox/sandpack-react/dist/index.css';
 import { useTheme } from 'next-themes';
diff --git a/next.config.mjs b/next.config.mjs
index bf8065f..8c47253 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,6 @@
 import remarkFrontmatter from 'remark-frontmatter';
 import mdx from '@next/mdx';
 import rehypePrism from '@mapbox/rehype-prism';
-// import remarkToc from 'remark-toc';
 import composePlugins from 'next-compose-plugins';
 import remarkGfm from 'remark-gfm';
 import rehypeSlug from 'rehype-slug';
@@ -10,11 +9,7 @@ const composedConfig = composePlugins([
   mdx({
     extension: /\.mdx?$/,
     options: {
-      remarkPlugins: [
-        remarkFrontmatter,
-        // [remarkToc, { maxDepth: 2 }],
-        remarkGfm,
-      ],
+      remarkPlugins: [remarkFrontmatter, remarkGfm],
       rehypePlugins: [rehypePrism, rehypeSlug],
       providerImportSource: '@mdx-js/react',
     },
diff --git a/package.json b/package.json
index 7d06aac..e419f9f 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "rehype-slug": "^5.0.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "remark-toc": "^8.0.1",
     "sharp": "^0.30.3"
   },
   "devDependencies": {
diff --git a/pages/p/how-to-load-a-background-with-threejs.mdx b/pages/p/how-to-load-a-background-with-threejs.mdx
index 5082087..d2d6ee5 100644
--- a/pages/p/how-to-load-a-background-with-threejs.mdx
+++ b/pages/p/how-to-load-a-background-with-threejs.mdx
@@ -101,10 +101,16 @@ export default function App() {
   )
 }`;
 
+export const styles = `* {
+  padding: 0;
+  margin: 0;
+}`;
+
 <RUASandpack
   template="react"
   files={{
     '/App.js': main,
+    '/styles.css': styles,
   }}
   options={{
     autorun: false,
@@ -245,6 +251,7 @@ export default function App() {
   template="react"
   files={{
     '/App.js': main2,
+    '/styles.css': styles,
   }}
   options={{
     autorun: false,
diff --git a/scripts/build-search.mjs b/scripts/build-search.mjs
new file mode 100644
index 0000000..95e0798
--- /dev/null
+++ b/scripts/build-search.mjs
@@ -0,0 +1,92 @@
+import { config } from 'dotenv';
+import algoliasearch from 'algoliasearch/lite.js';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+
+export const sortByDate = ({ date: a }, { date: b }) => {
+  if (a < b) {
+    return 1;
+  } else if (a > b) {
+    return -1;
+  } else {
+    return 0;
+  }
+};
+
+/**
+ * Read post meta info with gray-matter.
+ * @param filename
+ * @returns
+ */
+const readFileMeta = (filename) => {
+  const markdownWithMeta = fs.readFileSync(
+    path.join('pages/p', filename),
+    'utf-8'
+  );
+  const slug = filename.replace(/\.mdx$/, '');
+  const { data: meta } = matter(markdownWithMeta);
+  return {
+    slug,
+    ...{ ...meta },
+  };
+};
+
+/**
+ * Read all posts with matter info.
+ * @returns
+ */
+export const postLists = async () => {
+  const files = fs.readdirSync(path.join('pages/p'));
+  const posts = files.map(readFileMeta).sort(sortByDate);
+
+  return posts;
+};
+
+async function main() {
+  // initialize environment variables
+  config();
+
+  if (
+    !process.env.NEXT_PUBLIC_ALGOLIA_APP_ID &&
+    !process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ADMIN_KEY
+  ) {
+    return console.log('API key not found!');
+  }
+
+  try {
+    const posts = await postLists();
+    // All objects must have an unique objectID
+    posts.forEach((p) => (p.objectID = p.slug));
+
+    // initialize the client with your environment variables
+    const client = algoliasearch(
+      process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
+      process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ADMIN_KEY
+    );
+
+    // initialize the index with your index name
+    const index = client.initIndex('RUA');
+
+    // save the objects!
+    const algoliaResponse = await index.replaceAllObjects(posts);
+
+    // check the output of the response in the console
+    console.log(
+      `🎉 Sucessfully added ${
+        algoliaResponse.objectIDs.length
+      } records to Algolia search. Object IDs:\n${algoliaResponse.objectIDs.join(
+        '\n'
+      )}`
+    );
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+// (async () => {
+//   const posts = await postLists();
+//   console.log(posts);
+// })();
+
+main();
diff --git a/yarn.lock b/yarn.lock
index 4d8cc82..c41142b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1245,16 +1245,6 @@
   resolved "https://registry.npmmirror.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
   integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==
 
-"@types/extend@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.npmmirror.com/@types/extend/-/extend-3.0.1.tgz#923dc2d707d944382433e01d6cc0c69030ab2c75"
-  integrity sha512-R1g/VyKFFI2HLC1QGAeTtCBWCo6n75l41OnsVYNbmKG+kempOESaodf6BeJyUM3Q0rKa/NQcTHbB2+66lNnxLw==
-
-"@types/github-slugger@^1.0.0":
-  version "1.3.0"
-  resolved "https://registry.npmmirror.com/@types/github-slugger/-/github-slugger-1.3.0.tgz#16ab393b30d8ae2a111ac748a015ac05a1fc5524"
-  integrity sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g==
-
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.npmmirror.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -1510,7 +1500,7 @@ ajv@^6.10.0, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-algoliasearch@^4.0.0:
+algoliasearch@^4.0.0, algoliasearch@^4.13.0:
   version "4.13.0"
   resolved "https://registry.npmmirror.com/algoliasearch/-/algoliasearch-4.13.0.tgz#e36611fda82b1fc548c156ae7929a7f486e4b663"
   integrity sha512-oHv4faI1Vl2s+YC0YquwkK/TsaJs79g2JFg5FDm2rKN12VItPTAeQ7hyJMHarOPPYuCnNC5kixbtcqvb21wchw==
@@ -2623,6 +2613,11 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
+dotenv@^16.0.0:
+  version "16.0.0"
+  resolved "https://registry.npmmirror.com/dotenv/-/dotenv-16.0.0.tgz#c619001253be89ebb638d027b609c75c26e47411"
+  integrity sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==
+
 dotenv@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmmirror.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
@@ -3374,7 +3369,7 @@ github-from-package@0.0.0:
   resolved "https://registry.npmmirror.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
   integrity sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==
 
-github-slugger@^1.0.0, github-slugger@^1.1.1:
+github-slugger@^1.1.1:
   version "1.4.0"
   resolved "https://registry.npmmirror.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e"
   integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==
@@ -5071,20 +5066,6 @@ mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
   resolved "https://registry.npmmirror.com/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz#56c506d065fbf769515235e577b5a261552d56e9"
   integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
 
-mdast-util-toc@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.npmmirror.com/mdast-util-toc/-/mdast-util-toc-6.1.0.tgz#1f38419f5ce774449c8daa87b39a4d940b24be7c"
-  integrity sha512-0PuqZELXZl4ms1sF7Lqigrqik4Ll3UhbI+jdTrfw7pZ9QPawgl7LD4GQ8MkU7bT/EwiVqChNTbifa2jLLKo76A==
-  dependencies:
-    "@types/extend" "^3.0.0"
-    "@types/github-slugger" "^1.0.0"
-    "@types/mdast" "^3.0.0"
-    extend "^3.0.0"
-    github-slugger "^1.0.0"
-    mdast-util-to-string "^3.1.0"
-    unist-util-is "^5.0.0"
-    unist-util-visit "^3.0.0"
-
 mdurl@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -6480,15 +6461,6 @@ remark-rehype@^10.0.0:
     mdast-util-to-hast "^12.1.0"
     unified "^10.0.0"
 
-remark-toc@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.npmmirror.com/remark-toc/-/remark-toc-8.0.1.tgz#f3e07ea13734f1c531e3d3460e58babe31d17cd7"
-  integrity sha512-7he2VOm/cy13zilnOTZcyAoyoolV26ULlon6XyCFU+vG54Z/LWJnwphj/xKIDLOt66QmJUgTyUvLVHi2aAElyg==
-  dependencies:
-    "@types/mdast" "^3.0.0"
-    mdast-util-toc "^6.0.0"
-    unified "^10.0.0"
-
 remote-origin-url@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/remote-origin-url/-/remote-origin-url-1.0.0.tgz#add020aa5f1a0b37372858e02b323dc28d4cd030"