diff --git a/web/assets/main.css b/web/assets/main.css
index 05e39d99b..1c81083d7 100644
--- a/web/assets/main.css
+++ b/web/assets/main.css
@@ -56,7 +56,7 @@ body {
     --border: 0 0% 89.8%;
     --input: 0 0% 89.8%;
  
-    --primary: 0 0% 9%;
+    --primary: 24 100% 50%;
     --primary-foreground: 0 0% 98%;
  
     --secondary: 0 0% 96.1%;
@@ -83,7 +83,7 @@ body {
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
  
-    --card: 0 0% 3.9%;
+    --card: 0 0% 14.9%;
     --card-foreground: 0 0% 98%;
  
     --border: 0 0% 14.9%;
diff --git a/web/components/Modal.vue b/web/components/Modal.vue
index 25d7cfa89..370d0b5ff 100644
--- a/web/components/Modal.vue
+++ b/web/components/Modal.vue
@@ -94,11 +94,11 @@ const ariaLablledById = computed((): string|undefined => props.title ? `ModalTit
               success ? 'shadow-green-600/30 border-green-600/10' : '',
               !error && !success ? 'shadow-orange/10 border-white/10' : '',
             ]"
-            class="text-16px text-beta bg-alpha text-left relative z-10 flex flex-col justify-around border-2 border-solid shadow-xl transform overflow-hidden rounded-lg transition-all sm:w-full"
+            class="text-16px text-foreground bg-muted dark:bg-background text-left relative z-10 flex flex-col justify-around border-2 border-solid shadow-xl transform overflow-hidden rounded-lg transition-all sm:w-full"
           >
             <div v-if="showCloseX" class="absolute z-20 right-0 top-0 pt-4px pr-4px hidden sm:block">
               <button
-                class="rounded-md text-beta bg-transparent 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"
+                class="rounded-md text-foreground bg-transparent 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"
                 type="button"
                 @click="closeModal"
               >
@@ -115,7 +115,7 @@ const ariaLablledById = computed((): string|undefined => props.title ? `ModalTit
                 'justify-center': !$slots['header'],
               }"
             >
-              <div class="absolute -z-10 inset-0 opacity-10 bg-beta" />
+              <div class="absolute -z-10 inset-0 opacity-10 bg-card" />
               <template v-if="!$slots['header']">
                 <h1 v-if="title" :id="ariaLablledById" class="text-center text-20px sm:text-24px font-semibold flex flex-wrap justify-center gap-x-4px">
                   {{ title }}
diff --git a/web/components/UserProfile.ce.vue b/web/components/UserProfile.ce.vue
index a426ec43a..dd56d5060 100644
--- a/web/components/UserProfile.ce.vue
+++ b/web/components/UserProfile.ce.vue
@@ -97,7 +97,7 @@ onBeforeMount(() => {
 <template>
   <div
     id="UserProfile"
-    class="text-primary relative z-20 flex flex-col h-full gap-y-4px pt-4px pr-16px pl-40px"
+    class="text-foreground relative z-20 flex flex-col h-full gap-y-4px pt-4px pr-16px pl-40px"
   >
     <div v-if="bannerGradient" class="absolute z-0 w-[125%] top-0 bottom-0 right-0" :style="bannerGradient" />