diff --git a/templates/layouts/base.tera b/templates/layouts/base.tera
index b0a3468..3fec63a 100644
--- a/templates/layouts/base.tera
+++ b/templates/layouts/base.tera
@@ -33,38 +33,7 @@
 
     <link rel="stylesheet" href="/static/styles.css" />
 
-    <script>
-      const runColorMode = (fn) => {
-        let theme = localStorage.getItem("theme");
-        if (theme) {
-          document.documentElement.className = theme;
-          document.getElementById("themes").value = theme;
-          return;
-        }
-
-        <!-- if media queries are not ussported use this as the default theme -->
-        if (!window.matchMedia) {
-          document.documentElement.className = "theme-dark";
-        }
-
-        const query = window.matchMedia("(prefers-color-scheme: dark)");
-
-        fn(query.matches);
-
-        query.addEventListener("change", (event) => fn(event.matches));
-        localStorage.setItem("theme", document.documentElement.className);
-      };
-
-      const isDarkMode = () =>
-        window.matchMedia &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-      runColorMode((isDarkMode) => {
-        document.documentElement.className = isDarkMode
-          ? "theme-dark"
-          : "theme-light";
-      });
-    </script>
+    <script>{%include "partials/script.js" %}</script>
 
     {% block additionalhead %} {% endblock %}
   </head>
diff --git a/templates/pages/badges.tera b/templates/pages/badges.tera
index 0794b7b..249e7dd 100644
--- a/templates/pages/badges.tera
+++ b/templates/pages/badges.tera
@@ -37,11 +37,13 @@
     <button id="copybtn">Copy</button>
   </div>
 </div>
+{% endblock %}
 
+{% block additionalfoot %}
 <script>
-document.getElementById("copybtn").addEventListener("click", () => {
-  const codeToCopy = document.getElementById("copy").value;
-  navigator.clipboard.writeText(codeToCopy);
-});
+  document.getElementById("copybtn").addEventListener("click", () => {
+    const codeToCopy = document.getElementById("copy").value;
+    navigator.clipboard.writeText(codeToCopy);
+  });
 </script>
 {% endblock %}
diff --git a/templates/pages/post.tera b/templates/pages/post.tera
index a80cdf2..465be63 100644
--- a/templates/pages/post.tera
+++ b/templates/pages/post.tera
@@ -96,9 +96,7 @@
 <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/nix.min.js"></script>
 <script>
   hljs.highlightAll();
-</script>
 
-<script>
   const codeblocks = document.querySelectorAll('div.codeblock');
 
   codeblocks.forEach((block) => {
diff --git a/templates/partials/footer.tera b/templates/partials/footer.tera
index 7435725..3b7a83b 100644
--- a/templates/partials/footer.tera
+++ b/templates/partials/footer.tera
@@ -1,8 +1,8 @@
 <footer>
   <span class="align-footer">
-    <a href="https://ctp-webr.ing/isabelroses/previous"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg></a>
-    <a href="https://ctp-webr.ing/"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M418.4 157.9c35.3-8.3 61.6-40 61.6-77.9c0-44.2-35.8-80-80-80c-43.4 0-78.7 34.5-80 77.5L136.2 151.1C121.7 136.8 101.9 128 80 128c-44.2 0-80 35.8-80 80s35.8 80 80 80c12.2 0 23.8-2.7 34.1-7.6L259.7 407.8c-2.4 7.6-3.7 15.8-3.7 24.2c0 44.2 35.8 80 80 80s80-35.8 80-80c0-27.7-14-52.1-35.4-66.4l37.8-207.7zM156.3 232.2c2.2-6.9 3.5-14.2 3.7-21.7l183.8-73.5c3.6 3.5 7.4 6.7 11.6 9.5L317.6 354.1c-5.5 1.3-10.8 3.1-15.8 5.5L156.3 232.2z"/></svg></a>
-    <a href="https://ctp-webr.ing/isabelroses/next"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg></a>
+    <a href="https://ctp-webr.ing/isabelroses/previous" aria-label="previous catppuccin webring"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg></a>
+    <a href="https://ctp-webr.ing/" aria-label="catppuccin webring"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M418.4 157.9c35.3-8.3 61.6-40 61.6-77.9c0-44.2-35.8-80-80-80c-43.4 0-78.7 34.5-80 77.5L136.2 151.1C121.7 136.8 101.9 128 80 128c-44.2 0-80 35.8-80 80s35.8 80 80 80c12.2 0 23.8-2.7 34.1-7.6L259.7 407.8c-2.4 7.6-3.7 15.8-3.7 24.2c0 44.2 35.8 80 80 80s80-35.8 80-80c0-27.7-14-52.1-35.4-66.4l37.8-207.7zM156.3 232.2c2.2-6.9 3.5-14.2 3.7-21.7l183.8-73.5c3.6 3.5 7.4 6.7 11.6 9.5L317.6 354.1c-5.5 1.3-10.8 3.1-15.8 5.5L156.3 232.2z"/></svg></a>
+    <a href="https://ctp-webr.ing/isabelroses/next" aria-label="license-text catppuccin webring"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg></a>
   </span>
 
   <ul class="align-footer">
diff --git a/templates/partials/header.tera b/templates/partials/header.tera
index e78fbf3..75adc76 100644
--- a/templates/partials/header.tera
+++ b/templates/partials/header.tera
@@ -16,7 +16,6 @@
           name="themes"
           id="themes"
           aria-label="Change theme"
-          onchange="document.documentElement.className = this.value; localStorage.setItem('theme', this.value);"
         >
           <option value="theme-dark">Dark</option>
           <option value="theme-light">Light</option>
diff --git a/templates/partials/script.js b/templates/partials/script.js
new file mode 100644
index 0000000..2fd3d95
--- /dev/null
+++ b/templates/partials/script.js
@@ -0,0 +1,36 @@
+// set theme on intial load
+setTheme(getTheme());
+
+document.addEventListener("DOMContentLoaded", () => {
+  const themes = document.getElementById("themes");
+
+  setTheme(getTheme());
+
+  themes.addEventListener("change", (event) => {
+    setTheme(event.target.value);
+  });
+});
+
+function setTheme(theme) {
+  localStorage.setItem("theme", theme);
+  document.documentElement.className = theme;
+
+  const themes = document.getElementById("themes");
+  if (themes) {
+    themes.value = theme;
+  }
+}
+
+function getTheme() {
+  const theme = localStorage.getItem("theme");
+
+  if (theme) return theme;
+
+  if (!window.matchMedia) return "theme-dark";
+
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "theme-dark";
+  } else {
+    return "theme-light";
+  }
+}