diff --git a/app/components/staff/common/loading_spinner.tsx b/app/components/staff/common/loading_spinner.tsx
index 42f1adb..1239602 100644
--- a/app/components/staff/common/loading_spinner.tsx
+++ b/app/components/staff/common/loading_spinner.tsx
@@ -19,7 +19,7 @@ export function LoadingSpinner({
     lg: 'h-16 w-16',
   };
 
-  const textColor = darkBackground ? '#009DE0' : '#1B1B1B';
+  const textColor = darkBackground ? '#009DE0' : undefined;
   const spinnerColor = '#009DE0';
 
   const content = (
@@ -30,24 +30,23 @@ export function LoadingSpinner({
           style={{ borderColor: spinnerColor }}
         />
       </div>
+
       <p
-        className={`${size === 'lg' ? 'text-xl' : 'text-base'} font-medium`}
+        className={`${size === 'lg' ? 'text-xl' : 'text-base'} font-medium text-[#1B1B1B] dark:text-white`}
         style={{ color: textColor }}
       >
         {message}
       </p>
-      {subMessage && <p className="text-sm mt-2 text-gray-600 dark:text-gray-400">{subMessage}</p>}
+
+      {subMessage && <p className="text-sm mt-2 text-gray-500 dark:text-gray-400">{subMessage}</p>}
     </div>
   );
 
   if (fullScreen) {
     return (
       <div
-        className={`flex w-full h-screen justify-center items-center ${
-          darkBackground
-            ? 'bg-black'
-            : 'bg-gradient-to-b from-sky-50 via-white to-white dark:from-zinc-800 dark:via-zinc-950 dark:to-black'
-        }`}
+        className="flex w-full h-screen justify-center items-center bg-white dark:bg-black"
+        style={{ backgroundColor: darkBackground ? 'black' : undefined }}
       >
         {content}
       </div>
@@ -55,6 +54,8 @@ export function LoadingSpinner({
   }
 
   return (
-    <div className="w-full flex flex-col items-center justify-center min-h-screen">{content}</div>
+    <div className="w-full flex flex-col items-center justify-center min-h-screen bg-white dark:bg-black">
+      {content}
+    </div>
   );
 }