diff --git a/about.php b/about.php
new file mode 100644
index 0000000..50beb87
--- /dev/null
+++ b/about.php
@@ -0,0 +1,82 @@
+<?php
+require_once 'db/config.php';
+
+// Language configuration
+$lang = $_GET['lang'] ?? 'ar';
+if (!in_array($lang, ['en', 'ar'])) $lang = 'ar';
+$dir = ($lang === 'ar') ? 'rtl' : 'ltr';
+
+// UI Text
+$texts = [
+    'en' => [
+        'title' => 'About Us',
+        'subtitle' => 'Learn more about our mission, vision, and values.',
+        'lang_name' => 'العربية',
+        'lang_code' => 'ar',
+        'hero_title' => 'About Our Organization',
+        'hero_sub' => 'Dedicated to making a difference in the world.',
+        'admin_panel' => 'Admin Panel',
+        'home' => 'Home',
+        'about_us' => 'About Us',
+        'contact_us' => 'Contact Us',
+    ],
+    'ar' => [
+        'title' => 'من نحن',
+        'subtitle' => 'تعرف على المزيد حول مهمتنا ورؤيتنا وقيمنا.',
+        'lang_name' => 'English',
+        'lang_code' => 'en',
+        'hero_title' => 'حول منظمتنا',
+        'hero_sub' => 'مكرسون لإحداث فرق في العالم.',
+        'admin_panel' => 'لوحة التحكم',
+        'home' => 'الرئيسية',
+        'about_us' => 'من نحن',
+        'contact_us' => 'اتصل بنا',
+    ]
+];
+
+$t = $texts[$lang];
+
+// Database fetch
+$pdo = db();
+$profile = $pdo->query("SELECT * FROM org_profile LIMIT 1")->fetch();
+
+require_once 'includes/header.php';
+?>
+<style>
+.hero {
+    padding: 4rem 0;
+    background: #fff;
+    border-bottom: 1px solid #e5e7eb;
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: 2.5rem;
+    font-weight: 800;
+}
+</style>
+<header class="hero">
+    <div class="container">
+        <h1><?= $t['hero_title'] ?></h1>
+        <p class="lead text-muted"><?= $t['hero_sub'] ?></p>
+    </div>
+</header>
+
+<main class="container py-5">
+    <div class="row">
+        <div class="col-lg-8 mx-auto">
+            <div class="bg-white p-5 rounded-4 shadow-sm">
+                <h2 class="fw-bold mb-4">Our Mission</h2>
+                <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.</p>
+                <h2 class="fw-bold mt-5 mb-4">Our Vision</h2>
+                <p class="text-muted">Praesent vitae arcu tempor, aliquet nisl et, accumsan lectus. Curabitur vel sem sit amet nulla fermentum consequat. In eget nisl sedligula ultrices commodo. Nam vel velit nec turpis blandit malesuada. Duis ac accumsan erat. Phasellus et ex pretium, consequat lacus eget, pulvinar turpis. Integer maximus magna et, porttitor purus. Quisque non sodales sem, id eleifend tellus. Nulla ut sit amet sem non neque pellentesque.sdf</p>
+            </div>
+        </div>
+    </div>
+</main>
+
+<?php require_once 'includes/footer.php'; ?>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/admin/i18n.php b/admin/i18n.php
index d63f220..eeb10dc 100644
--- a/admin/i18n.php
+++ b/admin/i18n.php
@@ -9,7 +9,7 @@ if (isset($_GET['lang']) && in_array($_GET['lang'], ['en', 'ar'])) {
     $_SESSION['lang'] = $_GET['lang'];
 }
 
-$lang = $_SESSION['lang'] ?? 'en';
+$lang = $_SESSION['lang'] ?? 'ar';
 $is_rtl = ($lang === 'ar');
 
 $translations = [
@@ -193,6 +193,7 @@ $translations = [
         'Last 30 Days' => 'Last 30 Days',
         'Quick Links' => 'Quick Links',
         'View All' => 'View All',
+        'view_website' => 'View Website',
     ],
     'ar' => [
         'dashboard' => 'لوحة التحكم',
@@ -374,6 +375,7 @@ $translations = [
         'Last 30 Days' => 'آخر 30 يوماً',
         'Quick Links' => 'روابط سريعة',
         'View All' => 'عرض الكل',
+        'view_website' => 'عرض الموقع',
     ]
 ];
 
@@ -390,4 +392,4 @@ function get_current_lang() {
 function is_rtl() {
     global $is_rtl;
     return $is_rtl;
-}
+}
\ No newline at end of file
diff --git a/admin/sidebar.php b/admin/sidebar.php
index bab0ed8..f23d49e 100644
--- a/admin/sidebar.php
+++ b/admin/sidebar.php
@@ -44,6 +44,10 @@ $current_lang = get_current_lang();
             <i class="bi bi-journal-text me-2"></i> <?= __('audit_logs') ?>
         </a>
         
+        <a href="/index.php" class="nav-link" target="_blank">
+            <i class="bi bi-globe me-2"></i> <?= __('view_website') ?>
+        </a>
+        
         <hr>
         
         <div class="px-3 mb-3">
diff --git a/case.php b/case.php
new file mode 100644
index 0000000..725ca46
--- /dev/null
+++ b/case.php
@@ -0,0 +1,272 @@
+<?php
+require_once 'db/config.php';
+
+// Language configuration
+$lang = $_GET['lang'] ?? 'ar';
+if (!in_array($lang, ['en', 'ar'])) $lang = 'ar';
+$dir = ($lang === 'ar') ? 'rtl' : 'ltr';
+
+// UI Text (subset for this page)
+$texts = [
+    'en' => [
+        'title' => 'Case Details',
+        'raised' => 'Raised',
+        'of' => 'of',
+        'goal' => 'Goal',
+        'donate_now' => 'Donate Now',
+        'modal_title' => 'Make a Donation',
+        'modal_amount' => 'Amount (OMR)',
+        'modal_name' => 'Your Name',
+        'modal_email' => 'Your Email',
+        'modal_phone' => 'Phone Number',
+        'modal_submit' => 'Proceed to Payment',
+        'back_to_home' => 'Back to All Cases',
+        'case_not_found' => 'Case Not Found',
+        'case_not_found_desc' => 'The case you are looking for does not exist or is no longer active.',
+        'donate_type_me' => 'Donate for myself',
+        'donate_type_gift' => 'Donate as a gift',
+        'recipient_name' => 'Recipient Name',
+        'recipient_phone' => 'Recipient Phone',
+        'gift_message' => 'Gift Message',
+        'gift_notice' => 'The system will send a notification to the recipient.',
+        'home' => 'Home',
+        'about_us' => 'About Us',
+        'contact_us' => 'Contact Us',
+        'admin_panel' => 'Admin Panel',
+        'lang_name' => 'العربية',
+        'lang_code' => 'ar',
+    ],
+    'ar' => [
+        'title' => 'تفاصيل الحالة',
+        'raised' => 'تم جمع',
+        'of' => 'من',
+        'goal' => 'الهدف',
+        'donate_now' => 'تبرع الآن',
+        'modal_title' => 'تبرع الآن',
+        'modal_amount' => 'المبلغ (ريال عماني)',
+        'modal_name' => 'الاسم',
+        'modal_email' => 'البريد الإلكتروني',
+        'modal_phone' => 'رقم الهاتف',
+        'modal_submit' => 'الانتقال للدفع',
+        'back_to_home' => 'العودة إلى جميع الحالات',
+        'case_not_found' => 'الحالة غير موجودة',
+        'case_not_found_desc' => 'الحالة التي تبحث عنها غير موجودة أو لم تعد نشطة.',
+        'donate_type_me' => 'تبرع لنفسي',
+        'donate_type_gift' => 'تبرع كهدية لشخص آخر',
+        'recipient_name' => 'اسم المستلم',
+        'recipient_phone' => 'رقم هاتف المستلم',
+        'gift_message' => 'رسالة الهدية',
+        'gift_notice' => 'سيقوم النظام بإرسال إشعار إلى المستلم.',
+        'home' => 'الرئيسية',
+        'about_us' => 'من نحن',
+        'contact_us' => 'اتصل بنا',
+        'admin_panel' => 'لوحة التحكم',
+        'lang_name' => 'English',
+        'lang_code' => 'en',
+    ]
+];
+
+$t = $texts[$lang];
+
+// Database fetch
+$pdo = db();
+$profile = $pdo->query("SELECT * FROM org_profile LIMIT 1")->fetch();
+
+// Get Case ID
+$case_id = isset($_GET['id']) ? (int)$_GET['id'] : 0;
+
+if ($case_id === 0) {
+    $case = null;
+} else {
+    $stmt = $pdo->prepare("SELECT c.*, cat.name_en as cat_name_en, cat.name_ar as cat_name_ar 
+        FROM cases c 
+        LEFT JOIN categories cat ON c.category_id = cat.id
+        WHERE c.id = :id AND c.status = 'active'");
+    $stmt->execute(['id' => $case_id]);
+    $case = $stmt->fetch();
+}
+
+require_once 'includes/header.php';
+?>
+<style>
+.case-header { padding: 3rem 0; background: #fff; border-bottom: 1px solid #e5e7eb; margin-bottom: 3rem; }
+.case-title-main { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -0.025em; }
+.case-cat-main { font-size: 1rem; color: var(--primary-color); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
+.case-image-full { width: 100%; height: 400px; object-fit: cover; border-radius: 24px; margin-bottom: 2rem; }
+.progress-container { margin: 1.25rem 0; padding: 1.25rem; background: #f9fafb; border-radius: 12px; }
+.progress { height: 12px; border-radius: 9999px; background-color: #e5e7eb; margin-bottom: 0.75rem; }
+.progress-bar { background-color: var(--primary-color); }
+.progress-stats { display: flex; justify-content: space-between; font-size: 1rem; color: var(--text-muted); }
+.btn-donate { background-color: var(--primary-color); color: #fff; border: none; padding: 0.875rem 1.5rem; border-radius: 12px; font-weight: 700; width: 100%; transition: all 0.2s; }
+.btn-donate:hover { background-color: var(--primary-hover); color: #fff; transform: scale(1.02); }
+.donate-type-selector { display: flex; background: #f3f4f6; padding: 4px; border-radius: 12px; margin-bottom: 1.5rem; }
+.donate-type-btn { flex: 1; text-align: center; padding: 8px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 0.875rem; transition: all 0.2s; }
+.donate-type-btn.active { background: #fff; color: var(--primary-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+#giftFields { display: none; border: 1px solid #e5e7eb; padding: 1.25rem; border-radius: 12px; background: #f9fafb; margin-top: 1rem; }
+</style>
+
+<?php if ($case): ?>
+    <?php 
+        $pct = min(100, round(($case['raised'] / $case['goal']) * 100));
+    ?>
+    <header class="case-header">
+        <div class="container text-center">
+            <p class="case-cat-main"><?= $lang === 'en' ? ($case['cat_name_en'] ?? 'General') : ($case['cat_name_ar'] ?? 'عام') ?></p>
+            <h1 class="case-title-main"><?= $lang === 'en' ? $case['title_en'] : $case['title_ar'] ?></h1>
+        </div>
+    </header>
+
+    <main class="container">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <div class="bg-white p-4 p-md-5 rounded-4 shadow-sm">
+                    <?php if ($case['image_url']): ?>
+                        <img src="<?= htmlspecialchars($case['image_url']) ?>" class="case-image-full" alt="Case Image">
+                    <?php endif; ?>
+                    
+                    <div class="case-content-full">
+                        <p class="lead" style="white-space: pre-line;"><?= htmlspecialchars($lang === 'en' ? $case['desc_en'] : $case['desc_ar']) ?></p>
+                    </div>
+
+                    <div class="progress-container">
+                        <div class="progress">
+                            <div class="progress-bar" role="progressbar" style="width: <?= $pct ?>%" aria-valuenow="<?= $pct ?>" aria-valuemin="0" aria-valuemax="100"></div>
+                        </div>
+                        <div class="progress-stats">
+                            <span><strong><?= $t['raised'] ?>:</strong> OMR <?= number_format($case['raised']) ?></span>
+                            <span><strong><?= $t['goal'] ?>:</strong> OMR <?= number_format($case['goal']) ?></span>
+                        </div>
+                    </div>
+                    
+                    <div class="d-grid mt-4">
+                        <button class="btn btn-donate py-3 fs-5" data-bs-toggle="modal" data-bs-target="#donateModal" 
+                                data-case-id="<?= $case['id'] ?>" 
+                                data-case-title="<?= htmlspecialchars($lang === 'en' ? $case['title_en'] : $case['title_ar']) ?>">
+                            <?= $t['donate_now'] ?>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+<?php else: ?>
+    <main class="container text-center py-5">
+        <div class="bg-white p-5 rounded-4 border">
+            <i class="bi bi-x-circle d-block mb-3 fs-1 text-danger"></i>
+            <h2 class="fw-bold"><?= $t['case_not_found'] ?></h2>
+            <p class="text-muted"><?= $t['case_not_found_desc'] ?></p>
+            <a href="index.php?lang=<?= $lang ?>" class="btn btn-primary rounded-pill px-4 mt-2">
+                <?= $t['back_to_home'] ?>
+            </a>
+        </div>
+    </main>
+<?php endif; ?>
+
+
+<!-- Donate Modal -->
+<div class="modal fade" id="donateModal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content border-0 shadow-lg rounded-4">
+            <form action="checkout.php" method="POST">
+                <div class="modal-header border-0 pb-0">
+                    <h5 class="modal-title fw-bold"><?= $t['modal_title'] ?></h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body p-4">
+                    <div class="p-3 bg-light rounded-3 mb-4 border-start border-success border-4">
+                        <p id="modalCaseTitle" class="fw-bold text-success mb-0"></p>
+                    </div>
+                    
+                    <div class="donate-type-selector">
+                        <div class="donate-type-btn active" data-type="me" onclick="setDonateType('me')">
+                            <?= $t['donate_type_me'] ?>
+                        </div>
+                        <div class="donate-type-btn" data-type="gift" onclick="setDonateType('gift')">
+                            <?= $t['donate_type_gift'] ?>
+                        </div>
+                    </div>
+                    <input type="hidden" name="is_gift" id="isGiftInput" value="0">
+
+                    <input type="hidden" name="case_id" id="modalCaseId">
+                    <div class="mb-3">
+                        <label class="form-label small fw-bold text-muted"><?= $t['modal_amount'] ?></label>
+                        <div class="input-group">
+                            <span class="input-group-text bg-white border-end-0">OMR</span>
+                            <input type="number" name="amount" class="form-control border-start-0 ps-0" step="1" min="1" placeholder="10" required>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label small fw-bold text-muted"><?= $t['modal_name'] ?></label>
+                        <input type="text" name="donor_name" class="form-control" placeholder="John Doe">
+                    </div>
+                    <div class="row g-3 mb-3">
+                        <div class="col-md-6">
+                            <label class="form-label small fw-bold text-muted"><?= $t['modal_email'] ?></label>
+                            <input type="email" name="donor_email" class="form-control" placeholder="john@example.com">
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label small fw-bold text-muted"><?= $t['modal_phone'] ?></label>
+                            <input type="tel" name="donor_phone" class="form-control" placeholder="96812345678" required>
+                        </div>
+                    </div>
+                    
+                    <div id="giftFields">
+                        <div class="mb-3">
+                            <label class="form-label small fw-bold text-muted"><?= $t['recipient_name'] ?></label>
+                            <input type="text" name="gift_recipient_name" class="form-control" placeholder="Recipient Name">
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label small fw-bold text-muted"><?= $t['recipient_phone'] ?></label>
+                            <input type="tel" name="gift_recipient_phone" id="giftRecipientPhone" class="form-control" placeholder="96812345678">
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label small fw-bold text-muted"><?= $t['gift_message'] ?></label>
+                            <textarea name="gift_message" class="form-control" rows="2" placeholder="Your message here..."></textarea>
+                        </div>
+                        <div class="small text-success">
+                            <i class="bi bi-info-circle me-1"></i> <?= $t['gift_notice'] ?>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="modal-footer border-0 p-4 pt-0">
+                    <button type="submit" class="btn btn-donate py-3"><?= $t['modal_submit'] ?></button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<?php require_once 'includes/footer.php'; ?>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+    const donateModal = document.getElementById('donateModal');
+    if (donateModal) {
+        donateModal.addEventListener('show.bs.modal', event => {
+            const button = event.relatedTarget;
+            const caseId = button.getAttribute('data-case-id');
+            const caseTitle = button.getAttribute('data-case-title');
+            
+            donateModal.querySelector('#modalCaseId').value = caseId;
+            donateModal.querySelector('#modalCaseTitle').textContent = caseTitle;
+        });
+    }
+    function setDonateType(type) {
+        const isGift = type === 'gift';
+        document.getElementById('isGiftInput').value = isGift ? '1' : '0';
+        document.getElementById('giftFields').style.display = isGift ? 'block' : 'none';
+        
+        document.querySelectorAll('.donate-type-btn').forEach(btn => {
+            btn.classList.toggle('active', btn.getAttribute('data-type') === type);
+        });
+        const recipientPhone = document.getElementById('giftRecipientPhone');
+        if (isGift) {
+            recipientPhone.setAttribute('required', 'required');
+        } else {
+            recipientPhone.removeAttribute('required');
+        }
+    }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/contact.php b/contact.php
new file mode 100644
index 0000000..fef340d
--- /dev/null
+++ b/contact.php
@@ -0,0 +1,136 @@
+<?php
+require_once 'db/config.php';
+require_once 'mail/MailService.php';
+
+// Language configuration
+$lang = $_GET['lang'] ?? 'ar';
+if (!in_array($lang, ['en', 'ar'])) $lang = 'ar';
+$dir = ($lang === 'ar') ? 'rtl' : 'ltr';
+
+// UI Text
+$texts = [
+    'en' => [
+        'title' => 'Contact Us',
+        'subtitle' => 'We\'d love to hear from you!',
+        'lang_name' => 'العربية',
+        'lang_code' => 'ar',
+        'hero_title' => 'Get in Touch',
+        'hero_sub' => 'Fill out the form below to send us a message.',
+        'admin_panel' => 'Admin Panel',
+        'home' => 'Home',
+        'about_us' => 'About Us',
+        'contact_us' => 'Contact Us',
+        'your_name' => 'Your Name',
+        'your_email' => 'Your Email',
+        'your_message' => 'Your Message',
+        'send_message' => 'Send Message',
+        'message_sent' => 'Your message has been sent successfully!',
+        'message_error' => 'There was an error sending your message. Please try again later.',
+    ],
+    'ar' => [
+        'title' => 'اتصل بنا',
+        'subtitle' => 'يسعدنا أن نسمع منك!',
+        'lang_name' => 'English',
+        'lang_code' => 'en',
+        'hero_title' => 'تواصل معنا',
+        'hero_sub' => 'املأ النموذج أدناه لإرسال رسالة لنا.',
+        'admin_panel' => 'لوحة التحكم',
+        'home' => 'الرئيسية',
+        'about_us' => 'من نحن',
+        'contact_us' => 'اتصل بنا',
+        'your_name' => 'اسمك',
+        'your_email' => 'بريدك الإلكتروني',
+        'your_message' => 'رسالتك',
+        'send_message' => 'إرسال الرسالة',
+        'message_sent' => 'تم إرسال رسالتك بنجاح!',
+        'message_error' => 'حدث خطأ أثناء إرسال رسالتك. يرجى المحاولة مرة أخرى في وقت لاحق.',
+    ]
+];
+
+$t = $texts[$lang];
+
+$message_status = null;
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $name = $_POST['name'] ?? '';
+    $email = $_POST['email'] ?? '';
+    $message = $_POST['message'] ?? '';
+
+    $result = MailService::sendContactMessage($name, $email, $message);
+
+    if ($result['success']) {
+        $message_status = 'success';
+    } else {
+        $message_status = 'error';
+    }
+}
+
+// Database fetch
+$pdo = db();
+$profile = $pdo->query("SELECT * FROM org_profile LIMIT 1")->fetch();
+
+require_once 'includes/header.php';
+?>
+<style>
+.hero {
+    padding: 4rem 0;
+    background: #fff;
+    border-bottom: 1px solid #e5e7eb;
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: 2.5rem;
+    font-weight: 800;
+}
+
+.form-control:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.25rem rgba(5, 150, 105, 0.25);
+}
+</style>
+
+<header class="hero">
+    <div class="container">
+        <h1><?= $t['hero_title'] ?></h1>
+        <p class="lead text-muted"><?= $t['hero_sub'] ?></p>
+    </div>
+</header>
+
+<main class="container py-5">
+    <div class="row">
+        <div class="col-lg-8 mx-auto">
+            <div class="bg-white p-5 rounded-4 shadow-sm">
+                <?php if ($message_status === 'success'): ?>
+                    <div class="alert alert-success" role="alert">
+                        <?= $t['message_sent'] ?>
+                    </div>
+                <?php elseif ($message_status === 'error'): ?>
+                    <div class="alert alert-danger" role="alert">
+                        <?= $t['message_error'] ?>
+                    </div>
+                <?php endif; ?>
+                <form action="contact.php?lang=<?= $lang ?>" method="POST">
+                    <div class="mb-3">
+                        <label for="name" class="form-label"><?= $t['your_name'] ?></label>
+                        <input type="text" class="form-control" id="name" name="name" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="email" class="form-label"><?= $t['your_email'] ?></label>
+                        <input type="email" class="form-control" id="email" name="email" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="message" class="form-label"><?= $t['your_message'] ?></label>
+                        <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-lg px-5" style="background-color: var(--primary-color); border-color: var(--primary-color);"> <?= $t['send_message'] ?></button>
+                </form>
+            </div>
+        </div>
+    </div>
+</main>
+
+<?php require_once 'includes/footer.php'; ?>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/includes/footer.php b/includes/footer.php
new file mode 100644
index 0000000..60e702f
--- /dev/null
+++ b/includes/footer.php
@@ -0,0 +1,11 @@
+<footer class="text-center">
+    <div class="container">
+        <?php if (!empty($profile['logo_url'])):
+ ?>
+            <img src="<?= htmlspecialchars($profile['logo_url']) ?>" class="footer-logo" alt="Logo">
+        <?php endif; ?>
+        <p class="text-muted small">&copy; <?= date('Y') ?> <?= htmlspecialchars($lang === 'en' ? ($profile['name_en'] ?? 'Organization') : ($profile['name_ar'] ?? 'المؤسسة')) ?>. All rights reserved.</p>
+        <p class="text-muted small">Address, City, Country</p>
+        <p class="text-muted small">Phone: +123456789 | Email: info@example.com</p>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/includes/header.php b/includes/header.php
new file mode 100644
index 0000000..ebbddeb
--- /dev/null
+++ b/includes/header.php
@@ -0,0 +1,243 @@
+<?php
+// Project meta
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? $t['subtitle'];
+$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+?>
+<!DOCTYPE html>
+<html lang="<?= $lang ?>" dir="<?= $dir ?>">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= ($lang === 'en' ? ($profile['name_en'] ?? 'Organization') : ($profile['name_ar'] ?? 'المؤسسة')) . ' - ' . $t['title'] ?></title>
+    <?php if (!empty($profile["favicon_url"])): ?>
+    <link rel="icon" href="<?= htmlspecialchars($profile["favicon_url"]) ?>">
+    <?php endif; ?>
+    
+    <!-- Meta Tags -->
+    <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>">
+    <?php if ($projectImageUrl): ?>
+    <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>">
+    <?php endif; ?>
+
+    <!-- Fonts & CSS -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <?php if ($lang === 'en'): ?>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <?php else: ?>
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <?php endif; ?>
+    
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <?php if ($lang === 'ar'): ?>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.rtl.min.css">
+    <?php endif; ?>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    
+    <style>
+        :root {
+            --primary-color: #059669;
+            --primary-hover: #047857;
+            --bg-light: #f3f4f6;
+            --text-main: #111827;
+            --text-muted: #6b7280;
+            --font-family: <?= ($lang === 'ar') ? "'Cairo', sans-serif" : "'Inter', sans-serif" ?>;
+        }
+
+        body {
+            font-family: var(--font-family);
+            background-color: var(--bg-light);
+            color: var(--text-main);
+            margin: 0;
+            padding: 0;
+        }
+
+        /* Top Priority Bar Styles */
+        .top-priority-bar {
+            background: #1e293b;
+            color: #fff;
+            padding: 10px 0;
+            font-size: 0.875rem;
+            position: relative;
+            z-index: 1050;
+            overflow: hidden;
+        }
+
+        .priority-wrapper {
+            display: flex;
+            align-items: center;
+        }
+
+        .priority-label {
+            background: #ef4444;
+            color: #fff;
+            font-weight: 800;
+            padding: 2px 10px;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            white-space: nowrap;
+            margin-inline-end: 20px;
+            position: relative;
+            z-index: 2;
+            box-shadow: 10px 0 15px #1e293b;
+        }
+        [dir="rtl"] .priority-label {
+            box-shadow: -10px 0 15px #1e293b;
+        }
+
+        .priority-scroller-container {
+            flex: 1;
+            overflow: hidden;
+            position: relative;
+            height: 24px;
+            display: flex;
+            align-items: center;
+        }
+
+        .priority-items {
+            display: flex;
+            align-items: center;
+            gap: 60px;
+            white-space: nowrap;
+            position: absolute;
+            will-change: transform;
+            animation: marquee 30s linear infinite;
+        }
+
+        .priority-items:hover {
+            animation-play-state: paused;
+        }
+
+        @keyframes marquee {
+            0% { left: 100%; transform: translateX(0); }
+            100% { left: 0; transform: translateX(-100%); }
+        }
+
+        [dir="rtl"] .priority-items {
+            left: auto;
+            right: 100%;
+            animation: marquee-rtl 30s linear infinite;
+        }
+
+        @keyframes marquee-rtl {
+            0% { right: 100%; transform: translateX(0); }
+            100% { right: 0; transform: translateX(100%); }
+        }
+
+        .priority-item {
+            color: #e2e8f0;
+            text-decoration: none;
+            white-space: nowrap;
+            transition: color 0.2s;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+        }
+
+        .priority-item:hover {
+            color: #fff;
+        }
+
+        .priority-dot {
+            width: 6px;
+            height: 6px;
+            background: #10b981;
+            border-radius: 50%;
+            margin-inline-end: 8px;
+            display: inline-block;
+        }
+
+        .navbar {
+            background: #fff;
+            border-bottom: 1px solid #e5e7eb;
+            padding: 1rem 0;
+            z-index: 1040;
+        }
+
+        .brand-text {
+            font-weight: 700;
+            font-size: 1.25rem;
+            color: var(--text-main);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+        }
+
+        .brand-logo {
+            height: 40px;
+            margin-inline-end: 12px;
+        }
+        
+        .nav-link {
+            color: var(--text-muted);
+            font-weight: 500;
+            transition: color 0.2s;
+        }
+        
+        .nav-link:hover, .nav-link.active {
+            color: var(--primary-color);
+        }
+
+    </style>
+</head>
+<body>
+
+<!-- Top Priority Bar (Ads) -->
+<div class="top-priority-bar">
+    <div class="container">
+        <div class="priority-wrapper">
+            <span class="priority-label"><?= $t['priority_notice'] ?></span>
+            
+            <div class="priority-scroller-container">
+                <div class="priority-items">
+                    <?php if (empty($featured_cases)): ?>
+                        <div class="priority-item">
+                            <span class="priority-dot"></span>
+                            <?= $t['subtitle'] ?>
+                        </div>
+                    <?php else: ?>
+                        <?php foreach ($featured_cases as $fc): ?>
+                        <a href="case.php?id=<?= $fc['id'] ?>&lang=<?= $lang ?>" class="priority-item">
+                            <span class="priority-dot"></span>
+                            <strong>[<?= $fc['importance'] == 'top_priority' ? $t['top_priority'] : $t['urgent'] ?>]</strong> 
+                            &nbsp;<?= htmlspecialchars($lang === 'en' ? $fc['title_en'] : $fc['title_ar']) ?>
+                        </a>
+                        <?php endforeach; ?>
+                    <?php endif; ?>
+                    
+                    <div class="priority-item">
+                        <span class="priority-dot" style="background: #3b82f6;"></span>
+                        <?= $t['monthly_giving'] ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<nav class="navbar navbar-expand-lg sticky-top">
+    <div class="container">
+        <a class="brand-text" href="index.php?lang=<?= $lang ?>">
+            <?php if (!empty($profile['logo_url'])): ?>
+                <img src="<?= htmlspecialchars($profile['logo_url']) ?>" class="brand-logo" alt="Logo">
+            <?php endif; ?>
+            <?= htmlspecialchars($lang === 'en' ? ($profile['name_en'] ?? 'Organization') : ($profile['name_ar'] ?? 'المؤسسة')) ?>
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="mainNav">
+            <ul class="navbar-nav mx-auto"> 
+                <li class="nav-item"><a class="nav-link" href="index.php?lang=<?= $lang ?>"><?= $t['home'] ?></a></li>
+                <li class="nav-item"><a class="nav-link" href="about.php?lang=<?= $lang ?>"><?= $t['about_us'] ?></a></li>
+                <li class="nav-item"><a class="nav-link" href="contact.php?lang=<?= $lang ?>"><?= $t['contact_us'] ?></a></li>
+            </ul>
+            <div class="d-flex align-items-center gap-3">
+                <a href="admin/" class="text-decoration-none text-muted small d-none d-sm-block"><i class="bi bi-person-lock me-1"></i><?= $t['admin_panel'] ?></a>
+                <a href="?lang=<?= $t['lang_code'] ?>" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
+                    <i class="bi bi-translate me-1"></i><?= $t['lang_name'] ?>
+                </a>
+            </div>
+        </div>
+    </div>
+</nav>
diff --git a/index.php b/index.php
index e79e8a8..6eb59ea 100644
--- a/index.php
+++ b/index.php
@@ -2,8 +2,8 @@
 require_once 'db/config.php';
 
 // Language configuration
-$lang = $_GET['lang'] ?? 'en';
-if (!in_array($lang, ['en', 'ar'])) $lang = 'en';
+$lang = $_GET['lang'] ?? 'ar';
+if (!in_array($lang, ['en', 'ar'])) $lang = 'ar';
 $dir = ($lang === 'ar') ? 'rtl' : 'ltr';
 
 // UI Text
@@ -44,7 +44,10 @@ $texts = [
         'gift_message' => 'Gift Message',
         'gift_notice' => 'The system will send a notification to the recipient.',
         'read_more' => 'Read More',
-        'close' => 'Close'
+        'close' => 'Close',
+        'home' => 'Home',
+        'about_us' => 'About Us',
+        'contact_us' => 'Contact Us',
     ],
     'ar' => [
         'title' => 'ادعم قضية',
@@ -82,7 +85,10 @@ $texts = [
         'gift_message' => 'رسالة الهدية',
         'gift_notice' => 'سيقوم النظام بإرسال إشعار إلى المستلم.',
         'read_more' => 'اقرأ المزيد',
-        'close' => 'إغلاق'
+        'close' => 'إغلاق',
+        'home' => 'الرئيسية',
+        'about_us' => 'من نحن',
+        'contact_us' => 'اتصل بنا',
     ]
 ];
 
@@ -124,10 +130,6 @@ $stmt = $pdo->prepare($sql);
 $stmt->execute($params);
 $cases = $stmt->fetchAll();
 
-// Project meta
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? $t['subtitle'];
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-
 // Helpers for safe string operations
 function safe_strlen($text) {
     if (empty($text)) return 0;
@@ -144,487 +146,251 @@ function safe_truncate($text, $limit = 120) {
     }
     return (strlen($text) > $limit) ? substr($text, 0, $limit) . "..." : $text;
 }
+
+require_once 'includes/header.php';
 ?>
-<!DOCTYPE html>
-<html lang="<?= $lang ?>" dir="<?= $dir ?>">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><?= ($lang === 'en' ? ($profile['name_en'] ?? 'Organization') : ($profile['name_ar'] ?? 'المؤسسة')) . ' - ' . $t['title'] ?></title>
-    <?php if (!empty($profile["favicon_url"])): ?>
-    <link rel="icon" href="<?= htmlspecialchars($profile["favicon_url"]) ?>">
-    <?php endif; ?>
-    
-    <!-- Meta Tags -->
-    <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>">
-    <?php if ($projectImageUrl): ?>
-    <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>">
-    <?php endif; ?>
+<style>
+.hero {
+    padding: 4rem 0 3rem 0;
+    background: #fff;
+    border-bottom: 1px solid #e5e7eb;
+    text-align: center;
+    margin-bottom: 3rem;
+}
 
-    <!-- Fonts & CSS -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <?php if ($lang === 'en'): ?>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <?php else: ?>
-    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <?php endif; ?>
-    
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
-    <?php if ($lang === 'ar'): ?>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.rtl.min.css">
-    <?php endif; ?>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
-    
-    <style>
-        :root {
-            --primary-color: #059669;
-            --primary-hover: #047857;
-            --bg-light: #f3f4f6;
-            --text-main: #111827;
-            --text-muted: #6b7280;
-            --font-family: <?= ($lang === 'ar') ? "'Cairo', sans-serif" : "'Inter', sans-serif" ?>;
-        }
+.hero h1 {
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin-bottom: 1rem;
+    letter-spacing: -0.025em;
+}
 
-        body {
-            font-family: var(--font-family);
-            background-color: var(--bg-light);
-            color: var(--text-main);
-            margin: 0;
-            padding: 0;
-        }
+.hero p {
+    font-size: 1.125rem;
+    color: var(--text-muted);
+    max-width: 600px;
+    margin: 0 auto 2rem auto;
+}
 
-        /* Top Priority Bar Styles */
-        .top-priority-bar {
-            background: #1e293b;
-            color: #fff;
-            padding: 10px 0;
-            font-size: 0.875rem;
-            position: relative;
-            z-index: 1050;
-            overflow: hidden;
-        }
+.search-container {
+    max-width: 500px;
+    margin: 0 auto;
+}
 
-        .priority-wrapper {
-            display: flex;
-            align-items: center;
-        }
+.search-box {
+    display: flex;
+    background: #f3f4f6;
+    border-radius: 9999px;
+    padding: 6px;
+    border: 1px solid #e5e7eb;
+    transition: border-color 0.3s, background 0.3s;
+}
 
-        .priority-label {
-            background: #ef4444;
-            color: #fff;
-            font-weight: 800;
-            padding: 2px 10px;
-            border-radius: 4px;
-            font-size: 0.75rem;
-            white-space: nowrap;
-            margin-inline-end: 20px;
-            position: relative;
-            z-index: 2;
-            box-shadow: 10px 0 15px #1e293b;
-        }
-        [dir="rtl"] .priority-label {
-            box-shadow: -10px 0 15px #1e293b;
-        }
+.search-box:focus-within {
+    border-color: var(--primary-color);
+    background: #fff;
+    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
+}
 
-        .priority-scroller-container {
-            flex: 1;
-            overflow: hidden;
-            position: relative;
-            height: 24px;
-            display: flex;
-            align-items: center;
-        }
+.search-box input {
+    border: none;
+    background: transparent;
+    padding: 0.5rem 1.5rem;
+    flex-grow: 1;
+    outline: none;
+    font-size: 0.9375rem;
+}
 
-        .priority-items {
-            display: flex;
-            align-items: center;
-            gap: 60px;
-            white-space: nowrap;
-            position: absolute;
-            will-change: transform;
-            animation: marquee 30s linear infinite;
-        }
+.search-btn {
+    background: var(--primary-color);
+    color: #fff;
+    border: none;
+    border-radius: 9999px;
+    padding: 0.5rem 1.5rem;
+    font-weight: 600;
+    font-size: 0.875rem;
+    transition: background 0.2s;
+}
 
-        .priority-items:hover {
-            animation-play-state: paused;
-        }
+.search-btn:hover {
+    background: var(--primary-hover);
+}
 
-        @keyframes marquee {
-            0% { left: 100%; transform: translateX(0); }
-            100% { left: 0; transform: translateX(-100%); }
-        }
+.cat-tabs {
+    margin-bottom: 2rem;
+    display: flex;
+    gap: 0.75rem;
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+    justify-content: center;
+}
 
-        [dir="rtl"] .priority-items {
-            left: auto;
-            right: 100%;
-            animation: marquee-rtl 30s linear infinite;
-        }
+.cat-tab {
+    padding: 0.5rem 1.25rem;
+    border-radius: 9999px;
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    color: var(--text-muted);
+    text-decoration: none;
+    white-space: nowrap;
+    transition: all 0.2s;
+    font-weight: 500;
+    font-size: 0.9375rem;
+}
 
-        @keyframes marquee-rtl {
-            0% { right: 100%; transform: translateX(0); }
-            100% { right: 0; transform: translateX(100%); }
-        }
+.cat-tab:hover, .cat-tab.active {
+    background: var(--primary-color);
+    color: #fff;
+    border-color: var(--primary-color);
+}
 
-        .priority-item {
-            color: #e2e8f0;
-            text-decoration: none;
-            white-space: nowrap;
-            transition: color 0.2s;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-        }
+.case-card {
+    background: #fff;
+    border-radius: 16px;
+    overflow: hidden;
+    border: 1px solid #e5e7eb;
+    transition: transform 0.2s, box-shadow 0.2s, border-color 0.3s;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
 
-        .priority-item:hover {
-            color: #fff;
-        }
+.case-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.08);
+}
 
-        .priority-dot {
-            width: 6px;
-            height: 6px;
-            background: #10b981;
-            border-radius: 50%;
-            margin-inline-end: 8px;
-            display: inline-block;
-        }
+.case-image {
+    height: 220px;
+    width: 100%;
+    object-fit: cover;
+}
 
-        .navbar {
-            background: #fff;
-            border-bottom: 1px solid #e5e7eb;
-            padding: 1rem 0;
-            z-index: 1040;
-        }
+.importance-badge {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    padding: 0.35rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    color: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+[dir="rtl"] .importance-badge { right: auto; left: 1rem; }
 
-        .brand-text {
-            font-weight: 700;
-            font-size: 1.25rem;
-            color: var(--text-main);
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-        }
+.badge-urgent { background-color: #ef4444; }
+.badge-top_priority { background-color: #8b5cf6; }
+.badge-normal { display: none; }
 
-        .brand-logo {
-            height: 40px;
-            margin-inline-end: 12px;
-        }
+.case-content {
+    padding: 1.5rem;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
 
-        .hero {
-            padding: 4rem 0 3rem 0;
-            background: #fff;
-            border-bottom: 1px solid #e5e7eb;
-            text-align: center;
-            margin-bottom: 3rem;
-        }
+.case-cat {
+    font-size: 0.8125rem;
+    color: var(--primary-color);
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
 
-        .hero h1 {
-            font-size: 2.5rem;
-            font-weight: 800;
-            margin-bottom: 1rem;
-            letter-spacing: -0.025em;
-        }
+.case-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    color: var(--text-main);
+    line-height: 1.4;
+}
 
-        .hero p {
-            font-size: 1.125rem;
-            color: var(--text-muted);
-            max-width: 600px;
-            margin: 0 auto 2rem auto;
-        }
+.progress-container {
+    margin: 1.25rem 0;
+    padding: 1.25rem;
+    background: #f9fafb;
+    border-radius: 12px;
+}
 
-        .search-container {
-            max-width: 500px;
-            margin: 0 auto;
-        }
+.progress {
+    height: 8px;
+    border-radius: 9999px;
+    background-color: #e5e7eb;
+    margin-bottom: 0.75rem;
+}
 
-        .search-box {
-            display: flex;
-            background: #f3f4f6;
-            border-radius: 9999px;
-            padding: 6px;
-            border: 1px solid #e5e7eb;
-            transition: border-color 0.3s, background 0.3s;
-        }
+.progress-bar {
+    background-color: var(--primary-color);
+}
 
-        .search-box:focus-within {
-            border-color: var(--primary-color);
-            background: #fff;
-            box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
-        }
+.progress-stats {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+}
 
-        .search-box input {
-            border: none;
-            background: transparent;
-            padding: 0.5rem 1.5rem;
-            flex-grow: 1;
-            outline: none;
-            font-size: 0.9375rem;
-        }
+.btn-donate {
+    background-color: var(--primary-color);
+    color: #fff;
+    border: none;
+    padding: 0.875rem 1.5rem;
+    border-radius: 12px;
+    font-weight: 700;
+    width: 100%;
+    transition: all 0.2s;
+    margin-top: auto;
+}
 
-        .search-btn {
-            background: var(--primary-color);
-            color: #fff;
-            border: none;
-            border-radius: 9999px;
-            padding: 0.5rem 1.5rem;
-            font-weight: 600;
-            font-size: 0.875rem;
-            transition: background 0.2s;
-        }
+.btn-donate:hover {
+    background-color: var(--primary-hover);
+    color: #fff;
+    transform: scale(1.02);
+}
 
-        .search-btn:hover {
-            background: var(--primary-hover);
-        }
+[dir="rtl"] .hero h1 {
+    letter-spacing: 0;
+}
 
-        .cat-tabs {
-            margin-bottom: 2rem;
-            display: flex;
-            gap: 0.75rem;
-            overflow-x: auto;
-            padding-bottom: 0.5rem;
-            justify-content: center;
-        }
+.donate-type-selector {
+    display: flex;
+    background: #f3f4f6;
+    padding: 4px;
+    border-radius: 12px;
+    margin-bottom: 1.5rem;
+}
 
-        .cat-tab {
-            padding: 0.5rem 1.25rem;
-            border-radius: 9999px;
-            background: #fff;
-            border: 1px solid #e5e7eb;
-            color: var(--text-muted);
-            text-decoration: none;
-            white-space: nowrap;
-            transition: all 0.2s;
-            font-weight: 500;
-            font-size: 0.9375rem;
-        }
+.donate-type-btn {
+    flex: 1;
+    text-align: center;
+    padding: 8px;
+    border-radius: 10px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 0.875rem;
+    transition: all 0.2s;
+}
 
-        .cat-tab:hover, .cat-tab.active {
-            background: var(--primary-color);
-            color: #fff;
-            border-color: var(--primary-color);
-        }
+.donate-type-btn.active {
+    background: #fff;
+    color: var(--primary-color);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
 
-        .case-card {
-            background: #fff;
-            border-radius: 16px;
-            overflow: hidden;
-            border: 1px solid #e5e7eb;
-            transition: transform 0.2s, box-shadow 0.2s, border-color 0.3s;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            position: relative;
-        }
-
-        .case-card:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.08);
-        }
-
-        .case-image {
-            height: 220px;
-            width: 100%;
-            object-fit: cover;
-        }
-
-        .importance-badge {
-            position: absolute;
-            top: 1rem;
-            right: 1rem;
-            padding: 0.35rem 0.75rem;
-            border-radius: 9999px;
-            font-size: 0.75rem;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.025em;
-            color: #fff;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        [dir="rtl"] .importance-badge { right: auto; left: 1rem; }
-
-        .badge-urgent { background-color: #ef4444; }
-        .badge-top_priority { background-color: #8b5cf6; }
-        .badge-normal { display: none; }
-
-        .case-content {
-            padding: 1.5rem;
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .case-cat {
-            font-size: 0.8125rem;
-            color: var(--primary-color);
-            font-weight: 700;
-            margin-bottom: 0.5rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-
-        .case-title {
-            font-size: 1.25rem;
-            font-weight: 700;
-            margin-bottom: 0.75rem;
-            color: var(--text-main);
-            line-height: 1.4;
-        }
-
-        .progress-container {
-            margin: 1.25rem 0;
-            padding: 1.25rem;
-            background: #f9fafb;
-            border-radius: 12px;
-        }
-
-        .progress {
-            height: 8px;
-            border-radius: 9999px;
-            background-color: #e5e7eb;
-            margin-bottom: 0.75rem;
-        }
-
-        .progress-bar {
-            background-color: var(--primary-color);
-        }
-
-        .progress-stats {
-            display: flex;
-            justify-content: space-between;
-            font-size: 0.8125rem;
-            color: var(--text-muted);
-        }
-
-        .btn-donate {
-            background-color: var(--primary-color);
-            color: #fff;
-            border: none;
-            padding: 0.875rem 1.5rem;
-            border-radius: 12px;
-            font-weight: 700;
-            width: 100%;
-            transition: all 0.2s;
-            margin-top: auto;
-        }
-
-        .btn-donate:hover {
-            background-color: var(--primary-hover);
-            color: #fff;
-            transform: scale(1.02);
-        }
-
-        footer {
-            background: #fff;
-            border-top: 1px solid #e5e7eb;
-            padding: 4rem 0;
-            margin-top: 5rem;
-        }
-
-        .footer-logo {
-            height: 30px;
-            margin-bottom: 1rem;
-        }
-
-        /* RTL Adjustments */
-        [dir="rtl"] .hero h1 {
-            letter-spacing: 0;
-        }
-
-        .donate-type-selector {
-            display: flex;
-            background: #f3f4f6;
-            padding: 4px;
-            border-radius: 12px;
-            margin-bottom: 1.5rem;
-        }
-
-        .donate-type-btn {
-            flex: 1;
-            text-align: center;
-            padding: 8px;
-            border-radius: 10px;
-            cursor: pointer;
-            font-weight: 600;
-            font-size: 0.875rem;
-            transition: all 0.2s;
-        }
-
-        .donate-type-btn.active {
-            background: #fff;
-            color: var(--primary-color);
-            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-        }
-
-        #giftFields {
-            display: none;
-            border: 1px solid #e5e7eb;
-            padding: 1.25rem;
-            border-radius: 12px;
-            background: #f9fafb;
-            margin-top: 1rem;
-        }
-
-        .read-more-btn {
-            font-size: 0.8125rem;
-            cursor: pointer;
-            transition: opacity 0.2s;
-        }
-        .read-more-btn:hover {
-            opacity: 0.8;
-        }
-    </style>
-</head>
-<body>
-
-<!-- Top Priority Bar (Ads) -->
-<div class="top-priority-bar">
-    <div class="container">
-        <div class="priority-wrapper">
-            <span class="priority-label"><?= $t['priority_notice'] ?></span>
-            
-            <div class="priority-scroller-container">
-                <div class="priority-items">
-                    <?php if (empty($featured_cases)): ?>
-                        <div class="priority-item">
-                            <span class="priority-dot"></span>
-                            <?= $t['subtitle'] ?>
-                        </div>
-                    <?php else: ?>
-                        <?php foreach ($featured_cases as $fc): ?>
-                        <div class="priority-item" onclick="highlightCase(<?= $fc['id'] ?>)">
-                            <span class="priority-dot"></span>
-                            <strong>[<?= $fc['importance'] == 'top_priority' ? $t['top_priority'] : $t['urgent'] ?>]</strong> 
-                            &nbsp;<?= htmlspecialchars($lang === 'en' ? $fc['title_en'] : $fc['title_ar']) ?>
-                        </div>
-                        <?php endforeach; ?>
-                    <?php endif; ?>
-                    
-                    <div class="priority-item">
-                        <span class="priority-dot" style="background: #3b82f6;"></span>
-                        <?= $t['monthly_giving'] ?>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<nav class="navbar sticky-top">
-    <div class="container">
-        <a class="brand-text" href="index.php?lang=<?= $lang ?>">
-            <?php if (!empty($profile['logo_url'])): ?>
-                <img src="<?= htmlspecialchars($profile['logo_url']) ?>" class="brand-logo" alt="Logo">
-            <?php endif; ?>
-            <?= htmlspecialchars($lang === 'en' ? ($profile['name_en'] ?? 'Organization') : ($profile['name_ar'] ?? 'المؤسسة')) ?>
-        </a>
-        <div class="d-flex align-items-center gap-3">
-            <a href="admin/" class="text-decoration-none text-muted small d-none d-sm-block"><i class="bi bi-person-lock me-1"></i><?= $t['admin_panel'] ?></a>
-            <a href="?lang=<?= $t['lang_code'] ?>&cat=<?= $selected_cat ?>&search=<?= urlencode($search_query) ?>" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
-                <i class="bi bi-translate me-1"></i><?= $t['lang_name'] ?>
-            </a>
-        </div>
-    </div>
-</nav>
+#giftFields {
+    display: none;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    border-radius: 12px;
+    background: #f9fafb;
+    margin-top: 1rem;
+}
+</style>
 
 <header class="hero">
     <div class="container">
@@ -697,18 +463,13 @@ function safe_truncate($text, $limit = 120) {
 
                 <div class="case-content">
                     <span class="case-cat"><?= $lang === 'en' ? ($case['cat_name_en'] ?? 'General') : ($case['cat_name_ar'] ?? 'عام') ?></span>
-                    <h3 class="case-title"><?= $lang === 'en' ? $case['title_en'] : $case['title_ar'] ?></h3>
+                    <h3 class="case-title">
+                        <a href="case.php?id=<?= $case['id'] ?>&lang=<?= $lang ?>" class="text-decoration-none" style="color: inherit;">
+                            <?= $lang === 'en' ? $case['title_en'] : $case['title_ar'] ?>
+                        </a>
+                    </h3>
                     <p class="text-muted small mb-0">
                         <?= htmlspecialchars($truncated_desc) ?>
-                        <?php if ($is_long): ?>
-                            <span class="text-primary fw-bold read-more-btn" 
-                                  data-bs-toggle="modal" 
-                                  data-bs-target="#readMoreModal" 
-                                  data-title="<?= htmlspecialchars($lang === 'en' ? $case['title_en'] : $case['title_ar']) ?>"
-                                  data-full-text="<?= htmlspecialchars($full_desc) ?>">
-                                <?= $t['read_more'] ?>
-                            </span>
-                        <?php endif; ?>
                     </p>
                     
                     <div class="progress-container">
@@ -733,24 +494,6 @@ function safe_truncate($text, $limit = 120) {
     </div>
 </main>
 
-<!-- Read More Modal -->
-<div class="modal fade" id="readMoreModal" tabindex="-1">
-    <div class="modal-dialog modal-dialog-centered modal-lg">
-        <div class="modal-content border-0 shadow-lg rounded-4">
-            <div class="modal-header border-0 pb-0">
-                <h5 class="modal-title fw-bold" id="readMoreModalTitle"></h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-            </div>
-            <div class="modal-body p-4">
-                <div id="readMoreModalContent" class="text-muted" style="white-space: pre-line; line-height: 1.6;"></div>
-            </div>
-            <div class="modal-footer border-0 p-4 pt-0">
-                <button type="button" class="btn btn-secondary rounded-pill px-4" data-bs-dismiss="modal"><?= $t['close'] ?></button>
-            </div>
-        </div>
-    </div>
-</div>
-
 <!-- Donate Modal -->
 <div class="modal fade" id="donateModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
@@ -827,14 +570,7 @@ function safe_truncate($text, $limit = 120) {
     </div>
 </div>
 
-<footer class="text-center">
-    <div class="container">
-        <?php if (!empty($profile['logo_url'])): ?>
-            <img src="<?= htmlspecialchars($profile['logo_url']) ?>" class="footer-logo" alt="Logo">
-        <?php endif; ?>
-        <p class="text-muted small mb-0">&copy; <?= date('Y') ?> <?= htmlspecialchars($lang === 'en' ? ($profile['name_en'] ?? 'Organization') : ($profile['name_ar'] ?? 'المؤسسة')) ?>. All rights reserved.</p>
-    </div>
-</footer>
+<?php require_once 'includes/footer.php'; ?>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 <script>
@@ -850,18 +586,6 @@ function safe_truncate($text, $limit = 120) {
         });
     }
 
-    const readMoreModal = document.getElementById('readMoreModal');
-    if (readMoreModal) {
-        readMoreModal.addEventListener('show.bs.modal', event => {
-            const button = event.relatedTarget;
-            const title = button.getAttribute('data-title');
-            const fullText = button.getAttribute('data-full-text');
-            
-            readMoreModal.querySelector('#readMoreModalTitle').textContent = title;
-            readMoreModal.querySelector('#readMoreModalContent').textContent = fullText;
-        });
-    }
-
     function setDonateType(type) {
         const isGift = type === 'gift';
         document.getElementById('isGiftInput').value = isGift ? '1' : '0';