diff --git a/src/app/test-refresh/page.tsx b/src/app/test-refresh/page.tsx
index ea3a254..66281b1 100644
--- a/src/app/test-refresh/page.tsx
+++ b/src/app/test-refresh/page.tsx
@@ -57,15 +57,15 @@ export default function TestRefreshPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 p-8">
+    <div className="min-h-screen bg-gray-50 p-8 text-black">
       <div className="max-w-4xl mx-auto">
-        <h1 className="text-3xl font-bold mb-8">🧪 Token Refresh Test</h1>
+        <h1 className="text-3xl font-bold mb-8 text-black">🧪 Token Refresh Test</h1>
         
         <div className="grid gap-6">
           {/* Token Status */}
-          <div className="bg-white p-6 rounded-lg shadow">
-            <h2 className="text-xl font-semibold mb-4">🔑 Token Status</h2>
-            <div className="space-y-2 font-mono text-sm">
+          <div className="bg-white p-6 rounded-lg shadow text-black">
+            <h2 className="text-xl font-semibold mb-4 text-black">🔑 Token Status</h2>
+            <div className="space-y-2 font-mono text-sm text-black">
               <div>Has Token: <span className={tokenInfo.hasToken ? 'text-green-600' : 'text-red-600'}>
                 {tokenInfo.hasToken ? '✅ Yes' : '❌ No'}
               </span></div>
@@ -86,16 +86,16 @@ export default function TestRefreshPage() {
           </div>
 
           {/* User Info */}
-          <div className="bg-white p-6 rounded-lg shadow">
-            <h2 className="text-xl font-semibold mb-4">👤 User Info</h2>
-            <pre className="text-sm bg-gray-100 p-4 rounded overflow-auto">
+          <div className="bg-white p-6 rounded-lg shadow text-black">
+            <h2 className="text-xl font-semibold mb-4 text-black">👤 User Info</h2>
+            <pre className="text-sm bg-gray-100 p-4 rounded overflow-auto text-black">
               {JSON.stringify(user, null, 2)}
             </pre>
           </div>
 
           {/* Manual Controls */}
-          <div className="bg-white p-6 rounded-lg shadow">
-            <h2 className="text-xl font-semibold mb-4">🔧 Manual Controls</h2>
+          <div className="bg-white p-6 rounded-lg shadow text-black">
+            <h2 className="text-xl font-semibold mb-4 text-black">🔧 Manual Controls</h2>
             <div className="space-y-4">
               <button 
                 onClick={handleManualRefresh}
@@ -104,15 +104,15 @@ export default function TestRefreshPage() {
                 🔄 Manual Refresh Token
               </button>
               {refreshStatus && (
-                <div className="text-sm font-mono">{refreshStatus}</div>
+                <div className="text-sm font-mono text-black">{refreshStatus}</div>
               )}
             </div>
           </div>
 
           {/* Instructions */}
-          <div className="bg-yellow-50 border border-yellow-200 p-6 rounded-lg">
-            <h2 className="text-xl font-semibold mb-4">📋 Testing Instructions</h2>
-            <ol className="list-decimal list-inside space-y-2 text-sm">
+          <div className="bg-yellow-50 border border-yellow-200 p-6 rounded-lg text-black">
+            <h2 className="text-xl font-semibold mb-4 text-black">📋 Testing Instructions</h2>
+            <ol className="list-decimal list-inside space-y-2 text-sm text-black">
               <li>Make sure JWT_EXPIRES_IN=2m in backend .env for fast testing</li>
               <li>Login and watch the countdown timer</li>
               <li>When time left ≤ 3 minutes, auto-refresh should trigger</li>