diff --git a/backend/app/Views/StudentPortal.php b/backend/app/Views/StudentPortal.php
index 627ee22..6137957 100644
--- a/backend/app/Views/StudentPortal.php
+++ b/backend/app/Views/StudentPortal.php
@@ -52,7 +52,7 @@ class StudentPortal
             flex-direction: column;
             justify-content: space-between;
             background-image: 
-                radial-gradient(circle at 15% 15%, rgba(0, 245, 212, 0.05) 0%, transparent 40%),
+                radial-gradient(circle at 15% 15%, rgba(0, 245, 212, 0.06) 0%, transparent 40%),
                 radial-gradient(circle at 85% 85%, rgba(255, 209, 102, 0.04) 0%, transparent 40%),
                 linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                 linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
@@ -98,10 +98,10 @@ class StudentPortal
             display: flex;
             align-items: center;
             justify-content: center;
-            color: var(--bg-dark);
+            color: #0B132B;
             font-size: 20px;
             font-weight: 900;
-            box-shadow: 0 0 20px rgba(0, 245, 212, 0.3);
+            box-shadow: 0 0 20px rgba(0, 245, 212, 0.35);
         }
 
         .brand-title {
@@ -226,7 +226,7 @@ class StudentPortal
 
         .input-text:focus {
             border-color: var(--accent-cyan);
-            box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.15);
+            box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.2);
         }
 
         .input-text::placeholder {
@@ -270,23 +270,24 @@ class StudentPortal
             display: block;
         }
 
-        /* Buttons */
+        /* High Contrast Buttons */
         .btn-primary {
             width: 100%;
             padding: 14px;
-            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark));
-            color: var(--bg-dark);
+            background: linear-gradient(135deg, #00F5D4 0%, #00BAA1 100%);
+            color: #0B132B !important;
             border: none;
             border-radius: 12px;
             font-size: 15px;
-            font-weight: 800;
+            font-weight: 900 !important;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 8px;
-            box-shadow: 0 8px 20px rgba(0, 245, 212, 0.25);
+            box-shadow: 0 8px 24px rgba(0, 245, 212, 0.35);
             transition: transform 0.15s, opacity 0.15s;
+            text-decoration: none;
         }
 
         .btn-primary:hover {
@@ -299,7 +300,7 @@ class StudentPortal
         }
 
         .btn-primary:disabled {
-            opacity: 0.5;
+            opacity: 0.6;
             cursor: not-allowed;
             transform: none;
         }
@@ -348,14 +349,14 @@ class StudentPortal
         }
 
         .alert-error {
-            background: rgba(239, 68, 68, 0.12);
-            border: 1px solid rgba(239, 68, 68, 0.35);
+            background: rgba(239, 68, 68, 0.15);
+            border: 1px solid rgba(239, 68, 68, 0.4);
             color: #FCA5A5;
         }
 
         .alert-success {
-            background: rgba(0, 245, 212, 0.12);
-            border: 1px solid rgba(0, 245, 212, 0.35);
+            background: rgba(0, 245, 212, 0.15);
+            border: 1px solid rgba(0, 245, 212, 0.4);
             color: var(--accent-cyan);
         }
 
@@ -521,7 +522,7 @@ class StudentPortal
             width: 18px;
             height: 18px;
             border: 3px solid rgba(11, 19, 43, 0.3);
-            border-top-color: var(--bg-dark);
+            border-top-color: #0B132B;
             border-radius: 50%;
             animation: spin 0.8s linear infinite;
         }
@@ -778,7 +779,7 @@ class StudentPortal
                         </div>
                     </template>
 
-                    <!-- STEP 1: Phone Number -->
+                    <!-- STEP 1: Phone Number (Shown by default) -->
                     <div x-show="authStep === 'phone'">
                         <form @submit.prevent="sendOtp()">
                             <div class="form-group">
@@ -799,13 +800,13 @@ class StudentPortal
                                 <template x-if="loading">
                                     <div class="spinner"></div>
                                 </template>
-                                <span x-text="loading ? 'جارٍ الإرسال...' : 'إرسال رمز التحقق (OTP) ←'"></span>
+                                <span x-text="loading ? 'جارٍ الإرسال...' : 'إرسال رمز التحقق (OTP) ←'">إرسال رمز التحقق (OTP) ←</span>
                             </button>
                         </form>
                     </div>
 
-                    <!-- STEP 2: OTP Verification -->
-                    <div x-show="authStep === 'otp'">
+                    <!-- STEP 2: OTP Verification (Hidden initially via CSS) -->
+                    <div x-show="authStep === 'otp'" style="display: none;">
                         <div style="text-align: center; margin-bottom: 20px;">
                             <span style="font-size: 12px; color: var(--text-muted);">تم إرسال رمز التحقق إلى:</span>
                             <div style="font-family: monospace; font-size: 15px; font-weight: 800; color: var(--accent-cyan); margin-top: 4px;" x-text="phoneDisplay"></div>
@@ -821,7 +822,7 @@ class StudentPortal
                                 <template x-if="loading">
                                     <div class="spinner"></div>
                                 </template>
-                                <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للمنصة ✨'"></span>
+                                <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للمنصة ✨'">تأكيد الدخول للمنصة ✨</span>
                             </button>
 
                             <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;">
@@ -847,7 +848,7 @@ class StudentPortal
             <!-- ========================================== -->
             <!-- 2. STUDENT DASHBOARD (AUTHENTICATED)       -->
             <!-- ========================================== -->
-            <div x-show="isLoggedIn" style="width: 100%;">
+            <div x-show="isLoggedIn" style="width: 100%; display: none;">
                 
                 <div class="dashboard-hero">
                     <div>
diff --git a/backend/app/Views/TeacherPortal.php b/backend/app/Views/TeacherPortal.php
index 880aac7..d27e60f 100644
--- a/backend/app/Views/TeacherPortal.php
+++ b/backend/app/Views/TeacherPortal.php
@@ -31,7 +31,7 @@ class TeacherPortal
             --text-secondary: #CBD5E1;
             --text-muted: #8E9FB8;
             --accent-gold: #FFD166;
-            --accent-gold-dark: #E5A91E;
+            --accent-gold-dark: #F59E0B;
             --accent-cyan: #00F5D4;
             --accent-red: #EF4444;
             --accent-green: #10B981;
@@ -52,14 +52,13 @@ class TeacherPortal
             flex-direction: column;
             justify-content: space-between;
             background-image: 
-                radial-gradient(circle at 15% 15%, rgba(255, 209, 102, 0.06) 0%, transparent 40%),
-                radial-gradient(circle at 85% 85%, rgba(0, 245, 212, 0.04) 0%, transparent 40%),
+                radial-gradient(circle at 15% 15%, rgba(255, 209, 102, 0.07) 0%, transparent 40%),
+                radial-gradient(circle at 85% 85%, rgba(0, 245, 212, 0.05) 0%, transparent 40%),
                 linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                 linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
             background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
         }
 
-        /* Layout & Container */
         .container {
             max-width: 1140px;
             margin: 0 auto;
@@ -99,10 +98,10 @@ class TeacherPortal
             display: flex;
             align-items: center;
             justify-content: center;
-            color: var(--bg-dark);
+            color: #0B132B;
             font-size: 20px;
             font-weight: 900;
-            box-shadow: 0 0 20px rgba(255, 209, 102, 0.3);
+            box-shadow: 0 0 20px rgba(255, 209, 102, 0.35);
         }
 
         .brand-title {
@@ -227,14 +226,13 @@ class TeacherPortal
 
         .input-text:focus {
             border-color: var(--accent-gold);
-            box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.15);
+            box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.2);
         }
 
         .input-text::placeholder {
             color: #52607D;
         }
 
-        /* Phone Input Group */
         .phone-input-group {
             display: flex;
             align-items: center;
@@ -272,23 +270,24 @@ class TeacherPortal
             display: block;
         }
 
-        /* Buttons */
+        /* High Contrast Buttons */
         .btn-primary {
             width: 100%;
             padding: 14px;
-            background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
-            color: var(--bg-dark);
+            background: linear-gradient(135deg, #FFD166 0%, #F59E0B 100%);
+            color: #0B132B !important;
             border: none;
             border-radius: 12px;
             font-size: 15px;
-            font-weight: 800;
+            font-weight: 900 !important;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 8px;
-            box-shadow: 0 8px 20px rgba(255, 209, 102, 0.25);
+            box-shadow: 0 8px 24px rgba(255, 209, 102, 0.35);
             transition: transform 0.15s, opacity 0.15s;
+            text-decoration: none;
         }
 
         .btn-primary:hover {
@@ -301,7 +300,7 @@ class TeacherPortal
         }
 
         .btn-primary:disabled {
-            opacity: 0.5;
+            opacity: 0.6;
             cursor: not-allowed;
             transform: none;
         }
@@ -326,7 +325,6 @@ class TeacherPortal
             text-decoration: underline;
         }
 
-        /* OTP Input */
         .otp-input {
             text-align: center;
             font-size: 26px;
@@ -351,18 +349,17 @@ class TeacherPortal
         }
 
         .alert-error {
-            background: rgba(239, 68, 68, 0.12);
-            border: 1px solid rgba(239, 68, 68, 0.35);
+            background: rgba(239, 68, 68, 0.15);
+            border: 1px solid rgba(239, 68, 68, 0.4);
             color: #FCA5A5;
         }
 
         .alert-success {
-            background: rgba(255, 209, 102, 0.12);
-            border: 1px solid rgba(255, 209, 102, 0.35);
+            background: rgba(255, 209, 102, 0.15);
+            border: 1px solid rgba(255, 209, 102, 0.4);
             color: var(--accent-gold);
         }
 
-        /* Card Footer */
         .auth-footer {
             margin-top: 24px;
             padding-top: 16px;
@@ -462,12 +459,11 @@ class TeacherPortal
             gap: 12px;
         }
 
-        /* Spinner */
         .spinner {
             width: 18px;
             height: 18px;
             border: 3px solid rgba(11, 19, 43, 0.3);
-            border-top-color: var(--bg-dark);
+            border-top-color: #0B132B;
             border-radius: 50%;
             animation: spin 0.8s linear infinite;
         }
@@ -477,7 +473,7 @@ class TeacherPortal
         }
     </style>
 
-    <!-- 2. Alpine Component Initialization in Head -->
+    <!-- 2. Alpine Component Setup -->
     <script>
         function teacherAuth() {
             return {
@@ -651,7 +647,6 @@ class TeacherPortal
             };
         }
     </script>
-    <!-- 3. Deferred Alpine Loader -->
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 </head>
 <body x-data="teacherAuth()" x-init="initApp()">
@@ -724,7 +719,7 @@ class TeacherPortal
                         </div>
                     </template>
 
-                    <!-- STEP 1: Phone Number -->
+                    <!-- STEP 1: Phone Number (Shown by default) -->
                     <div x-show="authStep === 'phone'">
                         <form @submit.prevent="sendOtp()">
                             <div class="form-group">
@@ -745,13 +740,13 @@ class TeacherPortal
                                 <template x-if="loading">
                                     <div class="spinner"></div>
                                 </template>
-                                <span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'"></span>
+                                <span x-text="loading ? 'جارٍ التحقق...' : 'دخول استوديو المعلم (OTP) ←'">دخول استوديو المعلم (OTP) ←</span>
                             </button>
                         </form>
                     </div>
 
-                    <!-- STEP 2: OTP Verification -->
-                    <div x-show="authStep === 'otp'">
+                    <!-- STEP 2: OTP Verification (Hidden initially via CSS until authStep === 'otp') -->
+                    <div x-show="authStep === 'otp'" style="display: none;">
                         <div style="text-align: center; margin-bottom: 20px;">
                             <span style="font-size: 12px; color: var(--text-muted);">تم إرسال رمز التحقق إلى:</span>
                             <div style="font-family: monospace; font-size: 15px; font-weight: 800; color: var(--accent-gold); margin-top: 4px;" x-text="phoneDisplay"></div>
@@ -767,7 +762,7 @@ class TeacherPortal
                                 <template x-if="loading">
                                     <div class="spinner"></div>
                                 </template>
-                                <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'"></span>
+                                <span x-text="loading ? 'جارٍ التحقق...' : 'تأكيد الدخول للاستوديو 🎓'">تأكيد الدخول للاستوديو 🎓</span>
                             </button>
 
                             <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 18px;">
@@ -793,7 +788,7 @@ class TeacherPortal
             <!-- ========================================== -->
             <!-- 2. TEACHER DASHBOARD (AUTHENTICATED)       -->
             <!-- ========================================== -->
-            <div x-show="isLoggedIn" style="width: 100%;">
+            <div x-show="isLoggedIn" style="width: 100%; display: none;">
                 
                 <div class="dashboard-hero">
                     <div>