diff --git a/NorahUniversity/__pycache__/settings.cpython-312.pyc b/NorahUniversity/__pycache__/settings.cpython-312.pyc
index 668c15d..7901847 100644
Binary files a/NorahUniversity/__pycache__/settings.cpython-312.pyc and b/NorahUniversity/__pycache__/settings.cpython-312.pyc differ
diff --git a/recruitment/__pycache__/forms.cpython-312.pyc b/recruitment/__pycache__/forms.cpython-312.pyc
index 1ae9473..cea0bd5 100644
Binary files a/recruitment/__pycache__/forms.cpython-312.pyc and b/recruitment/__pycache__/forms.cpython-312.pyc differ
diff --git a/recruitment/__pycache__/models.cpython-312.pyc b/recruitment/__pycache__/models.cpython-312.pyc
index 053cd40..fa57734 100644
Binary files a/recruitment/__pycache__/models.cpython-312.pyc and b/recruitment/__pycache__/models.cpython-312.pyc differ
diff --git a/recruitment/__pycache__/urls.cpython-312.pyc b/recruitment/__pycache__/urls.cpython-312.pyc
index 7b66768..0c55bfb 100644
Binary files a/recruitment/__pycache__/urls.cpython-312.pyc and b/recruitment/__pycache__/urls.cpython-312.pyc differ
diff --git a/recruitment/__pycache__/utils.cpython-312.pyc b/recruitment/__pycache__/utils.cpython-312.pyc
index 9bbe4cd..b9c315a 100644
Binary files a/recruitment/__pycache__/utils.cpython-312.pyc and b/recruitment/__pycache__/utils.cpython-312.pyc differ
diff --git a/recruitment/__pycache__/views.cpython-312.pyc b/recruitment/__pycache__/views.cpython-312.pyc
index f32524d..41776d0 100644
Binary files a/recruitment/__pycache__/views.cpython-312.pyc and b/recruitment/__pycache__/views.cpython-312.pyc differ
diff --git a/recruitment/forms.py b/recruitment/forms.py
index 9c3c193..30f1ca9 100644
--- a/recruitment/forms.py
+++ b/recruitment/forms.py
@@ -5,9 +5,11 @@ from django.forms.formsets import formset_factory
 from django.utils.translation import gettext_lazy as _
 from crispy_forms.helper import FormHelper
 from crispy_forms.layout import Layout, Submit, Row, Column, Field, Div
+from django.contrib.auth.models import User
 from .models import (
     ZoomMeeting, Candidate,TrainingMaterial,JobPosting,
-    FormTemplate,InterviewSchedule,BreakTime,JobPostingImage
+    FormTemplate,InterviewSchedule,BreakTime,JobPostingImage,
+    Profile
 )
 # from django_summernote.widgets import SummernoteWidget
 from django_ckeditor_5.widgets import CKEditor5Widget
@@ -505,4 +507,16 @@ class ScheduleInterviewForCandiateForm(forms.ModelForm):
             'end_time': forms.TimeInput(attrs={'type': 'time', 'class': 'form-control'}),
             'interview_duration': forms.NumberInput(attrs={'class': 'form-control'}),
             'buffer_time': forms.NumberInput(attrs={'class': 'form-control'}),
-        }
\ No newline at end of file
+        }
+
+class ProfileImageUploadForm(forms.ModelForm):
+    class Meta:
+        model=Profile
+        fields=['profile_image']
+
+
+
+# class UserEditForms(forms.ModelForm):
+#         class Meta:
+#             model = User
+#             fields = ['first_name', 'last_name']
\ No newline at end of file
diff --git a/recruitment/models.py b/recruitment/models.py
index be2c445..d204f3e 100644
--- a/recruitment/models.py
+++ b/recruitment/models.py
@@ -10,6 +10,7 @@ from django_countries.fields import CountryField
 from django.urls import reverse
 # from ckeditor.fields import RichTextField
 from django_ckeditor_5.fields import CKEditor5Field
+from django.utils.html import strip_tags
 
 
 
@@ -246,6 +247,43 @@ class JobPosting(Base):
             "form_wizard", kwargs={"slug": self.form_template.slug}
         )
         self.save()
+        
+    def _check_content(self, field_value):
+        """Helper to check if a field contains meaningful content."""
+        if not field_value:
+            return False
+
+        # 1. Replace the common HTML non-breaking space entity with a standard space.
+        content = field_value.replace(' ', ' ')
+        
+        # 2. Remove all HTML tags (leaving only text and remaining spaces).
+        stripped = strip_tags(content)
+        
+        # 3. Use .strip() to remove ALL leading/trailing whitespace, including the ones from step 1.
+        final_content = stripped.strip()
+        
+        # Return True if any content remains after stripping tags and spaces.
+        return bool(final_content)
+
+
+    @property
+    def has_description_content(self):
+        """Returns True if the description field has meaningful content."""
+        return self._check_content(self.description)
+
+    @property
+    def has_qualifications_content(self):
+        """Returns True if the qualifications field has meaningful content."""
+        return self._check_content(self.qualifications)
+    
+    # Add similar properties for benefits and application_instructions
+    @property
+    def has_benefits_content(self):
+        return self._check_content(self.benefits)
+
+    @property
+    def has_application_instructions_content(self):
+        return self._check_content(self.application_instructions)
 
 
 class JobPostingImage(models.Model):
diff --git a/recruitment/urls.py b/recruitment/urls.py
index 4aefef5..4bc00ac 100644
--- a/recruitment/urls.py
+++ b/recruitment/urls.py
@@ -107,5 +107,7 @@ urlpatterns = [
 
 
     # users urls
-    path('user/<int:pk>',views.user_detail,name='user_detail')
+    path('user/<int:pk>',views.user_detail,name='user_detail'),
+    path('user/user_profile_image_update/<int:pk>',views.user_profile_image_update,name='user_profile_image_update'),
+
 ]
diff --git a/recruitment/views.py b/recruitment/views.py
index 58b4be2..68d11b1 100644
--- a/recruitment/views.py
+++ b/recruitment/views.py
@@ -19,7 +19,9 @@ from .forms import (
     FormTemplateForm,
     InterviewScheduleForm,JobPostingStatusForm,
     BreakTimeFormSet,
-    JobPostingImageForm
+    JobPostingImageForm,
+    ProfileImageUploadForm,
+  
 )
 from rest_framework import viewsets
 from django.contrib import messages
@@ -51,7 +53,8 @@ from .models import (
     ZoomMeeting,
     Candidate,
     JobPosting,
-    ScheduledInterview
+    ScheduledInterview,
+    JobPostingImage
 )
 import logging
 from datastar_py.django import (
@@ -316,7 +319,7 @@ def job_detail(request, slug):
 
 
     status_form = JobPostingStatusForm(instance=job)
-    image_upload_form=JobPostingImageForm(instance=job)
+    image_upload_form=JobPostingImageForm(instance=job.post_images)
 
 
 
@@ -334,6 +337,7 @@ def job_detail(request, slug):
 
             return redirect('job_detail', slug=slug)
         else:
+            
 
             messages.error(request, "Failed to update status due to validation errors.")
 
@@ -355,19 +359,32 @@ def job_detail(request, slug):
 def job_image_upload(request, slug):
     #only for handling the post request
     job=get_object_or_404(JobPosting,slug=slug)
-    if request.method=='POST':
-        image_upload_form=JobPostingImageForm(request.POST,request.FILES)
+    try:
+        instance = JobPostingImage.objects.get(job=job)
+    except JobPostingImage.DoesNotExist:
+        # If it doesn't exist, create a new instance placeholder
+        instance = None
+        
+    if request.method == 'POST':
+        # Pass the existing instance to the form if it exists
+        image_upload_form = JobPostingImageForm(request.POST, request.FILES, instance=instance)
+        
         if image_upload_form.is_valid():
-            image_upload_form = image_upload_form.save(commit=False)
-
-            image_upload_form.job = job
-            image_upload_form.save()
-            messages.success(request, f"Image uploaded successfully for {job.title}.")
-            return redirect('job_detail', slug=job.slug)
+            
+            # If creating a new one (instance is None), set the job link manually
+            if instance is None:
+                image_instance = image_upload_form.save(commit=False)
+                image_instance.job = job
+                image_instance.save()
+                messages.success(request, f"Image uploaded successfully for {job.title}.")
+            else:
+                # If updating, the form will update the instance passed to it
+                image_upload_form.save()
+                messages.success(request, f"Image updated successfully for {job.title}.")
+    
         else:
-
+            
             messages.error(request, "Image upload failed: Please ensure a valid image file was selected.")
-
             return redirect('job_detail', slug=job.slug)
     return redirect('job_detail', slug=job.slug)
 
@@ -387,7 +404,7 @@ def kaauh_career(request):
 # job detail facing the candidate:
 def job_detail_candidate(request, slug):
     job = get_object_or_404(JobPosting, slug=slug)
-    return render(request, "jobs/job_detail_candidate.html", {"job": job})
+    return render(request, "forms/job_detail_candidate.html", {"job": job})
 
 
 def post_to_linkedin(request, slug):
@@ -2337,6 +2354,43 @@ def schedule_meeting_for_candidate(request, slug, candidate_pk):
     
 
 
-def user_detail(requests,pk):
-        user=get_object_or_404(User,pk=pk)
-        return render(requests,'user/profile.html')
+def user_profile_image_update(request, pk):
+    user = get_object_or_404(User, pk=pk)
+
+    if request.method == 'POST':
+        profile_form = ProfileImageUploadForm(request.POST, request.FILES, instance=user.profile) 
+        if profile_form.is_valid():
+            profile_form.save()
+            messages.success(request, 'Image uploaded successfully')
+            return redirect('user_detail', pk=user.pk) 
+        else:
+            messages.error(request, 'An error occurred while uploading the image')
+    else:
+        profile_form = ProfileImageUploadForm(instance=user.profile) 
+
+    context = {
+        'profile_form': profile_form,
+        'user': user,
+    }
+    return render(request, 'user/profile.html', context)
+
+
+
+def user_detail(request, pk):
+    user = get_object_or_404(User, pk=pk)
+    profile_form = ProfileImageUploadForm(instance=user.profile)
+    if request.method == 'POST':
+        first_name=request.POST.get('first_name')
+        last_name=request.POST.get('last_name')
+        if first_name:
+            user.first_name=first_name
+        if last_name:
+            user.last_name=last_name
+        user.save()
+    context = {
+       
+        'user': user,
+        'profile_form':profile_form
+       
+    }
+    return render(request, 'user/profile.html', context)
diff --git a/static/css/style.css b/static/css/style.css
deleted file mode 100644
index 24bdb3f..0000000
--- a/static/css/style.css
+++ /dev/null
@@ -1,947 +0,0 @@
-
-/* Custom CSS for NorahUniversity ATS */
-/* Keep only essential custom styles that Bootstrap doesn't handle */
-
-/* Primary Brand Color */
-:root {
-    --primary-color: #1b8354;
-    --primary-hover: #155f3e;
-}
-
-/* Header and Navigation */
-.header {
-    background-color: white !important;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
-    border-bottom: 1px solid #e0e0e0 !important;
-}
-
-.navbar {
-    background-color: white !important;
-    border-bottom: 1px solid #e0e0e0 !important;
-}
-
-.nav-link.active {
-    background-color: var(--primary-color) !important;
-    color: white !important;
-}
-
-.nav-link:hover {
-    background-color: var(--primary-color) !important;
-    color: white !important;
-}
-
-.logo {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--primary-color) !important;
-}
-
-/* Buttons - Override Bootstrap primary color */
-.btn-primary {
-    background-color: var(--primary-color) !important;
-    border-color: var(--primary-color) !important;
-}
-
-.btn-primary:hover {
-    background-color: var(--primary-hover) !important;
-    border-color: var(--primary-hover) !important;
-}
-
-.btn-outline-primary {
-    border-color: var(--primary-color) !important;
-    color: var(--primary-color) !important;
-}
-
-.btn-outline-primary:hover {
-    background-color: var(--primary-color) !important;
-    border-color: var(--primary-color) !important;
-    color: white !important;
-}
-
-/* Cards */
-.card {
-    border: 1px solid #e0e0e0 !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
-}
-
-.card-header {
-    border-bottom: 1px solid #e0e0e0 !important;
-    background-color: white !important;
-}
-
-/* Table Improvements */
-.table-hover tbody tr:hover {
-    background-color: rgba(27, 131, 84, 0.05) !important;
-}
-
-/* Custom Badge Colors */
-.badge.bg-success {
-    background-color: #28a745 !important;
-}
-
-.badge.bg-warning {
-    background-color: #ffc107 !important;
-}
-
-/* Form Improvements */
-.form-control:focus {
-    border-color: var(--primary-color) !important;
-    box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.25) !important;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .nav-list {
-        flex-direction: column;
-    }
-
-    .nav-item {
-        margin: 0;
-    }
-}
-
-/* Utility classes */
-.text-primary-custom {
-    color: var(--primary-color) !important;
-}
-
-.bg-primary-custom {
-    background-color: var(--primary-color) !important;
-}
-
-.border-primary-custom {
-    border-color: var(--primary-color) !important;
-}
-
-/* Loading states */
-.loading {
-    opacity: 0.6;
-    pointer-events: none;
-}
-
-/* Icon Styling */
-.heroicon {
-    width: 1rem;
-    height: 1rem;
-    margin-right: 0.5rem;
-    vertical-align: middle;
-    flex-shrink: 0;
-}
-
-.size-6 {
-    width: 1.5rem !important;
-    height: 1.5rem !important;
-}
-
-/* Responsive icon sizing */
-.icon-sm {
-    width: 0.875rem !important;
-    height: 0.875rem !important;
-    margin-right: 0.375rem !important;
-}
-
-.icon-md {
-    width: 1.125rem !important;
-    height: 1.125rem !important;
-    margin-right: 0.625rem !important;
-}
-
-.icon-lg {
-    width: 1.5rem !important;
-    height: 1.5rem !important;
-    margin-right: 0.75rem !important;
-}
-
-.icon-xl {
-    width: 2rem !important;
-    height: 2rem !important;
-    margin-right: 1rem !important;
-}
-
-/* Context-specific icon adjustments */
-.btn-sm .heroicon,
-.btn-sm .size-6,
-.btn-sm .icon-md {
-    width: 0.875rem !important;
-    height: 0.875rem !important;
-    margin-right: 0.375rem !important;
-}
-
-.nav-link .heroicon,
-.nav-link .size-6 {
-    width: 1.25rem !important;
-    height: 1.25rem !important;
-    margin-right: 0.5rem !important;
-}
-
-.card-header .heroicon,
-.card-header .size-6 {
-    width: 1.375rem !important;
-    height: 1.375rem !important;
-    margin-right: 0.625rem !important;
-}
-
-/* Print styles */
-@media print {
-    .navbar,
-    .header,
-    .btn,
-    .pagination {
-        display: none !important;
-    }
-
-    .card {
-        box-shadow: none !important;
-        border: 1px solid #ccc !important;
-    }
-}
-
-/* Responsive adjustments for icons */
-@media (max-width: 768px) {
-    .nav-link .heroicon,
-    .nav-link .size-6 {
-        width: 1rem !important;
-        height: 1rem !important;
-        margin-right: 0.375rem !important;
-    }
-
-    .card-header .heroicon,
-    .card-header .size-6 {
-        width: 1.125rem !important;
-        height: 1.125rem !important;
-        margin-right: 0.5rem !important;
-    }
-}
-
-/* Header and Search Enhancements */
-.card-header {
-    background-color: white !important;
-    border-bottom: 1px solid #e0e0e0 !important;
-    padding: 1.25rem 1.5rem !important;
-}
-
-.card-header h1,
-.card-header h2,
-.card-header h3 {
-    margin-bottom: 0 !important;
-    font-weight: 600 !important;
-}
-
-.card-header h1.h3,
-.card-header h2.h3,
-.card-header h3.h3 {
-    font-size: 1.25rem !important;
-}
-
-/* Search Form Enhancements */
-.search-form-container {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex-wrap: wrap;
-}
-
-.input-group {
-    flex: 1;
-    min-width: 250px;
-}
-
-.input-group-text {
-    background-color: #f8f9fa !important;
-    border: 1px solid #ced4da !important;
-    /* border-right: none !important; */
-    color: #495057 !important;
-    transition: all 0.2s ease !important;
-}
-
-.input-group-text:hover {
-    background-color: #e9ecef !important;
-}
-
-.input-group-text .heroicon {
-    width: 1rem !important;
-    height: 1rem !important;
-    margin-right: 0 !important;
-}
-
-
-.form-control:focus {
-    border-color: var(--primary-color) !important;
-    box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.15) !important;
-}
-
-.form-control:focus + .input-group-text {
-    border-color: var(--primary-color) !important;
-    background-color: rgba(27, 131, 84, 0.05) !important;
-}
-
-/* Button Group Enhancements */
-.d-flex.gap-2 .btn {
-    white-space: nowrap !important;
-    transition: all 0.2s ease !important;
-}
-
-.d-flex.gap-2 .btn:hover {
-    transform: translateY(-1px) !important;
-}
-
-.d-flex.gap-2 .btn svg {
-    margin-right: 0.375rem !important;
-}
-
-/* Responsive Header Adjustments */
-@media (max-width: 768px) {
-    .card-header {
-        padding: 1rem 1.25rem !important;
-    }
-
-    .card-header h1.h3,
-    .card-header h2.h3,
-    .card-header h3.h3 {
-        font-size: 1.125rem !important;
-    }
-
-    .input-group {
-        min-width: 200px !important;
-        max-width: 100% !important;
-    }
-
-    .d-flex.gap-2 {
-        flex-wrap: wrap !important;
-        gap: 0.5rem !important;
-    }
-
-    .d-flex.gap-2 .btn {
-        flex: 1 !important;
-        min-width: 120px !important;
-    }
-}
-
-@media (max-width: 576px) {
-    .card-header {
-        padding: 0.875rem 1rem !important;
-    }
-
-    .input-group {
-        min-width: 100% !important;
-    }
-
-    .d-flex.gap-2 .btn {
-        font-size: 0.875rem !important;
-        padding: 0.375rem 0.75rem !important;
-    }
-}
-
-/* Search Input Placeholder */
-.form-control::placeholder {
-    color: #6c757d !important;
-    opacity: 0.7 !important;
-}
-
-/* Enhanced Focus States */
-.form-control:focus::placeholder {
-    opacity: 1 !important;
-}
-
-/* Detail Page Enhancements */
-.detail-page-header {
-    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(27, 131, 84, 0.1) 100%);
-    border-bottom: 3px solid var(--primary-color) !important;
-}
-
-.detail-page-header h1 {
-    color: var(--primary-color) !important;
-}
-
-/* Information Cards Enhancement */
-.info-card {
-    background: #f8f9fa;
-    border-left: 4px solid var(--primary-color);
-    border-radius: 0.375rem;
-    padding: 1rem;
-    margin-bottom: 1rem;
-    transition: all 0.3s ease;
-}
-
-.info-card:hover {
-    background: #e9ecef;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.info-card .info-label {
-    font-size: 0.875rem;
-    color: #6c757d;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    font-weight: 600;
-    margin-bottom: 0.25rem;
-}
-
-.info-card .info-value {
-    font-size: 1rem;
-    color: #212529;
-    font-weight: 500;
-}
-
-/* Action Cards Enhancement */
-.action-card {
-    text-align: center;
-    padding: 2rem;
-    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-    border-radius: 0.75rem;
-    transition: all 0.3s ease;
-}
-
-.action-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
-}
-
-/* Resume File Display */
-.resume-file {
-    background: #f8f9fa;
-    border: 1px solid #dee2e6;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    transition: all 0.2s ease;
-}
-
-.resume-file:hover {
-    background: #e9ecef;
-    border-color: var(--primary-color);
-}
-
-.resume-file .file-name {
-    font-weight: 600;
-    color: #495057;
-    margin-bottom: 0.25rem;
-}
-
-.resume-file .file-info {
-    font-size: 0.875rem;
-    color: #6c757d;
-}
-
-/* Parsed Data Grid Enhancement */
-.parsed-data-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1rem;
-    margin-top: 1rem;
-}
-
-.parsed-data-item {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    transition: all 0.2s ease;
-}
-
-.parsed-data-item:hover {
-    border-color: var(--primary-color);
-    box-shadow: 0 2px 8px rgba(27, 131, 84, 0.1);
-}
-
-.parsed-data-item .data-key {
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    color: var(--primary-color);
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    margin-bottom: 0.5rem;
-}
-
-.parsed-data-item .data-value {
-    font-size: 0.875rem;
-    color: #495057;
-    line-height: 1.4;
-}
-
-/* Status Badge Enhancement */
-.status-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.375rem 0.75rem;
-    border-radius: 2rem;
-    font-size: 0.875rem;
-    font-weight: 600;
-    transition: all 0.2s ease;
-}
-
-.status-badge .heroicon {
-    width: 1rem !important;
-    height: 1rem !important;
-}
-
-/* Contact Information Enhancement */
-.contact-info-item {
-    padding: 0.75rem 1rem;
-    margin-bottom: 0.5rem;
-    background: white;
-    border-radius: 0.5rem;
-    border: 1px solid #e0e0e0;
-    transition: all 0.2s ease;
-}
-
-.contact-info-item:hover {
-    background: #f8f9fa;
-    border-color: var(--primary-color);
-    box-shadow: 0 2px 8px rgba(27, 131, 84, 0.1);
-}
-
-.contact-info-item .contact-label {
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    color: #6c757d;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-}
-
-.contact-info-item .contact-value {
-    font-size: 1rem;
-    color: #212529;
-    font-weight: 500;
-    margin-top: 0.125rem;
-}
-
-/* Responsive Detail Page Adjustments */
-@media (max-width: 768px) {
-    .detail-page-header {
-        background: linear-gradient(135deg, var(--primary-color) 0%, rgba(27, 131, 84, 0.05) 100%);
-        border-bottom: 2px solid var(--primary-color);
-    }
-
-    .detail-page-header h1 {
-        font-size: 1.5rem !important;
-    }
-
-    .info-card {
-        padding: 0.75rem;
-        margin-bottom: 0.75rem;
-    }
-
-    .parsed-data-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .contact-info-item {
-        padding: 0.5rem 0.75rem;
-    }
-
-    .action-card {
-        padding: 1.5rem;
-    }
-}
-
-@media (max-width: 576px) {
-    .detail-page-header h1 {
-        font-size: 1.25rem !important;
-    }
-
-    .info-card .info-label {
-        font-size: 0.75rem;
-    }
-
-    .info-card .info-value {
-        font-size: 0.875rem;
-    }
-
-    .status-badge {
-        font-size: 0.75rem;
-        padding: 0.25rem 0.5rem;
-    }
-}
-
-/* Loading Animation for Detail Pages */
-.detail-loading {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    border-top-color: white;
-    animation: spin 1s ease-in-out infinite;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-/* Print Styles for Detail Pages */
-@media print {
-    .detail-page-header {
-        background: white !important;
-        border: 2px solid #dee2e6 !important;
-    }
-
-    .detail-page-header h1 {
-        color: #212529 !important;
-    }
-
-    .contact-info-item,
-    .info-card,
-    .parsed-data-item {
-        border: 1px solid #dee2e6 !important;
-        break-inside: avoid;
-    }
-
-    .btn,
-    .action-card {
-        display: none !important;
-    }
-}
-
-/* Form and Update Page Enhancements */
-.form-page-header {
-    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(27, 131, 84, 0.1) 100%);
-    border-bottom: 3px solid var(--primary-color) !important;
-}
-
-.form-page-header h1 {
-    color: var(--primary-color) !important;
-}
-
-.form-page-header p {
-    color: rgba(27, 131, 84, 0.8) !important;
-}
-
-/* Form Section Enhancement */
-.form-section {
-    background: #f8f9fa;
-    border-left: 4px solid var(--primary-color);
-    border-radius: 0.375rem;
-    padding: 1.5rem;
-    margin-bottom: 2rem;
-    transition: all 0.3s ease;
-}
-
-.form-section:hover {
-    background: #e9ecef;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.form-section h5 {
-    color: var(--primary-color);
-    font-weight: 600;
-    margin-bottom: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.form-section .section-icon {
-    width: 1.25rem !important;
-    height: 1.25rem !important;
-}
-
-/* Form Field Enhancement */
-.form-field-wrapper {
-    position: relative;
-    margin-bottom: 1.5rem;
-}
-
-.form-field-wrapper label {
-    font-weight: 600;
-    color: #495057;
-    margin-bottom: 0.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.form-field-wrapper .required-indicator {
-    color: #dc3545;
-    font-size: 0.875rem;
-    font-weight: bold;
-}
-
-.form-field-wrapper .field-icon {
-    position: absolute;
-    right: 1rem;
-    top: 2.5rem;
-    color: #6c757d;
-    pointer-events: none;
-}
-
-.form-control,
-.form-select {
-    border: 2px solid #e0e0e0;
-    border-radius: 0.5rem;
-    padding: 0.75rem 1rem;
-    font-size: 1rem;
-    transition: all 0.2s ease;
-}
-
-.form-control:focus,
-.form-select:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.15);
-    color: #212529;
-    background-color: #fff;
-}
-
-.form-control.is-invalid,
-.form-select.is-invalid {
-    border-color: #dc3545;
-    padding-right: 2.5rem;
-    background-image: none;
-}
-
-.form-control.is-valid,
-.form-select.is-valid {
-    border-color: #28a745;
-    padding-right: 2.5rem;
-    background-image: none;
-}
-
-.form-text {
-    font-size: 0.875rem;
-    color: #6c757d;
-    margin-top: 0.25rem;
-}
-
-.invalid-feedback,
-.valid-feedback {
-    font-size: 0.875rem;
-    margin-top: 0.25rem;
-}
-
-.invalid-feedback {
-    color: #dc3545;
-    display: block;
-}
-
-.valid-feedback {
-    color: #28a745;
-    display: block;
-}
-
-/* Form Enhancement for Special Fields */
-.form-check-input {
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-top: 0.25rem;
-}
-
-.form-check-input:checked {
-    background-color: var(--primary-color);
-    border-color: var(--primary-color);
-}
-
-.form-check-label {
-    font-weight: 500;
-    color: #495057;
-}
-
-/* Action Buttons Enhancement */
-.form-action-buttons {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 0.75rem;
-    padding: 1.5rem;
-    margin-top: 2rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.form-action-buttons .btn {
-    min-width: 120px;
-    font-weight: 500;
-    transition: all 0.2s ease;
-}
-
-.form-action-buttons .btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-/* Responsive Form Adjustments */
-@media (max-width: 768px) {
-    .form-section {
-        padding: 1rem;
-        margin-bottom: 1.5rem;
-    }
-
-    .form-section h5 {
-        font-size: 1.1rem;
-        margin-bottom: 0.75rem;
-    }
-
-    .form-control,
-    .form-select {
-        font-size: 0.875rem;
-        padding: 0.625rem 0.75rem;
-    }
-
-    .form-field-wrapper label {
-        font-size: 0.875rem;
-    }
-
-    .form-text,
-    .invalid-feedback,
-    .valid-feedback {
-        font-size: 0.75rem;
-    }
-
-    .form-action-buttons {
-        padding: 1rem;
-        margin-top: 1.5rem;
-    }
-
-    .form-action-buttons .btn {
-        min-width: 100px;
-        font-size: 0.875rem;
-        padding: 0.5rem 1rem;
-    }
-}
-
-@media (max-width: 576px) {
-    .form-section {
-        padding: 0.75rem;
-        margin-bottom: 1rem;
-    }
-
-    .form-section h5 {
-        font-size: 1rem;
-    }
-
-    .form-control,
-    .form-select {
-        font-size: 0.813rem;
-        padding: 0.5rem 0.625rem;
-    }
-
-    .form-field-wrapper {
-        margin-bottom: 1rem;
-    }
-
-    .form-action-buttons {
-        flex-direction: column !important;
-        gap: 0.5rem !important;
-    }
-
-    .form-action-buttons .btn {
-        min-width: auto;
-        width: 100%;
-    }
-}
-
-/* Loading State for Forms */
-.form-loading {
-    position: relative;
-    pointer-events: none;
-    opacity: 0.6;
-}
-
-.form-loading::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.8);
-    z-index: 1;
-}
-
-.form-loading .spinner {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 2;
-}
-
-/* Print Styles for Forms */
-@media print {
-    .form-page-header,
-    .form-section,
-    .form-action-buttons {
-        border: 1px solid #dee2e6 !important;
-        background: white !important;
-        box-shadow: none !important;
-    }
-
-    .form-section {
-        break-inside: avoid;
-        page-break-inside: avoid;
-    }
-
-    .btn {
-        display: none !important;
-    }
-
-    .form-control,
-    .form-select {
-        border: 1px solid #000 !important;
-        background: white !important;
-    }
-}
-
-/* File Upload Enhancement */
-.form-control[type="file"] {
-    padding: 0.5rem;
-    border: 2px dashed #dee2e6;
-    background: #f8f9fa;
-    transition: all 0.2s ease;
-}
-
-.form-control[type="file"]:hover {
-    border-color: var(--primary-color);
-    background: #f0f8f4;
-}
-
-.form-control[type="file"]:focus {
-    border-color: var(--primary-color);
-    background: white;
-    box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.15);
-}
-
-/* Checkbox and Radio Enhancement */
-.form-check-input:checked ~ .form-check-label::before {
-    background-color: var(--primary-color);
-    border-color: var(--primary-color);
-}
-
-.form-check-input:focus ~ .form-check-label::before {
-    box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.25);
-}
-
-/* Help Text Enhancement */
-.help-text {
-    font-size: 0.813rem;
-    color: #6c757d;
-    margin-top: 0.25rem;
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-}
-
-.help-text .help-icon {
-    width: 1rem !important;
-    height: 1rem !important;
-    color: #6c757d;
-}
-
-/* Error State Enhancement */
-.field-error {
-    border-color: #dc3545 !important;
-    background-color: #fff5f5 !important;
-}
-
-.field-error:focus {
-    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
-}
-
-/* Success State Enhancement */
-.field-success {
-    border-color: #28a745 !important;
-    background-color: #f8fff9 !important;
-}
-
-.field-success:focus {
-    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
-}
diff --git a/templates/base.html b/templates/base.html
index ffe4948..3738bdf 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,5 +1,6 @@
-{% load i18n static %}
-{% load partials %}
+{% load static i18n %}
+{% get_current_language as LANGUAGE_CODE %}
+
 <!DOCTYPE html>
 <html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
 <head>
@@ -8,12 +9,17 @@
     <meta name="description" content="{% trans 'King Abdullah Academic University Hospital - Applicant Tracking System' %}">
     <title>{% block title %}{% trans 'University ATS' %}{% endblock %}</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    {% comment %} Load the correct Bootstrap CSS file for RTL/LTR {% endcomment %}
+    {% if LANGUAGE_CODE == 'ar' %}
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
+    {% else %}
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    {% endif %}
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-    {% comment %} <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
-    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet"> {% endcomment %}
     <link rel="stylesheet" href="{% static 'css/main.css' %}">
 
+
     {% block customCSS %}{% endblock %}
 </head>
 <body class="d-flex flex-column min-vh-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
@@ -21,218 +27,219 @@
     <div class="top-bar d-none d-md-block">
         <div class="container-fluid">
             <div class="d-flex justify-content-between align-items-center gap-2 max-width-1600">
-                <div class="d-flex align-items-center gap-3 social-icons">
-                </div>
-                <div class="contact-info d-flex gap-3">
-                </div>
                 <div class="logo-container d-flex gap-2">
-                    <img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy">
-                    <div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2 ms-4">
-                        <div class="hospital-text text-center text-md-start me-3">
-                            <div class="ar small">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
-                            <div class="ar small">ومستشفى الملك عبدالله بن عبدالعزيز التخصصي</div>
-                            <div class="en small">Princess Nourah bint Abdulrahman University</div>
-                            <div class="en small">King Abdullah bin Abdulaziz University Hospital</div>
+                </div>
+                <div class="clogo-container d-flex gap-2">
+                </div>
+                <div class="logo-container d-flex gap-2 align-items-center">
+                    <img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy" style="height: 35px; object-fit: contain;">
+                    
+                    <div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2 me-0">
+                        <div class="hospital-text text-center text-md-start me-0">
+                            <div class="ar text-xs">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
+                            <div class="ar text-xs">ومستشفى الملك عبدالله بن عبدالرحمن التخصصي</div>
+                            <div class="en text-xs">Princess Nourah bint Abdulrahman University</div>
+                            <div class="en text-xs">King Abdullah bin Abdulaziz University Hospital</div>
                         </div>
-
                     </div>
-                     <img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 100px;max-width:100px;">
+                     <img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 40px; max-width: 40px;">
                 </div>
             </div>
         </div>
     </div>
 
     <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
-        <div class="container-fluid">
-            <div class="navbar-content-wrapper max-width-1600 d-flex justify-content-between align-items-center" style="width: 100%;">
-                <a class="navbar-brand text-white d-none d-md-block" href="{% url 'dashboard' %}">
-                    <img src="{% static 'image/kaauh_green1.png' %}"  alt="{% trans 'kaauh logo green bg' %}" style="width: 60px; height: 60px;">
-                </a>
+        <div class="container-fluid max-width-1600">
+            
+            {# --- MOBILE BRAND LOGIC: Show small logo on mobile, large on desktop (lg) --- #}
+            <a class="navbar-brand text-white d-block d-lg-none" href="{% url 'dashboard' %}" aria-label="Home">
+                <img src="{% static 'image/kaauh_green1.png' %}"  alt="{% trans 'kaauh logo green bg' %}" class="navbar-brand-mobile">
+            </a>
+            
+            <a class="navbar-brand text-white d-none d-lg-block" href="{% url 'dashboard' %}" aria-label="Home">
+                <img src="{% static 'image/kaauh_green1.png' %}"  alt="{% trans 'kaauh logo green bg' %}" style="width: 60px; height: 60px;">
+            </a>
 
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                    aria-controls="navbarNav" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <div class="collapse navbar-collapse" id="navbarNav">
-                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                        <li class="nav-item me-4">
-                            <a class="nav-link {% if request.resolver_match.url_name == 'job_list' %}active{% endif %}" href="{% url 'job_list' %}">
-                                <span class="d-flex align-items-center gap-2">
-                                    {% include "icons/jobs.html" %}
-                                    {% trans "Jobs" %}
-                                </span>
-                            </a>
-                        </li>
-
-                        <li class="nav-item me-4">
-                            <a class="nav-link {% if request.resolver_match.url_name == 'candidate_list' %}active{% endif %}" href="{% url 'candidate_list' %}">
-                                <span class="d-flex align-items-center gap-2">
-                                    {% include "icons/users.html" %}
-                                    {% trans "Applicants" %}
-                                </span>
-                            </a>
-                        </li>
-
-                        <li class="nav-item me-4">
-                            <a class="nav-link {% if request.resolver_match.url_name == 'list_meetings' %}active{% endif %}" href="{% url 'list_meetings' %}">
-                                <span class="d-flex align-items-center gap-2">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
-                                </svg>
-                                    {% trans "Meetings" %}
-                                </span>
-                            </a>
-                        </li>
-
-                        <li class="nav-item me-4">
-                            <a class="nav-link {% if request.resolver_match.url_name == 'training_list' %}active{% endif %}" href="{% url 'training_list' %}">
-                                <span class="d-flex align-items-center gap-2">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
-                                </svg>
-
-                                    {% trans "Training" %}
-                                </span>
-                            </a>
-                        </li>
-
-                        <li class="nav-item dropdown ms-2">
-                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
-                            data-bs-offset="0, 8" data-bs-auto-close="outside">
-                                {% trans "More" %}
-                            </a>
-                            <ul class="dropdown-menu" data-bs-popper="static">
-                                <li><a class="dropdown-item" href="#"><i class="fas fa-calendar me-2"></i> {% trans "Meetings" %}</a></li>
-                                <li><a class="dropdown-item" href="#"><i class="fas fa-clock me-2"></i> {% trans "Schedule" %}</a></li>
-                                <li><hr class="dropdown-divider"></li>
-                                <li><a class="dropdown-item" href="#"><i class="fas fa-briefcase me-2"></i> {% trans "Active Jobs" %}</a></li>
-                                <li><a class="dropdown-item" href="#"><i class="fas fa-file-alt me-2"></i> {% trans "Draft Jobs" %}</a></li>
-                                <li><hr class="dropdown-divider"></li>
-                                <li><a class="dropdown-item" href="#"><i class="fas fa-users me-2"></i> {% trans "All Candidates" %}</a></li>
-                                <li><a class="dropdown-item" href="#"><i class="fas fa-user-plus me-2"></i> {% trans "New Candidates" %}</a></li>
-                            </ul>
-                        </li>
-                    </ul>
-
-                    <ul class="navbar-nav me-2">
-                        <li class="nav-item dropdown">
-                            <a class="language-toggle-btn dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
-                            data-bs-offset="0, 8" aria-expanded="false" aria-label="{% trans 'Toggle language menu' %}">
-                                <i class="fas fa-globe"></i>
-                                <span class="d-none d-lg-inline">{{ LANGUAGE_CODE|upper }}</span>
-                            </a>
-                            <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
-
-                                {% get_current_language as LANGUAGE_CODE %}
-
-                                <li>
-                                    <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
-                                        <input name="next" type="hidden" value="{{ request.get_full_path }}">
-                                        <button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
-                                            <span class="me-2">🇺🇸</span> English
-                                        </button>
-                                    </form>
-                                </li>
-
-                                <li>
-                                    <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
-                                        <input name="next" type="hidden" value="{{ request.get_full_path }}">
-                                        <button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
-                                            <span class="me-2">🇸🇦</span> العربية (Arabic)
-                                        </button>
-                                    </form>
-                                </li>
-                            </ul>
-                        </li>
+            {# Toggler: order-lg-0 ensures it's before navigation links on desktop, but it stays where it is on mobile #}
+            <button class="navbar-toggler order-lg-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            
+            {# Language and Profile Controls (Keep outside collapse for mobile access) #}
+            <div class="d-flex align-items-center order-lg-3">
+                <ul class="navbar-nav flex-row">
+                    <li class="nav-item dropdown">
+                        <a class="language-toggle-btn dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                        data-bs-offset="0, 8" aria-expanded="false" aria-label="{% trans 'Toggle language menu' %}">
+                            <i class="fas fa-globe"></i>
+                            <span class="d-none d-lg-inline">{{ LANGUAGE_CODE|upper }}</span>
+                        </a>
+                        <ul class="dropdown-menu {% if LANGUAGE_CODE == 'ar' %}dropdown-menu-start{% else %}dropdown-menu-end{% endif %}" data-bs-popper="static">
+                            <li>
+                                <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
+                                    <input name="next" type="hidden" value="{{ request.get_full_path }}">
+                                    <button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
+                                        <span class="me-2">🇺🇸</span> English
+                                    </button>
+                                </form>
+                            </li>
+                            <li>
+                                <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
+                                    <input name="next" type="hidden" value="{{ request.get_full_path }}">
+                                    <button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
+                                        <span class="me-2">🇸🇦</span> العربية (Arabic)
+                                    </button>
+                                </form>
+                            </li>
+                        </ul>
+                    </li>
                 </ul>
 
-                    <ul class="navbar-nav ms-4">
-                        <li class="nav-item dropdown">
-                            <button
-                                class="nav-link p-0 border-0 bg-transparent dropdown-toggle"
-                                type="button"
-                                data-bs-toggle="dropdown"
-                                aria-expanded="false"
-                                aria-label="{% trans 'Toggle user menu' %}"
-                                data-bs-auto-close="outside"
-                                data-bs-offset="0, 8"
-                            >
-                                {% if user.profile.profile_image %}
-                                    <img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
-                                        style="width: 36px; height: 36px; object-fit: cover; background-color: var(--kaauh-teal); display: inline-block; vertical-align: middle;"
-                                        title="{% trans 'Your account' %}">
-                                {% else %}
-                                    <div class="profile-avatar" title="{% trans 'Your account' %}">
-                                        {{ user.username|first|upper }}
+                <ul class="navbar-nav ms-2 ms-lg-4">
+                    <li class="nav-item dropdown">
+                        <button
+                            class="nav-link p-0 border-0 bg-transparent dropdown-toggle"
+                            type="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false"
+                            aria-label="{% trans 'Toggle user menu' %}"
+                            data-bs-auto-close="outside"
+                            data-bs-offset="0, 16" {# Vertical offset remains 16px to prevent clipping #}
+                        >
+                            {% if user.profile.profile_image %}
+                                <img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
+                                    style="width: 36px; height: 36px; object-fit: cover; background-color: var(--kaauh-teal); display: inline-block; vertical-align: middle;"
+                                    title="{% trans 'Your account' %}">
+                            {% else %}
+                                <div class="profile-avatar" title="{% trans 'Your account' %}">
+                                    {{ user.username|first|upper }}
+                                </div>
+                            {% endif %}
+                        </button>
+                        <ul
+                            {# FINAL FIX: Always use dropdown-menu-end. In LTR (English), this aligns right. In RTL (Arabic), this aligns left. #}
+                            class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3"
+                            style="min-width: 240px;"
+                        >
+                            <li class="px-4 py-3 ">
+                                <div class="d-flex align-items-center">
+                                    <div class="me-3 d-flex align-items-center justify-content-center" style="min-width: 48px;">
+                                        {% if user.profile.profile_image %}
+                                            <img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar shadow-sm border"
+                                                style="width: 44px; height: 44px; object-fit: cover; background-color: var(--kaauh-teal); display: block;"
+                                                title="{% trans 'Your account' %}">
+                                        {% else %}
+                                            <div class="profile-avatar shadow-sm border d-flex align-items-center justify-content-center"
+                                                style="width: 44px; height: 44px; background-color: var(--kaauh-teal); font-size: 1.2rem;">
+                                                {{ user.username|first|upper }}
+                                            </div>
+                                        {% endif %}
                                     </div>
-                                {% endif %}
-                            </button>
-                            <ul
-                                class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3"
-                                data-bs-popper="static"
-                                style="min-width: 240px;"
-                            >
-                                <li class="px-4 py-3 ">
-                                    <div class="d-flex align-items-center">
-                                        <div class="me-3 d-flex align-items-center justify-content-center" style="min-width: 48px;">
-                                            {% if user.profile.profile_image %}
-                                                <img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar shadow-sm border"
-                                                    style="width: 44px; height: 44px; object-fit: cover; background-color: var(--kaauh-teal); display: block;"
-                                                    title="{% trans 'Your account' %}">
-                                            {% else %}
-                                                <div class="profile-avatar shadow-sm border d-flex align-items-center justify-content-center"
-                                                    style="width: 44px; height: 44px; background-color: var(--kaauh-teal); font-size: 1.2rem;">
-                                                    {{ user.username|first|upper }}
-                                                </div>
-                                            {% endif %}
-                                        </div>
-                                        <div>
-                                            <div class="fw-semibold text-dark">{{ user.get_full_name|default:user.username }}</div>
-                                            <div class="text-muted small">{{ user.email|truncatechars:24 }}</div>
-                                        </div>
+                                    <div>
+                                        <div class="fw-semibold text-dark">{{ user.get_full_name|default:user.username }}</div>
+                                        <div class="text-muted small">{{ user.email|truncatechars:24 }}</div>
                                     </div>
-                                </li>
-                                <li><hr class="dropdown-divider my-1"></li>
-                                <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="{% url 'user_detail' request.user.pk %}"><i class="fas fa-user-circle me-3 text-primary fs-5"></i> <span>{% trans "My Profile" %}</span></a></li>
-                                <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-cog me-3 text-primary fs-5"></i> <span>{% trans "Settings" %}</span></a></li>
-                                <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-history me-3 text-primary fs-5"></i> <span>{% trans "Activity Log" %}</span></a></li>
-                                <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-question-circle me-3 text-primary fs-5"></i> <span>{% trans "Help & Support" %}</span></a></li>
-                                <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#">
-                                {% if not request.session.linkedin_authenticated %}
-                                    <ul class="navbar-nav ms-auto">
-                                        <li class="nav-item">
-                                            <a class="nav-link" href="{% url 'linkedin_login' %}">
-                                                <i class="fab fa-linkedin me-1"></i> {% trans "Connect LinkedIn" %}
-                                            </a>
-                                        </li>
-                                    </ul>
-                                {% else %}
-                                    <i class="fab fa-linkedin text-primary me-1"></i>
-                                    <span class="text-primary d-none d-lg-inline ms-auto me-3">
-                                        {% trans "LinkedIn Connected" %}
-                                    </span>
-                                {% endif %}
-                                </a></li>
-
-                                <li><hr class="dropdown-divider my-1"></li>
+                                </div>
+                            </li>
+                            <li><hr class="dropdown-divider my-1"></li>
+                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="{% url 'user_detail' request.user.pk %}"><i class="fas fa-user-circle me-3 text-primary fs-5"></i> <span>{% trans "My Profile" %}</span></a></li>
+                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-cog me-3 text-primary fs-5"></i> <span>{% trans "Settings" %}</span></a></li>
+                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-history me-3 text-primary fs-5"></i> <span>{% trans "Activity Log" %}</span></a></li>
+                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-question-circle me-3 text-primary fs-5"></i> <span>{% trans "Help & Support" %}</span></a></li>
+                            
+                            {% comment %} CORRECTED LINKEDIN BLOCK {% endcomment %}
+                            {% if not request.session.linkedin_authenticated %}
                                 <li>
-                                    <form method="post" action="{% url 'account_logout'%}" class="d-inline">
-                                        {% csrf_token %}
-                                        <button
-                                            type="submit"
-                                            class="dropdown-item py-2 px-4 text-danger d-flex align-items-center border-0 bg-transparent text-start"
-                                            aria-label="{% trans 'Sign out' %}"
-                                        >
-                                            <i class="fas fa-sign-out-alt me-3 fs-5"></i>
-                                            <span>{% trans "Sign Out" %}</span>
-                                        </button>
-                                    </form>
+                                    <a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="{% url 'linkedin_login' %}">
+                                        <i class="fab fa-linkedin me-3 text-primary fs-5"></i>
+                                        <span>{% trans "Connect LinkedIn" %}</span>
+                                    </a>
                                 </li>
-                            </ul>
-                        </li>
-                    </ul>
-                </div>
+                            {% else %}
+                                <li class="px-4 py-2 text-muted small">
+                                    <i class="fab fa-linkedin text-primary me-2"></i>
+                                    {% trans "LinkedIn Connected" %}
+                                </li>
+                            {% endif %}
+                            
+                            <li><hr class="dropdown-divider my-1"></li>
+                            <li>
+                                <form method="post" action="{% url 'account_logout'%}" class="d-inline">
+                                    {% csrf_token %}
+                                    <button
+                                        type="submit"
+                                        class="dropdown-item py-2 px-4 text-danger d-flex align-items-center border-0 bg-transparent text-start"
+                                        aria-label="{% trans 'Sign out' %}"
+                                    >
+                                        <i class="fas fa-sign-out-alt me-3 fs-5"></i>
+                                        <span>{% trans "Sign Out" %}</span>
+                                    </button>
+                                </form>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+            {# End Language and Profile Controls #}
+
+            {# Main Navigation Links (This collapses on mobile) - order-lg-1 ensures it is centered on desktop #}
+            <div class="collapse navbar-collapse order-lg-1" id="navbarNav">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    {# Changed me-4 to me-lg-4 so they stack tightly on mobile #}
+                    <li class="nav-item me-lg-4">
+                        <a class="nav-link {% if request.resolver_match.url_name == 'job_list' %}active{% endif %}" href="{% url 'job_list' %}">
+                            <span class="d-flex align-items-center gap-2">
+                                {% include "icons/jobs.html" %}
+                                {% trans "Jobs" %}
+                            </span>
+                        </a>
+                    </li>
+                    <li class="nav-item me-lg-4">
+                        <a class="nav-link {% if request.resolver_match.url_name == 'candidate_list' %}active{% endif %}" href="{% url 'candidate_list' %}">
+                            <span class="d-flex align-items-center gap-2">
+                                {% include "icons/users.html" %}
+                                {% trans "Applicants" %}
+                            </span>
+                        </a>
+                    </li>
+                    <li class="nav-item me-lg-4">
+                        <a class="nav-link {% if request.resolver_match.url_name == 'list_meetings' %}active{% endif %}" href="{% url 'list_meetings' %}">
+                            <span class="d-flex align-items-center gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
+                            </svg>
+                                {% trans "Meetings" %}
+                            </span>
+                        </a>
+                    </li>
+                    <li class="nav-item me-lg-4">
+                        <a class="nav-link {% if request.resolver_match.url_name == 'training_list' %}active{% endif %}" href="{% url 'training_list' %}">
+                            <span class="d-flex align-items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
+                            </svg>
+                                {% trans "Training" %}
+                            </span>
+                        </a>
+                    </li>
+                    <li class="nav-item dropdown ms-lg-2">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                        data-bs-offset="0, 8" data-bs-auto-close="outside">
+                            {% trans "More" %}
+                        </a>
+                        <ul class="dropdown-menu" data-bs-popper="static">
+                            <li><a class="dropdown-item" href="#"><i class="fas fa-calendar me-2"></i> {% trans "Meetings" %}</a></li>
+                            <li><a class="dropdown-item" href="#"><i class="fas fa-clock me-2"></i> {% trans "Schedule" %}</a></li>
+                            <li><hr class="dropdown-divider"></li>
+                            <li><a class="dropdown-item" href="#"><i class="fas fa-briefcase me-2"></i> {% trans "Active Jobs" %}</a></li>
+                            <li><a class="dropdown-item" href="#"><i class="fas fa-file-alt me-2"></i> {% trans "Draft Jobs" %}</a></li>
+                            <li><hr class="dropdown-divider"></li>
+                            <li><a class="dropdown-item" href="#"><i class="fas fa-users me-2"></i> {% trans "All Candidates" %}</a></li>
+                            <li><a class="dropdown-item" href="#"><i class="fas fa-user-plus me-2"></i> {% trans "New Candidates" %}</a></li>
+                        </ul>
+                    </li>
+                </ul>
             </div>
         </div>
     </nav>
@@ -272,43 +279,24 @@
     {% include 'includes/delete_modal.html' %}
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            const forms = document.querySelectorAll('form');
-
-  forms.forEach(form => {
-    form.addEventListener('submit', function(e) {
-      // Find the submit button within this form
-      const submitButton = form.querySelector('button[type="submit"], input[type="submit"]');
-
-      if (submitButton) {
-        // Disable the button
-        submitButton.disabled = true;
-
-        // Optional: Add a loading class for styling
-        submitButton.classList.add('loading');
-
-        // Re-enable the button if the form submission fails
-        // This ensures the button doesn't stay disabled if there's an error
-        window.addEventListener('unload', function() {
-          submitButton.disabled = false;
-          submitButton.classList.remove('loading');
-        });
-      }
-    });
-  });
-
             // Navbar collapse auto-close on link click (Standard Mobile UX)
             const navbarCollapse = document.getElementById('navbarNav');
             if (navbarCollapse) {
-                const navLinks = navbarCollapse.querySelectorAll('.nav-link:not(.dropdown-toggle)');
+                // Select all links, including those inside the "More" dropdown
+                const navLinks = navbarCollapse.querySelectorAll('.nav-link:not(.dropdown-toggle), .dropdown-item');
                 const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse) || new bootstrap.Collapse(navbarCollapse, { toggle: false });
 
                 navLinks.forEach(link => {
                     link.addEventListener('click', () => {
                         // Only collapse if the nav is actually shown (i.e., on mobile)
                         if (navbarCollapse.classList.contains('show')) {
-                            bsCollapse.hide();
+                            // Check if the click was on a non-dropdown-toggle or a dropdown item (which navigate away)
+                            if (!link.classList.contains('dropdown-toggle')) {
+                                bsCollapse.hide();
+                            }
                         }
                     });
                 });
@@ -318,34 +306,15 @@
             const logoutButton = document.querySelector('form[action$="/logout/"] button');
             if (logoutButton) {
                 logoutButton.addEventListener('click', (e) => {
-                    // Check if screen is small (e.g., Bootstrap large breakpoint is 992px)
-                    if (window.innerWidth <= 992) {
+                    // Check if screen is small (Bootstrap 'lg' breakpoint is 992px)
+                    if (window.innerWidth < 992) {
                         const confirmed = confirm('{% trans "Are you sure you want to sign out?" %}');
                         if (!confirmed) e.preventDefault();
                     }
                 });
             }
-
-             // Handle language form submission: Manually trigger click on button inside form
-            document.querySelectorAll('.language-toggle-btn').forEach(toggle => {
-                const menu = toggle.nextElementSibling;
-                if (menu) {
-                    menu.querySelectorAll('.dropdown-item').forEach(item => {
-                        item.addEventListener('click', (e) => {
-                            // Find the containing form and submit it
-                            const form = item.closest('form');
-                            if (form) {
-                                form.submit();
-                            }
-                        });
-                    });
-                }
-            });
         });
     </script>
-    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
-    {% comment %} <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.5/bundles/datastar.js"></script> {% endcomment %}
-
     {% block customJS %}{% endblock %}
 
 </body>
diff --git a/templates/forms/form_wizard.html b/templates/forms/form_wizard.html
index e13ec75..655db00 100644
--- a/templates/forms/form_wizard.html
+++ b/templates/forms/form_wizard.html
@@ -1,40 +1,6 @@
+{% extends 'forms/partials/candidate_facing_base.html'%}
 {% load static i18n %}
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>{% translate "Application Form" %}</title>
-        <link
-            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
-            rel="stylesheet"
-        />
-        <link
-            rel="stylesheet"
-            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-        />
-        <style>
-            /* KAAT-S Theme Variables */
-            :root {
-                --kaauh-teal: #00636e; /* Main Primary Color */
-                --kaauh-teal-dark: #004a53; /* Dark Primary Color */
-
-                /* Mapping wizard defaults to theme colors */
-                --primary: var(--kaauh-teal);
-                --primary-light: #007c89; /* Slightly lighter shade for subtle hover/border */
-                --secondary: var(--kaauh-teal-dark);
-                --success: #198754; /* Keeping a standard success green for Submit */
-                --error: #dc3545; /* Standard danger red */
-
-                --light: #f8f9fa;
-                --dark: #212529;
-                --gray: #6c757d;
-                --light-gray: #e9ecef;
-                --border: #dee2e6;
-                --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-                --radius: 16px; /* Increased radius for a softer look */
-                --transition: all 0.3s ease;
-            }
+{% block content %}
             <style>
     /* KAAT-S Theme Variables */
     :root {
@@ -501,57 +467,7 @@
                 /* The z-index is already 1030 in the inline style, which is correct */
             }
         </style>
-    </head>
-    <body>
-        <nav
-            id="topNavbar"
-            class="navbar navbar-expand-lg"
-            style="background-color: white; z-index: 1030"
-        >
-            <div class="container-fluid">
-                <a class="navbar-brand text-white fw-bold" href="/">
-                    <img
-                        src="{% static 'image/kaauh.jpeg' %}"
-                        alt="{% translate 'KAAUH IMAGE' %}"
-                        style="height: 50px; margin-right: 10px"
-                    />
-                </a>
-                <button
-                    class="navbar-toggler"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#navbarNav"
-                    aria-controls="navbarNav"
-                    aria-expanded="false"
-                    aria-label="Toggle navigation"
-                >
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <div class="collapse navbar-collapse" id="navbarNav">
-                    <ul class="navbar-nav ms-auto">
-                        <li class="nav-item">
-                            <a
-                                class="nav-link text-secondary"
-                                href="/applications/"
-                                >{% translate "Applications" %}</a
-                            >
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link text-secondary" href="/profile/"
-                                >{% translate "Profile" %}</a
-                            >
-                        </li>
-                        <li class="nav-item">
-                            <a
-                                class="nav-link text-secondary"
-                                href="https://kaauh.edu.sa/career"
-                                >{% translate "Careers" %}</a
-                            >
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </nav>
+  
         <nav
             id="bottomNavbar"
             class="navbar navbar-expand-lg sticky-top"
@@ -616,7 +532,7 @@
                 </div>
             </div>
         </div>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+   
         <script>
                 // Application State
                 const csrfToken = '{{ csrf_token }}';
@@ -1344,5 +1260,4 @@
                 // Start the application
                 document.addEventListener('DOMContentLoaded', init);
         </script>
-    </body>
-</html>
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/forms/job_detail_candidate.html b/templates/forms/job_detail_candidate.html
new file mode 100644
index 0000000..7bb8472
--- /dev/null
+++ b/templates/forms/job_detail_candidate.html
@@ -0,0 +1,88 @@
+{% extends 'forms/partials/candidate_facing_base.html'%}
+{% load static i18n %}
+{% block content %}
+    
+    <nav id="bottomNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: var(--kaauh-teal); z-index: 1030;">
+        <div class="container-fluid">
+             <span class="navbar-text text-white fw-bold">{% trans "Job Overview" %}</span>
+        </div>
+    </nav>
+    
+    <div class="container">
+        <div class="row mb-5 mt-3 main-content-area">
+            
+            <div class="col-lg-4 order-lg-2 order-1 d-none d-lg-block">
+                <div class="card shadow-sm sticky-top"> 
+                    <div class="card-header bg-kaauh-teal-dark text-white">
+                        <h5 class="mb-0"><i class="fas fa-file-signature me-2"></i>{% trans "Ready to Apply?" %}</h5>
+                    </div>
+                    <div class="card-body text-center">
+                        <p class="text-muted">{% trans "Review the job details, then apply below." %}</p>
+                        
+                        {% if job.form_template %}
+                            <a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
+                                <i class="fas fa-paper-plane me-2"></i> {% trans "Apply for this Position" %}
+                            </a>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-8 order-lg-1 order-2">
+                <div class="card shadow-sm">
+                    <div class="card-header bg-kaauh-teal-dark text-white d-flex justify-content-between align-items-center">
+                        <h2 class="h3 mb-0 fw-bold">{{ job.title }}</h2>
+                    </div>
+
+                    <div class="card-body">
+                        
+                        <h4 class="mb-3" style="color: var(--kaauh-teal-dark);">{% trans "Job Overview" %}</h4>
+                        <div class="row row-cols-1 row-cols-md-2 g-3 mb-4 small text-secondary">
+                            {% if job.salary_range %}
+                            <div class="col">
+                                <i class="fas fa-money-bill-wave text-success me-2"></i>
+                                <strong>{% trans "Salary:" %}</strong> 
+                                <span class="fw-bold text-success">{{ job.salary_range }}</span>
+                            </div>
+                            {% endif %}
+                            
+                            <div class="col">
+                                <i class="fas fa-calendar-alt text-muted me-2"></i>
+                                <strong>{% trans "Deadline:" %}</strong> 
+                                {% if job.application_deadline %}
+                                    {{ job.application_deadline|date:"M d, Y" }}
+                                    {% if job.is_expired %}
+                                        <span class="badge bg-danger ms-2">{% trans "EXPIRED" %}</span>
+                                    {% endif %}
+                                {% else %}
+                                    <span class="text-muted">{% trans "Not specified" %}</span>
+                                {% endif %}
+                            </div>
+                            
+                            <div class="col"> <i class="fas fa-briefcase text-muted me-2"></i> <strong>{% trans "Job Type:" %}</strong> {{ job.get_job_type_display }} </div>
+                            <div class="col"> <i class="fas fa-map-marker-alt text-muted me-2"></i> <strong>{% trans "Location:" %}</strong> {{ job.get_location_display }} </div>
+                            <div class="col"> <i class="fas fa-building text-muted me-2"></i> <strong>{% trans "Department:" %}</strong> {{ job.department|default:"N/A" }} </div>
+                            <div class="col"> <i class="fas fa-hashtag text-muted me-2"></i> <strong>{% trans "JOB ID:" %}</strong> {{ job.internal_job_id|default:"N/A" }} </div>
+                            <div class="col"> <i class="fas fa-desktop text-muted me-2"></i> <strong>{% trans "Workplace:" %}</strong> {{ job.get_workplace_type_display }} </div>
+                        </div>
+                        
+                        {% if job.has_description_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-info-circle me-2"></i>{% trans "Job Description" %}</h5><div class="text-secondary">{{ job.description|safe }}</div></div>{% endif %}
+                        {% if job.has_qualifications_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-graduation-cap me-2"></i>{% trans "Qualifications" %}</h5><div class="text-secondary">{{ job.qualifications|safe }}</div></div>{% endif %}
+                        {% if job.has_benefits_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-hand-holding-usd me-2"></i>{% trans "Benefits" %}</h5><div class="text-secondary">{{ job.benefits|safe }}</div></div>{% endif %}
+                        {% if job.has_application_instructions_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-file-alt me-2"></i>{% trans "Application Instructions" %}</h5><div class="text-secondary">{{ job.application_instructions|safe }}</div></div>{% endif %}
+                      
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div> 
+
+    <div class="mobile-fixed-apply-bar d-lg-none"> 
+        {% if job.form_template %}
+        <a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
+            <i class="fas fa-paper-plane me-2"></i> {% trans "Apply for this Position" %}
+        </a>
+        {% endif %}
+    </div>
+{% endblock content%}
\ No newline at end of file
diff --git a/templates/forms/partials/candidate_facing_base.html b/templates/forms/partials/candidate_facing_base.html
new file mode 100644
index 0000000..c171571
--- /dev/null
+++ b/templates/forms/partials/candidate_facing_base.html
@@ -0,0 +1,265 @@
+{% load static i18n %}
+{% get_current_language as LANGUAGE_CODE %}
+{% get_available_languages as LANGUAGES %}
+{% get_language_info_list for LANGUAGES as language_info_list %}
+
+<!DOCTYPE html>
+<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% translate "Application Form" %}</title>
+    
+    {% comment %} Load the correct Bootstrap CSS file for RTL/LTR {% endcomment %}
+    {% if LANGUAGE_CODE == 'ar' %}
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
+    {% else %}
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    {% endif %}
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+    /* ---------------------------------------------------------------------- */
+    /* THEME & UTILITY VARIABLES */
+    /* ---------------------------------------------------------------------- */
+    :root {
+        --kaauh-teal: #00636e;
+        --kaauh-teal-dark: #004a53;
+        --success: #198754;
+        --danger: #dc3545;
+        --light-bg: #f8f9fa; 
+        --gray-text: #6c757d;
+        --kaauh-border: #eaeff3; /* Added for dropdown styling */
+        
+        /* CALCULATED STICKY HEIGHTS */
+        --navbar-height: 56px; 
+        --navbar-gap: 16px; 
+        --sticky-navbar-total-height: 128px;
+    }
+
+    body {
+        min-height: 100vh;
+        background-color: #f0f0f5; /* Light gray background for contrast */
+        padding-top: 0;
+    }
+    
+    .btn-main-action {
+        background-color: var(--kaauh-teal);
+        color: white;
+        border: none;
+        transition: background-color 0.3s ease, transform 0.2s ease;
+        box-shadow: 0 4px 12px rgba(0, 99, 110, 0.3);
+    }
+
+    .btn-main-action:hover {
+        background-color: var(--kaauh-teal-dark);
+        color: white;
+        transform: translateY(-1px);
+    }
+
+    .bg-kaauh-teal-dark {
+        background-color: var(--kaauh-teal-dark) !important;
+    }
+    
+    /* ---------------------------------------------------------------------- */
+    /* LANGUAGE TOGGLE STYLES (COPIED FROM MAIN LAYOUT) */
+    /* ---------------------------------------------------------------------- */
+    .language-toggle-btn {
+        color: var(--gray-text) !important; /* Use secondary color */
+        background: none !important;
+        border: none !important;
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+        padding: 0.5rem 0.75rem !important;
+        font-weight: 500;
+        transition: all 0.2s ease;
+    }
+    .language-toggle-btn:hover {
+        background: var(--light-bg) !important;
+        border-radius: 4px;
+        color: var(--kaauh-teal) !important;
+    }
+
+    /* Dropdown Menu styling for language */
+    .dropdown-menu {
+        backdrop-filter: blur(4px);
+        background-color: rgba(255, 255, 255, 0.98);
+        border: 1px solid var(--kaauh-border);
+        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+        border-radius: 8px;
+        padding: 0.5rem 0;
+        min-width: 150px;
+    }
+    .dropdown-item {
+        padding: 0.5rem 1.25rem;
+        transition: background-color 0.15s;
+        text-align: inherit; /* Ensure text alignment is controlled by dir="rtl" */
+    }
+
+    /* Use button as dropdown-item inside form for full click area */
+    .dropdown-item[type="submit"] {
+        width: 100%;
+        text-align: inherit;
+        border: none;
+    }
+
+    /* ---------------------------------------------------------------------- */
+    /* LAYOUT & STICKY POSITIONING FIXES (Desktop/Tablet) */
+    /* ---------------------------------------------------------------------- */
+
+    #topNavbar {
+        z-index: 1040; /* Higher than the bottom bar */
+    }
+    
+    /* 1. Position the dark navbar below the white navbar + gap */
+    #bottomNavbar {
+        /* 56px (white nav) + 16px (mb-3) = 72px */
+        top: calc(var(--navbar-height) + var(--navbar-gap)); 
+        z-index: 1030;
+    }
+
+    /* 2. Pushes the main content down so it's not hidden under the navbars */
+    .main-content-area {
+        /* Total Sticky Height (128px) + Extra Margin (12px) = 140px */
+        margin-top: calc(var(--sticky-navbar-total-height) + 12px); 
+    }
+
+    /* 3. Positions the sticky sidebar correctly */
+    .card.sticky-top {
+        /* Start scrolling the sidebar just below the two navbars + a small gap */
+        top: calc(var(--sticky-navbar-total-height) + 15px);
+    }
+
+    /* ---------------------------------------------------------------------- */
+    /* RTL / ARABIC SUPPORT - Optimized */
+    /* ---------------------------------------------------------------------- */
+    html[dir="rtl"] {
+        text-align: right;
+    }
+    
+    /* Flip Margin Utilities (m-end and m-start) */
+    html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
+    html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
+    html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
+    html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
+    html[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } /* For the globe icon */
+    
+    /* Flip alignment for text-end/text-start */
+    html[dir="rtl"] .text-end { text-align: left !important; }
+    html[dir="rtl"] .text-start { text-align: right !important; }
+
+    /* ---------------------------------------------------------------------- */
+    /* MOBILE RESPONSIVE STYLES (Below 992px) */
+    /* ---------------------------------------------------------------------- */
+    @media (max-width: 991.98px) {
+        
+        /* Ensures dropdown items in mobile menu align correctly */
+        html[dir="rtl"] .navbar-collapse .dropdown-menu {
+            text-align: right;
+            left: auto;
+            right: 0;
+        }
+
+        /* On mobile, the top navbar is generally only 56px tall when collapsed. */
+        #bottomNavbar {
+            top: calc(var(--navbar-height) + var(--navbar-gap));
+        }
+        
+        .main-content-area {
+            /* Reduced margin-top for smaller screens */
+            margin-top: calc(var(--sticky-navbar-total-height) / 2); 
+        }
+        
+        /* Mobile Fixed Footer Bar for Application */
+        .mobile-fixed-apply-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            width: 100%;
+            padding: 15px;
+            background-color: var(--light-bg);
+            border-top: 1px solid #ddd;
+            z-index: 1000;
+            box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
+        }
+
+        /* Add padding to the bottom of the body content to prevent it from hiding under the fixed bar */
+        body {
+            padding-bottom: 90px;
+        }
+
+        /* Fix job overview grid responsiveness (ensures 1 column) */
+        .row-cols-md-2 > .col {
+            flex: 0 0 100%;
+            max-width: 100%;
+        }
+    }
+</style>
+</head>
+<body>
+   
+    <nav id="topNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: white; z-index: 1040;">
+    <div class="container-fluid">
+        <a class="navbar-brand text-white fw-bold" href="{% url 'kaauh_career' %}">
+            <img src="{% static 'image/kaauh.jpeg' %}" alt="{% translate 'KAAUH IMAGE' %}" style="height: 50px; margin-right: 10px;">
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ms-auto">
+               
+                <li class="nav-item">
+                    <a class="nav-link text-secondary" href="/applications/">{% translate "Applications" %}</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link text-secondary" href="/profile/">{% translate "Profile" %}</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link text-secondary" href="{% url 'kaauh_career' %}">{% translate "Careers" %}</a>
+                </li>
+
+                <li class="nav-item dropdown">
+                    <button class="language-toggle-btn dropdown-toggle" type="button" 
+                        data-bs-toggle="dropdown" data-bs-offset="0, 8" aria-expanded="false" 
+                        aria-label="{% trans 'Toggle language menu' %}">
+                        <i class="fas fa-globe"></i>
+                        <span class="d-inline">{{ LANGUAGE_CODE|upper }}</span>
+                    </button>
+                    
+                    <ul class="dropdown-menu {% if LANGUAGE_CODE == 'ar' %}dropdown-menu-start{% else %}dropdown-menu-end{% endif %}" aria-labelledby="navbarLanguageDropdown">
+                        
+                        {% comment %} English Button {% endcomment %}
+                        <li>
+                            <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
+                                <input name="next" type="hidden" value="{{ request.get_full_path }}">
+                                <button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
+                                    <span class="me-2">🇺🇸</span> English
+                                </button>
+                            </form>
+                        </li>
+
+                        {% comment %} Arabic Button {% endcomment %}
+                        <li>
+                            <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
+                                <input name="next" type="hidden" value="{{ request.get_full_path }}">
+                                <button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
+                                    <span class="me-2">🇸🇦</span> العربية (Arabic)
+                                </button>
+                            </form>
+                        </li>
+                    </ul>
+                </li>
+                </ul>
+        </div>
+    </div>
+</nav>
+  {% block content %}
+
+  {% endblock content %}
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/includes/language_options.html b/templates/includes/language_options.html
new file mode 100644
index 0000000..f9f7bcf
--- /dev/null
+++ b/templates/includes/language_options.html
@@ -0,0 +1,18 @@
+{% load i18n %}
+
+<li>
+    <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
+        <input name="next" type="hidden" value="{{ next_url }}">
+        <button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
+            <span class="me-2">🇺🇸</span> English
+        </button>
+    </form>
+</li>
+<li>
+    <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
+        <input name="next" type="hidden" value="{{ next_url }}">
+        <button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
+            <span class="me-2">🇸🇦</span> العربية
+        </button>
+    </form>
+</li>
\ No newline at end of file
diff --git a/templates/jobs/base_public.html b/templates/jobs/base_public.html
index 80b2721..e69de29 100644
--- a/templates/jobs/base_public.html
+++ b/templates/jobs/base_public.html
@@ -1,628 +0,0 @@
-{% load i18n static %}
-<!DOCTYPE html>
-<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}{% trans 'Careers' %} - KAAUH{% endblock %}</title>
-
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-    
-    <style>
-        :root {
-            --kaauh-teal: #00636e;
-            --kaauh-teal-dark: #004a53;
-            --kaauh-light-bg: #f9fbfd;
-            --kaauh-border: #eaeff3;
-            --kaauh-green-dark: #00363a;
-            --kaauh-nav-bg: #004a53;
-            --kaauh-dark-nav-active: #00363a;
-        }
-
-        body {
-            background-color: white;
-        }
-
-        .max-width-container {
-            max-width: 1600px;
-            margin-left: auto;
-            margin-right: auto;
-            padding-left: 15px;
-            padding-right: 15px;
-        }
-        
-        /* === Header Top Info === */
-        .header-top-info {
-            background-color: white;
-            padding: 15px 0;
-            font-size: 0.95rem;
-            color: #333;
-            border-bottom: 1px solid #eee;
-        }
-
-        .header-top-info .section-divider {
-            border-inline-start: 1px solid #ddd;
-            height: 60px;
-            margin: 0 15px;
-        }
-
-        .header-top-info .follow-us-section {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            font-weight: 500;
-        }
-        .header-top-info .social-icon-circle {
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
-            background-color: var(--kaauh-teal);
-            color: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1rem;
-            text-decoration: none;
-            transition: background-color 0.2s;
-        }
-        .header-top-info .social-icon-circle:hover {
-            background-color: var(--kaauh-teal-dark);
-        }
-
-        .header-top-info .contact-block {
-            display: flex;
-            align-items: center;
-            min-width: 200px;
-        }
-
-        .header-top-info .contact-icon-block {
-            display: flex;
-            align-items: center;
-            text-align: center;
-            padding: 0 15px;
-            min-height: 60px;
-        }
-        .header-top-info .contact-icon {
-            font-size: 2rem;
-            color: var(--kaauh-teal);
-            margin-inline-end: 15px;
-        }
-        .header-top-info .contact-details {
-            display: flex;
-            flex-direction: column;
-            text-align: start;
-        }
-        .header-top-info .contact-details span:first-child {
-            font-weight: bold;
-            color: var(--kaauh-teal);
-        }
-        .header-top-info .contact-details span:last-child {
-            font-size: 0.85rem;
-            color: #555;
-        }
-
-        .header-top-info .logo-section {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-        .header-top-info .vision-logo-container {
-            border-inline-start: 1px solid #ddd;
-            padding-inline-start: 20px;
-            min-height: 60px;
-            display: flex;
-            align-items: center;
-        }
-        .header-top-info .vision-logo {
-            max-height: 50px;
-            width: auto;
-        }
-        .header-top-info .kaauh-logo-container {
-            display: flex;
-            align-items: center;
-            border-inline-start: 1px solid #ddd;
-            padding-inline-start: 20px;
-        }
-        .header-top-info .kaauh-logo-container img {
-            max-height: 80px;
-            width: auto;
-            margin-inline-end: 10px;
-        }
-        .header-top-info .hospital-text {
-            line-height: 1.2;
-            text-align: initial;
-        }
-        .header-top-info .hospital-text .ar {
-            font-size: 1.1rem;
-            font-weight: bold;
-            color: var(--kaauh-teal-dark);
-        }
-        .header-top-info .hospital-text .en {
-            font-size: 0.8rem;
-            color: #555;
-        }
-
-        /* === Main Navbar === */
-        .navbar-main {
-            background-color: var(--kaauh-nav-bg);
-            padding: 0;
-            min-height: 60px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        }
-        .navbar-main .nav-link {
-            color: white !important;
-            font-weight: 500;
-            font-size: 0.95rem;
-            padding: 1.1rem 1.2rem;
-            transition: background-color 0.2s;
-            border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
-            line-height: 1;
-        }
-        .navbar-main .nav-link:hover,
-        .navbar-main .nav-link.active {
-            background-color: var(--kaauh-dark-nav-active);
-            border-inline-end: 1px solid var(--kaauh-dark-nav-active);
-        }
-        .navbar-main .nav-icons-group {
-            display: flex;
-            align-items: center;
-            background-color: var(--kaauh-dark-nav-active);
-            height: 100%;
-            min-height: 60px;
-        }
-        .navbar-main .nav-icon {
-            color: white;
-            padding: 0 15px;
-            font-size: 1.5rem;
-            cursor: pointer;
-            text-decoration: none;
-            transition: opacity 0.2s;
-        }
-        .navbar-main .nav-icon:hover {
-            opacity: 0.8;
-        }
-        .navbar-main .profile-icon {
-            font-size: 1.8rem;
-        }
-        .navbar-main .lang-switch {
-            font-size: 1.2rem;
-            font-weight: bold;
-            text-transform: uppercase;
-            line-height: 1;
-        }
-        .navbar-main .dropdown-menu {
-            border-radius: 0;
-            margin-top: 0;
-            border: none;
-            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
-        }
-        .navbar-main .dropdown-item:hover {
-            background-color: var(--kaauh-light-bg);
-            color: var(--kaauh-teal-dark);
-        }
-        .navbar-toggler {
-            border: none;
-            padding: 0;
-        }
-        .navbar-toggler:focus {
-            box-shadow: none;
-        }
-        .navbar-toggler-icon {
-            filter: invert(1);
-        }
-        .navbar-main .collapse {
-            justify-content: flex-start !important;
-        }
-
-        /* === Footer === */
-        .footer-main {
-            background-color: var(--kaauh-green-dark);
-            color: white;
-            padding-top: 3rem;
-        }
-        .footer-main a {
-            color: white;
-            text-decoration: none;
-            transition: color 0.2s;
-        }
-        .footer-main a:hover {
-            color: var(--kaauh-teal);
-        }
-        .footer-main h5 {
-            color: var(--kaauh-teal);
-            font-weight: 700;
-            margin-bottom: 1.5rem;
-        }
-        .footer-main .social-icons a {
-            font-size: 1.5rem;
-            margin-inline-end: 15px;
-        }
-        .footer-main .contact-info,
-        .footer-main .app-download {
-            font-size: 0.95rem;
-        }
-        .footer-bottom {
-            background-color: #00282b;
-            padding: 1rem 0;
-            font-size: 0.85rem;
-            color: rgba(255, 255, 255, 0.7);
-        }
-        .footer-bottom strong {
-            color: white;
-        }
-        .footer-main .col-lg-3, .footer-main .col-lg-5 {
-            padding-bottom: 2rem;
-        }
-        .footer-main .vision-logo {
-            max-width: 100px;
-        }
-        .footer-main .app-store-badge,
-        .footer-main .play-store-badge {
-            max-width: 150px;
-            height: auto;
-            margin-top: 10px;
-        }
-
-        /* === Hero Section === */
-        .hero-section {
-            height: 50vh;
-            background: url('{% static "image/hospital-bg.jpg" %}') no-repeat center center;
-            background-size: cover;
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            text-align: center;
-        }
-        .hero-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: rgba(0, 0, 0, 0.45);
-        }
-        .hero-content {
-            z-index: 10;
-        }
-        .hero-content h1 {
-            font-size: 3rem;
-            font-weight: 700;
-        }
-        .breadcrumb-section {
-            padding: 10px 0;
-            background-color: #f1f1f1;
-            font-size: 0.9rem;
-        }
-        .breadcrumb-item a {
-            color: #6c757d;
-        }
-        .breadcrumb-item.active {
-            font-weight: 600;
-            color: var(--kaauh-teal-dark);
-        }
-
-        /* === RTL Adjustments === */
-        html[dir="rtl"] {
-            text-align: right;
-            direction: rtl;
-        }
-        html[dir="rtl"] .max-width-container {
-            padding-left: 15px;
-            padding-right: 15px;
-        }
-        html[dir="rtl"] .header-top-info .section-divider {
-            border-inline-start: none;
-            border-inline-end: 1px solid #ddd;
-        }
-        html[dir="rtl"] .header-top-info .contact-icon {
-            margin-inline-end: 0;
-            margin-inline-start: 15px;
-        }
-        html[dir="rtl"] .header-top-info .contact-details {
-            text-align: right;
-        }
-        html[dir="rtl"] .header-top-info .vision-logo-container {
-            border-inline-start: none;
-            border-inline-end: 1px solid #ddd;
-            padding-inline-start: 0;
-            padding-inline-end: 20px;
-        }
-        html[dir="rtl"] .header-top-info .kaauh-logo-container {
-            border-inline-start: none;
-            border-inline-end: 1px solid #ddd;
-            padding-inline-start: 0;
-            padding-inline-end: 20px;
-        }
-        html[dir="rtl"] .header-top-info .kaauh-logo-container img {
-            margin-inline-end: 0;
-            margin-inline-start: 10px;
-        }
-        html[dir="rtl"] .header-top-info .hospital-text {
-            text-align: right;
-        }
-        html[dir="rtl"] .navbar-main .nav-link {
-            border-inline-end: none;
-            border-inline-start: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        html[dir="rtl"] .navbar-main .nav-link:hover,
-        html[dir="rtl"] .navbar-main .nav-link.active {
-            border-inline-start: 1px solid var(--kaauh-dark-nav-active);
-        }
-        html[dir="rtl"] .nav-icons i {
-            margin-inline-start: 10px;
-            margin-inline-end: 0;
-        }
-        html[dir="rtl"] .top-bar .social-icons a {
-            margin-inline-start: 0;
-            margin-inline-end: 10px;
-        }
-        html[dir="rtl"] .footer-main .social-icons a {
-            margin-inline-start: 15px;
-            margin-inline-end: 0;
-        }
-
-        /* === Responsive Adjustments for Small Screens === */
-        @media (max-width: 991.98px) {
-            .header-top-info .max-width-container {
-                flex-direction: column !important;
-                align-items: flex-start !important;
-                gap: 15px;
-            }
-
-            .header-top-info .follow-us-section,
-            .header-top-info .d-flex.align-items-center.flex-grow-1.justify-content-end {
-                width: 100%;
-                justify-content: space-between !important;
-            }
-
-            .header-top-info .contact-block,
-            .header-top-info .logo-section {
-                flex-wrap: wrap;
-                gap: 10px;
-            }
-
-            .header-top-info .section-divider {
-                display: none;
-            }
-
-            .header-top-info .kaauh-logo-container img {
-                max-height: 60px;
-            }
-
-            .header-top-info .hospital-text .ar,
-            .header-top-info .hospital-text .en {
-                font-size: 0.9rem;
-            }
-
-            .header-top-info .contact-icon {
-                font-size: 1.5rem;
-            }
-
-            .header-top-info .contact-icon-block {
-                min-height: auto;
-                padding: 8px 0;
-            }
-        }
-
-        @media (max-width: 575.98px) {
-            .header-top-info .kaauh-logo-container,
-            .header-top-info .vision-logo-container {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 8px;
-            }
-
-            .header-top-info .hospital-text {
-                text-align: center !important;
-            }
-
-            .header-top-info .kaauh-logo-container img {
-                max-height: 50px;
-            }
-
-            .header-top-info .follow-us-section span,
-            .header-top-info .contact-details span {
-                font-size: 0.85rem;
-            }
-
-            .header-top-info .social-icon-circle {
-                width: 26px;
-                height: 26px;
-                font-size: 0.85rem;
-            }
-
-            .hero-content h1 {
-                font-size: 2rem;
-            }
-        }
-    </style>
-    {% block customCSS %}{% endblock %}
-</head>
-<body class="d-flex flex-column min-vh-100">
-
-    <!-- Responsive Header Top Info -->
-    <div class="header-top-info">
-        <div class="max-width-container d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
-
-            <div class="follow-us-section d-flex flex-wrap align-items-center gap-2">
-                <span>{% trans "Follow Us On:" %}</span>
-                <div class="d-flex gap-2">
-                    <a href="#" class="social-icon-circle"><i class="fab fa-facebook-f"></i></a>
-                    <a href="#" class="social-icon-circle"><i class="fab fa-twitter"></i></a>
-                    <a href="#" class="social-icon-circle"><i class="fab fa-instagram"></i></a>
-                </div>
-            </div>
-
-            <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center gap-3 w-100 w-md-auto">
-                <div class="d-flex flex-wrap justify-content-between gap-3">
-                    <div class="contact-icon-block d-flex align-items-center">
-                        <i class="fas fa-headset contact-icon"></i>
-                        <div class="contact-details ms-2">
-                            <span>24/7 {% trans "Online Support" %}</span>
-                            <span class="d-block d-md-inline">info@kaauh.edu.sa</span>
-                        </div>
-                    </div>
-
-                    <div class="contact-icon-block d-flex align-items-center">
-                        <i class="fas fa-phone-alt contact-icon"></i>
-                        <div class="contact-details ms-2">
-                            <span>{% trans "Contact Us Free" %}</span>
-                            <span class="d-block d-md-inline">+966118200000</span>
-                        </div>
-                    </div>
-                </div>
-
-               
-                <div class="logo-section d-flex flex-wrap align-items-center gap-3 mt-2 mt-md-0">
-                   
-                    <div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2">
-                        <img src="{% static 'image/vision.svg' %}" alt="Vision 2030" class="vision-logo" style="min-height: 70px; min-width:300px;">
-                    </div>
-                </div>
-
-                <div class="logo-section d-flex flex-wrap align-items-center gap-3 mt-2 mt-md-0  ms-6">
-                    
-                    <div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2 ms-4">
-                        <div class="hospital-text text-center text-md-start me-3">
-                            <div class="ar">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
-                            <div class="ar">ومستشفى الملك عبدالله بن عبدالعزيز التخصصي</div>
-                            <div class="en">Princess Nourah bint Abdulrahman University</div>
-                            <div class="en">King Abdullah bin Abdulaziz University Hospital</div>
-                        </div>
-                        <img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 80px;min-width:80px;">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Main Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-dark navbar-main">
-        <div class="max-width-container d-flex justify-content-between align-items-stretch w-100">
-            <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#publicNavCollapse"
-                aria-controls="publicNavCollapse" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-
-            <div class="collapse navbar-collapse" id="publicNavCollapse">
-                <ul class="navbar-nav mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link" href="#">{% trans "About KAAUH" %}</a>
-                    </li>
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            {% trans "Patients & Visitor" %}
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li><a class="dropdown-item" href="#">{% trans "Find a Doctor" %}</a></li>
-                            <li><a class="dropdown-item" href="#">{% trans "Visiting Hours" %}</a></li>
-                        </ul>
-                    </li>
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            {% trans "Training & Education" %}
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li><a class="dropdown-item" href="#">{% trans "Courses" %}</a></li>
-                            <li><a class="dropdown-item" href="#">{% trans "Residency" %}</a></li>
-                        </ul>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link active" href="{% url 'kaauh_career' %}">{% trans "Careers" %}</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#">{% trans "Gallery" %}</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#">{% trans "Connect" %}</a>
-                    </li>
-                </ul>
-            </div>
-            
-            <div class="nav-icons-group d-none d-lg-flex">
-                <a href="#" class="nav-icon profile-icon"><i class="fas fa-user-circle"></i></a>
-                <a href="#" class="nav-icon lang-switch">ع</a>
-            </div>
-        </div>
-    </nav>
-
-    <!-- Main Content -->
-    <main class="flex-grow-1">
-        {% block content %}{% endblock %}
-    </main>
-
-    <!-- Footer -->
-    <footer class="footer-main mt-auto">
-        <div class="max-width-container">
-            <div class="row">
-                <div class="col-lg-3 col-md-6 app-download">
-                    <h5 class="text-white-50">{% trans "Download our mobile app" %}</h5>
-                    <p>{% trans "Get the latest updates and services on the go." %}</p>
-                    <div class="d-flex flex-column gap-2 mt-3">
-                        <a href="#"><img src="{% static 'image/google-play-badge.png' %}" alt="Google Play" class="play-store-badge"></a>
-                        <a href="#"><img src="{% static 'image/app-store-badge.png' %}" alt="App Store" class="app-store-badge"></a>
-                    </div>
-                </div>
-
-                <div class="col-lg-2 col-md-6">
-                    <h5>{% trans "Information" %}</h5>
-                    <ul class="list-unstyled">
-                        <li><a href="#">{% trans "About the Hospital" %}</a></li>
-                        <li><a href="{% url 'kaauh_career' %}">{% trans "Careers" %}</a></li>
-                        <li><a href="#">{% trans "Today's Clinic Hours" %}</a></li>
-                        <li><a href="#">{% trans "Support Us" %}</a></li>
-                    </ul>
-                </div>
-
-                <div class="col-lg-3 col-md-6">
-                    <h5>{% trans "Need Help" %}</h5>
-                    <ul class="list-unstyled">
-                        <li><a href="#">{% trans "Support and Services" %}</a></li>
-                        <li><a href="#">{% trans "Contact Us" %}</a></li>
-                        <li><a href="#">{% trans "FAQ" %}</a></li>
-                        <li><a href="#">{% trans "Sitemap" %}</a></li>
-                    </ul>
-                    <div class="contact-info mt-3">
-                        <i class="fas fa-phone-alt me-2 text-white-50"></i> <strong class="text-white">966118200000</strong><br>
-                        <i class="fas fa-envelope me-2 text-white-50"></i> <a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a>
-                    </div>
-                </div>
-
-                <div class="col-lg-4 col-md-6">
-                    <h5>{% trans "Contact & Address" %}</h5>
-                    <p>{% trans "KAAUH Campus, Riyadh, Saudi Arabia" %}</p>
-                    <p class="small text-white-50">{% trans "Postal Code 11564, King Fahd Road, Al-Rabi District." %}</p>
-
-                    <div class="d-flex align-items-center justify-content-start gap-3 mt-4">
-                        <img src="{% static 'image/vision.svg' %}" alt="Vision 2030" class="vision-logo">
-                        <div class="social-icons">
-                            <a href="#"><i class="fab fa-facebook-f"></i></a>
-                            <a href="#"><i class="fab fa-twitter"></i></a>
-                            <a href="#"><i class="fab fa-instagram"></i></a>
-                            <a href="#"><i class="fab fa-youtube"></i></a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="footer-bottom mt-5">
-            <div class="max-width-container d-flex justify-content-between align-items-center flex-wrap">
-                <p class="mb-0">
-                    &copy; {% now "Y" %} {% trans "King Abdullah Academic University Hospital (KAAUH)." %} 
-                    {% trans "All rights reserved." %}
-                </p>
-                <p class="mb-0">
-                    {% trans "Powered by" %} <strong class="text-white">Tenhal</strong>
-                </p>
-            </div>
-        </div>
-    </footer>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    {% block customJS %}{% endblock %}
-</body>
-</html>
\ No newline at end of file
diff --git a/templates/jobs/career.html b/templates/jobs/career.html
index 0c1d06c..62768fc 100644
--- a/templates/jobs/career.html
+++ b/templates/jobs/career.html
@@ -1,154 +1,568 @@
-{% extends "jobs/base_public.html" %}
-{% load i18n static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="author" content="KAAUH" />
+    <meta name="title" content="Regions no.1 University Hospital">
+    <meta name="description" content="King Abdullah bin Abdulaziz University Hospital is among the premier and esteemed institutions. KAAUH is the epitome of education in the healthcare sector." />
+    <meta name="keywords" content="Best hospital in Saudi Arabia,Healthcare providers near me,Top healthcare providers,Health care services in saudi arabia,Best hospital in saudi arabia,Healthcare system in saudi arabia" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>King Abdullah bin Abdulaziz University Hospital</title>
+    <link rel="apple-touch-icon" sizes="57x57" href="https://kaauh.edu.sa/assets/images/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="https://kaauh.edu.sa/assets/images/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="https://kaauh.edu.sa/assets/images/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="https://kaauh.edu.sa/assets/images/apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="https://kaauh.edu.sa/assets/images/apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="https://kaauh.edu.sa/assets/images/apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="https://kaauh.edu.sa/assets/images/apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="https://kaauh.edu.sa/assets/images/apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="https://kaauh.edu.sa/assets/images/apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="https://kaauh.edu.sa/assets/images/android-icon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="https://kaauh.edu.sa/assets/images/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="https://kaauh.edu.sa/assets/images/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="https://kaauh.edu.sa/assets/images/favicon-16x16.png" />
+    <link rel="manifest" href="https://kaauh.edu.sa/assets/images/manifest.json" />
+    <link href="https://kaauh.edu.sa/assets/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://kaauh.edu.sa/assets/fonts/css/all.min.css" />
+    <link href="https://kaauh.edu.sa/assets/css/flaticon.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/assets/css/menu.css" rel="stylesheet" />
+    <link id="effect" href="https://kaauh.edu.sa/assets/css/dropdown-effects/fade-down.css" media="all" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/assets/css/magnific-popup.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/assets/css/owl.carousel.min.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/assets/css/owl.theme.default.min.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/assets/css/animate.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/assets/css/normalize.min.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/assets/css/style.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/assets/css/responsive.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/assets/css/custom.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/assets/css/sweetalert2.min.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/css/toastmin.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/css/select2min.css" rel="stylesheet" />
+    <link href="https://kaauh.edu.sa/assets/css/bootstrap-datepicker.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <style>
+        b{font-weight: bold;}
+        @font-face {font-family: Poppins-Regular;src: url("https://kaauh.edu.sa/assets/fonts/POPPINS-REGULAR.TTF");}
+        @font-face {font-family: Poppins-Extrabold;src: url("https://kaauh.edu.sa/assets/fonts/POPPINS-EXTRABOLD.TTF");}
+        @font-face {font-family: Rajdhani-Regular;src: url("https://kaauh.edu.sa/assets/fonts/RAJDHANI-REGULAR.TTF");}
+        @font-face {font-family: Rajdhani-Semibold;src: url("https://kaauh.edu.sa/assets/fonts/RAJDHANI-SEMIBOLD.TTF");}
+        @font-face {font-family: Rajdhani-Bold;src: url("https://kaauh.edu.sa/assets/fonts/RAJDHANI-BOLD.TTF");}
+        @font-face {font-family: Serti;src: url("https://kaauh.edu.sa/assets/fonts/SERTI.OTF");}
+        @font-face {font-family: Serti-bold;src: url("https://kaauh.edu.sa/assets/fonts/SERTIBOLD.OTF");}
+        .lang-area span {background: #fff;width: 38px;height: 38px;display: block;border-radius: 50%;font-size: 24px;font-weight: 600;padding: 0px 14px;}
+        body.yf_rtl .lang-area span {background: #fff;width: 38px;height: 38px;display: block;border-radius: 50%;font-size: 17px;font-weight: 600;padding:7px 9px;}
+        @media only screen and (max-width: 767px){/* body .lang-area {display : none !important} */}
+    </style>
+</head>
+<body class="" data-spy="scroll" data-target="#myScrollspy" data-offset="1" >
+    <div id="loader-wrapper">
+        <div id="loader">
+            <div class="loader-inner" style="background:url(https://kaauh.edu.sa/assets/images/loader-kaauh.png);background-size: contain; background-position: center !important;"></div>
+        </div>
+    </div>
+    <div id="page" class="page">
+        <header id="header-2" class="header">
+            <div class="wsmobileheader clearfix">
+                <a id="wsnavtoggle" class="wsanimated-arrow"><span></span></a>
+                <span class="smllogo"><a href="https://kaauh.edu.sa"><img src="https://kaauh.edu.sa/assets/images/logo.png" width="180" height="40" alt="mobile-logo"></a></span>
+                <div class="lang-area" style="float: right;height: 60px;display: flex;justify-content: center;align-items: center">
+                    <a title="عربى" href="https://kaauh.edu.sa/changelanguage/ar"><span>ع</span></a>
+                </div>
+            </div>
+            <div class="hero-widget clearfix">
+                <div class="shape-img"><img src="https://kaauh.edu.sa/assets/images/hos.svg" alt=""></div>
+                <div class="container-fluid">
+                    <div class="row d-flex align-items-center">
+                        <div class="col-md-9 col-xl-9">
+                            <div class="row align-items-center">
+                                <div class="col-md-4">
+                                    <div class="header-widget icon-xs">
+                                        <div class="socials-links">
+                                            <h3>Follow us on :</h3>
+                                            <ul class="foo-socials text-center clearfix">
+                                                <li><a href="javascript:;" target="_blank" class="ico-facebook"><i class="fab fa-facebook-f"></i></a></li>
+                                                <li><a href="https://twitter.com/KAAUH_PNU?lang=ar" target="_blank" class="ico-twitter"><i class="fab fa-twitter"></i></a></li>
+                                                <li><a href="https://www.instagram.com/kaauh_pnu/" target="_blank" class="ico-insta"><i class="fab fa-instagram"></i></a></li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="email-and-call">
+                                        <div class="header-widget icon-xs online_support">
+                                            <span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/Customer-care.svg" alt="" /></span>
+                                            <div class="header-widget-txt">
+                                                <p>24x7 online Support</p>
+                                                <p class="header-widget-phone steelblue-color"><a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a></p>
+                                            </div>
+                                        </div>
+                                        <div class="header-widget icon-xs online_support call-support">
+                                            <span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/call.svg" alt="" /></span>
+                                            <div class="header-widget-txt">
+                                                <p>Contact Us Free</p>
+                                                <p class="header-widget-phone steelblue-color"><a href="tel:+966118200000">+966118200000</a></p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-md-2">
+                                    <div class="lang-with-vision-logo">
+                                        <div class="saudi-log"><img src="https://kaauh.edu.sa/assets/images/vision.svg" alt=""></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3 col-xl-3 logo-col">
+                            <div class="desktoplogo"><a href="https://kaauh.edu.sa"><img src="https://kaauh.edu.sa/assets/images/logo.png" alt="header-logo" /></a></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="wsmainfull menu clearfix original" style="visibility: visible;">
+                <div class="container-fluid">
+                    <div class="wsmainwp clearfix">
+                        <nav class="wsmenu clearfix">
+                            <div class="overlapblackbg"></div>
+                            <ul class="wsmenu-list">
+                                <li class="fist"><a href="https://kaauh.edu.sa/about-us">About KAAUH</a></li>
+                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Patients &amp; Visitor<span class="wsarrow"></span></a>
+                                    <ul class="sub-menu">
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/registration-and-appointments">Registration &amp; Appointments</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/meet-your-doctor">Meet your doctor</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/eligibility">Eligibility</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/visiting-hours">Visiting hours</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-rights-and-responsibilities">Patient rights &amp; responsibilities</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-experience">Patient Experience</a></li>
+                                    </ul>
+                                </li>
+                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Training &amp; Education<span class="wsarrow"></span></a>
+                                    <ul class="sub-menu">
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/training-and-development">Training &amp; Development</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/student-training-office">Student Training Office</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/scholarship-and-postgraduate">Scholarship &amp; Postgraduate</a></li>
+                                    </ul>
+                                </li>
+                                <li><a href="{% url 'kaauh_career' %}">Careers</a></li>
+                                <li><a href="https://kaauh.edu.sa/gallery">Gallery</a></li>
+                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Connect<span class="wsarrow"></span></a>
+                                    <ul class="sub-menu">
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/need-help">Need Help</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/contact">Contact Us</a></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </nav>
+                        <div class="lang-area d-none d-sm-none d-md-flex" style="float: right;height: 60px;display: flex;justify-content: center;align-items: center">
+                            <a title="عربى" href='https://kaauh.edu.sa/changelanguage/ar'><span>ع</span></a>
+                        </div>
+                        
+                        <div class="serch-area appointment-are"><a href="javascript:;" data-toggle="modal" data-target="#appointment-check" data-placement="top" title="Our Appointment"><i class="fa fa-user"></i></a></div>
+                        </div>
+                </div>
+            </div>
+            <div class="wsmainfull menu clearfix cloned" style="position: fixed; top: 0px; margin-top: 0px; z-index: 500; left: 0px; width: 1519.2px; display: none;">
+                <div class="container-fluid">
+                    <div class="wsmainwp clearfix">
+                        <nav class="wsmenu clearfix">
+                            <div class="overlapblackbg"></div>
+                            <ul class="wsmenu-list">
+                                <li class="fist"><a href="https://web.archive.org/web/20240215180141/https://www.kaauh.edu.sa/about-us">About KAAUH</a></li>
+                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Patients &amp; Visitor<span class="wsarrow"></span></a>
+                                    <ul class="sub-menu">
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/registration-and-appointments">Registration &amp; Appointments</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/meet-your-doctor">Meet your doctor</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/eligibility">Eligibility</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/visiting-hours">Visiting hours</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-rights-and-responsibilities">Patient rights &amp; responsibilities</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-experience">Patient Experience</a></li>
+                                    </ul>
+                                </li>
+                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Training &amp; Education<span class="wsarrow"></span></a>
+                                    <ul class="sub-menu">
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/training-and-development">Training &amp; Development</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/student-training-office">Student Training Office</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/scholarship-and-postgraduate">Scholarship &amp; Postgraduate</a></li>
+                                    </ul>
+                                </li>
+                                <li><a href="{% url 'kaauh_career' %}">Careers</a></li>
+                                <li><a href="https://kaauh.edu.sa/gallery">Gallery</a></li>
+                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Connect<span class="wsarrow"></span></a>
+                                    <ul class="sub-menu">
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/need-help">Need Help</a></li>
+                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/contact">Contact Us</a></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </nav>
+                        <div class="lang-area d-none d-sm-none d-md-flex" style="float: right;height: 60px;display: flex;justify-content: center;align-items: center">
+                            <a title="عربى" href='https://kaauh.edu.sa/changelanguage/ar'><span>ع</span></a>
+                        </div>
+                        <div class="serch-area"><a href="javascript:;" data-toggle="modal" data-target="#serch"><i class="fa fa-magnifying-glass"></i></a></div>
+                        <div class="serch-area appointment-are"><a href="javascript:;" data-toggle="modal" data-target="#appointment-check" data-placement="top" title="Our Appointment"><i class="fa fa-user"></i></a></div>
+                        </div>
+                </div>
+            </div>
+            </header>
+        <div class="breadcrumb-area dark-bg" style="background:url(https://kaauh.edu.sa/assets/images/career_page.jpg)">
+            <div class="container">
+                <ul class="page-list">
+                    <li class="item-home"><a class="bread-link" href="https://kaauh.edu.sa" title="Home">Home</a></li>
+                </ul>
+                <h1 class="breadcrumb-title">Careers</h1>
+            </div>
+        </div>
+        <div class="career_page_section">
+            <div class="container mb-5 mt-3">
+                <div class="card">
+                    {% load i18n %}
+<div class="table-responsive">
+    <table class="table table-stripped w-100" id="career_table">
+        <thead>
+            <tr>
+                <th class="col-job-id">{% trans 'Job ID#' %}</th>
+                <th class="col-job-title">{% trans 'Job Title' %}</th>
+                <th class="col-hiring"><i class="fa fa-user" style="color:#00636e"></i> {% trans 'Hiring' %}</th>
+                <th class="col-date d-none d-md-table-cell"><i class="fa fa-calendar" style="color:#00636e"></i> {% trans 'Posting Date' %}</th>
+                <th class="col-date d-none d-sm-table-cell"><i class="fa fa-calendar" style="color:#00636e"></i> {% trans 'Apply Before' %}</th>
+                <th class="col-link"><i class="fa fa-link" style="color:#00636e"></i> {% trans 'Link' %}</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for job in active_jobs %}
+            <tr>
+                {# The columns below directly correspond to the headers above #}
+                
+                <td class="col-job-id" data-label="{% trans 'Job ID#' %}">{{ job.internal_job_id }}</td>
+                
+                <td class="col-job-title" data-label="{% trans 'Job Title' %}">{{ job.title }}</td>
+                
+                <td class="col-hiring" data-label="{% trans 'Hiring' %}">{{ job.open_positions }}</td>
+                
+                {# Hidden on small screens to prioritize space #}
+                <td class="col-date d-none d-md-table-cell" data-label="{% trans 'Posting Date' %}">{{ job.application_start_date }}</td>
+                
+                {# Hidden only on extra-small screens #}
+                <td class="col-date d-none d-sm-table-cell" data-label="{% trans 'Apply Before' %}">{{ job.application_deadline }}</td>
+                
+                <td class="col-link" data-label="{% trans 'Link' %}">
+                    <a style="background-color : #00636e;color : #FFF; padding : 4px 10px; white-space: nowrap;" 
+                       href="{% url 'job_detail_candidate' job.slug %}" 
+                       target="_blank">
+                       {% trans 'Apply' %}
+                    </a>
+                </td>
+            </tr>
+            {% endfor %}
+            
+        </tbody>
+    </table>
+</div>
+
 
-{% block customCSS %}
 <style>
-    /* Custom style for the job list table */
-    .job-listing-section {
-        padding: 3rem 0;
-        background-color: white;
-    }
-    .job-table {
-        border-collapse: separate;
-        border-spacing: 0;
-        overflow: hidden;
-        border-radius: 8px;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
-        width: 100%;
-    }
-    .job-table thead th {
-        background-color: var(--kaauh-teal-dark);
-        color: white;
-        font-weight: 600;
-        padding: 1rem 1.5rem;
-        text-align: start;
-        border-bottom: 2px solid var(--kaauh-teal);
-    }
-    .job-table tbody td {
-        padding: 1rem 1.5rem;
-        vertical-align: middle;
-        border-bottom: 1px solid var(--kaauh-border);
-        font-size: 0.95rem;
-        font-weight: 500;
-        color: var(--kaauh-primary-text);
-    }
-    .job-table tbody tr:hover {
-        background-color: var(--kaauh-light-bg);
-    }
-    .job-link-cell {
-        font-size: 0.85rem;
-        text-align: center; /* Center the button in its cell */
-    }
-    .job-link-cell i {
-        color: var(--kaauh-teal);
-    }
-
-    /* Apply Button */
-    .btn-apply {
-        background-color: var(--kaauh-teal);
-        color: white;
-        font-weight: 600;
-        padding: 0.4rem 1.2rem;
-        border-radius: 5px;
-        transition: background-color 0.2s;
-        min-width: 80px;
-        display: inline-block;
-        text-align: center;
-        text-decoration: none;
-        border: 1px solid var(--kaauh-teal);
-    }
-    .btn-apply:hover {
-        background-color: var(--kaauh-teal-dark);
-        color: white;
-    }
-    .hero-section{
-        background-image: url("{% static 'image/kaauh_banner.png' %}");
-        background-size: cover;
-        background-position: center;
-    }
-
-    /* Hero Text Positioning */
-    .hero-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-    .arabic-title {
-        font-size: 4rem;
-        font-weight: 900;
-        line-height: 1;
-        margin-top: 0.5rem;
-    }
-
-    /* RTL specific table alignment */
-    html[dir="rtl"] .job-table thead th {
-        text-align: right;
-    }
-    html[dir="rtl"] .job-link-cell {
-        text-align: center; /* Ensure button remains centered in RTL */
+    /*
+     * Custom CSS for mobile stacking (displaying the table as a list) on screens <= 576px.
+     */
+    @media (max-width: 576px) {
+        .table thead {
+            display: none; /* Hide header row */
+        }
+        .table tr {
+            display: block;
+            margin-bottom: 1rem;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        .table td {
+            display: block;
+            text-align: right;
+            padding-left: 50% !important;
+            position: relative;
+            border-top: none;
+            word-wrap: break-word;
+        }
+        .table td::before {
+            /* This is where the magic happens: it pulls the translated header text from the data-label attribute */
+            content: attr(data-label);
+            position: absolute;
+            left: 6px;
+            width: 45%;
+            padding-right: 10px;
+            white-space: nowrap;
+            text-align: left;
+            font-weight: bold;
+        }
+        
+        /* Ensure the link button is visible and positioned correctly */
+        .col-link a {
+            display: inline-block;
+            margin: 5px 0;
+        }
     }
 </style>
-{% endblock %}
-
-{% block content %}
 
 
-    <div class="hero-section">
-        <div class="hero-overlay"></div>
-        <div class="hero-content">
-            <p class="text-uppercase small fw-bold mb-1">
-                {% trans "Home Page" %}
-            </p>
-            <h1 class="arabic-title">
-                {% if LANGUAGE_CODE == 'ar' %}التوظيف{% else %}Careers{% endif %}
-            </h1>
-        </div>
-    </div>
-
-    <div class="job-listing-section">
-        <div class="max-width-container">
-            <h2 class="h3 mb-4 text-center" style="color: var(--kaauh-teal-dark); font-weight: 700;">
-                {% trans "Open Positions" %}
-            </h2>
-
-            <div class="table-responsive">
-                <table class="job-table">
-                    <thead>
-                        <tr>
-                            <th scope="col" style="width: 10%;">{% trans "Job ID" %}</th>
-                            <th scope="col">{% trans "Job Title" %}</th>
-                            <th scope="col" style="width: 10%;">{% trans "Hiring" %}</th>
-                            <th scope="col" style="width: 15%;">{% trans "Posting Date" %}</th>
-                            <th scope="col" style="width: 15%;">{% trans "Apply Before" %}</th>
-                            <th scope="col" style="width: 10%;">{% trans "Apply" %}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% comment %} Django loop would typically go here: {% for job in jobs %} {% endcomment %}
-                        {% for job in active_jobs %}
-                        <tr>
-                            <td class="text-nowrap">{{job.internal_job_id}}</td>
-                            <td class="text-nowrap">{{job.title}}</td>
-                            <td>{{job.open_positions}}</td>
-                            <td>{{job.application_start_date}}</td>
-                            <td>{{job.application_deadline}}</td>
-                            <td class="job-link-cell">
-                                <a href="{% url 'job_detail_candidate' job.slug %}" class="btn-apply">{% trans "Apply" %}</a>
-                            </td>
-                        </tr>
-                        {% endfor %}
-                        
-                    </tbody>
-                </table>
-            </div>
-
-            <div class="text-center mt-5">
-                <a href="#" class="btn btn-lg btn-secondary">
-                    <i class="fas fa-list-alt me-2"></i> {% trans "View All Openings" %}
-                </a>
+                </div>
             </div>
         </div>
+        <footer id="footer-1" class="bg-image wide-40 footer division">
+            <div class="footer-center-logo"><a href="/"><img src="https://kaauh.edu.sa/assets/images/logo.png" alt="header-logo" /></a></div>
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-md-6 col-lg-3">
+                        <div class="footer-info mb-30">
+                            <div class="lang-with-vision-logo footer-lang"><img src="https://kaauh.edu.sa/assets/images/vision-f.svg" alt="footer-logo" width="180" height="40"></div>
+                            <h5 class="h5-xs mb-0">Address</h5>
+                            <p class="p-sm mt-10">Airport Road, King Khalid International Airport, Riyadh 11564, Saudi Arabia</p>
+                            <h5 class="h5-xs">Follow us on</h5>
+                            <div class="footer-socials-links mt-20">
+                                <ul class="foo-socials text-center clearfix">
+                                    <li><a href="javascript:;" target="_blank" class="ico-facebook"><i class="fa-brands fa-facebook-f"></i></a></li>
+                                    <li><a href="https://twitter.com/KAAUH_PNU?lang=ar" target="_blank" class="ico-twitter"><i class="fa-brands fa-twitter"></i></a></li>
+                                    <li><a href="https://www.instagram.com/kaauh_pnu/" target="_blank" class="ico-insta"><i class="fab fa-instagram"></i></a></li>
+                                    <li><a href="https://mail.kaauh.edu.sa/" target="_blank" class="ico-insta"><i class="fa fa-envelope"></i></a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-lg-3">
+                        <div class="footer-box mb-30 need-help f-space">
+                            <h5 class="h5-xs">Need help</h5>
+                            <p class="sales-services">Sales &amp; Service Support</p>
+                            <a href="tel:+966118200000">+966118200000</a><br /><br />
+                            <p>Monday -Friday: 9:00-20:00<br />Saturday: 9:00-15:00</p>
+                            <p class="foo-email mt-20">Email: <a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a></p>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-lg-2">
+                        <div class="footer-box mb-30 info-links f-space">
+                            <h5 class="h5-xs">Information</h5>
+                            <ul>
+                                <li><a href="https://kaauh.edu.sa/about-us">About KAAUH</a></li>
+                                <li><a href="{% url 'kaauh_career' %}">Careers</a></li>
+                                <li><a href="https://kaauh.edu.sa/gallery">Gallery</a></li>
+                                <li><a href="https://kaauh.edu.sa/need-help">Need Help</a></li>
+                                <li><a href="https://kaauh.edu.sa/contact">Contact Us</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-lg-4">
+                        <div class="footer-box mb-30 apps-contact-info f-space">
+                            <h5 class="h5-xs">Download Our Mobile App</h5>
+                            <ul>
+                                <li><a href="https://apps.apple.com/us/app/kaauh-patient/id1502802835" target="_blank"><img src="https://kaauh.edu.sa/assets/images/app1.png" alt="" /></a></li>
+                                <li class="adroid"><a href="javascript:;"><img src="https://kaauh.edu.sa/assets/images/app2.png" alt="" /></a></li>
+                            </ul>
+                            <div class="email-and-call">
+                                <div class="header-widget icon-xs online_support">
+                                    <span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/support-f.svg" alt="" /></span>
+                                    <div class="header-widget-txt">
+                                        <p>24x7 online Support</p>
+                                        <p class="header-widget-phone steelblue-color"><a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a></p>
+                                    </div>
+                                </div>
+                                <div class="header-widget icon-xs online_support call-support">
+                                    <span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/call-f.svg" alt="" /></span>
+                                    <div class="header-widget-txt">
+                                        <p>Contact Us Free</p>
+                                        <p class="header-widget-phone steelblue-color"><a href="tel:+966118200000">+966118200000</a></p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="ads_banner"><img src="https://kaauh.edu.sa/ads.jpg" alt=""></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom-footer">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <p class="footer-copyright">&copy; 2022 Kaauh. All Rights Reserved</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            </footer>
+        <div class="modal fade commom-popup" id="serch">
+            <div class="modal-dialog modal-lg center">
+                <div class="modal-content">
+                    <div class="modal-body">
+                        <div class="form-area">
+                            <div class="search-input">
+                                <div class="form-group">
+                                    <input type="text" name="" class="form-control" placeholder="Seaching......" required="" />
+                                    <button><i class="fa fa-magnifying-glass"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal fade commom-popup" id="appointment-check">
+            <div class="modal-dialog modal-md center">
+                <div class="modal-content">
+                    <div class="modal-body">
+                        <div class="form-area">
+                            <div class="text-center"><img src="https://kaauh.edu.sa/assets/images/logo-2.png" alt="header-logo" width="15%"/></div>
+                            <h2 class="text-center">Login With Patient Mobile</h2>
+                            <div class="search-input">
+                                <div class="form-group" id="enterMobile">
+                                    <input type="text" id="mobile_numner" class="form-control" placeholder="Mobile number"/>
+                                    <button onclick="sendOtpToMobile()">Request OTP <i class="fa fa-location-arrow"></i></button>
+                                </div>
+                                <div class="form-group d-none" id="enterOTP">
+                                    <input type="text" id="mobile_otp" class="form-control" placeholder="Enter OTP" />
+                                    <button onclick="verifyMobileOtp()">Verify <i class="fa fa-location-arrow"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal fade commom-popup" id="referal">
+            <div class="modal-dialog modal-xl">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title"><a href="javascript:;" data-dismiss="modal"><i class="fa fa-arrow-left"></i></a> Patient Referral</h4>
+                        <img src="https://kaauh.edu.sa/assets/images/logo.png" alt="header-logo" />
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="form-area">
+                            <div class="row">
+                                <div class="col-md-12">
+                                    <div class="form-holder">
+                                        <form name="contactForm" method="POST" action="https://kaauh.edu.sa/patient-referral-form" class="row contact-form">
+                                            <input type="hidden" name="_token" value="HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7">
+                                            <ul>
+                                                <li>Authorize healthcare providers to administer medical treatment, and/or perform diagnostic tests as may be deemed necessary or advisable in the diagnosis and treatment required.</li>
+                                                <li>I also agree:<div claa="space-l"><ul><li>(a) To have the patient transferred to another facility if medically needed. </li><li>(b) To vacate the room for medical isolation purposes or other treatment reasons.</li></ul></div></li>
+                                                <li>I am aware that the hospital provide a safe for keeping personal belongings (money, jewelry, glasses, mobile,phone, documents, others). Therefore, the hospital will not be responsible for the loss of any belongings ifnot placed in the safe.</li>
+                                                <li>I am aware that the hospital is an Academic Institution and it is likely that non-consultant physicians willparticipate in healthcare under the supervision of the Consultant.</li>
+                                                <li>I have received Patient & Family’s Bill of Rights booklet, and | was briefed on its contents by the assignedemployee upon Admission/Registration.</li>
+                                                <li>I understand that my discharge from the hospital is recommendedby my attending physician based on my medical condition. Therefore, | agree to leave the hospital on thedate of discharge.</li>
+                                            </ul>
+                                            <div class="col-lg-12">
+                                                <div class="form-check">
+                                                    <label class="form-check-label"><input required class="form-check-input" type="checkbox" id="check1">I have read and agree to all information mentioned above</label>
+                                                </div>
+                                            </div>
+                                            <div class="col-lg-12 mt-15 form-btn">
+                                                <button type="submit" class="btn btn-blue blue-hover submit">Submit new referral request</button>
+                                            </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal fade commom-popup" id="doctorLogin">
+            <div class="modal-dialog modal-md center">
+                <div class="modal-content">
+                    <div class="modal-body">
+                        <div class="form-area">
+                            <div class="search-input">
+                                <div class="text-center"><img src="https://kaauh.edu.sa/assets/images/logo-2.png" alt="header-logo" width="15%"/></div>
+                                <h2 class="text-center">Login With Doctor Email</h2>
+                                <form method="POST" action="https://kaauh.edu.sa/doctorLogin" class="user" autocomplete="off">
+                                    <input type="hidden" name="_token" value="HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7">
+                                    <div class="form-group">
+                                        <input type="text" name="email" class="form-control" placeholder="Email" >
+                                        <input type="password" name="password" class="form-control" placeholder="Password">
+                                        <button type="submit">Login <i class="fas fa-sign-in-alt"></i></button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="need_lelp_buttn">
+            <ul class="circle">
+                <li><a href="https://kaauh.edu.sa/need-help"><i class="fa fa-headphones"></i> </a> <span>Need Help</span></li>
+            </ul>
+        </div>
     </div>
-
-{% endblock %}
\ No newline at end of file
+    <script src="https://kaauh.edu.sa/assets/js/jquery-3.6.3.min.js"></script>
+    <script src="https://kaauh.edu.sa/assets/js/bootstrap.min.js"></script>
+    <script src="https://kaauh.edu.sa/assets/js/modernizr.custom.js"></script>
+    <script src="https://kaauh.edu.sa/assets/js/menu.js"></script>
+    <script src="https://kaauh.edu.sa/assets/js/sticky.js"></script>
+    <script src="https://kaauh.edu.sa/assets/js/materialize.js"></script>
+    <script src="https://kaauh.edu.sa/assets/js/owl.carousel.min.js"></script>
+    <script src="https://kaauh.edu.sa/assets/js/jquery.magnific-popup.min.js"></script>
+    <script src="https://kaauh.edu.sa/assets/js/imagesloaded.pkgd.min.js"></script>
+    <script src="https://kaauh.edu.sa/assets/js/wow.js"></script>
+    <script src="https://kaauh.edu.sa/assets/js/sweetalert2.min.js"></script>
+    <script src="https://kaauh.edu.sa/assets/js/bootstrap-datepicker.min.js"></script>
+    <script src="https://kaauh.edu.sa/js/toastmin.js"></script>
+    <script src="https://kaauh.edu.sa/js/select2min.js"></script>
+    <script>new WOW().init();</script>
+    <script></script>
+    <script>
+        var preloader = $('#loader-wrapper'),loader = preloader.find('.loader-inner');loader.fadeOut();preloader.delay(400).fadeOut('slow');
+        function sendOtpToMobile(){
+            let mobile_number = $('#mobile_numner').val();
+            mobile_number = mobile_number.replace(/\s/g, '')
+            if(mobile_number == ''){
+                Swal.fire({title: 'Warning',text: 'Mobile Number Required',icon: 'warning',confirmButtonText: 'OK'});
+                return false;
+            }
+            var regex = new RegExp(/^(009665|9665|\+9665|05|5)(5|0|3|6|4|9|1|8|7)([0-9]{7})$/);
+            if(!regex.test(mobile_number)){
+                Swal.fire({title: 'Warning',text: 'Invalid Mobile Number',icon: 'warning',confirmButtonText: 'OK'});
+                return false;
+            }
+            var url ="https://kaauh.edu.sa/otp-request";
+            $.post(url, {_token:"HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7",mobile:mobile_number,},
+            function (data) {
+                if (data=='true') {
+                    $('#enterOTP').removeClass('d-none');
+                    $('#enterMobile').addClass('d-none');
+                }else{
+                    console.log(data);
+                }
+            })
+        }
+        function verifyMobileOtp(){
+            let contact_number = $('#mobile_numner').val();
+            contact_number = contact_number.replace(/\s/g, '')
+            var otp=$('#mobile_otp').val();
+            var url ="https://kaauh.edu.sa/otp-request-verify";
+            $.post(url, {_token:"HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7",mobile:contact_number,otp:otp},
+            function (data) {
+                if (data=='true') {
+                    location.href = 'https://kaauh.edu.sa/appointments'
+                }else{
+                    console.log(data);
+                    Swal.fire({title: 'Warning',text: 'Invalid OTP',icon: 'warning',confirmButtonText: 'OK'});
+                }
+            })
+        }
+        var search = window.location.search;
+        var hrefname = window.location.href;
+        hrefname = hrefname.replace(search, '');
+        var active = $('[href="'+hrefname+'"]').closest('li');
+        if (active.parents('.sub-menu').length) {
+            active.parents('.sub-menu').parent('li').addClass('active');
+        }else{
+            $('[href="'+hrefname+'"]').closest('li').addClass('active');
+        }
+        $('#datepicker').datepicker({format: 'dd-mm-yyyy',autoclose:true,startDate: new Date()});
+        $('.datepicker_dob').datepicker({format: 'dd-mm-yyyy',autoclose:true,endDate:new Date()});
+        $('#datepicker_ref').datepicker({format: 'yyyy-mm-dd',autoclose:true,endDate: new Date()});
+        $('.image-link').magnificPopup({type: 'image'});
+        $('.video-popup1').magnificPopup({type: 'iframe',iframe: {patterns: {youtube: {index: 'youtube.com',src: 'https://www.youtube.com/embed/SZEflIVnhH8'}}}});
+        $('.datepicker_psd').datepicker({format: 'dd-mm-yyyy',autoclose:true,endDate:new Date()});
+    </script>
+    <script></script>
+    <script>$(".speciality").select2({tags: true});</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/jobs/job_detail.html b/templates/jobs/job_detail.html
index d0c57cb..1d0ff7b 100644
--- a/templates/jobs/job_detail.html
+++ b/templates/jobs/job_detail.html
@@ -280,10 +280,10 @@
                                     <i class="fas fa-edit me-2 text-primary"></i> <strong>{% trans "Updated At:" %}</strong> {{ job.updated_at|default:"N/A" }}
                                 </div>
 
-                                <div class="col-md-6">
+                                <div class="col-md-4">
                                 <button
                                     type="button"
-                                    class="btn btn-main-action"
+                                    class="btn btn-main-action btn-sm"
                                     id="copyJobLinkButton"
                                     data-url="{{ job.application_url }}">
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
@@ -298,7 +298,6 @@
                                 </span>
                                  </div>
 
-
                             </div>
                             <h5 class="text-muted mb-3">{% trans "Financial & Timeline" %}</h5>
                             <div class="row g-3">
diff --git a/templates/jobs/job_detail_candidate.html b/templates/jobs/job_detail_candidate.html
deleted file mode 100644
index f74189d..0000000
--- a/templates/jobs/job_detail_candidate.html
+++ /dev/null
@@ -1,260 +0,0 @@
-{% load static i18n %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% translate "Application Form" %}</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-    /* ---------------------------------------------------------------------- */
-    /* THEME & UTILITY VARIABLES */
-    /* ---------------------------------------------------------------------- */
-    :root {
-        --kaauh-teal: #00636e;
-        --kaauh-teal-dark: #004a53;
-        --success: #198754;
-        --light-bg: #f8f9fa; 
-        
-        /* CALCULATED STICKY HEIGHTS */
-        /* Standard Bootstrap Navbar Height (approx 56px) */
-        --navbar-height: 56px; 
-        /* Bootstrap mb-3 spacing (1rem or 16px) */
-        --navbar-gap: 16px; 
-        
-        /* Combined height of the two navbars when collapsed on desktop (56 + 16 + 56 = 128px) */
-        --sticky-navbar-total-height: 128px;
-    }
-
-    .btn-main-action {
-        background-color: var(--kaauh-teal);
-        color: white;
-        border: none;
-        transition: background-color 0.3s ease, transform 0.2s ease;
-        box-shadow: 0 4px 12px rgba(0, 99, 110, 0.3);
-    }
-
-    .btn-main-action:hover {
-        background-color: var(--kaauh-teal-dark);
-        color: white;
-        transform: translateY(-1px);
-    }
-
-    .bg-kaauh-teal-dark {
-        background-color: var(--kaauh-teal-dark) !important;
-    }
-
-    /* ---------------------------------------------------------------------- */
-    /* LAYOUT & STICKY POSITIONING FIXES (Desktop/Tablet) */
-    /* ---------------------------------------------------------------------- */
-
-    /* 1. Position the dark navbar below the white navbar + gap */
-    #bottomNavbar {
-        /* 56px (white nav) + 16px (mb-3) = 72px */
-        top: calc(var(--navbar-height) + var(--navbar-gap)); 
-        z-index: 1030;
-    }
-
-    /* 2. Pushes the main content down so it's not hidden under the navbars */
-    .main-content-area {
-        /* Total Sticky Height (128px) + Extra Margin (12px) = 140px */
-        margin-top: calc(var(--sticky-navbar-total-height) + 12px); 
-    }
-
-    /* 3. Positions the sticky sidebar correctly */
-    .card.sticky-top {
-        /* Start scrolling the sidebar just below the two navbars + a small gap */
-        top: calc(var(--sticky-navbar-total-height) + 15px);
-    }
-
-    /* ---------------------------------------------------------------------- */
-    /* MOBILE RESPONSIVE STYLES (Below 992px) */
-    /* ---------------------------------------------------------------------- */
-    @media (max-width: 991.98px) {
-        
-        /* --- FIX: Spacing for Collapsed Hamburger Menu --- */
-        #navbarNav .nav-item {
-            margin-top: 5px;
-            margin-bottom: 5px;
-            padding: 5px 0;
-            border-bottom: 1px solid #f0f0f0; 
-        }
-        
-        #navbarNav .nav-item:last-child {
-            border-bottom: none; 
-        }
-        
-        #navbarNav .nav-link {
-            padding: 8px 15px; 
-            display: block;
-        }
-        /* --- END FIX --- */
-        
-        /* On mobile, the top navbar is generally only 56px tall when collapsed. 
-           The bottom navbar position remains correct (72px down). */
-        #bottomNavbar {
-            top: calc(var(--navbar-height) + var(--navbar-gap));
-        }
-        
-        /* Main content area needs less margin on mobile since the sidebar isn't active 
-           and the navs are collapsed by default. */
-        .main-content-area {
-            /* Reduced margin-top for smaller screens */
-            margin-top: calc(var(--sticky-navbar-total-height) / 2); 
-        }
-        
-        /* Mobile Fixed Footer Bar for Application */
-        .mobile-fixed-apply-bar {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            width: 100%;
-            padding: 15px;
-            background-color: var(--light-bg);
-            border-top: 1px solid #ddd;
-            z-index: 1000;
-            box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
-        }
-
-        /* Add padding to the bottom of the body content to prevent it from hiding under the fixed bar */
-        body {
-            padding-bottom: 90px;
-        }
-
-        /* Fix job overview grid responsiveness (ensures 1 column) */
-        .row-cols-md-2 > .col {
-            flex: 0 0 100%;
-            max-width: 100%;
-        }
-    }
-</style>
-</head>
-<body>
-   
-    <nav id="topNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: white; z-index: 1030;">
-    <div class="container-fluid">
-        <span class="navbar-brand text-white fw-bold">
-            <img src="{% static 'image/kaauh.jpeg' %}" alt="{% translate 'KAAUH IMAGE' %}" style="height: 50px; margin-right: 10px;">
-        </span>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav ms-auto">
-               
-                <li class="nav-item">
-                    <a class="nav-link text-secondary" href="/applications/">{% translate "Applications" %}</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link text-secondary" href="/profile/">{% translate "Profile" %}</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link text-secondary" href="https://kaauh.edu.sa/career">{% translate "Careers" %}</a>
-                </li>
-            </ul>
-        </div>
-    </div>
-</nav>
-    
-    <nav id="bottomNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: var(--kaauh-teal); z-index: 1030;">
-        <div class="container-fluid">
-             <span class="navbar-text text-white fw-bold">{% translate "Job Overview" %}</span>
-        </div>
-    </nav>
-    
-    <div class="container">
-        <div class="row mb-5 mt-3 main-content-area">
-            
-            <div class="col-lg-4 order-lg-2 order-1 d-none d-lg-block">
-                <div class="card shadow-sm sticky-top" style="top: var(--sticky-navbar-total-height);"> 
-                    <div class="card-header bg-kaauh-teal-dark text-white">
-                        <h5 class="mb-0"><i class="fas fa-file-signature me-2"></i>Ready to Apply?</h5>
-                    </div>
-                    <div class="card-body text-center">
-                        <p class="text-muted">Review the job details, then apply below.</p>
-                        
-                        {% if job.form_template %}
-                            <a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
-                                <i class="fas fa-paper-plane me-2"></i> Apply for this Position
-                            </a>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-8 order-lg-1 order-2">
-                <div class="card shadow-sm">
-                    <div class="card-header bg-kaauh-teal-dark text-white d-flex justify-content-between align-items-center">
-                        <h2 class="h3 mb-0 fw-bold">{{ job.title }}</h2>
-                        
-                        {% comment %} {% with status_class=job.status|lower %}
-                        <span class="badge 
-                            {% if status_class == 'open' %}bg-success
-                            {% elif status_class == 'closed' %}bg-danger
-                            {% elif status_class == 'draft' %}bg-secondary
-                            {% else %}bg-primary
-                            {% endif %}
-                            status-badge fw-bold p-2">
-                            {{ job.get_status_display }}
-                        </span>
-                        {% endwith %} {% endcomment %}
-                    </div>
-
-                    <div class="card-body">
-                        
-                        <h4 class="mb-3" style="color: var(--kaauh-teal-dark);">Job Overview</h4>
-                        <div class="row row-cols-1 row-cols-md-2 g-3 mb-4">
-                            {% if job.salary_range %}
-                            <div class="col">
-                                <i class="fas fa-money-bill-wave text-success me-2"></i>
-                                <strong>Salary:</strong> 
-                                <span class="fw-bold text-success">{{ job.salary_range }}</span>
-                            </div>
-                            {% endif %}
-                            
-                            <div class="col">
-                                <i class="fas fa-calendar-alt text-muted me-2"></i>
-                                <strong>Deadline:</strong> 
-                                {% if job.application_deadline %}
-                                    {{ job.application_deadline|date:"M d, Y" }}
-                                    {% if job.is_expired %}
-                                        <span class="badge bg-danger ms-2">EXPIRED</span>
-                                    {% endif %}
-                                {% else %}
-                                    <span class="text-muted">Not specified</span>
-                                {% endif %}
-                            </div>
-                            
-                            <div class="col"> <i class="fas fa-briefcase text-muted me-2"></i> <strong>Job Type:</strong> {{ job.get_job_type_display }} </div>
-                            <div class="col"> <i class="fas fa-map-marker-alt text-muted me-2"></i> <strong>Location:</strong> {{ job.get_location_display }} </div>
-                            <div class="col"> <i class="fas fa-building text-muted me-2"></i> <strong>Department:</strong> {{ job.department|default:"Not specified" }} </div>
-                            <div class="col"> <i class="fas fa-hashtag text-muted me-2"></i> <strong>JOB ID:</strong> {{ job.internal_job_id|default:"N/A" }} </div>
-                            <div class="col"> <i class="fas fa-desktop text-muted me-2"></i> <strong>Workplace:</strong> {{ job.get_workplace_type_display }} </div>
-                            {% comment %} <div class="col"> <i class="fas fa-user-tie text-muted me-2"></i> <strong>Created By:</strong> {{ job.created_by|default:"N/A" }} </div> {% endcomment %}
-                        </div>
-                        
-                        {% if job.description %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-info-circle me-2"></i>Job Description</h5><div class="text-secondary">{{ job.description|safe }}</div></div>{% endif %}
-                        {% if job.qualifications %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-graduation-cap me-2"></i>Qualifications</h5><div class="text-secondary">{{ job.qualifications|safe }}</div></div>{% endif %}
-                        {% if job.benefits %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-hand-holding-usd me-2"></i>Benefits</h5><div class="text-secondary">{{ job.benefits|safe }}</div></div>{% endif %}
-                        {% if job.application_instructions %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-file-alt me-2"></i>Application Instructions</h5><div class="text-secondary">{{ job.application_instructions|safe }}</div></div>{% endif %}
-                        
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div> 
-
-    <div class="mobile-fixed-apply-bar d-lg-none"> 
-        {% if job.form_template %}
-        <a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
-            <i class="fas fa-paper-plane me-2"></i> Apply for this Position
-        </a>
-        {% endif %}
-    </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/templates/jobs/job_list.html b/templates/jobs/job_list.html
index 4b366bc..9fac4b4 100644
--- a/templates/jobs/job_list.html
+++ b/templates/jobs/job_list.html
@@ -225,14 +225,14 @@
                                 <option value="ARCHIVED" {% if status_filter == 'ARCHIVED' %}selected{% endif %}>{% trans "Archived" %}</option>
                             </select>
                         </div>
-                        <div class="col-md-5">
+                        <div class="col-md-7">
                             <div class="filter-buttons">
                                
-                                <button type="submit" class="btn btn-main-action btn-lg">
+                                <button type="submit" class="btn btn-main-action">
                                     <i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
                                 </button>
                                 {% if job_filter or search_query %}
-                                    <a href="{% url 'job_list' %}" class="btn btn-outline-secondary btn-lg">
+                                    <a href="{% url 'job_list' %}" class="btn btn-outline-secondary">
                                         <i class="fas fa-times me-1"></i> {% trans "Clear" %}
                                     </a>
                                 {% endif %}
diff --git a/templates/meetings/list_meetings.html b/templates/meetings/list_meetings.html
index 0297876..1985170 100644
--- a/templates/meetings/list_meetings.html
+++ b/templates/meetings/list_meetings.html
@@ -168,7 +168,7 @@
                     <form method="GET" class="row g-3 align-items-end" >
                         {% if search_query %}<input type="hidden" name="q" value="{{ search_query }}">{% endif %}
 
-                        <div class="col-md-3">
+                        <div class="col-md-4">
                             <label for="status" class="form-label small text-muted">{% trans "Filter by Status" %}</label>
                             <select name="status" id="status" class="form-select form-select-sm">
                                 <option value="">{% trans "All Statuses" %}</option>
@@ -178,13 +178,13 @@
                             </select>
                         </div>
 
-                        <div class="col-md-5">
+                        <div class="col-md-7">
                             <div class="filter-buttons">
-                                <button type="submit" class="btn btn-main-action btn-lg">
+                                <button type="submit" class="btn btn-main-action">
                                     <i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
                                 </button>
                                 {% if status_filter or search_query %}
-                                    <a href="{% url 'meeting_list' %}" class="btn btn-outline-secondary btn-lg">
+                                    <a href="{% url 'meeting_list' %}" class="btn btn-outline-secondary">
                                         <i class="fas fa-times me-1"></i> {% trans "Clear" %}
                                     </a>
                                 {% endif %}
diff --git a/templates/recruitment/candidate_list.html b/templates/recruitment/candidate_list.html
index 8c350b8..dd795d6 100644
--- a/templates/recruitment/candidate_list.html
+++ b/templates/recruitment/candidate_list.html
@@ -165,7 +165,7 @@
                     <form method="GET" class="row g-3 align-items-end" >
                         {% if search_query %}<input type="hidden" name="q" value="{{ search_query }}">{% endif %}
 
-                        <div class="col-md-3">
+                        <div class="col-md-4">
                             <label for="job_filter" class="form-label small text-muted">{% trans "Filter by Job" %}</label>
                             <select name="job" id="job_filter" class="form-select form-select-sm">
                                 <option value="">{% trans "All Jobs" %}</option>
@@ -175,13 +175,13 @@
                             </select>
                         </div>
 
-                        <div class="col-md-5">
+                        <div class="col-md-8">
                             <div class="filter-buttons">
-                                <button type="submit" class="btn btn-main-action btn-lg">
+                                <button type="submit" class="btn btn-main-action">
                                     <i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
                                 </button>
                                 {% if job_filter or search_query %}
-                                    <a href="{% url 'candidate_list' %}" class="btn btn-outline-secondary btn-lg">
+                                    <a href="{% url 'candidate_list' %}" class="btn btn-outline-secondary">
                                         <i class="fas fa-times me-1"></i> {% trans "Clear" %}
                                     </a>
                                 {% endif %}
diff --git a/templates/user/profile.html b/templates/user/profile.html
index d5133cb..eb057e3 100644
--- a/templates/user/profile.html
+++ b/templates/user/profile.html
@@ -104,7 +104,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="container" style="max-width: 900px;">
+<div class="container mt-4" style="max-width: 900px;">
     
     <div class="profile-header d-flex align-items-center justify-content-between">
         <div>
@@ -122,7 +122,7 @@
             <div class="card p-5">
                 <h5 class="fw-bold mb-4 text-accent">{% trans "Personal Information" %}</h5>
                 
-                <form method="post" action="#">
+                <form method="post" action="{% url 'user_detail' user.pk %}">
                     {% csrf_token %}
                     
                     <div class="row g-4"> <div class="col-md-6">
@@ -139,7 +139,7 @@
                             <label for="id_email" class="form-label">{% trans "Email Address" %}</label>
                             <input type="email" class="form-control" id="id_email" value="{{ user.email }}" disabled>
                             <div class="form-text mt-2">
-                                <a href="#" class="small text-accent">{% trans "Manage email addresses" %}</a>
+                                <a href="{% url 'account_email' %}" class="small text-accent">{% trans "Manage email addresses" %}</a>
                             </div>
                         </div>
 
@@ -160,9 +160,9 @@
                     <a href="{% url 'account_change_password' %}" class="btn btn-outline-danger w-100 rounded-pill py-2">
                         <i class="fas fa-lock me-2"></i> {% trans "Change Password" %}
                     </a>
-                    {% comment %} <a href="#" class="btn btn-outline-secondary w-100 rounded-pill py-2">
-                        <i class="fas fa-shield-alt me-2"></i> {% trans "Two-Factor Auth" %}
-                    </a> {% endcomment %}
+                     <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#myModalForm">
+                        <i class="fas fa-image me-1"></i> {% trans "Change Profile Image" %}
+                    </button>
                 </div>
             </div>
 
@@ -192,4 +192,32 @@
     </div> 
     
 </div>
+
+<!--modal for image upload-->
+<div class="modal fade mt-4" id="myModalForm" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="myModalLabel">Upload Profile image</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <form method="post" action="{% url 'user_profile_image_update' user.pk %}" enctype="multipart/form-data" >
+          {% csrf_token %}
+          {{ profile_form.as_p}}
+        
+            {% if image_upload_form.instance.post_image %}
+                <p>Current Image:</p>
+                <img src="{{ image_upload_form.instance.post_image.url }}" alt="Post Image" style="max-width: 200px;">
+            {% endif %}
+         <div class="modal-footer mt-2">
+            <button type="button" class="btn  btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="submit" class="btn btn-primary">Save changes</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
 {% endblock %}
\ No newline at end of file