diff --git a/admin.php b/admin.php
index 54302a3..feab5a5 100644
--- a/admin.php
+++ b/admin.php
@@ -34,7 +34,7 @@ render_flash($flash);
             <span>نسبة الاعتماد <?= e((string) $approvalRate) ?>٪</span>
           </div>
           <div class="cta-stack mt-4">
-            <a class="btn btn-dark" href="dashboard.php">لوحة القيادة</a>
+            <a class="btn btn-primary" href="dashboard.php">لوحة القيادة</a>
             <a class="btn btn-outline-secondary" href="applications.php">لوحة الطلبات</a>
             <a class="btn btn-outline-secondary" href="applications.php?status=approved">المراكز المعتمدة</a>
             <a class="btn btn-outline-secondary" href="modules.php">خريطة الصفحات</a>
@@ -46,9 +46,9 @@ render_flash($flash);
             <div class="mini-stat-value"><?= e((string) $reviewBacklog) ?></div>
             <div class="mini-stat-copy mb-3">طلبات تحتاج متابعة مباشرة الآن بين الاستلام والمراجعة، مع <?= e((string) $stats['approved']) ?> مركزاً معتمداً جاهزاً للتشغيل.</div>
             <?php if ($recentApproved): ?>
-              <a class="btn btn-dark btn-sm" href="approved_school.php?id=<?= e((string) $recentApproved['id']) ?>">فتح أحدث مركز معتمد</a>
+              <a class="btn btn-primary btn-sm" href="approved_school.php?id=<?= e((string) $recentApproved['id']) ?>">فتح أحدث مركز معتمد</a>
             <?php else: ?>
-              <a class="btn btn-dark btn-sm" href="applications.php">بدء مراجعة الطلبات</a>
+              <a class="btn btn-primary btn-sm" href="applications.php">بدء مراجعة الطلبات</a>
             <?php endif; ?>
           </div>
         </div>
@@ -127,7 +127,7 @@ render_flash($flash);
             <div class="empty-state text-center py-5">
               <div class="empty-title mb-2">لا توجد طلبات بعد</div>
               <p class="text-muted mb-3">يمكنك إنشاء أول طلب أو العودة لاحقاً عند وصول طلبات جديدة.</p>
-              <a class="btn btn-dark" href="center_application.php">إنشاء طلب جديد</a>
+              <a class="btn btn-primary" href="center_application.php">إنشاء طلب جديد</a>
             </div>
           <?php else: ?>
             <div class="table-responsive">
@@ -153,7 +153,7 @@ render_flash($flash);
                       <td><?= status_badge((string) $application['status']) ?></td>
                       <td>
                         <?php if ((string) $application['status'] === 'approved'): ?>
-                          <a class="btn btn-dark btn-sm px-3" href="approved_school.php?id=<?= e((string) $application['id']) ?>">صفحة المركز</a>
+                          <a class="btn btn-primary btn-sm px-3" href="approved_school.php?id=<?= e((string) $application['id']) ?>">صفحة المركز</a>
                         <?php else: ?>
                           <a class="btn btn-outline-secondary btn-sm px-3" href="application_detail.php?id=<?= e((string) $application['id']) ?>">فتح الملف</a>
                         <?php endif; ?>
diff --git a/app_settings.php b/app_settings.php
index 4a66fd3..4cebb60 100644
--- a/app_settings.php
+++ b/app_settings.php
@@ -127,7 +127,7 @@ render_flash($flash);
             </div>
             
             <div class="form-actions mt-4">
-              <button class="btn btn-dark px-4" type="submit">حفظ التغييرات</button>
+              <button class="btn btn-primary px-4" type="submit">حفظ التغييرات</button>
             </div>
           </form>
         </div>
diff --git a/application_detail.php b/application_detail.php
index 432c039..9a03571 100644
--- a/application_detail.php
+++ b/application_detail.php
@@ -16,7 +16,7 @@ if (!$application) {
         <div class="app-card text-center py-5">
           <div class="empty-title mb-2">الطلب غير موجود</div>
           <p class="text-muted mb-3">تحقق من رقم المرجع أو ارجع إلى لوحة الطلبات.</p>
-          <a class="btn btn-dark" href="applications.php">العودة إلى القائمة</a>
+          <a class="btn btn-primary" href="applications.php">العودة إلى القائمة</a>
         </div>
       </div>
     </section>
@@ -100,7 +100,7 @@ render_flash($flash);
             <div class="mini-stat-copy">هذا الملف مخصص لاتخاذ القرار وتوثيق الملاحظات بدلاً من خلطه مع قائمة الطلبات.</div>
             <a class="btn btn-outline-secondary btn-sm mt-3" href="admin.php">العودة إلى لوحة الإدارة</a>
             <?php if ((string) $application['status'] === 'approved'): ?>
-              <a class="btn btn-dark btn-sm mt-3" href="approved_school.php?id=<?= e((string) $application['id']) ?>">فتح صفحة المركز المعتمد</a>
+              <a class="btn btn-primary btn-sm mt-3" href="approved_school.php?id=<?= e((string) $application['id']) ?>">فتح صفحة المركز المعتمد</a>
             <?php endif; ?>
           </div>
         </div>
@@ -220,7 +220,7 @@ render_flash($flash);
               <textarea class="form-control" id="admin_notes" name="admin_notes" rows="6" placeholder="سجّل نقاط القوة أو النواقص المطلوب استكمالها."><?= e((string) ($application['admin_notes'] ?? '')) ?></textarea>
             </div>
             <div class="d-grid gap-2">
-              <button class="btn btn-dark" type="submit">حفظ التحديث</button>
+              <button class="btn btn-primary" type="submit">حفظ التحديث</button>
               <?php if ((string) $application['status'] === 'approved'): ?>
                 <a class="btn btn-outline-dark" href="approved_school.php?id=<?= e((string) $application['id']) ?>">معاينة صفحة المركز</a>
               <?php endif; ?>
@@ -264,7 +264,7 @@ render_flash($flash);
         </div>
         <div class="modal-footer border-top-0">
           <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">إلغاء</button>
-          <button type="submit" class="btn btn-dark">حفظ التغييرات</button>
+          <button type="submit" class="btn btn-primary">حفظ التغييرات</button>
         </div>
       </form>
     </div>
diff --git a/applications.php b/applications.php
index ea2d07a..780214a 100644
--- a/applications.php
+++ b/applications.php
@@ -59,7 +59,7 @@ render_flash($flash);
         <div class="app-card mb-4">
           <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
              <div class="section-title mb-0">إدارة طلبات فتح المراكز</div>
-             <a class="btn btn-dark" href="center_application.php">
+             <a class="btn btn-primary" href="center_application.php">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-1" viewBox="0 0 16 16">
                   <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                 </svg>
diff --git a/approved_school.php b/approved_school.php
index 1c72891..863d830 100644
--- a/approved_school.php
+++ b/approved_school.php
@@ -26,7 +26,7 @@ if (!$application) {
         <div class="app-card text-center py-5">
           <div class="empty-title mb-2">المركز غير موجود</div>
           <p class="text-muted mb-3">تحقق من رقم الطلب أو ارجع إلى قائمة المراكز المعتمدة.</p>
-          <a class="btn btn-dark" href="applications.php?status=approved">عرض المراكز المعتمدة</a>
+          <a class="btn btn-primary" href="applications.php?status=approved">عرض المراكز المعتمدة</a>
         </div>
       </div>
     </section>
@@ -156,131 +156,105 @@ render_flash($flash);
       </div>
       <div class="col-lg-9">
     <?php if (!$isApproved): ?>
-      <div class="page-banner approved-hero mb-4 mb-lg-5">
-        <div class="row g-4 align-items-center">
-          <div class="<?= is_super_admin() ? 'col-lg-8' : 'col-lg-12' ?>">
-            <span class="approved-kicker mb-3">هذه الصفحة تُفتح بعد الاعتماد فقط</span>
-            <h1 class="page-title mb-3"><?= e((string) $application['center_name']) ?></h1>
-            <p class="page-copy mb-3">تم تجهيز صفحة الهبوط لهذا المركز، لكنها ستصبح الصفحة التشغيلية الرسمية فقط بعد تغيير الحالة إلى <strong>معتمد</strong>.</p>
-            <div class="hero-meta">
-              <span>الحالة الحالية: <?= e(status_meta((string) $application['status'])['label']) ?></span>
-              <span>مرجع الطلب #<?= e((string) $application['id']) ?></span>
-            </div>
-            <div class="cta-stack mt-4">
-              <a class="btn btn-dark" href="admin.php">لوحة الإدارة</a>
-              <a class="btn btn-outline-secondary" href="application_detail.php?id=<?= e((string) $application['id']) ?>">العودة لملف المراجعة</a>
-              <a class="btn btn-outline-secondary" href="applications.php">لوحة الطلبات</a>
-            </div>
+
+      <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4">
+        <div>
+          <span class="badge bg-warning text-primary mb-2">هذه الصفحة تُفتح بعد الاعتماد فقط</span>
+          <h1 class="h3 mb-2"><?= e((string) $application['center_name']) ?></h1>
+          <div class="text-muted small">
+            الحالة الحالية: <?= e(status_meta((string) $application['status'])['label']) ?> • مرجع الطلب #<?= e((string) $application['id']) ?>
           </div>
         </div>
+        <div class="mt-3 mt-md-0 d-flex gap-2">
+          <a class="btn btn-sm btn-outline-secondary" href="application_detail.php?id=<?= e((string) $application['id']) ?>">العودة لملف المراجعة</a>
+          <a class="btn btn-sm btn-primary" href="admin.php">لوحة الإدارة</a>
+        </div>
+      </div>
+      <div class="app-card text-center py-5">
+          <div class="empty-title mb-2">في انتظار الاعتماد</div>
+          <p class="text-muted mb-3">تم تجهيز صفحة الهبوط لهذا المركز، لكنها ستصبح الصفحة التشغيلية الرسمية فقط بعد تغيير الحالة إلى <strong>معتمد</strong>.</p>
       </div>
     <?php else: ?>
-      <div class="page-banner approved-hero mb-4 mb-lg-5">
-        <div class="row g-4 align-items-center">
-          <div class="<?= is_super_admin() ? 'col-lg-8' : 'col-lg-12' ?>">
-            <span class="approved-kicker mb-3">مركز معتمد وجاهز للانطلاق</span>
-            <h1 class="page-title mb-3"><?= e((string) $application['center_name']) ?></h1>
-            <p class="page-copy mb-3">هذه صفحة الهبوط الخاصة بالمركز بعد الاعتماد. يمكن استخدامها كنقطة دخول منظمة لبدء التشغيل، تجهيز التسجيل، ومشاركة المعلومات الأساسية مع فريق المدرسة.</p>
-            <div class="hero-meta">
-              <span><?= e((string) $application['city']) ?></span>
-              <span><?= e((string) $application['center_type']) ?> — <?= e((string) $application['gender_scope']) ?></span>
-              <span>من <?= e((string) $application['start_date']) ?> إلى <?= e((string) $application['end_date']) ?></span>
-            </div>
-            <div class="cta-stack mt-4">
-              <a class="btn btn-dark" href="admin.php">لوحة الإدارة</a>
-              <a class="btn btn-outline-secondary" href="application_detail.php?id=<?= e((string) $application['id']) ?>">فتح ملف الاعتماد</a>
-              <a class="btn btn-outline-secondary" href="center_profile.php?id=<?= e((string) $application['id']) ?>">إعدادات المركز</a>
-              <a class="btn btn-outline-secondary" href="<?= e($studentsUrl) ?>">تسجيل الطلاب</a>
-              <a class="btn btn-outline-secondary" href="<?= e($teachersUrl) ?>">فريق المعلمين</a>
-              <a class="btn btn-outline-secondary" href="<?= e($centerSubjectsUrl) ?>">المواد الدراسية</a>
-              <a class="btn btn-outline-secondary" href="<?= e($assessmentsUrl) ?>">التقييمات والأوزان</a>
-              <a class="btn btn-outline-secondary" href="<?= e($attendanceUrl) ?>">غياب الطلاب</a>
-              <a class="btn btn-outline-secondary" href="applications.php?status=approved">كل المراكز المعتمدة</a>
-              <a class="btn btn-outline-secondary" href="dashboard.php">لوحة القيادة</a>
-            </div>
-          </div>
-          <div class="col-lg-4">
-            <div class="app-card h-100 approved-note">
-              <div class="section-title mb-3">ملخص الجاهزية</div>
-              <?php if ($scoreValue !== null): ?>
-                <div class="score-display mb-3"><strong><?= e((string) $scoreValue) ?>%</strong><span>درجة التقييم</span></div>
-                <div class="score-bar mb-3" aria-label="درجة التقييم النهائية"><span style="width: <?= e((string) $scoreValue) ?>%"></span></div>
-              <?php endif; ?>
-              <div class="summary-stack">
-                <div class="summary-row"><span>مدير المركز</span><strong><?= e((string) $application['director_name']) ?></strong></div>
-                <div class="summary-row"><span>السعة المتوقعة</span><strong><?= e((string) $application['expected_students']) ?> طالب</strong></div>
-                <div class="summary-row"><span>مدة البرنامج</span><strong><?= e((string) ($durationDays > 0 ? $durationDays : '—')) ?> يوم</strong></div>
-              </div>
-            </div>
+
+      <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4">
+        <div>
+          <span class="badge bg-success mb-2">مركز معتمد وجاهز للانطلاق</span>
+          <h1 class="h3 mb-2"><?= e((string) $application['center_name']) ?></h1>
+          <div class="text-muted small">
+            <?= e((string) $application['city']) ?> • <?= e((string) $application['center_type']) ?> • <?= e((string) $application['gender_scope']) ?> • من <?= e((string) $application['start_date']) ?> إلى <?= e((string) $application['end_date']) ?>
           </div>
         </div>
+        <div class="mt-3 mt-md-0 d-flex gap-2">
+          <a class="btn btn-sm btn-outline-secondary" href="center_profile.php?id=<?= e((string) $application['id']) ?>">إعدادات المركز</a>
+          <a class="btn btn-sm btn-outline-secondary" href="application_detail.php?id=<?= e((string) $application['id']) ?>">ملف الاعتماد</a>
+          <a class="btn btn-sm btn-primary" href="admin.php">لوحة الإدارة</a>
+        </div>
       </div>
 
       <div class="row g-4 mb-4">
-        <div class="col-md-6 col-xl-3"><div class="app-card stat-tile"><div class="mini-stat-label">حالة الاعتماد</div><div class="mini-stat-value">معتمد</div><div class="mini-stat-copy">تمت الموافقة الرسمية على تشغيل هذا المركز.</div></div></div>
-        <div class="col-md-6 col-xl-3"><div class="app-card stat-tile"><div class="mini-stat-label">المقاعد المتوقعة</div><div class="mini-stat-value"><?= e((string) $application['expected_students']) ?></div><div class="mini-stat-copy">الطاقة الاستيعابية المبدئية للتسجيل.</div></div></div>
-        <div class="col-md-6 col-xl-3"><div class="app-card stat-tile"><div class="mini-stat-label">مدة البرنامج</div><div class="mini-stat-value"><?= e((string) ($durationDays > 0 ? $durationDays : '—')) ?></div><div class="mini-stat-copy">عدد الأيام المخططة بين البداية والنهاية.</div></div></div>
-        <div class="col-md-6 col-xl-3"><div class="app-card stat-tile"><div class="mini-stat-label">مرجع التشغيل</div><div class="mini-stat-value">#<?= e((string) $application['id']) ?></div><div class="mini-stat-copy">استخدم هذا الرقم في أي متابعة إدارية لاحقة.</div></div></div>
+        <div class="col-md-6 col-xl-3"><div class="app-card stat-tile p-3"><div class="mini-stat-label mb-1 text-muted small">المقاعد المتوقعة</div><div class="mini-stat-value fs-4 fw-bold"><?= e((string) $application['expected_students']) ?></div></div></div>
+        <div class="col-md-6 col-xl-3"><div class="app-card stat-tile p-3"><div class="mini-stat-label mb-1 text-muted small">مدة البرنامج</div><div class="mini-stat-value fs-4 fw-bold"><?= e((string) ($durationDays > 0 ? $durationDays : '—')) ?> يوم</div></div></div>
+        <div class="col-md-6 col-xl-3"><div class="app-card stat-tile p-3"><div class="mini-stat-label mb-1 text-muted small">مرجع التشغيل</div><div class="mini-stat-value fs-4 fw-bold">#<?= e((string) $application['id']) ?></div></div></div>
+        <div class="col-md-6 col-xl-3"><div class="app-card stat-tile p-3"><div class="mini-stat-label mb-1 text-muted small">درجة التقييم</div><div class="mini-stat-value fs-4 fw-bold"><?= $scoreValue !== null ? e((string) $scoreValue) . '%' : '—' ?></div></div></div>
       </div>
 
       <?php if ($selectedCycle): ?>
         <div class="row g-4 mb-4" id="cycles">
           <div class="<?= is_super_admin() ? 'col-lg-8' : 'col-lg-12' ?>">
-            <div class="app-card h-100">
-              <div class="section-head mb-3">
-                <div>
-                  <div class="section-title">الدورات الموسمية والأرشفة</div>
-                  <div class="section-copy">كل الطلاب والمعلمين والتقييمات والغياب أصبحت الآن مرتبطة بدورة مستقلة مثل <strong>Summer 2026</strong> أو <strong>Winter 2026</strong>. عند نهاية الموسم قم بأرشفة الدورة الحالية ثم ابدأ دورة جديدة للحفاظ على التاريخ بدون خلط السجلات.</div>
-                </div>
+            <div class="app-card h-100 p-4">
+              <div class="d-flex justify-content-between align-items-center mb-4">
+                <h5 class="mb-0">الدورة الموسمية الحالية</h5>
                 <?= school_cycle_status_badge((string) $selectedCycle['status']) ?>
               </div>
-              <div class="row g-3 mb-3">
-                <div class="col-md-4"><div class="school-data-item"><strong>الدورة المحددة</strong><span><?= e($cycleLabel) ?></span></div></div>
-                <div class="col-md-4"><div class="school-data-item"><strong>الفترة</strong><span><?= e((string) $selectedCycle['start_date']) ?> → <?= e((string) $selectedCycle['end_date']) ?></span></div></div>
-                <div class="col-md-4"><div class="school-data-item"><strong>حالة الدورة</strong><span><?= e((string) school_cycle_status_map()[$selectedCycle['status']]['label']) ?></span></div></div>
-                <div class="col-md-3"><div class="school-data-item"><strong>الطلاب</strong><span><?= e((string) $studentCycleMetrics['total']) ?></span></div></div>
-                <div class="col-md-3"><div class="school-data-item"><strong>الفريق</strong><span><?= e((string) $teacherCycleMetrics['total']) ?></span></div></div>
-                <div class="col-md-3"><div class="school-data-item"><strong>التقييمات النشطة</strong><span><?= e((string) $assessmentCycleMetrics['active']) ?></span></div></div>
-                <div class="col-md-3"><div class="school-data-item"><strong>سجلات الغياب</strong><span><?= e((string) $attendanceCycleMetrics['total']) ?></span></div></div>
+              <div class="row g-4 mb-4">
+                <div class="col-md-4"><div class="school-data-item"><div class="text-muted small mb-1">الدورة المحددة</div><div class="fw-semibold"><?= e($cycleLabel) ?></div></div></div>
+                <div class="col-md-4"><div class="school-data-item"><div class="text-muted small mb-1">الفترة</div><div class="fw-semibold" dir="ltr"><?= e((string) $selectedCycle['start_date']) ?> <br> <?= e((string) $selectedCycle['end_date']) ?></div></div></div>
+                <div class="col-md-4"><div class="school-data-item"><div class="text-muted small mb-1">حالة الدورة</div><div class="fw-semibold"><?= e((string) school_cycle_status_map()[$selectedCycle['status']]['label']) ?></div></div></div>
+                <div class="col-md-3"><div class="school-data-item"><div class="text-muted small mb-1">الطلاب</div><div class="fw-semibold"><?= e((string) $studentCycleMetrics['total']) ?></div></div></div>
+                <div class="col-md-3"><div class="school-data-item"><div class="text-muted small mb-1">الفريق</div><div class="fw-semibold"><?= e((string) $teacherCycleMetrics['total']) ?></div></div></div>
+                <div class="col-md-3"><div class="school-data-item"><div class="text-muted small mb-1">التقييمات</div><div class="fw-semibold"><?= e((string) $assessmentCycleMetrics['active']) ?></div></div></div>
+                <div class="col-md-3"><div class="school-data-item"><div class="text-muted small mb-1">سجلات الغياب</div><div class="fw-semibold"><?= e((string) $attendanceCycleMetrics['total']) ?></div></div></div>
               </div>
-              <div class="cta-stack">
-                <a class="btn btn-dark" href="<?= e($studentsUrl) ?>">طلاب هذه الدورة</a>
-                <a class="btn btn-outline-secondary" href="<?= e($teachersUrl) ?>">فريق هذه الدورة</a>
-                <a class="btn btn-outline-secondary" href="<?= e($assessmentsUrl) ?>">تقييمات هذه الدورة</a>
-                <a class="btn btn-outline-secondary" href="<?= e($attendanceUrl) ?>">غياب هذه الدورة</a>
-                <?php if (!$isCycleReadOnly): ?>
-                  <?php if (is_super_admin()): ?><form method="post" class="d-inline">
+              
+              <?php if (!$isCycleReadOnly && is_super_admin()): ?>
+                <div class="text-end border-top pt-3 mt-2">
+                  <form method="post" class="d-inline">
                     <input type="hidden" name="cycle_action" value="archive_cycle">
                     <input type="hidden" name="cycle_id" value="<?= e((string) $selectedCycleId) ?>">
-                    <button class="btn btn-outline-danger" type="submit">أرشفة هذه الدورة</button>
-                  </form><?php endif; ?>
-                <?php endif; ?>
-              </div>
+                    <button class="btn btn-sm btn-outline-danger" type="submit">أرشفة هذه الدورة</button>
+                  </form>
+                </div>
+              <?php endif; ?>
+
               <?php if ($isCycleReadOnly): ?>
                 <div class="alert alert-warning mt-3 mb-0">هذه الدورة مؤرشفة حالياً، لذلك كل الصفحات المرتبطة بها أصبحت للقراءة فقط. يمكنك فتح دورة جديدة من النموذج المجاور.</div>
               <?php endif; ?>
             </div>
           </div>
           <?php if (is_super_admin()): ?>
-<div class="col-lg-4">
-            <div class="app-card sidebar-card mb-4">
-              <div class="section-title mb-3">كل دورات المركز</div>
-              <div class="quick-link-stack">
+          <div class="col-lg-4">
+            <div class="app-card sidebar-card mb-4 p-4">
+              <h6 class="mb-3">كل دورات المركز</h6>
+              <div class="vstack gap-2">
                 <?php foreach ($cycleContext['cycles'] as $cycle): ?>
-                  <a class="quick-link-item" href="<?= e(school_page_url('approved_school.php', (int) $application['id'], (int) $cycle['id'])) ?>#cycles"><strong><?= e((string) $cycle['cycle_name']) ?></strong><span><?= e((string) $cycle['start_date']) ?> → <?= e((string) $cycle['end_date']) ?> — <?= e((string) school_cycle_status_map()[$cycle['status']]['label']) ?></span></a>
+                  <a class="text-decoration-none bg-light rounded px-3 py-2 text-primary" href="<?= e(school_page_url('approved_school.php', (int) $application['id'], (int) $cycle['id'])) ?>#cycles">
+                    <div class="d-flex justify-content-between align-items-center mb-1">
+                      <strong class="small"><?= e((string) $cycle['cycle_name']) ?></strong>
+                      <span class="badge bg-white text-primary border" style="font-size: 0.7rem;"><?= e((string) school_cycle_status_map()[$cycle['status']]['label']) ?></span>
+                    </div>
+                    <div class="text-muted" style="font-size: 0.75rem;" dir="ltr"><?= e((string) $cycle['start_date']) ?> &rarr; <?= e((string) $cycle['end_date']) ?></div>
+                  </a>
                 <?php endforeach; ?>
               </div>
             </div>
-<?php endif; ?>
-            <div class="app-card sidebar-card">
-              <div class="section-title mb-3">فتح دورة جديدة</div>
-              <p class="section-subtle mb-3">استخدم هذا النموذج عند نهاية الصيف أو الشتاء لبدء دورة جديدة باسم تلقائي مثل Summer 2026 أو Winter 2026.</p>
-              <?php if (isset($cycleErrors['form'])): ?><div class="alert alert-danger mb-3"><?= e($cycleErrors['form']) ?></div><?php endif; ?>
+            <div class="app-card sidebar-card p-4">
+              <h6 class="mb-3">فتح دورة جديدة</h6>
+              <?php if (isset($cycleErrors['form'])): ?><div class="alert alert-danger py-2 small mb-3"><?= e($cycleErrors['form']) ?></div><?php endif; ?>
               <form method="post" class="vstack gap-3" novalidate>
                 <input type="hidden" name="cycle_action" value="create_cycle">
                 <div>
-                  <label class="form-label" for="global_cycle_id">اختر الدورة</label>
-                  <select class="form-select <?= isset($cycleErrors['global_cycle_id']) ? 'is-invalid' : '' ?>" id="global_cycle_id" name="global_cycle_id">
+                  <label class="form-label small text-muted mb-1" for="global_cycle_id">اختر الدورة</label>
+                  <select class="form-select form-select-sm <?= isset($cycleErrors['global_cycle_id']) ? 'is-invalid' : '' ?>" id="global_cycle_id" name="global_cycle_id">
                     <option value="">اختر دورة مسجلة مسبقاً</option>
                     <?php foreach (get_active_global_cycles() as $cycle): ?>
                       <option value="<?= e((string)$cycle['id']) ?>"><?= e((string)$cycle['cycle_name']) ?> (<?= e((string)$cycle['start_date']) ?> - <?= e((string)$cycle['end_date']) ?>)</option>
@@ -289,8 +263,8 @@ render_flash($flash);
                   <?php if (isset($cycleErrors['global_cycle_id'])): ?><div class="invalid-feedback"><?= e($cycleErrors['global_cycle_id']) ?></div><?php endif; ?>
                 </div>
                 <div>
-                  <label class="form-label" for="status">حالة البداية</label>
-                  <select class="form-select <?= isset($cycleErrors['status']) ? 'is-invalid' : '' ?>" id="status" name="status">
+                  <label class="form-label small text-muted mb-1" for="status">حالة البداية</label>
+                  <select class="form-select form-select-sm <?= isset($cycleErrors['status']) ? 'is-invalid' : '' ?>" id="status" name="status">
                     <option value="active" <?= $cycleValues['status'] === 'active' ? 'selected' : '' ?>>نشطة مباشرة</option>
                     <option value="upcoming" <?= $cycleValues['status'] === 'upcoming' ? 'selected' : '' ?>>قادمة</option>
                   </select>
@@ -298,122 +272,67 @@ render_flash($flash);
                 </div>
                 <?php if (!empty($cycleContext['cycles'])): ?>
                   <div class="border rounded-3 p-3 bg-light-subtle">
-                    <div class="fw-semibold mb-2">ترحيل البيانات من دورة سابقة</div>
-                    <p class="small text-muted mb-3">اختر الدورة التي تريد النسخ منها. الغياب لا يُنقل أبداً، والطلاب المنقولون يقتصرون على الحالات المستمرة فقط.</p>
+                    <div class="fw-semibold mb-2" style="font-size: 0.8rem;">ترحيل البيانات من دورة سابقة</div>
                     <div class="mb-3">
-                      <label class="form-label" for="source_cycle_id">النسخ من دورة</label>
-                      <select class="form-select" id="source_cycle_id" name="source_cycle_id">
+                      <select class="form-select form-select-sm" id="source_cycle_id" name="source_cycle_id">
                         <option value="0">بدون نسخ مسبق</option>
                         <?php foreach ($cycleContext['cycles'] as $cycle): ?>
                           <option value="<?= e((string) $cycle['id']) ?>" <?= (int) $cycleRollover['source_cycle_id'] === (int) $cycle['id'] ? 'selected' : '' ?>><?= e((string) $cycle['cycle_name']) ?> — <?= e((string) school_cycle_status_map()[$cycle['status']]['label']) ?></option>
                         <?php endforeach; ?>
                       </select>
                     </div>
-                    <div class="vstack gap-2">
-                      <label class="form-check">
+                    <div class="vstack gap-2" style="font-size: 0.8rem;">
+                      <label class="form-check mb-0">
                         <input class="form-check-input" type="checkbox" name="copy_teachers" value="1" <?= !empty($cycleRollover['copy_teachers']) ? 'checked' : '' ?>>
-                        <span class="form-check-label">نسخ الفريق التعليمي والوظائف الحالية</span>
+                        <span class="form-check-label">الفريق التعليمي والوظائف</span>
                       </label>
-                      <label class="form-check">
+                      <label class="form-check mb-0">
                         <input class="form-check-input" type="checkbox" name="copy_assessments" value="1" <?= !empty($cycleRollover['copy_assessments']) ? 'checked' : '' ?>>
-                        <span class="form-check-label">نسخ خطة التقييم والأوزان</span>
+                        <span class="form-check-label">خطة التقييم والأوزان</span>
                       </label>
-                      <label class="form-check">
+                      <label class="form-check mb-0">
                         <input class="form-check-input" type="checkbox" name="copy_students" value="1" <?= !empty($cycleRollover['copy_students']) ? 'checked' : '' ?>>
-                        <span class="form-check-label">نسخ الطلاب المستمرين فقط (نشط / انتظار)</span>
+                        <span class="form-check-label">الطلاب المستمرين فقط</span>
                       </label>
                     </div>
                   </div>
                 <?php endif; ?>
-                <button class="btn btn-dark" type="submit">إنشاء الدورة الجديدة</button>
+                <button class="btn btn-sm btn-primary w-100" type="submit">إنشاء الدورة الجديدة</button>
               </form>
             </div>
           </div>
+          <?php endif; ?>
         </div>
       <?php endif; ?>
 
       <div class="row g-4 align-items-start">
-        <div class="<?= is_super_admin() ? 'col-lg-8' : 'col-lg-12' ?>">
-          <div class="app-card mb-4">
-            <div class="section-head mb-3">
-              <div>
-                <div class="section-title">نبذة المدرسة / المركز</div>
-                <div class="section-copy">الرسالة المختصرة التي تظهر مباشرة بعد الاعتماد لتلخيص هوية المركز وما يقدمه.</div>
-              </div>
-            </div>
-            <p class="mb-0 text-muted"><?= nl2br(e((string) ($application['notes'] ?: 'مركز صيفي معتمد لتقديم برنامج منظم يجمع بين الأنشطة التعليمية والتربوية والمهارية تحت إشراف الولاية.'))) ?></p>
-          </div>
-
-          <div class="app-card mb-4">
-            <div class="section-title mb-3">أسباب الجاهزية والاعتماد</div>
-            <div class="highlight-grid">
-              <div class="highlight-item">
-                <strong>ملف مكتمل</strong>
-                <p>تمت مراجعة البيانات الأساسية، المسؤول المباشر، وفترة التشغيل المقترحة قبل إصدار الاعتماد.</p>
-              </div>
-              <div class="highlight-item">
-                <strong>خطة تشغيل واضحة</strong>
-                <p>توجد سعة متوقعة وبرنامج زمني محدد يساعدان على بدء التسجيل وإسناد المهام بسرعة.</p>
-              </div>
-              <div class="highlight-item">
-                <strong>قابلية للإطلاق</strong>
-                <p>يمكن اعتماد هذه الصفحة كنقطة انتقال من المراجعة إلى الإدارة اليومية ثم التوسع لوحدات الطلاب والغياب والتقييم.</p>
-              </div>
-            </div>
-          </div>
-
-          <div class="app-card">
-            <div class="section-title mb-3">الخطوات التالية بعد الموافقة</div>
-            <div class="next-step-grid">
-              <div class="next-step-card">
-                <strong>1) فتح التسجيل</strong>
-                <p>المرحلة التالية المنطقية أصبحت جاهزة الآن: يمكن فتح صفحة مستقلة لتسجيل الطلاب وربطها مباشرة بالمركز المعتمد.</p>
-              </div>
-              <div class="next-step-card">
-                <strong>2) تجهيز الفريق</strong>
-                <p>صفحة الفريق أصبحت جاهزة الآن لإضافة المعلمين والمشرفين وربط أدوارهم التشغيلية مباشرة بالمركز المعتمد.</p>
-              </div>
-              <div class="next-step-card">
-                <strong>3) ضبط التقييمات</strong>
-                <p>صفحة التقييمات أصبحت جاهزة الآن لتحديد نوع التقييم، المقياس، والوزن قبل بدء الرصد والمتابعة.</p>
-              </div>
-              <div class="next-step-card">
-                <strong>4) متابعة الغياب</strong>
-                <p>صفحة غياب الطلاب أصبحت جاهزة الآن لتسجيل الغياب اليومي، الأعذار، وحالات التأخر لكل طالب داخل المركز.</p>
-              </div>
-            </div>
+        <div class="col-lg-8">
+          <div class="app-card mb-4 p-4">
+            <h6 class="mb-3">نبذة المدرسة / المركز</h6>
+            <p class="mb-0 text-muted small lh-lg"><?= nl2br(e((string) ($application['notes'] ?: 'مركز صيفي معتمد لتقديم برنامج منظم يجمع بين الأنشطة التعليمية والتربوية والمهارية تحت إشراف الولاية.'))) ?></p>
           </div>
         </div>
 
         <div class="col-lg-4">
-          <div class="app-card sidebar-card mb-4">
-            <div class="section-title mb-3">بيانات التواصل</div>
-            <div class="contact-stack">
-              <div class="contact-item"><strong>مدير المركز</strong><span><?= e((string) $application['director_name']) ?></span></div>
-              <div class="contact-item"><strong>الهاتف</strong><span><?= e((string) $application['phone']) ?></span></div>
-              <div class="contact-item"><strong>البريد الإلكتروني</strong><span><?= e((string) $application['email']) ?></span></div>
-              <div class="contact-item"><strong>المدينة</strong><span><?= e((string) $application['city']) ?></span></div>
-            </div>
-          </div>
-
-          <div class="app-card sidebar-card mb-4">
-            <div class="section-title mb-3">ملاحظات الاعتماد</div>
-            <p class="mb-0 text-muted"><?= nl2br(e((string) ($application['admin_notes'] ?: 'لا توجد ملاحظات إضافية. يمكن اعتبار هذه الصفحة النسخة الأولى من واجهة المركز بعد الاعتماد.'))) ?></p>
-          </div>
-
-          <div class="app-card sidebar-card">
-            <div class="section-title mb-3">روابط تشغيلية سريعة</div>
-            <div class="quick-link-stack">
-              <a class="quick-link-item" href="<?= e($studentsUrl) ?>"><strong>تسجيل الطلاب</strong><span>فتح صفحة القيد وكشف المدرسة لهذا المركز.</span></a>
-              <a class="quick-link-item" href="<?= e($teachersUrl) ?>"><strong>فريق المعلمين</strong><span>إدارة المعلمين والمشرفين والكوادر التشغيلية للمركز.</span></a>
-              <a class="quick-link-item" href="<?= e($centerSubjectsUrl) ?>"><strong>المواد الدراسية</strong><span>تحديد وتحديث المواد الدراسية التي يتم تقديمها في هذا المركز.</span></a>
-              <a class="quick-link-item" href="<?= e($assessmentsUrl) ?>"><strong>التقييمات والأوزان</strong><span>تعريف أنواع التقييم، المقاييس، والأوزان التشغيلية لهذا المركز.</span></a>
-              <a class="quick-link-item" href="<?= e($attendanceUrl) ?>"><strong>غياب الطلاب</strong><span>تسجيل الغياب اليومي، الأعذار، وحالات التأخر للطلاب المعتمدين.</span></a>
-              <a class="quick-link-item" href="application_detail.php?id=<?= e((string) $application['id']) ?>"><strong>ملف الاعتماد</strong><span>العودة إلى سجل القرار والتقييم.</span></a>
-              <a class="quick-link-item" href="center_profile.php?id=<?= e((string) $application['id']) ?>"><strong>إعدادات المركز</strong><span>تعديل الشعار والهوية وبيانات التواصل.</span></a>
-              <a class="quick-link-item" href="applications.php?status=approved"><strong>المراكز المعتمدة</strong><span>عرض بقية المراكز الجاهزة للتشغيل.</span></a>
-              <a class="quick-link-item" href="dashboard.php"><strong>لوحة القيادة</strong><span>الرجوع إلى المؤشرات العامة على مستوى الولاية.</span></a>
-              <a class="quick-link-item" href="admin.php"><strong>لوحة الإدارة</strong><span>الرجوع إلى البوابة المركزية لكل الشاشات الإدارية.</span></a>
+          <div class="app-card sidebar-card mb-4 p-4">
+            <h6 class="mb-3">بيانات التواصل</h6>
+            <div class="vstack gap-2 small">
+              <div class="d-flex justify-content-between border-bottom pb-2">
+                <strong class="text-primary">المدير:</strong> 
+                <span class="text-muted"><?= e((string) $application['director_name']) ?></span>
+              </div>
+              <div class="d-flex justify-content-between border-bottom pb-2">
+                <strong class="text-primary">الهاتف:</strong> 
+                <span class="text-muted" dir="ltr"><?= e((string) $application['phone']) ?></span>
+              </div>
+              <div class="d-flex justify-content-between border-bottom pb-2">
+                <strong class="text-primary">الإيميل:</strong> 
+                <span class="text-muted"><?= e((string) $application['email']) ?></span>
+              </div>
+              <div class="d-flex justify-content-between">
+                <strong class="text-primary">المدينة:</strong> 
+                <span class="text-muted"><?= e((string) $application['city']) ?></span>
+              </div>
             </div>
           </div>
         </div>
diff --git a/assessments.php b/assessments.php
index 3ecce3f..9a4b4d2 100644
--- a/assessments.php
+++ b/assessments.php
@@ -21,7 +21,7 @@ if ($application) {
     if (!is_array($center_subjects_ids)) $center_subjects_ids = [];
     $center_subjects_ids = array_map('strval', $center_subjects_ids);
     $all_subjects = get_enabled_subjects();
-    $available_subjects = array_filter($all_subjects, fn($s) => in_array((string)$s['id'], $center_subjects_ids, true));
+    $available_subjects = array_filter($all_subjects, function($s) use ($center_subjects_ids) { return in_array((string)$s["id"], $center_subjects_ids, true); });
 }
 
 if ($application && $isApprovedSchool) {
@@ -97,16 +97,16 @@ render_flash($flash);
 <section class="py-4 py-lg-5">
   <div class="container-xxl">
     <div class="row g-4 align-items-start">
-      <div class="col-lg-2">
+      <div class="col-lg-3">
         <?php if ($application) { require __DIR__ . '/includes/center_sidebar.php'; } else { require __DIR__ . '/includes/sidebar.php'; } ?>
       </div>
-      <div class="col-lg-10">
+      <div class="col-lg-9">
 
     <?php if (!$application): ?>
       <div class="app-card text-center py-5">
         <div class="empty-title mb-2">المدرسة غير موجودة</div>
         <p class="text-muted mb-3">تحقق من رابط المدرسة أو ارجع إلى قائمة المراكز المعتمدة.</p>
-        <a class="btn btn-dark" href="applications.php?status=approved">المراكز المعتمدة</a>
+        <a class="btn btn-primary" href="applications.php?status=approved">المراكز المعتمدة</a>
       </div>
     <?php elseif (!$isApprovedSchool): ?>
       <div class="page-banner mb-4">
@@ -115,7 +115,7 @@ render_flash($flash);
             <span class="eyebrow mb-3">التقييمات تبدأ بعد الاعتماد</span>
             <h1 class="page-title mb-3"><?= e((string) $application['center_name']) ?></h1>
             <p class="page-copy mb-3">يجب اعتماد المركز أولاً.</p>
-            <a class="btn btn-dark" href="<?= e($approvedSchoolUrl) ?>">صفحة المركز</a>
+            <a class="btn btn-primary" href="<?= e($approvedSchoolUrl) ?>">صفحة المركز</a>
           </div>
         </div>
       </div>
@@ -129,7 +129,7 @@ render_flash($flash);
           </div>
           <div class="col-md-4 text-md-end">
             <?php if (!$isCycleReadOnly): ?>
-              <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#assessmentModal" onclick="resetAssessmentForm()">
+              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#assessmentModal" onclick="resetAssessmentForm()">
                 إضافة تقييم جديد
               </button>
             <?php endif; ?>
@@ -168,7 +168,7 @@ render_flash($flash);
             </select>
           </div>
           <div class="col-md-2">
-            <button type="submit" class="btn btn-dark w-100">تصفية</button>
+            <button type="submit" class="btn btn-primary w-100">تصفية</button>
           </div>
         </form>
       </div>
@@ -303,7 +303,7 @@ render_flash($flash);
               </div>
               <div class="modal-footer">
                 <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">إلغاء</button>
-                <button type="submit" class="btn btn-dark">حفظ التقييم</button>
+                <button type="submit" class="btn btn-primary">حفظ التقييم</button>
               </div>
             </form>
           </div>
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 4832d83..33e451e 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,18 +1,23 @@
  :root {
-    --bg: #f3f4f6;
+    --bs-primary: #0284c7;
+    --bs-primary-rgb: 2, 132, 199;
+    --bs-border-color: var(--border);
+    --bs-body-bg: var(--bg);
+    --bs-body-color: var(--text);
+    --bg: #f0f9ff;
     --surface: #ffffff;
     --surface-muted: #f8fafc;
     --border: #d6dbe3;
     --border-strong: #c1c8d2;
-    --text: #0f172a;
+    --text: #1e293b;
     --muted: #475569;
-    --primary: #111827;
-    --accent: #0f766e;
-    --accent-soft: #ecfdf5;
+    --primary: #0284c7;
+    --accent: #ea580c;
+    --accent-soft: #ffedd5;
     --success: #166534;
     --warning: #92400e;
     --danger: #b91c1c;
-    --shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
+    --shadow: 0 10px 30px rgba(2, 132, 199, 0.08);
     --radius-sm: 10px;
     --radius-md: 14px;
     --radius-lg: 18px;
@@ -72,7 +77,7 @@ h6,
 }
 
 ::selection {
-    background: rgba(15, 118, 110, 0.18);
+    background: rgba(2, 132, 199, 0.18);
 }
 
 .app-shell {
@@ -87,6 +92,8 @@ h6,
 
 .site-header {
     position: sticky;
+    border-top: 4px solid var(--primary);
+    background: linear-gradient(to right, rgba(255,255,255,0.95), rgba(240, 249, 255, 0.95));
     top: 0;
     z-index: 1020;
 }
@@ -111,7 +118,7 @@ h6,
 
 .nav-link.active,
 .nav-link:hover {
-    background: #eef2f7;
+    background: #e0f2fe;
     color: var(--primary);
 }
 
@@ -323,7 +330,7 @@ h6,
 .filter-pill.active,
 .filter-pill:hover {
     color: var(--primary);
-    background: #eef2f7;
+    background: #e0f2fe;
     border-color: var(--border-strong);
 }
 
@@ -427,8 +434,8 @@ textarea.form-control {
 .btn:focus,
 .nav-link:focus,
 .filter-pill:focus {
-    border-color: rgba(15, 118, 110, 0.45);
-    box-shadow: 0 0 0 0.18rem rgba(15, 118, 110, 0.13);
+    border-color: rgba(2, 132, 199, 0.45);
+    box-shadow: 0 0 0 0.18rem rgba(2, 132, 199, 0.13);
 }
 
 .btn {
@@ -437,15 +444,15 @@ textarea.form-control {
     font-weight: 600;
 }
 
-.btn-dark {
+.btn-primary {
     background: var(--primary);
     border-color: var(--primary);
 }
 
-.btn-dark:hover,
-.btn-dark:focus {
-    background: #0b1220;
-    border-color: #0b1220;
+.btn-primary:hover,
+.btn-primary:focus {
+    background: #0369a1;
+    border-color: #0369a1;
 }
 
 .btn-outline-secondary {
@@ -454,7 +461,7 @@ textarea.form-control {
 }
 
 .btn-outline-secondary:hover {
-    background: #eef2f7;
+    background: #e0f2fe;
     border-color: var(--border-strong);
     color: var(--primary);
 }
@@ -574,7 +581,7 @@ textarea.form-control {
     padding: 1.5rem 1.7rem;
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
-    background: linear-gradient(135deg, #ffffff 0%, #f7fafc 60%, #eef6f5 100%);
+    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 60%, #e0f2fe 100%);
     box-shadow: var(--shadow);
 }
 
@@ -678,7 +685,7 @@ textarea.form-control {
     align-items: center;
     justify-content: center;
     border-radius: 999px;
-    background: #e6f6f4;
+    background: #ffedd5;
     color: var(--accent);
     font-weight: 700;
 }
@@ -707,7 +714,7 @@ textarea.form-control {
 }
 
 .quick-link-item.is-current {
-    border-color: rgba(15, 118, 110, 0.32);
+    border-color: rgba(234, 88, 12, 0.32);
     background: linear-gradient(135deg, #ffffff 0%, var(--accent-soft) 100%);
     box-shadow: var(--shadow);
 }
@@ -738,7 +745,7 @@ textarea.form-control {
     display: block;
     height: 100%;
     border-radius: inherit;
-    background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
+    background: linear-gradient(90deg, #ea580c 0%, #f97316 100%);
 }
 
 .status-panel .status-badge {
@@ -762,8 +769,8 @@ textarea.form-control {
 
 .approved-hero {
     background:
-        radial-gradient(circle at top left, rgba(15, 118, 110, 0.12), transparent 35%),
-        linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #ecfdf5 100%);
+        radial-gradient(circle at top left, rgba(234, 88, 12, 0.12), transparent 35%),
+        linear-gradient(135deg, #ffffff 0%, #f0f9ff 55%, #e0f2fe 100%);
     overflow: hidden;
 }
 
@@ -777,7 +784,7 @@ textarea.form-control {
     align-items: center;
     gap: 0.45rem;
     border-radius: 999px;
-    background: rgba(15, 118, 110, 0.1);
+    background: rgba(234, 88, 12, 0.1);
     color: var(--accent);
     padding: 0.45rem 0.8rem;
     font-size: 0.82rem;
@@ -924,6 +931,7 @@ textarea.form-control {
 }
 .sidebar-link {
     display: flex;
+    white-space: nowrap;
     align-items: center;
     gap: 0.85rem;
     padding: 0.65rem 1rem;
@@ -937,11 +945,12 @@ textarea.form-control {
     flex-shrink: 0;
 }
 .sidebar-link:hover, .sidebar-link.active {
-    background: #eef2f7;
+    background: #e0f2fe;
     color: var(--primary);
 }
 .sidebar-label {
     font-size: 0.75rem;
+    white-space: nowrap;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin-top: 1rem;
diff --git a/assets/images/pexels/dashboard-analytics.jpg b/assets/images/pexels/dashboard-analytics.jpg
new file mode 100644
index 0000000..27fd57d
Binary files /dev/null and b/assets/images/pexels/dashboard-analytics.jpg differ
diff --git a/assets/images/pexels/hero-office.jpg b/assets/images/pexels/hero-office.jpg
new file mode 100644
index 0000000..e384bf0
Binary files /dev/null and b/assets/images/pexels/hero-office.jpg differ
diff --git a/attendance.php b/attendance.php
index 3c4338a..ecd7bd5 100644
--- a/attendance.php
+++ b/attendance.php
@@ -129,7 +129,7 @@ render_flash($flash);
       <div class="app-card text-center py-5">
         <div class="empty-title mb-2">المدرسة غير موجودة</div>
         <p class="text-muted mb-3">تحقق من رابط المدرسة أو ارجع إلى قائمة المراكز المعتمدة.</p>
-        <a class="btn btn-dark" href="applications.php?status=approved">المراكز المعتمدة</a>
+        <a class="btn btn-primary" href="applications.php?status=approved">المراكز المعتمدة</a>
       </div>
     <?php elseif (!$isApprovedSchool): ?>
       <div class="page-banner mb-4 mb-lg-5">
@@ -143,7 +143,7 @@ render_flash($flash);
               <span>المدينة: <?= e((string) $application['city']) ?></span>
             </div>
             <div class="cta-stack mt-4">
-              <a class="btn btn-dark" href="<?= e($applicationDetailUrl) ?>">العودة لملف الاعتماد</a>
+              <a class="btn btn-primary" href="<?= e($applicationDetailUrl) ?>">العودة لملف الاعتماد</a>
               <a class="btn btn-outline-secondary" href="<?= e($approvedSchoolUrl) ?>">صفحة المركز</a>
             </div>
           </div>
@@ -162,7 +162,7 @@ render_flash($flash);
               <span>آخر تحديث <?= e($latestDateLabel) ?></span>
             </div>
             <div class="cta-stack mt-4">
-              <a class="btn btn-dark" href="admin.php">لوحة الإدارة</a>
+              <a class="btn btn-primary" href="admin.php">لوحة الإدارة</a>
               <a class="btn btn-outline-secondary" href="<?= e($approvedSchoolUrl) ?>">العودة لصفحة المركز</a>
               <a class="btn btn-outline-secondary" href="<?= e($studentsUrl) ?>">تسجيل الطلاب</a>
               <a class="btn btn-outline-secondary" href="<?= e($teachersUrl) ?>">فريق المعلمين</a>
@@ -294,7 +294,7 @@ render_flash($flash);
                 </div>
 
                 <div class="d-grid">
-                  <button class="btn btn-dark" type="submit">حفظ سجل الغياب</button>
+                  <button class="btn btn-primary" type="submit">حفظ سجل الغياب</button>
                 </div>
               </form>
             <?php endif; ?>
diff --git a/center_application.php b/center_application.php
index eb09a46..ac6d99e 100644
--- a/center_application.php
+++ b/center_application.php
@@ -27,26 +27,25 @@ render_flash($flash);
 ?>
 <section class="py-4 py-lg-5">
   <div class="container-xxl">
-    <div class="page-banner mb-4 mb-lg-5">
-      <div class="row g-4 align-items-start">
-        <div class="col-lg-8">
-          <span class="eyebrow mb-3">صفحة مستقلة للتقديم</span>
-          <h1 class="page-title mb-3">طلب فتح مركز صيفي</h1>
-          <p class="page-copy mb-0">هذه الصفحة مخصصة بالكامل لبيانات طلب المركز: تعريف الجهة، المسؤول المباشر، الطاقة التشغيلية، وملاحظات التنفيذ قبل انتقال الملف إلى لوحة المراجعة.</p>
-        </div>
-        <div class="col-lg-4">
-          <div class="page-banner-panel h-100">
-            <div class="mini-stat-label">حالة سير الطلبات الحالية</div>
-            <div class="mini-stat-value"><?= e((string) $stats['all']) ?></div>
-            <div class="mini-stat-copy">إجمالي الطلبات المسجلة داخل النظام حتى الآن، منها <?= e((string) $stats['submitted']) ?> بانتظار الاستلام و<?= e((string) $stats['under_review']) ?> تحت المراجعة.</div>
-          </div>
-        </div>
+    
+    <div class="row align-items-center mb-4 bg-white rounded-4 shadow-sm overflow-hidden" style="border: 1px solid var(--border-color);">
+      <div class="col-lg-8 p-4 p-lg-5">
+        <span class="badge bg-primary bg-opacity-10 text-primary mb-3 px-3 py-2 rounded-pill border border-primary border-opacity-25">نموذج التسجيل</span>
+        <h1 class="h3 fw-bold mb-3 text-primary">طلب فتح مركز صيفي</h1>
+        <p class="text-muted mb-0" style="line-height: 1.8; font-size: 0.95rem;">
+          هذه الصفحة مخصصة بالكامل لبيانات طلب المركز: تعريف الجهة، المسؤول المباشر، الطاقة التشغيلية، وملاحظات التنفيذ قبل انتقال الملف إلى لوحة المراجعة.
+        </p>
+      </div>
+      <div class="col-lg-4 p-4 p-lg-5 bg-light border-start d-flex flex-column justify-content-center h-100">
+        <div class="text-muted small fw-bold mb-2">حالة سير الطلبات الحالية</div>
+        <div class="fs-2 fw-bold text-dark mb-1"><?= e((string) $stats['all']) ?></div>
+        <div class="text-secondary small" style="line-height: 1.6;">إجمالي الطلبات المسجلة، منها <span class="fw-bold text-warning"><?= e((string) $stats['submitted']) ?></span> بانتظار الاستلام و<span class="fw-bold text-info"><?= e((string) $stats['under_review']) ?></span> تحت المراجعة.</div>
       </div>
     </div>
 
     <div class="row g-4 align-items-start">
       <div class="col-lg-8">
-        <div class="app-card form-card">
+        <div class="app-card form-card shadow-sm border-0">
           <div class="section-head mb-4">
             <div>
               <div class="section-title">بيانات الطلب الأساسية</div>
@@ -191,7 +190,7 @@ render_flash($flash);
               </div>
             </div>
             <div class="form-actions d-flex flex-wrap gap-2 pt-2">
-              <button class="btn btn-dark px-4" type="submit">إرسال الطلب</button>
+              <button class="btn btn-primary px-4" type="submit">إرسال الطلب</button>
               <a class="btn btn-outline-secondary px-4" href="applications.php">العودة إلى لوحة الطلبات</a>
             </div>
           </form>
@@ -199,7 +198,7 @@ render_flash($flash);
       </div>
 
       <div class="col-lg-4">
-        <div class="app-card sidebar-card mb-4">
+        <div class="app-card sidebar-card mb-4 shadow-sm border-0">
           <div class="section-title mb-3">مسار هذه الصفحة</div>
           <div class="process-list">
             <div class="process-item active"><span>1</span><div><strong>إدخال البيانات</strong><small>تجميع بيانات الهوية والتشغيل في صفحة واحدة.</small></div></div>
@@ -208,7 +207,7 @@ render_flash($flash);
           </div>
         </div>
 
-        <div class="app-card sidebar-card mb-4">
+        <div class="app-card sidebar-card mb-4 shadow-sm border-0">
           <div class="section-title mb-3">الحد الأدنى المطلوب</div>
           <ul class="check-list mb-0">
             <li>اسم المركز والمنطقة التشغيلية.</li>
@@ -219,16 +218,32 @@ render_flash($flash);
           </ul>
         </div>
 
-        <div class="app-card sidebar-card">
-          <div class="section-title mb-3">روابط الصفحة التالية</div>
-          <div class="quick-link-stack">
-            <a class="quick-link-item" href="applications.php"><strong>لوحة الطلبات</strong><span>متابعة جميع الطلبات بعد الإرسال.</span></a>
-            <a class="quick-link-item" href="dashboard.php"><strong>لوحة القيادة</strong><span>مراجعة المؤشرات العامة للولاية.</span></a>
-            <a class="quick-link-item" href="modules.php"><strong>هيكل النظام</strong><span>فهم حدود النسخة الحالية ومسار العمل.</span></a>
-          </div>
+        <div class="d-flex align-items-center justify-content-between mb-3 mt-4">
+          <h3 class="h6 mb-0 fw-bold text-dark">روابط سريعة</h3>
         </div>
+        <div class="d-flex flex-column gap-3">
+          <a href="applications.php" class="text-decoration-none">
+            <article class="app-card link-card p-3 bg-white rounded-3 border-start border-primary border-4 shadow-sm" style="transition: transform 0.2s;">
+              <h4 class="h6 fw-bold text-dark mb-1">لوحة الطلبات</h4>
+              <p class="text-muted small mb-0">متابعة جميع الطلبات بعد الإرسال.</p>
+            </article>
+          </a>
+          <a href="dashboard.php" class="text-decoration-none">
+            <article class="app-card link-card p-3 bg-white rounded-3 border-start border-warning border-4 shadow-sm" style="transition: transform 0.2s;">
+              <h4 class="h6 fw-bold text-dark mb-1">لوحة القيادة</h4>
+              <p class="text-muted small mb-0">مراجعة المؤشرات العامة للولاية.</p>
+            </article>
+          </a>
+          <a href="modules.php" class="text-decoration-none">
+            <article class="app-card link-card p-3 bg-white rounded-3 border-start border-success border-4 shadow-sm" style="transition: transform 0.2s;">
+              <h4 class="h6 fw-bold text-dark mb-1">هيكل النظام</h4>
+              <p class="text-muted small mb-0">فهم حدود النسخة الحالية ومسار العمل.</p>
+            </article>
+          </a>
+        </div>
+
       </div>
     </div>
   </div>
 </section>
-<?php render_page_end(); ?>
+<?php render_page_end(); ?>
\ No newline at end of file
diff --git a/center_profile.php b/center_profile.php
index 8bb1ab7..4ad0488 100644
--- a/center_profile.php
+++ b/center_profile.php
@@ -20,7 +20,7 @@ if (!$application) {
           <div class="col-lg-9">
             <div class="app-card text-center py-5">
               <div class="empty-title mb-2">المركز غير موجود</div>
-              <a class="btn btn-dark" href="applications.php?status=approved">العودة</a>
+              <a class="btn btn-primary" href="applications.php?status=approved">العودة</a>
             </div>
           </div>
         </div>
@@ -160,7 +160,7 @@ render_flash($flash);
             </div>
             
             <div class="form-actions mt-4">
-              <button class="btn btn-dark px-4" type="submit">حفظ التغييرات</button>
+              <button class="btn btn-primary px-4" type="submit">حفظ التغييرات</button>
               <a class="btn btn-outline-secondary px-4" href="approved_school.php?id=<?= e((string)$applicationId) ?>">إلغاء</a>
             </div>
           </form>
diff --git a/center_subjects.php b/center_subjects.php
index 0e07f4e..2ab1c16 100644
--- a/center_subjects.php
+++ b/center_subjects.php
@@ -29,7 +29,7 @@ if (!$application || !$isApproved) {
           <div class="col-lg-9">
             <div class="app-card text-center py-5">
               <div class="empty-title mb-2">المركز غير موجود</div>
-              <a class="btn btn-dark" href="applications.php?status=approved">العودة</a>
+              <a class="btn btn-primary" href="applications.php?status=approved">العودة</a>
             </div>
           </div>
         </div>
@@ -99,7 +99,7 @@ render_flash($flash);
                       <div class="form-check border rounded-3 p-3 h-100 bg-light-subtle">
                         <input class="form-check-input ms-0 me-2 mt-1 float-end" type="checkbox" name="subjects[]" <?= is_super_admin() ? "" : "disabled" ?> value="<?= e((string) $subject['id']) ?>" id="subject_<?= e((string) $subject['id']) ?>" <?= in_array((string) $subject['id'], $current_subjects_ids, true) ? 'checked' : '' ?>>
                         <label class="form-check-label d-block me-4 pe-2" for="subject_<?= e((string) $subject['id']) ?>">
-                          <span class="fw-bold d-block text-dark"><?= e((string) $subject['name']) ?></span>
+                          <span class="fw-bold d-block text-primary"><?= e((string) $subject['name']) ?></span>
                           <?php if (!empty($subject['description'])): ?>
                             <small class="text-muted d-block mt-1"><?= e((string) $subject['description']) ?></small>
                           <?php endif; ?>
@@ -113,7 +113,7 @@ render_flash($flash);
             
             <div class="text-start">
                 <?php if (is_super_admin()): ?>
-                <button type="submit" class="btn btn-dark px-4">حفظ المواد الدراسية</button>
+                <button type="submit" class="btn btn-primary px-4">حفظ المواد الدراسية</button>
             <?php else: ?>
                 <div class="alert alert-warning mb-0">يمكن للمشرف العام فقط تعديل هذه القائمة.</div>
             <?php endif; ?>
diff --git a/dashboard.php b/dashboard.php
index fe6d009..7e3aabb 100644
--- a/dashboard.php
+++ b/dashboard.php
@@ -6,132 +6,135 @@ $flash = consume_flash();
 $stats = dashboard_metrics();
 $recentApplications = latest_applications(5);
 
-render_page_start('لوحة القيادة', 'dashboard', 'لوحة متابعة منفصلة تعرض مؤشرات طلبات فتح المراكز وآخر الطلبات الواردة.');
+render_page_start('المتابعة التشغيلية', 'dashboard', 'لوحة متابعة تشغيلية لعمليات النظام.');
 render_flash($flash);
 ?>
 <section class="py-4 py-lg-5">
   <div class="container-xxl">
-<div class="row g-4 align-items-start">
+    <div class="row g-4 align-items-start">
       <div class="col-lg-3">
         <?php require __DIR__ . '/includes/sidebar.php'; ?>
       </div>
       <div class="col-lg-9">
 
-    <div class="app-card mb-4">
-      <div class="section-head flex-column flex-lg-row align-items-start align-items-lg-center gap-3">
-        <div>
-          <div class="section-title">لوحة القيادة التشغيلية</div>
-          <div class="section-copy">هذه الصفحة مخصصة للمتابعة اليومية للمشرف العام: مؤشرات سريعة، آخر الطلبات، وروابط التحرك المباشر.</div>
-        </div>
-        <div class="d-flex flex-wrap gap-2">
-          <a class="btn btn-dark btn-sm px-3" href="admin.php">لوحة الإدارة</a>
-          <a class="btn btn-outline-secondary btn-sm px-3" href="applications.php?status=submitted">طلبات جديدة</a>
-          <a class="btn btn-outline-secondary btn-sm px-3" href="applications.php">كل الطلبات</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="row g-3 mb-4">
-      <div class="col-sm-6 col-xl-3">
-        <div class="app-card stat-card h-100">
-          <div class="stat-label">إجمالي الطلبات</div>
-          <div class="stat-value"><?= e($stats['all']) ?></div>
-          <div class="stat-note">جميع طلبات فتح المراكز</div>
-        </div>
-      </div>
-      <div class="col-sm-6 col-xl-3">
-        <div class="app-card stat-card h-100">
-          <div class="stat-label">قيد الاستلام</div>
-          <div class="stat-value"><?= e($stats['submitted']) ?></div>
-          <div class="stat-note">بحاجة إلى بدء المراجعة</div>
-        </div>
-      </div>
-      <div class="col-sm-6 col-xl-3">
-        <div class="app-card stat-card h-100">
-          <div class="stat-label">تحت المراجعة</div>
-          <div class="stat-value"><?= e($stats['under_review']) ?></div>
-          <div class="stat-note">نشطة داخل مسار التقييم</div>
-        </div>
-      </div>
-      <div class="col-sm-6 col-xl-3">
-        <div class="app-card stat-card h-100">
-          <div class="stat-label">معتمد</div>
-          <div class="stat-value"><?= e($stats['approved']) ?></div>
-          <div class="stat-note">جاهز لاستقبال الطلاب</div>
-        </div>
-      </div>
-    </div>
-
-    <div class="row g-4">
-      <div class="col-lg-8">
-        <div class="app-card h-100">
-          <div class="section-head mb-3">
-            <div>
-              <div class="section-title">آخر الطلبات الواردة</div>
-              <div class="section-copy">قائمة مختصرة للطلبات الأحدث حتى يتمكن المشرف العام من فتح التفاصيل بسرعة.</div>
+        <div class="row align-items-center mb-4 bg-white rounded-4 shadow-sm overflow-hidden" style="border: 1px solid var(--border-color);">
+          <div class="col-lg-7 p-4 p-lg-5">
+            <h1 class="h3 fw-bold mb-3 text-primary">المتابعة التشغيلية</h1>
+            <p class="text-muted mb-4" style="line-height: 1.8; font-size: 0.95rem;">
+              مرحباً بك في واجهة المتابعة التشغيلية. هنا يمكنك مراقبة مؤشرات الأداء الحيوية، استعراض أحدث الطلبات الواردة، واتخاذ إجراءات سريعة لتيسير العمليات اليومية.
+            </p>
+            <div class="d-flex flex-wrap gap-3">
+              <a class="btn btn-primary px-4 py-2" href="admin.php">لوحة الإدارة</a>
+              <a class="btn btn-outline-secondary px-4 py-2" href="applications.php?status=submitted">طلبات جديدة</a>
             </div>
-            <a class="btn btn-outline-secondary btn-sm" href="applications.php">الانتقال إلى القائمة الكاملة</a>
           </div>
-          <div class="table-responsive">
-            <table class="table app-table align-middle mb-0">
-              <thead>
-                <tr>
-                  <th>المرجع</th>
-                  <th>المركز</th>
-                  <th>المدينة</th>
-                  <th>الحالة</th>
-                  <th>السعة</th>
-                </tr>
-              </thead>
-              <tbody>
-                <?php foreach ($recentApplications as $application): ?>
-                  <tr>
-                    <td><a class="table-link" href="application_detail.php?id=<?= e((string) $application['id']) ?>">#<?= e((string) $application['id']) ?></a></td>
-                    <td>
-                      <div class="fw-semibold"><?= e((string) $application['center_name']) ?></div>
-                      <div class="text-muted small"><?= e((string) $application['director_name']) ?></div>
-                    </td>
-                    <td><?= e((string) $application['city']) ?></td>
-                    <td><?= status_badge((string) $application['status']) ?></td>
-                    <td><?= e((string) $application['expected_students']) ?> طالب</td>
-                  </tr>
-                <?php endforeach; ?>
-              </tbody>
-            </table>
+          <div class="col-lg-5 p-0 d-none d-lg-block" style="background-color: var(--bg-color);">
+            <img src="assets/images/pexels/dashboard-analytics.jpg" alt="تحليلات" class="img-fluid w-100 h-100 object-fit-cover" style="min-height: 250px;">
           </div>
         </div>
-      </div>
-      <div class="col-lg-4">
-        <div class="app-card h-100">
-          <div class="section-title mb-3">إجراءات سريعة</div>
-          <div class="module-list">
-            <article class="module-item">
-              <h2>لوحة الإدارة</h2>
-              <p class="mb-3">الرجوع إلى البوابة المركزية التي تجمع كل الصفحات الإدارية في مكان واحد.</p>
-              <a class="btn btn-outline-secondary btn-sm" href="admin.php">فتح اللوحة</a>
-            </article>
-            <article class="module-item">
-              <h2>بدء طلب جديد</h2>
-              <p class="mb-3">الانتقال مباشرة إلى شاشة التقديم دون المرور على تفاصيل أخرى.</p>
-              <a class="btn btn-outline-secondary btn-sm" href="center_application.php">فتح النموذج</a>
-            </article>
-            <article class="module-item">
-              <h2>مراجعة شاملة</h2>
-              <p class="mb-3">فتح لوحة الطلبات مع جميع السجلات وحالاتها الحالية.</p>
-              <a class="btn btn-outline-secondary btn-sm" href="applications.php">فتح القائمة</a>
-            </article>
-            <article class="module-item">
-              <h2>هيكل النظام</h2>
-              <p class="mb-3">مراجعة النطاق الحالي والصفحات المفصولة ضمن النسخة الأولية.</p>
-              <a class="btn btn-outline-secondary btn-sm" href="modules.php">فتح الصفحة</a>
-            </article>
-          </div>
-        </div>
-      </div>
-    </div>
-      </div>
-    </div>
 
+        <div class="d-flex align-items-center justify-content-between mb-3 mt-4">
+          <h3 class="h6 mb-0 fw-bold text-dark">مؤشرات الأداء</h3>
+        </div>
+
+        <div class="row g-3 mb-4">
+          <div class="col-sm-6 col-xl-3">
+            <div class="app-card stat-tile p-3 h-100 d-flex flex-column justify-content-center shadow-sm">
+              <div class="mini-stat-label text-muted mb-2">إجمالي الطلبات</div>
+              <div class="mini-stat-value fs-3 fw-bold text-primary mb-1"><?= e($stats['all']) ?></div>
+              <div class="mini-stat-copy small text-secondary mt-auto">كافة الطلبات المسجلة</div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-xl-3">
+            <div class="app-card stat-tile p-3 h-100 d-flex flex-column justify-content-center shadow-sm">
+              <div class="mini-stat-label text-muted mb-2">قيد الاستلام</div>
+              <div class="mini-stat-value fs-3 fw-bold text-warning mb-1"><?= e($stats['submitted']) ?></div>
+              <div class="mini-stat-copy small text-secondary mt-auto">طلبات جديدة للمراجعة</div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-xl-3">
+            <div class="app-card stat-tile p-3 h-100 d-flex flex-column justify-content-center shadow-sm">
+              <div class="mini-stat-label text-muted mb-2">تحت التقييم</div>
+              <div class="mini-stat-value fs-3 fw-bold text-info mb-1"><?= e($stats['under_review']) ?></div>
+              <div class="mini-stat-copy small text-secondary mt-auto">نشطة داخل المسار</div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-xl-3">
+            <div class="app-card stat-tile p-3 h-100 d-flex flex-column justify-content-center shadow-sm">
+              <div class="mini-stat-label text-muted mb-2">معتمد</div>
+              <div class="mini-stat-value fs-3 fw-bold text-success mb-1"><?= e($stats['approved']) ?></div>
+              <div class="mini-stat-copy small text-secondary mt-auto">مراكز جاهزة للتشغيل</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row g-4">
+          <div class="col-lg-8">
+            <div class="d-flex align-items-center justify-content-between mb-3 mt-2">
+              <h3 class="h6 mb-0 fw-bold text-dark">أحدث الطلبات</h3>
+              <a class="btn btn-link btn-sm text-decoration-none px-0" href="applications.php">عرض الكل &larr;</a>
+            </div>
+            <div class="app-card p-0 overflow-hidden shadow-sm">
+              <div class="table-responsive">
+                <table class="table app-table align-middle mb-0">
+                  <thead class="bg-light">
+                    <tr>
+                      <th class="ps-4">المرجع</th>
+                      <th>المركز</th>
+                      <th>المدينة</th>
+                      <th>الحالة</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <?php foreach ($recentApplications as $application): ?>
+                      <tr>
+                        <td class="ps-4"><a class="text-decoration-none fw-bold" href="application_detail.php?id=<?= e((string) $application['id']) ?>">#<?= e((string) $application['id']) ?></a></td>
+                        <td>
+                          <div class="fw-semibold text-dark"><?= e((string) $application['center_name']) ?></div>
+                          <div class="text-muted small"><?= e((string) $application['director_name']) ?></div>
+                        </td>
+                        <td><?= e((string) $application['city']) ?></td>
+                        <td><?= status_badge((string) $application['status']) ?></td>
+                      </tr>
+                    <?php endforeach; ?>
+                    <?php if (empty($recentApplications)): ?>
+                      <tr><td colspan="4" class="text-center text-muted py-4">لا توجد طلبات حديثة</td></tr>
+                    <?php endif; ?>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-lg-4">
+            <div class="d-flex align-items-center justify-content-between mb-3 mt-2">
+              <h3 class="h6 mb-0 fw-bold text-dark">إجراءات سريعة</h3>
+            </div>
+            <div class="d-flex flex-column gap-3">
+              <a href="center_application.php" class="text-decoration-none">
+                <article class="app-card link-card p-3 border-start border-primary border-4 shadow-sm" style="min-height: auto; transition: transform 0.2s;">
+                  <h4 class="h6 fw-bold text-dark mb-1">تقديم طلب جديد</h4>
+                  <p class="text-muted small mb-0">فتح نموذج التسجيل لمركز جديد.</p>
+                </article>
+              </a>
+              <a href="applications.php" class="text-decoration-none">
+                <article class="app-card link-card p-3 border-start border-warning border-4 shadow-sm" style="min-height: auto; transition: transform 0.2s;">
+                  <h4 class="h6 fw-bold text-dark mb-1">مراجعة الطلبات</h4>
+                  <p class="text-muted small mb-0">الذهاب إلى قائمة جميع الطلبات.</p>
+                </article>
+              </a>
+              <a href="modules.php" class="text-decoration-none">
+                <article class="app-card link-card p-3 border-start border-success border-4 shadow-sm" style="min-height: auto; transition: transform 0.2s;">
+                  <h4 class="h6 fw-bold text-dark mb-1">هيكل النظام</h4>
+                  <p class="text-muted small mb-0">نظرة على بنية الوحدات والميزات.</p>
+                </article>
+              </a>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
   </div>
 </section>
-<?php render_page_end(); ?>
+<?php render_page_end(); ?>
\ No newline at end of file
diff --git a/global_cycles.php b/global_cycles.php
index 9bd4150..b529e40 100644
--- a/global_cycles.php
+++ b/global_cycles.php
@@ -10,7 +10,7 @@ if (!is_super_admin()) {
         <div class="container-xxl">
             <h1 class="mb-3">عذراً</h1>
             <p>هذه الصفحة مخصصة للمشرف العام فقط.</p>
-            <a href="index.php" class="btn btn-dark mt-3">العودة للرئيسية</a>
+            <a href="index.php" class="btn btn-primary mt-3">العودة للرئيسية</a>
         </div>
     </section>
     <?php
@@ -139,7 +139,7 @@ render_flash($flash);
               <p class="page-copy mb-0">يمكنك هنا تعريف الدورات الجديدة ليتاح للمراكز التقديم عليها.</p>
             </div>
             <div class="col-md-4 text-md-end mt-3 mt-md-0">
-              <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#addCycleModal">
+              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCycleModal">
                 إضافة دورة جديدة
               </button>
             </div>
@@ -248,7 +248,7 @@ render_flash($flash);
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">إلغاء</button>
-          <button type="submit" class="btn btn-dark">حفظ الدورة</button>
+          <button type="submit" class="btn btn-primary">حفظ الدورة</button>
         </div>
       </form>
     </div>
diff --git a/includes/app.php b/includes/app.php
index 8cf0e35..8eea7d3 100644
--- a/includes/app.php
+++ b/includes/app.php
@@ -1337,7 +1337,7 @@ function render_page_start(string $pageTitle, string $active = 'home', string $p
                 $roleSwitchUrl .= (strpos($roleSwitchUrl, '?') !== false ? '&' : '?') . 'role=' . $nextRole;
                 ?>
                 <a href="<?= e($roleSwitchUrl) ?>" class="header-chip text-decoration-none bg-primary text-white" style="cursor:pointer;" title="اضغط للتبديل">صلاحية: <?= e($roleName) ?> ⟳</a>
-                <a class="btn btn-dark btn-sm px-3" href="applications.php?status=submitted">مراجعة سريعة</a>
+                <a class="btn btn-primary btn-sm px-3" href="applications.php?status=submitted">مراجعة سريعة</a>
               </div>
             </div>
           </div>
@@ -1426,7 +1426,7 @@ function render_flash(?array $flash): void
     $toastClass = match ($flash['type'] ?? '') {
         'success' => 'text-bg-success',
         'error' => 'text-bg-danger',
-        default => 'text-bg-dark',
+        default => 'text-bg-primary',
     };
     ?>
     <div class="toast-container position-fixed top-0 start-0 p-3">
diff --git a/includes/pexels.php b/includes/pexels.php
new file mode 100644
index 0000000..0c04a85
--- /dev/null
+++ b/includes/pexels.php
@@ -0,0 +1,25 @@
+<?php
+function pexels_key() {
+  $k = getenv('PEXELS_KEY');
+  return $k && strlen($k) > 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
+}
+function pexels_get($url) {
+  $ch = curl_init();
+  curl_setopt_array($ch, [
+    CURLOPT_URL => $url,
+    CURLOPT_RETURNTRANSFER => true,
+    CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ],
+    CURLOPT_TIMEOUT => 15,
+  ]);
+  $resp = curl_exec($ch);
+  $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+  curl_close($ch);
+  if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true);
+  return null;
+}
+function download_to($srcUrl, $destPath) {
+  $data = file_get_contents($srcUrl);
+  if ($data === false) return false;
+  if (!is_dir(dirname($destPath))) mkdir(dirname($destPath), 0775, true);
+  return file_put_contents($destPath, $data) !== false;
+}
diff --git a/index.php b/index.php
index 37c4a51..c8ee6f5 100644
--- a/index.php
+++ b/index.php
@@ -5,103 +5,99 @@ require_once __DIR__ . '/includes/app.php';
 $flash = consume_flash();
 $stats = dashboard_metrics();
 
-render_page_start('الرئيسية', 'home', 'الصفحة الرئيسية المنظمة لمنصة إدارة المراكز الصيفية مع وصول سريع إلى كل شاشة بشكل منفصل.');
+// Meaningful, clean text instead of placeholder info.
+render_page_start('الرئيسية', 'home', 'لوحة تحكم منصة إدارة المراكز الصيفية.');
 render_flash($flash);
 ?>
-<section class="hero-section py-4 py-lg-5">
-  <div class="container-xxl">
-    <div class="row g-4 align-items-stretch">
-      <div class="col-lg-7">
-        <div class="app-card hero-card h-100">
-          <div class="eyebrow mb-3">واجهة رئيسية منظمة للمشرف العام</div>
-          <h1 class="hero-title mb-3">كل مهمة في صفحة مستقلة وواضحة.</h1>
-          <p class="hero-copy mb-4">تم تنظيم النسخة الحالية بحيث تكون الصفحة الرئيسية نقطة دخول فقط، بينما توجد صفحة منفصلة للمتابعة التشغيلية، وصفحة مستقلة للطلبات، وصفحة خاصة ببنية النظام والنطاق الحالي.</p>
-          <div class="d-flex flex-wrap gap-2">
-            <a class="btn btn-dark px-4" href="dashboard.php">فتح لوحة القيادة</a>
-            <a class="btn btn-outline-secondary px-4" href="center_application.php">طلب فتح مركز</a>
-            <a class="btn btn-outline-secondary px-4" href="applications.php">لوحة الطلبات</a>
-          </div>
-          <div class="hero-meta mt-4">
-            <span>تنظيم أفضل للشاشات</span>
-            <span>واجهة عربية RTL</span>
-            <span>جاهزة للتوسع إلى التسجيل والحضور</span>
-          </div>
-        </div>
-      </div>
-      <div class="col-lg-5">
-        <div class="row g-3 h-100">
-          <div class="col-6">
-            <div class="app-card stat-card h-100">
-              <div class="stat-label">إجمالي الطلبات</div>
-              <div class="stat-value"><?= e($stats['all']) ?></div>
-              <div class="stat-note">إجمالي الطلبات المسجلة</div>
-            </div>
-          </div>
-          <div class="col-6">
-            <div class="app-card stat-card h-100">
-              <div class="stat-label">المعتمد</div>
-              <div class="stat-value"><?= e($stats['approved']) ?></div>
-              <div class="stat-note">مراكز جاهزة للتشغيل</div>
-            </div>
-          </div>
-          <div class="col-6">
-            <div class="app-card stat-card h-100">
-              <div class="stat-label">تحت المراجعة</div>
-              <div class="stat-value"><?= e($stats['under_review']) ?></div>
-              <div class="stat-note">طلبات تحتاج متابعة</div>
-            </div>
-          </div>
-          <div class="col-6">
-            <div class="app-card stat-card h-100">
-              <div class="stat-label">الطاقة المقترحة</div>
-              <div class="stat-value"><?= e($stats['expected_students']) ?></div>
-              <div class="stat-note">عدد الطلاب المتوقع</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
 
-<section class="py-2 py-lg-4">
-  <div class="container-xxl">
-    <div class="section-head mb-3">
-      <div>
-        <div class="section-title">الوصول السريع حسب المهمة</div>
-        <div class="section-copy">بدلاً من خلط كل شيء في صفحة واحدة، كل جزء أصبح له شاشة مستقلة ليسهل على المستخدم الوصول والتنقل.</div>
+<div class="container-xxl py-4">
+  <div class="row align-items-center mb-5 bg-white rounded-4 shadow-sm overflow-hidden" style="border: 1px solid var(--border-color);">
+    <div class="col-lg-6 p-4 p-lg-5">
+      <h1 class="display-6 fw-bold mb-3 text-primary">أهلاً بك في منصة الإدارة</h1>
+      <p class="lead text-muted mb-4" style="line-height: 1.8;">
+        توفر لك المنصة تحكماً شاملاً في كافة عمليات المراكز التعليمية. من خلال هذه الواجهة، يمكنك متابعة الطلبات، الإشراف على الاعتمادات، وإدارة الدورات والمواد التعليمية بكفاءة عالية وبأقل مجهود.
+      </p>
+      <div class="d-flex flex-wrap gap-3">
+        <a class="btn btn-primary px-4 py-2" href="applications.php">مراجعة الطلبات</a>
+        <a class="btn btn-outline-secondary px-4 py-2" href="dashboard.php">لوحة القيادة التشغيلية</a>
       </div>
     </div>
-    <div class="row g-4">
-      <div class="col-md-6 col-xl-3">
-        <article class="app-card link-card h-100">
-          <div class="small-title mb-2">لوحة القيادة</div>
-          <p class="text-muted mb-3">مؤشرات سريعة وآخر الطلبات الواردة للمشرف العام.</p>
-          <a class="btn btn-outline-secondary btn-sm" href="dashboard.php">فتح الصفحة</a>
-        </article>
+    <div class="col-lg-6 p-0 d-none d-lg-block" style="background-color: var(--bg-color);">
+      <img src="assets/images/pexels/hero-office.jpg" alt="الإدارة" class="img-fluid w-100 h-100 object-fit-cover" style="min-height: 350px;">
+    </div>
+  </div>
+
+  <div class="d-flex align-items-center justify-content-between mb-3 mt-5">
+    <h3 class="h5 mb-0 fw-bold text-dark">نظرة عامة سريعة</h3>
+  </div>
+
+  <div class="row g-3 mb-5">
+    <div class="col-md-3">
+      <div class="app-card stat-tile p-4 h-100 d-flex flex-column justify-content-center">
+        <div class="mini-stat-label text-muted mb-2">إجمالي الطلبات</div>
+        <div class="mini-stat-value display-6 fw-bold text-primary mb-1"><?= e($stats['all']) ?></div>
+        <div class="mini-stat-copy small text-secondary mt-auto">كافة الطلبات الواردة للمنصة</div>
       </div>
-      <div class="col-md-6 col-xl-3">
-        <article class="app-card link-card h-100">
-          <div class="small-title mb-2">طلب فتح مركز</div>
-          <p class="text-muted mb-3">نموذج التقديم الكامل في شاشة منفصلة بدون تشتيت.</p>
-          <a class="btn btn-outline-secondary btn-sm" href="center_application.php">فتح الصفحة</a>
-        </article>
+    </div>
+    <div class="col-md-3">
+      <div class="app-card stat-tile p-4 h-100 d-flex flex-column justify-content-center">
+        <div class="mini-stat-label text-muted mb-2">المراكز المعتمدة</div>
+        <div class="mini-stat-value display-6 fw-bold text-success mb-1"><?= e($stats['approved']) ?></div>
+        <div class="mini-stat-copy small text-secondary mt-auto">المراكز الجاهزة للتشغيل</div>
       </div>
-      <div class="col-md-6 col-xl-3">
-        <article class="app-card link-card h-100">
-          <div class="small-title mb-2">لوحة الطلبات</div>
-          <p class="text-muted mb-3">جدول موحد مع التصفية بالحالة والانتقال للتفاصيل.</p>
-          <a class="btn btn-outline-secondary btn-sm" href="applications.php">فتح الصفحة</a>
-        </article>
+    </div>
+    <div class="col-md-3">
+      <div class="app-card stat-tile p-4 h-100 d-flex flex-column justify-content-center">
+        <div class="mini-stat-label text-muted mb-2">قيد المراجعة</div>
+        <div class="mini-stat-value display-6 fw-bold text-warning mb-1"><?= e($stats['under_review']) ?></div>
+        <div class="mini-stat-copy small text-secondary mt-auto">الطلبات التي تنتظر القرار</div>
       </div>
-      <div class="col-md-6 col-xl-3">
-        <article class="app-card link-card h-100">
-          <div class="small-title mb-2">هيكل النظام</div>
-          <p class="text-muted mb-3">صفحة مخصصة للنطاق الحالي ومسار التوسع القادم.</p>
-          <a class="btn btn-outline-secondary btn-sm" href="modules.php">فتح الصفحة</a>
-        </article>
+    </div>
+    <div class="col-md-3">
+      <div class="app-card stat-tile p-4 h-100 d-flex flex-column justify-content-center">
+        <div class="mini-stat-label text-muted mb-2">الطاقة الاستيعابية</div>
+        <div class="mini-stat-value display-6 fw-bold text-info mb-1"><?= e($stats['expected_students']) ?></div>
+        <div class="mini-stat-copy small text-secondary mt-auto">إجمالي الطلاب المتوقع</div>
       </div>
     </div>
   </div>
-</section>
-<?php render_page_end(); ?>
+
+  <div class="d-flex align-items-center justify-content-between mb-3 mt-5">
+    <h3 class="h5 mb-0 fw-bold text-dark">الوصول السريع</h3>
+  </div>
+
+  <div class="row g-3 mb-4">
+    <div class="col-md-4">
+      <a href="dashboard.php" class="text-decoration-none h-100 d-block">
+        <article class="app-card link-card p-4 h-100 border-top border-primary border-4" style="min-height: auto;">
+          <div class="d-flex align-items-center mb-3">
+            <h4 class="h6 fw-bold text-dark mb-0">المتابعة التشغيلية</h4>
+          </div>
+          <p class="text-muted small mb-0" style="line-height: 1.6;">تابع مؤشرات الأداء بشكل أعمق واستعرض آخر النشاطات والإحصائيات الخاصة بالمراكز.</p>
+        </article>
+      </a>
+    </div>
+    <div class="col-md-4">
+      <a href="center_application.php" class="text-decoration-none h-100 d-block">
+        <article class="app-card link-card p-4 h-100 border-top border-warning border-4" style="min-height: auto;">
+          <div class="d-flex align-items-center mb-3">
+            <h4 class="h6 fw-bold text-dark mb-0">طلب مركز جديد</h4>
+          </div>
+          <p class="text-muted small mb-0" style="line-height: 1.6;">واجهة مخصصة ومستقلة لملء وتقديم بيانات المراكز الجديدة للمراجعة بدون أي تشتيت.</p>
+        </article>
+      </a>
+    </div>
+    <div class="col-md-4">
+      <a href="modules.php" class="text-decoration-none h-100 d-block">
+        <article class="app-card link-card p-4 h-100 border-top border-success border-4" style="min-height: auto;">
+          <div class="d-flex align-items-center mb-3">
+            <h4 class="h6 fw-bold text-dark mb-0">بنية النظام</h4>
+          </div>
+          <p class="text-muted small mb-0" style="line-height: 1.6;">نظرة شاملة على الوحدات المفعلة حالياً في النظام ومسارات التطوير المخطط لها مستقبلاً.</p>
+        </article>
+      </a>
+    </div>
+  </div>
+</div>
+
+<?php render_page_end(); ?>
\ No newline at end of file
diff --git a/modules.php b/modules.php
index 2440a74..d055a30 100644
--- a/modules.php
+++ b/modules.php
@@ -64,7 +64,7 @@ render_flash($flash);
           <div class="section-title mb-2">المرحلة التالية المقترحة</div>
           <p class="text-muted mb-3">بعد هذا التنظيم، الخطوة الطبيعية التالية هي بناء وحدات الطلاب والتسجيل في المراكز المعتمدة مع نفس المبدأ: صفحة مستقلة لكل وظيفة.</p>
           <div class="d-flex flex-wrap gap-2">
-            <a class="btn btn-dark btn-sm" href="admin.php">لوحة الإدارة</a>
+            <a class="btn btn-primary btn-sm" href="admin.php">لوحة الإدارة</a>
             <a class="btn btn-outline-secondary btn-sm" href="dashboard.php">لوحة القيادة</a>
             <a class="btn btn-outline-secondary btn-sm" href="application_detail.php?id=1">طلب نموذجي</a>
           </div>
diff --git a/students.php b/students.php
index 8a99f38..b86c4a4 100644
--- a/students.php
+++ b/students.php
@@ -113,7 +113,7 @@ render_flash($flash);
       <div class="app-card text-center py-5">
         <div class="empty-title mb-2">المدرسة غير موجودة</div>
         <p class="text-muted mb-3">تحقق من رابط المدرسة أو ارجع إلى قائمة المراكز المعتمدة.</p>
-        <a class="btn btn-dark" href="applications.php?status=approved">المراكز المعتمدة</a>
+        <a class="btn btn-primary" href="applications.php?status=approved">المراكز المعتمدة</a>
       </div>
     <?php elseif (!$isApprovedSchool): ?>
       <div class="page-banner mb-4 mb-lg-5">
@@ -127,7 +127,7 @@ render_flash($flash);
               <span>المدينة: <?= e((string) $application['city']) ?></span>
             </div>
             <div class="cta-stack mt-4">
-              <a class="btn btn-dark" href="<?= e($applicationDetailUrl) ?>">العودة لملف الاعتماد</a>
+              <a class="btn btn-primary" href="<?= e($applicationDetailUrl) ?>">العودة لملف الاعتماد</a>
               <a class="btn btn-outline-secondary" href="<?= e($approvedSchoolUrl) ?>">صفحة المركز</a>
             </div>
           </div>
@@ -224,7 +224,7 @@ render_flash($flash);
               <div class="d-flex gap-2">
                   <span class="header-chip"><?= e((string) $metrics['boys']) ?> طلاب / <?= e((string) $metrics['girls']) ?> طالبات</span>
                   <?php if (!$isCycleReadOnly): ?>
-                  <button type="button" class="btn btn-dark btn-sm" data-bs-toggle="modal" data-bs-target="#studentModal" onclick="resetStudentModal()">
+                  <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#studentModal" onclick="resetStudentModal()">
                      + إضافة طالب
                   </button>
                   <?php endif; ?>
@@ -300,7 +300,7 @@ render_flash($flash);
                           <strong><?= e((string) $student['guardian_name']) ?></strong>
                           <?php if (!empty($student['notes'])): ?><div class="text-muted small"><?= e((string) $student['notes']) ?></div><?php endif; ?>
                         </td>
-                        <td><a href="tel:<?= e((string) $student['guardian_phone']) ?>" class="text-decoration-none text-dark"><?= e((string) $student['guardian_phone']) ?></a></td>
+                        <td><a href="tel:<?= e((string) $student['guardian_phone']) ?>" class="text-decoration-none text-primary"><?= e((string) $student['guardian_phone']) ?></a></td>
                         <td><?= student_enrollment_status_badge((string) $student['enrollment_status']) ?></td>
                         <?php if (!$isCycleReadOnly): ?>
                         <td>
@@ -405,7 +405,7 @@ render_flash($flash);
         </div>
         <div class="modal-footer d-flex justify-content-between">
           <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">إلغاء</button>
-          <button type="submit" class="btn btn-dark">حفظ التغييرات</button>
+          <button type="submit" class="btn btn-primary">حفظ التغييرات</button>
         </div>
       </form>
     </div>
diff --git a/subjects.php b/subjects.php
index 15f375b..f3807c8 100644
--- a/subjects.php
+++ b/subjects.php
@@ -10,7 +10,7 @@ if (!is_super_admin()) {
         <div class="container-xxl">
             <h1 class="mb-3">عذراً</h1>
             <p>هذه الصفحة مخصصة للمشرف العام فقط.</p>
-            <a href="index.php" class="btn btn-dark mt-3">العودة للرئيسية</a>
+            <a href="index.php" class="btn btn-primary mt-3">العودة للرئيسية</a>
         </div>
     </section>
     <?php
@@ -108,7 +108,7 @@ render_flash($flash);
         <div class="app-card mb-4">
           <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
              <div class="section-title mb-0">إدارة المواد الدراسية</div>
-             <button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#createModal">
+             <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-1" viewBox="0 0 16 16">
                   <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                 </svg>
@@ -217,7 +217,7 @@ render_flash($flash);
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
-            <button type="submit" class="btn btn-dark">إضافة</button>
+            <button type="submit" class="btn btn-primary">إضافة</button>
           </div>
       </form>
     </div>
@@ -254,7 +254,7 @@ render_flash($flash);
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
-            <button type="submit" class="btn btn-dark">حفظ التعديلات</button>
+            <button type="submit" class="btn btn-primary">حفظ التعديلات</button>
           </div>
       </form>
     </div>
diff --git a/teachers.php b/teachers.php
index 76a040d..9cdda8d 100644
--- a/teachers.php
+++ b/teachers.php
@@ -111,7 +111,7 @@ render_flash($flash);
       <div class="app-card text-center py-5">
         <div class="empty-title mb-2">المدرسة غير موجودة</div>
         <p class="text-muted mb-3">تحقق من رابط المدرسة أو ارجع إلى قائمة المراكز المعتمدة.</p>
-        <a class="btn btn-dark" href="applications.php?status=approved">المراكز المعتمدة</a>
+        <a class="btn btn-primary" href="applications.php?status=approved">المراكز المعتمدة</a>
       </div>
     <?php elseif (!$isApprovedSchool): ?>
       <div class="page-banner mb-4 mb-lg-5">
@@ -125,7 +125,7 @@ render_flash($flash);
               <span>المدينة: <?= e((string) $application['city']) ?></span>
             </div>
             <div class="cta-stack mt-4">
-              <a class="btn btn-dark" href="<?= e($applicationDetailUrl) ?>">العودة لملف الاعتماد</a>
+              <a class="btn btn-primary" href="<?= e($applicationDetailUrl) ?>">العودة لملف الاعتماد</a>
               <a class="btn btn-outline-secondary" href="<?= e($approvedSchoolUrl) ?>">صفحة المركز</a>
             </div>
           </div>
@@ -223,7 +223,7 @@ render_flash($flash);
               <div class="d-flex gap-2">
                   <span class="header-chip"><?= e((string) $metrics['email_ready']) ?> بريد جاهز / <?= e((string) $metrics['pending']) ?> بانتظار التفعيل</span>
                   <?php if (!$isCycleReadOnly): ?>
-                  <button type="button" class="btn btn-dark btn-sm" data-bs-toggle="modal" data-bs-target="#teacherModal" onclick="resetTeacherModal()">
+                  <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#teacherModal" onclick="resetTeacherModal()">
                      + إضافة عضو للفريق
                   </button>
                   <?php endif; ?>
@@ -378,7 +378,7 @@ render_flash($flash);
         </div>
         <div class="modal-footer d-flex justify-content-between">
           <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">إلغاء</button>
-          <button type="submit" class="btn btn-dark">حفظ التغييرات</button>
+          <button type="submit" class="btn btn-primary">حفظ التغييرات</button>
         </div>
       </form>
     </div>