diff --git a/docs/components/Footer/Footer.styles.module.css b/docs/components/Footer/Footer.styles.module.css
new file mode 100644
index 00000000..7f717ee7
--- /dev/null
+++ b/docs/components/Footer/Footer.styles.module.css
@@ -0,0 +1,4 @@
+.links {
+  list-style-type: "\00BB";
+  padding-left: 8px;
+}
diff --git a/docs/components/Footer/index.jsx b/docs/components/Footer/index.jsx
new file mode 100644
index 00000000..132ec75f
--- /dev/null
+++ b/docs/components/Footer/index.jsx
@@ -0,0 +1,31 @@
+import links from './links.json'
+import styles from './Footer.styles.module.css'
+
+function Footer () {
+  return (
+    <div className="w-full">
+      <h3 className="text-md font-semibold mb-4">
+        Main Topics
+      </h3>
+
+      <ul className={styles.links}>
+        {links.mainTopics.map((item) => (
+          <li key={item.label} className="pl-[6px] text-[12px]">
+            <a href={item.url} className="text-slate-500 hover:underline hover:text-blue-500">
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+
+      <div className="mt-5 w-full flex justify-center">
+        ACAP Dev Documentation {new Date().getFullYear()} ©{' '}
+        <a href="https://acaptutorials.github.com/" target="_blank" rel="noreferrer">
+          acaptutorials
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default Footer
diff --git a/docs/components/Footer/links.json b/docs/components/Footer/links.json
new file mode 100644
index 00000000..e54815f9
--- /dev/null
+++ b/docs/components/Footer/links.json
@@ -0,0 +1,32 @@
+{
+  "mainTopics": [
+    {
+      "label": "Home",
+      "url": "https://acaptutorials.github.io/"
+    },
+    {
+      "label": "Changelog",
+      "url": "https://acaptutorials.github.io/changelog"
+    },
+    {
+      "label": "Installation and Setup",
+      "url": "/installation"
+    },
+    {
+      "label": "Post-Installation Setup",
+      "url": "/post-installation"
+    },
+    {
+      "label": "Security",
+      "url": "/security"
+    },
+    {
+      "label": "Checklist",
+      "url": "/checklist"
+    },
+    {
+      "label": "References",
+      "url": "/references"
+    }
+  ]
+}
diff --git a/docs/theme.config.jsx b/docs/theme.config.jsx
index afe2149e..63b5e66e 100644
--- a/docs/theme.config.jsx
+++ b/docs/theme.config.jsx
@@ -3,6 +3,7 @@ import { useConfig } from 'nextra-theme-docs'
 import Image from 'next/image'
 
 import BannerText from '@/components/BannerText'
+import Footer from '@/components/Footer'
 
 export default {
   logo: (
@@ -65,12 +66,7 @@ export default {
   },
   footer: {
     text: (
-      <span>
-        ACAP Dev Documentation {new Date().getFullYear()} ©{' '}
-        <a href="https://github.com/acaptutorials" target="_blank" rel="noreferrer">
-          acaptutorials
-        </a>
-      </span>
+      <Footer />
     )
   }
 }