diff --git a/_includes/scrollspy.html b/_includes/scrollspy.html
new file mode 100644
index 0000000..6dc546e
--- /dev/null
+++ b/_includes/scrollspy.html
@@ -0,0 +1,64 @@
+<script defer>
+/**
+ * TOC ScrollSpy
+ * Highlights the current section in the table of contents
+ */
+function initTocScrollSpy() {
+  const headings = document.querySelector('.content').querySelectorAll('h2[id], h3[id], h4[id], h5[id], h6[id]');
+  const tocLinks = document.querySelectorAll('.toc-link');
+
+  if (headings.length === 0 || tocLinks.length === 0) return;
+
+  const idToTocLink = {};
+  tocLinks.forEach(link => {
+    const href = link.getAttribute('href');
+    if (href && href.startsWith('#')) {
+      idToTocLink[href.substring(1)] = link;
+    }
+  });
+
+  const headingPositions = Array.from(headings).map(heading => {
+    return {
+      id: heading.id,
+      top: heading.getBoundingClientRect().top + window.pageYOffset - 100
+    };
+  });
+
+  function updateToc() {
+    const scrollPosition = window.pageYOffset;
+
+    let currentHeadingIndex = headingPositions.findIndex(heading =>
+      heading.top > scrollPosition
+    ) - 1;
+
+    if (currentHeadingIndex === -2) {
+      currentHeadingIndex = headingPositions.length - 1;
+    } else if (currentHeadingIndex < 0) {
+      currentHeadingIndex = 0;
+    }
+
+    tocLinks.forEach(link => link.classList.remove('font-bold', 'text-primary-800', 'dark:text-primary-300'));
+
+    const currentId = headingPositions[currentHeadingIndex]?.id;
+    if (currentId && idToTocLink[currentId]) {
+      idToTocLink[currentId].classList.add('font-bold', 'text-primary-800', 'dark:text-primary-300');
+    }
+  }
+
+  updateToc();
+
+  let ticking = false;
+  window.addEventListener('scroll', function () {
+    if (!ticking) {
+      window.requestAnimationFrame(function () {
+        updateToc();
+        ticking = false;
+      });
+      ticking = true;
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', initTocScrollSpy);
+
+</script>
\ No newline at end of file
diff --git a/_includes/toggle-theme.html b/_includes/toggle-theme.html
new file mode 100644
index 0000000..8101335
--- /dev/null
+++ b/_includes/toggle-theme.html
@@ -0,0 +1,36 @@
+<script defer>
+document.getElementById('theme-toggle').addEventListener('click', (event) => {
+    let newTheme = undefined;
+    if (localStorage.theme === "dark") {
+        localStorage.removeItem('theme')
+    } else if (!localStorage.theme) {
+        newTheme = 'light';
+        localStorage.theme = 'light';
+    } else {
+        newTheme = 'dark';
+        localStorage.theme = 'dark';
+    }
+
+    applyTheme(newTheme);
+});
+
+document.getElementById('theme-dropdown').addEventListener('change', (event) => {
+    if (event.target.dataset.changed ) {
+        event.target.dataset.changed = undefined;
+        if (new Date(event.target.dataset.changed) - new Date() < 1000) {
+            return;
+        }
+    }
+    const selectedTheme = event.target.value;
+    if (selectedTheme === 'light' || selectedTheme === 'dark') {
+        localStorage.theme = selectedTheme;
+    } else {
+        selectedTheme = undefined;
+        localStorage.removeItem('theme');
+    }
+    applyTheme(selectedTheme, true);
+});
+
+applyTheme();
+
+</script>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 7b5b493..d14ff1b 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -23,7 +23,7 @@
             {% include foot.html %}
         </div>
     </footer>
-    <script src="{{ '/assets/js/toggle-theme.js' | relative_url }}"></script>
+    {% include toggle-theme.html %}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/_layouts/page.html b/_layouts/page.html
index b08be64..8653a97 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -15,4 +15,4 @@ layout: default
     {{ content }}
 </div>
 
-<script src="{{ '/assets/js/scrollspy.js' | relative_url }}"></script>
\ No newline at end of file
+{% include scrollspy.html %}
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index 63ea398..6447111 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -15,4 +15,4 @@ layout: default
     {{ content }}
 </div>
 
-<script src="{{ '/assets/js/scrollspy.js' | relative_url }}"></script>
\ No newline at end of file
+{% include scrollspy.html %}
\ No newline at end of file
diff --git a/assets/js/scrollspy.js b/assets/js/scrollspy.js
index cff0d84..e69de29 100644
--- a/assets/js/scrollspy.js
+++ b/assets/js/scrollspy.js
@@ -1,62 +0,0 @@
-/**
- * TOC ScrollSpy
- * Highlights the current section in the table of contents
- */
-function initTocScrollSpy() {
-  const headings = document.querySelector('.content').querySelectorAll('h2[id], h3[id], h4[id], h5[id], h6[id]');
-  const tocLinks = document.querySelectorAll('.toc-link');
-
-  if (headings.length === 0 || tocLinks.length === 0) return;
-
-  const idToTocLink = {};
-  tocLinks.forEach(link => {
-    const href = link.getAttribute('href');
-    if (href && href.startsWith('#')) {
-      idToTocLink[href.substring(1)] = link;
-    }
-  });
-
-  const headingPositions = Array.from(headings).map(heading => {
-    return {
-      id: heading.id,
-      top: heading.getBoundingClientRect().top + window.pageYOffset - 100
-    };
-  });
-
-  function updateToc() {
-    const scrollPosition = window.pageYOffset;
-
-    let currentHeadingIndex = headingPositions.findIndex(heading =>
-      heading.top > scrollPosition
-    ) - 1;
-
-    if (currentHeadingIndex === -2) {
-      currentHeadingIndex = headingPositions.length - 1;
-    } else if (currentHeadingIndex < 0) {
-      currentHeadingIndex = 0;
-    }
-
-    tocLinks.forEach(link => link.classList.remove('font-bold', 'text-primary-800', 'dark:text-primary-300'));
-
-    const currentId = headingPositions[currentHeadingIndex]?.id;
-    if (currentId && idToTocLink[currentId]) {
-      idToTocLink[currentId].classList.add('font-bold', 'text-primary-800', 'dark:text-primary-300');
-    }
-  }
-
-  updateToc();
-
-  let ticking = false;
-  window.addEventListener('scroll', function () {
-    if (!ticking) {
-      window.requestAnimationFrame(function () {
-        updateToc();
-        ticking = false;
-      });
-      ticking = true;
-    }
-  });
-}
-
-document.addEventListener('DOMContentLoaded', initTocScrollSpy);
-
diff --git a/tailwind.config.js b/tailwind.config.js
index be7116f..f5738a7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,7 @@ module.exports = {
   content: [
     './_includes/**/*.html',
     './_layouts/**/*.html',
-    './_posts/*.md',
+    './_pages/**/*.html',
     './*.html',
   ],
   theme: {