diff --git a/_data/serverState.ts b/_data/serverState.ts
index 8bd75eafb..240ef96af 100644
--- a/_data/serverState.ts
+++ b/_data/serverState.ts
@@ -29,7 +29,7 @@ const blacklistedGuid = '154B-00EE-0700-9B50CF819816';
 // EBLACKLISTED1
 // EBLACKLISTED2
 // ENOCONN
-const state: string = 'ENOKEYFILE2';
+const state: string = 'PLUS';
 
 const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
 let expireTime = 0;
@@ -51,7 +51,7 @@ const serverState = {
   "locale": "en_US",
   "name": "fuji",
   // "pluginInstalled": "dynamix.unraid.net.staging.plg",
-  "pluginInstalled": false,
+  "pluginInstalled": true,
   "registered": true,
   "regGen": 0,
   "regGuid": "0781-5583-8355-81071A2B0211",
@@ -64,7 +64,6 @@ const serverState = {
     "descriptionShow": true,
     "metaColor": "",
     "name": "black",
-    // "name": "white",
     "textColor": ""
   },
   uptime,
diff --git a/components/Modal.vue b/components/Modal.vue
index 1d38ae80f..b5a19c8fa 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -69,11 +69,11 @@ const ariaLablledById = computed((): string|undefined => props.title ? `ModalTit
           <div
             :class="[
               maxWidth,
-              error ? 'shadow-unraid-red/30' : '',
-              success ? 'shadow-green-400/30' : '',
-              !error && !success ? 'shadow-orange/10' : '',
+              error ? 'shadow-unraid-red/30 border-unraid-red/10' : '',
+              success ? 'shadow-green-600/30 border-green-600/10' : '',
+              !error && !success ? 'shadow-orange/10 border-white/10' : '',
             ]"
-            class="text-alpha bg-beta relative transform overflow-hidden rounded-lg px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6"
+            class="text-alpha bg-beta border-2 border-solid relative transform overflow-hidden rounded-lg px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6"
           >
             <div v-if="showCloseX" class="absolute z-20 right-0 top-0 hidden pt-2 pr-2 sm:block">
               <button @click="closeModal" type="button" class="rounded-md text-alpha bg-beta p-2 hover:text-white focus:text-white hover:bg-unraid-red focus:bg-unraid-red focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
diff --git a/components/UserProfile/CallbackFeedback.vue b/components/UserProfile/CallbackFeedback.vue
index 2411f6461..54e158881 100644
--- a/components/UserProfile/CallbackFeedback.vue
+++ b/components/UserProfile/CallbackFeedback.vue
@@ -59,7 +59,7 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
         <p v-if="success === undefined || callbackLoading">Installing {{ keyType }} License Key…</p>
         <template v-else>
           <div v-if="success === true" class="flex items-center justify-center gap-x-8px">
-            <CheckCircleIcon class="fill-green-400 w-24px" />
+            <CheckCircleIcon class="fill-green-600 w-24px" />
             <p>Installed {{ keyType }} License Key</p>
           </div>
           <template v-else-if="success === false">
@@ -83,7 +83,7 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
         <p v-if="updateSuccess === undefined || callbackLoading">Updating Connect account config…</p>
         <template v-else>
           <div v-if="updateSuccess === true" class="flex items-center justify-center gap-x-8px">
-            <CheckCircleIcon class="fill-green-400 w-24px" />
+            <CheckCircleIcon class="fill-green-600 w-24px" />
             <p>Connect config updated</p>
           </div>
           <div v-else-if="updateSuccess === false" class="flex items-center justify-center gap-x-8px">
diff --git a/components/UserProfile/DropdownConnectStatus.vue b/components/UserProfile/DropdownConnectStatus.vue
index 27f11b9cf..cebe16cbe 100644
--- a/components/UserProfile/DropdownConnectStatus.vue
+++ b/components/UserProfile/DropdownConnectStatus.vue
@@ -17,7 +17,7 @@ const apiLoading = ref(false);
     </template>
     <span v-else class="w-full flex flex-row justify-start items-center gap-x-8px">
       <ExclamationTriangleIcon v-if="onlineStatus !== 'online'" class="text-unraid-red w-16px h-16px" />
-      <span v-else class="block w-12px h-12px bg-green-400 rounded-full"></span>
+      <span v-else class="block w-12px h-12px bg-green-600 rounded-full"></span>
       <span>{{ onlineStatus !== 'online' ? 'Disconnected' : 'Connected' }}</span>
     </span>
   </li>
diff --git a/components/UserProfile/DropdownWrapper.vue b/components/UserProfile/DropdownWrapper.vue
index a2e592eff..1d628d13e 100644
--- a/components/UserProfile/DropdownWrapper.vue
+++ b/components/UserProfile/DropdownWrapper.vue
@@ -1,5 +1,9 @@
+<script lang="ts" setup>
+// shadow-[var(--ring-offset-shadow)_var(--ring-shadow)_var(--shadow-beta)]
+</script>
+
 <template>
-  <nav class="flex flex-col gap-y-8px p-8px bg-alpha rounded-lg shadow-[var(--ring-offset-shadow)_var(--ring-shadow)_var(--shadow-beta)]">
+  <nav class="flex flex-col gap-y-8px p-8px bg-alpha rounded-lg shadow-xl">
     <slot/>
   </nav>
 </template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 729f173ed..2c35f64b5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <client-only>
-    <div class="flex flex-row items-center justify-center gap-6 p-6">
+    <div class="flex flex-row items-center justify-center gap-6 p-6 text-gray-200 bg-zinc-800">
       <NuxtLink to="/" class="underline hover:no-underline focus:no-underline">Test Vue Components</NuxtLink>
       <NuxtLink to="/webComponents" class="underline hover:no-underline focus:no-underline">Test Web Components</NuxtLink>
     </div>
diff --git a/pages/index.vue b/pages/index.vue
index 9ed6f004b..62b4a9a72 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,29 +8,31 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div class="max-w-5xl mx-auto bg-gray-200">
-    <client-only>
-      <div class="flex flex-col gap-6 p-6">
-        <h2>Vue Components</h2>
-        <h3>UserProfileCe</h3>
-        <UserProfileCe :server="serverState" />
-        <hr />
-        <h3>DownloadApiLogsCe</h3>
-        <DownloadApiLogsCe />
-        <hr />
-        <h3>AuthCe</h3>
-        <AuthCe />
-        <hr />
-        <h3>KeyActionsCe</h3>
-        <KeyActionsCe />
-        <hr />
-        <h3>WanIpCheckCe</h3>
-        <WanIpCheckCe php-wan-ip="47.184.85.45" />
-        <hr />
-        <h3>ModalsCe</h3>
-        <ModalsCe />
-      </div>
-    </client-only>
+  <div class="text-black bg-white dark:text-white dark:bg-black">
+    <div class="max-w-5xl mx-auto">
+      <client-only>
+        <div class="flex flex-col gap-6 p-6">
+          <h2>Vue Components</h2>
+          <h3>UserProfileCe</h3>
+          <UserProfileCe :server="serverState" />
+          <hr />
+          <h3>DownloadApiLogsCe</h3>
+          <DownloadApiLogsCe />
+          <hr />
+          <h3>AuthCe</h3>
+          <AuthCe />
+          <hr />
+          <h3>KeyActionsCe</h3>
+          <KeyActionsCe />
+          <hr />
+          <h3>WanIpCheckCe</h3>
+          <WanIpCheckCe php-wan-ip="47.184.85.45" />
+          <hr />
+          <h3>ModalsCe</h3>
+          <ModalsCe />
+        </div>
+      </client-only>
+    </div>
   </div>
 </template>
 
diff --git a/pages/webComponents.vue b/pages/webComponents.vue
index ee0d1b9f1..f50d41f69 100644
--- a/pages/webComponents.vue
+++ b/pages/webComponents.vue
@@ -9,26 +9,28 @@ onBeforeMount(() => {
 
 <template>
   <client-only>
-    <div class="max-w-5xl mx-auto bg-gray-200">
-      <div class="flex flex-col gap-6 p-6">
-        <h2>Web Components</h2>
-        <h3>UserProfileCe</h3>
-        <connect-user-profile :server="JSON.stringify(serverState)"></connect-user-profile>
-        <hr />
-        <h3>DownloadApiLogsCe</h3>
-        <connect-download-api-logs></connect-download-api-logs>
-        <hr />
-        <h3>AuthCe</h3>
-        <connect-auth></connect-auth>
-        <hr />
-        <h3>KeyActionsCe</h3>
-        <connect-key-actions></connect-key-actions>
-        <hr />
-        <h3>WanIpCheckCe</h3>
-        <connect-wan-ip-check php-wan-ip="47.184.85.45"></connect-wan-ip-check>
-        <hr />
-        <h3>ModalsCe</h3>
-        <connect-modals></connect-modals>
+    <div class="text-black bg-white dark:text-white dark:bg-black">
+      <div class="max-w-5xl mx-auto">
+        <div class="flex flex-col gap-6 p-6">
+          <h2>Web Components</h2>
+          <h3>UserProfileCe</h3>
+          <connect-user-profile :server="JSON.stringify(serverState)"></connect-user-profile>
+          <hr />
+          <h3>DownloadApiLogsCe</h3>
+          <connect-download-api-logs></connect-download-api-logs>
+          <hr />
+          <h3>AuthCe</h3>
+          <connect-auth></connect-auth>
+          <hr />
+          <h3>KeyActionsCe</h3>
+          <connect-key-actions></connect-key-actions>
+          <hr />
+          <h3>WanIpCheckCe</h3>
+          <connect-wan-ip-check php-wan-ip="47.184.85.45"></connect-wan-ip-check>
+          <hr />
+          <h3>ModalsCe</h3>
+          <connect-modals></connect-modals>
+        </div>
       </div>
     </div>
   </client-only>
diff --git a/store/theme.ts b/store/theme.ts
index 77fe9d1ea..15f449d3c 100644
--- a/store/theme.ts
+++ b/store/theme.ts
@@ -61,8 +61,9 @@ export const useThemeStore = defineStore('theme', () => {
 
   return {
     // state
-    theme,
     bannerGradient,
+    darkMode,
+    theme,
     // actions
     setTheme,
   };