diff --git a/frontend/src/components/common/PageLoader.tsx b/frontend/src/components/common/PageLoader.tsx
index 0db230bd..04c54daa 100644
--- a/frontend/src/components/common/PageLoader.tsx
+++ b/frontend/src/components/common/PageLoader.tsx
@@ -2,7 +2,7 @@ import { Spinner } from '@/components/common/Spinner'
 
 export function PageLoader() {
   return (
-    <div className="flex h-screen items-center justify-center bg-black">
+    <div className="flex h-full items-center justify-center">
       <div className="flex flex-col items-center gap-4">
         <Spinner size="lg" />
         <p className="text-sm text-muted-foreground">Loading...</p>
diff --git a/frontend/src/components/common/RouteError.tsx b/frontend/src/components/common/RouteError.tsx
index 0fa4e7e9..e06c3082 100644
--- a/frontend/src/components/common/RouteError.tsx
+++ b/frontend/src/components/common/RouteError.tsx
@@ -17,7 +17,7 @@ export function RouteError() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-black p-8">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background p-8">
       <div className="max-w-md text-center">
         <h1 className="mb-2 text-4xl font-bold text-foreground">Oops!</h1>
         <h2 className="mb-2 text-xl font-semibold text-red-400">{errorMessage}</h2>