diff --git a/frontend/src/components/Page-Header.vue b/frontend/src/components/Page-Header.vue
index 7bb0a469..dff32460 100644
--- a/frontend/src/components/Page-Header.vue
+++ b/frontend/src/components/Page-Header.vue
@@ -19,9 +19,17 @@
       </div>
       <div class="navbar-item">
         <button v-tooltip="'Switch to Light theme'" class="button is-dark has-tooltip-bottom"
-          @click="selectedTheme = 'light'" v-if="selectedTheme == 'dark'">🌞</button>
+          @click="selectedTheme = 'light'" v-if="selectedTheme == 'dark'">
+          <span class="icon is-small is-left has-text-warning">
+            <font-awesome-icon icon="fa-solid fa-sun" />
+          </span>
+        </button>
         <button v-tooltip="'Switch to Dark theme'" class="button is-dark  has-tooltip-bottom"
-          @click="selectedTheme = 'dark'" v-if="selectedTheme == 'light'">🌚</button>
+          @click="selectedTheme = 'dark'" v-if="selectedTheme == 'light'">
+          <span class="icon is-small is-left">
+            <font-awesome-icon icon="fa-solid fa-moon" />
+          </span>
+        </button>
       </div>
     </div>
   </nav>
@@ -45,36 +53,39 @@ defineProps({
 const applyPreferredColorScheme = (scheme) => {
   for (var s = 0; s < document.styleSheets.length; s++) {
     for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
-      const rule = document.styleSheets[s].cssRules[i];
-
-      if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
-        switch (scheme) {
-          case "light":
-            rule.media.appendMedium("original-prefers-color-scheme");
-            if (rule.media.mediaText.includes("light")) {
-              rule.media.deleteMedium("(prefers-color-scheme: light)");
-            }
-            if (rule.media.mediaText.includes("dark")) {
-              rule.media.deleteMedium("(prefers-color-scheme: dark)");
-            }
-            break;
-          case "dark":
-            rule.media.appendMedium("(prefers-color-scheme: light)");
-            rule.media.appendMedium("(prefers-color-scheme: dark)");
-            if (rule.media.mediaText.includes("original")) {
-              rule.media.deleteMedium("original-prefers-color-scheme");
-            }
-            break;
-          default:
-            rule.media.appendMedium("(prefers-color-scheme: dark)");
-            if (rule.media.mediaText.includes("light")) {
-              rule.media.deleteMedium("(prefers-color-scheme: light)");
-            }
-            if (rule.media.mediaText.includes("original")) {
-              rule.media.deleteMedium("original-prefers-color-scheme");
-            }
-            break;
+      try {
+        const rule = document.styleSheets[s].cssRules[i];
+        if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
+          switch (scheme) {
+            case "light":
+              rule.media.appendMedium("original-prefers-color-scheme");
+              if (rule.media.mediaText.includes("light")) {
+                rule.media.deleteMedium("(prefers-color-scheme: light)");
+              }
+              if (rule.media.mediaText.includes("dark")) {
+                rule.media.deleteMedium("(prefers-color-scheme: dark)");
+              }
+              break;
+            case "dark":
+              rule.media.appendMedium("(prefers-color-scheme: light)");
+              rule.media.appendMedium("(prefers-color-scheme: dark)");
+              if (rule.media.mediaText.includes("original")) {
+                rule.media.deleteMedium("original-prefers-color-scheme");
+              }
+              break;
+            default:
+              rule.media.appendMedium("(prefers-color-scheme: dark)");
+              if (rule.media.mediaText.includes("light")) {
+                rule.media.deleteMedium("(prefers-color-scheme: light)");
+              }
+              if (rule.media.mediaText.includes("original")) {
+                rule.media.deleteMedium("original-prefers-color-scheme");
+              }
+              break;
+          }
         }
+      } catch (e) {
+        console.debug(e);
       }
     }
   }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 9156da27..820ca712 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,7 +6,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
   faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
-  faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ, faArrowDownAZ, faEject, faGlobe
+  faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ, faArrowDownAZ, faEject, faGlobe, faMoon, faSun
 } from '@fortawesome/free-solid-svg-icons'
 
 import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
@@ -17,8 +17,9 @@ import './assets/css/bulma-dark.css'
 import './assets/css/style.css'
 import 'floating-vue/dist/style.css'
 
-library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
-  faSquare, faSquareCheck, faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ, faArrowDownAZ, faEject, faGlobe)
+library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload,
+  faUpRightFromSquare, faSquare, faSquareCheck, faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ,
+  faArrowDownAZ, faEject, faGlobe, faMoon, faSun)
 const app = createApp(App);
 
 app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1);