diff --git a/README.md b/README.md
index 4fd92db4..63a6066a 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,13 @@ Volglass documentation is build my self!!
 
 https://volglass.turtton.net
 
+# Features
+
+- **Search** documents
+- **Dark** Theme
+
+Also, I fixed many issues that the original has.
+
 ## Getting started
 ### Run on your local machine
 
@@ -25,7 +32,6 @@ See [volglass-docs repository](https://github.com/turtton/volglass-docs) for an
 ## Future development 
 
 - Embed markdown/image rendering
-- Text search
 - Tag list view
 
 ## For developers
diff --git a/package.json b/package.json
index e9e09dc4..042448b6 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@mui/icons-material": "latest",
     "@mui/lab": "latest",
     "@mui/material": "latest",
+    "@mui/system": "^5.11.8",
     "@types/wanakana": "^4.0.3",
     "cytoscape-d3-force": "^1.1.4",
     "cytoscape-node-html-label": "^1.2.1",
@@ -28,6 +29,7 @@
     "fs": "^0.0.1-security",
     "fuse.js": "^6.6.2",
     "gray-matter": "^4.0.2",
+    "jotai": "^2.0.1",
     "jsnetworkx": "^0.3.4",
     "mdast-util-to-string": "^3.1.0",
     "next": "^12.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5522c5e..cb83d411 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,6 +9,7 @@ specifiers:
   '@mui/icons-material': latest
   '@mui/lab': latest
   '@mui/material': latest
+  '@mui/system': ^5.11.8
   '@types/babel__core': ^7.20.0
   '@types/cytoscape': ^3.19.9
   '@types/d3': ^6.7.5
@@ -41,6 +42,7 @@ specifiers:
   fs: ^0.0.1-security
   fuse.js: ^6.6.2
   gray-matter: ^4.0.2
+  jotai: ^2.0.1
   jsnetworkx: ^0.3.4
   mdast-util-to-string: ^3.1.0
   next: ^12.1.0
@@ -86,6 +88,7 @@ dependencies:
   '@mui/icons-material': 5.11.0_fk5bccl2hinvnbyz2t4hxr3tei
   '@mui/lab': 5.0.0-alpha.119_26x4sipaaju26faxwnvcnf22vm
   '@mui/material': 5.11.8_qtidw54xdy2lrxqgglvfql7n3e
+  '@mui/system': 5.11.8_4f3ngokrixlnstypmfsxocpf3m
   '@types/wanakana': 4.0.3
   cytoscape-d3-force: 1.1.4_cytoscape@3.23.0
   cytoscape-node-html-label: 1.2.2_nj5d75okz36274i5jrvj2kttty
@@ -94,6 +97,7 @@ dependencies:
   fs: 0.0.1-security
   fuse.js: 6.6.2
   gray-matter: 4.0.3
+  jotai: 2.0.1_react@17.0.2
   jsnetworkx: 0.3.4
   mdast-util-to-string: 3.1.0
   next: 12.3.4_jiuppbrrdpqsioctsbaxdlfu4e
@@ -3677,6 +3681,18 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
+  /jotai/2.0.1_react@17.0.2:
+    resolution: {integrity: sha512-b/BpBFkv3nq8HgT6YX5h5/y9VfKIn9OL1dO6gd9bWTgKt6LLe24VIMURTDwSYS888XfubuRQlbepb5IQGAtmcQ==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      react: '>=17.0.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      react: 17.0.2
+    dev: false
+
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
diff --git a/src/components/FolderTree.tsx b/src/components/FolderTree.tsx
index 8d810535..6bfc45ea 100644
--- a/src/components/FolderTree.tsx
+++ b/src/components/FolderTree.tsx
@@ -25,7 +25,7 @@ export default function FolderTree(props: {
   flattenNodes: MdObject[];
 }): JSX.Element {
   const renderTree = (nodes: MdObject): JSX.Element => (
-    <TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
+    <TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name} className="dark:text-gray-200">
       {nodes.children.map((node) => renderTree(node))}
     </TCTreeItem>
   );
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 00453ddb..f7b18dca 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 export default function Footer(): JSX.Element {
   return (
-    <footer className="absolute top-auto bottom-0 w-full bg-gray-50 text-center">
+    <footer className="brand absolute top-auto bottom-0 w-full bg-gray-50 text-center">
       Powered by <a href="https://github.com/turtton/volglass">Volglass</a>, © 2023
     </footer>
   );
diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
index 3a3714a4..fa961bdb 100644
--- a/src/components/Graph.tsx
+++ b/src/components/Graph.tsx
@@ -7,6 +7,8 @@ import CytoscapeComponent from "react-cytoscapejs";
 import { Core } from "cytoscape";
 import { LocalGraphData } from "../lib/graph";
 import { MdObject } from "../lib/markdown";
+import { useCurrentTheme } from "./ThemeSwitcher";
+import { PaletteMode } from "@mui/material";
 
 const layout = {
   name: "circle",
@@ -32,7 +34,8 @@ const layout = {
   }, // transform a given node position. Useful for changing flow direction in discrete layouts
 };
 
-const styleSheet = [
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const styleSheet = (theme: PaletteMode) => [
   {
     selector: "node",
     style: {
@@ -45,7 +48,10 @@ const styleSheet = [
   },
   {
     selector: "label",
-    style: { "font-size": "12px" },
+    style: {
+      "font-size": "12px",
+      color: theme === "dark" ? "#e1e2e6" : "#000",
+    },
   },
   {
     selector: "edge",
@@ -68,18 +74,13 @@ function Graph({ graph }: { graph: LocalGraphData }): JSX.Element {
     elementSetter(CytoscapeComponent.normalizeElements(graph));
   }, [graph]);
 
+  const theme = useCurrentTheme();
   const router = useRouter();
   return (
     <>
       <div className="right-bar-container">
         <h3>Interactive Graph</h3>
-        <div
-          style={{
-            border: "1px solid #ddd",
-            backgroundColor: "#f5f6fe",
-            borderRadius: "8px",
-          }}
-        >
+        <div className="rounded-lg border-2 border-solid border-gray-300 bg-white dark:border-gray-600 dark:bg-dark-primary-alt ">
           <CytoscapeComponent
             elements={elements}
             // pan={{ x: 200, y: 200 }}
@@ -90,7 +91,7 @@ function Graph({ graph }: { graph: LocalGraphData }): JSX.Element {
             autounselectify={false}
             boxSelectionEnabled={true}
             layout={layout}
-            stylesheet={styleSheet}
+            stylesheet={styleSheet(theme)}
             cy={(cy) => {
               // console.log("EVT", cy);
               cy.layout(layout).run();
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 82c7809d..0eda715e 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,7 +1,27 @@
+import { useCurrentTheme } from "./ThemeSwitcher";
+import { useMemo } from "react";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { purple } from "@mui/material/colors";
+
 export default function Layout({ children }): JSX.Element {
+  const currentTheme = useCurrentTheme();
+  const muiTheme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: currentTheme,
+          primary: {
+            main: purple[500],
+          },
+        },
+      }),
+    [currentTheme],
+  );
   return (
     <div className="fixed grid h-full min-h-full w-full grid-cols-1 grid-rows-1 flex-row overflow-hidden">
-      <main className="theme-light">{children}</main>
+      <ThemeProvider theme={muiTheme}>
+        <main className={currentTheme === "dark" ? "theme-dark" : "theme-light"}>{children}</main>
+      </ThemeProvider>
     </div>
   );
 }
diff --git a/src/components/RootContainer.tsx b/src/components/RootContainer.tsx
index 8681b02c..7f52aa54 100644
--- a/src/components/RootContainer.tsx
+++ b/src/components/RootContainer.tsx
@@ -8,6 +8,11 @@ interface HomeElement extends HTMLElement {
   checked: boolean;
 }
 
+const DynamicThemeSwitcher = dynamic(async () => await import("./ThemeSwitcher"), {
+  loading: () => <p>Loading...</p>,
+  ssr: false,
+});
+
 // This trick is to dynamically load component that interact with window object (browser only)
 const DynamicGraph = dynamic(async () => await import("./Graph"), {
   loading: () => <p>Loading ...</p>,
@@ -46,6 +51,7 @@ export default function RootContainer({
       </div>
       <div>
         <nav className="nav-bar">
+          <DynamicThemeSwitcher />
           <SearchBar index={searchIndex} />
           <FolderTree tree={tree} flattenNodes={flattenNodes} />
         </nav>
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 835ba738..0b0a4ddd 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -45,7 +45,6 @@ export function SearchBar(prop: SearchProp): JSX.Element {
       }}
     >
       <TextField
-        className="bg-white"
         fullWidth
         label="Search"
         onFocus={() => {
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
new file mode 100644
index 00000000..d5cb107f
--- /dev/null
+++ b/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,92 @@
+import { styled } from "@mui/material/styles";
+import { FormControlLabel, PaletteMode, Switch } from "@mui/material";
+import { useEffect } from "react";
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+export default function ThemeSwitcher(): JSX.Element {
+  const currentMode = useCurrentTheme();
+  const setCurrentTheme = useSetAtom(themeAtom);
+  useEffect(() => {
+    if (currentMode === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [currentMode]);
+  return (
+    <FormControlLabel
+      className="w-fit px-2"
+      control={
+        <ThemeSwitch
+          sx={{ m: 1 }}
+          checked={currentMode === "dark"}
+          onChange={(e) => {
+            const newMode = e.target.checked ? "dark" : "light";
+            setCurrentTheme(newMode);
+          }}
+        />
+      }
+      label=""
+    />
+  );
+}
+
+const ThemeSwitch = styled(Switch)(({ theme }) => ({
+  padding: 8,
+  "& .MuiSwitch-switchBase": {
+    "&.Mui-checked": {
+      color: "#fff",
+    },
+    "& + .MuiSwitch-track": {
+      opacity: 1,
+      backgroundColor: theme.palette.mode === "dark" ? "#2a2b2b" : "#dedfe1",
+    },
+  },
+  "& .MuiSwitch-track": {
+    borderRadius: 22 / 2,
+    backgroundColor: theme.palette.mode === "dark" ? "#383E44" : "#aab4be",
+    "&:before, &:after": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      width: 16,
+      height: 16,
+    },
+    "&:before": {
+      // moon
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        "#fff",
+      )}" d="M4.2 4l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
+      left: 12,
+    },
+    "&:after": {
+      // sun
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        "#000",
+      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
+      right: 12,
+    },
+  },
+  "& .MuiSwitch-thumb": {
+    boxShadow: "none",
+    width: 16,
+    height: 16,
+    margin: 2,
+    backgroundColor: theme.palette.mode === "dark" ? "#F5F2F0" : "#fff",
+  },
+}));
+
+const themeKey = "theme";
+const themeAtom = atomWithStorage<PaletteMode | null>(themeKey, null);
+
+const currentThemeAtom = atom((get) => {
+  const currentTheme = get(themeAtom);
+  if (currentTheme !== null) {
+    return currentTheme;
+  }
+  return "light";
+});
+
+export const useCurrentTheme = (): PaletteMode => useAtomValue(currentThemeAtom);
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 9f3a2e0e..0457effe 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import "../styles/global.css";
 import "../styles/style.css";
 import "../styles/prism.css";
+import "../styles/prism-dark.css";
 import { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
diff --git a/src/styles/prism-dark.css b/src/styles/prism-dark.css
new file mode 100644
index 00000000..edc21ca1
--- /dev/null
+++ b/src/styles/prism-dark.css
@@ -0,0 +1,91 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */
+html[class="dark"] code[class*=language-],html[class="dark"] pre[class*=language-] {
+    color: #f8f8f2;
+    background: 0 0;
+    text-shadow: 0 1px rgba(0, 0, 0, .3);
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none
+}
+
+html[class="dark"] pre[class*=language-] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    border-radius: .3em
+}
+
+html[class="dark"] :not(pre) > code[class*=language-],html[class="dark"] pre[class*=language-] {
+    background: #272822
+}
+
+html[class="dark"] :not(pre) > code[class*=language-] {
+    padding: .1em;
+    border-radius: .3em;
+    white-space: normal
+}
+
+html[class="dark"] .token.cdata, .token.comment,html[class="dark"] .token.doctype,html[class="dark"] .token.prolog {
+    color: #8292a2
+}
+
+html[class="dark"] .token.punctuation {
+    color: #f8f8f2
+}
+
+html[class="dark"] .token.namespace {
+    opacity: .7
+}
+
+html[class="dark"] .token.constant,html[class="dark"] .token.deleted,html[class="dark"]  .token.property,html[class="dark"]  .token.symbol, .token.tag {
+    color: #f92672
+}
+
+html[class="dark"] .token.boolean, .token.number {
+    color: #ae81ff
+}
+
+html[class="dark"] .token.attr-name,html[class="dark"]  .token.builtin,html[class="dark"]  .token.char,html[class="dark"]  .token.inserted,html[class="dark"]  .token.selector,html[class="dark"]  .token.string {
+    color: #a6e22e
+}
+
+html[class="dark"] .language-css .token.string,html[class="dark"]  .style .token.string,html[class="dark"]  .token.entity,html[class="dark"]  .token.operator,html[class="dark"]  .token.url,html[class="dark"]  .token.variable {
+    color: #f8f8f2
+}
+
+html[class="dark"] .token.atrule,html[class="dark"]  .token.attr-value,html[class="dark"]  .token.class-name,html[class="dark"]  .token.function {
+    color: #e6db74
+}
+
+html[class="dark"] .token.keyword {
+    color: #66d9ef
+}
+
+html[class="dark"] .token.important,html[class="dark"]  .token.regex {
+    color: #fd971f
+}
+
+html[class="dark"] .token.bold,html[class="dark"]  .token.important {
+    font-weight: 700
+}
+
+html[class="dark"] .token.italic {
+    font-style: italic
+}
+
+html[class="dark"] .token.entity {
+    cursor: help
+}
diff --git a/src/styles/style.css b/src/styles/style.css
index 98631c04..29766c8b 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -17,12 +17,17 @@ a:hover {
 /* Foooter section BEGIN */
 .note-footer {
     display: block;
-    background-color: rgba(238, 238, 238, 0.5);
+    background-color: var(--background-secondary-alt);
     border-radius: 16px;
     margin-top: 24px;
     padding: 16px;
 }
 
+.brand {
+    background-color: var(--background-primary);
+    accent-color: var(--text-accent);
+}
+
 .backlink-container {
     flex-wrap: wrap;
     justify-content: space-between;
@@ -41,7 +46,7 @@ a:hover {
 
 .backlink-container .backlink {
     /*background-color: #f8f2f2;*/
-    margin: 8px -8px 0px;
+    margin: 8px -8px 0;
     padding: 8px;
     height: 116px;
     width: 318px;
@@ -80,7 +85,7 @@ a:hover {
 }
 
 .backlink-container p {
-    margin: 12px 0px;
+    margin: 12px 0;
 }
 
 /* Foooter section END */
@@ -164,6 +169,45 @@ a:hover {
     --dark: #141021;
 }
 
+.theme-dark {
+    --background-primary: #212323;
+    --background-primary-alt: #171818;
+    --background-secondary: #2b2b2c;
+    --background-secondary-alt: #333435;
+    --background-modifier-border: #4d4e4f;
+    --background-modifier-form-field: #171818;
+    --background-modifier-form-field-highlighted: #171818;
+    --background-modifier-box-shadow: rgba(255, 255, 255, 0.1);
+    --background-modifier-success: #A4E7C3;
+    --background-modifier-error: #ee0000;
+    --background-modifier-error-rgb: 238, 0, 0;
+    --background-modifier-error-hover: #9c0000;
+    --background-modifier-cover: rgba(255, 255, 255, 0.8);
+    --text-accent: #892f99;
+    --text-accent-hover: #25ccff;
+    --text-normal: #e1e2e6;
+    --text-muted: #7b7c7e;
+    --text-muted-rgb: 123, 124, 126;
+    --text-faint: #999999;
+    --text-error: #dd0000;
+    --text-error-hover: #950000;
+    --text-highlight-bg: #bdbd25;
+    --text-highlight-bg-active: #a35d20;
+    --text-selection: #6c6c6c;
+    --text-on-accent: #999999;
+    --interactive-normal: #adadad;
+    --interactive-hover: #8b8b8b;
+    --interactive-accent: #7b6cd9;
+    --interactive-accent-rgb: 123, 108, 217;
+    --interactive-accent-hover: #8273e6;
+    --interactive-success: #197300;
+    --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
+    --scrollbar-bg: rgba(0, 0, 0, 0.05);
+    --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
+    --highlight-mix-blend-mode: darken;
+    --dark: #141021;
+}
+
 .markdown-rendered img:not([width]),
 .markdown-rendered audio,
 .markdown-rendered video {
@@ -213,6 +257,8 @@ a:hover {
 .right-bar-container {
     display: block;
     padding: 0 3em;
+    background-color: var(--background-primary);
+    color: var(--text-muted)
 }
 
 footer ul li {
@@ -334,11 +380,11 @@ hr {
         height: 100%;
         background: #69d2e7;
     }
-    
+
     .hamburger:before {
         top: -10px;
     }
-    
+
     .hamburger:after {
         bottom: -10px;
     }
diff --git a/tailwind.config.js b/tailwind.config.js
index 57cc7967..80c9a6b9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,12 @@ module.exports = {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        "dark-primary-alt": "#171818"
+      }
+    },
   },
   plugins: [],
+  darkMode: "class"
 };