diff --git a/application/administration/static/js/adminHandler.js b/application/administration/static/js/adminHandler.js
index 393881f..ab209ef 100644
--- a/application/administration/static/js/adminHandler.js
+++ b/application/administration/static/js/adminHandler.js
@@ -1,21 +1,3 @@
-var mode = false
-async function toggleDarkMode() {
-    let darkMode = document.getElementById("dark-mode");    
-    darkMode.disabled = !darkMode.disabled;
-    mode = !mode;
-    if(mode){
-        document.getElementById('modeToggle').innerHTML = "light_mode"
-        document.getElementById('main_html').classList.add('uk-light')
-    } else {
-        document.getElementById('modeToggle').innerHTML = "dark_mode"
-        document.getElementById('main_html').classList.remove('uk-light')
-    }
-}
-
-if(session.user.flags.darkmode){
-    toggleDarkMode()
-}
-
 document.addEventListener('DOMContentLoaded', async function() {
     let sites = await fetchSites()
     await updateSitesPagination()
diff --git a/application/administration/templates/admin_index.html b/application/administration/templates/admin_index.html
index 8ab4149..3c20105 100644
--- a/application/administration/templates/admin_index.html
+++ b/application/administration/templates/admin_index.html
@@ -12,10 +12,16 @@
         <!-- Material Symbols - Sharp Set -->
         <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
         <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
+        {% if session['user']['flags']['darkmode'] %}
+        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
+        {% endif %}
 
-        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
     </head>
+    {% if session['user']['flags']['darkmode'] %}
+    <body class="uk-light">
+    {% else %}
     <body>
+    {% endif %}
         <nav class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
                 <div class="uk-navbar uk-navbar-primary">
diff --git a/application/administration/templates/role.html b/application/administration/templates/role.html
index 62bed40..a666d7e 100644
--- a/application/administration/templates/role.html
+++ b/application/administration/templates/role.html
@@ -12,10 +12,15 @@
         <!-- Material Symbols - Sharp Set -->
         <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
         <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
-
-        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
+        {% if session['user']['flags']['darkmode'] %}
+        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
+        {% endif %}
     </head>
+    {% if session['user']['flags']['darkmode'] %}
+    <body class="uk-light">
+    {% else %}
     <body>
+    {% endif %}
         <div class="uk-container uk-section">
             <div uk-grid>
                 <div class="uk-width-1-1" >
@@ -84,24 +89,6 @@
             await replenishForm(role, mode)
         })
 
-        var mode = false
-        async function toggleDarkMode() {
-            let darkMode = document.getElementById("dark-mode");    
-            darkMode.disabled = !darkMode.disabled;
-            mode = !mode;
-            if(mode){
-                document.getElementById('modeToggle').innerHTML = "light_mode"
-                document.getElementById('main_html').classList.add('uk-light')
-            } else {
-                document.getElementById('modeToggle').innerHTML = "dark_mode"
-                document.getElementById('main_html').classList.remove('uk-light')
-            }
-        }
-
-        if(session.user.flags.darkmode){
-            toggleDarkMode()
-        }
-
         async function replenishForm(role, mode){
             document.getElementById('role_name').value = role.role_name
             document.getElementById('role_description').value = role.role_description
diff --git a/application/administration/templates/site.html b/application/administration/templates/site.html
index 72e5095..3d5b200 100644
--- a/application/administration/templates/site.html
+++ b/application/administration/templates/site.html
@@ -12,10 +12,15 @@
         <!-- Material Symbols - Sharp Set -->
         <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
         <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
-
-        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
+        {% if session['user']['flags']['darkmode'] %}
+        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
+        {% endif %}
     </head>
-    <body id="test">
+    {% if session['user']['flags']['darkmode'] %}
+    <body class="uk-light">
+    {% else %}
+    <body>
+    {% endif %}
         <div class="uk-container uk-section uk-margin-remove-top">
             <div uk-grid>
                 <div class="uk-width-1-1" >
@@ -151,24 +156,6 @@
             console.log(mode)
         })
 
-        var mode = false
-        async function toggleDarkMode() {
-            let darkMode = document.getElementById("dark-mode");    
-            darkMode.disabled = !darkMode.disabled;
-            mode = !mode;
-            if(mode){
-                document.getElementById('modeToggle').innerHTML = "light_mode"
-                document.getElementById('main_html').classList.add('uk-light')
-            } else {
-                document.getElementById('modeToggle').innerHTML = "dark_mode"
-                document.getElementById('main_html').classList.remove('uk-light')
-            }
-        }
-
-        if(session.user.flags.darkmode){
-            toggleDarkMode()
-        }
-
         async function replenishForm(site, mode){
             document.getElementById('site_name').value = site.site_name
             document.getElementById('site_description').value = site.site_description
diff --git a/application/administration/templates/user.html b/application/administration/templates/user.html
index 5e1f943..408af39 100644
--- a/application/administration/templates/user.html
+++ b/application/administration/templates/user.html
@@ -12,10 +12,15 @@
         <!-- Material Symbols - Sharp Set -->
         <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
         <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
-
-        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>
+        {% if session['user']['flags']['darkmode'] %}
+        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
+        {% endif %}
     </head>
+    {% if session['user']['flags']['darkmode'] %}
+    <body class="uk-light">
+    {% else %}
     <body>
+    {% endif %}
         <div class="uk-section">
             <div class="uk-container uk-container-xsmall">
                 <div class="uk-grid-small" uk-grid>
@@ -198,24 +203,6 @@
             await replenishForm(user, mode)
         })
 
-        var mode = false
-        async function toggleDarkMode() {
-            let darkMode = document.getElementById("dark-mode");    
-            darkMode.disabled = !darkMode.disabled;
-            mode = !mode;
-            if(mode){
-                document.getElementById('modeToggle').innerHTML = "light_mode"
-                document.getElementById('main_html').classList.add('uk-light')
-            } else {
-                document.getElementById('modeToggle').innerHTML = "dark_mode"
-                document.getElementById('main_html').classList.remove('uk-light')
-            }
-        }
-
-        if(session.user.flags.darkmode){
-            toggleDarkMode()
-        }
-
         async function replenishForm(user, mode){
             document.getElementById('login_name').value = user.username
             document.getElementById('login_email').value = user.email
