diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
new file mode 100644
index 0000000..7bf9bae
--- /dev/null
+++ b/src/components/TableOfContents.astro
@@ -0,0 +1,39 @@
+---
+import TablerIcon from "../components/TablerIcon.astro";
+import { type MarkdownHeading } from "astro";
+import { t } from "../lib/i18n";
+
+import "./tableofcontents.css"
+
+type Props = {
+  locale: string;
+  content: MarkdownHeading[];
+};
+
+const { locale, content } = Astro.props;
+---
+
+<nav>
+  <a class="article-top" href="#"
+    ><TablerIcon icon="arrow-back-up">
+      <span>{t(locale, "content.top")}</span>
+    </TablerIcon></a
+  >
+  <hr />
+
+  {
+    content.length > 0 && (
+      <ul class="contents-list">
+        {content.map((h) => {
+          return (
+            <li>
+              <a href={`#${h.slug}`}>
+                {h.text.startsWith("#") ? h.text.substring(1) : h.text}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    )
+  }
+</nav>
diff --git a/src/components/tableofcontents.css b/src/components/tableofcontents.css
new file mode 100644
index 0000000..3350dad
--- /dev/null
+++ b/src/components/tableofcontents.css
@@ -0,0 +1,32 @@
+.contents-list {
+  list-style-type: none;
+  padding-inline-start: 0;
+
+  font-size: small;
+  line-height: 1;
+
+  border-inline-start: 0.15rem solid
+    color-mix(in srgb, var(--color-link) 50%, transparent);
+
+  & li {
+    & a {
+      display: block;
+      color: var(--color-inv-base);
+      text-decoration: none;
+
+      padding-block: 0.5rem;
+      padding-inline: 0.5rem;
+
+      margin-inline-start: -0.15rem;
+
+      border-left: 0.15rem solid
+        color-mix(in srgb, var(--color-link) 0%, transparent);
+
+      &:hover,
+      &:focus,
+      &.active {
+        color: var(--color-link);
+      }
+    }
+  }
+}
diff --git a/src/layouts/WikiLayout.astro b/src/layouts/WikiLayout.astro
index 8f69603..1b7f2db 100644
--- a/src/layouts/WikiLayout.astro
+++ b/src/layouts/WikiLayout.astro
@@ -3,6 +3,7 @@ import BasePage from "./BasePage.astro";
 import Header from "../components/Header.astro";
 import Sidebar from "../components/Sidebar.astro";
 import TablerIcon from "../components/TablerIcon.astro";
+import TableOfContents from "../components/TableOfContents.astro";
 import "./layout.css";
 
 import { type MarkdownHeading } from "astro";
@@ -76,29 +77,7 @@ const content = headings.filter((h) => h.depth == 2);
                 <span>{t(locale, "content.title")}</span>
               </summary>
 
-              {content.length > 0 && (
-                <nav>
-                  <a class="article-top" href="#">
-                    <TablerIcon icon="arrow-back-up">
-                      <span>{t(locale, "content.top")}</span>
-                    </TablerIcon>
-                  </a>
-                  <hr />
-                  <ul class="contents-list">
-                    {content.map((h) => {
-                      return (
-                        <li>
-                          <a href={`#${h.slug}`}>
-                            {h.text.startsWith("#")
-                              ? h.text.substring(1)
-                              : h.text}
-                          </a>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </nav>
-              )}
+              {content.length > 0 && <TableOfContents {locale} {content} />}
             </details>
           )
         }
@@ -123,32 +102,8 @@ const content = headings.filter((h) => h.depth == 2);
       </div>
 
       <aside>
-        <nav>
-          <h3>{t(locale, "content.title")}</h3>
-
-          <a class="article-top" href="#"
-            ><TablerIcon icon="arrow-back-up">
-              <span>{t(locale, "content.top")}</span>
-            </TablerIcon></a
-          >
-          <hr />
-
-          {
-            content.length > 0 && (
-              <ul class="contents-list">
-                {content.map((h) => {
-                  return (
-                    <li>
-                      <a href={`#${h.slug}`}>
-                        {h.text.startsWith("#") ? h.text.substring(1) : h.text}
-                      </a>
-                    </li>
-                  );
-                })}
-              </ul>
-            )
-          }
-        </nav>
+        <h3>{t(locale, "content.title")}</h3>
+        <TableOfContents {locale} {content} />
       </aside>
     </main>
   </div>
diff --git a/src/layouts/layout.css b/src/layouts/layout.css
index cd4aef5..8ed14f3 100644
--- a/src/layouts/layout.css
+++ b/src/layouts/layout.css
@@ -18,39 +18,6 @@ body {
   }
 }
 
-.contents-list {
-  list-style-type: none;
-  padding-inline-start: 0;
-
-  font-size: small;
-  line-height: 1;
-
-  border-inline-start: 0.15rem solid
-    color-mix(in srgb, var(--color-link) 50%, transparent);
-
-  & li {
-    & a {
-      display: block;
-      color: var(--color-inv-base);
-      text-decoration: none;
-
-      padding-block: 0.5rem;
-      padding-inline: 0.5rem;
-
-      margin-inline-start: -0.15rem;
-
-      border-left: 0.15rem solid
-        color-mix(in srgb, var(--color-link) 0%, transparent);
-
-      &:hover,
-      &:focus,
-      &.active {
-        color: var(--color-link);
-      }
-    }
-  }
-}
-
 & .wrapper {
   display: flex;
   align-items: flex-start;