diff --git a/PERMISSION_UPDATES_SUMMARY.md b/PERMISSION_UPDATES_SUMMARY.md
new file mode 100644
index 0000000..0cfd1a0
--- /dev/null
+++ b/PERMISSION_UPDATES_SUMMARY.md
@@ -0,0 +1,281 @@
+# Permission Updates Summary
+
+This document summarizes all the permission decorator updates made to secure the PX360 application.
+
+## New Decorators Created (`apps/core/decorators.py`)
+
+| Decorator | Description | Access Level |
+|-----------|-------------|--------------|
+| `@px_admin_required` | PX Admins only | Level 100 |
+| `@hospital_admin_required` | PX Admins + Hospital Admins | Level 80+ |
+| `@admin_required` | Any admin (PX, Hospital, Dept Manager) | Level 60+ |
+| `@px_coordinator_required` | Coordinators and above | Level 50+ |
+| `@staff_required` | All staff except Source Users | Level 10+ |
+| `@source_user_required` | Source Users only | Level 5 |
+| `@block_source_user` | Blocks Source Users | Blocks Level 5 |
+| `@source_user_or_admin` | Source Users OR Admins | Level 5+ or 60+ |
+
+---
+
+## Views Updated with Permission Decorators
+
+### 1. Dashboard Views (`apps/dashboard/views.py`)
+
+| View | Original | Updated |
+|------|----------|---------|
+| `admin_evaluation` | `@login_required` | Added permission check inside |
+| `admin_evaluation_chart_data` | `@login_required` | Added permission check inside |
+| `staff_performance_detail` | `@login_required` | Added permission check inside |
+| `department_benchmarks` | `@login_required` | Added permission check inside |
+| `export_staff_performance` | `@login_required` | Added permission check inside |
+| `performance_analytics_api` | `@login_required` | Added permission check inside |
+| `staff_performance_trends` | `@login_required` | Added permission check inside |
+
+**Access:** PX Admin and Hospital Admin only ❌ PX Coordinator
+
+---
+
+### 2. Analytics Views (`apps/analytics/ui_views.py`)
+
+| View | Original | Updated |
+|------|----------|---------|
+| `analytics_dashboard` | `@login_required` | `@block_source_user` + `@login_required` |
+| `kpi_list` | `@login_required` | `@block_source_user` + `@login_required` |
+| `command_center` | `@login_required` | `@block_source_user` + `@login_required` |
+| `command_center_api` | `@login_required` | `@block_source_user` + `@login_required` |
+| `export_command_center` | `@login_required` | `@block_source_user` + `@login_required` |
+
+**Access:** All staff except Source Users
+
+---
+
+### 3. Surveys Views (`apps/surveys/ui_views.py`)
+
+All 22 views updated:
+- `@login_required` → `@block_source_user` + `@login_required`
+
+**Access:** All staff except Source Users
+
+---
+
+### 4. Organizations Views (`apps/organizations/ui_views.py`)
+
+All views updated:
+- `@login_required` → `@block_source_user` + `@login_required`
+
+**Access:** All staff except Source Users
+
+---
+
+### 5. Complaints Views (`apps/complaints/ui_views.py`)
+
+| View | Original | Updated | Access |
+|------|----------|---------|--------|
+| `complaint_list` | `@login_required` | No change (has RBAC filtering) | All users (filtered) |
+| `complaint_create` | `@login_required` | No change | All staff + Source Users |
+| `complaint_assign` | `@login_required` | `@hospital_admin_required` | Admin only |
+| `complaint_activate` | `@login_required` | Permission check inside | Admin + Dept Manager |
+| `complaint_escalate` | `@login_required` | Permission check inside | Admin only |
+| `complaint_bulk_assign` | `@login_required` | `@hospital_admin_required` | Admin only |
+| `complaint_bulk_status` | `@login_required` | `@hospital_admin_required` | Admin only |
+| `complaint_bulk_escalate` | `@login_required` | `@hospital_admin_required` | Admin only |
+
+---
+
+### 6. Config Views (`apps/core/config_views.py`)
+
+| View | Original | Updated |
+|------|----------|---------|
+| `config_dashboard` | `@login_required` | `@px_admin_required` |
+| `sla_config_list` | `@login_required` | `@px_admin_required` |
+| `routing_rules_list` | `@login_required` | `@px_admin_required` |
+
+**Access:** PX Admin only
+
+---
+
+### 7. PX Sources Views (`apps/px_sources/ui_views.py`)
+
+Already had proper decorators:
+- Admin views: `@block_source_user`
+- Source User views: `@source_user_required`
+
+---
+
+## Permission Enforcement Summary by Role
+
+### PX Admin (Level 100)
+✅ Full access to all views and functions
+
+### Hospital Admin (Level 80)
+✅ Can access:
+- Admin Evaluation (own hospital)
+- Staff Management (own hospital)
+- Complaint assignment/activation
+- Survey management
+- Analytics and reports
+- Settings (hospital-level)
+
+❌ Cannot access:
+- PX Admin-only config (system settings)
+- Other hospitals' data
+
+### Department Manager (Level 60)
+✅ Can access:
+- Department complaints
+- Department staff
+- Department analytics
+
+❌ Cannot access:
+- Admin Evaluation
+- Bulk actions
+- Complaint assignment
+- Settings
+
+### PX Coordinator (Level 50)
+✅ Can access:
+- Complaints (create, manage - but NOT assign/activate)
+- PX Actions
+- Surveys
+- Analytics (basic)
+
+❌ Cannot access:
+- **Admin Evaluation** (NEW)
+- Staff Management
+- Settings
+- Complaint assignment/activation
+
+### Source User (Level 5)
+✅ Can access:
+- Create complaints (their own)
+- Create inquiries (their own)
+- View own created complaints/inquiries
+- **Automatically redirected to `/px-sources/dashboard/` when visiting `/` or `/dashboard/my/`**
+
+❌ Cannot access:
+- **Surveys** (NEW - blocked → redirected)
+- **Analytics** (NEW - blocked → redirected)
+- **Staff/Organizations** (NEW - blocked → redirected)
+- **Settings** (NEW - blocked → redirected)
+- **PX Actions** (NEW - blocked → redirected)
+- **Acknowledgements** (NEW - blocked → redirected)
+- **Command Center** (`/` - redirected to source dashboard)
+- **My Dashboard** (`/dashboard/my/` - redirected to source dashboard)
+
+---
+
+## Key Security Fixes
+
+1. **Fixed**: PX Coordinator could access Admin Evaluation (now blocked)
+2. **Fixed**: Source Users could access Surveys (now blocked)
+3. **Fixed**: Source Users could access Analytics (now blocked)
+4. **Fixed**: Source Users could access Staff Management (now blocked)
+5. **Fixed**: Source Users could access Settings (now blocked)
+
+---
+
+## Source User Strict Access Control
+
+**STRICT POLICY**: Source Users can ONLY access:
+1. `/px-sources/*` - Their dashboard, complaints, and inquiries
+2. `/accounts/password/change/` - Password change
+3. `/accounts/settings/` - Basic settings
+4. `/accounts/logout/` - Logout
+
+**ALL other pages are BLOCKED and redirected to `/px-sources/dashboard/`**
+
+### Middleware Enforcement
+
+The `SourceUserRestrictionMiddleware` enforces this at the request level:
+- Checks every request from source users
+- Only allows whitelisted paths
+- Silently redirects to source dashboard for blocked paths
+- Runs after authentication middleware
+
+### Allowed URLs for Source Users:
+
+| URL | Access |
+|-----|--------|
+| `/px-sources/dashboard/` | ✅ Yes |
+| `/px-sources/complaints/` | ✅ Yes |
+| `/px-sources/inquiries/` | ✅ Yes |
+| `/px-sources/complaints/new/` | ✅ Yes |
+| `/px-sources/inquiries/new/` | ✅ Yes |
+| `/accounts/password/change/` | ✅ Yes |
+| `/accounts/settings/` | ✅ Yes |
+| `/accounts/logout/` | ✅ Yes |
+| `/` (root) | ❌ **Redirected** |
+| `/dashboard/my/` | ❌ **Redirected** |
+| `/surveys/*` | ❌ **Redirected** |
+| `/analytics/*` | ❌ **Redirected** |
+| `/organizations/*` | ❌ **Redirected** |
+| `/config/*` | ❌ **Redirected** |
+| `/actions/*` | ❌ **Redirected** |
+| `/complaints/` (main list) | ❌ **Redirected** |
+| `/complaints/inquiries/` (main) | ❌ **Redirected** |
+
+### Technical Implementation
+
+```python
+# SourceUserRestrictionMiddleware
+ALLOWED_PATH_PREFIXES = ['/px-sources/']
+ALLOWED_URL_NAMES = {
+    'accounts:password_change',
+    'accounts:settings', 
+    'accounts:logout',
+}
+
+# Everything else is BLOCKED for source users
+```
+
+---
+
+## Testing Checklist
+
+- [ ] PX Admin can access everything
+- [ ] Hospital Admin can access their hospital data only
+- [ ] Department Manager can access their department only
+- [ ] PX Coordinator CANNOT access Admin Evaluation
+- [ ] PX Coordinator can create complaints but NOT assign them
+- [ ] **Source User visiting `/` gets redirected to `/px-sources/dashboard/`**
+- [ ] **Source User visiting `/dashboard/my/` gets redirected to `/px-sources/dashboard/`**
+- [ ] Source User can create/view their own complaints only
+- [ ] Source User CANNOT access Surveys (redirects to their dashboard)
+- [ ] Source User CANNOT access Analytics (redirects to their dashboard)
+- [ ] Source User CANNOT access Staff Management (redirects to their dashboard)
+- [ ] Source User CANNOT access Settings (redirects to their dashboard)
+
+---
+
+## Decorator Usage Examples
+
+```python
+# PX Admin only
+@px_admin_required
+def system_settings(request):
+    pass
+
+# Hospital Admin and above
+@hospital_admin_required
+def hospital_settings(request):
+    pass
+
+# Any admin
+@admin_required
+def department_management(request):
+    pass
+
+# Block source users
+@block_source_user
+def staff_list(request):
+    pass
+
+# Source users only
+@source_user_required
+def source_dashboard(request):
+    pass
+```
+
+---
+
+**Last Updated:** 2026-02-25
diff --git a/PX360/settings.py b/PX360/settings.py
index 8ad12ea..e4b2f34 100644
--- a/PX360/settings.py
+++ b/PX360/settings.py
@@ -47,6 +47,9 @@ MIDDLEWARE = [
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    # PX Source User Access Control
+    'apps.px_sources.middleware.SourceUserRestrictionMiddleware',
+    'apps.px_sources.middleware.SourceUserSessionMiddleware',
 ]
 
 ROOT_URLCONF = 'PX360.urls'
@@ -62,6 +65,8 @@ TEMPLATES = [
                 'django.template.context_processors.request',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
+                'apps.core.context_processors.hospital_context',
+                'apps.core.context_processors.sidebar_counts',
             ],
         },
     },
diff --git a/SIMPLE_ACKNOWLEDGEMENT_SUMMARY.md b/SIMPLE_ACKNOWLEDGEMENT_SUMMARY.md
new file mode 100644
index 0000000..a0c1b54
--- /dev/null
+++ b/SIMPLE_ACKNOWLEDGEMENT_SUMMARY.md
@@ -0,0 +1,62 @@
+# Simple Acknowledgement System - Implementation Complete
+
+## Summary
+The old complex acknowledgement system has been removed and replaced with a simplified version.
+
+## Changes Made
+
+### 1. Removed Old Implementation
+- Deleted `/apps/accounts/acknowledgement_views.py`
+- Deleted `/apps/accounts/urls_acknowledgement.py`
+- Updated `/apps/accounts/urls.py` to remove old acknowledgement URL paths
+- Simplified sidebar navigation in `/templates/layouts/partials/sidebar.html`
+
+### 2. Simple Acknowledgement System
+**Models** (in `/apps/accounts/models.py`):
+- `SimpleAcknowledgement` - The acknowledgement items
+- `EmployeeAcknowledgement` - Records of employee signatures
+
+**Views** (in `/apps/accounts/simple_acknowledgement_views.py`):
+- Employee: list, sign, download PDF
+- Admin: list, create, edit, delete, view signatures, export
+
+**Templates** (in `/templates/accounts/simple_acknowledgements/`):
+- `list.html` - Employee checklist with modern styling
+- `sign.html` - Sign form with name and employee ID fields
+- `admin_list.html` - Admin management with stats cards
+- `admin_form.html` - Create/edit form with file upload
+- `admin_delete.html` - Delete confirmation
+- `admin_signatures.html` - View all signatures with filtering
+
+**URLs** (in `/apps/accounts/simple_acknowledgement_urls.py`):
+- Employee: `/accounts/simple-acknowledgements/my-acknowledgements/`
+- Sign: `/accounts/simple-acknowledgements/my-acknowledgements/sign/<uuid>/`
+- Admin: `/accounts/simple-acknowledgements/admin/acknowledgements/`
+
+### 3. Styling
+All templates use the modern PX360 design system:
+- Gradient backgrounds
+- Card-based layouts
+- Tailwind CSS styling
+- Lucide icons
+- Responsive design
+
+## Features
+1. ✅ **Checklist** - Employees see all acknowledgements with checkmarks
+2. ✅ **Add Future Acknowledgements** - Admins can create new ones anytime
+3. ✅ **Employee & Employee ID** - Required fields when signing
+4. ✅ **PDF Support** - Upload documents and download signed PDFs
+5. ✅ **Export** - Export signatures to CSV
+
+## Navigation
+- Employees: Sidebar → "Acknowledgements"
+- PX Admins: Same link, plus access to admin management
+
+## Migration
+Run: `python manage.py migrate accounts`
+
+## Next Steps
+1. Start the server: `python manage.py runserver`
+2. Access: http://localhost:8000/accounts/simple-acknowledgements/my-acknowledgements/
+3. As PX Admin, create acknowledgements first
+4. Employees can then view and sign
diff --git a/SIMPLE_ACKNOWLEDGEMENT_SYSTEM.md b/SIMPLE_ACKNOWLEDGEMENT_SYSTEM.md
new file mode 100644
index 0000000..edc21c5
--- /dev/null
+++ b/SIMPLE_ACKNOWLEDGEMENT_SYSTEM.md
@@ -0,0 +1,92 @@
+# Simple Acknowledgement System - Implementation Summary
+
+## Overview
+A simplified acknowledgement system for employees to sign required documents.
+
+## Features
+1. **Checklist of Acknowledgements** - Employees see a checklist of all acknowledgements they must sign
+2. **Add Future Acknowledgements** - Admins can add new acknowledgements anytime
+3. **Employee & Employee ID** - Employees sign with their name and employee ID
+4. **Checkmark & PDF** - Signed acknowledgements show checkmarks and have attached PDFs
+
+## Models
+
+### SimpleAcknowledgement
+- `title` - Acknowledgement title
+- `description` - Detailed description
+- `pdf_document` - PDF document for employees to review
+- `is_active` - Show in employee checklist
+- `is_required` - Must be signed by all employees
+- `order` - Display order
+
+### EmployeeAcknowledgement
+- `employee` - ForeignKey to User
+- `acknowledgement` - ForeignKey to SimpleAcknowledgement
+- `is_signed` - Boolean flag
+- `signed_at` - Timestamp
+- `signature_name` - Name used when signing
+- `signature_employee_id` - Employee ID when signing
+- `signed_pdf` - Generated PDF with signature
+- `ip_address` - For audit trail
+- `user_agent` - For audit trail
+
+## URLs
+
+### Employee URLs
+- `/accounts/simple-acknowledgements/my-acknowledgements/` - Employee checklist
+- `/accounts/simple-acknowledgements/my-acknowledgements/sign/<uuid>/` - Sign acknowledgement
+- `/accounts/simple-acknowledgements/my-acknowledgements/download/<uuid>/` - Download signed PDF
+
+### Admin URLs
+- `/accounts/simple-acknowledgements/admin/acknowledgements/` - List all acknowledgements
+- `/accounts/simple-acknowledgements/admin/acknowledgements/new/` - Create new acknowledgement
+- `/accounts/simple-acknowledgements/admin/acknowledgements/<uuid>/edit/` - Edit acknowledgement
+- `/accounts/simple-acknowledgements/admin/acknowledgements/<uuid>/delete/` - Delete acknowledgement
+- `/accounts/simple-acknowledgements/admin/acknowledgements/<uuid>/toggle/` - Toggle active status
+- `/accounts/simple-acknowledgements/admin/signatures/` - View all signatures
+- `/accounts/simple-acknowledgements/admin/signatures/employee/<uuid>/` - View employee's signatures
+
+## Templates
+All templates are in `templates/accounts/simple_acknowledgements/`:
+- `employee_list.html` - Employee checklist view
+- `sign.html` - Sign acknowledgement form
+- `admin_list.html` - Admin list view
+- `admin_form.html` - Admin create/edit form
+- `admin_signatures.html` - Admin signatures view
+
+## Migration
+Run the migration to create the new tables:
+```bash
+python manage.py migrate accounts
+```
+
+## Usage
+
+### For Employees
+1. Navigate to `/accounts/simple-acknowledgements/my-acknowledgements/`
+2. See list of pending and completed acknowledgements
+3. Click "Sign Now" to sign a pending acknowledgement
+4. Enter name and employee ID, then submit
+5. Download signed PDF if needed
+
+### For Admins
+1. Navigate to `/accounts/simple-acknowledgements/admin/acknowledgements/`
+2. Click "New Acknowledgement" to create
+3. Fill in title, description, and optionally upload a PDF
+4. Set as active/required as needed
+5. View signatures in the admin signatures page
+
+## Navigation Link (Optional)
+Add to your navigation menu:
+```html
+<a href="{% url 'accounts:simple_acknowledgements:employee_list' %}">
+    My Acknowledgements
+</a>
+```
+
+For PX Admins:
+```html
+<a href="{% url 'accounts:simple_acknowledgements:admin_list' %}">
+    Manage Acknowledgements
+</a>
+```
diff --git a/SOURCE_USER_STRICT_ACCESS.md b/SOURCE_USER_STRICT_ACCESS.md
new file mode 100644
index 0000000..1054139
--- /dev/null
+++ b/SOURCE_USER_STRICT_ACCESS.md
@@ -0,0 +1,150 @@
+# PX Source User - Strict Access Control
+
+## Overview
+
+PX Source Users have **STRICT LIMITED ACCESS** to the system. They can ONLY access:
+1. `/px-sources/*` pages (their dedicated portal)
+2. Password change page
+3. Basic settings page
+4. Logout
+
+**ALL other URLs are blocked and redirected to `/px-sources/dashboard/`**
+
+---
+
+## Implementation
+
+### 1. Middleware (`apps/px_sources/middleware.py`)
+
+```python
+class SourceUserRestrictionMiddleware:
+    """
+    STRICT middleware that restricts source users to ONLY:
+    1. /px-sources/* pages
+    2. Password change
+    3. Settings
+    4. Logout
+    """
+    
+    ALLOWED_PATH_PREFIXES = ['/px-sources/']
+    ALLOWED_URL_NAMES = {
+        'accounts:password_change',
+        'accounts:settings',
+        'accounts:logout',
+        'accounts:login',
+    }
+```
+
+### 2. Settings Configuration
+
+Added to `config/settings/base.py`:
+```python
+MIDDLEWARE = [
+    ...
+    'apps.px_sources.middleware.SourceUserRestrictionMiddleware',
+    ...
+]
+```
+
+### 3. View-Level Enforcement
+
+Updated views to redirect source users:
+- `CommandCenterView.dispatch()` - redirects to `/px-sources/dashboard/`
+- `my_dashboard()` - redirects to `/px-sources/dashboard/`
+- `@block_source_user` decorator - redirects to `/px-sources/dashboard/`
+
+---
+
+## Allowed URLs for Source Users
+
+| URL | Access | Description |
+|-----|--------|-------------|
+| `/px-sources/dashboard/` | ✅ | Source User Dashboard |
+| `/px-sources/complaints/` | ✅ | List their complaints |
+| `/px-sources/complaints/new/` | ✅ | Create new complaint |
+| `/px-sources/inquiries/` | ✅ | List their inquiries |
+| `/px-sources/inquiries/new/` | ✅ | Create new inquiry |
+| `/accounts/password/change/` | ✅ | Change password |
+| `/accounts/settings/` | ✅ | Basic settings |
+| `/accounts/logout/` | ✅ | Logout |
+| `/static/*` | ✅ | Static files (CSS/JS) |
+| `/media/*` | ✅ | Media files |
+| `/i18n/*` | ✅ | Language switching |
+
+---
+
+## Blocked URLs (Redirected to `/px-sources/dashboard/`)
+
+| URL | Blocked | Behavior |
+|-----|---------|----------|
+| `/` | ✅ | Redirected |
+| `/dashboard/my/` | ✅ | Redirected |
+| `/dashboard/admin-evaluation/` | ✅ | Redirected |
+| `/analytics/*` | ✅ | Redirected |
+| `/surveys/*` | ✅ | Redirected |
+| `/complaints/` | ✅ | Redirected |
+| `/complaints/inquiries/` | ✅ | Redirected |
+| `/organizations/*` | ✅ | Redirected |
+| `/config/*` | ✅ | Redirected |
+| `/actions/*` | ✅ | Redirected |
+| `/physicians/*` | ✅ | Redirected |
+| `/px-sources/` (admin pages) | ✅ | Redirected |
+| `/px-sources/new/` | ✅ | Redirected |
+| `/px-sources/<id>/edit/` | ✅ | Redirected |
+
+---
+
+## Testing
+
+### Test Cases
+
+1. **Login as Source User**
+   - Visit: `/`
+   - Expected: Redirected to `/px-sources/dashboard/`
+
+2. **Try to access Command Center**
+   - Visit: `/dashboard/my/`
+   - Expected: Redirected to `/px-sources/dashboard/`
+
+3. **Try to access Surveys**
+   - Visit: `/surveys/`
+   - Expected: Redirected to `/px-sources/dashboard/`
+
+4. **Try to access Staff**
+   - Visit: `/organizations/staff/`
+   - Expected: Redirected to `/px-sources/dashboard/`
+
+5. **Access Source User Portal**
+   - Visit: `/px-sources/dashboard/`
+   - Expected: ✅ Works!
+
+6. **Access Password Change**
+   - Visit: `/accounts/password/change/`
+   - Expected: ✅ Works!
+
+7. **Create Complaint**
+   - Visit: `/px-sources/complaints/new/`
+   - Expected: ✅ Works!
+
+---
+
+## Security Notes
+
+1. **Middleware runs on EVERY request** - Cannot be bypassed
+2. **No error messages** - Silent redirect for better UX
+3. **Whitelist approach** - Only explicitly allowed URLs work
+4. **Superusers excluded** - Superusers bypass all restrictions
+5. **Static files allowed** - Required for CSS/JS to work
+
+---
+
+## Files Modified
+
+1. `apps/px_sources/middleware.py` - Updated `SourceUserRestrictionMiddleware`
+2. `config/settings/base.py` - Added middleware to MIDDLEWARE list
+3. `apps/dashboard/views.py` - Added redirects in views
+4. `apps/core/decorators.py` - Updated `@block_source_user` decorator
+
+---
+
+**Last Updated**: 2026-02-25
diff --git a/USER_ACCESS_MATRIX.md b/USER_ACCESS_MATRIX.md
new file mode 100644
index 0000000..5f899f4
--- /dev/null
+++ b/USER_ACCESS_MATRIX.md
@@ -0,0 +1,341 @@
+# PX360 User Access Matrix
+
+This document outlines which user roles can access which pages and features in the PX360 system.
+
+## Role Hierarchy (High to Low)
+
+| Role | Level | Description |
+|------|-------|-------------|
+| **PX Admin** | 100 | Full system access across all hospitals |
+| **Hospital Admin** | 80 | Full access within their assigned hospital |
+| **Department Manager** | 60 | Access to their department and sub-departments |
+| **PX Coordinator** | 50 | Manages complaints, actions, and surveys |
+| **Physician** | 40 | View patient feedback and own ratings |
+| **Nurse/Staff** | 30/20 | Basic staff access to department data |
+| **Viewer** | 10 | Read-only access to reports |
+| **PX Source User** | 5 | External users - create/view only their own complaints/inquiries |
+
+---
+
+## 🎯 Quick Reference: Role Capabilities
+
+| Feature | PX Admin | Hospital Admin | Dept Manager | PX Coord | Physician | Staff | Viewer | Source User |
+|---------|:--------:|:--------------:|:------------:|:--------:|:---------:|:-----:|:------:|:-----------:|
+| **Dashboard (Command Center)** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **❌ (Redirected to /px-sources/)** |
+| **All Hospitals** | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| **All Complaints** | ✅ | ✅ Hospital | ✅ Dept | ✅ Hospital | ❌ | ❌ | ✅ | ✅ Own |
+| **Create Complaint** | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ✅ |
+| **Assign Complaints** | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| **Surveys** | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ |
+| **Staff Management** | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| **Settings** | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| **Analytics** | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ❌ |
+| **Admin Evaluation** | ✅ | ✅ | ❌ | **❌** | ❌ | ❌ | ❌ | ❌ |
+| **PX Actions** | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ |
+
+---
+
+## 📊 Detailed Access by Module
+
+### 1. DASHBOARD & ANALYTICS
+
+| Page/Feature | PX Admin | Hospital Admin | Dept Manager | PX Coordinator | Physician | Staff | Viewer | Source User |
+|-------------|:--------:|:--------------:|:------------:|:--------------:|:---------:|:-----:|:------:|:-----------:|
+| `/` - Command Center Dashboard | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **❌ (Redirected)** |
+| `/dashboard/my/` - My Dashboard | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **❌ (Redirected)** |
+| `/dashboard/admin-evaluation/` | ✅ | ✅ | ❌ | **❌** | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/dashboard/admin-evaluation/staff/<id>/` | ✅ | ✅ | ❌ | **❌** | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/dashboard/admin-evaluation/benchmarks/` | ✅ | ✅ | ❌ | **❌** | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/analytics/dashboard/` | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | **❌ (Redirected)** |
+| `/analytics/kpi-reports/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | **❌ (Redirected)** |
+| `/analytics/command-center/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **❌ (Redirected)** |
+
+**Notes:**
+- **PX Admin**: Can switch between all hospitals
+- **Source User**: **STRICT ACCESS** - Can ONLY access `/px-sources/*` and password change. All other pages redirect to `/px-sources/dashboard/`
+- **My Dashboard**: Shows items assigned to the user (complaints, inquiries, actions, tasks)
+
+---
+
+### 2. COMPLAINTS MODULE
+
+| Page/Feature | PX Admin | Hospital Admin | Dept Manager | PX Coordinator | Physician | Staff | Viewer | Source User |
+|-------------|:--------:|:--------------:|:------------:|:--------------:|:---------:|:-----:|:------:|:-----------:|
+| `/complaints/` - List | ✅ All | ✅ Hospital | ✅ Dept | ✅ Hospital | ❌ | ❌ | ✅ | **❌ (Redirected)** |
+| `/complaints/new/` - Create | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/complaints/<id>/` - Detail | ✅ All | ✅ Hospital | ✅ Dept | ✅ Hospital | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/complaints/<id>/assign/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/<id>/change-status/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/<id>/activate/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/<id>/escalate/` | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/<id>/add-note/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/<id>/pdf/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ❌ |
+| `/complaints/<id>/request-explanation/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/bulk/*` - Bulk Actions | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/export/*` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/analytics/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | ❌ |
+| `/complaints/templates/` | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/settings/sla/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/settings/escalation-rules/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/oncall/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/adverse-actions/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+
+**INQUIRIES (within Complaints):**
+| `/complaints/inquiries/` | ✅ All | ✅ Hospital | ✅ Dept | ✅ Hospital | ❌ | ❌ | ✅ | **❌ (Redirected)** |
+| `/complaints/inquiries/new/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/complaints/inquiries/<id>/` | ✅ All | ✅ Hospital | ✅ Dept | ✅ Hospital | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/complaints/inquiries/<id>/activate/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/complaints/inquiries/<id>/assign/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+
+**SOURCE USER PORTAL (ONLY access for Source Users):**
+| `/px-sources/dashboard/` | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | **✅ ONLY** |
+| `/px-sources/complaints/` | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | **✅ ONLY** |
+| `/px-sources/inquiries/` | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | **✅ ONLY** |
+| `/px-sources/complaints/new/` | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | **✅ ONLY** |
+| `/px-sources/inquiries/new/` | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | **✅ ONLY** |
+
+**Notes:**
+- **Source User**: **STRICT** - Can ONLY access via `/px-sources/*` portal. Main `/complaints/*` URLs redirect to source dashboard
+- **Department Manager**: Can only see complaints for their department
+- **Viewer**: Can view but not create/edit
+
+---
+
+### 3. SURVEYS MODULE
+
+| Page/Feature | PX Admin | Hospital Admin | Dept Manager | PX Coordinator | Physician | Staff | Viewer | Source User |
+|-------------|:--------:|:--------------:|:------------:|:--------------:|:---------:|:-----:|:------:|:-----------:|
+| `/surveys/instances/` - Survey List | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | **❌ (Redirected)** |
+| `/surveys/instances/<id>/` - Detail | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | **❌ (Redirected)** |
+| `/surveys/templates/` - Templates | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/surveys/templates/create/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/surveys/send/` - Manual Send | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/surveys/send/phone/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/surveys/send/csv/` | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/surveys/his-import/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/surveys/bulk-jobs/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/surveys/reports/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | **❌ (Redirected)** |
+| `/surveys/enhanced-reports/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | **❌ (Redirected)** |
+| `/surveys/comments/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+
+**Notes:**
+- **Source User**: **NO ACCESS** - All survey URLs redirect to `/px-sources/dashboard/`
+- **Department Manager**: Can view surveys for their department
+- **Physician**: Can view their own ratings/surveys only
+
+---
+
+### 4. PX ACTION CENTER
+
+| Page/Feature | PX Admin | Hospital Admin | Dept Manager | PX Coordinator | Physician | Staff | Viewer | Source User |
+|-------------|:--------:|:--------------:|:------------:|:--------------:|:---------:|:-----:|:------:|:-----------:|
+| `/actions/` - Action List | ✅ All | ✅ Hospital | ✅ Dept | ✅ Hospital | ❌ | ❌ | ✅ | ❌ |
+| `/actions/<id>/` - Detail | ✅ All | ✅ Hospital | ✅ Dept | ✅ Hospital | ❌ | ❌ | ✅ | ❌ |
+| `/actions/create/` | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ |
+| `/actions/<id>/edit/` | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ |
+| `/actions/<id>/assign/` | ✅ | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ |
+| `/actions/<id>/approve/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+
+**Notes:**
+- **Source User**: NO ACCESS to PX Actions
+- **PX Coordinator**: Full access to manage actions
+
+---
+
+### 5. STAFF & ORGANIZATIONS
+
+| Page/Feature | PX Admin | Hospital Admin | Dept Manager | PX Coordinator | Physician | Staff | Viewer | Source User |
+|-------------|:--------:|:--------------:|:------------:|:--------------:|:---------:|:-----:|:------:|:-----------:|
+| `/organizations/` - Organizations | ✅ | ✅ Own Org | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/organizations/hospitals/` | ✅ | ✅ Own | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/organizations/departments/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ✅ | **❌ (Redirected)** |
+| `/organizations/staff/` - Staff List | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/organizations/staff/<id>/` - Detail | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/organizations/staff/create/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/organizations/staff/<id>/edit/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/organizations/staff/hierarchy/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/organizations/sections/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/organizations/subsections/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/organizations/patients/` | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+
+**Notes:**
+- **Source User**: **NO ACCESS** - All organization URLs redirect to `/px-sources/dashboard/`
+- **Department Manager**: Can view staff in their department
+- **Hospital Admin**: Full access within their hospital
+
+---
+
+### 6. PHYSICIANS MODULE
+
+| Page/Feature | PX Admin | Hospital Admin | Dept Manager | PX Coordinator | Physician | Staff | Viewer | Source User |
+|-------------|:--------:|:--------------:|:------------:|:--------------:|:---------:|:-----:|:------:|:-----------:|
+| `/physicians/` - Physician List | ✅ | ✅ | ✅ | ✅ | ✅ Own | ✅ | ✅ | **❌ (Redirected)** |
+| `/physicians/<id>/` - Detail | ✅ | ✅ | ✅ | ✅ | ✅ Own | ❌ | ❌ | **❌ (Redirected)** |
+| `/physicians/dashboard/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **❌ (Redirected)** |
+| `/physicians/leaderboard/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **❌ (Redirected)** |
+| `/physicians/import/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/physicians/individual-ratings/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+
+**Notes:**
+- **Source User**: NO ACCESS
+- **Physician**: Can view their own ratings and profile
+
+---
+
+### 7. PX SOURCES MODULE
+
+| Page/Feature | PX Admin | Hospital Admin | Dept Manager | PX Coordinator | Physician | Staff | Viewer | Source User |
+|-------------|:--------:|:--------------:|:------------:|:--------------:|:---------:|:-----:|:------:|:-----------:|
+| `/px-sources/` - Source List | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/px-sources/<id>/` - Source Detail | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/px-sources/<id>/users/create/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/px-sources/dashboard/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ ✅ |
+| `/px-sources/complaints/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ ✅ |
+| `/px-sources/inquiries/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ ✅ |
+| `/px-sources/complaints/new/` | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ ✅ |
+| `/px-sources/inquiries/new/` | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ ✅ |
+
+**Notes:**
+- **Source User**: Has their OWN simplified dashboard
+- **Source User**: Can only create complaints/inquiries from their assigned source
+- **Admin**: Can manage sources and create source users
+
+---
+
+### 8. SETTINGS & CONFIGURATION
+
+| Page/Feature | PX Admin | Hospital Admin | Dept Manager | PX Coordinator | Physician | Staff | Viewer | Source User |
+|-------------|:--------:|:--------------:|:------------:|:--------------:|:---------:|:-----:|:------:|:-----------:|
+| `/config/dashboard/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/config/routing-rules/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/config/sla-config/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/integrations/survey-mapping-settings/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/notifications/send-sms-direct/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | **❌ (Redirected)** |
+| `/notifications/settings/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | **❌ (Redirected)** |
+| `/accounts/password/change/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **✅ ONLY** |
+| `/accounts/settings/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | **✅ ONLY** |
+
+**Notes:**
+- **Source User**: **ONLY** allowed Settings pages are password change and basic settings
+- All other config pages redirect to `/px-sources/dashboard/`
+- **Source User**: NO ACCESS to any settings
+- **Hospital Admin**: Can configure hospital-specific settings
+
+---
+
+### 9. ACKNOWLEDGEMENTS (Onboarding)
+
+| Page/Feature | PX Admin | Hospital Admin | Dept Manager | PX Coordinator | Physician | Staff | Viewer | Source User |
+|-------------|:--------:|:--------------:|:------------:|:--------------:|:---------:|:-----:|:------:|:-----------:|
+| `/acknowledgements/dashboard/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
+| `/acknowledgements/signed/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
+| `/acknowledgements/sign/<id>/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
+| `/acknowledgements/categories/` | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/acknowledgements/checklist/` | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/acknowledgements/compliance/` | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+
+**Notes:**
+- **Source User**: NO ACCESS to acknowledgements
+- **Admin**: Can manage acknowledgement content
+
+---
+
+### 10. USER ACCOUNT & PROFILE
+
+| Page/Feature | PX Admin | Hospital Admin | Dept Manager | PX Coordinator | Physician | Staff | Viewer | Source User |
+|-------------|:--------:|:--------------:|:------------:|:--------------:|:---------:|:-----:|:------:|:-----------:|
+| `/accounts/settings/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
+| `/accounts/change-password/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
+| `/accounts/users/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/accounts/users/<id>/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/accounts/roles/` | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/accounts/onboarding/provisional/` | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| `/accounts/onboarding/wizard/` | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
+
+**Notes:**
+- **All users** can access their own settings and change password
+- **Source User**: Can only view/edit their own profile
+
+---
+
+## 🚫 Access Denied Behavior
+
+When a user tries to access a page they don't have permission for:
+
+1. **API Endpoints**: Returns HTTP 403 Forbidden with error message
+2. **UI Views**: Redirects to login or shows permission denied page
+3. **Menu Items**: Hidden from sidebar (not shown)
+
+---
+
+## 🔐 Role Permission Summary
+
+### PX Admin (Level 100)
+- ✅ Full system access
+- ✅ Can switch between all hospitals
+- ✅ Can create/edit/delete users
+- ✅ Can access all settings
+- ✅ Can view all reports and analytics
+
+### Hospital Admin (Level 80)
+- ✅ Full access within their hospital
+- ✅ Can manage staff in their hospital
+- ✅ Can manage complaints/inquiries in their hospital
+- ✅ Can configure hospital settings
+- ❌ Cannot access other hospitals
+
+### Department Manager (Level 60)
+- ✅ Access to their department only
+- ✅ Can view staff in their department
+- ✅ Can manage complaints in their department
+- ✅ Can view department reports
+- ❌ Cannot access other departments
+
+### PX Coordinator (Level 50)
+- ✅ Can create and manage complaints
+- ✅ Can create and manage PX Actions
+- ✅ Can manage surveys
+- ✅ Can view analytics
+- ❌ Cannot manage staff or settings
+
+### Physician (Level 40)
+- ✅ Can view their own ratings
+- ✅ Can view patient feedback
+- ❌ Cannot create complaints
+- ❌ Cannot access admin functions
+
+### Nurse/Staff (Level 30/20)
+- ✅ Can view department data
+- ✅ Basic read access
+- ❌ Limited write access
+
+### Viewer (Level 10)
+- ✅ Read-only access
+- ✅ Can view reports and dashboards
+- ❌ Cannot create or edit anything
+
+### PX Source User (Level 5) - **STRICT ACCESS**
+- ✅ Can create complaints from their source (via `/px-sources/complaints/new/`)
+- ✅ Can create inquiries from their source (via `/px-sources/inquiries/new/`)
+- ✅ Can view only their created complaints/inquiries (via `/px-sources/`)
+- ✅ Can change password (`/accounts/password/change/`)
+- ✅ Can access basic settings (`/accounts/settings/`)
+- ❌ **NO access** to `/` (Command Center) - **Redirected**
+- ❌ **NO access** to `/dashboard/my/` - **Redirected**
+- ❌ **NO access** to `/complaints/` (main) - **Redirected**
+- ❌ **NO access** to surveys - **Redirected**
+- ❌ **NO access** to staff/organizations - **Redirected**
+- ❌ **NO access** to settings/config - **Redirected**
+- ❌ **NO access** to PX Actions - **Redirected**
+- ❌ **NO access** to analytics - **Redirected**
+- ❌ **NO access** to acknowledgements - **Redirected**
+
+**ENFORCED BY MIDDLEWARE**: `SourceUserRestrictionMiddleware` ensures strict access control. Any attempt to access non-allowed URLs automatically redirects to `/px-sources/dashboard/`.
+
+---
+
+## 📝 Last Updated
+
+- **Date**: 2026-02-25
+- **Version**: 1.0
+- **Changes**: Added PX Source User role documentation
diff --git a/apps/accounts/context_processors.py b/apps/accounts/context_processors.py
index 467354d..676bc60 100644
--- a/apps/accounts/context_processors.py
+++ b/apps/accounts/context_processors.py
@@ -1,55 +1,24 @@
 """
-Context processors for accounts app
+Context processor for acknowledgement notifications
 """
-from django.contrib.auth import get_user_model
-
-User = get_user_model()
+from apps.accounts.models import EmployeeAcknowledgement
 
 
 def acknowledgement_counts(request):
     """
-    Context processor to add acknowledgement-related counts to all templates
+    Add pending acknowledgement count to all templates
     """
-    context = {}
-    
-    # Only process for authenticated users
-    if request.user.is_authenticated:
-        # Count pending acknowledgements for the current user
-        from .models import UserAcknowledgement, AcknowledgementChecklistItem
-        
-        # Get checklist items for the user's role
-        checklist_items = AcknowledgementChecklistItem.objects.filter(is_active=True)
-        
-        # Filter by user's role if applicable
-        user_role = None
-        if request.user.groups.filter(name='PX Admin').exists():
-            user_role = 'px_admin'
-        elif request.user.groups.filter(name='Hospital Admin').exists():
-            user_role = 'hospital_admin'
-        elif request.user.groups.filter(name='Department Manager').exists():
-            user_role = 'department_manager'
-        elif request.user.groups.filter(name='Staff').exists():
-            user_role = 'staff'
-        elif request.user.groups.filter(name='Physician').exists():
-            user_role = 'physician'
-        
-        if user_role:
-            checklist_items = checklist_items.filter(role__in=[user_role, 'all'])
-        else:
-            checklist_items = checklist_items.filter(role='all')
-        
-        # Count pending acknowledgements (not yet signed)
-        acknowledged_ids = UserAcknowledgement.objects.filter(
-            user=request.user,
-            is_acknowledged=True
-        ).values_list('checklist_item_id', flat=True)
-        
-        pending_count = checklist_items.exclude(id__in=acknowledged_ids).count()
-        context['pending_acknowledgements_count'] = pending_count
-        
-        # For PX Admins, count provisional users
-        if request.user.is_px_admin():
-            provisional_count = User.objects.filter(is_provisional=True).count()
-            context['provisional_user_count'] = provisional_count
-    
-    return context
\ No newline at end of file
+    if not request.user.is_authenticated:
+        return {}
+
+    try:
+        pending_count = EmployeeAcknowledgement.objects.filter(
+            employee=request.user,
+            is_signed=False
+        ).count()
+    except:
+        pending_count = 0
+
+    return {
+        'pending_acknowledgements_count': pending_count,
+    }
diff --git a/apps/accounts/management/commands/create_default_roles.py b/apps/accounts/management/commands/create_default_roles.py
index b07a08b..f4077fc 100644
--- a/apps/accounts/management/commands/create_default_roles.py
+++ b/apps/accounts/management/commands/create_default_roles.py
@@ -63,6 +63,12 @@ class Command(BaseCommand):
                 'description': 'Read-only access to reports and dashboards.',
                 'level': 10,
             },
+            {
+                'name': 'px_source_user',
+                'display_name': 'PX Source User',
+                'description': 'External source users who can create complaints and inquiries from their assigned source. Limited access to their own created data only.',
+                'level': 5,
+            },
         ]
         
         created_count = 0
@@ -163,6 +169,16 @@ class Command(BaseCommand):
             group.permissions.set(coordinator_permissions)
             return
         
+        # PX Source User gets limited complaint/inquiry permissions
+        if role.name == 'px_source_user':
+            source_user_perms = Permission.objects.filter(
+                content_type__app_label__in=['complaints'],
+                codename__in=['add_complaint', 'view_complaint', 'change_complaint',
+                              'add_inquiry', 'view_inquiry', 'change_inquiry']
+            )
+            group.permissions.set(source_user_perms)
+            return
+        
         # Others get basic view permissions
         view_permissions = Permission.objects.filter(
             codename__startswith='view_'
diff --git a/apps/accounts/management/commands/seed_acknowledgements.py b/apps/accounts/management/commands/seed_acknowledgements.py
new file mode 100644
index 0000000..8c8829f
--- /dev/null
+++ b/apps/accounts/management/commands/seed_acknowledgements.py
@@ -0,0 +1,152 @@
+"""
+Management command to seed the 14 default acknowledgement categories.
+
+Usage:
+    python manage.py seed_acknowledgements
+"""
+from django.core.management.base import BaseCommand
+from django.utils.translation import gettext_lazy as _
+
+
+class Command(BaseCommand):
+    help = 'Seed the 14 default acknowledgement categories'
+
+    # 14 default categories as specified
+    DEFAULT_CATEGORIES = [
+        {
+            'code': 'CLINICS',
+            'name_en': 'Clinics',
+            'name_ar': 'العيادات',
+            'icon': 'building',
+            'color': '#007bbd',
+        },
+        {
+            'code': 'ADMISSIONS_SOCIAL',
+            'name_en': 'Admissions / Social Services',
+            'name_ar': 'القبول / الخدمات الاجتماعية',
+            'icon': 'users',
+            'color': '#005696',
+        },
+        {
+            'code': 'MED_APPROVALS',
+            'name_en': 'Medical Approvals',
+            'name_ar': 'الموافقات الطبية',
+            'icon': 'file-check',
+            'color': '#10b981',
+        },
+        {
+            'code': 'CALL_CENTER',
+            'name_en': 'Call Center',
+            'name_ar': 'مركز الاتصال',
+            'icon': 'phone',
+            'color': '#f59e0b',
+        },
+        {
+            'code': 'PAYMENTS',
+            'name_en': 'Payments',
+            'name_ar': 'المدفوعات',
+            'icon': 'credit-card',
+            'color': '#6366f1',
+        },
+        {
+            'code': 'EMERGENCY',
+            'name_en': 'Emergency Services',
+            'name_ar': 'خدمات الطوارئ',
+            'icon': 'alert-circle',
+            'color': '#ef4444',
+        },
+        {
+            'code': 'MED_REPORTS',
+            'name_en': 'Medical Reports',
+            'name_ar': 'التقارير الطبية',
+            'icon': 'file-text',
+            'color': '#8b5cf6',
+        },
+        {
+            'code': 'ADMISSIONS_OFFICE',
+            'name_en': 'Admissions Office',
+            'name_ar': 'مكتب القبول',
+            'icon': 'briefcase',
+            'color': '#06b6d4',
+        },
+        {
+            'code': 'CBAHI',
+            'name_en': 'CBAHI',
+            'name_ar': 'الهلال الأحمر',
+            'icon': 'shield',
+            'color': '#dc2626',
+        },
+        {
+            'code': 'HR_PORTAL',
+            'name_en': 'HR Portal',
+            'name_ar': 'بوابة الموارد البشرية',
+            'icon': 'user-cog',
+            'color': '#059669',
+        },
+        {
+            'code': 'GENERAL_ORIENTATION',
+            'name_en': 'General Orientation',
+            'name_ar': 'التوجيه العام',
+            'icon': 'info',
+            'color': '#0891b2',
+        },
+        {
+            'code': 'SEHATY',
+            'name_en': 'Sehaty App (sick leaves)',
+            'name_ar': 'تطبيق صحتي (إجازات مرضية)',
+            'icon': 'smartphone',
+            'color': '#7c3aed',
+        },
+        {
+            'code': 'MOH_CARE',
+            'name_en': 'MOH Care Portal',
+            'name_ar': 'بوابة رعاية وزارة الصحة',
+            'icon': 'heart-pulse',
+            'color': '#db2777',
+        },
+        {
+            'code': 'CHI_CARE',
+            'name_en': 'CHI Care Portal',
+            'name_ar': 'بوابة رعاية مجلس الصحة',
+            'icon': 'activity',
+            'color': '#0284c7',
+        },
+    ]
+
+    def handle(self, *args, **options):
+        from apps.accounts.models import AcknowledgementCategory
+        
+        self.stdout.write(self.style.WARNING('Seeding 14 default acknowledgement categories...'))
+        
+        created_count = 0
+        updated_count = 0
+        
+        for category_data in self.DEFAULT_CATEGORIES:
+            category, created = AcknowledgementCategory.objects.update_or_create(
+                code=category_data['code'],
+                defaults={
+                    'name_en': category_data['name_en'],
+                    'name_ar': category_data['name_ar'],
+                    'icon': category_data['icon'],
+                    'color': category_data['color'],
+                    'is_default': True,
+                    'is_active': True,
+                }
+            )
+            
+            if created:
+                created_count += 1
+                self.stdout.write(self.style.SUCCESS(f'✓ Created: {category.name_en}'))
+            else:
+                updated_count += 1
+                self.stdout.write(self.style.WARNING(f'↻ Updated: {category.name_en}'))
+        
+        # Summary
+        total = AcknowledgementCategory.objects.filter(is_default=True).count()
+        
+        self.stdout.write(self.style.SUCCESS('\n' + '='*50))
+        self.stdout.write(self.style.SUCCESS(f'✓ Seeding complete!'))
+        self.stdout.write(self.style.SUCCESS(f'  Created: {created_count}'))
+        self.stdout.write(self.style.SUCCESS(f'  Updated: {updated_count}'))
+        self.stdout.write(self.style.SUCCESS(f'  Total default categories: {total}'))
+        self.stdout.write(self.style.SUCCESS('='*50))
diff --git a/apps/accounts/models.py b/apps/accounts/models.py
index 8dee105..785f09b 100644
--- a/apps/accounts/models.py
+++ b/apps/accounts/models.py
@@ -198,6 +198,18 @@ class User(AbstractUser, TimeStampedModel):
         """Check if user is Department Manager"""
         return self.has_role('Department Manager')
     
+    def is_source_user(self):
+        """Check if user is a PX Source User"""
+        return self.has_role('PX Source User')
+    
+    def get_source_user_profile_active(self):
+        """Get active source user profile if exists"""
+        if hasattr(self, 'source_user_profile'):
+            profile = self.source_user_profile
+            if profile and profile.is_active:
+                return profile
+        return None
+    
     def needs_onboarding(self):
         """Check if user needs to complete onboarding"""
         return self.is_provisional and not self.acknowledgement_completed
@@ -208,29 +220,74 @@ class User(AbstractUser, TimeStampedModel):
         return OnboardingService.get_user_progress_percentage(self)
 
 
+class AcknowledgementCategory(UUIDModel, TimeStampedModel):
+    """
+    Categories/Departments for acknowledgements.
+    Admins can add, edit, or deactivate categories.
+    Replaces hardcoded department choices with database-driven categories.
+    """
+    name_en = models.CharField(max_length=200)
+    name_ar = models.CharField(max_length=200, blank=True, help_text="Arabic name")
+    code = models.CharField(
+        max_length=50,
+        unique=True,
+        db_index=True,
+        help_text="Unique code (e.g., CLINICS, ADMISSIONS)"
+    )
+    description = models.TextField(blank=True, help_text="Category description")
+    
+    # Display & ordering
+    icon = models.CharField(
+        max_length=50,
+        blank=True,
+        help_text="Icon class (e.g., 'building', 'user')"
+    )
+    color = models.CharField(
+        max_length=7,
+        default='#007bbd',
+        help_text="Hex color code"
+    )
+    order = models.IntegerField(default=0, help_text="Display order")
+    
+    # Status
+    is_active = models.BooleanField(default=True, db_index=True)
+    is_default = models.BooleanField(
+        default=False,
+        help_text="One of the 14 default categories"
+    )
+    
+    class Meta:
+        ordering = ['order', 'name_en']
+        verbose_name_plural = 'Acknowledgement Categories'
+        indexes = [
+            models.Index(fields=['is_active', 'order']),
+            models.Index(fields=['code']),
+            models.Index(fields=['is_default']),
+        ]
+    
+    def __str__(self):
+        return self.name_en
+    
+    def activate(self):
+        self.is_active = True
+        self.save(update_fields=['is_active'])
+    
+    def deactivate(self):
+        self.is_active = False
+        self.save(update_fields=['is_active'])
+
+
 class AcknowledgementContent(UUIDModel, TimeStampedModel):
     """
-    Acknowledgement content sections for onboarding wizard.
-    Provides bilingual, role-specific educational content.
+    Acknowledgement content sections.
+    Provides bilingual educational content for each acknowledgement category.
     """
-    ROLE_CHOICES = [
-        ('px_admin', 'PX Admin'),
-        ('hospital_admin', 'Hospital Admin'),
-        ('department_manager', 'Department Manager'),
-        ('px_coordinator', 'PX Coordinator'),
-        ('physician', 'Physician'),
-        ('nurse', 'Nurse'),
-        ('staff', 'Staff'),
-        ('viewer', 'Viewer'),
-    ]
-    
-    # Target role (leave blank for all roles)
-    role = models.CharField(
-        max_length=50,
-        choices=ROLE_CHOICES,
-        null=True,
-        blank=True,
-        help_text="Target role for this content"
+    # Link to category (replaces role field)
+    category = models.ForeignKey(
+        AcknowledgementCategory,
+        on_delete=models.CASCADE,
+        related_name='content_sections',
+        help_text="Category this content belongs to"
     )
     
     # Content section
@@ -263,47 +320,34 @@ class AcknowledgementContent(UUIDModel, TimeStampedModel):
     # Organization
     order = models.IntegerField(
         default=0,
-        help_text="Display order in wizard"
+        help_text="Display order"
     )
     
     # Status
     is_active = models.BooleanField(default=True)
     
     class Meta:
-        ordering = ['role', 'order', 'code']
+        ordering = ['category', 'order', 'code']
         indexes = [
-            models.Index(fields=['role', 'is_active', 'order']),
+            models.Index(fields=['category', 'is_active', 'order']),
             models.Index(fields=['code']),
         ]
     
     def __str__(self):
-        role_text = self.get_role_display() if self.role else "All Roles"
-        return f"{role_text} - {self.title_en}"
+        return f"{self.category.name_en} - {self.title_en}"
 
 
 class AcknowledgementChecklistItem(UUIDModel, TimeStampedModel):
     """
-    Checklist items that users must acknowledge during onboarding.
-    Can be role-specific and linked to content sections.
+    Checklist items that users must acknowledge.
+    Each item is linked to a category (department).
     """
-    ROLE_CHOICES = [
-        ('px_admin', 'PX Admin'),
-        ('hospital_admin', 'Hospital Admin'),
-        ('department_manager', 'Department Manager'),
-        ('px_coordinator', 'PX Coordinator'),
-        ('physician', 'Physician'),
-        ('nurse', 'Nurse'),
-        ('staff', 'Staff'),
-        ('viewer', 'Viewer'),
-    ]
-    
-    # Target role (leave blank for all roles)
-    role = models.CharField(
-        max_length=50,
-        choices=ROLE_CHOICES,
-        null=True,
-        blank=True,
-        help_text="Target role for this item"
+    # Link to category (replaces role field)
+    category = models.ForeignKey(
+        AcknowledgementCategory,
+        on_delete=models.PROTECT,
+        related_name='checklist_items',
+        help_text="Category/Department this acknowledgement belongs to"
     )
     
     # Linked content (optional)
@@ -341,15 +385,14 @@ class AcknowledgementChecklistItem(UUIDModel, TimeStampedModel):
     is_active = models.BooleanField(default=True)
     
     class Meta:
-        ordering = ['role', 'order', 'code']
+        ordering = ['category', 'order', 'code']
         indexes = [
-            models.Index(fields=['role', 'is_active', 'order']),
+            models.Index(fields=['category', 'is_active', 'order']),
             models.Index(fields=['code']),
         ]
     
     def __str__(self):
-        role_text = self.get_role_display() if self.role else "All Roles"
-        return f"{role_text} - {self.text_en}"
+        return f"{self.category.name_en} - {self.text_en}"
 
 
 class UserAcknowledgement(UUIDModel, TimeStampedModel):
@@ -511,3 +554,104 @@ class Role(models.Model):
 
 # Import version models to ensure they are registered with Django
 from .version_models import ContentVersion, ChecklistItemVersion, ContentChangeLog
+
+
+# ============================================================================
+# SIMPLE ACKNOWLEDGEMENT MODELS
+# ============================================================================
+
+class SimpleAcknowledgement(UUIDModel, TimeStampedModel):
+    """
+    Simple acknowledgement item that employees must sign.
+    """
+    title = models.CharField(max_length=200, help_text="Acknowledgement title")
+    description = models.TextField(blank=True, help_text="Detailed description")
+    pdf_document = models.FileField(
+        upload_to='acknowledgements/documents/',
+        null=True,
+        blank=True,
+        help_text="PDF document for employees to review"
+    )
+
+    # Status
+    is_active = models.BooleanField(default=True, help_text="Show in employee checklist")
+    is_required = models.BooleanField(default=True, help_text="Must be signed by all employees")
+
+    # Display order
+    order = models.IntegerField(default=0)
+
+    class Meta:
+        ordering = ['order', 'title']
+        verbose_name = "Acknowledgement"
+        verbose_name_plural = "Acknowledgements"
+
+    def __str__(self):
+        return self.title
+
+    @property
+    def signed_count(self):
+        """Number of employees who have signed this acknowledgement."""
+        return self.employee_signatures.filter(is_signed=True).count()
+
+
+class EmployeeAcknowledgement(UUIDModel, TimeStampedModel):
+    """
+    Records which employees have signed which acknowledgements.
+    """
+    employee = models.ForeignKey(
+        'accounts.User',
+        on_delete=models.CASCADE,
+        related_name='employee_acknowledgements',
+        help_text="Employee who signed"
+    )
+    acknowledgement = models.ForeignKey(
+        SimpleAcknowledgement,
+        on_delete=models.CASCADE,
+        related_name='employee_signatures',
+        help_text="Acknowledgement that was signed"
+    )
+
+    # Sent tracking
+    sent_at = models.DateTimeField(null=True, blank=True, help_text="When acknowledgement was sent to employee")
+    sent_by = models.ForeignKey(
+        'accounts.User',
+        on_delete=models.SET_NULL,
+        null=True,
+        blank=True,
+        related_name='sent_acknowledgements',
+        help_text="Admin who sent this acknowledgement"
+    )
+
+    # Signature details
+    is_signed = models.BooleanField(default=False)
+    signed_at = models.DateTimeField(null=True, blank=True)
+    signature_name = models.CharField(max_length=200, blank=True, help_text="Name used when signing")
+    signature_employee_id = models.CharField(max_length=100, blank=True, help_text="Employee ID when signing")
+
+    # Signed PDF
+    signed_pdf = models.FileField(
+        upload_to='acknowledgements/signed/%Y/%m/',
+        null=True,
+        blank=True,
+        help_text="PDF with employee signature"
+    )
+
+    # IP and user agent for audit
+    ip_address = models.GenericIPAddressField(null=True, blank=True)
+    user_agent = models.TextField(blank=True)
+
+    # Notes
+    notes = models.TextField(blank=True, help_text="Admin notes about this acknowledgement")
+
+    class Meta:
+        ordering = ['-sent_at', '-signed_at']
+        unique_together = [['employee', 'acknowledgement']]
+        verbose_name = "Employee Acknowledgement"
+        verbose_name_plural = "Employee Acknowledgements"
+
+    def __str__(self):
+        if self.is_signed:
+            return f"✓ {self.employee.get_full_name()} - {self.acknowledgement.title}"
+        elif self.sent_at:
+            return f"→ {self.employee.get_full_name()} - {self.acknowledgement.title} (Sent)"
+        return f"○ {self.employee.get_full_name()} - {self.acknowledgement.title}"
diff --git a/apps/accounts/permissions.py b/apps/accounts/permissions.py
index 9d6c9ee..32b7fd2 100644
--- a/apps/accounts/permissions.py
+++ b/apps/accounts/permissions.py
@@ -173,6 +173,69 @@ class CanAccessDepartmentData(permissions.BasePermission):
         return False
 
 
+class IsSourceUser(permissions.BasePermission):
+    """
+    Permission class to check if user is a PX Source User.
+    Source Users can only access data from their assigned source.
+    """
+    message = "You must be a Source User to perform this action."
+    
+    def has_permission(self, request, view):
+        return (
+            request.user and 
+            request.user.is_authenticated and 
+            request.user.is_source_user()
+        )
+
+
+class IsSourceUserOrAdmin(permissions.BasePermission):
+    """
+    Permission class for Source Users or Admins.
+    Allows access to:
+    - PX Admins
+    - Hospital Admins  
+    - Department Managers
+    - Active Source Users
+    """
+    message = "You must be a Source User or Admin to perform this action."
+    
+    def has_permission(self, request, view):
+        if not (request.user and request.user.is_authenticated):
+            return False
+        
+        # Admins have access
+        if (request.user.is_px_admin() or 
+            request.user.is_hospital_admin() or 
+            request.user.is_department_manager()):
+            return True
+        
+        # Source Users have access
+        return request.user.is_source_user()
+
+
+class IsSourceUserOwnData(permissions.BasePermission):
+    """
+    Object-level permission to ensure source users can only access their own data.
+    """
+    message = "You can only access data you created."
+    
+    def has_object_permission(self, request, view, obj):
+        if not (request.user and request.user.is_authenticated):
+            return False
+        
+        # Admins can access everything
+        if (request.user.is_px_admin() or 
+            request.user.is_hospital_admin() or 
+            request.user.is_department_manager()):
+            return True
+        
+        # Source Users can only access their own created data
+        if request.user.is_source_user():
+            return getattr(obj, 'created_by', None) == request.user
+        
+        return False
+
+
 # ==================== Onboarding Permissions ====================
 
 class IsProvisionalUser(permissions.BasePermission):
diff --git a/apps/accounts/simple_acknowledgement_urls.py b/apps/accounts/simple_acknowledgement_urls.py
new file mode 100644
index 0000000..f43455b
--- /dev/null
+++ b/apps/accounts/simple_acknowledgement_urls.py
@@ -0,0 +1,43 @@
+"""
+Simple Acknowledgement URLs
+"""
+from django.urls import path
+from .simple_acknowledgement_views import (
+    simple_acknowledgement_list,
+    simple_acknowledgement_sign,
+    simple_acknowledgement_download,
+    admin_acknowledgement_list,
+    admin_acknowledgement_create,
+    admin_acknowledgement_edit,
+    admin_acknowledgement_delete,
+    admin_send_acknowledgement,
+    admin_upload_signed_pdf,
+    admin_mark_as_sent,
+    admin_employee_signatures,
+    admin_export_signatures,
+)
+
+app_name = 'simple_acknowledgements'
+
+urlpatterns = [
+    # Employee URLs
+    path('my-acknowledgements/', simple_acknowledgement_list, name='employee_list'),
+    path('my-acknowledgements/sign/<uuid:ack_id>/', simple_acknowledgement_sign, name='sign'),
+    path('my-acknowledgements/download/<uuid:ack_id>/', simple_acknowledgement_download, name='download_pdf'),
+
+    # Admin URLs
+    path('admin/acknowledgements/', admin_acknowledgement_list, name='admin_list'),
+    path('admin/acknowledgements/new/', admin_acknowledgement_create, name='admin_create'),
+    path('admin/acknowledgements/<uuid:ack_id>/edit/', admin_acknowledgement_edit, name='admin_edit'),
+    path('admin/acknowledgements/<uuid:ack_id>/delete/', admin_acknowledgement_delete, name='admin_delete'),
+    path('admin/acknowledgements/<uuid:ack_id>/send/', admin_send_acknowledgement, name='admin_send'),
+    path('admin/acknowledgements/<uuid:ack_id>/send-all/', admin_mark_as_sent, name='admin_send_all'),
+
+    # Admin Upload Signed PDF
+    path('admin/signatures/<uuid:signature_id>/upload/', admin_upload_signed_pdf, name='admin_upload_pdf'),
+
+    # Admin Signatures/Compliance
+    path('admin/signatures/', admin_employee_signatures, name='admin_signatures'),
+    path('admin/signatures/<uuid:ack_id>/', admin_employee_signatures, name='admin_ack_signatures'),
+    path('admin/export/', admin_export_signatures, name='admin_export'),
+]
diff --git a/apps/accounts/simple_acknowledgement_views.py b/apps/accounts/simple_acknowledgement_views.py
new file mode 100644
index 0000000..87eb9ac
--- /dev/null
+++ b/apps/accounts/simple_acknowledgement_views.py
@@ -0,0 +1,565 @@
+"""
+Simple Acknowledgement Views
+Simplified views for employee acknowledgement system.
+"""
+from django.shortcuts import render, redirect, get_object_or_404
+from django.contrib import messages
+from django.contrib.auth.decorators import login_required
+from django.utils.translation import gettext_lazy as _
+from django.utils import timezone
+from django.http import HttpResponse
+from django.db.models import Count, Q
+from django.core.paginator import Paginator
+
+from apps.accounts.models import User, SimpleAcknowledgement, EmployeeAcknowledgement
+
+
+# ============================================================================
+# EMPLOYEE VIEWS
+# ============================================================================
+
+@login_required
+def simple_acknowledgement_list(request):
+    """
+    Employee view: List all acknowledgements with sign status.
+    Shows acknowledgements that were sent to the employee OR are active and required.
+    """
+    employee = request.user
+
+    # Get acknowledgements that were specifically sent to this employee
+    sent_ack_ids = EmployeeAcknowledgement.objects.filter(
+        employee=employee
+    ).values_list('acknowledgement_id', flat=True)
+
+    # Get all active required acknowledgements that haven't been sent yet
+    active_required_ids = SimpleAcknowledgement.objects.filter(
+        is_active=True,
+        is_required=True
+    ).exclude(
+        id__in=sent_ack_ids
+    ).values_list('id', flat=True)
+
+    # Combine all acknowledgement IDs the employee needs to see
+    all_ack_ids = list(sent_ack_ids) + list(active_required_ids)
+
+    # Get all acknowledgements
+    acknowledgements = SimpleAcknowledgement.objects.filter(
+        id__in=all_ack_ids
+    ).order_by('order', 'title')
+
+    # Get or create employee acknowledgements for each
+    employee_acks = []
+    for ack in acknowledgements:
+        emp_ack, created = EmployeeAcknowledgement.objects.get_or_create(
+            employee=employee,
+            acknowledgement=ack,
+            defaults={'is_signed': False}
+        )
+        employee_acks.append({
+            'acknowledgement': ack,
+            'signature': emp_ack,
+            'is_signed': emp_ack.is_signed,
+            'signed_at': emp_ack.signed_at,
+            'has_pdf': bool(emp_ack.signed_pdf),
+            'sent_at': emp_ack.sent_at,
+            'sent_by': emp_ack.sent_by,
+        })
+
+    # Separate pending and signed
+    pending_acks = [e for e in employee_acks if not e['is_signed']]
+    signed_acks = [e for e in employee_acks if e['is_signed']]
+
+    # Calculate stats
+    total = len(employee_acks)
+    signed = len(signed_acks)
+    pending = len(pending_acks)
+
+    context = {
+        'employee_acks': employee_acks,
+        'pending_acks': pending_acks,
+        'signed_acks': signed_acks,
+        'total': total,
+        'signed': signed,
+        'pending': pending,
+        'progress': int((signed / total * 100)) if total > 0 else 0,
+    }
+    return render(request, 'accounts/simple_acknowledgements/list.html', context)
+
+
+@login_required
+def simple_acknowledgement_sign(request, ack_id):
+    """
+    Employee view: Sign an acknowledgement.
+    Shows the acknowledgement details and a form to sign with name and employee ID.
+    """
+    acknowledgement = get_object_or_404(SimpleAcknowledgement, id=ack_id, is_active=True)
+    employee = request.user
+
+    # Get or create the employee acknowledgement record
+    emp_ack, created = EmployeeAcknowledgement.objects.get_or_create(
+        employee=employee,
+        acknowledgement=acknowledgement,
+        defaults={'is_signed': False}
+    )
+
+    # If already signed, redirect to list
+    if emp_ack.is_signed:
+        messages.info(request, _('You have already signed this acknowledgement.'))
+        return redirect('accounts:simple_acknowledgements:employee_list')
+
+    if request.method == 'POST':
+        signature_name = request.POST.get('signature_name', '').strip()
+        signature_employee_id = request.POST.get('signature_employee_id', '').strip()
+        confirm = request.POST.get('confirm') == 'on'
+
+        # Validation
+        if not signature_name:
+            messages.error(request, _('Please enter your name.'))
+        elif not signature_employee_id:
+            messages.error(request, _('Please enter your employee ID.'))
+        elif not confirm:
+            messages.error(request, _('Please confirm that you have read and understood the acknowledgement.'))
+        else:
+            # Save the signature
+            emp_ack.is_signed = True
+            emp_ack.signed_at = timezone.now()
+            emp_ack.signature_name = signature_name
+            emp_ack.signature_employee_id = signature_employee_id
+            emp_ack.ip_address = get_client_ip(request)
+            emp_ack.user_agent = request.META.get('HTTP_USER_AGENT', '')[:500]
+            emp_ack.save()
+
+            # Generate simple signed PDF (optional - can be added later)
+            # For now, just copy the original PDF if it exists
+            if acknowledgement.pdf_document and not emp_ack.signed_pdf:
+                emp_ack.signed_pdf = acknowledgement.pdf_document
+                emp_ack.save()
+
+            messages.success(request, _('Acknowledgement signed successfully!'))
+            return redirect('accounts:simple_acknowledgements:employee_list')
+
+    context = {
+        'acknowledgement': acknowledgement,
+        'emp_ack': emp_ack,
+        'employee': employee,
+    }
+    return render(request, 'accounts/simple_acknowledgements/sign.html', context)
+
+
+@login_required
+def simple_acknowledgement_download(request, ack_id):
+    """
+    Employee view: Download the signed PDF.
+    """
+    emp_ack = get_object_or_404(
+        EmployeeAcknowledgement,
+        acknowledgement_id=ack_id,
+        employee=request.user,
+        is_signed=True
+    )
+
+    if emp_ack.signed_pdf:
+        response = HttpResponse(emp_ack.signed_pdf, content_type='application/pdf')
+        response['Content-Disposition'] = f'attachment; filename="{emp_ack.acknowledgement.title}.pdf"'
+        return response
+    elif emp_ack.acknowledgement.pdf_document:
+        response = HttpResponse(emp_ack.acknowledgement.pdf_document, content_type='application/pdf')
+        response['Content-Disposition'] = f'attachment; filename="{emp_ack.acknowledgement.title}.pdf"'
+        return response
+    else:
+        messages.error(request, _('No PDF available for this acknowledgement.'))
+        return redirect('accounts:simple_acknowledgements:employee_list')
+
+
+# ============================================================================
+# ADMIN VIEWS
+# ============================================================================
+
+@login_required
+def admin_acknowledgement_list(request):
+    """
+    Admin view: List all acknowledgements with management options.
+    """
+    if not request.user.is_staff and not request.user.is_px_admin():
+        messages.error(request, _('You do not have permission to access this page.'))
+        return redirect('accounts:simple_acknowledgements:employee_list')
+
+    acknowledgements = SimpleAcknowledgement.objects.all().order_by('order', 'title')
+
+    context = {
+        'acknowledgements': acknowledgements,
+    }
+    return render(request, 'accounts/simple_acknowledgements/admin_list.html', context)
+
+
+@login_required
+def admin_acknowledgement_create(request):
+    """
+    Admin view: Create a new acknowledgement.
+    """
+    if not request.user.is_staff and not request.user.is_px_admin():
+        messages.error(request, _('You do not have permission to access this page.'))
+        return redirect('accounts:simple_acknowledgements:employee_list')
+
+    if request.method == 'POST':
+        title = request.POST.get('title', '').strip()
+        description = request.POST.get('description', '').strip()
+        pdf_document = request.FILES.get('pdf_document')
+        is_required = request.POST.get('is_required') == 'on'
+        is_active = request.POST.get('is_active') == 'on'
+        order = request.POST.get('order', '0')
+
+        if not title:
+            messages.error(request, _('Please enter a title.'))
+        else:
+            acknowledgement = SimpleAcknowledgement.objects.create(
+                title=title,
+                description=description,
+                pdf_document=pdf_document,
+                is_required=is_required,
+                is_active=is_active,
+                order=int(order) if order.isdigit() else 0,
+            )
+            messages.success(request, _('Acknowledgement created successfully!'))
+            return redirect('accounts:simple_acknowledgements:admin_list')
+
+    return render(request, 'accounts/simple_acknowledgements/admin_create.html')
+
+
+@login_required
+def admin_acknowledgement_edit(request, ack_id):
+    """
+    Admin view: Edit an existing acknowledgement.
+    """
+    if not request.user.is_staff and not request.user.is_px_admin():
+        messages.error(request, _('You do not have permission to access this page.'))
+        return redirect('accounts:simple_acknowledgements:employee_list')
+
+    acknowledgement = get_object_or_404(SimpleAcknowledgement, id=ack_id)
+
+    if request.method == 'POST':
+        title = request.POST.get('title', '').strip()
+        description = request.POST.get('description', '').strip()
+        pdf_document = request.FILES.get('pdf_document')
+        is_required = request.POST.get('is_required') == 'on'
+        is_active = request.POST.get('is_active') == 'on'
+        order = request.POST.get('order', '0')
+
+        if not title:
+            messages.error(request, _('Please enter a title.'))
+        else:
+            acknowledgement.title = title
+            acknowledgement.description = description
+            acknowledgement.is_required = is_required
+            acknowledgement.is_active = is_active
+            acknowledgement.order = int(order) if order.isdigit() else 0
+
+            if pdf_document:
+                acknowledgement.pdf_document = pdf_document
+
+            acknowledgement.save()
+            messages.success(request, _('Acknowledgement updated successfully!'))
+            return redirect('accounts:simple_acknowledgements:admin_list')
+
+    context = {
+        'acknowledgement': acknowledgement,
+        'action': 'edit',
+    }
+    return render(request, 'accounts/simple_acknowledgements/admin_form.html', context)
+
+
+@login_required
+def admin_acknowledgement_delete(request, ack_id):
+    """
+    Admin view: Delete an acknowledgement.
+    """
+    if not request.user.is_staff and not request.user.is_px_admin():
+        messages.error(request, _('You do not have permission to access this page.'))
+        return redirect('accounts:simple_acknowledgements:employee_list')
+
+    acknowledgement = get_object_or_404(SimpleAcknowledgement, id=ack_id)
+
+    if request.method == 'POST':
+        acknowledgement.delete()
+        messages.success(request, _('Acknowledgement deleted successfully!'))
+        return redirect('accounts:simple_acknowledgements:admin_list')
+
+    context = {
+        'acknowledgement': acknowledgement,
+    }
+    return render(request, 'accounts/simple_acknowledgements/admin_delete.html', context)
+
+
+@login_required
+def admin_employee_signatures(request, ack_id=None):
+    """
+    Admin view: View all employee signatures.
+    Can filter by acknowledgement if ack_id is provided.
+    """
+    if not request.user.is_staff and not request.user.is_px_admin():
+        messages.error(request, _('You do not have permission to access this page.'))
+        return redirect('accounts:simple_acknowledgements:employee_list')
+
+    signatures = EmployeeAcknowledgement.objects.select_related(
+        'employee', 'acknowledgement'
+    ).order_by('-signed_at')
+
+    if ack_id:
+        acknowledgement = get_object_or_404(SimpleAcknowledgement, id=ack_id)
+        signatures = signatures.filter(acknowledgement=acknowledgement)
+    else:
+        acknowledgement = None
+
+    # Search
+    search = request.GET.get('search', '')
+    if search:
+        signatures = signatures.filter(
+            Q(employee__email__icontains=search) |
+            Q(employee__first_name__icontains=search) |
+            Q(employee__last_name__icontains=search) |
+            Q(signature_name__icontains=search) |
+            Q(signature_employee_id__icontains=search)
+        )
+
+    # Filter by status
+    status_filter = request.GET.get('status', '')
+    if status_filter == 'signed':
+        signatures = signatures.filter(is_signed=True)
+    elif status_filter == 'pending':
+        signatures = signatures.filter(is_signed=False)
+
+    # Pagination
+    paginator = Paginator(signatures, 50)
+    page_number = request.GET.get('page')
+    page_obj = paginator.get_page(page_number)
+
+    context = {
+        'signatures': page_obj,
+        'acknowledgement': acknowledgement,
+        'search': search,
+        'status_filter': status_filter,
+    }
+    return render(request, 'accounts/simple_acknowledgements/admin_signatures.html', context)
+
+
+@login_required
+def admin_export_signatures(request):
+    """
+    Admin view: Export all signatures to CSV.
+    """
+    if not request.user.is_staff and not request.user.is_px_admin():
+        messages.error(request, _('You do not have permission to access this page.'))
+        return redirect('accounts:simple_acknowledgements:employee_list')
+
+    import csv
+
+    response = HttpResponse(content_type='text/csv')
+    response['Content-Disposition'] = 'attachment; filename="acknowledgement_signatures.csv"'
+
+    writer = csv.writer(response)
+    writer.writerow([
+        'Employee Email', 'Employee Name', 'Employee ID (at sign)',
+        'Acknowledgement', 'Status', 'Signed At', 'IP Address'
+    ])
+
+    signatures = EmployeeAcknowledgement.objects.select_related(
+        'employee', 'acknowledgement'
+    ).order_by('-signed_at')
+
+    for sig in signatures:
+        writer.writerow([
+            sig.employee.email,
+            sig.signature_name or sig.employee.get_full_name(),
+            sig.signature_employee_id,
+            sig.acknowledgement.title,
+            'Signed' if sig.is_signed else 'Pending',
+            sig.signed_at.strftime('%Y-%m-%d %H:%M') if sig.signed_at else '',
+            sig.ip_address or '',
+        ])
+
+    return response
+
+
+@login_required
+def admin_send_acknowledgement(request, ack_id):
+    """
+    Admin view: Send acknowledgement to specific staff members.
+    """
+    if not request.user.is_staff and not request.user.is_px_admin():
+        messages.error(request, _('You do not have permission to access this page.'))
+        return redirect('accounts:simple_acknowledgements:employee_list')
+
+    acknowledgement = get_object_or_404(SimpleAcknowledgement, id=ack_id)
+
+    # Get all active staff
+    from apps.accounts.models import User
+    staff_list = User.objects.filter(
+        is_active=True,
+        is_provisional=False
+    ).exclude(
+        id=request.user.id
+    ).order_by('first_name', 'last_name')
+
+    # Get already sent employees
+    already_sent_ids = EmployeeAcknowledgement.objects.filter(
+        acknowledgement=acknowledgement
+    ).values_list('employee_id', flat=True)
+
+    if request.method == 'POST':
+        employee_ids = request.POST.getlist('employees')
+        send_email = request.POST.get('send_email') == 'on'
+
+        if not employee_ids:
+            messages.error(request, _('Please select at least one employee.'))
+        else:
+            sent_count = 0
+            for emp_id in employee_ids:
+                emp_ack, created = EmployeeAcknowledgement.objects.get_or_create(
+                    employee_id=emp_id,
+                    acknowledgement=acknowledgement,
+                    defaults={
+                        'sent_at': timezone.now(),
+                        'sent_by': request.user,
+                    }
+                )
+                if created:
+                    sent_count += 1
+                    # Update sent info if record already existed but wasn't sent
+                elif not emp_ack.sent_at:
+                    emp_ack.sent_at = timezone.now()
+                    emp_ack.sent_by = request.user
+                    emp_ack.save()
+                    sent_count += 1
+
+            # Send email notifications if requested
+            if send_email and sent_count > 0:
+                try:
+                    from apps.notifications.services import NotificationService
+
+                    employees = User.objects.filter(id__in=employee_ids)
+                    for emp in employees:
+                        NotificationService.send_email(
+                            email=emp.email,
+                            subject=f'Action Required: {acknowledgement.title}',
+                            message=f'''Dear {emp.get_full_name() or emp.email},
+
+You have been requested to sign the following acknowledgement: {acknowledgement.title}
+
+Please log in to the system to review and sign this document.
+
+Best regards,
+HR Department''',
+                            related_object=emp_ack,
+                        )
+                except Exception as e:
+                    messages.warning(request, _('Acknowledgements sent but email notification failed.'))
+
+            messages.success(request, _('Acknowledgement sent to {count} employee(s).').format(count=sent_count))
+            return redirect('accounts:simple_acknowledgements:admin_list')
+
+    context = {
+        'acknowledgement': acknowledgement,
+        'staff_list': staff_list,
+        'already_sent_ids': list(already_sent_ids),
+    }
+    return render(request, 'accounts/simple_acknowledgements/admin_send.html', context)
+
+
+@login_required
+def admin_upload_signed_pdf(request, signature_id):
+    """
+    Admin view: Upload signed PDF on behalf of an employee.
+    """
+    if not request.user.is_staff and not request.user.is_px_admin():
+        messages.error(request, _('You do not have permission to access this page.'))
+        return redirect('accounts:simple_acknowledgements:employee_list')
+
+    emp_ack = get_object_or_404(
+        EmployeeAcknowledgement.objects.select_related('employee', 'acknowledgement'),
+        id=signature_id
+    )
+
+    if request.method == 'POST':
+        signed_pdf = request.FILES.get('signed_pdf')
+        signature_name = request.POST.get('signature_name', emp_ack.employee.get_full_name())
+        signature_employee_id = request.POST.get('signature_employee_id', '')
+        notes = request.POST.get('notes', '')
+
+        if not signed_pdf:
+            messages.error(request, _('Please upload a signed PDF.'))
+        else:
+            emp_ack.signed_pdf = signed_pdf
+            emp_ack.is_signed = True
+            emp_ack.signed_at = timezone.now()
+            emp_ack.signature_name = signature_name
+            emp_ack.signature_employee_id = signature_employee_id
+            emp_ack.notes = notes
+            emp_ack.save()
+
+            messages.success(
+                request,
+                _('Signed PDF uploaded successfully for {name}.').format(name=emp_ack.employee.get_full_name())
+            )
+            return redirect('accounts:simple_acknowledgements:admin_signatures')
+
+    context = {
+        'emp_ack': emp_ack,
+        'employee': emp_ack.employee,
+        'acknowledgement': emp_ack.acknowledgement,
+    }
+    return render(request, 'accounts/simple_acknowledgements/admin_upload_pdf.html', context)
+
+
+@login_required
+def admin_mark_as_sent(request, ack_id):
+    """
+    Admin view: Mark acknowledgement as sent to all employees (bulk action).
+    """
+    if not request.user.is_staff and not request.user.is_px_admin():
+        messages.error(request, _('You do not have permission to access this page.'))
+        return redirect('accounts:simple_acknowledgements:employee_list')
+
+    acknowledgement = get_object_or_404(SimpleAcknowledgement, id=ack_id)
+
+    if request.method == 'POST':
+        from apps.accounts.models import User
+
+        # Get all active employees who haven't been sent this yet
+        all_employees = User.objects.filter(is_active=True, is_provisional=False)
+        already_sent = EmployeeAcknowledgement.objects.filter(
+            acknowledgement=acknowledgement
+        ).values_list('employee_id', flat=True)
+
+        new_employees = all_employees.exclude(id__in=already_sent)
+
+        created_count = 0
+        for emp in new_employees:
+            EmployeeAcknowledgement.objects.create(
+                employee=emp,
+                acknowledgement=acknowledgement,
+                sent_at=timezone.now(),
+                sent_by=request.user,
+            )
+            created_count += 1
+
+        messages.success(
+            request,
+            _('Acknowledgement sent to {count} new employee(s).').format(count=created_count)
+        )
+        return redirect('accounts:simple_acknowledgements:admin_list')
+
+    return redirect('accounts:simple_acknowledgements:admin_list')
+
+
+# ============================================================================
+# HELPER FUNCTIONS
+# ============================================================================
+
+def get_client_ip(request):
+    """Get client IP address from request."""
+    x_forwarded_for = request.META.get('HTTP_X_FORWARDED_FOR')
+    if x_forwarded_for:
+        ip = x_forwarded_for.split(',')[0]
+    else:
+        ip = request.META.get('REMOTE_ADDR')
+    return ip
diff --git a/apps/accounts/urls.py b/apps/accounts/urls.py
index de4195c..578baaf 100644
--- a/apps/accounts/urls.py
+++ b/apps/accounts/urls.py
@@ -2,25 +2,18 @@ from django.urls import include, path
 from rest_framework.routers import DefaultRouter
 from rest_framework_simplejwt.views import TokenRefreshView
 
-from .views import (
-    AcknowledgementChecklistItemViewSet,
-    AcknowledgementContentViewSet,
-    CustomTokenObtainPairView,
-    RoleViewSet,
-    UserAcknowledgementViewSet,
-    UserViewSet,
-    user_settings,
-)
+# Import ViewSets directly from views.py file
+from apps.accounts import views as account_views_main
+
+# Import specific items from views
+from apps.accounts.views import user_settings, CustomTokenObtainPairView
+
 from .ui_views import (
-    acknowledgement_checklist_list,
-    acknowledgement_content_list,
-    acknowledgement_dashboard,
     bulk_deactivate_users,
     bulk_invite_users,
     bulk_resend_invitations,
     change_password_view,
     CustomPasswordResetConfirmView,
-    export_acknowledgements,
     export_provisional_users,
     login_view,
     logout_view,
@@ -39,13 +32,13 @@ from .ui_views import (
 app_name = 'accounts'
 
 router = DefaultRouter()
-router.register(r'users', UserViewSet, basename='user')
-router.register(r'roles', RoleViewSet, basename='role')
-router.register(r'onboarding/content', AcknowledgementContentViewSet, basename='acknowledgement-content')
-router.register(r'onboarding/checklist', AcknowledgementChecklistItemViewSet, basename='acknowledgement-checklist')
-router.register(r'onboarding/acknowledgements', UserAcknowledgementViewSet, basename='user-acknowledgement')
+router.register(r'users', account_views_main.UserViewSet, basename='user')
+router.register(r'roles', account_views_main.RoleViewSet, basename='role')
 
 urlpatterns = [
+    # Simple Acknowledgement URLs (simplified system)
+    path('acknowledgements/', include('apps.accounts.simple_acknowledgement_urls')),
+
     # UI Authentication URLs
     path('login/', login_view, name='login'),
     path('logout/', logout_view, name='logout'),
@@ -53,14 +46,14 @@ urlpatterns = [
     path('password/reset/', password_reset_view, name='password_reset'),
     path('password/reset/confirm/<uidb64>/<token>/', CustomPasswordResetConfirmView.as_view(), name='password_reset_confirm'),
     path('password/change/', change_password_view, name='password_change'),
-    
+
     # JWT Authentication
     path('token/', CustomTokenObtainPairView.as_view(), name='token_obtain_pair'),
     path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
-    
+
     # User and Role endpoints
     path('', include(router.urls)),
-    
+
     # Onboarding Wizard UI
     path('onboarding/activate/<str:token>/', onboarding_activate, name='onboarding-activate'),
     path('onboarding/welcome/', onboarding_welcome, name='onboarding-welcome'),
@@ -68,20 +61,14 @@ urlpatterns = [
     path('onboarding/wizard/checklist/', onboarding_step_checklist, name='onboarding-step-checklist'),
     path('onboarding/wizard/activation/', onboarding_step_activation, name='onboarding-step-activation'),
     path('onboarding/complete/', onboarding_complete, name='onboarding-complete'),
-    
+
     # Provisional User Management
     path('onboarding/provisional/', provisional_user_list, name='provisional-user-list'),
     path('onboarding/provisional/<uuid:user_id>/progress/', provisional_user_progress, name='provisional-user-progress'),
     path('onboarding/bulk-invite/', bulk_invite_users, name='bulk-invite-users'),
     path('onboarding/bulk-resend/', bulk_resend_invitations, name='bulk-resend-invitations'),
     path('onboarding/bulk-deactivate/', bulk_deactivate_users, name='bulk-deactivate-users'),
-    path('onboarding/export/acknowledgements/', export_acknowledgements, name='export-acknowledgements'),
     path('onboarding/export/users/', export_provisional_users, name='export-provisional-users'),
-    
-    # Acknowledgement Management
-    path('onboarding/content/', acknowledgement_content_list, name='acknowledgement-content-list'),
-    path('onboarding/checklist-items/', acknowledgement_checklist_list, name='acknowledgement-checklist-list'),
-    path('onboarding/dashboard/', acknowledgement_dashboard, name='acknowledgement-dashboard'),
     path('onboarding/preview/', preview_wizard_as_role, name='preview-wizard'),
     path('onboarding/preview/<str:role>/', preview_wizard_as_role, name='preview-wizard-role'),
 ]
diff --git a/apps/accounts/views.py b/apps/accounts/views.py
index 6869fcd..13ea11b 100644
--- a/apps/accounts/views.py
+++ b/apps/accounts/views.py
@@ -149,6 +149,10 @@ class UserViewSet(viewsets.ModelViewSet):
         if user.is_department_manager() and user.department:
             return queryset.filter(department=user.department).select_related('hospital', 'department')
 
+        # Source Users see only themselves
+        if user.is_source_user():
+            return queryset.filter(id=user.id)
+
         # Others see only themselves
         return queryset.filter(id=user.id)
 
diff --git a/apps/analytics/ui_views.py b/apps/analytics/ui_views.py
index 996c43b..69a6b60 100644
--- a/apps/analytics/ui_views.py
+++ b/apps/analytics/ui_views.py
@@ -18,21 +18,51 @@ from apps.physicians.models import PhysicianMonthlyRating
 
 from .models import KPI, KPIValue
 from .services import UnifiedAnalyticsService, ExportService
+from apps.core.decorators import block_source_user
+import json
 
 
+def serialize_queryset_values(queryset):
+    """Properly serialize QuerySet values to JSON string."""
+    if queryset is None:
+        return '[]'
+    data = list(queryset)
+    result = []
+    for item in data:
+        row = {}
+        for key, value in item.items():
+            # Convert UUID to string
+            if hasattr(value, 'hex'):  # UUID object
+                row[key] = str(value)
+            # Convert Python None to JavaScript null
+            elif value is None:
+                row[key] = None
+            else:
+                row[key] = value
+        result.append(row)
+    return json.dumps(result, default=str)
+
+
+@block_source_user
 @login_required
 def analytics_dashboard(request):
     """
     Analytics dashboard with KPIs and charts.
-    
-    Features:
-    - KPI cards with current values
+
+    Comprehensive dashboard showing:
+    - KPI cards with current values for Complaints, Actions, Surveys, Feedback
     - Trend charts
     - Department rankings
-    - Physician rankings
+    - Source distribution
+    - Status breakdown
     """
-    user = request.user
+    from apps.feedback.models import Feedback
+    from django.utils import timezone
+    from datetime import timedelta
+    from django.db.models.functions import TruncDate, TruncMonth
     
+    user = request.user
+
     # Get hospital filter
     hospital_filter = request.GET.get('hospital')
     if hospital_filter:
@@ -41,31 +71,104 @@ def analytics_dashboard(request):
         hospital = user.hospital
     else:
         hospital = None
-    
-    # Calculate key metrics
+
+    # Base querysets
     complaints_queryset = Complaint.objects.all()
     actions_queryset = PXAction.objects.all()
     surveys_queryset = SurveyInstance.objects.filter(status='completed')
-    
+    feedback_queryset = Feedback.objects.all()
+
     if hospital:
         complaints_queryset = complaints_queryset.filter(hospital=hospital)
         actions_queryset = actions_queryset.filter(hospital=hospital)
         surveys_queryset = surveys_queryset.filter(survey_template__hospital=hospital)
+        feedback_queryset = feedback_queryset.filter(hospital=hospital)
+
+    # ============ COMPLAINTS KPIs ============
+    total_complaints = complaints_queryset.count()
+    open_complaints = complaints_queryset.filter(status='open').count()
+    in_progress_complaints = complaints_queryset.filter(status='in_progress').count()
+    resolved_complaints = complaints_queryset.filter(status='resolved').count()
+    closed_complaints = complaints_queryset.filter(status='closed').count()
+    overdue_complaints = complaints_queryset.filter(is_overdue=True).count()
     
-    # KPI calculations
-    kpis = {
-        'total_complaints': complaints_queryset.count(),
-        'open_complaints': complaints_queryset.filter(status='open').count(),
-        'overdue_complaints': complaints_queryset.filter(is_overdue=True).count(),
-        'total_actions': actions_queryset.count(),
-        'open_actions': actions_queryset.filter(status='open').count(),
-        'overdue_actions': actions_queryset.filter(is_overdue=True).count(),
-        'avg_survey_score': surveys_queryset.aggregate(avg=Avg('total_score'))['avg'] or 0,
-        'negative_surveys': surveys_queryset.filter(is_negative=True).count(),
-    }
+    # Complaint sources
+    complaint_sources = complaints_queryset.values('source').annotate(count=Count('id')).order_by('-count')[:6]
+
+    # Complaint domains (Level 1)
+    top_domains = complaints_queryset.filter(domain__isnull=False).values('domain__name_en').annotate(count=Count('id')).order_by('-count')[:5]
+
+    # Complaint categories (Level 2)
+    top_categories = complaints_queryset.filter(category__isnull=False).values('category__name_en').annotate(count=Count('id')).order_by('-count')[:5]
+
+    # Complaint severity
+    severity_breakdown = complaints_queryset.values('severity').annotate(count=Count('id')).order_by('-count')
     
-    # Department rankings (top 5 by survey score)
-    # Query from SurveyInstance directly and annotate with department
+    # Status breakdown
+    status_breakdown = complaints_queryset.values('status').annotate(count=Count('id')).order_by('-count')
+
+    # ============ ACTIONS KPIs ============
+    total_actions = actions_queryset.count()
+    open_actions = actions_queryset.filter(status='open').count()
+    in_progress_actions = actions_queryset.filter(status='in_progress').count()
+    approved_actions = actions_queryset.filter(status='approved').count()
+    closed_actions = actions_queryset.filter(status='closed').count()
+    overdue_actions = actions_queryset.filter(is_overdue=True).count()
+    
+    # Action sources
+    action_sources = actions_queryset.values('source_type').annotate(count=Count('id')).order_by('-count')[:6]
+    
+    # Action categories
+    action_categories = actions_queryset.exclude(category='').values('category').annotate(count=Count('id')).order_by('-count')[:5]
+
+    # ============ SURVEYS KPIs ============
+    total_surveys = surveys_queryset.count()
+    avg_survey_score = surveys_queryset.aggregate(avg=Avg('total_score'))['avg'] or 0
+    negative_surveys = surveys_queryset.filter(is_negative=True).count()
+    
+    # Survey completion rate
+    all_surveys = SurveyInstance.objects.all()
+    if hospital:
+        all_surveys = all_surveys.filter(survey_template__hospital=hospital)
+    total_sent = all_surveys.count()
+    completed_surveys = all_surveys.filter(status='completed').count()
+    completion_rate = (completed_surveys / total_sent * 100) if total_sent > 0 else 0
+    
+    # Survey types
+    survey_types = all_surveys.values('survey_template__survey_type').annotate(count=Count('id')).order_by('-count')[:5]
+
+    # ============ FEEDBACK KPIs ============
+    total_feedback = feedback_queryset.count()
+    compliments = feedback_queryset.filter(feedback_type='compliment').count()
+    suggestions = feedback_queryset.filter(feedback_type='suggestion').count()
+    
+    # Sentiment analysis
+    sentiment_breakdown = feedback_queryset.values('sentiment').annotate(count=Count('id')).order_by('-count')
+    
+    # Feedback categories
+    feedback_categories = feedback_queryset.values('category').annotate(count=Count('id')).order_by('-count')[:5]
+    
+    # Average rating
+    avg_rating = feedback_queryset.filter(rating__isnull=False).aggregate(avg=Avg('rating'))['avg'] or 0
+
+    # ============ TRENDS (Last 30 days) ============
+    thirty_days_ago = timezone.now() - timedelta(days=30)
+    
+    # Complaint trends
+    complaint_trend = complaints_queryset.filter(
+        created_at__gte=thirty_days_ago
+    ).annotate(
+        day=TruncDate('created_at')
+    ).values('day').annotate(count=Count('id')).order_by('day')
+    
+    # Survey score trend
+    survey_score_trend = surveys_queryset.filter(
+        completed_at__gte=thirty_days_ago
+    ).annotate(
+        day=TruncDate('completed_at')
+    ).values('day').annotate(avg_score=Avg('total_score')).order_by('day')
+
+    # ============ DEPARTMENT RANKINGS ============
     department_rankings = Department.objects.filter(
         status='active'
     ).annotate(
@@ -76,26 +179,143 @@ def analytics_dashboard(request):
         survey_count=Count(
             'journey_instances__surveys',
             filter=Q(journey_instances__surveys__status='completed')
-        )
+        ),
+        complaint_count=Count('complaints'),
+        action_count=Count('px_actions')
     ).filter(
         survey_count__gt=0
-    ).order_by('-avg_score')[:5]
-    
+    ).order_by('-avg_score')[:7]
+
+    # ============ TIME-BASED CALCULATIONS ============
+    # Average resolution time (complaints)
+    resolved_with_time = complaints_queryset.filter(
+        status__in=['resolved', 'closed'],
+        resolved_at__isnull=False,
+        created_at__isnull=False
+    )
+    if resolved_with_time.exists():
+        avg_resolution_hours = resolved_with_time.annotate(
+            resolution_time=F('resolved_at') - F('created_at')
+        ).aggregate(avg=Avg('resolution_time'))['avg']
+        if avg_resolution_hours:
+            avg_resolution_hours = avg_resolution_hours.total_seconds() / 3600
+        else:
+            avg_resolution_hours = 0
+    else:
+        avg_resolution_hours = 0
+
+    # Average action completion time
+    closed_actions_with_time = actions_queryset.filter(
+        status='closed',
+        closed_at__isnull=False,
+        created_at__isnull=False
+    )
+    if closed_actions_with_time.exists():
+        avg_action_days = closed_actions_with_time.annotate(
+            completion_time=F('closed_at') - F('created_at')
+        ).aggregate(avg=Avg('completion_time'))['avg']
+        if avg_action_days:
+            avg_action_days = avg_action_days.days
+        else:
+            avg_action_days = 0
+    else:
+        avg_action_days = 0
+
+    # ============ SLA COMPLIANCE ============
+    total_with_sla = complaints_queryset.filter(due_at__isnull=False).count()
+    resolved_within_sla = complaints_queryset.filter(
+        status__in=['resolved', 'closed'],
+        resolved_at__lte=F('due_at')
+    ).count()
+    sla_compliance = (resolved_within_sla / total_with_sla * 100) if total_with_sla > 0 else 0
+
+    # ============ NPS CALCULATION ============
+    # NPS = % Promoters (9-10) - % Detractors (0-6)
+    nps_surveys = surveys_queryset.filter(
+        survey_template__survey_type='nps',
+        total_score__isnull=False
+    )
+    if nps_surveys.exists():
+        promoters = nps_surveys.filter(total_score__gte=9).count()
+        detractors = nps_surveys.filter(total_score__lte=6).count()
+        total_nps = nps_surveys.count()
+        nps_score = ((promoters - detractors) / total_nps * 100) if total_nps > 0 else 0
+    else:
+        nps_score = 0
+
     # Get hospitals for filter
     hospitals = Hospital.objects.filter(status='active')
     if not user.is_px_admin() and user.hospital:
         hospitals = hospitals.filter(id=user.hospital.id)
-    
+
+    # Build comprehensive KPI data
+    kpis = {
+        # Complaints
+        'total_complaints': total_complaints,
+        'open_complaints': open_complaints,
+        'in_progress_complaints': in_progress_complaints,
+        'resolved_complaints': resolved_complaints,
+        'closed_complaints': closed_complaints,
+        'overdue_complaints': overdue_complaints,
+        'avg_resolution_hours': round(avg_resolution_hours, 1),
+        'sla_compliance': round(sla_compliance, 1),
+        
+        # Actions
+        'total_actions': total_actions,
+        'open_actions': open_actions,
+        'in_progress_actions': in_progress_actions,
+        'approved_actions': approved_actions,
+        'closed_actions': closed_actions,
+        'overdue_actions': overdue_actions,
+        'avg_action_days': round(avg_action_days, 1),
+        
+        # Surveys
+        'total_surveys': total_surveys,
+        'avg_survey_score': round(avg_survey_score, 2),
+        'nps_score': round(nps_score, 1),
+        'negative_surveys': negative_surveys,
+        'completion_rate': round(completion_rate, 1),
+        
+        # Feedback
+        'total_feedback': total_feedback,
+        'compliments': compliments,
+        'suggestions': suggestions,
+        'avg_rating': round(avg_rating, 2),
+    }
+
     context = {
         'kpis': kpis,
-        'department_rankings': department_rankings,
         'hospitals': hospitals,
         'selected_hospital': hospital,
+
+        # Complaint analytics - serialize properly for JSON
+        'complaint_sources': serialize_queryset_values(complaint_sources),
+        'top_domains': serialize_queryset_values(top_domains),
+        'top_categories': serialize_queryset_values(top_categories),
+        'severity_breakdown': serialize_queryset_values(severity_breakdown),
+        'status_breakdown': serialize_queryset_values(status_breakdown),
+        'complaint_trend': serialize_queryset_values(complaint_trend),
+
+        # Action analytics
+        'action_sources': serialize_queryset_values(action_sources),
+        'action_categories': serialize_queryset_values(action_categories),
+
+        # Survey analytics
+        'survey_types': serialize_queryset_values(survey_types),
+        'survey_score_trend': serialize_queryset_values(survey_score_trend),
+
+        # Feedback analytics
+        'sentiment_breakdown': serialize_queryset_values(sentiment_breakdown),
+        'feedback_categories': serialize_queryset_values(feedback_categories),
+
+        # Department rankings
+        'department_rankings': department_rankings,
     }
-    
+
     return render(request, 'analytics/dashboard.html', context)
 
 
+@block_source_user
 @login_required
 def kpi_list(request):
     """KPI definitions list view"""
@@ -130,6 +350,7 @@ def kpi_list(request):
     return render(request, 'analytics/kpi_list.html', context)
 
 
+@block_source_user
 @login_required
 def command_center(request):
     """
@@ -191,6 +412,7 @@ def command_center(request):
     return render(request, 'analytics/command_center.html', context)
 
 
+@block_source_user
 @login_required
 def command_center_api(request):
     """
@@ -350,6 +572,7 @@ def command_center_api(request):
     })
 
 
+@block_source_user
 @login_required
 def export_command_center(request, export_format):
     """
diff --git a/apps/callcenter/ui_views.py b/apps/callcenter/ui_views.py
index 73b8c42..b77d31c 100644
--- a/apps/callcenter/ui_views.py
+++ b/apps/callcenter/ui_views.py
@@ -11,7 +11,7 @@ from django.utils import timezone
 from django.views.decorators.http import require_http_methods
 from uuid import UUID
 
-from apps.complaints.models import Complaint, Inquiry
+from apps.complaints.models import Complaint, Inquiry, ComplaintSource
 from apps.px_sources.models import PXSource
 from apps.core.services import AuditService
 from apps.organizations.models import Department, Hospital, Patient, Staff
@@ -28,8 +28,13 @@ def interaction_list(request):
 
     # Apply RBAC filters
     user = request.user
+    # Get selected hospital for PX Admins (from middleware)
+    selected_hospital = getattr(request, 'tenant_hospital', None)
+    
     if user.is_px_admin():
-        pass
+        # PX Admins see all, but filter by selected hospital if set
+        if selected_hospital:
+            queryset = queryset.filter(hospital=selected_hospital)
     elif user.hospital:
         queryset = queryset.filter(hospital=user.hospital)
     else:
@@ -251,7 +256,7 @@ def complaint_success(request, pk):
 def complaint_list(request):
     """List complaints created by call center"""
     queryset = Complaint.objects.filter(
-        source=ComplaintSource.CALL_CENTER
+        complaint_source=ComplaintSource.CALL_CENTER
     ).select_related(
         'patient', 'hospital', 'department', 'staff', 'assigned_to'
     )
diff --git a/apps/complaints/admin.py b/apps/complaints/admin.py
index a25fe1d..ab65a3e 100644
--- a/apps/complaints/admin.py
+++ b/apps/complaints/admin.py
@@ -101,7 +101,7 @@ class ComplaintAdmin(admin.ModelAdmin):
             'fields': ('created_by',)
         }),
         ('Status & Assignment', {
-            'fields': ('status', 'assigned_to', 'assigned_at')
+            'fields': ('status', 'assigned_to', 'assigned_at', 'activated_at')
         }),
         ('SLA Tracking', {
             'fields': ('due_at', 'is_overdue', 'reminder_sent_at', 'escalated_at')
@@ -119,7 +119,7 @@ class ComplaintAdmin(admin.ModelAdmin):
     )
 
     readonly_fields = [
-        'assigned_at', 'reminder_sent_at', 'escalated_at',
+        'assigned_at', 'activated_at', 'reminder_sent_at', 'escalated_at',
         'resolved_at', 'closed_at', 'resolution_survey_sent_at',
         'created_at', 'updated_at'
     ]
@@ -142,17 +142,17 @@ class ComplaintAdmin(admin.ModelAdmin):
         """Display location hierarchy in admin"""
         parts = []
         if obj.location:
-            parts.append(obj.location.name)
+            parts.append(obj.location.name_en or obj.location.name_ar or str(obj.location))
         if obj.main_section:
-            parts.append(obj.main_section.name)
+            parts.append(obj.main_section.name_en or obj.main_section.name_ar or str(obj.main_section))
         if obj.subsection:
-            parts.append(obj.subsection.name)
+            parts.append(obj.subsection.name_en or obj.subsection.name_ar or str(obj.subsection))
         
         if not parts:
             return '—'
         
         hierarchy = ' → '.join(parts)
-        return format_html('<span class="text-muted">{}</span>', hierarchy)
+        return format_html('<span class="text-muted">{0}</span>', hierarchy)
     location_hierarchy.short_description = 'Location'
 
     def severity_badge(self, obj):
@@ -165,7 +165,7 @@ class ComplaintAdmin(admin.ModelAdmin):
         }
         color = colors.get(obj.severity, 'secondary')
         return format_html(
-            '<span class="badge bg-{}">{}</span>',
+            '<span class="badge bg-{0}">{1}</span>',
             color,
             obj.get_severity_display()
         )
@@ -182,7 +182,7 @@ class ComplaintAdmin(admin.ModelAdmin):
         }
         color = colors.get(obj.status, 'secondary')
         return format_html(
-            '<span class="badge bg-{}">{}</span>',
+            '<span class="badge bg-{0}">{1}</span>',
             color,
             obj.get_status_display()
         )
@@ -196,7 +196,7 @@ class ComplaintAdmin(admin.ModelAdmin):
         }
         color = colors.get(obj.complaint_type, 'secondary')
         return format_html(
-            '<span class="badge bg-{}">{}</span>',
+            '<span class="badge bg-{0}">{1}</span>',
             color,
             obj.get_complaint_type_display()
         )
@@ -386,13 +386,13 @@ class ComplaintSLAConfigAdmin(admin.ModelAdmin):
         """Display reminder timing method"""
         if obj.source and obj.first_reminder_hours_after:
             return format_html(
-                '<span class="badge bg-primary">Source-based: {}h / {}h</span>',
+                '<span class="badge bg-primary">Source-based: {0}h / {1}h</span>',
                 obj.first_reminder_hours_after,
                 obj.second_reminder_hours_after or 'N/A'
             )
         elif obj.reminder_hours_before:
             return format_html(
-                '<span class="badge bg-info">Deadline-based: {}h before</span>',
+                '<span class="badge bg-info">Deadline-based: {0}h before</span>',
                 obj.reminder_hours_before
             )
         else:
diff --git a/apps/complaints/forms.py b/apps/complaints/forms.py
index 2ab0a38..2a7af4b 100644
--- a/apps/complaints/forms.py
+++ b/apps/complaints/forms.py
@@ -24,6 +24,7 @@ from apps.complaints.models import (
     ComplaintInvolvedStaff,
 )
 from apps.core.models import PriorityChoices, SeverityChoices
+from apps.core.form_mixins import HospitalFieldMixin, DepartmentFieldMixin
 from apps.organizations.models import Department, Hospital, Patient, Staff
 
 
@@ -429,13 +430,17 @@ class PublicComplaintForm(forms.ModelForm):
         return cleaned_data
 
 
-class ComplaintForm(forms.ModelForm):
+class ComplaintForm(HospitalFieldMixin, forms.ModelForm):
     """
     Form for creating complaints by authenticated users.
     
     Updated to use location hierarchy (Location, Section, Subsection).
     Includes new fields for detailed patient information and complaint type.
     Uses cascading dropdowns for location selection.
+    
+    Hospital field visibility:
+    - PX Admins: See dropdown with all hospitals
+    - Others: Hidden field, auto-set to user's hospital
     """
 
     # Complaint Type
@@ -456,6 +461,15 @@ class ComplaintForm(forms.ModelForm):
         widget=forms.Select(attrs={'class': 'form-select', 'id': 'complaintSourceType'})
     )
 
+    # PX Source (optional)
+    source = forms.ModelChoiceField(
+        label=_("PX Source"),
+        queryset=None,
+        empty_label=_("Select source (optional)"),
+        required=False,
+        widget=forms.Select(attrs={'class': 'form-select', 'id': 'sourceSelect'})
+    )
+
     # Patient Information (text-based fields only)
     relation_to_patient = forms.ChoiceField(
         label=_("Relation to Patient"),
@@ -577,17 +591,18 @@ class ComplaintForm(forms.ModelForm):
     class Meta:
         model = Complaint
         fields = [
-            'complaint_type', 'complaint_source_type',
-            'relation_to_patient', 'patient_name', 
-            'national_id', 'incident_date', 'hospital', 'department', 
+            'complaint_type', 'complaint_source_type', 'source',
+            'relation_to_patient', 'patient_name',
+            'national_id', 'incident_date', 'hospital', 'department',
             'location', 'main_section', 'subsection', 'staff', 'staff_name',
             'encounter_id', 'description', 'expected_result'
         ]
 
     def __init__(self, *args, **kwargs):
-        user = kwargs.pop('user', None)
+        # Note: user is handled by HospitalFieldMixin
         super().__init__(*args, **kwargs)
         from apps.organizations.models import Location, MainSection, SubSection
+        from apps.px_sources.models import PXSource
 
         # Initialize cascading dropdowns with empty querysets
         self.fields['main_section'].queryset = MainSection.objects.none()
@@ -596,6 +611,9 @@ class ComplaintForm(forms.ModelForm):
         # Load all locations (no filtering needed)
         self.fields['location'].queryset = Location.objects.all().order_by('name_en')
 
+        # Load active PX sources for optional selection
+        self.fields['source'].queryset = PXSource.objects.filter(is_active=True).order_by('name_en')
+
         # Check both initial data and POST data for location to load sections
         location_id = None
         if 'location' in self.initial:
@@ -626,25 +644,23 @@ class ComplaintForm(forms.ModelForm):
                     main_section_id=section_id
                 ).order_by('name_en')
 
-        # Filter hospitals based on user permissions
-        if user and not user.is_px_admin() and user.hospital:
-            self.fields['hospital'].queryset = Hospital.objects.filter(id=user.hospital.id)
-            self.fields['hospital'].initial = user.hospital
-        
-        # Check for hospital selection in both initial data and POST data
+        # Hospital field is configured by HospitalFieldMixin
+        # Now filter departments and staff based on hospital
         hospital_id = None
-        if 'hospital' in self.data:
+        if self.data.get('hospital'):
             hospital_id = self.data.get('hospital')
-        elif 'hospital' in self.initial:
+        elif self.initial.get('hospital'):
             hospital_id = self.initial.get('hospital')
-            
+        elif self.user and self.user.hospital:
+            hospital_id = self.user.hospital.id
+
         if hospital_id:
             # Filter departments based on selected hospital
             self.fields['department'].queryset = Department.objects.filter(
                 hospital_id=hospital_id,
                 status='active'
             ).order_by('name')
-            
+
             # Filter staff based on selected hospital
             self.fields['staff'].queryset = Staff.objects.filter(
                 hospital_id=hospital_id,
@@ -652,12 +668,16 @@ class ComplaintForm(forms.ModelForm):
             ).order_by('first_name', 'last_name')
 
 
-class InquiryForm(forms.ModelForm):
+class InquiryForm(HospitalFieldMixin, forms.ModelForm):
     """
     Form for creating inquiries by authenticated users.
     
     Similar to ComplaintForm - supports patient search, department filtering, 
     and proper field validation with AJAX support.
+    
+    Hospital field visibility:
+    - PX Admins: See dropdown with all hospitals
+    - Others: Hidden field, auto-set to user's hospital
     """
 
     patient = forms.ModelChoiceField(
@@ -724,21 +744,18 @@ class InquiryForm(forms.ModelForm):
                    'contact_name', 'contact_phone', 'contact_email']
 
     def __init__(self, *args, **kwargs):
-        user = kwargs.pop('user', None)
+        # Note: user is handled by HospitalFieldMixin
         super().__init__(*args, **kwargs)
 
-        # Filter hospitals based on user role
-        if user and not user.is_px_admin() and user.hospital:
-            self.fields['hospital'].queryset = Hospital.objects.filter(id=user.hospital.id)
-            self.fields['hospital'].initial = user.hospital
-            self.fields['hospital'].widget.attrs['readonly'] = True
-        
-        # Check for hospital selection in both initial data and POST data
+        # Hospital field is configured by HospitalFieldMixin
+        # Now filter departments based on hospital
         hospital_id = None
-        if 'hospital' in self.data:
+        if self.data.get('hospital'):
             hospital_id = self.data.get('hospital')
-        elif 'hospital' in self.initial:
+        elif self.initial.get('hospital'):
             hospital_id = self.initial.get('hospital')
+        elif self.user and self.user.hospital:
+            hospital_id = self.user.hospital.id
             
         if hospital_id:
             # Filter departments based on selected hospital
@@ -869,8 +886,14 @@ class EscalationRuleForm(forms.ModelForm):
         return cleaned_data
 
 
-class ComplaintThresholdForm(forms.ModelForm):
-    """Form for creating and editing complaint thresholds"""
+class ComplaintThresholdForm(HospitalFieldMixin, forms.ModelForm):
+    """
+    Form for creating and editing complaint thresholds.
+    
+    Hospital field visibility:
+    - PX Admins: See dropdown with all hospitals
+    - Others: Hidden field, auto-set to user's hospital
+    """
 
     class Meta:
         model = ComplaintThreshold
@@ -884,16 +907,6 @@ class ComplaintThresholdForm(forms.ModelForm):
             'is_active': forms.CheckboxInput(attrs={'class': 'form-check-input'}),
         }
 
-    def __init__(self, *args, **kwargs):
-        user = kwargs.pop('user', None)
-        super().__init__(*args, **kwargs)
-
-        # Filter hospitals based on user role
-        if user and not user.is_px_admin() and user.hospital:
-            self.fields['hospital'].queryset = Hospital.objects.filter(id=user.hospital.id)
-            self.fields['hospital'].initial = user.hospital
-            self.fields['hospital'].widget.attrs['readonly'] = True
-
 
 
 class PublicInquiryForm(forms.Form):
diff --git a/apps/complaints/management/commands/setup_source_based_sla.py b/apps/complaints/management/commands/setup_source_based_sla.py
index 09ef46b..8b613ee 100644
--- a/apps/complaints/management/commands/setup_source_based_sla.py
+++ b/apps/complaints/management/commands/setup_source_based_sla.py
@@ -68,7 +68,7 @@ class Command(BaseCommand):
                 defaults={
                     'sla_hours': 24,
                     'first_reminder_hours_after': 12,  # 12 hours from creation
-                    'second_reminder_hours_after': 30,  # 12 + 18 hours from creation
+                    'second_reminder_hours_after': 18,  # 18 hours from creation (6h before SLA)
                     'escalation_hours_after': 24,  # 24 hours from creation
                     'is_active': True,
                 }
@@ -87,7 +87,7 @@ class Command(BaseCommand):
                 defaults={
                     'sla_hours': 48,
                     'first_reminder_hours_after': 24,  # 24 hours from creation
-                    'second_reminder_hours_after': 60,  # 24 + 36 hours from creation
+                    'second_reminder_hours_after': 36,  # 36 hours from creation (12h before SLA)
                     'escalation_hours_after': 48,  # 48 hours from creation
                     'is_active': True,
                 }
@@ -115,7 +115,7 @@ class Command(BaseCommand):
                         defaults={
                             'sla_hours': 72,
                             'first_reminder_hours_after': 24,  # 24 hours from creation
-                            'second_reminder_hours_after': 72,  # 24 + 48 hours from creation
+                            'second_reminder_hours_after': 48,  # 48 hours from creation (24h before SLA)
                             'escalation_hours_after': 72,  # 72 hours from creation
                             'is_active': True,
                         }
@@ -140,7 +140,7 @@ class Command(BaseCommand):
         self.stdout.write('┌─────────────────────────────────────┬─────────┬──────────┬──────────┬────────────┐')
         self.stdout.write('│ Source                              │ SLA (h) │ 1st Rem  │ 2nd Rem  │ Escalation │')
         self.stdout.write('├─────────────────────────────────────┼─────────┼──────────┼──────────┼────────────┤')
-        self.stdout.write('│ Ministry of Health                  │    24   │   12     │   30     │    24      │')
-        self.stdout.write('│ Council of Cooperative Health Ins.  │    48   │   24     │   60     │    48      │')
-        self.stdout.write('│ Internal (Patient/Family/Staff)     │    72   │   24     │   72     │    72      │')
+        self.stdout.write('│ Ministry of Health                  │    24   │   12     │   18     │    24      │')
+        self.stdout.write('│ Council of Cooperative Health Ins.  │    48   │   24     │   36     │    48      │')
+        self.stdout.write('│ Internal (Patient/Family/Staff)     │    72   │   24     │   48     │    72      │')
         self.stdout.write('└─────────────────────────────────────┴─────────┴──────────┴──────────┴────────────┘')
\ No newline at end of file
diff --git a/apps/complaints/models.py b/apps/complaints/models.py
index 3c1dc75..e37e260 100644
--- a/apps/complaints/models.py
+++ b/apps/complaints/models.py
@@ -369,6 +369,14 @@ class Complaint(UUIDModel, TimeStampedModel):
     )
     assigned_at = models.DateTimeField(null=True, blank=True)
 
+    # Activation tracking
+    activated_at = models.DateTimeField(
+        null=True, 
+        blank=True, 
+        db_index=True,
+        help_text="Timestamp when complaint was first activated (moved from OPEN to IN_PROGRESS)"
+    )
+
     # SLA tracking
     due_at = models.DateTimeField(db_index=True, help_text="SLA deadline")
     is_overdue = models.BooleanField(default=False, db_index=True)
@@ -625,6 +633,35 @@ class Complaint(UUIDModel, TimeStampedModel):
         """Get AI-generated suggested action from metadata (deprecated, use suggested_action_en)"""
         return self.suggested_action_en
 
+    @property
+    def suggested_actions(self):
+        """
+        Get AI-generated suggested actions as a list from metadata.
+        Returns list of dicts with structure:
+        [
+            {
+                "action": "Action description",
+                "priority": "high|medium|low",
+                "category": "category_name"
+            }
+        ]
+        Falls back to single suggested_action_en if list is empty.
+        """
+        if self.metadata and "ai_analysis" in self.metadata:
+            actions = self.metadata["ai_analysis"].get("suggested_actions", [])
+            # If list exists and has items, return it
+            if actions and isinstance(actions, list):
+                return actions
+            # Fallback: convert old single action to list format
+            single_action = self.metadata["ai_analysis"].get("suggested_action_en", "")
+            if single_action:
+                return [{
+                    "action": single_action,
+                    "priority": "medium",
+                    "category": "process_improvement"
+                }]
+        return []
+
     @property
     def title_en(self):
         """Get AI-generated title (English) from metadata"""
@@ -708,6 +745,9 @@ class Complaint(UUIDModel, TimeStampedModel):
         }
         return badge_map.get(self.emotion, "secondary")
 
+    @property
+    def is_activated(self):
+        return self.activated_at is not None
     def get_tracking_url(self):
         """
         Get the public tracking URL for this complaint.
@@ -1950,6 +1990,7 @@ class OnCallAdminSchedule(UUIDModel, TimeStampedModel):
             bool: True if within working hours, False otherwise
         """
         import pytz
+        from datetime import time as datetime_time
         
         if check_datetime is None:
             check_datetime = timezone.now()
@@ -1968,7 +2009,23 @@ class OnCallAdminSchedule(UUIDModel, TimeStampedModel):
         
         # Check if it's within working hours
         current_time = local_time.time()
-        return self.work_start_time <= current_time < self.work_end_time
+        
+        # Ensure work_start_time and work_end_time are time objects
+        start_time = self.work_start_time
+        end_time = self.work_end_time
+        
+        # Convert string to time if needed (handles string defaults from DB)
+        if isinstance(start_time, str):
+            parts = start_time.split(':')
+            hours, minutes = int(parts[0]), int(parts[1])
+            start_time = datetime_time(hours, minutes)
+        
+        if isinstance(end_time, str):
+            parts = end_time.split(':')
+            hours, minutes = int(parts[0]), int(parts[1])
+            end_time = datetime_time(hours, minutes)
+        
+        return start_time <= current_time < end_time
 
 
 class OnCallAdmin(UUIDModel, TimeStampedModel):
diff --git a/apps/complaints/serializers.py b/apps/complaints/serializers.py
index a9aee52..6b27d3b 100644
--- a/apps/complaints/serializers.py
+++ b/apps/complaints/serializers.py
@@ -154,7 +154,7 @@ class ComplaintSerializer(serializers.ModelSerializer):
             'complaint_source_type', 'complaint_source_type_display',
             'source', 'source_name', 'source_code', 'status',
             'created_by', 'created_by_name',
-            'assigned_to', 'assigned_to_name', 'assigned_at',
+            'assigned_to', 'assigned_to_name', 'assigned_at', 'activated_at',
             'due_at', 'is_overdue', 'sla_status',
             'reminder_sent_at', 'escalated_at',
             'resolution', 'resolved_at', 'resolved_by',
diff --git a/apps/complaints/tasks.py b/apps/complaints/tasks.py
index b3f9b3d..be1d19d 100644
--- a/apps/complaints/tasks.py
+++ b/apps/complaints/tasks.py
@@ -1303,6 +1303,9 @@ def analyze_complaint_with_ai(complaint_id):
                 'title_ar': analysis.get('title_ar', ''),
                 'short_description_en': analysis.get('short_description_en', ''),
                 'short_description_ar': analysis.get('short_description_ar', ''),
+                # Store suggested actions as list (new format)
+                'suggested_actions': analysis.get('suggested_actions', []),
+                # Keep single action fields for backward compatibility
                 'suggested_action_en': analysis.get('suggested_action_en', ''),
                 'suggested_action_ar': analysis.get('suggested_action_ar', ''),
                 'reasoning_en': analysis.get('reasoning_en', ''),
@@ -2266,7 +2269,7 @@ def get_admins_to_notify(schedule, check_datetime=None, hospital=None):
         # For hospital-specific complaints, prefer admins assigned to that hospital
         # but also include system-wide admins
         px_admins = px_admins.filter(
-            models.Q(hospital=hospital) | models.Q(hospital__isnull=True)
+            Q(hospital=hospital) | Q(hospital__isnull=True)
         )
     
     if is_working_hours:
diff --git a/apps/complaints/ui_views.py b/apps/complaints/ui_views.py
index a17dce9..1461466 100644
--- a/apps/complaints/ui_views.py
+++ b/apps/complaints/ui_views.py
@@ -16,9 +16,9 @@ from django.views.decorators.http import require_http_methods
 
 from apps.accounts.models import User
 from apps.core.services import AuditService
+from apps.core.decorators import hospital_admin_required, block_source_user
 from apps.organizations.models import Department, Hospital, Staff
 from apps.px_sources.models import SourceUser, PXSource
-from apps.px_sources.models import SourceUser, PXSource
 
 from .models import (
     Complaint,
@@ -98,12 +98,20 @@ def complaint_list(request):
 
     # Apply RBAC filters
     user = request.user
+    # Get selected hospital for PX Admins (from middleware)
+    selected_hospital = getattr(request, 'tenant_hospital', None)
+    
     if user.is_px_admin():
-        pass  # See all
+        # PX Admins see all, but filter by selected hospital if set
+        if selected_hospital:
+            queryset = queryset.filter(hospital=selected_hospital)
     elif user.is_hospital_admin() and user.hospital:
         queryset = queryset.filter(hospital=user.hospital)
     elif user.is_department_manager() and user.department:
         queryset = queryset.filter(department=user.department)
+    elif user.is_source_user():
+        # Source Users can only see complaints they created
+        queryset = queryset.filter(created_by=user)
     elif user.hospital:
         queryset = queryset.filter(hospital=user.hospital)
     else:
@@ -495,14 +503,18 @@ def complaint_create(request):
         try:
             # Create complaint with AI defaults
             complaint = form.save(commit=False)
-            
+
             # Set AI-determined defaults
             complaint.title = 'Complaint'  # AI will generate title
             # category can be None, AI will determine it
             complaint.subcategory = ''  # AI will determine
-            
-            # Set source from logged-in source user
-            if source_user and source_user.source:
+
+            # Set source from form if selected, otherwise from logged-in source user
+            if form.cleaned_data.get('source'):
+                # User explicitly selected a PX source
+                complaint.source = form.cleaned_data['source']
+            elif source_user and source_user.source:
+                # Source user is submitting (auto-assign their source)
                 complaint.source = source_user.source
             else:
                 # Fallback: get or create a 'staff' source
@@ -516,7 +528,7 @@ def complaint_create(request):
                         description='Complaints submitted by staff members'
                     )
                 complaint.source = source_obj
-            
+
             complaint.priority = 'medium'  # AI will update
             complaint.severity = 'medium'  # AI will update
             complaint.created_by = request.user
@@ -594,10 +606,10 @@ def complaint_create(request):
     return render(request, "complaints/complaint_form.html", context)
 
 
-@login_required
+@hospital_admin_required
 @require_http_methods(["POST"])
 def complaint_assign(request, pk):
-    """Assign complaint to user"""
+    """Assign complaint to user - Admin only"""
     complaint = get_object_or_404(Complaint, pk=pk)
 
     # Check if complaint is in active status
@@ -810,7 +822,7 @@ def complaint_change_department(request, pk):
 @login_required
 @require_http_methods(["POST"])
 def complaint_escalate(request, pk):
-    """Escalate complaint to selected staff (default is staff's manager)"""
+    """Escalate complaint to selected staff (default is staff's manager) - Admin and Dept Manager only"""
     complaint = get_object_or_404(Complaint, pk=pk)
 
     # Check if complaint is in active status
@@ -960,7 +972,14 @@ def complaint_activate(request, pk):
     # Assign to current user
     complaint.assigned_to = user
     complaint.assigned_at = timezone.now()
-    complaint.save(update_fields=["assigned_to", "assigned_at"])
+    
+    # Set activated_at if this is the first activation (status is OPEN)
+    if complaint.status == ComplaintStatus.OPEN:
+        complaint.status = ComplaintStatus.IN_PROGRESS
+        complaint.activated_at = timezone.now()
+        complaint.save(update_fields=["assigned_to", "assigned_at", "status", "activated_at"])
+    else:
+        complaint.save(update_fields=["assigned_to", "assigned_at"])
 
     # Create update
     assign_message = f"Complaint activated and assigned to {user.get_full_name()}"
@@ -1117,17 +1136,13 @@ def complaint_export_excel(request):
     return export_complaints_excel(queryset, request.GET.dict())
 
 
-@login_required
+@hospital_admin_required
 @require_http_methods(["POST"])
 def complaint_bulk_assign(request):
-    """Bulk assign complaints"""
+    """Bulk assign complaints - Admin only"""
     from apps.complaints.utils import bulk_assign_complaints
     import json
 
-    # Check permission
-    if not (request.user.is_px_admin() or request.user.is_hospital_admin()):
-        return JsonResponse({"success": False, "error": "Permission denied"}, status=403)
-
     try:
         data = json.loads(request.body)
         complaint_ids = data.get("complaint_ids", [])
@@ -1149,17 +1164,13 @@ def complaint_bulk_assign(request):
         return JsonResponse({"success": False, "error": str(e)}, status=500)
 
 
-@login_required
+@hospital_admin_required
 @require_http_methods(["POST"])
 def complaint_bulk_status(request):
-    """Bulk change complaint status"""
+    """Bulk change complaint status - Admin only"""
     from apps.complaints.utils import bulk_change_status
     import json
 
-    # Check permission
-    if not (request.user.is_px_admin() or request.user.is_hospital_admin()):
-        return JsonResponse({"success": False, "error": "Permission denied"}, status=403)
-
     try:
         data = json.loads(request.body)
         complaint_ids = data.get("complaint_ids", [])
@@ -1182,17 +1193,13 @@ def complaint_bulk_status(request):
         return JsonResponse({"success": False, "error": str(e)}, status=500)
 
 
-@login_required
+@hospital_admin_required
 @require_http_methods(["POST"])
 def complaint_bulk_escalate(request):
-    """Bulk escalate complaints"""
+    """Bulk escalate complaints - Admin only"""
     from apps.complaints.utils import bulk_escalate_complaints
     import json
 
-    # Check permission
-    if not (request.user.is_px_admin() or request.user.is_hospital_admin()):
-        return JsonResponse({"success": False, "error": "Permission denied"}, status=403)
-
     try:
         data = json.loads(request.body)
         complaint_ids = data.get("complaint_ids", [])
@@ -1231,12 +1238,20 @@ def inquiry_list(request):
 
     # Apply RBAC filters
     user = request.user
+    # Get selected hospital for PX Admins (from middleware)
+    selected_hospital = getattr(request, 'tenant_hospital', None)
+    
     if user.is_px_admin():
-        pass  # See all
+        # PX Admins see all, but filter by selected hospital if set
+        if selected_hospital:
+            queryset = queryset.filter(hospital=selected_hospital)
     elif user.is_hospital_admin() and user.hospital:
         queryset = queryset.filter(hospital=user.hospital)
     elif user.is_department_manager() and user.department:
         queryset = queryset.filter(department=user.department)
+    elif user.is_source_user():
+        # Source Users can only see inquiries they created
+        queryset = queryset.filter(created_by=user)
     elif user.hospital:
         queryset = queryset.filter(hospital=user.hospital)
     else:
diff --git a/apps/complaints/views.py b/apps/complaints/views.py
index 93e5c97..5df12a6 100644
--- a/apps/complaints/views.py
+++ b/apps/complaints/views.py
@@ -1,6 +1,8 @@
 """
 Complaints views and viewsets
 """
+import logging
+
 from django.db.models import Q
 from django.shortcuts import get_object_or_404
 from django.utils import timezone
@@ -31,6 +33,9 @@ from .serializers import (
 )
 
 
+logger = logging.getLogger(__name__)
+
+
 def map_complaint_category_to_action_category(complaint_category_code):
     """
     Map complaint category code to PX Action category.
diff --git a/apps/core/ai_service.py b/apps/core/ai_service.py
index 2827509..a3b45b1 100644
--- a/apps/core/ai_service.py
+++ b/apps/core/ai_service.py
@@ -665,12 +665,16 @@ class AIService:
             7. Return ALL staff names WITHOUT titles (Dr., Nurse, دكتور, ممرض, etc.)
             8. Identify the PRIMARY staff member (the one most relevant to the complaint)
             9. If no staff is mentioned, return empty arrays for staff names
-            10. Generate a suggested_action (2-3 sentences) with specific, actionable steps to address this complaint in BOTH English and Arabic
+            10. Generate 3-5 suggested_actions as a JSON list, each with:
+                - action: Specific, actionable step
+                - priority: high|medium|low
+                - category: clinical_quality|patient_safety|service_quality|staff_behavior|facility|process_improvement|other
+                Provide all actions in BOTH English and Arabic
 
             IMPORTANT: ALL TEXT FIELDS MUST BE PROVIDED IN BOTH ENGLISH AND ARABIC
             - title: Provide in both English and Arabic
             - short_description: Provide in both English and Arabic
-            - suggested_action: Provide in both English and Arabic
+            - suggested_actions: Provide as a list with English and Arabic for each action
             - reasoning: Provide in both English and Arabic
 
             Provide your analysis in JSON format:
@@ -686,8 +690,20 @@ class AIService:
                 "department": "exact department name from the hospital's departments, or empty string if not applicable",
                 "staff_names": ["name1", "name2", "name3"],
                 "primary_staff_name": "name of PRIMARY staff member (the one most relevant to the complaint), or empty string if no staff mentioned",
-                "suggested_action_en": "2-3 specific, actionable steps in English to address this complaint",
-                "suggested_action_ar": "خطوات محددة وعمليه بالعربية",
+                "suggested_actions": [
+                    {{
+                        "action_en": "Specific actionable step in English",
+                        "action_ar": "خطوة محددة بالعربية",
+                        "priority": "high|medium|low",
+                        "category": "clinical_quality|patient_safety|service_quality|staff_behavior|facility|process_improvement|other"
+                    }},
+                    {{
+                        "action_en": "Another action in English",
+                        "action_ar": "إجراء آخر بالعربية",
+                        "priority": "medium",
+                        "category": "process_improvement"
+                    }}
+                ],
                 "reasoning_en": "Brief explanation in English of your classification (2-3 sentences)",
                 "reasoning_ar": "شرح مختصر بالعربية",
                 "taxonomy": {{
diff --git a/apps/core/config_views.py b/apps/core/config_views.py
index 10f30b1..bd5a50c 100644
--- a/apps/core/config_views.py
+++ b/apps/core/config_views.py
@@ -9,17 +9,12 @@ from apps.organizations.models import Hospital
 from apps.px_action_center.models import PXActionSLAConfig, RoutingRule
 from apps.complaints.models import OnCallAdminSchedule
 from apps.callcenter.models import CallRecord
+from apps.core.decorators import px_admin_required
 
 
-@login_required
+@px_admin_required
 def config_dashboard(request):
-    """Configuration dashboard - overview of system settings"""
-    # Only PX Admins can access
-    if not request.user.is_px_admin():
-        from django.contrib import messages
-        from django.shortcuts import redirect
-        messages.error(request, "Only PX Admins can access configuration.")
-        return redirect('dashboard:command-center')
+    """Configuration dashboard - overview of system settings - PX Admin only"""
 
     # Get counts
     sla_configs_count = PXActionSLAConfig.objects.filter(is_active=True).count()
@@ -39,15 +34,9 @@ def config_dashboard(request):
     return render(request, 'config/dashboard.html', context)
 
 
-@login_required
+@px_admin_required
 def sla_config_list(request):
-    """SLA configurations list view"""
-    # Only PX Admins can access
-    if not request.user.is_px_admin():
-        from django.contrib import messages
-        from django.shortcuts import redirect
-        messages.error(request, "Only PX Admins can access configuration.")
-        return redirect('dashboard:command-center')
+    """SLA configurations list view - PX Admin only"""
 
     queryset = PXActionSLAConfig.objects.select_related('hospital', 'department')
 
@@ -84,15 +73,9 @@ def sla_config_list(request):
     return render(request, 'config/sla_config.html', context)
 
 
-@login_required
+@px_admin_required
 def routing_rules_list(request):
-    """Routing rules list view"""
-    # Only PX Admins can access
-    if not request.user.is_px_admin():
-        from django.contrib import messages
-        from django.shortcuts import redirect
-        messages.error(request, "Only PX Admins can access configuration.")
-        return redirect('dashboard:command-center')
+    """Routing rules list view - PX Admin only"""
 
     queryset = RoutingRule.objects.select_related(
         'hospital', 'department', 'assign_to_user', 'assign_to_department'
diff --git a/apps/core/context_processors.py b/apps/core/context_processors.py
index b8ecb79..37503bc 100644
--- a/apps/core/context_processors.py
+++ b/apps/core/context_processors.py
@@ -23,6 +23,21 @@ def sidebar_counts(request):
 
     user = request.user
 
+    # Source Users only see their own created complaints
+    if user.is_source_user():
+        complaint_count = Complaint.objects.filter(
+            created_by=user,
+            status__in=['open', 'in_progress']
+        ).count()
+        return {
+            'complaint_count': complaint_count,
+            'feedback_count': 0,
+            'action_count': 0,
+            'current_hospital': None,
+            'is_px_admin': False,
+            'is_source_user': True,
+        }
+
     # Filter based on user role and tenant_hospital
     if user.is_px_admin():
         # PX Admins use their selected hospital from session
@@ -75,6 +90,7 @@ def sidebar_counts(request):
         'action_count': action_count,
         'current_hospital': getattr(request, 'tenant_hospital', None),
         'is_px_admin': request.user.is_authenticated and request.user.is_px_admin(),
+        'is_source_user': False,
     }
 
 
@@ -88,9 +104,24 @@ def hospital_context(request):
         return {}
 
     hospital = getattr(request, 'tenant_hospital', None)
+    
+    # Get list of hospitals for PX Admin switcher
+    hospitals_list = []
+    if request.user.is_px_admin():
+        from apps.organizations.models import Hospital
+        hospitals_list = list(
+            Hospital.objects.filter(status='active').order_by('name').values('id', 'name', 'code')
+        )
+
+    # Source user context
+    is_source_user = request.user.is_source_user()
+    source_user_profile = getattr(request, 'source_user_profile', None)
 
     return {
         'current_hospital': hospital,
         'is_px_admin': request.user.is_px_admin(),
+        'is_source_user': is_source_user,
+        'source_user_profile': source_user_profile,
+        'hospitals_list': hospitals_list,
         # 'provisional_user_count': provisional_user_count,
     }
diff --git a/apps/core/decorators.py b/apps/core/decorators.py
new file mode 100644
index 0000000..a5e2224
--- /dev/null
+++ b/apps/core/decorators.py
@@ -0,0 +1,236 @@
+"""
+Role-based access control decorators for PX360.
+
+Provides decorators to restrict views based on user roles:
+- PX Admin
+- Hospital Admin  
+- Department Manager
+- PX Coordinator
+- Source User
+"""
+from functools import wraps
+from django.core.exceptions import PermissionDenied
+from django.contrib.auth.decorators import login_required
+from django.shortcuts import redirect
+from django.contrib import messages
+from django.utils.translation import gettext_lazy as _
+
+
+def px_admin_required(view_func):
+    """
+    Decorator to restrict access to PX Admins only.
+    
+    Example:
+        @px_admin_required
+        def system_settings(request):
+            # Only PX Admins can access this
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        if not request.user.is_px_admin():
+            messages.error(
+                request,
+                _("Access denied. PX Admin privileges required.")
+            )
+            return redirect('analytics:command_center')
+        
+        return view_func(request, *args, **kwargs)
+    
+    return _wrapped_view
+
+
+def hospital_admin_required(view_func):
+    """
+    Decorator to restrict access to Hospital Admins and PX Admins.
+    
+    Example:
+        @hospital_admin_required
+        def hospital_settings(request):
+            # Only Hospital Admins and PX Admins can access this
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        if not (request.user.is_px_admin() or request.user.is_hospital_admin()):
+            messages.error(
+                request,
+                _("Access denied. Hospital Admin privileges required.")
+            )
+            return redirect('analytics:command_center')
+        
+        return view_func(request, *args, **kwargs)
+    
+    return _wrapped_view
+
+
+def admin_required(view_func):
+    """
+    Decorator to restrict access to any Admin (PX, Hospital, or Dept Manager).
+    
+    Example:
+        @admin_required
+        def management_view(request):
+            # Any admin can access this
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        if not (request.user.is_px_admin() or 
+                request.user.is_hospital_admin() or 
+                request.user.is_department_manager()):
+            messages.error(
+                request,
+                _("Access denied. Admin privileges required.")
+            )
+            return redirect('analytics:command_center')
+        
+        return view_func(request, *args, **kwargs)
+    
+    return _wrapped_view
+
+
+def px_coordinator_required(view_func):
+    """
+    Decorator to restrict access to PX Coordinators and above.
+    
+    Allows: PX Admin, Hospital Admin, Department Manager, PX Coordinator
+    
+    Example:
+        @px_coordinator_required
+        def complaint_management(request):
+            # Coordinators and admins can access this
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        user = request.user
+        if not (user.is_px_admin() or 
+                user.is_hospital_admin() or 
+                user.is_department_manager() or
+                user.has_role('PX Coordinator')):
+            messages.error(
+                request,
+                _("Access denied. PX Coordinator privileges required.")
+            )
+            return redirect('analytics:command_center')
+        
+        return view_func(request, *args, **kwargs)
+    
+    return _wrapped_view
+
+
+def staff_required(view_func):
+    """
+    Decorator to restrict access to Hospital Staff (not Source Users).
+    
+    Allows all authenticated users except Source Users.
+    
+    Example:
+        @staff_required
+        def internal_tool(request):
+            # Any hospital staff can access, but not source users
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        if request.user.is_source_user():
+            messages.error(
+                request,
+                _("Access denied. This page is not available for source users.")
+            )
+            return redirect('px_sources:source_user_dashboard')
+        
+        return view_func(request, *args, **kwargs)
+    
+    return _wrapped_view
+
+
+def source_user_required(view_func):
+    """
+    Decorator to restrict access to Source Users only.
+    
+    Example:
+        @source_user_required
+        def source_user_dashboard(request):
+            # Only source users can access this
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        if not request.user.is_source_user():
+            raise PermissionDenied(
+                _("Access denied. Source user privileges required.")
+            )
+        
+        # Get source user profile
+        profile = request.user.get_source_user_profile_active()
+        if not profile:
+            messages.error(
+                request,
+                _("Your source user account is inactive. Please contact your administrator.")
+            )
+            return redirect('accounts:login')
+        
+        # Store in request for easy access
+        request.source_user = profile
+        request.source = profile.source
+        
+        return view_func(request, *args, **kwargs)
+    
+    return _wrapped_view
+
+
+def block_source_user(view_func):
+    """
+    Decorator to BLOCK source users from accessing admin/staff pages.
+    Redirects source users to their dashboard instead.
+    
+    Example:
+        @block_source_user
+        def staff_management(request):
+            # Source users CANNOT access this
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        if request.user.is_source_user():
+            # Silently redirect to source user dashboard
+            return redirect('px_sources:source_user_dashboard')
+        
+        return view_func(request, *args, **kwargs)
+    
+    return _wrapped_view
+
+
+def source_user_or_admin(view_func):
+    """
+    Decorator that allows both source users AND admins.
+    
+    Example:
+        @source_user_or_admin
+        def complaint_detail(request, pk):
+            # Both source users and admins can view
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        user = request.user
+        
+        # Allow admins
+        if (user.is_px_admin() or 
+            user.is_hospital_admin() or 
+            user.is_department_manager()):
+            return view_func(request, *args, **kwargs)
+        
+        # Allow active source users
+        if user.is_source_user():
+            profile = user.get_source_user_profile_active()
+            if profile:
+                request.source_user = profile
+                request.source = profile.source
+                return view_func(request, *args, **kwargs)
+        
+        raise PermissionDenied(_("Access denied."))
+    
+    return _wrapped_view
diff --git a/apps/core/form_mixins.py b/apps/core/form_mixins.py
new file mode 100644
index 0000000..91b2825
--- /dev/null
+++ b/apps/core/form_mixins.py
@@ -0,0 +1,137 @@
+"""
+Form mixins for tenant-aware forms.
+
+Provides mixins to handle hospital field visibility based on user role.
+"""
+from django import forms
+from apps.organizations.models import Hospital
+
+
+class HospitalFieldMixin:
+    """
+    Mixin to handle hospital field visibility based on user role.
+    
+    - PX Admins: See dropdown with all active hospitals
+    - Others: Hidden field, auto-set to user's hospital
+    
+    Usage:
+        class MyForm(HospitalFieldMixin, forms.ModelForm):
+            class Meta:
+                model = MyModel
+                fields = ['hospital', ...]
+            
+            def __init__(self, *args, **kwargs):
+                super().__init__(*args, **kwargs)
+                # Hospital field is automatically configured
+    
+    In views:
+        form = MyForm(user=request.user)
+    """
+    
+    def __init__(self, *args, **kwargs):
+        self.user = kwargs.pop('user', None)
+        super().__init__(*args, **kwargs)
+        
+        if self.user and 'hospital' in self.fields:
+            self._setup_hospital_field()
+    
+    def _setup_hospital_field(self):
+        """Configure hospital field based on user role."""
+        hospital_field = self.fields['hospital']
+        
+        if self.user.is_px_admin():
+            # PX Admin: Show dropdown with all active hospitals
+            hospital_field.queryset = Hospital.objects.filter(status='active').order_by('name')
+            hospital_field.required = True
+            # Update widget attrs instead of replacing widget to preserve choices
+            hospital_field.widget.attrs.update({
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white'
+            })
+        else:
+            # Regular user: Hide field and set default
+            hospital_field.widget = forms.HiddenInput()
+            hospital_field.required = False
+            
+            # Set initial value to user's hospital
+            if self.user.hospital:
+                hospital_field.initial = self.user.hospital
+                # Limit queryset to just user's hospital (for validation)
+                hospital_field.queryset = Hospital.objects.filter(id=self.user.hospital.id)
+            else:
+                # User has no hospital - empty queryset
+                hospital_field.queryset = Hospital.objects.none()
+    
+    def clean_hospital(self):
+        """
+        Ensure non-PX admins can only use their own hospital.
+        PX Admins can select any hospital.
+        """
+        hospital = self.cleaned_data.get('hospital')
+        
+        if not self.user:
+            return hospital
+        
+        if self.user.is_px_admin():
+            # PX Admin must select a hospital
+            if not hospital:
+                raise forms.ValidationError("Please select a hospital.")
+            return hospital
+        else:
+            # Non-PX admins: Force user's hospital
+            if self.user.hospital:
+                return self.user.hospital
+            else:
+                raise forms.ValidationError(
+                    "You do not have a hospital assigned. Please contact your administrator."
+                )
+
+
+class DepartmentFieldMixin:
+    """
+    Mixin to handle department field filtering based on user's hospital.
+    
+    - Filters departments to only show those in the selected/current hospital
+    - Works with HospitalFieldMixin
+    
+    Usage:
+        class MyForm(HospitalFieldMixin, DepartmentFieldMixin, forms.ModelForm):
+            class Meta:
+                model = MyModel
+                fields = ['hospital', 'department', ...]
+    """
+    
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        
+        if 'department' in self.fields:
+            self._setup_department_field()
+    
+    def _setup_department_field(self):
+        """Configure department field with hospital-based filtering."""
+        from apps.organizations.models import Department
+        
+        department_field = self.fields['department']
+        
+        # Get the hospital (either from form data or user's hospital)
+        hospital = None
+        if self.data.get('hospital'):
+            try:
+                hospital = Hospital.objects.get(id=self.data['hospital'])
+            except Hospital.DoesNotExist:
+                pass
+        elif self.initial.get('hospital'):
+            hospital = self.initial['hospital']
+        elif self.instance and self.instance.pk and self.instance.hospital:
+            hospital = self.instance.hospital
+        elif self.user and self.user.hospital:
+            hospital = self.user.hospital
+        
+        if hospital:
+            # Filter departments to user's hospital
+            department_field.queryset = Department.objects.filter(
+                hospital=hospital,
+                status='active'
+            ).order_by('name')
+        else:
+            # No hospital context - empty queryset
+            department_field.queryset = Department.objects.none()
diff --git a/apps/core/middleware.py b/apps/core/middleware.py
index 3bbc276..ce419ab 100644
--- a/apps/core/middleware.py
+++ b/apps/core/middleware.py
@@ -11,6 +11,7 @@ class TenantMiddleware(MiddlewareMixin):
     This middleware ensures that:
     - authenticated users have their tenant_hospital set from their profile
     - PX admins can switch between hospitals via session
+    - Source Users have their source context available
     - All requests have tenant context available
     """
 
@@ -20,6 +21,15 @@ class TenantMiddleware(MiddlewareMixin):
             # Store user's role for quick access
             request.user_roles = request.user.get_role_names()
 
+            # Set source user context
+            request.source_user = None
+            request.source_user_profile = None
+            if request.user.is_source_user():
+                profile = request.user.get_source_user_profile_active()
+                if profile:
+                    request.source_user = profile
+                    request.source_user_profile = profile
+
             # PX Admins can switch hospitals via session
             if request.user.is_px_admin():
                 hospital_id = request.session.get('selected_hospital_id')
@@ -42,5 +52,7 @@ class TenantMiddleware(MiddlewareMixin):
         else:
             request.tenant_hospital = None
             request.user_roles = []
+            request.source_user = None
+            request.source_user_profile = None
 
         return None
diff --git a/apps/core/mixins.py b/apps/core/mixins.py
index 8628116..2be1ad6 100644
--- a/apps/core/mixins.py
+++ b/apps/core/mixins.py
@@ -17,11 +17,20 @@ class TenantAccessMixin:
     - PX admins can access all hospitals
     - Hospital admins can only access their hospital
     - Department managers can only access their department
+    - Source Users can only access their own created data
     """
 
     def get_object(self, queryset=None):
         """Retrieve object with tenant validation."""
         obj = super().get_object(queryset)
+        user = self.request.user
+
+        # Source Users can only access their own created data
+        if user.is_source_user():
+            if hasattr(obj, 'created_by'):
+                if obj.created_by != user:
+                    raise PermissionDenied("You can only access data you created")
+            return obj
 
         # Check if user has access to this object's hospital
         if hasattr(obj, 'hospital'):
@@ -35,6 +44,12 @@ class TenantAccessMixin:
         queryset = super().get_queryset()
         user = self.request.user
 
+        # Source Users can only see their own created data
+        if user.is_source_user():
+            if hasattr(queryset.model, 'created_by'):
+                return queryset.filter(created_by=user)
+            return queryset.none()
+
         # PX Admins can see all hospitals
         if user.is_px_admin():
             return queryset
diff --git a/apps/core/templatetags/hospital_filters.py b/apps/core/templatetags/hospital_filters.py
index bfead23..7bf6928 100644
--- a/apps/core/templatetags/hospital_filters.py
+++ b/apps/core/templatetags/hospital_filters.py
@@ -6,6 +6,64 @@ from django import template
 register = template.Library()
 
 
+@register.filter
+def replace(value, arg):
+    """
+    Replace occurrences of a substring with another substring.
+    
+    Usage: {{ value|replace:"old:new" }}
+    Example: {{ "hello_world"|replace:"_":" " }} => "hello world"
+    """
+    if isinstance(value, str) and isinstance(arg, str):
+        try:
+            old, new = arg.split(':', 1)
+            return value.replace(old, new)
+        except ValueError:
+            return value
+    return value
+
+
+@register.filter
+def lookup(dictionary, key):
+    """
+    Lookup a value from a dictionary by key.
+    
+    Usage: {{ my_dict|lookup:key }}
+    Example: {{ row|lookup:"column_name" }}
+    """
+    if isinstance(dictionary, dict):
+        return dictionary.get(key)
+    return None
+
+
+@register.filter
+def div(value, arg):
+    """
+    Divide value by arg.
+    
+    Usage: {{ value|div:arg }}
+    Example: {{ 10|div:2 }} => 5.0
+    """
+    try:
+        return float(value) / float(arg)
+    except (ValueError, ZeroDivisionError, TypeError):
+        return 0
+
+
+@register.filter
+def mul(value, arg):
+    """
+    Multiply value by arg.
+    
+    Usage: {{ value|mul:arg }}
+    Example: {{ 5|mul:3 }} => 15.0
+    """
+    try:
+        return float(value) * float(arg)
+    except (ValueError, TypeError):
+        return 0
+
+
 @register.simple_tag
 def get_all_hospitals():
     """
diff --git a/apps/core/urls.py b/apps/core/urls.py
index fc141a0..d2ddc06 100644
--- a/apps/core/urls.py
+++ b/apps/core/urls.py
@@ -6,6 +6,7 @@ from django.urls import path
 from .views import (
     health_check,
     select_hospital,
+    switch_hospital,
     no_hospital_assigned,
     public_submit_landing,
     public_inquiry_submit,
@@ -24,6 +25,7 @@ urlpatterns = [
 
     # Hospital selection
     path('select-hospital/', select_hospital, name='select_hospital'),
+    path('switch-hospital/', switch_hospital, name='switch_hospital'),
     path('no-hospital/', no_hospital_assigned, name='no_hospital_assigned'),
 
     # Public submission pages
diff --git a/apps/core/views.py b/apps/core/views.py
index 18637a5..4dcb830 100644
--- a/apps/core/views.py
+++ b/apps/core/views.py
@@ -82,6 +82,50 @@ def select_hospital(request):
     return render(request, 'core/select_hospital.html', context)
 
 
+@login_required
+@require_POST
+def switch_hospital(request):
+    """
+    AJAX endpoint to switch hospitals for PX Admins.
+
+    Stores selected hospital in session and returns JSON response.
+    """
+    # Only PX Admins can switch hospitals
+    if not request.user.is_px_admin():
+        return JsonResponse({
+            'success': False,
+            'error': 'Permission denied. Only PX Admins can switch hospitals.'
+        }, status=403)
+
+    from apps.organizations.models import Hospital
+
+    hospital_id = request.POST.get('hospital_id')
+    
+    if not hospital_id:
+        return JsonResponse({
+            'success': False,
+            'error': 'Hospital ID is required'
+        }, status=400)
+
+    try:
+        hospital = Hospital.objects.get(id=hospital_id)
+        request.session['selected_hospital_id'] = str(hospital.id)
+        
+        return JsonResponse({
+            'success': True,
+            'hospital': {
+                'id': str(hospital.id),
+                'name': hospital.name,
+                'code': hospital.code,
+            }
+        })
+    except Hospital.DoesNotExist:
+        return JsonResponse({
+            'success': False,
+            'error': 'Hospital not found'
+        }, status=404)
+
+
 @login_required
 def no_hospital_assigned(request):
     """
diff --git a/apps/dashboard/urls.py b/apps/dashboard/urls.py
index 383ce66..26a2aee 100644
--- a/apps/dashboard/urls.py
+++ b/apps/dashboard/urls.py
@@ -8,13 +8,14 @@ from .views import (
     admin_evaluation, admin_evaluation_chart_data,
     staff_performance_detail, staff_performance_trends,
     department_benchmarks, export_staff_performance,
-    performance_analytics_api
+    performance_analytics_api, command_center_api
 )
 
 app_name = 'dashboard'
 
 urlpatterns = [
     path('', CommandCenterView.as_view(), name='command-center'),
+    path('api/', command_center_api, name='command_center_api'),
     path('my/', my_dashboard, name='my_dashboard'),
     path('bulk-action/', dashboard_bulk_action, name='bulk_action'),
     
diff --git a/apps/dashboard/views.py b/apps/dashboard/views.py
index 1cc9eaa..6d743e2 100644
--- a/apps/dashboard/views.py
+++ b/apps/dashboard/views.py
@@ -9,10 +9,11 @@ from django.contrib.auth.mixins import LoginRequiredMixin
 from django.core.paginator import Paginator
 from django.db.models import Avg, Count, Q, Sum
 from django.http import JsonResponse
-from django.shortcuts import redirect, render
+from django.shortcuts import redirect, render, reverse
 from django.utils import timezone
 from django.views.generic import TemplateView
 from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
 
 
 
@@ -21,16 +22,25 @@ class CommandCenterView(LoginRequiredMixin, TemplateView):
     PX Command Center Dashboard - Real-time control panel.
 
     Shows:
-    - Top KPI cards (complaints, actions, surveys, etc.)
+    - Red Alert Banner (urgent items requiring immediate attention)
+    - Top KPI cards (complaints, actions, surveys, etc.) with drill-down
     - Charts (trends, satisfaction, leaderboards)
     - Live feed (latest complaints, actions, events)
+    - Enhanced modules (Inquiries, Observations)
     - Filters (date range, hospital, department)
+    
+    Follows the "5-Second Rule": Critical signals dominant and comprehensible within 5 seconds.
+    Uses modular tile/card system with 30-60 second auto-refresh capability.
     """
     template_name = 'dashboard/command_center.html'
 
     def dispatch(self, request, *args, **kwargs):
-        """Check PX Admin has selected a hospital before processing request"""
-        # Only check hospital selection for authenticated users
+        """Check user type and redirect accordingly"""
+        # Redirect Source Users to their dashboard
+        if request.user.is_authenticated and request.user.is_source_user():
+            return redirect('px_sources:source_user_dashboard')
+        
+        # Check PX Admin has selected a hospital before processing request
         if request.user.is_authenticated and request.user.is_px_admin() and not request.tenant_hospital:
             return redirect('core:select_hospital')
 
@@ -41,7 +51,7 @@ class CommandCenterView(LoginRequiredMixin, TemplateView):
         user = self.request.user
 
         # Import models
-        from apps.complaints.models import Complaint
+        from apps.complaints.models import Complaint, Inquiry
         from apps.px_action_center.models import PXAction
         from apps.surveys.models import SurveyInstance
         from apps.social.models import SocialMediaComment
@@ -49,97 +59,330 @@ class CommandCenterView(LoginRequiredMixin, TemplateView):
         from apps.integrations.models import InboundEvent
         from apps.physicians.models import PhysicianMonthlyRating
         from apps.organizations.models import Staff
+        from apps.observations.models import Observation
 
         # Date filters
         now = timezone.now()
         last_24h = now - timedelta(hours=24)
         last_7d = now - timedelta(days=7)
         last_30d = now - timedelta(days=30)
+        last_60d = now - timedelta(days=60)
 
         # Base querysets (filtered by user role and tenant_hospital)
         if user.is_px_admin():
             # PX Admins use their selected hospital from session
             hospital = self.request.tenant_hospital
             complaints_qs = Complaint.objects.filter(hospital=hospital) if hospital else Complaint.objects.none()
+            inquiries_qs = Inquiry.objects.filter(hospital=hospital) if hospital else Inquiry.objects.none()
             actions_qs = PXAction.objects.filter(hospital=hospital) if hospital else PXAction.objects.none()
             surveys_qs = SurveyInstance.objects.all()  # Surveys can be viewed across hospitals
             social_qs = SocialMediaComment.objects.all()  # Social media is organization-wide, not hospital-specific
             calls_qs = CallCenterInteraction.objects.filter(hospital=hospital) if hospital else CallCenterInteraction.objects.none()
+            observations_qs = Observation.objects.filter(hospital=hospital) if hospital else Observation.objects.none()
         elif user.is_hospital_admin() and user.hospital:
             complaints_qs = Complaint.objects.filter(hospital=user.hospital)
+            inquiries_qs = Inquiry.objects.filter(hospital=user.hospital)
             actions_qs = PXAction.objects.filter(hospital=user.hospital)
             surveys_qs = SurveyInstance.objects.filter(survey_template__hospital=user.hospital)
             social_qs = SocialMediaComment.objects.all()  # Social media is organization-wide, not hospital-specific
             calls_qs = CallCenterInteraction.objects.filter(hospital=user.hospital)
+            observations_qs = Observation.objects.filter(hospital=user.hospital)
         elif user.is_department_manager() and user.department:
             complaints_qs = Complaint.objects.filter(department=user.department)
+            inquiries_qs = Inquiry.objects.filter(department=user.department)
             actions_qs = PXAction.objects.filter(department=user.department)
             surveys_qs = SurveyInstance.objects.filter(journey_stage_instance__department=user.department)
             social_qs = SocialMediaComment.objects.all()  # Social media is organization-wide, not department-specific
             calls_qs = CallCenterInteraction.objects.filter(department=user.department)
+            observations_qs = Observation.objects.filter(assigned_department=user.department)
         else:
             complaints_qs = Complaint.objects.none()
+            inquiries_qs = Inquiry.objects.none()
             actions_qs = PXAction.objects.none()
             surveys_qs = SurveyInstance.objects.none()
             social_qs = SocialMediaComment.objects.all()  # Show all social media comments
             calls_qs = CallCenterInteraction.objects.none()
+            observations_qs = Observation.objects.none()
 
-        # Top KPI Stats
-        context['stats'] = [
-            {
-                'label': _("Active Complaints"),
-                'value': complaints_qs.filter(status__in=['open', 'in_progress']).count(),
-                'icon': 'exclamation-triangle',
-                'color': 'danger'
-            },
-            {
+        # ========================================
+        # RED ALERT ITEMS (5-Second Rule)
+        # ========================================
+        red_alerts = []
+        
+        # Critical complaints
+        critical_complaints = complaints_qs.filter(
+            severity='critical', 
+            status__in=['open', 'in_progress']
+        ).count()
+        if critical_complaints > 0:
+            red_alerts.append({
+                'type': 'critical_complaints',
+                'label': _('Critical Complaints'),
+                'value': critical_complaints,
+                'icon': 'alert-octagon',
+                'color': 'red',
+                'url': f"{reverse('complaints:complaint_list')}?severity=critical&status=open,in_progress",
+                'priority': 1
+            })
+        
+        # Overdue complaints
+        overdue_complaints = complaints_qs.filter(
+            is_overdue=True, 
+            status__in=['open', 'in_progress']
+        ).count()
+        if overdue_complaints > 0:
+            red_alerts.append({
+                'type': 'overdue_complaints',
                 'label': _('Overdue Complaints'),
-                'value': complaints_qs.filter(is_overdue=True, status__in=['open', 'in_progress']).count(),
-                'icon': 'clock-history',
-                'color': 'warning'
-            },
-            {
-                'label': _('Open PX Actions'),
-                'value': actions_qs.filter(status__in=['open', 'in_progress']).count(),
-                'icon': 'clipboard-check',
-                'color': 'primary'
-            },
-            {
-                'label': _('Overdue Actions'),
-                'value': actions_qs.filter(is_overdue=True, status__in=['open', 'in_progress']).count(),
-                'icon': 'alarm',
-                'color': 'danger'
-            },
-            {
+                'value': overdue_complaints,
+                'icon': 'clock',
+                'color': 'orange',
+                'url': f"{reverse('complaints:complaint_list')}?is_overdue=true&status=open,in_progress",
+                'priority': 2
+            })
+        
+        # Escalated actions
+        escalated_actions = actions_qs.filter(
+            escalation_level__gt=0,
+            status__in=['open', 'in_progress']
+        ).count()
+        if escalated_actions > 0:
+            red_alerts.append({
+                'type': 'escalated_actions',
+                'label': _('Escalated Actions'),
+                'value': escalated_actions,
+                'icon': 'arrow-up-circle',
+                'color': 'red',
+                'url': reverse('actions:action_list'),
+                'priority': 3
+            })
+        
+        # Negative surveys in last 24h
+        negative_surveys_24h = surveys_qs.filter(
+            is_negative=True, 
+            completed_at__gte=last_24h
+        ).count()
+        if negative_surveys_24h > 0:
+            red_alerts.append({
+                'type': 'negative_surveys',
                 'label': _('Negative Surveys (24h)'),
-                'value': surveys_qs.filter(is_negative=True, completed_at__gte=last_24h).count(),
-                'icon': 'emoji-frown',
-                'color': 'warning'
-            },
-            {
-                'label': _('Negative Social Mentions'),
-                'value': sum(
-                    1 for comment in social_qs.filter(published_at__gte=last_7d)
-                    if comment.ai_analysis and 
-                    comment.ai_analysis.get('sentiment', {}).get('classification', {}).get('en') == 'negative'
-                ),
-                'icon': 'chat-dots',
-                'color': 'danger'
-            },
-            {
-                'label': _('Low Call Center Ratings'),
-                'value': calls_qs.filter(is_low_rating=True, call_started_at__gte=last_7d).count(),
-                'icon': 'telephone',
-                'color': 'warning'
-            },
-            {
-                'label': _('Avg Survey Score'),
-                'value': f"{surveys_qs.filter(completed_at__gte=last_30d).aggregate(Avg('total_score'))['total_score__avg'] or 0:.1f}",
-                'icon': 'star',
-                'color': 'success'
-            },
-        ]
+                'value': negative_surveys_24h,
+                'icon': 'frown',
+                'color': 'yellow',
+                'url': reverse('surveys:instance_list'),
+                'priority': 4
+            })
+        
+        # Sort by priority
+        red_alerts.sort(key=lambda x: x['priority'])
+        context['red_alerts'] = red_alerts
+        context['has_red_alerts'] = len(red_alerts) > 0
 
+        # ========================================
+        # COMPLAINTS MODULE DATA
+        # ========================================
+        complaints_current = complaints_qs.filter(created_at__gte=last_30d).count()
+        complaints_previous = complaints_qs.filter(
+            created_at__gte=last_60d, 
+            created_at__lt=last_30d
+        ).count()
+        complaints_variance = 0
+        if complaints_previous > 0:
+            complaints_variance = round(((complaints_current - complaints_previous) / complaints_previous) * 100, 1)
+        
+        # Resolution time calculation
+        resolved_complaints = complaints_qs.filter(
+            status='closed',
+            closed_at__isnull=False,
+            created_at__gte=last_30d
+        )
+        avg_resolution_hours = 0
+        if resolved_complaints.exists():
+            total_hours = sum(
+                (c.closed_at - c.created_at).total_seconds() / 3600 
+                for c in resolved_complaints
+            )
+            avg_resolution_hours = round(total_hours / resolved_complaints.count(), 1)
+        
+        # Complaints by severity for donut chart
+        complaints_by_severity = {
+            'critical': complaints_qs.filter(severity='critical', status__in=['open', 'in_progress']).count(),
+            'high': complaints_qs.filter(severity='high', status__in=['open', 'in_progress']).count(),
+            'medium': complaints_qs.filter(severity='medium', status__in=['open', 'in_progress']).count(),
+            'low': complaints_qs.filter(severity='low', status__in=['open', 'in_progress']).count(),
+        }
+        
+        # Complaints by department for heatmap
+        complaints_by_department = list(
+            complaints_qs.filter(
+                status__in=['open', 'in_progress'],
+                department__isnull=False
+            ).values('department__name').annotate(
+                count=Count('id')
+            ).order_by('-count')[:10]
+        )
+
+        context['complaints_module'] = {
+            'total_active': complaints_qs.filter(status__in=['open', 'in_progress']).count(),
+            'current_period': complaints_current,
+            'previous_period': complaints_previous,
+            'variance': complaints_variance,
+            'variance_direction': 'up' if complaints_variance > 0 else 'down' if complaints_variance < 0 else 'neutral',
+            'avg_resolution_hours': avg_resolution_hours,
+            'overdue': complaints_qs.filter(is_overdue=True, status__in=['open', 'in_progress']).count(),
+            'by_severity': complaints_by_severity,
+            'by_department': complaints_by_department,
+            'critical_new': complaints_qs.filter(severity='critical', created_at__gte=last_24h).count(),
+        }
+
+        # ========================================
+        # SURVEY INSIGHTS MODULE DATA
+        # ========================================
+        surveys_completed_30d = surveys_qs.filter(completed_at__gte=last_30d)
+        total_surveys_30d = surveys_completed_30d.count()
+        
+        # Calculate average satisfaction
+        avg_satisfaction = surveys_completed_30d.filter(
+            total_score__isnull=False
+        ).aggregate(Avg('total_score'))['total_score__avg'] or 0
+        
+        # NPS-style calculation (promoters - detractors)
+        positive_count = surveys_completed_30d.filter(is_negative=False).count()
+        negative_count = surveys_completed_30d.filter(is_negative=True).count()
+        nps_score = 0
+        if total_surveys_30d > 0:
+            nps_score = round(((positive_count - negative_count) / total_surveys_30d) * 100)
+        
+        # Response rate (completed vs sent in last 30 days)
+        surveys_sent_30d = surveys_qs.filter(sent_at__gte=last_30d).count()
+        response_rate = 0
+        if surveys_sent_30d > 0:
+            response_rate = round((total_surveys_30d / surveys_sent_30d) * 100, 1)
+        
+        context['survey_module'] = {
+            'avg_satisfaction': round(avg_satisfaction, 1),
+            'nps_score': nps_score,
+            'response_rate': response_rate,
+            'total_completed': total_surveys_30d,
+            'positive_count': positive_count,
+            'negative_count': negative_count,
+            'neutral_count': total_surveys_30d - positive_count - negative_count,
+            'negative_24h': surveys_qs.filter(is_negative=True, completed_at__gte=last_24h).count(),
+        }
+
+        # ========================================
+        # PX ACTIONS MODULE DATA
+        # ========================================
+        actions_open = actions_qs.filter(status='open').count()
+        actions_in_progress = actions_qs.filter(status='in_progress').count()
+        actions_pending_approval = actions_qs.filter(status='pending_approval').count()
+        actions_closed_30d = actions_qs.filter(status='closed', closed_at__gte=last_30d).count()
+        
+        # Time to close calculation
+        closed_actions = actions_qs.filter(
+            status='closed',
+            closed_at__isnull=False,
+            created_at__gte=last_30d
+        )
+        avg_time_to_close_hours = 0
+        if closed_actions.exists():
+            total_hours = sum(
+                (a.closed_at - a.created_at).total_seconds() / 3600 
+                for a in closed_actions
+            )
+            avg_time_to_close_hours = round(total_hours / closed_actions.count(), 1)
+        
+        # Actions by source for breakdown
+        actions_by_source = list(
+            actions_qs.filter(
+                status__in=['open', 'in_progress']
+            ).values('source_type').annotate(
+                count=Count('id')
+            ).order_by('-count')
+        )
+        
+        context['actions_module'] = {
+            'open': actions_open,
+            'in_progress': actions_in_progress,
+            'pending_approval': actions_pending_approval,
+            'overdue': actions_qs.filter(is_overdue=True, status__in=['open', 'in_progress']).count(),
+            'escalated': actions_qs.filter(escalation_level__gt=0, status__in=['open', 'in_progress']).count(),
+            'closed_30d': actions_closed_30d,
+            'avg_time_to_close_hours': avg_time_to_close_hours,
+            'by_source': actions_by_source,
+            'new_today': actions_qs.filter(created_at__gte=last_24h).count(),
+        }
+
+        # ========================================
+        # INQUIRIES MODULE DATA
+        # ========================================
+        inquiries_open = inquiries_qs.filter(status='open').count()
+        inquiries_in_progress = inquiries_qs.filter(status='in_progress').count()
+        inquiries_resolved_30d = inquiries_qs.filter(status='resolved', updated_at__gte=last_30d).count()
+        
+        context['inquiries_module'] = {
+            'open': inquiries_open,
+            'in_progress': inquiries_in_progress,
+            'total_active': inquiries_open + inquiries_in_progress,
+            'resolved_30d': inquiries_resolved_30d,
+            'new_24h': inquiries_qs.filter(created_at__gte=last_24h).count(),
+        }
+
+        # ========================================
+        # OBSERVATIONS MODULE DATA
+        # ========================================
+        observations_new = observations_qs.filter(status='new').count()
+        observations_in_progress = observations_qs.filter(status='in_progress').count()
+        observations_critical = observations_qs.filter(
+            severity='critical', 
+            status__in=['new', 'triaged', 'assigned', 'in_progress']
+        ).count()
+        
+        # Observations by category
+        observations_by_category = list(
+            observations_qs.filter(
+                status__in=['new', 'triaged', 'assigned', 'in_progress']
+            ).values('category__name_en').annotate(
+                count=Count('id')
+            ).order_by('-count')[:5]
+        )
+        
+        context['observations_module'] = {
+            'new': observations_new,
+            'in_progress': observations_in_progress,
+            'critical': observations_critical,
+            'total_active': observations_new + observations_in_progress,
+            'resolved_30d': observations_qs.filter(status='resolved', resolved_at__gte=last_30d).count(),
+            'by_category': observations_by_category,
+        }
+
+        # ========================================
+        # COMMUNICATION/CALL CENTER MODULE DATA
+        # ========================================
+        calls_7d = calls_qs.filter(call_started_at__gte=last_7d)
+        total_calls = calls_7d.count()
+        low_rating_calls = calls_7d.filter(is_low_rating=True).count()
+        
+        context['calls_module'] = {
+            'total_7d': total_calls,
+            'low_ratings': low_rating_calls,
+            'satisfaction_rate': round(((total_calls - low_rating_calls) / total_calls * 100), 1) if total_calls > 0 else 0,
+        }
+
+        # ========================================
+        # LEGACY STATS (for backward compatibility)
+        # ========================================
+        context['stats'] = {
+            'total_complaints': context['complaints_module']['total_active'],
+            'avg_resolution_time': f"{avg_resolution_hours}h",
+            'satisfaction_score': round(avg_satisfaction, 0),
+            'active_actions': context['actions_module']['open'] + context['actions_module']['in_progress'],
+            'new_today': context['actions_module']['new_today'],
+        }
+
+        # ========================================
+        # LATEST ITEMS FOR LIVE FEED
+        # ========================================
         # Latest high severity complaints
         context['latest_complaints'] = complaints_qs.filter(
             severity__in=['high', 'critical']
@@ -150,12 +393,24 @@ class CommandCenterView(LoginRequiredMixin, TemplateView):
             escalation_level__gt=0
         ).select_related('hospital', 'assigned_to').order_by('-escalated_at')[:5]
 
+        # Latest inquiries
+        context['latest_inquiries'] = inquiries_qs.filter(
+            status__in=['open', 'in_progress']
+        ).select_related('patient', 'hospital', 'department').order_by('-created_at')[:5]
+
+        # Latest observations
+        context['latest_observations'] = observations_qs.filter(
+            status__in=['new', 'triaged', 'assigned']
+        ).select_related('hospital', 'category').order_by('-created_at')[:5]
+
         # Latest integration events
         context['latest_events'] = InboundEvent.objects.filter(
             status='processed'
         ).select_related().order_by('-processed_at')[:10]
 
-        # Staff ratings data
+        # ========================================
+        # PHYSICIAN LEADERBOARD
+        # ========================================
         current_month_ratings = PhysicianMonthlyRating.objects.filter(
             year=now.year,
             month=now.month
@@ -178,16 +433,28 @@ class CommandCenterView(LoginRequiredMixin, TemplateView):
         )
         context['physician_stats'] = physician_stats
 
-        # Chart data (simplified for now)
-        import json
+        # ========================================
+        # CHART DATA
+        # ========================================
         context['chart_data'] = {
             'complaints_trend': json.dumps(self.get_complaints_trend(complaints_qs, last_30d)),
-            'survey_satisfaction': self.get_survey_satisfaction(surveys_qs, last_30d),
+            'complaints_by_severity': json.dumps(complaints_by_severity),
+            'survey_satisfaction': avg_satisfaction,
+            'nps_trend': json.dumps(self.get_nps_trend(surveys_qs, last_30d)),
+            'actions_funnel': json.dumps({
+                'open': actions_open,
+                'in_progress': actions_in_progress,
+                'pending_approval': actions_pending_approval,
+                'closed': actions_closed_30d,
+            }),
         }
 
         # Add hospital context
         context['current_hospital'] = self.request.tenant_hospital
         context['is_px_admin'] = user.is_px_admin()
+        
+        # Last updated timestamp
+        context['last_updated'] = now.strftime('%Y-%m-%d %H:%M:%S')
 
         return context
 
@@ -206,6 +473,25 @@ class CommandCenterView(LoginRequiredMixin, TemplateView):
             })
         return data
 
+    def get_nps_trend(self, queryset, start_date):
+        """Get NPS trend data for chart"""
+        data = []
+        for i in range(30):
+            date = start_date + timedelta(days=i)
+            day_surveys = queryset.filter(completed_at__date=date.date())
+            total = day_surveys.count()
+            if total > 0:
+                positive = day_surveys.filter(is_negative=False).count()
+                negative = day_surveys.filter(is_negative=True).count()
+                nps = round(((positive - negative) / total) * 100)
+            else:
+                nps = 0
+            data.append({
+                'date': date.strftime('%Y-%m-%d'),
+                'nps': nps
+            })
+        return data
+
     def get_survey_satisfaction(self, queryset, start_date):
         """Get survey satisfaction averages"""
         return queryset.filter(
@@ -234,8 +520,15 @@ def my_dashboard(request):
     - Bulk actions support
     - Charts showing trends
     """
+    # Redirect Source Users to their dashboard
+    if request.user.is_source_user():
+        return redirect('px_sources:source_user_dashboard')
+    
     user = request.user
     
+    # Get selected hospital for PX Admins (from middleware)
+    selected_hospital = getattr(request, 'tenant_hospital', None)
+    
     # Get date range filter
     date_range_days = int(request.GET.get('date_range', 30))
     if date_range_days == -1:  # All time
@@ -261,6 +554,9 @@ def my_dashboard(request):
     # 1. Complaints
     from apps.complaints.models import Complaint
     complaints_qs = Complaint.objects.filter(assigned_to=user)
+    # Filter by selected hospital for PX Admins
+    if selected_hospital:
+        complaints_qs = complaints_qs.filter(hospital=selected_hospital)
     if start_date:
         complaints_qs = complaints_qs.filter(created_at__gte=start_date)
     if search_query:
@@ -279,6 +575,9 @@ def my_dashboard(request):
     # 2. Inquiries
     from apps.complaints.models import Inquiry
     inquiries_qs = Inquiry.objects.filter(assigned_to=user)
+    # Filter by selected hospital for PX Admins
+    if selected_hospital:
+        inquiries_qs = inquiries_qs.filter(hospital=selected_hospital)
     if start_date:
         inquiries_qs = inquiries_qs.filter(created_at__gte=start_date)
     if search_query:
@@ -295,6 +594,9 @@ def my_dashboard(request):
     # 3. Observations
     from apps.observations.models import Observation
     observations_qs = Observation.objects.filter(assigned_to=user)
+    # Filter by selected hospital for PX Admins
+    if selected_hospital:
+        observations_qs = observations_qs.filter(hospital=selected_hospital)
     if start_date:
         observations_qs = observations_qs.filter(created_at__gte=start_date)
     if search_query:
@@ -313,6 +615,9 @@ def my_dashboard(request):
     # 4. PX Actions
     from apps.px_action_center.models import PXAction
     actions_qs = PXAction.objects.filter(assigned_to=user)
+    # Filter by selected hospital for PX Admins
+    if selected_hospital:
+        actions_qs = actions_qs.filter(hospital=selected_hospital)
     if start_date:
         actions_qs = actions_qs.filter(created_at__gte=start_date)
     if search_query:
@@ -331,6 +636,9 @@ def my_dashboard(request):
     # 5. QI Project Tasks
     from apps.projects.models import QIProjectTask
     tasks_qs = QIProjectTask.objects.filter(assigned_to=user)
+    # Filter by selected hospital for PX Admins (via project)
+    if selected_hospital:
+        tasks_qs = tasks_qs.filter(project__hospital=selected_hospital)
     if start_date:
         tasks_qs = tasks_qs.filter(created_at__gte=start_date)
     if search_query:
@@ -345,6 +653,9 @@ def my_dashboard(request):
     # 6. Feedback
     from apps.feedback.models import Feedback
     feedback_qs = Feedback.objects.filter(assigned_to=user)
+    # Filter by selected hospital for PX Admins
+    if selected_hospital:
+        feedback_qs = feedback_qs.filter(hospital=selected_hospital)
     if start_date:
         feedback_qs = feedback_qs.filter(created_at__gte=start_date)
     if search_query:
@@ -496,7 +807,7 @@ def my_dashboard(request):
         paginated_data[tab_name] = paginator.get_page(page_number)
     
     # Get chart data
-    chart_data = get_dashboard_chart_data(user, start_date)
+    chart_data = get_dashboard_chart_data(user, start_date, selected_hospital)
     
     context = {
         'stats': stats,
@@ -508,12 +819,13 @@ def my_dashboard(request):
         'status_filter': status_filter,
         'priority_filter': priority_filter,
         'chart_data': chart_data,
+        'selected_hospital': selected_hospital,  # For hospital filter display
     }
     
     return render(request, 'dashboard/my_dashboard.html', context)
 
 
-def get_dashboard_chart_data(user, start_date=None):
+def get_dashboard_chart_data(user, start_date=None, selected_hospital=None):
     """
     Get chart data for dashboard trends.
     
@@ -542,36 +854,60 @@ def get_dashboard_chart_data(user, start_date=None):
         
         completed_count = 0
         # Check each model for completions on this date
-        completed_count += Complaint.objects.filter(
+        # Apply hospital filter for PX Admins
+        complaint_qs = Complaint.objects.filter(
             assigned_to=user,
             status='closed',
             closed_at__date=date.date()
-        ).count()
-        completed_count += Inquiry.objects.filter(
+        )
+        if selected_hospital:
+            complaint_qs = complaint_qs.filter(hospital=selected_hospital)
+        completed_count += complaint_qs.count()
+        
+        inquiry_qs = Inquiry.objects.filter(
             assigned_to=user,
             status='closed',
             updated_at__date=date.date()
-        ).count()
-        completed_count += Observation.objects.filter(
+        )
+        if selected_hospital:
+            inquiry_qs = inquiry_qs.filter(hospital=selected_hospital)
+        completed_count += inquiry_qs.count()
+        
+        observation_qs = Observation.objects.filter(
             assigned_to=user,
             status='closed',
             updated_at__date=date.date()
-        ).count()
-        completed_count += PXAction.objects.filter(
+        )
+        if selected_hospital:
+            observation_qs = observation_qs.filter(hospital=selected_hospital)
+        completed_count += observation_qs.count()
+        
+        action_qs = PXAction.objects.filter(
             assigned_to=user,
             status='closed',
             closed_at__date=date.date()
-        ).count()
-        completed_count += QIProjectTask.objects.filter(
+        )
+        if selected_hospital:
+            action_qs = action_qs.filter(hospital=selected_hospital)
+        completed_count += action_qs.count()
+        
+        task_qs = QIProjectTask.objects.filter(
             assigned_to=user,
             status='closed',
             completed_date=date.date()
-        ).count()
-        completed_count += Feedback.objects.filter(
+        )
+        if selected_hospital:
+            task_qs = task_qs.filter(project__hospital=selected_hospital)
+        completed_count += task_qs.count()
+        
+        feedback_qs = Feedback.objects.filter(
             assigned_to=user,
             status='closed',
             closed_at__date=date.date()
-        ).count()
+        )
+        if selected_hospital:
+            feedback_qs = feedback_qs.filter(hospital=selected_hospital)
+        completed_count += feedback_qs.count()
         
         completion_data.append(completed_count)
     
@@ -667,13 +1003,20 @@ def admin_evaluation(request):
     - Multi-staff comparison
     - Date range filtering
     - Hospital/department filtering
+    
+    Access: PX Admin and Hospital Admin only
     """
+    from django.core.exceptions import PermissionDenied
     from apps.analytics.services.analytics_service import UnifiedAnalyticsService
     from apps.accounts.models import User
     from apps.organizations.models import Hospital, Department
     
     user = request.user
     
+    # Only PX Admins and Hospital Admins can access
+    if not (user.is_px_admin() or user.is_hospital_admin()):
+        raise PermissionDenied("Only PX Admins and Hospital Admins can access the Admin Evaluation dashboard.")
+    
     # Get date range filter
     date_range = request.GET.get('date_range', '30d')
     custom_start = request.GET.get('custom_start')
@@ -759,6 +1102,8 @@ def admin_evaluation(request):
 def admin_evaluation_chart_data(request):
     """
     API endpoint to get chart data for admin evaluation dashboard.
+    
+    Access: PX Admin and Hospital Admin only
     """
     from apps.analytics.services.analytics_service import UnifiedAnalyticsService
     
@@ -766,6 +1111,11 @@ def admin_evaluation_chart_data(request):
         return JsonResponse({'success': False, 'error': 'GET required'}, status=405)
     
     user = request.user
+    
+    # Only PX Admins and Hospital Admins can access
+    if not (user.is_px_admin() or user.is_hospital_admin()):
+        return JsonResponse({'success': False, 'error': 'Permission denied'}, status=403)
+    
     chart_type = request.GET.get('chart_type')
     date_range = request.GET.get('date_range', '30d')
     hospital_id = request.GET.get('hospital_id')
@@ -817,8 +1167,15 @@ def staff_performance_detail(request, staff_id):
     - Daily workload trends
     - Recent complaints and inquiries
     - Performance metrics
+    
+    Access: PX Admin and Hospital Admin only
     """
+    from django.core.exceptions import PermissionDenied
     from apps.analytics.services.analytics_service import UnifiedAnalyticsService
+    
+    # Only PX Admins and Hospital Admins can access
+    if not (request.user.is_px_admin() or request.user.is_hospital_admin()):
+        raise PermissionDenied("Only PX Admins and Hospital Admins can access staff performance details.")
     from apps.accounts.models import User
     
     user = request.user
@@ -870,10 +1227,16 @@ def staff_performance_detail(request, staff_id):
 def staff_performance_trends(request, staff_id):
     """
     API endpoint to get staff performance trends as JSON.
+    
+    Access: PX Admin and Hospital Admin only
     """
     from apps.analytics.services.analytics_service import UnifiedAnalyticsService
     from apps.accounts.models import User
     
+    # Only PX Admins and Hospital Admins can access
+    if not (request.user.is_px_admin() or request.user.is_hospital_admin()):
+        return JsonResponse({'success': False, 'error': 'Permission denied'}, status=403)
+    
     user = request.user
     months = int(request.GET.get('months', 6))
     
@@ -892,9 +1255,16 @@ def staff_performance_trends(request, staff_id):
 def department_benchmarks(request):
     """
     Department benchmarking view comparing all staff.
+    
+    Access: PX Admin and Hospital Admin only
     """
+    from django.core.exceptions import PermissionDenied
     from apps.analytics.services.analytics_service import UnifiedAnalyticsService
     
+    # Only PX Admins and Hospital Admins can access
+    if not (request.user.is_px_admin() or request.user.is_hospital_admin()):
+        raise PermissionDenied("Only PX Admins and Hospital Admins can access department benchmarks.")
+    
     user = request.user
     
     # Get filters
@@ -928,12 +1298,19 @@ def department_benchmarks(request):
 def export_staff_performance(request):
     """
     Export staff performance report in various formats.
+    
+    Access: PX Admin and Hospital Admin only
     """
+    from django.core.exceptions import PermissionDenied
     from apps.analytics.services.analytics_service import UnifiedAnalyticsService
     import csv
     import json
     from django.http import HttpResponse
     
+    # Only PX Admins and Hospital Admins can access
+    if not (request.user.is_px_admin() or request.user.is_hospital_admin()):
+        raise PermissionDenied("Only PX Admins and Hospital Admins can export staff performance.")
+    
     user = request.user
     
     if request.method != 'POST':
@@ -974,13 +1351,157 @@ def export_staff_performance(request):
         return JsonResponse({'error': str(e)}, status=500)
 
 
+@login_required
+def command_center_api(request):
+    """
+    API endpoint for Command Center live data updates.
+    
+    Returns JSON with all module data for AJAX refresh without page reload.
+    Enables true real-time updates every 30-60 seconds.
+    """
+    from apps.complaints.models import Complaint, Inquiry
+    from apps.px_action_center.models import PXAction
+    from apps.surveys.models import SurveyInstance
+    from apps.physicians.models import PhysicianMonthlyRating
+    from apps.observations.models import Observation
+    
+    user = request.user
+    now = timezone.now()
+    last_24h = now - timedelta(hours=24)
+    last_30d = now - timedelta(days=30)
+    last_60d = now - timedelta(days=60)
+    
+    # Build querysets based on user role
+    if user.is_px_admin():
+        hospital = request.tenant_hospital
+        complaints_qs = Complaint.objects.filter(hospital=hospital) if hospital else Complaint.objects.none()
+        inquiries_qs = Inquiry.objects.filter(hospital=hospital) if hospital else Inquiry.objects.none()
+        actions_qs = PXAction.objects.filter(hospital=hospital) if hospital else PXAction.objects.none()
+        surveys_qs = SurveyInstance.objects.all()
+        observations_qs = Observation.objects.filter(hospital=hospital) if hospital else Observation.objects.none()
+    elif user.is_hospital_admin() and user.hospital:
+        complaints_qs = Complaint.objects.filter(hospital=user.hospital)
+        inquiries_qs = Inquiry.objects.filter(hospital=user.hospital)
+        actions_qs = PXAction.objects.filter(hospital=user.hospital)
+        surveys_qs = SurveyInstance.objects.filter(survey_template__hospital=user.hospital)
+        observations_qs = Observation.objects.filter(hospital=user.hospital)
+    elif user.is_department_manager() and user.department:
+        complaints_qs = Complaint.objects.filter(department=user.department)
+        inquiries_qs = Inquiry.objects.filter(department=user.department)
+        actions_qs = PXAction.objects.filter(department=user.department)
+        surveys_qs = SurveyInstance.objects.filter(journey_stage_instance__department=user.department)
+        observations_qs = Observation.objects.filter(assigned_department=user.department)
+    else:
+        complaints_qs = Complaint.objects.none()
+        inquiries_qs = Inquiry.objects.none()
+        actions_qs = PXAction.objects.none()
+        surveys_qs = SurveyInstance.objects.none()
+        observations_qs = Observation.objects.none()
+    
+    # Calculate all module data
+    # Complaints
+    complaints_current = complaints_qs.filter(created_at__gte=last_30d).count()
+    complaints_previous = complaints_qs.filter(created_at__gte=last_60d, created_at__lt=last_30d).count()
+    complaints_variance = round(((complaints_current - complaints_previous) / complaints_previous) * 100, 1) if complaints_previous > 0 else 0
+    
+    # Surveys
+    surveys_completed_30d = surveys_qs.filter(completed_at__gte=last_30d)
+    total_surveys_30d = surveys_completed_30d.count()
+    positive_count = surveys_completed_30d.filter(is_negative=False).count()
+    negative_count = surveys_completed_30d.filter(is_negative=True).count()
+    nps_score = round(((positive_count - negative_count) / total_surveys_30d) * 100) if total_surveys_30d > 0 else 0
+    avg_satisfaction = surveys_completed_30d.filter(total_score__isnull=False).aggregate(Avg('total_score'))['total_score__avg'] or 0
+    surveys_sent_30d = surveys_qs.filter(sent_at__gte=last_30d).count()
+    response_rate = round((total_surveys_30d / surveys_sent_30d) * 100, 1) if surveys_sent_30d > 0 else 0
+    
+    # Actions
+    actions_open = actions_qs.filter(status='open').count()
+    actions_in_progress = actions_qs.filter(status='in_progress').count()
+    actions_pending_approval = actions_qs.filter(status='pending_approval').count()
+    actions_closed_30d = actions_qs.filter(status='closed', closed_at__gte=last_30d).count()
+    
+    # Red alerts
+    red_alerts = []
+    critical_complaints = complaints_qs.filter(severity='critical', status__in=['open', 'in_progress']).count()
+    if critical_complaints > 0:
+        red_alerts.append({'type': 'critical_complaints', 'value': critical_complaints})
+    overdue_complaints = complaints_qs.filter(is_overdue=True, status__in=['open', 'in_progress']).count()
+    if overdue_complaints > 0:
+        red_alerts.append({'type': 'overdue_complaints', 'value': overdue_complaints})
+    escalated_actions = actions_qs.filter(escalation_level__gt=0, status__in=['open', 'in_progress']).count()
+    if escalated_actions > 0:
+        red_alerts.append({'type': 'escalated_actions', 'value': escalated_actions})
+    negative_surveys_24h = surveys_qs.filter(is_negative=True, completed_at__gte=last_24h).count()
+    if negative_surveys_24h > 0:
+        red_alerts.append({'type': 'negative_surveys', 'value': negative_surveys_24h})
+    
+    return JsonResponse({
+        'success': True,
+        'timestamp': now.isoformat(),
+        'last_updated': now.strftime('%Y-%m-%d %H:%M:%S'),
+        'red_alerts': {
+            'has_alerts': len(red_alerts) > 0,
+            'count': len(red_alerts),
+            'items': red_alerts
+        },
+        'modules': {
+            'complaints': {
+                'total_active': complaints_qs.filter(status__in=['open', 'in_progress']).count(),
+                'variance': complaints_variance,
+                'variance_direction': 'up' if complaints_variance > 0 else 'down' if complaints_variance < 0 else 'neutral',
+                'overdue': complaints_qs.filter(is_overdue=True, status__in=['open', 'in_progress']).count(),
+                'critical': complaints_qs.filter(severity='critical', status__in=['open', 'in_progress']).count(),
+                'by_severity': {
+                    'critical': complaints_qs.filter(severity='critical', status__in=['open', 'in_progress']).count(),
+                    'high': complaints_qs.filter(severity='high', status__in=['open', 'in_progress']).count(),
+                    'medium': complaints_qs.filter(severity='medium', status__in=['open', 'in_progress']).count(),
+                    'low': complaints_qs.filter(severity='low', status__in=['open', 'in_progress']).count(),
+                }
+            },
+            'surveys': {
+                'nps_score': nps_score,
+                'avg_satisfaction': round(avg_satisfaction, 1),
+                'response_rate': response_rate,
+                'total_completed': total_surveys_30d,
+                'negative_24h': surveys_qs.filter(is_negative=True, completed_at__gte=last_24h).count()
+            },
+            'actions': {
+                'open': actions_open,
+                'in_progress': actions_in_progress,
+                'pending_approval': actions_pending_approval,
+                'closed_30d': actions_closed_30d,
+                'overdue': actions_qs.filter(is_overdue=True, status__in=['open', 'in_progress']).count(),
+                'escalated': actions_qs.filter(escalation_level__gt=0, status__in=['open', 'in_progress']).count()
+            },
+            'inquiries': {
+                'open': inquiries_qs.filter(status='open').count(),
+                'in_progress': inquiries_qs.filter(status='in_progress').count(),
+                'total_active': inquiries_qs.filter(status__in=['open', 'in_progress']).count(),
+                'new_24h': inquiries_qs.filter(created_at__gte=last_24h).count()
+            },
+            'observations': {
+                'new': observations_qs.filter(status='new').count(),
+                'in_progress': observations_qs.filter(status='in_progress').count(),
+                'total_active': observations_qs.filter(status__in=['new', 'in_progress']).count(),
+                'critical': observations_qs.filter(severity='critical', status__in=['new', 'triaged', 'assigned', 'in_progress']).count()
+            }
+        }
+    })
+
+
 @login_required
 def performance_analytics_api(request):
     """
     API endpoint for various performance analytics.
+    
+    Access: PX Admin and Hospital Admin only
     """
     from apps.analytics.services.analytics_service import UnifiedAnalyticsService
     
+    # Only PX Admins and Hospital Admins can access
+    if not (request.user.is_px_admin() or request.user.is_hospital_admin()):
+        return JsonResponse({'success': False, 'error': 'Permission denied'}, status=403)
+    
     user = request.user
     chart_type = request.GET.get('chart_type')
     
diff --git a/apps/feedback/views.py b/apps/feedback/views.py
index 8c9baec..c27e540 100644
--- a/apps/feedback/views.py
+++ b/apps/feedback/views.py
@@ -48,8 +48,13 @@ def feedback_list(request):
 
     # Apply RBAC filters
     user = request.user
+    # Get selected hospital for PX Admins (from middleware)
+    selected_hospital = getattr(request, 'tenant_hospital', None)
+    
     if user.is_px_admin():
-        pass  # See all
+        # PX Admins see all, but filter by selected hospital if set
+        if selected_hospital:
+            queryset = queryset.filter(hospital=selected_hospital)
     elif user.is_hospital_admin() and user.hospital:
         queryset = queryset.filter(hospital=user.hospital)
     elif user.is_department_manager() and user.department:
diff --git a/apps/integrations/management/__init__.py b/apps/integrations/management/__init__.py
index f6115d1..e69de29 100644
--- a/apps/integrations/management/__init__.py
+++ b/apps/integrations/management/__init__.py
@@ -1 +0,0 @@
-# Integrations management commands
\ No newline at end of file
diff --git a/apps/integrations/management/commands/__init__.py b/apps/integrations/management/commands/__init__.py
index f6115d1..e69de29 100644
--- a/apps/integrations/management/commands/__init__.py
+++ b/apps/integrations/management/commands/__init__.py
@@ -1 +0,0 @@
-# Integrations management commands
\ No newline at end of file
diff --git a/apps/integrations/management/commands/fetch_his_surveys.py b/apps/integrations/management/commands/fetch_his_surveys.py
new file mode 100644
index 0000000..b6547c2
--- /dev/null
+++ b/apps/integrations/management/commands/fetch_his_surveys.py
@@ -0,0 +1,182 @@
+"""
+Management command to manually fetch surveys from HIS system.
+
+Usage:
+    python manage.py fetch_his_surveys [--minutes N] [--limit N] [--test]
+
+Options:
+    --minutes N  Fetch patients discharged in the last N minutes (default: 10)
+    --limit N    Maximum number of patients to fetch (default: 100)
+    --test       Test connection only, don't fetch surveys
+"""
+from django.core.management.base import BaseCommand
+from django.utils import timezone
+
+from apps.integrations.services.his_client import HISClient, HISClientFactory
+from apps.integrations.services.his_adapter import HISAdapter
+
+
+class Command(BaseCommand):
+    help = 'Fetch surveys from HIS system'
+
+    def add_arguments(self, parser):
+        parser.add_argument(
+            '--minutes',
+            type=int,
+            default=10,
+            help='Fetch patients discharged in the last N minutes (default: 10)'
+        )
+        parser.add_argument(
+            '--limit',
+            type=int,
+            default=100,
+            help='Maximum number of patients to fetch (default: 100)'
+        )
+        parser.add_argument(
+            '--test',
+            action='store_true',
+            help='Test connection only, don\'t fetch surveys'
+        )
+        parser.add_argument(
+            '--config',
+            type=str,
+            help='Configuration name to use (optional)'
+        )
+
+    def handle(self, *args, **options):
+        minutes = options['minutes']
+        limit = options['limit']
+        test_only = options['test']
+        config_name = options.get('config')
+
+        self.stdout.write(self.style.MIGRATE_HEADING('=' * 70))
+        self.stdout.write(self.style.MIGRATE_HEADING('HIS Survey Fetch'))
+        self.stdout.write(self.style.MIGRATE_HEADING('=' * 70))
+        
+        # Get clients
+        if config_name:
+            from apps.integrations.models import IntegrationConfig, SourceSystem
+            config = IntegrationConfig.objects.filter(
+                name=config_name,
+                source_system=SourceSystem.HIS
+            ).first()
+            if not config:
+                self.stdout.write(
+                    self.style.ERROR(f'Configuration "{config_name}" not found')
+                )
+                return
+            clients = [HISClient(config)]
+        else:
+            clients = HISClientFactory.get_all_active_clients()
+        
+        if not clients:
+            self.stdout.write(
+                self.style.ERROR('No active HIS configurations found')
+            )
+            return
+        
+        self.stdout.write(f'Found {len(clients)} HIS configuration(s)')
+        
+        total_patients = 0
+        total_surveys_created = 0
+        total_surveys_sent = 0
+        
+        for client in clients:
+            config_display = client.config.name if client.config else 'Default'
+            self.stdout.write(self.style.MIGRATE_HEADING(f'\n📡 Configuration: {config_display}'))
+            
+            # Test connection
+            self.stdout.write('Testing connection...', ending=' ')
+            test_result = client.test_connection()
+            
+            if test_result['success']:
+                self.stdout.write(self.style.SUCCESS('✓ Connected'))
+            else:
+                self.stdout.write(
+                    self.style.ERROR(f'✗ Failed: {test_result["message"]}')
+                )
+                continue
+            
+            if test_only:
+                continue
+            
+            # Calculate fetch window
+            from datetime import timedelta
+            fetch_since = timezone.now() - timedelta(minutes=minutes)
+            
+            self.stdout.write(
+                f'Fetching discharged patients since {fetch_since.strftime("%Y-%m-%d %H:%M:%S")}...'
+            )
+            
+            # Fetch patients
+            patients = client.fetch_discharged_patients(since=fetch_since, limit=limit)
+            
+            if not patients:
+                self.stdout.write(self.style.WARNING('No patients found'))
+                continue
+            
+            self.stdout.write(f'Found {len(patients)} patient(s)')
+            
+            # Process each patient
+            for i, patient_data in enumerate(patients, 1):
+                self.stdout.write(f'\n  Processing patient {i}/{len(patients)}...')
+                
+                try:
+                    # Ensure proper format
+                    if isinstance(patient_data, dict):
+                        if 'FetchPatientDataTimeStampList' not in patient_data:
+                            patient_data = {
+                                'FetchPatientDataTimeStampList': [patient_data],
+                                'FetchPatientDataTimeStampVisitDataList': [],
+                                'Code': 200,
+                                'Status': 'Success'
+                            }
+                    
+                    # Process
+                    result = HISAdapter.process_his_data(patient_data)
+                    
+                    if result['success']:
+                        total_surveys_created += 1
+                        
+                        patient_name = "Unknown"
+                        if result.get('patient'):
+                            patient_name = f"{result['patient'].first_name} {result['patient'].last_name}".strip()
+                        
+                        if result.get('survey_sent'):
+                            total_surveys_sent += 1
+                            self.stdout.write(
+                                f'    {self.style.SUCCESS("✓")} Survey sent to {patient_name}'
+                            )
+                        else:
+                            self.stdout.write(
+                                f'    {self.style.WARNING("⚠")} Survey created but not sent to {patient_name}'
+                            )
+                    else:
+                        self.stdout.write(
+                            f'    {self.style.ERROR("✗")} {result.get("message", "Unknown error")}'
+                        )
+                
+                except Exception as e:
+                    self.stdout.write(
+                        f'    {self.style.ERROR("✗")} Error: {str(e)}'
+                    )
+            
+            total_patients += len(patients)
+            
+            # Update last sync
+            if client.config:
+                client.config.last_sync_at = timezone.now()
+                client.config.save(update_fields=['last_sync_at'])
+        
+        # Summary
+        self.stdout.write(self.style.MIGRATE_HEADING('\n' + '=' * 70))
+        self.stdout.write(self.style.MIGRATE_HEADING('Summary'))
+        self.stdout.write(self.style.MIGRATE_HEADING('=' * 70))
+        self.stdout.write(f'Total patients fetched: {total_patients}')
+        self.stdout.write(f'Total surveys created: {total_surveys_created}')
+        self.stdout.write(f'Total surveys sent: {total_surveys_sent}')
+        
+        if test_only:
+            self.stdout.write(self.style.SUCCESS('\nConnection test completed successfully!'))
+        else:
+            self.stdout.write(self.style.SUCCESS('\nFetch completed!'))
diff --git a/apps/integrations/management/commands/setup_his_integration.py b/apps/integrations/management/commands/setup_his_integration.py
new file mode 100644
index 0000000..2fd9cb7
--- /dev/null
+++ b/apps/integrations/management/commands/setup_his_integration.py
@@ -0,0 +1,127 @@
+"""
+Management command to set up HIS integration configuration.
+
+Usage:
+    python manage.py setup_his_integration --name "HIS Production" --url "https://his.hospital.com/api"
+
+Options:
+    --name       Configuration name
+    --url        HIS API URL
+    --api-key    API key for authentication
+    --hospital   Hospital ID to associate with this config
+"""
+from django.core.management.base import BaseCommand
+
+from apps.integrations.models import IntegrationConfig, SourceSystem
+from apps.organizations.models import Hospital
+
+
+class Command(BaseCommand):
+    help = 'Set up HIS integration configuration'
+
+    def add_arguments(self, parser):
+        parser.add_argument(
+            '--name',
+            type=str,
+            required=True,
+            help='Configuration name (e.g., "HIS Production")'
+        )
+        parser.add_argument(
+            '--url',
+            type=str,
+            required=True,
+            help='HIS API URL (e.g., "https://his.hospital.com/api/patients")'
+        )
+        parser.add_argument(
+            '--api-key',
+            type=str,
+            help='API key for authentication'
+        )
+        parser.add_argument(
+            '--hospital',
+            type=str,
+            help='Hospital code to associate with this config'
+        )
+        parser.add_argument(
+            '--active',
+            action='store_true',
+            default=True,
+            help='Set configuration as active (default: True)'
+        )
+        parser.add_argument(
+            '--force',
+            action='store_true',
+            help='Update existing configuration with same name'
+        )
+
+    def handle(self, *args, **options):
+        name = options['name']
+        url = options['url']
+        api_key = options.get('api_key')
+        hospital_code = options.get('hospital')
+        is_active = options['active']
+        force = options.get('force')
+
+        self.stdout.write(self.style.MIGRATE_HEADING('=' * 70))
+        self.stdout.write(self.style.MIGRATE_HEADING('HIS Integration Setup'))
+        self.stdout.write(self.style.MIGRATE_HEADING('=' * 70))
+        
+        # Check for existing configuration
+        existing = IntegrationConfig.objects.filter(name=name).first()
+        
+        if existing and not force:
+            self.stdout.write(
+                self.style.ERROR(f'Configuration "{name}" already exists. Use --force to update.')
+            )
+            return
+        
+        # Build config JSON
+        config_json = {}
+        
+        if hospital_code:
+            hospital = Hospital.objects.filter(code=hospital_code).first()
+            if hospital:
+                config_json['hospital_id'] = str(hospital.id)
+                config_json['hospital_code'] = hospital_code
+                self.stdout.write(f'Associated with hospital: {hospital.name}')
+            else:
+                self.stdout.write(
+                    self.style.WARNING(f'Hospital with code "{hospital_code}" not found')
+                )
+        
+        # Create or update configuration
+        if existing:
+            existing.api_url = url
+            if api_key:
+                existing.api_key = api_key
+            existing.is_active = is_active
+            existing.config_json.update(config_json)
+            existing.save()
+            config = existing
+            action = 'Updated'
+        else:
+            config = IntegrationConfig.objects.create(
+                name=name,
+                source_system=SourceSystem.HIS,
+                api_url=url,
+                api_key=api_key or '',
+                is_active=is_active,
+                config_json=config_json
+            )
+            action = 'Created'
+        
+        self.stdout.write(self.style.SUCCESS(f'\n✓ {action} configuration:'))
+        self.stdout.write(f'   Name: {config.name}')
+        self.stdout.write(f'   Source: {config.get_source_system_display()}')
+        self.stdout.write(f'   API URL: {config.api_url}')
+        self.stdout.write(f'   API Key: {"✓ Set" if config.api_key else "✗ Not set"}')
+        self.stdout.write(f'   Active: {"Yes" if config.is_active else "No"}')
+        
+        self.stdout.write(self.style.MIGRATE_HEADING('\n' + '=' * 70))
+        self.stdout.write('Next steps:')
+        self.stdout.write('1. Test the connection:')
+        self.stdout.write(f'   python manage.py test_his_connection --config "{config.name}"')
+        self.stdout.write('2. Manually fetch surveys:')
+        self.stdout.write('   python manage.py fetch_his_surveys --test')
+        self.stdout.write('3. The automated task will run every 5 minutes via Celery Beat')
+        self.stdout.write('=' * 70)
diff --git a/apps/integrations/management/commands/test_his_connection.py b/apps/integrations/management/commands/test_his_connection.py
new file mode 100644
index 0000000..a846959
--- /dev/null
+++ b/apps/integrations/management/commands/test_his_connection.py
@@ -0,0 +1,123 @@
+"""
+Management command to test HIS connection.
+
+Usage:
+    python manage.py test_his_connection [--config ID]
+
+Options:
+    --config ID  Test specific configuration by ID
+"""
+from django.core.management.base import BaseCommand
+
+from apps.integrations.models import IntegrationConfig, SourceSystem
+from apps.integrations.services.his_client import HISClient
+
+
+class Command(BaseCommand):
+    help = 'Test connectivity to HIS system'
+
+    def add_arguments(self, parser):
+        parser.add_argument(
+            '--config',
+            type=str,
+            help='Configuration ID or name to test (optional)'
+        )
+        parser.add_argument(
+            '--all',
+            action='store_true',
+            help='Test all active configurations'
+        )
+
+    def handle(self, *args, **options):
+        config_id = options.get('config')
+        test_all = options.get('all')
+
+        self.stdout.write(self.style.MIGRATE_HEADING('=' * 70))
+        self.stdout.write(self.style.MIGRATE_HEADING('HIS Connection Test'))
+        self.stdout.write(self.style.MIGRATE_HEADING('=' * 70))
+
+        configs = []
+        
+        if config_id:
+            # Try to find by ID first, then by name
+            config = IntegrationConfig.objects.filter(
+                id=config_id,
+                source_system=SourceSystem.HIS
+            ).first()
+            
+            if not config:
+                config = IntegrationConfig.objects.filter(
+                    name__icontains=config_id,
+                    source_system=SourceSystem.HIS
+                ).first()
+            
+            if config:
+                configs = [config]
+            else:
+                self.stdout.write(
+                    self.style.ERROR(f'Configuration "{config_id}" not found')
+                )
+                return
+        
+        elif test_all:
+            configs = list(IntegrationConfig.objects.filter(
+                source_system=SourceSystem.HIS,
+                is_active=True
+            ))
+        
+        else:
+            # Test default (first active)
+            config = IntegrationConfig.objects.filter(
+                source_system=SourceSystem.HIS,
+                is_active=True
+            ).first()
+            
+            if config:
+                configs = [config]
+            else:
+                # Try with no config (fallback)
+                self.stdout.write(
+                    self.style.WARNING('No active HIS configurations found. Testing fallback...')
+                )
+                configs = [None]
+        
+        if not configs:
+            self.stdout.write(
+                self.style.ERROR('No configurations to test')
+            )
+            return
+        
+        all_passed = True
+        
+        for config in configs:
+            if config:
+                self.stdout.write(
+                    self.style.MIGRATE_HEADING(f'\n📡 Testing: {config.name}')
+                )
+                self.stdout.write(f'   API URL: {config.api_url or "Not set"}')
+                self.stdout.write(f'   API Key: {"✓ Set" if config.api_key else "✗ Not set"}')
+                client = HISClient(config)
+            else:
+                self.stdout.write(
+                    self.style.MIGRATE_HEADING('\n📡 Testing: Fallback (no config)')
+                )
+                client = HISClient()
+            
+            self.stdout.write('   Connecting...', ending=' ')
+            
+            result = client.test_connection()
+            
+            if result['success']:
+                self.stdout.write(self.style.SUCCESS('✓ Success'))
+                self.stdout.write(f'   Message: {result["message"]}')
+            else:
+                self.stdout.write(self.style.ERROR('✗ Failed'))
+                self.stdout.write(f'   Error: {result["message"]}')
+                all_passed = False
+        
+        self.stdout.write(self.style.MIGRATE_HEADING('\n' + '=' * 70))
+        
+        if all_passed:
+            self.stdout.write(self.style.SUCCESS('All connection tests passed!'))
+        else:
+            self.stdout.write(self.style.ERROR('Some connection tests failed'))
diff --git a/apps/integrations/services/__init__.py b/apps/integrations/services/__init__.py
index b70a068..1d3bad5 100644
--- a/apps/integrations/services/__init__.py
+++ b/apps/integrations/services/__init__.py
@@ -1,3 +1,7 @@
 """
 Integrations services package
-"""
\ No newline at end of file
+"""
+from .his_adapter import HISAdapter
+from .his_client import HISClient, HISClientFactory
+
+__all__ = ['HISAdapter', 'HISClient', 'HISClientFactory']
diff --git a/apps/integrations/services/his_client.py b/apps/integrations/services/his_client.py
new file mode 100644
index 0000000..23e989e
--- /dev/null
+++ b/apps/integrations/services/his_client.py
@@ -0,0 +1,408 @@
+"""
+HIS Client Service - Fetches patient data from external HIS systems
+
+This service provides a client to fetch patient survey data from
+Hospital Information Systems (HIS) via their APIs.
+"""
+
+import logging
+import os
+from datetime import datetime, timedelta
+from typing import Dict, List, Optional
+from urllib.parse import quote
+
+import requests
+from django.utils import timezone
+
+from apps.integrations.models import IntegrationConfig, SourceSystem
+
+logger = logging.getLogger("apps.integrations")
+
+
+class HISClient:
+    """
+    Client for fetching patient data from HIS systems.
+
+    This client connects to external HIS APIs and retrieves
+    patient demographic and visit data for survey processing.
+    """
+
+    def __init__(self, config: Optional[IntegrationConfig] = None):
+        """
+        Initialize HIS client.
+
+        Args:
+            config: IntegrationConfig instance. If None, will try to load
+                   active HIS configuration from database.
+        """
+        self.config = config or self._get_default_config()
+        self.session = requests.Session()
+
+        # Load credentials from environment if no config
+        self.username = os.getenv("HIS_API_USERNAME", "")
+        self.password = os.getenv("HIS_API_PASSWORD", "")
+
+    def _get_default_config(self) -> Optional[IntegrationConfig]:
+        """Get default active HIS configuration from database."""
+        try:
+            return IntegrationConfig.objects.filter(source_system=SourceSystem.HIS, is_active=True).first()
+        except Exception as e:
+            logger.error(f"Error loading HIS configuration: {e}")
+            return None
+
+    def _get_headers(self) -> Dict[str, str]:
+        """Get request headers with authentication."""
+        headers = {
+            "Content-Type": "application/json",
+            "Accept": "application/json",
+        }
+
+        # Support for API key if configured
+        if self.config and self.config.api_key:
+            headers["X-API-Key"] = self.config.api_key
+            headers["Authorization"] = f"Bearer {self.config.api_key}"
+
+        return headers
+
+    def _get_api_url(self) -> Optional[str]:
+        """Get API URL from configuration or environment."""
+        if not self.config:
+            # Fallback to environment variable
+            return os.getenv("HIS_API_URL", "")
+        return self.config.api_url
+
+    def _get_auth(self) -> Optional[tuple]:
+        """Get Basic Auth credentials."""
+        if self.username and self.password:
+            return (self.username, self.password)
+        return None
+
+    def fetch_patients(
+        self, since: Optional[datetime] = None, patient_type: Optional[str] = None, limit: int = 100
+    ) -> List[Dict]:
+        """
+        Fetch patients from HIS system.
+
+        Args:
+            since: Only fetch patients updated since this datetime
+            patient_type: Filter by patient type (1=Inpatient, 2=OPD, 3=EMS)
+            limit: Maximum number of patients to fetch
+
+        Returns:
+            List of patient data dictionaries in HIS format
+        """
+        api_url = self._get_api_url()
+        if not api_url:
+            logger.error("No HIS API URL configured")
+            return []
+
+        try:
+            # Build URL with query parameters for the new endpoint format
+            if since:
+                # Calculate end time (5 minutes window since this runs every 5 minutes)
+                end_time = since + timedelta(minutes=5)
+
+                # Format dates for HIS API: DD-Mon-YYYY HH:MM:SS
+                from_date = self._format_datetime(since)
+                to_date = self._format_datetime(end_time)
+
+                # Build URL with parameters (SSN=0 and MobileNo=0 to get all)
+                url = f"{api_url}?FromDate={quote(from_date)}&ToDate={quote(to_date)}&SSN=0&MobileNo=0"
+            else:
+                # If no since time, use last 10 minutes as default
+                end_time = timezone.now()
+                start_time = end_time - timedelta(minutes=10)
+
+                from_date = self._format_datetime(start_time)
+                to_date = self._format_datetime(end_time)
+
+                url = f"{api_url}?FromDate={quote(from_date)}&ToDate={quote(to_date)}&SSN=0&MobileNo=0"
+
+            logger.info(f"Fetching patients from HIS: {url}")
+
+            # Make request with Basic Auth
+            response = self.session.get(
+                url,
+                headers=self._get_headers(),
+                auth=self._get_auth(),
+                timeout=30,
+                verify=True,  # Set to False if SSL certificate issues
+            )
+            response.raise_for_status()
+
+            # Parse response
+            data = response.json()
+
+            # Handle different response formats
+            if isinstance(data, list):
+                patients = data
+            elif isinstance(data, dict):
+                patients = data.get("FetchPatientDataTimeStampList", [])
+                # Alternative formats
+                if not patients:
+                    patients = data.get("patients", [])
+                if not patients:
+                    patients = data.get("data", [])
+            else:
+                patients = []
+
+            logger.info(f"Fetched {len(patients)} patients from HIS")
+            return patients
+
+        except requests.exceptions.RequestException as e:
+            logger.error(f"Error fetching patients from HIS: {e}")
+            return []
+        except Exception as e:
+            logger.error(f"Unexpected error fetching patients: {e}")
+            return []
+
+        # Build query parameters
+        params = {"limit": limit}
+
+        if since:
+            # Format: DD-Mon-YYYY HH:MM (HIS format)
+            params["since"] = self._format_datetime(since)
+
+        if patient_type:
+            params["patient_type"] = patient_type
+
+        # Additional config params from IntegrationConfig
+        if self.config and self.config.config_json:
+            config_params = self.config.config_json.get("fetch_params", {})
+            params.update(config_params)
+
+        try:
+            logger.info(f"Fetching patients from HIS: {api_url}")
+
+            response = self.session.get(api_url, headers=self._get_headers(), params=params, timeout=30)
+            response.raise_for_status()
+
+            data = response.json()
+
+            # Handle different response formats
+            if isinstance(data, list):
+                patients = data
+            elif isinstance(data, dict):
+                # Standard HIS format
+                patients = data.get("FetchPatientDataTimeStampList", [])
+                # Alternative formats
+                if not patients:
+                    patients = data.get("patients", [])
+                if not patients:
+                    patients = data.get("data", [])
+            else:
+                patients = []
+
+            logger.info(f"Fetched {len(patients)} patients from HIS")
+            return patients
+
+        except requests.exceptions.RequestException as e:
+            logger.error(f"Error fetching patients from HIS: {e}")
+            return []
+        except Exception as e:
+            logger.error(f"Unexpected error fetching patients: {e}")
+            return []
+
+    def fetch_discharged_patients(self, since: Optional[datetime] = None, limit: int = 100) -> List[Dict]:
+        """
+        Fetch discharged patients who need surveys.
+
+        This is the main method for survey fetching - only discharged
+        patients are eligible for surveys.
+
+        Args:
+            since: Only fetch patients discharged since this datetime
+            limit: Maximum number of patients to fetch
+
+        Returns:
+            List of patient data dictionaries in HIS format
+        """
+        api_url = self._get_api_url()
+        if not api_url:
+            logger.error("No HIS API URL configured")
+            return []
+
+        try:
+            # Build URL with query parameters for the new endpoint format
+            if since:
+                # Calculate end time (5 minutes window since this runs every 5 minutes)
+                end_time = since + timedelta(minutes=5)
+
+                # Format dates for HIS API: DD-Mon-YYYY HH:MM:SS
+                from_date = self._format_datetime(since)
+                to_date = self._format_datetime(end_time)
+
+                # Build URL with parameters (SSN=0 and MobileNo=0 to get all)
+                url = f"{api_url}?FromDate={quote(from_date)}&ToDate={quote(to_date)}&SSN=0&MobileNo=0"
+            else:
+                # If no since time, use last 10 minutes as default
+                end_time = timezone.now()
+                start_time = end_time - timedelta(minutes=10)
+
+                from_date = self._format_datetime(start_time)
+                to_date = self._format_datetime(end_time)
+
+                url = f"{api_url}?FromDate={quote(from_date)}&ToDate={quote(to_date)}&SSN=0&MobileNo=0"
+
+            logger.info(f"Fetching discharged patients from HIS: {url}")
+
+            # Make request with Basic Auth
+            response = self.session.get(
+                url,
+                headers=self._get_headers(),
+                auth=self._get_auth(),
+                timeout=30,
+                verify=True,  # Set to False if SSL certificate issues
+            )
+            response.raise_for_status()
+
+            data = response.json()
+
+            # Parse response
+            if isinstance(data, list):
+                patients = data
+            elif isinstance(data, dict):
+                patients = data.get("FetchPatientDataTimeStampList", [])
+                if not patients:
+                    patients = data.get("patients", [])
+                if not patients:
+                    patients = data.get("data", [])
+            else:
+                patients = []
+
+            # Filter only discharged patients
+            discharged = [
+                p
+                for p in patients
+                if p.get("DischargeDate")
+                or (isinstance(p, dict) and p.get("FetchPatientDataTimeStampList", [{}])[0].get("DischargeDate"))
+            ]
+
+            logger.info(f"Fetched {len(discharged)} discharged patients from HIS")
+            return discharged
+
+        except requests.exceptions.RequestException as e:
+            logger.error(f"Error fetching discharged patients: {e}")
+            return []
+
+    def fetch_patient_visits(self, patient_id: str) -> List[Dict]:
+        """
+        Fetch visit data for a specific patient.
+
+        Args:
+            patient_id: Patient ID from HIS
+
+        Returns:
+            List of visit data dictionaries
+        """
+        api_url = self._get_api_url()
+        if not api_url:
+            return []
+
+        visits_endpoint = f"{api_url.rstrip('/')}/{patient_id}/visits"
+
+        try:
+            response = self.session.get(visits_endpoint, headers=self._get_headers(), timeout=30)
+            response.raise_for_status()
+
+            data = response.json()
+
+            if isinstance(data, list):
+                return data
+            elif isinstance(data, dict):
+                return data.get("FetchPatientDataTimeStampVisitDataList", [])
+            return []
+
+        except requests.exceptions.RequestException as e:
+            logger.error(f"Error fetching visits for patient {patient_id}: {e}")
+            return []
+
+    def test_connection(self) -> Dict:
+        """
+        Test connectivity to HIS system.
+
+        Returns:
+            Dict with 'success' boolean and 'message' string
+        """
+        api_url = self._get_api_url()
+        if not api_url:
+            return {"success": False, "message": "No API URL configured"}
+
+        try:
+            # Try to fetch patients for last 1 minute as a test
+            end_time = timezone.now()
+            start_time = end_time - timedelta(minutes=1)
+
+            from_date = self._format_datetime(start_time)
+            to_date = self._format_datetime(end_time)
+
+            url = f"{api_url}?FromDate={quote(from_date)}&ToDate={quote(to_date)}&SSN=0&MobileNo=0"
+
+            response = self.session.get(
+                url, headers=self._get_headers(), auth=self._get_auth(), timeout=10, verify=True
+            )
+
+            if response.status_code == 200:
+                return {
+                    "success": True,
+                    "message": "Successfully connected to HIS",
+                    "config_name": self.config.name if self.config else "Default",
+                }
+            else:
+                return {"success": False, "message": f"HIS returned status {response.status_code}"}
+
+        except requests.exceptions.ConnectionError:
+            return {"success": False, "message": "Could not connect to HIS server"}
+        except requests.exceptions.Timeout:
+            return {"success": False, "message": "Connection to HIS timed out"}
+        except Exception as e:
+            return {"success": False, "message": f"Error: {str(e)}"}
+
+    @staticmethod
+    def _format_datetime(dt: datetime) -> str:
+        """Format datetime for HIS API (DD-Mon-YYYY HH:MM:SS format)."""
+        months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+        return f"{dt.day:02d}-{months[dt.month - 1]}-{dt.year} {dt.hour:02d}:{dt.minute:02d}:{dt.second:02d}"
+
+
+class HISClientFactory:
+    """Factory for creating HIS clients."""
+
+    @staticmethod
+    def get_client(hospital_id: Optional[str] = None) -> HISClient:
+        """
+        Get HIS client for a specific hospital or default.
+
+        Args:
+            hospital_id: Optional hospital ID to get specific config
+
+        Returns:
+            HISClient instance
+        """
+        config = None
+
+        if hospital_id:
+            # Try to find config for specific hospital
+            try:
+                from apps.organizations.models import Hospital
+
+                hospital = Hospital.objects.filter(id=hospital_id).first()
+                if hospital:
+                    config = IntegrationConfig.objects.filter(
+                        source_system=SourceSystem.HIS, is_active=True, config_json__hospital_id=str(hospital.id)
+                    ).first()
+            except Exception:
+                pass
+
+        return HISClient(config)
+
+    @staticmethod
+    def get_all_active_clients() -> List[HISClient]:
+        """Get all active HIS clients for multi-hospital setups."""
+        configs = IntegrationConfig.objects.filter(source_system=SourceSystem.HIS, is_active=True)
+
+        if not configs.exists():
+            # Return default client with no config
+            return [HISClient()]
+
+        return [HISClient(config) for config in configs]
diff --git a/apps/integrations/tasks.py b/apps/integrations/tasks.py
index 2187ba8..12aa259 100644
--- a/apps/integrations/tasks.py
+++ b/apps/integrations/tasks.py
@@ -6,14 +6,16 @@ This module contains the core event processing logic that:
 2. Finds matching journey instances
 3. Completes journey stages
 4. Triggers survey creation
+5. Fetches surveys from HIS systems (every 5 minutes)
 """
+
 import logging
 
 from celery import shared_task
 from django.db import transaction
 from django.utils import timezone
 
-logger = logging.getLogger('apps.integrations')
+logger = logging.getLogger("apps.integrations")
 
 
 @shared_task(bind=True, max_retries=3)
@@ -49,25 +51,25 @@ def process_inbound_event(self, event_id):
         # Find journey instance by encounter_id
         try:
             journey_instance = PatientJourneyInstance.objects.select_related(
-                'journey_template', 'patient', 'hospital'
+                "journey_template", "patient", "hospital"
             ).get(encounter_id=event.encounter_id)
         except PatientJourneyInstance.DoesNotExist:
             error_msg = f"No journey instance found for encounter {event.encounter_id}"
             logger.warning(error_msg)
             event.mark_ignored(error_msg)
-            return {'status': 'ignored', 'reason': error_msg}
+            return {"status": "ignored", "reason": error_msg}
 
         # Find matching stage by trigger_event_code
         matching_stages = journey_instance.stage_instances.filter(
             stage_template__trigger_event_code=event.event_code,
-            status__in=[StageStatus.PENDING, StageStatus.IN_PROGRESS]
-        ).select_related('stage_template')
+            status__in=[StageStatus.PENDING, StageStatus.IN_PROGRESS],
+        ).select_related("stage_template")
 
         if not matching_stages.exists():
             error_msg = f"No pending stage found with trigger {event.event_code}"
             logger.warning(error_msg)
             event.mark_ignored(error_msg)
-            return {'status': 'ignored', 'reason': error_msg}
+            return {"status": "ignored", "reason": error_msg}
 
         # Get the first matching stage
         stage_instance = matching_stages.first()
@@ -78,101 +80,88 @@ def process_inbound_event(self, event_id):
 
         if event.physician_license:
             try:
-                staff = Staff.objects.get(
-                    license_number=event.physician_license,
-                    hospital=journey_instance.hospital
-                )
+                staff = Staff.objects.get(license_number=event.physician_license, hospital=journey_instance.hospital)
             except Staff.DoesNotExist:
                 logger.warning(f"Staff member not found with license: {event.physician_license}")
 
         if event.department_code:
             try:
-                department = Department.objects.get(
-                    code=event.department_code,
-                    hospital=journey_instance.hospital
-                )
+                department = Department.objects.get(code=event.department_code, hospital=journey_instance.hospital)
             except Department.DoesNotExist:
                 logger.warning(f"Department not found: {event.department_code}")
 
         # Complete the stage
         with transaction.atomic():
             success = stage_instance.complete(
-                event=event,
-                staff=staff,
-                department=department,
-                metadata=event.payload_json
+                event=event, staff=staff, department=department, metadata=event.payload_json
             )
 
             if success:
                 # Log stage completion
                 create_audit_log(
-                    event_type='stage_completed',
+                    event_type="stage_completed",
                     description=f"Stage {stage_instance.stage_template.name} completed for encounter {event.encounter_id}",
                     content_object=stage_instance,
                     metadata={
-                        'event_code': event.event_code,
-                        'stage_name': stage_instance.stage_template.name,
-                        'journey_type': journey_instance.journey_template.journey_type
-                    }
+                        "event_code": event.event_code,
+                        "stage_name": stage_instance.stage_template.name,
+                        "journey_type": journey_instance.journey_template.journey_type,
+                    },
                 )
 
                 # Check if this is a discharge event
-                if event.event_code.upper() == 'PATIENT_DISCHARGED':
+                if event.event_code.upper() == "PATIENT_DISCHARGED":
                     logger.info(f"Discharge event received for encounter {event.encounter_id}")
-                    
+
                     # Mark journey as completed
-                    journey_instance.status = 'completed'
+                    journey_instance.status = "completed"
                     journey_instance.completed_at = timezone.now()
                     journey_instance.save()
-                    
+
                     # Check if post-discharge survey is enabled
                     if journey_instance.journey_template.send_post_discharge_survey:
                         logger.info(
                             f"Post-discharge survey enabled for journey {journey_instance.id}. "
                             f"Will send in {journey_instance.journey_template.post_discharge_survey_delay_hours} hour(s)"
                         )
-                        
+
                         # Queue post-discharge survey creation task with delay
                         from apps.surveys.tasks import create_post_discharge_survey
+
                         delay_hours = journey_instance.journey_template.post_discharge_survey_delay_hours
                         delay_seconds = delay_hours * 3600
-                        
+
                         create_post_discharge_survey.apply_async(
-                            args=[str(journey_instance.id)],
-                            countdown=delay_seconds
+                            args=[str(journey_instance.id)], countdown=delay_seconds
                         )
-                        
+
                         logger.info(
-                            f"Queued post-discharge survey for journey {journey_instance.id} "
-                            f"(delay: {delay_hours}h)"
+                            f"Queued post-discharge survey for journey {journey_instance.id} (delay: {delay_hours}h)"
                         )
                     else:
-                        logger.info(
-                            f"Post-discharge survey disabled for journey {journey_instance.id}"
-                        )
+                        logger.info(f"Post-discharge survey disabled for journey {journey_instance.id}")
 
                 # Mark event as processed
                 event.mark_processed()
 
                 logger.info(
-                    f"Successfully processed event {event.id}: "
-                    f"Completed stage {stage_instance.stage_template.name}"
+                    f"Successfully processed event {event.id}: Completed stage {stage_instance.stage_template.name}"
                 )
 
                 return {
-                    'status': 'processed',
-                    'stage_completed': stage_instance.stage_template.name,
-                    'journey_completion': journey_instance.get_completion_percentage()
+                    "status": "processed",
+                    "stage_completed": stage_instance.stage_template.name,
+                    "journey_completion": journey_instance.get_completion_percentage(),
                 }
             else:
                 error_msg = "Failed to complete stage"
                 event.mark_failed(error_msg)
-                return {'status': 'failed', 'reason': error_msg}
+                return {"status": "failed", "reason": error_msg}
 
     except InboundEvent.DoesNotExist:
         error_msg = f"Event {event_id} not found"
         logger.error(error_msg)
-        return {'status': 'error', 'reason': error_msg}
+        return {"status": "error", "reason": error_msg}
 
     except Exception as e:
         error_msg = f"Error processing event: {str(e)}"
@@ -197,9 +186,9 @@ def process_pending_events():
     """
     from apps.integrations.models import InboundEvent
 
-    pending_events = InboundEvent.objects.filter(
-        status='pending'
-    ).order_by('received_at')[:100]  # Process max 100 at a time
+    pending_events = InboundEvent.objects.filter(status="pending").order_by("received_at")[
+        :100
+    ]  # Process max 100 at a time
 
     processed_count = 0
 
@@ -211,4 +200,245 @@ def process_pending_events():
     if processed_count > 0:
         logger.info(f"Queued {processed_count} pending events for processing")
 
-    return {'queued': processed_count}
+    return {"queued": processed_count}
+
+
+# =============================================================================
+# HIS Survey Fetching Tasks
+# =============================================================================
+
+
+@shared_task
+def fetch_his_surveys():
+    """
+    Periodic task to fetch surveys from HIS system every 5 minutes.
+
+    This task:
+    1. Connects to configured HIS API endpoints
+    2. Fetches discharged patients for the last 5-minute window
+    3. Processes each patient using HISAdapter
+    4. Creates and sends surveys via SMS
+
+    Scheduled to run every 5 minutes via Celery Beat.
+
+    Returns:
+        dict: Summary of fetched and processed surveys
+    """
+    from datetime import timedelta
+
+    from apps.integrations.models import IntegrationConfig, SourceSystem
+    from apps.integrations.services.his_adapter import HISAdapter
+    from apps.integrations.services.his_client import HISClient, HISClientFactory
+
+    logger.info("Starting HIS survey fetch task")
+
+    result = {
+        "success": False,
+        "clients_processed": 0,
+        "patients_fetched": 0,
+        "surveys_created": 0,
+        "surveys_sent": 0,
+        "errors": [],
+        "details": [],
+    }
+
+    try:
+        # Get all active HIS clients
+        clients = HISClientFactory.get_all_active_clients()
+
+        if not clients:
+            msg = "No active HIS configurations found"
+            logger.warning(msg)
+            result["errors"].append(msg)
+            return result
+
+        # Calculate fetch window (last 5 minutes)
+        # This ensures we don't miss any patients due to timing issues
+        fetch_since = timezone.now() - timedelta(minutes=5)
+
+        logger.info(f"Fetching discharged patients since {fetch_since}")
+
+        for client in clients:
+            client_result = {
+                "config": client.config.name if client.config else "Default",
+                "patients_fetched": 0,
+                "surveys_created": 0,
+                "surveys_sent": 0,
+                "errors": [],
+            }
+
+            try:
+                # Test connection first
+                connection_test = client.test_connection()
+                if not connection_test["success"]:
+                    error_msg = f"HIS connection failed for {client_result['config']}: {connection_test['message']}"
+                    logger.error(error_msg)
+                    client_result["errors"].append(error_msg)
+                    result["details"].append(client_result)
+                    continue
+
+                logger.info(f"Fetching discharged patients from {client_result['config']} since {fetch_since}")
+
+                # Fetch discharged patients for the 5-minute window
+                patients = client.fetch_discharged_patients(
+                    since=fetch_since,
+                    limit=100,  # Max 100 patients per fetch
+                )
+
+                client_result["patients_fetched"] = len(patients)
+                result["patients_fetched"] += len(patients)
+
+                if not patients:
+                    logger.info(f"No new discharged patients found in {client_result['config']}")
+                    result["details"].append(client_result)
+                    continue
+
+                logger.info(f"Fetched {len(patients)} patients from {client_result['config']}")
+
+                # Process each patient
+                for patient_data in patients:
+                    try:
+                        # Ensure patient data is in proper HIS format
+                        if isinstance(patient_data, dict):
+                            if "FetchPatientDataTimeStampList" not in patient_data:
+                                # Wrap in proper format if needed
+                                patient_data = {
+                                    "FetchPatientDataTimeStampList": [patient_data],
+                                    "FetchPatientDataTimeStampVisitDataList": [],
+                                    "Code": 200,
+                                    "Status": "Success",
+                                }
+
+                        # Process using HISAdapter
+                        process_result = HISAdapter.process_his_data(patient_data)
+
+                        if process_result["success"]:
+                            client_result["surveys_created"] += 1
+                            result["surveys_created"] += 1
+
+                            if process_result.get("survey_sent"):
+                                client_result["surveys_sent"] += 1
+                                result["surveys_sent"] += 1
+                        else:
+                            error_msg = f"Failed to process patient: {process_result.get('message', 'Unknown error')}"
+                            logger.warning(error_msg)
+                            client_result["errors"].append(error_msg)
+
+                    except Exception as e:
+                        error_msg = f"Error processing patient data: {str(e)}"
+                        logger.error(error_msg, exc_info=True)
+                        client_result["errors"].append(error_msg)
+
+                # Update last sync timestamp
+                if client.config:
+                    client.config.last_sync_at = timezone.now()
+                    client.config.save(update_fields=["last_sync_at"])
+
+                result["clients_processed"] += 1
+
+            except Exception as e:
+                error_msg = f"Error processing HIS client {client_result['config']}: {str(e)}"
+                logger.error(error_msg, exc_info=True)
+                client_result["errors"].append(error_msg)
+
+            result["details"].append(client_result)
+
+        result["success"] = True
+
+        logger.info(
+            f"HIS survey fetch completed: {result['clients_processed']} clients, "
+            f"{result['patients_fetched']} patients, "
+            f"{result['surveys_created']} surveys created, "
+            f"{result['surveys_sent']} surveys sent"
+        )
+
+    except Exception as e:
+        error_msg = f"Fatal error in fetch_his_surveys task: {str(e)}"
+        logger.error(error_msg, exc_info=True)
+        result["errors"].append(error_msg)
+
+    return result
+
+
+@shared_task
+def test_his_connection(config_id=None):
+    """
+    Test connectivity to HIS system.
+
+    Args:
+        config_id: Optional IntegrationConfig ID. If not provided,
+                  tests the default HIS configuration.
+
+    Returns:
+        dict: Connection test results
+    """
+    from apps.integrations.models import IntegrationConfig, SourceSystem
+    from apps.integrations.services.his_client import HISClient
+
+    logger.info(f"Testing HIS connection for config_id={config_id}")
+
+    try:
+        if config_id:
+            config = IntegrationConfig.objects.filter(id=config_id, source_system=SourceSystem.HIS).first()
+            if not config:
+                return {"success": False, "message": f"HIS configuration with ID {config_id} not found"}
+            client = HISClient(config)
+        else:
+            client = HISClient()
+
+        result = client.test_connection()
+        logger.info(f"HIS connection test result: {result}")
+        return result
+
+    except Exception as e:
+        error_msg = f"Error testing HIS connection: {str(e)}"
+        logger.error(error_msg, exc_info=True)
+        return {"success": False, "message": error_msg}
+
+
+@shared_task
+def sync_his_survey_mappings():
+    """
+    Sync survey template mappings from HIS system.
+
+    This task can be scheduled periodically to sync any mapping
+    configurations from the HIS system.
+
+    Returns:
+        dict: Sync results
+    """
+    from apps.integrations.models import SurveyTemplateMapping
+    from apps.organizations.models import Hospital
+
+    logger.info("Starting HIS survey mappings sync")
+
+    result = {"success": True, "mappings_synced": 0, "errors": []}
+
+    try:
+        # Get all active mappings
+        mappings = SurveyTemplateMapping.objects.filter(is_active=True)
+
+        for mapping in mappings:
+            try:
+                # Validate mapping
+                if not mapping.survey_template:
+                    result["errors"].append(f"Mapping {mapping.id} has no survey template")
+                    continue
+
+                # Additional sync logic can be added here
+                # e.g., fetching updated mapping rules from HIS
+
+                result["mappings_synced"] += 1
+
+            except Exception as e:
+                result["errors"].append(f"Error syncing mapping {mapping.id}: {str(e)}")
+
+        logger.info(f"HIS survey mappings sync completed: {result['mappings_synced']} mappings")
+
+    except Exception as e:
+        error_msg = f"Error syncing HIS mappings: {str(e)}"
+        logger.error(error_msg, exc_info=True)
+        result["success"] = False
+        result["errors"].append(error_msg)
+
+    return result
diff --git a/apps/observations/views.py b/apps/observations/views.py
index af6b680..b78a206 100644
--- a/apps/observations/views.py
+++ b/apps/observations/views.py
@@ -171,8 +171,16 @@ def observation_list(request):
     
     # Apply RBAC filters
     user = request.user
+    # Get selected hospital for PX Admins (from middleware)
+    selected_hospital = getattr(request, 'tenant_hospital', None)
+    
     if user.is_px_admin():
-        pass  # See all
+        # PX Admins see all, but filter by selected hospital if set
+        if selected_hospital:
+            queryset = queryset.filter(
+                Q(assigned_department__hospital=selected_hospital) |
+                Q(assigned_department__isnull=True)
+            )
     elif user.is_hospital_admin() and user.hospital:
         queryset = queryset.filter(
             Q(assigned_department__hospital=user.hospital) |
diff --git a/apps/organizations/admin.py b/apps/organizations/admin.py
index 400ea8b..b9d4896 100644
--- a/apps/organizations/admin.py
+++ b/apps/organizations/admin.py
@@ -71,7 +71,7 @@ class DepartmentAdmin(admin.ModelAdmin):
 @admin.register(Staff)
 class StaffAdmin(admin.ModelAdmin):
     """Staff admin"""
-    list_display = ['__str__', 'staff_type', 'job_title', 'employee_id', 'hospital', 'department', 'phone', 'report_to', 'country', 'has_user_account', 'status']
+    list_display = ['__str__', 'staff_type', 'job_title', 'employee_id', 'hospital', 'department', 'email','phone', 'report_to', 'country', 'has_user_account', 'status']
     list_filter = ['status', 'hospital', 'staff_type', 'specialization', 'gender', 'country']
     search_fields = ['name', 'first_name', 'last_name', 'first_name_ar', 'last_name_ar', 'employee_id', 'license_number', 'job_title', 'phone', 'department_name', 'section']
     ordering = ['last_name', 'first_name']
diff --git a/apps/organizations/models.py b/apps/organizations/models.py
index 2b14304..9935f67 100644
--- a/apps/organizations/models.py
+++ b/apps/organizations/models.py
@@ -162,7 +162,7 @@ class Department(UUIDModel, TimeStampedModel):
         unique_together = [['hospital', 'code']]
 
     def __str__(self):
-        return f"{self.hospital.name} - {self.name}"
+        return f"{self.name}"
 
 
 class Staff(UUIDModel, TimeStampedModel):
diff --git a/apps/organizations/ui_views.py b/apps/organizations/ui_views.py
index 4088b90..c802ba5 100644
--- a/apps/organizations/ui_views.py
+++ b/apps/organizations/ui_views.py
@@ -4,10 +4,13 @@ from django.db.models import Q
 from django.shortcuts import render, redirect, get_object_or_404
 from django.contrib import messages
 
+from apps.core.decorators import block_source_user, hospital_admin_required
+
 from .models import Department, Hospital, Organization, Patient, Staff, StaffSection, StaffSubsection
 from .forms import StaffForm
 
 
+@block_source_user
 @login_required
 def hospital_list(request):
     """Hospitals list view"""
@@ -50,6 +53,7 @@ def hospital_list(request):
     return render(request, 'organizations/hospital_list.html', context)
 
 
+@block_source_user
 @login_required
 def department_list(request):
     """Departments list view"""
@@ -102,6 +106,7 @@ def department_list(request):
     return render(request, 'organizations/department_list.html', context)
 
 
+@block_source_user
 @login_required
 def staff_list(request):
     """Staff list view - filtered by tenant hospital"""
@@ -192,6 +197,7 @@ def staff_list(request):
     return render(request, 'organizations/staff_list.html', context)
 
 
+@block_source_user
 @login_required
 def organization_list(request):
     """Organizations list view"""
@@ -239,6 +245,7 @@ def organization_list(request):
     return render(request, 'organizations/organization_list.html', context)
 
 
+@block_source_user
 @login_required
 def organization_detail(request, pk):
     """Organization detail view"""
@@ -266,6 +273,7 @@ def organization_detail(request, pk):
     return render(request, 'organizations/organization_detail.html', context)
 
 
+@block_source_user
 @login_required
 def organization_create(request):
     """Create organization view"""
@@ -308,6 +316,7 @@ def organization_create(request):
     return render(request, 'organizations/organization_form.html')
 
 
+@block_source_user
 @login_required
 def patient_list(request):
     """Patients list view"""
@@ -362,6 +371,7 @@ def patient_list(request):
     return render(request, 'organizations/patient_list.html', context)
 
 
+@block_source_user
 @login_required
 def staff_detail(request, pk):
     """Staff detail view"""
@@ -380,6 +390,7 @@ def staff_detail(request, pk):
     return render(request, 'organizations/staff_detail.html', context)
 
 
+@block_source_user
 @login_required
 def staff_create(request):
     """Create staff view"""
@@ -442,6 +453,7 @@ def staff_create(request):
     return render(request, 'organizations/staff_form.html', context)
 
 
+@block_source_user
 @login_required
 def staff_update(request, pk):
     """Update staff view"""
@@ -499,6 +511,7 @@ def staff_update(request, pk):
     return render(request, 'organizations/staff_form.html', context)
 
 
+@block_source_user
 @login_required
 def staff_hierarchy(request):
     """
@@ -626,6 +639,7 @@ def staff_hierarchy(request):
     return render(request, 'organizations/staff_hierarchy.html', context)
 
 
+@block_source_user
 @login_required
 def staff_hierarchy_d3(request):
     """
@@ -647,6 +661,7 @@ def staff_hierarchy_d3(request):
 
 # ==================== Department CRUD ====================
 
+@block_source_user
 @login_required
 def department_create(request):
     """Create department view"""
@@ -696,6 +711,7 @@ def department_create(request):
     return render(request, 'organizations/department_form.html', context)
 
 
+@block_source_user
 @login_required
 def department_update(request, pk):
     """Update department view"""
@@ -729,6 +745,7 @@ def department_update(request, pk):
     return render(request, 'organizations/department_form.html', context)
 
 
+@block_source_user
 @login_required
 def department_delete(request, pk):
     """Delete department view"""
@@ -762,6 +779,7 @@ def department_delete(request, pk):
 
 # ==================== Staff Section CRUD ====================
 
+@block_source_user
 @login_required
 def section_list(request):
     """Sections list view"""
@@ -814,6 +832,7 @@ def section_list(request):
     return render(request, 'organizations/section_list.html', context)
 
 
+@block_source_user
 @login_required
 def section_create(request):
     """Create section view"""
@@ -860,6 +879,7 @@ def section_create(request):
     return render(request, 'organizations/section_form.html', context)
 
 
+@block_source_user
 @login_required
 def section_update(request, pk):
     """Update section view"""
@@ -898,6 +918,7 @@ def section_update(request, pk):
     return render(request, 'organizations/section_form.html', context)
 
 
+@block_source_user
 @login_required
 def section_delete(request, pk):
     """Delete section view"""
@@ -930,6 +951,7 @@ def section_delete(request, pk):
 
 # ==================== Staff Subsection CRUD ====================
 
+@block_source_user
 @login_required
 def subsection_list(request):
     """Subsections list view"""
@@ -989,6 +1011,7 @@ def subsection_list(request):
     return render(request, 'organizations/subsection_list.html', context)
 
 
+@block_source_user
 @login_required
 def subsection_create(request):
     """Create subsection view"""
@@ -1035,6 +1058,7 @@ def subsection_create(request):
     return render(request, 'organizations/subsection_form.html', context)
 
 
+@block_source_user
 @login_required
 def subsection_update(request, pk):
     """Update subsection view"""
@@ -1073,6 +1097,7 @@ def subsection_update(request, pk):
     return render(request, 'organizations/subsection_form.html', context)
 
 
+@block_source_user
 @login_required
 def subsection_delete(request, pk):
     """Delete subsection view"""
@@ -1099,6 +1124,7 @@ def subsection_delete(request, pk):
 
 
 
+@block_source_user
 @login_required
 def patient_detail(request, pk):
     """Patient detail view"""
@@ -1124,6 +1150,7 @@ def patient_detail(request, pk):
     return render(request, 'organizations/patient_detail.html', context)
 
 
+@block_source_user
 @login_required
 def patient_create(request):
     """Create patient view"""
@@ -1151,6 +1178,7 @@ def patient_create(request):
     return render(request, 'organizations/patient_form.html', context)
 
 
+@block_source_user
 @login_required
 def patient_update(request, pk):
     """Update patient view"""
@@ -1185,6 +1213,7 @@ def patient_update(request, pk):
     return render(request, 'organizations/patient_form.html', context)
 
 
+@block_source_user
 @login_required
 def patient_delete(request, pk):
     """Delete patient view"""
diff --git a/apps/organizations/views.py b/apps/organizations/views.py
index 3545302..d04146d 100644
--- a/apps/organizations/views.py
+++ b/apps/organizations/views.py
@@ -176,6 +176,10 @@ class StaffViewSet(viewsets.ModelViewSet):
         queryset = super().get_queryset().select_related('hospital', 'department', 'user')
         user = self.request.user
 
+        # Source Users don't have access to staff management
+        if user.is_source_user():
+            return queryset.none()
+
         # PX Admins see all staff
         if user.is_px_admin():
             return queryset
diff --git a/apps/physicians/forms.py b/apps/physicians/forms.py
index 9a59b78..79e7e79 100644
--- a/apps/physicians/forms.py
+++ b/apps/physicians/forms.py
@@ -6,11 +6,16 @@ Forms for doctor rating imports and filtering.
 from django import forms
 
 from apps.organizations.models import Hospital
+from apps.core.form_mixins import HospitalFieldMixin
 
 
-class DoctorRatingImportForm(forms.Form):
+class DoctorRatingImportForm(HospitalFieldMixin, forms.Form):
     """
     Form for importing doctor ratings from CSV.
+    
+    Hospital field visibility:
+    - PX Admins: See dropdown with all hospitals
+    - Others: Hidden field, auto-set to user's hospital
     """
     hospital = forms.ModelChoiceField(
         queryset=Hospital.objects.filter(status='active'),
@@ -32,18 +37,6 @@ class DoctorRatingImportForm(forms.Form):
         help_text="Number of rows to skip before the column headers (Doctor Rating Report typically has 6 header rows)"
     )
     
-    def __init__(self, user, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        
-        # Filter hospital choices based on user role
-        if user.is_px_admin():
-            self.fields['hospital'].queryset = Hospital.objects.filter(status='active')
-        elif user.hospital:
-            self.fields['hospital'].queryset = Hospital.objects.filter(id=user.hospital.id)
-            self.fields['hospital'].initial = user.hospital
-        else:
-            self.fields['hospital'].queryset = Hospital.objects.none()
-    
     def clean_csv_file(self):
         csv_file = self.cleaned_data['csv_file']
         
diff --git a/apps/physicians/import_views.py b/apps/physicians/import_views.py
index 881ab97..a13a7bb 100644
--- a/apps/physicians/import_views.py
+++ b/apps/physicians/import_views.py
@@ -51,7 +51,7 @@ def doctor_rating_import(request):
     session_key = f'doctor_rating_import_{user.id}'
     
     if request.method == 'POST':
-        form = DoctorRatingImportForm(user, request.POST, request.FILES)
+        form = DoctorRatingImportForm(request.POST, request.FILES, user=user)
         
         if form.is_valid():
             try:
@@ -215,7 +215,7 @@ def doctor_rating_import(request):
                 logger.error(f"Error processing Doctor Rating CSV: {str(e)}", exc_info=True)
                 messages.error(request, f"Error processing CSV: {str(e)}")
     else:
-        form = DoctorRatingImportForm(user)
+        form = DoctorRatingImportForm(user=user)
     
     context = {
         'form': form,
diff --git a/apps/projects/forms.py b/apps/projects/forms.py
new file mode 100644
index 0000000..0243ce3
--- /dev/null
+++ b/apps/projects/forms.py
@@ -0,0 +1,298 @@
+"""
+QI Projects Forms
+
+Forms for creating and managing Quality Improvement projects and tasks.
+"""
+from django import forms
+from django.utils.translation import gettext_lazy as _
+
+from apps.core.form_mixins import HospitalFieldMixin
+from apps.accounts.models import User
+from apps.organizations.models import Department, Hospital
+
+from .models import QIProject, QIProjectTask
+
+
+class QIProjectForm(HospitalFieldMixin, forms.ModelForm):
+    """
+    Form for creating and editing QI Projects.
+    
+    Hospital field visibility:
+    - PX Admins: See dropdown with all hospitals
+    - Others: Hidden field, auto-set to user's hospital
+    """
+    
+    class Meta:
+        model = QIProject
+        fields = [
+            'name', 'name_ar', 'description', 'hospital', 'department',
+            'project_lead', 'team_members', 'status',
+            'start_date', 'target_completion_date', 'outcome_description'
+        ]
+        widgets = {
+            'name': forms.TextInput(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+                'placeholder': _('Project name')
+            }),
+            'name_ar': forms.TextInput(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+                'placeholder': _('اسم المشروع'),
+                'dir': 'rtl'
+            }),
+            'description': forms.Textarea(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm resize-none',
+                'rows': 4,
+                'placeholder': _('Describe the project objectives and scope...')
+            }),
+            'hospital': forms.Select(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white'
+            }),
+            'department': forms.Select(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white'
+            }),
+            'project_lead': forms.Select(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white'
+            }),
+            'team_members': forms.SelectMultiple(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white h-40'
+            }),
+            'status': forms.Select(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white'
+            }),
+            'start_date': forms.DateInput(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+                'type': 'date'
+            }),
+            'target_completion_date': forms.DateInput(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+                'type': 'date'
+            }),
+            'outcome_description': forms.Textarea(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm resize-none',
+                'rows': 3,
+                'placeholder': _('Document project outcomes and results...')
+            }),
+        }
+    
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        
+        # Filter department choices based on hospital
+        hospital_id = None
+        if self.data.get('hospital'):
+            hospital_id = self.data.get('hospital')
+        elif self.initial.get('hospital'):
+            hospital_id = self.initial.get('hospital')
+        elif self.instance and self.instance.pk and self.instance.hospital:
+            hospital_id = self.instance.hospital.id
+        elif self.user and self.user.hospital:
+            hospital_id = self.user.hospital.id
+        
+        if hospital_id:
+            self.fields['department'].queryset = Department.objects.filter(
+                hospital_id=hospital_id,
+                status='active'
+            ).order_by('name')
+            
+            # Filter user choices based on hospital
+            self.fields['project_lead'].queryset = User.objects.filter(
+                hospital_id=hospital_id,
+                is_active=True
+            ).order_by('first_name', 'last_name')
+            
+            self.fields['team_members'].queryset = User.objects.filter(
+                hospital_id=hospital_id,
+                is_active=True
+            ).order_by('first_name', 'last_name')
+        else:
+            self.fields['department'].queryset = Department.objects.none()
+            self.fields['project_lead'].queryset = User.objects.none()
+            self.fields['team_members'].queryset = User.objects.none()
+
+
+class QIProjectTaskForm(forms.ModelForm):
+    """
+    Form for creating and editing QI Project tasks.
+    """
+    
+    class Meta:
+        model = QIProjectTask
+        fields = ['title', 'description', 'assigned_to', 'status', 'due_date', 'order']
+        widgets = {
+            'title': forms.TextInput(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+                'placeholder': _('Task title')
+            }),
+            'description': forms.Textarea(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm resize-none',
+                'rows': 3,
+                'placeholder': _('Task description...')
+            }),
+            'assigned_to': forms.Select(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white'
+            }),
+            'status': forms.Select(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white'
+            }),
+            'due_date': forms.DateInput(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+                'type': 'date'
+            }),
+            'order': forms.NumberInput(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+                'min': 0
+            }),
+        }
+    
+    def __init__(self, *args, **kwargs):
+        self.project = kwargs.pop('project', None)
+        super().__init__(*args, **kwargs)
+        
+        # Make order field not required (has default value of 0)
+        self.fields['order'].required = False
+        
+        # Filter assigned_to choices based on project hospital
+        if self.project and self.project.hospital:
+            self.fields['assigned_to'].queryset = User.objects.filter(
+                hospital=self.project.hospital,
+                is_active=True
+            ).order_by('first_name', 'last_name')
+        else:
+            self.fields['assigned_to'].queryset = User.objects.none()
+
+
+class QIProjectTemplateForm(HospitalFieldMixin, forms.ModelForm):
+    """
+    Form for creating and editing QI Project templates.
+    
+    Hospital field visibility:
+    - PX Admins: See dropdown with all hospitals
+    - Others: Hidden field, auto-set to user's hospital
+    
+    Templates can be:
+    - Global (hospital=None) - available to all
+    - Hospital-specific - available only to that hospital
+    """
+    
+    class Meta:
+        model = QIProject
+        fields = [
+            'name', 'name_ar', 'description', 'hospital',
+            'department', 'target_completion_date'
+        ]
+        widgets = {
+            'name': forms.TextInput(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+                'placeholder': _('Template name')
+            }),
+            'name_ar': forms.TextInput(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+                'placeholder': _('اسم القالب'),
+                'dir': 'rtl'
+            }),
+            'description': forms.Textarea(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm resize-none',
+                'rows': 4,
+                'placeholder': _('Describe the project template...')
+            }),
+            'hospital': forms.Select(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white'
+            }),
+            'department': forms.Select(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white'
+            }),
+            'target_completion_date': forms.DateInput(attrs={
+                'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+                'type': 'date'
+            }),
+        }
+    
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        
+        # Make hospital optional for templates (global templates)
+        self.fields['hospital'].required = False
+        self.fields['hospital'].empty_label = _('Global (All Hospitals)')
+        
+        # Filter department choices based on hospital
+        hospital_id = None
+        if self.data.get('hospital'):
+            hospital_id = self.data.get('hospital')
+        elif self.initial.get('hospital'):
+            hospital_id = self.initial.get('hospital')
+        elif self.instance and self.instance.pk and self.instance.hospital:
+            hospital_id = self.instance.hospital.id
+        
+        if hospital_id:
+            self.fields['department'].queryset = Department.objects.filter(
+                hospital_id=hospital_id,
+                status='active'
+            ).order_by('name')
+        else:
+            self.fields['department'].queryset = Department.objects.none()
+
+
+class ConvertToProjectForm(forms.Form):
+    """
+    Form for converting a PX Action to a QI Project.
+    Allows selecting a template and customizing the project details.
+    """
+    
+    template = forms.ModelChoiceField(
+        queryset=QIProject.objects.none(),
+        required=False,
+        empty_label=_('Blank Project'),
+        label=_('Project Template'),
+        widget=forms.Select(attrs={
+            'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white'
+        })
+    )
+    
+    project_name = forms.CharField(
+        max_length=200,
+        label=_('Project Name'),
+        widget=forms.TextInput(attrs={
+            'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+            'placeholder': _('Enter project name')
+        })
+    )
+    
+    project_lead = forms.ModelChoiceField(
+        queryset=User.objects.none(),
+        required=True,
+        label=_('Project Lead'),
+        widget=forms.Select(attrs={
+            'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm bg-white'
+        })
+    )
+    
+    target_completion_date = forms.DateField(
+        required=False,
+        label=_('Target Completion Date'),
+        widget=forms.DateInput(attrs={
+            'class': 'w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm',
+            'type': 'date'
+        })
+    )
+    
+    def __init__(self, *args, **kwargs):
+        self.user = kwargs.pop('user', None)
+        self.action = kwargs.pop('action', None)
+        super().__init__(*args, **kwargs)
+        
+        if self.user and self.user.hospital:
+            # Filter templates by hospital (or global)
+            from django.db.models import Q
+            self.fields['template'].queryset = QIProject.objects.filter(
+                Q(hospital=self.user.hospital) | Q(hospital__isnull=True),
+                status='template'  # We'll add this status or use metadata
+            ).order_by('name')
+            
+            # Filter project lead by hospital
+            self.fields['project_lead'].queryset = User.objects.filter(
+                hospital=self.user.hospital,
+                is_active=True
+            ).order_by('first_name', 'last_name')
+        else:
+            self.fields['template'].queryset = QIProject.objects.none()
+            self.fields['project_lead'].queryset = User.objects.none()
diff --git a/apps/projects/models.py b/apps/projects/models.py
index cf3752c..65724e6 100644
--- a/apps/projects/models.py
+++ b/apps/projects/models.py
@@ -17,16 +17,27 @@ class QIProject(UUIDModel, TimeStampedModel):
     Quality Improvement Project.
     
     Tracks improvement initiatives driven by PX feedback.
+    Can also serve as a template for creating new projects.
     """
     name = models.CharField(max_length=200)
     name_ar = models.CharField(max_length=200, blank=True)
     description = models.TextField()
     
+    # Template flag - if True, this is a template not an active project
+    is_template = models.BooleanField(
+        default=False,
+        db_index=True,
+        help_text="If True, this is a reusable template, not an active project"
+    )
+    
     # Organization
     hospital = models.ForeignKey(
         'organizations.Hospital',
         on_delete=models.CASCADE,
-        related_name='qi_projects'
+        related_name='qi_projects',
+        null=True,
+        blank=True,
+        help_text="Null for global templates available to all hospitals"
     )
     department = models.ForeignKey(
         'organizations.Department',
@@ -44,6 +55,15 @@ class QIProject(UUIDModel, TimeStampedModel):
         related_name='led_projects'
     )
     
+    # Creator
+    created_by = models.ForeignKey(
+        'accounts.User',
+        on_delete=models.SET_NULL,
+        null=True,
+        blank=True,
+        related_name='created_qi_projects'
+    )
+    
     # Team members
     team_members = models.ManyToManyField(
         'accounts.User',
@@ -86,9 +106,12 @@ class QIProject(UUIDModel, TimeStampedModel):
         ordering = ['-created_at']
         indexes = [
             models.Index(fields=['hospital', 'status', '-created_at']),
+            models.Index(fields=['is_template', 'hospital']),
         ]
     
     def __str__(self):
+        if self.is_template:
+            return f"[Template] {self.name}"
         return f"{self.name} ({self.status})"
 
 
diff --git a/apps/projects/ui_views.py b/apps/projects/ui_views.py
index 35a7a11..e086ce9 100644
--- a/apps/projects/ui_views.py
+++ b/apps/projects/ui_views.py
@@ -1,26 +1,43 @@
 """
 QI Projects Console UI views
+
+Provides full CRUD functionality for Quality Improvement projects,
+task management, and template handling.
 """
+from django.contrib import messages
 from django.contrib.auth.decorators import login_required
 from django.core.paginator import Paginator
 from django.db.models import Q
-from django.shortcuts import get_object_or_404, render
+from django.shortcuts import get_object_or_404, redirect, render
+from django.utils.translation import gettext_lazy as _
 
+from apps.core.decorators import block_source_user
 from apps.organizations.models import Hospital
+from apps.px_action_center.models import PXAction
 
-from .models import QIProject
+from .forms import ConvertToProjectForm, QIProjectForm, QIProjectTaskForm, QIProjectTemplateForm
+from .models import QIProject, QIProjectTask
 
 
+@block_source_user
 @login_required
 def project_list(request):
-    """QI Projects list view"""
-    queryset = QIProject.objects.select_related(
+    """QI Projects list view with filtering and pagination"""
+    # Exclude templates from the list
+    queryset = QIProject.objects.filter(is_template=False).select_related(
         'hospital', 'department', 'project_lead'
     ).prefetch_related('team_members', 'related_actions')
     
     # Apply RBAC filters
     user = request.user
-    if not user.is_px_admin() and user.hospital:
+    # Get selected hospital for PX Admins (from middleware)
+    selected_hospital = getattr(request, 'tenant_hospital', None)
+    
+    if user.is_px_admin():
+        # PX Admins see all, but filter by selected hospital if set
+        if selected_hospital:
+            queryset = queryset.filter(hospital=selected_hospital)
+    elif user.hospital:
         queryset = queryset.filter(hospital=user.hospital)
     
     # Apply filters
@@ -37,7 +54,8 @@ def project_list(request):
     if search_query:
         queryset = queryset.filter(
             Q(name__icontains=search_query) |
-            Q(description__icontains=search_query)
+            Q(description__icontains=search_query) |
+            Q(name_ar__icontains=search_query)
         )
     
     # Ordering
@@ -59,6 +77,7 @@ def project_list(request):
         'total': queryset.count(),
         'active': queryset.filter(status='active').count(),
         'completed': queryset.filter(status='completed').count(),
+        'pending': queryset.filter(status='pending').count(),
     }
     
     context = {
@@ -72,11 +91,12 @@ def project_list(request):
     return render(request, 'projects/project_list.html', context)
 
 
+@block_source_user
 @login_required
 def project_detail(request, pk):
-    """QI Project detail view"""
+    """QI Project detail view with task management"""
     project = get_object_or_404(
-        QIProject.objects.select_related(
+        QIProject.objects.filter(is_template=False).select_related(
             'hospital', 'department', 'project_lead'
         ).prefetch_related(
             'team_members', 'related_actions', 'tasks'
@@ -84,12 +104,629 @@ def project_detail(request, pk):
         pk=pk
     )
     
+    # Check permission
+    user = request.user
+    if not user.is_px_admin() and user.hospital and project.hospital != user.hospital:
+        messages.error(request, _("You don't have permission to view this project."))
+        return redirect('projects:project_list')
+    
     # Get tasks
-    tasks = project.tasks.all().order_by('order')
+    tasks = project.tasks.all().order_by('order', 'created_at')
+    
+    # Get related actions
+    related_actions = project.related_actions.all()
     
     context = {
         'project': project,
         'tasks': tasks,
+        'related_actions': related_actions,
+        'can_edit': user.is_px_admin() or user.is_hospital_admin or user.is_department_manager,
     }
     
     return render(request, 'projects/project_detail.html', context)
+
+
+@block_source_user
+@login_required
+def project_create(request, template_pk=None):
+    """Create a new QI Project"""
+    user = request.user
+    
+    # Check permission (PX Admin, Hospital Admin, or Department Manager)
+    if not (user.is_px_admin() or user.is_hospital_admin or user.is_department_manager):
+        messages.error(request, _("You don't have permission to create projects."))
+        return redirect('projects:project_list')
+    
+    # Check for template parameter (from URL or GET)
+    template_id = template_pk or request.GET.get('template')
+    initial_data = {}
+    template = None
+    
+    if template_id:
+        try:
+            template = QIProject.objects.get(pk=template_id, is_template=True)
+            initial_data = {
+                'name': template.name,
+                'name_ar': template.name_ar,
+                'description': template.description,
+                'department': template.department,
+                'target_completion_date': template.target_completion_date,
+            }
+            if not user.is_px_admin() and user.hospital:
+                initial_data['hospital'] = user.hospital
+        except QIProject.DoesNotExist:
+            pass
+    
+    # Check for PX Action parameter (convert action to project)
+    action_id = request.GET.get('action')
+    if action_id:
+        try:
+            action = PXAction.objects.get(pk=action_id)
+            initial_data['name'] = f"QI Project: {action.title}"
+            initial_data['description'] = action.description
+            if not user.is_px_admin() and user.hospital:
+                initial_data['hospital'] = user.hospital
+            else:
+                initial_data['hospital'] = action.hospital
+        except PXAction.DoesNotExist:
+            pass
+    
+    if request.method == 'POST':
+        form = QIProjectForm(request.POST, user=user)
+        
+        # Check for template in POST data (hidden field)
+        template_id_post = request.POST.get('template_id')
+        if template_id_post:
+            try:
+                template = QIProject.objects.get(pk=template_id_post, is_template=True)
+            except QIProject.DoesNotExist:
+                template = None
+        
+        if form.is_valid():
+            project = form.save(commit=False)
+            project.created_by = user
+            project.save()
+            form.save_m2m()  # Save many-to-many relationships
+            
+            # If created from template, copy tasks
+            task_count = 0
+            if template:
+                for template_task in template.tasks.all():
+                    QIProjectTask.objects.create(
+                        project=project,
+                        title=template_task.title,
+                        description=template_task.description,
+                        order=template_task.order,
+                        status='pending'
+                    )
+                    task_count += 1
+            
+            # If created from action, link it
+            if action_id:
+                try:
+                    action = PXAction.objects.get(pk=action_id)
+                    project.related_actions.add(action)
+                except PXAction.DoesNotExist:
+                    pass
+            
+            if template and task_count > 0:
+                messages.success(
+                    request, 
+                    _('QI Project created successfully with %(count)d task(s) from template.') % {'count': task_count}
+                )
+            else:
+                messages.success(request, _("QI Project created successfully."))
+            return redirect('projects:project_detail', pk=project.pk)
+    else:
+        form = QIProjectForm(user=user, initial=initial_data)
+    
+    context = {
+        'form': form,
+        'is_create': True,
+        'template': template,
+    }
+    
+    return render(request, 'projects/project_form.html', context)
+
+
+@block_source_user
+@login_required
+def project_edit(request, pk):
+    """Edit an existing QI Project"""
+    user = request.user
+    project = get_object_or_404(QIProject, pk=pk, is_template=False)
+    
+    # Check permission
+    if not user.is_px_admin() and user.hospital and project.hospital != user.hospital:
+        messages.error(request, _("You don't have permission to edit this project."))
+        return redirect('projects:project_list')
+    
+    # Check edit permission (PX Admin, Hospital Admin, or Department Manager)
+    if not (user.is_px_admin() or user.is_hospital_admin or user.is_department_manager):
+        messages.error(request, _("You don't have permission to edit projects."))
+        return redirect('projects:project_detail', pk=project.pk)
+    
+    if request.method == 'POST':
+        form = QIProjectForm(request.POST, instance=project, user=user)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("QI Project updated successfully."))
+            return redirect('projects:project_detail', pk=project.pk)
+    else:
+        form = QIProjectForm(instance=project, user=user)
+    
+    context = {
+        'form': form,
+        'project': project,
+        'is_create': False,
+    }
+    
+    return render(request, 'projects/project_form.html', context)
+
+
+@block_source_user
+@login_required
+def project_delete(request, pk):
+    """Delete a QI Project"""
+    user = request.user
+    project = get_object_or_404(QIProject, pk=pk, is_template=False)
+    
+    # Check permission (only PX Admin or Hospital Admin can delete)
+    if not (user.is_px_admin() or user.is_hospital_admin):
+        messages.error(request, _("You don't have permission to delete projects."))
+        return redirect('projects:project_detail', pk=project.pk)
+    
+    if not user.is_px_admin() and user.hospital and project.hospital != user.hospital:
+        messages.error(request, _("You don't have permission to delete this project."))
+        return redirect('projects:project_list')
+    
+    if request.method == 'POST':
+        project_name = project.name
+        project.delete()
+        messages.success(request, _('Project "%(name)s" deleted successfully.') % {'name': project_name})
+        return redirect('projects:project_list')
+    
+    context = {
+        'project': project,
+    }
+    
+    return render(request, 'projects/project_delete_confirm.html', context)
+
+
+@block_source_user
+@login_required
+def project_save_as_template(request, pk):
+    """Save an existing project and its tasks as a template"""
+    user = request.user
+    project = get_object_or_404(QIProject, pk=pk, is_template=False)
+    
+    # Check permission (only PX Admin or Hospital Admin can create templates)
+    if not (user.is_px_admin() or user.is_hospital_admin):
+        messages.error(request, _("You don't have permission to create templates."))
+        return redirect('projects:project_detail', pk=project.pk)
+    
+    # Check hospital access
+    if not user.is_px_admin() and user.hospital and project.hospital != user.hospital:
+        messages.error(request, _("You don't have permission to create templates from this project."))
+        return redirect('projects:project_list')
+    
+    if request.method == 'POST':
+        template_name = request.POST.get('template_name', '').strip()
+        template_description = request.POST.get('template_description', '').strip()
+        make_global = request.POST.get('make_global') == 'on'
+        
+        if not template_name:
+            messages.error(request, _('Please provide a template name.'))
+            return redirect('projects:project_save_as_template', pk=project.pk)
+        
+        # Create template from project
+        template = QIProject.objects.create(
+            name=template_name,
+            name_ar=template_name,  # Can be edited later
+            description=template_description or project.description,
+            is_template=True,
+            # If global, hospital is None; otherwise use project's hospital
+            hospital=None if make_global else project.hospital,
+            department=project.department,
+            status='pending',  # Default status for templates
+            created_by=user
+        )
+        
+        # Copy tasks from project to template
+        for task in project.tasks.all():
+            QIProjectTask.objects.create(
+                project=template,
+                title=task.title,
+                description=task.description,
+                order=task.order,
+                status='pending'  # Reset status for template
+            )
+        
+        messages.success(
+            request, 
+            _('Template "%(name)s" created successfully with %(count)d task(s).') % {
+                'name': template_name,
+                'count': project.tasks.count()
+            }
+        )
+        return redirect('projects:template_list')
+    
+    context = {
+        'project': project,
+        'suggested_name': f"Template: {project.name}",
+    }
+    
+    return render(request, 'projects/project_save_as_template.html', context)
+
+
+# =============================================================================
+# Task Management Views
+# =============================================================================
+
+@block_source_user
+@login_required
+def task_create(request, project_pk):
+    """Add a new task to a project"""
+    user = request.user
+    project = get_object_or_404(QIProject, pk=project_pk, is_template=False)
+    
+    # Check permission
+    if not user.is_px_admin() and user.hospital and project.hospital != user.hospital:
+        messages.error(request, _("You don't have permission to add tasks to this project."))
+        return redirect('projects:project_detail', pk=project.pk)
+    
+    if request.method == 'POST':
+        form = QIProjectTaskForm(request.POST, project=project)
+        if form.is_valid():
+            task = form.save(commit=False)
+            task.project = project
+            task.save()
+            messages.success(request, _("Task added successfully."))
+            return redirect('projects:project_detail', pk=project.pk)
+    else:
+        form = QIProjectTaskForm(project=project)
+    
+    context = {
+        'form': form,
+        'project': project,
+        'is_create': True,
+    }
+    
+    return render(request, 'projects/task_form.html', context)
+
+
+@block_source_user
+@login_required
+def task_edit(request, project_pk, task_pk):
+    """Edit an existing task"""
+    user = request.user
+    project = get_object_or_404(QIProject, pk=project_pk, is_template=False)
+    task = get_object_or_404(QIProjectTask, pk=task_pk, project=project)
+    
+    # Check permission
+    if not user.is_px_admin() and user.hospital and project.hospital != user.hospital:
+        messages.error(request, _("You don't have permission to edit tasks in this project."))
+        return redirect('projects:project_detail', pk=project.pk)
+    
+    if request.method == 'POST':
+        form = QIProjectTaskForm(request.POST, instance=task, project=project)
+        if form.is_valid():
+            task = form.save()
+            # If status changed to completed, set completed_date
+            if task.status == 'completed' and not task.completed_date:
+                from django.utils import timezone
+                task.completed_date = timezone.now().date()
+                task.save()
+            messages.success(request, _("Task updated successfully."))
+            return redirect('projects:project_detail', pk=project.pk)
+    else:
+        form = QIProjectTaskForm(instance=task, project=project)
+    
+    context = {
+        'form': form,
+        'project': project,
+        'task': task,
+        'is_create': False,
+    }
+    
+    return render(request, 'projects/task_form.html', context)
+
+
+@block_source_user
+@login_required
+def task_delete(request, project_pk, task_pk):
+    """Delete a task"""
+    user = request.user
+    project = get_object_or_404(QIProject, pk=project_pk, is_template=False)
+    task = get_object_or_404(QIProjectTask, pk=task_pk, project=project)
+    
+    # Check permission
+    if not user.is_px_admin() and user.hospital and project.hospital != user.hospital:
+        messages.error(request, _("You don't have permission to delete tasks in this project."))
+        return redirect('projects:project_detail', pk=project.pk)
+    
+    if request.method == 'POST':
+        task.delete()
+        messages.success(request, _("Task deleted successfully."))
+        return redirect('projects:project_detail', pk=project.pk)
+    
+    context = {
+        'project': project,
+        'task': task,
+    }
+    
+    return render(request, 'projects/task_delete_confirm.html', context)
+
+
+@block_source_user
+@login_required
+def task_toggle_status(request, project_pk, task_pk):
+    """Quick toggle task status between pending and completed"""
+    user = request.user
+    project = get_object_or_404(QIProject, pk=project_pk, is_template=False)
+    task = get_object_or_404(QIProjectTask, pk=task_pk, project=project)
+    
+    # Check permission
+    if not user.is_px_admin() and user.hospital and project.hospital != user.hospital:
+        messages.error(request, _("You don't have permission to update tasks in this project."))
+        return redirect('projects:project_detail', pk=project.pk)
+    
+    from django.utils import timezone
+    
+    if task.status == 'completed':
+        task.status = 'pending'
+        task.completed_date = None
+    else:
+        task.status = 'completed'
+        task.completed_date = timezone.now().date()
+    
+    task.save()
+    messages.success(request, _("Task status updated."))
+    return redirect('projects:project_detail', pk=project.pk)
+
+
+# =============================================================================
+# Template Management Views
+# =============================================================================
+
+@block_source_user
+@login_required
+def template_list(request):
+    """List QI Project templates"""
+    user = request.user
+    
+    # Only admins can manage templates
+    if not (user.is_px_admin() or user.is_hospital_admin):
+        messages.error(request, _("You don't have permission to view templates."))
+        return redirect('projects:project_list')
+    
+    queryset = QIProject.objects.filter(is_template=True).select_related('hospital', 'department')
+    
+    # Apply RBAC filters
+    if not user.is_px_admin():
+        from django.db.models import Q
+        queryset = queryset.filter(
+            Q(hospital=user.hospital) | Q(hospital__isnull=True)
+        )
+    
+    # Search
+    search_query = request.GET.get('search')
+    if search_query:
+        queryset = queryset.filter(
+            Q(name__icontains=search_query) |
+            Q(description__icontains=search_query) |
+            Q(name_ar__icontains=search_query)
+        )
+    
+    queryset = queryset.order_by('name')
+    
+    context = {
+        'templates': queryset,
+        'can_create': user.is_px_admin() or user.is_hospital_admin,
+        'can_edit': user.is_px_admin() or user.is_hospital_admin,
+    }
+    
+    return render(request, 'projects/template_list.html', context)
+
+
+@block_source_user
+@login_required
+def template_detail(request, pk):
+    """View template details with tasks"""
+    user = request.user
+    
+    # Only admins can view templates
+    if not (user.is_px_admin() or user.is_hospital_admin):
+        messages.error(request, _("You don't have permission to view templates."))
+        return redirect('projects:project_list')
+    
+    template = get_object_or_404(
+        QIProject.objects.filter(is_template=True).select_related('hospital', 'department'),
+        pk=pk
+    )
+    
+    # Check permission for hospital-specific templates
+    if not user.is_px_admin():
+        from django.db.models import Q
+        if template.hospital and template.hospital != user.hospital:
+            messages.error(request, _("You don't have permission to view this template."))
+            return redirect('projects:template_list')
+    
+    # Get tasks
+    tasks = template.tasks.all().order_by('order', 'created_at')
+    
+    context = {
+        'template': template,
+        'tasks': tasks,
+    }
+    
+    return render(request, 'projects/template_detail.html', context)
+
+
+@block_source_user
+@login_required
+def template_create(request):
+    """Create a new project template"""
+    user = request.user
+    
+    # Only admins can create templates
+    if not (user.is_px_admin() or user.is_hospital_admin):
+        messages.error(request, _("You don't have permission to create templates."))
+        return redirect('projects:project_list')
+    
+    if request.method == 'POST':
+        form = QIProjectTemplateForm(request.POST, user=user)
+        if form.is_valid():
+            template = form.save(commit=False)
+            template.is_template = True
+            template.created_by = user
+            template.save()
+            messages.success(request, _("Project template created successfully."))
+            return redirect('projects:template_list')
+    else:
+        form = QIProjectTemplateForm(user=user)
+    
+    context = {
+        'form': form,
+        'is_create': True,
+    }
+    
+    return render(request, 'projects/template_form.html', context)
+
+
+@block_source_user
+@login_required
+def template_edit(request, pk):
+    """Edit an existing project template"""
+    user = request.user
+    template = get_object_or_404(QIProject, pk=pk, is_template=True)
+    
+    # Check permission
+    if not user.is_px_admin():
+        if template.hospital and template.hospital != user.hospital:
+            messages.error(request, _("You don't have permission to edit this template."))
+            return redirect('projects:template_list')
+    
+    if request.method == 'POST':
+        form = QIProjectTemplateForm(request.POST, instance=template, user=user)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Project template updated successfully."))
+            return redirect('projects:template_list')
+    else:
+        form = QIProjectTemplateForm(instance=template, user=user)
+    
+    context = {
+        'form': form,
+        'template': template,
+        'is_create': False,
+    }
+    
+    return render(request, 'projects/template_form.html', context)
+
+
+@block_source_user
+@login_required
+def template_delete(request, pk):
+    """Delete a project template"""
+    user = request.user
+    template = get_object_or_404(QIProject, pk=pk, is_template=True)
+    
+    # Check permission
+    if not user.is_px_admin():
+        if template.hospital and template.hospital != user.hospital:
+            messages.error(request, _("You don't have permission to delete this template."))
+            return redirect('projects:template_list')
+    
+    if request.method == 'POST':
+        template_name = template.name
+        template.delete()
+        messages.success(request, _('Template "%(name)s" deleted successfully.') % {'name': template_name})
+        return redirect('projects:template_list')
+    
+    context = {
+        'template': template,
+    }
+    
+    return render(request, 'projects/template_delete_confirm.html', context)
+
+
+# =============================================================================
+# PX Action Conversion View
+# =============================================================================
+
+@block_source_user
+@login_required
+def convert_action_to_project(request, action_pk):
+    """Convert a PX Action to a QI Project"""
+    user = request.user
+    
+    # Check permission
+    if not (user.is_px_admin() or user.is_hospital_admin or user.is_department_manager):
+        messages.error(request, _("You don't have permission to create projects."))
+        return redirect('px_action_center:action_detail', pk=action_pk)
+    
+    action = get_object_or_404(PXAction, pk=action_pk)
+    
+    # Check hospital access
+    if not user.is_px_admin() and user.hospital and action.hospital != user.hospital:
+        messages.error(request, _("You don't have permission to convert this action."))
+        return redirect('px_action_center:action_detail', pk=action_pk)
+    
+    if request.method == 'POST':
+        form = ConvertToProjectForm(request.POST, user=user, action=action)
+        if form.is_valid():
+            # Create project from template or blank
+            template = form.cleaned_data.get('template')
+            
+            if template:
+                # Copy from template
+                project = QIProject.objects.create(
+                    name=form.cleaned_data['project_name'],
+                    name_ar=template.name_ar,
+                    description=template.description,
+                    hospital=action.hospital,
+                    department=template.department,
+                    project_lead=form.cleaned_data['project_lead'],
+                    target_completion_date=form.cleaned_data['target_completion_date'],
+                    status='pending',
+                    created_by=user
+                )
+                # Copy tasks from template
+                for template_task in template.tasks.all():
+                    QIProjectTask.objects.create(
+                        project=project,
+                        title=template_task.title,
+                        description=template_task.description,
+                        order=template_task.order,
+                        status='pending'
+                    )
+            else:
+                # Create blank project
+                project = QIProject.objects.create(
+                    name=form.cleaned_data['project_name'],
+                    description=action.description,
+                    hospital=action.hospital,
+                    project_lead=form.cleaned_data['project_lead'],
+                    target_completion_date=form.cleaned_data['target_completion_date'],
+                    status='pending',
+                    created_by=user
+                )
+            
+            # Link to the action
+            project.related_actions.add(action)
+            
+            messages.success(request, _("PX Action converted to QI Project successfully."))
+            return redirect('projects:project_detail', pk=project.pk)
+    else:
+        initial_data = {
+            'project_name': f"QI Project: {action.title}",
+        }
+        form = ConvertToProjectForm(user=user, action=action, initial=initial_data)
+    
+    context = {
+        'form': form,
+        'action': action,
+    }
+    
+    return render(request, 'projects/convert_action.html', context)
diff --git a/apps/projects/urls.py b/apps/projects/urls.py
index b20750d..47d5db6 100644
--- a/apps/projects/urls.py
+++ b/apps/projects/urls.py
@@ -1,10 +1,34 @@
 from django.urls import path
+
 from . import ui_views
 
 app_name = 'projects'
 
 urlpatterns = [
-    # UI Views
+    # QI Project Views
     path('', ui_views.project_list, name='project_list'),
+    path('create/', ui_views.project_create, name='project_create'),
+    path('create/from-template/<uuid:template_pk>/', ui_views.project_create, name='project_create_from_template'),
     path('<uuid:pk>/', ui_views.project_detail, name='project_detail'),
+    path('<uuid:pk>/edit/', ui_views.project_edit, name='project_edit'),
+    path('<uuid:pk>/delete/', ui_views.project_delete, name='project_delete'),
+    
+    # Task Management
+    path('<uuid:project_pk>/tasks/add/', ui_views.task_create, name='task_create'),
+    path('<uuid:project_pk>/tasks/<uuid:task_pk>/edit/', ui_views.task_edit, name='task_edit'),
+    path('<uuid:project_pk>/tasks/<uuid:task_pk>/delete/', ui_views.task_delete, name='task_delete'),
+    path('<uuid:project_pk>/tasks/<uuid:task_pk>/toggle/', ui_views.task_toggle_status, name='task_toggle_status'),
+    
+    # Template Management
+    path('templates/', ui_views.template_list, name='template_list'),
+    path('templates/create/', ui_views.template_create, name='template_create'),
+    path('templates/<uuid:pk>/', ui_views.template_detail, name='template_detail'),
+    path('templates/<uuid:pk>/edit/', ui_views.template_edit, name='template_edit'),
+    path('templates/<uuid:pk>/delete/', ui_views.template_delete, name='template_delete'),
+    
+    # Save Project as Template
+    path('<uuid:pk>/save-as-template/', ui_views.project_save_as_template, name='project_save_as_template'),
+    
+    # PX Action Conversion
+    path('convert-action/<uuid:action_pk>/', ui_views.convert_action_to_project, name='convert_action'),
 ]
diff --git a/apps/px_action_center/ui_views.py b/apps/px_action_center/ui_views.py
index b757aec..f29d8e1 100644
--- a/apps/px_action_center/ui_views.py
+++ b/apps/px_action_center/ui_views.py
@@ -3,8 +3,10 @@ PX Action Center UI views - Server-rendered templates for action center console
 """
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
+from django.contrib.contenttypes.models import ContentType
 from django.core.paginator import Paginator
 from django.db.models import Q, Prefetch
+from django.http import JsonResponse
 from django.shortcuts import get_object_or_404, redirect, render
 from django.utils import timezone
 from django.views.decorators.http import require_http_methods
@@ -43,8 +45,13 @@ def action_list(request):
     
     # Apply RBAC filters
     user = request.user
+    # Get selected hospital for PX Admins (from middleware)
+    selected_hospital = getattr(request, 'tenant_hospital', None)
+    
     if user.is_px_admin():
-        pass  # See all
+        # PX Admins see all, but filter by selected hospital if set
+        if selected_hospital:
+            queryset = queryset.filter(hospital=selected_hospital)
     elif user.is_hospital_admin() and user.hospital:
         queryset = queryset.filter(hospital=user.hospital)
     elif user.is_department_manager() and user.department:
@@ -542,3 +549,116 @@ def action_create(request):
     }
     
     return render(request, 'actions/action_create.html', context)
+
+
+@login_required
+@require_http_methods(["POST"])
+def action_create_from_ai(request, complaint_id):
+    """
+    Create a PX Action automatically from AI suggestion.
+    
+    Creates action in background and returns JSON response.
+    Links action to the complaint automatically.
+    """
+    from apps.complaints.models import Complaint
+    import json
+    
+    complaint = get_object_or_404(Complaint, id=complaint_id)
+    
+    # Check permission
+    user = request.user
+    if not (user.is_px_admin() or user.is_hospital_admin()):
+        return JsonResponse({
+            'success': False,
+            'error': 'You do not have permission to create actions.'
+        }, status=403)
+    
+    # Get action data from POST
+    action_text = request.POST.get('action', '')
+    priority = request.POST.get('priority', 'medium')
+    category = request.POST.get('category', 'process_improvement')
+    
+    if not action_text:
+        return JsonResponse({
+            'success': False,
+            'error': 'Action description is required.'
+        }, status=400)
+    
+    try:
+        # Map priority/severity
+        priority_map = {
+            'high': 'high',
+            'medium': 'medium',
+            'low': 'low'
+        }
+        
+        # Create action
+        action = PXAction.objects.create(
+            source_type='complaint',
+            content_type=ContentType.objects.get_for_model(Complaint),
+            object_id=complaint.id,
+            title=f"AI Suggested Action - {complaint.reference_number}",
+            description=action_text,
+            hospital=complaint.hospital,
+            department=complaint.department,
+            category=category,
+            priority=priority_map.get(priority, 'medium'),
+            severity=priority_map.get(priority, 'medium'),
+            status=ActionStatus.OPEN,
+            assigned_to=complaint.assigned_to,  # Assign to same person as complaint
+            assigned_at=timezone.now() if complaint.assigned_to else None,
+        )
+        
+        # Set due date based on priority (SLA)
+        from datetime import timedelta
+        due_days = {
+            'high': 3,
+            'medium': 7,
+            'low': 14
+        }
+        action.due_at = timezone.now() + timedelta(days=due_days.get(priority, 7))
+        action.save()
+        
+        # Create log
+        PXActionLog.objects.create(
+            action=action,
+            log_type='status_change',
+            message=f"Action created automatically from AI suggestion for complaint {complaint.reference_number}",
+        )
+        
+        # Audit log
+        AuditService.log_event(
+            event_type='action_created',
+            description=f"Action created automatically from AI suggestion",
+            user=user,
+            content_object=action,
+            metadata={
+                'complaint_id': str(complaint.id),
+                'complaint_reference': complaint.reference_number,
+                'source': 'ai_suggestion'
+            }
+        )
+        
+        # Notify assigned user
+        if action.assigned_to:
+            from apps.notifications.services import NotificationService
+            NotificationService.send_notification(
+                recipient=action.assigned_to,
+                title=f"New Action from AI: {action.title}",
+                message=f"AI suggested a new action for complaint {complaint.reference_number}. Due: {action.due_at.strftime('%Y-%m-%d')}",
+                notification_type='action_assigned',
+                metadata={'link': f"/actions/{action.id}/"}
+            )
+        
+        return JsonResponse({
+            'success': True,
+            'action_id': str(action.id),
+            'action_url': f"/actions/{action.id}/",
+            'message': 'PX Action created successfully from AI suggestion.'
+        })
+        
+    except Exception as e:
+        return JsonResponse({
+            'success': False,
+            'error': str(e)
+        }, status=500)
diff --git a/apps/px_action_center/urls.py b/apps/px_action_center/urls.py
index e75ccaa..91e6e51 100644
--- a/apps/px_action_center/urls.py
+++ b/apps/px_action_center/urls.py
@@ -15,6 +15,7 @@ urlpatterns = [
     # UI Views
     path('', ui_views.action_list, name='action_list'),
     path('create/', ui_views.action_create, name='action_create'),
+    path('create-from-ai/<uuid:complaint_id>/', ui_views.action_create_from_ai, name='action_create_from_ai'),
     path('<uuid:pk>/', ui_views.action_detail, name='action_detail'),
     path('<uuid:pk>/assign/', ui_views.action_assign, name='action_assign'),
     path('<uuid:pk>/change-status/', ui_views.action_change_status, name='action_change_status'),
diff --git a/apps/px_action_center/views.py b/apps/px_action_center/views.py
index f2e4bea..7e74775 100644
--- a/apps/px_action_center/views.py
+++ b/apps/px_action_center/views.py
@@ -55,6 +55,10 @@ class PXActionViewSet(viewsets.ModelViewSet):
         
         user = self.request.user
         
+        # Source Users don't have access to PX Actions
+        if user.is_source_user():
+            return queryset.none()
+        
         # PX Admins see all actions
         if user.is_px_admin():
             return queryset
diff --git a/apps/px_sources/decorators.py b/apps/px_sources/decorators.py
new file mode 100644
index 0000000..3d7cdaa
--- /dev/null
+++ b/apps/px_sources/decorators.py
@@ -0,0 +1,174 @@
+"""
+Custom decorators for PX Source User access control.
+
+Provides decorators to:
+- Restrict views to source users only
+- Block source users from admin pages
+"""
+from functools import wraps
+from django.core.exceptions import PermissionDenied
+from django.contrib.auth.decorators import login_required
+from django.shortcuts import redirect
+from django.contrib import messages
+from django.utils.translation import gettext_lazy as _
+
+
+def source_user_required(view_func):
+    """
+    Decorator to restrict access to source users only.
+    
+    Use this on views that should ONLY be accessible to source users.
+    Blocks all admin/management/staff pages.
+    
+    Example:
+        @source_user_required
+        def source_user_dashboard(request):
+            # Only source users can access this
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        # Check if user has source user profile
+        if not hasattr(request.user, 'source_user_profile'):
+            raise PermissionDenied(
+                _("Access denied. Source user privileges required.")
+            )
+        
+        source_user = request.user.source_user_profile
+        
+        # Check if source user is active
+        if not source_user.is_active:
+            # Log out the user
+            from django.contrib.auth import logout
+            logout(request)
+            messages.error(
+                request,
+                _("Your source user account is inactive. Please contact your administrator.")
+            )
+            return redirect('accounts:login')
+        
+        # Store source_user and source in request for easy access
+        request.source_user = source_user
+        request.source = source_user.source
+        
+        return view_func(request, *args, **kwargs)
+    
+    return _wrapped_view
+
+
+def block_source_user(view_func):
+    """
+    Decorator to BLOCK source users from accessing admin pages.
+    
+    Use this on admin/management views that source users should NOT access.
+    Allows all other users (PX Admin, Hospital Admin, Department Manager, etc.)
+    
+    Example:
+        @block_source_user
+        def source_list(request):
+            # Source users CANNOT access this
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        # Check if user is ONLY a source user (no other admin roles)
+        if _is_pure_source_user(request.user):
+            messages.error(
+                request,
+                _("Access denied. Source users cannot access admin pages.")
+            )
+            return redirect('px_sources:source_user_dashboard')
+        
+        return view_func(request, *args, **kwargs)
+    
+    return _wrapped_view
+
+
+def source_user_or_admin(view_func):
+    """
+    Decorator that allows both source users AND admins.
+    
+    Use this on views that should be accessible to:
+    - Source users (for their own data)
+    - PX Admins, Hospital Admins, Department Managers
+    
+    Example:
+        @source_user_or_admin
+        def complaint_detail(request, pk):
+            # Both source users and admins can view complaints
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        # Allow if user has admin roles
+        if _has_admin_role(request.user):
+            return view_func(request, *args, **kwargs)
+        
+        # Allow if user is an active source user
+        if hasattr(request.user, 'source_user_profile'):
+            source_user = request.user.source_user_profile
+            if source_user.is_active:
+                request.source_user = source_user
+                request.source = source_user.source
+                return view_func(request, *args, **kwargs)
+        
+        # Deny access
+        raise PermissionDenied(_("Access denied."))
+    
+    return _wrapped_view
+
+
+def _is_pure_source_user(user):
+    """
+    Check if user is ONLY a source user with no admin roles.
+    
+    Returns True if:
+    - User is in 'PX Source User' group
+    - User is NOT in any admin groups
+    """
+    admin_groups = ['PX Admin', 'Hospital Admin', 'Department Manager']
+    
+    # Check if user has any admin roles
+    has_admin_role = user.groups.filter(name__in=admin_groups).exists()
+    
+    if has_admin_role:
+        return False
+    
+    # Check if user is a source user
+    has_source_user_profile = hasattr(user, 'source_user_profile')
+    
+    if has_source_user_profile:
+        source_user = user.source_user_profile
+        if source_user.is_active:
+            return True
+    
+    return False
+
+
+def _has_admin_role(user):
+    """
+    Check if user has any admin role.
+    """
+    admin_groups = ['PX Admin', 'Hospital Admin', 'Department Manager']
+    return user.groups.filter(name__in=admin_groups).exists()
+
+
+def px_admin_required(view_func):
+    """
+    Decorator to restrict access to PX Admins only.
+    
+    Use this on views that should ONLY be accessible to PX Admins.
+    """
+    @wraps(view_func)
+    @login_required
+    def _wrapped_view(request, *args, **kwargs):
+        if not user.is_px_admin():
+            messages.error(
+                request,
+                _("Access denied. PX Admin privileges required.")
+            )
+            return redirect('dashboard:dashboard')
+        
+        return view_func(request, *args, **kwargs)
+    
+    return _wrapped_view
diff --git a/apps/px_sources/management/__init__.py b/apps/px_sources/management/__init__.py
new file mode 100644
index 0000000..a94f2a3
--- /dev/null
+++ b/apps/px_sources/management/__init__.py
@@ -0,0 +1 @@
+# Management package
diff --git a/apps/px_sources/management/commands/__init__.py b/apps/px_sources/management/commands/__init__.py
new file mode 100644
index 0000000..b5a3a84
--- /dev/null
+++ b/apps/px_sources/management/commands/__init__.py
@@ -0,0 +1 @@
+# Commands package
diff --git a/apps/px_sources/management/commands/setup_source_user_permissions.py b/apps/px_sources/management/commands/setup_source_user_permissions.py
new file mode 100644
index 0000000..5c84515
--- /dev/null
+++ b/apps/px_sources/management/commands/setup_source_user_permissions.py
@@ -0,0 +1,96 @@
+"""
+Setup Source User permissions and groups.
+
+Creates a dedicated 'PX Source User' group with limited permissions
+to ensure source users can only access their designated features.
+"""
+from django.core.management.base import BaseCommand
+from django.contrib.auth.models import Group, Permission
+from django.contrib.contenttypes.models import ContentType
+from django.db.models import Q
+
+
+class Command(BaseCommand):
+    help = 'Setup Source User permissions and groups for access control'
+
+    def handle(self, **options):
+        self.stdout.write(self.style.NOTICE('Setting up Source User permissions...'))
+        
+        # Create Source User group
+        source_user_group, created = Group.objects.get_or_create(name='PX Source User')
+        
+        if created:
+            self.stdout.write(self.style.SUCCESS('✓ Created "PX Source User" group'))
+        else:
+            self.stdout.write(self.style.NOTICE('✓ Found existing "PX Source User" group'))
+        
+        # Get permissions for Complaint and Inquiry
+        permissions = []
+        permission_names = []
+        
+        # Complaint permissions (only create and view their own)
+        complaint_perms = [
+            ('complaints', 'add_complaint'),
+            ('complaints', 'view_complaint'),
+            ('complaints', 'change_complaint'),
+        ]
+        
+        # Inquiry permissions
+        inquiry_perms = [
+            ('complaints', 'add_inquiry'),
+            ('complaints', 'view_inquiry'),
+            ('complaints', 'change_inquiry'),
+        ]
+        
+        # Collect all permissions
+        all_perms = complaint_perms + inquiry_perms
+        
+        for app_label, codename in all_perms:
+            try:
+                perm = Permission.objects.get(
+                    content_type__app_label=app_label,
+                    codename=codename
+                )
+                permissions.append(perm)
+                permission_names.append(f"{app_label}.{codename}")
+            except Permission.DoesNotExist:
+                self.stdout.write(
+                    self.style.WARNING(f'⚠ Permission {app_label}.{codename} not found')
+                )
+        
+        # Set permissions for the group
+        source_user_group.permissions.set(permissions)
+        
+        self.stdout.write(
+            self.style.SUCCESS(
+                f'✓ Assigned {len(permissions)} permissions to "PX Source User" group'
+            )
+        )
+        
+        # List assigned permissions
+        self.stdout.write(self.style.NOTICE('\nAssigned permissions:'))
+        for perm_name in permission_names:
+            self.stdout.write(f'  - {perm_name}')
+        
+        # Create a warning about what source users CANNOT do
+        self.stdout.write(self.style.WARNING('\n⚠ Source users are RESTRICTED from:'))
+        self.stdout.write('  - Admin pages (/admin/)')
+        self.stdout.write('  - Analytics dashboards')
+        self.stdout.write('  - Configuration settings')
+        self.stdout.write('  - Staff management')
+        self.stdout.write('  - Source management (creating/editing sources)')
+        self.stdout.write('  - User management')
+        self.stdout.write('  - Onboarding management')
+        
+        self.stdout.write(
+            self.style.SUCCESS(
+                '\n✅ Source User permissions setup complete!\n'
+            )
+        )
+        
+        # Instructions for assigning users to the group
+        self.stdout.write(self.style.NOTICE('To assign a user to the Source User group:'))
+        self.stdout.write('  1. Go to Admin → Authentication and Authorization → Users')
+        self.stdout.write('  2. Select the user')
+        self.stdout.write('  3. Add "PX Source User" to their groups')
+        self.stdout.write('  4. Also create a SourceUser profile for them in PX Sources')
diff --git a/apps/px_sources/middleware.py b/apps/px_sources/middleware.py
new file mode 100644
index 0000000..60441a5
--- /dev/null
+++ b/apps/px_sources/middleware.py
@@ -0,0 +1,145 @@
+"""
+Middleware for PX Source User access restriction.
+
+Provides global route-level protection to ensure source users
+can only access their designated pages.
+"""
+from django.urls import resolve
+from django.shortcuts import redirect
+from django.contrib import messages
+from django.utils.deprecation import MiddlewareMixin
+
+
+class SourceUserRestrictionMiddleware(MiddlewareMixin):
+    """
+    STRICT middleware that restricts source users to ONLY:
+    1. /px-sources/* pages (their dashboard, complaints, inquiries)
+    2. Password change page
+    3. Logout
+    
+    ALL other routes are BLOCKED.
+    """
+    
+    # URL path prefixes that source users CAN access (whitelist)
+    ALLOWED_PATH_PREFIXES = [
+        '/px-sources/',  # Source user portal
+    ]
+    
+    # Specific URL names that source users CAN access
+    ALLOWED_URL_NAMES = {
+        # Password change
+        'accounts:password_change',
+        'accounts:password_change_done',
+        # Settings (limited)
+        'accounts:settings',
+        # Logout
+        'accounts:logout',
+        # Login (for redirect after logout)
+        'accounts:login',
+        # Static files (for CSS/JS)
+        None,  # Static files don't have URL names
+    }
+    
+    # Explicitly blocked paths (even if they match allowed prefixes)
+    BLOCKED_PATHS = [
+        '/px-sources/new/',
+        '/px-sources/create/',
+        '/px-sources/<uuid:pk>/edit/',
+        '/px-sources/<uuid:pk>/delete/',
+        '/px-sources/<uuid:pk>/toggle/',
+        '/px-sources/ajax/',
+        '/px-sources/api/',
+    ]
+    
+    def process_request(self, request):
+        # Skip for unauthenticated users
+        if not request.user.is_authenticated:
+            return None
+        
+        # Skip for superusers
+        if request.user.is_superuser:
+            return None
+        
+        # Check if user is a source user
+        if not self._is_source_user(request.user):
+            return None
+        
+        # Source user detected - apply strict restrictions
+        path = request.path
+        
+        # Get current route name
+        try:
+            resolver = resolve(path)
+            route_name = f"{resolver.namespace}:{resolver.url_name}" if resolver.namespace else resolver.url_name
+        except:
+            route_name = None
+        
+        # Check if URL name is explicitly allowed
+        if route_name in self.ALLOWED_URL_NAMES:
+            return None
+        
+        # Check if path starts with allowed prefixes
+        for prefix in self.ALLOWED_PATH_PREFIXES:
+            if path.startswith(prefix):
+                # Check if it's a blocked sub-path
+                for blocked in self.BLOCKED_PATHS:
+                    if blocked in path:
+                        return self._block_access(request)
+                # Path is allowed
+                return None
+        
+        # Check for static/media files (allow these)
+        if path.startswith('/static/') or path.startswith('/media/'):
+            return None
+        
+        # Check for i18n URLs
+        if path.startswith('/i18n/'):
+            return None
+        
+        # Everything else is BLOCKED for source users
+        return self._block_access(request)
+    
+    def _is_source_user(self, user):
+        """Check if user is an active source user."""
+        if not hasattr(user, 'source_user_profile'):
+            return False
+        
+        source_user = user.source_user_profile
+        return source_user.is_active
+    
+    def _block_access(self, request):
+        """Block access and redirect to source user dashboard."""
+        return redirect('px_sources:source_user_dashboard')
+
+
+class SourceUserSessionMiddleware(MiddlewareMixin):
+    """
+    Middleware to set shorter session timeout for source users.
+    
+    Source users have limited access, so their sessions expire faster
+    for security purposes.
+    """
+    
+    SOURCE_USER_SESSION_TIMEOUT = 3600  # 1 hour
+    NORMAL_SESSION_TIMEOUT = 1209600  # 2 weeks
+    
+    def process_request(self, request):
+        if not request.user.is_authenticated:
+            return None
+        
+        if self._is_source_user(request.user):
+            # Set shorter session for source users
+            request.session.set_expiry(self.SOURCE_USER_SESSION_TIMEOUT)
+        else:
+            # Normal session for other users
+            request.session.set_expiry(self.NORMAL_SESSION_TIMEOUT)
+        
+        return None
+    
+    def _is_source_user(self, user):
+        """Check if user is an active source user."""
+        if not hasattr(user, 'source_user_profile'):
+            return False
+        
+        source_user = user.source_user_profile
+        return source_user.is_active
diff --git a/apps/px_sources/permissions.py b/apps/px_sources/permissions.py
new file mode 100644
index 0000000..bd541cf
--- /dev/null
+++ b/apps/px_sources/permissions.py
@@ -0,0 +1,159 @@
+"""
+DRF Permissions for PX Source User access control.
+
+Provides permission classes to restrict API access based on user role:
+- Source users can only access their own data
+- Admins have full access
+"""
+from rest_framework import permissions
+from apps.px_sources.models import SourceUser
+
+
+class IsSourceUser(permissions.BasePermission):
+    """
+    Allow access only to active source users.
+    
+    Use this on views that should ONLY be accessible to source users.
+    
+    Example:
+        permission_classes = [IsSourceUser]
+    """
+    
+    def has_permission(self, request, view):
+        if not request.user or not request.user.is_authenticated:
+            return False
+        
+        # Check if user has source user profile
+        if not hasattr(request.user, 'source_user_profile'):
+            return False
+        
+        # Check if source user is active
+        source_user = request.user.source_user_profile
+        return source_user.is_active
+
+
+class IsSourceUserOrAdmin(permissions.BasePermission):
+    """
+    Allow access to source users AND admins.
+    
+    Use this on views that should be accessible to:
+    - Active source users
+    - PX Admins, Hospital Admins, Department Managers
+    
+    Example:
+        permission_classes = [IsSourceUserOrAdmin]
+    """
+    
+    def has_permission(self, request, view):
+        if not request.user or not request.user.is_authenticated:
+            return False
+        
+        # Allow admins
+        if request.user.is_superuser or request.user.is_px_admin():
+            return True
+        
+        # Allow hospital admins
+        if request.user.is_hospital_admin():
+            return True
+        
+        # Allow active source users
+        if hasattr(request.user, 'source_user_profile'):
+            source_user = request.user.source_user_profile
+            return source_user.is_active
+        
+        return False
+
+
+class IsSourceUserOwnData(permissions.BasePermission):
+    """
+    Object-level permission to ensure source users can only access their own data.
+    
+    Use this on detail views to ensure source users can only view/edit
+    complaints and inquiries from their assigned source.
+    
+    Example:
+        permission_classes = [IsSourceUserOrAdmin, IsSourceUserOwnData]
+    """
+    
+    def has_object_permission(self, request, view, obj):
+        if not request.user or not request.user.is_authenticated:
+            return False
+        
+        # Admins can access everything
+        if request.user.is_superuser or request.user.is_px_admin():
+            return True
+        
+        # Check if user is a source user
+        if not hasattr(request.user, 'source_user_profile'):
+            return False
+        
+        source_user = request.user.source_user_profile
+        
+        if not source_user.is_active:
+            return False
+        
+        # Check if object belongs to user's source
+        if hasattr(obj, 'source'):
+            return obj.source == source_user.source
+        
+        # If object doesn't have a source field, deny access
+        return False
+
+
+class IsAdminUser(permissions.BasePermission):
+    """
+    Allow access only to admin users (not source users).
+    
+    Use this on admin-only API endpoints.
+    
+    Example:
+        permission_classes = [IsAdminUser]
+    """
+    
+    def has_permission(self, request, view):
+        if not request.user or not request.user.is_authenticated:
+            return False
+        
+        # Block pure source users
+        if _is_pure_source_user(request.user):
+            return False
+        
+        # Allow admins
+        return request.user.is_superuser or request.user.is_px_admin() or request.user.is_hospital_admin()
+
+
+class IsPXAdmin(permissions.BasePermission):
+    """
+    Allow access only to PX Admins.
+    
+    Use this on PX Admin-only API endpoints.
+    """
+    
+    def has_permission(self, request, view):
+        if not request.user or not request.user.is_authenticated:
+            return False
+        
+        return request.user.is_px_admin()
+
+
+def _is_pure_source_user(user):
+    """
+    Check if user is ONLY a source user with no admin roles.
+    """
+    admin_groups = ['PX Admin', 'Hospital Admin', 'Department Manager']
+    
+    # Check if user has any admin roles
+    has_admin_role = user.groups.filter(name__in=admin_groups).exists()
+    
+    if has_admin_role:
+        return False
+    
+    # Check if user is a source user
+    has_source_user_profile = hasattr(user, 'source_user_profile')
+    
+    if has_source_user_profile:
+        source_user = user.source_user_profile
+        if source_user.is_active:
+            return True
+    
+    return False
diff --git a/apps/px_sources/ui_views.py b/apps/px_sources/ui_views.py
index 9425e77..27d30ac 100644
--- a/apps/px_sources/ui_views.py
+++ b/apps/px_sources/ui_views.py
@@ -9,7 +9,9 @@ from django.shortcuts import get_object_or_404, redirect, render
 from django.utils.translation import gettext_lazy as _
 
 from .models import PXSource, SourceUser
+from .decorators import source_user_required, block_source_user
 from apps.accounts.models import User
+from apps.complaints.models import Complaint, Inquiry
 
 
 def check_source_permission(user):
@@ -18,6 +20,7 @@ def check_source_permission(user):
 
 
 @login_required
+@block_source_user
 def source_list(request):
     """
     List all PX sources
@@ -51,6 +54,7 @@ def source_list(request):
 
 
 @login_required
+@block_source_user
 def source_detail(request, pk):
     """
     View source details
@@ -82,6 +86,7 @@ def source_detail(request, pk):
 
 
 @login_required
+@block_source_user
 def source_create(request):
     """
     Create a new PX source
@@ -118,6 +123,7 @@ def source_create(request):
 
 
 @login_required
+@block_source_user
 def source_edit(request, pk):
     """
     Edit an existing PX source
@@ -155,6 +161,7 @@ def source_edit(request, pk):
 
 
 @login_required
+@block_source_user
 def source_delete(request, pk):
     """
     Delete a PX source
@@ -179,30 +186,45 @@ def source_delete(request, pk):
 
 
 @login_required
+@block_source_user
 def source_toggle_status(request, pk):
     """
-    Toggle source active status (AJAX)
+    Toggle source active status (supports both AJAX and regular form submission)
     """
     if not (request.user.is_px_admin() or request.user.is_hospital_admin()):
-        return JsonResponse({'error': 'Permission denied'}, status=403)
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+            return JsonResponse({'error': 'Permission denied'}, status=403)
+        messages.error(request, _("You don't have permission to toggle source status."))
+        return redirect('px_sources:source_list')
     
     if request.method != 'POST':
-        return JsonResponse({'error': 'Method not allowed'}, status=405)
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+            return JsonResponse({'error': 'Method not allowed'}, status=405)
+        messages.error(request, _("Invalid request method."))
+        return redirect('px_sources:source_list')
     
     source = get_object_or_404(PXSource, pk=pk)
     source.is_active = not source.is_active
     source.save()
     
-    return JsonResponse({
-        'success': True,
-        'is_active': source.is_active,
-        'message': 'Source {} successfully'.format(
-            'activated' if source.is_active else 'deactivated'
-        )
-    })
+    status_text = _('activated') if source.is_active else _('deactivated')
+    success_message = _("Source '{}' {} successfully.").format(source.name_en, status_text)
+    
+    # Handle AJAX request
+    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+        return JsonResponse({
+            'success': True,
+            'is_active': source.is_active,
+            'message': str(success_message)
+        })
+    
+    # Handle regular form submission
+    messages.success(request, success_message)
+    return redirect('px_sources:source_list')
 
 
 @login_required
+@block_source_user
 def ajax_search_sources(request):
     """
     AJAX endpoint for searching sources
@@ -234,10 +256,11 @@ def ajax_search_sources(request):
 
 
 @login_required
+@source_user_required
 def source_user_dashboard(request):
     """
     Dashboard for source users.
-    
+
     Shows:
     - User's assigned source
     - Statistics (complaints, inquiries from their source)
@@ -246,35 +269,35 @@ def source_user_dashboard(request):
     """
     # Get source user profile
     source_user = SourceUser.get_active_source_user(request.user)
-    
+
     if not source_user:
         messages.error(
-            request, 
+            request,
             _("You are not assigned as a source user. Please contact your administrator.")
         )
         return redirect('/')
-    
+
     # Get source
     source = source_user.source
-    
+
     # Get complaints from this source (recent 5)
     from apps.complaints.models import Complaint
     complaints = Complaint.objects.filter(source=source).select_related(
         'patient', 'hospital', 'assigned_to'
     ).order_by('-created_at')[:5]
-    
+
     # Get inquiries from this source (recent 5)
     from apps.complaints.models import Inquiry
     inquiries = Inquiry.objects.filter(source=source).select_related(
         'patient', 'hospital', 'assigned_to'
     ).order_by('-created_at')[:5]
-    
+
     # Calculate statistics
     total_complaints = Complaint.objects.filter(source=source).count()
     total_inquiries = Inquiry.objects.filter(source=source).count()
     open_complaints = Complaint.objects.filter(source=source, status='open').count()
     open_inquiries = Inquiry.objects.filter(source=source, status='open').count()
-    
+
     context = {
         'source_user': source_user,
         'source': source,
@@ -287,11 +310,12 @@ def source_user_dashboard(request):
         'can_create_complaints': source_user.can_create_complaints,
         'can_create_inquiries': source_user.can_create_inquiries,
     }
-    
+
     return render(request, 'px_sources/source_user_dashboard.html', context)
 
 
 @login_required
+@source_user_required
 def ajax_source_choices(request):
     """
     AJAX endpoint for getting source choices for dropdowns
@@ -311,27 +335,92 @@ def ajax_source_choices(request):
 
 
 @login_required
+@block_source_user
 def source_user_create(request, pk):
     """
     Create a new source user for a specific PX source.
     Only PX admins can create source users.
+    Allows selecting an existing user or creating a new user.
     """
     # if not request.user.is_px_admin():
     #     messages.error(request, _("You don't have permission to create source users."))
     #     return redirect('px_sources:source_detail', pk=pk)
-    
+
     source = get_object_or_404(PXSource, pk=pk)
-    
+
     if request.method == 'POST':
-        user_id = request.POST.get('user')
-        user = get_object_or_404(User, pk=user_id)
+        creation_mode = request.POST.get('creation_mode', 'existing')  # 'existing' or 'new'
         
         try:
-            # Check if user already has a source user profile
-            if SourceUser.objects.filter(user=user).exists():
-                messages.error(request, _("User already has a source profile. A user can only manage one source."))
-                return redirect('px_sources:source_detail', pk=pk)
-            
+            if creation_mode == 'existing':
+                # Select from existing users
+                user_id = request.POST.get('user')
+                if not user_id:
+                    messages.error(request, _("Please select a user."))
+                    return redirect('px_sources:source_user_create', pk=pk)
+                
+                user = get_object_or_404(User, pk=user_id)
+                
+                # Check if user already has a source user profile
+                if SourceUser.objects.filter(user=user).exists():
+                    messages.error(request, _("User already has a source profile. A user can only manage one source."))
+                    return redirect('px_sources:source_detail', pk=pk)
+                    
+            else:  # creation_mode == 'new'
+                # Create a new user
+                email = request.POST.get('new_email', '').strip().lower()
+                first_name = request.POST.get('new_first_name', '').strip()
+                last_name = request.POST.get('new_last_name', '').strip()
+                password = request.POST.get('new_password', '')
+                confirm_password = request.POST.get('new_password_confirm', '')
+                
+                # Validation
+                errors = []
+                if not email:
+                    errors.append(_("Email is required."))
+                elif User.objects.filter(email=email).exists():
+                    errors.append(_("A user with this email already exists."))
+                
+                if not first_name:
+                    errors.append(_("First name is required."))
+                
+                if not last_name:
+                    errors.append(_("Last name is required."))
+                
+                if not password:
+                    errors.append(_("Password is required."))
+                elif len(password) < 8:
+                    errors.append(_("Password must be at least 8 characters."))
+                
+                if password != confirm_password:
+                    errors.append(_("Passwords do not match."))
+                
+                if errors:
+                    for error in errors:
+                        messages.error(request, error)
+                    return redirect('px_sources:source_user_create', pk=pk)
+                
+                # Create the user
+                user = User.objects.create_user(
+                    email=email,
+                    password=password,
+                    first_name=first_name,
+                    last_name=last_name,
+                    phone=request.POST.get('new_phone', '').strip(),
+                    employee_id=request.POST.get('new_employee_id', '').strip(),
+                )
+                
+                # Assign to PX Admin group by default
+                from django.contrib.auth.models import Group
+                try:
+                    px_admin_group = Group.objects.get(name='PX Admin')
+                    user.groups.add(px_admin_group)
+                except Group.DoesNotExist:
+                    pass  # Group doesn't exist yet
+                
+                messages.success(request, _("New user created successfully!"))
+
+            # Create source user
             source_user = SourceUser.objects.create(
                 user=user,
                 source=source,
@@ -339,24 +428,26 @@ def source_user_create(request, pk):
                 can_create_complaints=request.POST.get('can_create_complaints') == 'on',
                 can_create_inquiries=request.POST.get('can_create_inquiries') == 'on',
             )
-            
+
             messages.success(request, _("Source user created successfully!"))
             return redirect('px_sources:source_detail', pk=pk)
-        
+
         except Exception as e:
             messages.error(request, _("Error creating source user: {}").format(str(e)))
-    
+
     context = {
         'source': source,
         'available_users': User.objects.exclude(
             id__in=source.source_users.values_list('user_id', flat=True)
         ).order_by('email'),
+        'creation_mode': 'new',  # Default to new user creation
     }
-    
+
     return render(request, 'px_sources/source_user_form.html', context)
 
 
 @login_required
+@block_source_user
 def source_user_edit(request, pk, user_pk):
     """
     Edit an existing source user.
@@ -391,6 +482,7 @@ def source_user_edit(request, pk, user_pk):
 
 
 @login_required
+@block_source_user
 def source_user_delete(request, pk, user_pk):
     """
     Delete a source user.
@@ -418,6 +510,7 @@ def source_user_delete(request, pk, user_pk):
 
 
 @login_required
+@block_source_user
 def source_user_toggle_status(request, pk, user_pk):
     """
     Toggle source user active status (AJAX).
@@ -445,6 +538,7 @@ def source_user_toggle_status(request, pk, user_pk):
 
 
 @login_required
+@source_user_required
 def source_user_complaint_list(request):
     """
     List complaints for the current Source User.
@@ -452,50 +546,49 @@ def source_user_complaint_list(request):
     """
     # Get source user profile
     source_user = SourceUser.get_active_source_user(request.user)
-    
+
     if not source_user:
         messages.error(
-            request, 
+            request,
             _("You are not assigned as a source user. Please contact your administrator.")
         )
         return redirect('/')
-    
+
     source = source_user.source
-    
+
     # Get complaints from this source
-    from apps.complaints.models import Complaint
+    from apps.complaints.models import Complaint, Inquiry
     from django.db.models import Q
-    
+
     complaints_queryset = Complaint.objects.filter(source=source).select_related(
         'patient', 'hospital', 'assigned_to', 'created_by'
     )
-    
+
     # Apply filters
     status_filter = request.GET.get('status')
     if status_filter:
         complaints_queryset = complaints_queryset.filter(status=status_filter)
-    
+
     priority_filter = request.GET.get('priority')
     if priority_filter:
         complaints_queryset = complaints_queryset.filter(priority=priority_filter)
-    
+
     category_filter = request.GET.get('category')
     if category_filter:
         complaints_queryset = complaints_queryset.filter(category=category_filter)
-    
+
     # Search
     search = request.GET.get('search')
     if search:
         complaints_queryset = complaints_queryset.filter(
             Q(title__icontains=search) |
             Q(description__icontains=search) |
-            Q(patient__first_name__icontains=search) |
-            Q(patient__last_name__icontains=search)
+            Q(patient_name__icontains=search)
         )
-    
+
     # Order and paginate
     complaints_queryset = complaints_queryset.order_by('-created_at')
-    
+
     from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
     paginator = Paginator(complaints_queryset, 20)  # 20 per page
     page = request.GET.get('page')
@@ -505,7 +598,7 @@ def source_user_complaint_list(request):
         complaints = paginator.page(1)
     except EmptyPage:
         complaints = paginator.page(paginator.num_pages)
-    
+
     context = {
         'complaints': complaints,
         'source_user': source_user,
@@ -515,12 +608,15 @@ def source_user_complaint_list(request):
         'category_filter': category_filter,
         'search': search,
         'complaints_count': complaints_queryset.count(),
+        'total_complaints': Complaint.objects.filter(source=source).count(),
+        'total_inquiries': Inquiry.objects.filter(source=source).count(),
     }
-    
+
     return render(request, 'px_sources/source_user_complaint_list.html', context)
 
 
 @login_required
+@source_user_required
 def source_user_inquiry_list(request):
     """
     List inquiries for the current Source User.
@@ -528,33 +624,33 @@ def source_user_inquiry_list(request):
     """
     # Get source user profile
     source_user = SourceUser.get_active_source_user(request.user)
-    
+
     if not source_user:
         messages.error(
-            request, 
+            request,
             _("You are not assigned as a source user. Please contact your administrator.")
         )
         return redirect('/')
-    
+
     source = source_user.source
-    
+
     # Get inquiries from this source
-    from apps.complaints.models import Inquiry
+    from apps.complaints.models import Inquiry, Complaint
     from django.db.models import Q
-    
+
     inquiries_queryset = Inquiry.objects.filter(source=source).select_related(
         'patient', 'hospital', 'assigned_to', 'created_by'
     )
-    
+
     # Apply filters
     status_filter = request.GET.get('status')
     if status_filter:
         inquiries_queryset = inquiries_queryset.filter(status=status_filter)
-    
+
     category_filter = request.GET.get('category')
     if category_filter:
         inquiries_queryset = inquiries_queryset.filter(category=category_filter)
-    
+
     # Search
     search = request.GET.get('search')
     if search:
@@ -563,10 +659,10 @@ def source_user_inquiry_list(request):
             Q(message__icontains=search) |
             Q(contact_name__icontains=search)
         )
-    
+
     # Order and paginate
     inquiries_queryset = inquiries_queryset.order_by('-created_at')
-    
+
     from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
     paginator = Paginator(inquiries_queryset, 20)  # 20 per page
     page = request.GET.get('page')
@@ -576,7 +672,7 @@ def source_user_inquiry_list(request):
         inquiries = paginator.page(1)
     except EmptyPage:
         inquiries = paginator.page(paginator.num_pages)
-    
+
     context = {
         'inquiries': inquiries,
         'source_user': source_user,
@@ -585,6 +681,291 @@ def source_user_inquiry_list(request):
         'category_filter': category_filter,
         'search': search,
         'inquiries_count': inquiries_queryset.count(),
+        'total_complaints': Complaint.objects.filter(source=source).count(),
+        'total_inquiries': Inquiry.objects.filter(source=source).count(),
     }
-    
+
     return render(request, 'px_sources/source_user_inquiry_list.html', context)
+
+
+@login_required
+@source_user_required
+def source_user_create_complaint(request):
+    """
+    Create a complaint for source users.
+    
+    Simplified form that automatically:
+    - Assigns the user's source
+    - Sets the hospital from the source user's context
+    - Hides admin-only fields
+    """
+    from apps.complaints.forms import PublicComplaintForm
+    from apps.complaints.models import Complaint
+    from apps.complaints.tasks import notify_admins_new_complaint
+    from apps.core.services import AuditService
+    import uuid
+    from datetime import datetime
+
+    source_user = SourceUser.get_active_source_user(request.user)
+    
+    if not source_user or not source_user.can_create_complaints:
+        messages.error(request, _("You don't have permission to create complaints."))
+        return redirect('px_sources:source_user_dashboard')
+
+    source = source_user.source
+
+    if request.method == 'POST':
+        form = PublicComplaintForm(request.POST, request.FILES)
+        
+        # Add Tailwind CSS classes to form fields
+        for field_name, field in form.fields.items():
+            if field.widget.__class__.__name__ == 'TextInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+            elif field.widget.__class__.__name__ == 'Textarea':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition', 'rows': '5'})
+            elif field.widget.__class__.__name__ == 'Select':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white'})
+            elif field.widget.__class__.__name__ == 'DateInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition', 'type': 'date'})
+            elif field.widget.__class__.__name__ == 'EmailInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+            elif field.widget.__class__.__name__ == 'TelInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+        
+        # Auto-populate hospital and location if not provided
+        if not form.data.get('hospital'):
+            from apps.organizations.models import Hospital
+            first_hospital = Hospital.objects.filter(status='active').first()
+            if first_hospital:
+                form.data = form.data.copy()
+                form.data['hospital'] = str(first_hospital.id)
+        
+        if not form.data.get('location'):
+            from apps.organizations.models import Location
+            first_location = Location.objects.first()
+            if first_location:
+                form.data = form.data.copy()
+                form.data['location'] = str(first_location.id)
+        
+        if form.is_valid():
+            try:
+                # Create complaint
+                complaint = form.save(commit=False)
+
+                # Set source automatically
+                complaint.source = source
+
+                # Set hospital (use source user's context)
+                from apps.organizations.models import Hospital
+                # Get the first active hospital or use default logic
+                hospital = Hospital.objects.filter(status='active').first()
+                if hospital:
+                    complaint.hospital = hospital
+
+                # Map complaint_details to description (form field vs model field)
+                complaint.description = form.cleaned_data.get('complaint_details', '')
+
+                # Generate reference number
+                today = datetime.now().strftime("%Y%m%d")
+                random_suffix = str(uuid.uuid4().int)[:6]
+                complaint.reference_number = f"CMP-{today}-{random_suffix}"
+
+                # Set created by
+                complaint.created_by = request.user
+
+                complaint.save()
+                
+                # Create initial update
+                from apps.complaints.models import ComplaintUpdate
+                ComplaintUpdate.objects.create(
+                    complaint=complaint,
+                    update_type="note",
+                    message=f"Complaint submitted by {source.name_en} source user.",
+                    created_by=request.user,
+                )
+                
+                # Trigger AI analysis
+                try:
+                    from apps.complaints.tasks import analyze_complaint_with_ai
+                    analyze_complaint_with_ai.delay(str(complaint.id))
+                except:
+                    pass  # AI analysis is optional
+                
+                # Notify admins
+                try:
+                    notify_admins_new_complaint.delay(str(complaint.id))
+                except:
+                    pass  # Notification is optional
+                
+                # Log audit
+                try:
+                    AuditService.log_event(
+                        event_type="complaint_created_by_source_user",
+                        description=f"Complaint created by source user: {complaint.reference_number}",
+                        user=request.user,
+                        content_object=complaint,
+                        metadata={
+                            'source': source.name_en,
+                            'source_user_id': str(source_user.id),
+                        },
+                    )
+                except:
+                    pass  # Audit logging is optional
+                
+                messages.success(
+                    request,
+                    f"Complaint submitted successfully! Reference: {complaint.reference_number}"
+                )
+                return redirect('px_sources:source_user_complaint_list')
+                
+            except Exception as e:
+                messages.error(request, f"Error creating complaint: {str(e)}")
+        else:
+            messages.error(request, "Please correct the errors below.")
+    else:
+        form = PublicComplaintForm()
+        
+        # Pre-populate hospital (get first active hospital)
+        from apps.organizations.models import Hospital, Location
+        first_hospital = Hospital.objects.filter(status='active').first()
+        if first_hospital:
+            form.initial['hospital'] = first_hospital.id
+        
+        # Pre-populate location (get first location)
+        first_location = Location.objects.first()
+        if first_location:
+            form.initial['location'] = first_location.id
+        
+        # Add Tailwind CSS classes to form fields (for GET request too)
+        for field_name, field in form.fields.items():
+            if field.widget.__class__.__name__ == 'TextInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+            elif field.widget.__class__.__name__ == 'Textarea':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition', 'rows': '5'})
+            elif field.widget.__class__.__name__ == 'Select':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white'})
+            elif field.widget.__class__.__name__ == 'DateInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition', 'type': 'date'})
+            elif field.widget.__class__.__name__ == 'EmailInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+            elif field.widget.__class__.__name__ == 'TelInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+
+    context = {
+        'form': form,
+        'source': source,
+        'source_user': source_user,
+    }
+
+    return render(request, 'px_sources/source_user_create_complaint.html', context)
+
+
+@login_required
+@source_user_required
+def source_user_create_inquiry(request):
+    """
+    Create an inquiry for source users.
+    
+    Simplified form that automatically:
+    - Assigns the user's source
+    - Sets the hospital from the source user's context
+    - Hides admin-only fields
+    """
+    from apps.complaints.forms import PublicInquiryForm
+    from apps.complaints.models import Inquiry
+    import uuid
+    from datetime import datetime
+
+    source_user = SourceUser.get_active_source_user(request.user)
+    
+    if not source_user or not source_user.can_create_inquiries:
+        messages.error(request, _("You don't have permission to create inquiries."))
+        return redirect('px_sources:source_user_dashboard')
+
+    source = source_user.source
+
+    if request.method == 'POST':
+        form = PublicInquiryForm(request.POST)
+        
+        # Add Tailwind CSS classes to form fields
+        for field_name, field in form.fields.items():
+            if field.widget.__class__.__name__ == 'TextInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+            elif field.widget.__class__.__name__ == 'Textarea':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition', 'rows': '5'})
+            elif field.widget.__class__.__name__ == 'EmailInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+            elif field.widget.__class__.__name__ == 'TelInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+        
+        if form.is_valid():
+            try:
+                # Create inquiry
+                inquiry = form.save(commit=False)
+                
+                # Set source automatically
+                inquiry.source = source
+                
+                # Set hospital
+                from apps.organizations.models import Hospital
+                hospital = Hospital.objects.filter(status='active').first()
+                if hospital:
+                    inquiry.hospital = hospital
+                
+                # Generate reference number
+                today = datetime.now().strftime("%Y%m%d")
+                random_suffix = str(uuid.uuid4().int)[:6]
+                inquiry.reference_number = f"INQ-{today}-{random_suffix}"
+                
+                # Set created by
+                inquiry.created_by = request.user
+                
+                inquiry.save()
+                
+                # Log audit
+                from apps.core.services import AuditService
+                try:
+                    AuditService.log_event(
+                        event_type="inquiry_created_by_source_user",
+                        description=f"Inquiry created by source user: {inquiry.reference_number}",
+                        user=request.user,
+                        content_object=inquiry,
+                        metadata={
+                            'source': source.name_en,
+                            'source_user_id': str(source_user.id),
+                        },
+                    )
+                except:
+                    pass  # Audit logging is optional
+                
+                messages.success(
+                    request,
+                    f"Inquiry submitted successfully! Reference: {inquiry.reference_number}"
+                )
+                return redirect('px_sources:source_user_inquiry_list')
+                
+            except Exception as e:
+                messages.error(request, f"Error creating inquiry: {str(e)}")
+        else:
+            messages.error(request, "Please correct the errors below.")
+    else:
+        form = PublicInquiryForm()
+        
+        # Add Tailwind CSS classes to form fields (for GET request too)
+        for field_name, field in form.fields.items():
+            if field.widget.__class__.__name__ == 'TextInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+            elif field.widget.__class__.__name__ == 'Textarea':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition', 'rows': '5'})
+            elif field.widget.__class__.__name__ == 'EmailInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+            elif field.widget.__class__.__name__ == 'TelInput':
+                field.widget.attrs.update({'class': 'w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition'})
+
+    context = {
+        'form': form,
+        'source': source,
+        'source_user': source_user,
+    }
+
+    return render(request, 'px_sources/source_user_create_inquiry.html', context)
diff --git a/apps/px_sources/urls.py b/apps/px_sources/urls.py
index c932856..fdf4273 100644
--- a/apps/px_sources/urls.py
+++ b/apps/px_sources/urls.py
@@ -15,7 +15,11 @@ urlpatterns = [
     path('complaints/', ui_views.source_user_complaint_list, name='source_user_complaint_list'),
     path('inquiries/', ui_views.source_user_inquiry_list, name='source_user_inquiry_list'),
     
-    # PX Sources Management Views
+    # Source User Create (Simplified forms)
+    path('complaints/new/', ui_views.source_user_create_complaint, name='source_user_create_complaint'),
+    path('inquiries/new/', ui_views.source_user_create_inquiry, name='source_user_create_inquiry'),
+
+    # PX Sources Management Views (Admin only)
     path('<uuid:pk>/users/create/', ui_views.source_user_create, name='source_user_create'),
     path('<uuid:pk>/users/<uuid:user_pk>/edit/', ui_views.source_user_edit, name='source_user_edit'),
     path('<uuid:pk>/users/<uuid:user_pk>/delete/', ui_views.source_user_delete, name='source_user_delete'),
diff --git a/apps/px_sources/views.py b/apps/px_sources/views.py
index de380a0..f773db2 100644
--- a/apps/px_sources/views.py
+++ b/apps/px_sources/views.py
@@ -15,24 +15,26 @@ from .serializers import (
     PXSourceListSerializer,
     PXSourceSerializer,
 )
+from .permissions import IsAdminUser, IsSourceUserOrAdmin, IsSourceUserOwnData
 
 
 class PXSourceViewSet(viewsets.ModelViewSet):
     """
     ViewSet for PX Sources with full CRUD operations.
-    
+
     Permissions:
     - PX Admins: Full access to all sources
     - Hospital Admins: Can view and manage sources
-    - Other users: Read-only access
+    - Source Users: Read-only access to their own source
+    - Other users: No access
     """
     queryset = PXSource.objects.all()
-    permission_classes = [IsAuthenticated]
+    permission_classes = [IsAuthenticated, IsAdminUser]
     filterset_fields = ['is_active']
     search_fields = ['name_en', 'name_ar', 'description']
     ordering_fields = ['name_en', 'created_at']
     ordering = ['name_en']
-    
+
     def get_serializer_class(self):
         """Use different serializers based on action"""
         if self.action == 'list':
@@ -42,18 +44,28 @@ class PXSourceViewSet(viewsets.ModelViewSet):
         elif self.action == 'choices':
             return PXSourceChoiceSerializer
         return PXSourceSerializer
-    
+
     def get_queryset(self):
         """Filter sources based on user role"""
         queryset = super().get_queryset()
-        
+
         user = self.request.user
-        
+
         # PX Admins see all sources
         if user.is_px_admin():
             return queryset
         
-        # All other authenticated users see active sources
+        # Hospital Admins see all sources
+        if user.is_hospital_admin():
+            return queryset
+
+        # Source users see only their source (handled by IsSourceUserOrAdmin)
+        if hasattr(user, 'source_user_profile'):
+            source_user = user.source_user_profile
+            if source_user.is_active:
+                return queryset.filter(id=source_user.source.id)
+
+        # Default: active sources only
         return queryset.filter(is_active=True)
     
     def perform_create(self, serializer):
diff --git a/apps/reports/__init__.py b/apps/reports/__init__.py
new file mode 100644
index 0000000..3ebc9d0
--- /dev/null
+++ b/apps/reports/__init__.py
@@ -0,0 +1 @@
+# Reports App - Custom Report Builder
\ No newline at end of file
diff --git a/apps/reports/migrations/__init__.py b/apps/reports/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/apps/reports/models.py b/apps/reports/models.py
new file mode 100644
index 0000000..d057f19
--- /dev/null
+++ b/apps/reports/models.py
@@ -0,0 +1,363 @@
+"""
+Reports models - Custom Report Builder for PX360.
+
+Supports creating, saving, and scheduling custom reports
+across multiple data sources (Complaints, Inquiries, Observations, etc.)
+"""
+from django.conf import settings
+from django.db import models
+from django.utils import timezone
+from apps.core.models import TimeStampedModel, UUIDModel
+
+
+class DataSource(models.TextChoices):
+    """Available data sources for reports."""
+    COMPLAINTS = 'complaints', 'Complaints'
+    INQUIRIES = 'inquiries', 'Inquiries'
+    OBSERVATIONS = 'observations', 'Observations'
+    PX_ACTIONS = 'px_actions', 'PX Actions'
+    SURVEYS = 'surveys', 'Surveys'
+    PHYSICIANS = 'physicians', 'Physician Ratings'
+
+
+class ReportFrequency(models.TextChoices):
+    """Report schedule frequency options."""
+    ONCE = 'once', 'One Time'
+    DAILY = 'daily', 'Daily'
+    WEEKLY = 'weekly', 'Weekly'
+    MONTHLY = 'monthly', 'Monthly'
+    QUARTERLY = 'quarterly', 'Quarterly'
+
+
+class ReportFormat(models.TextChoices):
+    """Export format options."""
+    HTML = 'html', 'View Online'
+    PDF = 'pdf', 'PDF'
+    EXCEL = 'excel', 'Excel'
+    CSV = 'csv', 'CSV'
+
+
+class ChartType(models.TextChoices):
+    """Chart type options."""
+    BAR = 'bar', 'Bar Chart'
+    LINE = 'line', 'Line Chart'
+    PIE = 'pie', 'Pie Chart'
+    DONUT = 'donut', 'Donut Chart'
+    AREA = 'area', 'Area Chart'
+    TABLE = 'table', 'Table Only'
+
+
+class SavedReport(UUIDModel, TimeStampedModel):
+    """
+    Saved report configuration.
+    
+    Stores all settings for a custom report that can be
+    regenerated on demand or scheduled.
+    """
+    name = models.CharField(max_length=200)
+    description = models.TextField(blank=True)
+    
+    # Data source
+    data_source = models.CharField(
+        max_length=50,
+        choices=DataSource.choices,
+        default=DataSource.COMPLAINTS
+    )
+    
+    # Filter configuration (JSON)
+    # Example: {"date_range": "30d", "hospital": "uuid", "status": ["open", "in_progress"]}
+    filter_config = models.JSONField(default=dict, blank=True)
+    
+    # Column configuration (JSON)
+    # Example: ["title", "status", "severity", "department__name", "created_at"]
+    column_config = models.JSONField(default=list, blank=True)
+    
+    # Grouping configuration (JSON)
+    # Example: {"field": "department__name", "aggregation": "count"}
+    grouping_config = models.JSONField(default=dict, blank=True)
+    
+    # Sort configuration (JSON)
+    # Example: [{"field": "created_at", "direction": "desc"}]
+    sort_config = models.JSONField(default=list, blank=True)
+    
+    # Chart configuration (JSON)
+    # Example: {"type": "bar", "x_axis": "department__name", "y_axis": "count"}
+    chart_config = models.JSONField(default=dict, blank=True)
+    
+    # Owner and sharing
+    created_by = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name='saved_reports'
+    )
+    is_shared = models.BooleanField(
+        default=False,
+        help_text="Share with other users in the same hospital"
+    )
+    is_template = models.BooleanField(
+        default=False,
+        help_text="Available as a template for others to use"
+    )
+    
+    # Organization scope
+    hospital = models.ForeignKey(
+        'organizations.Hospital',
+        on_delete=models.CASCADE,
+        related_name='saved_reports',
+        null=True,
+        blank=True
+    )
+    
+    # Metadata
+    last_run_at = models.DateTimeField(null=True, blank=True)
+    last_run_count = models.IntegerField(default=0)
+    
+    class Meta:
+        ordering = ['-created_at']
+        indexes = [
+            models.Index(fields=['data_source', '-created_at']),
+            models.Index(fields=['created_by', '-created_at']),
+            models.Index(fields=['hospital', 'is_shared']),
+        ]
+    
+    def __str__(self):
+        return self.name
+
+
+class ReportSchedule(UUIDModel, TimeStampedModel):
+    """
+    Schedule for automated report generation and delivery.
+    """
+    report = models.ForeignKey(
+        SavedReport,
+        on_delete=models.CASCADE,
+        related_name='schedules'
+    )
+    
+    # Schedule settings
+    frequency = models.CharField(
+        max_length=20,
+        choices=ReportFrequency.choices,
+        default=ReportFrequency.WEEKLY
+    )
+    
+    # Delivery time (hour:minute in 24h format)
+    # Stored as "HH:MM" string
+    delivery_time = models.CharField(
+        max_length=5,
+        default='09:00',
+        help_text="Time to send report (HH:MM format)"
+    )
+    
+    # Day of week for weekly reports (0=Monday, 6=Sunday)
+    day_of_week = models.IntegerField(
+        null=True,
+        blank=True,
+        help_text="For weekly reports: 0=Monday, 6=Sunday"
+    )
+    
+    # Day of month for monthly reports (1-31)
+    day_of_month = models.IntegerField(
+        null=True,
+        blank=True,
+        help_text="For monthly reports: 1-31"
+    )
+    
+    # Export format for scheduled reports
+    export_format = models.CharField(
+        max_length=20,
+        choices=ReportFormat.choices,
+        default=ReportFormat.PDF
+    )
+    
+    # Recipients
+    recipients = models.JSONField(
+        default=list,
+        help_text="List of email addresses to receive the report"
+    )
+    
+    # Status
+    is_active = models.BooleanField(default=True)
+    last_run_at = models.DateTimeField(null=True, blank=True)
+    next_run_at = models.DateTimeField(null=True, blank=True)
+    last_error = models.TextField(blank=True)
+    
+    class Meta:
+        ordering = ['next_run_at']
+    
+    def __str__(self):
+        return f"{self.report.name} - {self.get_frequency_display()}"
+    
+    def calculate_next_run(self):
+        """Calculate the next run time based on frequency."""
+        from datetime import datetime, timedelta
+        
+        now = timezone.now()
+        hour, minute = map(int, self.delivery_time.split(':'))
+        
+        if self.frequency == ReportFrequency.DAILY:
+            next_run = now.replace(hour=hour, minute=minute, second=0, microsecond=0)
+            if next_run <= now:
+                next_run += timedelta(days=1)
+            return next_run
+        
+        elif self.frequency == ReportFrequency.WEEKLY and self.day_of_week is not None:
+            days_ahead = self.day_of_week - now.weekday()
+            if days_ahead <= 0:
+                days_ahead += 7
+            next_run = now.replace(hour=hour, minute=minute, second=0, microsecond=0)
+            next_run += timedelta(days=days_ahead)
+            return next_run
+        
+        elif self.frequency == ReportFrequency.MONTHLY and self.day_of_month:
+            next_run = now.replace(day=min(self.day_of_month, 28), hour=hour, minute=minute, second=0, microsecond=0)
+            if next_run <= now:
+                if now.month == 12:
+                    next_run = next_run.replace(year=now.year + 1, month=1)
+                else:
+                    next_run = next_run.replace(month=now.month + 1)
+            return next_run
+        
+        return None
+
+
+class GeneratedReport(UUIDModel, TimeStampedModel):
+    """
+    Record of a generated report instance.
+    
+    Stores the actual data and metadata for each report run.
+    """
+    saved_report = models.ForeignKey(
+        SavedReport,
+        on_delete=models.CASCADE,
+        related_name='generated_reports',
+        null=True,
+        blank=True
+    )
+    
+    # Report name (copied from saved report for standalone reports)
+    name = models.CharField(max_length=200)
+    data_source = models.CharField(max_length=50, choices=DataSource.choices)
+    
+    # Configuration snapshots
+    filter_config = models.JSONField(default=dict)
+    column_config = models.JSONField(default=list)
+    grouping_config = models.JSONField(default=dict)
+    chart_config = models.JSONField(default=dict)
+    
+    # Generated data
+    data = models.JSONField(default=dict, help_text="The actual report data")
+    summary = models.JSONField(default=dict, help_text="Summary statistics")
+    chart_data = models.JSONField(default=dict, help_text="Chart-formatted data")
+    
+    # Row count
+    row_count = models.IntegerField(default=0)
+    
+    # Generation metadata
+    generated_by = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.SET_NULL,
+        null=True,
+        blank=True,
+        related_name='generated_reports'
+    )
+    
+    # Export files
+    pdf_file = models.FileField(upload_to='reports/pdf/', null=True, blank=True)
+    excel_file = models.FileField(upload_to='reports/excel/', null=True, blank=True)
+    csv_file = models.FileField(upload_to='reports/csv/', null=True, blank=True)
+    
+    # Organization scope
+    hospital = models.ForeignKey(
+        'organizations.Hospital',
+        on_delete=models.CASCADE,
+        related_name='generated_reports',
+        null=True,
+        blank=True
+    )
+    
+    # Expiry (auto-delete old reports)
+    expires_at = models.DateTimeField(null=True, blank=True)
+    
+    class Meta:
+        ordering = ['-created_at']
+        indexes = [
+            models.Index(fields=['data_source', '-created_at']),
+            models.Index(fields=['generated_by', '-created_at']),
+            models.Index(fields=['expires_at']),
+        ]
+    
+    def __str__(self):
+        return f"{self.name} - {self.created_at.strftime('%Y-%m-%d %H:%M')}"
+    
+    def is_expired(self):
+        """Check if the report has expired."""
+        if self.expires_at:
+            return timezone.now() > self.expires_at
+        return False
+
+
+class ReportTemplate(UUIDModel, TimeStampedModel):
+    """
+    Pre-built report templates for quick access.
+    
+    These are system-provided templates that users can use
+    as starting points for their custom reports.
+    """
+    name = models.CharField(max_length=200)
+    description = models.TextField(blank=True)
+    category = models.CharField(max_length=100, blank=True)
+    
+    # Data source
+    data_source = models.CharField(
+        max_length=50,
+        choices=DataSource.choices,
+        default=DataSource.COMPLAINTS
+    )
+    
+    # Template configuration
+    filter_config = models.JSONField(default=dict)
+    column_config = models.JSONField(default=list)
+    grouping_config = models.JSONField(default=dict)
+    sort_config = models.JSONField(default=list)
+    chart_config = models.JSONField(default=dict)
+    
+    # Display
+    icon = models.CharField(max_length=50, blank=True, help_text="Bootstrap icon class")
+    sort_order = models.IntegerField(default=0)
+    is_active = models.BooleanField(default=True)
+    
+    class Meta:
+        ordering = ['sort_order', 'name']
+    
+    def __str__(self):
+        return self.name
+    
+    def create_report(self, user, overrides=None):
+        """Create a SavedReport from this template."""
+        from apps.reports.services import ReportBuilderService
+        
+        config = {
+            'filter_config': self.filter_config.copy(),
+            'column_config': self.column_config.copy(),
+            'grouping_config': self.grouping_config.copy(),
+            'sort_config': self.sort_config.copy(),
+            'chart_config': self.chart_config.copy(),
+        }
+        
+        if overrides:
+            for key, value in overrides.items():
+                if key in config and isinstance(config[key], dict):
+                    config[key].update(value)
+                else:
+                    config[key] = value
+        
+        report = SavedReport.objects.create(
+            name=f"{self.name} - {timezone.now().strftime('%Y-%m-%d')}",
+            description=self.description,
+            data_source=self.data_source,
+            created_by=user,
+            hospital=user.hospital,
+            **config
+        )
+        return report
\ No newline at end of file
diff --git a/apps/reports/services.py b/apps/reports/services.py
new file mode 100644
index 0000000..9ed6241
--- /dev/null
+++ b/apps/reports/services.py
@@ -0,0 +1,609 @@
+"""
+Report generation services for PX360 - Simplified Version
+
+Handles data fetching, filtering, aggregation, and export
+for custom reports across all data sources. No chart functionality.
+"""
+import csv
+import io
+from datetime import datetime, timedelta
+from django.db.models import (
+    Count, Sum, Avg, Min, Max, F, Q, Value,
+    FloatField, IntegerField, CharField, ExpressionWrapper, DurationField
+)
+from django.db.models.functions import TruncDate, TruncMonth, TruncWeek, TruncYear, Extract
+from django.http import HttpResponse
+from django.utils import timezone
+from django.conf import settings
+
+
+class ReportBuilderService:
+    """
+    Service for building custom reports from various data sources.
+    
+    Provides:
+    - Data fetching with dynamic filters
+    - Column selection
+    - Grouping and aggregation
+    - Summary statistics
+    """
+    
+    # Available fields for each data source
+    SOURCE_FIELDS = {
+        'complaints': {
+            'id': {'label': 'ID', 'field': 'id', 'type': 'string'},
+            'reference_number': {'label': 'Reference Number', 'field': 'reference_number', 'type': 'string'},
+            'title': {'label': 'Title', 'field': 'title', 'type': 'string'},
+            'description': {'label': 'Description', 'field': 'description', 'type': 'text'},
+            'status': {'label': 'Status', 'field': 'status', 'type': 'choice'},
+            'severity': {'label': 'Severity', 'field': 'severity', 'type': 'choice'},
+            'priority': {'label': 'Priority', 'field': 'priority', 'type': 'choice'},
+            'source': {'label': 'Source', 'field': 'complaint_source_type', 'type': 'choice'},
+            'hospital': {'label': 'Hospital', 'field': 'hospital__name', 'type': 'string'},
+            'department': {'label': 'Department', 'field': 'department__name', 'type': 'string'},
+            'section': {'label': 'Section', 'field': 'section__name', 'type': 'string'},
+            'patient_name': {'label': 'Patient Name', 'field': 'patient__first_name', 'type': 'string'},
+            'patient_mobile': {'label': 'Patient Mobile', 'field': 'patient__mobile_number', 'type': 'string'},
+            'created_at': {'label': 'Created Date', 'field': 'created_at', 'type': 'datetime'},
+            'updated_at': {'label': 'Updated Date', 'field': 'updated_at', 'type': 'datetime'},
+            'due_at': {'label': 'Due Date', 'field': 'due_at', 'type': 'datetime'},
+            'resolved_at': {'label': 'Resolved Date', 'field': 'resolved_at', 'type': 'datetime'},
+            'is_overdue': {'label': 'Is Overdue', 'field': 'is_overdue', 'type': 'boolean'},
+            'resolution_time_hours': {'label': 'Resolution Time (Hours)', 'field': 'resolution_time_hours', 'type': 'number'},
+            'journey_type': {'label': 'Journey Type', 'field': 'journey__journey_type', 'type': 'string'},
+        },
+        'inquiries': {
+            'id': {'label': 'ID', 'field': 'id', 'type': 'string'},
+            'reference_number': {'label': 'Reference Number', 'field': 'reference_number', 'type': 'string'},
+            'title': {'label': 'Title', 'field': 'title', 'type': 'string'},
+            'description': {'label': 'Description', 'field': 'description', 'type': 'text'},
+            'status': {'label': 'Status', 'field': 'status', 'type': 'choice'},
+            'category': {'label': 'Category', 'field': 'category__name_en', 'type': 'string'},
+            'hospital': {'label': 'Hospital', 'field': 'hospital__name', 'type': 'string'},
+            'department': {'label': 'Department', 'field': 'department__name', 'type': 'string'},
+            'created_at': {'label': 'Created Date', 'field': 'created_at', 'type': 'datetime'},
+            'updated_at': {'label': 'Updated Date', 'field': 'updated_at', 'type': 'datetime'},
+        },
+        'observations': {
+            'id': {'label': 'ID', 'field': 'id', 'type': 'string'},
+            'tracking_code': {'label': 'Tracking Code', 'field': 'tracking_code', 'type': 'string'},
+            'title': {'label': 'Title', 'field': 'title', 'type': 'string'},
+            'description': {'label': 'Description', 'field': 'description', 'type': 'text'},
+            'status': {'label': 'Status', 'field': 'status', 'type': 'choice'},
+            'severity': {'label': 'Severity', 'field': 'severity', 'type': 'choice'},
+            'category': {'label': 'Category', 'field': 'category__name_en', 'type': 'string'},
+            'hospital': {'label': 'Hospital', 'field': 'hospital__name', 'type': 'string'},
+            'department': {'label': 'Department', 'field': 'assigned_department__name', 'type': 'string'},
+            'location': {'label': 'Location', 'field': 'location_text', 'type': 'string'},
+            'created_at': {'label': 'Created Date', 'field': 'created_at', 'type': 'datetime'},
+            'incident_datetime': {'label': 'Incident Date', 'field': 'incident_datetime', 'type': 'datetime'},
+        },
+        'px_actions': {
+            'id': {'label': 'ID', 'field': 'id', 'type': 'string'},
+            'title': {'label': 'Title', 'field': 'title', 'type': 'string'},
+            'description': {'label': 'Description', 'field': 'description', 'type': 'text'},
+            'status': {'label': 'Status', 'field': 'status', 'type': 'choice'},
+            'priority': {'label': 'Priority', 'field': 'priority', 'type': 'choice'},
+            'action_type': {'label': 'Action Type', 'field': 'action_type', 'type': 'choice'},
+            'hospital': {'label': 'Hospital', 'field': 'hospital__name', 'type': 'string'},
+            'department': {'label': 'Department', 'field': 'department__name', 'type': 'string'},
+            'created_at': {'label': 'Created Date', 'field': 'created_at', 'type': 'datetime'},
+            'due_at': {'label': 'Due Date', 'field': 'due_at', 'type': 'datetime'},
+            'completed_at': {'label': 'Completed Date', 'field': 'completed_at', 'type': 'datetime'},
+            'is_overdue': {'label': 'Is Overdue', 'field': 'is_overdue', 'type': 'boolean'},
+        },
+        'surveys': {
+            'id': {'label': 'ID', 'field': 'id', 'type': 'string'},
+            'survey_template': {'label': 'Survey Template', 'field': 'survey_template__name', 'type': 'string'},
+            'status': {'label': 'Status', 'field': 'status', 'type': 'choice'},
+            'total_score': {'label': 'Total Score', 'field': 'total_score', 'type': 'number'},
+            'is_negative': {'label': 'Is Negative', 'field': 'is_negative', 'type': 'boolean'},
+            'patient_type': {'label': 'Patient Type', 'field': 'journey__patient_type', 'type': 'string'},
+            'journey_type': {'label': 'Journey Type', 'field': 'journey__journey_type', 'type': 'string'},
+            'hospital': {'label': 'Hospital', 'field': 'survey_template__hospital__name', 'type': 'string'},
+            'department': {'label': 'Department', 'field': 'journey__department__name', 'type': 'string'},
+            'created_at': {'label': 'Created Date', 'field': 'created_at', 'type': 'datetime'},
+            'completed_at': {'label': 'Completed Date', 'field': 'completed_at', 'type': 'datetime'},
+        },
+        'physicians': {
+            'id': {'label': 'ID', 'field': 'id', 'type': 'string'},
+            'physician_name': {'label': 'Physician Name', 'field': 'physician__full_name', 'type': 'string'},
+            'department': {'label': 'Department', 'field': 'department__name', 'type': 'string'},
+            'month': {'label': 'Month', 'field': 'month', 'type': 'string'},
+            'year': {'label': 'Year', 'field': 'year', 'type': 'number'},
+            'total_surveys': {'label': 'Total Surveys', 'field': 'total_surveys', 'type': 'number'},
+            'avg_rating': {'label': 'Average Rating', 'field': 'avg_rating', 'type': 'number'},
+            'positive_count': {'label': 'Positive', 'field': 'positive_count', 'type': 'number'},
+            'neutral_count': {'label': 'Neutral', 'field': 'neutral_count', 'type': 'number'},
+            'negative_count': {'label': 'Negative', 'field': 'negative_count', 'type': 'number'},
+        },
+    }
+    
+    # Filter options for each data source
+    SOURCE_FILTERS = {
+        'complaints': [
+            {'name': 'date_range', 'label': 'Date Range', 'type': 'daterange'},
+            {'name': 'status', 'label': 'Status', 'type': 'multiselect'},
+            {'name': 'severity', 'label': 'Severity', 'type': 'multiselect'},
+            {'name': 'priority', 'label': 'Priority', 'type': 'multiselect'},
+            {'name': 'hospital', 'label': 'Hospital', 'type': 'select'},
+            {'name': 'department', 'label': 'Department', 'type': 'select'},
+            {'name': 'section', 'label': 'Section', 'type': 'select'},
+            {'name': 'source', 'label': 'Source', 'type': 'multiselect'},
+            {'name': 'is_overdue', 'label': 'Is Overdue', 'type': 'boolean'},
+            {'name': 'journey_type', 'label': 'Journey Type', 'type': 'select'},
+        ],
+        'inquiries': [
+            {'name': 'date_range', 'label': 'Date Range', 'type': 'daterange'},
+            {'name': 'status', 'label': 'Status', 'type': 'multiselect'},
+            {'name': 'hospital', 'label': 'Hospital', 'type': 'select'},
+            {'name': 'department', 'label': 'Department', 'type': 'select'},
+            {'name': 'category', 'label': 'Category', 'type': 'select'},
+        ],
+        'observations': [
+            {'name': 'date_range', 'label': 'Date Range', 'type': 'daterange'},
+            {'name': 'status', 'label': 'Status', 'type': 'multiselect'},
+            {'name': 'severity', 'label': 'Severity', 'type': 'multiselect'},
+            {'name': 'hospital', 'label': 'Hospital', 'type': 'select'},
+            {'name': 'department', 'label': 'Department', 'type': 'select'},
+            {'name': 'category', 'label': 'Category', 'type': 'select'},
+        ],
+        'px_actions': [
+            {'name': 'date_range', 'label': 'Date Range', 'type': 'daterange'},
+            {'name': 'status', 'label': 'Status', 'type': 'multiselect'},
+            {'name': 'priority', 'label': 'Priority', 'type': 'multiselect'},
+            {'name': 'action_type', 'label': 'Action Type', 'type': 'multiselect'},
+            {'name': 'hospital', 'label': 'Hospital', 'type': 'select'},
+            {'name': 'department', 'label': 'Department', 'type': 'select'},
+            {'name': 'is_overdue', 'label': 'Is Overdue', 'type': 'boolean'},
+        ],
+        'surveys': [
+            {'name': 'date_range', 'label': 'Date Range', 'type': 'daterange'},
+            {'name': 'status', 'label': 'Status', 'type': 'multiselect'},
+            {'name': 'is_negative', 'label': 'Is Negative', 'type': 'boolean'},
+            {'name': 'hospital', 'label': 'Hospital', 'type': 'select'},
+            {'name': 'department', 'label': 'Department', 'type': 'select'},
+            {'name': 'patient_type', 'label': 'Patient Type', 'type': 'select'},
+            {'name': 'journey_type', 'label': 'Journey Type', 'type': 'select'},
+        ],
+        'physicians': [
+            {'name': 'month_range', 'label': 'Month Range', 'type': 'monthrange'},
+            {'name': 'hospital', 'label': 'Hospital', 'type': 'select'},
+            {'name': 'department', 'label': 'Department', 'type': 'select'},
+        ],
+    }
+    
+    @classmethod
+    def get_queryset(cls, data_source):
+        """Get the base queryset for a data source."""
+        from apps.complaints.models import Complaint
+        from apps.observations.models import Observation
+        from apps.px_action_center.models import PXAction
+        from apps.surveys.models import SurveyInstance
+        from apps.physicians.models import PhysicianMonthlyRating
+        
+        querysets = {
+            'complaints': Complaint.objects.all(),
+            'inquiries': Complaint.objects.filter(complaint_type='inquiry'),
+            'observations': Observation.objects.all(),
+            'px_actions': PXAction.objects.all(),
+            'surveys': SurveyInstance.objects.all(),
+            'physicians': PhysicianMonthlyRating.objects.all(),
+        }
+        
+        return querysets.get(data_source)
+    
+    @classmethod
+    def apply_filters(cls, queryset, filters, data_source):
+        """Apply filters to a queryset."""
+        # Date range filter
+        if 'date_range' in filters:
+            date_range = filters['date_range']
+            date_field = 'created_at'
+            
+            if date_range == '7d':
+                start_date = timezone.now() - timedelta(days=7)
+            elif date_range == '30d':
+                start_date = timezone.now() - timedelta(days=30)
+            elif date_range == '90d':
+                start_date = timezone.now() - timedelta(days=90)
+            elif date_range == 'ytd':
+                start_date = timezone.now().replace(month=1, day=1)
+            elif date_range == 'custom' and 'start_date' in filters and 'end_date' in filters:
+                start_date = filters['start_date']
+                end_date = filters['end_date']
+                queryset = queryset.filter(**{f'{date_field}__gte': start_date, f'{date_field}__lte': end_date})
+                return queryset
+            else:
+                start_date = timezone.now() - timedelta(days=30)
+            
+            queryset = queryset.filter(**{f'{date_field}__gte': start_date})
+        
+        # Hospital filter
+        if 'hospital' in filters and filters['hospital']:
+            queryset = queryset.filter(hospital_id=filters['hospital'])
+        
+        # Department filter
+        if 'department' in filters and filters['department']:
+            if data_source == 'observations':
+                queryset = queryset.filter(assigned_department_id=filters['department'])
+            elif data_source == 'surveys':
+                queryset = queryset.filter(journey__department_id=filters['department'])
+            else:
+                queryset = queryset.filter(department_id=filters['department'])
+        
+        # Section filter
+        if 'section' in filters and filters['section']:
+            queryset = queryset.filter(section_id=filters['section'])
+        
+        # Status filter
+        if 'status' in filters and filters['status']:
+            if isinstance(filters['status'], list):
+                queryset = queryset.filter(status__in=filters['status'])
+            else:
+                queryset = queryset.filter(status=filters['status'])
+        
+        # Severity filter
+        if 'severity' in filters and filters['severity']:
+            if isinstance(filters['severity'], list):
+                queryset = queryset.filter(severity__in=filters['severity'])
+            else:
+                queryset = queryset.filter(severity=filters['severity'])
+        
+        # Priority filter
+        if 'priority' in filters and filters['priority']:
+            if isinstance(filters['priority'], list):
+                queryset = queryset.filter(priority__in=filters['priority'])
+            else:
+                queryset = queryset.filter(priority=filters['priority'])
+        
+        # Source filter (for complaints)
+        if 'source' in filters and filters['source']:
+            if isinstance(filters['source'], list):
+                queryset = queryset.filter(complaint_source_type__in=filters['source'])
+            else:
+                queryset = queryset.filter(complaint_source_type=filters['source'])
+        
+        # Is overdue filter
+        if 'is_overdue' in filters:
+            if filters['is_overdue'] == 'true' or filters['is_overdue'] is True:
+                queryset = queryset.filter(is_overdue=True)
+            elif filters['is_overdue'] == 'false' or filters['is_overdue'] is False:
+                queryset = queryset.filter(is_overdue=False)
+        
+        # Is negative filter (for surveys)
+        if 'is_negative' in filters:
+            if filters['is_negative'] == 'true' or filters['is_negative'] is True:
+                queryset = queryset.filter(is_negative=True)
+            elif filters['is_negative'] == 'false' or filters['is_negative'] is False:
+                queryset = queryset.filter(is_negative=False)
+        
+        # Journey type filter
+        if 'journey_type' in filters and filters['journey_type']:
+            if data_source == 'complaints':
+                queryset = queryset.filter(journey__journey_type=filters['journey_type'])
+            elif data_source == 'surveys':
+                queryset = queryset.filter(journey__journey_type=filters['journey_type'])
+        
+        # Patient type filter
+        if 'patient_type' in filters and filters['patient_type']:
+            queryset = queryset.filter(journey__patient_type=filters['patient_type'])
+        
+        return queryset
+    
+    @classmethod
+    def apply_grouping(cls, queryset, grouping_config, data_source):
+        """Apply grouping and aggregation to a queryset."""
+        if not grouping_config or 'field' not in grouping_config:
+            return queryset
+        
+        field = grouping_config['field']
+        aggregation = grouping_config.get('aggregation', 'count')
+        
+        # Determine truncation for date fields
+        if 'created_at' in field or 'date' in field.lower():
+            trunc_by = grouping_config.get('trunc_by', 'day')
+            if trunc_by == 'day':
+                queryset = queryset.annotate(period=TruncDate(field))
+            elif trunc_by == 'week':
+                queryset = queryset.annotate(period=TruncWeek(field))
+            elif trunc_by == 'month':
+                queryset = queryset.annotate(period=TruncMonth(field))
+            elif trunc_by == 'year':
+                queryset = queryset.annotate(period=TruncYear(field))
+            field = 'period'
+        
+        # Apply aggregation
+        if aggregation == 'count':
+            return queryset.values(field).annotate(count=Count('id')).order_by(field)
+        elif aggregation == 'sum':
+            sum_field = grouping_config.get('sum_field', 'id')
+            return queryset.values(field).annotate(total=Sum(sum_field)).order_by(field)
+        elif aggregation == 'avg':
+            avg_field = grouping_config.get('avg_field', 'total_score')
+            return queryset.values(field).annotate(average=Avg(avg_field)).order_by(field)
+        
+        return queryset
+    
+    @classmethod
+    def get_field_value(cls, obj, field_path):
+        """Get a value from an object using dot notation."""
+        parts = field_path.split('__')
+        value = obj
+        for part in parts:
+            if value is None:
+                return None
+            if isinstance(value, dict):
+                value = value.get(part)
+            else:
+                value = getattr(value, part, None)
+        return value
+    
+    @classmethod
+    def format_value(cls, value, field_type):
+        """Format a value for display."""
+        if value is None:
+            return ''
+        
+        if field_type == 'datetime':
+            if isinstance(value, str):
+                return value
+            return value.strftime('%Y-%m-%d %H:%M')
+        elif field_type == 'date':
+            if isinstance(value, str):
+                return value
+            return value.strftime('%Y-%m-%d')
+        elif field_type == 'boolean':
+            return 'Yes' if value else 'No'
+        elif field_type == 'number':
+            if isinstance(value, (int, float)):
+                return round(value, 2) if isinstance(value, float) else value
+            return value
+        
+        return str(value) if value else ''
+    
+    @classmethod
+    def generate_report_data(cls, data_source, filter_config, column_config, grouping_config, sort_config=None):
+        """Generate report data with filters, columns, and grouping."""
+        queryset = cls.get_queryset(data_source)
+        queryset = cls.apply_filters(queryset, filter_config, data_source)
+        
+        # Determine columns to select
+        if not column_config:
+            column_config = list(cls.SOURCE_FIELDS.get(data_source, {}).keys())[:10]
+        
+        fields_info = cls.SOURCE_FIELDS.get(data_source, {})
+        
+        if grouping_config and 'field' in grouping_config:
+            # Grouped data
+            grouped_data = cls.apply_grouping(queryset, grouping_config, data_source)
+            
+            rows = []
+            for item in grouped_data:
+                row = {}
+                for key, value in item.items():
+                    row[key] = cls.format_value(value, 'number' if key == 'count' else 'string')
+                rows.append(row)
+            
+            return {
+                'rows': rows,
+                'columns': list(grouped_data[0].keys()) if grouped_data else ['field', 'count'],
+                'grouped': True,
+            }
+        else:
+            # Regular data
+            select_fields = []
+            for col in column_config:
+                if col in fields_info:
+                    select_fields.append(fields_info[col]['field'])
+            
+            # Apply sorting
+            if sort_config:
+                for sort_item in sort_config:
+                    field = sort_item.get('field')
+                    direction = sort_item.get('direction', 'asc')
+                    if field in fields_info:
+                        order_field = fields_info[field]['field']
+                        if direction == 'desc':
+                            order_field = f'-{order_field}'
+                        queryset = queryset.order_by(order_field)
+            
+            # Limit results for performance
+            queryset = queryset[:1000]
+            
+            rows = []
+            for obj in queryset:
+                row = {}
+                for col in column_config:
+                    if col in fields_info:
+                        field_info = fields_info[col]
+                        value = cls.get_field_value(obj, field_info['field'])
+                        row[col] = cls.format_value(value, field_info['type'])
+                rows.append(row)
+            
+            # Return both keys (for data access) and labels (for display)
+            column_labels = [fields_info.get(col, {'label': col})['label'] for col in column_config]
+            
+            return {
+                'rows': rows,
+                'columns': column_labels,
+                'column_keys': column_config,  # Add field keys for data access
+                'grouped': False,
+            }
+    
+    @classmethod
+    def generate_summary(cls, data_source, filter_config):
+        """Generate summary statistics for a data source."""
+        queryset = cls.get_queryset(data_source)
+        queryset = cls.apply_filters(queryset, filter_config, data_source)
+        
+        summary = {
+            'total_count': queryset.count(),
+        }
+        
+        if data_source == 'complaints':
+            summary['open_count'] = queryset.filter(status='open').count()
+            summary['resolved_count'] = queryset.filter(status='resolved').count()
+            summary['overdue_count'] = queryset.filter(is_overdue=True).count()
+            # Calculate average resolution time in hours (SQLite-compatible)
+            resolved_complaints = queryset.filter(resolved_at__isnull=False)
+            if resolved_complaints.exists():
+                # Calculate in Python to avoid SQLite DurationField limitation
+                total_hours = 0
+                count = 0
+                for complaint in resolved_complaints.values('created_at', 'resolved_at'):
+                    if complaint['created_at'] and complaint['resolved_at']:
+                        delta = complaint['resolved_at'] - complaint['created_at']
+                        total_hours += delta.total_seconds() / 3600.0
+                        count += 1
+                summary['avg_resolution_time'] = round(total_hours / count, 2) if count > 0 else 0
+            else:
+                summary['avg_resolution_time'] = 0
+        
+        elif data_source == 'surveys':
+            summary['completed_count'] = queryset.filter(status='completed').count()
+            summary['pending_count'] = queryset.filter(status='pending').count()
+            summary['negative_count'] = queryset.filter(is_negative=True).count()
+            summary['avg_score'] = queryset.filter(
+                status='completed'
+            ).aggregate(avg=Avg('total_score'))['avg'] or 0
+        
+        elif data_source == 'px_actions':
+            summary['open_count'] = queryset.filter(status='open').count()
+            summary['completed_count'] = queryset.filter(status='completed').count()
+            summary['overdue_count'] = queryset.filter(is_overdue=True).count()
+        
+        elif data_source == 'observations':
+            summary['new_count'] = queryset.filter(status='new').count()
+            summary['resolved_count'] = queryset.filter(status='resolved').count()
+        
+        return summary
+
+
+class ReportExportService:
+    """Service for exporting reports to various formats."""
+    
+    @classmethod
+    def export_to_csv(cls, data, columns, column_keys=None, filename='report'):
+        """Export report data to CSV.
+        
+        Args:
+            data: List of row dicts
+            columns: List of column labels (for header row)
+            column_keys: List of column keys (for data access). If None, uses columns.
+            filename: Output filename without extension
+        """
+        response = HttpResponse(content_type='text/csv')
+        response['Content-Disposition'] = f'attachment; filename="{filename}.csv"'
+        
+        writer = csv.writer(response)
+        writer.writerow(columns)  # Write header row with labels
+        
+        # Use column_keys for data access if provided, otherwise use columns
+        keys = column_keys if column_keys else columns
+        
+        for row in data:
+            writer.writerow([row.get(key, '') for key in keys])
+        
+        return response
+    
+    @classmethod
+    def export_to_excel(cls, data, columns, column_keys=None, filename='report'):
+        """Export report data to Excel (XLSX).
+        
+        Args:
+            data: List of row dicts
+            columns: List of column labels (for header row)
+            column_keys: List of column keys (for data access). If None, uses columns.
+            filename: Output filename without extension
+        """
+        try:
+            import openpyxl
+            from openpyxl.styles import Font, PatternFill, Alignment
+            from openpyxl.utils import get_column_letter
+        except ImportError:
+            # Fall back to CSV if openpyxl not available
+            return cls.export_to_csv(data, columns, column_keys, filename)
+        
+        wb = openpyxl.Workbook()
+        ws = wb.active
+        ws.title = 'Report'
+        
+        # Header row
+        header_fill = PatternFill(start_color='1F4E79', end_color='1F4E79', fill_type='solid')
+        header_font = Font(bold=True, color='FFFFFF')
+        
+        for col_idx, col_name in enumerate(columns, 1):
+            cell = ws.cell(row=1, column=col_idx, value=col_name)
+            cell.fill = header_fill
+            cell.font = header_font
+            cell.alignment = Alignment(horizontal='center')
+        
+        # Use column_keys for data access if provided, otherwise use columns
+        keys = column_keys if column_keys else columns
+        
+        # Data rows
+        for row_idx, row_data in enumerate(data, 2):
+            for col_idx, key in enumerate(keys, 1):
+                value = row_data.get(key, '')
+                ws.cell(row=row_idx, column=col_idx, value=str(value) if value else '')
+        
+        # Auto-adjust column widths
+        for col_idx, col_name in enumerate(columns, 1):
+            max_length = len(str(col_name))
+            for row in ws.iter_rows(min_row=2, max_row=ws.max_row, min_col=col_idx, max_col=col_idx):
+                for cell in row:
+                    if cell.value:
+                        max_length = max(max_length, len(str(cell.value)))
+            ws.column_dimensions[get_column_letter(col_idx)].width = min(max_length + 2, 50)
+        
+        # Create response
+        response = HttpResponse(
+            content_type='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        )
+        response['Content-Disposition'] = f'attachment; filename="{filename}.xlsx"'
+        
+        wb.save(response)
+        return response
+    
+    @classmethod
+    def export_to_pdf(cls, data, columns, column_keys=None, title='Report', filename='report'):
+        """Export report data to PDF.
+        
+        Args:
+            data: List of row dicts
+            columns: List of column labels (for header row)
+            column_keys: List of column keys (for data access). If None, uses columns.
+            title: Report title
+            filename: Output filename without extension
+        """
+        from django.template.loader import render_to_string
+        
+        # Use column_keys for data access if provided, otherwise use columns
+        keys = column_keys if column_keys else columns
+        
+        # Prepare data with proper column access
+        formatted_data = []
+        for row in data:
+            formatted_row = {col: row.get(key, '') for col, key in zip(columns, keys)}
+            formatted_data.append(formatted_row)
+        
+        try:
+            from weasyprint import HTML
+            
+            html_content = render_to_string('reports/report_pdf.html', {
+                'title': title,
+                'columns': columns,
+                'data': formatted_data,
+                'generated_at': timezone.now(),
+            })
+            
+            response = HttpResponse(content_type='application/pdf')
+            response['Content-Disposition'] = f'attachment; filename="{filename}.pdf"'
+            
+            HTML(string=html_content).write_pdf(response)
+            return response
+            
+        except ImportError:
+            # Fall back to CSV if weasyprint not available
+            return cls.export_to_csv(data, columns, column_keys, filename)
diff --git a/apps/reports/urls.py b/apps/reports/urls.py
new file mode 100644
index 0000000..4a10f18
--- /dev/null
+++ b/apps/reports/urls.py
@@ -0,0 +1,28 @@
+"""
+Reports App URL Configuration
+"""
+from django.urls import path
+from . import views
+
+app_name = 'reports'
+
+urlpatterns = [
+    # Report Builder
+    path('', views.report_builder, name='builder'),
+    path('preview/', views.report_preview_api, name='preview_api'),
+    path('save/', views.save_report, name='save_report'),
+    
+    # Saved Reports
+    path('saved/', views.saved_reports_list, name='saved_reports'),
+    path('saved/<uuid:report_id>/', views.report_detail, name='report_detail'),
+    path('saved/<uuid:report_id>/delete/', views.delete_report, name='delete_report'),
+    path('saved/<uuid:report_id>/export/<str:export_format>/', views.export_report, name='export_report'),
+    
+    # Templates
+    path('templates/', views.report_templates, name='templates'),
+    path('templates/<uuid:template_id>/use/', views.use_template, name='use_template'),
+    
+    # API Endpoints
+    path('api/filter-options/', views.filter_options_api, name='filter_options_api'),
+    path('api/fields/', views.available_fields_api, name='available_fields_api'),
+]
\ No newline at end of file
diff --git a/apps/reports/views.py b/apps/reports/views.py
new file mode 100644
index 0000000..f29d336
--- /dev/null
+++ b/apps/reports/views.py
@@ -0,0 +1,437 @@
+"""
+Report Builder UI Views - Simplified Version
+
+Handles the visual report builder interface, saved reports,
+and exports. No chart functionality.
+"""
+import json
+from django.contrib.auth.decorators import login_required
+from django.contrib import messages
+from django.http import JsonResponse, HttpResponse
+from django.shortcuts import render, redirect, get_object_or_404
+from django.views.decorators.http import require_POST, require_GET
+from django.views.decorators.csrf import ensure_csrf_cookie
+from django.utils import timezone
+from django.core.paginator import Paginator
+
+from apps.organizations.models import Department, Hospital
+from .models import (
+    SavedReport, GeneratedReport, ReportTemplate,
+    DataSource, ReportFormat
+)
+from .services import ReportBuilderService, ReportExportService
+
+
+@login_required
+@ensure_csrf_cookie
+def report_builder(request):
+    """
+    Visual report builder interface.
+    
+    Allows creating custom reports with:
+    - Data source selection
+    - Dynamic filters
+    - Column selection
+    - Chart configuration
+    """
+    user = request.user
+    
+    # Get hospitals for filter
+    hospitals = Hospital.objects.filter(status='active')
+    if not user.is_px_admin() and user.hospital:
+        hospitals = hospitals.filter(id=user.hospital.id)
+    
+    # Get saved reports
+    saved_reports = SavedReport.objects.filter(
+        created_by=user
+    ).order_by('-created_at')[:10]
+    
+    context = {
+        'hospitals': hospitals,
+        'saved_reports': saved_reports,
+        'data_sources': DataSource.choices,
+    }
+    
+    return render(request, 'reports/report_builder.html', context)
+
+
+@login_required
+def report_preview_api(request):
+    """
+    API endpoint to preview report data.
+    
+    Returns JSON with:
+    - Report data rows
+    - Summary statistics
+    - Chart data
+    """
+    if request.method != 'POST':
+        return JsonResponse({'error': 'POST required'}, status=405)
+    
+    try:
+        data = json.loads(request.body)
+    except json.JSONDecodeError:
+        return JsonResponse({'error': 'Invalid JSON'}, status=400)
+    
+    data_source = data.get('data_source', 'complaints')
+    filter_config = data.get('filter_config', {})
+    column_config = data.get('column_config', [])
+    grouping_config = data.get('grouping_config', {})
+    chart_config = data.get('chart_config', {})
+    sort_config = data.get('sort_config', [])
+    
+    # Apply user's hospital restriction
+    user = request.user
+    if not user.is_px_admin() and user.hospital:
+        filter_config['hospital'] = str(user.hospital.id)
+    
+    # Generate report data
+    report_data = ReportBuilderService.generate_report_data(
+        data_source=data_source,
+        filter_config=filter_config,
+        column_config=column_config,
+        grouping_config=grouping_config,
+        sort_config=sort_config
+    )
+    
+    # Generate summary
+    summary = ReportBuilderService.generate_summary(data_source, filter_config)
+    
+    return JsonResponse({
+        'success': True,
+        'data': report_data,
+        'summary': summary,
+    })
+
+
+@login_required
+def save_report(request):
+    """Save a report configuration."""
+    if request.method != 'POST':
+        return JsonResponse({'error': 'POST required'}, status=405)
+    
+    try:
+        data = json.loads(request.body)
+    except json.JSONDecodeError:
+        return JsonResponse({'error': 'Invalid JSON'}, status=400)
+    
+    report_id = data.get('id')
+    
+    if report_id:
+        # Update existing report
+        report = get_object_or_404(SavedReport, id=report_id, created_by=request.user)
+        report.name = data.get('name', report.name)
+        report.description = data.get('description', report.description)
+        report.data_source = data.get('data_source', report.data_source)
+        report.filter_config = data.get('filter_config', report.filter_config)
+        report.column_config = data.get('column_config', report.column_config)
+        report.grouping_config = data.get('grouping_config', report.grouping_config)
+        report.sort_config = data.get('sort_config', report.sort_config)
+        report.is_shared = data.get('is_shared', report.is_shared)
+        report.save()
+    else:
+        # Create new report
+        report = SavedReport.objects.create(
+            name=data.get('name', 'Untitled Report'),
+            description=data.get('description', ''),
+            data_source=data.get('data_source', 'complaints'),
+            filter_config=data.get('filter_config', {}),
+            column_config=data.get('column_config', []),
+            grouping_config=data.get('grouping_config', {}),
+            sort_config=data.get('sort_config', []),
+            is_shared=data.get('is_shared', False),
+            created_by=request.user,
+            hospital=request.user.hospital,
+        )
+    
+    return JsonResponse({
+        'success': True,
+        'report_id': str(report.id),
+        'message': 'Report saved successfully'
+    })
+
+
+@login_required
+def saved_reports_list(request):
+    """List all saved reports."""
+    user = request.user
+    
+    # Get user's reports and shared reports
+    queryset = SavedReport.objects.filter(
+        created_by=user
+    ) | SavedReport.objects.filter(
+        is_shared=True,
+        hospital=user.hospital
+    )
+    
+    # Remove duplicates and order
+    queryset = queryset.distinct().order_by('-created_at')
+    
+    # Filter by data source
+    data_source = request.GET.get('data_source')
+    if data_source:
+        queryset = queryset.filter(data_source=data_source)
+    
+    # Search
+    search = request.GET.get('search', '')
+    if search:
+        queryset = queryset.filter(name__icontains=search)
+    
+    # Pagination
+    paginator = Paginator(queryset, 25)
+    page_number = request.GET.get('page', 1)
+    page_obj = paginator.get_page(page_number)
+    
+    context = {
+        'page_obj': page_obj,
+        'reports': page_obj.object_list,
+        'data_sources': DataSource.choices,
+        'search': search,
+        'selected_source': data_source,
+    }
+    
+    return render(request, 'reports/saved_reports.html', context)
+
+
+@login_required
+def report_detail(request, report_id):
+    """View a saved report with live data."""
+    user = request.user
+    
+    report = get_object_or_404(SavedReport, id=report_id)
+    
+    # Check access
+    if report.created_by != user and not (report.is_shared and report.hospital == user.hospital):
+        if not user.is_px_admin():
+            messages.error(request, "You don't have access to this report.")
+            return redirect('reports:saved_reports')
+    
+    # Apply user's hospital restriction
+    filter_config = report.filter_config.copy()
+    if not user.is_px_admin() and user.hospital:
+        filter_config['hospital'] = str(user.hospital.id)
+    
+    # Generate report data
+    report_data = ReportBuilderService.generate_report_data(
+        data_source=report.data_source,
+        filter_config=filter_config,
+        column_config=report.column_config,
+        grouping_config=report.grouping_config,
+        sort_config=report.sort_config
+    )
+    
+    # Generate summary
+    summary = ReportBuilderService.generate_summary(report.data_source, filter_config)
+    
+    # Update last run
+    report.last_run_at = timezone.now()
+    report.last_run_count = len(report_data.get('rows', []))
+    report.save(update_fields=['last_run_at', 'last_run_count'])
+    
+    context = {
+        'report': report,
+        'data': report_data,
+        'summary': summary,
+        'source_fields': ReportBuilderService.SOURCE_FIELDS.get(report.data_source, {}),
+    }
+    
+    return render(request, 'reports/report_detail.html', context)
+
+
+@login_required
+def delete_report(request, report_id):
+    """Delete a saved report."""
+    report = get_object_or_404(SavedReport, id=report_id, created_by=request.user)
+    
+    if request.method == 'POST':
+        report.delete()
+        messages.success(request, 'Report deleted successfully.')
+        return redirect('reports:saved_reports')
+    
+    return render(request, 'reports/report_confirm_delete.html', {'report': report})
+
+
+@login_required
+def export_report(request, report_id, export_format):
+    """Export a report to Excel, PDF, or CSV."""
+    user = request.user
+    
+    report = get_object_or_404(SavedReport, id=report_id)
+    
+    # Check access
+    if report.created_by != user and not (report.is_shared and report.hospital == user.hospital):
+        if not user.is_px_admin():
+            messages.error(request, "You don't have access to this report.")
+            return redirect('reports:saved_reports')
+    
+    # Apply user's hospital restriction
+    filter_config = report.filter_config.copy()
+    if not user.is_px_admin() and user.hospital:
+        filter_config['hospital'] = str(user.hospital.id)
+    
+    # Generate report data
+    report_data = ReportBuilderService.generate_report_data(
+        data_source=report.data_source,
+        filter_config=filter_config,
+        column_config=report.column_config,
+        grouping_config=report.grouping_config,
+        sort_config=report.sort_config
+    )
+    
+    rows = report_data.get('rows', [])
+    columns = report_data.get('columns', [])
+    column_keys = report_data.get('column_keys', columns)  # Use keys if available, fallback to labels
+    
+    # Generate filename
+    filename = f"{report.name.replace(' ', '_')}_{timezone.now().strftime('%Y%m%d')}"
+    
+    # Export based on format
+    if export_format == 'csv':
+        return ReportExportService.export_to_csv(rows, columns, column_keys, filename)
+    elif export_format == 'excel':
+        return ReportExportService.export_to_excel(rows, columns, column_keys, filename)
+    elif export_format == 'pdf':
+        return ReportExportService.export_to_pdf(rows, columns, column_keys, report.name, filename)
+    else:
+        messages.error(request, f'Unsupported export format: {export_format}')
+        return redirect('reports:report_detail', report_id=report_id)
+
+
+@login_required
+def report_templates(request):
+    """List available report templates."""
+    templates = ReportTemplate.objects.filter(is_active=True).order_by('category', 'sort_order', 'name')
+    
+    # Group by category
+    categories = {}
+    for template in templates:
+        cat = template.category or 'General'
+        if cat not in categories:
+            categories[cat] = []
+        categories[cat].append(template)
+    
+    context = {
+        'categories': categories,
+        'templates': templates,
+    }
+    
+    return render(request, 'reports/report_templates.html', context)
+
+
+@login_required
+def use_template(request, template_id):
+    """Create a report from a template."""
+    template = get_object_or_404(ReportTemplate, id=template_id, is_active=True)
+    
+    if request.method == 'POST':
+        # Create report from template with overrides
+        overrides = {
+            'name': request.POST.get('name', f"{template.name} - {timezone.now().strftime('%Y-%m-%d')}"),
+        }
+        
+        # Apply any filter overrides from the form
+        for key, value in request.POST.items():
+            if key.startswith('filter_'):
+                filter_key = key[7:]  # Remove 'filter_' prefix
+                if 'filter_config' not in overrides:
+                    overrides['filter_config'] = template.filter_config.copy()
+                overrides['filter_config'][filter_key] = value
+        
+        report = template.create_report(request.user, overrides)
+        messages.success(request, f'Report created from template: {template.name}')
+        return redirect('reports:report_detail', report_id=report.id)
+    
+    # Get available filter options
+    hospitals = Hospital.objects.filter(status='active')
+    if not request.user.is_px_admin() and request.user.hospital:
+        hospitals = hospitals.filter(id=request.user.hospital.id)
+    
+    context = {
+        'template': template,
+        'hospitals': hospitals,
+        'source_filters': ReportBuilderService.SOURCE_FILTERS.get(template.data_source, []),
+    }
+    
+    return render(request, 'reports/use_template.html', context)
+
+
+@login_required
+def filter_options_api(request):
+    """API endpoint to get filter options for a data source."""
+    data_source = request.GET.get('data_source', 'complaints')
+    
+    options = {}
+    
+    # Status options - use defined choices, not database queries
+    if data_source == 'complaints':
+        from apps.complaints.models import Complaint
+        # Get unique status values from model choices
+        options['status'] = [choice[0] for choice in Complaint.STATUS_CHOICES] if hasattr(Complaint, 'STATUS_CHOICES') else ['open', 'in_progress', 'resolved', 'closed']
+        options['severity'] = ['low', 'medium', 'high', 'critical']
+        options['priority'] = ['low', 'medium', 'high', 'urgent']
+        # Get unique source types from model choices or use defaults
+        options['source'] = ['walk_in', 'call', 'email', 'website', 'social_media', 'app']
+    
+    elif data_source == 'inquiries':
+        from apps.complaints.models import Complaint
+        options['status'] = [choice[0] for choice in Complaint.STATUS_CHOICES] if hasattr(Complaint, 'STATUS_CHOICES') else ['open', 'in_progress', 'resolved', 'closed']
+    
+    elif data_source == 'observations':
+        from apps.observations.models import Observation, ObservationStatus
+        options['status'] = [s.value for s in ObservationStatus]
+        options['severity'] = ['low', 'medium', 'high', 'critical']
+    
+    elif data_source == 'surveys':
+        options['status'] = ['pending', 'sent', 'completed', 'expired']
+        options['patient_type'] = ['inpatient', 'outpatient', 'emergency']
+        options['journey_type'] = ['admission', 'discharge', 'visit']
+    
+    elif data_source == 'px_actions':
+        options['status'] = ['open', 'in_progress', 'completed', 'closed']
+        options['priority'] = ['low', 'medium', 'high', 'urgent']
+    
+    elif data_source == 'physicians':
+        options['journey_type'] = ['inpatient', 'outpatient', 'emergency']
+    
+    # Hospital options
+    hospitals = Hospital.objects.filter(status='active')
+    if not request.user.is_px_admin() and request.user.hospital:
+        hospitals = hospitals.filter(id=request.user.hospital.id)
+    options['hospitals'] = list(hospitals.values('id', 'name'))
+    
+    # Department options (filtered by hospital if provided)
+    hospital_id = request.GET.get('hospital')
+    departments = Department.objects.filter(status='active')
+    if hospital_id:
+        departments = departments.filter(hospital_id=hospital_id)
+    elif not request.user.is_px_admin() and request.user.hospital:
+        departments = departments.filter(hospital=request.user.hospital)
+    options['departments'] = list(departments.values('id', 'name'))
+    
+    # Available columns for the data source
+    fields = ReportBuilderService.SOURCE_FIELDS.get(data_source, {})
+    # Default columns (first 8 fields)
+    default_columns = list(fields.keys())[:8]
+    options['columns'] = [
+        {
+            'key': key,
+            'label': info['label'],
+            'type': info['type'],
+            'selected': key in default_columns
+        }
+        for key, info in fields.items()
+    ]
+    
+    return JsonResponse(options)
+
+
+@login_required
+def available_fields_api(request):
+    """API endpoint to get available fields for a data source."""
+    data_source = request.GET.get('data_source', 'complaints')
+    
+    fields = ReportBuilderService.SOURCE_FIELDS.get(data_source, {})
+    
+    return JsonResponse({
+        'fields': {k: {'label': v['label'], 'type': v['type']} for k, v in fields.items()}
+    })
\ No newline at end of file
diff --git a/apps/standards/urls.py b/apps/standards/urls.py
index 6e77a8c..0b8172b 100644
--- a/apps/standards/urls.py
+++ b/apps/standards/urls.py
@@ -10,11 +10,14 @@ from apps.standards.views import (
     standards_dashboard,
     department_standards_view,
     standard_detail,
+    standard_create,
+    standard_update,
+    standard_delete,
     standard_compliance_update,
     standard_attachment_upload,
+    standard_attachment_delete,
     standards_search,
     get_compliance_status,
-    standard_create,
     create_compliance_ajax,
     update_compliance_ajax,
     source_list,
@@ -29,44 +32,41 @@ from apps.standards.views import (
 
 # API Router
 router = DefaultRouter()
-router.register(r'sources', StandardSourceViewSet, basename='standard-source')
-router.register(r'categories', StandardCategoryViewSet, basename='standard-category')
-router.register(r'standards', StandardViewSet, basename='standard')
-router.register(r'compliance', StandardComplianceViewSet, basename='standard-compliance')
-router.register(r'attachments', StandardAttachmentViewSet, basename='standard-attachment')
+router.register(r"sources", StandardSourceViewSet, basename="standard-source")
+router.register(r"categories", StandardCategoryViewSet, basename="standard-category")
+router.register(r"standards", StandardViewSet, basename="standard")
+router.register(r"compliance", StandardComplianceViewSet, basename="standard-compliance")
+router.register(r"attachments", StandardAttachmentViewSet, basename="standard-attachment")
 
-app_name = 'standards'
+app_name = "standards"
 
 urlpatterns = [
-    # API endpoints
-    path('api/', include(router.urls)),
-
-    # API endpoint for compliance status
-    path('api/compliance/<uuid:department_id>/<uuid:standard_id>/', get_compliance_status, name='compliance_status'),
-
+    # Custom AJAX endpoints (MUST be before router to take precedence)
+    path("api/compliance/create/", create_compliance_ajax, name="compliance_create_ajax"),
+    path("api/compliance/update/", update_compliance_ajax, name="compliance_update_ajax"),
+    path("api/compliance/<uuid:department_id>/<uuid:standard_id>/", get_compliance_status, name="compliance_status"),
+    # API endpoints (router)
+    path("api/", include(router.urls)),
     # UI Views
-    path('', standards_dashboard, name='dashboard'),
-    path('search/', standards_search, name='search'),
-    path('departments/<uuid:pk>/', department_standards_view, name='department_standards'),
-    path('departments/<uuid:department_id>/create-standard/', standard_create, name='standard_create'),
-    path('standards/create/', standard_create, name='standard_create_global'),
-    path('standards/<uuid:pk>/', standard_detail, name='standard_detail'),
-    path('compliance/<uuid:compliance_id>/update/', standard_compliance_update, name='standard_compliance_update'),
-    path('attachments/upload/<uuid:compliance_id>/', standard_attachment_upload, name='attachment_upload'),
-
-    # AJAX endpoints
-    path('api/compliance/create/', create_compliance_ajax, name='compliance_create_ajax'),
-    path('api/compliance/update/', update_compliance_ajax, name='compliance_update_ajax'),
-
+    path("", standards_dashboard, name="dashboard"),
+    path("search/", standards_search, name="search"),
+    path("departments/<uuid:pk>/", department_standards_view, name="department_standards"),
+    path("departments/<uuid:department_id>/create-standard/", standard_create, name="standard_create"),
+    path("standards/create/", standard_create, name="standard_create_global"),
+    path("standards/<uuid:pk>/update/", standard_update, name="standard_update"),
+    path("standards/<uuid:pk>/delete/", standard_delete, name="standard_delete"),
+    path("standards/<uuid:pk>/", standard_detail, name="standard_detail"),
+    path("compliance/<uuid:compliance_id>/update/", standard_compliance_update, name="standard_compliance_update"),
+    path("attachments/upload/<uuid:compliance_id>/", standard_attachment_upload, name="attachment_upload"),
+    path("attachments/<uuid:pk>/delete/", standard_attachment_delete, name="attachment_delete"),
     # Source Management
-    path('sources/', source_list, name='source_list'),
-    path('sources/create/', source_create, name='source_create'),
-    path('sources/<uuid:pk>/update/', source_update, name='source_update'),
-    path('sources/<uuid:pk>/delete/', source_delete, name='source_delete'),
-
+    path("sources/", source_list, name="source_list"),
+    path("sources/create/", source_create, name="source_create"),
+    path("sources/<uuid:pk>/update/", source_update, name="source_update"),
+    path("sources/<uuid:pk>/delete/", source_delete, name="source_delete"),
     # Category Management
-    path('categories/', category_list, name='category_list'),
-    path('categories/create/', category_create, name='category_create'),
-    path('categories/<uuid:pk>/update/', category_update, name='category_update'),
-    path('categories/<uuid:pk>/delete/', category_delete, name='category_delete'),
+    path("categories/", category_list, name="category_list"),
+    path("categories/create/", category_create, name="category_create"),
+    path("categories/<uuid:pk>/update/", category_update, name="category_update"),
+    path("categories/<uuid:pk>/delete/", category_delete, name="category_delete"),
 ]
diff --git a/apps/standards/views.py b/apps/standards/views.py
index 23c7474..fe59eff 100644
--- a/apps/standards/views.py
+++ b/apps/standards/views.py
@@ -10,117 +10,120 @@ from django.utils import timezone
 from datetime import datetime
 import json
 
-from apps.standards.models import (
-    StandardSource,
-    StandardCategory,
-    Standard,
-    StandardCompliance,
-    StandardAttachment
-)
+from apps.standards.models import StandardSource, StandardCategory, Standard, StandardCompliance, StandardAttachment
 from apps.organizations.models import Department
 from apps.standards.forms import (
     StandardSourceForm,
     StandardCategoryForm,
     StandardForm,
     StandardComplianceForm,
-    StandardAttachmentForm
+    StandardAttachmentForm,
 )
 
 
 # ==================== API ViewSets ====================
 
+
 class StandardSourceViewSet(viewsets.ModelViewSet):
     queryset = StandardSource.objects.all()
-    filterset_fields = ['is_active']
-    search_fields = ['name', 'name_ar', 'code']
-    ordering = ['name']
+    filterset_fields = ["is_active"]
+    search_fields = ["name", "name_ar", "code"]
+    ordering = ["name"]
 
     def get_serializer_class(self):
         from apps.standards.serializers import StandardSourceSerializer
+
         return StandardSourceSerializer
 
 
 class StandardCategoryViewSet(viewsets.ModelViewSet):
     queryset = StandardCategory.objects.all()
-    filterset_fields = ['is_active']
-    search_fields = ['name', 'name_ar']
-    ordering = ['order', 'name']
+    filterset_fields = ["is_active"]
+    search_fields = ["name", "name_ar"]
+    ordering = ["order", "name"]
 
     def get_serializer_class(self):
         from apps.standards.serializers import StandardCategorySerializer
+
         return StandardCategorySerializer
 
 
 class StandardViewSet(viewsets.ModelViewSet):
     queryset = Standard.objects.all()
-    filterset_fields = ['source', 'category', 'department', 'is_active']
-    search_fields = ['code', 'title', 'title_ar', 'description']
-    ordering = ['source', 'category', 'code']
+    filterset_fields = ["source", "category", "department", "is_active"]
+    search_fields = ["code", "title", "title_ar", "description"]
+    ordering = ["source", "category", "code"]
 
     def get_serializer_class(self):
         from apps.standards.serializers import StandardSerializer
+
         return StandardSerializer
 
 
 class StandardComplianceViewSet(viewsets.ModelViewSet):
     queryset = StandardCompliance.objects.all()
-    filterset_fields = ['department', 'standard', 'status']
-    search_fields = ['department__name', 'standard__code', 'notes']
-    ordering = ['-created_at']
+    filterset_fields = ["department", "standard", "status"]
+    search_fields = ["department__name", "standard__code", "notes"]
+    ordering = ["-created_at"]
 
     def get_serializer_class(self):
         from apps.standards.serializers import StandardComplianceSerializer
+
         return StandardComplianceSerializer
 
 
 class StandardAttachmentViewSet(viewsets.ModelViewSet):
     queryset = StandardAttachment.objects.all()
-    filterset_fields = ['compliance']
-    search_fields = ['filename', 'description']
-    ordering = ['-uploaded_at']
+    filterset_fields = ["compliance"]
+    search_fields = ["filename", "description"]
+    ordering = ["-uploaded_at"]
 
     def get_serializer_class(self):
         from apps.standards.serializers import StandardAttachmentSerializer
+
         return StandardAttachmentSerializer
 
 
 # ==================== UI Views ====================
 
+
 @login_required
 def standards_dashboard(request):
     """Standards dashboard with statistics"""
     # Get current hospital from tenant_hospital (set by middleware)
-    hospital = getattr(request, 'tenant_hospital', None)
+    hospital = getattr(request, "tenant_hospital", None)
     if not hospital:
-        return render(request, 'core/no_hospital_assigned.html')
+        return render(request, "core/no_hospital_assigned.html")
 
-    departments = hospital.departments.filter(status='active')
+    departments = hospital.departments.filter(status="active")
 
     # Get compliance statistics
-    compliance_records = StandardCompliance.objects.filter(
-        department__hospital=hospital
-    )
+    compliance_records = StandardCompliance.objects.filter(department__hospital=hospital)
 
     stats = {
-        'total_standards': Standard.objects.filter(is_active=True).count(),
-        'total_departments': departments.count(),
-        'met': compliance_records.filter(status='met').count(),
-        'partially_met': compliance_records.filter(status='partially_met').count(),
-        'not_met': compliance_records.filter(status='not_met').count(),
-        'not_assessed': compliance_records.filter(status='not_assessed').count(),
+        "total_standards": Standard.objects.filter(is_active=True).count(),
+        "total_departments": departments.count(),
+        "met": compliance_records.filter(status="met").count(),
+        "partially_met": compliance_records.filter(status="partially_met").count(),
+        "not_met": compliance_records.filter(status="not_met").count(),
+        "not_assessed": compliance_records.filter(status="not_assessed").count(),
     }
 
     # Recent compliance updates
-    recent_updates = compliance_records.order_by('-updated_at')[:10]
+    recent_updates = compliance_records.order_by("-updated_at")[:10]
+
+    # Check if user is PX admin or Hospital Admin
+    is_px_admin = request.user.is_px_admin() or request.user.is_hospital_admin()
 
     context = {
-        'hospital': hospital,
-        'departments': departments,
-        'stats': stats,
-        'recent_updates': recent_updates,
+        "hospital": hospital,
+        "departments": departments,
+        "stats": stats,
+        "recent_updates": recent_updates,
+        "is_px_admin": is_px_admin,
     }
 
-    return render(request, 'standards/dashboard.html', context)
+    return render(request, "standards/dashboard.html", context)
 
 
 @ensure_csrf_cookie
@@ -130,39 +133,36 @@ def department_standards_view(request, pk):
     department = get_object_or_404(Department, pk=pk)
 
     # Check if user is PX admin
-    hospital = getattr(request, 'tenant_hospital', None)
-    is_px_admin = request.user.is_superuser or (
-        hasattr(request.user, 'hospital_user') and
-        request.user.hospital_user.hospital == hospital and
-        request.user.hospital_user.role == 'px_admin'
-    ) if hospital else False
+    hospital = getattr(request, "tenant_hospital", None)
+    is_px_admin = (request.user.is_px_admin() or request.user.is_hospital_admin()) if hospital else False
 
     # Get all active standards (both department-specific and general)
-    department_standards = Standard.objects.filter(is_active=True).filter(
-        Q(department=department) | Q(department__isnull=True)
-    ).order_by('source', 'category', 'code')
+    department_standards = (
+        Standard.objects.filter(is_active=True)
+        .filter(Q(department=department) | Q(department__isnull=True))
+        .order_by("source", "category", "code")
+    )
 
     # Get compliance status for each standard
     standards_data = []
     for standard in department_standards:
-        compliance = StandardCompliance.objects.filter(
-            department=department,
-            standard=standard
-        ).first()
+        compliance = StandardCompliance.objects.filter(department=department, standard=standard).first()
 
-        standards_data.append({
-            'standard': standard,
-            'compliance': compliance,
-            'attachment_count': compliance.attachments.count() if compliance else 0,
-        })
+        standards_data.append(
+            {
+                "standard": standard,
+                "compliance": compliance,
+                "attachment_count": compliance.attachments.count() if compliance else 0,
+            }
+        )
 
     context = {
-        'department': department,
-        'standards_data': standards_data,
-        'is_px_admin': is_px_admin,
+        "department": department,
+        "standards_data": standards_data,
+        "is_px_admin": is_px_admin,
     }
 
-    return render(request, 'standards/department_standards.html', context)
+    return render(request, "standards/department_standards.html", context)
 
 
 @login_required
@@ -171,16 +171,25 @@ def standard_detail(request, pk):
     standard = get_object_or_404(Standard, pk=pk)
 
     # Get compliance records for all departments
-    compliance_records = StandardCompliance.objects.filter(
-        standard=standard
-    ).select_related('department', 'assessor').order_by('-created_at')
+    compliance_records = (
+        StandardCompliance.objects.filter(standard=standard)
+        .select_related("department", "assessor")
+        .order_by("-created_at")
+    )
+
+    # Check if user is PX admin
+    hospital = getattr(request, "tenant_hospital", None)
+    is_px_admin = False
+    if hospital:
+        is_px_admin = request.user.is_px_admin() or request.user.is_hospital_admin()
 
     context = {
-        'standard': standard,
-        'compliance_records': compliance_records,
+        "standard": standard,
+        "compliance_records": compliance_records,
+        "is_px_admin": is_px_admin,
     }
 
-    return render(request, 'standards/standard_detail.html', context)
+    return render(request, "standards/standard_detail.html", context)
 
 
 @login_required
@@ -188,20 +197,20 @@ def standard_compliance_update(request, compliance_id):
     """Update compliance status"""
     compliance = get_object_or_404(StandardCompliance, pk=compliance_id)
 
-    if request.method == 'POST':
+    if request.method == "POST":
         form = StandardComplianceForm(request.POST, instance=compliance)
         if form.is_valid():
             form.save()
-            return redirect('standards:department_standards', pk=compliance.department.pk)
+            return redirect("standards:department_standards", pk=compliance.department.pk)
     else:
         form = StandardComplianceForm(instance=compliance)
 
     context = {
-        'compliance': compliance,
-        'form': form,
+        "compliance": compliance,
+        "form": form,
     }
 
-    return render(request, 'standards/compliance_form.html', context)
+    return render(request, "standards/compliance_form.html", context)
 
 
 @login_required
@@ -209,48 +218,65 @@ def standard_attachment_upload(request, compliance_id):
     """Upload attachment for compliance"""
     compliance = get_object_or_404(StandardCompliance, pk=compliance_id)
 
-    if request.method == 'POST':
+    if request.method == "POST":
         form = StandardAttachmentForm(request.POST, request.FILES)
         if form.is_valid():
             attachment = form.save(commit=False)
             attachment.compliance = compliance
             attachment.uploaded_by = request.user
-            attachment.filename = request.FILES['file'].name
+            attachment.filename = request.FILES["file"].name
             attachment.save()
-            return redirect('standards:standard_compliance_update', compliance_id=compliance.pk)
+            return redirect("standards:standard_compliance_update", compliance_id=compliance.pk)
     else:
         form = StandardAttachmentForm()
 
     context = {
-        'compliance': compliance,
-        'form': form,
+        "compliance": compliance,
+        "form": form,
     }
 
-    return render(request, 'standards/attachment_upload.html', context)
+    return render(request, "standards/attachment_upload.html", context)
+
+
+@login_required
+def standard_attachment_delete(request, pk):
+    """Delete an attachment"""
+    attachment = get_object_or_404(StandardAttachment, pk=pk)
+    compliance_id = attachment.compliance.id
+
+    if request.method == "POST":
+        attachment.delete()
+        from django.contrib import messages
+
+        messages.success(request, "Attachment deleted successfully.")
+        return redirect("standards:standard_compliance_update", compliance_id=compliance_id)
+
+    context = {"attachment": attachment}
+    return render(request, "standards/attachment_confirm_delete.html", context)
 
 
 @login_required
 def standards_search(request):
     """Search standards"""
-    query = request.GET.get('q', '')
-    source_filter = request.GET.get('source', '')
-    category_filter = request.GET.get('category', '')
-    status_filter = request.GET.get('status', '')
+    query = request.GET.get("q", "")
+    source_filter = request.GET.get("source", "")
+    category_filter = request.GET.get("category", "")
+    status_filter = request.GET.get("status", "")
 
     # Get current hospital from tenant_hospital (set by middleware)
-    hospital = getattr(request, 'tenant_hospital', None)
+    hospital = getattr(request, "tenant_hospital", None)
     if not hospital:
-        return render(request, 'core/no_hospital_assigned.html')
+        return render(request, "core/no_hospital_assigned.html")
 
     # Build queryset
     standards = Standard.objects.filter(is_active=True)
 
     if query:
         standards = standards.filter(
-            Q(code__icontains=query) |
-            Q(title__icontains=query) |
-            Q(title_ar__icontains=query) |
-            Q(description__icontains=query)
+            Q(code__icontains=query)
+            | Q(title__icontains=query)
+            | Q(title_ar__icontains=query)
+            | Q(description__icontains=query)
         )
 
     if source_filter:
@@ -259,99 +285,169 @@ def standards_search(request):
     if category_filter:
         standards = standards.filter(category_id=category_filter)
 
-    standards = standards.select_related('source', 'category').order_by('source', 'category', 'code')
+    standards = standards.select_related("source", "category").order_by("source", "category", "code")
 
     # Get filters
     sources = StandardSource.objects.filter(is_active=True)
     categories = StandardCategory.objects.filter(is_active=True)
 
+    # Check if user is PX admin or Hospital Admin
+    is_px_admin = request.user.is_px_admin() or request.user.is_hospital_admin()
+
     context = {
-        'hospital': hospital,
-        'standards': standards,
-        'query': query,
-        'source_filter': source_filter,
-        'category_filter': category_filter,
-        'sources': sources,
-        'categories': categories,
+        "hospital": hospital,
+        "standards": standards,
+        "query": query,
+        "source_filter": source_filter,
+        "category_filter": category_filter,
+        "sources": sources,
+        "categories": categories,
+        "is_px_admin": is_px_admin,
     }
 
-    return render(request, 'standards/search.html', context)
+    return render(request, "standards/search.html", context)
 
 
 @login_required
 def standard_create(request, department_id=None):
     """Create a new standard (PX Admin only)"""
     # Check if user is PX admin
-    hospital = getattr(request, 'tenant_hospital', None)
+    hospital = getattr(request, "tenant_hospital", None)
     if not hospital:
-        return render(request, 'core/no_hospital_assigned.html')
+        return render(request, "core/no_hospital_assigned.html")
 
-    is_px_admin = request.user.is_superuser or (
-        hasattr(request.user, 'hospital_user') and
-        request.user.hospital_user.hospital == hospital and
-        request.user.hospital_user.role == 'px_admin'
-    )
+    is_px_admin = request.user.is_px_admin() or request.user.is_hospital_admin()
 
     if not is_px_admin:
         from django.contrib import messages
-        messages.error(request, 'You do not have permission to create standards.')
-        if department_id:
-            return redirect('standards:department_standards', pk=department_id)
-        return redirect('standards:dashboard')
 
-    if request.method == 'POST':
+        messages.error(request, "You do not have permission to create standards.")
+        if department_id:
+            return redirect("standards:department_standards", pk=department_id)
+        return redirect("standards:dashboard")
+
+    if request.method == "POST":
         form = StandardForm(request.POST)
         if form.is_valid():
             standard = form.save(commit=False)
             standard.save()
             from django.contrib import messages
-            messages.success(request, 'Standard created successfully.')
+
+            messages.success(request, "Standard created successfully.")
             if department_id:
-                return redirect('standards:department_standards', pk=department_id)
-            return redirect('standards:dashboard')
+                return redirect("standards:department_standards", pk=department_id)
+            return redirect("standards:dashboard")
     else:
         form = StandardForm()
         # If department_id is provided, pre-select that department
         if department_id:
             from apps.organizations.models import Department
+
             department = Department.objects.filter(pk=department_id).first()
             if department:
-                form.fields['department'].initial = department
+                form.fields["department"].initial = department
 
     # Get all departments for the hospital
-    departments = hospital.departments.filter(status='active')
+    departments = hospital.departments.filter(status="active")
 
     context = {
-        'form': form,
-        'department_id': department_id,
-        'departments': departments,
-        'hospital': hospital,
+        "form": form,
+        "department_id": department_id,
+        "departments": departments,
+        "hospital": hospital,
     }
 
-    return render(request, 'standards/standard_form.html', context)
+    return render(request, "standards/standard_form.html", context)
 
 
-@csrf_exempt
+@login_required
+def standard_update(request, pk):
+    """Update a standard (PX Admin only)"""
+    standard = get_object_or_404(Standard, pk=pk)
+
+    # Check if user is PX admin
+    hospital = getattr(request, "tenant_hospital", None)
+    if not hospital:
+        return render(request, "core/no_hospital_assigned.html")
+
+    is_px_admin = request.user.is_px_admin() or request.user.is_hospital_admin()
+
+    if not is_px_admin:
+        from django.contrib import messages
+
+        messages.error(request, "You do not have permission to update standards.")
+        return redirect("standards:standard_detail", pk=pk)
+
+    if request.method == "POST":
+        form = StandardForm(request.POST, instance=standard)
+        if form.is_valid():
+            form.save()
+            from django.contrib import messages
+
+            messages.success(request, "Standard updated successfully.")
+            return redirect("standards:standard_detail", pk=pk)
+    else:
+        form = StandardForm(instance=standard)
+
+    context = {
+        "form": form,
+        "standard": standard,
+        "hospital": hospital,
+    }
+
+    return render(request, "standards/standard_form.html", context)
+
+
+@login_required
+def standard_delete(request, pk):
+    """Delete a standard (PX Admin only)"""
+    standard = get_object_or_404(Standard, pk=pk)
+
+    # Check if user is PX admin
+    hospital = getattr(request, "tenant_hospital", None)
+    if not hospital:
+        return render(request, "core/no_hospital_assigned.html")
+
+    is_px_admin = request.user.is_px_admin() or request.user.is_hospital_admin()
+
+    if not is_px_admin:
+        from django.contrib import messages
+
+        messages.error(request, "You do not have permission to delete standards.")
+        return redirect("standards:standard_detail", pk=pk)
+
+    if request.method == "POST":
+        standard.delete()
+        from django.contrib import messages
+
+        messages.success(request, "Standard deleted successfully.")
+        return redirect("standards:dashboard")
+
+    context = {"standard": standard}
+    return render(request, "standards/standard_confirm_delete.html", context)
+
+
+@ensure_csrf_cookie
 @login_required
 def create_compliance_ajax(request):
     """Create compliance record via AJAX"""
     if not request.user.is_authenticated:
-        return JsonResponse({'success': False, 'error': 'Authentication required'}, status=401)
-    
-    if request.method != 'POST':
-        return JsonResponse({'success': False, 'error': 'Invalid request method'})
+        return JsonResponse({"success": False, "error": "Authentication required"}, status=401)
+
+    if request.method != "POST":
+        return JsonResponse({"success": False, "error": "Invalid request method"})
 
     # Parse JSON from request body
     try:
         data = json.loads(request.body)
     except json.JSONDecodeError:
-        return JsonResponse({'success': False, 'error': 'Invalid JSON'})
+        return JsonResponse({"success": False, "error": "Invalid JSON"})
 
-    department_id = data.get('department_id')
-    standard_id = data.get('standard_id')
+    department_id = data.get("department_id")
+    standard_id = data.get("standard_id")
 
     if not department_id or not standard_id:
-        return JsonResponse({'success': False, 'error': 'Missing required fields'})
+        return JsonResponse({"success": False, "error": "Missing required fields"})
 
     try:
         department = Department.objects.get(pk=department_id)
@@ -362,58 +458,62 @@ def create_compliance_ajax(request):
             department=department,
             standard=standard,
             defaults={
-                'assessor': request.user,
-                'last_assessed_date': timezone.now().date(),
-            }
+                "assessor": request.user,
+                "last_assessed_date": timezone.now().date(),
+            },
         )
 
-        return JsonResponse({
-            'success': True,
-            'compliance_id': compliance.id,
-            'status': compliance.status,
-            'created': created,
-        })
+        return JsonResponse(
+            {
+                "success": True,
+                "compliance_id": compliance.id,
+                "status": compliance.status,
+                "created": created,
+            }
+        )
     except Exception as e:
         import traceback
+
         traceback.print_exc()
-        return JsonResponse({'success': False, 'error': str(e)})
+        return JsonResponse({"success": False, "error": str(e)})
 
 
-@csrf_exempt
+@ensure_csrf_cookie
 @login_required
 def update_compliance_ajax(request):
     """Update compliance record via AJAX"""
     if not request.user.is_authenticated:
-        return JsonResponse({'success': False, 'error': 'Authentication required'}, status=401)
-    
-    if request.method != 'POST':
-        return JsonResponse({'success': False, 'error': 'Invalid request method'})
+        return JsonResponse({"success": False, "error": "Authentication required"}, status=401)
+
+    if request.method != "POST":
+        return JsonResponse({"success": False, "error": "Invalid request method"})
 
     # Parse JSON from request body
     try:
         data = json.loads(request.body)
     except json.JSONDecodeError:
-        return JsonResponse({'success': False, 'error': 'Invalid JSON'})
+        return JsonResponse({"success": False, "error": "Invalid JSON"})
 
-    compliance_id = data.get('compliance_id')
-    status = data.get('status')
-    notes = data.get('notes', '')
-    evidence_summary = data.get('evidence_summary', '')
-    last_assessed_date_str = data.get('last_assessed_date')
-    assessor_id = data.get('assessor_id')
+    compliance_id = data.get("compliance_id")
+    status = data.get("status")
+    notes = data.get("notes", "")
+    evidence_summary = data.get("evidence_summary", "")
+    last_assessed_date_str = data.get("last_assessed_date")
+    assessor_id = data.get("assessor_id")
 
     if not compliance_id or not status:
-        return JsonResponse({'success': False, 'error': 'Missing required fields'})
+        return JsonResponse({"success": False, "error": "Missing required fields"})
 
     try:
         compliance = StandardCompliance.objects.get(pk=compliance_id)
         compliance.status = status
         compliance.notes = notes
         compliance.evidence_summary = evidence_summary
-        
+
         # Set assessor - use logged-in user or provided ID
         if assessor_id:
             from apps.accounts.models import User
+
             try:
                 assessor = User.objects.get(pk=assessor_id)
                 compliance.assessor = assessor
@@ -421,49 +521,49 @@ def update_compliance_ajax(request):
                 compliance.assessor = request.user
         else:
             compliance.assessor = request.user
-        
+
         # Set assessment date
         if last_assessed_date_str:
-            compliance.last_assessed_date = datetime.strptime(last_assessed_date_str, '%Y-%m-%d').date()
+            compliance.last_assessed_date = datetime.strptime(last_assessed_date_str, "%Y-%m-%d").date()
         else:
             compliance.last_assessed_date = timezone.now().date()
-        
+
         compliance.save()
 
-        return JsonResponse({
-            'success': True,
-            'status': compliance.status,
-            'status_display': compliance.get_status_display(),
-        })
+        return JsonResponse(
+            {
+                "success": True,
+                "status": compliance.status,
+                "status_display": compliance.get_status_display(),
+            }
+        )
     except Exception as e:
         import traceback
+
         traceback.print_exc()
-        return JsonResponse({'success': False, 'error': str(e)})
+        return JsonResponse({"success": False, "error": str(e)})
 
 
 @login_required
 def get_compliance_status(request, department_id, standard_id):
     """API endpoint to get compliance status"""
-    compliance = StandardCompliance.objects.filter(
-        department_id=department_id,
-        standard_id=standard_id
-    ).first()
+    compliance = StandardCompliance.objects.filter(department_id=department_id, standard_id=standard_id).first()
 
     if compliance:
         data = {
-            'status': compliance.status,
-            'last_assessed_date': compliance.last_assessed_date,
-            'assessor': compliance.assessor.get_full_name() if compliance.assessor else None,
-            'notes': compliance.notes,
-            'attachment_count': compliance.attachments.count(),
+            "status": compliance.status,
+            "last_assessed_date": compliance.last_assessed_date,
+            "assessor": compliance.assessor.get_full_name() if compliance.assessor else None,
+            "notes": compliance.notes,
+            "attachment_count": compliance.attachments.count(),
         }
     else:
         data = {
-            'status': 'not_assessed',
-            'last_assessed_date': None,
-            'assessor': None,
-            'notes': '',
-            'attachment_count': 0,
+            "status": "not_assessed",
+            "last_assessed_date": None,
+            "assessor": None,
+            "notes": "",
+            "attachment_count": 0,
         }
 
     return JsonResponse(data)
@@ -471,121 +571,129 @@ def get_compliance_status(request, department_id, standard_id):
 
 # ==================== Source Management Views ====================
 
+
 @login_required
 def source_list(request):
     """List all standard sources"""
-    sources = StandardSource.objects.all().order_by('name')
-    context = {'sources': sources}
-    return render(request, 'standards/source_list.html', context)
+    sources = StandardSource.objects.all().order_by("name")
+    context = {"sources": sources}
+    return render(request, "standards/source_list.html", context)
 
 
 @login_required
 def source_create(request):
     """Create a new standard source"""
-    if request.method == 'POST':
+    if request.method == "POST":
         form = StandardSourceForm(request.POST)
         if form.is_valid():
             form.save()
             from django.contrib import messages
-            messages.success(request, 'Source created successfully.')
-            return redirect('standards:source_list')
+
+            messages.success(request, "Source created successfully.")
+            return redirect("standards:source_list")
     else:
         form = StandardSourceForm()
 
-    context = {'form': form}
-    return render(request, 'standards/source_form.html', context)
+    context = {"form": form}
+    return render(request, "standards/source_form.html", context)
 
 
 @login_required
 def source_update(request, pk):
     """Update a standard source"""
     source = get_object_or_404(StandardSource, pk=pk)
-    
-    if request.method == 'POST':
+
+    if request.method == "POST":
         form = StandardSourceForm(request.POST, instance=source)
         if form.is_valid():
             form.save()
             from django.contrib import messages
-            messages.success(request, 'Source updated successfully.')
-            return redirect('standards:source_list')
+
+            messages.success(request, "Source updated successfully.")
+            return redirect("standards:source_list")
     else:
         form = StandardSourceForm(instance=source)
 
-    context = {'form': form, 'source': source}
-    return render(request, 'standards/source_form.html', context)
+    context = {"form": form, "source": source}
+    return render(request, "standards/source_form.html", context)
 
 
 @login_required
 def source_delete(request, pk):
     """Delete a standard source"""
     source = get_object_or_404(StandardSource, pk=pk)
-    
-    if request.method == 'POST':
+
+    if request.method == "POST":
         source.delete()
         from django.contrib import messages
-        messages.success(request, 'Source deleted successfully.')
-        return redirect('standards:source_list')
-    
-    context = {'source': source}
-    return render(request, 'standards/source_confirm_delete.html', context)
+
+        messages.success(request, "Source deleted successfully.")
+        return redirect("standards:source_list")
+
+    context = {"source": source}
+    return render(request, "standards/source_confirm_delete.html", context)
 
 
 # ==================== Category Management Views ====================
 
+
 @login_required
 def category_list(request):
     """List all standard categories"""
-    categories = StandardCategory.objects.all().order_by('order', 'name')
-    context = {'categories': categories}
-    return render(request, 'standards/category_list.html', context)
+    categories = StandardCategory.objects.all().order_by("order", "name")
+    context = {"categories": categories}
+    return render(request, "standards/category_list.html", context)
 
 
 @login_required
 def category_create(request):
     """Create a new standard category"""
-    if request.method == 'POST':
+    if request.method == "POST":
         form = StandardCategoryForm(request.POST)
         if form.is_valid():
             form.save()
             from django.contrib import messages
-            messages.success(request, 'Category created successfully.')
-            return redirect('standards:category_list')
+
+            messages.success(request, "Category created successfully.")
+            return redirect("standards:category_list")
     else:
         form = StandardCategoryForm()
 
-    context = {'form': form}
-    return render(request, 'standards/category_form.html', context)
+    context = {"form": form}
+    return render(request, "standards/category_form.html", context)
 
 
 @login_required
 def category_update(request, pk):
     """Update a standard category"""
     category = get_object_or_404(StandardCategory, pk=pk)
-    
-    if request.method == 'POST':
+
+    if request.method == "POST":
         form = StandardCategoryForm(request.POST, instance=category)
         if form.is_valid():
             form.save()
             from django.contrib import messages
-            messages.success(request, 'Category updated successfully.')
-            return redirect('standards:category_list')
+
+            messages.success(request, "Category updated successfully.")
+            return redirect("standards:category_list")
     else:
         form = StandardCategoryForm(instance=category)
 
-    context = {'form': form, 'category': category}
-    return render(request, 'standards/category_form.html', context)
+    context = {"form": form, "category": category}
+    return render(request, "standards/category_form.html", context)
 
 
 @login_required
 def category_delete(request, pk):
     """Delete a standard category"""
     category = get_object_or_404(StandardCategory, pk=pk)
-    
-    if request.method == 'POST':
+
+    if request.method == "POST":
         category.delete()
         from django.contrib import messages
-        messages.success(request, 'Category deleted successfully.')
-        return redirect('standards:category_list')
-    
-    context = {'category': category}
-    return render(request, 'standards/category_confirm_delete.html', context)
+
+        messages.success(request, "Category deleted successfully.")
+        return redirect("standards:category_list")
+
+    context = {"category": category}
+    return render(request, "standards/category_confirm_delete.html", context)
diff --git a/apps/surveys/forms.py b/apps/surveys/forms.py
index dbc32ae..2a50185 100644
--- a/apps/surveys/forms.py
+++ b/apps/surveys/forms.py
@@ -5,11 +5,18 @@ from django import forms
 from django.utils.translation import gettext_lazy as _
 
 from apps.organizations.models import Patient, Staff, Hospital
+from apps.core.form_mixins import HospitalFieldMixin
 from .models import SurveyInstance, SurveyTemplate, SurveyQuestion
 
 
-class SurveyTemplateForm(forms.ModelForm):
-    """Form for creating/editing survey templates"""
+class SurveyTemplateForm(HospitalFieldMixin, forms.ModelForm):
+    """
+    Form for creating/editing survey templates.
+    
+    Hospital field visibility:
+    - PX Admins: See dropdown with all hospitals
+    - Others: Hidden field, auto-set to user's hospital
+    """
     
     class Meta:
         model = SurveyTemplate
@@ -260,8 +267,14 @@ class BulkCSVSurveySendForm(forms.Form):
             )
 
 
-class HISPatientImportForm(forms.Form):
-    """Form for importing patient data from HIS/MOH Statistics CSV"""
+class HISPatientImportForm(HospitalFieldMixin, forms.Form):
+    """
+    Form for importing patient data from HIS/MOH Statistics CSV.
+    
+    Hospital field visibility:
+    - PX Admins: See dropdown with all hospitals
+    - Others: Hidden field, auto-set to user's hospital
+    """
     
     hospital = forms.ModelChoiceField(
         queryset=Hospital.objects.filter(status='active'),
@@ -291,16 +304,6 @@ class HISPatientImportForm(forms.Form):
         }),
         help_text=_('Number of metadata/header rows to skip before data rows')
     )
-    
-    def __init__(self, user, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        self.user = user
-        # Filter hospitals by user's access
-        if user.hospital and not user.is_px_admin():
-            self.fields['hospital'].queryset = Hospital.objects.filter(
-                id=user.hospital.id,
-                status='active'
-            )
 
 
 class HISSurveySendForm(forms.Form):
diff --git a/apps/surveys/his_views.py b/apps/surveys/his_views.py
index 243cae5..4ad4f7a 100644
--- a/apps/surveys/his_views.py
+++ b/apps/surveys/his_views.py
@@ -10,6 +10,7 @@ import logging
 from datetime import datetime
 
 from django.contrib import messages
+from django.utils import timezone
 from django.contrib.auth.decorators import login_required
 from django.core.paginator import Paginator
 from django.db import transaction
@@ -49,7 +50,7 @@ def his_patient_import(request):
     session_key = f'his_import_{user.id}'
     
     if request.method == 'POST':
-        form = HISPatientImportForm(user, request.POST, request.FILES)
+        form = HISPatientImportForm(request.POST, request.FILES, user=user)
         
         if form.is_valid():
             try:
@@ -207,7 +208,7 @@ def his_patient_import(request):
                 logger.error(f"Error processing HIS CSV: {str(e)}", exc_info=True)
                 messages.error(request, f"Error processing CSV: {str(e)}")
     else:
-        form = HISPatientImportForm(user)
+        form = HISPatientImportForm(user=user)
     
     context = {
         'form': form,
@@ -318,7 +319,7 @@ def his_patient_survey_send(request):
         return redirect('surveys:his_patient_review')
     
     if request.method == 'POST':
-        form = HISSurveySendForm(user, request.POST)
+        form = HISSurveySendForm(request.POST, user=user)
         
         if form.is_valid():
             survey_template = form.cleaned_data['survey_template']
@@ -378,7 +379,7 @@ def his_patient_survey_send(request):
             )
             return redirect('surveys:bulk_job_status', job_id=job.id)
     else:
-        form = HISSurveySendForm(user)
+        form = HISSurveySendForm(user=user)
     
     context = {
         'form': form,
diff --git a/apps/surveys/ui_views.py b/apps/surveys/ui_views.py
index ceca669..fbe85cd 100644
--- a/apps/surveys/ui_views.py
+++ b/apps/surveys/ui_views.py
@@ -13,6 +13,7 @@ from django.views.decorators.http import require_http_methods
 from django.db.models import ExpressionWrapper, FloatField
 
 from apps.core.services import AuditService
+from apps.core.decorators import block_source_user
 from apps.organizations.models import Department, Hospital
 
 from .forms import ManualSurveySendForm, SurveyQuestionFormSet, SurveyTemplateForm, ManualPhoneSurveySendForm, BulkCSVSurveySendForm
@@ -21,6 +22,7 @@ from .models import SurveyInstance, SurveyTemplate, SurveyQuestion
 from .tasks import send_satisfaction_feedback
 from datetime import datetime
 
+@block_source_user
 @login_required
 def survey_instance_list(request):
     """
@@ -32,6 +34,11 @@ def survey_instance_list(request):
     - Search by patient MRN
     - Score display
     """
+    # Source Users don't have access to surveys
+    if request.user.is_source_user():
+        from django.core.exceptions import PermissionDenied
+        raise PermissionDenied("Source users do not have access to surveys.")
+    
     # Base queryset with optimizations
     queryset = SurveyInstance.objects.select_related(
         'survey_template',
@@ -112,6 +119,7 @@ def survey_instance_list(request):
     return render(request, 'surveys/instance_list.html', context)
 
 
+@block_source_user
 @login_required
 def survey_instance_detail(request, pk):
     """
@@ -209,6 +217,7 @@ def survey_instance_detail(request, pk):
     return render(request, 'surveys/instance_detail.html', context)
 
 
+@block_source_user
 @login_required
 def survey_template_list(request):
     """Survey templates list view"""
@@ -262,6 +271,7 @@ def survey_template_list(request):
     return render(request, 'surveys/template_list.html', context)
 
 
+@block_source_user
 @login_required
 def survey_template_create(request):
     """Create a new survey template with questions"""
@@ -272,7 +282,7 @@ def survey_template_create(request):
         return redirect('surveys:template_list')
     
     if request.method == 'POST':
-        form = SurveyTemplateForm(request.POST)
+        form = SurveyTemplateForm(request.POST, user=user)
         formset = SurveyQuestionFormSet(request.POST)
         
         if form.is_valid() and formset.is_valid():
@@ -288,7 +298,7 @@ def survey_template_create(request):
             messages.success(request, "Survey template created successfully.")
             return redirect('surveys:template_detail', pk=template.pk)
     else:
-        form = SurveyTemplateForm()
+        form = SurveyTemplateForm(user=user)
         formset = SurveyQuestionFormSet()
     
     context = {
@@ -299,6 +309,7 @@ def survey_template_create(request):
     return render(request, 'surveys/template_form.html', context)
 
 
+@block_source_user
 @login_required
 def survey_template_detail(request, pk):
     """View survey template details"""
@@ -337,6 +348,7 @@ def survey_template_detail(request, pk):
     return render(request, 'surveys/template_detail.html', context)
 
 
+@block_source_user
 @login_required
 def survey_template_edit(request, pk):
     """Edit an existing survey template with questions"""
@@ -350,7 +362,7 @@ def survey_template_edit(request, pk):
             return redirect('surveys:template_list')
     
     if request.method == 'POST':
-        form = SurveyTemplateForm(request.POST, instance=template)
+        form = SurveyTemplateForm(request.POST, instance=template, user=user)
         formset = SurveyQuestionFormSet(request.POST, instance=template)
         
         if form.is_valid() and formset.is_valid():
@@ -360,7 +372,7 @@ def survey_template_edit(request, pk):
             messages.success(request, "Survey template updated successfully.")
             return redirect('surveys:template_detail', pk=template.pk)
     else:
-        form = SurveyTemplateForm(instance=template)
+        form = SurveyTemplateForm(instance=template, user=user)
         formset = SurveyQuestionFormSet(instance=template)
     
     context = {
@@ -372,6 +384,7 @@ def survey_template_edit(request, pk):
     return render(request, 'surveys/template_form.html', context)
 
 
+@block_source_user
 @login_required
 def survey_template_delete(request, pk):
     """Delete a survey template"""
@@ -397,6 +410,7 @@ def survey_template_delete(request, pk):
     return render(request, 'surveys/template_confirm_delete.html', context)
 
 
+@block_source_user
 @login_required
 @require_http_methods(["POST"])
 def survey_log_patient_contact(request, pk):
@@ -462,6 +476,7 @@ def survey_log_patient_contact(request, pk):
     return redirect('surveys:instance_detail', pk=pk)
 
 
+@block_source_user
 @login_required
 def survey_comments_list(request):
     """
@@ -720,6 +735,7 @@ def survey_comments_list(request):
     return render(request, 'surveys/comment_list.html', context)
 
 
+@block_source_user
 @login_required
 @require_http_methods(["POST"])
 def survey_send_satisfaction_feedback(request, pk):
@@ -769,6 +785,7 @@ def survey_send_satisfaction_feedback(request, pk):
     return redirect('surveys:instance_detail', pk=pk)
 
 
+@block_source_user
 @login_required
 def manual_survey_send(request):
     """
@@ -889,6 +906,7 @@ def manual_survey_send(request):
     return render(request, 'surveys/manual_send.html', context)
 
 
+@block_source_user
 @login_required
 def manual_survey_send_phone(request):
     """
@@ -979,6 +997,7 @@ def manual_survey_send_phone(request):
     return render(request, 'surveys/manual_send_phone.html', context)
 
 
+@block_source_user
 @login_required
 def manual_survey_send_csv(request):
     """
@@ -1162,6 +1181,7 @@ def manual_survey_send_csv(request):
     return render(request, 'surveys/manual_send_csv.html', context)
 
 
+@block_source_user
 @login_required
 def survey_analytics_reports(request):
     """
@@ -1233,6 +1253,7 @@ def survey_analytics_reports(request):
     return render(request, 'surveys/analytics_reports.html', context)
 
 
+@block_source_user
 @login_required
 def survey_analytics_report_view(request, filename):
     """
@@ -1307,6 +1328,7 @@ def survey_analytics_report_view(request, filename):
     return render(request, 'surveys/analytics_report_info.html', context)
 
 
+@block_source_user
 @login_required
 def survey_analytics_report_download(request, filename):
     """
@@ -1353,6 +1375,7 @@ def survey_analytics_report_download(request, filename):
     )
 
 
+@block_source_user
 @login_required
 def survey_analytics_report_view_inline(request, filename):
     """
@@ -1431,6 +1454,7 @@ def survey_analytics_report_view_inline(request, filename):
     )
 
 
+@block_source_user
 @login_required
 @require_http_methods(["POST"])
 def survey_analytics_report_delete(request, filename):
@@ -1482,6 +1506,7 @@ def _human_readable_size(size_bytes):
 # ENHANCED SURVEY REPORTS - Separate reports per survey type
 # ============================================================================
 
+@block_source_user
 @login_required
 def enhanced_survey_reports_list(request):
     """
@@ -1527,6 +1552,7 @@ def enhanced_survey_reports_list(request):
     return render(request, 'surveys/enhanced_reports_list.html', context)
 
 
+@block_source_user
 @login_required
 def enhanced_survey_report_view(request, dir_name):
     """
@@ -1565,6 +1591,7 @@ def enhanced_survey_report_view(request, dir_name):
     return redirect('surveys:enhanced_reports_list')
 
 
+@block_source_user
 @login_required
 def enhanced_survey_report_file(request, dir_name, filename):
     """
@@ -1608,6 +1635,7 @@ def enhanced_survey_report_file(request, dir_name, filename):
         return FileResponse(open(filepath, 'rb'), as_attachment=True)
 
 
+@block_source_user
 @login_required
 def generate_enhanced_report_ui(request):
     """
diff --git a/config/celery.py b/config/celery.py
index f507945..4a28e82 100644
--- a/config/celery.py
+++ b/config/celery.py
@@ -27,6 +27,14 @@ app.conf.beat_schedule = {
         'task': 'apps.integrations.tasks.process_pending_events',
         'schedule': crontab(minute='*/1'),
     },
+    # Fetch surveys from HIS every 5 minutes
+    'fetch-his-surveys': {
+        'task': 'apps.integrations.tasks.fetch_his_surveys',
+        'schedule': crontab(minute='*/5'),  # Every 5 minutes
+        'options': {
+            'expires': 240,  # Task expires after 4 minutes if not picked up
+        }
+    },
     # Check for overdue complaints every 15 minutes
     'check-overdue-complaints': {
         'task': 'apps.complaints.tasks.check_overdue_complaints',
@@ -76,7 +84,6 @@ app.conf.beat_schedule = {
 
 
 
-
     # Scraping schedules
     'scrape-youtube-hourly': {
         'task': 'social.tasks.scrape_youtube_comments',
diff --git a/config/settings/base.py b/config/settings/base.py
index d89427d..d79d6ce 100644
--- a/config/settings/base.py
+++ b/config/settings/base.py
@@ -69,6 +69,7 @@ LOCAL_APPS = [
     'apps.references',
     'apps.standards',
     'apps.simulator',
+    'apps.reports',
 ]
 
 INSTALLED_APPS = DJANGO_APPS + THIRD_PARTY_APPS + LOCAL_APPS
@@ -82,6 +83,7 @@ MIDDLEWARE = [
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'apps.core.middleware.TenantMiddleware',  # Multi-tenancy support
+    'apps.px_sources.middleware.SourceUserRestrictionMiddleware',  # STRICT source user restrictions
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
diff --git a/config/urls.py b/config/urls.py
index 6b2c9f7..5274771 100644
--- a/config/urls.py
+++ b/config/urls.py
@@ -45,6 +45,7 @@ urlpatterns = [
     path('px-sources/', include('apps.px_sources.urls')),
     path('references/', include('apps.references.urls', namespace='references')),
     path('standards/', include('apps.standards.urls')),
+    path('reports/', include('apps.reports.urls', namespace='reports')),
 
     # API endpoints
     path('api/auth/', include('apps.accounts.urls', namespace='api_auth')),
diff --git a/data.json b/data.json
new file mode 100644
index 0000000..70e23ad
--- /dev/null
+++ b/data.json
@@ -0,0 +1,1281 @@
+{
+  "FetchPatientDataTimeStampList": [
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "307804",
+      "AdmissionID": "786542",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "03-Jan-2026 18:20",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "PatientName": "SYED SHEHBAZ  AHMED",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "34 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0564326000",
+      "DOB": "27-Jul-1991 00:00",
+      "ConsultantID": "4926",
+      "PrimaryDoctor": "2870-NEDAL KHALILG ABU HAWASH ",
+      "CompanyID": "",
+      "GradeID": "0",
+      "CompanyName": "",
+      "GradeName": "",
+      "InsuranceCompanyName": "",
+      "BillType": "CS",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "878943",
+      "AdmissionID": "786543",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "04-Jan-2026 14:35",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "PatientName": "Dasan Dasan  Deepak",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "48 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0550137137",
+      "DOB": "07-Jan-1978 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "",
+      "GradeID": "0",
+      "CompanyName": "",
+      "GradeName": "",
+      "InsuranceCompanyName": "",
+      "BillType": "CS",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "307804",
+      "AdmissionID": "787546",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "11-Feb-2026 12:13",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "PatientName": "SYED SHEHBAZ  AHMED",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "34 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0564326000",
+      "DOB": "27-Jul-1991 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "",
+      "GradeID": "0",
+      "CompanyName": "",
+      "GradeName": "",
+      "InsuranceCompanyName": "",
+      "BillType": "CS",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "2339212",
+      "AdmissionID": "786545",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "10-Jan-2026 16:03",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0040036637",
+      "SSN": "B1056672981",
+      "PatientName": "Baby GIRL of Reem Abdullah  Aldawish",
+      "GenderID": "2",
+      "Gender": "Female",
+      "FullAge": "6 Month(s)",
+      "PatientNationality": "Saudi",
+      "MobileNo": "0555415518",
+      "DOB": "09-Sep-2025 00:00",
+      "ConsultantID": "4926",
+      "PrimaryDoctor": "2870-NEDAL KHALILG ABU HAWASH ",
+      "CompanyID": "",
+      "GradeID": "0",
+      "CompanyName": "",
+      "GradeName": "",
+      "InsuranceCompanyName": "",
+      "BillType": "CS",
+      "IsVIP": "1"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "307804",
+      "AdmissionID": "786544",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "10-Jan-2026 10:00",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "PatientName": "SYED SHEHBAZ  AHMED",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "34 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0564326000",
+      "DOB": "27-Jul-1991 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "99701",
+      "GradeID": "2594",
+      "CompanyName": "Al Hammadi for Mgmt / Pol # 1054568804, 805, 806, 807, 808, 809, 810, 811, 829, 837 - Al Rajhi Takaful",
+      "GradeName": "A",
+      "InsuranceCompanyName": "Al-Rajhi Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "307804",
+      "AdmissionID": "786546",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "21-Jan-2026 08:08",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "PatientName": "SYED SHEHBAZ  AHMED",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "34 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0564326000",
+      "DOB": "27-Jul-1991 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "99701",
+      "GradeID": "2594",
+      "CompanyName": "Al Hammadi for Mgmt / Pol # 1054568804, 805, 806, 807, 808, 809, 810, 811, 829, 837 - Al Rajhi Takaful",
+      "GradeName": "A",
+      "InsuranceCompanyName": "Al-Rajhi Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "299271",
+      "AdmissionID": "787554",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "24-Feb-2026 20:03",
+      "DischargeDate": "24-Feb-2026 20:05",
+      "RegCode": "ALHH.0001572462",
+      "SSN": "2038479214",
+      "PatientName": "Omar salem  Salem",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "83 Year(s)",
+      "PatientNationality": "Yemen",
+      "MobileNo": "0500159242",
+      "DOB": "01-Jan-1943 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "",
+      "GradeID": "0",
+      "CompanyName": "",
+      "GradeName": "",
+      "InsuranceCompanyName": "",
+      "BillType": "CS",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "307804",
+      "AdmissionID": "787547",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "11-Feb-2026 12:19",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "PatientName": "SYED SHEHBAZ  AHMED",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "34 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0564326000",
+      "DOB": "27-Jul-1991 00:00",
+      "ConsultantID": "1910",
+      "PrimaryDoctor": "8883-SAAD SALEH ALOLAYAN ",
+      "CompanyID": "",
+      "GradeID": "0",
+      "CompanyName": "",
+      "GradeName": "",
+      "InsuranceCompanyName": "",
+      "BillType": "CS",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "1405140",
+      "AdmissionID": "787549",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "23-Feb-2026 17:55",
+      "DischargeDate": "23-Feb-2026 18:05",
+      "RegCode": "ALHH.0020105257",
+      "SSN": "1000245082",
+      "PatientName": "Saeed Abubakr  Batawq",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "74 Year(s)",
+      "PatientNationality": "Saudi",
+      "MobileNo": "0554804484",
+      "DOB": "08-Apr-1951 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "",
+      "GradeID": "0",
+      "CompanyName": "",
+      "GradeName": "",
+      "InsuranceCompanyName": "",
+      "BillType": "CS",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "1405140",
+      "AdmissionID": "787550",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "2",
+      "PatientType": "IP",
+      "AdmitDate": "23-Feb-2026 18:10",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0020105257",
+      "SSN": "1000245082",
+      "PatientName": "Saeed Abubakr  Batawq",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "74 Year(s)",
+      "PatientNationality": "Saudi",
+      "MobileNo": "0554804484",
+      "DOB": "08-Apr-1951 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "",
+      "GradeID": "",
+      "CompanyName": "",
+      "GradeName": "",
+      "InsuranceCompanyName": "",
+      "BillType": "CS",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "2345421",
+      "AdmissionID": "787552",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "24-Feb-2026 14:50",
+      "DischargeDate": "24-Feb-2026 14:53",
+      "RegCode": "ALHH.0040042764",
+      "SSN": "1116572049",
+      "PatientName": "Omar Abdulaziz  Almudaihesh",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "24 Year(s)",
+      "PatientNationality": "Saudi",
+      "MobileNo": "0551048866",
+      "DOB": "31-May-2001 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "",
+      "GradeID": "0",
+      "CompanyName": "",
+      "GradeName": "",
+      "InsuranceCompanyName": "",
+      "BillType": "CS",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "2345421",
+      "AdmissionID": "787553",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "2",
+      "PatientType": "IP",
+      "AdmitDate": "24-Feb-2026 14:54",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0040042764",
+      "SSN": "1116572049",
+      "PatientName": "Omar Abdulaziz  Almudaihesh",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "24 Year(s)",
+      "PatientNationality": "Saudi",
+      "MobileNo": "0551048866",
+      "DOB": "31-May-2001 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "",
+      "GradeID": "",
+      "CompanyName": "",
+      "GradeName": "",
+      "InsuranceCompanyName": "",
+      "BillType": "CS",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "1602205",
+      "AdmissionID": "787551",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "24-Feb-2026 08:45",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0020169210",
+      "SSN": "1041963081",
+      "PatientName": "Jamilah Yahya  Dhamiri",
+      "GenderID": "2",
+      "Gender": "Female",
+      "FullAge": "55 Year(s)",
+      "PatientNationality": "Saudi",
+      "MobileNo": "0553483272",
+      "DOB": "01-Sep-1970 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "57914",
+      "GradeID": "116",
+      "CompanyName": "Ministry of Energy /  50106187 - Tawuniya",
+      "GradeName": "VVIP",
+      "InsuranceCompanyName": "The Cooperative Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "307804",
+      "AdmissionID": "787548",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "17-Feb-2026 18:59",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "PatientName": "SYED SHEHBAZ  AHMED",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "34 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0564326000",
+      "DOB": "27-Jul-1991 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "99701",
+      "GradeID": "2594",
+      "CompanyName": "Al Hammadi for Mgmt / Pol # 1054568804, 805, 806, 807, 808, 809, 810, 811, 829, 837 - Al Rajhi Takaful",
+      "GradeName": "A",
+      "InsuranceCompanyName": "Al-Rajhi Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "299271",
+      "AdmissionID": "787555",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "2",
+      "PatientType": "IP",
+      "AdmitDate": "24-Feb-2026 20:05",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0001572462",
+      "SSN": "2038479214",
+      "PatientName": "Omar salem  Salem",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "83 Year(s)",
+      "PatientNationality": "Yemen",
+      "MobileNo": "0500159242",
+      "DOB": "01-Jan-1943 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "",
+      "GradeID": "",
+      "CompanyName": "",
+      "GradeName": "",
+      "InsuranceCompanyName": "",
+      "BillType": "CS",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "2197340",
+      "AdmissionID": "787556",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "3",
+      "PatientType": "ED",
+      "AdmitDate": "24-Feb-2026 20:56",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0030328307",
+      "SSN": "1111966154",
+      "PatientName": "Fatimah Malik  Alsadiq",
+      "GenderID": "2",
+      "Gender": "Female",
+      "FullAge": "24 Year(s)",
+      "PatientNationality": "Saudi",
+      "MobileNo": "0547960117",
+      "DOB": "03-Jun-2001 00:00",
+      "ConsultantID": "8455",
+      "PrimaryDoctor": "13316-MONA SIDDIQ MOHAMED ",
+      "CompanyID": "51030",
+      "GradeID": "495",
+      "CompanyName": "Hunger Station Limited // BUPA ",
+      "GradeName": "A PLUS",
+      "InsuranceCompanyName": "Bupa Arabia for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "878943",
+      "AdmissionID": "787557",
+      "HospitalID": "3",
+      "HospitalName": "NUZHA-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "26-Feb-2026 09:50",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "PatientName": "Dasan Dasan  Deepak",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "48 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0550137137",
+      "DOB": "07-Jan-1978 00:00",
+      "ConsultantID": "706",
+      "PrimaryDoctor": "8680-HOSAM AHMED REMAH ",
+      "CompanyID": "99701",
+      "GradeID": "2594",
+      "CompanyName": "Al Hammadi for Mgmt / Pol # 1054568804, 805, 806, 807, 808, 809, 810, 811, 829, 837 - Al Rajhi Takaful",
+      "GradeName": "A",
+      "InsuranceCompanyName": "Al-Rajhi Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "878943",
+      "AdmissionID": "787558",
+      "HospitalID": "3",
+      "HospitalName": "NUZHA-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "26-Feb-2026 14:35",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "PatientName": "Dasan Dasan  Deepak",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "48 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0550137137",
+      "DOB": "07-Jan-1978 00:00",
+      "ConsultantID": "12169",
+      "PrimaryDoctor": "90926-KHALID ABDULLAH R ALNEMER ",
+      "CompanyID": "99701",
+      "GradeID": "2594",
+      "CompanyName": "Al Hammadi for Mgmt / Pol # 1054568804, 805, 806, 807, 808, 809, 810, 811, 829, 837 - Al Rajhi Takaful",
+      "GradeName": "A",
+      "InsuranceCompanyName": "Al-Rajhi Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "878943",
+      "AdmissionID": "787559",
+      "HospitalID": "3",
+      "HospitalName": "NUZHA-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "26-Feb-2026 15:35",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "PatientName": "Dasan Dasan  Deepak",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "48 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0550137137",
+      "DOB": "07-Jan-1978 00:00",
+      "ConsultantID": "409",
+      "PrimaryDoctor": "6876-AHMED HASSAN KAKAA ",
+      "CompanyID": "99701",
+      "GradeID": "2594",
+      "CompanyName": "Al Hammadi for Mgmt / Pol # 1054568804, 805, 806, 807, 808, 809, 810, 811, 829, 837 - Al Rajhi Takaful",
+      "GradeName": "A",
+      "InsuranceCompanyName": "Al-Rajhi Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "878943",
+      "AdmissionID": "787560",
+      "HospitalID": "3",
+      "HospitalName": "NUZHA-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "26-Feb-2026 15:39",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "PatientName": "Dasan Dasan  Deepak",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "48 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0550137137",
+      "DOB": "07-Jan-1978 00:00",
+      "ConsultantID": "12169",
+      "PrimaryDoctor": "90926-KHALID ABDULLAH R ALNEMER ",
+      "CompanyID": "99701",
+      "GradeID": "2594",
+      "CompanyName": "Al Hammadi for Mgmt / Pol # 1054568804, 805, 806, 807, 808, 809, 810, 811, 829, 837 - Al Rajhi Takaful",
+      "GradeName": "A",
+      "InsuranceCompanyName": "Al-Rajhi Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "878943",
+      "AdmissionID": "787561",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "27-Feb-2026 07:49",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "PatientName": "Dasan Dasan  Deepak",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "48 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0550137137",
+      "DOB": "07-Jan-1978 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "99701",
+      "GradeID": "2594",
+      "CompanyName": "Al Hammadi for Mgmt / Pol # 1054568804, 805, 806, 807, 808, 809, 810, 811, 829, 837 - Al Rajhi Takaful",
+      "GradeName": "A",
+      "InsuranceCompanyName": "Al-Rajhi Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "878943",
+      "AdmissionID": "787562",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "27-Feb-2026 09:04",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "PatientName": "Dasan Dasan  Deepak",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "48 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0550137137",
+      "DOB": "07-Jan-1978 00:00",
+      "ConsultantID": "1951",
+      "PrimaryDoctor": "6700-TAWFIQ AFIF HAMAWI ",
+      "CompanyID": "99701",
+      "GradeID": "2594",
+      "CompanyName": "Al Hammadi for Mgmt / Pol # 1054568804, 805, 806, 807, 808, 809, 810, 811, 829, 837 - Al Rajhi Takaful",
+      "GradeName": "A",
+      "InsuranceCompanyName": "Al-Rajhi Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "878943",
+      "AdmissionID": "787563",
+      "HospitalID": "3",
+      "HospitalName": "NUZHA-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "28-Feb-2026 09:25",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "PatientName": "Dasan Dasan  Deepak",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "48 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0550137137",
+      "DOB": "07-Jan-1978 00:00",
+      "ConsultantID": "13176",
+      "PrimaryDoctor": "0BFDR3-Virtual Feeding consultation ",
+      "CompanyID": "99701",
+      "GradeID": "2594",
+      "CompanyName": "Al Hammadi for Mgmt / Pol # 1054568804, 805, 806, 807, 808, 809, 810, 811, 829, 837 - Al Rajhi Takaful",
+      "GradeName": "A",
+      "InsuranceCompanyName": "Al-Rajhi Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    },
+    {
+      "Type": "Patient Demographic details",
+      "PatientID": "878943",
+      "AdmissionID": "787564",
+      "HospitalID": "2",
+      "HospitalName": "SUWAIDI-DEV",
+      "PatientTypeID": "1",
+      "PatientType": "OP",
+      "AdmitDate": "01-Mar-2026 11:39",
+      "DischargeDate": null,
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "PatientName": "Dasan Dasan  Deepak",
+      "GenderID": "1",
+      "Gender": "Male",
+      "FullAge": "48 Year(s)",
+      "PatientNationality": "INDIA",
+      "MobileNo": "0550137137",
+      "DOB": "07-Jan-1978 00:00",
+      "ConsultantID": "12169",
+      "PrimaryDoctor": "90926-KHALID ABDULLAH R ALNEMER ",
+      "CompanyID": "99701",
+      "GradeID": "2594",
+      "CompanyName": "Al Hammadi for Mgmt / Pol # 1054568804, 805, 806, 807, 808, 809, 810, 811, 829, 837 - Al Rajhi Takaful",
+      "GradeName": "A",
+      "InsuranceCompanyName": "Al-Rajhi Company for Cooperative Insurance",
+      "BillType": "CR",
+      "IsVIP": "0"
+    }
+  ],
+  "FetchPatientDataTimeStampVisitOPDataList": [
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "03-Jan-2026 18:20",
+      "AdmissionID": "786542",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "10-Jan-2026 10:00",
+      "AdmissionID": "786544",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "10-Jan-2026 16:03",
+      "AdmissionID": "786545",
+      "PatientID": "2339212",
+      "RegCode": "ALHH.0040036637",
+      "SSN": "B1056672981",
+      "MobileNo": "0555415518"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "21-Jan-2026 08:08",
+      "AdmissionID": "786546",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "11-Feb-2026 12:13",
+      "AdmissionID": "787546",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "11-Feb-2026 12:19",
+      "AdmissionID": "787547",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "17-Feb-2026 18:59",
+      "AdmissionID": "787548",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "23-Feb-2026 17:55",
+      "AdmissionID": "787549",
+      "PatientID": "1405140",
+      "RegCode": "ALHH.0020105257",
+      "SSN": "1000245082",
+      "MobileNo": "0554804484"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "24-Feb-2026 08:45",
+      "AdmissionID": "787551",
+      "PatientID": "1602205",
+      "RegCode": "ALHH.0020169210",
+      "SSN": "1041963081",
+      "MobileNo": "0553483272"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "24-Feb-2026 14:50",
+      "AdmissionID": "787552",
+      "PatientID": "2345421",
+      "RegCode": "ALHH.0040042764",
+      "SSN": "1116572049",
+      "MobileNo": "0551048866"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "24-Feb-2026 20:03",
+      "AdmissionID": "787554",
+      "PatientID": "299271",
+      "RegCode": "ALHH.0001572462",
+      "SSN": "2038479214",
+      "MobileNo": "0500159242"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "26-Feb-2026 14:35",
+      "AdmissionID": "787558",
+      "PatientID": "878943",
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "MobileNo": "0550137137"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "26-Feb-2026 15:35",
+      "AdmissionID": "787559",
+      "PatientID": "878943",
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "MobileNo": "0550137137"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Consultation",
+      "BillDate": "26-Feb-2026 15:39",
+      "AdmissionID": "787560",
+      "PatientID": "878943",
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "MobileNo": "0550137137"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "03-Jan-2026 18:20",
+      "AdmissionID": "786542",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "10-Jan-2026 10:00",
+      "AdmissionID": "786544",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "10-Jan-2026 16:03",
+      "AdmissionID": "786545",
+      "PatientID": "2339212",
+      "RegCode": "ALHH.0040036637",
+      "SSN": "B1056672981",
+      "MobileNo": "0555415518"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "21-Jan-2026 08:08",
+      "AdmissionID": "786546",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "11-Feb-2026 12:13",
+      "AdmissionID": "787546",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "11-Feb-2026 12:19",
+      "AdmissionID": "787547",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "17-Feb-2026 18:59",
+      "AdmissionID": "787548",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "23-Feb-2026 17:55",
+      "AdmissionID": "787549",
+      "PatientID": "1405140",
+      "RegCode": "ALHH.0020105257",
+      "SSN": "1000245082",
+      "MobileNo": "0554804484"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "24-Feb-2026 08:45",
+      "AdmissionID": "787551",
+      "PatientID": "1602205",
+      "RegCode": "ALHH.0020169210",
+      "SSN": "1041963081",
+      "MobileNo": "0553483272"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "24-Feb-2026 14:50",
+      "AdmissionID": "787552",
+      "PatientID": "2345421",
+      "RegCode": "ALHH.0040042764",
+      "SSN": "1116572049",
+      "MobileNo": "0551048866"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "24-Feb-2026 20:03",
+      "AdmissionID": "787554",
+      "PatientID": "299271",
+      "RegCode": "ALHH.0001572462",
+      "SSN": "2038479214",
+      "MobileNo": "0500159242"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Doctor Visited",
+      "BillDate": "26-Feb-2026 14:35",
+      "AdmissionID": "787558",
+      "PatientID": "878943",
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "MobileNo": "0550137137"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "End Of the Episode",
+      "BillDate": "23-Feb-2026 18:05",
+      "AdmissionID": "787549",
+      "PatientID": "1405140",
+      "RegCode": "ALHH.0020105257",
+      "SSN": "1000245082",
+      "MobileNo": "0554804484"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "End Of the Episode",
+      "BillDate": "24-Feb-2026 14:53",
+      "AdmissionID": "787552",
+      "PatientID": "2345421",
+      "RegCode": "ALHH.0040042764",
+      "SSN": "1116572049",
+      "MobileNo": "0551048866"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "End Of the Episode",
+      "BillDate": "24-Feb-2026 20:05",
+      "AdmissionID": "787554",
+      "PatientID": "299271",
+      "RegCode": "ALHH.0001572462",
+      "SSN": "2038479214",
+      "MobileNo": "0500159242"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Drug Prescription",
+      "BillDate": "03-Jan-2026 18:26",
+      "AdmissionID": "786542",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Drug Prescription",
+      "BillDate": "10-Jan-2026 10:22",
+      "AdmissionID": "786544",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Drug Prescription",
+      "BillDate": "10-Jan-2026 16:49",
+      "AdmissionID": "786545",
+      "PatientID": "2339212",
+      "RegCode": "ALHH.0040036637",
+      "SSN": "B1056672981",
+      "MobileNo": "0555415518"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Drug Prescription",
+      "BillDate": "21-Jan-2026 09:28",
+      "AdmissionID": "786546",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Drug Prescription",
+      "BillDate": "11-Feb-2026 12:16",
+      "AdmissionID": "787546",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Drug Prescription",
+      "BillDate": "17-Feb-2026 19:29",
+      "AdmissionID": "787548",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Drug Prescription",
+      "BillDate": "23-Feb-2026 17:58",
+      "AdmissionID": "787549",
+      "PatientID": "1405140",
+      "RegCode": "ALHH.0020105257",
+      "SSN": "1000245082",
+      "MobileNo": "0554804484"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Drug Prescription",
+      "BillDate": "23-Feb-2026 18:38",
+      "AdmissionID": "787549",
+      "PatientID": "1405140",
+      "RegCode": "ALHH.0020105257",
+      "SSN": "1000245082",
+      "MobileNo": "0554804484"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Drug Prescription",
+      "BillDate": "24-Feb-2026 14:52",
+      "AdmissionID": "787552",
+      "PatientID": "2345421",
+      "RegCode": "ALHH.0040042764",
+      "SSN": "1116572049",
+      "MobileNo": "0551048866"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Drug Prescription",
+      "BillDate": "24-Feb-2026 20:05",
+      "AdmissionID": "787554",
+      "PatientID": "299271",
+      "RegCode": "ALHH.0001572462",
+      "SSN": "2038479214",
+      "MobileNo": "0500159242"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Lab Prescription",
+      "BillDate": "26-Feb-2026 14:45",
+      "AdmissionID": "787558",
+      "PatientID": "878943",
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "MobileNo": "0550137137"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Lab Prescription",
+      "BillDate": "17-Feb-2026 19:29",
+      "AdmissionID": "787548",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Rad Prescription",
+      "BillDate": "11-Feb-2026 12:16",
+      "AdmissionID": "787546",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Pharmacy Issues",
+      "BillDate": "03-Jan-2026 18:45",
+      "AdmissionID": "786542",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Lab Bill",
+      "BillDate": "17-Feb-2026 19:32",
+      "AdmissionID": "787548",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Lab Bill",
+      "BillDate": "27-Feb-2026 12:24",
+      "AdmissionID": "787558",
+      "PatientID": "878943",
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "MobileNo": "0550137137"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Radiology Bill",
+      "BillDate": "11-Feb-2026 13:40",
+      "AdmissionID": "787546",
+      "PatientID": "307804",
+      "RegCode": "ALHH.0001531245",
+      "SSN": "2381571054",
+      "MobileNo": "0564326000"
+    },
+    {
+      "PatientType": "OP",
+      "Type": "Procedure Bill",
+      "BillDate": "28-Feb-2026 09:24",
+      "AdmissionID": "787558",
+      "PatientID": "878943",
+      "RegCode": "ALHH.0000343014",
+      "SSN": "2180292530",
+      "MobileNo": "0550137137"
+    }
+  ],
+  "FetchPatientDataTimeStampVisitEDDataList": [
+    {
+      "PatientType": "ER",
+      "Type": "Triage",
+      "BillDate": "24-Feb-2026 20:54",
+      "AdmissionID": "787556",
+      "PatientID": "2197340",
+      "RegCode": "ALHH.0030328307",
+      "SSN": "1111966154",
+      "MobileNo": "0547960117"
+    },
+    {
+      "PatientType": "ER",
+      "Type": "Consultation",
+      "BillDate": "24-Feb-2026 20:56",
+      "AdmissionID": "787556",
+      "PatientID": "2197340",
+      "RegCode": "ALHH.0030328307",
+      "SSN": "1111966154",
+      "MobileNo": "0547960117"
+    },
+    {
+      "PatientType": "ER",
+      "Type": "Doctor assignment",
+      "BillDate": "24-Feb-2026 21:05",
+      "AdmissionID": "787556",
+      "PatientID": "2197340",
+      "RegCode": "ALHH.0030328307",
+      "SSN": "1111966154",
+      "MobileNo": "0547960117"
+    },
+    {
+      "PatientType": "ER",
+      "Type": "Procedure Bill",
+      "BillDate": "24-Feb-2026 20:56",
+      "AdmissionID": "787556",
+      "PatientID": "2197340",
+      "RegCode": "ALHH.0030328307",
+      "SSN": "1111966154",
+      "MobileNo": "0547960117"
+    }
+  ],
+  "FetchPatientDataTimeStampVisitIPDataList": [
+    {
+      "PatientType": "IP",
+      "Type": "IP Admissions",
+      "BillDate": "23-Feb-2026 18:10",
+      "AdmissionID": "787550",
+      "PatientID": "1405140",
+      "RegCode": "ALHH.0020105257",
+      "SSN": "1000245082",
+      "MobileNo": "0554804484"
+    },
+    {
+      "PatientType": "IP",
+      "Type": "IP Admissions",
+      "BillDate": "24-Feb-2026 14:54",
+      "AdmissionID": "787553",
+      "PatientID": "2345421",
+      "RegCode": "ALHH.0040042764",
+      "SSN": "1116572049",
+      "MobileNo": "0551048866"
+    },
+    {
+      "PatientType": "IP",
+      "Type": "IP Admissions",
+      "BillDate": "24-Feb-2026 20:05",
+      "AdmissionID": "787555",
+      "PatientID": "299271",
+      "RegCode": "ALHH.0001572462",
+      "SSN": "2038479214",
+      "MobileNo": "0500159242"
+    },
+    {
+      "PatientType": "IP",
+      "Type": "Bed Allocation",
+      "BillDate": "23-Feb-2026 18:10",
+      "AdmissionID": "787550",
+      "PatientID": "1405140",
+      "RegCode": "ALHH.0020105257",
+      "SSN": "1000245082",
+      "MobileNo": "0554804484"
+    },
+    {
+      "PatientType": "IP",
+      "Type": "Bed Allocation",
+      "BillDate": "24-Feb-2026 14:54",
+      "AdmissionID": "787553",
+      "PatientID": "2345421",
+      "RegCode": "ALHH.0040042764",
+      "SSN": "1116572049",
+      "MobileNo": "0551048866"
+    },
+    {
+      "PatientType": "IP",
+      "Type": "Bed Allocation",
+      "BillDate": "24-Feb-2026 20:05",
+      "AdmissionID": "787555",
+      "PatientID": "299271",
+      "RegCode": "ALHH.0001572462",
+      "SSN": "2038479214",
+      "MobileNo": "0500159242"
+    }
+  ],
+  "Code": 200,
+  "Status": "Success",
+  "MobileNo": "",
+  "Message": "",
+  "Message2L": ""
+}
\ No newline at end of file
diff --git a/templates/accounts/acknowledgements/category_form.html b/templates/accounts/acknowledgements/category_form.html
new file mode 100644
index 0000000..bccea42
--- /dev/null
+++ b/templates/accounts/acknowledgements/category_form.html
@@ -0,0 +1,153 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% if form.instance.pk %}{% trans "Edit Category" %}{% else %}{% trans "New Category" %}{% endif %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Page Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="{% if form.instance.pk %}edit{% else %}plus{% endif %}" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% if form.instance.pk %}{% trans "Edit Category" %}{% else %}{% trans "New Category" %}{% endif %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% if form.instance.pk %}{{ form.instance.name_en }}{% else %}{% trans "Create a new acknowledgement category" %}{% endif %}
+                </p>
+            </div>
+        </div>
+        <a href="{% url 'accounts:acknowledgements:ack_category_list' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+            <i data-lucide="arrow-left" class="w-4 h-4"></i>
+            {% trans "Back to Categories" %}
+        </a>
+    </div>
+
+    <!-- Form Card -->
+    <div class="max-w-3xl mx-auto">
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-slate-100 bg-gradient-to-r from-blue-50 to-transparent">
+                <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="file-text" class="w-5 h-5 text-blue-500"></i>
+                    {% trans "Category Details" %}
+                </h2>
+            </div>
+            <form method="post" class="p-6 space-y-6">
+                {% csrf_token %}
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.name_en.id_for_label }}">
+                            {% trans "Name (English)" %}
+                        </label>
+                        {{ form.name_en }}
+                        {% if form.name_en.errors %}
+                        <p class="mt-1 text-sm text-red-500">{{ form.name_en.errors.0 }}</p>
+                        {% endif %}
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.name_ar.id_for_label }}">
+                            {% trans "Name (Arabic)" %}
+                        </label>
+                        {{ form.name_ar }}
+                        {% if form.name_ar.errors %}
+                        <p class="mt-1 text-sm text-red-500">{{ form.name_ar.errors.0 }}</p>
+                        {% endif %}
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.code.id_for_label }}">
+                            {% trans "Code" %}
+                        </label>
+                        {{ form.code }}
+                        {% if form.code.errors %}
+                        <p class="mt-1 text-sm text-red-500">{{ form.code.errors.0 }}</p>
+                        {% endif %}
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.order.id_for_label }}">
+                            {% trans "Display Order" %}
+                        </label>
+                        {{ form.order }}
+                        {% if form.order.errors %}
+                        <p class="mt-1 text-sm text-red-500">{{ form.order.errors.0 }}</p>
+                        {% endif %}
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.icon.id_for_label }}">
+                            {% trans "Icon" %}
+                        </label>
+                        {{ form.icon }}
+                        {% if form.icon.errors %}
+                        <p class="mt-1 text-sm text-red-500">{{ form.icon.errors.0 }}</p>
+                        {% endif %}
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.color.id_for_label }}">
+                            {% trans "Color" %}
+                        </label>
+                        <div class="flex gap-3 items-center">
+                            {{ form.color }}
+                            <input type="color" id="color_picker" value="{{ form.color.value|default:'#3B82F6' }}" class="w-12 h-10 rounded-lg border border-slate-200 cursor-pointer">
+                        </div>
+                        {% if form.color.errors %}
+                        <p class="mt-1 text-sm text-red-500">{{ form.color.errors.0 }}</p>
+                        {% endif %}
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.is_active.id_for_label }}">
+                            {% trans "Status" %}
+                        </label>
+                        <div class="flex items-center gap-3 mt-3">
+                            {{ form.is_active }}
+                            <span class="text-slate">{% trans "Active" %}</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="flex justify-end gap-3 pt-6 border-t border-slate-100">
+                    <a href="{% url 'accounts:acknowledgements:ack_category_list' %}" class="px-6 py-2.5 bg-slate-100 text-slate-700 rounded-xl font-semibold hover:bg-slate-200 transition">
+                        {% trans "Cancel" %}
+                    </a>
+                    <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                        <i data-lucide="save" class="w-4 h-4"></i>
+                        {% trans "Save Category" %}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+// Sync color picker with text input
+const colorPicker = document.getElementById('color_picker');
+const colorInput = document.getElementById('{{ form.color.id_for_label }}');
+if (colorPicker && colorInput) {
+    colorPicker.addEventListener('input', (e) => {
+        colorInput.value = e.target.value;
+    });
+    colorInput.addEventListener('input', (e) => {
+        if (/^#[0-9A-Fa-f]{6}$/.test(e.target.value)) {
+            colorPicker.value = e.target.value;
+        }
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/acknowledgements/category_list.html b/templates/accounts/acknowledgements/category_list.html
new file mode 100644
index 0000000..5bdbd65
--- /dev/null
+++ b/templates/accounts/acknowledgements/category_list.html
@@ -0,0 +1,133 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Acknowledgement Categories" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Page Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="folder" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% trans "Acknowledgement Categories" %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% trans "Manage categories for acknowledgement items" %}
+                </p>
+            </div>
+        </div>
+        <div class="flex gap-3">
+            <a href="{% url 'accounts:acknowledgements:ack_dashboard' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                <i data-lucide="arrow-left" class="w-4 h-4"></i>
+                {% trans "Back" %}
+            </a>
+            <a href="{% url 'accounts:acknowledgements:ack_category_create' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                <i data-lucide="plus" class="w-4 h-4"></i>
+                {% trans "New Category" %}
+            </a>
+        </div>
+    </div>
+
+    <!-- Categories List -->
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
+        <div class="px-6 py-5 border-b border-slate-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                <i data-lucide="list" class="w-5 h-5 text-blue-500"></i>
+                {% trans "All Categories" %}
+            </h2>
+        </div>
+        <div class="p-6">
+            {% if categories %}
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead>
+                        <tr class="border-b border-slate-200">
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Category" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Code" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Order" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Status" %}</th>
+                            <th class="text-right py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Actions" %}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for category in categories %}
+                        <tr class="border-b border-slate-100 hover:bg-slate-50 transition">
+                            <td class="py-4 px-4">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background-color: {{ category.color }}20">
+                                        <i data-lucide="{{ category.icon|default:'folder' }}" class="w-5 h-5" style="color: {{ category.color }}"></i>
+                                    </div>
+                                    <div>
+                                        <p class="font-semibold text-navy">{{ category.name_en }}</p>
+                                        {% if category.name_ar %}
+                                        <p class="text-sm text-slate">{{ category.name_ar }}</p>
+                                        {% endif %}
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="py-4 px-4">
+                                <span class="inline-flex items-center px-2 py-1 bg-slate-100 text-slate-700 rounded-lg text-xs font-mono">
+                                    {{ category.code|default:"-" }}
+                                </span>
+                            </td>
+                            <td class="py-4 px-4 text-slate">{{ category.order }}</td>
+                            <td class="py-4 px-4">
+                                <button onclick="toggleCategory('{{ category.id }}')" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition {% if category.is_active %}bg-emerald-100 text-emerald-700{% else %}bg-red-100 text-red-700{% endif %}">
+                                    <i data-lucide="{% if category.is_active %}check-circle{% else %}x-circle{% endif %}" class="w-3.5 h-3.5"></i>
+                                    {% if category.is_active %}{% trans "Active" %}{% else %}{% trans "Inactive" %}{% endif %}
+                                </button>
+                            </td>
+                            <td class="py-4 px-4 text-right">
+                                <a href="{% url 'accounts:acknowledgements:ack_category_edit' category.id %}" class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg text-sm font-semibold hover:bg-blue-100 transition">
+                                    <i data-lucide="edit-2" class="w-4 h-4"></i>
+                                    {% trans "Edit" %}
+                                </a>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            {% else %}
+            <div class="text-center py-16">
+                <div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="folder-open" class="w-10 h-10 text-blue-500"></i>
+                </div>
+                <h3 class="text-lg font-bold text-navy mb-2">{% trans "No Categories Yet" %}</h3>
+                <p class="text-slate mb-6">{% trans "Create your first acknowledgement category to get started." %}</p>
+                <a href="{% url 'accounts:acknowledgements:ack_category_create' %}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                    <i data-lucide="plus" class="w-5 h-5"></i>
+                    {% trans "Create Category" %}
+                </a>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<script>
+function toggleCategory(categoryId) {
+    fetch(`/accounts/acknowledgements/admin/categories/${categoryId}/toggle/`, {
+        method: 'POST',
+        headers: {
+            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || '',
+            'Content-Type': 'application/json',
+        },
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            location.reload();
+        }
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/acknowledgements/checklist_form.html b/templates/accounts/acknowledgements/checklist_form.html
new file mode 100644
index 0000000..c6e32db
--- /dev/null
+++ b/templates/accounts/acknowledgements/checklist_form.html
@@ -0,0 +1,156 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% if form.instance.pk %}{% trans "Edit Checklist Item" %}{% else %}{% trans "New Checklist Item" %}{% endif %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Page Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-purple-500 to-indigo-500 rounded-2xl shadow-lg shadow-purple-200">
+                <i data-lucide="{% if form.instance.pk %}edit{% else %}plus{% endif %}" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% if form.instance.pk %}{% trans "Edit Checklist Item" %}{% else %}{% trans "New Checklist Item" %}{% endif %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% if form.instance.pk %}{{ form.instance.text_en }}{% else %}{% trans "Create a new acknowledgement checklist item" %}{% endif %}
+                </p>
+            </div>
+        </div>
+        <a href="{% url 'accounts:acknowledgements:ack_checklist_list' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+            <i data-lucide="arrow-left" class="w-4 h-4"></i>
+            {% trans "Back to List" %}
+        </a>
+    </div>
+
+    <!-- Form Card -->
+    <div class="max-w-4xl mx-auto">
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-slate-100 bg-gradient-to-r from-purple-50 to-transparent">
+                <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="file-text" class="w-5 h-5 text-purple-500"></i>
+                    {% trans "Checklist Item Details" %}
+                </h2>
+            </div>
+            <form method="post" class="p-6 space-y-6">
+                {% csrf_token %}
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.category.id_for_label }}">
+                            {% trans "Category" %} *
+                        </label>
+                        {{ form.category }}
+                        {% if form.category.errors %}
+                        <p class="mt-1 text-sm text-red-500">{{ form.category.errors.0 }}</p>
+                        {% endif %}
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.code.id_for_label }}">
+                            {% trans "Code" %}
+                        </label>
+                        {{ form.code }}
+                        {% if form.code.errors %}
+                        <p class="mt-1 text-sm text-red-500">{{ form.code.errors.0 }}</p>
+                        {% endif %}
+                    </div>
+                </div>
+                
+                <div>
+                    <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.text_en.id_for_label }}">
+                        {% trans "Text (English)" %} *
+                    </label>
+                    {{ form.text_en }}
+                    {% if form.text_en.errors %}
+                    <p class="mt-1 text-sm text-red-500">{{ form.text_en.errors.0 }}</p>
+                    {% endif %}
+                </div>
+                
+                <div>
+                    <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.text_ar.id_for_label }}">
+                        {% trans "Text (Arabic)" %}
+                    </label>
+                    {{ form.text_ar }}
+                    {% if form.text_ar.errors %}
+                    <p class="mt-1 text-sm text-red-500">{{ form.text_ar.errors.0 }}</p>
+                    {% endif %}
+                </div>
+                
+                <div>
+                    <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.description_en.id_for_label }}">
+                        {% trans "Description (English)" %}
+                    </label>
+                    {{ form.description_en }}
+                    {% if form.description_en.errors %}
+                    <p class="mt-1 text-sm text-red-500">{{ form.description_en.errors.0 }}</p>
+                    {% endif %}
+                </div>
+                
+                <div>
+                    <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.description_ar.id_for_label }}">
+                        {% trans "Description (Arabic)" %}
+                    </label>
+                    {{ form.description_ar }}
+                    {% if form.description_ar.errors %}
+                    <p class="mt-1 text-sm text-red-500">{{ form.description_ar.errors.0 }}</p>
+                    {% endif %}
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-semibold text-navy mb-2" for="{{ form.order.id_for_label }}">
+                            {% trans "Display Order" %}
+                        </label>
+                        {{ form.order }}
+                        {% if form.order.errors %}
+                        <p class="mt-1 text-sm text-red-500">{{ form.order.errors.0 }}</p>
+                        {% endif %}
+                    </div>
+                    
+                    <div class="flex items-center">
+                        <div class="mt-6">
+                            <div class="flex items-center gap-3">
+                                {{ form.requires_signature }}
+                                <label class="text-sm text-navy" for="{{ form.requires_signature.id_for_label }}">
+                                    {% trans "Requires Signature" %}
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-center">
+                        <div class="mt-6">
+                            <div class="flex items-center gap-3">
+                                {{ form.is_active }}
+                                <label class="text-sm text-navy" for="{{ form.is_active.id_for_label }}">
+                                    {% trans "Active" %}
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="flex justify-end gap-3 pt-6 border-t border-slate-100">
+                    <a href="{% url 'accounts:acknowledgements:ack_checklist_list' %}" class="px-6 py-2.5 bg-slate-100 text-slate-700 rounded-xl font-semibold hover:bg-slate-200 transition">
+                        {% trans "Cancel" %}
+                    </a>
+                    <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-xl font-semibold hover:from-indigo-500 hover:to-purple-500 transition shadow-lg shadow-purple-200">
+                        <i data-lucide="save" class="w-4 h-4"></i>
+                        {% trans "Save Item" %}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/acknowledgements/checklist_list.html b/templates/accounts/acknowledgements/checklist_list.html
new file mode 100644
index 0000000..dcaf35e
--- /dev/null
+++ b/templates/accounts/acknowledgements/checklist_list.html
@@ -0,0 +1,160 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Acknowledgement Checklist Items" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Page Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-purple-500 to-indigo-500 rounded-2xl shadow-lg shadow-purple-200">
+                <i data-lucide="check-square" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% trans "Checklist Items" %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% trans "Manage acknowledgement checklist items" %}
+                </p>
+            </div>
+        </div>
+        <div class="flex gap-3">
+            <a href="{% url 'accounts:acknowledgements:ack_dashboard' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                <i data-lucide="arrow-left" class="w-4 h-4"></i>
+                {% trans "Back" %}
+            </a>
+            <a href="{% url 'accounts:acknowledgements:ack_checklist_create' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-xl font-semibold hover:from-indigo-500 hover:to-purple-500 transition shadow-lg shadow-purple-200">
+                <i data-lucide="plus" class="w-4 h-4"></i>
+                {% trans "New Item" %}
+            </a>
+        </div>
+    </div>
+
+    <!-- Filter Section -->
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-4 mb-6">
+        <form method="get" class="flex flex-wrap gap-4 items-end">
+            <div>
+                <label class="block text-xs font-semibold text-slate mb-1">{% trans "Category" %}</label>
+                <select name="category" class="px-4 py-2 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-blue focus:border-blue">
+                    <option value="">{% trans "All Categories" %}</option>
+                    {% for cat in categories %}
+                    <option value="{{ cat.id }}" {% if request.GET.category == cat.id|stringformat:"s" %}selected{% endif %}>{{ cat.name_en }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div>
+                <label class="block text-xs font-semibold text-slate mb-1">{% trans "Status" %}</label>
+                <select name="is_active" class="px-4 py-2 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-blue focus:border-blue">
+                    <option value="">{% trans "All" %}</option>
+                    <option value="true" {% if request.GET.is_active == "true" %}selected{% endif %}>{% trans "Active" %}</option>
+                    <option value="false" {% if request.GET.is_active == "false" %}selected{% endif %}>{% trans "Inactive" %}</option>
+                </select>
+            </div>
+            <button type="submit" class="px-4 py-2 bg-blue text-white rounded-xl text-sm font-semibold hover:bg-navy transition">
+                <i data-lucide="filter" class="w-4 h-4 inline mr-1"></i>
+                {% trans "Filter" %}
+            </button>
+            <a href="{% url 'accounts:acknowledgements:ack_checklist_list' %}" class="px-4 py-2 text-slate hover:text-navy text-sm">
+                {% trans "Clear" %}
+            </a>
+        </form>
+    </div>
+
+    <!-- Checklist Items List -->
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
+        <div class="px-6 py-5 border-b border-slate-100 bg-gradient-to-r from-purple-50 to-transparent">
+            <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                <i data-lucide="list" class="w-5 h-5 text-purple-500"></i>
+                {% trans "All Checklist Items" %}
+                <span class="ml-2 px-2 py-0.5 bg-slate-100 text-slate text-sm rounded-full">{{ items.count }}</span>
+            </h2>
+        </div>
+        <div class="p-6">
+            {% if items %}
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead>
+                        <tr class="border-b border-slate-200">
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Item" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Category" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Code" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Requires Signature" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Status" %}</th>
+                            <th class="text-right py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Actions" %}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for item in items %}
+                        <tr class="border-b border-slate-100 hover:bg-slate-50 transition">
+                            <td class="py-4 px-4">
+                                <div>
+                                    <p class="font-semibold text-navy">{{ item.text_en }}</p>
+                                    {% if item.text_ar %}
+                                    <p class="text-sm text-slate">{{ item.text_ar }}</p>
+                                    {% endif %}
+                                </div>
+                            </td>
+                            <td class="py-4 px-4">
+                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold" style="background-color: {{ item.category.color }}20; color: {{ item.category.color }}">
+                                    {{ item.category.name_en }}
+                                </span>
+                            </td>
+                            <td class="py-4 px-4">
+                                <span class="inline-flex items-center px-2 py-1 bg-slate-100 text-slate-700 rounded-lg text-xs font-mono">
+                                    {{ item.code|default:"-" }}
+                                </span>
+                            </td>
+                            <td class="py-4 px-4">
+                                {% if item.requires_signature %}
+                                <span class="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 rounded-lg text-xs font-semibold">
+                                    <i data-lucide="pen-tool" class="w-3 h-3"></i>
+                                    {% trans "Yes" %}
+                                </span>
+                                {% else %}
+                                <span class="inline-flex items-center px-2 py-1 bg-slate-100 text-slate-500 rounded-lg text-xs">
+                                    {% trans "No" %}
+                                </span>
+                                {% endif %}
+                            </td>
+                            <td class="py-4 px-4">
+                                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold {% if item.is_active %}bg-emerald-100 text-emerald-700{% else %}bg-red-100 text-red-700{% endif %}">
+                                    <i data-lucide="{% if item.is_active %}check-circle{% else %}x-circle{% endif %}" class="w-3.5 h-3.5"></i>
+                                    {% if item.is_active %}{% trans "Active" %}{% else %}{% trans "Inactive" %}{% endif %}
+                                </span>
+                            </td>
+                            <td class="py-4 px-4 text-right">
+                                <a href="{% url 'accounts:acknowledgements:ack_checklist_edit' item.id %}" class="inline-flex items-center gap-1 px-3 py-1.5 bg-purple-50 text-purple-700 rounded-lg text-sm font-semibold hover:bg-purple-100 transition">
+                                    <i data-lucide="edit-2" class="w-4 h-4"></i>
+                                    {% trans "Edit" %}
+                                </a>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            {% else %}
+            <div class="text-center py-16">
+                <div class="w-20 h-20 bg-gradient-to-br from-purple-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="check-square" class="w-10 h-10 text-purple-500"></i>
+                </div>
+                <h3 class="text-lg font-bold text-navy mb-2">{% trans "No Checklist Items" %}</h3>
+                <p class="text-slate mb-6">{% trans "Create your first acknowledgement checklist item to get started." %}</p>
+                <a href="{% url 'accounts:acknowledgements:ack_checklist_create' %}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-xl font-semibold hover:from-indigo-500 hover:to-purple-500 transition shadow-lg shadow-purple-200">
+                    <i data-lucide="plus" class="w-5 h-5"></i>
+                    {% trans "Create Item" %}
+                </a>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/acknowledgements/compliance.html b/templates/accounts/acknowledgements/compliance.html
new file mode 100644
index 0000000..00aedf4
--- /dev/null
+++ b/templates/accounts/acknowledgements/compliance.html
@@ -0,0 +1,196 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Acknowledgement Compliance Report" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Page Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-amber-500 to-orange-500 rounded-2xl shadow-lg shadow-amber-200">
+                <i data-lucide="pie-chart" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% trans "Compliance Report" %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% trans "Track acknowledgement completion rates" %}
+                </p>
+            </div>
+        </div>
+        <div class="flex gap-3">
+            <a href="{% url 'accounts:acknowledgements:ack_dashboard' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                <i data-lucide="arrow-left" class="w-4 h-4"></i>
+                {% trans "Back" %}
+            </a>
+        </div>
+    </div>
+
+    <!-- Stats Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
+                    <i data-lucide="users" class="w-6 h-6 text-blue-600"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase">{% trans "Total Users" %}</p>
+                    <p class="text-2xl font-bold text-navy">{{ stats.total_users }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center">
+                    <i data-lucide="check-circle" class="w-6 h-6 text-emerald-600"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase">{% trans "Fully Compliant" %}</p>
+                    <p class="text-2xl font-bold text-emerald-600">{{ stats.compliant_users }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center">
+                    <i data-lucide="clock" class="w-6 h-6 text-amber-600"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase">{% trans "Pending" %}</p>
+                    <p class="text-2xl font-bold text-amber-600">{{ stats.pending_users }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-green-500 rounded-xl flex items-center justify-center">
+                    <i data-lucide="percent" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase">{% trans "Compliance Rate" %}</p>
+                    <p class="text-2xl font-bold text-emerald-600">{{ stats.compliance_rate }}%</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Category Breakdown -->
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden mb-8">
+        <div class="px-6 py-5 border-b border-slate-100 bg-gradient-to-r from-amber-50 to-transparent">
+            <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                <i data-lucide="bar-chart-3" class="w-5 h-5 text-amber-500"></i>
+                {% trans "Compliance by Category" %}
+            </h2>
+        </div>
+        <div class="p-6">
+            {% if category_stats %}
+            <div class="space-y-4">
+                {% for cat_stat in category_stats %}
+                <div class="p-4 border border-slate-100 rounded-xl">
+                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-3">
+                        <div class="flex items-center gap-3">
+                            <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background-color: {{ cat_stat.category.color }}20">
+                                <i data-lucide="{{ cat_stat.category.icon|default:'folder' }}" class="w-5 h-5" style="color: {{ cat_stat.category.color }}"></i>
+                            </div>
+                            <div>
+                                <p class="font-semibold text-navy">{{ cat_stat.category.name_en }}</p>
+                                <p class="text-xs text-slate">{{ cat_stat.total_items }} {% trans "items" %}</p>
+                            </div>
+                        </div>
+                        <div class="text-right">
+                            <p class="text-2xl font-bold {% widthratio cat_stat.completion_rate 1 100 %}">
+                                {{ cat_stat.completion_rate|floatformat:0 }}%
+                            </p>
+                            <p class="text-xs text-slate">{{ cat_stat.signed }}/{{ cat_stat.total }} {% trans "completed" %}</p>
+                        </div>
+                    </div>
+                    <div class="w-full bg-slate-100 rounded-full h-3">
+                        <div class="h-3 rounded-full transition-all duration-500" style="width: {{ cat_stat.completion_rate|floatformat:0 }}%; background-color: {{ cat_stat.category.color }}"></div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {% else %}
+            <div class="text-center py-12">
+                <p class="text-slate">{% trans "No category data available" %}</p>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <!-- Non-Compliant Users -->
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
+        <div class="px-6 py-5 border-b border-slate-100 bg-gradient-to-r from-red-50 to-transparent">
+            <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                <i data-lucide="alert-triangle" class="w-5 h-5 text-red-500"></i>
+                {% trans "Non-Compliant Users" %}
+            </h2>
+        </div>
+        <div class="p-6">
+            {% if non_compliant_users %}
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead>
+                        <tr class="border-b border-slate-200">
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "User" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Department" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Pending Items" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-semibold text-slate uppercase">{% trans "Completion" %}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for user_data in non_compliant_users %}
+                        <tr class="border-b border-slate-100 hover:bg-slate-50 transition">
+                            <td class="py-4 px-4">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-10 h-10 bg-gradient-to-br from-blue to-navy rounded-full flex items-center justify-center">
+                                        <span class="text-white font-semibold text-sm">{{ user_data.user.get_initials }}</span>
+                                    </div>
+                                    <div>
+                                        <p class="font-semibold text-navy">{{ user_data.user.get_full_name }}</p>
+                                        <p class="text-sm text-slate">{{ user_data.user.email }}</p>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="py-4 px-4 text-slate">
+                                {{ user_data.user.department.name|default:"-" }}
+                            </td>
+                            <td class="py-4 px-4">
+                                <span class="inline-flex items-center px-2.5 py-1 bg-red-100 text-red-700 rounded-lg text-xs font-semibold">
+                                    {{ user_data.pending_count }} {% trans "pending" %}
+                                </span>
+                            </td>
+                            <td class="py-4 px-4">
+                                <div class="flex items-center gap-2">
+                                    <div class="w-24 bg-slate-100 rounded-full h-2">
+                                        <div class="bg-amber-500 h-2 rounded-full" style="width: {{ user_data.completion_rate }}%"></div>
+                                    </div>
+                                    <span class="text-sm text-slate">{{ user_data.completion_rate }}%</span>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            {% else %}
+            <div class="text-center py-12">
+                <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="check-circle" class="w-8 h-8 text-emerald-500"></i>
+                </div>
+                <h3 class="text-lg font-bold text-navy mb-2">{% trans "All Users Compliant!" %}</h3>
+                <p class="text-slate">{% trans "All users have completed their required acknowledgements." %}</p>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/acknowledgements/dashboard.html b/templates/accounts/acknowledgements/dashboard.html
new file mode 100644
index 0000000..b66f7c9
--- /dev/null
+++ b/templates/accounts/acknowledgements/dashboard.html
@@ -0,0 +1,184 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "My Acknowledgements" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Page Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="clipboard-check" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% trans "My Acknowledgements" %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% trans "Review and sign required acknowledgements" %}
+                </p>
+            </div>
+        </div>
+        <div class="flex gap-3">
+            <a href="{% url 'accounts:acknowledgements:ack_signed_list' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-emerald-200 text-emerald-700 rounded-xl font-semibold hover:bg-emerald-50 transition">
+                <i data-lucide="check-circle" class="w-4 h-4"></i>
+                {% trans "Completed" %}
+            </a>
+        </div>
+    </div>
+
+    <!-- Stats Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-xl flex items-center justify-center">
+                    <i data-lucide="list" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase">{% trans "Total" %}</p>
+                    <p class="text-3xl font-bold text-navy">{{ total_count }}</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-white rounded-2xl shadow-sm border border-orange-100 p-6">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-orange-400 to-orange-500 rounded-xl flex items-center justify-center">
+                    <i data-lucide="clock" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase">{% trans "Pending" %}</p>
+                    <p class="text-3xl font-bold text-orange-600">{{ pending_count }}</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-white rounded-2xl shadow-sm border border-emerald-100 p-6">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-green-500 rounded-xl flex items-center justify-center">
+                    <i data-lucide="check-circle" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase">{% trans "Completed" %}</p>
+                    <p class="text-3xl font-bold text-emerald-600">{{ completed_count }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Pending Acknowledgements -->
+        <div class="bg-white rounded-2xl shadow-sm border border-orange-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-orange-100 bg-gradient-to-r from-orange-50 to-transparent">
+                <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="clock" class="w-5 h-5 text-orange-500"></i>
+                    {% trans "Pending" %}
+                    <span class="inline-flex items-center px-2.5 py-0.5 bg-orange-100 text-orange-700 rounded-full text-xs font-bold">
+                        {{ pending_count }}
+                    </span>
+                </h2>
+            </div>
+            <div class="p-6">
+                {% if pending_items %}
+                <div class="space-y-4">
+                    {% for item in pending_items %}
+                    <div class="p-4 border-2 border-orange-100 rounded-xl hover:border-orange-300 hover:shadow-md transition-all duration-200">
+                        <div class="flex items-start justify-between gap-3">
+                            <div class="flex-1">
+                                <div class="flex items-center gap-2 mb-2">
+                                    <span class="inline-flex items-center px-2 py-1 bg-blue-50 text-blue-700 rounded-lg text-xs font-bold">
+                                        {{ item.category.name_en }}
+                                    </span>
+                                    {% if item.is_required %}
+                                    <span class="inline-flex items-center px-2 py-1 bg-red-50 text-red-700 rounded-lg text-xs font-bold">
+                                        {% trans "Required" %}
+                                    </span>
+                                    {% endif %}
+                                </div>
+                                <h3 class="font-bold text-navy mb-1">{{ item.text_en }}</h3>
+                                {% if item.description_en %}
+                                <p class="text-sm text-slate line-clamp-2">{{ item.description_en }}</p>
+                                {% endif %}
+                            </div>
+                            <a href="{% url 'accounts:acknowledgements:ack_sign' item.id %}" class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-orange-400 to-orange-500 text-white rounded-xl font-semibold hover:from-orange-500 hover:to-orange-600 transition shadow-lg shadow-orange-200 text-sm whitespace-nowrap">
+                                {% trans "Sign Now" %}
+                                <i data-lucide="arrow-right" class="w-4 h-4"></i>
+                            </a>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% else %}
+                <div class="text-center py-12">
+                    <div class="w-16 h-16 bg-gradient-to-br from-emerald-100 to-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="check-circle" class="w-8 h-8 text-emerald-500"></i>
+                    </div>
+                    <p class="text-slate font-medium">{% trans "All acknowledgements completed!" %}</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+
+        <!-- Completed Acknowledgements -->
+        <div class="bg-white rounded-2xl shadow-sm border border-emerald-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-emerald-100 bg-gradient-to-r from-emerald-50 to-transparent">
+                <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="check-circle" class="w-5 h-5 text-emerald-500"></i>
+                    {% trans "Completed" %}
+                    <span class="inline-flex items-center px-2.5 py-0.5 bg-emerald-100 text-emerald-700 rounded-full text-xs font-bold">
+                        {{ completed_count }}
+                    </span>
+                </h2>
+            </div>
+            <div class="p-6">
+                {% if completed_acknowledgements %}
+                <div class="space-y-4">
+                    {% for ack in completed_acknowledgements %}
+                    <div class="p-4 border-2 border-emerald-100 rounded-xl bg-emerald-50/30">
+                        <div class="flex items-start justify-between gap-3">
+                            <div class="flex-1">
+                                <div class="flex items-center gap-2 mb-2">
+                                    <span class="inline-flex items-center px-2 py-1 bg-blue-50 text-blue-700 rounded-lg text-xs font-bold">
+                                        {{ ack.checklist_item.category.name_en }}
+                                    </span>
+                                    <span class="inline-flex items-center px-2 py-1 bg-emerald-100 text-emerald-700 rounded-lg text-xs font-bold">
+                                        <i data-lucide="check" class="w-3 h-3 mr-1"></i>
+                                        {% trans "Signed" %}
+                                    </span>
+                                </div>
+                                <h3 class="font-bold text-navy mb-1">{{ ack.checklist_item.text_en }}</h3>
+                                <p class="text-sm text-slate">
+                                    <i data-lucide="calendar" class="w-3 h-3 inline mr-1"></i>
+                                    {{ ack.acknowledged_at|date:"M d, Y" }}
+                                </p>
+                            </div>
+                            {% if ack.pdf_file %}
+                            <a href="{% url 'accounts:acknowledgements:ack_download_pdf' ack.id %}" class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition text-sm whitespace-nowrap">
+                                <i data-lucide="download" class="w-4 h-4"></i>
+                                {% trans "PDF" %}
+                            </a>
+                            {% endif %}
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% else %}
+                <div class="text-center py-12">
+                    <div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="clipboard-list" class="w-8 h-8 text-blue-500"></i>
+                    </div>
+                    <p class="text-slate font-medium">{% trans "No completed acknowledgements yet" %}</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/accounts/acknowledgements/sign.html b/templates/accounts/acknowledgements/sign.html
new file mode 100644
index 0000000..4608ea4
--- /dev/null
+++ b/templates/accounts/acknowledgements/sign.html
@@ -0,0 +1,98 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{{ checklist_item.text_en }} - {% trans "Sign Acknowledgement" %}{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <div class="max-w-3xl mx-auto">
+        <!-- Back Button -->
+        <a href="{% url 'accounts:acknowledgements:ack_dashboard' %}" class="inline-flex items-center gap-2 text-blue hover:text-navy mb-6 font-medium">
+            <i data-lucide="arrow-left" class="w-4 h-4"></i>
+            {% trans "Back to Dashboard" %}
+        </a>
+
+        <!-- Acknowledgement Card -->
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                <div class="flex items-center gap-3 mb-2">
+                    <span class="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">
+                        {{ checklist_item.category.name_en }}
+                    </span>
+                    {% if checklist_item.is_required %}
+                    <span class="inline-flex items-center px-3 py-1 bg-red-100 text-red-700 rounded-full text-xs font-bold">
+                        {% trans "Required" %}
+                    </span>
+                    {% endif %}
+                </div>
+                <h1 class="text-2xl font-bold text-navy">{{ checklist_item.text_en }}</h1>
+            </div>
+
+            <div class="p-6">
+                <!-- Content -->
+                {% if checklist_item.description_en %}
+                <div class="mb-6 p-4 bg-blue-50 rounded-xl border border-blue-100">
+                    <h3 class="font-bold text-navy mb-2">{% trans "Important Information" %}</h3>
+                    <p class="text-slate">{{ checklist_item.description_en }}</p>
+                </div>
+                {% endif %}
+
+                <!-- Acknowledgement Text -->
+                <div class="mb-6">
+                    <h3 class="font-bold text-navy mb-3">{% trans "Acknowledgement Statement" %}</h3>
+                    <p class="text-slate leading-relaxed">{{ checklist_item.text_en }}</p>
+                </div>
+
+                <!-- Signature Form -->
+                <form method="post" class="space-y-6">
+                    {% csrf_token %}
+
+                    <div>
+                        <label class="block text-sm font-bold text-navy mb-2">
+                            {% trans "Your Signature" %} <span class="text-red-500">*</span>
+                        </label>
+                        <input type="text" name="signature" required
+                               class="w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                               placeholder="{% trans 'Type your full name as signature' %}"
+                               value="{{ request.user.get_full_name|default:request.user.email }}">
+                        <p class="text-xs text-slate mt-2">
+                            {% trans "By typing your name above, you acknowledge that you have read and understood this statement." %}
+                        </p>
+                    </div>
+
+                    <!-- Info Box -->
+                    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
+                        <div class="flex items-start gap-3">
+                            <i data-lucide="info" class="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0"></i>
+                            <div>
+                                <p class="text-sm font-bold text-amber-800 mb-1">{% trans "Legal Notice" %}</p>
+                                <p class="text-sm text-amber-700">
+                                    {% trans "This acknowledgement is legally binding. A PDF copy will be generated and stored in your records." %}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Submit Buttons -->
+                    <div class="flex gap-3 pt-6 border-t border-blue-100">
+                        <button type="submit" class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                            <i data-lucide="check-circle" class="w-5 h-5"></i>
+                            {% trans "I Acknowledge and Sign" %}
+                        </button>
+                        <a href="{% url 'accounts:acknowledgements:ack_dashboard' %}" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                            <i data-lucide="x" class="w-5 h-5"></i>
+                            {% trans "Cancel" %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/accounts/acknowledgements/signed_list.html b/templates/accounts/acknowledgements/signed_list.html
new file mode 100644
index 0000000..7b2ebcd
--- /dev/null
+++ b/templates/accounts/acknowledgements/signed_list.html
@@ -0,0 +1,133 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Completed Acknowledgements" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Page Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-emerald-500 to-green-500 rounded-2xl shadow-lg shadow-emerald-200">
+                <i data-lucide="check-circle" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% trans "Completed Acknowledgements" %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% trans "View your signed acknowledgements" %}
+                </p>
+            </div>
+        </div>
+        <div class="flex gap-3">
+            <a href="{% url 'accounts:acknowledgements:ack_dashboard' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
+                <i data-lucide="arrow-left" class="w-4 h-4"></i>
+                {% trans "Back to Dashboard" %}
+            </a>
+        </div>
+    </div>
+
+    <!-- Stats Card -->
+    <div class="bg-white rounded-2xl shadow-sm border border-emerald-100 p-6 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-green-500 rounded-xl flex items-center justify-center">
+                <i data-lucide="file-check" class="w-6 h-6 text-white"></i>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-slate uppercase">{% trans "Total Signed" %}</p>
+                <p class="text-3xl font-bold text-emerald-600">{{ acknowledgements.count }}</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Acknowledgements List -->
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
+        <div class="px-6 py-5 border-b border-slate-100 bg-gradient-to-r from-emerald-50 to-transparent">
+            <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                <i data-lucide="clipboard-check" class="w-5 h-5 text-emerald-500"></i>
+                {% trans "Signed Documents" %}
+            </h2>
+        </div>
+        <div class="p-6">
+            {% if acknowledgements %}
+            <div class="space-y-4">
+                {% for ack in acknowledgements %}
+                <div class="p-5 border-2 border-emerald-100 rounded-xl bg-emerald-50/30 hover:border-emerald-300 hover:shadow-md transition-all duration-200">
+                    <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+                        <div class="flex-1">
+                            <div class="flex flex-wrap items-center gap-2 mb-3">
+                                <span class="inline-flex items-center px-2.5 py-1 bg-blue-50 text-blue-700 rounded-lg text-xs font-bold">
+                                    {{ ack.checklist_item.category.name_en }}
+                                </span>
+                                <span class="inline-flex items-center px-2.5 py-1 bg-emerald-100 text-emerald-700 rounded-lg text-xs font-bold">
+                                    <i data-lucide="check" class="w-3 h-3 mr-1"></i>
+                                    {% trans "Signed" %}
+                                </span>
+                                {% if ack.checklist_item.code %}
+                                <span class="inline-flex items-center px-2 py-1 bg-slate-100 text-slate-600 rounded-lg text-xs font-mono">
+                                    {{ ack.checklist_item.code }}
+                                </span>
+                                {% endif %}
+                            </div>
+                            <h3 class="font-bold text-navy text-lg mb-2">{{ ack.checklist_item.text_en }}</h3>
+                            {% if ack.checklist_item.description_en %}
+                            <p class="text-sm text-slate mb-3">{{ ack.checklist_item.description_en }}</p>
+                            {% endif %}
+                            <div class="flex flex-wrap items-center gap-4 text-sm text-slate">
+                                <div class="flex items-center gap-1.5">
+                                    <i data-lucide="calendar" class="w-4 h-4"></i>
+                                    <span>{% trans "Signed on" %}: {{ ack.acknowledged_at|date:"F d, Y" }}</span>
+                                </div>
+                                <div class="flex items-center gap-1.5">
+                                    <i data-lucide="clock" class="w-4 h-4"></i>
+                                    <span>{{ ack.acknowledged_at|time:"H:i" }}</span>
+                                </div>
+                                {% if ack.signature %}
+                                <div class="flex items-center gap-1.5">
+                                    <i data-lucide="pen-tool" class="w-4 h-4"></i>
+                                    <span>{% trans "Signature" %}: {{ ack.signature }}</span>
+                                </div>
+                                {% endif %}
+                            </div>
+                        </div>
+                        <div class="flex gap-2">
+                            {% if ack.pdf_file %}
+                            <a href="{% url 'accounts:acknowledgements:ack_download_pdf' ack.id %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200 text-sm whitespace-nowrap">
+                                <i data-lucide="download" class="w-4 h-4"></i>
+                                {% trans "Download PDF" %}
+                            </a>
+                            {% else %}
+                            <span class="inline-flex items-center gap-2 px-4 py-2.5 bg-slate-100 text-slate-500 rounded-xl text-sm whitespace-nowrap">
+                                <i data-lucide="file-x" class="w-4 h-4"></i>
+                                {% trans "PDF not available" %}
+                            </span>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {% else %}
+            <div class="text-center py-16">
+                <div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="clipboard-list" class="w-10 h-10 text-blue-500"></i>
+                </div>
+                <h3 class="text-lg font-bold text-navy mb-2">{% trans "No Completed Acknowledgements" %}</h3>
+                <p class="text-slate mb-6">{% trans "You haven't signed any acknowledgements yet." %}</p>
+                <a href="{% url 'accounts:acknowledgements:ack_dashboard' %}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                    <i data-lucide="clipboard-check" class="w-5 h-5"></i>
+                    {% trans "View Pending Acknowledgements" %}
+                </a>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/onboarding/bulk_invite.html b/templates/accounts/onboarding/bulk_invite.html
index 50d4b53..1338861 100644
--- a/templates/accounts/onboarding/bulk_invite.html
+++ b/templates/accounts/onboarding/bulk_invite.html
@@ -4,66 +4,84 @@
 {% block title %}{% trans "Bulk Invite" %}{% endblock %}
 
 {% block content %}
-<div class="p-6 md:p-8">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Header -->
     <div class="mb-8">
-        <a href="{% url 'accounts:onboarding_dashboard' %}" class="inline-flex items-center text-navy hover:text-navy mb-4 font-medium">
-            <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
-            {% trans "Back to Dashboard" %}
-        </a>
-        <h1 class="text-3xl font-bold text-gray-800 mb-2">
-            {% trans "Send Bulk Invitations" %}
-        </h1>
-        <p class="text-gray-500">
-            {% trans "Invite multiple staff members to complete onboarding" %}
-        </p>
+        <div class="flex items-center gap-3 mb-4">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="mail-plus" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <a href="{% url 'accounts:acknowledgement-dashboard' %}" class="inline-flex items-center text-blue hover:text-navy mb-2 font-medium">
+                    <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
+                    {% trans "Back to Dashboard" %}
+                </a>
+                <h1 class="text-3xl font-bold text-navy">
+                    {% trans "Send Bulk Invitations" %}
+                </h1>
+                <p class="text-slate">
+                    {% trans "Invite multiple staff members to complete onboarding" %}
+                </p>
+            </div>
+        </div>
     </div>
 
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
         <!-- Form -->
         <div class="lg:col-span-2">
-            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-8">
+            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 md:p-8">
                 <form method="post" enctype="multipart/form-data">
                     {% csrf_token %}
-                    
-                    <div class="mb-6">
-                        <label class="block text-gray-700 font-medium mb-2">
+
+                    <div class="mb-8">
+                        <label class="block text-navy font-bold mb-3">
                             {% trans "Upload CSV File" %}
                         </label>
-                        <div class="border-2 border-dashed border-gray-200 rounded-2xl p-8 text-center hover:border-blue transition cursor-pointer">
+                        <div class="border-2 border-dashed border-blue-200 rounded-2xl p-8 text-center hover:border-blue transition cursor-pointer bg-blue-50/50">
                             <input type="file" name="csv_file" accept=".csv" class="hidden" id="csv_file">
                             <label for="csv_file" class="cursor-pointer">
-                                <i data-lucide="upload-cloud" class="w-12 h-12 text-gray-400 mx-auto mb-3"></i>
-                                <p class="text-gray-600 font-medium mb-1">{% trans "Click to upload CSV file" %}</p>
-                                <p class="text-gray-400 text-sm">{% trans "or drag and drop" %}</p>
+                                <div class="flex flex-col items-center">
+                                    <div class="w-16 h-16 bg-gradient-to-br from-blue to-navy rounded-2xl flex items-center justify-center mb-4 mx-auto">
+                                        <i data-lucide="upload-cloud" class="w-8 h-8 text-white"></i>
+                                    </div>
+                                    <p class="text-navy font-bold mb-1">{% trans "Click to upload CSV file" %}</p>
+                                    <p class="text-slate text-sm">{% trans "or drag and drop" %}</p>
+                                </div>
                             </label>
                         </div>
-                        <p class="text-sm text-gray-400 mt-2">
-                            <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
-                            {% trans "CSV should contain columns: email, name, department" %}
-                        </p>
+                        <div class="mt-4 bg-blue-50 border border-blue-200 rounded-xl p-4">
+                            <div class="flex items-start gap-3">
+                                <i data-lucide="info" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+                                <div>
+                                    <p class="text-sm font-bold text-navy mb-1">{% trans "CSV Format Requirements" %}</p>
+                                    <p class="text-xs text-slate">{% trans "Required columns: email, first_name, last_name, role" %}</p>
+                                    <p class="text-xs text-slate">{% trans "Optional columns: hospital_id, department" %}</p>
+                                </div>
+                            </div>
+                        </div>
                     </div>
 
-                    <div class="mb-6">
-                        <label class="block text-gray-700 font-medium mb-2">
+                    <div class="mb-8">
+                        <label class="block text-navy font-bold mb-3">
                             {% trans "Or Enter Email Addresses" %}
                         </label>
-                        <textarea name="emails" rows="5" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent" placeholder="email1@example.com&#10;email2@example.com&#10;email3@example.com"></textarea>
+                        <textarea name="emails" rows="5" class="w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition" placeholder="email1@example.com&#10;email2@example.com&#10;email3@example.com"></textarea>
+                        <p class="text-xs text-slate mt-2">{% trans "Enter one email address per line" %}</p>
                     </div>
 
-                    <div class="mb-6">
-                        <label class="block text-gray-700 font-medium mb-2">
+                    <div class="mb-8">
+                        <label class="block text-navy font-bold mb-3">
                             {% trans "Custom Message (Optional)" %}
                         </label>
-                        <textarea name="custom_message" rows="3" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent" placeholder="{% trans 'Add a personal note to your invitation emails...' %}"></textarea>
+                        <textarea name="custom_message" rows="3" class="w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition" placeholder="{% trans 'Add a personal note to your invitation emails...' %}"></textarea>
                     </div>
 
                     <div class="flex gap-4">
-                        <button type="submit" class="flex-1 bg-gradient-to-r from-navy to-orange-500 text-white px-6 py-3 rounded-xl font-bold hover:from-navy hover:to-orange-600 transition shadow-lg shadow-blue-200">
-                            <i data-lucide="send" class="w-5 h-5 inline mr-2"></i>
+                        <button type="submit" class="flex-1 bg-gradient-to-r from-blue to-navy text-white px-6 py-4 rounded-xl font-bold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200 flex items-center justify-center gap-2">
+                            <i data-lucide="send" class="w-5 h-5"></i>
                             {% trans "Send Invitations" %}
                         </button>
-                        <a href="{% url 'accounts:onboarding_dashboard' %}" class="px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-bold hover:bg-gray-200 transition">
+                        <a href="{% url 'accounts:acknowledgement-dashboard' %}" class="px-6 py-4 bg-slate-100 text-slate-700 rounded-xl font-bold hover:bg-slate-200 transition">
                             {% trans "Cancel" %}
                         </a>
                     </div>
@@ -73,36 +91,60 @@
 
         <!-- Help Sidebar -->
         <div class="space-y-6">
-            <div class="bg-blue-50 border border-blue-200 rounded-2xl p-6">
-                <h3 class="font-bold text-blue-800 mb-3 flex items-center gap-2">
-                    <i data-lucide="help-circle" class="w-5 h-5"></i>
+            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-2xl p-6">
+                <h3 class="font-bold text-navy mb-4 flex items-center gap-2">
+                    <i data-lucide="help-circle" class="w-5 h-5 text-blue"></i>
                     {% trans "How it works" %}
                 </h3>
-                <ol class="text-blue-700 text-sm space-y-2 list-decimal list-inside">
-                    <li>{% trans "Upload a CSV file or enter emails manually" %}</li>
-                    <li>{% trans "Preview and verify the invitation list" %}</li>
-                    <li>{% trans "Send invitations to all staff members" %}</li>
-                    <li>{% trans "Track their onboarding progress" %}</li>
-                </ol>
+                <div class="space-y-4">
+                    <div class="flex items-start gap-3">
+                        <div class="flex items-center justify-center w-8 h-8 bg-gradient-to-br from-blue to-navy rounded-lg flex-shrink-0">
+                            <span class="text-white font-bold text-sm">1</span>
+                        </div>
+                        <div>
+                            <p class="text-sm font-bold text-navy">{% trans "Prepare CSV or emails" %}</p>
+                            <p class="text-xs text-slate">{% trans "Upload a CSV file or enter email addresses" %}</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="flex items-center justify-center w-8 h-8 bg-gradient-to-br from-blue to-navy rounded-lg flex-shrink-0">
+                            <span class="text-white font-bold text-sm">2</span>
+                        </div>
+                        <div>
+                            <p class="text-sm font-bold text-navy">{% trans "Review & send" %}</p>
+                            <p class="text-xs text-slate">{% trans "We'll send personalized invitations" %}</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3">
+                        <div class="flex items-center justify-center w-8 h-8 bg-gradient-to-br from-blue to-navy rounded-lg flex-shrink-0">
+                            <span class="text-white font-bold text-sm">3</span>
+                        </div>
+                        <div>
+                            <p class="text-sm font-bold text-navy">{% trans "Track progress" %}</p>
+                            <p class="text-xs text-slate">{% trans "Monitor completion from the dashboard" %}</p>
+                        </div>
+                    </div>
+                </div>
             </div>
 
-            <div class="bg-light border border-blue-200 rounded-2xl p-6">
-                <h3 class="font-bold text-navy mb-3 flex items-center gap-2">
-                    <i data-lucide="alert-triangle" class="w-5 h-5"></i>
-                    {% trans "Important Notes" %}
-                </h3>
-                <ul class="text-navy text-sm space-y-2">
-                    <li class="flex gap-2">
-                        <i data-lucide="check" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
-                        <span>{% trans "Each email will receive a unique activation link" %}</span>
+            <div class="bg-white border border-blue-100 rounded-2xl p-6">
+                <h4 class="font-bold text-navy mb-3">{% trans "Quick Tips" %}</h4>
+                <ul class="space-y-2 text-sm text-slate">
+                    <li class="flex items-start gap-2">
+                        <i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
+                        <span>{% trans "Use CSV for large batches (50+ users)" %}</span>
                     </li>
-                    <li class="flex gap-2">
-                        <i data-lucide="check" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
-                        <span>{% trans "Links expire after 7 days" %}</span>
+                    <li class="flex items-start gap-2">
+                        <i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
+                        <span>{% trans "Manual entry works well for small groups" %}</span>
                     </li>
-                    <li class="flex gap-2">
-                        <i data-lucide="check" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
-                        <span>{% trans "Staff must complete onboarding to access the system" %}</span>
+                    <li class="flex items-start gap-2">
+                        <i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
+                        <span>{% trans "Add a custom message for personalization" %}</span>
+                    </li>
+                    <li class="flex items-start gap-2">
+                        <i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
+                        <span>{% trans "Double-check email addresses before sending" %}</span>
                     </li>
                 </ul>
             </div>
@@ -115,4 +157,4 @@ document.addEventListener('DOMContentLoaded', function() {
     lucide.createIcons();
 });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/accounts/onboarding/checklist_list.html b/templates/accounts/onboarding/checklist_list.html
index ac87ec0..fc98e55 100644
--- a/templates/accounts/onboarding/checklist_list.html
+++ b/templates/accounts/onboarding/checklist_list.html
@@ -4,62 +4,72 @@
 {% block title %}{% trans "Acknowledgement Checklist Items" %}{% endblock %}
 
 {% block content %}
-<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Page Header -->
     <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
-        <div>
-            <h2 class="text-3xl font-bold text-gray-800 mb-2 flex items-center gap-2">
-                <i data-lucide="list-checks" class="w-8 h-8 text-navy"></i>
-                {% trans "Checklist Items Management" %}
-            </h2>
-            <p class="text-gray-500">{% trans "Manage acknowledgement checklist items" %}</p>
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="list-checks" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h2 class="text-3xl font-bold text-navy mb-1">
+                    {% trans "Checklist Items" %}
+                </h2>
+                <p class="text-slate">{% trans "Manage acknowledgement checklist items" %}</p>
+            </div>
         </div>
-        <button type="button" class="bg-light0 text-white px-6 py-3 rounded-xl font-bold hover:bg-navy transition flex items-center gap-2 shadow-lg shadow-blue-200" onclick="document.getElementById('createChecklistItemModal').classList.remove('hidden')">
+        <button type="button" onclick="document.getElementById('createChecklistItemModal').classList.remove('hidden')" 
+                class="bg-gradient-to-r from-blue to-navy text-white px-6 py-3 rounded-xl font-bold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200 flex items-center gap-2">
             <i data-lucide="plus" class="w-5 h-5"></i>
             {% trans "Add Checklist Item" %}
         </button>
     </div>
 
     <!-- Checklist Items List -->
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
-            <h3 class="font-bold text-gray-800 flex items-center gap-2">
-                <i data-lucide="list" class="w-5 h-5 text-navy"></i>
-                {% trans "Checklist Items" %}
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+            <h3 class="font-bold text-navy flex items-center gap-2 text-lg">
+                <i data-lucide="clipboard-list" class="w-5 h-5 text-blue"></i>
+                {% trans "All Items" %}
             </h3>
             <div class="flex items-center gap-2 w-full md:w-auto">
-                <input type="text" id="searchInput" placeholder="{% trans 'Search items...' %}" 
-                       class="flex-1 md:w-64 px-4 py-2 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition">
-                <button class="px-4 py-2 text-gray-600 bg-gray-100 rounded-xl hover:bg-gray-200 transition">
-                    <i data-lucide="search" class="w-4 h-4"></i>
-                </button>
+                <div class="relative flex-1 md:w-64">
+                    <input type="text" id="searchInput" placeholder="{% trans 'Search items...' %}"
+                           class="w-full pl-10 pr-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                           value="{{ search_query|default:'' }}">
+                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate"></i>
+                </div>
             </div>
         </div>
         <div class="overflow-x-auto">
             <table class="w-full" id="itemsTable">
-                <thead class="bg-gray-50">
+                <thead class="bg-blue-50">
                     <tr>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Item Text" %}</th>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Role" %}</th>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Linked Content" %}</th>
-                        <th class="px-6 py-4 text-center text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Required" %}</th>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Order" %}</th>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Status" %}</th>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Created" %}</th>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Actions" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Item Text" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Role" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Linked Content" %}</th>
+                        <th class="px-6 py-4 text-center text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Required" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Order" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Status" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Created" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Actions" %}</th>
                     </tr>
                 </thead>
-                <tbody class="divide-y divide-gray-100">
+                <tbody class="divide-y divide-blue-50">
                     {% for item in checklist_items %}
-                    <tr class="hover:bg-gray-50 transition">
+                    <tr class="hover:bg-blue-50/50 transition">
                         <td class="px-6 py-4">
-                            <strong class="text-gray-800">{{ item.text_en }}</strong>
-                            {% if item.code %}
-                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-gray-100 text-gray-600 ml-2">{{ item.code }}</span>
-                            {% endif %}
-                            {% if item.description_en %}
-                                <p class="text-sm text-gray-500 mt-1">{{ item.description_en }}</p>
-                            {% endif %}
+                            <div class="flex items-start gap-2">
+                                <div>
+                                    <strong class="text-navy font-bold">{{ item.text_en }}</strong>
+                                    {% if item.code %}
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-blue-100 text-blue-700 ml-2">{{ item.code }}</span>
+                                    {% endif %}
+                                    {% if item.description_en %}
+                                        <p class="text-sm text-slate mt-1">{{ item.description_en|truncatewords:15 }}</p>
+                                    {% endif %}
+                                </div>
+                            </div>
                         </td>
                         <td class="px-6 py-4">
                             {% if item.role %}
@@ -67,16 +77,16 @@
                                     {{ item.get_role_display }}
                                 </span>
                             {% else %}
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">{% trans "All Roles" %}</span>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">{% trans "All Roles" %}</span>
                             {% endif %}
                         </td>
                         <td class="px-6 py-4">
                             {% if item.content %}
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">
-                                    {{ item.content.title_en }}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-indigo-100 text-indigo-700">
+                                    {{ item.content.title_en|truncatechars:25 }}
                                 </span>
                             {% else %}
-                                <span class="text-gray-400">-</span>
+                                <span class="text-slate">-</span>
                             {% endif %}
                         </td>
                         <td class="px-6 py-4 text-center">
@@ -86,10 +96,10 @@
                                     {% trans "Yes" %}
                                 </span>
                             {% else %}
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">{% trans "No" %}</span>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">{% trans "No" %}</span>
                             {% endif %}
                         </td>
-                        <td class="px-6 py-4 text-gray-800">{{ item.order }}</td>
+                        <td class="px-6 py-4 text-navy font-semibold">{{ item.order }}</td>
                         <td class="px-6 py-4">
                             {% if item.is_active %}
                                 <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
@@ -97,21 +107,21 @@
                                     {% trans "Active" %}
                                 </span>
                             {% else %}
-                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">
                                     <i data-lucide="x" class="w-3 h-3 mr-1"></i>
                                     {% trans "Inactive" %}
                                 </span>
                             {% endif %}
                         </td>
-                        <td class="px-6 py-4 text-gray-500 text-sm">
+                        <td class="px-6 py-4 text-slate text-sm">
                             {{ item.created_at|date:"M d, Y" }}
                         </td>
                         <td class="px-6 py-4">
                             <div class="flex gap-2">
-                                <button class="px-3 py-2 text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition font-medium text-sm" title="{% trans 'Edit' %}">
+                                <button type="button" onclick="editChecklistItem('{{ item.pk }}')" class="px-3 py-2 text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition font-medium text-sm" title="{% trans 'Edit' %}">
                                     <i data-lucide="pencil" class="w-4 h-4"></i>
                                 </button>
-                                <button class="px-3 py-2 text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition font-medium text-sm" title="{% trans 'Delete' %}">
+                                <button type="button" onclick="deleteChecklistItem('{{ item.pk }}')" class="px-3 py-2 text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition font-medium text-sm" title="{% trans 'Delete' %}">
                                     <i data-lucide="trash-2" class="w-4 h-4"></i>
                                 </button>
                             </div>
@@ -120,8 +130,14 @@
                     {% empty %}
                     <tr>
                         <td colspan="8" class="text-center py-12">
-                            <i data-lucide="clipboard-data" class="w-16 h-16 text-gray-300 mx-auto mb-4"></i>
-                            <p class="text-gray-500">{% trans "No checklist items found" %}</p>
+                            <div class="flex flex-col items-center">
+                                <i data-lucide="clipboard-data" class="w-16 h-16 text-blue-200 mx-auto mb-4"></i>
+                                <p class="text-slate font-medium">{% trans "No checklist items found" %}</p>
+                                <button type="button" onclick="document.getElementById('createChecklistItemModal').classList.remove('hidden')" 
+                                        class="mt-4 text-blue font-semibold hover:underline">
+                                    {% trans "Add your first checklist item" %}
+                                </button>
+                            </div>
                         </td>
                     </tr>
                     {% endfor %}
@@ -132,40 +148,40 @@
 </div>
 
 <!-- Create Checklist Item Modal -->
-<div id="createChecklistItemModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
-    <div class="bg-white rounded-2xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto m-4">
-        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
-            <h3 class="font-bold text-gray-800 flex items-center gap-2">
-                <i data-lucide="plus-circle" class="w-5 h-5 text-navy"></i>
+<div id="createChecklistItemModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50">
+    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto m-4">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent flex justify-between items-center sticky top-0 rounded-t-2xl">
+            <h3 class="font-bold text-navy flex items-center gap-2 text-lg">
+                <i data-lucide="plus-circle" class="w-5 h-5 text-blue"></i>
                 {% trans "Add New Checklist Item" %}
             </h3>
-            <button type="button" onclick="document.getElementById('createChecklistItemModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 transition">
+            <button type="button" onclick="document.getElementById('createChecklistItemModal').classList.add('hidden')" class="text-slate hover:text-navy transition">
                 <i data-lucide="x" class="w-6 h-6"></i>
             </button>
         </div>
         <div class="p-6">
             <form id="createChecklistItemForm">
                 {% csrf_token %}
-                
+
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <!-- Code -->
                     <div>
-                        <label for="code" class="block text-sm font-bold text-gray-700 mb-2">
-                            <i data-lucide="tag" class="w-4 h-4 inline mr-1"></i>
+                        <label for="code" class="block text-sm font-bold text-navy mb-2">
+                            <i data-lucide="tag" class="w-4 h-4 inline mr-1 text-blue"></i>
                             {% trans "Code" %} <span class="text-red-500">*</span>
                         </label>
                         <input type="text" id="code" name="code" required
-                               class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition"
-                               placeholder="{% trans 'Unique identifier for this item (e.g., CLINIC_P1)' %}">
+                               class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                               placeholder="{% trans 'CLINIC_P1' %}">
                     </div>
-                    
+
                     <!-- Role -->
                     <div>
-                        <label for="role" class="block text-sm font-bold text-gray-700 mb-2">
-                            <i data-lucide="user-cog" class="w-4 h-4 inline mr-1"></i>
+                        <label for="role" class="block text-sm font-bold text-navy mb-2">
+                            <i data-lucide="user-cog" class="w-4 h-4 inline mr-1 text-blue"></i>
                             {% trans "Role" %}
                         </label>
-                        <select id="role" name="role" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                        <select id="role" name="role" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition">
                             <option value="">{% trans "All Roles" %}</option>
                             <option value="px_admin">{% trans "PX Admin" %}</option>
                             <option value="hospital_admin">{% trans "Hospital Admin" %}</option>
@@ -176,105 +192,97 @@
                             <option value="staff">{% trans "Staff" %}</option>
                             <option value="viewer">{% trans "Viewer" %}</option>
                         </select>
-                        <p class="text-sm text-gray-400 mt-1">{% trans "Leave empty to apply to all roles" %}</p>
                     </div>
-                    
+
                     <!-- Linked Content -->
                     <div>
-                        <label for="content" class="block text-sm font-bold text-gray-700 mb-2">
-                            <i data-lucide="file-text" class="w-4 h-4 inline mr-1"></i>
+                        <label for="content" class="block text-sm font-bold text-navy mb-2">
+                            <i data-lucide="link" class="w-4 h-4 inline mr-1 text-blue"></i>
                             {% trans "Linked Content" %}
                         </label>
-                        <select id="content" name="content" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                        <select id="content" name="content" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition">
                             <option value="">{% trans "No linked content" %}</option>
                             {% for content_item in content_list %}
                             <option value="{{ content_item.id }}">{{ content_item.title_en }}</option>
                             {% endfor %}
                         </select>
-                        <p class="text-sm text-gray-400 mt-1">{% trans "Optional content section to link with this item" %}</p>
                     </div>
-                    
+
                     <!-- Order -->
                     <div>
-                        <label for="order" class="block text-sm font-bold text-gray-700 mb-2">
-                            <i data-lucide="arrow-down-1-0" class="w-4 h-4 inline mr-1"></i>
+                        <label for="order" class="block text-sm font-bold text-navy mb-2">
+                            <i data-lucide="arrow-down-1-0" class="w-4 h-4 inline mr-1 text-blue"></i>
                             {% trans "Display Order" %}
                         </label>
                         <input type="number" id="order" name="order" value="0" min="0"
-                               class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition">
-                        <p class="text-sm text-gray-400 mt-1">{% trans "Order in which this item appears (lower = first)" %}</p>
+                               class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition">
                     </div>
-                    
+
                     <!-- Text (English) -->
                     <div class="md:col-span-2">
-                        <label for="text_en" class="block text-sm font-bold text-gray-700 mb-2">
-                            <i data-lucide="type" class="w-4 h-4 inline mr-1"></i>
+                        <label for="text_en" class="block text-sm font-bold text-navy mb-2">
+                            <i data-lucide="type" class="w-4 h-4 inline mr-1 text-blue"></i>
                             {% trans "Text (English)" %} <span class="text-red-500">*</span>
                         </label>
                         <input type="text" id="text_en" name="text_en" required
-                               class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition"
+                               class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
                                placeholder="{% trans 'Main text for the checklist item' %}">
                     </div>
-                    
+
                     <!-- Text (Arabic) -->
                     <div class="md:col-span-2">
-                        <label for="text_ar" class="block text-sm font-bold text-gray-700 mb-2">
-                            <i data-lucide="type" class="w-4 h-4 inline mr-1"></i>
+                        <label for="text_ar" class="block text-sm font-bold text-navy mb-2">
+                            <i data-lucide="type" class="w-4 h-4 inline mr-1 text-blue"></i>
                             {% trans "Text (Arabic)" %}
                         </label>
                         <input type="text" id="text_ar" name="text_ar" dir="rtl"
-                               class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition"
-                               placeholder="{% trans 'Arabic translation (optional)' %}">
+                               class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                               placeholder="{% trans 'Arabic translation' %}">
                     </div>
-                    
+
                     <!-- Description (English) -->
                     <div class="md:col-span-2">
-                        <label for="description_en" class="block text-sm font-bold text-gray-700 mb-2">
-                            <i data-lucide="file-text" class="w-4 h-4 inline mr-1"></i>
+                        <label for="description_en" class="block text-sm font-bold text-navy mb-2">
+                            <i data-lucide="file-text" class="w-4 h-4 inline mr-1 text-blue"></i>
                             {% trans "Description (English)" %}
                         </label>
                         <textarea id="description_en" name="description_en" rows="3"
-                                  class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition"
-                                  placeholder="{% trans 'Additional details (optional)' %}"></textarea>
+                                  class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                                  placeholder="{% trans 'Additional details' %}"></textarea>
                     </div>
-                    
+
                     <!-- Description (Arabic) -->
                     <div class="md:col-span-2">
-                        <label for="description_ar" class="block text-sm font-bold text-gray-700 mb-2">
-                            <i data-lucide="file-text" class="w-4 h-4 inline mr-1"></i>
+                        <label for="description_ar" class="block text-sm font-bold text-navy mb-2">
+                            <i data-lucide="file-text" class="w-4 h-4 inline mr-1 text-blue"></i>
                             {% trans "Description (Arabic)" %}
                         </label>
                         <textarea id="description_ar" name="description_ar" rows="3" dir="rtl"
-                                  class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition"
-                                  placeholder="{% trans 'Arabic translation (optional)' %}"></textarea>
+                                  class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                                  placeholder="{% trans 'Arabic translation' %}"></textarea>
                     </div>
-                    
+
                     <!-- Configuration -->
                     <div>
-                        <label for="is_required" class="block text-sm font-bold text-gray-700 mb-2">
-                            <i data-lucide="check-circle" class="w-4 h-4 inline mr-1"></i>
-                            {% trans "Required" %}
+                        <label class="block text-sm font-bold text-navy mb-2">
+                            <i data-lucide="check-circle" class="w-4 h-4 inline mr-1 text-blue"></i>
+                            {% trans "Configuration" %}
                         </label>
-                        <div class="flex items-center gap-3">
-                            <input type="checkbox" id="is_required" name="is_required" checked
-                                   class="w-5 h-5 text-navy border-gray-300 rounded focus:ring-2 focus:ring-navy">
-                            <span class="text-gray-700">{% trans "Item must be acknowledged" %}</span>
-                        </div>
-                    </div>
-                    
-                    <div>
-                        <label for="is_active" class="block text-sm font-bold text-gray-700 mb-2">
-                            <i data-lucide="toggle-left" class="w-4 h-4 inline mr-1"></i>
-                            {% trans "Active" %}
-                        </label>
-                        <div class="flex items-center gap-3">
-                            <input type="checkbox" id="is_active" name="is_active" checked
-                                   class="w-5 h-5 text-navy border-gray-300 rounded focus:ring-2 focus:ring-navy">
-                            <span class="text-gray-700">{% trans "Item is visible" %}</span>
+                        <div class="space-y-3">
+                            <label class="flex items-center gap-3 cursor-pointer">
+                                <input type="checkbox" id="is_required" name="is_required" checked
+                                       class="w-5 h-5 text-blue border-blue-200 rounded focus:ring-2 focus:ring-blue">
+                                <span class="text-navy font-medium">{% trans "Item must be acknowledged" %}</span>
+                            </label>
+                            <label class="flex items-center gap-3 cursor-pointer">
+                                <input type="checkbox" id="is_active" name="is_active" checked
+                                       class="w-5 h-5 text-blue border-blue-200 rounded focus:ring-2 focus:ring-blue">
+                                <span class="text-navy font-medium">{% trans "Item is visible" %}</span>
+                            </label>
                         </div>
                     </div>
                 </div>
-                
+
                 <!-- Error Alert -->
                 <div class="bg-red-50 border border-red-200 rounded-xl p-4 mt-6 hidden" id="formError">
                     <div class="flex items-center gap-2 text-red-700">
@@ -284,14 +292,14 @@
                 </div>
             </form>
         </div>
-        <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
-            <button type="button" onclick="document.getElementById('createChecklistItemModal').classList.add('hidden')" 
-                    class="px-6 py-2.5 border-2 border-gray-300 text-gray-700 rounded-xl font-bold hover:bg-gray-50 transition flex items-center gap-2">
+        <div class="px-6 py-4 border-t border-blue-100 bg-gradient-to-r from-blue-50 to-transparent flex justify-end gap-3 sticky bottom-0 rounded-b-2xl">
+            <button type="button" onclick="document.getElementById('createChecklistItemModal').classList.add('hidden')"
+                    class="px-6 py-2.5 border-2 border-slate-200 text-slate-700 rounded-xl font-bold hover:bg-slate-50 transition flex items-center gap-2">
                 <i data-lucide="x-circle" class="w-4 h-4"></i>
                 {% trans "Cancel" %}
             </button>
             <button type="button" onclick="saveChecklistItem()" id="saveChecklistItemBtn"
-                    class="bg-light0 text-white px-6 py-2.5 rounded-xl font-bold hover:bg-navy transition flex items-center gap-2">
+                    class="bg-gradient-to-r from-blue to-navy text-white px-6 py-2.5 rounded-xl font-bold hover:from-navy hover:to-blue transition flex items-center gap-2 shadow-lg shadow-blue-200">
                 <i data-lucide="save" class="w-4 h-4"></i>
                 <span id="saveBtnText">{% trans "Save Item" %}</span>
                 <span class="animate-spin hidden" id="saveBtnSpinner">
@@ -305,32 +313,36 @@
 <script>
 document.addEventListener('DOMContentLoaded', function() {
     lucide.createIcons();
-    
-    // Search functionality
+
+    // Search functionality with debounce
+    let searchTimeout;
     document.getElementById('searchInput').addEventListener('keyup', function() {
+        clearTimeout(searchTimeout);
         const searchValue = this.value.toLowerCase();
-        const table = document.getElementById('itemsTable');
-        const rows = table.getElementsByTagName('tr');
-        
-        for (let i = 1; i < rows.length; i++) {
-            const row = rows[i];
-            const cells = row.getElementsByTagName('td');
-            let found = false;
-            
-            for (let j = 0; j < cells.length; j++) {
-                const cellText = cells[j].textContent.toLowerCase();
-                if (cellText.includes(searchValue)) {
-                    found = true;
-                    break;
+        searchTimeout = setTimeout(() => {
+            const table = document.getElementById('itemsTable');
+            const rows = table.getElementsByTagName('tr');
+
+            for (let i = 1; i < rows.length; i++) {
+                const row = rows[i];
+                const cells = row.getElementsByTagName('td');
+                let found = false;
+
+                for (let j = 0; j < cells.length; j++) {
+                    const cellText = cells[j].textContent.toLowerCase();
+                    if (cellText.includes(searchValue)) {
+                        found = true;
+                        break;
+                    }
                 }
+
+                row.style.display = found ? '' : 'none';
             }
-            
-            row.style.display = found ? '' : 'none';
-        }
+        }, 300);
     });
 });
 
-// Save checklist item
+// Save checklist item (create or update)
 async function saveChecklistItem() {
     const form = document.getElementById('createChecklistItemForm');
     const saveBtn = document.getElementById('saveChecklistItemBtn');
@@ -338,16 +350,20 @@ async function saveChecklistItem() {
     const saveBtnSpinner = document.getElementById('saveBtnSpinner');
     const errorAlert = document.getElementById('formError');
     const errorMessage = document.getElementById('formErrorMessage');
-    
+
     // Hide previous errors
     errorAlert.classList.add('hidden');
-    
+
     // Validate form
     if (!form.checkValidity()) {
         form.reportValidity();
         return;
     }
-    
+
+    // Check if we're editing an existing item
+    const editItemId = form.dataset.editItemId;
+    const isEditing = !!editItemId;
+
     // Prepare form data
     const formData = new FormData(form);
     const data = {
@@ -362,42 +378,42 @@ async function saveChecklistItem() {
         is_active: formData.get('is_active') === 'on',
         order: parseInt(formData.get('order')) || 0
     };
-    
+
     // Show loading state
     saveBtn.disabled = true;
     saveBtnText.textContent = '{% trans "Saving..." %}';
     saveBtnSpinner.classList.remove('hidden');
-    
+
     try {
-        // Get CSRF token
         const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
         
-        // Send API request
-        const response = await fetch('/api/accounts/onboarding/checklist/', {
-            method: 'POST',
+        // Use PUT for update, POST for create
+        const url = isEditing 
+            ? `/api/accounts/onboarding/checklist/${editItemId}/`
+            : '/api/accounts/onboarding/checklist/';
+        const method = isEditing ? 'PUT' : 'POST';
+
+        const response = await fetch(url, {
+            method: method,
             headers: {
                 'Content-Type': 'application/json',
                 'X-CSRFToken': csrfToken
             },
             body: JSON.stringify(data)
         });
-        
+
         const responseData = await response.json();
-        
+
         if (response.ok) {
-            // Close modal
             document.getElementById('createChecklistItemModal').classList.add('hidden');
-            
-            // Show success message
-            showAlert('{% trans "Checklist item created successfully!" %}', 'success');
-            
-            // Reload page to show new item
+            showAlert(isEditing 
+                ? '{% trans "Checklist item updated successfully!" %}'
+                : '{% trans "Checklist item created successfully!" %}', 'success');
             setTimeout(() => {
                 window.location.reload();
             }, 1000);
         } else {
-            // Show error
-            errorMessage.textContent = responseData.error || responseData.detail || '{% trans "Failed to create checklist item" %}';
+            errorMessage.textContent = responseData.error || responseData.detail || '{% trans "Failed to save checklist item" %}';
             errorAlert.classList.remove('hidden');
         }
     } catch (error) {
@@ -405,7 +421,6 @@ async function saveChecklistItem() {
         errorMessage.textContent = '{% trans "An error occurred. Please try again." %}';
         errorAlert.classList.remove('hidden');
     } finally {
-        // Reset button state
         saveBtn.disabled = false;
         saveBtnText.textContent = '{% trans "Save Item" %}';
         saveBtnSpinner.classList.add('hidden');
@@ -414,22 +429,20 @@ async function saveChecklistItem() {
 
 // Show alert message
 function showAlert(message, type = 'info') {
-    // Create alert element
     const alert = document.createElement('div');
-    const bgColor = type === 'success' ? 'bg-emerald-500' : 'bg-blue-500';
-    alert.className = `fixed top-4 right-4 ${bgColor} text-white px-6 py-4 rounded-xl shadow-lg z-50 flex items-center gap-3`;
+    const bgColor = type === 'success' ? 'bg-gradient-to-r from-emerald-500 to-emerald-600' : 'bg-gradient-to-r from-blue-500 to-blue-600';
+    alert.className = `${bgColor} text-white px-6 py-4 rounded-xl shadow-xl z-50 flex items-center gap-3 fixed top-4 right-4`;
     alert.innerHTML = `
-        ${message}
+        <i data-lucide="${type === 'success' ? 'check-circle' : 'info'}" class="w-5 h-5"></i>
+        <span class="font-semibold">${message}</span>
         <button type="button" onclick="this.parentElement.remove()" class="text-white/80 hover:text-white">
             <i data-lucide="x" class="w-4 h-4"></i>
         </button>
     `;
-    
-    // Add to body
+
     document.body.appendChild(alert);
     lucide.createIcons();
-    
-    // Auto dismiss after 3 seconds
+
     setTimeout(() => {
         alert.remove();
     }, 3000);
@@ -443,5 +456,83 @@ document.getElementById('createChecklistItemModal').addEventListener('click', fu
         document.getElementById('formError').classList.add('hidden');
     }
 });
+
+// Edit checklist item - fetch item data and populate modal
+async function editChecklistItem(itemId) {
+    try {
+        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+        
+        const response = await fetch(`/api/accounts/onboarding/checklist/${itemId}/`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': csrfToken
+            }
+        });
+        
+        if (response.ok) {
+            const item = await response.json();
+            
+            // Populate form with existing data
+            document.getElementById('code').value = item.code || '';
+            document.getElementById('role').value = item.role || '';
+            document.getElementById('content').value = item.content || '';
+            document.getElementById('order').value = item.order || 0;
+            document.getElementById('text_en').value = item.text_en || '';
+            document.getElementById('text_ar').value = item.text_ar || '';
+            document.getElementById('description_en').value = item.description_en || '';
+            document.getElementById('description_ar').value = item.description_ar || '';
+            document.getElementById('is_required').checked = item.is_required !== false;
+            document.getElementById('is_active').checked = item.is_active !== false;
+            
+            // Store item ID for update
+            document.getElementById('createChecklistItemForm').dataset.editItemId = itemId;
+            
+            // Update modal title
+            document.querySelector('#createChecklistItemModal h3').innerHTML = '<i data-lucide="pencil" class="w-5 h-5 text-blue"></i> {% trans "Edit Checklist Item" %}';
+            
+            // Show modal
+            document.getElementById('createChecklistItemModal').classList.remove('hidden');
+            lucide.createIcons();
+        } else {
+            showAlert('{% trans "Failed to load checklist item" %}', 'error');
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        showAlert('{% trans "An error occurred loading the item" %}', 'error');
+    }
+}
+
+// Delete checklist item
+async function deleteChecklistItem(itemId) {
+    if (!confirm('{% trans "Are you sure you want to delete this checklist item?" %}')) {
+        return;
+    }
+    
+    try {
+        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+        
+        const response = await fetch(`/api/accounts/onboarding/checklist/${itemId}/`, {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': csrfToken
+            }
+        });
+        
+        if (response.ok || response.status === 204) {
+            showAlert('{% trans "Checklist item deleted successfully!" %}', 'success');
+            setTimeout(() => {
+                window.location.reload();
+            }, 1000);
+        } else {
+            const responseData = await response.json().catch(() => ({}));
+            showAlert(responseData.error || responseData.detail || '{% trans "Failed to delete checklist item" %}', 'error');
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        showAlert('{% trans "An error occurred. Please try again." %}', 'error');
+    }
+}
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/accounts/onboarding/content_list.html b/templates/accounts/onboarding/content_list.html
index 0e6d791..3f4d2cc 100644
--- a/templates/accounts/onboarding/content_list.html
+++ b/templates/accounts/onboarding/content_list.html
@@ -4,62 +4,82 @@
 {% block title %}{% trans "Manage Onboarding Content" %}{% endblock %}
 
 {% block content %}
-<div class="p-6 md:p-8">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Header -->
     <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
-        <div>
-            <a href="{% url 'accounts:onboarding_dashboard' %}" class="inline-flex items-center text-navy hover:text-navy mb-2 font-medium">
-                <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
-                {% trans "Back to Dashboard" %}
-            </a>
-            <h1 class="text-3xl font-bold text-gray-800">
-                {% trans "Onboarding Content" %}
-            </h1>
-            <p class="text-gray-500">
-                {% trans "Manage the content shown during staff onboarding" %}
-            </p>
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="file-text" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <a href="{% url 'accounts:acknowledgement-dashboard' %}" class="inline-flex items-center text-blue hover:text-navy mb-2 font-medium">
+                    <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
+                    {% trans "Back to Dashboard" %}
+                </a>
+                <h1 class="text-3xl font-bold text-navy">
+                    {% trans "Onboarding Content" %}
+                </h1>
+                <p class="text-slate">
+                    {% trans "Manage the content shown during staff onboarding" %}
+                </p>
+            </div>
         </div>
-        <a href="{% url 'accounts:onboarding_content_create' %}" class="inline-flex items-center justify-center bg-gradient-to-r from-navy to-orange-500 text-white px-6 py-3 rounded-xl font-bold hover:from-navy hover:to-orange-600 transition shadow-lg shadow-blue-200">
+        <a href="{% url 'accounts:onboarding_content_create' %}" class="inline-flex items-center justify-center bg-gradient-to-r from-blue to-navy text-white px-6 py-3 rounded-xl font-bold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
             <i data-lucide="plus" class="w-5 h-5 mr-2"></i>
             {% trans "Add Content" %}
         </a>
     </div>
 
     <!-- Content List -->
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
         {% if content_items %}
-        <div class="divide-y divide-gray-100">
+        <div class="divide-y divide-blue-50">
             {% for item in content_items %}
-            <div class="p-6 hover:bg-gray-50 transition">
+            <div class="p-6 hover:bg-blue-50/50 transition">
                 <div class="flex items-start gap-4">
+                    <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-indigo-500 rounded-xl flex-shrink-0">
+                        <i data-lucide="file-text" class="w-6 h-6 text-white"></i>
+                    </div>
                     <div class="flex-1">
                         <div class="flex items-center gap-3 mb-2">
-                            <h3 class="text-xl font-bold text-gray-800">{{ item.title }}</h3>
+                            <h3 class="text-xl font-bold text-navy">{{ item.title_en }}</h3>
                             {% if item.is_active %}
-                                <span class="bg-green-100 text-green-600 text-xs font-bold px-2 py-1 rounded-full">Active</span>
+                                <span class="inline-flex items-center gap-1 bg-emerald-100 text-emerald-700 text-xs font-bold px-3 py-1 rounded-full">
+                                    <i data-lucide="check" class="w-3 h-3"></i>
+                                    {% trans "Active" %}
+                                </span>
                             {% else %}
-                                <span class="bg-gray-100 text-gray-500 text-xs font-bold px-2 py-1 rounded-full">Inactive</span>
+                                <span class="inline-flex items-center gap-1 bg-slate-100 text-slate-700 text-xs font-bold px-3 py-1 rounded-full">
+                                    <i data-lucide="x" class="w-3 h-3"></i>
+                                    {% trans "Inactive" %}
+                                </span>
                             {% endif %}
                         </div>
-                        <p class="text-gray-500 text-sm mb-3">
-                            {{ item.description|truncatewords:20 }}
+                        <p class="text-slate text-sm mb-3">
+                            {{ item.description_en|truncatewords:20 }}
                         </p>
-                        <div class="flex items-center gap-4 text-sm text-gray-400">
-                            <span class="flex items-center gap-1">
-                                <i data-lucide="list" class="w-4 h-4"></i>
-                                {{ item.content_type }}
+                        <div class="flex items-center gap-4 text-sm">
+                            <span class="flex items-center gap-1 text-blue-700 font-medium">
+                                <i data-lucide="tag" class="w-4 h-4"></i>
+                                {{ item.code|default:"N/A" }}
                             </span>
-                            <span class="flex items-center gap-1">
-                                <i data-lucide="hash" class="w-4 h-4"></i>
-                                Step {{ item.step }}
+                            {% if item.role %}
+                            <span class="flex items-center gap-1 text-indigo-700 font-medium">
+                                <i data-lucide="user" class="w-4 h-4"></i>
+                                {{ item.get_role_display }}
+                            </span>
+                            {% endif %}
+                            <span class="flex items-center gap-1 text-slate-500">
+                                <i data-lucide="calendar" class="w-4 h-4"></i>
+                                {{ item.created_at|date:"M d, Y" }}
                             </span>
                         </div>
                     </div>
-                    <div class="flex items-center gap-2">
-                        <a href="{% url 'accounts:onboarding_content_edit' item.pk %}" class="p-2 text-gray-400 hover:bg-blue-50 hover:text-blue-500 rounded-lg transition">
-                            <i data-lucide="edit" class="w-5 h-5"></i>
+                    <div class="flex items-center gap-2 flex-shrink-0">
+                        <a href="{% url 'accounts:onboarding_content_edit' item.pk %}" class="p-2.5 text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-xl transition" title="{% trans 'Edit' %}">
+                            <i data-lucide="pencil" class="w-5 h-5"></i>
                         </a>
-                        <a href="{% url 'accounts:onboarding_content_delete' item.pk %}" class="p-2 text-gray-400 hover:bg-red-50 hover:text-red-500 rounded-lg transition">
+                        <a href="{% url 'accounts:onboarding_content_delete' item.pk %}" class="p-2.5 text-red-600 bg-red-50 hover:bg-red-100 rounded-xl transition" title="{% trans 'Delete' %}" onclick="return confirm('{% trans 'Are you sure you want to delete this content?' %}')">
                             <i data-lucide="trash-2" class="w-5 h-5"></i>
                         </a>
                     </div>
@@ -69,12 +89,12 @@
         </div>
         {% else %}
         <div class="p-12 text-center">
-            <div class="inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4">
-                <i data-lucide="file-text" class="w-8 h-8 text-gray-400"></i>
+            <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full mb-4">
+                <i data-lucide="file-text" class="w-10 h-10 text-blue-500"></i>
             </div>
-            <h3 class="text-lg font-bold text-gray-700 mb-2">{% trans "No Content Yet" %}</h3>
-            <p class="text-gray-500 mb-4">{% trans "Start by adding your first onboarding content item" %}</p>
-            <a href="{% url 'accounts:onboarding_content_create' %}" class="inline-flex items-center bg-light0 text-white px-6 py-3 rounded-xl font-bold hover:bg-navy transition">
+            <h3 class="text-xl font-bold text-navy mb-2">{% trans "No Content Yet" %}</h3>
+            <p class="text-slate mb-6">{% trans "Start by adding your first onboarding content item" %}</p>
+            <a href="{% url 'accounts:onboarding_content_create' %}" class="inline-flex items-center bg-gradient-to-r from-blue to-navy text-white px-8 py-3 rounded-xl font-bold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
                 <i data-lucide="plus" class="w-5 h-5 mr-2"></i>
                 {% trans "Add Content" %}
             </a>
@@ -88,4 +108,4 @@ document.addEventListener('DOMContentLoaded', function() {
     lucide.createIcons();
 });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/accounts/onboarding/dashboard.html b/templates/accounts/onboarding/dashboard.html
index 7564e42..572602d 100644
--- a/templates/accounts/onboarding/dashboard.html
+++ b/templates/accounts/onboarding/dashboard.html
@@ -1,152 +1,267 @@
 {% extends "layouts/base.html" %}
 {% load i18n %}
 
-{% block title %}{% trans "Onboarding Dashboard" %}{% endblock %}
+{% block title %}{% trans "Onboarding & Acknowledgements Dashboard" %}{% endblock %}
 
 {% block content %}
-<div class="p-6 md:p-8">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Header -->
     <div class="mb-8">
-        <h1 class="text-3xl font-bold text-gray-800 mb-2">
-            {% trans "Onboarding Dashboard" %}
-        </h1>
-        <p class="text-gray-500">
-            {% trans "Manage staff onboarding progress and settings" %}
-        </p>
+        <div class="flex items-center gap-3 mb-4">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="clipboard-check" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-3xl font-bold text-navy mb-1">
+                    {% trans "Onboarding & Acknowledgements" %}
+                </h1>
+                <p class="text-slate">
+                    {% trans "Manage staff onboarding progress and acknowledgements" %}
+                </p>
+            </div>
+        </div>
     </div>
 
     <!-- Stats Cards -->
     <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
-            <div class="flex items-center gap-3 mb-3">
-                <div class="bg-blue-100 p-2 rounded-xl">
-                    <i data-lucide="users" class="text-blue-500 w-5 h-5"></i>
+        <div class="bg-white p-6 rounded-2xl shadow-sm border border-blue-100 hover:shadow-md transition">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center gap-3">
+                    <div class="bg-gradient-to-br from-blue to-blue-100 p-2.5 rounded-xl">
+                        <i data-lucide="users" class="text-blue w-5 h-5"></i>
+                    </div>
+                    <span class="text-slate text-sm font-semibold">{% trans "Total Invited" %}</span>
                 </div>
-                <span class="text-gray-500 text-sm font-medium">{% trans "Total Invited" %}</span>
             </div>
-            <div class="text-3xl font-bold text-gray-800">{{ stats.total_invited }}</div>
+            <div class="text-4xl font-bold text-navy">{{ stats.total_invited }}</div>
+            <div class="mt-2 text-xs text-slate">{% trans "staff members invited" %}</div>
         </div>
 
-        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
-            <div class="flex items-center gap-3 mb-3">
-                <div class="bg-green-100 p-2 rounded-xl">
-                    <i data-lucide="check-circle" class="text-green-500 w-5 h-5"></i>
+        <div class="bg-white p-6 rounded-2xl shadow-sm border border-emerald-100 hover:shadow-md transition">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center gap-3">
+                    <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 p-2.5 rounded-xl">
+                        <i data-lucide="check-circle" class="text-white w-5 h-5"></i>
+                    </div>
+                    <span class="text-slate text-sm font-semibold">{% trans "Completed" %}</span>
                 </div>
-                <span class="text-gray-500 text-sm font-medium">{% trans "Completed" %}</span>
             </div>
-            <div class="text-3xl font-bold text-gray-800">{{ stats.completed }}</div>
+            <div class="text-4xl font-bold text-navy">{{ stats.completed }}</div>
+            <div class="mt-2 text-xs text-slate">{% trans "completed onboarding" %}</div>
         </div>
 
-        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
-            <div class="flex items-center gap-3 mb-3">
-                <div class="bg-orange-100 p-2 rounded-xl">
-                    <i data-lucide="clock" class="text-orange-500 w-5 h-5"></i>
+        <div class="bg-white p-6 rounded-2xl shadow-sm border border-orange-100 hover:shadow-md transition">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center gap-3">
+                    <div class="bg-gradient-to-br from-orange-400 to-orange-500 p-2.5 rounded-xl">
+                        <i data-lucide="clock" class="text-white w-5 h-5"></i>
+                    </div>
+                    <span class="text-slate text-sm font-semibold">{% trans "In Progress" %}</span>
                 </div>
-                <span class="text-gray-500 text-sm font-medium">{% trans "In Progress" %}</span>
             </div>
-            <div class="text-3xl font-bold text-gray-800">{{ stats.in_progress }}</div>
+            <div class="text-4xl font-bold text-navy">{{ stats.in_progress }}</div>
+            <div class="mt-2 text-xs text-slate">{% trans "currently in progress" %}</div>
         </div>
 
-        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
-            <div class="flex items-center gap-3 mb-3">
-                <div class="bg-red-100 p-2 rounded-xl">
-                    <i data-lucide="x-circle" class="text-red-500 w-5 h-5"></i>
+        <div class="bg-white p-6 rounded-2xl shadow-sm border border-red-100 hover:shadow-md transition">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center gap-3">
+                    <div class="bg-gradient-to-br from-red-500 to-red-600 p-2.5 rounded-xl">
+                        <i data-lucide="circle-x" class="text-white w-5 h-5"></i>
+                    </div>
+                    <span class="text-slate text-sm font-semibold">{% trans "Not Started" %}</span>
                 </div>
-                <span class="text-gray-500 text-sm font-medium">{% trans "Not Started" %}</span>
             </div>
-            <div class="text-3xl font-bold text-gray-800">{{ stats.not_started }}</div>
+            <div class="text-4xl font-bold text-navy">{{ stats.not_started }}</div>
+            <div class="mt-2 text-xs text-slate">{% trans "haven't started" %}</div>
         </div>
     </div>
 
     <!-- Quick Actions -->
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-        <a href="{% url 'accounts:onboarding_bulk_invite' %}" class="group">
-            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-gray-100 hover:border-blue hover:shadow-md transition">
-                <div class="flex items-center gap-4">
-                    <div class="bg-light p-3 rounded-xl group-hover:bg-blue-100 transition">
-                        <i data-lucide="mail-plus" class="text-navy w-6 h-6"></i>
-                    </div>
-                    <div>
-                        <h3 class="font-bold text-gray-800 mb-1">{% trans "Send Bulk Invitations" %}</h3>
-                        <p class="text-sm text-gray-500">{% trans "Invite multiple staff members to onboarding" %}</p>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <a href="{% url 'accounts:bulk-invite-users' %}" class="group">
+            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-blue-100 hover:border-blue hover:shadow-lg hover:-translate-y-1 transition-all duration-200">
+                <div class="flex items-center gap-4 mb-3">
+                    <div class="bg-gradient-to-br from-blue to-navy p-3 rounded-xl group-hover:shadow-lg transition">
+                        <i data-lucide="mail-plus" class="text-white w-6 h-6"></i>
                     </div>
+                    <h3 class="font-bold text-navy">{% trans "Bulk Invite" %}</h3>
                 </div>
+                <p class="text-sm text-slate">{% trans "Invite multiple staff via CSV" %}</p>
             </div>
         </a>
 
-        <a href="{% url 'accounts:onboarding_checklist_list' %}" class="group">
-            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-gray-100 hover:border-blue-400 hover:shadow-md transition">
-                <div class="flex items-center gap-4">
-                    <div class="bg-blue-100 p-3 rounded-xl group-hover:bg-blue-200 transition">
-                        <i data-lucide="clipboard-list" class="text-blue-500 w-6 h-6"></i>
-                    </div>
-                    <div>
-                        <h3 class="font-bold text-gray-800 mb-1">{% trans "Manage Checklists" %}</h3>
-                        <p class="text-sm text-gray-500">{% trans "View and edit onboarding checklist items" %}</p>
+        <a href="{% url 'accounts:acknowledgement-checklist-list' %}" class="group">
+            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-blue-100 hover:border-blue hover:shadow-lg hover:-translate-y-1 transition-all duration-200">
+                <div class="flex items-center gap-4 mb-3">
+                    <div class="bg-gradient-to-br from-blue to-cyan-500 p-3 rounded-xl group-hover:shadow-lg transition">
+                        <i data-lucide="list-checks" class="text-white w-6 h-6"></i>
                     </div>
+                    <h3 class="font-bold text-navy">{% trans "Checklist" %}</h3>
                 </div>
+                <p class="text-sm text-slate">{% trans "Manage checklist items" %}</p>
             </div>
         </a>
 
-        <a href="{% url 'accounts:onboarding_content_list' %}" class="group">
-            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-gray-100 hover:border-green-400 hover:shadow-md transition">
-                <div class="flex items-center gap-4">
-                    <div class="bg-green-100 p-3 rounded-xl group-hover:bg-green-200 transition">
-                        <i data-lucide="file-text" class="text-green-500 w-6 h-6"></i>
-                    </div>
-                    <div>
-                        <h3 class="font-bold text-gray-800 mb-1">{% trans "Manage Content" %}</h3>
-                        <p class="text-sm text-gray-500">{% trans "View and edit onboarding content" %}</p>
+        <a href="{% url 'accounts:acknowledgement-content-list' %}" class="group">
+            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-blue-100 hover:border-blue hover:shadow-lg hover:-translate-y-1 transition-all duration-200">
+                <div class="flex items-center gap-4 mb-3">
+                    <div class="bg-gradient-to-br from-blue to-indigo-500 p-3 rounded-xl group-hover:shadow-lg transition">
+                        <i data-lucide="file-text" class="text-white w-6 h-6"></i>
                     </div>
+                    <h3 class="font-bold text-navy">{% trans "Content" %}</h3>
                 </div>
+                <p class="text-sm text-slate">{% trans "Manage onboarding content" %}</p>
             </div>
         </a>
 
-        <a href="{% url 'accounts:onboarding_provisional_list' %}" class="group">
-            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-gray-100 hover:border-purple-400 hover:shadow-md transition">
-                <div class="flex items-center gap-4">
-                    <div class="bg-purple-100 p-3 rounded-xl group-hover:bg-purple-200 transition">
-                        <i data-lucide="user-plus" class="text-purple-500 w-6 h-6"></i>
-                    </div>
-                    <div>
-                        <h3 class="font-bold text-gray-800 mb-1">{% trans "Provisional Accounts" %}</h3>
-                        <p class="text-sm text-gray-500">{% trans "View accounts pending activation" %}</p>
+        <a href="{% url 'accounts:provisional-user-list' %}" class="group">
+            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-blue-100 hover:border-blue hover:shadow-lg hover:-translate-y-1 transition-all duration-200">
+                <div class="flex items-center gap-4 mb-3">
+                    <div class="bg-gradient-to-br from-blue to-purple-500 p-3 rounded-xl group-hover:shadow-lg transition">
+                        <i data-lucide="user-plus" class="text-white w-6 h-6"></i>
                     </div>
+                    <h3 class="font-bold text-navy">{% trans "Accounts" %}</h3>
                 </div>
+                <p class="text-sm text-slate">{% trans "View provisional accounts" %}</p>
             </div>
         </a>
     </div>
 
-    <!-- Recent Activity -->
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-        <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
-            <i data-lucide="activity" class="w-5 h-5 text-navy"></i>
-            {% trans "Recent Onboarding Activity" %}
-        </h2>
-        <div class="space-y-4">
-            {% for activity in recent_activity %}
-            <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-xl">
-                <div class="flex items-center justify-center w-10 h-10 bg-white rounded-full shadow-sm">
-                    {% if activity.status == 'completed' %}
-                        <i data-lucide="check-circle" class="w-5 h-5 text-green-500"></i>
-                    {% elif activity.status == 'in_progress' %}
-                        <i data-lucide="loader" class="w-5 h-5 text-orange-500"></i>
-                    {% else %}
-                        <i data-lucide="clock" class="w-5 h-5 text-gray-400"></i>
-                    {% endif %}
-                </div>
-                <div class="flex-1">
-                    <p class="font-medium text-gray-800">{{ activity.user }}</p>
-                    <p class="text-sm text-gray-500">{{ activity.action }}</p>
-                </div>
-                <span class="text-sm text-gray-400">{{ activity.timestamp|timesince }}</span>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Recent Activity -->
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="activity" class="w-5 h-5 text-blue"></i>
+                    {% trans "Recent Activity" %}
+                </h2>
             </div>
-            {% empty %}
-            <div class="text-center py-8">
-                <i data-lucide="inbox" class="w-12 h-12 text-gray-300 mx-auto mb-3"></i>
-                <p class="text-gray-500">{% trans "No recent activity" %}</p>
+            <div class="p-6">
+                <div class="space-y-4">
+                    {% for activity in recent_activations %}
+                    <div class="flex items-center gap-4 p-4 bg-gradient-to-r from-blue-50/50 to-transparent rounded-xl border border-blue-50">
+                        <div class="flex items-center justify-center w-12 h-12 bg-white rounded-full shadow-sm border border-blue-100">
+                            <i data-lucide="check-circle" class="w-6 h-6 text-emerald-500"></i>
+                        </div>
+                        <div class="flex-1">
+                            <p class="font-bold text-navy">{{ activity.get_full_name|default:activity.email }}</p>
+                            <p class="text-sm text-slate">{% trans "Completed onboarding" %} • {{ activity.acknowledgement_completed_at|timesince }}</p>
+                        </div>
+                    </div>
+                    {% empty %}
+                    <div class="text-center py-8">
+                        <i data-lucide="inbox" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
+                        <p class="text-slate">{% trans "No recent activity" %}</p>
+                    </div>
+                    {% endfor %}
+                </div>
             </div>
-            {% endfor %}
+        </div>
+
+        <!-- Completion by Role -->
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="circle-help" class="w-5 h-5 text-blue"></i>
+                    {% trans "Completion by Role" %}
+                </h2>
+            </div>
+            <div class="p-6">
+                <div class="space-y-4">
+                    {% for role_data in completion_by_role %}
+                    <div>
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="text-sm font-semibold text-navy">{{ role_data.role }}</span>
+                            <span class="text-sm font-bold text-blue">{{ role_data.rate }}%</span>
+                        </div>
+                        <div class="w-full bg-blue-100 h-2.5 rounded-full overflow-hidden">
+                            <div class="bg-gradient-to-r from-blue to-navy h-full rounded-full" style="width: {{ role_data.rate }}%"></div>
+                        </div>
+                        <div class="flex items-center gap-3 mt-1">
+                            <span class="text-xs text-emerald-600 font-medium">{{ role_data.completed }} completed</span>
+                            <span class="text-xs text-slate">{{ role_data.pending }} pending</span>
+                        </div>
+                    </div>
+                    {% empty %}
+                    <div class="text-center py-8">
+                        <i data-lucide="circle-help" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
+                        <p class="text-slate">{% trans "No data available" %}</p>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Pending Users -->
+    <div class="mt-6 bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                <i data-lucide="clock" class="w-5 h-5 text-blue"></i>
+                {% trans "Pending Activations" %}
+            </h2>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="w-full">
+                <thead class="bg-blue-50">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "User" %}</th>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Email" %}</th>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Role" %}</th>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Expires" %}</th>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Status" %}</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-blue-50">
+                    {% for user in pending_users %}
+                    <tr class="hover:bg-blue-50/50 transition">
+                        <td class="px-6 py-4">
+                            <div class="flex items-center gap-3">
+                                <div class="flex items-center justify-center w-10 h-10 bg-gradient-to-br from-blue to-navy rounded-full">
+                                    <span class="text-white font-bold text-sm">{{ user.first_name|first|default:"U" }}{{ user.last_name|first|default:"" }}</span>
+                                </div>
+                                <span class="font-semibold text-navy">{{ user.get_full_name|default:user.email }}</span>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 text-slate">{{ user.email }}</td>
+                        <td class="px-6 py-4">
+                            {% if user.groups.first %}
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">
+                                {{ user.groups.first.name }}
+                            </span>
+                            {% endif %}
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="text-sm {% if user.is_expiring_soon %}text-red-600 font-bold{% else %}text-slate{% endif %}">
+                                {% if user.days_remaining %}
+                                    {{ user.days_remaining }} {% trans "days" %}
+                                {% else %}-{% endif %}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4">
+                            {% if user.is_expiring_soon %}
+                            <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-700">
+                                <i data-lucide="alert-circle" class="w-3 h-3"></i>
+                                {% trans "Expiring Soon" %}
+                            </span>
+                            {% else %}
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-orange-100 text-orange-700">
+                                {% trans "Pending" %}
+                            </span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    {% empty %}
+                    <tr>
+                        <td colspan="5" class="px-6 py-12 text-center">
+                            <i data-lucide="check-circle" class="w-12 h-12 text-emerald-500 mx-auto mb-3"></i>
+                            <p class="text-slate">{% trans "All users have activated their accounts" %}</p>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
         </div>
     </div>
 </div>
@@ -156,4 +271,4 @@ document.addEventListener('DOMContentLoaded', function() {
     lucide.createIcons();
 });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/accounts/onboarding/preview_wizard.html b/templates/accounts/onboarding/preview_wizard.html
index 8a6da93..29c574a 100644
--- a/templates/accounts/onboarding/preview_wizard.html
+++ b/templates/accounts/onboarding/preview_wizard.html
@@ -4,81 +4,162 @@
 {% block title %}{% trans "Preview Onboarding" %}{% endblock %}
 
 {% block content %}
-<div class="p-6 md:p-8">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Header -->
     <div class="mb-8">
-        <a href="{% url 'accounts:onboarding_dashboard' %}" class="inline-flex items-center text-navy hover:text-navy mb-4 font-medium">
-            <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
-            {% trans "Back to Dashboard" %}
-        </a>
-        <h1 class="text-3xl font-bold text-gray-800 mb-2">
-            {% trans "Preview Onboarding Flow" %}
-        </h1>
-        <p class="text-gray-500">
-            {% trans "Preview the staff onboarding experience" %}
-        </p>
+        <div class="flex items-center gap-3 mb-4">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="eye" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <a href="{% url 'accounts:acknowledgement-dashboard' %}" class="inline-flex items-center text-blue hover:text-navy mb-2 font-medium">
+                    <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
+                    {% trans "Back to Dashboard" %}
+                </a>
+                <h1 class="text-3xl font-bold text-navy">
+                    {% trans "Preview Onboarding Flow" %}
+                </h1>
+                <p class="text-slate">
+                    {% trans "Preview the staff onboarding experience by role" %}
+                </p>
+            </div>
+        </div>
     </div>
 
-    <!-- Preview Steps -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
-            <div class="flex items-center gap-3 mb-4">
-                <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-orange-500 rounded-xl">
-                    <span class="text-white font-bold">1</span>
+    <!-- Role Selection -->
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 md:p-8 mb-8">
+        <h2 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
+            <i data-lucide="user-cog" class="w-5 h-5 text-blue"></i>
+            {% trans "Select Role to Preview" %}
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {% for role in available_roles %}
+            <a href="{% url 'accounts:preview-wizard-role' role.name %}" 
+               class="group p-6 border-2 {% if selected_role == role %}border-blue bg-blue-50{% else %}border-blue-100 hover:border-blue{% endif %} rounded-2xl transition-all hover:shadow-lg hover:-translate-y-1">
+                <div class="flex items-center gap-3 mb-3">
+                    <div class="w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-xl flex items-center justify-center group-hover:shadow-lg transition">
+                        <i data-lucide="user" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <h3 class="font-bold text-navy">{{ role.name }}</h3>
                 </div>
-                <div>
-                    <h3 class="font-bold text-gray-800">{% trans "Activation" %}</h3>
-                    <p class="text-sm text-gray-500">{% trans "Create account" %}</p>
-                </div>
-            </div>
-            <a href="#" class="block w-full text-center bg-gray-100 text-gray-700 py-2 rounded-xl font-medium hover:bg-gray-200 transition">
-                {% trans "Preview" %}
+                <p class="text-sm text-slate">{{ role.description|truncatechars:80|default:"Preview the onboarding flow for this role" }}</p>
             </a>
+            {% empty %}
+            <div class="col-span-full text-center py-12">
+                <i data-lucide="user-x" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
+                <p class="text-slate">{% trans "No roles available" %}</p>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+
+    {% if selected_role %}
+    <!-- Preview Content for Selected Role -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+        <!-- Content Sections -->
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                <h3 class="font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
+                    {% trans "Content Sections" %}
+                </h3>
+            </div>
+            <div class="p-6">
+                {% if preview_content %}
+                <div class="space-y-4">
+                    {% for content in preview_content %}
+                    <div class="p-4 border-2 border-blue-100 rounded-xl hover:border-blue hover:bg-blue-50/50 transition">
+                        <div class="flex items-start gap-3">
+                            <div class="w-10 h-10 bg-gradient-to-br from-blue to-indigo-500 rounded-lg flex items-center justify-center flex-shrink-0">
+                                <i data-lucide="file-check" class="w-5 h-5 text-white"></i>
+                            </div>
+                            <div class="flex-1">
+                                <h4 class="font-bold text-navy mb-1">{{ content.title_en }}</h4>
+                                <p class="text-sm text-slate">{{ content.description_en|truncatewords:15 }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% else %}
+                <div class="text-center py-8">
+                    <i data-lucide="file-text" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
+                    <p class="text-slate">{% trans "No content sections for this role" %}</p>
+                </div>
+                {% endif %}
+            </div>
         </div>
 
-        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
-            <div class="flex items-center gap-3 mb-4">
-                <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-orange-500 rounded-xl">
-                    <span class="text-white font-bold">2</span>
-                </div>
-                <div>
-                    <h3 class="font-bold text-gray-800">{% trans "Checklist" %}</h3>
-                    <p class="text-sm text-gray-500">{% trans "Complete tasks" %}</p>
-                </div>
+        <!-- Checklist Items -->
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                <h3 class="font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="list-checks" class="w-5 h-5 text-blue"></i>
+                    {% trans "Checklist Items" %}
+                </h3>
             </div>
-            <a href="#" class="block w-full text-center bg-gray-100 text-gray-700 py-2 rounded-xl font-medium hover:bg-gray-200 transition">
-                {% trans "Preview" %}
-            </a>
-        </div>
-
-        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
-            <div class="flex items-center gap-3 mb-4">
-                <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-orange-500 rounded-xl">
-                    <span class="text-white font-bold">3</span>
+            <div class="p-6">
+                {% if preview_checklist %}
+                <div class="space-y-3">
+                    {% for item in preview_checklist %}
+                    <div class="flex items-center gap-3 p-4 border-2 border-blue-100 rounded-xl hover:border-blue hover:bg-blue-50/50 transition">
+                        <div class="w-6 h-6 border-2 border-blue-300 rounded flex items-center justify-center flex-shrink-0">
+                            {% if item.is_required %}
+                            <i data-lucide="asterisk" class="w-3 h-3 text-blue-500"></i>
+                            {% endif %}
+                        </div>
+                        <div class="flex-1">
+                            <p class="font-bold text-navy text-sm">{{ item.text_en }}</p>
+                            {% if item.is_required %}
+                            <span class="text-xs text-red-600 font-medium">{% trans "Required" %}</span>
+                            {% endif %}
+                        </div>
+                    </div>
+                    {% endfor %}
                 </div>
-                <div>
-                    <h3 class="font-bold text-gray-800">{% trans "Content" %}</h3>
-                    <p class="text-sm text-gray-500">{% trans "Review material" %}</p>
+                {% else %}
+                <div class="text-center py-8">
+                    <i data-lucide="list-checks" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
+                    <p class="text-slate">{% trans "No checklist items for this role" %}</p>
                 </div>
+                {% endif %}
             </div>
-            <a href="#" class="block w-full text-center bg-gray-100 text-gray-700 py-2 rounded-xl font-medium hover:bg-gray-200 transition">
-                {% trans "Preview" %}
-            </a>
         </div>
     </div>
 
     <!-- Start Full Preview -->
-    <div class="bg-gradient-to-br from-light to-blue-50 border-2 border-blue-200 rounded-2xl p-8 text-center">
-        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue to-orange-500 rounded-full mb-4">
-            <i data-lucide="play" class="w-8 h-8 text-white"></i>
+    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-8 text-center">
+        <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue to-navy rounded-full mb-6 shadow-lg shadow-blue-200">
+            <i data-lucide="play" class="w-10 h-10 text-white"></i>
+        </div>
+        <h2 class="text-2xl font-bold text-navy mb-2">{% trans "Start Full Preview" %}</h2>
+        <p class="text-slate mb-6 max-w-2xl mx-auto">
+            {% trans "Experience the complete onboarding flow from start to finish as a" %} <strong>{{ selected_role.name }}</strong> {% trans "user" %}
+        </p>
+        <div class="flex flex-wrap justify-center gap-4">
+            <a href="{% url 'accounts:onboarding-welcome' %}" class="inline-flex items-center bg-gradient-to-r from-blue to-navy text-white px-8 py-4 rounded-xl font-bold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                <i data-lucide="rocket" class="w-5 h-5 mr-2"></i>
+                {% trans "Begin Preview" %}
+                <i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i>
+            </a>
+            <a href="{% url 'accounts:onboarding-step-checklist' %}" class="inline-flex items-center bg-white border-2 border-blue-200 text-navy px-8 py-4 rounded-xl font-bold hover:bg-blue-50 transition">
+                <i data-lucide="list-checks" class="w-5 h-5 mr-2"></i>
+                {% trans "View Checklist" %}
+            </a>
         </div>
-        <h2 class="text-2xl font-bold text-gray-800 mb-2">{% trans "Start Full Preview" %}</h2>
-        <p class="text-gray-600 mb-6">{% trans "Experience the complete onboarding flow from start to finish" %}</p>
-        <a href="#" class="inline-flex items-center bg-gradient-to-r from-navy to-orange-500 text-white px-8 py-4 rounded-xl font-bold hover:from-navy hover:to-orange-600 transition shadow-lg shadow-blue-200">
-            {% trans "Begin Preview" %}
-            <i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i>
-        </a>
     </div>
+    {% else %}
+    <!-- No Role Selected -->
+    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-12 text-center">
+        <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full mb-6">
+            <i data-lucide="hand" class="w-10 h-10 text-blue-500"></i>
+        </div>
+        <h2 class="text-2xl font-bold text-navy mb-2">{% trans "Select a Role" %}</h2>
+        <p class="text-slate max-w-xl mx-auto">
+            {% trans "Choose a role from the options above to preview the onboarding experience for that specific role" %}
+        </p>
+    </div>
+    {% endif %}
 </div>
 
 <script>
@@ -86,4 +167,4 @@ document.addEventListener('DOMContentLoaded', function() {
     lucide.createIcons();
 });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/accounts/onboarding/progress_detail.html b/templates/accounts/onboarding/progress_detail.html
index 8e58b4f..4bd54f9 100644
--- a/templates/accounts/onboarding/progress_detail.html
+++ b/templates/accounts/onboarding/progress_detail.html
@@ -4,95 +4,122 @@
 {% block title %}{% trans "Onboarding Progress Detail" %}{% endblock %}
 
 {% block content %}
-<div class="p-6 md:p-8">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Header -->
     <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
-        <div>
-            <a href="{% url 'accounts:onboarding_dashboard' %}" class="inline-flex items-center text-navy hover:text-navy mb-2 font-medium">
-                <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
-                {% trans "Back to Dashboard" %}
-            </a>
-            <h1 class="text-3xl font-bold text-gray-800">
-                {{ account.get_full_name }}
-            </h1>
-            <p class="text-gray-500">
-                {{ account.email }}
-            </p>
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-purple-500 rounded-2xl shadow-lg shadow-blue-200">
+                <span class="text-white font-bold text-xl">{{ account.first_name|first|default:"U" }}</span>
+            </div>
+            <div>
+                <a href="{% url 'accounts:acknowledgement-dashboard' %}" class="inline-flex items-center text-blue hover:text-navy mb-2 font-medium">
+                    <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
+                    {% trans "Back to Dashboard" %}
+                </a>
+                <h1 class="text-3xl font-bold text-navy">
+                    {{ account.get_full_name|default:account.email }}
+                </h1>
+                <p class="text-slate">
+                    {{ account.email }}
+                </p>
+            </div>
         </div>
         <div class="flex gap-3">
-            <span class="inline-flex items-center bg-light text-navy px-4 py-2 rounded-xl font-medium">
-                <i data-lucide="mail" class="w-4 h-4 mr-2"></i>
+            <span class="inline-flex items-center bg-blue-50 border border-blue-200 text-navy px-4 py-2 rounded-xl font-medium">
+                <i data-lucide="mail" class="w-4 h-4 mr-2 text-blue"></i>
                 {{ account.email }}
             </span>
-            <span class="inline-flex items-center bg-gray-100 text-gray-600 px-4 py-2 rounded-xl font-medium">
-                <i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
+            <span class="inline-flex items-center bg-white border border-blue-100 text-slate px-4 py-2 rounded-xl font-medium">
+                <i data-lucide="calendar" class="w-4 h-4 mr-2 text-blue"></i>
                 {{ account.invited_at|date:"M d, Y" }}
             </span>
         </div>
     </div>
 
     <!-- Progress Overview -->
-    <div class="bg-gradient-to-br from-light to-blue-50 rounded-2xl p-8 mb-8">
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-8 mb-8">
+        <h2 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
+            <i data-lucide="circle-help" class="w-5 h-5 text-blue"></i>
+            {% trans "Progress Overview" %}
+        </h2>
         <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
-            <div class="text-center">
-                <div class="text-4xl font-bold text-gray-800 mb-2">
+            <div class="text-center p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl border border-blue-100">
+                <div class="text-5xl font-bold text-navy mb-2">
                     {{ progress.overall_percentage|default:0 }}%
                 </div>
-                <div class="text-sm text-gray-600">{% trans "Overall Progress" %}</div>
-                <div class="w-full bg-gray-200 h-2 rounded-full mt-3 overflow-hidden">
-                    <div class="bg-gradient-to-r from-navy to-orange-500 h-full" style="width: {{ progress.overall_percentage|default:0 }}%"></div>
+                <div class="text-sm text-slate font-medium mb-3">{% trans "Overall Progress" %}</div>
+                <div class="w-full bg-blue-100 h-3 rounded-full overflow-hidden">
+                    <div class="bg-gradient-to-r from-blue to-navy h-full rounded-full" style="width: {{ progress.overall_percentage|default:0 }}%"></div>
                 </div>
             </div>
-            <div class="text-center">
-                <div class="text-4xl font-bold text-gray-800 mb-2">
+            <div class="text-center p-6 bg-white rounded-2xl border-2 border-blue-100">
+                <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-cyan-500 rounded-xl mx-auto mb-3">
+                    <i data-lucide="list-checks" class="w-6 h-6 text-white"></i>
+                </div>
+                <div class="text-3xl font-bold text-navy mb-2">
                     {{ progress.checklist_completed|default:0 }}/{{ progress.checklist_total|default:0 }}
                 </div>
-                <div class="text-sm text-gray-600">{% trans "Checklist Items" %}</div>
+                <div class="text-sm text-slate">{% trans "Checklist Items" %}</div>
             </div>
-            <div class="text-center">
-                <div class="text-4xl font-bold text-gray-800 mb-2">
+            <div class="text-center p-6 bg-white rounded-2xl border-2 border-blue-100">
+                <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-indigo-500 rounded-xl mx-auto mb-3">
+                    <i data-lucide="file-text" class="w-6 h-6 text-white"></i>
+                </div>
+                <div class="text-3xl font-bold text-navy mb-2">
                     {{ progress.content_viewed|default:0 }}/{{ progress.content_total|default:0 }}
                 </div>
-                <div class="text-sm text-gray-600">{% trans "Content Items" %}</div>
+                <div class="text-sm text-slate">{% trans "Content Items" %}</div>
             </div>
-            <div class="text-center">
-                <div class="text-4xl font-bold text-navy mb-2">
+            <div class="text-center p-6 bg-white rounded-2xl border-2 border-blue-100">
+                <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-purple-500 rounded-xl mx-auto mb-3">
+                    <i data-lucide="footprints" class="w-6 h-6 text-white"></i>
+                </div>
+                <div class="text-3xl font-bold text-navy mb-2">
                     {{ progress.current_step|default:"-" }}
                 </div>
-                <div class="text-sm text-gray-600">{% trans "Current Step" %}</div>
+                <div class="text-sm text-slate">{% trans "Current Step" %}</div>
             </div>
         </div>
     </div>
 
     <!-- Progress Timeline -->
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-8">
-        <h2 class="text-xl font-bold text-gray-800 mb-6">{% trans "Onboarding Timeline" %}</h2>
-        
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-8 mb-8">
+        <h2 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
+            <i data-lucide="timeline" class="w-5 h-5 text-blue"></i>
+            {% trans "Onboarding Timeline" %}
+        </h2>
+
         <div class="space-y-6">
             <!-- Step 1 -->
             <div class="flex gap-4">
                 <div class="flex flex-col items-center">
-                    <div class="flex items-center justify-center w-10 h-10 rounded-full {% if progress.activation_complete %}bg-gradient-to-br from-blue to-orange-500{% else %}bg-gray-200{% endif %}">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-full {% if progress.activation_complete %}bg-gradient-to-br from-blue to-navy{% else %}bg-slate-200{% endif %} flex-shrink-0">
                         {% if progress.activation_complete %}
-                            <i data-lucide="check" class="w-5 h-5 text-white"></i>
+                            <i data-lucide="check" class="w-6 h-6 text-white"></i>
                         {% else %}
-                            <span class="text-gray-500 font-bold">1</span>
+                            <span class="text-slate-500 font-bold">1</span>
                         {% endif %}
                     </div>
-                    {% if not progress.checklist_complete %}<div class="w-0.5 h-16 bg-gray-200"></div>{% endif %}
+                    {% if not progress.checklist_complete %}<div class="w-0.5 h-16 bg-slate-200"></div>{% endif %}
                 </div>
                 <div class="flex-1 pb-6">
                     <div class="flex items-center justify-between mb-2">
-                        <h3 class="font-bold text-gray-800">{% trans "Account Activation" %}</h3>
+                        <h3 class="font-bold text-navy">{% trans "Account Activation" %}</h3>
                         {% if progress.activation_complete %}
-                            <span class="text-sm text-green-600 font-medium">{% trans "Completed" %}</span>
+                            <span class="inline-flex items-center gap-1 text-sm font-bold text-emerald-600">
+                                <i data-lucide="check-circle" class="w-4 h-4"></i>
+                                {% trans "Completed" %}
+                            </span>
                         {% else %}
-                            <span class="text-sm text-gray-500">{% trans "Pending" %}</span>
+                            <span class="inline-flex items-center gap-1 text-sm font-medium text-slate-500">
+                                <i data-lucide="clock" class="w-4 h-4"></i>
+                                {% trans "Pending" %}
+                            </span>
                         {% endif %}
                     </div>
-                    <p class="text-sm text-gray-500">{% trans "Create account and set password" %}</p>
+                    <p class="text-sm text-slate">{% trans "Create account and set password" %}</p>
                     {% if progress.activation_completed_at %}
-                        <p class="text-xs text-gray-400 mt-2">
+                        <p class="text-xs text-slate mt-2">
                             <i data-lucide="clock" class="w-3 h-3 inline mr-1"></i>
                             {{ progress.activation_completed_at|date:"M d, Y H:i" }}
                         </p>
@@ -103,29 +130,33 @@
             <!-- Step 2 -->
             <div class="flex gap-4">
                 <div class="flex flex-col items-center">
-                    <div class="flex items-center justify-center w-10 h-10 rounded-full {% if progress.checklist_complete %}bg-gradient-to-br from-blue to-orange-500{% else %}bg-gray-200{% endif %}">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-full {% if progress.checklist_complete %}bg-gradient-to-br from-blue to-navy{% else %}bg-slate-200{% endif %} flex-shrink-0">
                         {% if progress.checklist_complete %}
-                            <i data-lucide="check" class="w-5 h-5 text-white"></i>
+                            <i data-lucide="check" class="w-6 h-6 text-white"></i>
                         {% else %}
-                            <span class="text-gray-500 font-bold">2</span>
+                            <span class="text-slate-500 font-bold">2</span>
                         {% endif %}
                     </div>
-                    {% if not progress.content_complete %}<div class="w-0.5 h-16 bg-gray-200"></div>{% endif %}
+                    {% if not progress.content_complete %}<div class="w-0.5 h-16 bg-slate-200"></div>{% endif %}
                 </div>
                 <div class="flex-1 pb-6">
                     <div class="flex items-center justify-between mb-2">
-                        <h3 class="font-bold text-gray-800">{% trans "Onboarding Checklist" %}</h3>
+                        <h3 class="font-bold text-navy">{% trans "Checklist Completion" %}</h3>
                         {% if progress.checklist_complete %}
-                            <span class="text-sm text-green-600 font-medium">{% trans "Completed" %}</span>
+                            <span class="inline-flex items-center gap-1 text-sm font-bold text-emerald-600">
+                                <i data-lucide="check-circle" class="w-4 h-4"></i>
+                                {% trans "Completed" %}
+                            </span>
                         {% else %}
-                            <span class="text-sm text-gray-500">
-                                {{ progress.checklist_completed|default:0 }}/{{ progress.checklist_total|default:0 }}
+                            <span class="inline-flex items-center gap-1 text-sm font-medium text-slate-500">
+                                <i data-lucide="clock" class="w-4 h-4"></i>
+                                {% trans "In Progress" %}
                             </span>
                         {% endif %}
                     </div>
-                    <p class="text-sm text-gray-500">{% trans "Complete required onboarding tasks" %}</p>
+                    <p class="text-sm text-slate">{% trans "Complete all required checklist items" %}</p>
                     {% if progress.checklist_completed_at %}
-                        <p class="text-xs text-gray-400 mt-2">
+                        <p class="text-xs text-slate mt-2">
                             <i data-lucide="clock" class="w-3 h-3 inline mr-1"></i>
                             {{ progress.checklist_completed_at|date:"M d, Y H:i" }}
                         </p>
@@ -136,28 +167,32 @@
             <!-- Step 3 -->
             <div class="flex gap-4">
                 <div class="flex flex-col items-center">
-                    <div class="flex items-center justify-center w-10 h-10 rounded-full {% if progress.content_complete %}bg-gradient-to-br from-blue to-orange-500{% else %}bg-gray-200{% endif %}">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-full {% if progress.content_complete %}bg-gradient-to-br from-blue to-navy{% else %}bg-slate-200{% endif %} flex-shrink-0">
                         {% if progress.content_complete %}
-                            <i data-lucide="check" class="w-5 h-5 text-white"></i>
+                            <i data-lucide="check" class="w-6 h-6 text-white"></i>
                         {% else %}
-                            <span class="text-gray-500 font-bold">3</span>
+                            <span class="text-slate-500 font-bold">3</span>
                         {% endif %}
                     </div>
                 </div>
                 <div class="flex-1">
                     <div class="flex items-center justify-between mb-2">
-                        <h3 class="font-bold text-gray-800">{% trans "Content Review" %}</h3>
+                        <h3 class="font-bold text-navy">{% trans "Content Review" %}</h3>
                         {% if progress.content_complete %}
-                            <span class="text-sm text-green-600 font-medium">{% trans "Completed" %}</span>
+                            <span class="inline-flex items-center gap-1 text-sm font-bold text-emerald-600">
+                                <i data-lucide="check-circle" class="w-4 h-4"></i>
+                                {% trans "Completed" %}
+                            </span>
                         {% else %}
-                            <span class="text-sm text-gray-500">
-                                {{ progress.content_viewed|default:0 }}/{{ progress.content_total|default:0 }}
+                            <span class="inline-flex items-center gap-1 text-sm font-medium text-slate-500">
+                                <i data-lucide="clock" class="w-4 h-4"></i>
+                                {% trans "Pending" %}
                             </span>
                         {% endif %}
                     </div>
-                    <p class="text-sm text-gray-500">{% trans "Review onboarding material" %}</p>
+                    <p class="text-sm text-slate">{% trans "Review all onboarding content sections" %}</p>
                     {% if progress.content_completed_at %}
-                        <p class="text-xs text-gray-400 mt-2">
+                        <p class="text-xs text-slate mt-2">
                             <i data-lucide="clock" class="w-3 h-3 inline mr-1"></i>
                             {{ progress.content_completed_at|date:"M d, Y H:i" }}
                         </p>
@@ -167,18 +202,50 @@
         </div>
     </div>
 
-    <!-- Actions -->
-    <div class="flex gap-4">
-        <a href="{% url 'accounts:onboarding_resend' account.pk %}" class="inline-flex items-center bg-blue-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-blue-600 transition">
-            <i data-lucide="mail" class="w-5 h-5 mr-2"></i>
-            {% trans "Resend Invitation" %}
-        </a>
-        {% if not progress.activation_complete %}
-            <a href="{% url 'accounts:onboarding_activate' account.pk %}" class="inline-flex items-center bg-gradient-to-r from-navy to-orange-500 text-white px-6 py-3 rounded-xl font-bold hover:from-navy hover:to-orange-600 transition">
-                <i data-lucide="user-plus" class="w-5 h-5 mr-2"></i>
-                {% trans "Activate Account" %}
-            </a>
-        {% endif %}
+    <!-- Detailed Checklist -->
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <h3 class="font-bold text-navy flex items-center gap-2">
+                <i data-lucide="list-checks" class="w-5 h-5 text-blue"></i>
+                {% trans "Detailed Checklist Progress" %}
+            </h3>
+        </div>
+        <div class="p-6">
+            {% if progress.checklist_details %}
+            <div class="space-y-3">
+                {% for item in progress.checklist_details %}
+                <div class="flex items-center gap-4 p-4 {% if item.completed %}bg-emerald-50 border border-emerald-100{% else %}bg-slate-50 border border-slate-100{% endif %} rounded-xl">
+                    <div class="flex items-center justify-center w-8 h-8 {% if item.completed %}bg-emerald-500{% else %}bg-slate-300{% endif %} rounded-lg flex-shrink-0">
+                        {% if item.completed %}
+                            <i data-lucide="check" class="w-5 h-5 text-white"></i>
+                        {% else %}
+                            <i data-lucide="minus" class="w-5 h-5 text-white"></i>
+                        {% endif %}
+                    </div>
+                    <div class="flex-1">
+                        <p class="font-bold text-navy">{{ item.name }}</p>
+                        {% if item.completed_at %}
+                            <p class="text-xs text-slate">
+                                <i data-lucide="clock" class="w-3 h-3 inline mr-1"></i>
+                                {{ item.completed_at|date:"M d, Y H:i" }}
+                            </p>
+                        {% endif %}
+                    </div>
+                    {% if item.required %}
+                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold {% if item.completed %}bg-emerald-100 text-emerald-700{% else %}bg-red-100 text-red-700 %}">
+                        {% trans "Required" %}
+                    </span>
+                    {% endif %}
+                </div>
+                {% endfor %}
+            </div>
+            {% else %}
+            <div class="text-center py-12">
+                <i data-lucide="list-checks" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
+                <p class="text-slate">{% trans "No checklist items available" %}</p>
+            </div>
+            {% endif %}
+        </div>
     </div>
 </div>
 
@@ -187,4 +254,4 @@ document.addEventListener('DOMContentLoaded', function() {
     lucide.createIcons();
 });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/accounts/onboarding/provisional_list.html b/templates/accounts/onboarding/provisional_list.html
index 16e0648..afd78c0 100644
--- a/templates/accounts/onboarding/provisional_list.html
+++ b/templates/accounts/onboarding/provisional_list.html
@@ -4,93 +4,120 @@
 {% block title %}{% trans "Provisional Accounts" %}{% endblock %}
 
 {% block content %}
-<div class="p-6 md:p-8">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Header -->
     <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
-        <div>
-            <a href="{% url 'accounts:onboarding_dashboard' %}" class="inline-flex items-center text-navy hover:text-navy mb-2 font-medium">
-                <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
-                {% trans "Back to Dashboard" %}
-            </a>
-            <h1 class="text-3xl font-bold text-gray-800">
-                {% trans "Provisional Accounts" %}
-            </h1>
-            <p class="text-gray-500">
-                {% trans "View accounts pending activation" %}
-            </p>
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-purple-500 rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="user-plus" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <a href="{% url 'accounts:acknowledgement-dashboard' %}" class="inline-flex items-center text-blue hover:text-navy mb-2 font-medium">
+                    <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
+                    {% trans "Back to Dashboard" %}
+                </a>
+                <h1 class="text-3xl font-bold text-navy">
+                    {% trans "Provisional Accounts" %}
+                </h1>
+                <p class="text-slate">
+                    {% trans "View accounts pending activation" %}
+                </p>
+            </div>
         </div>
     </div>
 
     <!-- Accounts List -->
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
         {% if provisional_accounts %}
         <div class="overflow-x-auto">
             <table class="w-full">
-                <thead class="bg-gray-50">
+                <thead class="bg-blue-50">
                     <tr>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
-                            {% trans "Name" %}
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">
+                            {% trans "User" %}
                         </th>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">
                             {% trans "Email" %}
                         </th>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
-                            {% trans "Department" %}
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">
+                            {% trans "Role" %}
                         </th>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">
                             {% trans "Invited" %}
                         </th>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">
+                            {% trans "Expires" %}
+                        </th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">
                             {% trans "Status" %}
                         </th>
-                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">
                             {% trans "Actions" %}
                         </th>
                     </tr>
                 </thead>
-                <tbody class="divide-y divide-gray-100">
+                <tbody class="divide-y divide-blue-50">
                     {% for account in provisional_accounts %}
-                    <tr class="hover:bg-gray-50 transition">
+                    <tr class="hover:bg-blue-50/50 transition">
                         <td class="px-6 py-4">
                             <div class="flex items-center gap-3">
-                                <div class="flex items-center justify-center w-10 h-10 bg-light rounded-full">
-                                    <span class="text-navy font-bold text-sm">{{ account.first_name|first }}{{ account.last_name|first }}</span>
+                                <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-full">
+                                    <span class="text-white font-bold text-sm">{{ account.first_name|first|default:"U" }}{{ account.last_name|first|default:"" }}</span>
                                 </div>
                                 <div>
-                                    <div class="font-medium text-gray-800">{{ account.get_full_name }}</div>
+                                    <div class="font-bold text-navy">{{ account.get_full_name|default:account.email }}</div>
                                 </div>
                             </div>
                         </td>
                         <td class="px-6 py-4">
-                            <div class="text-gray-600">{{ account.email }}</div>
+                            <div class="text-slate">{{ account.email }}</div>
                         </td>
                         <td class="px-6 py-4">
-                            <span class="text-gray-600">{{ account.department|default:"-" }}</span>
-                        </td>
-                        <td class="px-6 py-4">
-                            <span class="text-gray-500 text-sm">{{ account.invited_at|date:"M d, Y" }}</span>
-                        </td>
-                        <td class="px-6 py-4">
-                            {% if account.is_active %}
-                                <span class="bg-green-100 text-green-600 text-xs font-bold px-3 py-1 rounded-full">Active</span>
-                            {% elif account.activation_expires %}
-                                {% if account.activation_expires < now %}
-                                    <span class="bg-red-100 text-red-600 text-xs font-bold px-3 py-1 rounded-full">Expired</span>
-                                {% else %}
-                                    <span class="bg-orange-100 text-orange-600 text-xs font-bold px-3 py-1 rounded-full">Pending</span>
-                                {% endif %}
-                            {% else %}
-                                <span class="bg-gray-100 text-gray-500 text-xs font-bold px-3 py-1 rounded-full">Inactive</span>
+                            {% if account.groups.first %}
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">
+                                {{ account.groups.first.name }}
+                            </span>
                             {% endif %}
                         </td>
                         <td class="px-6 py-4">
-                            <div class="flex items-center gap-2">
-                                <a href="{% url 'accounts:onboarding_resend' account.pk %}" class="p-2 text-gray-400 hover:bg-blue-50 hover:text-blue-500 rounded-lg transition" title="Resend invitation">
-                                    <i data-lucide="mail" class="w-5 h-5"></i>
-                                </a>
-                                <a href="{% url 'accounts:onboarding_delete' account.pk %}" class="p-2 text-gray-400 hover:bg-red-50 hover:text-red-500 rounded-lg transition" title="Delete account">
-                                    <i data-lucide="trash-2" class="w-5 h-5"></i>
-                                </a>
+                            <span class="text-slate text-sm">{{ account.invited_at|date:"M d, Y" }}</span>
+                        </td>
+                        <td class="px-6 py-4">
+                            {% if account.invitation_expires_at %}
+                                {% if account.invitation_expires_at < now %}
+                                    <span class="text-red-600 font-bold text-sm">{% trans "Expired" %}</span>
+                                {% else %}
+                                    <span class="text-slate text-sm">{{ account.invitation_expires_at|date:"M d, Y" }}</span>
+                                {% endif %}
+                            {% else %}
+                                <span class="text-slate">-</span>
+                            {% endif %}
+                        </td>
+                        <td class="px-6 py-4">
+                            {% if account.is_active %}
+                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
+                                    <i data-lucide="check" class="w-3 h-3"></i>
+                                    {% trans "Active" %}
+                                </span>
+                            elif account.invitation_expires_at and account.invitation_expires_at < now %}
+                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-700">
+                                    <i data-lucide="alert-circle" class="w-3 h-3"></i>
+                                    {% trans "Expired" %}
+                                </span>
+                            {% else %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-orange-100 text-orange-700">
+                                    {% trans "Pending" %}
+                                </span>
+                            {% endif %}
+                        </td>
+                        <td class="px-6 py-4">
+                            <div class="flex gap-2">
+                                <button class="px-3 py-2 text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-lg transition font-medium text-sm" title="{% trans 'Resend Invite' %}">
+                                    <i data-lucide="mail" class="w-4 h-4"></i>
+                                </button>
+                                <button class="px-3 py-2 text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition font-medium text-sm" title="{% trans 'Deactivate' %}">
+                                    <i data-lucide="user-x" class="w-4 h-4"></i>
+                                </button>
                             </div>
                         </td>
                     </tr>
@@ -100,15 +127,11 @@
         </div>
         {% else %}
         <div class="p-12 text-center">
-            <div class="inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4">
-                <i data-lucide="users" class="w-8 h-8 text-gray-400"></i>
+            <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-emerald-100 to-green-100 rounded-full mb-4">
+                <i data-lucide="check-circle" class="w-10 h-10 text-emerald-500"></i>
             </div>
-            <h3 class="text-lg font-bold text-gray-700 mb-2">{% trans "No Provisional Accounts" %}</h3>
-            <p class="text-gray-500 mb-4">{% trans "There are no accounts pending activation" %}</p>
-            <a href="{% url 'accounts:onboarding_bulk_invite' %}" class="inline-flex items-center bg-light0 text-white px-6 py-3 rounded-xl font-bold hover:bg-navy transition">
-                <i data-lucide="mail-plus" class="w-5 h-5 mr-2"></i>
-                {% trans "Send Invitations" %}
-            </a>
+            <h3 class="text-xl font-bold text-navy mb-2">{% trans "All Accounts Activated" %}</h3>
+            <p class="text-slate">{% trans "There are no pending provisional accounts" %}</p>
         </div>
         {% endif %}
     </div>
@@ -119,4 +142,4 @@ document.addEventListener('DOMContentLoaded', function() {
     lucide.createIcons();
 });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/accounts/simple_acknowledgements/admin_create.html b/templates/accounts/simple_acknowledgements/admin_create.html
new file mode 100644
index 0000000..9a41598
--- /dev/null
+++ b/templates/accounts/simple_acknowledgements/admin_create.html
@@ -0,0 +1,232 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Create Acknowledgement" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Header -->
+    <div class="flex items-center gap-3 mb-8">
+        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl shadow-lg shadow-emerald-200">
+            <i data-lucide="plus-circle" class="w-6 h-6 text-white"></i>
+        </div>
+        <div>
+            <h1 class="text-2xl font-bold text-navy">{% trans "Create Acknowledgement" %}</h1>
+            <p class="text-slate text-sm">{% trans "Create a new acknowledgement for employees to sign" %}</p>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <!-- Main Form -->
+        <div class="lg:col-span-2">
+            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
+                <div class="px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-emerald-50 to-transparent">
+                    <h2 class="font-bold text-navy flex items-center gap-2">
+                        <i data-lucide="file-text" class="w-5 h-5 text-emerald-600"></i>
+                        {% trans "Acknowledgement Details" %}
+                    </h2>
+                </div>
+
+                <form method="post" enctype="multipart/form-data" class="p-6 space-y-6">
+                    {% csrf_token %}
+
+                    <!-- Title -->
+                    <div>
+                        <label class="block text-sm font-bold text-navy mb-2">
+                            {% trans "Title" %} <span class="text-red-500">*</span>
+                        </label>
+                        <input type="text" name="title" required
+                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition"
+                               placeholder="{% trans 'e.g., Code of Conduct, Safety Policy, HIPAA Agreement' %}">
+                        <p class="text-xs text-slate mt-2">{% trans "Give this acknowledgement a clear, descriptive title" %}</p>
+                    </div>
+
+                    <!-- Description -->
+                    <div>
+                        <label class="block text-sm font-bold text-navy mb-2">
+                            {% trans "Description" %}
+                        </label>
+                        <textarea name="description" rows="6"
+                                  class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition resize-none"
+                                  placeholder="{% trans 'Enter the full text of the acknowledgement or a detailed description of what employees are agreeing to...' %}"></textarea>
+                        <p class="text-xs text-slate mt-2">{% trans "Employees will see this description when signing" %}</p>
+                    </div>
+
+                    <!-- PDF Upload -->
+                    <div>
+                        <label class="block text-sm font-bold text-navy mb-2">
+                            {% trans "Attach PDF Document" %}
+                        </label>
+                        <div class="border-2 border-dashed border-slate-300 rounded-xl p-8 text-center hover:border-emerald-500 hover:bg-emerald-50/30 transition cursor-pointer" onclick="document.getElementById('pdf-upload').click()">
+                            <input type="file" id="pdf-upload" name="pdf_document" accept=".pdf" class="hidden" onchange="handleFileSelect(this)">
+                            <div id="upload-placeholder">
+                                <i data-lucide="upload-cloud" class="w-12 h-12 text-slate-400 mx-auto mb-3"></i>
+                                <p class="text-slate font-medium">{% trans "Click to upload PDF" %}</p>
+                                <p class="text-sm text-slate mt-1">{% trans "or drag and drop here" %}</p>
+                            </div>
+                            <div id="upload-preview" class="hidden">
+                                <i data-lucide="file-text" class="w-12 h-12 text-emerald-500 mx-auto mb-3"></i>
+                                <p class="font-medium text-navy" id="filename"></p>
+                                <p class="text-sm text-emerald-600 mt-1">{% trans "Click to change file" %}</p>
+                            </div>
+                        </div>
+                        <p class="text-xs text-slate mt-2">{% trans "Optional: Upload a PDF for employees to review before signing" %}</p>
+                    </div>
+
+                    <!-- Settings -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div class="bg-emerald-50 border border-emerald-100 rounded-xl p-4">
+                            <label class="flex items-start gap-3 cursor-pointer">
+                                <input type="checkbox" name="is_active" checked
+                                       class="w-5 h-5 text-emerald-500 rounded focus:ring-emerald-500 mt-0.5">
+                                <div>
+                                    <span class="font-semibold text-navy">{% trans "Active" %}</span>
+                                    <p class="text-xs text-slate mt-1">{% trans "Show this acknowledgement in employee checklists immediately" %}</p>
+                                </div>
+                            </label>
+                        </div>
+                        <div class="bg-amber-50 border border-amber-100 rounded-xl p-4">
+                            <label class="flex items-start gap-3 cursor-pointer">
+                                <input type="checkbox" name="is_required" checked
+                                       class="w-5 h-5 text-amber-500 rounded focus:ring-amber-500 mt-0.5">
+                                <div>
+                                    <span class="font-semibold text-navy">{% trans "Required" %}</span>
+                                    <p class="text-xs text-slate mt-1">{% trans "All employees must sign this acknowledgement" %}</p>
+                                </div>
+                            </label>
+                        </div>
+                    </div>
+
+                    <!-- Display Order -->
+                    <div>
+                        <label class="block text-sm font-bold text-navy mb-2">
+                            {% trans "Display Order" %}
+                        </label>
+                        <input type="number" name="order" value="0" min="0"
+                               class="w-32 px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition">
+                        <p class="text-xs text-slate mt-2">{% trans "Lower numbers appear first in the list (0 = top)" %}</p>
+                    </div>
+
+                    <!-- Actions -->
+                    <div class="flex gap-3 pt-4 border-t border-slate-100">
+                        <a href="{% url 'accounts:simple_acknowledgements:admin_list' %}"
+                           class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-slate-100 text-slate-700 rounded-xl font-semibold hover:bg-slate-200 transition">
+                            <i data-lucide="x" class="w-5 h-5"></i>
+                            {% trans "Cancel" %}
+                        </a>
+                        <button type="submit"
+                                class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white rounded-xl font-semibold hover:from-emerald-600 hover:to-emerald-700 transition shadow-lg shadow-emerald-200">
+                            <i data-lucide="check-circle" class="w-5 h-5"></i>
+                            {% trans "Create Acknowledgement" %}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Help Sidebar -->
+        <div class="lg:col-span-1">
+            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden sticky top-6">
+                <div class="px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-blue to-navy">
+                    <h3 class="font-bold text-white flex items-center gap-2">
+                        <i data-lucide="help-circle" class="w-5 h-5"></i>
+                        {% trans "Tips" %}
+                    </h3>
+                </div>
+                <div class="p-6 space-y-4">
+                    <div class="flex items-start gap-3">
+                        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                            <span class="font-bold text-blue text-sm">1</span>
+                        </div>
+                        <div>
+                            <p class="font-semibold text-navy text-sm">{% trans "Clear Title" %}</p>
+                            <p class="text-xs text-slate mt-1">{% trans "Use a descriptive title so employees understand what they're signing" %}</p>
+                        </div>
+                    </div>
+
+                    <div class="flex items-start gap-3">
+                        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                            <span class="font-bold text-blue text-sm">2</span>
+                        </div>
+                        <div>
+                            <p class="font-semibold text-navy text-sm">{% trans "Detailed Description" %}</p>
+                            <p class="text-xs text-slate mt-1">{% trans "Include the full policy text or a clear summary" %}</p>
+                        </div>
+                    </div>
+
+                    <div class="flex items-start gap-3">
+                        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                            <span class="font-bold text-blue text-sm">3</span>
+                        </div>
+                        <div>
+                            <p class="font-semibold text-navy text-sm">{% trans "PDF Attachment" %}</p>
+                            <p class="text-xs text-slate mt-1">{% trans "Upload official policy documents for reference" %}</p>
+                        </div>
+                    </div>
+
+                    <div class="flex items-start gap-3">
+                        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                            <span class="font-bold text-blue text-sm">4</span>
+                        </div>
+                        <div>
+                            <p class="font-semibold text-navy text-sm">{% trans "Required vs Optional" %}</p>
+                            <p class="text-xs text-slate mt-1">{% trans "Mark critical policies as required" %}</p>
+                        </div>
+                    </div>
+
+                    <div class="pt-4 border-t border-slate-100">
+                        <a href="{% url 'accounts:simple_acknowledgements:admin_list' %}"
+                           class="inline-flex items-center gap-2 text-sm text-blue hover:text-navy transition">
+                            <i data-lucide="arrow-left" class="w-4 h-4"></i>
+                            {% trans "Back to list" %}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function handleFileSelect(input) {
+    const placeholder = document.getElementById('upload-placeholder');
+    const preview = document.getElementById('upload-preview');
+    const filename = document.getElementById('filename');
+
+    if (input.files && input.files[0]) {
+        placeholder.classList.add('hidden');
+        preview.classList.remove('hidden');
+        filename.textContent = input.files[0].name;
+    }
+}
+
+// Drag and drop support
+const dropZone = document.querySelector('.border-dashed');
+
+dropZone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropZone.classList.add('border-emerald-500', 'bg-emerald-50');
+});
+
+dropZone.addEventListener('dragleave', () => {
+    dropZone.classList.remove('border-emerald-500', 'bg-emerald-50');
+});
+
+dropZone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('border-emerald-500', 'bg-emerald-50');
+
+    const files = e.dataTransfer.files;
+    if (files.length > 0 && files[0].type === 'application/pdf') {
+        document.getElementById('pdf-upload').files = files;
+        handleFileSelect(document.getElementById('pdf-upload'));
+    } else {
+        alert('{% trans "Please upload a PDF file" %}');
+    }
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/accounts/simple_acknowledgements/admin_delete.html b/templates/accounts/simple_acknowledgements/admin_delete.html
new file mode 100644
index 0000000..2f58ae3
--- /dev/null
+++ b/templates/accounts/simple_acknowledgements/admin_delete.html
@@ -0,0 +1,69 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Delete Acknowledgement" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Header -->
+    <div class="flex items-center gap-3 mb-8">
+        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl shadow-lg shadow-red-200">
+            <i data-lucide="trash-2" class="w-6 h-6 text-white"></i>
+        </div>
+        <div>
+            <h1 class="text-2xl font-bold text-navy">{% trans "Delete Acknowledgement" %}</h1>
+            <p class="text-slate text-sm">{% trans "Confirm deletion" %}</p>
+        </div>
+    </div>
+
+    <!-- Delete Confirmation Card -->
+    <div class="max-w-lg mx-auto">
+        <div class="bg-white rounded-2xl shadow-lg border border-red-100 overflow-hidden">
+            <div class="p-8 text-center">
+                <div class="w-20 h-20 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="alert-triangle" class="w-10 h-10 text-red-500"></i>
+                </div>
+
+                <h2 class="text-xl font-bold text-navy mb-2">
+                    {% trans "Are you sure?" %}
+                </h2>
+                <p class="text-slate mb-4">
+                    {% trans "You are about to delete:" %}
+                </p>
+                <p class="text-lg font-semibold text-navy mb-6">
+                    "{{ acknowledgement.title }}"
+                </p>
+
+                <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6">
+                    <p class="text-sm text-red-700">
+                        <i data-lucide="alert-circle" class="w-4 h-4 inline mr-1"></i>
+                        {% trans "This action cannot be undone. All signature records for this acknowledgement will also be deleted." %}
+                    </p>
+                </div>
+
+                <div class="flex gap-3 justify-center">
+                    <a href="{% url 'accounts:simple_acknowledgements:admin_list' %}"
+                       class="inline-flex items-center gap-2 px-6 py-3 bg-slate-100 text-slate-700 rounded-xl font-semibold hover:bg-slate-200 transition">
+                        <i data-lucide="x" class="w-4 h-4"></i>
+                        {% trans "Cancel" %}
+                    </a>
+                    <form method="post" class="inline">
+                        {% csrf_token %}
+                        <button type="submit"
+                                class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-xl font-semibold hover:from-red-600 hover:to-red-700 transition shadow-lg shadow-red-200">
+                            <i data-lucide="trash-2" class="w-4 h-4"></i>
+                            {% trans "Delete" %}
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/accounts/simple_acknowledgements/admin_form.html b/templates/accounts/simple_acknowledgements/admin_form.html
new file mode 100644
index 0000000..6e465b6
--- /dev/null
+++ b/templates/accounts/simple_acknowledgements/admin_form.html
@@ -0,0 +1,132 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% if action == 'create' %}{% trans "New Acknowledgement" %}{% else %}{% trans "Edit Acknowledgement" %}{% endif %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Header -->
+    <div class="flex items-center gap-3 mb-8">
+        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
+            <i data-lucide="{% if action == 'create' %}plus{% else %}edit{% endif %}" class="w-6 h-6 text-white"></i>
+        </div>
+        <div>
+            <h1 class="text-2xl font-bold text-navy">
+                {% if action == 'create' %}{% trans "New Acknowledgement" %}{% else %}{% trans "Edit Acknowledgement" %}{% endif %}
+            </h1>
+            <p class="text-slate text-sm">
+                {% if action == 'create' %}{% trans "Create a new acknowledgement for employees" %}{% else %}{% trans "Update acknowledgement details" %}{% endif %}
+            </p>
+        </div>
+    </div>
+
+    <div class="max-w-3xl">
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
+            <form method="post" enctype="multipart/form-data" class="p-6 space-y-6">
+                {% csrf_token %}
+
+                <!-- Title -->
+                <div>
+                    <label class="block text-sm font-bold text-navy mb-2">
+                        {% trans "Title" %} <span class="text-red-500">*</span>
+                    </label>
+                    <input type="text" name="title" required
+                           value="{{ acknowledgement.title|default:'' }}"
+                           class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                           placeholder="{% trans 'Enter acknowledgement title' %}">
+                </div>
+
+                <!-- Description -->
+                <div>
+                    <label class="block text-sm font-bold text-navy mb-2">
+                        {% trans "Description" %}
+                    </label>
+                    <textarea name="description" rows="5"
+                              class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                              placeholder="{% trans 'Enter detailed description of the acknowledgement' %}">{{ acknowledgement.description|default:'' }}</textarea>
+                </div>
+
+                <!-- PDF Document -->
+                <div>
+                    <label class="block text-sm font-bold text-navy mb-2">
+                        {% trans "PDF Document" %}
+                    </label>
+                    <div class="border-2 border-dashed border-slate-300 rounded-xl p-6 text-center hover:border-blue transition">
+                        <input type="file" name="pdf_document" accept=".pdf"
+                               class="w-full"
+                               onchange="updateFileName(this)">
+                        {% if acknowledgement.pdf_document %}
+                            <p class="text-sm text-slate mt-2">
+                                {% trans "Current:" %} <a href="{{ acknowledgement.pdf_document.url }}" target="_blank" class="text-blue hover:underline">{{ acknowledgement.pdf_document.name }}</a>
+                            </p>
+                        {% endif %}
+                    </div>
+                    <p class="text-xs text-slate mt-2">{% trans "Upload a PDF document for employees to review (optional)" %}</p>
+                </div>
+
+                <!-- Settings -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="bg-slate-50 rounded-xl p-4">
+                        <label class="flex items-center gap-3 cursor-pointer">
+                            <input type="checkbox" name="is_active"
+                                   {% if acknowledgement.is_active|default:True %}checked{% endif %}
+                                   class="w-5 h-5 text-blue rounded focus:ring-blue">
+                            <div>
+                                <span class="font-semibold text-navy">{% trans "Active" %}</span>
+                                <p class="text-xs text-slate">{% trans "Show in employee checklist" %}</p>
+                            </div>
+                        </label>
+                    </div>
+                    <div class="bg-slate-50 rounded-xl p-4">
+                        <label class="flex items-center gap-3 cursor-pointer">
+                            <input type="checkbox" name="is_required"
+                                   {% if acknowledgement.is_required|default:True %}checked{% endif %}
+                                   class="w-5 h-5 text-blue rounded focus:ring-blue">
+                            <div>
+                                <span class="font-semibold text-navy">{% trans "Required" %}</span>
+                                <p class="text-xs text-slate">{% trans "Must be signed by all employees" %}</p>
+                            </div>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Order -->
+                <div>
+                    <label class="block text-sm font-bold text-navy mb-2">
+                        {% trans "Display Order" %}
+                    </label>
+                    <input type="number" name="order"
+                           value="{{ acknowledgement.order|default:0 }}"
+                           class="w-32 px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition">
+                    <p class="text-xs text-slate mt-2">{% trans "Lower numbers appear first" %}</p>
+                </div>
+
+                <!-- Actions -->
+                <div class="flex gap-3 pt-4 border-t border-slate-100">
+                    <a href="{% url 'accounts:simple_acknowledgements:admin_list' %}"
+                       class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-slate-100 text-slate-700 rounded-xl font-semibold hover:bg-slate-200 transition">
+                        {% trans "Cancel" %}
+                    </a>
+                    <button type="submit"
+                            class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:shadow-lg transition">
+                        <i data-lucide="save" class="w-5 h-5"></i>
+                        {% if action == 'create' %}{% trans "Create Acknowledgement" %}{% else %}{% trans "Save Changes" %}{% endif %}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+function updateFileName(input) {
+    if (input.files && input.files[0]) {
+        // File selected - you can add visual feedback here
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/accounts/simple_acknowledgements/admin_list.html b/templates/accounts/simple_acknowledgements/admin_list.html
new file mode 100644
index 0000000..1316057
--- /dev/null
+++ b/templates/accounts/simple_acknowledgements/admin_list.html
@@ -0,0 +1,164 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Manage Acknowledgements" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="clipboard-list" class="w-6 h-6 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">{% trans "Acknowledgements" %}</h1>
+                <p class="text-slate text-sm">{% trans "Manage employee acknowledgement forms" %}</p>
+            </div>
+        </div>
+        <div class="flex gap-3">
+            <a href="{% url 'accounts:simple_acknowledgements:admin_signatures' %}"
+               class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                <i data-lucide="users" class="w-4 h-4"></i>
+                {% trans "View Signatures" %}
+            </a>
+            <a href="{% url 'accounts:simple_acknowledgements:admin_create' %}"
+               class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white rounded-xl font-semibold hover:shadow-lg transition">
+                <i data-lucide="plus" class="w-4 h-4"></i>
+                {% trans "New Acknowledgement" %}
+            </a>
+        </div>
+    </div>
+
+    <!-- Stats Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-5">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
+                    <i data-lucide="clipboard" class="w-5 h-5 text-blue"></i>
+                </div>
+                <div>
+                    <p class="text-xs text-slate uppercase font-semibold">{% trans "Total" %}</p>
+                    <p class="text-2xl font-bold text-navy">{{ acknowledgements|length }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-emerald-100 p-5">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
+                    <i data-lucide="check-circle" class="w-5 h-5 text-emerald-600"></i>
+                </div>
+                <div>
+                    <p class="text-xs text-slate uppercase font-semibold">{% trans "Active" %}</p>
+                    <p class="text-2xl font-bold text-emerald-600">{{ acknowledgements|length }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Acknowledgements Table -->
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
+        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
+            <h2 class="font-bold text-navy">{% trans "All Acknowledgements" %}</h2>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="w-full">
+                <thead class="bg-slate-50">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Title" %}</th>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Status" %}</th>
+                        <th class="px-6 py-3 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Signed" %}</th>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "PDF" %}</th>
+                        <th class="px-6 py-3 text-right text-xs font-bold text-slate uppercase tracking-wider">{% trans "Actions" %}</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-100">
+                    {% for ack in acknowledgements %}
+                    <tr class="hover:bg-slate-50 transition">
+                        <td class="px-6 py-4">
+                            <div class="font-semibold text-navy">{{ ack.title }}</div>
+                            {% if ack.description %}
+                                <div class="text-sm text-slate mt-1">{{ ack.description|truncatewords:10 }}</div>
+                            {% endif %}
+                        </td>
+                        <td class="px-6 py-4">
+                            {% if ack.is_active %}
+                                <span class="inline-flex items-center px-2.5 py-1 bg-emerald-100 text-emerald-700 rounded-lg text-xs font-bold">
+                                    {% trans "Active" %}
+                                </span>
+                            {% else %}
+                                <span class="inline-flex items-center px-2.5 py-1 bg-slate-100 text-slate-600 rounded-lg text-xs font-bold">
+                                    {% trans "Inactive" %}
+                                </span>
+                            {% endif %}
+                            {% if ack.is_required %}
+                                <span class="inline-flex items-center px-2.5 py-1 bg-red-100 text-red-700 rounded-lg text-xs font-bold ml-1">
+                                    {% trans "Required" %}
+                                </span>
+                            {% endif %}
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <span class="inline-flex items-center gap-1 px-3 py-1 bg-blue-50 text-blue rounded-lg text-sm font-semibold">
+                                <i data-lucide="users" class="w-4 h-4"></i>
+                                {{ ack.signed_count }}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4">
+                            {% if ack.pdf_document %}
+                                <a href="{{ ack.pdf_document.url }}" target="_blank"
+                                   class="inline-flex items-center gap-1 text-blue hover:text-navy transition">
+                                    <i data-lucide="file-text" class="w-4 h-4"></i>
+                                    <span class="text-sm">{% trans "View" %}</span>
+                                </a>
+                            {% else %}
+                                <span class="text-slate text-sm">-</span>
+                            {% endif %}
+                        </td>
+                        <td class="px-6 py-4 text-right">
+                            <div class="flex items-center justify-end gap-2">
+                                <a href="{% url 'accounts:simple_acknowledgements:admin_send' ack.id %}"
+                                   class="inline-flex items-center gap-1 px-3 py-1.5 bg-purple-50 text-purple-600 rounded-lg text-sm font-semibold hover:bg-purple-100 transition"
+                                   title="{% trans 'Send to Staff' %}">
+                                    <i data-lucide="send" class="w-4 h-4"></i>
+                                    {% trans "Send" %}
+                                </a>
+                                <a href="{% url 'accounts:simple_acknowledgements:admin_edit' ack.id %}"
+                                   class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-50 text-blue rounded-lg text-sm font-semibold hover:bg-blue-100 transition">
+                                    <i data-lucide="edit" class="w-4 h-4"></i>
+                                    {% trans "Edit" %}
+                                </a>
+                                <a href="{% url 'accounts:simple_acknowledgements:admin_delete' ack.id %}"
+                                   class="inline-flex items-center gap-1 px-3 py-1.5 bg-red-50 text-red-600 rounded-lg text-sm font-semibold hover:bg-red-100 transition">
+                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
+                                    {% trans "Delete" %}
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                    {% empty %}
+                    <tr>
+                        <td colspan="5" class="px-6 py-12 text-center text-slate">
+                            <div class="flex flex-col items-center gap-3">
+                                <i data-lucide="clipboard-x" class="w-12 h-12 text-slate-300"></i>
+                                <p class="font-medium">{% trans "No acknowledgements created yet" %}</p>
+                                <a href="{% url 'accounts:simple_acknowledgements:admin_create' %}"
+                                   class="inline-flex items-center gap-2 px-4 py-2 bg-blue text-white rounded-lg font-semibold hover:bg-navy transition">
+                                    <i data-lucide="plus" class="w-4 h-4"></i>
+                                    {% trans "Create First Acknowledgement" %}
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/accounts/simple_acknowledgements/admin_send.html b/templates/accounts/simple_acknowledgements/admin_send.html
new file mode 100644
index 0000000..6faf2bb
--- /dev/null
+++ b/templates/accounts/simple_acknowledgements/admin_send.html
@@ -0,0 +1,212 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Send Acknowledgement" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Header -->
+    <div class="flex items-center gap-3 mb-8">
+        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl shadow-lg shadow-purple-200">
+            <i data-lucide="send" class="w-6 h-6 text-white"></i>
+        </div>
+        <div>
+            <h1 class="text-2xl font-bold text-navy">{% trans "Send Acknowledgement" %}</h1>
+            <p class="text-slate text-sm">{% trans "Select staff members to send this acknowledgement to" %}</p>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <!-- Main Form -->
+        <div class="lg:col-span-2">
+            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
+                <div class="px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-purple-50 to-transparent">
+                    <h2 class="font-bold text-navy flex items-center gap-2">
+                        <i data-lucide="users" class="w-5 h-5 text-purple-600"></i>
+                        {{ acknowledgement.title }}
+                    </h2>
+                </div>
+
+                <form method="post" class="p-6 space-y-6">
+                    {% csrf_token %}
+
+                    <!-- Staff Selection -->
+                    <div>
+                        <div class="flex justify-between items-center mb-4">
+                            <label class="block text-sm font-bold text-navy">
+                                {% trans "Select Staff Members" %}
+                            </label>
+                            <div class="flex gap-2">
+                                <button type="button" onclick="selectAll()"
+                                        class="text-sm text-purple-600 hover:text-purple-700 font-semibold">
+                                    {% trans "Select All" %}
+                                </button>
+                                <span class="text-slate">|</span>
+                                <button type="button" onclick="deselectAll()"
+                                        class="text-sm text-slate hover:text-navy font-semibold">
+                                    {% trans "Deselect All" %}
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="border border-slate-200 rounded-xl overflow-hidden">
+                            <div class="bg-slate-50 px-4 py-2 border-b border-slate-200 flex items-center gap-2">
+                                <i data-lucide="search" class="w-4 h-4 text-slate"></i>
+                                <input type="text" id="staffSearch" placeholder="{% trans 'Search staff...' %}"
+                                       class="bg-transparent border-none focus:outline-none text-sm w-full"
+                                       onkeyup="filterStaff()">
+                            </div>
+                            <div class="max-h-96 overflow-y-auto" id="staffList">
+                                {% for staff in staff_list %}
+                                <label class="staff-item flex items-center gap-3 p-3 hover:bg-slate-50 transition cursor-pointer border-b border-slate-100 last:border-0 {% if staff.id in already_sent_ids %}bg-purple-50/50{% endif %}">
+                                    <input type="checkbox" name="employees" value="{{ staff.id }}"
+                                           {% if staff.id in already_sent_ids %}checked disabled{% endif %}
+                                           class="w-5 h-5 text-purple-500 rounded focus:ring-purple-500">
+                                    <div class="flex-1">
+                                        <div class="font-semibold text-navy">
+                                            {{ staff.get_full_name|default:staff.email }}
+                                            {% if staff.id in already_sent_ids %}
+                                                <span class="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full ml-2">{% trans "Already sent" %}</span>
+                                            {% endif %}
+                                        </div>
+                                        <div class="text-sm text-slate">{{ staff.email }}</div>
+                                        {% if staff.department %}
+                                            <div class="text-xs text-slate mt-1">{{ staff.department.name }}</div>
+                                        {% endif %}
+                                    </div>
+                                </label>
+                                {% empty %}
+                                <div class="p-6 text-center text-slate">
+                                    <i data-lucide="users-x" class="w-12 h-12 mx-auto mb-3 text-slate-300"></i>
+                                    <p>{% trans "No staff members found" %}</p>
+                                </div>
+                                {% endfor %}
+                            </div>
+                        </div>
+                        <p class="text-xs text-slate mt-2">
+                            <span id="selectedCount">0</span> {% trans "staff selected" %}
+                            {% if already_sent_ids|length > 0 %}
+                                • {{ already_sent_ids|length }} {% trans "already sent" %}
+                            {% endif %}
+                        </p>
+                    </div>
+
+                    <!-- Email Notification -->
+                    <div class="bg-purple-50 border border-purple-100 rounded-xl p-4">
+                        <label class="flex items-start gap-3 cursor-pointer">
+                            <input type="checkbox" name="send_email" checked
+                                   class="w-5 h-5 text-purple-500 rounded focus:ring-purple-500 mt-0.5">
+                            <div>
+                                <span class="font-semibold text-navy">{% trans "Send Email Notification" %}</span>
+                                <p class="text-xs text-slate mt-1">{% trans "Staff will receive an email with a link to sign the acknowledgement" %}</p>
+                            </div>
+                        </label>
+                    </div>
+
+                    <!-- Actions -->
+                    <div class="flex gap-3 pt-4 border-t border-slate-100">
+                        <a href="{% url 'accounts:simple_acknowledgements:admin_list' %}"
+                           class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-slate-100 text-slate-700 rounded-xl font-semibold hover:bg-slate-200 transition">
+                            <i data-lucide="x" class="w-5 h-5"></i>
+                            {% trans "Cancel" %}
+                        </a>
+                        <button type="submit"
+                                class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition shadow-lg shadow-purple-200">
+                            <i data-lucide="send" class="w-5 h-5"></i>
+                            {% trans "Send to Selected Staff" %}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Info Sidebar -->
+        <div class="lg:col-span-1">
+            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden sticky top-6">
+                <div class="px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-blue to-navy">
+                    <h3 class="font-bold text-white flex items-center gap-2">
+                        <i data-lucide="info" class="w-5 h-5"></i>
+                        {% trans "How it works" %}
+                    </h3>
+                </div>
+                <div class="p-6 space-y-4">
+                    <div class="flex items-start gap-3">
+                        <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                            <span class="font-bold text-purple-600 text-sm">1</span>
+                        </div>
+                        <div>
+                            <p class="font-semibold text-navy text-sm">{% trans "Select Staff" %}</p>
+                            <p class="text-xs text-slate mt-1">{% trans "Choose which employees need to sign this acknowledgement" %}</p>
+                        </div>
+                    </div>
+
+                    <div class="flex items-start gap-3">
+                        <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                            <span class="font-bold text-purple-600 text-sm">2</span>
+                        </div>
+                        <div>
+                            <p class="font-semibold text-navy text-sm">{% trans "Send Notification" %}</p>
+                            <p class="text-xs text-slate mt-1">{% trans "Employees receive email with a link to review and sign" %}</p>
+                        </div>
+                    </div>
+
+                    <div class="flex items-start gap-3">
+                        <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                            <span class="font-bold text-purple-600 text-sm">3</span>
+                        </div>
+                        <div>
+                            <p class="font-semibold text-navy text-sm">{% trans "Track Progress" %}</p>
+                            <p class="text-xs text-slate mt-1">{% trans "Monitor who has signed in the signatures page" %}</p>
+                        </div>
+                    </div>
+
+                    <div class="pt-4 border-t border-slate-100">
+                        <a href="{% url 'accounts:simple_acknowledgements:admin_signatures' %}"
+                           class="inline-flex items-center gap-2 text-sm text-blue hover:text-navy transition">
+                            <i data-lucide="arrow-right" class="w-4 h-4"></i>
+                            {% trans "View Signatures" %}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function selectAll() {
+    document.querySelectorAll('input[name="employees"]:not(:disabled)').forEach(cb => cb.checked = true);
+    updateCount();
+}
+
+function deselectAll() {
+    document.querySelectorAll('input[name="employees"]:not(:disabled)').forEach(cb => cb.checked = false);
+    updateCount();
+}
+
+function updateCount() {
+    const count = document.querySelectorAll('input[name="employees"]:checked:not(:disabled)').length;
+    document.getElementById('selectedCount').textContent = count;
+}
+
+function filterStaff() {
+    const search = document.getElementById('staffSearch').value.toLowerCase();
+    document.querySelectorAll('.staff-item').forEach(item => {
+        const text = item.textContent.toLowerCase();
+        item.style.display = text.includes(search) ? '' : 'none';
+    });
+}
+
+// Update count on checkbox change
+document.querySelectorAll('input[name="employees"]').forEach(cb => {
+    cb.addEventListener('change', updateCount);
+});
+
+// Initialize count
+updateCount();
+
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/accounts/simple_acknowledgements/admin_signatures.html b/templates/accounts/simple_acknowledgements/admin_signatures.html
new file mode 100644
index 0000000..0eea179
--- /dev/null
+++ b/templates/accounts/simple_acknowledgements/admin_signatures.html
@@ -0,0 +1,202 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Employee Signatures" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="users" class="w-6 h-6 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">{% trans "Employee Signatures" %}</h1>
+                <p class="text-slate text-sm">{% trans "View all signed acknowledgements" %}</p>
+            </div>
+        </div>
+        <div class="flex gap-3">
+            <a href="{% url 'accounts:simple_acknowledgements:admin_export' %}"
+               class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                <i data-lucide="download" class="w-4 h-4"></i>
+                {% trans "Export CSV" %}
+            </a>
+            <a href="{% url 'accounts:simple_acknowledgements:admin_list' %}"
+               class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:shadow-lg transition">
+                <i data-lucide="clipboard-list" class="w-4 h-4"></i>
+                {% trans "Manage Acknowledgements" %}
+            </a>
+        </div>
+    </div>
+
+    {% if acknowledgement %}
+    <!-- Filter by Acknowledgement -->
+    <div class="bg-blue-50 border border-blue-100 rounded-xl p-4 mb-6">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <i data-lucide="filter" class="w-5 h-5 text-blue"></i>
+                <div>
+                    <p class="text-sm text-slate">{% trans "Filtered by:" %}</p>
+                    <p class="font-semibold text-navy">{{ acknowledgement.title }}</p>
+                </div>
+            </div>
+            <a href="{% url 'accounts:simple_acknowledgements:admin_signatures' %}"
+               class="text-sm text-blue hover:underline">
+                {% trans "Clear filter" %}
+            </a>
+        </div>
+    </div>
+    {% endif %}
+
+    <!-- Stats -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-5">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
+                    <i data-lucide="file-signature" class="w-5 h-5 text-blue"></i>
+                </div>
+                <div>
+                    <p class="text-xs text-slate uppercase font-semibold">{% trans "Total Signatures" %}</p>
+                    <p class="text-2xl font-bold text-navy">{{ signatures|length }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-emerald-100 p-5">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
+                    <i data-lucide="check-circle" class="w-5 h-5 text-emerald-600"></i>
+                </div>
+                <div>
+                    <p class="text-xs text-slate uppercase font-semibold">{% trans "This Month" %}</p>
+                    <p class="text-2xl font-bold text-emerald-600">{{ recent_count|default:0 }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-5">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
+                    <i data-lucide="users" class="w-5 h-5 text-purple-600"></i>
+                </div>
+                <div>
+                    <p class="text-xs text-slate uppercase font-semibold">{% trans "Unique Employees" %}</p>
+                    <p class="text-2xl font-bold text-purple-600">{{ unique_employees|default:0 }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Signatures Table -->
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
+        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
+            <h2 class="font-bold text-navy">{% trans "All Signatures" %}</h2>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="w-full">
+                <thead class="bg-slate-50">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Employee" %}</th>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Acknowledgement" %}</th>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Status" %}</th>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Date" %}</th>
+                        <th class="px-6 py-3 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Actions" %}</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-100">
+                    {% for sig in signatures %}
+                    <tr class="hover:bg-slate-50 transition">
+                        <td class="px-6 py-4">
+                            <div class="flex items-center gap-3">
+                                <div class="w-8 h-8 bg-blue rounded-lg flex items-center justify-center text-white font-bold text-sm">
+                                    {{ sig.employee.first_name|first|default:"U" }}{{ sig.employee.last_name|first|default:"" }}
+                                </div>
+                                <div>
+                                    <div class="font-semibold text-navy">{{ sig.employee.get_full_name|default:sig.employee.email }}</div>
+                                    <div class="text-sm text-slate">{{ sig.employee.email }}</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="font-medium text-navy">{{ sig.acknowledgement.title }}</span>
+                        </td>
+                        <td class="px-6 py-4">
+                            {% if sig.is_signed %}
+                                <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-emerald-100 text-emerald-700 rounded-lg text-xs font-bold">
+                                    <i data-lucide="check-circle" class="w-3 h-3"></i>
+                                    {% trans "Signed" %}
+                                </span>
+                            {% elif sig.sent_at %}
+                                <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-purple-100 text-purple-700 rounded-lg text-xs font-bold">
+                                    <i data-lucide="send" class="w-3 h-3"></i>
+                                    {% trans "Sent" %}
+                                </span>
+                            {% else %}
+                                <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-slate-100 text-slate-600 rounded-lg text-xs font-bold">
+                                    <i data-lucide="circle" class="w-3 h-3"></i>
+                                    {% trans "Pending" %}
+                                </span>
+                            {% endif %}
+                        </td>
+                        <td class="px-6 py-4">
+                            <div class="text-sm text-slate">
+                                {% if sig.is_signed %}
+                                    {{ sig.signed_at|date:"M d, Y" }}
+                                    <div class="text-xs">{{ sig.signed_at|time:"H:i" }}</div>
+                                {% elif sig.sent_at %}
+                                    {{ sig.sent_at|date:"M d, Y" }}
+                                    <div class="text-xs">{{ sig.sent_at|time:"H:i" }}</div>
+                                {% else %}
+                                    -
+                                {% endif %}
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <div class="flex items-center justify-center gap-2">
+                                {% if sig.is_signed %}
+                                    {% if sig.signed_pdf %}
+                                        <a href="{{ sig.signed_pdf.url }}"
+                                           class="inline-flex items-center gap-1 px-3 py-1.5 bg-emerald-50 text-emerald-600 rounded-lg text-sm font-semibold hover:bg-emerald-100 transition">
+                                            <i data-lucide="download" class="w-4 h-4"></i>
+                                            {% trans "Download" %}
+                                        </a>
+                                    {% else %}
+                                        <a href="{% url 'accounts:simple_acknowledgements:admin_upload_pdf' sig.id %}"
+                                           class="inline-flex items-center gap-1 px-3 py-1.5 bg-amber-50 text-amber-600 rounded-lg text-sm font-semibold hover:bg-amber-100 transition">
+                                            <i data-lucide="upload" class="w-4 h-4"></i>
+                                            {% trans "Upload PDF" %}
+                                        </a>
+                                    {% endif %}
+                                {% else %}
+                                    <a href="{% url 'accounts:simple_acknowledgements:admin_upload_pdf' sig.id %}"
+                                       class="inline-flex items-center gap-1 px-3 py-1.5 bg-amber-50 text-amber-600 rounded-lg text-sm font-semibold hover:bg-amber-100 transition"
+                                       title="{% trans 'Upload signed PDF on behalf of employee' %}">
+                                        <i data-lucide="upload" class="w-4 h-4"></i>
+                                        {% trans "Upload Signed" %}
+                                    </a>
+                                {% endif %}
+                            </div>
+                        </td>
+                    </tr>
+                    {% empty %}
+                    <tr>
+                        <td colspan="5" class="px-6 py-12 text-center text-slate">
+                            <div class="flex flex-col items-center gap-3">
+                                <i data-lucide="file-x" class="w-12 h-12 text-slate-300"></i>
+                                <p class="font-medium">{% trans "No signatures yet" %}</p>
+                                <p class="text-sm">{% trans "Employees will appear here after signing acknowledgements" %}</p>
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/accounts/simple_acknowledgements/admin_upload_pdf.html b/templates/accounts/simple_acknowledgements/admin_upload_pdf.html
new file mode 100644
index 0000000..55459c7
--- /dev/null
+++ b/templates/accounts/simple_acknowledgements/admin_upload_pdf.html
@@ -0,0 +1,159 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Upload Signed PDF" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Header -->
+    <div class="flex items-center gap-3 mb-8">
+        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-600 rounded-2xl shadow-lg shadow-amber-200">
+            <i data-lucide="upload" class="w-6 h-6 text-white"></i>
+        </div>
+        <div>
+            <h1 class="text-2xl font-bold text-navy">{% trans "Upload Signed PDF" %}</h1>
+            <p class="text-slate text-sm">{% trans "Upload a signed acknowledgement on behalf of an employee" %}</p>
+        </div>
+    </div>
+
+    <div class="max-w-2xl">
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
+            <!-- Employee Info -->
+            <div class="px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-amber-50 to-transparent">
+                <div class="flex items-center gap-4">
+                    <div class="w-12 h-12 bg-blue rounded-xl flex items-center justify-center text-white font-bold text-lg">
+                        {{ employee.first_name|first|default:"U" }}{{ employee.last_name|first|default:"" }}
+                    </div>
+                    <div>
+                        <h2 class="font-bold text-navy">{{ employee.get_full_name|default:employee.email }}</h2>
+                        <p class="text-sm text-slate">{{ employee.email }}</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
+                <h3 class="font-semibold text-navy">{{ emp_ack.acknowledgement.title }}</h3>
+                {% if emp_ack.acknowledgement.description %}
+                    <p class="text-sm text-slate mt-1">{{ emp_ack.acknowledgement.description|truncatewords:30 }}</p>
+                {% endif %}
+            </div>
+
+            <form method="post" enctype="multipart/form-data" class="p-6 space-y-6">
+                {% csrf_token %}
+
+                <!-- PDF Upload -->
+                <div>
+                    <label class="block text-sm font-bold text-navy mb-2">
+                        {% trans "Signed PDF Document" %} <span class="text-red-500">*</span>
+                    </label>
+                    <div class="border-2 border-dashed border-amber-300 rounded-xl p-8 text-center hover:border-amber-500 hover:bg-amber-50/30 transition cursor-pointer"
+                         onclick="document.getElementById('pdf-upload').click()">
+                        <input type="file" id="pdf-upload" name="signed_pdf" accept=".pdf" required class="hidden"
+                               onchange="handleFileSelect(this)">
+                        <div id="upload-placeholder">
+                            <i data-lucide="file-signature" class="w-12 h-12 text-amber-400 mx-auto mb-3"></i>
+                            <p class="text-slate font-medium">{% trans "Click to upload signed PDF" %}</p>
+                            <p class="text-sm text-slate mt-1">{% trans "or drag and drop here" %}</p>
+                        </div>
+                        <div id="upload-preview" class="hidden">
+                            <i data-lucide="file-check" class="w-12 h-12 text-emerald-500 mx-auto mb-3"></i>
+                            <p class="font-medium text-navy" id="filename"></p>
+                            <p class="text-sm text-emerald-600 mt-1">{% trans "Click to change file" %}</p>
+                        </div>
+                    </div>
+                    <p class="text-xs text-slate mt-2">{% trans "Upload the PDF with the employee's signature" %}</p>
+                </div>
+
+                <!-- Signature Info -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-sm font-bold text-navy mb-2">
+                            {% trans "Signed By (Name)" %}
+                        </label>
+                        <input type="text" name="signature_name"
+                               value="{{ employee.get_full_name }}"
+                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition"
+                               placeholder="{% trans 'Name on signature' %}">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-bold text-navy mb-2">
+                            {% trans "Employee ID" %}
+                        </label>
+                        <input type="text" name="signature_employee_id"
+                               value="{{ employee.employee_id|default:'' }}"
+                               class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition"
+                               placeholder="{% trans 'Employee ID' %}">
+                    </div>
+                </div>
+
+                <!-- Notes -->
+                <div>
+                    <label class="block text-sm font-bold text-navy mb-2">
+                        {% trans "Notes" %}
+                    </label>
+                    <textarea name="notes" rows="3"
+                              class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition resize-none"
+                              placeholder="{% trans 'Any notes about this signature (optional)' %}"></textarea>
+                </div>
+
+                <!-- Actions -->
+                <div class="flex gap-3 pt-4 border-t border-slate-100">
+                    <a href="{% url 'accounts:simple_acknowledgements:admin_signatures' %}"
+                       class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-slate-100 text-slate-700 rounded-xl font-semibold hover:bg-slate-200 transition">
+                        <i data-lucide="x" class="w-5 h-5"></i>
+                        {% trans "Cancel" %}
+                    </a>
+                    <button type="submit"
+                            class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition shadow-lg shadow-amber-200">
+                        <i data-lucide="upload" class="w-5 h-5"></i>
+                        {% trans "Upload Signed PDF" %}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+function handleFileSelect(input) {
+    const placeholder = document.getElementById('upload-placeholder');
+    const preview = document.getElementById('upload-preview');
+    const filename = document.getElementById('filename');
+
+    if (input.files && input.files[0]) {
+        placeholder.classList.add('hidden');
+        preview.classList.remove('hidden');
+        filename.textContent = input.files[0].name;
+    }
+}
+
+// Drag and drop support
+const dropZone = document.querySelector('.border-dashed');
+
+dropZone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropZone.classList.add('border-amber-500', 'bg-amber-50');
+});
+
+dropZone.addEventListener('dragleave', () => {
+    dropZone.classList.remove('border-amber-500', 'bg-amber-50');
+});
+
+dropZone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('border-amber-500', 'bg-amber-50');
+
+    const files = e.dataTransfer.files;
+    if (files.length > 0 && files[0].type === 'application/pdf') {
+        document.getElementById('pdf-upload').files = files;
+        handleFileSelect(document.getElementById('pdf-upload'));
+    } else {
+        alert('{% trans "Please upload a PDF file" %}');
+    }
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/accounts/simple_acknowledgements/list.html b/templates/accounts/simple_acknowledgements/list.html
new file mode 100644
index 0000000..ea90034
--- /dev/null
+++ b/templates/accounts/simple_acknowledgements/list.html
@@ -0,0 +1,199 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "My Acknowledgements" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Page Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="clipboard-signature" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">{% trans "My Acknowledgements" %}</h1>
+                <p class="text-slate text-sm">{% trans "Review and sign required documents" %}</p>
+            </div>
+        </div>
+        <div class="flex gap-3">
+            {% if user.is_px_admin or user.is_staff %}
+            <a href="{% url 'accounts:simple_acknowledgements:admin_create' %}"
+               class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white rounded-xl font-semibold hover:from-emerald-600 hover:to-emerald-700 transition shadow-lg shadow-emerald-200">
+                <i data-lucide="plus-circle" class="w-4 h-4"></i>
+                {% trans "Create New" %}
+            </a>
+            <a href="{% url 'accounts:simple_acknowledgements:admin_list' %}"
+               class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                <i data-lucide="settings" class="w-4 h-4"></i>
+                {% trans "Manage" %}
+            </a>
+            {% endif %}
+            <div class="flex items-center gap-2 px-4 py-2 bg-emerald-100 text-emerald-700 rounded-xl font-semibold">
+                <i data-lucide="check-circle" class="w-4 h-4"></i>
+                {{ signed }} {% trans "Signed" %}
+            </div>
+            {% if pending > 0 %}
+            <div class="flex items-center gap-2 px-4 py-2 bg-orange-100 text-orange-700 rounded-xl font-semibold animate-pulse">
+                <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                {{ pending }} {% trans "Pending" %}
+            </div>
+            {% endif %}
+        </div>
+    </div>
+
+    {% if pending > 0 %}
+    <!-- Alert Banner -->
+    <div class="bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl shadow-lg shadow-orange-200 p-6 mb-8 text-white">
+        <div class="flex items-center gap-4">
+            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
+                <i data-lucide="bell" class="w-6 h-6"></i>
+            </div>
+            <div class="flex-1">
+                <h2 class="text-lg font-bold">{% trans "Action Required" %}</h2>
+                <p class="text-orange-100">
+                    {% blocktrans %}
+                    You have {{ pending }} acknowledgement(s) waiting for your signature. Please review and sign them below.
+                    {% endblocktrans %}
+                </p>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
+    <!-- Progress Card -->
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 mb-6">
+        <div class="flex justify-between items-center mb-3">
+            <span class="font-semibold text-navy">{% trans "Completion Progress" %}</span>
+            <span class="text-2xl font-bold text-blue">{{ progress }}%</span>
+        </div>
+        <div class="w-full bg-slate-200 rounded-full h-3 overflow-hidden">
+            <div class="bg-gradient-to-r from-emerald-400 to-emerald-500 h-3 rounded-full transition-all duration-500" style="width: {{ progress }}%"></div>
+        </div>
+    </div>
+
+    <!-- Pending Acknowledgements -->
+    {% if pending_acks %}
+    <div class="bg-white rounded-2xl shadow-sm border border-orange-200 overflow-hidden mb-6">
+        <div class="px-6 py-4 border-b border-orange-100 bg-gradient-to-r from-orange-50 to-transparent">
+            <h5 class="font-bold text-navy flex items-center gap-2">
+                <i data-lucide="alert-circle" class="w-5 h-5 text-orange-500"></i>
+                {% trans "Pending Signatures" %}
+                <span class="bg-orange-100 text-orange-700 px-2 py-0.5 rounded-full text-sm">{{ pending_acks|length }}</span>
+            </h5>
+        </div>
+        <div class="divide-y divide-orange-50">
+            {% for item in pending_acks %}
+            <div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4 hover:bg-orange-50/30 transition">
+                <div class="flex items-start gap-4">
+                    <div class="flex-shrink-0 mt-1">
+                        <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
+                            <i data-lucide="file-signature" class="w-6 h-6 text-orange-500"></i>
+                        </div>
+                    </div>
+                    <div>
+                        <h6 class="font-bold text-navy mb-1">{{ item.acknowledgement.title }}</h6>
+                        {% if item.acknowledgement.description %}
+                            <p class="text-sm text-slate mb-2">{{ item.acknowledgement.description|truncatewords:20 }}</p>
+                        {% endif %}
+                        <div class="flex items-center gap-3 text-sm">
+                            {% if item.sent_at %}
+                                <span class="inline-flex items-center gap-1 text-purple-600">
+                                    <i data-lucide="send" class="w-3 h-3"></i>
+                                    {% trans "Sent" %} {{ item.sent_at|date:"M d, Y" }}
+                                </span>
+                            {% endif %}
+                            {% if item.acknowledgement.is_required %}
+                                <span class="inline-flex items-center gap-1 text-red-600">
+                                    <i data-lucide="alert-triangle" class="w-3 h-3"></i>
+                                    {% trans "Required" %}
+                                </span>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+                <div class="flex gap-2">
+                    {% if item.acknowledgement.pdf_document %}
+                        <a href="{{ item.acknowledgement.pdf_document.url }}" target="_blank"
+                           class="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-700 rounded-xl font-semibold hover:bg-blue-100 transition">
+                            <i data-lucide="file-text" class="w-4 h-4"></i>
+                            {% trans "View PDF" %}
+                        </a>
+                    {% endif %}
+                    <a href="{% url 'accounts:simple_acknowledgements:sign' item.acknowledgement.id %}"
+                       class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-xl font-semibold hover:from-orange-600 hover:to-orange-700 transition shadow-lg shadow-orange-200">
+                        <i data-lucide="pen-tool" class="w-4 h-4"></i>
+                        {% trans "Sign Now" %}
+                    </a>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    {% endif %}
+
+    <!-- Completed Acknowledgements -->
+    {% if signed_acks %}
+    <div class="bg-white rounded-2xl shadow-sm border border-emerald-200 overflow-hidden">
+        <div class="px-6 py-4 border-b border-emerald-100 bg-gradient-to-r from-emerald-50 to-transparent">
+            <h5 class="font-bold text-navy flex items-center gap-2">
+                <i data-lucide="check-circle" class="w-5 h-5 text-emerald-500"></i>
+                {% trans "Completed" %}
+                <span class="bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full text-sm">{{ signed_acks|length }}</span>
+            </h5>
+        </div>
+        <div class="divide-y divide-emerald-50">
+            {% for item in signed_acks %}
+            <div class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4 hover:bg-emerald-50/30 transition opacity-75">
+                <div class="flex items-start gap-4">
+                    <div class="flex-shrink-0 mt-1">
+                        <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center">
+                            <i data-lucide="check" class="w-6 h-6 text-emerald-600"></i>
+                        </div>
+                    </div>
+                    <div>
+                        <h6 class="font-bold text-navy mb-1">{{ item.acknowledgement.title }}</h6>
+                        {% if item.acknowledgement.description %}
+                            <p class="text-sm text-slate mb-2">{{ item.acknowledgement.description|truncatewords:20 }}</p>
+                        {% endif %}
+                        <div class="flex items-center gap-2 text-sm text-emerald-600">
+                            <i data-lucide="calendar-check" class="w-4 h-4"></i>
+                            {% trans "Signed on" %} {{ item.signed_at|date:"M d, Y" }}
+                            {% if item.signature_name %}
+                                <span class="text-slate">• {{ item.signature_name }}</span>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+                <div class="flex gap-2">
+                    {% if item.has_pdf %}
+                        <a href="{{ item.signature.signed_pdf.url }}"
+                           class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-50 text-emerald-700 rounded-xl font-semibold hover:bg-emerald-100 transition">
+                            <i data-lucide="download" class="w-4 h-4"></i>
+                            {% trans "Download" %}
+                        </a>
+                    {% endif %}
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    {% endif %}
+
+    {% if not pending_acks and not signed_acks %}
+    <div class="text-center py-12">
+        <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <i data-lucide="clipboard-check" class="w-8 h-8 text-slate-400"></i>
+        </div>
+        <p class="text-slate font-medium">{% trans "No acknowledgements available at this time." %}</p>
+        <p class="text-sm text-slate mt-2">{% trans "You will be notified when new acknowledgements are assigned to you." %}</p>
+    </div>
+    {% endif %}
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/accounts/simple_acknowledgements/sign.html b/templates/accounts/simple_acknowledgements/sign.html
new file mode 100644
index 0000000..15b459a
--- /dev/null
+++ b/templates/accounts/simple_acknowledgements/sign.html
@@ -0,0 +1,133 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Sign Acknowledgement" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Header -->
+    <div class="flex items-center gap-3 mb-8">
+        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
+            <i data-lucide="file-signature" class="w-6 h-6 text-white"></i>
+        </div>
+        <div>
+            <h1 class="text-2xl font-bold text-navy">{% trans "Sign Acknowledgement" %}</h1>
+            <p class="text-slate text-sm">{% trans "Please review and sign below" %}</p>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <!-- Acknowledgement Content -->
+        <div class="lg:col-span-2">
+            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
+                <div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
+                    <h2 class="font-bold text-navy text-lg">{{ acknowledgement.title }}</h2>
+                </div>
+                <div class="p-6">
+                    {% if acknowledgement.description %}
+                        <div class="prose max-w-none text-slate mb-6">
+                            {{ acknowledgement.description|linebreaks }}
+                        </div>
+                    {% endif %}
+
+                    {% if acknowledgement.pdf_document %}
+                        <div class="bg-blue-50 border border-blue-100 rounded-xl p-4">
+                            <div class="flex items-center gap-3">
+                                <i data-lucide="file-text" class="w-8 h-8 text-blue"></i>
+                                <div class="flex-1">
+                                    <p class="font-semibold text-navy">{% trans "PDF Document" %}</p>
+                                    <p class="text-sm text-slate">{% trans "Please review the full document before signing" %}</p>
+                                </div>
+                                <a href="{{ acknowledgement.pdf_document.url }}" target="_blank"
+                                   class="inline-flex items-center gap-2 px-4 py-2 bg-blue text-white rounded-lg font-semibold hover:bg-navy transition">
+                                    <i data-lucide="external-link" class="w-4 h-4"></i>
+                                    {% trans "View PDF" %}
+                                </a>
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+        <!-- Signature Form -->
+        <div class="lg:col-span-1">
+            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden sticky top-6">
+                <div class="px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-blue to-navy">
+                    <h3 class="font-bold text-white flex items-center gap-2">
+                        <i data-lucide="pen-tool" class="w-5 h-5"></i>
+                        {% trans "Digital Signature" %}
+                    </h3>
+                </div>
+                <div class="p-6">
+                    <form method="post" class="space-y-4">
+                        {% csrf_token %}
+
+                        <div>
+                            <label class="block text-sm font-semibold text-navy mb-2">
+                                {% trans "Your Full Name" %} <span class="text-red-500">*</span>
+                            </label>
+                            <input type="text" name="signature_name" required
+                                   value="{{ request.user.get_full_name }}"
+                                   class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                                   placeholder="{% trans 'Enter your full name' %}">
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-semibold text-navy mb-2">
+                                {% trans "Employee ID" %} <span class="text-red-500">*</span>
+                            </label>
+                            <input type="text" name="signature_employee_id" required
+                                   value="{{ request.user.employee_id|default:'' }}"
+                                   class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                                   placeholder="{% trans 'Enter your employee ID' %}">
+                        </div>
+
+                        <div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
+                            <div class="flex items-start gap-3">
+                                <i data-lucide="alert-circle" class="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5"></i>
+                                <p class="text-sm text-amber-800">
+                                    {% trans "By entering your name and employee ID, you acknowledge that you have read, understood, and agree to comply with this policy." %}
+                                </p>
+                            </div>
+                        </div>
+
+                        <!-- Confirmation Checkbox -->
+                        <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
+                            <label class="flex items-start gap-3 cursor-pointer">
+                                <input type="checkbox" name="confirm" required
+                                       class="mt-1 w-5 h-5 text-blue bg-white border-slate-300 rounded focus:ring-blue focus:ring-2">
+                                <span class="text-sm text-navy font-medium">
+                                    {% trans "I confirm that I have read and understood this acknowledgement." %}
+                                    <span class="text-red-500">*</span>
+                                </span>
+                            </label>
+                        </div>
+
+                        <div class="pt-2">
+                            <button type="submit"
+                                    class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white rounded-xl font-semibold hover:from-emerald-600 hover:to-emerald-700 transition shadow-lg shadow-emerald-200">
+                                <i data-lucide="check-circle" class="w-5 h-5"></i>
+                                {% trans "Sign Acknowledgement" %}
+                            </button>
+                        </div>
+
+                        <div class="text-center">
+                            <a href="{% url 'accounts:simple_acknowledgements:employee_list' %}"
+                               class="text-sm text-slate hover:text-blue transition">
+                                {% trans "Cancel and go back" %}
+                            </a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/actions/action_detail.html b/templates/actions/action_detail.html
index a0deffb..502157e 100644
--- a/templates/actions/action_detail.html
+++ b/templates/actions/action_detail.html
@@ -2,72 +2,10 @@
 {% load i18n %}
 {% load static %}
 
-{% block title %}Action #{{ action.id|slice:":8" }} - PX360{% endblock %}
+{% block title %}{% trans "Action" %} #{{ action.id|slice:":8" }} - PX360{% endblock %}
 
 {% block extra_css %}
 <style>
-    .action-header {
-        {#background: linear-gradient(135deg, #616161 0%, #616161 100%);#}
-        {#color: white;#}
-        padding: 20px;
-        border-radius: 8px;
-        margin-bottom: 30px;
-    }
-    .sla-progress-card {
-        background: rgba(255,255,255,0.2);
-        padding: 20px;
-        border-radius: 8px;
-    }
-    .sla-progress-card.overdue {
-        background: #d32f2f;
-    }
-    .progress-custom {
-        height: 30px;
-        border-radius: 15px;
-        background: rgba(255,255,255,0.3);
-    }
-    .progress-bar-custom {
-        border-radius: 15px;
-        font-weight: 600;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    .status-badge {
-        padding: 6px 16px;
-        border-radius: 20px;
-        font-size: 0.9rem;
-        font-weight: 600;
-    }
-    .status-open { background: #e3f2fd; color: #1976d2; }
-    .status-in_progress { background: #fff3e0; color: #f57c00; }
-    .status-pending_approval { background: #fff9c4; color: #f57f17; }
-    .status-approved { background: #e8f5e9; color: #388e3c; }
-    .status-closed { background: #f5f5f5; color: #616161; }
-    .status-cancelled { background: #ffebee; color: #d32f2f; }
-    
-    .severity-badge {
-        padding: 6px 16px;
-        border-radius: 20px;
-        font-size: 0.9rem;
-        font-weight: 600;
-    }
-    .severity-low { background: #e8f5e9; color: #388e3c; }
-    .severity-medium { background: #fff3e0; color: #f57c00; }
-    .severity-high { background: #ffebee; color: #d32f2f; }
-    .severity-critical { background: #880e4f; color: #fff; }
-    
-    .source-badge {
-        padding: 6px 14px;
-        border-radius: 15px;
-        font-size: 0.85rem;
-        font-weight: 500;
-    }
-    .source-survey { background: #e1f5fe; color: #01579b; }
-    .source-complaint { background: #fce4ec; color: #880e4f; }
-    .source-social_media { background: #f3e5f5; color: #4a148c; }
-    .source-call_center { background: #e8f5e9; color: #1b5e20; }
-    
     .timeline {
         position: relative;
         padding-left: 30px;
@@ -79,11 +17,11 @@
         top: 0;
         bottom: 0;
         width: 2px;
-        background: #dee2e6;
+        background: #e2e8f0;
     }
     .timeline-item {
         position: relative;
-        padding-bottom: 30px;
+        padding-bottom: 24px;
     }
     .timeline-item::before {
         content: '';
@@ -97,581 +35,544 @@
         border: 3px solid #f57c00;
         z-index: 1;
     }
-    .timeline-item.status_change::before {
-        border-color: #1976d2;
-    }
-    .timeline-item.assignment::before {
-        border-color: #388e3c;
-    }
-    .timeline-item.escalation::before {
-        border-color: #d32f2f;
-    }
-    .timeline-item.approval::before {
-        border-color: #4caf50;
-    }
-    .timeline-item.evidence::before {
-        border-color: #ff9800;
-    }
-    
-    .evidence-card {
-        border-left: 4px solid #ff9800;
-        transition: transform 0.2s;
-    }
-    .evidence-card:hover {
-        transform: translateX(5px);
-    }
-    
-    .info-label {
-        font-weight: 600;
-        color: #6c757d;
-        font-size: 0.85rem;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-    
-    .info-value {
-        font-size: 1rem;
-        color: #212529;
-        margin-top: 4px;
-    }
-    
-    .escalation-badge {
-        background: #ff6f00;
-        color: white;
-        padding: 4px 12px;
-        border-radius: 12px;
-        font-size: 0.85rem;
-        font-weight: 600;
-    }
+    .timeline-item.status_change::before { border-color: #1e3a5f; }
+    .timeline-item.assignment::before { border-color: #388e3c; }
+    .timeline-item.escalation::before { border-color: #d32f2f; }
+    .timeline-item.approval::before { border-color: #4caf50; }
+    .timeline-item.evidence::before { border-color: #f57c00; }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-    <!-- Back Button -->
-    <div class="mb-3">
-        <a href="{% url 'actions:action_list' %}" class="btn btn-outline-secondary btn-sm">
-            <i class="bi bi-arrow-left me-1"></i> {% trans "Back to Actions" %}
-        </a>
-    </div>
+<!-- Back Button -->
+<div class="mb-6">
+    <a href="{% url 'actions:action_list' %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition font-medium">
+        <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Actions" %}
+    </a>
+</div>
 
-    <!-- Action Header -->
-    <div class="card p-2">
-        <div class="row align-items-center">
-            <div class="col-md-8">
-                <div class="d-flex align-items-center mb-2">
-                    <h3 class="mb-0 me-3">{{ action.title }}</h3>
-                    <span class="status-badge status-{{ action.status }}">
-                        {{ action.get_status_display }}
-                    </span>
-                    <span class="severity-badge severity-{{ action.severity }} ms-2">
-                        {{ action.get_severity_display }}
-                    </span>
-                    {% if action.escalation_level > 0 %}
-                    <span class="escalation-badge ms-2">
-                        <i class="bi bi-arrow-up-circle me-1"></i>Level {{ action.escalation_level }}
-                    </span>
-                    {% endif %}
-                </div>
-                <p class="mb-2">
-                    <i class="bi bi-hash me-1"></i>
-                    <strong>ID:</strong> {{ action.id|slice:":8" }}
-                    <span class="mx-2">|</span>
-                    <span class="source-badge source-{{ action.source_type }}">
-                        {{ action.get_source_type_display }}
-                    </span>
-                </p>
-                <p class="mb-0">
-                    <i class="bi bi-hospital me-1"></i>
-                    <strong>Hospital:</strong> {{ action.hospital.name_en }}
-                    {% if action.department %}
-                    <span class="mx-2">|</span>
-                    <i class="bi bi-building me-1"></i>
-                    <strong>Department:</strong> {{ action.department.name_en }}
-                    {% endif %}
-                </p>
+<!-- Action Header -->
+<div class="bg-white rounded-2xl shadow-sm border border-gray-50 p-6 mb-6">
+    <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
+        <div class="flex-1">
+            <div class="flex flex-wrap items-center gap-3 mb-3">
+                <h1 class="text-2xl font-bold text-navy">{{ action.title }}</h1>
+                {% if action.status == 'completed' %}
+                <span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-100 text-green-600">{{ action.get_status_display }}</span>
+                {% elif action.status == 'in_progress' %}
+                <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-100 text-blue-600">{{ action.get_status_display }}</span>
+                {% elif action.status == 'cancelled' %}
+                <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gray-100 text-gray-600">{{ action.get_status_display }}</span>
+                {% else %}
+                <span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-600">{{ action.get_status_display }}</span>
+                {% endif %}
+                
+                {% if action.priority == 'high' %}
+                <span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-100 text-red-600">{{ action.get_priority_display }}</span>
+                {% elif action.priority == 'medium' %}
+                <span class="px-3 py-1 rounded-full text-sm font-semibold bg-orange-100 text-orange-600">{{ action.get_priority_display }}</span>
+                {% else %}
+                <span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-100 text-green-600">{{ action.get_priority_display }}</span>
+                {% endif %}
+                
+                {% if action.escalation_level > 0 %}
+                <span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-500 text-white">
+                    <i data-lucide="arrow-up-circle" class="w-3 h-3 inline me-1"></i>Level {{ action.escalation_level }}
+                </span>
+                {% endif %}
             </div>
-            <div class="col-md-4">
-                <div class="sla-progress-card {% if action.is_overdue %}overdue{% endif %}">
-                    <div class="mb-2">
-                        <i class="bi bi-clock-history me-1"></i>
-                        <strong>SLA Progress</strong>
-                    </div>
-                    <div class="progress progress-custom mb-2">
-                        <div class="progress-bar progress-bar-custom {% if action.is_overdue %}bg-danger{% elif sla_progress > 80 %}bg-warning{% else %}bg-success{% endif %}" 
-                             style="width: {{ sla_progress }}%">
-                            {{ sla_progress }}%
-                        </div>
-                    </div>
-                    <div class="d-flex justify-content-between">
-                        <small>Due: {{ action.due_at|date:"M d, Y H:i" }}</small>
-                        {% if action.is_overdue %}
-                        <small><strong>OVERDUE</strong></small>
-                        {% else %}
-                        <small>{{ action.due_at|timeuntil }} left</small>
-                        {% endif %}
-                    </div>
+            
+            <div class="flex flex-wrap items-center gap-4 text-sm text-slate">
+                <span class="flex items-center gap-1">
+                    <i data-lucide="hash" class="w-4 h-4"></i>
+                    <strong>ID:</strong> {{ action.id|slice:":8" }}
+                </span>
+                <span class="flex items-center gap-1">
+                    <i data-lucide="building" class="w-4 h-4"></i>
+                    {{ action.hospital.name_en }}
+                </span>
+                {% if action.department %}
+                <span class="flex items-center gap-1">
+                    <i data-lucide="door-open" class="w-4 h-4"></i>
+                    {{ action.department.name_en }}
+                </span>
+                {% endif %}
+            </div>
+        </div>
+        
+        <!-- SLA Progress -->
+        <div class="lg:w-72 p-4 rounded-xl {% if action.is_overdue %}bg-red-50 border border-red-200{% else %}bg-slate-50{% endif %}">
+            <div class="flex items-center gap-2 mb-3 text-sm font-semibold text-slate">
+                <i data-lucide="clock" class="w-4 h-4"></i> {% trans "SLA Progress" %}
+            </div>
+            <div class="w-full h-6 bg-gray-200 rounded-full overflow-hidden mb-2">
+                <div class="h-full rounded-full flex items-center justify-center text-xs font-bold text-white {% if action.is_overdue %}bg-red-500{% elif sla_progress > 80 %}bg-orange-500{% else %}bg-green-500{% endif %}" style="width: {{ sla_progress }}%">
+                    {{ sla_progress }}%
                 </div>
             </div>
+            <div class="flex justify-between text-xs text-slate">
+                <span>{% trans "Due:" %} {{ action.due_at|date:"M d, Y H:i" }}</span>
+                {% if action.is_overdue %}
+                <span class="text-red-600 font-bold">{% trans "OVERDUE" %}</span>
+                {% else %}
+                <span>{{ action.due_at|timeuntil }} {% trans "left" %}</span>
+                {% endif %}
+            </div>
         </div>
     </div>
+</div>
 
-    <div class="row">
-        <!-- Main Content -->
-        <div class="col-lg-8">
-            <!-- Tabs -->
-            <ul class="nav nav-tabs mb-3" id="actionTabs" role="tablist">
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link active" id="details-tab" data-bs-toggle="tab" 
-                            data-bs-target="#details" type="button" role="tab">
-                        <i class="bi bi-info-circle me-1"></i> {% trans "Details" %}
+<div class="flex flex-col lg:flex-row gap-6">
+    <!-- Main Content -->
+    <div class="flex-1">
+        <!-- Tabs -->
+        <div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
+            <div class="border-b border-gray-100">
+                <nav class="flex gap-1 p-2" role="tablist">
+                    <button type="button" class="tab-btn active px-4 py-2 rounded-xl text-sm font-semibold transition" data-tab="details">
+                        <i data-lucide="info" class="w-4 h-4 inline me-1"></i> {% trans "Details" %}
                     </button>
-                </li>
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link" id="logs-tab" data-bs-toggle="tab" 
-                            data-bs-target="#logs" type="button" role="tab">
-                        <i class="bi bi-clock-history me-1"></i> Activity Log ({{ logs.count }})
+                    <button type="button" class="tab-btn px-4 py-2 rounded-xl text-sm font-semibold transition" data-tab="logs">
+                        <i data-lucide="history" class="w-4 h-4 inline me-1"></i> {% trans "Activity" %} ({{ logs.count }})
                     </button>
-                </li>
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link" id="evidence-tab" data-bs-toggle="tab" 
-                            data-bs-target="#evidence" type="button" role="tab">
-                        <i class="bi bi-file-earmark-check me-1"></i> Evidence ({{ evidence_attachments.count }})
+                    <button type="button" class="tab-btn px-4 py-2 rounded-xl text-sm font-semibold transition" data-tab="evidence">
+                        <i data-lucide="file-check" class="w-4 h-4 inline me-1"></i> {% trans "Evidence" %} ({{ evidence_attachments.count }})
                     </button>
-                </li>
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link" id="attachments-tab" data-bs-toggle="tab" 
-                            data-bs-target="#attachments" type="button" role="tab">
-                        <i class="bi bi-paperclip me-1"></i> Attachments ({{ attachments.count }})
+                    <button type="button" class="tab-btn px-4 py-2 rounded-xl text-sm font-semibold transition" data-tab="attachments">
+                        <i data-lucide="paperclip" class="w-4 h-4 inline me-1"></i> {% trans "Attachments" %} ({{ attachments.count }})
                     </button>
-                </li>
-            </ul>
+                </nav>
+            </div>
 
-            <!-- Tab Content -->
-            <div class="tab-content" id="actionTabsContent">
-                <!-- Details Tab -->
-                <div class="tab-pane fade show active" id="details" role="tabpanel">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title mb-4">{% trans "Action Details" %}</h5>
-                            
-                            <div class="row mb-3">
-                                <div class="col-md-6">
-                                    <div class="info-label">Category</div>
-                                    <div class="info-value">
-                                        <span class="badge bg-secondary">{{ action.get_category_display }}</span>
-                                    </div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="info-label">Priority</div>
-                                    <div class="info-value">
-                                        <span class="badge bg-info">{{ action.get_priority_display }}</span>
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <hr>
-                            
-                            <div class="mb-3">
-                                <div class="info-label">Description</div>
-                                <div class="info-value mt-2">
-                                    <p class="mb-0">{{ action.description|linebreaks }}</p>
-                                </div>
-                            </div>
-                            
-                            {% if action.action_plan %}
-                            <hr>
-                            <div class="mb-3">
-                                <div class="info-label">Action Plan</div>
-                                <div class="info-value mt-2">
-                                    <div class="alert alert-info">
-                                        {{ action.action_plan|linebreaks }}
-                                    </div>
-                                </div>
-                            </div>
-                            {% endif %}
-                            
-                            {% if action.outcome %}
-                            <hr>
-                            <div class="mb-3">
-                                <div class="info-label">Outcome</div>
-                                <div class="info-value mt-2">
-                                    <div class="alert alert-success">
-                                        {{ action.outcome|linebreaks }}
-                                    </div>
-                                </div>
-                            </div>
-                            {% endif %}
-                            
-                            <hr>
-                            
-                            <div class="row">
-                                <div class="col-md-6">
-                                    <div class="info-label">Created</div>
-                                    <div class="info-value">{{ action.created_at|date:"M d, Y H:i" }}</div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="info-label">Last Updated</div>
-                                    <div class="info-value">{{ action.updated_at|date:"M d, Y H:i" }}</div>
-                                </div>
-                            </div>
-                        </div>
+            <!-- Details Tab -->
+            <div id="tab-details" class="tab-content p-6">
+                <h3 class="text-lg font-bold text-navy mb-4">{% trans "Action Details" %}</h3>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                    <div>
+                        <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Category" %}</div>
+                        <span class="px-3 py-1 rounded-full text-sm font-medium bg-slate-100 text-slate-700">{{ action.get_category_display }}</span>
+                    </div>
+                    <div>
+                        <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Priority" %}</div>
+                        <span class="px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-700">{{ action.get_priority_display }}</span>
                     </div>
                 </div>
+                
+                <hr class="border-gray-100 mb-6">
+                
+                <div class="mb-6">
+                    <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-2">{% trans "Description" %}</div>
+                    <p class="text-gray-700 leading-relaxed">{{ action.description|linebreaks }}</p>
+                </div>
+                
+                {% if action.action_plan %}
+                <hr class="border-gray-100 mb-6">
+                <div class="mb-6">
+                    <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-2">{% trans "Action Plan" %}</div>
+                    <div class="bg-blue-50 border border-blue-100 rounded-xl p-4 text-gray-700">{{ action.action_plan|linebreaks }}</div>
+                </div>
+                {% endif %}
+                
+                {% if action.outcome %}
+                <hr class="border-gray-100 mb-6">
+                <div class="mb-6">
+                    <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-2">{% trans "Outcome" %}</div>
+                    <div class="bg-green-50 border border-green-100 rounded-xl p-4 text-gray-700">{{ action.outcome|linebreaks }}</div>
+                </div>
+                {% endif %}
+                
+                <hr class="border-gray-100 mb-6">
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Created" %}</div>
+                        <div class="text-gray-700">{{ action.created_at|date:"M d, Y H:i" }}</div>
+                    </div>
+                    <div>
+                        <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Last Updated" %}</div>
+                        <div class="text-gray-700">{{ action.updated_at|date:"M d, Y H:i" }}</div>
+                    </div>
+                </div>
+            </div>
 
-                <!-- Activity Log Tab -->
-                <div class="tab-pane fade" id="logs" role="tabpanel">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title mb-4">{% trans "Activity Log" %}</h5>
-                            
-                            {% if logs %}
-                            <div class="timeline">
-                                {% for log in logs %}
-                                <div class="timeline-item {{ log.log_type }}">
-                                    <div class="card mb-3">
-                                        <div class="card-body">
-                                            <div class="d-flex justify-content-between align-items-start mb-2">
-                                                <div>
-                                                    <span class="badge bg-primary">{{ log.get_log_type_display }}</span>
-                                                    {% if log.created_by %}
-                                                    <span class="text-muted ms-2">
-                                                        by {{ log.created_by.get_full_name }}
-                                                    </span>
-                                                    {% endif %}
-                                                </div>
-                                                <small class="text-muted">
-                                                    {{ log.created_at|date:"M d, Y H:i" }}
-                                                </small>
-                                            </div>
-                                            <p class="mb-0">{{ log.message }}</p>
-                                            {% if log.old_status and log.new_status %}
-                                            <div class="mt-2">
-                                                <span class="status-badge status-{{ log.old_status }}">
-                                                    {{ log.old_status }}
-                                                </span>
-                                                <i class="bi bi-arrow-right mx-2"></i>
-                                                <span class="status-badge status-{{ log.new_status }}">
-                                                    {{ log.new_status }}
-                                                </span>
-                                            </div>
-                                            {% endif %}
-                                        </div>
-                                    </div>
+            <!-- Activity Log Tab -->
+            <div id="tab-logs" class="tab-content p-6 hidden">
+                <h3 class="text-lg font-bold text-navy mb-4">{% trans "Activity Log" %}</h3>
+                
+                {% if logs %}
+                <div class="timeline">
+                    {% for log in logs %}
+                    <div class="timeline-item {{ log.log_type }}">
+                        <div class="bg-slate-50 rounded-xl p-4 border border-slate-100">
+                            <div class="flex justify-between items-start mb-2">
+                                <div class="flex items-center gap-2">
+                                    <span class="px-2.5 py-1 rounded-lg text-xs font-semibold bg-navy text-white">{{ log.get_log_type_display }}</span>
+                                    {% if log.created_by %}
+                                    <span class="text-xs text-slate">by {{ log.created_by.get_full_name }}</span>
+                                    {% endif %}
                                 </div>
-                                {% endfor %}
+                                <span class="text-xs text-slate">{{ log.created_at|date:"M d, Y H:i" }}</span>
                             </div>
-                            {% else %}
-                            <div class="text-center py-5">
-                                <i class="bi bi-clock-history" style="font-size: 3rem; color: #ccc;"></i>
-                                <p class="text-muted mt-3">No activity log entries yet</p>
+                            <p class="text-gray-700 text-sm">{{ log.message }}</p>
+                            {% if log.old_status and log.new_status %}
+                            <div class="mt-2 flex items-center gap-2">
+                                <span class="px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-600">{{ log.old_status }}</span>
+                                <i data-lucide="arrow-right" class="w-3 h-3 text-slate"></i>
+                                <span class="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-600">{{ log.new_status }}</span>
                             </div>
                             {% endif %}
                         </div>
                     </div>
+                    {% endfor %}
                 </div>
+                {% else %}
+                <div class="text-center py-12">
+                    <i data-lucide="history" class="w-16 h-16 mx-auto mb-4 text-gray-300"></i>
+                    <p class="text-slate">{% trans "No activity log entries yet" %}</p>
+                </div>
+                {% endif %}
+            </div>
 
-                <!-- Evidence Tab -->
-                <div class="tab-pane fade" id="evidence" role="tabpanel">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title mb-4">{% trans "Evidence Files" %}</h5>
-                            
-                            {% if evidence_attachments %}
-                            <div class="list-group mb-3">
-                                {% for evidence in evidence_attachments %}
-                                <div class="list-group-item evidence-card">
-                                    <div class="d-flex justify-content-between align-items-center">
-                                        <div>
-                                            <i class="bi bi-file-earmark-check text-warning me-2"></i>
-                                            <strong>{{ evidence.filename }}</strong>
-                                            <span class="badge bg-warning text-dark ms-2">Evidence</span>
-                                            <br>
-                                            <small class="text-muted">
-                                                Uploaded by {{ evidence.uploaded_by.get_full_name }} 
-                                                on {{ evidence.created_at|date:"M d, Y H:i" }}
-                                                ({{ evidence.file_size|filesizeformat }})
-                                            </small>
-                                            {% if evidence.description %}
-                                            <br>
-                                            <small>{{ evidence.description }}</small>
-                                            {% endif %}
-                                        </div>
-                                        <a href="{{ evidence.file.url }}" class="btn btn-sm btn-outline-primary" 
-                                           target="_blank" download>
-                                            <i class="bi bi-download"></i>
-                                        </a>
-                                    </div>
+            <!-- Evidence Tab -->
+            <div id="tab-evidence" class="tab-content p-6 hidden">
+                <h3 class="text-lg font-bold text-navy mb-4">{% trans "Evidence Files" %}</h3>
+                
+                {% if evidence_attachments %}
+                <div class="space-y-3">
+                    {% for evidence in evidence_attachments %}
+                    <div class="flex items-center justify-between p-4 bg-orange-50 border-l-4 border-orange-400 rounded-r-xl hover:translate-x-1 transition">
+                        <div class="flex items-center gap-3">
+                            <i data-lucide="file-check" class="w-5 h-5 text-orange-500"></i>
+                            <div>
+                                <div class="font-semibold text-gray-800">{{ evidence.filename }}</div>
+                                <div class="text-xs text-slate">
+                                    {% trans "Uploaded by" %} {{ evidence.uploaded_by.get_full_name }} 
+                                    {% trans "on" %} {{ evidence.created_at|date:"M d, Y H:i" }}
+                                    ({{ evidence.file_size|filesizeformat }})
                                 </div>
-                                {% endfor %}
-                            </div>
-                            {% else %}
-                            <div class="text-center py-5">
-                                <i class="bi bi-file-earmark-check" style="font-size: 3rem; color: #ccc;"></i>
-                                <p class="text-muted mt-3">No evidence files uploaded yet</p>
-                                {% if action.requires_approval and action.status != 'closed' %}
-                                <p class="text-warning">
-                                    <i class="bi bi-exclamation-triangle me-1"></i>
-                                    Evidence is required before requesting approval
-                                </p>
+                                {% if evidence.description %}
+                                <div class="text-sm text-gray-600 mt-1">{{ evidence.description }}</div>
                                 {% endif %}
                             </div>
-                            {% endif %}
                         </div>
+                        <a href="{{ evidence.file.url }}" target="_blank" class="p-2 rounded-lg bg-navy text-white hover:bg-blue transition">
+                            <i data-lucide="download" class="w-4 h-4"></i>
+                        </a>
                     </div>
+                    {% endfor %}
                 </div>
+                {% else %}
+                <div class="text-center py-12">
+                    <i data-lucide="file-check" class="w-16 h-16 mx-auto mb-4 text-gray-300"></i>
+                    <p class="text-slate mb-2">{% trans "No evidence files uploaded yet" %}</p>
+                    {% if action.requires_approval and action.status != 'closed' %}
+                    <p class="text-orange-500 text-sm">
+                        <i data-lucide="alert-triangle" class="w-4 h-4 inline me-1"></i>
+                        {% trans "Evidence is required before requesting approval" %}
+                    </p>
+                    {% endif %}
+                </div>
+                {% endif %}
+            </div>
 
-                <!-- Attachments Tab -->
-                <div class="tab-pane fade" id="attachments" role="tabpanel">
-                    <div class="card">
-                        <div class="card-body">
-                            <h5 class="card-title mb-4">{% trans "All Attachments" %}</h5>
-                            
-                            {% if attachments %}
-                            <div class="list-group">
-                                {% for attachment in attachments %}
-                                <div class="list-group-item">
-                                    <div class="d-flex justify-content-between align-items-center">
-                                        <div>
-                                            <i class="bi bi-file-earmark me-2"></i>
-                                            <strong>{{ attachment.filename }}</strong>
-                                            {% if attachment.is_evidence %}
-                                            <span class="badge bg-warning text-dark ms-2">Evidence</span>
-                                            {% endif %}
-                                            <br>
-                                            <small class="text-muted">
-                                                Uploaded by {{ attachment.uploaded_by.get_full_name }} 
-                                                on {{ attachment.created_at|date:"M d, Y H:i" }}
-                                                ({{ attachment.file_size|filesizeformat }})
-                                            </small>
-                                            {% if attachment.description %}
-                                            <br>
-                                            <small>{{ attachment.description }}</small>
-                                            {% endif %}
-                                        </div>
-                                        <a href="{{ attachment.file.url }}" class="btn btn-sm btn-outline-primary" 
-                                           target="_blank" download>
-                                            <i class="bi bi-download"></i>
-                                        </a>
-                                    </div>
+            <!-- Attachments Tab -->
+            <div id="tab-attachments" class="tab-content p-6 hidden">
+                <h3 class="text-lg font-bold text-navy mb-4">{% trans "All Attachments" %}</h3>
+                
+                {% if attachments %}
+                <div class="space-y-3">
+                    {% for attachment in attachments %}
+                    <div class="flex items-center justify-between p-4 bg-slate-50 border border-slate-100 rounded-xl hover:bg-slate-100 transition">
+                        <div class="flex items-center gap-3">
+                            <i data-lucide="file" class="w-5 h-5 text-slate"></i>
+                            <div>
+                                <div class="font-semibold text-gray-800">
+                                    {{ attachment.filename }}
+                                    {% if attachment.is_evidence %}
+                                    <span class="ms-2 px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-600">{% trans "Evidence" %}</span>
+                                    {% endif %}
+                                </div>
+                                <div class="text-xs text-slate">
+                                    {% trans "Uploaded by" %} {{ attachment.uploaded_by.get_full_name }} 
+                                    {% trans "on" %} {{ attachment.created_at|date:"M d, Y H:i" }}
+                                    ({{ attachment.file_size|filesizeformat }})
                                 </div>
-                                {% endfor %}
                             </div>
-                            {% else %}
-                            <div class="text-center py-5">
-                                <i class="bi bi-paperclip" style="font-size: 3rem; color: #ccc;"></i>
-                                <p class="text-muted mt-3">No attachments</p>
-                            </div>
-                            {% endif %}
                         </div>
+                        <a href="{{ attachment.file.url }}" target="_blank" class="p-2 rounded-lg bg-navy text-white hover:bg-blue transition">
+                            <i data-lucide="download" class="w-4 h-4"></i>
+                        </a>
                     </div>
+                    {% endfor %}
                 </div>
+                {% else %}
+                <div class="text-center py-12">
+                    <i data-lucide="paperclip" class="w-16 h-16 mx-auto mb-4 text-gray-300"></i>
+                    <p class="text-slate">{% trans "No attachments" %}</p>
+                </div>
+                {% endif %}
             </div>
         </div>
+    </div>
 
-        <!-- Sidebar Actions -->
-        <div class="col-lg-4">
-            <!-- Approval Required -->
-            {% if action.status == 'pending_approval' and can_approve %}
-            <div class="card mb-3 border-success">
-                <div class="card-header bg-success text-white">
-                    <h6 class="mb-0"><i class="bi bi-check-circle me-2"></i>{% trans "Approval Required" %}</h6>
-                </div>
-                <div class="card-body">
-                    <p class="mb-3">This action is awaiting your approval.</p>
-                    <form method="post" action="{% url 'actions:action_approve' action.id %}">
-                        {% csrf_token %}
-                        <button type="submit" class="btn btn-success w-100">
-                            <i class="bi bi-check-circle me-1"></i> Approve Action
-                        </button>
-                    </form>
-                </div>
+    <!-- Sidebar -->
+    <div class="lg:w-80 space-y-4">
+        <!-- Approval Required -->
+        {% if action.status == 'pending_approval' and can_approve %}
+        <div class="bg-green-50 border border-green-200 rounded-2xl overflow-hidden">
+            <div class="px-4 py-3 bg-green-500 text-white">
+                <h3 class="font-bold flex items-center gap-2">
+                    <i data-lucide="check-circle" class="w-4 h-4"></i> {% trans "Approval Required" %}
+                </h3>
             </div>
-            {% endif %}
-            
-            <!-- Quick Actions -->
-            {% if can_edit %}
-            <div class="card mb-3">
-                <div class="card-header bg-primary text-white">
-                    <h6 class="mb-0"><i class="bi bi-lightning-fill me-2"></i>{% trans "Quick Actions" %}</h6>
-                </div>
-                <div class="card-body">
-                    <!-- Assign -->
-                    <form method="post" action="{% url 'actions:action_assign' action.id %}" class="mb-3">
-                        {% csrf_token %}
-                        <label class="form-label">{% trans "Assign To" %}</label>
-                        <div class="input-group">
-                            <select name="user_id" class="form-select" required>
-                                <option value="">Select user...</option>
-                                {% for user_obj in assignable_users %}
-                                <option value="{{ user_obj.id }}" 
-                                        {% if action.assigned_to and action.assigned_to.id == user_obj.id %}selected{% endif %}>
-                                    {{ user_obj.get_full_name }}
-                                </option>
-                                {% endfor %}
-                            </select>
-                            <button type="submit" class="btn btn-primary">
-                                <i class="bi bi-person-check"></i>
-                            </button>
-                        </div>
-                    </form>
-                    
-                    <!-- Change Status -->
-                    <form method="post" action="{% url 'actions:action_change_status' action.id %}" class="mb-3">
-                        {% csrf_token %}
-                        <label class="form-label">{% trans "Change Status" %}</label>
-                        <select name="status" class="form-select mb-2" required>
-                            {% for value, label in status_choices %}
-                            <option value="{{ value }}" {% if action.status == value %}selected{% endif %}>
-                                {{ label }}
+            <div class="p-4">
+                <p class="text-sm text-slate mb-3">{% trans "This action is awaiting your approval." %}</p>
+                <form method="post" action="{% url 'actions:action_approve' action.id %}">
+                    {% csrf_token %}
+                    <button type="submit" class="w-full bg-green-500 text-white px-4 py-2.5 rounded-xl font-semibold hover:bg-green-600 transition flex items-center justify-center gap-2">
+                        <i data-lucide="check-circle" class="w-4 h-4"></i> {% trans "Approve Action" %}
+                    </button>
+                </form>
+            </div>
+        </div>
+        {% endif %}
+        
+        <!-- Quick Actions -->
+        {% if can_edit %}
+        <div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
+            <div class="px-4 py-3 bg-navy text-white">
+                <h3 class="font-bold flex items-center gap-2">
+                    <i data-lucide="zap" class="w-4 h-4"></i> {% trans "Quick Actions" %}
+                </h3>
+            </div>
+            <div class="p-4 space-y-4">
+                <!-- Assign -->
+                <form method="post" action="{% url 'actions:action_assign' action.id %}">
+                    {% csrf_token %}
+                    <label class="block text-xs font-semibold text-slate uppercase tracking-wide mb-2">{% trans "Assign To" %}</label>
+                    <div class="flex gap-2">
+                        <select name="user_id" class="flex-1 px-3 py-2 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent" required>
+                            <option value="">{% trans "Select user..." %}</option>
+                            {% for user_obj in assignable_users %}
+                            <option value="{{ user_obj.id }}" {% if action.assigned_to and action.assigned_to.id == user_obj.id %}selected{% endif %}>
+                                {{ user_obj.get_full_name }}
                             </option>
                             {% endfor %}
                         </select>
-                        <textarea name="note" class="form-control mb-2" rows="2" 
-                                  placeholder="{% trans 'Optional note...' %}"></textarea>
-                        <button type="submit" class="btn btn-primary w-100">
-                            <i class="bi bi-arrow-repeat me-1"></i> Update Status
+                        <button type="submit" class="px-3 py-2 bg-navy text-white rounded-xl hover:bg-blue transition">
+                            <i data-lucide="user-check" class="w-4 h-4"></i>
                         </button>
-                    </form>
-                    
-                    <!-- Escalate -->
-                    <button type="button" class="btn btn-danger w-100" data-bs-toggle="modal" 
-                            data-bs-target="#escalateModal">
-                        <i class="bi bi-arrow-up-circle me-1"></i> Escalate
+                    </div>
+                </form>
+                
+                <!-- Change Status -->
+                <form method="post" action="{% url 'actions:action_change_status' action.id %}">
+                    {% csrf_token %}
+                    <label class="block text-xs font-semibold text-slate uppercase tracking-wide mb-2">{% trans "Change Status" %}</label>
+                    <select name="status" class="w-full px-3 py-2 border border-gray-200 rounded-xl text-sm mb-2 focus:ring-2 focus:ring-navy focus:border-transparent" required>
+                        {% for value, label in status_choices %}
+                        <option value="{{ value }}" {% if action.status == value %}selected{% endif %}>{{ label }}</option>
+                        {% endfor %}
+                    </select>
+                    <textarea name="note" class="w-full px-3 py-2 border border-gray-200 rounded-xl text-sm mb-2 focus:ring-2 focus:ring-navy focus:border-transparent" rows="2" placeholder="{% trans 'Optional note...' %}"></textarea>
+                    <button type="submit" class="w-full bg-navy text-white px-4 py-2.5 rounded-xl font-semibold hover:bg-blue transition flex items-center justify-center gap-2">
+                        <i data-lucide="refresh-cw" class="w-4 h-4"></i> {% trans "Update Status" %}
                     </button>
-                </div>
+                </form>
+                
+                <!-- Escalate -->
+                <button type="button" onclick="document.getElementById('escalateModal').classList.remove('hidden')" class="w-full bg-red-500 text-white px-4 py-2.5 rounded-xl font-semibold hover:bg-red-600 transition flex items-center justify-center gap-2">
+                    <i data-lucide="arrow-up-circle" class="w-4 h-4"></i> {% trans "Escalate" %}
+                </button>
             </div>
-            {% endif %}
-            
-            <!-- Add Note -->
-            <div class="card mb-3">
-                <div class="card-header bg-success text-white">
-                    <h6 class="mb-0"><i class="bi bi-chat-left-text me-2"></i>{% trans "Add Note" %}</h6>
-                </div>
-                <div class="card-body">
-                    <form method="post" action="{% url 'actions:action_add_note' action.id %}">
-                        {% csrf_token %}
-                        <textarea name="note" class="form-control mb-2" rows="3" 
-                                  placeholder="{% trans 'Enter your note...' %}" required></textarea>
-                        <button type="submit" class="btn btn-success w-100">
-                            <i class="bi bi-plus-circle me-1"></i> Add Note
-                        </button>
-                    </form>
-                </div>
+        </div>
+        {% endif %}
+        
+        <!-- Convert to QI Project -->
+        {% if user.is_px_admin or user.is_hospital_admin or user.is_department_manager %}
+        <div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
+            <div class="px-4 py-3 bg-blue-500 text-white">
+                <h3 class="font-bold flex items-center gap-2">
+                    <i data-lucide="kanban" class="w-4 h-4"></i> {% trans "QI Project" %}
+                </h3>
             </div>
-            
-            <!-- Assignment Info -->
-            <div class="card mb-3">
-                <div class="card-header">
-                    <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>{% trans "Assignment Info" %}</h6>
-                </div>
-                <div class="card-body">
-                    <div class="mb-3">
-                        <div class="info-label">Assigned To</div>
-                        <div class="info-value">
-                            {% if action.assigned_to %}
-                            {{ action.assigned_to.get_full_name }}
-                            <br>
-                            <small class="text-muted">
-                                Assigned {{ action.assigned_at|date:"M d, Y H:i" }}
-                            </small>
-                            {% else %}
-                            <span class="text-muted">Unassigned</span>
-                            {% endif %}
-                        </div>
-                    </div>
-                    
-                    {% if action.approved_by %}
-                    <div class="mb-3">
-                        <div class="info-label">Approved By</div>
-                        <div class="info-value">
-                            {{ action.approved_by.get_full_name }}
-                            <br>
-                            <small class="text-muted">
-                                {{ action.approved_at|date:"M d, Y H:i" }}
-                            </small>
-                        </div>
-                    </div>
-                    {% endif %}
-                    
-                    {% if action.closed_by %}
-                    <div class="mb-0">
-                        <div class="info-label">Closed By</div>
-                        <div class="info-value">
-                            {{ action.closed_by.get_full_name }}
-                            <br>
-                            <small class="text-muted">
-                                {{ action.closed_at|date:"M d, Y H:i" }}
-                            </small>
-                        </div>
-                    </div>
+            <div class="p-4">
+                {% if action.qi_projects.exists %}
+                <p class="text-sm text-slate mb-2">{% trans "Linked to:" %}</p>
+                <ul class="space-y-2 mb-3">
+                    {% for project in action.qi_projects.all %}
+                    <li>
+                        <a href="{% url 'projects:project_detail' pk=project.pk %}" class="flex items-center gap-2 text-navy hover:underline">
+                            <i data-lucide="link" class="w-4 h-4"></i>{{ project.name }}
+                        </a>
+                    </li>
+                    {% endfor %}
+                </ul>
+                {% else %}
+                <p class="text-sm text-slate mb-3">
+                    {% trans "Convert this action to a QI project for long-term tracking." %}
+                </p>
+                {% endif %}
+                <a href="{% url 'projects:convert_action' action_pk=action.pk %}" 
+                   class="w-full {% if action.qi_projects.exists %}bg-gray-300 text-gray-500 cursor-not-allowed{% else %}bg-blue-500 text-white hover:bg-blue-600{% endif %} px-4 py-2.5 rounded-xl font-semibold transition flex items-center justify-center gap-2">
+                    <i data-lucide="arrow-right-circle" class="w-4 h-4"></i> 
+                    {% if action.qi_projects.exists %}{% trans "Already Converted" %}{% else %}{% trans "Convert to Project" %}{% endif %}
+                </a>
+            </div>
+        </div>
+        {% endif %}
+        
+        <!-- Add Note -->
+        <div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
+            <div class="px-4 py-3 bg-green-500 text-white">
+                <h3 class="font-bold flex items-center gap-2">
+                    <i data-lucide="message-square" class="w-4 h-4"></i> {% trans "Add Note" %}
+                </h3>
+            </div>
+            <div class="p-4">
+                <form method="post" action="{% url 'actions:action_add_note' action.id %}">
+                    {% csrf_token %}
+                    <textarea name="note" class="w-full px-3 py-2 border border-gray-200 rounded-xl text-sm mb-2 focus:ring-2 focus:ring-navy focus:border-transparent" rows="3" placeholder="{% trans 'Enter your note...' %}" required></textarea>
+                    <button type="submit" class="w-full bg-green-500 text-white px-4 py-2.5 rounded-xl font-semibold hover:bg-green-600 transition flex items-center justify-center gap-2">
+                        <i data-lucide="plus-circle" class="w-4 h-4"></i> {% trans "Add Note" %}
+                    </button>
+                </form>
+            </div>
+        </div>
+        
+        <!-- Assignment Info -->
+        <div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
+            <div class="px-4 py-3 border-b border-gray-100">
+                <h3 class="font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="info" class="w-4 h-4"></i> {% trans "Assignment Info" %}
+                </h3>
+            </div>
+            <div class="p-4 space-y-4">
+                <div>
+                    <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Assigned To" %}</div>
+                    {% if action.assigned_to %}
+                    <div class="font-medium text-gray-800">{{ action.assigned_to.get_full_name }}</div>
+                    <div class="text-xs text-slate">{% trans "Assigned" %} {{ action.assigned_at|date:"M d, Y H:i" }}</div>
+                    {% else %}
+                    <div class="text-slate">{% trans "Unassigned" %}</div>
                     {% endif %}
                 </div>
-            </div>
-            
-            <!-- SLA Info -->
-            <div class="card">
-                <div class="card-header bg-warning text-dark">
-                    <h6 class="mb-0"><i class="bi bi-clock-history me-2"></i>{% trans "SLA Information" %}</h6>
+                
+                {% if action.approved_by %}
+                <div>
+                    <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Approved By" %}</div>
+                    <div class="font-medium text-gray-800">{{ action.approved_by.get_full_name }}</div>
+                    <div class="text-xs text-slate">{{ action.approved_at|date:"M d, Y H:i" }}</div>
                 </div>
-                <div class="card-body">
-                    <div class="mb-2">
-                        <strong>Due Date:</strong><br>
-                        <span class="{% if action.is_overdue %}text-danger{% endif %}">
-                            {{ action.due_at|date:"M d, Y H:i" }}
-                        </span>
+                {% endif %}
+                
+                {% if action.closed_by %}
+                <div>
+                    <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Closed By" %}</div>
+                    <div class="font-medium text-gray-800">{{ action.closed_by.get_full_name }}</div>
+                    <div class="text-xs text-slate">{{ action.closed_at|date:"M d, Y H:i" }}</div>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+        
+        <!-- SLA Info -->
+        <div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
+            <div class="px-4 py-3 bg-orange-500 text-white">
+                <h3 class="font-bold flex items-center gap-2">
+                    <i data-lucide="clock" class="w-4 h-4"></i> {% trans "SLA Information" %}
+                </h3>
+            </div>
+            <div class="p-4 space-y-3">
+                <div>
+                    <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Due Date" %}</div>
+                    <div class="{% if action.is_overdue %}text-red-600 font-bold{% else %}text-gray-800{% endif %}">
+                        {{ action.due_at|date:"M d, Y H:i" }}
                     </div>
-                    {% if action.escalated_at %}
-                    <div class="mb-2">
-                        <strong>Escalated:</strong><br>
+                </div>
+                {% if action.escalated_at %}
+                <div>
+                    <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Escalated" %}</div>
+                    <div class="flex items-center gap-2">
                         {{ action.escalated_at|date:"M d, Y H:i" }}
-                        <span class="badge bg-danger ms-1">Level {{ action.escalation_level }}</span>
+                        <span class="px-2 py-0.5 rounded text-xs font-bold bg-red-100 text-red-600">Level {{ action.escalation_level }}</span>
                     </div>
-                    {% endif %}
-                    {% if action.reminder_sent_at %}
-                    <div class="mb-0">
-                        <strong>Reminder Sent:</strong><br>
-                        {{ action.reminder_sent_at|date:"M d, Y H:i" }}
-                    </div>
-                    {% endif %}
                 </div>
+                {% endif %}
+                {% if action.reminder_sent_at %}
+                <div>
+                    <div class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Reminder Sent" %}</div>
+                    <div class="text-gray-800">{{ action.reminder_sent_at|date:"M d, Y H:i" }}</div>
+                </div>
+                {% endif %}
             </div>
         </div>
     </div>
 </div>
 
 <!-- Escalate Modal -->
-<div class="modal fade" id="escalateModal" tabindex="-1">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <form method="post" action="{% url 'actions:action_escalate' action.id %}">
-                {% csrf_token %}
-                <div class="modal-header">
-                    <h5 class="modal-title">{% trans "Escalate Action" %}</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+<div id="escalateModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
+    <div class="bg-white rounded-2xl shadow-xl max-w-md w-full">
+        <form method="post" action="{% url 'actions:action_escalate' action.id %}">
+            {% csrf_token %}
+            <div class="p-4 border-b border-gray-100">
+                <h3 class="text-lg font-bold text-navy">{% trans "Escalate Action" %}</h3>
+            </div>
+            <div class="p-4">
+                <div class="bg-orange-50 border border-orange-200 rounded-xl p-3 mb-4 text-sm text-orange-700">
+                    <i data-lucide="alert-triangle" class="w-4 h-4 inline me-2"></i>
+                    {% trans "This will escalate the action to the next level." %}
+                    {% if action.escalation_level > 0 %}
+                    {% trans "Current level:" %} {{ action.escalation_level }}
+                    {% endif %}
                 </div>
-                <div class="modal-body">
-                    <div class="alert alert-warning">
-                        <i class="bi bi-exclamation-triangle me-2"></i>
-                        This will escalate the action to the next level.
-                        {% if action.escalation_level > 0 %}
-                        Current level: {{ action.escalation_level }}
-                        {% endif %}
-                    </div>
-                    <div class="mb-3">
-                        <label class="form-label">{% trans "Reason for Escalation" %}</label>
-                        <textarea name="reason" class="form-control" rows="3" 
-                                  placeholder="{% trans 'Explain why this action needs escalation...' %}" required></textarea>
-                    </div>
+                <div>
+                    <label class="block text-xs font-semibold text-slate uppercase tracking-wide mb-2">{% trans "Reason for Escalation" %}</label>
+                    <textarea name="reason" class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-navy focus:border-transparent" rows="3" placeholder="{% trans 'Explain why this action needs escalation...' %}" required></textarea>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
-                    <button type="submit" class="btn btn-danger">
-                        <i class="bi bi-arrow-up-circle me-1"></i> Escalate
-                    </button>
-                </div>
-            </form>
-        </div>
+            </div>
+            <div class="p-4 border-t border-gray-100 flex justify-end gap-3">
+                <button type="button" onclick="document.getElementById('escalateModal').classList.add('hidden')" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-xl font-semibold hover:bg-gray-200 transition">
+                    {% trans "Cancel" %}
+                </button>
+                <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded-xl font-semibold hover:bg-red-600 transition flex items-center gap-2">
+                    <i data-lucide="arrow-up-circle" class="w-4 h-4"></i> {% trans "Escalate" %}
+                </button>
+            </div>
+        </form>
     </div>
 </div>
-{% endblock %}
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Tab switching
+    const tabBtns = document.querySelectorAll('.tab-btn');
+    tabBtns.forEach(btn => {
+        btn.addEventListener('click', function() {
+            // Update button styles
+            tabBtns.forEach(b => {
+                b.classList.remove('bg-navy', 'text-white');
+                b.classList.add('text-slate', 'hover:bg-gray-100');
+            });
+            this.classList.add('bg-navy', 'text-white');
+            this.classList.remove('text-slate', 'hover:bg-gray-100');
+            
+            // Show/hide content
+            const tabId = this.dataset.tab;
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.add('hidden');
+            });
+            document.getElementById('tab-' + tabId).classList.remove('hidden');
+        });
+    });
+    
+    // Initialize first tab as active
+    const firstTab = document.querySelector('.tab-btn');
+    if (firstTab) {
+        firstTab.classList.add('bg-navy', 'text-white');
+        firstTab.classList.remove('text-slate', 'hover:bg-gray-100');
+    }
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/actions/action_list.html b/templates/actions/action_list.html
index a552d3e..17350d2 100644
--- a/templates/actions/action_list.html
+++ b/templates/actions/action_list.html
@@ -7,17 +7,27 @@
 <div class="mb-8">
     <div class="flex justify-between items-center">
         <div>
-            <h1 class="text-3xl font-bold text-gray-800 mb-2">{% trans "Action Plans" %}</h1>
-            <p class="text-gray-400">{% trans "Manage improvement action plans" %}</p>
+            <h1 class="text-3xl font-bold text-navy mb-2 flex items-center gap-3">
+                <i data-lucide="check-circle-2" class="w-8 h-8 text-orange-500"></i>
+                {% trans "Action Plans" %}
+            </h1>
+            <p class="text-slate">{% trans "Manage improvement action plans" %}</p>
         </div>
-        <a href="{% url 'actions:action_create' %}" class="bg-light0 text-white px-6 py-3 rounded-2xl font-bold flex items-center gap-2 shadow-lg shadow-blue-200 hover:bg-navy transition">
+        <a href="{% url 'actions:action_create' %}" class="bg-navy text-white px-6 py-3 rounded-2xl font-bold flex items-center gap-2 shadow-lg shadow-blue-200 hover:bg-blue transition">
             <i data-lucide="plus" class="w-5 h-5"></i> {% trans "Create Action Plan" %}
         </a>
     </div>
 </div>
 
 <!-- Filters -->
-<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-50 mb-6">
+<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 mb-6">
+    <div class="px-6 py-4 border-b-2 border-slate-200 flex justify-between items-center bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-gray-800 flex items-center gap-2">
+            <i data-lucide="filter" class="w-5 h-5 text-navy"></i>
+            {% trans "Filters" %}
+        </h3>
+    </div>
+    <div class="p-6">
     <form method="get" class="grid grid-cols-1 md:grid-cols-4 gap-4">
         <div class="md:col-span-2">
             <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Search" %}</label>
@@ -44,7 +54,7 @@
         </div>
         <div class="md:col-span-2 flex items-end">
             <div class="flex gap-2 w-full">
-                <button type="submit" class="flex-1 bg-light0 text-white px-4 py-3 rounded-xl font-semibold hover:bg-navy transition flex items-center justify-center gap-2">
+                <button type="submit" class="flex-1 bg-navy text-white px-4 py-3 rounded-xl font-semibold hover:bg-blue transition flex items-center justify-center gap-2">
                     <i data-lucide="search" class="w-4 h-4"></i> {% trans "Filter" %}
                 </button>
                 <a href="{% url 'actions:action_list' %}" class="bg-gray-100 text-gray-600 px-4 py-3 rounded-xl font-semibold hover:bg-gray-200 transition flex items-center justify-center gap-2">
@@ -53,6 +63,7 @@
             </div>
         </div>
     </form>
+    </div>
 </div>
 
 <!-- Action Plans Grid -->
@@ -115,7 +126,7 @@
             <i data-lucide="check-square" class="w-16 h-16 mx-auto mb-4 text-gray-300"></i>
             <h3 class="text-xl font-bold text-gray-800 mb-2">{% trans "No Action Plans Found" %}</h3>
             <p class="text-gray-500 mb-6">{% trans "Get started by creating your first action plan" %}</p>
-            <a href="{% url 'actions:action_create' %}" class="inline-flex items-center gap-2 bg-light0 text-white px-6 py-3 rounded-2xl font-bold shadow-lg shadow-blue-200 hover:bg-navy transition">
+            <a href="{% url 'actions:action_create' %}" class="inline-flex items-center gap-2 bg-navy text-white px-6 py-3 rounded-2xl font-bold shadow-lg shadow-blue-200 hover:bg-blue transition">
                 <i data-lucide="plus" class="w-5 h-5"></i> {% trans "Create Action Plan" %}
             </a>
         </div>
@@ -133,7 +144,7 @@
         </a>
         {% endif %}
         
-        <span class="px-4 py-2 bg-light0 text-white rounded-xl text-sm font-bold">
+        <span class="px-4 py-2 bg-navy text-white rounded-xl text-sm font-bold">
             {% blocktrans with current=page_obj.number total=page_obj.paginator.num_pages %}Page {{ current }} of {{ total }}{% endblocktrans %}
         </span>
         
diff --git a/templates/analytics/dashboard.html b/templates/analytics/dashboard.html
index c23b8d9..8c72fc7 100644
--- a/templates/analytics/dashboard.html
+++ b/templates/analytics/dashboard.html
@@ -6,6 +6,7 @@
 
 {% block extra_css %}
 <style>
+    /* PX360 App Theme Variables */
     :root {
         --hh-navy: #005696;
         --hh-blue: #007bbd;
@@ -14,24 +15,21 @@
         --hh-success: #10b981;
         --hh-warning: #f59e0b;
         --hh-danger: #ef4444;
-        --hh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-        --hh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-        --hh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     }
 
     /* Page Header */
-    .page-header {
+    .page-header-gradient {
         background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
         color: white;
         padding: 2rem 2.5rem;
         border-radius: 1rem;
         margin-bottom: 2rem;
-        box-shadow: var(--hh-shadow-lg);
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
         position: relative;
         overflow: hidden;
     }
 
-    .page-header::before {
+    .page-header-gradient::before {
         content: '';
         position: absolute;
         top: 0;
@@ -39,500 +37,670 @@
         width: 200px;
         height: 200px;
         background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-        pointer-events: none;
     }
 
-    .page-header h1 {
-        font-size: 2rem;
-        font-weight: 700;
-        margin-bottom: 0.75rem;
-        letter-spacing: -0.025em;
+    /* Section Cards */
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
     }
 
-    .page-header p {
-        color: rgba(255,255,255,0.9);
-        font-size: 1rem;
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .section-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 
     /* KPI Cards */
     .kpi-card {
         background: white;
         border-radius: 1rem;
-        padding: 1.5rem;
-        box-shadow: var(--hh-shadow-md);
-        border: 1px solid #e2e8f0;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        border: 2px solid #e2e8f0;
+        padding: 1.25rem;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s ease;
         height: 100%;
-        position: relative;
-        overflow: hidden;
     }
-
-    .kpi-card::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 4px;
-        transition: opacity 0.3s ease;
-    }
-
-    .kpi-card.primary::before {
-        background: linear-gradient(90deg, var(--hh-navy), var(--hh-blue));
-    }
-
-    .kpi-card.danger::before {
-        background: linear-gradient(90deg, #dc2626, #ef4444);
-    }
-
-    .kpi-card.warning::before {
-        background: linear-gradient(90deg, #d97706, #f59e0b);
-    }
-
-    .kpi-card.success::before {
-        background: linear-gradient(90deg, #059669, #10b981);
-    }
-
     .kpi-card:hover {
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-        transform: translateY(-4px);
-    }
-
-    .kpi-card:hover::before {
-        opacity: 1;
+        transform: translateY(-2px);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        border-color: #005696;
     }
 
     .kpi-icon {
-        width: 56px;
-        height: 56px;
-        border-radius: 1rem;
+        width: 48px;
+        height: 48px;
+        border-radius: 0.75rem;
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-bottom: 1rem;
-        position: relative;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        transition: transform 0.3s ease;
-    }
-
-    .kpi-card:hover .kpi-icon {
-        transform: scale(1.1) rotate(3deg);
-    }
-
-    .kpi-icon.bg-navy {
-        background: linear-gradient(135deg, #005696, #007bbd);
-        color: white;
-    }
-
-    .kpi-icon.bg-danger {
-        background: linear-gradient(135deg, #dc2626, #ef4444);
-        color: white;
-    }
-
-    .kpi-icon.bg-warning {
-        background: linear-gradient(135deg, #f59e0b, #fbbf24);
-        color: white;
-    }
-
-    .kpi-icon.bg-success {
-        background: linear-gradient(135deg, #10b981, #34d399);
-        color: white;
     }
 
     .kpi-value {
-        font-size: 2rem;
+        font-size: 1.75rem;
         font-weight: 800;
         color: #1e293b;
-        margin-bottom: 0.25rem;
-        line-height: 1;
     }
 
     .kpi-label {
-        color: #64748b;
-        font-size: 0.875rem;
+        font-size: 0.8rem;
         font-weight: 600;
+        color: #64748b;
         text-transform: uppercase;
         letter-spacing: 0.025em;
-        margin-bottom: 0.25rem;
-    }
-
-    .kpi-subtitle {
-        color: #94a3b8;
-        font-size: 0.75rem;
     }
 
     /* Chart Cards */
     .chart-card {
         background: white;
         border-radius: 1rem;
-        border: 1px solid #e2e8f0;
+        border: 2px solid #e2e8f0;
         overflow: hidden;
-        box-shadow: var(--hh-shadow-md);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
         transition: all 0.3s ease;
     }
-
     .chart-card:hover {
-        box-shadow: var(--hh-shadow-lg);
+        border-color: #005696;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
     }
 
-    .chart-card .card-header {
-        background: linear-gradient(135deg, var(--hh-light), #e0f2fe);
-        padding: 1.25rem 1.75rem;
-        border-bottom: 1px solid #bae6fd;
-    }
-
-    .chart-card .card-header h5 {
-        color: var(--hh-navy);
-        font-weight: 700;
+    .chart-header {
+        background: linear-gradient(135deg, #f8fafc, #eef6fb);
+        padding: 1rem 1.25rem;
+        border-bottom: 2px solid #e2e8f0;
         display: flex;
         align-items: center;
-        gap: 0.75rem;
-        font-size: 1.1rem;
+        gap: 0.5rem;
+    }
+
+    .chart-header h3 {
+        color: #005696;
+        font-weight: 700;
         margin: 0;
     }
 
-    /* Form Select - PX360 Style */
-    .form-select {
-        border: 1px solid #cbd5e1;
-        border-radius: 0.5rem;
-        padding: 0.625rem 0.875rem;
-        font-size: 0.875rem;
-        transition: all 0.2s;
+    /* Form Styling - PX360 Theme */
+    .form-select-px360 {
         background: white;
-        min-width: 200px;
-    }
-
-    .form-select:focus {
-        border-color: var(--hh-blue);
-        box-shadow: 0 0 0 3px rgba(0, 123, 189, 0.1);
-        outline: none;
-    }
-
-    /* List Items */
-    .list-item {
-        padding: 1rem 1.25rem;
-        border-bottom: 1px solid #f1f5f9;
-        transition: background-color 0.2s ease;
-    }
-
-    .list-item:last-child {
-        border-bottom: none;
-    }
-
-    .list-item:hover {
-        background-color: var(--hh-light);
-    }
-
-    .dept-rank {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-    }
-
-    .rank-badge {
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: 700;
-        font-size: 0.875rem;
-    }
-
-    .rank-badge.gold {
-        background: linear-gradient(135deg, #fbbf24, #f59e0b);
-        color: white;
-    }
-
-    .rank-badge.silver {
-        background: linear-gradient(135deg, #94a3b8, #64748b);
-        color: white;
-    }
-
-    .rank-badge.bronze {
-        background: linear-gradient(135deg, #d97706, #b45309);
-        color: white;
-    }
-
-    .rank-badge.default {
-        background: #e2e8f0;
-        color: #64748b;
-    }
-
-    /* Attention Items */
-    .attention-item {
-        padding: 1rem 1.25rem;
+        border: 2px solid #e2e8f0;
         border-radius: 0.75rem;
-        margin-bottom: 0.75rem;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+        padding: 0.625rem 1rem;
+        color: #1e293b;
+        font-size: 0.875rem;
+        min-width: 200px;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+    .form-select-px360:hover {
+        border-color: #005696;
+    }
+    .form-select-px360:focus {
+        outline: none;
+        border-color: #005696;
+        box-shadow: 0 0 0 3px rgba(0, 86, 150, 0.1);
     }
 
-    .attention-item.danger {
-        background: linear-gradient(135deg, #fef2f2, #fee2e2);
-        border: 1px solid #fecaca;
+    /* Data Tables */
+    .data-table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+    .data-table th {
+        background: #f8fafc;
+        border-bottom: 2px solid #e2e8f0;
+        padding: 0.875rem 1rem;
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: #64748b;
+        text-align: left;
+    }
+    .data-table td {
+        border-bottom: 1px solid #e2e8f0;
+        padding: 0.875rem 1rem;
+        color: #1e293b;
+    }
+    .data-table tr:hover td {
+        background: #f8fafc;
     }
 
-    .attention-item.warning {
-        background: linear-gradient(135deg, #fffbeb, #fef3c7);
-        border: 1px solid #fde68a;
+    /* Status Badges */
+    .badge {
+        padding: 0.25rem 0.75rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 600;
     }
+    .badge-blue { background: #dbeafe; color: #1d4ed8; }
+    .badge-green { background: #d1fae5; color: #047857; }
+    .badge-orange { background: #fef3c7; color: #b45309; }
+    .badge-red { background: #fee2e2; color: #b91c1c; }
+    .badge-purple { background: #f3e8ff; color: #7c3aed; }
 
-    .attention-item.success {
-        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
-        border: 1px solid #bbf7d0;
+    /* Progress Bars */
+    .progress-bar {
+        height: 8px;
+        border-radius: 4px;
+        background: #e2e8f0;
+        overflow: hidden;
     }
-
-    .attention-value {
-        font-size: 1.5rem;
-        font-weight: 800;
-    }
-
-    .attention-value.text-danger {
-        color: #dc2626;
-    }
-
-    .attention-value.text-warning {
-        color: #d97706;
-    }
-
-    /* Empty State */
-    .empty-state {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 3rem 1.5rem;
-        text-align: center;
-    }
-
-    .empty-state-icon {
-        width: 80px;
-        height: 80px;
-        background: linear-gradient(135deg, var(--hh-light), #e0f2fe);
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 1.5rem;
-        color: var(--hh-blue);
+    .progress-fill {
+        height: 100%;
+        border-radius: 4px;
+        transition: width 0.5s ease;
     }
 
     /* Animations */
     @keyframes fadeIn {
-        from {
-            opacity: 0;
-            transform: translateY(20px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
     }
-
     .animate-in {
-        animation: fadeIn 0.5s ease-out forwards;
+        animation: fadeIn 0.4s ease-out forwards;
     }
+    .delay-100 { animation-delay: 100ms; }
+    .delay-200 { animation-delay: 200ms; }
+    .delay-300 { animation-delay: 300ms; }
+    .delay-400 { animation-delay: 400ms; }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="px-4 py-6">
+<div class="px-4 py-6 max-w-[1600px] mx-auto">
+    
     <!-- Page Header -->
-    <div class="page-header">
-        <h1>
-            <i data-lucide="bar-chart-2" class="w-8 h-8 inline-block me-2"></i>
-            {% trans "Analytics & KPIs" %}
-        </h1>
-        <p class="mb-0">{% trans "Monitor key performance indicators and trends" %}</p>
-    </div>
-
-    <!-- Hospital Filter -->
-    <div class="flex justify-end mb-4">
-        <select class="form-select" onchange="window.location.href='?hospital='+this.value">
-            <option value="">{% trans "All Hospitals" %}</option>
-            {% for hospital in hospitals %}
-            <option value="{{ hospital.id }}" {% if selected_hospital and selected_hospital.id == hospital.id %}selected{% endif %}>
-                {{ hospital.name_en }}
-            </option>
-            {% endfor %}
-        </select>
-    </div>
-
-    <!-- KPI Cards -->
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-        <div class="kpi-card primary animate-in">
-            <div class="flex items-start justify-between">
-                <div>
-                    <p class="kpi-label">{% trans "Total Complaints" %}</p>
-                    <p class="kpi-value">{{ kpis.total_complaints }}</p>
-                    <p class="kpi-subtitle">
-                        <span class="text-green-500 font-semibold">{% trans "Open:" %} {{ kpis.open_complaints }}</span>
-                    </p>
-                </div>
-                <div class="kpi-icon bg-navy">
-                    <i data-lucide="message-square" class="w-6 h-6"></i>
-                </div>
+    <div class="page-header-gradient animate-in">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 relative z-10">
+            <div>
+                <h1 class="text-2xl font-bold flex items-center gap-3">
+                    <i data-lucide="bar-chart-3" class="w-8 h-8"></i>
+                    {% trans "Analytics Dashboard" %}
+                </h1>
+                <p class="mt-1 opacity-90">{% trans "Comprehensive overview of patient experience metrics" %}</p>
             </div>
-        </div>
-
-        <div class="kpi-card danger animate-in">
-            <div class="flex items-start justify-between">
-                <div>
-                    <p class="kpi-label">{% trans "Overdue Complaints" %}</p>
-                    <p class="kpi-value text-danger">{{ kpis.overdue_complaints }}</p>
-                    <p class="kpi-subtitle">{% trans "Requires attention" %}</p>
-                </div>
-                <div class="kpi-icon bg-danger">
-                    <i data-lucide="alert-circle" class="w-6 h-6"></i>
-                </div>
-            </div>
-        </div>
-
-        <div class="kpi-card warning animate-in">
-            <div class="flex items-start justify-between">
-                <div>
-                    <p class="kpi-label">{% trans "Total Actions" %}</p>
-                    <p class="kpi-value">{{ kpis.total_actions }}</p>
-                    <p class="kpi-subtitle">
-                        <span class="text-blue-500 font-semibold">{% trans "Open:" %} {{ kpis.open_actions }}</span>
-                    </p>
-                </div>
-                <div class="kpi-icon bg-warning">
-                    <i data-lucide="check-square" class="w-6 h-6"></i>
-                </div>
-            </div>
-        </div>
-
-        <div class="kpi-card success animate-in">
-            <div class="flex items-start justify-between">
-                <div>
-                    <p class="kpi-label">{% trans "Avg Survey Score" %}</p>
-                    <p class="kpi-value">{{ kpis.avg_survey_score|floatformat:1 }}<span class="text-lg text-slate-400">/5.0</span></p>
-                    <p class="kpi-subtitle">
-                        <span class="text-red-500 font-semibold">{% trans "Negative:" %} {{ kpis.negative_surveys }}</span>
-                    </p>
-                </div>
-                <div class="kpi-icon bg-success">
-                    <i data-lucide="smile" class="w-6 h-6"></i>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Department Rankings and Attention Areas -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <!-- Top Performing Departments -->
-        <div class="chart-card">
-            <div class="card-header">
-                <h5>
-                    <i data-lucide="trophy" class="w-5 h-5"></i>
-                    {% trans "Top Performing Departments" %}
-                </h5>
-            </div>
-            <div class="p-0">
-                {% if department_rankings %}
-                <div class="divide-y divide-slate-100">
-                    {% for dept in department_rankings %}
-                    <div class="list-item">
-                        <div class="flex items-center justify-between">
-                            <div class="dept-rank">
-                                <span class="rank-badge {% if forloop.counter == 1 %}gold{% elif forloop.counter == 2 %}silver{% elif forloop.counter == 3 %}bronze{% else %}default{% endif %}">
-                                    {{ forloop.counter }}
-                                </span>
-                                <div>
-                                    <p class="font-semibold text-slate-800">{{ dept.name_en }}</p>
-                                    <p class="text-xs text-slate-500">{% trans "Surveys:" %} {{ dept.survey_count }}</p>
-                                </div>
-                            </div>
-                            <div class="text-right">
-                                <p class="text-2xl font-bold text-green-600 mb-0">{{ dept.avg_score|floatformat:1 }}</p>
-                                <p class="text-xs text-slate-500 mb-0">{% trans "Avg Score" %}</p>
-                            </div>
-                        </div>
-                    </div>
+            <div class="flex items-center gap-3">
+                <select class="form-select-px360" onchange="window.location.href='?hospital='+this.value">
+                    <option value="">{% trans "All Hospitals" %}</option>
+                    {% for hospital in hospitals %}
+                    <option value="{{ hospital.id }}" {% if selected_hospital and selected_hospital.id == hospital.id %}selected{% endif %}>
+                        {{ hospital.name_en }}
+                    </option>
                     {% endfor %}
-                </div>
-                {% else %}
-                <div class="empty-state">
-                    <div class="empty-state-icon">
-                        <i data-lucide="trophy" class="w-10 h-10"></i>
-                    </div>
-                    <p class="text-slate-500 mb-0">{% trans "No data available" %}</p>
-                </div>
-                {% endif %}
-            </div>
-        </div>
-
-        <!-- Areas Needing Attention -->
-        <div class="chart-card">
-            <div class="card-header">
-                <h5>
-                    <i data-lucide="alert-triangle" class="w-5 h-5"></i>
-                    {% trans "Areas Needing Attention" %}
-                </h5>
-            </div>
-            <div class="p-4">
-                {% if kpis.overdue_complaints > 0 or kpis.overdue_actions > 0 or kpis.negative_surveys > 0 %}
-                
-                    {% if kpis.overdue_complaints > 0 %}
-                    <div class="attention-item danger">
-                        <div>
-                            <p class="font-bold text-danger mb-1">
-                                <i data-lucide="clock" class="w-4 h-4 inline-block me-1"></i>
-                                {% trans "Overdue Complaints" %}
-                            </p>
-                            <p class="text-sm text-slate-600 mb-0">{% trans "Requires immediate action" %}</p>
-                        </div>
-                        <p class="attention-value text-danger">{{ kpis.overdue_complaints }}</p>
-                    </div>
-                    {% endif %}
-
-                    {% if kpis.overdue_actions > 0 %}
-                    <div class="attention-item warning">
-                        <div>
-                            <p class="font-bold text-warning mb-1">
-                                <i data-lucide="calendar-x" class="w-4 h-4 inline-block me-1"></i>
-                                {% trans "Overdue Actions" %}
-                            </p>
-                            <p class="text-sm text-slate-600 mb-0">{% trans "SLA breached" %}</p>
-                        </div>
-                        <p class="attention-value text-warning">{{ kpis.overdue_actions }}</p>
-                    </div>
-                    {% endif %}
-
-                    {% if kpis.negative_surveys > 0 %}
-                    <div class="attention-item danger">
-                        <div>
-                            <p class="font-bold text-danger mb-1">
-                                <i data-lucide="frown" class="w-4 h-4 inline-block me-1"></i>
-                                {% trans "Negative Surveys" %}
-                            </p>
-                            <p class="text-sm text-slate-600 mb-0">{% trans "Low satisfaction scores" %}</p>
-                        </div>
-                        <p class="attention-value text-danger">{{ kpis.negative_surveys }}</p>
-                    </div>
-                    {% endif %}
-
-                {% else %}
-                <div class="empty-state">
-                    <div class="empty-state-icon" style="background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #10b981;">
-                        <i data-lucide="check-circle" class="w-10 h-10"></i>
-                    </div>
-                    <p class="text-green-600 font-semibold mb-0">{% trans "All metrics on target!" %}</p>
-                </div>
-                {% endif %}
+                </select>
+                <button onclick="refreshDashboard()" class="p-2.5 bg-white/20 hover:bg-white/30 rounded-xl transition" title="{% trans 'Refresh' %}">
+                    <i data-lucide="refresh-cw" class="w-5 h-5 text-white"></i>
+                </button>
             </div>
         </div>
     </div>
+
+    <!-- KPI Grid Row 1 -->
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
+        <!-- Total Complaints -->
+        <div class="kpi-card animate-in">
+            <div class="flex items-start justify-between mb-3">
+                <div class="kpi-icon" style="background: linear-gradient(135deg, #fee2e2, #fecaca);">
+                    <i data-lucide="message-square-warning" class="w-5 h-5 text-red-600"></i>
+                </div>
+                <span class="badge badge-red">{{ kpis.open_complaints }} {% trans "open" %}</span>
+            </div>
+            <p class="kpi-value">{{ kpis.total_complaints }}</p>
+            <p class="kpi-label mt-1">{% trans "Total Complaints" %}</p>
+        </div>
+
+        <!-- Resolution Rate -->
+        <div class="kpi-card animate-in delay-100">
+            <div class="flex items-start justify-between mb-3">
+                <div class="kpi-icon" style="background: linear-gradient(135deg, #d1fae5, #a7f3d0);">
+                    <i data-lucide="check-circle" class="w-5 h-5 text-emerald-600"></i>
+                </div>
+            </div>
+            <p class="kpi-value">{{ kpis.sla_compliance }}%</p>
+            <p class="kpi-label mt-1">{% trans "SLA Compliance" %}</p>
+        </div>
+
+        <!-- Avg Resolution -->
+        <div class="kpi-card animate-in delay-200">
+            <div class="flex items-start justify-between mb-3">
+                <div class="kpi-icon" style="background: linear-gradient(135deg, #f3e8ff, #e9d5ff);">
+                    <i data-lucide="clock" class="w-5 h-5 text-purple-600"></i>
+                </div>
+            </div>
+            <p class="kpi-value">{{ kpis.avg_resolution_hours }}h</p>
+            <p class="kpi-label mt-1">{% trans "Avg Resolution" %}</p>
+        </div>
+
+        <!-- Total Actions -->
+        <div class="kpi-card animate-in delay-300">
+            <div class="flex items-start justify-between mb-3">
+                <div class="kpi-icon" style="background: linear-gradient(135deg, #fef3c7, #fde68a);">
+                    <i data-lucide="zap" class="w-5 h-5 text-orange-600"></i>
+                </div>
+                <span class="badge badge-orange">{{ kpis.open_actions }} {% trans "open" %}</span>
+            </div>
+            <p class="kpi-value">{{ kpis.total_actions }}</p>
+            <p class="kpi-label mt-1">{% trans "Total Actions" %}</p>
+        </div>
+
+        <!-- Survey Score -->
+        <div class="kpi-card animate-in delay-400">
+            <div class="flex items-start justify-between mb-3">
+                <div class="kpi-icon" style="background: linear-gradient(135deg, #dbeafe, #bfdbfe);">
+                    <i data-lucide="star" class="w-5 h-5 text-blue-600"></i>
+                </div>
+            </div>
+            <p class="kpi-value">{{ kpis.avg_survey_score }}</p>
+            <p class="kpi-label mt-1">{% trans "Avg Survey Score" %}</p>
+        </div>
+
+        <!-- NPS Score -->
+        <div class="kpi-card animate-in">
+            <div class="flex items-start justify-between mb-3">
+                <div class="kpi-icon" style="background: linear-gradient(135deg, #005696, #007bbd);">
+                    <i data-lucide="thumbs-up" class="w-5 h-5 text-white"></i>
+                </div>
+            </div>
+            <p class="kpi-value">{{ kpis.nps_score }}</p>
+            <p class="kpi-label mt-1">{% trans "NPS Score" %}</p>
+        </div>
+    </div>
+
+    <!-- Charts Section: Complaints -->
+    <div class="section-card mb-6 animate-in delay-100">
+        <div class="section-header">
+            <div class="section-icon" style="background: linear-gradient(135deg, #fee2e2, #fecaca);">
+                <i data-lucide="message-square-warning" class="w-6 h-6 text-red-600"></i>
+            </div>
+            <div>
+                <h2 class="text-xl font-bold text-navy">{% trans "Complaints Analytics" %}</h2>
+                <p class="text-sm text-slate">{% trans "Status, sources, and severity breakdown" %}</p>
+            </div>
+        </div>
+
+        <div class="p-6">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <!-- Status Distribution -->
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <i data-lucide="pie-chart" class="w-5 h-5 text-navy"></i>
+                        <h3>{% trans "Status Distribution" %}</h3>
+                    </div>
+                    <div class="p-4">
+                        <canvas id="complaintStatusChart" class="h-64 w-full"></canvas>
+                    </div>
+                </div>
+
+                <!-- Sources -->
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <i data-lucide="git-branch" class="w-5 h-5 text-navy"></i>
+                        <h3>{% trans "Complaint Sources" %}</h3>
+                    </div>
+                    <div class="p-4">
+                        <canvas id="complaintSourcesChart" class="h-64 w-full"></canvas>
+                    </div>
+                </div>
+
+                <!-- Severity -->
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <i data-lucide="alert-triangle" class="w-5 h-5 text-navy"></i>
+                        <h3>{% trans "Severity Levels" %}</h3>
+                    </div>
+                    <div class="p-4">
+                        <canvas id="severityChart" class="h-64 w-full"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Charts Section: Actions -->
+    <div class="section-card mb-6 animate-in delay-200">
+        <div class="section-header">
+            <div class="section-icon" style="background: linear-gradient(135deg, #fef3c7, #fde68a);">
+                <i data-lucide="zap" class="w-6 h-6 text-orange-600"></i>
+            </div>
+            <div>
+                <h2 class="text-xl font-bold text-navy">{% trans "PX Actions Analytics" %}</h2>
+                <p class="text-sm text-slate">{% trans "Action status and categories" %}</p>
+            </div>
+        </div>
+
+        <div class="p-6">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <!-- Action Status -->
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <i data-lucide="layers" class="w-5 h-5 text-navy"></i>
+                        <h3>{% trans "Action Status" %}</h3>
+                    </div>
+                    <div class="p-4">
+                        <canvas id="actionStatusChart" class="h-64 w-full"></canvas>
+                    </div>
+                </div>
+
+                <!-- Action Categories -->
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <i data-lucide="tag" class="w-5 h-5 text-navy"></i>
+                        <h3>{% trans "Action Categories" %}</h3>
+                    </div>
+                    <div class="p-4">
+                        <canvas id="actionCategoriesChart" class="h-64 w-full"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Charts Section: Surveys -->
+    <div class="section-card mb-6 animate-in delay-300">
+        <div class="section-header">
+            <div class="section-icon" style="background: linear-gradient(135deg, #f3e8ff, #e9d5ff);">
+                <i data-lucide="clipboard-check" class="w-6 h-6 text-purple-600"></i>
+            </div>
+            <div>
+                <h2 class="text-xl font-bold text-navy">{% trans "Survey Analytics" %}</h2>
+                <p class="text-sm text-slate">{% trans "Patient satisfaction and NPS trends" %}</p>
+            </div>
+        </div>
+
+        <div class="p-6">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <!-- NPS Card -->
+                <div class="chart-card flex flex-col justify-center items-center">
+                    <div class="chart-header w-full">
+                        <i data-lucide="thumbs-up" class="w-5 h-5 text-navy"></i>
+                        <h3>{% trans "Net Promoter Score" %}</h3>
+                    </div>
+                    <div class="p-6 text-center">
+                        <div class="text-6xl font-bold text-purple-600 mb-2">{{ kpis.nps_score }}</div>
+                        <div class="text-sm text-slate mb-4">{% trans "Industry Avg: +32" %}</div>
+                        <div class="w-full bg-slate-200 h-2 rounded-full overflow-hidden" style="width: 200px;">
+                            {% widthratio kpis.nps_score|add:100 2 1 as nps_width %}
+                            <div class="bg-purple-500 h-full" style="width: {{ nps_width }}%"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Score Trend -->
+                <div class="chart-card lg:col-span-2">
+                    <div class="chart-header">
+                        <i data-lucide="trending-up" class="w-5 h-5 text-navy"></i>
+                        <h3>{% trans "Survey Score Trend" %}</h3>
+                    </div>
+                    <div class="p-4">
+                        <canvas id="surveyTrendChart" class="h-64 w-full"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Department Performance Table -->
+    <div class="section-card animate-in delay-400">
+        <div class="section-header">
+            <div class="section-icon" style="background: linear-gradient(135deg, #dbeafe, #bfdbfe);">
+                <i data-lucide="building-2" class="w-6 h-6 text-blue-600"></i>
+            </div>
+            <div>
+                <h2 class="text-xl font-bold text-navy">{% trans "Department Performance" %}</h2>
+                <p class="text-sm text-slate">{% trans "Performance metrics by department" %}</p>
+            </div>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>{% trans "Department" %}</th>
+                        <th class="text-center">{% trans "Complaints" %}</th>
+                        <th class="text-center">{% trans "Actions" %}</th>
+                        <th class="text-center">{% trans "Survey Avg" %}</th>
+                        <th class="text-center">{% trans "Resolution Rate" %}</th>
+                        <th class="text-center">{% trans "Status" %}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for dept in department_stats %}
+                    <tr>
+                        <td class="font-medium text-navy">{{ dept.name }}</td>
+                        <td class="text-center">{{ dept.complaints }}</td>
+                        <td class="text-center">{{ dept.actions }}</td>
+                        <td class="text-center">{{ dept.survey_avg }}</td>
+                        <td class="text-center">
+                            <div class="flex items-center justify-center gap-2">
+                                <div class="progress-bar" style="width: 60px;">
+                                    <div class="progress-fill {% if dept.resolution_rate >= 80 %}bg-emerald-500{% elif dept.resolution_rate >= 60 %}bg-blue-500{% else %}bg-orange-500{% endif %}" style="width: {{ dept.resolution_rate }}%"></div>
+                                </div>
+                                <span class="text-sm">{{ dept.resolution_rate }}%</span>
+                            </div>
+                        </td>
+                        <td class="text-center">
+                            {% if dept.resolution_rate >= 80 %}
+                            <span class="badge badge-green">{% trans "Excellent" %}</span>
+                            {% elif dept.resolution_rate >= 60 %}
+                            <span class="badge badge-blue">{% trans "Good" %}</span>
+                            {% else %}
+                            <span class="badge badge-orange">{% trans "Needs Work" %}</span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    {% empty %}
+                    <tr>
+                        <td colspan="6" class="text-center py-8 text-slate">
+                            {% trans "No department data available" %}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+
 </div>
 
 <script>
-    // Initialize Lucide icons on page load
-    document.addEventListener('DOMContentLoaded', function() {
-        lucide.createIcons();
-    });
+function refreshDashboard() {
+    const icon = document.querySelector('[data-lucide="refresh-cw"]');
+    icon.classList.add('animate-spin');
+    setTimeout(() => {
+        window.location.reload();
+    }, 500);
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+    
+    // Initialize charts
+    initCharts();
+});
+
+function initCharts() {
+    // Chart.js defaults
+    if (typeof Chart === 'undefined') return;
+    
+    Chart.defaults.color = '#64748b';
+    Chart.defaults.borderColor = '#e2e8f0';
+
+    // 1. Complaint Status Chart
+    const statusCtx = document.getElementById('complaintStatusChart');
+    if (statusCtx) {
+        new Chart(statusCtx, {
+            type: 'doughnut',
+            data: {
+                labels: ['Open', 'In Progress', 'Resolved', 'Closed'],
+                datasets: [{
+                    data: [{{ kpis.open_complaints|default:0 }}, {{ kpis.in_progress_complaints|default:0 }}, {{ kpis.resolved_complaints|default:0 }}, {{ kpis.closed_complaints|default:0 }}],
+                    backgroundColor: ['#f59e0b', '#3b82f6', '#10b981', '#64748b'],
+                    borderColor: '#ffffff',
+                    borderWidth: 2
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: { position: 'bottom', labels: { padding: 15, usePointStyle: true } }
+                }
+            }
+        });
+    }
+
+    // 2. Complaint Sources Chart
+    const sourcesCtx = document.getElementById('complaintSourcesChart');
+    if (sourcesCtx) {
+        new Chart(sourcesCtx, {
+            type: 'pie',
+            data: {
+                labels: ['Internal', 'External', 'Walk-in', 'Phone', 'Email', 'Web'],
+                datasets: [{
+                    data: [{{ kpis.internal_complaints|default:0 }}, {{ kpis.external_complaints|default:0 }}, {{ kpis.walkin_complaints|default:0 }}, {{ kpis.phone_complaints|default:0 }}, {{ kpis.email_complaints|default:0 }}, {{ kpis.web_complaints|default:0 }}],
+                    backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'],
+                    borderColor: '#ffffff',
+                    borderWidth: 2
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: { position: 'bottom', labels: { padding: 10, usePointStyle: true, boxWidth: 10 } }
+                }
+            }
+        });
+    }
+
+    // 3. Severity Chart
+    const severityCtx = document.getElementById('severityChart');
+    if (severityCtx) {
+        new Chart(severityCtx, {
+            type: 'bar',
+            data: {
+                labels: ['Critical', 'High', 'Medium', 'Low'],
+                datasets: [{
+                    label: 'Complaints',
+                    data: [{{ kpis.critical_complaints|default:0 }}, {{ kpis.high_complaints|default:0 }}, {{ kpis.medium_complaints|default:0 }}, {{ kpis.low_complaints|default:0 }}],
+                    backgroundColor: ['#ef4444', '#f97316', '#f59e0b', '#10b981'],
+                    borderRadius: 6
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
+                    x: { grid: { display: false } }
+                }
+            }
+        });
+    }
+
+    // 4. Action Status Chart
+    const actionStatusCtx = document.getElementById('actionStatusChart');
+    if (actionStatusCtx) {
+        new Chart(actionStatusCtx, {
+            type: 'doughnut',
+            data: {
+                labels: ['Open', 'In Progress', 'Pending Approval', 'Closed'],
+                datasets: [{
+                    data: [{{ kpis.open_actions|default:0 }}, {{ kpis.in_progress_actions|default:0 }}, {{ kpis.pending_actions|default:0 }}, {{ kpis.closed_actions|default:0 }}],
+                    backgroundColor: ['#3b82f6', '#f59e0b', '#8b5cf6', '#10b981'],
+                    borderColor: '#ffffff',
+                    borderWidth: 2
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: { position: 'bottom', labels: { padding: 15, usePointStyle: true } }
+                }
+            }
+        });
+    }
+
+    // 5. Action Categories Chart
+    const actionCatCtx = document.getElementById('actionCategoriesChart');
+    if (actionCatCtx) {
+        new Chart(actionCatCtx, {
+            type: 'bar',
+            data: {
+                labels: ['Training', 'Process', 'Policy', 'Facility', 'Other'],
+                datasets: [{
+                    label: 'Actions',
+                    data: [{{ kpis.training_actions|default:0 }}, {{ kpis.process_actions|default:0 }}, {{ kpis.policy_actions|default:0 }}, {{ kpis.facility_actions|default:0 }}, {{ kpis.other_actions|default:0 }}],
+                    backgroundColor: '#3b82f6',
+                    borderRadius: 6
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
+                    x: { grid: { display: false } }
+                }
+            }
+        });
+    }
+
+    // 6. Survey Trend Chart
+    const surveyCtx = document.getElementById('surveyTrendChart');
+    if (surveyCtx) {
+        new Chart(surveyCtx, {
+            type: 'line',
+            data: {
+                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+                datasets: [{
+                    label: 'Survey Score',
+                    data: [{{ kpis.survey_trend_1|default:4.2 }}, {{ kpis.survey_trend_2|default:4.3 }}, {{ kpis.survey_trend_3|default:4.1 }}, {{ kpis.survey_trend_4|default:4.4 }}, {{ kpis.survey_trend_5|default:4.5 }}, {{ kpis.survey_trend_6|default:kpis.avg_survey_score }}],
+                    borderColor: '#8b5cf6',
+                    backgroundColor: 'rgba(139, 92, 246, 0.1)',
+                    fill: true,
+                    tension: 0.4,
+                    pointRadius: 4,
+                    pointBackgroundColor: '#8b5cf6'
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    y: { beginAtZero: false, min: 1, max: 5, grid: { color: '#e2e8f0' } },
+                    x: { grid: { display: false } }
+                }
+            }
+        });
+    }
+}
 </script>
 {% endblock %}
+
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+{% endblock %}
diff --git a/templates/appreciation/appreciation_list.html b/templates/appreciation/appreciation_list.html
index d522a22..1df8f29 100644
--- a/templates/appreciation/appreciation_list.html
+++ b/templates/appreciation/appreciation_list.html
@@ -1,325 +1,299 @@
 {% extends "layouts/base.html" %}
 {% load i18n static %}
 
-{% block title %}{% trans "Appreciation" %} - {% endblock %}
+{% block title %}{% trans "Appreciation" %} - PX360{% endblock %}
 
 {% block content %}
-<div class="container-fluid py-4">
-    <!-- Page Header -->
-    <div class="row mb-4">
-        <div class="col-12">
-            <div class="card shadow-sm">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <div>
-                            <h2 class="h4 mb-0">
-                                <i class="bi bi-heart-fill text-danger me-2"></i>
-                                {% trans "Appreciation" %}
-                            </h2>
-                            <p class="text-muted mb-0 mt-2">
-                                {% trans "Send appreciation to colleagues and celebrate achievements" %}
-                            </p>
-                        </div>
-                        <a href="{% url 'appreciation:appreciation_send' %}" class="btn btn-primary">
-                            <i class="bi bi-send me-2"></i>
-                            {% trans "Send Appreciation" %}
-                        </a>
-                    </div>
-                </div>
+<!-- Header -->
+<header class="mb-6">
+    <div class="flex justify-between items-start">
+        <div>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="heart" class="w-7 h-7 text-rose-500"></i>
+                {% trans "Appreciation" %}
+            </h1>
+            <p class="text-sm text-slate mt-1">{% trans "Send appreciation to colleagues and celebrate achievements" %}</p>
+        </div>
+        <a href="{% url 'appreciation:appreciation_send' %}" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
+            <i data-lucide="send" class="w-4 h-4"></i> {% trans "Send Appreciation" %}
+        </a>
+    </div>
+</header>
+
+<!-- Stats Cards -->
+<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+    <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100">
+        <div class="flex items-center gap-4">
+            <div class="p-3 bg-blue-50 rounded-xl">
+                <i data-lucide="inbox" class="w-6 h-6 text-blue-500"></i>
+            </div>
+            <div>
+                <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Received" %}</p>
+                <p class="text-2xl font-black text-navy" id="receivedCount">{{ stats.received }}</p>
             </div>
         </div>
     </div>
-
-    <!-- Stats Cards -->
-    <div class="row mb-4">
-        <div class="col-md-3">
-            <div class="card shadow-sm border-0">
-                <div class="card-body">
-                    <div class="d-flex align-items-center">
-                        <div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3">
-                            <i class="bi bi-inbox text-primary fa-lg"></i>
-                        </div>
-                        <div>
-                            <h6 class="text-muted mb-1">{% trans "Received" %}</h6>
-                            <h3 class="mb-0" id="receivedCount">{{ stats.received }}</h3>
-                        </div>
-                    </div>
-                </div>
+    <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100">
+        <div class="flex items-center gap-4">
+            <div class="p-3 bg-green-50 rounded-xl">
+                <i data-lucide="send" class="w-6 h-6 text-green-500"></i>
             </div>
-        </div>
-        <div class="col-md-3">
-            <div class="card shadow-sm border-0">
-                <div class="card-body">
-                    <div class="d-flex align-items-center">
-                        <div class="bg-success bg-opacity-10 p-3 rounded-circle me-3">
-                            <i class="bi bi-send text-success fa-lg"></i>
-                        </div>
-                        <div>
-                            <h6 class="text-muted mb-1">{% trans "Sent" %}</h6>
-                            <h3 class="mb-0" id="sentCount">{{ stats.sent }}</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-3">
-            <div class="card shadow-sm border-0">
-                <div class="card-body">
-                    <div class="d-flex align-items-center">
-                        <div class="bg-warning bg-opacity-10 p-3 rounded-circle me-3">
-                            <i class="bi bi-award text-warning fa-lg"></i>
-                        </div>
-                        <div>
-                            <h6 class="text-muted mb-1">{% trans "Badges Earned" %}</h6>
-                            <h3 class="mb-0" id="badgesCount">{{ stats.badges_earned }}</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-3">
-            <div class="card shadow-sm border-0">
-                <div class="card-body">
-                    <div class="d-flex align-items-center">
-                        <div class="bg-info bg-opacity-10 p-3 rounded-circle me-3">
-                            <i class="bi bi-trophy text-info fa-lg"></i>
-                        </div>
-                        <div>
-                            <h6 class="text-muted mb-1">{% trans "Leaderboard" %}</h6>
-                            <a href="{% url 'appreciation:leaderboard_view' %}" class="btn btn-sm btn-outline-info">
-                                <i class="bi bi-arrow-right me-1"></i>
-                                {% trans "View" %}
-                            </a>
-                        </div>
-                    </div>
-                </div>
+            <div>
+                <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Sent" %}</p>
+                <p class="text-2xl font-black text-navy" id="sentCount">{{ stats.sent }}</p>
             </div>
         </div>
     </div>
-
-    <!-- Quick Actions -->
-    <div class="row mb-4">
-        <div class="col-md-4">
-            <a href="{% url 'appreciation:leaderboard_view' %}" class="text-decoration-none">
-                <div class="card shadow-sm border-warning mb-3">
-                    <div class="card-body">
-                        <div class="d-flex align-items-center">
-                            <div class="bg-warning bg-opacity-10 p-3 rounded-circle me-3">
-                                <i class="bi bi-trophy text-warning fa-lg"></i>
-                            </div>
-                            <div>
-                                <h6 class="mb-0">{% trans "Leaderboard" %}</h6>
-                                <small class="text-muted">{% trans "See top performers" %}</small>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </a>
-        </div>
-        <div class="col-md-4">
-            <a href="{% url 'appreciation:my_badges_view' %}" class="text-decoration-none">
-                <div class="card shadow-sm border-primary mb-3">
-                    <div class="card-body">
-                        <div class="d-flex align-items-center">
-                            <div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3">
-                                <i class="bi bi-award text-primary fa-lg"></i>
-                            </div>
-                            <div>
-                                <h6 class="mb-0">{% trans "My Badges" %}</h6>
-                                <small class="text-muted">{% trans "View earned badges" %}</small>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </a>
-        </div>
-        <div class="col-md-4">
-            <a href="{% url 'appreciation:appreciation_send' %}" class="text-decoration-none">
-                <div class="card shadow-sm border-success mb-3">
-                    <div class="card-body">
-                        <div class="d-flex align-items-center">
-                            <div class="bg-success bg-opacity-10 p-3 rounded-circle me-3">
-                                <i class="bi bi-send text-success fa-lg"></i>
-                            </div>
-                            <div>
-                                <h6 class="mb-0">{% trans "Send Appreciation" %}</h6>
-                                <small class="text-muted">{% trans "Share appreciation" %}</small>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </a>
+    <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100">
+        <div class="flex items-center gap-4">
+            <div class="p-3 bg-amber-50 rounded-xl">
+                <i data-lucide="award" class="w-6 h-6 text-amber-500"></i>
+            </div>
+            <div>
+                <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Badges Earned" %}</p>
+                <p class="text-2xl font-black text-navy" id="badgesCount">{{ stats.badges_earned }}</p>
+            </div>
         </div>
     </div>
-
-    <!-- Filter Bar -->
-    <div class="card shadow-sm mb-4">
-        <div class="card-body">
-            <form method="get" class="row g-3">
-                <div class="col-md-3">
-                    <label for="tab" class="form-label">{% trans "View" %}</label>
-                    <select class="form-select" id="tab" name="tab" onchange="this.form.submit()">
-                        <option value="received" {% if current_tab == 'received' %}selected{% endif %}>
-                            {% trans "My Appreciations" %}
-                        </option>
-                        <option value="sent" {% if current_tab == 'sent' %}selected{% endif %}>
-                            {% trans "Sent by Me" %}
-                        </option>
-                    </select>
-                </div>
-                <div class="col-md-3">
-                    <label for="status" class="form-label">{% trans "Status" %}</label>
-                    <select class="form-select" id="status" name="status" onchange="this.form.submit()">
-                        <option value="">{% trans "All Status" %}</option>
-                        {% for choice in status_choices %}
-                            <option value="{{ choice.0 }}" {% if filters.status == choice.0 %}selected{% endif %}>
-                                {{ choice.1 }}
-                            </option>
-                        {% endfor %}
-                    </select>
-                </div>
-                <div class="col-md-3">
-                    <label for="category" class="form-label">{% trans "Category" %}</label>
-                    <select class="form-select" id="category" name="category" onchange="this.form.submit()">
-                        <option value="">{% trans "All Categories" %}</option>
-                        {% for cat in categories %}
-                            <option value="{{ cat.id }}" {% if filters.category == cat.id|stringformat:"s" %}selected{% endif %}>
-                                {{ cat.name_en }}
-                            </option>
-                        {% endfor %}
-                    </select>
-                </div>
-                <div class="col-md-3">
-                    <label for="search" class="form-label">{% trans "Search" %}</label>
-                    <div class="input-group">
-                        <input type="text" class="form-control" id="search" name="search" 
-                               value="{{ filters.search|default:'' }}" placeholder="{% trans 'Search messages...' %}">
-                        <button type="submit" class="btn btn-primary">
-                            <i class="bi bi-search"></i>
-                        </button>
-                    </div>
-                </div>
-                <div class="col-12">
-                    <a href="{% url 'appreciation:appreciation_list' %}" class="btn btn-outline-secondary">
-                        <i class="bi bi-arrow-clockwise me-2"></i>
-                        {% trans "Clear Filters" %}
-                    </a>
-                </div>
-            </form>
+    <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100">
+        <div class="flex items-center gap-4">
+            <div class="p-3 bg-purple-50 rounded-xl">
+                <i data-lucide="trophy" class="w-6 h-6 text-purple-500"></i>
+            </div>
+            <div>
+                <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Leaderboard" %}</p>
+                <a href="{% url 'appreciation:leaderboard_view' %}" class="text-sm font-bold text-navy hover:text-blue transition flex items-center gap-1">
+                    {% trans "View" %} <i data-lucide="arrow-right" class="w-4 h-4"></i>
+                </a>
+            </div>
         </div>
     </div>
+</div>
 
-    <!-- Appreciations List -->
-    <div class="card shadow-sm">
-        <div class="card-body">
-            {% if page_obj %}
-                <div class="list-group">
-                    {% for appreciation in page_obj %}
-                        <a href="{% url 'appreciation:appreciation_detail' appreciation.id %}" 
-                           class="list-group-item list-group-item-action">
-                            <div class="d-flex w-100 justify-content-between align-items-start">
-                                <div class="flex-grow-1">
-                                    <div class="d-flex align-items-center mb-2">
-                                        {% if appreciation.category %}
-                                            <span class="badge bg-primary me-2">
-                                                <i class="{{ appreciation.category.icon|default:'fa-heart' }} me-1"></i>
-                                                {{ appreciation.category.name_en }}
-                                            </span>
+<!-- Quick Actions -->
+<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+    <a href="{% url 'appreciation:leaderboard_view' %}" class="group">
+        <div class="bg-white p-5 rounded-2xl shadow-sm border border-amber-200 hover:border-amber-300 hover:shadow-md transition">
+            <div class="flex items-center gap-4">
+                <div class="p-3 bg-amber-50 rounded-xl group-hover:bg-amber-100 transition">
+                    <i data-lucide="trophy" class="w-6 h-6 text-amber-500"></i>
+                </div>
+                <div>
+                    <h3 class="font-bold text-navy">{% trans "Leaderboard" %}</h3>
+                    <p class="text-sm text-slate">{% trans "See top performers" %}</p>
+                </div>
+            </div>
+        </div>
+    </a>
+    <a href="{% url 'appreciation:my_badges_view' %}" class="group">
+        <div class="bg-white p-5 rounded-2xl shadow-sm border border-blue-200 hover:border-blue-300 hover:shadow-md transition">
+            <div class="flex items-center gap-4">
+                <div class="p-3 bg-blue-50 rounded-xl group-hover:bg-blue-100 transition">
+                    <i data-lucide="award" class="w-6 h-6 text-blue-500"></i>
+                </div>
+                <div>
+                    <h3 class="font-bold text-navy">{% trans "My Badges" %}</h3>
+                    <p class="text-sm text-slate">{% trans "View earned badges" %}</p>
+                </div>
+            </div>
+        </div>
+    </a>
+    <a href="{% url 'appreciation:appreciation_send' %}" class="group">
+        <div class="bg-white p-5 rounded-2xl shadow-sm border border-green-200 hover:border-green-300 hover:shadow-md transition">
+            <div class="flex items-center gap-4">
+                <div class="p-3 bg-green-50 rounded-xl group-hover:bg-green-100 transition">
+                    <i data-lucide="send" class="w-6 h-6 text-green-500"></i>
+                </div>
+                <div>
+                    <h3 class="font-bold text-navy">{% trans "Send Appreciation" %}</h3>
+                    <p class="text-sm text-slate">{% trans "Share appreciation" %}</p>
+                </div>
+            </div>
+        </div>
+    </a>
+</div>
+
+<!-- Filter Bar -->
+<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 mb-6">
+    <div class="px-6 py-4 border-b-2 border-slate-200 flex justify-between items-center bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="filter" class="w-5 h-5 text-navy"></i>
+            {% trans "Filters" %}
+        </h3>
+    </div>
+    <div class="p-5">
+    <form method="get" class="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div>
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "View" %}</label>
+            <select id="tab" name="tab" onchange="this.form.submit()" 
+                    class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                <option value="received" {% if current_tab == 'received' %}selected{% endif %}>
+                    {% trans "My Appreciations" %}
+                </option>
+                <option value="sent" {% if current_tab == 'sent' %}selected{% endif %}>
+                    {% trans "Sent by Me" %}
+                </option>
+            </select>
+        </div>
+        <div>
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Status" %}</label>
+            <select id="status" name="status" onchange="this.form.submit()"
+                    class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                <option value="">{% trans "All Status" %}</option>
+                {% for choice in status_choices %}
+                    <option value="{{ choice.0 }}" {% if filters.status == choice.0 %}selected{% endif %}>
+                        {{ choice.1 }}
+                    </option>
+                {% endfor %}
+            </select>
+        </div>
+        <div>
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Category" %}</label>
+            <select id="category" name="category" onchange="this.form.submit()"
+                    class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                <option value="">{% trans "All Categories" %}</option>
+                {% for cat in categories %}
+                    <option value="{{ cat.id }}" {% if filters.category == cat.id|stringformat:"s" %}selected{% endif %}>
+                        {{ cat.name_en }}
+                    </option>
+                {% endfor %}
+            </select>
+        </div>
+        <div>
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Search" %}</label>
+            <div class="flex gap-2">
+                <input type="text" id="search" name="search" 
+                       value="{{ filters.search|default:'' }}" placeholder="{% trans 'Search messages...' %}"
+                       class="flex-1 px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                <button type="submit" class="bg-navy text-white px-4 py-2.5 rounded-xl hover:bg-blue transition">
+                    <i data-lucide="search" class="w-4 h-4"></i>
+                </button>
+            </div>
+        </div>
+    </form>
+    <div class="mt-4 pt-4 border-t border-slate-100">
+        <a href="{% url 'appreciation:appreciation_list' %}" class="text-sm font-bold text-slate hover:text-navy transition flex items-center gap-2">
+            <i data-lucide="rotate-ccw" class="w-4 h-4"></i> {% trans "Clear Filters" %}
+        </a>
+    </div>
+    </div>
+</div>
+
+<!-- Appreciations List -->
+<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 overflow-hidden">
+    <div class="px-6 py-4 border-b-2 border-slate-200 bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="heart" class="w-5 h-5 text-rose-500"></i>
+            {% trans "Appreciations" %}
+        </h3>
+    </div>
+    <div class="p-6">
+        {% if page_obj %}
+            <div class="space-y-3">
+                {% for appreciation in page_obj %}
+                    <a href="{% url 'appreciation:appreciation_detail' appreciation.id %}" 
+                       class="block p-4 rounded-xl border border-slate-100 hover:border-navy/30 hover:bg-light transition group">
+                        <div class="flex justify-between items-start gap-4">
+                            <div class="flex-1 min-w-0">
+                                <div class="flex items-center gap-2 mb-2">
+                                    {% if appreciation.category %}
+                                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-blue-100 text-blue-700">
+                                            <i data-lucide="{{ appreciation.category.icon|default:'heart' }}" class="w-3 h-3 mr-1"></i>
+                                            {{ appreciation.category.name_en }}
+                                        </span>
+                                    {% endif %}
+                                    <h4 class="font-bold text-navy">
+                                        {% if current_tab == 'received' %}
+                                            {{ appreciation.sender.get_full_name }}
+                                        {% else %}
+                                            {{ appreciation.recipient_name }}
                                         {% endif %}
-                                        <h6 class="mb-0">
-                                            {% if current_tab == 'received' %}
-                                                {{ appreciation.sender.get_full_name }}
-                                            {% else %}
-                                                {{ appreciation.recipient_name }}
-                                            {% endif %}
-                                        </h6>
-                                    </div>
-                                    <p class="mb-2 text-muted">{{ appreciation.message_en|truncatewords:15 }}</p>
-                                    <small class="text-muted">
-                                        <i class="bi bi-clock me-1"></i>
+                                    </h4>
+                                </div>
+                                <p class="text-sm text-slate mb-2 line-clamp-2">{{ appreciation.message_en|truncatewords:15 }}</p>
+                                <div class="flex items-center gap-3 text-xs text-slate">
+                                    <span class="flex items-center gap-1">
+                                        <i data-lucide="clock" class="w-3 h-3"></i>
                                         {{ appreciation.sent_at|date:"F j, Y, g:i A" }}
-                                        {% if appreciation.department %}
-                                            <span class="mx-2">•</span>
-                                            <i class="bi bi-building me-1"></i>
-                                            {{ appreciation.department.name }}
-                                        {% endif %}
-                                    </small>
-                                </div>
-                                <div class="text-end">
-                                    <span class="badge bg-{% if appreciation.status == 'acknowledged' %}success{% else %}primary{% endif %}">
-                                        {{ appreciation.get_status_display }}
                                     </span>
-                                    <div class="small text-muted mt-1">
-                                        {{ appreciation.get_visibility_display }}
-                                    </div>
+                                    {% if appreciation.department %}
+                                        <span class="flex items-center gap-1">
+                                            <i data-lucide="building" class="w-3 h-3"></i>
+                                            {{ appreciation.department.name }}
+                                        </span>
+                                    {% endif %}
                                 </div>
                             </div>
-                        </a>
-                    {% endfor %}
-                </div>
-
-                <!-- Pagination -->
-                {% if page_obj.has_other_pages %}
-                    <nav aria-label="Page navigation" class="mt-4">
-                        <ul class="pagination justify-content-center">
-                            {% if page_obj.has_previous %}
-                                <li class="page-item">
-                                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}&tab={{ current_tab }}{% if filters.urlencode %}&{{ filters.urlencode }}{% endif %}">
-                                        {% trans "Previous" %}
-                                    </a>
-                                </li>
-                            {% else %}
-                                <li class="page-item disabled">
-                                    <span class="page-link">{% trans "Previous" %}</span>
-                                </li>
-                            {% endif %}
-
-                            {% for num in page_obj.paginator.page_range %}
-                                {% if page_obj.number == num %}
-                                    <li class="page-item active">
-                                        <span class="page-link">{{ num }}</span>
-                                    </li>
-                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
-                                    <li class="page-item">
-                                        <a class="page-link" href="?page={{ num }}&tab={{ current_tab }}{% if filters.urlencode %}&{{ filters.urlencode }}{% endif %}">{{ num }}</a>
-                                    </li>
-                                {% endif %}
-                            {% endfor %}
-
-                            {% if page_obj.has_next %}
-                                <li class="page-item">
-                                    <a class="page-link" href="?page={{ page_obj.next_page_number }}&tab={{ current_tab }}{% if filters.urlencode %}&{{ filters.urlencode }}{% endif %}">
-                                        {% trans "Next" %}
-                                    </a>
-                                </li>
-                            {% else %}
-                                <li class="page-item disabled">
-                                    <span class="page-link">{% trans "Next" %}</span>
-                                </li>
-                            {% endif %}
-                        </ul>
-                    </nav>
-                {% endif %}
-            {% else %}
-                <div class="text-center py-5">
-                    <i class="bi bi-heart text-muted fa-4x mb-3"></i>
-                    <h4 class="text-muted">
-                        {% if current_tab == 'received' %}
-                            {% trans "No appreciations received yet" %}
-                        {% else %}
-                            {% trans "No appreciations sent yet" %}
-                        {% endif %}
-                    </h4>
-                    <p class="text-muted mb-3">
-                        {% trans "Start sharing appreciation with your colleagues!" %}
-                    </p>
-                    <a href="{% url 'appreciation:appreciation_send' %}" class="btn btn-primary">
-                        <i class="bi bi-send me-2"></i>
-                        {% trans "Send Your First Appreciation" %}
+                            <div class="text-right">
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold {% if appreciation.status == 'acknowledged' %}bg-green-100 text-green-700{% else %}bg-blue-100 text-blue-700{% endif %}">
+                                    {{ appreciation.get_status_display }}
+                                </span>
+                                <div class="text-xs text-slate mt-1">
+                                    {{ appreciation.get_visibility_display }}
+                                </div>
+                            </div>
+                        </div>
                     </a>
+                {% endfor %}
+            </div>
+
+            <!-- Pagination -->
+            {% if page_obj.has_other_pages %}
+                <div class="mt-6 pt-6 border-t border-slate-100 flex justify-center">
+                    <div class="flex items-center gap-2">
+                        {% if page_obj.has_previous %}
+                            <a href="?page={{ page_obj.previous_page_number }}&tab={{ current_tab }}{% if filters.urlencode %}&{{ filters.urlencode }}{% endif %}" 
+                               class="px-3 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+                                {% trans "Previous" %}
+                            </a>
+                        {% else %}
+                            <span class="px-3 py-2 rounded-lg border border-slate-200 text-gray-300 cursor-not-allowed">
+                                {% trans "Previous" %}
+                            </span>
+                        {% endif %}
+
+                        {% for num in page_obj.paginator.page_range %}
+                            {% if page_obj.number == num %}
+                                <span class="px-4 py-2 rounded-lg bg-navy text-white font-bold">{{ num }}</span>
+                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
+                                <a href="?page={{ num }}&tab={{ current_tab }}{% if filters.urlencode %}&{{ filters.urlencode }}{% endif %}" 
+                                   class="px-4 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+                                    {{ num }}
+                                </a>
+                            {% endif %}
+                        {% endfor %}
+
+                        {% if page_obj.has_next %}
+                            <a href="?page={{ page_obj.next_page_number }}&tab={{ current_tab }}{% if filters.urlencode %}&{{ filters.urlencode }}{% endif %}" 
+                               class="px-3 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+                                {% trans "Next" %}
+                            </a>
+                        {% else %}
+                            <span class="px-3 py-2 rounded-lg border border-slate-200 text-gray-300 cursor-not-allowed">
+                                {% trans "Next" %}
+                            </span>
+                        {% endif %}
+                    </div>
                 </div>
             {% endif %}
-        </div>
+        {% else %}
+            <div class="text-center py-12">
+                <div class="w-16 h-16 bg-rose-50 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="heart" class="w-8 h-8 text-rose-400"></i>
+                </div>
+                <h4 class="text-lg font-bold text-navy mb-2">
+                    {% if current_tab == 'received' %}
+                        {% trans "No appreciations received yet" %}
+                    {% else %}
+                        {% trans "No appreciations sent yet" %}
+                    {% endif %}
+                </h4>
+                <p class="text-slate mb-4">{% trans "Start sharing appreciation with your colleagues!" %}</p>
+                <a href="{% url 'appreciation:appreciation_send' %}" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-blue transition inline-flex items-center gap-2">
+                    <i data-lucide="send" class="w-4 h-4"></i> {% trans "Send Your First Appreciation" %}
+                </a>
+            </div>
+        {% endif %}
     </div>
 </div>
 {% endblock %}
diff --git a/templates/callcenter/complaint_list.html b/templates/callcenter/complaint_list.html
index 40f30a0..25ac7f5 100644
--- a/templates/callcenter/complaint_list.html
+++ b/templates/callcenter/complaint_list.html
@@ -6,245 +6,231 @@
 
 {% block extra_css %}
 <style>
-    .stats-card {
-        border-radius: 8px;
-        padding: 20px;
-        margin-bottom: 20px;
-        border: none;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    }
-    .badge-status-open { background: #17a2b8; }
-    .badge-status-in_progress { background: #ffc107; color: #000; }
-    .badge-status-resolved { background: #28a745; }
-    .badge-status-closed { background: #6c757d; }
-    .badge-severity-critical { background: #dc3545; }
-    .badge-severity-high { background: #fd7e14; }
-    .badge-severity-medium { background: #ffc107; color: #000; }
-    .badge-severity-low { background: #28a745; }
+    .badge-status-open { background: #e0f2fe; color: #075985; }
+    .badge-status-in_progress { background: #fef9c3; color: #854d0e; }
+    .badge-status-resolved { background: #dcfce7; color: #166534; }
+    .badge-status-closed { background: #f3f4f6; color: #6b7280; }
+    .badge-severity-critical { background: #fee2e2; color: #991b1b; }
+    .badge-severity-high { background: #ffedd5; color: #9a3412; }
+    .badge-severity-medium { background: #fef9c3; color: #854d0e; }
+    .badge-severity-low { background: #dcfce7; color: #166534; }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-    <!-- Page Header -->
-    <div class="mb-4">
-        <div class="d-flex justify-content-between align-items-center">
+<!-- Header -->
+<header class="mb-6">
+    <div class="flex justify-between items-start">
+        <div>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="phone" class="w-7 h-7 text-blue"></i>
+                {% trans "Call Center Complaints" %}
+            </h1>
+            <p class="text-sm text-slate mt-1">{% trans "Complaints created via call center" %}</p>
+        </div>
+        <a href="{% url 'callcenter:create_complaint' %}" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
+            <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Create Complaint" %}
+        </a>
+    </div>
+</header>
+
+<!-- Statistics -->
+<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+    <div class="bg-blue-500 text-white p-5 rounded-2xl shadow-sm">
+        <div class="flex justify-between items-center">
             <div>
-                <h2 class="mb-1">
-                    <i class="bi bi-telephone-fill text-primary me-2"></i>
-                    {% trans "Call Center Complaints" %}
-                </h2>
-                <p class="text-muted mb-0">{% trans "Complaints created via call center" %}</p>
+                <p class="text-blue-100 text-xs font-bold uppercase tracking-wider mb-1">{% trans "Total Complaints" %}</p>
+                <p class="text-2xl font-black">{{ stats.total }}</p>
             </div>
-            <a href="{% url 'callcenter:create_complaint' %}" class="btn btn-primary">
-                <i class="bi bi-plus-circle me-1"></i> {% trans "Create Complaint" %}
-            </a>
+            <i data-lucide="file-text" class="w-8 h-8 opacity-50"></i>
         </div>
     </div>
-
-    <!-- Statistics -->
-    <div class="row mb-4">
-        <div class="col-md-3">
-            <div class="stats-card bg-primary text-white">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h3 class="mb-0">{{ stats.total }}</h3>
-                        <small>{% trans "Total Complaints" %}</small>
-                    </div>
-                    <i class="bi bi-file-earmark-text" style="font-size: 2rem; opacity: 0.5;"></i>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-3">
-            <div class="stats-card bg-info text-white">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h3 class="mb-0">{{ stats.open }}</h3>
-                        <small>{% trans "Open" %}</small>
-                    </div>
-                    <i class="bi bi-inbox" style="font-size: 2rem; opacity: 0.5;"></i>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-3">
-            <div class="stats-card bg-warning text-dark">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h3 class="mb-0">{{ stats.in_progress }}</h3>
-                        <small>{% trans "In Progress" %}</small>
-                    </div>
-                    <i class="bi bi-hourglass-split" style="font-size: 2rem; opacity: 0.5;"></i>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-3">
-            <div class="stats-card bg-success text-white">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h3 class="mb-0">{{ stats.resolved }}</h3>
-                        <small>{% trans "Resolved" %}</small>
-                    </div>
-                    <i class="bi bi-check-circle" style="font-size: 2rem; opacity: 0.5;"></i>
-                </div>
+    <div class="bg-cyan-500 text-white p-5 rounded-2xl shadow-sm">
+        <div class="flex justify-between items-center">
+            <div>
+                <p class="text-cyan-100 text-xs font-bold uppercase tracking-wider mb-1">{% trans "Open" %}</p>
+                <p class="text-2xl font-black">{{ stats.open }}</p>
             </div>
+            <i data-lucide="inbox" class="w-8 h-8 opacity-50"></i>
         </div>
     </div>
-
-    <!-- Filters -->
-    <div class="card mb-4">
-        <div class="card-body">
-            <form method="get" class="row g-3">
-                <div class="col-md-3">
-                    <label class="form-label">{% trans "Search" %}</label>
-                    <input type="text" name="search" class="form-control" 
-                           placeholder="{% trans 'Search...' %}" value="{{ filters.search }}">
-                </div>
-                
-                <div class="col-md-2">
-                    <label class="form-label">{% trans "Status" %}</label>
-                    <select name="status" class="form-select">
-                        <option value="">{% trans "All" %}</option>
-                        <option value="open" {% if filters.status == 'open' %}selected{% endif %}>{% trans "Open" %}</option>
-                        <option value="in_progress" {% if filters.status == 'in_progress' %}selected{% endif %}>{% trans "In Progress" %}</option>
-                        <option value="resolved" {% if filters.status == 'resolved' %}selected{% endif %}>{% trans "Resolved" %}</option>
-                        <option value="closed" {% if filters.status == 'closed' %}selected{% endif %}>{% trans "Closed" %}</option>
-                    </select>
-                </div>
-                
-                <div class="col-md-2">
-                    <label class="form-label">{% trans "Severity" %}</label>
-                    <select name="severity" class="form-select">
-                        <option value="">{% trans "All" %}</option>
-                        <option value="critical" {% if filters.severity == 'critical' %}selected{% endif %}>{% trans "Critical" %}</option>
-                        <option value="high" {% if filters.severity == 'high' %}selected{% endif %}>{% trans "High" %}</option>
-                        <option value="medium" {% if filters.severity == 'medium' %}selected{% endif %}>{% trans "Medium" %}</option>
-                        <option value="low" {% if filters.severity == 'low' %}selected{% endif %}>{% trans "Low" %}</option>
-                    </select>
-                </div>
-                
-                <div class="col-md-3">
-                    <label class="form-label">{% trans "Hospital" %}</label>
-                    <select name="hospital" class="form-select">
-                        <option value="">{% trans "All" %}</option>
-                        {% for hospital in hospitals %}
-                        <option value="{{ hospital.id }}" {% if filters.hospital == hospital.id|stringformat:"s" %}selected{% endif %}>
-                            {{ hospital.name_en }}
-                        </option>
-                        {% endfor %}
-                    </select>
-                </div>
-                
-                <div class="col-md-2 d-flex align-items-end">
-                    <button type="submit" class="btn btn-primary w-100">
-                        <i class="bi bi-funnel me-1"></i> {% trans "Filter" %}
-                    </button>
-                </div>
-            </form>
+    <div class="bg-amber-500 text-white p-5 rounded-2xl shadow-sm">
+        <div class="flex justify-between items-center">
+            <div>
+                <p class="text-amber-100 text-xs font-bold uppercase tracking-wider mb-1">{% trans "In Progress" %}</p>
+                <p class="text-2xl font-black">{{ stats.in_progress }}</p>
+            </div>
+            <i data-lucide="clock" class="w-8 h-8 opacity-50"></i>
         </div>
     </div>
-
-    <!-- Complaints Table -->
-    <div class="card">
-        <div class="card-body">
-            <div class="table-responsive">
-                <table class="table table-hover">
-                    <thead>
-                        <tr>
-                            <th>{% trans "ID" %}</th>
-                            <th>{% trans "Title" %}</th>
-                            <th>{% trans "Patient" %}</th>
-                            <th>{% trans "Hospital" %}</th>
-                            <th>{% trans "Category" %}</th>
-                            <th>{% trans "Severity" %}</th>
-                            <th>{% trans "Status" %}</th>
-                            <th>{% trans "Created" %}</th>
-                            <th>{% trans "Actions" %}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for complaint in complaints %}
-                        <tr>
-                            <td>
-                                <small class="text-muted">#{{ complaint.id|slice:":8" }}</small>
-                            </td>
-                            <td>
-                                <strong>{{ complaint.title|truncatewords:8 }}</strong>
-                            </td>
-                            <td>
-                                {% if complaint.patient %}
-                                    {{ complaint.patient.get_full_name }}<br>
-                                    <small class="text-muted">MRN: {{ complaint.patient.mrn }}</small>
-                                {% else %}
-                                    <span class="text-muted">{% trans "N/A" %}</span>
-                                {% endif %}
-                            </td>
-                            <td>{{ complaint.hospital.name_en }}</td>
-                            <td>
-                                <span class="badge bg-secondary">
-                                    {{ complaint.get_category_display }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="badge badge-severity-{{ complaint.severity }}">
-                                    {{ complaint.get_severity_display }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="badge badge-status-{{ complaint.status }}">
-                                    {{ complaint.get_status_display }}
-                                </span>
-                            </td>
-                            <td>
-                                <small>{{ complaint.created_at|date:"Y-m-d H:i" }}</small>
-                            </td>
-                            <td>
-                                <a href="{% url 'complaints:complaint_detail' complaint.id %}" 
-                                   class="btn btn-sm btn-outline-primary">
-                                    <i class="bi bi-eye"></i>
-                                </a>
-                            </td>
-                        </tr>
-                        {% empty %}
-                        <tr>
-                            <td colspan="9" class="text-center text-muted py-4">
-                                <i class="bi bi-inbox" style="font-size: 3rem;"></i>
-                                <p class="mt-2">{% trans "No complaints found" %}</p>
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
+    <div class="bg-emerald-500 text-white p-5 rounded-2xl shadow-sm">
+        <div class="flex justify-between items-center">
+            <div>
+                <p class="text-emerald-100 text-xs font-bold uppercase tracking-wider mb-1">{% trans "Resolved" %}</p>
+                <p class="text-2xl font-black">{{ stats.resolved }}</p>
             </div>
-
-            <!-- Pagination -->
-            {% if page_obj.has_other_pages %}
-            <nav aria-label="Page navigation" class="mt-4">
-                <ul class="pagination justify-content-center">
-                    {% if page_obj.has_previous %}
-                    <li class="page-item">
-                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                            {% trans "Previous" %}
-                        </a>
-                    </li>
-                    {% endif %}
-                    
-                    <li class="page-item active">
-                        <span class="page-link">
-                            {% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}
-                        </span>
-                    </li>
-                    
-                    {% if page_obj.has_next %}
-                    <li class="page-item">
-                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                            {% trans "Next" %}
-                        </a>
-                    </li>
-                    {% endif %}
-                </ul>
-            </nav>
-            {% endif %}
+            <i data-lucide="check-circle" class="w-8 h-8 opacity-50"></i>
         </div>
     </div>
 </div>
+
+<!-- Filters -->
+<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 mb-6">
+    <div class="px-6 py-4 border-b-2 border-slate-200 flex justify-between items-center bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="filter" class="w-5 h-5 text-navy"></i>
+            {% trans "Filters" %}
+        </h3>
+    </div>
+    <div class="p-5">
+    <form method="get" class="grid grid-cols-1 md:grid-cols-5 gap-4">
+        <div class="md:col-span-1">
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Search" %}</label>
+            <input type="text" name="search" 
+                   class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition" 
+                   placeholder="{% trans 'Search...' %}" value="{{ filters.search }}">
+        </div>
+        <div>
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Status" %}</label>
+            <select name="status" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                <option value="">{% trans "All" %}</option>
+                <option value="open" {% if filters.status == 'open' %}selected{% endif %}>{% trans "Open" %}</option>
+                <option value="in_progress" {% if filters.status == 'in_progress' %}selected{% endif %}>{% trans "In Progress" %}</option>
+                <option value="resolved" {% if filters.status == 'resolved' %}selected{% endif %}>{% trans "Resolved" %}</option>
+                <option value="closed" {% if filters.status == 'closed' %}selected{% endif %}>{% trans "Closed" %}</option>
+            </select>
+        </div>
+        <div>
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Severity" %}</label>
+            <select name="severity" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                <option value="">{% trans "All" %}</option>
+                <option value="critical" {% if filters.severity == 'critical' %}selected{% endif %}>{% trans "Critical" %}</option>
+                <option value="high" {% if filters.severity == 'high' %}selected{% endif %}>{% trans "High" %}</option>
+                <option value="medium" {% if filters.severity == 'medium' %}selected{% endif %}>{% trans "Medium" %}</option>
+                <option value="low" {% if filters.severity == 'low' %}selected{% endif %}>{% trans "Low" %}</option>
+            </select>
+        </div>
+        <div>
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Hospital" %}</label>
+            <select name="hospital" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                <option value="">{% trans "All" %}</option>
+                {% for hospital in hospitals %}
+                <option value="{{ hospital.id }}" {% if filters.hospital == hospital.id|stringformat:"s" %}selected{% endif %}>
+                    {{ hospital.name_en }}
+                </option>
+                {% endfor %}
+            </select>
+        </div>
+        <div class="flex items-end">
+            <button type="submit" class="w-full bg-navy text-white px-4 py-2.5 rounded-xl text-sm font-bold hover:bg-blue transition flex items-center justify-center gap-2">
+                <i data-lucide="filter" class="w-4 h-4"></i> {% trans "Filter" %}
+            </button>
+        </div>
+    </form>
+    </div>
+</div>
+
+<!-- Complaints Table -->
+<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 overflow-hidden">
+    <div class="px-6 py-4 border-b-2 border-slate-200 bg-gradient-to-r from-slate-50 to-slate-100 flex justify-between items-center">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="message-square-warning" class="w-5 h-5 text-red-500"></i>
+            {% trans "Complaints" %}
+        </h3>
+    </div>
+    <div class="overflow-x-auto">
+        <table class="w-full">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "ID" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Title" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Patient" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Hospital" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Category" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Severity" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Status" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Created" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Actions" %}</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100">
+                {% for complaint in complaints %}
+                <tr class="hover:bg-gray-50 transition">
+                    <td class="px-6 py-4">
+                        <small class="text-gray-400">#{{ complaint.id|slice:":8" }}</small>
+                    </td>
+                    <td class="px-6 py-4">
+                        <strong class="text-gray-800">{{ complaint.title|truncatewords:8 }}</strong>
+                    </td>
+                    <td class="px-6 py-4">
+                        {% if complaint.patient %}
+                        <span class="text-gray-800">{{ complaint.patient.get_full_name }}</span><br>
+                        <small class="text-gray-400">MRN: {{ complaint.patient.mrn }}</small>
+                        {% else %}
+                        <span class="text-gray-400">{% trans "N/A" %}</span>
+                        {% endif %}
+                    </td>
+                    <td class="px-6 py-4 text-gray-600">{{ complaint.hospital.name_en }}</td>
+                    <td class="px-6 py-4">
+                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate">
+                            {{ complaint.get_category_display }}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4">
+                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold badge-severity-{{ complaint.severity }}">
+                            {{ complaint.get_severity_display }}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4">
+                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold badge-status-{{ complaint.status }}">
+                            {{ complaint.get_status_display }}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4">
+                        <small class="text-gray-500">{{ complaint.created_at|date:"Y-m-d H:i" }}</small>
+                    </td>
+                    <td class="px-6 py-4">
+                        <a href="{% url 'complaints:complaint_detail' complaint.id %}" 
+                           class="inline-flex items-center gap-1 px-3 py-2 text-navy bg-light rounded-lg hover:bg-light transition font-medium text-sm">
+                            <i data-lucide="eye" class="w-4 h-4"></i>
+                        </a>
+                    </td>
+                </tr>
+                {% empty %}
+                <tr>
+                    <td colspan="9" class="text-center py-8 text-gray-500">
+                        <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
+                        <p>{% trans "No complaints found" %}</p>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Pagination -->
+    {% if page_obj.has_other_pages %}
+    <div class="px-6 py-4 border-t border-gray-100 flex justify-center">
+        <div class="flex items-center gap-2">
+            {% if page_obj.has_previous %}
+            <a href="?page={{ page_obj.previous_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}" 
+               class="px-3 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+                {% trans "Previous" %}
+            </a>
+            {% endif %}
+            
+            <span class="px-4 py-2 rounded-lg bg-navy text-white text-sm font-bold">
+                {% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}
+            </span>
+            
+            {% if page_obj.has_next %}
+            <a href="?page={{ page_obj.next_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}" 
+               class="px-3 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+                {% trans "Next" %}
+            </a>
+            {% endif %}
+        </div>
+    </div>
+    {% endif %}
+</div>
 {% endblock %}
diff --git a/templates/callcenter/inquiry_list.html b/templates/callcenter/inquiry_list.html
index 5e7454d..14e7124 100644
--- a/templates/callcenter/inquiry_list.html
+++ b/templates/callcenter/inquiry_list.html
@@ -6,237 +6,223 @@
 
 {% block extra_css %}
 <style>
-    .stats-card {
-        border-radius: 8px;
-        padding: 20px;
-        margin-bottom: 20px;
-        border: none;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    }
-    .badge-status-open { background: #17a2b8; }
-    .badge-status-in_progress { background: #ffc107; color: #000; }
-    .badge-status-resolved { background: #28a745; }
-    .badge-status-closed { background: #6c757d; }
+    .badge-status-open { background: #e0f2fe; color: #075985; }
+    .badge-status-in_progress { background: #fef9c3; color: #854d0e; }
+    .badge-status-resolved { background: #dcfce7; color: #166534; }
+    .badge-status-closed { background: #f3f4f6; color: #6b7280; }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-    <!-- Page Header -->
-    <div class="mb-4">
-        <div class="d-flex justify-content-between align-items-center">
+<!-- Header -->
+<header class="mb-6">
+    <div class="flex justify-between items-start">
+        <div>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="phone" class="w-7 h-7 text-cyan-500"></i>
+                {% trans "Call Center Inquiries" %}
+            </h1>
+            <p class="text-sm text-slate mt-1">{% trans "Inquiries created via call center" %}</p>
+        </div>
+        <a href="{% url 'callcenter:create_inquiry' %}" class="bg-cyan-500 text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-cyan-200 hover:bg-cyan-600 flex items-center gap-2 transition">
+            <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Create Inquiry" %}
+        </a>
+    </div>
+</header>
+
+<!-- Statistics -->
+<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+    <div class="bg-cyan-500 text-white p-5 rounded-2xl shadow-sm">
+        <div class="flex justify-between items-center">
             <div>
-                <h2 class="mb-1">
-                    <i class="bi bi-telephone-fill text-info me-2"></i>
-                    {% trans "Call Center Inquiries" %}
-                </h2>
-                <p class="text-muted mb-0">{% trans "Inquiries created via call center" %}</p>
+                <p class="text-cyan-100 text-xs font-bold uppercase tracking-wider mb-1">{% trans "Total Inquiries" %}</p>
+                <p class="text-2xl font-black">{{ stats.total }}</p>
             </div>
-            <a href="{% url 'callcenter:create_inquiry' %}" class="btn btn-info text-white">
-                <i class="bi bi-plus-circle me-1"></i> {% trans "Create Inquiry" %}
-            </a>
+            <i data-lucide="message-square" class="w-8 h-8 opacity-50"></i>
         </div>
     </div>
-
-    <!-- Statistics -->
-    <div class="row mb-4">
-        <div class="col-md-3">
-            <div class="stats-card bg-info text-white">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h3 class="mb-0">{{ stats.total }}</h3>
-                        <small>{% trans "Total Inquiries" %}</small>
-                    </div>
-                    <i class="bi bi-chat-left-text" style="font-size: 2rem; opacity: 0.5;"></i>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-3">
-            <div class="stats-card bg-primary text-white">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h3 class="mb-0">{{ stats.open }}</h3>
-                        <small>{% trans "Open" %}</small>
-                    </div>
-                    <i class="bi bi-inbox" style="font-size: 2rem; opacity: 0.5;"></i>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-3">
-            <div class="stats-card bg-warning text-dark">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h3 class="mb-0">{{ stats.in_progress }}</h3>
-                        <small>{% trans "In Progress" %}</small>
-                    </div>
-                    <i class="bi bi-hourglass-split" style="font-size: 2rem; opacity: 0.5;"></i>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-3">
-            <div class="stats-card bg-success text-white">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h3 class="mb-0">{{ stats.resolved }}</h3>
-                        <small>{% trans "Resolved" %}</small>
-                    </div>
-                    <i class="bi bi-check-circle" style="font-size: 2rem; opacity: 0.5;"></i>
-                </div>
+    <div class="bg-blue-500 text-white p-5 rounded-2xl shadow-sm">
+        <div class="flex justify-between items-center">
+            <div>
+                <p class="text-blue-100 text-xs font-bold uppercase tracking-wider mb-1">{% trans "Open" %}</p>
+                <p class="text-2xl font-black">{{ stats.open }}</p>
             </div>
+            <i data-lucide="inbox" class="w-8 h-8 opacity-50"></i>
         </div>
     </div>
-
-    <!-- Filters -->
-    <div class="card mb-4">
-        <div class="card-body">
-            <form method="get" class="row g-3">
-                <div class="col-md-4">
-                    <label class="form-label">{% trans "Search" %}</label>
-                    <input type="text" name="search" class="form-control" 
-                           placeholder="{% trans 'Search...' %}" value="{{ filters.search }}">
-                </div>
-                
-                <div class="col-md-2">
-                    <label class="form-label">{% trans "Status" %}</label>
-                    <select name="status" class="form-select">
-                        <option value="">{% trans "All" %}</option>
-                        <option value="open" {% if filters.status == 'open' %}selected{% endif %}>{% trans "Open" %}</option>
-                        <option value="in_progress" {% if filters.status == 'in_progress' %}selected{% endif %}>{% trans "In Progress" %}</option>
-                        <option value="resolved" {% if filters.status == 'resolved' %}selected{% endif %}>{% trans "Resolved" %}</option>
-                        <option value="closed" {% if filters.status == 'closed' %}selected{% endif %}>{% trans "Closed" %}</option>
-                    </select>
-                </div>
-                
-                <div class="col-md-2">
-                    <label class="form-label">{% trans "Category" %}</label>
-                    <select name="category" class="form-select">
-                        <option value="">{% trans "All" %}</option>
-                        <option value="appointment" {% if filters.category == 'appointment' %}selected{% endif %}>{% trans "Appointment" %}</option>
-                        <option value="billing" {% if filters.category == 'billing' %}selected{% endif %}>{% trans "Billing" %}</option>
-                        <option value="medical_records" {% if filters.category == 'medical_records' %}selected{% endif %}>{% trans "Medical Records" %}</option>
-                        <option value="general" {% if filters.category == 'general' %}selected{% endif %}>{% trans "General" %}</option>
-                        <option value="other" {% if filters.category == 'other' %}selected{% endif %}>{% trans "Other" %}</option>
-                    </select>
-                </div>
-                
-                <div class="col-md-2">
-                    <label class="form-label">{% trans "Hospital" %}</label>
-                    <select name="hospital" class="form-select">
-                        <option value="">{% trans "All" %}</option>
-                        {% for hospital in hospitals %}
-                        <option value="{{ hospital.id }}" {% if filters.hospital == hospital.id|stringformat:"s" %}selected{% endif %}>
-                            {{ hospital.name_en }}
-                        </option>
-                        {% endfor %}
-                    </select>
-                </div>
-                
-                <div class="col-md-2 d-flex align-items-end">
-                    <button type="submit" class="btn btn-info text-white w-100">
-                        <i class="bi bi-funnel me-1"></i> {% trans "Filter" %}
-                    </button>
-                </div>
-            </form>
+    <div class="bg-amber-500 text-white p-5 rounded-2xl shadow-sm">
+        <div class="flex justify-between items-center">
+            <div>
+                <p class="text-amber-100 text-xs font-bold uppercase tracking-wider mb-1">{% trans "In Progress" %}</p>
+                <p class="text-2xl font-black">{{ stats.in_progress }}</p>
+            </div>
+            <i data-lucide="clock" class="w-8 h-8 opacity-50"></i>
         </div>
     </div>
-
-    <!-- Inquiries Table -->
-    <div class="card">
-        <div class="card-body">
-            <div class="table-responsive">
-                <table class="table table-hover">
-                    <thead>
-                        <tr>
-                            <th>{% trans "ID" %}</th>
-                            <th>{% trans "Subject" %}</th>
-                            <th>{% trans "Contact" %}</th>
-                            <th>{% trans "Hospital" %}</th>
-                            <th>{% trans "Category" %}</th>
-                            <th>{% trans "Status" %}</th>
-                            <th>{% trans "Created" %}</th>
-                            <th>{% trans "Actions" %}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for inquiry in inquiries %}
-                        <tr>
-                            <td>
-                                <small class="text-muted">#{{ inquiry.id|slice:":8" }}</small>
-                            </td>
-                            <td>
-                                <strong>{{ inquiry.subject|truncatewords:10 }}</strong>
-                            </td>
-                            <td>
-                                {% if inquiry.patient %}
-                                    {{ inquiry.patient.get_full_name }}<br>
-                                    <small class="text-muted">MRN: {{ inquiry.patient.mrn }}</small>
-                                {% else %}
-                                    {{ inquiry.contact_name }}<br>
-                                    <small class="text-muted">{{ inquiry.contact_phone }}</small>
-                                {% endif %}
-                            </td>
-                            <td>{{ inquiry.hospital.name_en }}</td>
-                            <td>
-                                <span class="badge bg-secondary">
-                                    {{ inquiry.get_category_display }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="badge badge-status-{{ inquiry.status }}">
-                                    {{ inquiry.get_status_display }}
-                                </span>
-                            </td>
-                            <td>
-                                <small>{{ inquiry.created_at|date:"Y-m-d H:i" }}</small>
-                            </td>
-                            <td>
-                                <a href="{% url 'complaints:inquiry_detail' inquiry.id %}" 
-                                   class="btn btn-sm btn-outline-info">
-                                    <i class="bi bi-eye"></i>
-                                </a>
-                            </td>
-                        </tr>
-                        {% empty %}
-                        <tr>
-                            <td colspan="8" class="text-center text-muted py-4">
-                                <i class="bi bi-inbox" style="font-size: 3rem;"></i>
-                                <p class="mt-2">{% trans "No inquiries found" %}</p>
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
+    <div class="bg-emerald-500 text-white p-5 rounded-2xl shadow-sm">
+        <div class="flex justify-between items-center">
+            <div>
+                <p class="text-emerald-100 text-xs font-bold uppercase tracking-wider mb-1">{% trans "Resolved" %}</p>
+                <p class="text-2xl font-black">{{ stats.resolved }}</p>
             </div>
-
-            <!-- Pagination -->
-            {% if page_obj.has_other_pages %}
-            <nav aria-label="Page navigation" class="mt-4">
-                <ul class="pagination justify-content-center">
-                    {% if page_obj.has_previous %}
-                    <li class="page-item">
-                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                            {% trans "Previous" %}
-                        </a>
-                    </li>
-                    {% endif %}
-                    
-                    <li class="page-item active">
-                        <span class="page-link">
-                            {% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}
-                        </span>
-                    </li>
-                    
-                    {% if page_obj.has_next %}
-                    <li class="page-item">
-                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                            {% trans "Next" %}
-                        </a>
-                    </li>
-                    {% endif %}
-                </ul>
-            </nav>
-            {% endif %}
+            <i data-lucide="check-circle" class="w-8 h-8 opacity-50"></i>
         </div>
     </div>
 </div>
+
+<!-- Filters -->
+<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 mb-6">
+    <div class="px-6 py-4 border-b-2 border-slate-200 flex justify-between items-center bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="filter" class="w-5 h-5 text-navy"></i>
+            {% trans "Filters" %}
+        </h3>
+    </div>
+    <div class="p-5">
+    <form method="get" class="grid grid-cols-1 md:grid-cols-5 gap-4">
+        <div class="md:col-span-2">
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Search" %}</label>
+            <input type="text" name="search" 
+                   class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition" 
+                   placeholder="{% trans 'Search...' %}" value="{{ filters.search }}">
+        </div>
+        <div>
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Status" %}</label>
+            <select name="status" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                <option value="">{% trans "All" %}</option>
+                <option value="open" {% if filters.status == 'open' %}selected{% endif %}>{% trans "Open" %}</option>
+                <option value="in_progress" {% if filters.status == 'in_progress' %}selected{% endif %}>{% trans "In Progress" %}</option>
+                <option value="resolved" {% if filters.status == 'resolved' %}selected{% endif %}>{% trans "Resolved" %}</option>
+                <option value="closed" {% if filters.status == 'closed' %}selected{% endif %}>{% trans "Closed" %}</option>
+            </select>
+        </div>
+        <div>
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Category" %}</label>
+            <select name="category" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                <option value="">{% trans "All" %}</option>
+                <option value="appointment" {% if filters.category == 'appointment' %}selected{% endif %}>{% trans "Appointment" %}</option>
+                <option value="billing" {% if filters.category == 'billing' %}selected{% endif %}>{% trans "Billing" %}</option>
+                <option value="medical_records" {% if filters.category == 'medical_records' %}selected{% endif %}>{% trans "Medical Records" %}</option>
+                <option value="general" {% if filters.category == 'general' %}selected{% endif %}>{% trans "General" %}</option>
+                <option value="other" {% if filters.category == 'other' %}selected{% endif %}>{% trans "Other" %}</option>
+            </select>
+        </div>
+        <div>
+            <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Hospital" %}</label>
+            <select name="hospital" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                <option value="">{% trans "All" %}</option>
+                {% for hospital in hospitals %}
+                <option value="{{ hospital.id }}" {% if filters.hospital == hospital.id|stringformat:"s" %}selected{% endif %}>
+                    {{ hospital.name_en }}
+                </option>
+                {% endfor %}
+            </select>
+        </div>
+        <div class="md:col-span-5 flex justify-end">
+            <button type="submit" class="bg-cyan-500 text-white px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-cyan-600 transition flex items-center gap-2">
+                <i data-lucide="filter" class="w-4 h-4"></i> {% trans "Filter" %}
+            </button>
+        </div>
+    </form>
+    </div>
+</div>
+
+<!-- Inquiries Table -->
+<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 overflow-hidden">
+    <div class="px-6 py-4 border-b-2 border-slate-200 bg-gradient-to-r from-slate-50 to-slate-100 flex justify-between items-center">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="help-circle" class="w-5 h-5 text-cyan-500"></i>
+            {% trans "Inquiries" %}
+        </h3>
+    </div>
+    <div class="overflow-x-auto">
+        <table class="w-full">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "ID" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Subject" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Contact" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Hospital" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Category" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Status" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Created" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Actions" %}</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100">
+                {% for inquiry in inquiries %}
+                <tr class="hover:bg-gray-50 transition">
+                    <td class="px-6 py-4">
+                        <small class="text-gray-400">#{{ inquiry.id|slice:":8" }}</small>
+                    </td>
+                    <td class="px-6 py-4">
+                        <strong class="text-gray-800">{{ inquiry.subject|truncatewords:10 }}</strong>
+                    </td>
+                    <td class="px-6 py-4">
+                        {% if inquiry.patient %}
+                        <span class="text-gray-800">{{ inquiry.patient.get_full_name }}</span><br>
+                        <small class="text-gray-400">MRN: {{ inquiry.patient.mrn }}</small>
+                        {% else %}
+                        <span class="text-gray-800">{{ inquiry.contact_name }}</span><br>
+                        <small class="text-gray-400">{{ inquiry.contact_phone }}</small>
+                        {% endif %}
+                    </td>
+                    <td class="px-6 py-4 text-gray-600">{{ inquiry.hospital.name_en }}</td>
+                    <td class="px-6 py-4">
+                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate">
+                            {{ inquiry.get_category_display }}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4">
+                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold badge-status-{{ inquiry.status }}">
+                            {{ inquiry.get_status_display }}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4">
+                        <small class="text-gray-500">{{ inquiry.created_at|date:"Y-m-d H:i" }}</small>
+                    </td>
+                    <td class="px-6 py-4">
+                        <a href="{% url 'complaints:inquiry_detail' inquiry.id %}" 
+                           class="inline-flex items-center gap-1 px-3 py-2 text-cyan-600 bg-cyan-50 rounded-lg hover:bg-cyan-100 transition font-medium text-sm">
+                            <i data-lucide="eye" class="w-4 h-4"></i>
+                        </a>
+                    </td>
+                </tr>
+                {% empty %}
+                <tr>
+                    <td colspan="8" class="text-center py-8 text-gray-500">
+                        <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
+                        <p>{% trans "No inquiries found" %}</p>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Pagination -->
+    {% if page_obj.has_other_pages %}
+    <div class="px-6 py-4 border-t border-gray-100 flex justify-center">
+        <div class="flex items-center gap-2">
+            {% if page_obj.has_previous %}
+            <a href="?page={{ page_obj.previous_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}" 
+               class="px-3 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+                {% trans "Previous" %}
+            </a>
+            {% endif %}
+            
+            <span class="px-4 py-2 rounded-lg bg-cyan-500 text-white text-sm font-bold">
+                {% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}
+            </span>
+            
+            {% if page_obj.has_next %}
+            <a href="?page={{ page_obj.next_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}" 
+               class="px-3 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+                {% trans "Next" %}
+            </a>
+            {% endif %}
+        </div>
+    </div>
+    {% endif %}
+</div>
 {% endblock %}
diff --git a/templates/complaints/complaint_detail.html b/templates/complaints/complaint_detail.html
index 68d6bde..2b90c4c 100644
--- a/templates/complaints/complaint_detail.html
+++ b/templates/complaints/complaint_detail.html
@@ -333,7 +333,7 @@
                 <!-- Activate Button - Always show when can edit and status is active -->
                 <form method="post" action="{% url 'complaints:complaint_activate' pk=complaint.pk %}" class="contents">
                     {% csrf_token %}
-                    <button type="submit" 
+                    <button type="submit"
                         class="p-3 border-blue-200 bg-blue-50 rounded-xl hover:bg-blue-100 flex flex-col items-center gap-2 group transition col-span-2 mb-2"
                         {% if complaint.assigned_to == current_user %}disabled style="opacity: 0.5; cursor: not-allowed;"{% endif %}>
                         <i data-lucide="{% if complaint.assigned_to == current_user %}check-circle{% else %}play-circle{% endif %}" class="w-5 h-5 text-blue"></i>
@@ -342,7 +342,7 @@
                         </span>
                     </button>
                 </form>
-                
+
                 {% if complaint.assigned_to == current_user %}
                 <!-- Action buttons only shown when activated -->
                 <button onclick="showResolveModal()" class="p-3 border rounded-xl hover:bg-light flex flex-col items-center gap-2 group transition">
@@ -357,6 +357,11 @@
                     <i data-lucide="alert-triangle" class="w-5 h-5 text-red-500"></i>
                     <span class="text-[10px] font-bold text-red-600 uppercase">{% trans "Escalate" %}</span>
                 </button>
+                <!-- Close Button -->
+                <button onclick="showCloseModal()" class="p-3 border rounded-xl hover:bg-light flex flex-col items-center gap-2 group transition">
+                    <i data-lucide="circle-check" class="w-5 h-5 text-slate-600 group-hover:text-emerald-600"></i>
+                    <span class="text-[10px] font-bold uppercase text-slate-600">{% trans "Close" %}</span>
+                </button>
                 {% else %}
                 <!-- Show message that activation is required -->
                 <div class="col-span-2 bg-yellow-50 border border-yellow-200 rounded-xl p-3 text-center">
@@ -373,6 +378,7 @@
         </section>
         
         <!-- Staff Assignment -->
+         {% if complaint.is_activated %}
         <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
             <h3 class="font-bold text-navy mb-4 text-sm">
                 {% trans "Staff Assignment" %} ({{ complaint.involved_staff_count }})
@@ -413,8 +419,10 @@
             </div>
             {% endif %}
         </section>
+        {% endif %}
         
         <!-- Assignment Info -->
+         {% if complaint.is_activated %}
         <section class="bg-navy rounded-2xl p-6 shadow-lg text-white">
             <div class="flex items-center gap-3 mb-4">
                 <i data-lucide="info" class="w-5 h-5 text-blue"></i>
@@ -439,6 +447,7 @@
                 </li>
             </ul>
         </section>
+        {%endif%}
         
         <!-- Departments Summary -->
         {% if complaint.involved_departments_count > 0 %}
@@ -594,6 +603,35 @@
     </div>
 </div>
 
+<!-- Close Modal -->
+<div id="closeModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
+    <div class="bg-white rounded-2xl p-6 w-full max-w-lg mx-4 shadow-2xl">
+        <div class="flex items-center gap-3 mb-4">
+            <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center">
+                <i data-lucide="circle-check" class="w-5 h-5 text-emerald-600"></i>
+            </div>
+            <h3 class="text-xl font-bold text-navy">{% trans "Close Complaint" %}</h3>
+        </div>
+        <p class="text-slate mb-4 text-sm">{% trans "Close this complaint. This will trigger a satisfaction survey." %}</p>
+        <form method="post" action="{% url 'complaints:complaint_change_status' pk=complaint.pk %}">
+            {% csrf_token %}
+            <input type="hidden" name="status" value="closed">
+            <div class="mb-4">
+                <label class="block text-sm font-semibold text-slate mb-2">{% trans "Closing Note (Optional)" %}</label>
+                <textarea name="note" rows="3" class="w-full border border-slate-200 rounded-xl p-4 text-sm focus:ring-2 focus:ring-navy/20 outline-none" placeholder="{% trans 'Enter closing note...' %}"></textarea>
+            </div>
+            <div class="flex gap-3">
+                <button type="button" onclick="closeModal('closeModal')" class="flex-1 px-4 py-2 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-slate-50 transition">
+                    {% trans "Cancel" %}
+                </button>
+                <button type="submit" class="flex-1 px-4 py-2 bg-emerald-600 text-white rounded-xl font-semibold hover:bg-emerald-700 transition flex items-center justify-center gap-2">
+                    <i data-lucide="circle-check" class="w-4 h-4"></i> {% trans "Close Complaint" %}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
 <!-- Tab Switching JavaScript -->
 <script>
 function showActivationRequired() {
@@ -605,19 +643,19 @@ function switchTab(tabName) {
     document.querySelectorAll('.tab-panel').forEach(panel => {
         panel.classList.add('hidden');
     });
-    
+
     // Show selected panel
     document.getElementById('panel-' + tabName).classList.remove('hidden');
-    
+
     // Update tab styles
-    document.querySelectorAll('nav button').forEach(tab => {
+    document.querySelectorAll('main nav button').forEach(tab => {
         tab.classList.remove('tab-active');
         tab.classList.add('tab-inactive');
     });
-    
+
     document.getElementById('tab-' + tabName).classList.remove('tab-inactive');
     document.getElementById('tab-' + tabName).classList.add('tab-active');
-    
+
     // Reinitialize icons for newly visible content
     if (window.lucide) {
         lucide.createIcons();
@@ -641,6 +679,10 @@ function showEscalateModal() {
     document.getElementById('escalateModal').classList.remove('hidden');
 }
 
+function showCloseModal() {
+    document.getElementById('closeModal').classList.remove('hidden');
+}
+
 function closeModal(modalId) {
     document.getElementById(modalId).classList.add('hidden');
 }
diff --git a/templates/complaints/complaint_form.html b/templates/complaints/complaint_form.html
index 0423e92..e219c31 100644
--- a/templates/complaints/complaint_form.html
+++ b/templates/complaints/complaint_form.html
@@ -385,38 +385,8 @@
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
             <!-- Main Form Content -->
             <div class="lg:col-span-2 space-y-6">
-                <!-- Complaint Type Selection -->
-                <div class="form-section animate-in">
-                    <div class="form-section-header">
-                        <div class="section-icon">
-                            <i data-lucide="tag" class="w-5 h-5 text-blue-600"></i>
-                        </div>
-                        <h2>{% trans "Feedback Type" %}</h2>
-                    </div>
-
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <div class="type-card {% if form.complaint_type.value == 'complaint' or not form.complaint_type.value %}active{% endif %}"
-                             data-value="complaint" id="complaintTypeComplaint">
-                            <div class="type-card-icon complaint">
-                                <i data-lucide="alert-triangle" class="w-8 h-8 text-red-600"></i>
-                            </div>
-                            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Complaint" %}</h3>
-                            <p class="text-sm text-slate">{% trans "Report an issue or concern" %}</p>
-                        </div>
-                        <div class="type-card {% if form.complaint_type.value == 'appreciation' %}active{% endif %}"
-                             data-value="appreciation" id="complaintTypeAppreciation">
-                            <div class="type-card-icon appreciation">
-                                <i data-lucide="heart" class="w-8 h-8 text-green-600"></i>
-                            </div>
-                            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Appreciation" %}</h3>
-                            <p class="text-sm text-slate">{% trans "Share positive feedback" %}</p>
-                        </div>
-                    </div>
-                    <input type="hidden" name="complaint_type" id="complaintTypeInput"
-                           value="{% if form.complaint_type.value %}{{ form.complaint_type.value }}{% else %}complaint{% endif %}">
-                </div>
-
                 <!-- Patient Information -->
+                <input type="hidden" name="complaint_type" value="complaint">
                 <div class="form-section animate-in">
                     <div class="form-section-header">
                         <div class="section-icon">
@@ -503,17 +473,36 @@
                     </div>
 
                     <div class="space-y-5">
-                        <div>
-                            <label for="{{ form.complaint_source_type.id_for_label }}" class="form-label">
-                                {{ form.complaint_source_type.label }}
-                            </label>
-                            {{ form.complaint_source_type }}
-                            {% if form.complaint_source_type.errors %}
-                            <p class="form-error">
-                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
-                                {% for error in form.complaint_source_type.errors %}{{ error }}{% endfor %}
-                            </p>
-                            {% endif %}
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                            <div>
+                                <label for="{{ form.complaint_source_type.id_for_label }}" class="form-label">
+                                    {{ form.complaint_source_type.label }}
+                                </label>
+                                {{ form.complaint_source_type }}
+                                {% if form.complaint_source_type.errors %}
+                                <p class="form-error">
+                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                                    {% for error in form.complaint_source_type.errors %}{{ error }}{% endfor %}
+                                </p>
+                                {% endif %}
+                            </div>
+
+                            <div>
+                                <label for="{{ form.source.id_for_label }}" class="form-label">
+                                    {{ form.source.label }}
+                                </label>
+                                {{ form.source }}
+                                {% if form.source.errors %}
+                                <p class="form-error">
+                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                                    {% for error in form.source.errors %}{{ error }}{% endfor %}
+                                </p>
+                                {% endif %}
+                                <p class="text-xs text-slate mt-1">
+                                    <i data-lucide="info" class="w-3 h-3 inline mr-1"></i>
+                                    {% trans "Select if complaint is from a specific PX source" %}
+                                </p>
+                            </div>
                         </div>
 
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
diff --git a/templates/complaints/complaint_list.html b/templates/complaints/complaint_list.html
index 9353619..f3ed704 100644
--- a/templates/complaints/complaint_list.html
+++ b/templates/complaints/complaint_list.html
@@ -20,7 +20,10 @@
 <header class="mb-6">
     <div class="flex justify-between items-start">
         <div>
-            <h1 class="text-2xl font-bold text-navy">{% trans "Complaints Registry" %}</h1>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="message-square-warning" class="w-7 h-7 text-red-500"></i>
+                {% trans "Complaints Registry" %}
+            </h1>
             <p class="text-sm text-slate mt-1">{% trans "Manage and monitor patient feedback in real-time" %}</p>
         </div>
         <div class="flex items-center gap-3">
@@ -82,29 +85,34 @@
 </div>
 
 <!-- Filter Tabs -->
-<div class="bg-white px-6 py-4 rounded-t-2xl border-b flex items-center justify-between">
-    <div class="flex items-center gap-3">
-        <a href="?" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if not status_filter %}active{% endif %}">
-            {% trans "All Cases" %}
-        </a>
-        <a href="?status=open" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if status_filter == 'open' %}active{% endif %}">
-            {% trans "Pending" %}
-        </a>
-        <a href="?status=escalated" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if status_filter == 'escalated' %}active{% endif %}">
-            {% trans "Escalated" %}
-        </a>
-        <a href="?status=resolved" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if status_filter == 'resolved' %}active{% endif %}">
-            {% trans "Resolved" %}
-        </a>
-        <div class="h-4 w-[1px] bg-slate-200 mx-2"></div>
-        <button onclick="toggleFilters()" class="flex items-center gap-2 text-xs font-bold text-blue uppercase tracking-tight hover:underline">
-            <i data-lucide="filter" class="w-3 h-3"></i> {% trans "Advanced Filters" %}
-        </button>
+<div class="bg-white rounded-t-2xl shadow-sm border-2 border-slate-200">
+    <div class="px-6 py-4 border-b-2 border-slate-200 flex items-center justify-between bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="filter" class="w-5 h-5 text-navy"></i>
+            {% trans "Filters" %}
+        </h3>
+        <div class="flex items-center gap-3">
+            <a href="?" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if not status_filter %}active{% endif %}">
+                {% trans "All Cases" %}
+            </a>
+            <a href="?status=open" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if status_filter == 'open' %}active{% endif %}">
+                {% trans "Pending" %}
+            </a>
+            <a href="?status=escalated" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if status_filter == 'escalated' %}active{% endif %}">
+                {% trans "Escalated" %}
+            </a>
+            <a href="?status=resolved" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if status_filter == 'resolved' %}active{% endif %}">
+                {% trans "Resolved" %}
+            </a>
+            <div class="h-4 w-[1px] bg-slate-200 mx-2"></div>
+            <button onclick="toggleFilters()" class="flex items-center gap-2 text-xs font-bold text-blue uppercase tracking-tight hover:underline">
+                <i data-lucide="sliders-horizontal" class="w-3 h-3"></i> {% trans "Advanced" %}
+            </button>
+        </div>
     </div>
-    <p class="text-[10px] font-bold text-slate uppercase">
+    <p class="px-6 py-2 text-[10px] font-bold text-slate uppercase bg-slate-50 border-b-2 border-slate-200">
         {% trans "Showing:" %} <span class="text-navy">{{ complaints.start_index|default:0 }}-{{ complaints.end_index|default:0 }} {% trans "of" %} {{ complaints.paginator.count|default:0 }}</span>
     </p>
-</div>
 
 <!-- Advanced Filters (Hidden by default) -->
 <div id="advancedFilters" class="hidden bg-slate-50 px-6 py-4 border-b">
@@ -137,7 +145,13 @@
 </div>
 
 <!-- Complaints Table -->
-<div class="bg-white rounded-b-2xl shadow-sm border overflow-hidden">
+<div class="bg-white rounded-b-2xl shadow-sm border-2 border-slate-200 overflow-hidden border-t-0">
+    <div class="px-6 py-4 border-b-2 border-slate-200 bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="message-square-warning" class="w-5 h-5 text-red-500"></i>
+            {% trans "Complaints" %}
+        </h3>
+    </div>
     <table class="w-full text-left border-collapse">
         <thead class="bg-slate-50 border-b uppercase text-[10px] font-bold text-slate tracking-wider">
             <tr>
@@ -156,7 +170,7 @@
             <tr class="hover:bg-light/30 transition-colors cursor-pointer group" onclick="window.location.href='{% url 'complaints:complaint_detail' complaint.pk %}'">
                 <td class="px-6 py-4 font-bold text-navy">{{ complaint.reference_number }}</td>
                 <td class="px-6 py-4">
-                    <div class="font-semibold text-slate-800">{{ complaint.patient.get_full_name|default:complaint.contact_name }}</div>
+                    <div class="font-semibold text-slate-800">{{ complaint.patient.get_full_name|default:complaint.patient_name|default:complaint.contact_name }}</div>
                     {% if complaint.patient %}
                     <div class="text-[10px] text-slate font-medium">{% trans "MRN:" %} {{ complaint.patient.mrn|default:"-" }}</div>
                     {% endif %}
diff --git a/templates/complaints/partials/ai_panel.html b/templates/complaints/partials/ai_panel.html
index 9c94669..8e1b626 100644
--- a/templates/complaints/partials/ai_panel.html
+++ b/templates/complaints/partials/ai_panel.html
@@ -1,22 +1,23 @@
 {% load i18n %}
+{% load hospital_filters %}
 <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
     <h3 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
         <i data-lucide="bot" class="w-6 h-6"></i> {% trans "AI Analysis" %}
     </h3>
-    
+
     {% if complaint.emotion %}
     <div class="bg-gradient-to-r from-light to-blue-50 border border-blue-200 rounded-2xl p-6 mb-6">
         <h4 class="font-bold text-navy mb-4 flex items-center gap-2">
             <i data-lucide="cpu" class="w-5 h-5"></i> {% trans "Emotion Analysis" %}
         </h4>
-        
+
         <div class="flex items-center justify-between mb-4">
             <span class="px-4 py-2 bg-navy text-white rounded-xl font-bold flex items-center gap-2">
                 <i data-lucide="frown" class="w-5 h-5"></i> {{ complaint.get_emotion_display }}
             </span>
             <span class="text-slate">{% trans "Confidence" %}: {{ complaint.emotion_confidence_percent|floatformat:0 }}%</span>
         </div>
-        
+
         <div>
             <div class="flex justify-between text-sm mb-1">
                 <span class="text-slate">{% trans "Intensity" %}</span>
@@ -28,32 +29,180 @@
         </div>
     </div>
     {% endif %}
-    
+
     {% if complaint.short_description_en %}
     <div class="bg-light/50 border border-slate-200 rounded-2xl p-6 mb-6">
         <h4 class="font-bold text-navy mb-3">{% trans "AI Summary (English)" %}</h4>
         <p class="text-slate">{{ complaint.short_description_en }}</p>
     </div>
     {% endif %}
-    
+
     {% if complaint.short_description_ar %}
     <div class="bg-light/50 border border-slate-200 rounded-2xl p-6 mb-6">
         <h4 class="font-bold text-navy mb-3">{% trans "AI Summary (Arabic)" %}</h4>
         <p class="text-slate" dir="rtl">{{ complaint.short_description_ar }}</p>
     </div>
     {% endif %}
-    
-    {% if complaint.suggested_action_en %}
+
+    {% if complaint.suggested_actions %}
+    <div class="space-y-4">
+        <h4 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="lightbulb" class="w-5 h-5 text-blue-600"></i>
+            {% trans "Suggested Actions" %}
+        </h4>
+        
+        {% for action in complaint.suggested_actions %}
+        <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
+            <div class="flex items-start justify-between gap-4">
+                <div class="flex-1">
+                    <div class="flex items-center gap-2 mb-2 flex-wrap">
+                        <span class="px-2 py-1 
+                            {% if action.priority == 'high' %}bg-red-100 text-red-700
+                            {% elif action.priority == 'medium' %}bg-orange-100 text-orange-700
+                            {% else %}bg-green-100 text-green-700{% endif %}
+                            rounded-lg text-xs font-bold uppercase">
+                            <i data-lucide="flag" class="w-3 h-3 inline mr-1"></i>
+                            {{ action.priority }}
+                        </span>
+                        <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-lg text-xs font-bold">
+                            <i data-lucide="folder" class="w-3 h-3 inline mr-1"></i>
+                            {{ action.category|replace:"_: "|title }}
+                        </span>
+                    </div>
+                    <p class="text-slate font-medium">{{ action.action_en }}</p>
+                    {% if action.action_ar %}
+                    <p class="text-slate text-sm mt-2" dir="rtl">{{ action.action_ar }}</p>
+                    {% endif %}
+                </div>
+                {% if user.is_px_admin or user.is_hospital_admin %}
+                <button onclick="createAction('{{ action.action_en|escapejs }}', '{{ action.priority }}', '{{ action.category }}')" 
+                        class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue to-navy text-white rounded-lg font-semibold hover:from-navy hover:to-blue transition text-sm shadow-lg shadow-blue-200 whitespace-nowrap">
+                    <i data-lucide="plus-circle" class="w-4 h-4"></i>
+                    {% trans "Create Action" %}
+                </button>
+                {% endif %}
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    {% elif complaint.suggested_action_en %}
+    <!-- Fallback for old single-action format -->
     <div class="bg-blue-50 border border-blue-200 rounded-2xl p-6">
-        <h4 class="font-bold text-navy mb-3">{% trans "Suggested Action" %}</h4>
+        <div class="flex items-start justify-between gap-4 mb-3">
+            <h4 class="font-bold text-navy flex items-center gap-2">
+                <i data-lucide="lightbulb" class="w-5 h-5 text-blue-600"></i>
+                {% trans "Suggested Action" %}
+            </h4>
+            {% if user.is_px_admin or user.is_hospital_admin %}
+            <button onclick="createAction('{{ complaint.suggested_action_en|escapejs }}', 'medium', 'process_improvement')" 
+                    class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue to-navy text-white rounded-lg font-semibold hover:from-navy hover:to-blue transition text-sm shadow-lg shadow-blue-200">
+                <i data-lucide="plus-circle" class="w-4 h-4"></i>
+                {% trans "Create Action" %}
+            </button>
+            {% endif %}
+        </div>
         <p class="text-slate">{{ complaint.suggested_action_en }}</p>
     </div>
     {% endif %}
-    
-    {% if not complaint.emotion and not complaint.short_description_en %}
+
+    {% if not complaint.emotion and not complaint.short_description_en and not complaint.suggested_actions %}
     <div class="text-center py-12">
         <i data-lucide="bot" class="w-16 h-16 mx-auto text-slate-300 mb-4"></i>
         <p class="text-slate">{% trans "No AI analysis available for this complaint" %}</p>
     </div>
     {% endif %}
 </section>
+
+<script>
+function createAction(actionText, priority, category) {
+    // Show confirmation
+    if (!confirm('{% trans "Are you sure you want to create a PX Action from this suggestion?" %}')) {
+        return;
+    }
+    
+    // Get CSRF token from meta tag (more reliable)
+    function getCSRFToken() {
+        const metaTag = document.querySelector('[name=csrfmiddlewaretoken]');
+        if (metaTag) {
+            return metaTag.value;
+        }
+        
+        // Fallback to cookie
+        let cookieValue = null;
+        if (document.cookie && document.cookie !== '') {
+            const cookies = document.cookie.split(';');
+            for (let i = 0; i < cookies.length; i++) {
+                const cookie = cookies[i].trim();
+                if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+    
+    // Create action via AJAX
+    const csrftoken = getCSRFToken();
+    
+    if (!csrftoken) {
+        showAlert('error', '{% trans "CSRF token not found. Please refresh the page." %}');
+        return;
+    }
+    
+    fetch('{% url "actions:action_create_from_ai" complaint.id %}', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'X-CSRFToken': csrftoken,
+        },
+        body: new URLSearchParams({
+            'csrfmiddlewaretoken': csrftoken,
+            'action': actionText,
+            'priority': priority,
+            'category': category
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            // Show success message
+            showAlert('success', '{% trans "PX Action created successfully!" %}');
+            
+            // Reload page after short delay to show new action
+            setTimeout(() => {
+                window.location.reload();
+            }, 1500);
+        } else {
+            // Show error
+            showAlert('error', data.error || '{% trans "Failed to create action" %}');
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        showAlert('error', '{% trans "An error occurred while creating the action" %}');
+    });
+}
+
+function showAlert(type, message) {
+    const alert = document.createElement('div');
+    const bgColor = type === 'success' ? 'bg-emerald-500' : 'bg-red-500';
+    const icon = type === 'success' ? 'check-circle' : 'alert-circle';
+    
+    alert.className = `${bgColor} text-white px-6 py-4 rounded-xl shadow-xl z-50 flex items-center gap-3 fixed top-4 right-4`;
+    alert.innerHTML = `
+        <i data-lucide="${icon}" class="w-5 h-5"></i>
+        <span class="font-semibold">${message}</span>
+        <button type="button" onclick="this.parentElement.remove()" class="text-white/80 hover:text-white">
+            <i data-lucide="x" class="w-4 h-4"></i>
+        </button>
+    `;
+    
+    document.body.appendChild(alert);
+    lucide.createIcons();
+    
+    setTimeout(() => {
+        alert.remove();
+    }, 5000);
+}
+</script>
diff --git a/templates/dashboard/admin_evaluation.html b/templates/dashboard/admin_evaluation.html
index 1b4b5be..d578d2a 100644
--- a/templates/dashboard/admin_evaluation.html
+++ b/templates/dashboard/admin_evaluation.html
@@ -3,292 +3,473 @@
 
 {% block title %}{% trans "Admin Evaluation" %} - PX360{% endblock %}
 
-{% block page_title %}{% trans "Admin Evaluation Dashboard" %}{% endblock %}
+{% block extra_css %}
+<style>
+    /* PX360 App Theme Variables */
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+        --hh-success: #10b981;
+        --hh-warning: #f59e0b;
+        --hh-danger: #ef4444;
+    }
+
+    /* Page Header */
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 2rem 2.5rem;
+        border-radius: 1rem;
+        margin-bottom: 2rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .page-header-gradient::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 200px;
+        height: 200px;
+        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+    }
+
+    /* Section Cards */
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+    }
+
+    /* KPI Cards */
+    .kpi-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        padding: 1.25rem;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s ease;
+        height: 100%;
+    }
+    .kpi-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        border-color: #005696;
+    }
+
+    .kpi-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .kpi-value {
+        font-size: 1.75rem;
+        font-weight: 800;
+        color: #1e293b;
+    }
+
+    .kpi-label {
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: #64748b;
+        text-transform: uppercase;
+        letter-spacing: 0.025em;
+    }
+
+    /* Form Styling */
+    .form-select-px360 {
+        background: white;
+        border: 2px solid #e2e8f0;
+        border-radius: 0.75rem;
+        padding: 0.625rem 1rem;
+        color: #1e293b;
+        font-size: 0.875rem;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+    .form-select-px360:hover {
+        border-color: #005696;
+    }
+    .form-select-px360:focus {
+        outline: none;
+        border-color: #005696;
+        box-shadow: 0 0 0 3px rgba(0, 86, 150, 0.1);
+    }
+
+    /* Chart Cards */
+    .chart-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        overflow: hidden;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s ease;
+    }
+    .chart-card:hover {
+        border-color: #005696;
+    }
+
+    .chart-header {
+        background: linear-gradient(135deg, #f8fafc, #eef6fb);
+        padding: 1rem 1.25rem;
+        border-bottom: 2px solid #e2e8f0;
+    }
+
+    /* Data Tables */
+    .data-table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+    .data-table th {
+        background: #f8fafc;
+        border-bottom: 2px solid #e2e8f0;
+        padding: 0.875rem 1rem;
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: #64748b;
+        text-align: left;
+    }
+    .data-table td {
+        border-bottom: 1px solid #e2e8f0;
+        padding: 0.875rem 1rem;
+        color: #1e293b;
+    }
+    .data-table tr:hover td {
+        background: #f8fafc;
+    }
+
+    /* Tab Styles */
+    .tab-btn {
+        padding: 0.625rem 1.25rem;
+        border-radius: 0.75rem;
+        font-weight: 600;
+        font-size: 0.875rem;
+        transition: all 0.2s;
+        border: 2px solid transparent;
+    }
+    .tab-btn.active {
+        background-color: #005696;
+        color: white;
+    }
+    .tab-btn:not(.active) {
+        background-color: white;
+        color: #64748b;
+        border-color: #e2e8f0;
+    }
+    .tab-btn:not(.active):hover {
+        border-color: #005696;
+        color: #005696;
+    }
+
+    /* Status Badges */
+    .badge {
+        padding: 0.25rem 0.75rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 600;
+    }
+    .badge-blue { background: #dbeafe; color: #1d4ed8; }
+    .badge-green { background: #d1fae5; color: #047857; }
+    .badge-orange { background: #fef3c7; color: #b45309; }
+    .badge-yellow { background: #fef9c3; color: #a16207; }
+    .badge-red { background: #fee2e2; color: #b91c1c; }
+
+    /* Animations */
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-in {
+        animation: fadeIn 0.4s ease-out forwards;
+    }
+    .delay-100 { animation-delay: 100ms; }
+    .delay-200 { animation-delay: 200ms; }
+    .delay-300 { animation-delay: 300ms; }
+</style>
+{% endblock %}
 
 {% block content %}
-<div class="space-y-6">
+<div class="px-4 py-6 max-w-[1600px] mx-auto">
+    
     <!-- Page Header -->
-    <header class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-        <div>
-            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
-                <i data-lucide="shield-check" class="w-7 h-7"></i>
-                {% trans "Admin Evaluation Dashboard" %}
-            </h1>
-            <p class="text-sm text-slate mt-1">{% trans "Staff performance analysis for complaints and inquiries" %}</p>
+    <div class="page-header-gradient animate-in">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 relative z-10">
+            <div>
+                <h1 class="text-2xl font-bold flex items-center gap-3">
+                    <i data-lucide="shield-check" class="w-8 h-8"></i>
+                    {% trans "Admin Evaluation" %}
+                </h1>
+                <p class="mt-1 opacity-90">{% trans "Staff performance analysis for complaints and inquiries" %}</p>
+            </div>
+            <div class="text-right">
+                <p class="text-xs opacity-70 uppercase tracking-wider">{% trans "Last Updated" %}</p>
+                <p class="text-sm font-bold">{% now "j M Y, H:i" %}</p>
+            </div>
         </div>
-        <div class="text-right">
-            <p class="text-xs text-slate uppercase tracking-wider">{% trans "Last Updated" %}</p>
-            <p class="text-sm font-bold text-navy">{% now "j M Y, H:i" %}</p>
-        </div>
-    </header>
+    </div>
 
     <!-- Filters -->
-    <div class="card">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            <!-- Date Range -->
-            <div>
-                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Date Range" %}</label>
-                <select class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition" id="dateRange">
-                    <option value="7d" {% if date_range == '7d' %}selected{% endif %}>{% trans "Last 7 Days" %}</option>
-                    <option value="30d" {% if date_range == '30d' %}selected{% endif %}>{% trans "Last 30 Days" %}</option>
-                    <option value="90d" {% if date_range == '90d' %}selected{% endif %}>{% trans "Last 90 Days" %}</option>
-                </select>
-            </div>
+    <div class="section-card mb-6 animate-in delay-100">
+        <div class="section-header">
+            <h3 class="font-bold text-navy flex items-center gap-2">
+                <i data-lucide="filter" class="w-5 h-5"></i>
+                {% trans "Filters" %}
+            </h3>
+        </div>
+        <div class="p-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <!-- Date Range -->
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Date Range" %}</label>
+                    <select class="form-select-px360 w-full" id="dateRange">
+                        <option value="7d" {% if date_range == '7d' %}selected{% endif %}>{% trans "Last 7 Days" %}</option>
+                        <option value="30d" {% if date_range == '30d' %}selected{% endif %}>{% trans "Last 30 Days" %}</option>
+                        <option value="90d" {% if date_range == '90d' %}selected{% endif %}>{% trans "Last 90 Days" %}</option>
+                    </select>
+                </div>
 
-            <!-- Hospital Filter (PX Admins only) -->
-            {% if hospitals.exists %}
-            <div>
-                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Hospital" %}</label>
-                <select class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition" id="hospitalFilter">
-                    <option value="">{% trans "All Hospitals" %}</option>
-                    {% for hospital in hospitals %}
-                    <option value="{{ hospital.id }}" {% if selected_hospital_id == hospital.id|stringformat:"s" %}selected{% endif %}>
-                        {{ hospital.name }}
-                    </option>
-                    {% endfor %}
-                </select>
-            </div>
-            {% endif %}
+                <!-- Hospital Filter -->
+                {% if hospitals.exists %}
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Hospital" %}</label>
+                    <select class="form-select-px360 w-full" id="hospitalFilter">
+                        <option value="">{% trans "All Hospitals" %}</option>
+                        {% for hospital in hospitals %}
+                        <option value="{{ hospital.id }}" {% if selected_hospital_id == hospital.id|stringformat:"s" %}selected{% endif %}>
+                            {{ hospital.name }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                {% endif %}
 
-            <!-- Department Filter -->
-            <div>
-                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Department" %}</label>
-                <select class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition disabled:bg-gray-50 disabled:cursor-not-allowed" id="departmentFilter" {% if not selected_hospital_id and not request.user.hospital %}disabled{% endif %}>
-                    <option value="">{% trans "All Departments" %}</option>
-                    {% for department in departments %}
-                    <option value="{{ department.id }}" {% if selected_department_id == department.id|stringformat:"s" %}selected{% endif %}>
-                        {{ department.name }}
-                    </option>
-                    {% endfor %}
-                </select>
-            </div>
+                <!-- Department Filter -->
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Department" %}</label>
+                    <select class="form-select-px360 w-full" id="departmentFilter" {% if not selected_hospital_id and not request.user.hospital %}disabled{% endif %}>
+                        <option value="">{% trans "All Departments" %}</option>
+                        {% for department in departments %}
+                        <option value="{{ department.id }}" {% if selected_department_id == department.id|stringformat:"s" %}selected{% endif %}>
+                            {{ department.name }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
 
-            <!-- Staff Multi-Select -->
-            <div>
-                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Compare Staff" %}</label>
-                <select class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition h-[42px]" id="staffFilter" multiple>
-                    {% for staff in staff_list %}
-                    <option value="{{ staff.id }}" {% if staff.id|stringformat:"s" in selected_staff_ids %}selected{% endif %}>
-                        {{ staff.first_name }} {{ staff.last_name }}
-                    </option>
-                    {% endfor %}
-                </select>
-                <button id="applyStaffFilter" class="mt-2 w-full px-4 py-2 bg-light0 text-white rounded-xl font-semibold hover:bg-navy transition">
-                    {% trans "Apply Staff Filter" %}
-                </button>
+                <!-- Staff Filter -->
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Compare Staff" %}</label>
+                    <select class="form-select-px360 w-full h-[42px]" id="staffFilter" multiple>
+                        {% for staff in staff_list %}
+                        <option value="{{ staff.id }}" {% if staff.id|stringformat:"s" in selected_staff_ids %}selected{% endif %}>
+                            {{ staff.first_name }} {{ staff.last_name }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                    <button id="applyStaffFilter" class="mt-2 w-full px-4 py-2 bg-navy hover:bg-blue-700 text-white rounded-xl font-bold transition text-sm">
+                        {% trans "Apply Filter" %}
+                    </button>
+                </div>
             </div>
         </div>
     </div>
 
     <!-- Action Buttons -->
-    <div class="flex flex-wrap gap-3">
-        <a href="{% url 'dashboard:department_benchmarks' %}?date_range={{ date_range }}" class="inline-flex items-center gap-2 px-4 py-2 border-2 border-navy text-navy rounded-lg font-semibold hover:bg-light transition">
+    <div class="flex flex-wrap gap-3 mb-6 animate-in delay-100">
+        <a href="{% url 'dashboard:department_benchmarks' %}?date_range={{ date_range }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-navy text-navy rounded-xl font-bold hover:bg-light transition text-sm">
             <i data-lucide="bar-chart-2" class="w-4 h-4"></i>
             {% trans "Department Benchmarks" %}
         </a>
-        <button onclick="exportReport('csv')" class="inline-flex items-center gap-2 px-4 py-2 border-2 border-green-500 text-green-500 rounded-lg font-semibold hover:bg-green-50 transition">
+        <button onclick="exportReport('csv')" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-emerald-500 text-emerald-600 rounded-xl font-bold hover:bg-emerald-50 transition text-sm">
             <i data-lucide="download" class="w-4 h-4"></i>
             {% trans "Export CSV" %}
         </button>
-        <button onclick="exportReport('json')" class="inline-flex items-center gap-2 px-4 py-2 border-2 border-blue-500 text-blue-500 rounded-lg font-semibold hover:bg-blue-50 transition">
+        <button onclick="exportReport('json')" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-purple-500 text-purple-600 rounded-xl font-bold hover:bg-purple-50 transition text-sm">
             <i data-lucide="file-code" class="w-4 h-4"></i>
             {% trans "Export JSON" %}
         </button>
     </div>
 
-    <!-- Summary Cards -->
-    <div id="summaryCards" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        {% if performance_data.staff_metrics %}
-        <div class="card stat-card">
+    {% if performance_data.staff_metrics %}
+    <!-- KPI Cards -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6 animate-in delay-100">
+        <!-- Total Staff -->
+        <div class="kpi-card">
             <div class="flex items-start justify-between">
                 <div>
-                    <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Total Staff" %}</p>
-                    <p class="text-3xl font-bold text-navy">{{ performance_data.staff_metrics|length }}</p>
+                    <p class="kpi-label mb-1">{% trans "Total Staff" %}</p>
+                    <p class="kpi-value">{{ performance_data.staff_metrics|length }}</p>
                     <div class="flex items-center gap-1.5 mt-2">
                         <i data-lucide="building" class="w-4 h-4 text-blue"></i>
                         <span class="text-sm text-slate">{% trans "Active Staff" %}</span>
                     </div>
                 </div>
-                <div class="p-3 bg-blue-50 rounded-xl">
-                    <i data-lucide="users" class="w-6 h-6 text-blue"></i>
+                <div class="kpi-icon" style="background: linear-gradient(135deg, #dbeafe, #bfdbfe);">
+                    <i data-lucide="users" class="w-6 h-6 text-blue-600"></i>
                 </div>
             </div>
         </div>
 
-        <div class="card stat-card">
+        <!-- Total Complaints -->
+        <div class="kpi-card">
             <div class="flex items-start justify-between">
                 <div>
-                    <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Total Complaints" %}</p>
-                    <p class="text-3xl font-bold text-navy" id="totalComplaints">0</p>
+                    <p class="kpi-label mb-1">{% trans "Total Complaints" %}</p>
+                    <p class="kpi-value" id="totalComplaints">0</p>
                     <div class="flex items-center gap-1.5 mt-2">
                         <i data-lucide="trending-up" class="w-4 h-4 text-red-500"></i>
                         <span class="text-xs text-slate">{% trans "Requires Attention" %}</span>
                     </div>
                 </div>
-                <div class="p-3 bg-red-50 rounded-xl">
-                    <i data-lucide="alert-triangle" class="w-6 h-6 text-red-500"></i>
+                <div class="kpi-icon" style="background: linear-gradient(135deg, #fee2e2, #fecaca);">
+                    <i data-lucide="alert-triangle" class="w-6 h-6 text-red-600"></i>
                 </div>
             </div>
         </div>
 
-        <div class="card stat-card">
+        <!-- Total Inquiries -->
+        <div class="kpi-card">
             <div class="flex items-start justify-between">
                 <div>
-                    <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Total Inquiries" %}</p>
-                    <p class="text-3xl font-bold text-navy" id="totalInquiries">0</p>
+                    <p class="kpi-label mb-1">{% trans "Total Inquiries" %}</p>
+                    <p class="kpi-value" id="totalInquiries">0</p>
                     <div class="flex items-center gap-1.5 mt-2">
                         <i data-lucide="message-circle" class="w-4 h-4 text-blue"></i>
                         <span class="text-xs text-slate">{% trans "Open Requests" %}</span>
                     </div>
                 </div>
-                <div class="p-3 bg-blue-50 rounded-xl">
-                    <i data-lucide="message-circle" class="w-6 h-6 text-blue"></i>
+                <div class="kpi-icon" style="background: linear-gradient(135deg, #dbeafe, #bfdbfe);">
+                    <i data-lucide="message-circle" class="w-6 h-6 text-blue-600"></i>
                 </div>
             </div>
         </div>
 
-        <div class="card stat-card">
+        <!-- Resolution Rate -->
+        <div class="kpi-card">
             <div class="flex items-start justify-between">
                 <div>
-                    <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Resolution Rate" %}</p>
-                    <p class="text-3xl font-bold text-navy" id="resolutionRate">0%</p>
+                    <p class="kpi-label mb-1">{% trans "Resolution Rate" %}</p>
+                    <p class="kpi-value" id="resolutionRate">0%</p>
                     <div class="flex items-center gap-1.5 mt-2">
-                        <i data-lucide="trending-up" class="w-4 h-4 text-green-500"></i>
-                        <span class="text-sm font-bold text-green-500">{% trans "Performance" %}</span>
+                        <i data-lucide="trending-up" class="w-4 h-4 text-emerald-500"></i>
+                        <span class="text-sm font-bold text-emerald-600">{% trans "Performance" %}</span>
                     </div>
                 </div>
-                <div class="p-3 bg-green-50 rounded-xl">
-                    <i data-lucide="check-circle" class="w-6 h-6 text-green-500"></i>
+                <div class="kpi-icon" style="background: linear-gradient(135deg, #d1fae5, #a7f3d0);">
+                    <i data-lucide="check-circle" class="w-6 h-6 text-emerald-600"></i>
                 </div>
             </div>
         </div>
-        {% else %}
-        <div class="col-span-full card">
-            <div class="flex flex-col items-center justify-center py-8 text-center">
-                <div class="bg-blue-50 w-16 h-16 rounded-full flex items-center justify-center mb-4">
-                    <i data-lucide="info" class="w-8 h-8 text-blue"></i>
-                </div>
-                <p class="text-sm text-slate">{% trans "No staff members with assigned complaints or inquiries found in the selected time period." %}</p>
-            </div>
-        </div>
-        {% endif %}
     </div>
 
-    <!-- Tabs -->
-    {% if performance_data.staff_metrics %}
-    <div class="card">
-        <div class="border-b border-slate-100">
-            <nav class="flex gap-1" id="evaluationTabs">
-                <button class="px-6 py-3 rounded-lg font-semibold bg-navy text-white" data-tab="complaints" id="complaints-tab">
+    <!-- Main Dashboard Panel -->
+    <div class="section-card animate-in delay-200">
+        <!-- Tabs -->
+        <div class="section-header">
+            <nav class="flex gap-2" id="evaluationTabs">
+                <button class="tab-btn active flex items-center gap-2" data-tab="complaints" id="complaints-tab">
+                    <i data-lucide="message-square-warning" class="w-4 h-4"></i>
                     {% trans "Complaints" %}
                 </button>
-                <button class="px-6 py-3 rounded-lg font-semibold text-slate hover:text-navy hover:bg-light transition" data-tab="inquiries" id="inquiries-tab">
+                <button class="tab-btn flex items-center gap-2" data-tab="inquiries" id="inquiries-tab">
+                    <i data-lucide="help-circle" class="w-4 h-4"></i>
                     {% trans "Inquiries" %}
                 </button>
             </nav>
         </div>
 
         <!-- Complaints Tab Content -->
-        <div id="complaints-content" class="tab-content">
+        <div id="complaints-content" class="tab-content p-6">
             <!-- Charts Row 1 -->
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-                <div class="card">
-                    <div class="card-header">
-                        <h3 class="card-title flex items-center gap-2">
-                            <i data-lucide="pie-chart" class="w-4 h-4"></i>
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <h3 class="font-bold text-navy flex items-center gap-2">
+                            <i data-lucide="pie-chart" class="w-5 h-5"></i>
                             {% trans "Complaint Source Breakdown" %}
                         </h3>
                     </div>
-                    <div class="h-[320px]">
-                        <canvas id="complaintSourceChart"></canvas>
+                    <div class="p-4">
+                        <canvas id="complaintSourceChart" class="h-64 w-full"></canvas>
                     </div>
                 </div>
-                <div class="card">
-                    <div class="card-header">
-                        <h3 class="card-title flex items-center gap-2">
-                            <i data-lucide="bar-chart-2" class="w-4 h-4"></i>
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <h3 class="font-bold text-navy flex items-center gap-2">
+                            <i data-lucide="bar-chart-2" class="w-5 h-5"></i>
                             {% trans "Complaint Status Distribution" %}
                         </h3>
                     </div>
-                    <div class="h-[320px]">
-                        <canvas id="complaintStatusChart"></canvas>
+                    <div class="p-4">
+                        <canvas id="complaintStatusChart" class="h-64 w-full"></canvas>
                     </div>
                 </div>
             </div>
 
-            <!-- Charts Row 2 -->
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-                <div class="card">
-                    <div class="card-header">
-                        <h3 class="card-title flex items-center gap-2">
-                            <i data-lucide="clock" class="w-4 h-4"></i>
-                            {% trans "Complaint Activation Time" %}
-                        </h3>
-                        <p class="text-sm text-slate">{% trans "Time from creation to assignment" %}</p>
-                    </div>
-                    <div class="h-[320px]">
-                        <canvas id="complaintActivationChart"></canvas>
-                    </div>
-                </div>
-                <div class="card">
-                    <div class="card-header">
-                        <h3 class="card-title flex items-center gap-2">
-                            <i data-lucide="gauge" class="w-4 h-4"></i>
-                            {% trans "Complaint Response Time" %}
-                        </h3>
-                        <p class="text-sm text-slate">{% trans "Time to first response/update" %}</p>
-                    </div>
-                    <div class="h-[320px]">
-                        <canvas id="complaintResponseChart"></canvas>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Staff Comparison Table -->
-            <div class="card">
-                <div class="card-header">
-                    <h3 class="card-title flex items-center gap-2">
-                        <i data-lucide="users" class="w-4 h-4"></i>
+            <!-- Staff Performance Table -->
+            <div class="section-card">
+                <div class="section-header">
+                    <h3 class="font-bold text-navy flex items-center gap-2">
+                        <i data-lucide="users" class="w-5 h-5"></i>
                         {% trans "Staff Complaint Performance" %}
                     </h3>
                 </div>
                 <div class="overflow-x-auto">
-                    <table class="w-full">
-                        <thead class="bg-light">
+                    <table class="data-table">
+                        <thead>
                             <tr>
-                                <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Staff Name" %}</th>
-                                <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Hospital" %}</th>
-                                <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Department" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Total" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Internal" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "External" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Open" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Resolved" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Activation ≤2h" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Response ≤24h" %}</th>
+                                <th>{% trans "Staff Name" %}</th>
+                                <th>{% trans "Hospital" %}</th>
+                                <th>{% trans "Department" %}</th>
+                                <th class="text-center">{% trans "Total" %}</th>
+                                <th class="text-center">{% trans "Internal" %}</th>
+                                <th class="text-center">{% trans "External" %}</th>
+                                <th class="text-center">{% trans "Open" %}</th>
+                                <th class="text-center">{% trans "Resolved" %}</th>
                             </tr>
                         </thead>
-                        <tbody class="divide-y divide-slate-100">
+                        <tbody>
                             {% for staff in performance_data.staff_metrics %}
-                            <tr class="hover:bg-light transition">
-                                <td class="px-6 py-4">
-                                    <a href="{% url 'dashboard:staff_performance_detail' staff.id %}?date_range={{ date_range }}" class="font-bold text-navy hover:text-blue transition group">
+                            <tr>
+                                <td class="font-bold text-navy">
+                                    <a href="{% url 'dashboard:staff_performance_detail' staff.id %}?date_range={{ date_range }}" class="hover:text-blue transition">
                                         {{ staff.name }}
                                     </a>
                                 </td>
-                                <td class="px-6 py-4 text-sm text-slate">{{ staff.hospital|default:"-" }}</td>
-                                <td class="px-6 py-4 text-sm text-slate">{{ staff.department|default:"-" }}</td>
-                                <td class="px-6 py-4 text-center font-bold text-navy">{{ staff.complaints.total }}</td>
-                                <td class="px-6 py-4 text-center">{{ staff.complaints.internal }}</td>
-                                <td class="px-6 py-4 text-center">{{ staff.complaints.external }}</td>
-                                <td class="px-6 py-4 text-center">
-                                    <span class="px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-600">{{ staff.complaints.status.open }}</span>
+                                <td class="text-slate">{{ staff.hospital|default:"-" }}</td>
+                                <td class="text-slate">{{ staff.department|default:"-" }}</td>
+                                <td class="text-center font-bold">{{ staff.complaints.total }}</td>
+                                <td class="text-center">{{ staff.complaints.internal }}</td>
+                                <td class="text-center">{{ staff.complaints.external }}</td>
+                                <td class="text-center">
+                                    <span class="badge badge-yellow">{{ staff.complaints.status.open }}</span>
                                 </td>
-                                <td class="px-6 py-4 text-center">
-                                    <span class="px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-600">{{ staff.complaints.status.resolved }}</span>
+                                <td class="text-center">
+                                    <span class="badge badge-green">{{ staff.complaints.status.resolved }}</span>
                                 </td>
-                                <td class="px-6 py-4 text-center">{{ staff.complaints.activation_time.within_2h }}</td>
-                                <td class="px-6 py-4 text-center">{{ staff.complaints.response_time.within_24h }}</td>
                             </tr>
                             {% endfor %}
                         </tbody>
@@ -298,73 +479,66 @@
         </div>
 
         <!-- Inquiries Tab Content -->
-        <div id="inquiries-content" class="tab-content hidden">
+        <div id="inquiries-content" class="tab-content hidden p-6">
             <!-- Charts Row -->
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-                <div class="card">
-                    <div class="card-header">
-                        <h3 class="card-title flex items-center gap-2">
-                            <i data-lucide="bar-chart-2" class="w-4 h-4"></i>
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <h3 class="font-bold text-navy flex items-center gap-2">
+                            <i data-lucide="bar-chart-2" class="w-5 h-5"></i>
                             {% trans "Inquiry Status Distribution" %}
                         </h3>
                     </div>
-                    <div class="h-[320px]">
-                        <canvas id="inquiryStatusChart"></canvas>
+                    <div class="p-4">
+                        <canvas id="inquiryStatusChart" class="h-64 w-full"></canvas>
                     </div>
                 </div>
-                <div class="card">
-                    <div class="card-header">
-                        <h3 class="card-title flex items-center gap-2">
-                            <i data-lucide="gauge" class="w-4 h-4"></i>
+                <div class="chart-card">
+                    <div class="chart-header">
+                        <h3 class="font-bold text-navy flex items-center gap-2">
+                            <i data-lucide="gauge" class="w-5 h-5"></i>
                             {% trans "Inquiry Response Time" %}
                         </h3>
-                        <p class="text-sm text-slate">{% trans "Time to first response/update" %}</p>
                     </div>
-                    <div class="h-[320px]">
-                        <canvas id="inquiryResponseChart"></canvas>
+                    <div class="p-4">
+                        <canvas id="inquiryResponseChart" class="h-64 w-full"></canvas>
                     </div>
                 </div>
             </div>
 
-            <!-- Staff Comparison Table -->
-            <div class="card">
-                <div class="card-header">
-                    <h3 class="card-title flex items-center gap-2">
-                        <i data-lucide="users" class="w-4 h-4"></i>
+            <!-- Staff Performance Table -->
+            <div class="section-card">
+                <div class="section-header">
+                    <h3 class="font-bold text-navy flex items-center gap-2">
+                        <i data-lucide="users" class="w-5 h-5"></i>
                         {% trans "Staff Inquiry Performance" %}
                     </h3>
                 </div>
                 <div class="overflow-x-auto">
-                    <table class="w-full">
-                        <thead class="bg-light">
+                    <table class="data-table">
+                        <thead>
                             <tr>
-                                <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Staff Name" %}</th>
-                                <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Hospital" %}</th>
-                                <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Department" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Total" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Open" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Resolved" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Response ≤24h" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Response ≤48h" %}</th>
-                                <th class="px-6 py-4 text-center text-xs font-bold text-slate uppercase tracking-wider">{% trans "Response ≤72h" %}</th>
+                                <th>{% trans "Staff Name" %}</th>
+                                <th>{% trans "Hospital" %}</th>
+                                <th>{% trans "Department" %}</th>
+                                <th class="text-center">{% trans "Total" %}</th>
+                                <th class="text-center">{% trans "Open" %}</th>
+                                <th class="text-center">{% trans "Resolved" %}</th>
                             </tr>
                         </thead>
-                        <tbody class="divide-y divide-slate-100">
+                        <tbody>
                             {% for staff in performance_data.staff_metrics %}
-                            <tr class="hover:bg-light transition">
-                                <td class="px-6 py-4 font-bold text-navy">{{ staff.name }}</td>
-                                <td class="px-6 py-4 text-sm text-slate">{{ staff.hospital|default:"-" }}</td>
-                                <td class="px-6 py-4 text-sm text-slate">{{ staff.department|default:"-" }}</td>
-                                <td class="px-6 py-4 text-center font-bold text-navy">{{ staff.inquiries.total }}</td>
-                                <td class="px-6 py-4 text-center">
-                                    <span class="px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-600">{{ staff.inquiries.status.open }}</span>
+                            <tr>
+                                <td class="font-bold text-navy">{{ staff.name }}</td>
+                                <td class="text-slate">{{ staff.hospital|default:"-" }}</td>
+                                <td class="text-slate">{{ staff.department|default:"-" }}</td>
+                                <td class="text-center font-bold">{{ staff.inquiries.total }}</td>
+                                <td class="text-center">
+                                    <span class="badge badge-yellow">{{ staff.inquiries.status.open }}</span>
                                 </td>
-                                <td class="px-6 py-4 text-center">
-                                    <span class="px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-600">{{ staff.inquiries.status.resolved }}</span>
+                                <td class="text-center">
+                                    <span class="badge badge-green">{{ staff.inquiries.status.resolved }}</span>
                                 </td>
-                                <td class="px-6 py-4 text-center">{{ staff.inquiries.response_time.within_24h }}</td>
-                                <td class="px-6 py-4 text-center">{{ staff.inquiries.response_time.within_48h }}</td>
-                                <td class="px-6 py-4 text-center">{{ staff.inquiries.response_time.within_72h }}</td>
                             </tr>
                             {% endfor %}
                         </tbody>
@@ -373,7 +547,17 @@
             </div>
         </div>
     </div>
+    {% else %}
+    <!-- No Data State -->
+    <div class="section-card p-12 text-center animate-in delay-100">
+        <div class="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-6">
+            <i data-lucide="users" class="w-10 h-10 text-blue"></i>
+        </div>
+        <h3 class="text-xl font-bold text-navy mb-2">{% trans "No Data Available" %}</h3>
+        <p class="text-slate max-w-md mx-auto">{% trans "No staff members with assigned complaints or inquiries found in the selected time period." %}</p>
+    </div>
     {% endif %}
+
 </div>
 {% endblock %}
 
@@ -382,26 +566,17 @@
 {{ performance_data|json_script:"performanceData" }}
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize Lucide icons
     lucide.createIcons();
 
     // Tab switching
     const tabs = document.querySelectorAll('#evaluationTabs button[data-tab]');
     const contents = document.querySelectorAll('.tab-content');
-    
+
     tabs.forEach(tab => {
         tab.addEventListener('click', function() {
             const tabName = this.dataset.tab;
-            
-            // Update tab buttons
-            tabs.forEach(t => {
-                t.classList.remove('bg-light0', 'text-white');
-                t.classList.add('text-gray-500', 'hover:bg-gray-100');
-            });
-            this.classList.remove('text-gray-500', 'hover:bg-gray-100');
-            this.classList.add('bg-light0', 'text-white');
-            
-            // Show/hide content
+            tabs.forEach(t => t.classList.remove('active'));
+            this.classList.add('active');
             contents.forEach(content => {
                 if (content.id === `${tabName}-content`) {
                     content.classList.remove('hidden');
@@ -412,363 +587,160 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
 
-    // Helper function to get safe numeric value
-    function getSafeNumber(obj, path, defaultValue = 0) {
-        if (!obj) return defaultValue;
-        const parts = path.split('.');
-        let value = obj;
-        for (const part of parts) {
-            if (value === null || value === undefined) return defaultValue;
-            value = value[part];
-        }
-        if (typeof value !== 'number' || isNaN(value) || !isFinite(value)) {
-            return defaultValue;
-        }
-        return value;
+    // Initialize charts
+    const performanceData = JSON.parse(document.getElementById('performanceData').textContent);
+    if (performanceData && performanceData.staff_metrics) {
+        initCharts(performanceData);
+        updateSummaryCards(performanceData);
     }
-
-    // Calculate and display summary card statistics
-    const performanceDataEl = document.getElementById('performanceData');
-    if (performanceDataEl) {
-        const performanceData = JSON.parse(performanceDataEl.textContent);
-        const staffMetrics = performanceData.staff_metrics || [];
-        
-        let totalComplaints = 0;
-        let resolvedComplaints = 0;
-        let totalInquiries = 0;
-        
-        staffMetrics.forEach(staff => {
-            const complaints = staff.complaints || {};
-            const inquiries = staff.inquiries || {};
-            
-            totalComplaints += getSafeNumber(complaints, 'total', 0);
-            resolvedComplaints += getSafeNumber(complaints.status, 'resolved', 0);
-            totalInquiries += getSafeNumber(inquiries, 'total', 0);
-        });
-        
-        const resolutionRate = totalComplaints > 0 ? Math.round((resolvedComplaints / totalComplaints) * 100) : 0;
-        
-        const totalComplaintsEl = document.getElementById('totalComplaints');
-        const totalInquiriesEl = document.getElementById('totalInquiries');
-        const resolutionRateEl = document.getElementById('resolutionRate');
-        
-        if (totalComplaintsEl) totalComplaintsEl.textContent = totalComplaints;
-        if (totalInquiriesEl) totalInquiriesEl.textContent = totalInquiries;
-        if (resolutionRateEl) resolutionRateEl.textContent = resolutionRate + '%';
-    }
-    
-    // Filter change handlers
-    const dateRange = document.getElementById('dateRange');
-    const hospitalFilter = document.getElementById('hospitalFilter');
-    const departmentFilter = document.getElementById('departmentFilter');
-    const staffFilter = document.getElementById('staffFilter');
-
-    function applyFilters() {
-        const params = new URLSearchParams();
-        params.set('date_range', dateRange.value);
-        if (hospitalFilter && hospitalFilter.value) {
-            params.set('hospital_id', hospitalFilter.value);
-        }
-        if (departmentFilter && departmentFilter.value) {
-            params.set('department_id', departmentFilter.value);
-        }
-        
-        if (staffFilter) {
-            const selectedStaff = Array.from(staffFilter.selectedOptions).map(opt => opt.value);
-            selectedStaff.forEach(id => params.append('staff_ids', id));
-        }
-        
-        window.location.href = '?' + params.toString();
-    }
-
-    if (dateRange) {
-        dateRange.addEventListener('change', applyFilters);
-    }
-    if (hospitalFilter) {
-        hospitalFilter.addEventListener('change', applyFilters);
-    }
-    if (departmentFilter) {
-        departmentFilter.addEventListener('change', applyFilters);
-    }
-    
-    const applyStaffBtn = document.getElementById('applyStaffFilter');
-    if (applyStaffBtn) {
-        applyStaffBtn.addEventListener('click', applyFilters);
-    }
-
-    // Initialize Charts with Chart.js
-    const charts = {};
-
-    // Helper function to create or update chart
-    function createOrUpdateChart(canvasId, config) {
-        const canvas = document.getElementById(canvasId);
-        if (!canvas) {
-            console.warn('Canvas element not found:', canvasId);
-            return;
-        }
-
-        // Check if chart already exists
-        if (charts[canvasId]) {
-            charts[canvasId].destroy();
-            delete charts[canvasId];
-        }
-
-        try {
-            const ctx = canvas.getContext('2d');
-            const chart = new Chart(ctx, config);
-            charts[canvasId] = chart;
-            console.log('Chart created successfully:', canvasId);
-        } catch (error) {
-            console.error('Error creating chart:', canvasId, error);
-        }
-    }
-
-    if (performanceDataEl) {
-        const performanceData = JSON.parse(performanceDataEl.textContent);
-        const staffMetrics = performanceData.staff_metrics || [];
-        
-        // Aggregate complaint data for charts
-        let internalTotal = 0, externalTotal = 0;
-        let statusOpen = 0, statusInProgress = 0, statusResolved = 0, statusClosed = 0;
-        let activationWithin2h = 0, activationMoreThan2h = 0;
-        let responseWithin24h = 0, responseWithin48h = 0, responseWithin72h = 0, responseMoreThan72h = 0;
-
-        staffMetrics.forEach(staff => {
-            const c = staff.complaints || {};
-            internalTotal += getSafeNumber(c, 'internal', 0);
-            externalTotal += getSafeNumber(c, 'external', 0);
-            
-            statusOpen += getSafeNumber(c.status, 'open', 0);
-            statusInProgress += getSafeNumber(c.status, 'in_progress', 0);
-            statusResolved += getSafeNumber(c.status, 'resolved', 0);
-            statusClosed += getSafeNumber(c.status, 'closed', 0);
-            
-            activationWithin2h += getSafeNumber(c.activation_time, 'within_2h', 0);
-            activationMoreThan2h += getSafeNumber(c.activation_time, 'more_than_2h', 0);
-            
-            responseWithin24h += getSafeNumber(c.response_time, 'within_24h', 0);
-            responseWithin48h += getSafeNumber(c.response_time, 'within_48h', 0);
-            responseWithin72h += getSafeNumber(c.response_time, 'within_72h', 0);
-            responseMoreThan72h += getSafeNumber(c.response_time, 'more_than_72h', 0);
-        });
-
-        // Complaint Source Chart (Pie)
-        if (internalTotal > 0 || externalTotal > 0) {
-            createOrUpdateChart('complaintSourceChart', {
-                type: 'pie',
-                data: {
-                    labels: ['{% trans "Internal" %}', '{% trans "External" %}'],
-                    datasets: [{
-                        data: [internalTotal, externalTotal],
-                        backgroundColor: ['#6366f1', '#f59e0b']
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            position: 'bottom'
-                        }
-                    }
-                }
-            });
-        }
-
-        // Complaint Status Chart (Bar)
-        if (statusOpen + statusInProgress + statusResolved + statusClosed > 0) {
-            createOrUpdateChart('complaintStatusChart', {
-                type: 'bar',
-                data: {
-                    labels: ['{% trans "Open" %}', '{% trans "In Progress" %}', '{% trans "Resolved" %}', '{% trans "Closed" %}'],
-                    datasets: [{
-                        data: [statusOpen, statusInProgress, statusResolved, statusClosed],
-                        backgroundColor: ['#f59e0b', '#6366f1', '#10b981', '#6b7280']
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    scales: {
-                        y: {
-                            beginAtZero: true
-                        }
-                    }
-                }
-            });
-        }
-
-        // Complaint Activation Chart (Bar)
-        if (activationWithin2h + activationMoreThan2h > 0) {
-            createOrUpdateChart('complaintActivationChart', {
-                type: 'bar',
-                data: {
-                    labels: ['≤ 2 hours', '> 2 hours'],
-                    datasets: [{
-                        data: [activationWithin2h, activationMoreThan2h],
-                        backgroundColor: ['#10b981', '#ef4444']
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    scales: {
-                        y: {
-                            beginAtZero: true
-                        }
-                    }
-                }
-            });
-        }
-
-        // Complaint Response Chart (Bar)
-        if (responseWithin24h + responseWithin48h + responseWithin72h + responseMoreThan72h > 0) {
-            createOrUpdateChart('complaintResponseChart', {
-                type: 'bar',
-                data: {
-                    labels: ['≤ 24h', '24-48h', '48-72h', '> 72h'],
-                    datasets: [{
-                        data: [responseWithin24h, responseWithin48h, responseWithin72h, responseMoreThan72h],
-                        backgroundColor: ['#10b981', '#6366f1', '#f59e0b', '#ef4444']
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    scales: {
-                        y: {
-                            beginAtZero: true
-                        }
-                    }
-                }
-            });
-        }
-
-        // Aggregate inquiry data
-        let inquiryStatusOpen = 0, inquiryStatusInProgress = 0, inquiryStatusResolved = 0, inquiryStatusClosed = 0;
-        let inquiryResponseWithin24h = 0, inquiryResponseWithin48h = 0, inquiryResponseWithin72h = 0, inquiryResponseMoreThan72h = 0;
-
-        staffMetrics.forEach(staff => {
-            const i = staff.inquiries || {};
-            inquiryStatusOpen += getSafeNumber(i.status, 'open', 0);
-            inquiryStatusInProgress += getSafeNumber(i.status, 'in_progress', 0);
-            inquiryStatusResolved += getSafeNumber(i.status, 'resolved', 0);
-            inquiryStatusClosed += getSafeNumber(i.status, 'closed', 0);
-            
-            inquiryResponseWithin24h += getSafeNumber(i.response_time, 'within_24h', 0);
-            inquiryResponseWithin48h += getSafeNumber(i.response_time, 'within_48h', 0);
-            inquiryResponseWithin72h += getSafeNumber(i.response_time, 'within_72h', 0);
-            inquiryResponseMoreThan72h += getSafeNumber(i.response_time, 'more_than_72h', 0);
-        });
-
-        // Function to render inquiry charts
-        function renderInquiryCharts() {
-            console.log('Rendering inquiry charts...');
-            
-            // Inquiry Status Chart (Bar)
-            if (inquiryStatusOpen + inquiryStatusInProgress + inquiryStatusResolved + inquiryStatusClosed > 0) {
-                createOrUpdateChart('inquiryStatusChart', {
-                    type: 'bar',
-                    data: {
-                        labels: ['{% trans "Open" %}', '{% trans "In Progress" %}', '{% trans "Resolved" %}', '{% trans "Closed" %}'],
-                        datasets: [{
-                            data: [inquiryStatusOpen, inquiryStatusInProgress, inquiryStatusResolved, inquiryStatusClosed],
-                            backgroundColor: ['#f59e0b', '#6366f1', '#10b981', '#6b7280']
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        scales: {
-                            y: {
-                                beginAtZero: true
-                            }
-                        }
-                    }
-                });
-            }
-
-            // Inquiry Response Chart (Bar)
-            if (inquiryResponseWithin24h + inquiryResponseWithin48h + inquiryResponseWithin72h + inquiryResponseMoreThan72h > 0) {
-                createOrUpdateChart('inquiryResponseChart', {
-                    type: 'bar',
-                    data: {
-                        labels: ['≤ 24h', '24-48h', '48-72h', '> 72h'],
-                        datasets: [{
-                            data: [inquiryResponseWithin24h, inquiryResponseWithin48h, inquiryResponseWithin72h, inquiryResponseMoreThan72h],
-                            backgroundColor: ['#10b981', '#6366f1', '#f59e0b', '#ef4444']
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        scales: {
-                            y: {
-                                beginAtZero: true
-                            }
-                        }
-                    }
-                });
-            }
-        }
-
-        // Render inquiry charts when tab is clicked
-        const inquiryTab = document.getElementById('inquiries-tab');
-        if (inquiryTab) {
-            inquiryTab.addEventListener('click', function () {
-                setTimeout(renderInquiryCharts, 100);
-            });
-        }
-    }
-    
-    // Export function
-    window.exportReport = function(format) {
-        const performanceDataEl = document.getElementById('performanceData');
-        if (!performanceDataEl) return;
-        
-        const performanceData = JSON.parse(performanceDataEl.textContent);
-        const staffIds = performanceData.staff_metrics.map(s => s.id);
-        
-        fetch('{% url "dashboard:export_staff_performance" %}', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || ''
-            },
-            body: JSON.stringify({
-                staff_ids: staffIds,
-                date_range: dateRange.value,
-                format: format
-            })
-        })
-        .then(response => {
-            if (format === 'json') {
-                return response.json();
-            } else {
-                return response.blob();
-            }
-        })
-        .then(data => {
-            if (format === 'json') {
-                console.log('Export data:', data);
-                alert('Export ready! Check console for data.');
-            } else {
-                // Download file
-                const url = window.URL.createObjectURL(data);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = `staff_performance_${new Date().toISOString().slice(0,10)}.${format}`;
-                document.body.appendChild(a);
-                a.click();
-                window.URL.revokeObjectURL(url);
-                document.body.removeChild(a);
-            }
-        })
-        .catch(error => {
-            console.error('Export error:', error);
-            alert('Export failed. Please try again.');
-        });
-    };
 });
+
+function initCharts(data) {
+    if (typeof Chart === 'undefined') return;
+    
+    Chart.defaults.color = '#64748b';
+    Chart.defaults.borderColor = '#e2e8f0';
+
+    // Complaint Source Chart
+    const sourceCtx = document.getElementById('complaintSourceChart');
+    if (sourceCtx) {
+        new Chart(sourceCtx, {
+            type: 'doughnut',
+            data: {
+                labels: ['Internal', 'External'],
+                datasets: [{
+                    data: [data.totals?.complaints_internal || 0, data.totals?.complaints_external || 0],
+                    backgroundColor: ['#3b82f6', '#10b981'],
+                    borderColor: '#ffffff',
+                    borderWidth: 2
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: { position: 'bottom', labels: { padding: 15, usePointStyle: true } }
+                }
+            }
+        });
+    }
+
+    // Complaint Status Chart
+    const statusCtx = document.getElementById('complaintStatusChart');
+    if (statusCtx) {
+        new Chart(statusCtx, {
+            type: 'bar',
+            data: {
+                labels: ['Open', 'In Progress', 'Resolved', 'Closed'],
+                datasets: [{
+                    label: 'Complaints',
+                    data: [
+                        data.totals?.complaints_open || 0,
+                        data.totals?.complaints_in_progress || 0,
+                        data.totals?.complaints_resolved || 0,
+                        data.totals?.complaints_closed || 0
+                    ],
+                    backgroundColor: ['#f59e0b', '#3b82f6', '#10b981', '#64748b'],
+                    borderRadius: 6
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
+                    x: { grid: { display: false } }
+                }
+            }
+        });
+    }
+
+    // Inquiry Status Chart
+    const inquiryStatusCtx = document.getElementById('inquiryStatusChart');
+    if (inquiryStatusCtx) {
+        new Chart(inquiryStatusCtx, {
+            type: 'doughnut',
+            data: {
+                labels: ['Open', 'In Progress', 'Resolved', 'Closed'],
+                datasets: [{
+                    data: [
+                        data.totals?.inquiries_open || 0,
+                        data.totals?.inquiries_in_progress || 0,
+                        data.totals?.inquiries_resolved || 0,
+                        data.totals?.inquiries_closed || 0
+                    ],
+                    backgroundColor: ['#f59e0b', '#3b82f6', '#10b981', '#64748b'],
+                    borderColor: '#ffffff',
+                    borderWidth: 2
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: { position: 'bottom', labels: { padding: 15, usePointStyle: true } }
+                }
+            }
+        });
+    }
+
+    // Inquiry Response Chart
+    const inquiryResponseCtx = document.getElementById('inquiryResponseChart');
+    if (inquiryResponseCtx) {
+        new Chart(inquiryResponseCtx, {
+            type: 'bar',
+            data: {
+                labels: ['≤24h', '≤48h', '≤72h', '>72h'],
+                datasets: [{
+                    label: 'Response Time',
+                    data: [
+                        data.totals?.inquiries_within_24h || 0,
+                        data.totals?.inquiries_within_48h || 0,
+                        data.totals?.inquiries_within_72h || 0,
+                        data.totals?.inquiries_over_72h || 0
+                    ],
+                    backgroundColor: ['#10b981', '#3b82f6', '#f59e0b', '#ef4444'],
+                    borderRadius: 6
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
+                    x: { grid: { display: false } }
+                }
+            }
+        });
+    }
+}
+
+function updateSummaryCards(data) {
+    const totalComplaints = data.totals?.complaints_total || 0;
+    const totalInquiries = data.totals?.inquiries_total || 0;
+    const resolvedComplaints = data.totals?.complaints_resolved || 0;
+    const resolutionRate = totalComplaints > 0 ? Math.round((resolvedComplaints / totalComplaints) * 100) : 0;
+    
+    document.getElementById('totalComplaints').textContent = totalComplaints;
+    document.getElementById('totalInquiries').textContent = totalInquiries;
+    document.getElementById('resolutionRate').textContent = resolutionRate + '%';
+}
+
+function exportReport(format) {
+    const dateRange = document.getElementById('dateRange').value;
+    const hospital = document.getElementById('hospitalFilter')?.value || '';
+    const department = document.getElementById('departmentFilter')?.value || '';
+    
+    const params = new URLSearchParams({
+        date_range: dateRange,
+        format: format,
+        hospital: hospital,
+        department: department
+    });
+    
+    window.location.href = `/dashboard/admin-evaluation/export/?${params.toString()}`;
+}
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/dashboard/analytics-template.html b/templates/dashboard/analytics-template.html
new file mode 100644
index 0000000..97ac32f
--- /dev/null
+++ b/templates/dashboard/analytics-template.html
@@ -0,0 +1,593 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Patient Experience Analytics Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0f172a; /* Slate 900 */
+            color: #e2e8f0;
+        }
+        .glass-panel {
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .gradient-text {
+            background: linear-gradient(to right, #38bdf8, #818cf8);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+            border-color: rgba(56, 189, 248, 0.5);
+        }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #0f172a;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #334155;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #475569;
+        }
+        .animate-fade-in {
+            animation: fadeIn 0.8s ease-out forwards;
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        @keyframes fadeIn {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .delay-100 { animation-delay: 100ms; }
+        .delay-200 { animation-delay: 200ms; }
+        .delay-300 { animation-delay: 300ms; }
+    </style>
+</head>
+<body class="antialiased min-h-screen pb-20">
+
+    <!-- Navigation / Header -->
+    <nav class="fixed top-0 w-full z-50 glass-panel border-b border-slate-700">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center gap-3">
+                    <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+                        <i class="fas fa-chart-pie text-white text-sm"></i>
+                    </div>
+                    <span class="font-bold text-xl tracking-tight">PX <span class="text-blue-400">Analytics</span></span>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-baseline space-x-4">
+                        <a href="#overview" class="hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Overview</a>
+                        <a href="#complaints" class="hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Complaints</a>
+                        <a href="#actions" class="hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Actions</a>
+                        <a href="#surveys" class="hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Surveys</a>
+                        <a href="#dashboard" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Live Dashboard</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <div class="relative pt-32 pb-12 sm:pt-40 sm:pb-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mb-6">
+                Analytics Opportunities <br>
+                <span class="gradient-text">Based on Current Models</span>
+            </h1>
+            <p class="mt-4 max-w-2xl mx-auto text-xl text-slate-400">
+                A comprehensive breakdown of visualizations and insights available from your Patient Experience data architecture.
+            </p>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-24">
+
+        <!-- 1. Complaints Analytics -->
+        <section id="complaints" class="animate-fade-in">
+            <div class="flex items-center gap-4 mb-8">
+                <div class="p-3 bg-red-500/10 rounded-lg border border-red-500/20">
+                    <i class="fas fa-exclamation-circle text-red-400 text-2xl"></i>
+                </div>
+                <div>
+                    <h2 class="text-3xl font-bold text-white">Complaints Analytics</h2>
+                    <p class="text-slate-400">Tracking status, SLA, and resolution metrics.</p>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+                <!-- Chart 1: Status Distribution -->
+                <div class="glass-panel p-6 rounded-xl card-hover">
+                    <h3 class="text-lg font-semibold mb-4 text-slate-200">Status Distribution</h3>
+                    <div id="chart-complaints-status"></div>
+                </div>
+                <!-- Chart 2: Volume Trend -->
+                <div class="glass-panel p-6 rounded-xl lg:col-span-2 card-hover">
+                    <h3 class="text-lg font-semibold mb-4 text-slate-200">Complaint Volume Trends (Last 6 Months)</h3>
+                    <div id="chart-complaints-volume"></div>
+                </div>
+            </div>
+
+            <!-- Data Table -->
+            <div class="glass-panel rounded-xl overflow-hidden">
+                <div class="overflow-x-auto">
+                    <table class="w-full text-left text-sm text-slate-400">
+                        <thead class="bg-slate-800/50 text-slate-200 uppercase font-semibold">
+                            <tr>
+                                <th class="px-6 py-4">Analytics</th>
+                                <th class="px-6 py-4">Description</th>
+                                <th class="px-6 py-4">Value</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-slate-700/50">
+                            <tr class="hover:bg-slate-800/30 transition-colors">
+                                <td class="px-6 py-4 font-medium text-white">📈 Volume Trends</td>
+                                <td class="px-6 py-4">Complaints per day/week/month</td>
+                                <td class="px-6 py-4"><span class="px-2 py-1 bg-blue-500/10 text-blue-400 rounded text-xs">Identify Spikes</span></td>
+                            </tr>
+                            <tr class="hover:bg-slate-800/30 transition-colors">
+                                <td class="px-6 py-4 font-medium text-white">⏱️ SLA Performance</td>
+                                <td class="px-6 py-4">% resolved within SLA, avg resolution time</td>
+                                <td class="px-6 py-4"><span class="px-2 py-1 bg-green-500/10 text-green-400 rounded text-xs">Compliance</span></td>
+                            </tr>
+                            <tr class="hover:bg-slate-800/30 transition-colors">
+                                <td class="px-6 py-4 font-medium text-white">🏥 Top Departments</td>
+                                <td class="px-6 py-4">Most complaints by department</td>
+                                <td class="px-6 py-4"><span class="px-2 py-1 bg-orange-500/10 text-orange-400 rounded text-xs">Focus Areas</span></td>
+                            </tr>
+                            <tr class="hover:bg-slate-800/30 transition-colors">
+                                <td class="px-6 py-4 font-medium text-white">🔴 Severity Mix</td>
+                                <td class="px-6 py-4">High/Medium/Low severity breakdown</td>
+                                <td class="px-6 py-4"><span class="px-2 py-1 bg-red-500/10 text-red-400 rounded text-xs">Risk Focus</span></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+
+        <!-- 2. PX Action Center Analytics -->
+        <section id="actions" class="animate-fade-in delay-100">
+            <div class="flex items-center gap-4 mb-8">
+                <div class="p-3 bg-blue-500/10 rounded-lg border border-blue-500/20">
+                    <i class="fas fa-tasks text-blue-400 text-2xl"></i>
+                </div>
+                <div>
+                    <h2 class="text-3xl font-bold text-white">PX Action Center Analytics</h2>
+                    <p class="text-slate-400">Workflow efficiency and completion tracking.</p>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+                <div class="glass-panel p-6 rounded-xl card-hover">
+                    <h3 class="text-lg font-semibold mb-4 text-slate-200">Action Cycle Time</h3>
+                    <div id="chart-actions-cycle"></div>
+                </div>
+                <div class="glass-panel p-6 rounded-xl card-hover">
+                    <h3 class="text-lg font-semibold mb-4 text-slate-200">By Category</h3>
+                    <div id="chart-actions-category"></div>
+                </div>
+            </div>
+            
+             <div class="glass-panel rounded-xl overflow-hidden">
+                <div class="overflow-x-auto">
+                    <table class="w-full text-left text-sm text-slate-400">
+                        <thead class="bg-slate-800/50 text-slate-200 uppercase font-semibold">
+                            <tr>
+                                <th class="px-6 py-4">Analytics</th>
+                                <th class="px-6 py-4">Description</th>
+                                <th class="px-6 py-4">Value</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-slate-700/50">
+                            <tr class="hover:bg-slate-800/30 transition-colors">
+                                <td class="px-6 py-4 font-medium text-white">✅ Completion Rate</td>
+                                <td class="px-6 py-4">% closed within SLA</td>
+                                <td class="px-6 py-4"><span class="px-2 py-1 bg-green-500/10 text-green-400 rounded text-xs">Performance</span></td>
+                            </tr>
+                            <tr class="hover:bg-slate-800/30 transition-colors">
+                                <td class="px-6 py-4 font-medium text-white">👤 Assignee Workload</td>
+                                <td class="px-6 py-4">Actions per staff member</td>
+                                <td class="px-6 py-4"><span class="px-2 py-1 bg-purple-500/10 text-purple-400 rounded text-xs">Capacity</span></td>
+                            </tr>
+                            <tr class="hover:bg-slate-800/30 transition-colors">
+                                <td class="px-6 py-4 font-medium text-white">🔴 Overdue Actions</td>
+                                <td class="px-6 py-4">Count and trend of overdue items</td>
+                                <td class="px-6 py-4"><span class="px-2 py-1 bg-red-500/10 text-red-400 rounded text-xs">Risk Mgmt</span></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+
+        <!-- 3. Surveys Analytics -->
+        <section id="surveys" class="animate-fade-in delay-200">
+            <div class="flex items-center gap-4 mb-8">
+                <div class="p-3 bg-purple-500/10 rounded-lg border border-purple-500/20">
+                    <i class="fas fa-poll text-purple-400 text-2xl"></i>
+                </div>
+                <div>
+                    <h2 class="text-3xl font-bold text-white">Surveys Analytics</h2>
+                    <p class="text-slate-400">Patient satisfaction scores and response rates.</p>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+                <div class="glass-panel p-6 rounded-xl card-hover flex flex-col justify-center items-center">
+                    <h3 class="text-lg font-semibold mb-2 text-slate-200">Net Promoter Score</h3>
+                    <div class="text-5xl font-bold text-purple-400 mb-2">+45</div>
+                    <div class="text-sm text-slate-400">Industry Avg: +32</div>
+                    <div class="w-full bg-slate-700 h-2 rounded-full mt-4 overflow-hidden">
+                        <div class="bg-purple-500 h-full" style="width: 75%"></div>
+                    </div>
+                </div>
+                <div class="glass-panel p-6 rounded-xl lg:col-span-2 card-hover">
+                    <h3 class="text-lg font-semibold mb-4 text-slate-200">Score Trends</h3>
+                    <div id="chart-surveys-trend"></div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 4. Feedback Analytics -->
+        <section id="feedback" class="animate-fade-in delay-300">
+            <div class="flex items-center gap-4 mb-8">
+                <div class="p-3 bg-yellow-500/10 rounded-lg border border-yellow-500/20">
+                    <i class="fas fa-comments text-yellow-400 text-2xl"></i>
+                </div>
+                <div>
+                    <h2 class="text-3xl font-bold text-white">Feedback Analytics</h2>
+                    <p class="text-slate-400">Sentiment analysis and qualitative insights.</p>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div class="glass-panel p-6 rounded-xl card-hover">
+                    <h3 class="text-lg font-semibold mb-4 text-slate-200">Sentiment Distribution</h3>
+                    <div id="chart-feedback-sentiment"></div>
+                </div>
+                <div class="glass-panel p-6 rounded-xl card-hover">
+                    <h3 class="text-lg font-semibold mb-4 text-slate-200">Feedback Volume</h3>
+                    <div id="chart-feedback-volume"></div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 5. Executive Dashboard Simulation -->
+        <section id="dashboard" class="animate-fade-in">
+            <div class="border-t border-slate-700 pt-16 mb-12">
+                <h2 class="text-3xl font-bold text-white mb-4">Recommended Dashboard Layout</h2>
+                <p class="text-slate-400 mb-8">A consolidated view of the key metrics.</p>
+            </div>
+
+            <!-- Dashboard Grid -->
+            <div class="glass-panel p-6 rounded-2xl border border-slate-600 shadow-2xl">
+                <!-- Header -->
+                <div class="flex justify-between items-center mb-6 border-b border-slate-700 pb-4">
+                    <div class="flex items-center gap-3">
+                        <i class="fas fa-hospital text-blue-400 text-xl"></i>
+                        <h3 class="text-xl font-bold text-white">Executive Overview</h3>
+                    </div>
+                    <div class="text-sm text-slate-400 bg-slate-800 px-3 py-1 rounded-full">
+                        <i class="far fa-clock mr-2"></i>Live Data
+                    </div>
+                </div>
+
+                <!-- Top KPI Cards -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                    <div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
+                        <div class="text-slate-400 text-sm mb-1">Overall Score</div>
+                        <div class="text-3xl font-bold text-white">4.2<span class="text-lg text-slate-500">/5</span></div>
+                        <div class="text-xs text-green-400 mt-2"><i class="fas fa-arrow-up"></i> 0.3 from last month</div>
+                    </div>
+                    <div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
+                        <div class="text-slate-400 text-sm mb-1">NPS</div>
+                        <div class="text-3xl font-bold text-purple-400">+45</div>
+                        <div class="text-xs text-green-400 mt-2"><i class="fas fa-arrow-up"></i> 5 pts increase</div>
+                    </div>
+                    <div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
+                        <div class="text-slate-400 text-sm mb-1">Complaint Trend</div>
+                        <div class="text-3xl font-bold text-red-400">↓ 12%</div>
+                        <div class="text-xs text-slate-400 mt-2">vs previous period</div>
+                    </div>
+                </div>
+
+                <!-- Middle Section: Charts -->
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
+                    <div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700">
+                        <h4 class="text-sm font-semibold text-slate-300 mb-3">Complaints by Status</h4>
+                        <div id="dash-chart-1"></div>
+                    </div>
+                    <div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700">
+                        <h4 class="text-sm font-semibold text-slate-300 mb-3">Actions by Status</h4>
+                        <div id="dash-chart-2"></div>
+                    </div>
+                    <div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700">
+                        <h4 class="text-sm font-semibold text-slate-300 mb-3">Survey Response Rate</h4>
+                        <div class="flex items-center justify-center h-32">
+                            <div class="relative w-24 h-24">
+                                <svg class="w-full h-full" viewBox="0 0 36 36">
+                                    <path class="text-slate-700" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" />
+                                    <path class="text-blue-500" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" />
+                                </svg>
+                                <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-white font-bold">75%</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Bottom Section: Heatmap Table -->
+                <div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700">
+                    <h4 class="text-sm font-semibold text-slate-300 mb-4">Department Performance Heatmap</h4>
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-sm text-left">
+                            <thead class="text-xs text-slate-400 uppercase bg-slate-900/50">
+                                <tr>
+                                    <th class="px-4 py-3 rounded-l-lg">Dept</th>
+                                    <th class="px-4 py-3">Complaints</th>
+                                    <th class="px-4 py-3">Actions</th>
+                                    <th class="px-4 py-3">Survey</th>
+                                    <th class="px-4 py-3 rounded-r-lg">Rating</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-slate-700/50">
+                                <tr>
+                                    <td class="px-4 py-3 font-medium text-white">ED</td>
+                                    <td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-red-500 h-2 rounded-full" style="width: 80%"></div></div> <span class="text-xs text-slate-400">45</span></div></td>
+                                    <td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div></div> <span class="text-xs text-slate-400">12</span></div></td>
+                                    <td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-green-500 h-2 rounded-full" style="width: 82%"></div></div> <span class="text-xs text-slate-400">4.1</span></div></td>
+                                    <td class="px-4 py-3 text-yellow-400 text-xs">★★★☆☆</td>
+                                </tr>
+                                <tr>
+                                    <td class="px-4 py-3 font-medium text-white">IPD</td>
+                                    <td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-red-500 h-2 rounded-full" style="width: 50%"></div></div> <span class="text-xs text-slate-400">32</span></div></td>
+                                    <td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-blue-500 h-2 rounded-full" style="width: 20%"></div></div> <span class="text-xs text-slate-400">8</span></div></td>
+                                    <td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-green-500 h-2 rounded-full" style="width: 90%"></div></div> <span class="text-xs text-slate-400">4.5</span></div></td>
+                                    <td class="px-4 py-3 text-yellow-400 text-xs">★★★★☆</td>
+                                </tr>
+                                <tr>
+                                    <td class="px-4 py-3 font-medium text-white">OPD</td>
+                                    <td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-red-500 h-2 rounded-full" style="width: 30%"></div></div> <span class="text-xs text-slate-400">15</span></div></td>
+                                    <td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-blue-500 h-2 rounded-full" style="width: 15%"></div></div> <span class="text-xs text-slate-400">5</span></div></td>
+                                    <td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-green-500 h-2 rounded-full" style="width: 88%"></div></div> <span class="text-xs text-slate-400">4.4</span></div></td>
+                                    <td class="px-4 py-3 text-yellow-400 text-xs">★★★★☆</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Priority Recommendations -->
+        <section class="pb-12">
+            <h2 class="text-2xl font-bold text-white mb-6">🎯 Priority Recommendations</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <!-- Priority Items -->
+                <div class="glass-panel p-4 rounded-lg border-l-4 border-red-500">
+                    <div class="flex justify-between items-start">
+                        <h4 class="font-bold text-white">1. Complaints Volume</h4>
+                        <span class="bg-red-500/20 text-red-400 text-xs px-2 py-1 rounded">Core KPI</span>
+                    </div>
+                    <p class="text-sm text-slate-400 mt-2">Track volume and resolution time as primary health indicator.</p>
+                </div>
+                
+                <div class="glass-panel p-4 rounded-lg border-l-4 border-orange-500">
+                    <div class="flex justify-between items-start">
+                        <h4 class="font-bold text-white">2. SLA Compliance</h4>
+                        <span class="bg-orange-500/20 text-orange-400 text-xs px-2 py-1 rounded">Regulatory</span>
+                    </div>
+                    <p class="text-sm text-slate-400 mt-2">Ensure regulatory adherence with real-time SLA tracking.</p>
+                </div>
+
+                <div class="glass-panel p-4 rounded-lg border-l-4 border-blue-500">
+                    <div class="flex justify-between items-start">
+                        <h4 class="font-bold text-white">3. Survey Scores</h4>
+                        <span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">Satisfaction</span>
+                    </div>
+                    <p class="text-sm text-slate-400 mt-2">Monitor NPS and satisfaction trends across journey stages.</p>
+                </div>
+
+                <div class="glass-panel p-4 rounded-lg border-l-4 border-purple-500">
+                    <div class="flex justify-between items-start">
+                        <h4 class="font-bold text-white">4. Action Completion</h4>
+                        <span class="bg-purple-500/20 text-purple-400 text-xs px-2 py-1 rounded">闭环</span>
+                    </div>
+                    <p class="text-sm text-slate-400 mt-2">Close the loop by tracking action items to completion.</p>
+                </div>
+
+                <div class="glass-panel p-4 rounded-lg border-l-4 border-green-500">
+                    <div class="flex justify-between items-start">
+                        <h4 class="font-bold text-white">5. Sentiment Analysis</h4>
+                        <span class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded">Early Warning</span>
+                    </div>
+                    <p class="text-sm text-slate-400 mt-2">Use AI to detect negative sentiment before it escalates.</p>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <footer class="border-t border-slate-800 bg-slate-900 py-8 mt-12">
+        <div class="max-w-7xl mx-auto px-4 text-center text-slate-500 text-sm">
+            <p>&copy; 2023 Patient Experience Analytics System. Generated for Data Model Review.</p>
+        </div>
+    </footer>
+
+    <!-- Chart Scripts -->
+    <script>
+        // Common Chart Options
+        const commonOptions = {
+            chart: {
+                background: 'transparent',
+                toolbar: { show: false },
+                fontFamily: 'Inter, sans-serif',
+            },
+            theme: { mode: 'dark' },
+            dataLabels: { enabled: false },
+            stroke: { curve: 'smooth' },
+            grid: {
+                borderColor: '#334155',
+                strokeDashArray: 4,
+            },
+            legend: { labels: { colors: '#94a3b8' } }
+        };
+
+        // 1. Complaints Status (Donut)
+        new ApexCharts(document.querySelector("#chart-complaints-status"), {
+            ...commonOptions,
+            chart: { ...commonOptions.chart, type: 'donut', height: 300 },
+            series: [44, 25, 20, 11],
+            labels: ['Open', 'In Progress', 'Resolved', 'Closed'],
+            colors: ['#3b82f6', '#f59e0b', '#10b981', '#64748b'],
+            plotOptions: {
+                pie: {
+                    donut: {
+                        labels: {
+                            show: true,
+                            total: {
+                                show: true,
+                                label: 'Total',
+                                color: '#e2e8f0'
+                            }
+                        }
+                    }
+                }
+            }
+        }).render();
+
+        // 2. Complaints Volume (Area)
+        new ApexCharts(document.querySelector("#chart-complaints-volume"), {
+            ...commonOptions,
+            chart: { ...commonOptions.chart, type: 'area', height: 300 },
+            series: [{
+                name: 'Complaints',
+                data: [31, 40, 28, 51, 42, 109, 100]
+            }],
+            xaxis: {
+                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+                labels: { style: { colors: '#94a3b8' } }
+            },
+            yaxis: { labels: { style: { colors: '#94a3b8' } } },
+            colors: ['#ef4444'],
+            fill: {
+                type: 'gradient',
+                gradient: { shadeIntensity: 1, opacityFrom: 0.7, opacityTo: 0.2, stops: [0, 100] }
+            }
+        }).render();
+
+        // 3. Action Cycle Time (Bar)
+        new ApexCharts(document.querySelector("#chart-actions-cycle"), {
+            ...commonOptions,
+            chart: { ...commonOptions.chart, type: 'bar', height: 300 },
+            series: [{
+                name: 'Avg Days',
+                data: [4.2, 3.8, 5.5, 2.1, 4.0]
+            }],
+            xaxis: {
+                categories: ['Clinical', 'Safety', 'Service', 'Staff', 'Facility'],
+                labels: { style: { colors: '#94a3b8' } }
+            },
+            yaxis: { labels: { style: { colors: '#94a3b8' } } },
+            colors: ['#3b82f6'],
+            plotOptions: { bar: { borderRadius: 4 } }
+        }).render();
+
+        // 4. Action Category (Radial)
+        new ApexCharts(document.querySelector("#chart-actions-category"), {
+            ...commonOptions,
+            chart: { ...commonOptions.chart, type: 'radialBar', height: 300 },
+            series: [70, 50, 80],
+            labels: ['Service', 'Safety', 'Clinical'],
+            colors: ['#3b82f6', '#ef4444', '#10b981'],
+            plotOptions: {
+                radialBar: {
+                    dataLabels: {
+                        name: { color: '#94a3b8' },
+                        value: { color: '#e2e8f0' }
+                    }
+                }
+            }
+        }).render();
+
+        // 5. Survey Trends (Line)
+        new ApexCharts(document.querySelector("#chart-surveys-trend"), {
+            ...commonOptions,
+            chart: { ...commonOptions.chart, type: 'line', height: 300 },
+            series: [
+                { name: 'Satisfaction', data: [4.1, 4.0, 4.2, 4.1, 4.3, 4.5, 4.4] },
+                { name: 'Response Rate', data: [60, 65, 70, 68, 72, 75, 78] }
+            ],
+            xaxis: {
+                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+                labels: { style: { colors: '#94a3b8' } }
+            },
+            yaxis: [
+                { labels: { style: { colors: '#94a3b8' } }, min: 0, max: 5, title: { text: 'Score', style: {color: '#94a3b8'} } },
+                { opposite: true, labels: { style: { colors: '#94a3b8' } }, min: 0, max: 100, title: { text: '%', style: {color: '#94a3b8'} } }
+            ],
+            colors: ['#a855f7', '#38bdf8']
+        }).render();
+
+        // 6. Feedback Sentiment (Pie)
+        new ApexCharts(document.querySelector("#chart-feedback-sentiment"), {
+            ...commonOptions,
+            chart: { ...commonOptions.chart, type: 'pie', height: 300 },
+            series: [65, 20, 15],
+            labels: ['Positive', 'Neutral', 'Negative'],
+            colors: ['#10b981', '#94a3b8', '#ef4444']
+        }).render();
+
+        // 7. Feedback Volume (Column)
+        new ApexCharts(document.querySelector("#chart-feedback-volume"), {
+            ...commonOptions,
+            chart: { ...commonOptions.chart, type: 'bar', height: 300, stacked: true },
+            series: [
+                { name: 'Compliments', data: [12, 15, 18, 20, 22, 25, 28] },
+                { name: 'Suggestions', data: [8, 10, 12, 11, 14, 15, 18] }
+            ],
+            xaxis: {
+                categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                labels: { style: { colors: '#94a3b8' } }
+            },
+            colors: ['#eab308', '#3b82f6']
+        }).render();
+
+        // Dashboard Mini Charts
+        new ApexCharts(document.querySelector("#dash-chart-1"), {
+            ...commonOptions,
+            chart: { ...commonOptions.chart, type: 'bar', height: 150, sparkline: { enabled: true } },
+            series: [{ data: [10, 15, 12, 25, 18, 20, 22] }],
+            colors: ['#ef4444']
+        }).render();
+
+        new ApexCharts(document.querySelector("#dash-chart-2"), {
+            ...commonOptions,
+            chart: { ...commonOptions.chart, type: 'area', height: 150, sparkline: { enabled: true } },
+            series: [{ data: [25, 30, 28, 35, 32, 38, 40] }],
+            colors: ['#3b82f6']
+        }).render();
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/dashboard/command_center.html b/templates/dashboard/command_center.html
index 0b13484..0c5c953 100644
--- a/templates/dashboard/command_center.html
+++ b/templates/dashboard/command_center.html
@@ -1,10 +1,110 @@
-  {% extends 'layouts/base.html' %}
+
+{% extends 'layouts/base.html' %}
 {% load i18n %}
 
 {% block title %}{% trans "PX Command Center" %} - PX360{% endblock %}
 
+{% block extra_css %}
+<style>
+  /* Card Styling with Borders */
+  .card {
+    background: white;
+    border-radius: 1rem;
+    border: 2px solid #e2e8f0;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    overflow: hidden;
+    transition: all 0.3s ease;
+  }
+  .card:hover {
+    border-color: #005696;
+    box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+  }
+  .card-header {
+    padding: 1rem 1.25rem;
+    border-bottom: 2px solid #e2e8f0;
+    background: linear-gradient(to right, #f8fafc, #f1f5f9);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .card-title {
+    font-weight: 700;
+    color: #1e293b;
+    font-size: 1rem;
+  }
+  
+  /* Module Card Specific Styles */
+  .module-card {
+    border-left: 4px solid;
+  }
+  .module-card.complaints {
+    border-left-color: #ef4444;
+  }
+  .module-card.surveys {
+    border-left-color: #a855f7;
+  }
+  .module-card.actions {
+    border-left-color: #f97316;
+  }
+  .module-card.inquiries {
+    border-left-color: #3b82f6;
+  }
+  .module-card.observations {
+    border-left-color: #22c55e;
+  }
+  
+  /* Section Containers */
+  .section-card {
+    background: white;
+    border-radius: 1rem;
+    border: 2px solid #e2e8f0;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+  }
+  .section-header {
+    padding: 1rem 1.5rem;
+    border-bottom: 2px solid #e2e8f0;
+    background: linear-gradient(to right, #f8fafc, #f1f5f9);
+  }
+  .section-content {
+    padding: 1.5rem;
+  }
+  
+  /* Table Styling */
+  .data-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+  .data-table th {
+    background: #f8fafc;
+    border-bottom: 2px solid #e2e8f0;
+    padding: 0.75rem 1rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #64748b;
+  }
+  .data-table td {
+    border-bottom: 1px solid #e2e8f0;
+    padding: 0.75rem 1rem;
+  }
+  .data-table tr:hover td {
+    background: #f8fafc;
+  }
+  
+  /* Chart Containers */
+  .chart-container {
+    border: 1px solid #e2e8f0;
+    border-radius: 0.75rem;
+    padding: 1rem;
+    background: #fafafa;
+  }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="space-y-6">
+<div class="space-y-6" id="command-center-container">
   <!-- Page Header -->
   <header class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-2">
     <div>
@@ -14,122 +114,307 @@
       </h1>
       <p class="text-sm text-slate mt-1">{% trans "Real-time overview of your patient experience operations" %}</p>
     </div>
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-4">
+      <!-- Auto-refresh indicator -->
+      <div class="flex items-center gap-2 text-sm">
+        <div class="flex items-center gap-2 px-3 py-1.5 bg-green-50 rounded-full">
+          <span class="relative flex h-2 w-2">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+          </span>
+          <span class="text-green-700 font-medium">{% trans "Live" %}</span>
+        </div>
+        <span class="text-slate text-xs" id="refresh-timer">{% trans "Refreshes in 60s" %}</span>
+      </div>
       <div class="text-right">
         <p class="text-xs text-slate uppercase tracking-wider">{% trans "Last Updated" %}</p>
-        <p class="text-sm font-bold text-navy">{% now "j M Y, H:i" %}</p>
+        <p class="text-sm font-bold text-navy" id="last-updated">{{ last_updated }}</p>
       </div>
+      <button onclick="refreshCommandCenter()" class="p-2 bg-light rounded-lg hover:bg-slate-200 transition" title="{% trans 'Refresh Now' %}">
+        <i data-lucide="refresh-cw" class="w-5 h-5 text-navy" id="refresh-icon"></i>
+      </button>
     </div>
   </header>
 
-  <!-- Stat Cards -->
-  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-    <div class="card stat-card">
-      <div class="flex items-start justify-between">
-        <div>
-          <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Total Complaints" %}</p>
-          <p class="text-3xl font-bold text-navy">{{ stats.total_complaints }}</p>
-          <div class="flex items-center gap-1.5 mt-2">
-            <i data-lucide="trending-up" class="w-4 h-4 text-green-500"></i>
-            <span class="text-sm font-bold text-green-500">+12.5%</span>
-            <span class="text-xs text-slate">vs last month</span>
+  <!-- RED ALERT BANNER (5-Second Rule) -->
+  {% if has_red_alerts %}
+  <div class="bg-gradient-to-r from-red-500 to-red-600 rounded-xl p-4 shadow-lg animate-pulse-subtle" id="red-alert-banner">
+    <div class="flex items-center gap-3 mb-3">
+      <div class="p-2 bg-white/20 rounded-lg">
+        <i data-lucide="alert-octagon" class="w-6 h-6 text-white"></i>
+      </div>
+      <div>
+        <h2 class="text-lg font-bold text-white">{% trans "⚠️ ATTENTION REQUIRED" %}</h2>
+        <p class="text-sm text-white/80">{% trans "Items requiring immediate action" %}</p>
+      </div>
+    </div>
+    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+      {% for alert in red_alerts %}
+      <a href="{{ alert.url }}" class="bg-white/10 hover:bg-white/20 rounded-lg p-3 transition group">
+        <div class="flex items-center gap-2 mb-1">
+          <i data-lucide="{{ alert.icon }}" class="w-4 h-4 text-white"></i>
+          <span class="text-xs font-medium text-white/80">{{ alert.label }}</span>
+        </div>
+        <div class="text-2xl font-bold text-white">{{ alert.value }}</div>
+      </a>
+      {% endfor %}
+    </div>
+  </div>
+  {% endif %}
+
+  <!-- Core Module Cards Row -->
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+    <!-- Complaints Module Card -->
+    <div class="card module-card complaints hover:shadow-lg transition cursor-pointer" onclick="window.location.href='{% url 'complaints:complaint_list' %}'">
+      <div class="p-4">
+        <div class="flex items-center justify-between mb-3">
+          <div class="p-2 bg-red-50 rounded-lg">
+            <i data-lucide="message-square-warning" class="w-5 h-5 text-red-500"></i>
           </div>
+          <span class="text-xs font-bold px-2 py-1 rounded-full {{ complaints_module.variance_direction|yesno:'bg-green-100 text-green-600,bg-red-100 text-red-600,bg-slate-100 text-slate' }}">
+            {% if complaints_module.variance > 0 %}+{% endif %}{{ complaints_module.variance }}%
+          </span>
         </div>
-        <div class="p-3 bg-blue-50 rounded-xl">
-          <i data-lucide="message-square" class="w-6 h-6 text-blue"></i>
+        <h3 class="text-sm font-medium text-slate mb-1">{% trans "Complaints" %}</h3>
+        <p class="text-3xl font-bold text-navy">{{ complaints_module.total_active }}</p>
+        <div class="mt-2 flex items-center gap-2 text-xs text-slate">
+          <span class="flex items-center gap-1">
+            <span class="w-2 h-2 rounded-full bg-red-500"></span>
+            {{ complaints_module.by_severity.critical }} {% trans "critical" %}
+          </span>
         </div>
+        {% if complaints_module.overdue > 0 %}
+        <div class="mt-2 text-xs font-bold text-red-500 flex items-center gap-1">
+          <i data-lucide="clock" class="w-3 h-3"></i>
+          {{ complaints_module.overdue }} {% trans "overdue" %}
+        </div>
+        {% endif %}
+      </div>
+      <div class="px-4 py-2 bg-light border-t border-slate-100 flex justify-between items-center">
+        <span class="text-xs text-slate">{{ complaints_module.avg_resolution_hours }}h {% trans "avg resolution" %}</span>
+        <i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i>
       </div>
     </div>
 
-    <div class="card stat-card">
-      <div class="flex items-start justify-between">
-        <div>
-          <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Avg. Resolution" %}</p>
-          <p class="text-3xl font-bold text-navy">{{ stats.avg_resolution_time }}</p>
-          <div class="flex items-center gap-1.5 mt-2">
-            <i data-lucide="trending-down" class="w-4 h-4 text-green-500"></i>
-            <span class="text-sm font-bold text-green-500">-8.3%</span>
-            <span class="text-xs text-slate">faster</span>
+    <!-- Survey Insights Module Card -->
+    <div class="card module-card surveys hover:shadow-lg transition cursor-pointer" onclick="window.location.href='{% url 'surveys:instance_list' %}'">
+      <div class="p-4">
+        <div class="flex items-center justify-between mb-3">
+          <div class="p-2 bg-purple-50 rounded-lg">
+            <i data-lucide="clipboard-check" class="w-5 h-5 text-purple-500"></i>
           </div>
+          <span class="text-xs font-bold px-2 py-1 rounded-full bg-purple-100 text-purple-600">
+            NPS: {{ survey_module.nps_score }}
+          </span>
         </div>
-        <div class="p-3 bg-green-50 rounded-xl">
-          <i data-lucide="clock" class="w-6 h-6 text-green-500"></i>
+        <h3 class="text-sm font-medium text-slate mb-1">{% trans "Survey Insights" %}</h3>
+        <p class="text-3xl font-bold text-navy">{{ survey_module.avg_satisfaction }}%</p>
+        <div class="mt-2 flex items-center gap-2 text-xs text-slate">
+          <span class="flex items-center gap-1">
+            <i data-lucide="send" class="w-3 h-3"></i>
+            {{ survey_module.response_rate }}% {% trans "response" %}
+          </span>
         </div>
+        {% if survey_module.negative_24h > 0 %}
+        <div class="mt-2 text-xs font-bold text-orange-500 flex items-center gap-1">
+          <i data-lucide="frown" class="w-3 h-3"></i>
+          {{ survey_module.negative_24h }} {% trans "negative (24h)" %}
+        </div>
+        {% endif %}
+      </div>
+      <div class="px-4 py-2 bg-light border-t border-slate-100 flex justify-between items-center">
+        <span class="text-xs text-slate">{{ survey_module.total_completed }} {% trans "completed" %}</span>
+        <i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i>
       </div>
     </div>
 
-    <div class="card stat-card">
-      <div class="flex items-start justify-between">
-        <div>
-          <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Patient Satisfaction" %}</p>
-          <p class="text-3xl font-bold text-navy">{{ stats.satisfaction_score }}%</p>
-          <div class="flex items-center gap-1.5 mt-2">
-            <i data-lucide="trending-up" class="w-4 h-4 text-green-500"></i>
-            <span class="text-sm font-bold text-green-500">+5.2%</span>
-            <span class="text-xs text-slate">improvement</span>
+    <!-- PX Actions Module Card -->
+    <div class="card module-card actions hover:shadow-lg transition cursor-pointer" onclick="window.location.href='{% url 'actions:action_list' %}'">
+      <div class="p-4">
+        <div class="flex items-center justify-between mb-3">
+          <div class="p-2 bg-orange-50 rounded-lg">
+            <i data-lucide="check-circle-2" class="w-5 h-5 text-orange-500"></i>
           </div>
+          {% if actions_module.escalated > 0 %}
+          <span class="text-xs font-bold px-2 py-1 rounded-full bg-red-100 text-red-600 animate-pulse">
+            {{ actions_module.escalated }} {% trans "escalated" %}
+          </span>
+          {% endif %}
         </div>
-        <div class="p-3 bg-purple-50 rounded-xl">
-          <i data-lucide="smile" class="w-6 h-6 text-purple-500"></i>
+        <h3 class="text-sm font-medium text-slate mb-1">{% trans "PX Actions" %}</h3>
+        <p class="text-3xl font-bold text-navy">{{ actions_module.open|add:actions_module.in_progress }}</p>
+        <div class="mt-2 flex items-center gap-3 text-xs text-slate">
+          <span>{{ actions_module.open }} {% trans "open" %}</span>
+          <span>{{ actions_module.in_progress }} {% trans "in progress" %}</span>
         </div>
+        {% if actions_module.overdue > 0 %}
+        <div class="mt-2 text-xs font-bold text-red-500 flex items-center gap-1">
+          <i data-lucide="clock" class="w-3 h-3"></i>
+          {{ actions_module.overdue }} {% trans "overdue" %}
+        </div>
+        {% endif %}
+      </div>
+      <div class="px-4 py-2 bg-light border-t border-slate-100 flex justify-between items-center">
+        <span class="text-xs text-slate">{{ actions_module.closed_30d }} {% trans "closed (30d)" %}</span>
+        <i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i>
       </div>
     </div>
 
-    <div class="card stat-card">
-      <div class="flex items-start justify-between">
-        <div>
-          <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Active Actions" %}</p>
-          <p class="text-3xl font-bold text-navy">{{ stats.active_actions }}</p>
-          <div class="flex items-center gap-1.5 mt-2">
-            <i data-lucide="activity" class="w-4 h-4 text-blue"></i>
-            <span class="text-sm font-bold text-navy">{{ stats.new_today }}</span>
-            <span class="text-xs text-slate">new today</span>
+    <!-- Inquiries Module Card -->
+    <div class="card module-card inquiries hover:shadow-lg transition cursor-pointer" onclick="window.location.href='{% url 'complaints:complaint_list' %}?type=inquiry'">
+      <div class="p-4">
+        <div class="flex items-center justify-between mb-3">
+          <div class="p-2 bg-blue-50 rounded-lg">
+            <i data-lucide="help-circle" class="w-5 h-5 text-blue"></i>
           </div>
+          {% if inquiries_module.new_24h > 0 %}
+          <span class="text-xs font-bold px-2 py-1 rounded-full bg-blue-100 text-blue-600">
+            {{ inquiries_module.new_24h }} {% trans "new" %}
+          </span>
+          {% endif %}
         </div>
-        <div class="p-3 bg-orange-50 rounded-xl">
-          <i data-lucide="check-circle" class="w-6 h-6 text-orange-500"></i>
+        <h3 class="text-sm font-medium text-slate mb-1">{% trans "Inquiries" %}</h3>
+        <p class="text-3xl font-bold text-navy">{{ inquiries_module.total_active }}</p>
+        <div class="mt-2 flex items-center gap-3 text-xs text-slate">
+          <span>{{ inquiries_module.open }} {% trans "open" %}</span>
+          <span>{{ inquiries_module.in_progress }} {% trans "pending" %}</span>
         </div>
       </div>
+      <div class="px-4 py-2 bg-light border-t border-slate-100 flex justify-between items-center">
+        <span class="text-xs text-slate">{{ inquiries_module.resolved_30d }} {% trans "resolved (30d)" %}</span>
+        <i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i>
+      </div>
+    </div>
+
+    <!-- Observations Module Card -->
+    <div class="card module-card observations hover:shadow-lg transition cursor-pointer" onclick="window.location.href='{% url 'observations:observation_list' %}'">
+      <div class="p-4">
+        <div class="flex items-center justify-between mb-3">
+          <div class="p-2 bg-green-50 rounded-lg">
+            <i data-lucide="eye" class="w-5 h-5 text-green-500"></i>
+          </div>
+          {% if observations_module.critical > 0 %}
+          <span class="text-xs font-bold px-2 py-1 rounded-full bg-red-100 text-red-600">
+            {{ observations_module.critical }} {% trans "critical" %}
+          </span>
+          {% endif %}
+        </div>
+        <h3 class="text-sm font-medium text-slate mb-1">{% trans "Observations" %}</h3>
+        <p class="text-3xl font-bold text-navy">{{ observations_module.total_active }}</p>
+        <div class="mt-2 flex items-center gap-3 text-xs text-slate">
+          <span>{{ observations_module.new }} {% trans "new" %}</span>
+          <span>{{ observations_module.in_progress }} {% trans "in progress" %}</span>
+        </div>
+      </div>
+      <div class="px-4 py-2 bg-light border-t border-slate-100 flex justify-between items-center">
+        <span class="text-xs text-slate">{{ observations_module.resolved_30d }} {% trans "resolved (30d)" %}</span>
+        <i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i>
+      </div>
     </div>
   </div>
 
   <!-- Charts Row -->
   <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
     <!-- Complaints Trend -->
-    <div class="lg:col-span-2 card">
-      <div class="card-header">
-        <h3 class="card-title flex items-center gap-2">
-          <i data-lucide="trending-up" class="w-4 h-4"></i>
+    <div class="lg:col-span-2 section-card">
+      <div class="section-header flex justify-between items-center">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+          <i data-lucide="trending-up" class="w-5 h-5 text-blue"></i>
           {% trans "Complaints Trend" %}
         </h3>
         <div class="flex gap-2">
-          <button class="px-3 py-1.5 text-xs font-bold text-slate hover:text-navy hover:bg-light rounded-lg transition">Day</button>
-          <button class="px-3 py-1.5 text-xs font-bold bg-navy text-white rounded-lg">Week</button>
-          <button class="px-3 py-1.5 text-xs font-bold text-slate hover:text-navy hover:bg-light rounded-lg transition">Month</button>
+          <button class="px-3 py-1.5 text-xs font-bold text-slate hover:text-navy hover:bg-light rounded-lg transition border border-slate-200">Day</button>
+          <button class="px-3 py-1.5 text-xs font-bold bg-navy text-white rounded-lg border border-navy">Week</button>
+          <button class="px-3 py-1.5 text-xs font-bold text-slate hover:text-navy hover:bg-light rounded-lg transition border border-slate-200">Month</button>
         </div>
       </div>
-      <div id="complaintsTrendChart" class="h-[320px]"></div>
+      <div class="section-content">
+        <div id="complaintsTrendChart" class="h-[280px] chart-container"></div>
+      </div>
     </div>
 
-    <!-- Survey Satisfaction -->
-    <div class="card">
-      <div class="card-header">
-        <h3 class="card-title flex items-center gap-2">
-          <i data-lucide="star" class="w-4 h-4"></i>
-          {% trans "Survey Satisfaction" %}
+    <!-- NPS Trend -->
+    <div class="section-card">
+      <div class="section-header">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+          <i data-lucide="smile" class="w-5 h-5 text-purple-500"></i>
+          {% trans "NPS Score Trend" %}
         </h3>
       </div>
-      <div class="text-center py-8">
-        <div class="text-6xl font-bold text-navy mb-2">{{ chart_data.survey_satisfaction|floatformat:1 }}</div>
-        <p class="text-sm text-slate mb-6">{% trans "Average Score (Last 30 Days)" %}</p>
-        <div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
-          <div class="bg-gradient-to-r from-blue to-navy h-full transition-all duration-500" 
-               style="width: {{ chart_data.survey_satisfaction|floatformat:0 }}%"></div>
+      <div class="section-content">
+        <div id="npsTrendChart" class="h-[200px] chart-container"></div>
+        <div class="mt-4 pt-4 border-t-2 border-slate-100 text-center">
+          <div class="text-3xl font-bold text-navy">{{ survey_module.nps_score }}</div>
+          <p class="text-sm text-slate">{% trans "Current NPS Score" %}</p>
         </div>
-        <div class="mt-4 flex justify-between text-xs text-slate">
-          <span>0</span>
-          <span>50</span>
-          <span>100</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Severity Distribution & Actions Funnel -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <!-- Complaints by Severity -->
+    <div class="section-card">
+      <div class="section-header flex justify-between items-center">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+          <i data-lucide="pie-chart" class="w-5 h-5 text-red-500"></i>
+          {% trans "Active Complaints by Severity" %}
+        </h3>
+        <a href="{% url 'complaints:complaint_list' %}" class="text-xs font-bold text-navy hover:text-blue border border-navy px-3 py-1 rounded-lg transition">
+          {% trans "View All" %} →
+        </a>
+      </div>
+      <div class="section-content">
+        <div id="severityDonutChart" class="h-[250px] chart-container"></div>
+      </div>
+    </div>
+
+    <!-- Actions Funnel -->
+    <div class="section-card">
+      <div class="section-header">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+          <i data-lucide="git-branch" class="w-5 h-5 text-orange-500"></i>
+          {% trans "PX Actions Pipeline" %}
+        </h3>
+      </div>
+      <div class="p-4">
+        <div class="space-y-4">
+          <div class="relative">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-sm font-medium text-slate">{% trans "Open" %}</span>
+              <span class="text-sm font-bold text-navy">{{ actions_module.open }}</span>
+            </div>
+            <div class="h-8 bg-blue-100 rounded-lg overflow-hidden">
+              <div class="h-full bg-blue-500 flex items-center justify-end pr-2" style="width: {% widthratio actions_module.open actions_module.open|add:actions_module.in_progress|add:actions_module.pending_approval|add:actions_module.closed_30d 100 %}%"></div>
+            </div>
+          </div>
+          <div class="relative">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-sm font-medium text-slate">{% trans "In Progress" %}</span>
+              <span class="text-sm font-bold text-navy">{{ actions_module.in_progress }}</span>
+            </div>
+            <div class="h-8 bg-orange-100 rounded-lg overflow-hidden">
+              <div class="h-full bg-orange-500 flex items-center justify-end pr-2" style="width: {% widthratio actions_module.in_progress actions_module.open|add:actions_module.in_progress|add:actions_module.pending_approval|add:actions_module.closed_30d 100 %}%"></div>
+            </div>
+          </div>
+          <div class="relative">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-sm font-medium text-slate">{% trans "Pending Approval" %}</span>
+              <span class="text-sm font-bold text-navy">{{ actions_module.pending_approval }}</span>
+            </div>
+            <div class="h-8 bg-yellow-100 rounded-lg overflow-hidden">
+              <div class="h-full bg-yellow-500 flex items-center justify-end pr-2" style="width: {% widthratio actions_module.pending_approval actions_module.open|add:actions_module.in_progress|add:actions_module.pending_approval|add:actions_module.closed_30d 100 %}%"></div>
+            </div>
+          </div>
+          <div class="relative">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-sm font-medium text-slate">{% trans "Closed (30d)" %}</span>
+              <span class="text-sm font-bold text-green-500">{{ actions_module.closed_30d }}</span>
+            </div>
+            <div class="h-8 bg-green-100 rounded-lg overflow-hidden">
+              <div class="h-full bg-green-500 flex items-center justify-end pr-2" style="width: {% widthratio actions_module.closed_30d actions_module.open|add:actions_module.in_progress|add:actions_module.pending_approval|add:actions_module.closed_30d 100 %}%"></div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -138,9 +423,9 @@
   <!-- Live Feed Row -->
   <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
     <!-- Latest High Severity Complaints -->
-    <div class="card">
-      <div class="card-header">
-        <h3 class="card-title flex items-center gap-2">
+    <div class="section-card">
+      <div class="section-header">
+        <h3 class="font-bold text-navy flex items-center gap-2">
           <i data-lucide="alert-triangle" class="w-4 h-4"></i>
           {% trans "Latest High Severity Complaints" %}
         </h3>
@@ -149,18 +434,16 @@
           {% trans "View All" %}
           <i data-lucide="arrow-right" class="w-3 h-3"></i>
         </a>
-  
       </div>
-      <div class="divide-y divide-slate-100">
+      <div class="divide-y divide-slate-100 max-h-[400px] overflow-y-auto">
         {% if latest_complaints %}
         {% for complaint in latest_complaints %}
         <a href="{% url 'complaints:complaint_detail' complaint.id %}" 
-           class="block p-5 hover:bg-light transition group">
-  
+           class="block p-4 hover:bg-light transition group">
           <div class="flex justify-between items-start gap-4">
             <div class="flex-1 min-w-0">
-              <h4 class="font-bold text-navy mb-2 truncate group-hover:text-blue transition">{{ complaint.title }}</h4>
-              <div class="flex items-center gap-3 text-sm text-slate mb-2">
+              <h4 class="font-bold text-navy text-sm mb-1 truncate group-hover:text-blue transition">{{ complaint.title }}</h4>
+              <div class="flex items-center gap-2 text-xs text-slate mb-1">
                 <span class="flex items-center gap-1">
                   <i data-lucide="user" class="w-3 h-3"></i>
                   {{ complaint.patient.get_full_name }}
@@ -175,8 +458,8 @@
                 {{ complaint.created_at|timesince }} {% trans "ago" %}
               </div>
             </div>
-            <div class="flex flex-col gap-2 items-end">
-              <span class="px-3 py-1 rounded-full text-xs font-bold
+            <div class="flex flex-col gap-1 items-end">
+              <span class="px-2 py-0.5 rounded-full text-xs font-bold
                 {% if complaint.severity == 'critical' %}bg-red-100 text-red-600
                 {% elif complaint.severity == 'high' %}bg-orange-100 text-orange-600
                 {% elif complaint.severity == 'medium' %}bg-yellow-100 text-yellow-600
@@ -184,7 +467,7 @@
                 {{ complaint.get_severity_display }}
               </span>
               {% if complaint.is_overdue %}
-              <span class="px-3 py-1 rounded-full text-xs font-bold bg-red-500 text-white">
+              <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-red-500 text-white">
                 {% trans "OVERDUE" %}
               </span>
               {% endif %}
@@ -194,8 +477,8 @@
         {% endfor %}
         {% else %}
         <div class="p-8 text-center">
-          <div class="bg-green-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="check-circle" class="w-8 h-8 text-green-500"></i>
+          <div class="bg-green-50 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
+            <i data-lucide="check-circle" class="w-6 h-6 text-green-500"></i>
           </div>
           <p class="text-sm text-slate">{% trans "No high severity complaints" %}</p>
         </div>
@@ -204,9 +487,9 @@
     </div>
 
     <!-- Latest Escalated Actions -->
-    <div class="card">
-      <div class="card-header">
-        <h3 class="card-title flex items-center gap-2">
+    <div class="section-card">
+      <div class="section-header">
+        <h3 class="font-bold text-navy flex items-center gap-2">
           <i data-lucide="arrow-up-circle" class="w-4 h-4"></i>
           {% trans "Latest Escalated Actions" %}
         </h3>
@@ -215,18 +498,16 @@
           {% trans "View All" %}
           <i data-lucide="arrow-right" class="w-3 h-3"></i>
         </a>
-  
       </div>
-      <div class="divide-y divide-slate-100">
+      <div class="divide-y divide-slate-100 max-h-[400px] overflow-y-auto">
         {% if latest_actions %}
         {% for action in latest_actions %}
         <a href="{% url 'actions:action_detail' action.id %}" 
-           class="block p-5 hover:bg-light transition group">
-  
+           class="block p-4 hover:bg-light transition group">
           <div class="flex justify-between items-start gap-4">
             <div class="flex-1 min-w-0">
-              <h4 class="font-bold text-navy mb-2 truncate group-hover:text-blue transition">{{ action.title }}</h4>
-              <div class="flex items-center gap-3 text-sm text-slate mb-2">
+              <h4 class="font-bold text-navy text-sm mb-1 truncate group-hover:text-blue transition">{{ action.title }}</h4>
+              <div class="flex items-center gap-2 text-xs text-slate mb-1">
                 <span class="flex items-center gap-1">
                   <i data-lucide="building" class="w-3 h-3"></i>
                   {{ action.hospital.name }}
@@ -243,7 +524,7 @@
                 {% trans "Escalated" %} {{ action.escalated_at|timesince }} {% trans "ago" %}
               </div>
             </div>
-            <span class="px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-600">
+            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-red-100 text-red-600">
               {% trans "Level" %} {{ action.escalation_level }}
             </span>
           </div>
@@ -251,8 +532,8 @@
         {% endfor %}
         {% else %}
         <div class="p-8 text-center">
-          <div class="bg-green-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-            <i data-lucide="check-circle" class="w-8 h-8 text-green-500"></i>
+          <div class="bg-green-50 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
+            <i data-lucide="check-circle" class="w-6 h-6 text-green-500"></i>
           </div>
           <p class="text-sm text-slate">{% trans "No escalated actions" %}</p>
         </div>
@@ -261,10 +542,104 @@
     </div>
   </div>
 
+  <!-- Inquiries & Observations Row -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <!-- Latest Inquiries -->
+    <div class="section-card">
+      <div class="section-header">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+          <i data-lucide="help-circle" class="w-4 h-4"></i>
+          {% trans "Recent Inquiries" %}
+        </h3>
+        <a href="{% url 'complaints:complaint_list' %}?type=inquiry" 
+           class="text-xs font-bold text-navy hover:text-blue flex items-center gap-1 transition">
+          {% trans "View All" %}
+          <i data-lucide="arrow-right" class="w-3 h-3"></i>
+        </a>
+      </div>
+      <div class="divide-y divide-slate-100 max-h-[300px] overflow-y-auto">
+        {% if latest_inquiries %}
+        {% for inquiry in latest_inquiries %}
+        <a href="{% url 'complaints:inquiry_detail' inquiry.id %}" 
+           class="block p-4 hover:bg-light transition group">
+          <div class="flex justify-between items-start gap-4">
+            <div class="flex-1 min-w-0">
+              <h4 class="font-bold text-navy text-sm mb-1 truncate group-hover:text-blue transition">{{ inquiry.subject }}</h4>
+              <div class="flex items-center gap-2 text-xs text-slate">
+                <span class="flex items-center gap-1">
+                  <i data-lucide="user" class="w-3 h-3"></i>
+                  {{ inquiry.patient.get_full_name }}
+                </span>
+                <span>{{ inquiry.created_at|timesince }} {% trans "ago" %}</span>
+              </div>
+            </div>
+            <span class="px-2 py-0.5 rounded-full text-xs font-bold
+              {% if inquiry.status == 'open' %}bg-blue-100 text-blue-600
+              {% elif inquiry.status == 'in_progress' %}bg-yellow-100 text-yellow-600
+              {% else %}bg-green-100 text-green-600{% endif %}">
+              {{ inquiry.get_status_display }}
+            </span>
+          </div>
+        </a>
+        {% endfor %}
+        {% else %}
+        <div class="p-6 text-center">
+          <p class="text-sm text-slate">{% trans "No active inquiries" %}</p>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+
+    <!-- Latest Observations -->
+    <div class="section-card">
+      <div class="section-header">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+          <i data-lucide="eye" class="w-4 h-4"></i>
+          {% trans "Recent Observations" %}
+        </h3>
+        <a href="{% url 'observations:observation_list' %}" 
+           class="text-xs font-bold text-navy hover:text-blue flex items-center gap-1 transition">
+          {% trans "View All" %}
+          <i data-lucide="arrow-right" class="w-3 h-3"></i>
+        </a>
+      </div>
+      <div class="divide-y divide-slate-100 max-h-[300px] overflow-y-auto">
+        {% if latest_observations %}
+        {% for observation in latest_observations %}
+        <a href="{% url 'observations:observation_detail' observation.id %}" 
+           class="block p-4 hover:bg-light transition group">
+          <div class="flex justify-between items-start gap-4">
+            <div class="flex-1 min-w-0">
+              <h4 class="font-bold text-navy text-sm mb-1 truncate group-hover:text-blue transition">{{ observation.title }}</h4>
+              <div class="flex items-center gap-2 text-xs text-slate">
+                {% if observation.category %}
+                <span class="px-2 py-0.5 bg-slate-100 rounded text-slate">{{ observation.category.name_en }}</span>
+                {% endif %}
+                <span>{{ observation.created_at|timesince }} {% trans "ago" %}</span>
+              </div>
+            </div>
+            <span class="px-2 py-0.5 rounded-full text-xs font-bold
+              {% if observation.status == 'new' %}bg-blue-100 text-blue-600
+              {% elif observation.status == 'in_progress' %}bg-yellow-100 text-yellow-600
+              {% else %}bg-slate-100 text-slate{% endif %}">
+              {{ observation.get_status_display }}
+            </span>
+          </div>
+        </a>
+        {% endfor %}
+        {% else %}
+        <div class="p-6 text-center">
+          <p class="text-sm text-slate">{% trans "No active observations" %}</p>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+
   <!-- Top Physicians This Month -->
-  <div class="card">
-    <div class="card-header">
-      <h3 class="card-title flex items-center gap-2">
+  <div class="section-card">
+    <div class="section-header">
+      <h3 class="font-bold text-navy flex items-center gap-2">
         <i data-lucide="trophy" class="w-4 h-4"></i>
         {% trans "Top Physicians This Month" %}
       </h3>
@@ -278,141 +653,96 @@
       <table class="w-full">
         <thead>
           <tr class="bg-light">
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider" style="width: 80px;">{% trans "Rank" %}</th>
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Physician" %}</th>
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Specialization" %}</th>
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Department" %}</th>
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Rating" %}</th>
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Surveys" %}</th>
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Sentiment" %}</th>
+            <th class="px-4 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider" style="width: 60px;">{% trans "Rank" %}</th>
+            <th class="px-4 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Physician" %}</th>
+            <th class="px-4 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Department" %}</th>
+            <th class="px-4 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Rating" %}</th>
+            <th class="px-4 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Surveys" %}</th>
+            <th class="px-4 py-3 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Sentiment" %}</th>
           </tr>
         </thead>
         <tbody class="divide-y divide-slate-100">
           {% for rating in top_physicians %}
           <tr class="hover:bg-light transition cursor-pointer group">
-            <td class="px-6 py-4">
+            <td class="px-4 py-3">
               {% if forloop.counter == 1 %}
-              <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
-                <i data-lucide="trophy" class="w-5 h-5 text-yellow-500 fill-current"></i>
+              <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
+                <i data-lucide="trophy" class="w-4 h-4 text-yellow-500 fill-current"></i>
               </div>
               {% elif forloop.counter == 2 %}
-              <div class="w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center">
-                <i data-lucide="trophy" class="w-5 h-5 text-slate-500 fill-current"></i>
+              <div class="w-8 h-8 bg-slate-200 rounded-full flex items-center justify-center">
+                <i data-lucide="trophy" class="w-4 h-4 text-slate-500 fill-current"></i>
               </div>
               {% elif forloop.counter == 3 %}
-              <div class="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
-                <i data-lucide="trophy" class="w-5 h-5 text-amber-600 fill-current"></i>
+              <div class="w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center">
+                <i data-lucide="trophy" class="w-4 h-4 text-amber-600 fill-current"></i>
               </div>
               {% else %}
-              <span class="text-slate-400 font-bold">#{{ forloop.counter }}</span>
+              <span class="text-slate-400 font-bold text-sm">#{{ forloop.counter }}</span>
               {% endif %}
             </td>
-            <td class="px-6 py-4">
-              <div class="font-bold text-navy">{{ rating.staff }}</div>
-              <div class="text-xs text-slate">{{ rating.staff.license_number }}</div>
+            <td class="px-4 py-3">
+              <div class="font-bold text-navy text-sm">{{ rating.staff }}</div>
             </td>
-            <td class="px-6 py-4 text-sm text-slate">{{ rating.staff.specialization }}</td>
-            <td class="px-6 py-4 text-sm text-slate">
-              {% if rating.staff.department %}
-              {{ rating.staff.department.name }}
-              {% else %}
-              <span class="text-slate-400">-</span>
-              {% endif %}
+            <td class="px-4 py-3 text-sm text-slate">
+              {% if rating.staff.department %}{{ rating.staff.department.name }}{% else %}-{% endif %}
             </td>
-            <td class="px-6 py-4">
-              <div class="text-2xl font-bold text-green-500">{{ rating.average_rating|floatformat:2 }}</div>
+            <td class="px-4 py-3">
+              <div class="text-lg font-bold text-green-500">{{ rating.average_rating|floatformat:2 }}</div>
             </td>
-            <td class="px-6 py-4">
-              <span class="px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate">{{ rating.total_surveys }}</span>
+            <td class="px-4 py-3">
+              <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-slate-100 text-slate">{{ rating.total_surveys }}</span>
             </td>
-            <td class="px-6 py-4">
-              <div class="flex gap-1.5">
-                <span class="px-2 py-1 rounded-full text-xs font-bold bg-green-100 text-green-600" title="{% trans 'Positive' %}">{{ rating.positive_count }}</span>
-                <span class="px-2 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-600" title="{% trans 'Neutral' %}">{{ rating.neutral_count }}</span>
-                <span class="px-2 py-1 rounded-full text-xs font-bold bg-red-100 text-red-600" title="{% trans 'Negative' %}">{{ rating.negative_count }}</span>
+            <td class="px-4 py-3">
+              <div class="flex gap-1">
+                <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-600">{{ rating.positive_count }}</span>
+                <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-red-100 text-red-600">{{ rating.negative_count }}</span>
               </div>
             </td>
           </tr>
+          {% empty %}
+          <tr>
+            <td colspan="6" class="px-4 py-8 text-center text-slate">{% trans "No physician ratings this month" %}</td>
+          </tr>
           {% endfor %}
         </tbody>
       </table>
     </div>
-    {% if physician_stats.total_physicians %}
-    <div class="bg-gradient-to-r from-light to-blue-50 px-6 py-4 border-t border-slate-100">
-      <div class="grid grid-cols-3 gap-6 text-center">
-        <div>
-          <div class="text-2xl font-bold text-navy">{{ physician_stats.total_physicians }}</div>
-          <div class="text-xs text-slate uppercase tracking-wider mt-1">{% trans "Physicians Rated" %}</div>
-        </div>
-        <div>
-          <div class="text-2xl font-bold text-navy">{{ physician_stats.avg_rating|floatformat:2 }}</div>
-          <div class="text-xs text-slate uppercase tracking-wider mt-1">{% trans "Average Rating" %}</div>
-        </div>
-        <div>
-          <div class="text-2xl font-bold text-navy">{{ physician_stats.total_surveys }}</div>
-          <div class="text-xs text-slate uppercase tracking-wider mt-1">{% trans "Total Surveys" %}</div>
-        </div>
-      </div>
-    </div>
-    {% endif %}
-  </div>
-
-  <!-- Latest Integration Events -->
-  <div class="card">
-    <div class="card-header">
-      <h3 class="card-title flex items-center gap-2">
-        <i data-lucide="activity" class="w-4 h-4"></i>
-        {% trans "Latest Integration Events" %}
-      </h3>
-    </div>
-    <div class="overflow-x-auto">
-      <table class="w-full">
-        <thead>
-          <tr class="bg-light">
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Source" %}</th>
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Event Code" %}</th>
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Encounter ID" %}</th>
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Status" %}</th>
-            <th class="px-6 py-4 text-left text-xs font-bold text-slate uppercase tracking-wider">{% trans "Processed At" %}</th>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-slate-100">
-          {% for event in latest_events %}
-          <tr class="hover:bg-light transition">
-            <td class="px-6 py-4">
-              <span class="px-3 py-1 rounded-full text-xs font-bold bg-light text-navy">{{ event.get_source_system_display }}</span>
-            </td>
-            <td class="px-6 py-4">
-              <code class="px-2 py-1 bg-slate-100 rounded text-sm">{{ event.event_code }}</code>
-            </td>
-            <td class="px-6 py-4 text-sm text-slate">{{ event.encounter_id }}</td>
-            <td class="px-6 py-4">
-              <span class="px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-600">{{ event.get_status_display }}</span>
-            </td>
-            <td class="px-6 py-4 text-sm text-slate">
-              <i data-lucide="clock" class="w-3 h-3 inline mr-1"></i>
-              {{ event.processed_at|timesince }} {% trans "ago" %}
-            </td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-    {% if not latest_events %}
-    <div class="p-8 text-center">
-      <div class="bg-slate-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-        <i data-lucide="inbox" class="w-8 h-8 text-slate-400"></i>
-      </div>
-      <p class="text-sm text-slate">{% trans "No recent events" %}</p>
-    </div>
-    {% endif %}
   </div>
 </div>
 {% endblock %}
 
 {% block extra_js %}
 <script>
-// Complaints Trend Chart - ApexCharts
+// Auto-refresh configuration
+let refreshInterval = 60; // seconds
+let countdownTimer = refreshInterval;
+
+// Countdown timer
+function updateCountdown() {
+    countdownTimer--;
+    document.getElementById('refresh-timer').textContent = 
+        `{% trans "Refreshes in" %} ${countdownTimer}s`;
+    
+    if (countdownTimer <= 0) {
+        refreshCommandCenter();
+        countdownTimer = refreshInterval;
+    }
+}
+
+// Start countdown
+setInterval(updateCountdown, 1000);
+
+// Manual refresh function
+function refreshCommandCenter() {
+    const refreshIcon = document.getElementById('refresh-icon');
+    refreshIcon.classList.add('animate-spin');
+    
+    // Reload page to refresh data
+    window.location.reload();
+}
+
+// Complaints Trend Chart
 const chartElement = document.getElementById('complaintsTrendChart');
 if (chartElement) {
     const trendData = {{ chart_data.complaints_trend|safe }};
@@ -424,16 +754,15 @@ if (chartElement) {
         }],
         chart: {
             type: 'area',
-            height: 320,
-            toolbar: {
-                show: false
-            },
-            fontFamily: 'Inter, sans-serif'
-        },
-        stroke: {
-            curve: 'smooth',
-            width: 3
+            height: 280,
+            toolbar: { show: false },
+            fontFamily: 'Inter, sans-serif',
+            animations: {
+                enabled: true,
+                dynamicAnimation: { speed: 1000 }
+            }
         },
+        stroke: { curve: 'smooth', width: 3 },
         colors: ['#005696'],
         fill: {
             type: 'gradient',
@@ -447,62 +776,114 @@ if (chartElement) {
         xaxis: {
             categories: trendData.map(d => d.date),
             labels: {
-                style: {
-                    fontSize: '12px',
-                    fontFamily: 'Inter, sans-serif',
-                    colors: ['#64748b']
-                }
+                style: { fontSize: '11px', colors: ['#64748b'] }
             },
-            axisBorder: {
-                show: false
-            },
-            axisTicks: {
-                show: false
-            }
+            axisBorder: { show: false },
+            axisTicks: { show: false }
         },
         yaxis: {
             min: 0,
             forceNiceScale: true,
             labels: {
-                style: {
-                    fontSize: '12px',
-                    fontFamily: 'Inter, sans-serif',
-                    colors: ['#64748b']
-                }
+                style: { fontSize: '11px', colors: ['#64748b'] }
             }
         },
         grid: {
             borderColor: '#f1f5f9',
-            strokeDashArray: 5,
-            yaxis: {
-                lines: {
-                    show: true
-                }
-            }
+            strokeDashArray: 5
         },
         tooltip: {
             theme: 'light',
-            x: {
-                format: 'dd MMM yyyy'
-            },
-            style: {
-                fontSize: '12px',
-                fontFamily: 'Inter, sans-serif'
-            }
-        },
-        dataLabels: {
-            enabled: false
+            x: { format: 'dd MMM yyyy' }
         },
+        dataLabels: { enabled: false },
         markers: {
             size: 0,
-            hover: {
-                size: 6
-            }
+            hover: { size: 6 }
         }
     };
     
-    var chart = new ApexCharts(chartElement, options);
-    chart.render();
+    new ApexCharts(chartElement, options).render();
+}
+
+// NPS Trend Chart
+const npsElement = document.getElementById('npsTrendChart');
+if (npsElement) {
+    const npsData = {{ chart_data.nps_trend|safe }};
+    
+    var npsOptions = {
+        series: [{
+            name: 'NPS',
+            data: npsData.map(d => d.nps)
+        }],
+        chart: {
+            type: 'line',
+            height: 200,
+            toolbar: { show: false },
+            fontFamily: 'Inter, sans-serif'
+        },
+        stroke: { curve: 'smooth', width: 2 },
+        colors: ['#10b981'],
+        xaxis: {
+            categories: npsData.map(d => d.date),
+            labels: { show: false }
+        },
+        yaxis: {
+            min: -100,
+            max: 100,
+            labels: {
+                style: { fontSize: '10px', colors: ['#64748b'] }
+            }
+        },
+        grid: {
+            borderColor: '#f1f5f9',
+            strokeDashArray: 3
+        },
+        tooltip: { theme: 'light' },
+        dataLabels: { enabled: false }
+    };
+    
+    new ApexCharts(npsElement, npsOptions).render();
+}
+
+// Severity Donut Chart
+const severityElement = document.getElementById('severityDonutChart');
+if (severityElement) {
+    const severityData = {{ chart_data.complaints_by_severity|safe }};
+    
+    var severityOptions = {
+        series: [severityData.critical, severityData.high, severityData.medium, severityData.low],
+        chart: {
+            type: 'donut',
+            height: 250,
+            fontFamily: 'Inter, sans-serif'
+        },
+        colors: ['#ef4444', '#f97316', '#eab308', '#3b82f6'],
+        labels: ['{% trans "Critical" %}', '{% trans "High" %}', '{% trans "Medium" %}', '{% trans "Low" %}'],
+        plotOptions: {
+            pie: {
+                donut: {
+                    size: '65%',
+                    labels: {
+                        show: true,
+                        total: {
+                            show: true,
+                            label: '{% trans "Total" %}',
+                            fontSize: '14px',
+                            fontWeight: 'bold'
+                        }
+                    }
+                }
+            }
+        },
+        legend: {
+            position: 'bottom',
+            fontSize: '12px'
+        },
+        dataLabels: { enabled: false }
+    };
+    
+    new ApexCharts(severityElement, severityOptions).render();
 }
 
 // Initialize Lucide icons
diff --git a/templates/dashboard/my_dashboard.html b/templates/dashboard/my_dashboard.html
index 9cec54d..f7b7319 100644
--- a/templates/dashboard/my_dashboard.html
+++ b/templates/dashboard/my_dashboard.html
@@ -3,83 +3,111 @@
 
 {% block title %}My Dashboard - PX360{% endblock %}
 
-{% block page_title %}My Dashboard{% endblock %}
-
 {% block content %}
 <div class="space-y-6">
+    <!-- Page Header -->
+    <header class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-2">
+        <div>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="layout-dashboard" class="w-7 h-7"></i>
+                {% trans "My Dashboard" %}
+            </h1>
+            <p class="text-sm text-slate mt-1">{% trans "Overview of your assigned items and tasks" %}</p>
+            {% if selected_hospital %}
+            <div class="mt-2 inline-flex items-center gap-2 px-3 py-1.5 bg-blue-50 border border-blue-200 rounded-lg">
+                <i data-lucide="building-2" class="w-4 h-4 text-blue"></i>
+                <span class="text-sm font-medium text-blue">{{ selected_hospital.name }}</span>
+                <span class="text-xs text-blue/70">({% trans "filtered" %})</span>
+            </div>
+            {% endif %}
+        </div>
+    </header>
+
     <!-- Summary Cards -->
     <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
         <!-- Total Items -->
-        <div class="bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-2xl p-5 text-white shadow-lg shadow-indigo-200">
-            <div class="flex items-center gap-3 mb-3">
-                <div class="bg-white/20 p-2.5 rounded-xl">
-                    <i data-lucide="inbox" class="w-5 h-5"></i>
+        <div class="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-lg transition cursor-pointer">
+            <div class="p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <div class="p-2 bg-navy/10 rounded-lg">
+                        <i data-lucide="inbox" class="w-5 h-5 text-navy"></i>
+                    </div>
                 </div>
-                <div class="text-sm font-medium opacity-90">Total Items</div>
+                <h3 class="text-sm font-medium text-slate mb-1">{% trans "Total Items" %}</h3>
+                <p class="text-3xl font-bold text-navy">{{ total_stats.total }}</p>
             </div>
-            <div class="text-3xl font-bold">{{ total_stats.total }}</div>
         </div>
         
         <!-- Open -->
-        <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-2xl p-5 text-white shadow-lg shadow-yellow-200">
-            <div class="flex items-center gap-3 mb-3">
-                <div class="bg-white/20 p-2.5 rounded-xl">
-                    <i data-lucide="mail-open" class="w-5 h-5"></i>
+        <div class="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-lg transition cursor-pointer">
+            <div class="p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <div class="p-2 bg-yellow-50 rounded-lg">
+                        <i data-lucide="mail-open" class="w-5 h-5 text-yellow-500"></i>
+                    </div>
                 </div>
-                <div class="text-sm font-medium opacity-90">Open</div>
+                <h3 class="text-sm font-medium text-slate mb-1">{% trans "Open" %}</h3>
+                <p class="text-3xl font-bold text-navy">{{ total_stats.open }}</p>
             </div>
-            <div class="text-3xl font-bold">{{ total_stats.open }}</div>
         </div>
         
         <!-- In Progress -->
-        <div class="bg-gradient-to-br from-sky-500 to-sky-600 rounded-2xl p-5 text-white shadow-lg shadow-sky-200">
-            <div class="flex items-center gap-3 mb-3">
-                <div class="bg-white/20 p-2.5 rounded-xl">
-                    <i data-lucide="hourglass" class="w-5 h-5"></i>
+        <div class="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-lg transition cursor-pointer">
+            <div class="p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <div class="p-2 bg-blue-50 rounded-lg">
+                        <i data-lucide="hourglass" class="w-5 h-5 text-blue"></i>
+                    </div>
                 </div>
-                <div class="text-sm font-medium opacity-90">In Progress</div>
+                <h3 class="text-sm font-medium text-slate mb-1">{% trans "In Progress" %}</h3>
+                <p class="text-3xl font-bold text-navy">{{ total_stats.in_progress }}</p>
             </div>
-            <div class="text-3xl font-bold">{{ total_stats.in_progress }}</div>
         </div>
         
         <!-- Resolved -->
-        <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl p-5 text-white shadow-lg shadow-emerald-200">
-            <div class="flex items-center gap-3 mb-3">
-                <div class="bg-white/20 p-2.5 rounded-xl">
-                    <i data-lucide="check-circle" class="w-5 h-5"></i>
+        <div class="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-lg transition cursor-pointer">
+            <div class="p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <div class="p-2 bg-green-50 rounded-lg">
+                        <i data-lucide="check-circle" class="w-5 h-5 text-green-500"></i>
+                    </div>
                 </div>
-                <div class="text-sm font-medium opacity-90">Resolved</div>
+                <h3 class="text-sm font-medium text-slate mb-1">{% trans "Resolved" %}</h3>
+                <p class="text-3xl font-bold text-navy">{{ total_stats.resolved }}</p>
             </div>
-            <div class="text-3xl font-bold">{{ total_stats.resolved }}</div>
         </div>
         
         <!-- Closed -->
-        <div class="bg-gradient-to-br from-gray-500 to-gray-600 rounded-2xl p-5 text-white shadow-lg shadow-gray-200">
-            <div class="flex items-center gap-3 mb-3">
-                <div class="bg-white/20 p-2.5 rounded-xl">
-                    <i data-lucide="x-circle" class="w-5 h-5"></i>
+        <div class="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-lg transition cursor-pointer">
+            <div class="p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <div class="p-2 bg-slate-100 rounded-lg">
+                        <i data-lucide="x-circle" class="w-5 h-5 text-slate"></i>
+                    </div>
                 </div>
-                <div class="text-sm font-medium opacity-90">Closed</div>
+                <h3 class="text-sm font-medium text-slate mb-1">{% trans "Closed" %}</h3>
+                <p class="text-3xl font-bold text-navy">{{ total_stats.closed }}</p>
             </div>
-            <div class="text-3xl font-bold">{{ total_stats.closed }}</div>
         </div>
         
         <!-- Overdue -->
-        <div class="bg-gradient-to-br from-navy to-navy rounded-2xl p-5 text-white shadow-lg shadow-blue-200">
-            <div class="flex items-center gap-3 mb-3">
-                <div class="bg-white/20 p-2.5 rounded-xl">
-                    <i data-lucide="alert-triangle" class="w-5 h-5"></i>
+        <div class="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-lg transition cursor-pointer">
+            <div class="p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <div class="p-2 bg-red-50 rounded-lg">
+                        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-500"></i>
+                    </div>
                 </div>
-                <div class="text-sm font-medium opacity-90">Overdue</div>
+                <h3 class="text-sm font-medium text-slate mb-1">{% trans "Overdue" %}</h3>
+                <p class="text-3xl font-bold text-red-500">{{ total_stats.overdue }}</p>
             </div>
-            <div class="text-3xl font-bold">{{ total_stats.overdue }}</div>
         </div>
     </div>
 
     <!-- Chart Row -->
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-50">
-        <div class="p-6 border-b border-gray-100">
-            <h3 class="text-lg font-bold flex items-center gap-2">
+    <div class="bg-white rounded-lg border border-slate-200 shadow-sm">
+        <div class="card-header">
+            <h3 class="card-title flex items-center gap-2">
                 <i data-lucide="trending-up" class="w-5 h-5 text-navy"></i>
                 {% trans "Completion Trend (Last 30 Days)" %}
             </h3>
@@ -90,83 +118,85 @@
     </div>
 
     <!-- Filter Bar -->
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-50 p-6">
-        <form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
-            <div>
-                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Date Range" %}</label>
-                <select name="date_range" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
-                    <option value="7" {% if date_range == 7 %}selected{% endif %}>{% trans "Last 7 days" %}</option>
-                    <option value="30" {% if date_range == 30 %}selected{% endif %}>{% trans "Last 30 days" %}</option>
-                    <option value="90" {% if date_range == 90 %}selected{% endif %}>{% trans "Last 90 days" %}</option>
-                    <option value="-1" {% if date_range == -1 %}selected{% endif %}>{% trans "All time" %}</option>
-                </select>
-            </div>
-            <div>
-                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Search" %}</label>
-                <input type="text" name="search" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition" value="{{ search_query }}" placeholder="{% trans 'Search...' %}">
-            </div>
-            <div>
-                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Status" %}</label>
-                <select name="status" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
-                    <option value="">{% trans "All" %}</option>
-                    <option value="open" {% if status_filter == 'open' %}selected{% endif %}>{% trans "Open" %}</option>
-                    <option value="in_progress" {% if status_filter == 'in_progress' %}selected{% endif %}>{% trans "In Progress" %}</option>
-                    <option value="resolved" {% if status_filter == 'resolved' %}selected{% endif %}>{% trans "Resolved" %}</option>
-                    <option value="closed" {% if status_filter == 'closed' %}selected{% endif %}>{% trans "Closed" %}</option>
-                </select>
-            </div>
-            <div>
-                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Priority/Severity" %}</label>
-                <select name="priority" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
-                    <option value="">{% trans "All" %}</option>
-                    <option value="low" {% if priority_filter == 'low' %}selected{% endif %}>{% trans "Low" %}</option>
-                    <option value="medium" {% if priority_filter == 'medium' %}selected{% endif %}>{% trans "Medium" %}</option>
-                    <option value="high" {% if priority_filter == 'high' %}selected{% endif %}>{% trans "High" %}</option>
-                    <option value="critical" {% if priority_filter == 'critical' %}selected{% endif %}>{% trans "Critical" %}</option>
-                </select>
-            </div>
-            <div class="flex items-end">
-                <button type="submit" class="w-full px-6 py-2.5 bg-light0 text-white rounded-xl font-semibold hover:bg-navy transition flex items-center justify-center gap-2">
-                    <i data-lucide="filter" class="w-4 h-4"></i>
-                    {% trans "Apply Filters" %}
-                </button>
-            </div>
-        </form>
+    <div class="bg-white rounded-lg border border-slate-200 shadow-sm">
+        <div class="p-6">
+            <form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+                <div>
+                    <label class="block text-sm font-bold text-slate mb-2">{% trans "Date Range" %}</label>
+                    <select name="date_range" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition bg-white">
+                        <option value="7" {% if date_range == 7 %}selected{% endif %}>{% trans "Last 7 days" %}</option>
+                        <option value="30" {% if date_range == 30 %}selected{% endif %}>{% trans "Last 30 days" %}</option>
+                        <option value="90" {% if date_range == 90 %}selected{% endif %}>{% trans "Last 90 days" %}</option>
+                        <option value="-1" {% if date_range == -1 %}selected{% endif %}>{% trans "All time" %}</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-bold text-slate mb-2">{% trans "Search" %}</label>
+                    <input type="text" name="search" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition" value="{{ search_query }}" placeholder="{% trans 'Search...' %}">
+                </div>
+                <div>
+                    <label class="block text-sm font-bold text-slate mb-2">{% trans "Status" %}</label>
+                    <select name="status" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition bg-white">
+                        <option value="">{% trans "All" %}</option>
+                        <option value="open" {% if status_filter == 'open' %}selected{% endif %}>{% trans "Open" %}</option>
+                        <option value="in_progress" {% if status_filter == 'in_progress' %}selected{% endif %}>{% trans "In Progress" %}</option>
+                        <option value="resolved" {% if status_filter == 'resolved' %}selected{% endif %}>{% trans "Resolved" %}</option>
+                        <option value="closed" {% if status_filter == 'closed' %}selected{% endif %}>{% trans "Closed" %}</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-bold text-slate mb-2">{% trans "Priority/Severity" %}</label>
+                    <select name="priority" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition bg-white">
+                        <option value="">{% trans "All" %}</option>
+                        <option value="low" {% if priority_filter == 'low' %}selected{% endif %}>{% trans "Low" %}</option>
+                        <option value="medium" {% if priority_filter == 'medium' %}selected{% endif %}>{% trans "Medium" %}</option>
+                        <option value="high" {% if priority_filter == 'high' %}selected{% endif %}>{% trans "High" %}</option>
+                        <option value="critical" {% if priority_filter == 'critical' %}selected{% endif %}>{% trans "Critical" %}</option>
+                    </select>
+                </div>
+                <div class="flex items-end">
+                    <button type="submit" class="w-full px-6 py-2.5 bg-navy text-white rounded-xl font-bold hover:bg-blue transition flex items-center justify-center gap-2">
+                        <i data-lucide="filter" class="w-4 h-4"></i>
+                        {% trans "Apply Filters" %}
+                    </button>
+                </div>
+            </form>
+        </div>
     </div>
 
     <!-- Tabs -->
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-50">
-        <div class="border-b border-gray-100">
+    <div class="bg-white rounded-lg border border-slate-200 shadow-sm">
+        <div class="border-b border-slate-100">
             <nav class="flex gap-1 p-2 overflow-x-auto" id="dashboardTabs">
-                <button class="px-5 py-2.5 rounded-xl font-semibold flex items-center gap-2 {% if active_tab == 'complaints' %}bg-light0 text-white{% else %}text-gray-500 hover:bg-gray-100{% endif %}" data-tab="complaints">
+                <button class="px-5 py-2.5 rounded-xl font-bold flex items-center gap-2 transition {% if active_tab == 'complaints' %}bg-navy text-white{% else %}text-slate hover:bg-light{% endif %}" data-tab="complaints">
                     <i data-lucide="alert-triangle" class="w-4 h-4"></i>
                     {% trans "Complaints" %}
-                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'complaints' %}bg-white/30 text-white{% else %}bg-red-100 text-red-600{% endif %}">{{ stats.complaints.total }}</span>
+                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'complaints' %}bg-white/20 text-white{% else %}bg-red-100 text-red-600{% endif %}">{{ stats.complaints.total }}</span>
                 </button>
-                <button class="px-5 py-2.5 rounded-xl font-semibold flex items-center gap-2 {% if active_tab == 'inquiries' %}bg-light0 text-white{% else %}text-gray-500 hover:bg-gray-100{% endif %}" data-tab="inquiries">
+                <button class="px-5 py-2.5 rounded-xl font-bold flex items-center gap-2 transition {% if active_tab == 'inquiries' %}bg-navy text-white{% else %}text-slate hover:bg-light{% endif %}" data-tab="inquiries">
                     <i data-lucide="help-circle" class="w-4 h-4"></i>
                     {% trans "Inquiries" %}
-                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'inquiries' %}bg-white/30 text-white{% else %}bg-sky-100 text-sky-600{% endif %}">{{ stats.inquiries.total }}</span>
+                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'inquiries' %}bg-white/20 text-white{% else %}bg-blue-100 text-blue-600{% endif %}">{{ stats.inquiries.total }}</span>
                 </button>
-                <button class="px-5 py-2.5 rounded-xl font-semibold flex items-center gap-2 {% if active_tab == 'observations' %}bg-light0 text-white{% else %}text-gray-500 hover:bg-gray-100{% endif %}" data-tab="observations">
+                <button class="px-5 py-2.5 rounded-xl font-bold flex items-center gap-2 transition {% if active_tab == 'observations' %}bg-navy text-white{% else %}text-slate hover:bg-light{% endif %}" data-tab="observations">
                     <i data-lucide="eye" class="w-4 h-4"></i>
                     {% trans "Observations" %}
-                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'observations' %}bg-white/30 text-white{% else %}bg-yellow-100 text-yellow-600{% endif %}">{{ stats.observations.total }}</span>
+                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'observations' %}bg-white/20 text-white{% else %}bg-yellow-100 text-yellow-600{% endif %}">{{ stats.observations.total }}</span>
                 </button>
-                <button class="px-5 py-2.5 rounded-xl font-semibold flex items-center gap-2 {% if active_tab == 'actions' %}bg-light0 text-white{% else %}text-gray-500 hover:bg-gray-100{% endif %}" data-tab="actions">
+                <button class="px-5 py-2.5 rounded-xl font-bold flex items-center gap-2 transition {% if active_tab == 'actions' %}bg-navy text-white{% else %}text-slate hover:bg-light{% endif %}" data-tab="actions">
                     <i data-lucide="clipboard-check" class="w-4 h-4"></i>
                     {% trans "PX Actions" %}
-                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'actions' %}bg-white/30 text-white{% else %}bg-indigo-100 text-indigo-600{% endif %}">{{ stats.actions.total }}</span>
+                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'actions' %}bg-white/20 text-white{% else %}bg-orange-100 text-orange-600{% endif %}">{{ stats.actions.total }}</span>
                 </button>
-                <button class="px-5 py-2.5 rounded-xl font-semibold flex items-center gap-2 {% if active_tab == 'tasks' %}bg-light0 text-white{% else %}text-gray-500 hover:bg-gray-100{% endif %}" data-tab="tasks">
+                <button class="px-5 py-2.5 rounded-xl font-bold flex items-center gap-2 transition {% if active_tab == 'tasks' %}bg-navy text-white{% else %}text-slate hover:bg-light{% endif %}" data-tab="tasks">
                     <i data-lucide="list-todo" class="w-4 h-4"></i>
                     {% trans "Tasks" %}
-                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'tasks' %}bg-white/30 text-white{% else %}bg-gray-100 text-gray-600{% endif %}">{{ stats.tasks.total }}</span>
+                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'tasks' %}bg-white/20 text-white{% else %}bg-slate-100 text-slate{% endif %}">{{ stats.tasks.total }}</span>
                 </button>
-                <button class="px-5 py-2.5 rounded-xl font-semibold flex items-center gap-2 {% if active_tab == 'feedback' %}bg-light0 text-white{% else %}text-gray-500 hover:bg-gray-100{% endif %}" data-tab="feedback">
+                <button class="px-5 py-2.5 rounded-xl font-bold flex items-center gap-2 transition {% if active_tab == 'feedback' %}bg-navy text-white{% else %}text-slate hover:bg-light{% endif %}" data-tab="feedback">
                     <i data-lucide="message-square" class="w-4 h-4"></i>
                     {% trans "Feedback" %}
-                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'feedback' %}bg-white/30 text-white{% else %}bg-emerald-100 text-emerald-600{% endif %}">{{ stats.feedback.total }}</span>
+                    <span class="px-2 py-0.5 rounded-lg text-xs font-bold {% if active_tab == 'feedback' %}bg-white/20 text-white{% else %}bg-green-100 text-green-600{% endif %}">{{ stats.feedback.total }}</span>
                 </button>
             </nav>
         </div>
@@ -209,24 +239,24 @@
 <!-- Bulk Action Modal -->
 <div id="bulkActionModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
     <div class="bg-white rounded-2xl w-full max-w-md mx-4 shadow-2xl">
-        <div class="flex justify-between items-center p-6 border-b border-gray-100">
-            <h3 class="text-xl font-bold">{% trans "Bulk Action" %}</h3>
-            <button onclick="closeBulkActionModal()" class="p-2 hover:bg-gray-100 rounded-xl transition">
-                <i data-lucide="x" class="w-5 h-5 text-gray-500"></i>
+        <div class="flex justify-between items-center p-6 border-b border-slate-100">
+            <h3 class="text-xl font-bold text-navy">{% trans "Bulk Action" %}</h3>
+            <button onclick="closeBulkActionModal()" class="p-2 hover:bg-light rounded-xl transition">
+                <i data-lucide="x" class="w-5 h-5 text-slate"></i>
             </button>
         </div>
         <div class="p-6">
             <input type="hidden" id="bulkActionTab">
             <div class="mb-4">
-                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Select Action" %}</label>
-                <select id="bulkActionType" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
+                <label class="block text-sm font-bold text-slate mb-2">{% trans "Select Action" %}</label>
+                <select id="bulkActionType" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition bg-white">
                     <option value="bulk_status">{% trans "Change Status" %}</option>
                     <option value="bulk_assign">{% trans "Assign to User" %}</option>
                 </select>
             </div>
             <div class="mb-4" id="bulkStatusContainer">
-                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "New Status" %}</label>
-                <select id="bulkStatus" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
+                <label class="block text-sm font-bold text-slate mb-2">{% trans "New Status" %}</label>
+                <select id="bulkStatus" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition bg-white">
                     <option value="open">{% trans "Open" %}</option>
                     <option value="in_progress">{% trans "In Progress" %}</option>
                     <option value="resolved">{% trans "Resolved" %}</option>
@@ -234,17 +264,17 @@
                 </select>
             </div>
             <div class="mb-4 hidden" id="bulkAssignContainer">
-                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Assign To" %}</label>
-                <select id="bulkAssignUser" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
+                <label class="block text-sm font-bold text-slate mb-2">{% trans "Assign To" %}</label>
+                <select id="bulkAssignUser" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition bg-white">
                     <!-- Users will be loaded dynamically -->
                 </select>
             </div>
         </div>
-        <div class="flex gap-3 p-6 border-t border-gray-100">
-            <button onclick="closeBulkActionModal()" class="flex-1 px-6 py-2.5 border-2 border-gray-200 text-gray-600 rounded-xl font-semibold hover:bg-gray-50 transition">
+        <div class="flex gap-3 p-6 border-t border-slate-100">
+            <button onclick="closeBulkActionModal()" class="flex-1 px-6 py-2.5 border-2 border-slate-200 text-slate rounded-xl font-bold hover:bg-light transition">
                 {% trans "Cancel" %}
             </button>
-            <button id="executeBulkAction" class="flex-1 px-6 py-2.5 bg-light0 text-white rounded-xl font-semibold hover:bg-navy transition">
+            <button id="executeBulkAction" class="flex-1 px-6 py-2.5 bg-navy text-white rounded-xl font-bold hover:bg-blue transition">
                 {% trans "Execute" %}
             </button>
         </div>
@@ -268,20 +298,20 @@ document.addEventListener('DOMContentLoaded', function() {
             
             // Update tab buttons
             tabs.forEach(t => {
-                t.classList.remove('bg-light0', 'text-white');
-                t.classList.add('text-gray-500', 'hover:bg-gray-100');
+                t.classList.remove('bg-navy', 'text-white');
+                t.classList.add('text-slate', 'hover:bg-light');
                 const badge = t.querySelector('span');
                 if (badge) {
-                    badge.classList.remove('bg-white/30', 'text-white');
+                    badge.classList.remove('bg-white/20', 'text-white');
                     badge.classList.add('bg-' + getBadgeColor(tabName) + '-100', 'text-' + getBadgeColor(tabName) + '-600');
                 }
             });
-            this.classList.remove('text-gray-500', 'hover:bg-gray-100');
-            this.classList.add('bg-light0', 'text-white');
+            this.classList.remove('text-slate', 'hover:bg-light');
+            this.classList.add('bg-navy', 'text-white');
             const currentBadge = this.querySelector('span');
             if (currentBadge) {
                 currentBadge.classList.remove('bg-' + getBadgeColor(tabName) + '-100', 'text-' + getBadgeColor(tabName) + '-600');
-                currentBadge.classList.add('bg-white/30', 'text-white');
+                currentBadge.classList.add('bg-white/20', 'text-white');
             }
             
             // Show/hide content
@@ -305,13 +335,13 @@ document.addEventListener('DOMContentLoaded', function() {
     function getBadgeColor(tabName) {
         const colors = {
             'complaints': 'red',
-            'inquiries': 'sky',
+            'inquiries': 'blue',
             'observations': 'yellow',
-            'actions': 'indigo',
-            'tasks': 'gray',
-            'feedback': 'emerald'
+            'actions': 'orange',
+            'tasks': 'slate',
+            'feedback': 'green'
         };
-        return colors[tabName] || 'gray';
+        return colors[tabName] || 'slate';
     }
 
     // Completion Trend Chart - ApexCharts
@@ -338,14 +368,14 @@ document.addEventListener('DOMContentLoaded', function() {
                     columnWidth: '60%'
                 }
             },
-            colors: ['#22c55e'],
+            colors: ['#005696'],
             xaxis: {
                 categories: completionData.labels,
                 labels: {
                     style: {
                         fontSize: '12px',
                         fontFamily: 'Inter, sans-serif',
-                        colors: ['#6b7280']
+                        colors: ['#64748b']
                     }
                 },
                 axisBorder: {
@@ -362,12 +392,12 @@ document.addEventListener('DOMContentLoaded', function() {
                     style: {
                         fontSize: '12px',
                         fontFamily: 'Inter, sans-serif',
-                        colors: ['#6b7280']
+                        colors: ['#64748b']
                     }
                 }
             },
             grid: {
-                borderColor: '#f3f4f6',
+                borderColor: '#f1f5f9',
                 strokeDashArray: 5
             },
             tooltip: {
diff --git a/templates/dashboard/partials/actions_table.html b/templates/dashboard/partials/actions_table.html
index 9802b22..ee94a85 100644
--- a/templates/dashboard/partials/actions_table.html
+++ b/templates/dashboard/partials/actions_table.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="overflow-hidden border border-gray-100 rounded-2xl">
+<div class="overflow-hidden border border-gray-100 rounded-lg">
     <div class="bg-gradient-to-r from-indigo-50 to-purple-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
         <h3 class="font-bold text-lg flex items-center gap-2">
             <i data-lucide="clipboard-check" class="w-5 h-5 text-indigo-500"></i>
diff --git a/templates/dashboard/partials/complaints_table.html b/templates/dashboard/partials/complaints_table.html
index fdf71c1..db19a15 100644
--- a/templates/dashboard/partials/complaints_table.html
+++ b/templates/dashboard/partials/complaints_table.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="overflow-hidden border border-gray-100 rounded-2xl">
+<div class="overflow-hidden border border-gray-100 rounded-lg">
     <div class="bg-gradient-to-r from-light to-blue-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
         <h3 class="font-bold text-lg flex items-center gap-2">
             <i data-lucide="alert-triangle" class="w-5 h-5 text-navy"></i>
diff --git a/templates/dashboard/partials/feedback_table.html b/templates/dashboard/partials/feedback_table.html
index ce20a48..d25d427 100644
--- a/templates/dashboard/partials/feedback_table.html
+++ b/templates/dashboard/partials/feedback_table.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="overflow-hidden border border-gray-100 rounded-2xl">
+<div class="overflow-hidden border border-gray-100 rounded-lg">
     <div class="bg-gradient-to-r from-green-50 to-emerald-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
         <h3 class="font-bold text-lg flex items-center gap-2">
             <i data-lucide="message-square" class="w-5 h-5 text-green-500"></i>
diff --git a/templates/dashboard/partials/inquiries_table.html b/templates/dashboard/partials/inquiries_table.html
index e6b7821..936047c 100644
--- a/templates/dashboard/partials/inquiries_table.html
+++ b/templates/dashboard/partials/inquiries_table.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="overflow-hidden border border-gray-100 rounded-2xl">
+<div class="overflow-hidden border border-gray-100 rounded-lg">
     <div class="bg-gradient-to-r from-sky-50 to-blue-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
         <h3 class="font-bold text-lg flex items-center gap-2">
             <i data-lucide="help-circle" class="w-5 h-5 text-sky-500"></i>
diff --git a/templates/dashboard/partials/observations_table.html b/templates/dashboard/partials/observations_table.html
index e788c12..75628f3 100644
--- a/templates/dashboard/partials/observations_table.html
+++ b/templates/dashboard/partials/observations_table.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="overflow-hidden border border-gray-100 rounded-2xl">
+<div class="overflow-hidden border border-gray-100 rounded-lg">
     <div class="bg-gradient-to-r from-yellow-50 to-amber-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
         <h3 class="font-bold text-lg flex items-center gap-2">
             <i data-lucide="eye" class="w-5 h-5 text-yellow-500"></i>
diff --git a/templates/dashboard/partials/tasks_table.html b/templates/dashboard/partials/tasks_table.html
index 2e14949..8b05a0a 100644
--- a/templates/dashboard/partials/tasks_table.html
+++ b/templates/dashboard/partials/tasks_table.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="overflow-hidden border border-gray-100 rounded-2xl">
+<div class="overflow-hidden border border-gray-100 rounded-lg">
     <div class="bg-gradient-to-r from-gray-50 to-slate-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
         <h3 class="font-bold text-lg flex items-center gap-2">
             <i data-lucide="list-todo" class="w-5 h-5 text-gray-500"></i>
diff --git a/templates/layouts/partials/sidebar.html b/templates/layouts/partials/sidebar.html
index 7086c30..5315ead 100644
--- a/templates/layouts/partials/sidebar.html
+++ b/templates/layouts/partials/sidebar.html
@@ -61,6 +61,8 @@
 </style>
 
 <aside id="sidebar" class="sidebar-icon-only bg-navy text-white flex flex-col shadow-2xl z-20 fixed left-0 top-0 h-screen overflow-y-auto overflow-x-hidden">
+    {% csrf_token %}
+    <script>window.sidebarCsrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;</script>
     <!-- Brand -->
     <div class="p-4 flex flex-col items-center border-b border-white/10">
         <div class="sidebar-logo-text rounded-lg overflow-hidden mb-3" style="width: 200px; height: 100px;">
@@ -81,14 +83,25 @@
             <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Dashboard" %}</span>
         </a>
         
-        <!-- Admin Evaluation (Admin only) -->
+        <!-- Admin Evaluation (Admin only - NOT for Source Users) -->
         {% if user.is_px_admin or user.is_hospital_admin %}
-        <a href="{% url 'dashboard:admin_evaluation' %}" 
+        {% if not user.source_user_profile %}
+        <a href="{% url 'dashboard:admin_evaluation' %}"
            class="flex items-center gap-3 p-3 rounded-lg transition {% if 'admin-evaluation' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
             <i data-lucide="shield-check" class="w-5 h-5 flex-shrink-0"></i>
             <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Admin Evaluation" %}</span>
         </a>
         {% endif %}
+        {% endif %}
+        
+        <!-- Source User Dashboard (Source Users only) -->
+        {% if user.source_user_profile %}
+        <a href="{% url 'px_sources:source_user_dashboard' %}"
+           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'source_user_dashboard' in request.resolver_match.url_name %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+            <i data-lucide="radio" class="w-5 h-5 flex-shrink-0"></i>
+            <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "My Source Dashboard" %}</span>
+        </a>
+        {% endif %}
         
         <!-- Complaints -->
         <a href="{% url 'complaints:complaint_list' %}" 
@@ -100,6 +113,39 @@
             {% endif %}
         </a>
         
+        <!-- QI Projects - Hidden for Source Users -->
+        {% if not user.source_user_profile %}
+        <div class="qi-nav-container">
+            <button onclick="toggleQIMenu(event)" 
+               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'projects' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                <i data-lucide="target" class="w-5 h-5 flex-shrink-0"></i>
+                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "QI Projects" %}</span>
+                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'projects' in request.path %}rotate-180{% endif %}" id="qi-chevron"></i>
+            </button>
+            <div class="submenu {% if 'projects' in request.path %}open{% endif %} space-y-1 mt-1" id="qi-submenu">
+                <a href="{% url 'projects:project_list' %}" 
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'project_list' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="list" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "All Projects" %}</span>
+                </a>
+                {% if user.is_px_admin or user.is_hospital_admin or user.is_department_manager %}
+                <a href="{% url 'projects:project_create' %}" 
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'create' in request.path and 'projects' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="plus-circle" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "Create Project" %}</span>
+                </a>
+                {% endif %}
+                {% if user.is_px_admin or user.is_hospital_admin %}
+                <a href="{% url 'projects:template_list' %}" 
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'template' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="copy" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "Templates" %}</span>
+                </a>
+                {% endif %}
+            </div>
+        </div>
+        {% endif %}
+        
         <!-- Feedback -->
         {% comment %} <a href="{% url 'feedback:feedback_list' %}" 
            class="flex items-center gap-3 p-3 rounded-lg transition {% if 'feedback' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
@@ -114,7 +160,8 @@
             <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Appreciation" %}</span>
         </a> {% endcomment %}
         
-        <!-- Surveys (with submenu) -->
+        <!-- Surveys (with submenu) - Hidden for Source Users -->
+        {% if not user.source_user_profile %}
         {% url 'surveys:instance_list' as survey_instances_url %}
         {% url 'surveys:template_list' as survey_templates_url %}
         {% url 'surveys:template_create' as survey_create_url %}
@@ -171,8 +218,10 @@
                 </a>
             </div>
         </div>
+        {% endif %}
         
-        <!-- Staff (with submenu) -->
+        <!-- Staff (with submenu) - Hidden for Source Users -->
+        {% if not user.source_user_profile %}
         <div class="staff-nav-container">
             <button onclick="toggleStaffMenu(event)" 
                class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'staff' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
@@ -203,6 +252,7 @@
                 </a> {% endcomment %}
             </div>
         </div>
+        {% endif %}
         
         <!-- Patients -->
         {% comment %} <a href="{% url 'organizations:patient_list' %}" 
@@ -211,7 +261,8 @@
             <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Patients" %}</span>
         </a> {% endcomment %}
         
-        <!-- Physicians (with submenu) -->
+        <!-- Physicians (with submenu) - Hidden for Source Users -->
+        {% if not user.source_user_profile %}
         <div class="physicians-nav-container">
             <button onclick="togglePhysiciansMenu(event)" 
                class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'physicians' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
@@ -249,8 +300,10 @@
                 {% endif %}
             </div>
         </div>
+        {% endif %}
         
-        <!-- Analytics (with submenu) -->
+        <!-- Analytics (with submenu) - Hidden for Source Users -->
+        {% if not user.source_user_profile %}
         <div class="analytics-nav-container">
             <button onclick="toggleAnalyticsMenu(event)" 
                class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'analytics' in request.path and 'command_center' not in request.resolver_match.url_name %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
@@ -271,8 +324,10 @@
                 </a>
             </div>
         </div>
+        {% endif %}
         
-        <!-- PX Sources (with submenu) -->
+        <!-- PX Sources (with submenu) - Admin view only -->
+        {% if not user.source_user_profile %}
         <div class="px-sources-nav-container">
             <button onclick="togglePXSourcesMenu(event)" 
                class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'px-sources' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
@@ -303,26 +358,169 @@
                 </a>
             </div>
         </div>
+        {% endif %}
 
-        <!-- Send SMS (Admin only) -->
+        <!-- Reports (Admin only - NOT for Source Users) -->
         {% if user.is_px_admin or user.is_hospital_admin %}
+        {% if not user.source_user_profile %}
+        <div class="reports-nav-container">
+            <button onclick="toggleReportsMenu(event)" 
+               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if '/reports/' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                <i data-lucide="file-bar-chart" class="w-5 h-5 flex-shrink-0"></i>
+                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "Reports" %}</span>
+                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if '/reports/' in request.path %}rotate-180{% endif %}" id="reports-chevron"></i>
+            </button>
+            <div class="submenu {% if '/reports/' in request.path %}open{% endif %} space-y-1 mt-1" id="reports-submenu">
+                <a href="{% url 'reports:builder' %}" 
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'builder' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="plus-circle" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "Create Report" %}</span>
+                </a>
+                <a href="{% url 'reports:saved_reports' %}" 
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'saved' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="folder-open" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "Saved Reports" %}</span>
+                </a>
+            </div>
+        </div>
+        {% endif %}
+        {% endif %}
+        
+        <!-- Send SMS (Admin only - NOT for Source Users) -->
+        {% if user.is_px_admin or user.is_hospital_admin %}
+        {% if not user.source_user_profile %}
         <a href="{% url 'notifications:send_sms_direct' %}" 
            class="flex items-center gap-3 p-3 rounded-lg transition {% if 'send-sms' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
             <i data-lucide="message-square" class="w-5 h-5 flex-shrink-0"></i>
             <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Send SMS" %}</span>
         </a>
         {% endif %}
+        {% endif %}
         
-        <!-- Settings (Admin only) -->
+        <!-- Settings (Admin only - NOT for Source Users) -->
         {% if user.is_px_admin or user.is_hospital_admin %}
-        <a href="{% url 'config:dashboard' %}" 
+        {% if not user.source_user_profile %}
+        <a href="{% url 'config:dashboard' %}"
            class="flex items-center gap-3 p-3 rounded-lg transition {% if 'config' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
             <i data-lucide="settings" class="w-5 h-5 flex-shrink-0"></i>
             <span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Settings" %}</span>
         </a>
         {% endif %}
+        {% endif %}
+
+        <!-- Acknowledgements (All Employees - NOT for Source Users) -->
+        {% if user.is_authenticated and not user.source_user_profile %}
+        <a href="{% url 'accounts:simple_acknowledgements:employee_list' %}"
+           class="flex items-center gap-3 p-3 rounded-lg transition {% if 'simple-acknowledgements' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+            <i data-lucide="clipboard-signature" class="w-5 h-5 flex-shrink-0"></i>
+            <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1">{% trans "Acknowledgements" %}</span>
+            {% if pending_acknowledgements_count > 0 %}
+            <span class="sidebar-text bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full min-w-[1.5rem] text-center">
+                {{ pending_acknowledgements_count }}
+            </span>
+            {% endif %}
+        </a>
+        {% endif %}
+
+        <!-- References (All Users - NOT for Source Users) -->
+        {% if not user.source_user_profile %}
+        <div class="references-nav-container">
+            <button onclick="toggleReferencesMenu(event)"
+               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'references' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                <i data-lucide="folder-open" class="w-5 h-5 flex-shrink-0"></i>
+                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "References" %}</span>
+                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'references' in request.path %}rotate-180{% endif %}" id="references-chevron"></i>
+            </button>
+            <div class="submenu {% if 'references' in request.path %}open{% endif %} space-y-1 mt-1" id="references-submenu">
+                <a href="{% url 'references:dashboard' %}"
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'dashboard' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "Dashboard" %}</span>
+                </a>
+                <a href="{% url 'references:search' %}"
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'search' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="search" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "Search Documents" %}</span>
+                </a>
+                <a href="{% url 'references:document_create' %}"
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'document_create' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="upload" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "Upload Document" %}</span>
+                </a>
+                <a href="{% url 'references:folder_create' %}"
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'folder_create' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="folder-plus" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "New Folder" %}</span>
+                </a>
+            </div>
+        </div>
+        {% endif %}
+        
+        <!-- Standards (Admin only - NOT for Source Users) -->
+        {% if user.is_px_admin or user.is_hospital_admin %}
+        {% if not user.source_user_profile %}
+        <div class="standards-nav-container">
+            <button onclick="toggleStandardsMenu(event)"
+               class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'standards' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                <i data-lucide="clipboard-check" class="w-5 h-5 flex-shrink-0"></i>
+                <span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "Standards" %}</span>
+                <i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'standards' in request.path %}rotate-180{% endif %}" id="standards-chevron"></i>
+            </button>
+            <div class="submenu {% if 'standards' in request.path %}open{% endif %} space-y-1 mt-1" id="standards-submenu">
+                <a href="{% url 'standards:dashboard' %}"
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'dashboard' and 'standards' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "Dashboard" %}</span>
+                </a>
+                <a href="{% url 'standards:search' %}"
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'search' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="search" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "Search Standards" %}</span>
+                </a>
+                <a href="{% url 'standards:source_list' %}"
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'sources' in request.path and 'standards' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="folder" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "Sources" %}</span>
+                </a>
+                <a href="{% url 'standards:category_list' %}"
+                   class="flex items-center gap-2 p-2 rounded-lg transition {% if 'categories' in request.path and 'standards' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
+                    <i data-lucide="tags" class="w-4 h-4 flex-shrink-0"></i>
+                    <span class="sidebar-text whitespace-nowrap">{% trans "Categories" %}</span>
+                </a>
+            </div>
+        </div>
+        {% endif %}
+        {% endif %}
     </nav>
 
+    <!-- Hospital Switcher (PX Admin only) -->
+    {% if is_px_admin and hospitals_list %}
+    <div class="px-3 py-2 border-t border-white/10">
+        <div class="mb-2 px-2">
+            <p class="text-[10px] font-semibold text-white/50 uppercase tracking-wider">{% trans "Hospital" %}</p>
+        </div>
+        <div class="relative">
+            <select 
+                id="hospitalSwitcher"
+                onchange="switchHospital(this.value)"
+                class="w-full bg-white/10 border border-white/20 rounded-lg py-2 px-3 pr-8 text-xs font-semibold text-white appearance-none cursor-pointer hover:bg-white/15 transition focus:outline-none focus:ring-2 focus:ring-blue/50"
+            >
+                {% for hospital in hospitals_list %}
+                <option 
+                    value="{{ hospital.id }}" 
+                    {% if current_hospital and current_hospital.id == hospital.id %}selected{% endif %}
+                >
+                    {{ hospital.name }}
+                </option>
+                {% endfor %}
+            </select>
+            <div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
+                <i data-lucide="chevron-down" class="w-3.5 h-3.5 text-white/50"></i>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
     <!-- User Profile & Logout -->
     <div class="p-3 border-t border-white/10">
         <div class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/10 transition cursor-pointer" onclick="toggleUserMenu()">
@@ -359,6 +557,61 @@ function toggleUserMenu() {
     menu.classList.toggle('hidden');
 }
 
+function switchHospital(hospitalId) {
+    if (!hospitalId) return;
+    
+    // Show loading state
+    const select = document.getElementById('hospitalSwitcher');
+    select.disabled = true;
+    
+    // Get CSRF token from global variable (not from cookie due to httpOnly)
+    const csrfToken = window.sidebarCsrfToken || getCookie('csrftoken');
+    
+    // Create form data
+    const formData = new FormData();
+    formData.append('hospital_id', hospitalId);
+    formData.append('csrfmiddlewaretoken', csrfToken);
+    
+    // Make AJAX request
+    fetch('{% url "core:switch_hospital" %}', {
+        method: 'POST',
+        body: formData,
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest'
+        }
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            // Reload page to apply new hospital context
+            window.location.reload();
+        } else {
+            alert('{% trans "Failed to switch hospital: " %}' + (data.error || '{% trans "Unknown error" %}'));
+            select.disabled = false;
+        }
+    })
+    .catch(error => {
+        console.error('Error switching hospital:', error);
+        alert('{% trans "An error occurred while switching hospitals" %}');
+        select.disabled = false;
+    });
+}
+
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
 function toggleSurveyMenu(event) {
     event.preventDefault();
     const submenu = document.getElementById('survey-submenu');
@@ -399,6 +652,46 @@ function togglePXSourcesMenu(event) {
     chevron.classList.toggle('rotate-180');
 }
 
+function toggleAcknowledgementsMenu(event) {
+    event.preventDefault();
+    const submenu = document.getElementById('acknowledgements-submenu');
+    const chevron = document.getElementById('acknowledgements-chevron');
+    submenu.classList.toggle('open');
+    chevron.classList.toggle('rotate-180');
+}
+
+function toggleReportsMenu(event) {
+    event.preventDefault();
+    const submenu = document.getElementById('reports-submenu');
+    const chevron = document.getElementById('reports-chevron');
+    submenu.classList.toggle('open');
+    chevron.classList.toggle('rotate-180');
+}
+
+function toggleQIMenu(event) {
+    event.preventDefault();
+    const submenu = document.getElementById('qi-submenu');
+    const chevron = document.getElementById('qi-chevron');
+    submenu.classList.toggle('open');
+    chevron.classList.toggle('rotate-180');
+}
+
+function toggleReferencesMenu(event) {
+    event.preventDefault();
+    const submenu = document.getElementById('references-submenu');
+    const chevron = document.getElementById('references-chevron');
+    submenu.classList.toggle('open');
+    chevron.classList.toggle('rotate-180');
+}
+
+function toggleStandardsMenu(event) {
+    event.preventDefault();
+    const submenu = document.getElementById('standards-submenu');
+    const chevron = document.getElementById('standards-chevron');
+    submenu.classList.toggle('open');
+    chevron.classList.toggle('rotate-180');
+}
+
 function logout() {
     if (confirm('{% trans "Are you sure you want to logout?" %}')) {
         document.querySelector('form[action="{% url 'accounts:logout' %}"]').submit();
diff --git a/templates/layouts/source_user_base.html b/templates/layouts/source_user_base.html
index 3ca5952..c0a732d 100644
--- a/templates/layouts/source_user_base.html
+++ b/templates/layouts/source_user_base.html
@@ -1,832 +1,293 @@
-{% load i18n hospital_filters %}
+{% load i18n %}
 <!DOCTYPE html>
 <html lang="{% get_current_language as LANGUAGE_CODE %}{{ 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">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <meta name="theme-color" content="#0097a7">
     <title>{% block title %}{% trans "PX360 - Patient Experience Management" %}{% endblock %}</title>
-    
-    <!-- Bootstrap 5 CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    
-    <!-- Bootstrap Icons -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
-    
-    <!-- Google Fonts - Arabic Support -->
-    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    
+
+    <!-- TailwindCSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+
+    <!-- Google Fonts - Inter -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- ApexCharts -->
     <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.45.1/dist/apexcharts.min.js"></script>
-    
+
     <!-- HTMX for dynamic updates -->
     <script src="https://unpkg.com/htmx.org@1.9.10"></script>
-    
-    <!-- Select2 for better selects -->
-    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
-    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
-    
-    <!-- Al Hammadi Theme CSS -->
+
+    <!-- Tailwind Config -->
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        'inter': ['Inter', 'sans-serif'],
+                    },
+                    colors: {
+                        'navy': '#005696',
+                        'blue': '#007bbd',
+                        'light': '#eef6fb',
+                        'slate': '#64748b',
+                    }
+                }
+            }
+        }
+    </script>
+
+    <!-- Custom Styles -->
     <style>
-        /* ============================================
-           AL HAMMADI HOSPITAL THEME - PX360
-           Color Palette:
-           - Primary Teal: #0097a7 / #00838f
-           - Red Accent: #c62828 / #d32f2f
-           - Dark Blue: #1a237e / #283593
-           - Light Teal: #4dd0e1 / #80deea
-           ============================================ */
-        
-        :root {
-            /* Layout Variables */
-            --sidebar-width: 260px;
-            --topbar-height: 60px;
-            
-            /* Al Hammadi Color Palette */
-            --hh-primary: #0086d2;
-            --hh-primary-dark: #005d93;
-            --hh-primary-light: #4caadf;
-            --hh-primary-lighter: #b2ebf2;
-            --hh-primary-bg: rgba(0, 151, 167, 0.1);
-            
-            --hh-secondary: #1a237e;
-            --hh-secondary-dark: #0d1642;
-            --hh-secondary-light: #283593;
-            
-            --hh-accent: #c62828;
-            --hh-accent-light: #d32f2f;
-            --hh-accent-dark: #b71c1c;
-            
-            --hh-success: #00897b;
-            --hh-success-light: #26a69a;
-            --hh-warning: #f9a825;
-            --hh-warning-light: #fbc02d;
-            --hh-danger: #c62828;
-            --hh-info: #0097a7;
-            
-            --hh-text-dark: #263238;
-            --hh-text-muted: #607d8b;
-            --hh-text-light: #90a4ae;
-            
-            --hh-bg-light: #f5f7fa;
-            --hh-bg-white: #ffffff;
-            --hh-border: #e0e6ed;
-            
-            /* Shadows */
-            --hh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
-            --hh-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            --hh-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
-        }
-        
-        /* ============================================
-           TYPOGRAPHY
-           ============================================ */
         body {
-            font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            background-color: var(--hh-bg-light);
-            color: var(--hh-text-dark);
-        }
-        
-        [dir="rtl"] body {
-            font-family: 'Cairo', 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-        }
-        
-        h1, h2, h3, h4, h5, h6 {
-            font-weight: 600;
-            color: var(--hh-text-dark);
-        }
-        
-        a {
-            color: var(--hh-primary);
-            text-decoration: none;
-            transition: color 0.2s ease;
-        }
-        
-        a:hover {
-            color: var(--hh-primary-dark);
-        }
-        
-        /* ============================================
-           SIDEBAR - Al Hammadi Teal Theme (Simplified for Source Users)
-           ============================================ */
-        .sidebar {
-            position: fixed;
-            top: 0;
-            left: 0;
-            height: 100vh;
-            width: var(--sidebar-width);
-            background: linear-gradient(180deg, var(--hh-primary-dark) 0%, var(--hh-primary) 50%, var(--hh-primary-dark) 100%);
-            color: white;
-            overflow-y: auto;
-            z-index: 1000;
-            box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
-        }
-        
-        .sidebar-brand {
-            padding: 1.5rem 1rem;
-            font-size: 1.4rem;
-            font-weight: 700;
-            border-bottom: 1px solid rgba(255,255,255, 0.15);
-            background: rgba(0, 0, 0, 0.1);
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-        
-        .sidebar-brand i {
-            color: var(--hh-accent);
-            font-size: 1.6rem;
-        }
-        
-        .sidebar-nav {
-            padding: 1rem 0;
-        }
-        
-        .sidebar-nav .nav-link {
-            color: rgba(255, 255, 255, 0.85);
-            padding: 0.75rem 1.25rem;
-            border-left: 3px solid transparent;
-            transition: all 0.25s ease;
-            display: flex;
-            align-items: center;
-            font-size: 0.95rem;
-        }
-        
-        .sidebar-nav .nav-link:hover {
-            color: white;
-            background: rgba(255, 255, 255, 0.1);
-            border-left-color: var(--hh-accent);
-        }
-        
-        .sidebar-nav .nav-link.active {
-            color: white;
-            background: rgba(255, 255, 255, 0.15);
-            border-left-color: var(--hh-accent);
-            font-weight: 600;
-        }
-        
-        .sidebar-nav .nav-link i {
-            width: 24px;
-            margin-right: 0.75rem;
-            font-size: 1.15rem;
-        }
-        
-        .sidebar-nav .badge {
-            margin-left: auto;
-            font-size: 0.7rem;
-            padding: 0.3em 0.6em;
-        }
-        
-        .sidebar-nav .badge.bg-danger {
-            background-color: var(--hh-accent) !important;
-        }
-        
-        .sidebar-nav .badge.bg-success {
-            background-color: var(--hh-success) !important;
-        }
-        
-        .sidebar-nav .badge.bg-warning {
-            background-color: var(--hh-warning) !important;
-            color: var(--hh-text-dark) !important;
-        }
-        
-        .sidebar-nav .badge.bg-info {
-            background-color: var(--hh-primary-light) !important;
-        }
-        
-        .sidebar-nav hr {
-            border-color: rgba(255, 255, 255, 0.1);
-            margin: 1rem 1rem;
-        }
-        
-        /* ============================================
-           TOPBAR
-           ============================================ */
-        .topbar {
-            position: fixed;
-            top: 0;
-            left: var(--sidebar-width);
-            right: 0;
-            height: var(--topbar-height);
-            background: var(--hh-bg-white);
-            border-bottom: 1px solid var(--hh-border);
-            z-index: 999;
-            box-shadow: var(--hh-shadow-sm);
-            display: flex;
-            align-items: center;
-            padding: 0 1.5rem;
-            justify-content: space-between;
-        }
-        
-        .topbar .navbar-brand {
-            color: var(--hh-primary);
-            font-weight: 600;
-        }
-        
-        .topbar .nav-link {
-            color: var(--hh-text-muted);
-            padding: 0.5rem 0.75rem;
-        }
-        
-        .topbar .nav-link:hover {
-            color: var(--hh-primary);
-        }
-        
-        .topbar .dropdown-menu {
-            border: 1px solid var(--hh-border);
-            box-shadow: var(--hh-shadow);
-        }
-        
-        /* ============================================
-           MAIN CONTENT
-           ============================================ */
-        .main-content {
-            margin-left: var(--sidebar-width);
-            margin-top: var(--topbar-height);
-            padding: 1.5rem 2rem;
-            min-height: calc(100vh - var(--topbar-height));
-            background: var(--hh-bg-light);
-        }
-        
-        /* ============================================
-           CARDS - Al Hammadi Style
-           ============================================ */
-        .card {
-            border: none;
-            border-radius: 0.5rem;
-            box-shadow: var(--hh-shadow-sm);
-            margin-bottom: 1.5rem;
-            background: var(--hh-bg-white);
-            transition: box-shadow 0.2s ease, transform 0.2s ease;
-        }
-        
-        .card:hover {
-            box-shadow: var(--hh-shadow);
-        }
-        
-        .card-header {
-            background: var(--hh-bg-white);
-            border-bottom: 1px solid var(--hh-border);
-            padding: 1rem 1.25rem;
-            font-weight: 600;
-            color: var(--hh-text-dark);
-        }
-        
-        .card-header.bg-primary,
-        .card-header.bg-teal {
-            background: linear-gradient(135deg, var(--hh-primary) 0%, var(--hh-primary-dark) 100%) !important;
-            color: white;
-            border-bottom: none;
-        }
-        
-        .card-title {
-            font-size: 1rem;
-            font-weight: 600;
-            color: var(--hh-text-dark);
-            margin-bottom: 0;
-        }
-        
-        .card-body {
-            padding: 1.25rem;
-        }
-        
-        /* Stat Cards */
-        .stat-card {
-            border: none;
-            border-radius: 0.5rem;
-            box-shadow: var(--hh-shadow-sm);
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-            overflow: hidden;
-        }
-        
-        .stat-card:hover {
-            transform: translateY(-3px);
-            box-shadow: var(--hh-shadow-lg);
-        }
-        
-        .stat-card .card-body {
-            padding: 1.5rem;
-            position: relative;
-        }
-        
-        .stat-card .stat-icon {
-            position: absolute;
-            top: 1rem;
-            right: 1rem;
-            width: 48px;
-            height: 48px;
-            border-radius: 0.5rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-        }
-        
-        [dir="rtl"] .stat-card .stat-icon {
-            right: auto;
-            left: 1rem;
-        }
-        
-        .stat-card .stat-icon.bg-teal {
-            background: var(--hh-primary-bg);
-            color: var(--hh-primary);
-        }
-        
-        .stat-card .stat-icon.bg-red {
-            background: rgba(198, 40, 40, 0.1);
-            color: var(--hh-accent);
-        }
-        
-        .stat-card .stat-icon.bg-blue {
-            background: rgba(26, 35, 126, 0.1);
-            color: var(--hh-secondary);
-        }
-        
-        .stat-card .stat-icon.bg-green {
-            background: rgba(0, 137, 123, 0.1);
-            color: var(--hh-success);
-        }
-        
-        .stat-value {
-            font-size: 2rem;
-            font-weight: 700;
-            color: var(--hh-text-dark);
-            margin: 0.25rem 0;
-            line-height: 1.2;
-        }
-        
-        .stat-label {
-            color: var(--hh-text-muted);
-            font-size: 0.8rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            font-weight: 600;
-        }
-        
-        /* ============================================
-           BUTTONS - Al Hammadi Style
-           ============================================ */
-        .btn {
-            font-weight: 500;
-            padding: 0.5rem 1rem;
-            border-radius: 0.375rem;
-            transition: all 0.2s ease;
-        }
-        
-        .btn-primary {
-            background-color: var(--hh-primary);
-            border-color: var(--hh-primary);
-        }
-        
-        .btn-primary:hover,
-        .btn-primary:focus {
-            background-color: var(--hh-primary-dark);
-            border-color: var(--hh-primary-dark);
-        }
-        
-        .btn-secondary {
-            background-color: var(--hh-secondary);
-            border-color: var(--hh-secondary);
-        }
-        
-        .btn-danger {
-            background-color: var(--hh-accent);
-            border-color: var(--hh-accent);
-        }
-        
-        .btn-success {
-            background-color: var(--hh-success);
-            border-color: var(--hh-success);
-        }
-        
-        .btn-warning {
-            background-color: var(--hh-warning);
-            border-color: var(--hh-warning);
-            color: var(--hh-text-dark);
-        }
-        
-        .btn-info {
-            background-color: var(--hh-primary-light);
-            border-color: var(--hh-primary-light);
-        }
-        
-        .btn-outline-primary {
-            color: var(--hh-primary);
-            border-color: var(--hh-primary);
-        }
-        
-        .btn-outline-primary:hover {
-            background-color: var(--hh-primary);
-            border-color: var(--hh-primary);
-            color: white;
-        }
-        
-        /* ============================================
-           TABLES
-           ============================================ */
-        .table {
-            margin-bottom: 0;
-        }
-        
-        .table thead th {
-            background: var(--hh-bg-light);
-            border-bottom: 2px solid var(--hh-border);
-            color: var(--hh-text-dark);
-            font-weight: 600;
-            font-size: 0.85rem;
-            text-transform: uppercase;
-            letter-spacing: 0.03em;
-            padding: 0.875rem 1rem;
-        }
-        
-        .table tbody td {
-            padding: 0.875rem 1rem;
-            vertical-align: middle;
-            border-bottom: 1px solid var(--hh-border);
-            color: var(--hh-text-dark);
-        }
-        
-        .table tbody tr:hover {
-            background-color: var(--hh-primary-bg);
-        }
-        
-        /* ============================================
-           BADGES
-           ============================================ */
-        .badge {
-            padding: 0.4em 0.7em;
-            font-weight: 600;
-            font-size: 0.75rem;
-            border-radius: 0.25rem;
-        }
-        
-        .badge.bg-primary {
-            background-color: var(--hh-primary) !important;
-        }
-        
-        .badge.bg-secondary {
-            background-color: var(--hh-secondary) !important;
-        }
-        
-        .badge.bg-success {
-            background-color: var(--hh-success) !important;
-        }
-        
-        .badge.bg-danger {
-            background-color: var(--hh-accent) !important;
-        }
-        
-        .badge.bg-warning {
-            background-color: var(--hh-warning) !important;
-            color: var(--hh-text-dark) !important;
-        }
-        
-        .badge.bg-info {
-            background-color: var(--hh-primary-light) !important;
-        }
-        
-        /* ============================================
-           FORMS
-           ============================================ */
-        .form-control {
-            border: 1px solid var(--hh-border);
-            border-radius: 0.375rem;
-            padding: 0.5rem 0.875rem;
-            transition: border-color 0.2s ease, box-shadow 0.2s ease;
-        }
-        
-        .form-control:focus {
-            border-color: var(--hh-primary);
-            box-shadow: 0 0 0 0.2rem var(--hh-primary-bg);
-        }
-        
-        .form-label {
-            font-weight: 500;
-            color: var(--hh-text-dark);
-            margin-bottom: 0.375rem;
-        }
-        
-        /* ============================================
-           ALERTS
-           ============================================ */
-        .alert {
-            border: none;
-            border-radius: 0.375rem;
-            padding: 1rem 1.25rem;
-        }
-        
-        .alert-primary {
-            background-color: var(--hh-primary-bg);
-            color: var(--hh-primary-dark);
-        }
-        
-        .alert-success {
-            background-color: rgba(0, 137, 123, 0.1);
-            color: var(--hh-success);
-        }
-        
-        .alert-danger {
-            background-color: rgba(198, 40, 40, 0.1);
-            color: var(--hh-accent);
-        }
-        
-        .alert-info {
-            background-color: var(--hh-primary-bg);
-            color: var(--hh-primary);
-        }
-        
-        /* ============================================
-           RTL SUPPORT
-           ============================================ */
-        [dir="rtl"] .sidebar {
-            left: auto;
-            right: 0;
-            border-left: none;
-            border-right: none;
-        }
-        
-        [dir="rtl"] .sidebar-nav .nav-link {
-            border-left: none;
-            border-right: 3px solid transparent;
-        }
-        
-        [dir="rtl"] .sidebar-nav .nav-link:hover,
-        [dir="rtl"] .sidebar-nav .nav-link.active {
-            border-left-color: transparent;
-            border-right-color: var(--hh-accent);
-        }
-        
-        [dir="rtl"] .sidebar-nav .nav-link i {
-            margin-right: 0;
-            margin-left: 0.75rem;
-        }
-        
-        [dir="rtl"] .sidebar-nav .badge {
-            margin-left: 0;
-            margin-right: auto;
-        }
-        
-        [dir="rtl"] .topbar {
-            left: 0;
-            right: var(--sidebar-width);
-        }
-        
-        [dir="rtl"] .main-content {
-            margin-left: 0;
-            margin-right: var(--sidebar-width);
-        }
-        
-        /* ============================================
-           RESPONSIVE
-           ============================================ */
-        @media (max-width: 991.98px) {
-            .sidebar {
-                transform: translateX(-100%);
-                transition: transform 0.3s ease;
+            font-family: 'Inter', sans-serif;
+        }
+
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f5f9;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
+        }
+
+        /* Sidebar transitions */
+        .sidebar-transition {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        /* Animation */
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
             }
-            
-            .sidebar.show {
-                transform: translateX(0);
-            }
-            
-            [dir="rtl"] .sidebar {
-                transform: translateX(100%);
-            }
-            
-            [dir="rtl"] .sidebar.show {
-                transform: translateX(0);
-            }
-            
-            .topbar {
-                left: 0;
-                right: 0;
-            }
-            
-            [dir="rtl"] .topbar {
-                left: 0;
-                right: 0;
-            }
-            
-            .main-content {
-                margin-left: 0;
-                margin-right: 0;
-                padding: 1rem;
-            }
-            
-            [dir="rtl"] .main-content {
-                margin-left: 0;
-                margin-right: 0;
+            to {
+                opacity: 1;
+                transform: translateY(0);
             }
         }
+
+        .animate-in {
+            animation: fadeIn 0.5s ease-out forwards;
+        }
     </style>
-    
+
     {% block extra_css %}{% endblock %}
 </head>
-<body>
-    <!-- Simplified Sidebar for Source Users -->
-    <div class="sidebar">
+<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Sidebar -->
+    <aside id="sidebar" class="fixed left-0 top-0 h-screen w-64 bg-gradient-to-b from-navy to-blue shadow-xl z-50 sidebar-transition overflow-y-auto">
         <!-- Brand -->
-        <div class="sidebar-brand">
-            <i class="bi bi-heart-pulse-fill"></i> PX360
+        <div class="p-6 border-b border-white/10">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
+                    <i data-lucide="radio" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-white">PX360</h1>
+                    <p class="text-xs text-white/70">{% trans "Source Portal" %}</p>
+                </div>
+            </div>
         </div>
 
         <!-- Navigation -->
-        <nav class="sidebar-nav">
-            <ul class="nav flex-column">
-                <!-- Dashboard -->
-                <li class="nav-item">
-                    <a class="nav-link {% if request.resolver_match.url_name == 'source_user_dashboard' %}active{% endif %}"
-                       href="{% url 'px_sources:source_user_dashboard' %}">
-                        <i class="bi bi-speedometer2"></i>
-                        {% trans "Dashboard" %}
-                    </a>
-                </li>
+        <nav class="p-4 space-y-1">
+            <!-- Dashboard -->
+            <a href="{% url 'px_sources:source_user_dashboard' %}"
+               class="flex items-center gap-3 p-3 rounded-xl transition {% if request.resolver_match.url_name == 'source_user_dashboard' %}bg-white/20 text-white{% else %}text-white/80 hover:bg-white/10 hover:text-white{% endif %}">
+                <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
+                <span class="font-medium text-sm">{% trans "Dashboard" %}</span>
+            </a>
 
-                <hr>
+            <div class="my-4 border-t border-white/10"></div>
 
-                <!-- Create Complaint -->
-                <li class="nav-item">
-                    <a class="nav-link {% if request.resolver_match.url_name == 'complaint_create' %}active{% endif %}"
-                       href="{% url 'complaints:complaint_create' %}">
-                        <i class="bi bi-plus-circle"></i>
-                        {% trans "Create Complaint" %}
-                    </a>
-                </li>
+            <!-- Create -->
+            <p class="px-3 text-xs font-semibold text-white/50 uppercase tracking-wider mb-2">{% trans "Create" %}</p>
 
-                <!-- Create Inquiry -->
-                <li class="nav-item">
-                    <a class="nav-link {% if request.resolver_match.url_name == 'inquiry_create' %}active{% endif %}"
-                       href="{% url 'complaints:inquiry_create' %}">
-                        <i class="bi bi-plus-circle"></i>
-                        {% trans "Create Inquiry" %}
-                    </a>
-                </li>
+            {% if source_user.can_create_complaints %}
+            <a href="{% url 'px_sources:source_user_create_complaint' %}"
+               class="flex items-center gap-3 p-3 rounded-xl transition {% if request.resolver_match.url_name == 'source_user_create_complaint' %}bg-white/20 text-white{% else %}text-white/80 hover:bg-white/10 hover:text-white{% endif %}">
+                <i data-lucide="plus-circle" class="w-5 h-5"></i>
+                <span class="font-medium text-sm">{% trans "New Complaint" %}</span>
+            </a>
+            {% endif %}
 
-                <hr>
+            {% if source_user.can_create_inquiries %}
+            <a href="{% url 'px_sources:source_user_create_inquiry' %}"
+               class="flex items-center gap-3 p-3 rounded-xl transition {% if request.resolver_match.url_name == 'source_user_create_inquiry' %}bg-white/20 text-white{% else %}text-white/80 hover:bg-white/10 hover:text-white{% endif %}">
+                <i data-lucide="plus-circle" class="w-5 h-5"></i>
+                <span class="font-medium text-sm">{% trans "New Inquiry" %}</span>
+            </a>
+            {% endif %}
 
-                <!-- My Complaints -->
-                <li class="nav-item">
-                    <a class="nav-link {% if 'source_user_complaint_list' in request.path %}active{% endif %}"
-                       href="{% url 'px_sources:source_user_complaint_list' %}">
-                        <i class="bi bi-exclamation-triangle"></i>
-                        {% trans "My Complaints" %}
-                    </a>
-                </li>
+            <div class="my-4 border-t border-white/10"></div>
 
-                <!-- My Inquiries -->
-                <li class="nav-item">
-                    <a class="nav-link {% if 'source_user_inquiry_list' in request.path %}active{% endif %}"
-                       href="{% url 'px_sources:source_user_inquiry_list' %}">
-                        <i class="bi bi-question-circle"></i>
-                        {% trans "My Inquiries" %}
-                    </a>
-                </li>
+            <!-- Lists -->
+            <p class="px-3 text-xs font-semibold text-white/50 uppercase tracking-wider mb-2">{% trans "My Feedback" %}</p>
 
-                <!-- Logout -->
-                <li class="nav-item">
-                    <a class="nav-link" href="{% url 'accounts:logout' %}">
-                        <i class="bi bi-box-arrow-right"></i>
-                        {% trans "Logout" %}
-                    </a>
-                </li>
-            </ul>
+            <a href="{% url 'px_sources:source_user_complaint_list' %}"
+               class="flex items-center gap-3 p-3 rounded-xl transition {% if 'source_user_complaint_list' in request.path %}bg-white/20 text-white{% else %}text-white/80 hover:bg-white/10 hover:text-white{% endif %}">
+                <i data-lucide="file-text" class="w-5 h-5"></i>
+                <span class="font-medium text-sm">{% trans "Complaints" %}</span>
+                {% if total_complaints > 0 %}
+                <span class="ml-auto bg-white/20 text-white text-xs px-2 py-0.5 rounded-full">{{ total_complaints }}</span>
+                {% endif %}
+            </a>
+
+            <a href="{% url 'px_sources:source_user_inquiry_list' %}"
+               class="flex items-center gap-3 p-3 rounded-xl transition {% if 'source_user_inquiry_list' in request.path %}bg-white/20 text-white{% else %}text-white/80 hover:bg-white/10 hover:text-white{% endif %}">
+                <i data-lucide="help-circle" class="w-5 h-5"></i>
+                <span class="font-medium text-sm">{% trans "Inquiries" %}</span>
+                {% if total_inquiries > 0 %}
+                <span class="ml-auto bg-white/20 text-white text-xs px-2 py-0.5 rounded-full">{{ total_inquiries }}</span>
+                {% endif %}
+            </a>
+
+            <div class="my-4 border-t border-white/10"></div>
+
+            <!-- Account -->
+            <a href="{% url 'accounts:password_change' %}"
+               class="flex items-center gap-3 p-3 rounded-xl transition text-white/80 hover:bg-white/10 hover:text-white">
+                <i data-lucide="key" class="w-5 h-5"></i>
+                <span class="font-medium text-sm">{% trans "Change Password" %}</span>
+            </a>
+
+            <a href="{% url 'accounts:logout' %}"
+               class="flex items-center gap-3 p-3 rounded-xl transition text-red-300 hover:bg-red-500/20 hover:text-red-200">
+                <i data-lucide="log-out" class="w-5 h-5"></i>
+                <span class="font-medium text-sm">{% trans "Logout" %}</span>
+            </a>
         </nav>
-    </div>
 
-    <!-- Topbar -->
-    <div class="topbar">
-        <div class="d-flex align-items-center">
-            <!-- Toggle Sidebar (Mobile) -->
-            <button class="btn btn-outline-secondary me-3 d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas">
-                <i class="bi bi-list"></i>
-            </button>
+        <!-- Source Info -->
+        {% if source %}
+        <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-white/10 bg-white/5">
+            <div class="flex items-center gap-3">
+                <div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-lg flex items-center justify-center">
+                    <i data-lucide="radio" class="w-4 h-4 text-white"></i>
+                </div>
+                <div class="flex-1 min-w-0">
+                    <p class="text-xs font-semibold text-white truncate">{{ source.name_en }}</p>
+                    <p class="text-[10px] text-white/50">{% trans "Your Source" %}</p>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+    </aside>
 
-            <!-- Hospital Display -->
-            {% if current_hospital %}
-            <div class="d-flex align-items-center">
-                <i class="bi bi-hospital me-2 text-primary"></i>
-                <div>
-                    <div class="fw-semibold" style="font-size: 0.9rem;">
-                        {{ current_hospital.name|truncatewords:3 }}
+    <!-- Main Content -->
+    <main class="ml-64 min-h-screen">
+        <!-- Topbar -->
+        <header class="bg-white/80 backdrop-blur-sm border-b border-blue-100 sticky top-0 z-40">
+            <div class="px-6 py-4 flex items-center justify-between">
+                <!-- Hospital Info -->
+                {% if current_hospital %}
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-gradient-to-br from-blue to-navy rounded-xl flex items-center justify-center">
+                        <i data-lucide="building-2" class="w-5 h-5 text-white"></i>
                     </div>
-                    <div class="text-muted" style="font-size: 0.75rem;">
-                        {% if current_hospital.city %}{{ current_hospital.city }}{% endif %}
+                    <div>
+                        <p class="font-bold text-navy">{{ current_hospital.name|truncatewords:3 }}</p>
+                        {% if current_hospital.city %}
+                        <p class="text-xs text-slate">{{ current_hospital.city }}</p>
+                        {% endif %}
+                    </div>
+                </div>
+                {% endif %}
+
+                <!-- User Menu -->
+                <div class="flex items-center gap-4">
+                    <div class="flex items-center gap-3 px-4 py-2 bg-blue-50 rounded-xl border border-blue-100">
+                        <div class="w-8 h-8 bg-gradient-to-br from-blue to-navy rounded-full flex items-center justify-center">
+                            <span class="text-white font-bold text-xs">{{ request.user.first_name|first|default:"U" }}{{ request.user.last_name|first|default:"" }}</span>
+                        </div>
+                        <div class="hidden md:block">
+                            <p class="text-sm font-bold text-navy">{{ request.user.get_full_name|default:request.user.email|truncatechars:20 }}</p>
+                            <p class="text-xs text-slate">{% trans "Source User" %}</p>
+                        </div>
                     </div>
                 </div>
             </div>
-            {% endif %}
-        </div>
+        </header>
 
-        <!-- User Menu -->
-        <div class="d-flex align-items-center">
-            <div class="dropdown">
-                <button class="btn btn-light d-flex align-items-center" type="button" data-bs-toggle="dropdown">
-                    <i class="bi bi-person-circle me-2 text-primary"></i>
-                    <div class="text-start">
-                        <div class="fw-semibold" style="font-size: 0.85rem;">
-                            {{ request.user.get_full_name|truncatewords:2 }}
-                        </div>
-                        <div class="text-muted" style="font-size: 0.75rem;">
-                            {{ request.user.email|truncatewords:2 }}
-                        </div>
-                    </div>
-                    <i class="bi bi-chevron-down text-muted"></i>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end">
-                    <li>
-                        <a class="dropdown-item" href="{% url 'accounts:password_change' %}">
-                            <i class="bi bi-key me-2"></i>{% trans "Change Password" %}
-                        </a>
-                    </li>
-                    <li><hr class="dropdown-divider"></li>
-                    <li>
-                        <a class="dropdown-item text-danger" href="{% url 'accounts:logout' %}">
-                            <i class="bi bi-box-arrow-right me-2"></i>{% trans "Logout" %}
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-    <!-- Main Content -->
-    <div class="main-content">
-        <!-- Flash Messages -->
-        {% include 'layouts/partials/flash_messages.html' %}
-        
         <!-- Page Content -->
-        {% block content %}{% endblock %}
-    </div>
+        <div class="p-6 md:p-8">
+            <!-- Flash Messages -->
+            {% if messages %}
+            <div class="space-y-3 mb-6">
+                {% for message in messages %}
+                <div class="flex items-center gap-3 p-4 rounded-xl {% if message.tags == 'error' %}bg-red-50 border border-red-200 text-red-700{% elif message.tags == 'success' %}bg-emerald-50 border border-emerald-200 text-emerald-700{% elif message.tags == 'warning' %}bg-orange-50 border border-orange-200 text-orange-700{% else %}bg-blue-50 border border-blue-200 text-blue-700{% endif %}">
+                    <i data-lucide="{% if message.tags == 'error' %}alert-circle{% elif message.tags == 'success' %}check-circle{% elif message.tags == 'warning' %}alert-triangle{% else %}info{% endif %}" class="w-5 h-5"></i>
+                    <p class="font-medium">{{ message }}</p>
+                </div>
+                {% endfor %}
+            </div>
+            {% endif %}
 
-    <!-- Mobile Sidebar Offcanvas -->
-    <div class="offcanvas offcanvas-start" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
-        <div class="offcanvas-header">
-            <h5 class="offcanvas-title" id="sidebarOffcanvasLabel">
-                <i class="bi bi-heart-pulse-fill me-2"></i> PX360
-            </h5>
-            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            {% block content %}{% endblock %}
         </div>
-        <div class="offcanvas-body">
-            <nav class="sidebar-nav">
-                <ul class="nav flex-column">
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'px_sources:source_user_dashboard' %}">
-                            <i class="bi bi-speedometer2"></i>{% trans "Dashboard" %}
-                        </a>
-                    </li>
-                    <hr>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'complaints:complaint_create' %}">
-                            <i class="bi bi-plus-circle"></i>{% trans "Create Complaint" %}
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'complaints:inquiry_create' %}">
-                            <i class="bi bi-plus-circle"></i>{% trans "Create Inquiry" %}
-                        </a>
-                    </li>
-                    <hr>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'px_sources:source_user_complaint_list' %}">
-                            <i class="bi bi-exclamation-triangle"></i>{% trans "My Complaints" %}
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'px_sources:source_user_inquiry_list' %}">
-                            <i class="bi bi-question-circle"></i>{% trans "My Inquiries" %}
-                        </a>
-                    </li>
-                    <hr>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'accounts:logout' %}">
-                            <i class="bi bi-box-arrow-right"></i>{% trans "Logout" %}
-                        </a>
-                    </li>
-                </ul>
-            </nav>
-        </div>
-    </div>
+    </main>
+
+    <!-- Mobile Menu Toggle -->
+    <button id="mobileMenuToggle" class="lg:hidden fixed bottom-4 right-4 w-14 h-14 bg-gradient-to-br from-blue to-navy text-white rounded-full shadow-xl z-50 flex items-center justify-center hover:shadow-2xl transition">
+        <i data-lucide="menu" class="w-6 h-6"></i>
+    </button>
+
+    <!-- Mobile Sidebar Overlay -->
+    <div id="mobileSidebarOverlay" class="lg:hidden fixed inset-0 bg-black/50 z-40 hidden"></div>
 
-    <!-- jQuery (required for Select2) -->
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-    
-    <!-- Bootstrap 5 JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    
-    <!-- Select2 -->
-    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
-    
-    <!-- Initialize Select2 -->
     <script>
-        $(document).ready(function() {
-            $('.select2').select2({
-                theme: 'bootstrap-5'
-            });
+        document.addEventListener('DOMContentLoaded', function() {
+            lucide.createIcons();
+
+            // Mobile menu toggle
+            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
+            const sidebar = document.getElementById('sidebar');
+            const mobileSidebarOverlay = document.getElementById('mobileSidebarOverlay');
+
+            if (mobileMenuToggle) {
+                mobileMenuToggle.addEventListener('click', function() {
+                    const isClosed = sidebar.classList.contains('-translate-x-full');
+                    if (isClosed) {
+                        sidebar.classList.remove('-translate-x-full');
+                        mobileSidebarOverlay.classList.remove('hidden');
+                    } else {
+                        sidebar.classList.add('-translate-x-full');
+                        mobileSidebarOverlay.classList.add('hidden');
+                    }
+                });
+            }
+
+            if (mobileSidebarOverlay) {
+                mobileSidebarOverlay.addEventListener('click', function() {
+                    sidebar.classList.add('-translate-x-full');
+                    mobileSidebarOverlay.classList.add('hidden');
+                });
+            }
+
+            // Initialize sidebar position for mobile
+            if (window.innerWidth < 1024) {
+                sidebar.classList.add('-translate-x-full');
+            }
         });
     </script>
-    
+
     {% block extra_js %}{% endblock %}
 </body>
 </html>
-</html>
diff --git a/templates/observations/convert_to_action.html b/templates/observations/convert_to_action.html
index 20eb379..55ddba1 100644
--- a/templates/observations/convert_to_action.html
+++ b/templates/observations/convert_to_action.html
@@ -30,7 +30,7 @@
                         <h6 class="alert-heading">{% trans "Observation Summary" %}</h6>
                         <div class="row">
                             <div class="col-md-6">
-                                <small class="text-muted">{% trans "Tracking Code" %}</small>
+                                <small class="text-muted">{% trans "Reference Number" %}</small>
                                 <div><strong>{{ observation.tracking_code }}</strong></div>
                             </div>
                             <div class="col-md-6">
diff --git a/templates/observations/observation_list.html b/templates/observations/observation_list.html
index 98ec42c..167933d 100644
--- a/templates/observations/observation_list.html
+++ b/templates/observations/observation_list.html
@@ -6,40 +6,20 @@
 
 {% block extra_css %}
 <style>
-    .filter-panel {
-        background: #f8f9fa;
-        border: 1px solid #dee2e6;
-        border-radius: 8px;
-        padding: 20px;
-        margin-bottom: 20px;
-    }
-    .filter-panel.collapsed .filter-body {
-        display: none;
-    }
-    .table-toolbar {
-        background: #fff;
-        border: 1px solid #dee2e6;
-        border-radius: 8px;
-        padding: 15px;
-        margin-bottom: 15px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
     .status-badge {
         padding: 4px 12px;
         border-radius: 12px;
         font-size: 0.85rem;
         font-weight: 500;
     }
-    .status-new { background: #e3f2fd; color: #1976d2; }
-    .status-triaged { background: #e0f7fa; color: #00838f; }
-    .status-assigned { background: #e0f7fa; color: #00838f; }
-    .status-in_progress { background: #fff3e0; color: #f57c00; }
-    .status-resolved { background: #e8f5e9; color: #388e3c; }
-    .status-closed { background: #f5f5f5; color: #616161; }
-    .status-rejected { background: #ffebee; color: #d32f2f; }
-    .status-duplicate { background: #f5f5f5; color: #616161; }
+    .status-new { background: #e0f2fe; color: #075985; }
+    .status-triaged { background: #ccfbf1; color: #0f766e; }
+    .status-assigned { background: #ccfbf1; color: #0f766e; }
+    .status-in_progress { background: #fef9c3; color: #854d0e; }
+    .status-resolved { background: #dcfce7; color: #166534; }
+    .status-closed { background: #f3f4f6; color: #6b7280; }
+    .status-rejected { background: #fee2e2; color: #991b1b; }
+    .status-duplicate { background: #f3f4f6; color: #6b7280; }
     
     .severity-badge {
         padding: 4px 12px;
@@ -47,14 +27,14 @@
         font-size: 0.85rem;
         font-weight: 500;
     }
-    .severity-low { background: #e8f5e9; color: #388e3c; }
-    .severity-medium { background: #fff3e0; color: #f57c00; }
-    .severity-high { background: #ffebee; color: #d32f2f; }
-    .severity-critical { background: #880e4f; color: #fff; }
+    .severity-low { background: #dcfce7; color: #166534; }
+    .severity-medium { background: #fef9c3; color: #854d0e; }
+    .severity-high { background: #fee2e2; color: #991b1b; }
+    .severity-critical { background: #991b1b; color: #fff; }
     
     .anonymous-badge {
-        background: #e9ecef;
-        color: #6c757d;
+        background: #f3f4f6;
+        color: #6b7280;
         padding: 2px 8px;
         border-radius: 10px;
         font-size: 0.75rem;
@@ -62,7 +42,7 @@
     }
     
     .observation-row:hover {
-        background: #f8f9fa;
+        background: #f8fafc;
         cursor: pointer;
     }
     
@@ -77,378 +57,364 @@
     .tracking-code {
         font-family: 'Courier New', monospace;
         font-weight: 600;
-        color: #667eea;
+        color: #005696;
     }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-    <!-- Page Header -->
-    <div class="d-flex justify-content-between align-items-center mb-4">
+<!-- Header -->
+<header class="mb-6">
+    <div class="flex justify-between items-start">
         <div>
-            <h2 class="mb-1">
-                <i class="bi bi-eye-fill text-primary me-2"></i>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="eye" class="w-7 h-7 text-green-500"></i>
                 {% trans "Observations Console" %}
-            </h2>
-            <p class="text-muted mb-0">{% trans "Manage and triage staff-reported observations" %}</p>
+            </h1>
+            <p class="text-sm text-slate mt-1">{% trans "Manage and triage staff-reported observations" %}</p>
         </div>
-        <div class="d-flex gap-2">
-            <a href="{% url 'observations:category_list' %}" class="btn btn-outline-secondary">
-                <i class="bi bi-tags me-1"></i> {% trans "Categories" %}
+        <div class="flex gap-3">
+            <a href="{% url 'observations:category_list' %}" class="bg-white text-navy border-2 border-navy/30 px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-navy hover:text-white flex items-center gap-2 transition">
+                <i data-lucide="tags" class="w-4 h-4"></i> {% trans "Categories" %}
             </a>
-            <a href="{% url 'core:public_submit_landing' %}" class="btn btn-primary" target="_blank">
-                <i class="bi bi-plus-circle me-1"></i> {% trans "Public Form" %}
+            <a href="{% url 'core:public_submit_landing' %}" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition" target="_blank">
+                <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Public Form" %}
             </a>
         </div>
     </div>
+</header>
 
-    <!-- Statistics Cards -->
-    <div class="row mb-4">
-        <div class="col-md-3 col-sm-6 mb-3">
-            <div class="card stat-card border-primary">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <div>
-                            <h6 class="text-muted mb-1">{% trans "Total" %}</h6>
-                            <h3 class="mb-0">{{ stats.total }}</h3>
-                        </div>
-                        <div class="text-primary">
-                            <i class="bi bi-list-ul" style="font-size: 2rem;"></i>
-                        </div>
-                    </div>
-                </div>
+<!-- Statistics Cards -->
+<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+    <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 border-l-4 border-l-blue-500">
+        <div class="flex justify-between items-center">
+            <div>
+                <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Total" %}</p>
+                <p class="text-2xl font-black text-navy">{{ stats.total }}</p>
             </div>
-        </div>
-        <div class="col-md-3 col-sm-6 mb-3">
-            <div class="card stat-card border-info">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <div>
-                            <h6 class="text-muted mb-1">{% trans "New" %}</h6>
-                            <h3 class="mb-0">{{ stats.new }}</h3>
-                        </div>
-                        <div class="text-info">
-                            <i class="bi bi-inbox" style="font-size: 2rem;"></i>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-3 col-sm-6 mb-3">
-            <div class="card stat-card border-warning">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <div>
-                            <h6 class="text-muted mb-1">{% trans "In Progress" %}</h6>
-                            <h3 class="mb-0">{{ stats.in_progress }}</h3>
-                        </div>
-                        <div class="text-warning">
-                            <i class="bi bi-hourglass-split" style="font-size: 2rem;"></i>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-3 col-sm-6 mb-3">
-            <div class="card stat-card border-secondary">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <div>
-                            <h6 class="text-muted mb-1">{% trans "Anonymous" %}</h6>
-                            <h3 class="mb-0">{{ stats.anonymous_count }}</h3>
-                        </div>
-                        <div class="text-secondary">
-                            <i class="bi bi-incognito" style="font-size: 2rem;"></i>
-                        </div>
-                    </div>
-                </div>
+            <div class="p-3 bg-blue-50 rounded-xl">
+                <i data-lucide="list" class="w-6 h-6 text-blue-500"></i>
             </div>
         </div>
     </div>
-
-    <!-- Filter Panel -->
-    <div class="filter-panel" id="filterPanel">
-        <div class="d-flex justify-content-between align-items-center mb-3">
-            <h5 class="mb-0">
-                <i class="bi bi-funnel me-2"></i>{% trans "Filters" %}
-            </h5>
-            <button class="btn btn-sm btn-outline-secondary" onclick="toggleFilters()">
-                <i class="bi bi-chevron-up" id="filterToggleIcon"></i>
-            </button>
+    <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 border-l-4 border-l-cyan-500">
+        <div class="flex justify-between items-center">
+            <div>
+                <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "New" %}</p>
+                <p class="text-2xl font-black text-navy">{{ stats.new }}</p>
+            </div>
+            <div class="p-3 bg-cyan-50 rounded-xl">
+                <i data-lucide="inbox" class="w-6 h-6 text-cyan-500"></i>
+            </div>
         </div>
-        
-        <div class="filter-body">
-            <form method="get" action="{% url 'observations:observation_list' %}" id="filterForm">
-                <div class="row g-3">
-                    <!-- Search -->
-                    <div class="col-md-4">
-                        <label class="form-label">{% trans "Search" %}</label>
-                        <input type="text" class="form-control" name="search" 
-                               placeholder="{% trans 'Tracking code, description...' %}" 
-                               value="{{ filters.search }}">
-                    </div>
-                    
-                    <!-- Status -->
-                    <div class="col-md-4">
-                        <label class="form-label">{% trans "Status" %}</label>
-                        <select class="form-select" name="status">
-                            <option value="">{% trans "All Statuses" %}</option>
-                            {% for value, label in status_choices %}
-                            <option value="{{ value }}" {% if filters.status == value %}selected{% endif %}>
-                                {{ label }}
-                            </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    
-                    <!-- Severity -->
-                    <div class="col-md-4">
-                        <label class="form-label">{% trans "Severity" %}</label>
-                        <select class="form-select" name="severity">
-                            <option value="">{% trans "All Severities" %}</option>
-                            <option value="low" {% if filters.severity == 'low' %}selected{% endif %}>{% trans "Low" %}</option>
-                            <option value="medium" {% if filters.severity == 'medium' %}selected{% endif %}>{% trans "Medium" %}</option>
-                            <option value="high" {% if filters.severity == 'high' %}selected{% endif %}>{% trans "High" %}</option>
-                            <option value="critical" {% if filters.severity == 'critical' %}selected{% endif %}>{% trans "Critical" %}</option>
-                        </select>
-                    </div>
-                    
-                    <!-- Category -->
-                    <div class="col-md-4">
-                        <label class="form-label">{% trans "Category" %}</label>
-                        <select class="form-select" name="category">
-                            <option value="">{% trans "All Categories" %}</option>
-                            {% for cat in categories %}
-                            <option value="{{ cat.id }}" {% if filters.category == cat.id|stringformat:"s" %}selected{% endif %}>
-                                {{ cat.name_en }}
-                            </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    
-                    <!-- Department -->
-                    <div class="col-md-4">
-                        <label class="form-label">{% trans "Department" %}</label>
-                        <select class="form-select" name="assigned_department">
-                            <option value="">{% trans "All Departments" %}</option>
-                            {% for dept in departments %}
-                            <option value="{{ dept.id }}" {% if filters.assigned_department == dept.id|stringformat:"s" %}selected{% endif %}>
-                                {{ dept.name }}
-                            </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    
-                    <!-- Assigned To -->
-                    <div class="col-md-4">
-                        <label class="form-label">{% trans "Assigned To" %}</label>
-                        <select class="form-select" name="assigned_to">
-                            <option value="">{% trans "All Users" %}</option>
-                            {% for user_obj in assignable_users %}
-                            <option value="{{ user_obj.id }}" {% if filters.assigned_to == user_obj.id|stringformat:"s" %}selected{% endif %}>
-                                {{ user_obj.get_full_name }}
-                            </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    
-                    <!-- Anonymous Filter -->
-                    <div class="col-md-4">
-                        <label class="form-label">{% trans "Reporter Type" %}</label>
-                        <select class="form-select" name="is_anonymous">
-                            <option value="">{% trans "All" %}</option>
-                            <option value="yes" {% if filters.is_anonymous == 'yes' %}selected{% endif %}>{% trans "Anonymous Only" %}</option>
-                            <option value="no" {% if filters.is_anonymous == 'no' %}selected{% endif %}>{% trans "Identified Only" %}</option>
-                        </select>
-                    </div>
-                    
-                    <!-- Date Range -->
-                    <div class="col-md-4">
-                        <label class="form-label">{% trans "Date From" %}</label>
-                        <input type="date" class="form-control" name="date_from" value="{{ filters.date_from }}">
-                    </div>
-                    <div class="col-md-4">
-                        <label class="form-label">{% trans "Date To" %}</label>
-                        <input type="date" class="form-control" name="date_to" value="{{ filters.date_to }}">
-                    </div>
+    </div>
+    <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 border-l-4 border-l-amber-500">
+        <div class="flex justify-between items-center">
+            <div>
+                <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "In Progress" %}</p>
+                <p class="text-2xl font-black text-navy">{{ stats.in_progress }}</p>
+            </div>
+            <div class="p-3 bg-amber-50 rounded-xl">
+                <i data-lucide="clock" class="w-6 h-6 text-amber-500"></i>
+            </div>
+        </div>
+    </div>
+    <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 border-l-4 border-l-slate-400">
+        <div class="flex justify-between items-center">
+            <div>
+                <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Anonymous" %}</p>
+                <p class="text-2xl font-black text-navy">{{ stats.anonymous_count }}</p>
+            </div>
+            <div class="p-3 bg-slate-100 rounded-xl">
+                <i data-lucide="user-x" class="w-6 h-6 text-slate-500"></i>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Filter Panel -->
+<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 mb-6" id="filterPanel">
+    <div class="px-6 py-4 border-b-2 border-slate-200 flex justify-between items-center bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="filter" class="w-5 h-5 text-navy"></i>
+            {% trans "Filters" %}
+        </h3>
+        <button onclick="toggleFilters()" class="text-slate hover:text-navy transition p-2 rounded-lg hover:bg-white">
+            <i data-lucide="chevron-up" id="filterToggleIcon" class="w-5 h-5"></i>
+        </button>
+    </div>
+    
+    <div class="filter-body px-6 py-4 bg-slate-50">
+        <form method="get" action="{% url 'observations:observation_list' %}" id="filterForm">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <!-- Search -->
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Search" %}</label>
+                    <input type="text" name="search" 
+                           placeholder="{% trans 'Tracking code, description...' %}" 
+                           value="{{ filters.search }}"
+                           class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
                 </div>
                 
-                <div class="mt-3 d-flex gap-2">
-                    <button type="submit" class="btn btn-primary">
-                        <i class="bi bi-search me-1"></i> {% trans "Apply Filters" %}
-                    </button>
-                    <a href="{% url 'observations:observation_list' %}" class="btn btn-outline-secondary">
-                        <i class="bi bi-x-circle me-1"></i> {% trans "Clear" %}
-                    </a>
-                </div>
-            </form>
-        </div>
-    </div>
-
-    <!-- Table Toolbar -->
-    <div class="table-toolbar">
-        <div>
-            <span class="text-muted">
-                {% trans "Showing" %} {{ page_obj.start_index }} {% trans "to" %} {{ page_obj.end_index }} {% trans "of" %} {{ page_obj.paginator.count }} {% trans "observations" %}
-            </span>
-        </div>
-    </div>
-
-    <!-- Observations Table -->
-    <div class="card">
-        <div class="card-body p-0">
-            <div class="table-responsive">
-                <table class="table table-hover mb-0">
-                    <thead class="table-light">
-                        <tr>
-                            <th>{% trans "Tracking Code" %}</th>
-                            <th>{% trans "Date" %}</th>
-                            <th>{% trans "Category" %}</th>
-                            <th>{% trans "Description" %}</th>
-                            <th>{% trans "Severity" %}</th>
-                            <th>{% trans "Status" %}</th>
-                            <th>{% trans "Reporter" %}</th>
-                            <th>{% trans "Department" %}</th>
-                            <th>{% trans "Assigned To" %}</th>
-                            <th>{% trans "Actions" %}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for observation in observations %}
-                        {% url 'observations:observation_detail' observation.id as observation_detail_url %}
-                        <tr class="observation-row" onclick="window.location='{{ observation_detail_url }}'">
-                            <td>
-                                <span class="tracking-code">{{ observation.tracking_code }}</span>
-                            </td>
-                            <td>
-                                <small>{{ observation.created_at|date:"M d, Y" }}</small><br>
-                                <small class="text-muted">{{ observation.created_at|time:"H:i" }}</small>
-                            </td>
-                            <td>
-                                {% if observation.category %}
-                                <span class="badge bg-secondary">{{ observation.category.name_en }}</span>
-                                {% else %}
-                                <span class="text-muted">-</span>
-                                {% endif %}
-                            </td>
-                            <td>
-                                <div style="max-width: 200px;">
-                                    {% if observation.title %}
-                                    <strong>{{ observation.title|truncatewords:5 }}</strong><br>
-                                    {% endif %}
-                                    <small class="text-muted">{{ observation.description|truncatewords:10 }}</small>
-                                </div>
-                            </td>
-                            <td>
-                                <span class="severity-badge severity-{{ observation.severity }}">
-                                    {{ observation.get_severity_display }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="status-badge status-{{ observation.status }}">
-                                    {{ observation.get_status_display }}
-                                </span>
-                            </td>
-                            <td>
-                                {% if observation.is_anonymous %}
-                                <span class="anonymous-badge">{% trans "Anonymous" %}</span>
-                                {% else %}
-                                <small>{{ observation.reporter_display }}</small>
-                                {% endif %}
-                            </td>
-                            <td>
-                                {% if observation.assigned_department %}
-                                <small>{{ observation.assigned_department.name|truncatewords:3 }}</small>
-                                {% else %}
-                                <span class="text-muted">-</span>
-                                {% endif %}
-                            </td>
-                            <td>
-                                {% if observation.assigned_to %}
-                                <small>{{ observation.assigned_to.get_full_name }}</small>
-                                {% else %}
-                                <span class="text-muted"><em>{% trans "Unassigned" %}</em></span>
-                                {% endif %}
-                            </td>
-                            <td onclick="event.stopPropagation();">
-                                <div class="btn-group btn-group-sm">
-                                    <a href="{% url 'observations:observation_detail' observation.id %}" 
-                                       class="btn btn-outline-primary" title="{% trans 'View' %}">
-                                        <i class="bi bi-eye"></i>
-                                    </a>
-                                </div>
-                            </td>
-                        </tr>
-                        {% empty %}
-                        <tr>
-                            <td colspan="10" class="text-center py-5">
-                                <i class="bi bi-inbox" style="font-size: 3rem; color: #ccc;"></i>
-                                <p class="text-muted mt-3">{% trans "No observations found" %}</p>
-                            </td>
-                        </tr>
+                <!-- Status -->
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Status" %}</label>
+                    <select name="status" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                        <option value="">{% trans "All Statuses" %}</option>
+                        {% for value, label in status_choices %}
+                        <option value="{{ value }}" {% if filters.status == value %}selected{% endif %}>
+                            {{ label }}
+                        </option>
                         {% endfor %}
-                    </tbody>
-                </table>
+                    </select>
+                </div>
+                
+                <!-- Severity -->
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Severity" %}</label>
+                    <select name="severity" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                        <option value="">{% trans "All Severities" %}</option>
+                        <option value="low" {% if filters.severity == 'low' %}selected{% endif %}>{% trans "Low" %}</option>
+                        <option value="medium" {% if filters.severity == 'medium' %}selected{% endif %}>{% trans "Medium" %}</option>
+                        <option value="high" {% if filters.severity == 'high' %}selected{% endif %}>{% trans "High" %}</option>
+                        <option value="critical" {% if filters.severity == 'critical' %}selected{% endif %}>{% trans "Critical" %}</option>
+                    </select>
+                </div>
+                
+                <!-- Category -->
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Category" %}</label>
+                    <select name="category" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                        <option value="">{% trans "All Categories" %}</option>
+                        {% for cat in categories %}
+                        <option value="{{ cat.id }}" {% if filters.category == cat.id|stringformat:"s" %}selected{% endif %}>
+                            {{ cat.name_en }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <!-- Department -->
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Department" %}</label>
+                    <select name="assigned_department" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                        <option value="">{% trans "All Departments" %}</option>
+                        {% for dept in departments %}
+                        <option value="{{ dept.id }}" {% if filters.assigned_department == dept.id|stringformat:"s" %}selected{% endif %}>
+                            {{ dept.name }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <!-- Assigned To -->
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Assigned To" %}</label>
+                    <select name="assigned_to" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                        <option value="">{% trans "All Users" %}</option>
+                        {% for user_obj in assignable_users %}
+                        <option value="{{ user_obj.id }}" {% if filters.assigned_to == user_obj.id|stringformat:"s" %}selected{% endif %}>
+                            {{ user_obj.get_full_name }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <!-- Anonymous Filter -->
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Reporter Type" %}</label>
+                    <select name="is_anonymous" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                        <option value="">{% trans "All" %}</option>
+                        <option value="yes" {% if filters.is_anonymous == 'yes' %}selected{% endif %}>{% trans "Anonymous Only" %}</option>
+                        <option value="no" {% if filters.is_anonymous == 'no' %}selected{% endif %}>{% trans "Identified Only" %}</option>
+                    </select>
+                </div>
+                
+                <!-- Date Range -->
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Date From" %}</label>
+                    <input type="date" name="date_from" value="{{ filters.date_from }}"
+                           class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                </div>
+                <div>
+                    <label class="block text-xs font-bold text-slate uppercase mb-2">{% trans "Date To" %}</label>
+                    <input type="date" name="date_to" value="{{ filters.date_to }}"
+                           class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy focus:border-transparent transition">
+                </div>
             </div>
-        </div>
+            
+            <div class="mt-4 flex gap-3">
+                <button type="submit" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-blue transition flex items-center gap-2">
+                    <i data-lucide="search" class="w-4 h-4"></i> {% trans "Apply Filters" %}
+                </button>
+                <a href="{% url 'observations:observation_list' %}" class="border-2 border-slate-200 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-white transition flex items-center gap-2">
+                    <i data-lucide="x-circle" class="w-4 h-4"></i> {% trans "Clear" %}
+                </a>
+            </div>
+        </form>
     </div>
-
-    <!-- Pagination -->
-    {% if page_obj.has_other_pages %}
-    <nav aria-label="Observations pagination" class="mt-4">
-        <ul class="pagination justify-content-center">
-            {% if page_obj.has_previous %}
-            <li class="page-item">
-                <a class="page-link" href="?page=1{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                    <i class="bi bi-chevron-double-left"></i>
-                </a>
-            </li>
-            <li class="page-item">
-                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                    <i class="bi bi-chevron-left"></i>
-                </a>
-            </li>
-            {% endif %}
-            
-            {% for num in page_obj.paginator.page_range %}
-                {% if page_obj.number == num %}
-                <li class="page-item active"><span class="page-link">{{ num }}</span></li>
-                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
-                <li class="page-item">
-                    <a class="page-link" href="?page={{ num }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                        {{ num }}
-                    </a>
-                </li>
-                {% endif %}
-            {% endfor %}
-            
-            {% if page_obj.has_next %}
-            <li class="page-item">
-                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                    <i class="bi bi-chevron-right"></i>
-                </a>
-            </li>
-            <li class="page-item">
-                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                    <i class="bi bi-chevron-double-right"></i>
-                </a>
-            </li>
-            {% endif %}
-        </ul>
-    </nav>
-    {% endif %}
 </div>
+
+<!-- Table Toolbar -->
+<div class="bg-white px-6 py-4 rounded-t-2xl border-2 border-slate-200 border-b-0 flex justify-between items-center bg-gradient-to-r from-slate-50 to-slate-100">
+    <div class="text-sm text-slate">
+        {% trans "Showing" %} <span class="font-bold text-navy">{{ page_obj.start_index }}</span> {% trans "to" %} <span class="font-bold text-navy">{{ page_obj.end_index }}</span> {% trans "of" %} <span class="font-bold text-navy">{{ page_obj.paginator.count }}</span> {% trans "observations" %}
+    </div>
+</div>
+
+<!-- Observations Table -->
+<div class="bg-white rounded-b-2xl shadow-sm border-2 border-slate-200 overflow-hidden mb-6 border-t-0">
+    <div class="overflow-x-auto">
+        <table class="w-full">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Reference" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Date" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Category" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Description" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Severity" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Status" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Reporter" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Department" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Assigned" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Actions" %}</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100">
+                {% for observation in observations %}
+                {% url 'observations:observation_detail' observation.id as observation_detail_url %}
+                <tr class="observation-row" onclick="window.location='{{ observation_detail_url }}'">
+                    <td class="px-6 py-4">
+                        <span class="tracking-code text-sm">{{ observation.tracking_code }}</span>
+                    </td>
+                    <td class="px-6 py-4">
+                        <small class="text-gray-600">{{ observation.created_at|date:"M d, Y" }}</small><br>
+                        <small class="text-gray-400">{{ observation.created_at|time:"H:i" }}</small>
+                    </td>
+                    <td class="px-6 py-4">
+                        {% if observation.category %}
+                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate">
+                            {{ observation.category.name_en }}
+                        </span>
+                        {% else %}
+                        <span class="text-gray-400">-</span>
+                        {% endif %}
+                    </td>
+                    <td class="px-6 py-4">
+                        <div class="max-w-[200px]">
+                            {% if observation.title %}
+                            <strong class="text-gray-800 text-sm block">{{ observation.title|truncatewords:5 }}</strong>
+                            {% endif %}
+                            <small class="text-gray-400">{{ observation.description|truncatewords:10 }}</small>
+                        </div>
+                    </td>
+                    <td class="px-6 py-4">
+                        <span class="severity-badge severity-{{ observation.severity }}">
+                            {{ observation.get_severity_display }}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4">
+                        <span class="status-badge status-{{ observation.status }}">
+                            {{ observation.get_status_display }}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4">
+                        {% if observation.is_anonymous %}
+                        <span class="anonymous-badge">{% trans "Anonymous" %}</span>
+                        {% else %}
+                        <small class="text-gray-600">{{ observation.reporter_display }}</small>
+                        {% endif %}
+                    </td>
+                    <td class="px-6 py-4">
+                        {% if observation.assigned_department %}
+                        <small class="text-gray-600">{{ observation.assigned_department.name|truncatewords:3 }}</small>
+                        {% else %}
+                        <span class="text-gray-400">-</span>
+                        {% endif %}
+                    </td>
+                    <td class="px-6 py-4">
+                        {% if observation.assigned_to %}
+                        <small class="text-gray-600">{{ observation.assigned_to.get_full_name }}</small>
+                        {% else %}
+                        <span class="text-gray-400 italic">{% trans "Unassigned" %}</span>
+                        {% endif %}
+                    </td>
+                    <td class="px-6 py-4" onclick="event.stopPropagation();">
+                        <a href="{% url 'observations:observation_detail' observation.id %}" 
+                           class="inline-flex items-center gap-1 px-3 py-2 text-navy bg-light rounded-lg hover:bg-light transition font-medium text-sm">
+                            <i data-lucide="eye" class="w-4 h-4"></i>
+                        </a>
+                    </td>
+                </tr>
+                {% empty %}
+                <tr>
+                    <td colspan="10" class="text-center py-8 text-gray-500">
+                        <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
+                        <p>{% trans "No observations found" %}</p>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<!-- Pagination -->
+{% if page_obj.has_other_pages %}
+<div class="flex justify-center">
+    <div class="flex items-center gap-2">
+        {% if page_obj.has_previous %}
+        <a href="?page=1{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}" 
+           class="px-3 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+            <i data-lucide="chevrons-left" class="w-4 h-4"></i>
+        </a>
+        <a href="?page={{ page_obj.previous_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}" 
+           class="px-3 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+            <i data-lucide="chevron-left" class="w-4 h-4"></i>
+        </a>
+        {% endif %}
+        
+        {% for num in page_obj.paginator.page_range %}
+            {% if page_obj.number == num %}
+            <span class="px-4 py-2 rounded-lg bg-navy text-white font-bold">{{ num }}</span>
+            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
+            <a href="?page={{ num }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}" 
+               class="px-4 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+                {{ num }}
+            </a>
+            {% endif %}
+        {% endfor %}
+        
+        {% if page_obj.has_next %}
+        <a href="?page={{ page_obj.next_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}" 
+           class="px-3 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+            <i data-lucide="chevron-right" class="w-4 h-4"></i>
+        </a>
+        <a href="?page={{ page_obj.paginator.num_pages }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}" 
+           class="px-3 py-2 rounded-lg border border-slate-200 text-slate hover:bg-light transition">
+            <i data-lucide="chevrons-right" class="w-4 h-4"></i>
+        </a>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
 {% endblock %}
 
 {% block extra_js %}
 <script>
 function toggleFilters() {
     const panel = document.getElementById('filterPanel');
+    const body = panel.querySelector('.filter-body');
     const icon = document.getElementById('filterToggleIcon');
-    panel.classList.toggle('collapsed');
-    icon.classList.toggle('bi-chevron-up');
-    icon.classList.toggle('bi-chevron-down');
+    
+    if (body.style.display === 'none') {
+        body.style.display = 'block';
+        icon.setAttribute('data-lucide', 'chevron-up');
+    } else {
+        body.style.display = 'none';
+        icon.setAttribute('data-lucide', 'chevron-down');
+    }
+    lucide.createIcons();
 }
 </script>
 {% endblock %}
diff --git a/templates/observations/public_success.html b/templates/observations/public_success.html
index 4088e25..d62b968 100644
--- a/templates/observations/public_success.html
+++ b/templates/observations/public_success.html
@@ -185,9 +185,9 @@
             {% trans "Your observation has been submitted successfully." %}
         </p>
         
-        <!-- Tracking Code -->
+        <!-- Reference Number -->
         <div class="tracking-code">
-            <p class="text-muted mb-2">{% trans "Your Tracking Code" %}</p>
+            <p class="text-muted mb-2">{% trans "Your Reference Number" %}</p>
             <h3 id="trackingCode">{{ tracking_code }}</h3>
             <button class="copy-btn mt-2" onclick="copyTrackingCode()">
                 <i class="bi bi-clipboard me-1"></i>
@@ -202,9 +202,9 @@
                 <strong>{% trans "Important" %}</strong>
             </p>
             <ul class="mb-0 small">
-                <li>{% trans "Save this tracking code to check the status of your observation." %}</li>
+                <li>{% trans "Save this reference number to check the status of your observation." %}</li>
                 <li>{% trans "Our team will review your observation and take appropriate action." %}</li>
-                <li>{% trans "You can track your observation status anytime using the tracking code." %}</li>
+                <li>{% trans "You can track your observation status anytime using the reference number." %}</li>
             </ul>
         </div>
         
diff --git a/templates/observations/public_track.html b/templates/observations/public_track.html
index 4aa2b9b..a2bcbe7 100644
--- a/templates/observations/public_track.html
+++ b/templates/observations/public_track.html
@@ -225,7 +225,7 @@
         <!-- Header -->
         <div class="logo-header">
             <h1><i class="bi bi-search text-primary me-2"></i>{% trans "Track Your Observation" %}</h1>
-            <p class="text-muted">{% trans "Enter your tracking code to check the status" %}</p>
+            <p class="text-muted">{% trans "Enter your reference number to check the status" %}</p>
         </div>
         
         <!-- Messages -->
@@ -252,10 +252,10 @@
         {% if observation %}
         <!-- Result Card -->
         <div class="result-card">
-            <!-- Tracking Code -->
+            <!-- Reference Number -->
             <div class="d-flex justify-content-between align-items-start mb-3">
                 <div>
-                    <small class="text-muted">{% trans "Tracking Code" %}</small>
+                    <small class="text-muted">{% trans "Reference Number" %}</small>
                     <h4 class="mb-0" style="font-family: 'Courier New', monospace; color: #667eea;">
                         {{ observation.tracking_code }}
                     </h4>
diff --git a/templates/organizations/department_list.html b/templates/organizations/department_list.html
index 694b54a..98fcffc 100644
--- a/templates/organizations/department_list.html
+++ b/templates/organizations/department_list.html
@@ -1,47 +1,74 @@
 {% extends "layouts/base.html" %}
 {% load i18n %}
 
-{% block title %}Departments - PX360{% endblock %}
+{% block title %}{% trans "Departments" %} - PX360{% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-    <h2 class="mb-4"><i class="bi bi-building me-2"></i>{% trans "Departments" %}</h2>
-    
-    <div class="card">
-        <div class="card-body p-0">
-            <table class="table table-hover mb-0">
-                <thead class="table-light">
-                    <tr>
-                        <th>{% trans "Name" %}</th>
-                        <th>{% trans "Code" %}</th>
-                        <th>{% trans "Hospital" %}</th>
-                        <th>{% trans "Manager" %}</th>
-                        <th>{% trans "Status" %}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for dept in departments %}
-                    <tr>
-                        <td><strong>{{ dept.name }}</strong></td>
-                        <td><small>{{ dept.code }}</small></td>
-                        <td><small>{{ dept.hospital.name }}</small></td>
-                        <td>
-                            {% if dept.manager %}
-                            <small>{{ dept.manager.get_full_name }}</small>
-                            {% else %}
-                            <span class="text-muted">-</span>
-                            {% endif %}
-                        </td>
-                        <td><span class="badge bg-success">{{ dept.get_status_display }}</span></td>
-                    </tr>
-                    {% empty %}
-                    <tr>
-                        <td colspan="5" class="text-center py-5">No departments found</td>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
+<!-- Header -->
+<header class="mb-6">
+    <div class="flex justify-between items-start">
+        <div>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="building-2" class="w-7 h-7 text-blue"></i>
+                {% trans "Departments" %}
+            </h1>
+            <p class="text-sm text-slate mt-1">{% trans "Manage hospital departments and their structure" %}</p>
         </div>
     </div>
+</header>
+
+<!-- Departments Table -->
+<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 overflow-hidden">
+    <div class="px-6 py-4 border-b-2 border-slate-200 flex justify-between items-center bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="building-2" class="w-5 h-5 text-navy"></i>
+            {% trans "Department List" %}
+        </h3>
+    </div>
+    <div class="overflow-x-auto">
+        <table class="w-full">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Name" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Code" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Hospital" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Manager" %}</th>
+                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Status" %}</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100">
+                {% for dept in departments %}
+                <tr class="hover:bg-gray-50 transition">
+                    <td class="px-6 py-4">
+                        <strong class="text-gray-800">{{ dept.name }}</strong>
+                    </td>
+                    <td class="px-6 py-4">
+                        <span class="text-xs font-mono bg-slate-100 px-2 py-1 rounded">{{ dept.code }}</span>
+                    </td>
+                    <td class="px-6 py-4 text-gray-600">{{ dept.hospital.name }}</td>
+                    <td class="px-6 py-4">
+                        {% if dept.manager %}
+                        <span class="text-gray-600">{{ dept.manager.get_full_name }}</span>
+                        {% else %}
+                        <span class="text-gray-400">-</span>
+                        {% endif %}
+                    </td>
+                    <td class="px-6 py-4">
+                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">
+                            {{ dept.get_status_display }}
+                        </span>
+                    </td>
+                </tr>
+                {% empty %}
+                <tr>
+                    <td colspan="5" class="text-center py-8 text-gray-500">
+                        <i data-lucide="building-2" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
+                        <p>{% trans "No departments found" %}</p>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
 </div>
 {% endblock %}
diff --git a/templates/organizations/staff_list.html b/templates/organizations/staff_list.html
index c7e352e..8f92f6f 100644
--- a/templates/organizations/staff_list.html
+++ b/templates/organizations/staff_list.html
@@ -8,7 +8,10 @@
 <header class="mb-6">
     <div class="flex justify-between items-start">
         <div>
-            <h1 class="text-2xl font-bold text-navy">{% trans "Staff Management" %}</h1>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="users" class="w-7 h-7 text-blue"></i>
+                {% trans "Staff Management" %}
+            </h1>
             <p class="text-sm text-slate mt-1">{% trans "Manage hospital staff and their user accounts" %}</p>
         </div>
         {% if user.is_px_admin or user.is_hospital_admin %}
@@ -20,7 +23,14 @@
 </header>
 
 <!-- Filters -->
-<div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 mb-6">
+<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 mb-6">
+    <div class="px-6 py-4 border-b-2 border-slate-200 flex justify-between items-center bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="filter" class="w-5 h-5 text-navy"></i>
+            {% trans "Filters" %}
+        </h3>
+    </div>
+    <div class="p-5">
     <form method="get" class="flex flex-wrap gap-4 items-end">
         <div class="flex items-center gap-2">
             <label class="text-xs font-bold text-slate uppercase">{% trans "Status" %}</label>
@@ -67,11 +77,12 @@
             <a href="{% url 'organizations:staff_list' %}" class="px-4 py-1.5 border border-slate-200 rounded-lg text-xs font-semibold text-slate hover:bg-light transition">{% trans "Clear" %}</a>
         </div>
     </form>
+    </div>
 </div>
 
 <!-- Staff List -->
-<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
-    <div class="flex justify-between items-center p-5 border-b border-slate-100">
+<div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 overflow-hidden">
+    <div class="flex justify-between items-center p-5 border-b-2 border-slate-200 bg-gradient-to-r from-slate-50 to-slate-100">
         <h3 class="font-bold text-navy flex items-center gap-2 text-sm">
             <i data-lucide="users" class="w-4 h-4"></i>
             {% trans "Staff List" %}
diff --git a/templates/projects/convert_action.html b/templates/projects/convert_action.html
new file mode 100644
index 0000000..52627da
--- /dev/null
+++ b/templates/projects/convert_action.html
@@ -0,0 +1,165 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Convert to QI Project" %} - PX360{% endblock %}
+
+{% block content %}
+<!-- Back Button -->
+<div class="mb-6">
+    <a href="{% url 'actions:action_detail' pk=action.pk %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
+        <i data-lucide="arrow-left" class="w-4 h-4"></i>
+        <span class="text-sm font-medium">{% trans "Back to Action" %}</span>
+    </a>
+</div>
+
+<!-- Header -->
+<header class="mb-6">
+    <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+        <i data-lucide="arrow-right-circle" class="w-7 h-7 text-blue"></i>
+        {% trans "Convert PX Action to QI Project" %}
+    </h1>
+    <p class="text-sm text-slate mt-1">{% trans "Transform this action into a formal Quality Improvement project" %}</p>
+</header>
+
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <!-- Main Form -->
+    <div class="lg:col-span-2">
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
+            <div class="px-6 py-4 border-b bg-slate-50">
+                <h2 class="text-sm font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="file-plus" class="w-4 h-4"></i>
+                    {% trans "Project Details" %}
+                </h2>
+            </div>
+            <div class="p-6">
+                <form method="post" novalidate>
+                    {% csrf_token %}
+                    
+                    <!-- Template Selection -->
+                    <div class="mb-5">
+                        <label for="{{ form.template.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
+                            {% trans "Project Template" %}
+                        </label>
+                        {{ form.template }}
+                        {% if form.template.errors %}
+                            <p class="mt-1 text-xs text-red-600">{{ form.template.errors.0 }}</p>
+                        {% endif %}
+                        <p class="mt-1 text-xs text-slate">{% trans "Select a template to pre-fill project details, or leave blank for empty project" %}</p>
+                    </div>
+
+                    <!-- Project Name -->
+                    <div class="mb-5">
+                        <label for="{{ form.project_name.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
+                            {% trans "Project Name" %} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.project_name }}
+                        {% if form.project_name.errors %}
+                            <p class="mt-1 text-xs text-red-600">{{ form.project_name.errors.0 }}</p>
+                        {% endif %}
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                        <!-- Project Lead -->
+                        <div>
+                            <label for="{{ form.project_lead.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
+                                {% trans "Project Lead" %} <span class="text-red-500">*</span>
+                            </label>
+                            {{ form.project_lead }}
+                            {% if form.project_lead.errors %}
+                                <p class="mt-1 text-xs text-red-600">{{ form.project_lead.errors.0 }}</p>
+                            {% endif %}
+                        </div>
+                        
+                        <!-- Target Completion Date -->
+                        <div>
+                            <label for="{{ form.target_completion_date.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
+                                {% trans "Target Completion Date" %}
+                            </label>
+                            {{ form.target_completion_date }}
+                            {% if form.target_completion_date.errors %}
+                                <p class="mt-1 text-xs text-red-600">{{ form.target_completion_date.errors.0 }}</p>
+                            {% endif %}
+                        </div>
+                    </div>
+
+                    <!-- Submit Buttons -->
+                    <div class="flex items-center gap-3 mt-6 pt-6 border-t">
+                        <button type="submit" class="bg-green-600 text-white px-5 py-2.5 rounded-xl text-sm font-bold flex items-center gap-2 hover:bg-green-700 transition">
+                            <i data-lucide="kanban" class="w-4 h-4"></i>
+                            {% trans "Create QI Project" %}
+                        </button>
+                        <a href="{% url 'actions:action_detail' pk=action.pk %}" class="bg-white text-slate border border-slate-200 px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-50 transition">
+                            {% trans "Cancel" %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sidebar - Action Summary -->
+    <div class="lg:col-span-1">
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
+            <div class="px-6 py-4 border-b bg-blue/5">
+                <h2 class="text-sm font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="info" class="w-4 h-4"></i>
+                    {% trans "PX Action Details" %}
+                </h2>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Title" %}</p>
+                    <p class="text-sm text-navy font-medium">{{ action.title }}</p>
+                </div>
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Hospital" %}</p>
+                    <p class="text-sm text-navy font-medium">{{ action.hospital.name }}</p>
+                </div>
+                {% if action.department %}
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Department" %}</p>
+                    <p class="text-sm text-navy font-medium">{{ action.department.name }}</p>
+                </div>
+                {% endif %}
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Priority" %}</p>
+                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
+                        {% if action.priority == 'critical' %}bg-red-100 text-red-700
+                        {% elif action.priority == 'high' %}bg-orange-100 text-orange-700
+                        {% elif action.priority == 'medium' %}bg-yellow-100 text-yellow-700
+                        {% else %}bg-slate-100 text-slate-700{% endif %}">
+                        {{ action.get_priority_display }}
+                    </span>
+                </div>
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Status" %}</p>
+                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
+                        {% if action.status == 'completed' %}bg-green-100 text-green-700
+                        {% elif action.status == 'in_progress' %}bg-blue-100 text-blue-700
+                        {% elif action.status == 'pending' %}bg-yellow-100 text-yellow-700
+                        {% else %}bg-slate-100 text-slate-700{% endif %}">
+                        {{ action.get_status_display }}
+                    </span>
+                </div>
+                {% if action.description %}
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Description" %}</p>
+                    <p class="text-sm text-slate">{{ action.description|truncatewords:30 }}</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+
+        <!-- Help Card -->
+        <div class="bg-slate-50 rounded-2xl border border-slate-200 p-5 mt-6">
+            <div class="flex items-start gap-3">
+                <i data-lucide="help-circle" class="w-5 h-5 text-blue flex-shrink-0 mt-0.5"></i>
+                <div>
+                    <h3 class="text-sm font-bold text-navy mb-1">{% trans "What happens next?" %}</h3>
+                    <p class="text-xs text-slate">{% trans "Converting this action to a QI Project will create a structured project with tasks, team members, and outcome tracking." %}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/projects/project_confirm_delete.html b/templates/projects/project_confirm_delete.html
new file mode 100644
index 0000000..5800ef3
--- /dev/null
+++ b/templates/projects/project_confirm_delete.html
@@ -0,0 +1,64 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Delete Project" %} - PX360{% endblock %}
+
+{% block content %}
+<!-- Back Button -->
+<div class="mb-6">
+    <a href="{% url 'projects:project_detail' pk=project.pk %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
+        <i data-lucide="arrow-left" class="w-4 h-4"></i>
+        <span class="text-sm font-medium">{% trans "Back to Project" %}</span>
+    </a>
+</div>
+
+<!-- Delete Confirmation Card -->
+<div class="bg-white rounded-2xl border shadow-sm overflow-hidden max-w-xl mx-auto">
+    <div class="px-6 py-4 border-b bg-red-50">
+        <h1 class="text-lg font-bold text-red-600 flex items-center gap-2">
+            <i data-lucide="alert-triangle" class="w-5 h-5"></i>
+            {% trans "Delete Project" %}
+        </h1>
+    </div>
+    <div class="p-6">
+        <div class="text-center mb-6">
+            <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <i data-lucide="trash-2" class="w-8 h-8 text-red-600"></i>
+            </div>
+            <p class="text-slate mb-2">
+                {% trans "Are you sure you want to delete the project" %}
+            </p>
+            <p class="text-lg font-bold text-navy">"{{ project.name }}"</p>
+        </div>
+        
+        {% if project.tasks.count > 0 %}
+        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 mb-6">
+            <div class="flex items-start gap-3">
+                <i data-lucide="alert-circle" class="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5"></i>
+                <div>
+                    <p class="text-sm font-semibold text-yellow-800">{% trans "Warning" %}</p>
+                    <p class="text-xs text-yellow-700 mt-1">
+                        {% blocktrans count counter=project.tasks.count %}
+                            This project has {{ counter }} task that will also be deleted.
+                        {% plural %}
+                            This project has {{ counter }} tasks that will also be deleted.
+                        {% endblocktrans %}
+                    </p>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        
+        <form method="post" class="flex items-center justify-center gap-3">
+            {% csrf_token %}
+            <button type="submit" class="bg-red-600 text-white px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-red-700 flex items-center gap-2 transition">
+                <i data-lucide="trash-2" class="w-4 h-4"></i>
+                {% trans "Yes, Delete Project" %}
+            </button>
+            <a href="{% url 'projects:project_detail' pk=project.pk %}" class="bg-slate-100 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-200 transition">
+                {% trans "Cancel" %}
+            </a>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/projects/project_delete_confirm.html b/templates/projects/project_delete_confirm.html
new file mode 100644
index 0000000..781243f
--- /dev/null
+++ b/templates/projects/project_delete_confirm.html
@@ -0,0 +1,57 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Delete QI Project" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="container-fluid">
+    <div class="row justify-content-center">
+        <div class="col-md-6">
+            <div class="card border-danger">
+                <div class="card-header bg-danger text-white">
+                    <h5 class="mb-0">
+                        <i class="bi bi-exclamation-triangle me-2"></i>
+                        {% trans "Delete QI Project" %}
+                    </h5>
+                </div>
+                <div class="card-body">
+                    <p class="mb-3">
+                        {% trans "Are you sure you want to delete this QI Project?" %}
+                    </p>
+                    
+                    <div class="alert alert-secondary">
+                        <strong>{% trans "Project:" %}</strong> {{ project.name }}<br>
+                        <strong>{% trans "Hospital:" %}</strong> {{ project.hospital.name }}<br>
+                        <strong>{% trans "Status:" %}</strong> {{ project.get_status_display }}
+                    </div>
+                    
+                    {% if project.tasks.count > 0 %}
+                    <div class="alert alert-warning">
+                        <i class="bi bi-info-circle me-1"></i>
+                        {% blocktrans with count=project.tasks.count %}
+                            This project has {{ count }} task(s) that will also be deleted.
+                        {% endblocktrans %}
+                    </div>
+                    {% endif %}
+                    
+                    <p class="text-danger mb-4">
+                        <strong>{% trans "This action cannot be undone." %}</strong>
+                    </p>
+                    
+                    <form method="post">
+                        {% csrf_token %}
+                        <div class="d-flex gap-2">
+                            <button type="submit" class="btn btn-danger">
+                                <i class="bi bi-trash me-1"></i> {% trans "Delete Project" %}
+                            </button>
+                            <a href="{% url 'projects:project_detail' pk=project.pk %}" class="btn btn-outline-secondary">
+                                {% trans "Cancel" %}
+                            </a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/projects/project_detail.html b/templates/projects/project_detail.html
index 83bf608..84031b2 100644
--- a/templates/projects/project_detail.html
+++ b/templates/projects/project_detail.html
@@ -3,104 +3,256 @@
 
 {% block title %}{{ project.name }} - PX360{% endblock %}
 
+{% block extra_css %}
+<style>
+    .status-active { background-color: #e0f2fe; color: #075985; }
+    .status-pending { background-color: #fef9c3; color: #854d0e; }
+    .status-completed { background-color: #dcfce7; color: #166534; }
+    .status-cancelled { background-color: #fee2e2; color: #991b1b; }
+    .task-status-pending { background-color: #f1f5f9; color: #475569; }
+    .task-status-in_progress { background-color: #e0f2fe; color: #075985; }
+    .task-status-completed { background-color: #dcfce7; color: #166534; }
+    .task-status-blocked { background-color: #fee2e2; color: #991b1b; }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid">
-    <div class="mb-3">
-        <a href="{% url 'projects:project_list' %}" class="btn btn-outline-secondary btn-sm">
-            <i class="bi bi-arrow-left me-1"></i> Back to Projects
-        </a>
-    </div>
+<!-- Back Button -->
+<div class="mb-6">
+    <a href="{% url 'projects:project_list' %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
+        <i data-lucide="arrow-left" class="w-4 h-4"></i>
+        <span class="text-sm font-medium">{% trans "Back to Projects" %}</span>
+    </a>
+</div>
 
-    <div class="row">
-        <div class="col-lg-8">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="mb-0">{{ project.name }}</h5>
-                </div>
-                <div class="card-body">
-                    <p>{{ project.description }}</p>
-                    
-                    {% if project.outcome_description %}
-                    <hr>
-                    <h6>{% trans "Outcome:" %}</h6>
-                    <p>{{ project.outcome_description }}</p>
-                    {% endif %}
-                    
-                    {% if tasks %}
-                    <hr>
-                    <h6>{% trans "Tasks:" %}</h6>
-                    <div class="list-group">
-                        {% for task in tasks %}
-                        <div class="list-group-item">
-                            <div class="d-flex justify-content-between align-items-center">
-                                <div>
-                                    <strong>{{ task.title }}</strong>
-                                    {% if task.assigned_to %}
-                                    <br><small class="text-muted">Assigned to: {{ task.assigned_to.get_full_name }}</small>
-                                    {% endif %}
-                                </div>
-                                <span class="badge bg-{{ task.status }}">{{ task.get_status_display }}</span>
-                            </div>
-                        </div>
-                        {% endfor %}
-                    </div>
-                    {% endif %}
-                </div>
-            </div>
+<!-- Header -->
+<header class="mb-6">
+    <div class="flex justify-between items-start">
+        <div>
+            <h1 class="text-2xl font-bold text-navy">{{ project.name }}</h1>
+            {% if project.description %}
+            <p class="text-sm text-slate mt-1 max-w-2xl">{{ project.description|linebreaksbr }}</p>
+            {% endif %}
         </div>
-
-        <div class="col-lg-4">
-            <div class="card mb-3">
-                <div class="card-header">
-                    <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>{% trans "Project Info" %}</h6>
-                </div>
-                <div class="card-body">
-                    <div class="mb-2">
-                        <strong>Status:</strong><br>
-                        <span class="badge bg-{{ project.status }}">{{ project.get_status_display }}</span>
-                    </div>
-                    <div class="mb-2">
-                        <strong>Hospital:</strong><br>
-                        {{ project.hospital.name }}
-                    </div>
-                    {% if project.department %}
-                    <div class="mb-2">
-                        <strong>Department:</strong><br>
-                        {{ project.department.name }}
-                    </div>
-                    {% endif %}
-                    {% if project.project_lead %}
-                    <div class="mb-2">
-                        <strong>Project Lead:</strong><br>
-                        {{ project.project_lead.get_full_name }}
-                    </div>
-                    {% endif %}
-                    {% if project.start_date %}
-                    <div class="mb-2">
-                        <strong>Start Date:</strong><br>
-                        {{ project.start_date|date:"M d, Y" }}
-                    </div>
-                    {% endif %}
-                    {% if project.target_completion_date %}
-                    <div class="mb-0">
-                        <strong>Target Date:</strong><br>
-                        {{ project.target_completion_date|date:"M d, Y" }}
-                    </div>
-                    {% endif %}
-                </div>
-            </div>
-            
-            {% if project.related_actions.count > 0 %}
-            <div class="card">
-                <div class="card-header">
-                    <h6 class="mb-0"><i class="bi bi-lightning me-2"></i>{% trans "Related Actions" %}</h6>
-                </div>
-                <div class="card-body">
-                    <p class="mb-0">{{ project.related_actions.count }} linked actions</p>
-                </div>
-            </div>
+        <div class="flex items-center gap-3">
+            {% if can_edit %}
+            <a href="{% url 'projects:project_edit' pk=project.pk %}" class="bg-white text-blue border-2 border-blue/30 px-4 py-2 rounded-xl text-sm font-bold hover:bg-blue hover:text-white flex items-center gap-2 transition">
+                <i data-lucide="pencil" class="w-4 h-4"></i> {% trans "Edit" %}
+            </a>
+            {% endif %}
+            {% if user.is_px_admin or user.is_hospital_admin %}
+            <a href="{% url 'projects:project_save_as_template' pk=project.pk %}" class="bg-white text-purple-600 border-2 border-purple-200 px-4 py-2 rounded-xl text-sm font-bold hover:bg-purple-600 hover:text-white flex items-center gap-2 transition">
+                <i data-lucide="copy" class="w-4 h-4"></i> {% trans "Save as Template" %}
+            </a>
+            <a href="{% url 'projects:project_delete' pk=project.pk %}" class="bg-white text-red-600 border-2 border-red-200 px-4 py-2 rounded-xl text-sm font-bold hover:bg-red-600 hover:text-white flex items-center gap-2 transition">
+                <i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
+            </a>
             {% endif %}
         </div>
     </div>
+</header>
+
+<div class="grid grid-cols-3 gap-6">
+    <!-- Main Content -->
+    <div class="col-span-2">
+        <!-- Tasks Section -->
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden mb-6">
+            <div class="px-6 py-4 border-b flex justify-between items-center">
+                <h2 class="text-sm font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="check-square" class="w-4 h-4"></i>
+                    {% trans "Tasks" %}
+                </h2>
+                {% if can_edit %}
+                <a href="{% url 'projects:task_create' project_pk=project.pk %}" class="bg-navy text-white px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1 hover:bg-blue transition">
+                    <i data-lucide="plus" class="w-3 h-3"></i> {% trans "Add Task" %}
+                </a>
+                {% endif %}
+            </div>
+            
+            {% if tasks %}
+            <div class="divide-y divide-slate-100">
+                {% for task in tasks %}
+                <div class="px-6 py-4 hover:bg-slate-50 transition-colors">
+                    <div class="flex justify-between items-start">
+                        <div class="flex-grow">
+                            <div class="flex items-center gap-3 mb-1">
+                                <form method="post" action="{% url 'projects:task_toggle_status' project_pk=project.pk task_pk=task.pk %}" class="inline">
+                                    {% csrf_token %}
+                                    <button type="submit" class="p-0 bg-transparent border-none cursor-pointer">
+                                        {% if task.status == 'completed' %}
+                                        <i data-lucide="check-square" class="w-5 h-5 text-green-600"></i>
+                                        {% else %}
+                                        <i data-lucide="square" class="w-5 h-5 text-slate-300"></i>
+                                        {% endif %}
+                                    </button>
+                                </form>
+                                <h3 class="font-semibold text-navy {% if task.status == 'completed' %}line-through text-slate{% endif %}">
+                                    {{ task.title }}
+                                </h3>
+                            </div>
+                            {% if task.description %}
+                            <p class="text-xs text-slate ml-8 mb-2">{{ task.description }}</p>
+                            {% endif %}
+                            <div class="flex items-center gap-4 ml-8 text-xs text-slate">
+                                {% if task.assigned_to %}
+                                <span class="flex items-center gap-1">
+                                    <i data-lucide="user" class="w-3 h-3"></i>
+                                    {{ task.assigned_to.get_full_name }}
+                                </span>
+                                {% endif %}
+                                {% if task.due_date %}
+                                <span class="flex items-center gap-1">
+                                    <i data-lucide="calendar" class="w-3 h-3"></i>
+                                    {% if task.due_date < today and task.status != 'completed' %}
+                                    <span class="text-red-600 font-semibold">{{ task.due_date|date:"M d, Y" }}</span>
+                                    {% else %}
+                                    {{ task.due_date|date:"M d, Y" }}
+                                    {% endif %}
+                                </span>
+                                {% endif %}
+                                <span class="task-status-{{ task.status }} px-2 py-0.5 rounded-full text-[10px] font-bold uppercase">
+                                    {{ task.get_status_display }}
+                                </span>
+                            </div>
+                        </div>
+                        {% if can_edit %}
+                        <div class="flex items-center gap-1 ml-4">
+                            <a href="{% url 'projects:task_edit' project_pk=project.pk task_pk=task.pk %}" 
+                               class="p-2 text-blue hover:bg-blue/10 rounded-lg transition" title="{% trans 'Edit' %}">
+                                <i data-lucide="pencil" class="w-4 h-4"></i>
+                            </a>
+                            <a href="{% url 'projects:task_delete' project_pk=project.pk task_pk=task.pk %}" 
+                               class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition" title="{% trans 'Delete' %}">
+                                <i data-lucide="trash-2" class="w-4 h-4"></i>
+                            </a>
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {% else %}
+            <div class="px-6 py-12 text-center">
+                <i data-lucide="check-square" class="w-12 h-12 mx-auto text-slate-300 mb-3"></i>
+                <p class="text-slate mb-3">{% trans "No tasks yet" %}</p>
+                {% if can_edit %}
+                <a href="{% url 'projects:task_create' project_pk=project.pk %}" class="bg-navy text-white px-4 py-2 rounded-xl text-sm font-bold inline-flex items-center gap-2 hover:bg-blue transition">
+                    <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Add First Task" %}
+                </a>
+                {% endif %}
+            </div>
+            {% endif %}
+        </div>
+
+        <!-- Outcome Section -->
+        {% if project.outcome_description %}
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
+            <div class="px-6 py-4 border-b">
+                <h2 class="text-sm font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="trophy" class="w-4 h-4"></i>
+                    {% trans "Outcomes" %}
+                </h2>
+            </div>
+            <div class="px-6 py-4">
+                <p class="text-sm text-slate">{{ project.outcome_description|linebreaksbr }}</p>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+
+    <!-- Sidebar -->
+    <div class="col-span-1">
+        <!-- Project Info -->
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden mb-6">
+            <div class="px-6 py-4 border-b">
+                <h2 class="text-sm font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="info" class="w-4 h-4"></i>
+                    {% trans "Project Info" %}
+                </h2>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Status" %}</p>
+                    <span class="status-{{ project.status }} px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">
+                        {{ project.get_status_display }}
+                    </span>
+                </div>
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Hospital" %}</p>
+                    <p class="text-sm text-navy font-medium">{{ project.hospital.name }}</p>
+                </div>
+                {% if project.department %}
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Department" %}</p>
+                    <p class="text-sm text-navy font-medium">{{ project.department.name }}</p>
+                </div>
+                {% endif %}
+                {% if project.project_lead %}
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Project Lead" %}</p>
+                    <p class="text-sm text-navy font-medium">{{ project.project_lead.get_full_name }}</p>
+                </div>
+                {% endif %}
+                {% if project.start_date %}
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Start Date" %}</p>
+                    <p class="text-sm text-navy font-medium">{{ project.start_date|date:"M d, Y" }}</p>
+                </div>
+                {% endif %}
+                {% if project.target_completion_date %}
+                <div>
+                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Target Date" %}</p>
+                    <p class="text-sm text-navy font-medium">{{ project.target_completion_date|date:"M d, Y" }}</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+
+        <!-- Team Members -->
+        {% if project.team_members.count > 0 %}
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden mb-6">
+            <div class="px-6 py-4 border-b">
+                <h2 class="text-sm font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="users" class="w-4 h-4"></i>
+                    {% trans "Team Members" %}
+                </h2>
+            </div>
+            <div class="px-6 py-4">
+                <ul class="space-y-2">
+                    {% for member in project.team_members.all %}
+                    <li class="flex items-center gap-2 text-sm text-slate">
+                        <i data-lucide="user" class="w-3 h-3"></i>
+                        {{ member.get_full_name }}
+                    </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+        {% endif %}
+
+        <!-- Related Actions -->
+        {% if related_actions.count > 0 %}
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
+            <div class="px-6 py-4 border-b">
+                <h2 class="text-sm font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="zap" class="w-4 h-4"></i>
+                    {% trans "Related Actions" %}
+                </h2>
+            </div>
+            <div class="px-6 py-4">
+                <ul class="space-y-2">
+                    {% for action in related_actions %}
+                    <li>
+                        <a href="{% url 'actions:action_detail' pk=action.pk %}" class="flex items-center gap-2 text-sm text-slate hover:text-navy transition">
+                            <i data-lucide="zap" class="w-3 h-3 text-yellow-500"></i>
+                            {{ action.title|truncatechars:30 }}
+                        </a>
+                    </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+        {% endif %}
+    </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/projects/project_form.html b/templates/projects/project_form.html
new file mode 100644
index 0000000..8f9c514
--- /dev/null
+++ b/templates/projects/project_form.html
@@ -0,0 +1,284 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% if is_create %}{% trans "Create QI Project" %}{% else %}{% trans "Edit QI Project" %}{% endif %} - PX360{% endblock %}
+
+{% block content %}
+<!-- Back Button -->
+<div class="mb-6">
+    <a href="{% url 'projects:project_list' %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
+        <i data-lucide="arrow-left" class="w-4 h-4"></i>
+        <span class="text-sm font-medium">{% trans "Back to Projects" %}</span>
+    </a>
+</div>
+
+<!-- Header -->
+<header class="mb-6">
+    <div class="flex justify-between items-start">
+        <div>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="kanban" class="w-6 h-6"></i>
+                {% if is_create %}{% trans "Create QI Project" %}{% else %}{% trans "Edit QI Project" %}{% endif %}
+            </h1>
+            <p class="text-sm text-slate mt-1">
+                {% if is_create %}
+                    {% trans "Start a new quality improvement initiative" %}
+                {% else %}
+                    {% trans "Update project details and settings" %}
+                {% endif %}
+            </p>
+        </div>
+    </div>
+</header>
+
+<!-- Form Card -->
+<div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
+    <div class="px-6 py-4 border-b">
+        <h2 class="text-sm font-bold text-navy">{% trans "Project Information" %}</h2>
+    </div>
+    <div class="p-6">
+        {% if template %}
+        <!-- Template Preview -->
+        <div class="mb-6 bg-blue-50 border border-blue-100 rounded-xl p-4">
+            <div class="flex items-start gap-3">
+                <i data-lucide="copy" class="w-5 h-5 text-blue mt-0.5"></i>
+                <div class="flex-1">
+                    <h3 class="text-sm font-bold text-navy mb-1">
+                        {% trans "Creating from Template:" %} {{ template.name }}
+                    </h3>
+                    {% if template.tasks.exists %}
+                    <p class="text-xs text-slate mb-2">
+                        {% trans "This template includes" %} {{ template.tasks.count }} {% trans "task(s) that will be copied to your new project." %}
+                    </p>
+                    <ul class="text-xs text-slate space-y-1">
+                        {% for task in template.tasks.all|slice:":5" %}
+                        <li class="flex items-center gap-2">
+                            <i data-lucide="check" class="w-3 h-3 text-green-600"></i>
+                            {{ task.title }}
+                        </li>
+                        {% endfor %}
+                        {% if template.tasks.count > 5 %}
+                        <li class="text-slate-500 italic">
+                            {% trans "and" %} {{ template.tasks.count|add:"-5" }} {% trans "more..." %}
+                        </li>
+                        {% endif %}
+                    </ul>
+                    {% else %}
+                    <p class="text-xs text-slate">{% trans "No predefined tasks in this template." %}</p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+
+        <form method="post" novalidate>
+            {% csrf_token %}
+            
+            {% if template %}
+            <input type="hidden" name="template_id" value="{{ template.pk }}">
+            {% endif %}
+            
+            <div class="grid grid-cols-2 gap-6">
+                <!-- Project Name -->
+                <div>
+                    <label for="{{ form.name.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                        {% trans "Project Name" %} <span class="text-red-500">*</span>
+                    </label>
+                    {{ form.name }}
+                    {% if form.name.errors %}
+                    <p class="text-red-500 text-xs mt-1">{{ form.name.errors.0 }}</p>
+                    {% endif %}
+                </div>
+                
+                <!-- Project Name (Arabic) -->
+                <div>
+                    <label for="{{ form.name_ar.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                        {% trans "Project Name (Arabic)" %}
+                    </label>
+                    {{ form.name_ar }}
+                    {% if form.name_ar.errors %}
+                    <p class="text-red-500 text-xs mt-1">{{ form.name_ar.errors.0 }}</p>
+                    {% endif %}
+                </div>
+            </div>
+
+            <!-- Description -->
+            <div class="mt-6">
+                <label for="{{ form.description.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                    {% trans "Description" %} <span class="text-red-500">*</span>
+                </label>
+                {{ form.description }}
+                {% if form.description.errors %}
+                <p class="text-red-500 text-xs mt-1">{{ form.description.errors.0 }}</p>
+                {% endif %}
+                <p class="text-xs text-slate mt-1">{% trans "Describe the project objectives and scope" %}</p>
+            </div>
+
+            <div class="grid grid-cols-2 gap-6 mt-6">
+                <!-- Hospital -->
+                <div>
+                    <label for="{{ form.hospital.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                        {% trans "Hospital" %} <span class="text-red-500">*</span>
+                    </label>
+                    {{ form.hospital }}
+                    {% if form.hospital.errors %}
+                    <p class="text-red-500 text-xs mt-1">{{ form.hospital.errors.0 }}</p>
+                    {% endif %}
+                </div>
+                
+                <!-- Department -->
+                <div>
+                    <label for="{{ form.department.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                        {% trans "Department" %}
+                    </label>
+                    {{ form.department }}
+                    {% if form.department.errors %}
+                    <p class="text-red-500 text-xs mt-1">{{ form.department.errors.0 }}</p>
+                    {% endif %}
+                </div>
+            </div>
+
+            <div class="grid grid-cols-2 gap-6 mt-6">
+                <!-- Project Lead -->
+                <div>
+                    <label for="{{ form.project_lead.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                        {% trans "Project Lead" %}
+                    </label>
+                    {{ form.project_lead }}
+                    {% if form.project_lead.errors %}
+                    <p class="text-red-500 text-xs mt-1">{{ form.project_lead.errors.0 }}</p>
+                    {% endif %}
+                </div>
+                
+                <!-- Status -->
+                <div>
+                    <label for="{{ form.status.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                        {% trans "Status" %} <span class="text-red-500">*</span>
+                    </label>
+                    {{ form.status }}
+                    {% if form.status.errors %}
+                    <p class="text-red-500 text-xs mt-1">{{ form.status.errors.0 }}</p>
+                    {% endif %}
+                </div>
+            </div>
+
+            <!-- Team Members -->
+            <div class="mt-6">
+                <label for="{{ form.team_members.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                    {% trans "Team Members" %}
+                </label>
+                {{ form.team_members }}
+                {% if form.team_members.errors %}
+                <p class="text-red-500 text-xs mt-1">{{ form.team_members.errors.0 }}</p>
+                {% endif %}
+                <p class="text-xs text-slate mt-1">{% trans "Hold Ctrl/Cmd to select multiple team members" %}</p>
+            </div>
+
+            <div class="grid grid-cols-2 gap-6 mt-6">
+                <!-- Start Date -->
+                <div>
+                    <label for="{{ form.start_date.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                        {% trans "Start Date" %}
+                    </label>
+                    {{ form.start_date }}
+                    {% if form.start_date.errors %}
+                    <p class="text-red-500 text-xs mt-1">{{ form.start_date.errors.0 }}</p>
+                    {% endif %}
+                </div>
+                
+                <!-- Target Completion Date -->
+                <div>
+                    <label for="{{ form.target_completion_date.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                        {% trans "Target Completion Date" %}
+                    </label>
+                    {{ form.target_completion_date }}
+                    {% if form.target_completion_date.errors %}
+                    <p class="text-red-500 text-xs mt-1">{{ form.target_completion_date.errors.0 }}</p>
+                    {% endif %}
+                </div>
+            </div>
+
+            <!-- Outcome Description (only show for existing projects) -->
+            {% if not is_create %}
+            <div class="mt-6">
+                <label for="{{ form.outcome_description.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                    {% trans "Outcome Description" %}
+                </label>
+                {{ form.outcome_description }}
+                {% if form.outcome_description.errors %}
+                <p class="text-red-500 text-xs mt-1">{{ form.outcome_description.errors.0 }}</p>
+                {% endif %}
+                <p class="text-xs text-slate mt-1">{% trans "Document project outcomes and results" %}</p>
+            </div>
+            {% endif %}
+
+            <!-- Submit Buttons -->
+            <div class="flex items-center gap-3 mt-8 pt-6 border-t">
+                <button type="submit" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
+                    <i data-lucide="save" class="w-4 h-4"></i>
+                    {% if is_create %}{% trans "Create Project" %}{% else %}{% trans "Save Changes" %}{% endif %}
+                </button>
+                <a href="{% url 'projects:project_list' %}" class="bg-slate-100 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-200 transition">
+                    {% trans "Cancel" %}
+                </a>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+// Dynamic department and staff filtering based on hospital selection
+document.addEventListener('DOMContentLoaded', function() {
+    const hospitalSelect = document.getElementById('{{ form.hospital.id_for_label }}');
+    const departmentSelect = document.getElementById('{{ form.department.id_for_label }}');
+    const projectLeadSelect = document.getElementById('{{ form.project_lead.id_for_label }}');
+    const teamMembersSelect = document.getElementById('{{ form.team_members.id_for_label }}');
+    
+    if (hospitalSelect) {
+        hospitalSelect.addEventListener('change', function() {
+            const hospitalId = this.value;
+            if (!hospitalId) return;
+            
+            // Fetch departments and staff for selected hospital
+            fetch(`/api/organizations/hospitals/${hospitalId}/departments/`)
+                .then(response => response.json())
+                .then(data => {
+                    // Update departments
+                    departmentSelect.innerHTML = '<option value="">---------</option>';
+                    data.departments.forEach(dept => {
+                        const option = document.createElement('option');
+                        option.value = dept.id;
+                        option.textContent = dept.name;
+                        departmentSelect.appendChild(option);
+                    });
+                });
+            
+            // Fetch staff
+            fetch(`/api/organizations/hospitals/${hospitalId}/staff/`)
+                .then(response => response.json())
+                .then(data => {
+                    // Update project lead
+                    projectLeadSelect.innerHTML = '<option value="">---------</option>';
+                    data.staff.forEach(staff => {
+                        const option = document.createElement('option');
+                        option.value = staff.id;
+                        option.textContent = `${staff.first_name} ${staff.last_name}`;
+                        projectLeadSelect.appendChild(option);
+                    });
+                    
+                    // Update team members
+                    teamMembersSelect.innerHTML = '';
+                    data.staff.forEach(staff => {
+                        const option = document.createElement('option');
+                        option.value = staff.id;
+                        option.textContent = `${staff.first_name} ${staff.last_name}`;
+                        teamMembersSelect.appendChild(option);
+                    });
+                });
+        });
+    }
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/projects/project_list.html b/templates/projects/project_list.html
index dac3fae..6de0c5b 100644
--- a/templates/projects/project_list.html
+++ b/templates/projects/project_list.html
@@ -1,94 +1,314 @@
-{% extends "layouts/base.html" %}
-{% load i18n %}
+{% extends 'layouts/base.html' %}
+{% load i18n hospital_filters %}
 
-{% block title %}QI Projects - PX360{% endblock %}
+{% block title %}{% trans "QI Projects" %} - PX360{% endblock %}
+
+{% block extra_css %}
+<style>
+    .status-active { background-color: #e0f2fe; color: #075985; }
+    .status-pending { background-color: #fef9c3; color: #854d0e; }
+    .status-completed { background-color: #dcfce7; color: #166534; }
+    .status-cancelled { background-color: #fee2e2; color: #991b1b; }
+    .filter-btn.active { background-color: #005696; color: white; }
+    .filter-btn:not(.active) { background-color: transparent; border: 1px solid #e2e8f0; color: #64748b; }
+    .filter-btn:not(.active):hover { background-color: #f8fafc; }
+</style>
+{% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-    <h2 class="mb-4"><i class="bi bi-kanban me-2"></i>{% trans "Quality Improvement Projects" %}</h2>
-    
-    <div class="row mb-4">
-        <div class="col-md-4">
-            <div class="card border-left-primary">
-                <div class="card-body">
-                    <h6 class="text-muted mb-1">{% trans "Total Projects" %}</h6>
-                    <h3 class="mb-0">{{ stats.total }}</h3>
-                </div>
-            </div>
+<!-- Header -->
+<header class="mb-6">
+    <div class="flex justify-between items-start">
+        <div>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="folder-kanban" class="w-7 h-7 text-cyan-500"></i>
+                {% trans "Quality Improvement Projects" %}
+            </h1>
+            <p class="text-sm text-slate mt-1">{% trans "Track and manage quality improvement initiatives" %}</p>
         </div>
-        <div class="col-md-4">
-            <div class="card border-left-info">
-                <div class="card-body">
-                    <h6 class="text-muted mb-1">{% trans "Active" %}</h6>
-                    <h3 class="mb-0">{{ stats.active }}</h3>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-4">
-            <div class="card border-left-success">
-                <div class="card-body">
-                    <h6 class="text-muted mb-1">{% trans "Completed" %}</h6>
-                    <h3 class="mb-0">{{ stats.completed }}</h3>
-                </div>
+        <div class="flex items-center gap-3">
+            <div class="relative group">
+                <i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate group-focus-within:text-navy"></i>
+                <input type="text" id="searchInput" placeholder="{% trans 'Search projects...' %}"
+                       class="pl-10 pr-4 py-2.5 bg-slate-100 border-transparent border focus:border-navy/30 focus:bg-white rounded-xl text-sm outline-none w-64 transition-all"
+                       value="{{ filters.search|default:'' }}">
             </div>
+            {% if user.is_px_admin or user.is_hospital_admin or user.is_department_manager %}
+            <a href="{% url 'projects:template_list' %}" class="bg-white text-navy border-2 border-navy/30 px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-navy hover:text-white flex items-center gap-2 transition">
+                <i data-lucide="copy" class="w-4 h-4"></i> {% trans "Templates" %}
+            </a>
+            <a href="{% url 'projects:project_create' %}" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
+                <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Create Project" %}
+            </a>
+            {% endif %}
         </div>
     </div>
-    
-    <div class="card">
-        <div class="card-body p-0">
-            <table class="table table-hover mb-0">
-                <thead class="table-light">
-                    <tr>
-                        <th>{% trans "Name" %}</th>
-                        <th>{% trans "Hospital" %}</th>
-                        <th>{% trans "Project Lead" %}</th>
-                        <th>{% trans "Status" %}</th>
-                        <th>{% trans "Start Date" %}</th>
-                        <th>{% trans "Target Date" %}</th>
-                        <th>{% trans "Actions" %}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for project in projects %}
-                    <tr onclick="window.location='{% url 'projects:project_detail' project.id %}'" style="cursor: pointer;">
-                        <td><strong>{{ project.name }}</strong></td>
-                        <td><small>{{ project.hospital.name }}</small></td>
-                        <td>
-                            {% if project.project_lead %}
-                            <small>{{ project.project_lead.get_full_name }}</small>
-                            {% else %}
-                            <span class="text-muted">-</span>
-                            {% endif %}
-                        </td>
-                        <td><span class="badge bg-{{ project.status }}">{{ project.get_status_display }}</span></td>
-                        <td>
-                            {% if project.start_date %}
-                            <small>{{ project.start_date|date:"M d, Y" }}</small>
-                            {% else %}
-                            <span class="text-muted">-</span>
-                            {% endif %}
-                        </td>
-                        <td>
-                            {% if project.target_completion_date %}
-                            <small>{{ project.target_completion_date|date:"M d, Y" }}</small>
-                            {% else %}
-                            <span class="text-muted">-</span>
-                            {% endif %}
-                        </td>
-                        <td onclick="event.stopPropagation();">
-                            <a href="{% url 'projects:project_detail' project.id %}" class="btn btn-sm btn-outline-primary">
-                                <i class="bi bi-eye"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    {% empty %}
-                    <tr>
-                        <td colspan="7" class="text-center py-5">No projects found</td>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
+</header>
+
+<!-- Statistics Cards -->
+<div class="grid grid-cols-4 gap-6 mb-6">
+    <div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
+        <div class="p-3 bg-blue/10 rounded-xl">
+            <i data-lucide="layers" class="text-blue w-5 h-5"></i>
+        </div>
+        <div>
+            <p class="text-[10px] font-bold text-slate uppercase tracking-wider">{% trans "Total Projects" %}</p>
+            <p class="text-xl font-black text-navy leading-tight">{{ stats.total }}</p>
+        </div>
+    </div>
+    <div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
+        <div class="p-3 bg-cyan-50 rounded-xl">
+            <i data-lucide="play-circle" class="text-cyan-600 w-5 h-5"></i>
+        </div>
+        <div>
+            <p class="text-[10px] font-bold text-slate uppercase tracking-wider">{% trans "Active" %}</p>
+            <p class="text-xl font-black text-navy leading-tight">{{ stats.active }}</p>
+        </div>
+    </div>
+    <div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
+        <div class="p-3 bg-green-50 rounded-xl">
+            <i data-lucide="check-circle" class="text-green-600 w-5 h-5"></i>
+        </div>
+        <div>
+            <p class="text-[10px] font-bold text-slate uppercase tracking-wider">{% trans "Completed" %}</p>
+            <p class="text-xl font-black text-navy leading-tight">{{ stats.completed }}</p>
+        </div>
+    </div>
+    <div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
+        <div class="p-3 bg-yellow-50 rounded-xl">
+            <i data-lucide="clock" class="text-yellow-600 w-5 h-5"></i>
+        </div>
+        <div>
+            <p class="text-[10px] font-bold text-slate uppercase tracking-wider">{% trans "Pending" %}</p>
+            <p class="text-xl font-black text-navy leading-tight">{{ stats.pending }}</p>
         </div>
     </div>
 </div>
-{% endblock %}
+
+<!-- Filter Tabs -->
+<div class="bg-white rounded-t-2xl shadow-sm border-2 border-slate-200">
+    <div class="px-6 py-4 border-b-2 border-slate-200 flex items-center justify-between bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="filter" class="w-5 h-5 text-navy"></i>
+            {% trans "Filters" %}
+        </h3>
+    <div class="flex items-center gap-3">
+        <a href="?" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if not filters.status %}active{% endif %}">
+            {% trans "All Projects" %}
+        </a>
+        <a href="?status=active" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if filters.status == 'active' %}active{% endif %}">
+            {% trans "Active" %}
+        </a>
+        <a href="?status=pending" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if filters.status == 'pending' %}active{% endif %}">
+            {% trans "Pending" %}
+        </a>
+        <a href="?status=completed" class="filter-btn px-4 py-1.5 rounded-full text-xs font-semibold transition {% if filters.status == 'completed' %}active{% endif %}">
+            {% trans "Completed" %}
+        </a>
+        {% if user.is_px_admin %}
+        <div class="h-4 w-[1px] bg-slate-200 mx-2"></div>
+        <div class="flex items-center gap-2">
+            <label class="text-xs font-bold text-slate uppercase">{% trans "Hospital" %}</label>
+            <select id="hospitalFilter" class="px-3 py-1.5 bg-white border rounded-lg text-xs">
+                <option value="">{% trans "All Hospitals" %}</option>
+                {% for hospital in hospitals %}
+                <option value="{{ hospital.id }}" {% if filters.hospital == hospital.id|stringformat:'s' %}selected{% endif %}>
+                    {{ hospital.name }}
+                </option>
+                {% endfor %}
+            </select>
+        </div>
+        {% endif %}
+    </div>
+    </div>
+    <p class="px-6 py-2 text-[10px] font-bold text-slate uppercase bg-slate-50 border-b-2 border-slate-200">
+        {% trans "Showing:" %} <span class="text-navy">{{ page_obj.start_index|default:0 }}-{{ page_obj.end_index|default:0 }} {% trans "of" %} {{ page_obj.paginator.count|default:0 }}</span>
+    </p>
+
+<!-- Projects Table -->
+<div class="bg-white rounded-b-2xl shadow-sm border-2 border-slate-200 overflow-hidden border-t-0">
+    <div class="px-6 py-4 border-b-2 border-slate-200 bg-gradient-to-r from-slate-50 to-slate-100">
+        <h3 class="font-bold text-navy flex items-center gap-2">
+            <i data-lucide="folder-kanban" class="w-5 h-5 text-cyan-500"></i>
+            {% trans "Projects" %}
+        </h3>
+    </div>
+    <table class="w-full text-left border-collapse">
+        <thead class="bg-slate-50 border-b uppercase text-[10px] font-bold text-slate tracking-wider">
+            <tr>
+                <th class="px-6 py-4">{% trans "Project" %}</th>
+                <th class="px-6 py-4">{% trans "Hospital" %}</th>
+                <th class="px-6 py-4">{% trans "Project Lead" %}</th>
+                <th class="px-6 py-4">{% trans "Status" %}</th>
+                <th class="px-6 py-4">{% trans "Tasks" %}</th>
+                <th class="px-6 py-4">{% trans "Timeline" %}</th>
+                <th class="px-6 py-4 text-right">{% trans "Actions" %}</th>
+            </tr>
+        </thead>
+        <tbody class="text-sm divide-y divide-slate-100">
+            {% for project in projects %}
+            <tr class="hover:bg-light/30 transition-colors cursor-pointer group" onclick="window.location.href='{% url 'projects:project_detail' pk=project.pk %}'">
+                <td class="px-6 py-4">
+                    <a href="{% url 'projects:project_detail' pk=project.pk %}" class="font-bold text-navy hover:text-blue" onclick="event.stopPropagation()">
+                        {{ project.name }}
+                    </a>
+                    {% if project.description %}
+                    <p class="text-xs text-slate mt-0.5 truncate max-w-xs">{{ project.description|truncatechars:60 }}</p>
+                    {% endif %}
+                </td>
+                <td class="px-6 py-4">
+                    <span class="bg-slate-100 px-2 py-0.5 rounded text-[10px] font-bold text-slate-600">{{ project.hospital.name }}</span>
+                </td>
+                <td class="px-6 py-4 text-slate-600">
+                    {% if project.project_lead %}
+                    {{ project.project_lead.get_full_name }}
+                    {% else %}
+                    <span class="text-muted">-</span>
+                    {% endif %}
+                </td>
+                <td class="px-6 py-4">
+                    {% if project.status == 'active' %}
+                    <span class="status-active px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">{{ project.get_status_display }}</span>
+                    {% elif project.status == 'pending' %}
+                    <span class="status-pending px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">{{ project.get_status_display }}</span>
+                    {% elif project.status == 'completed' %}
+                    <span class="status-completed px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">{{ project.get_status_display }}</span>
+                    {% elif project.status == 'cancelled' %}
+                    <span class="status-cancelled px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">{{ project.get_status_display }}</span>
+                    {% else %}
+                    <span class="bg-slate-100 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase text-slate-600">{{ project.get_status_display }}</span>
+                    {% endif %}
+                </td>
+                <td class="px-6 py-4">
+                    {% with total=project.tasks.count completed=project.tasks.completed.count %}
+                    <div class="flex items-center gap-2">
+                        <div class="flex-1 h-1.5 bg-slate-200 rounded-full overflow-hidden max-w-[80px]">
+                            {% if total > 0 %}
+                            <div class="h-full bg-green-500 rounded-full" style="width: {{ completed|div:total|mul:100|floatformat:0 }}%"></div>
+                            {% endif %}
+                        </div>
+                        <span class="text-xs text-slate">
+                            <span class="text-green-600 font-semibold">{{ completed }}</span>/{{ total }}
+                            {% if total > 0 %}
+                            <span class="text-muted">({{ completed|div:total|mul:100|floatformat:0 }}%)</span>
+                            {% endif %}
+                        </span>
+                    </div>
+                    {% endwith %}
+                </td>
+                <td class="px-6 py-4 text-slate-600">
+                    {% if project.start_date or project.target_completion_date %}
+                    <small>
+                        {% if project.start_date %}{{ project.start_date|date:"M d" }}{% else %}-{% endif %}
+                        →
+                        {% if project.target_completion_date %}{{ project.target_completion_date|date:"M d, Y" }}{% else %}-{% endif %}
+                    </small>
+                    {% else %}
+                    <span class="text-muted">-</span>
+                    {% endif %}
+                </td>
+                <td class="px-6 py-4 text-right">
+                    <div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <a href="{% url 'projects:project_detail' pk=project.pk %}" class="p-1.5 text-navy hover:bg-white rounded border border-transparent hover:border-slate-200" title="{% trans 'View' %}" onclick="event.stopPropagation()">
+                            <i data-lucide="eye" class="w-4 h-4"></i>
+                        </a>
+                        {% if user.is_px_admin or user.is_hospital_admin or user.is_department_manager %}
+                        <a href="{% url 'projects:project_edit' pk=project.pk %}" class="p-1.5 text-blue hover:bg-white rounded border border-transparent hover:border-slate-200" title="{% trans 'Edit' %}" onclick="event.stopPropagation()">
+                            <i data-lucide="pencil" class="w-4 h-4"></i>
+                        </a>
+                        {% endif %}
+                    </div>
+                </td>
+            </tr>
+            {% empty %}
+            <tr>
+                <td colspan="7" class="px-6 py-12 text-center">
+                    <i data-lucide="kanban" class="w-12 h-12 mx-auto text-slate-300 mb-3"></i>
+                    <p class="text-slate mb-3">{% trans "No projects found" %}</p>
+                    {% if user.is_px_admin or user.is_hospital_admin or user.is_department_manager %}
+                    <a href="{% url 'projects:project_create' %}" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue inline-flex items-center gap-2 transition">
+                        <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Create First Project" %}
+                    </a>
+                    {% endif %}
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    
+    <!-- Pagination -->
+    {% if page_obj.has_other_pages %}
+    <div class="bg-slate-50 px-8 py-4 flex items-center justify-between border-t">
+        <div class="flex items-center gap-4">
+            <span class="text-xs text-slate font-medium">
+                {% trans "Showing" %} <span class="font-bold text-navy">{{ page_obj.start_index }}-{{ page_obj.end_index }}</span> {% trans "of" %} <span class="font-bold text-navy">{{ page_obj.paginator.count }}</span> {% trans "entries" %}
+            </span>
+        </div>
+        <div class="flex gap-2">
+            {% if page_obj.has_previous %}
+            <a href="?page={{ page_obj.previous_page_number }}{% if filters.search %}&search={{ filters.search }}{% endif %}{% if filters.status %}&status={{ filters.status }}{% endif %}{% if filters.hospital %}&hospital={{ filters.hospital }}{% endif %}" 
+               class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 transition">
+                <i data-lucide="chevron-left" class="w-4 h-4 text-slate"></i>
+            </a>
+            {% else %}
+            <span class="w-8 h-8 flex items-center justify-center rounded-lg border bg-slate-100 text-slate-300 cursor-not-allowed">
+                <i data-lucide="chevron-left" class="w-4 h-4"></i>
+            </span>
+            {% endif %}
+            
+            {% for num in page_obj.paginator.page_range %}
+                {% if page_obj.number == num %}
+                <span class="w-8 h-8 flex items-center justify-center rounded-lg bg-navy text-white text-xs font-bold">{{ num }}</span>
+                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
+                <a href="?page={{ num }}{% if filters.search %}&search={{ filters.search }}{% endif %}{% if filters.status %}&status={{ filters.status }}{% endif %}{% if filters.hospital %}&hospital={{ filters.hospital }}{% endif %}" 
+                   class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 text-xs font-bold text-slate transition">
+                    {{ num }}
+                </a>
+                {% elif num == 1 or num == page_obj.paginator.num_pages %}
+                <a href="?page={{ num }}{% if filters.search %}&search={{ filters.search }}{% endif %}{% if filters.status %}&status={{ filters.status }}{% endif %}{% if filters.hospital %}&hospital={{ filters.hospital }}{% endif %}" 
+                   class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 text-xs font-bold text-slate transition">
+                    {{ num }}
+                </a>
+                {% elif num == page_obj.number|add:'-3' or num == page_obj.number|add:'3' %}
+                <span class="w-8 h-8 flex items-center justify-center text-xs text-slate">...</span>
+                {% endif %}
+            {% endfor %}
+            
+            {% if page_obj.has_next %}
+            <a href="?page={{ page_obj.next_page_number }}{% if filters.search %}&search={{ filters.search }}{% endif %}{% if filters.status %}&status={{ filters.status }}{% endif %}{% if filters.hospital %}&hospital={{ filters.hospital }}{% endif %}" 
+               class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 transition">
+                <i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i>
+            </a>
+            {% else %}
+            <span class="w-8 h-8 flex items-center justify-center rounded-lg border bg-slate-100 text-slate-300 cursor-not-allowed">
+                <i data-lucide="chevron-right" class="w-4 h-4"></i>
+            </span>
+            {% endif %}
+        </div>
+    </div>
+    {% endif %}
+</div>
+
+<script>
+// Search functionality
+document.getElementById('searchInput')?.addEventListener('keypress', function(e) {
+    if (e.key === 'Enter') {
+        const value = this.value;
+        let url = '?';
+        if (value) url += 'search=' + encodeURIComponent(value);
+        {% if filters.status %}url += '&status={{ filters.status }}';{% endif %}
+        {% if filters.hospital %}url += '&hospital={{ filters.hospital }}';{% endif %}
+        window.location.href = url;
+    }
+});
+
+// Hospital filter
+document.getElementById('hospitalFilter')?.addEventListener('change', function() {
+    let url = '?';
+    if (this.value) url += 'hospital=' + this.value;
+    {% if filters.search %}url += '&search={{ filters.search }}';{% endif %}
+    {% if filters.status %}url += '&status={{ filters.status }}';{% endif %}
+    window.location.href = url;
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/projects/project_save_as_template.html b/templates/projects/project_save_as_template.html
new file mode 100644
index 0000000..ce84c8e
--- /dev/null
+++ b/templates/projects/project_save_as_template.html
@@ -0,0 +1,153 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Save as Template" %} - PX360{% endblock %}
+
+{% block content %}
+<!-- Back Button -->
+<div class="mb-6">
+    <a href="{% url 'projects:project_detail' pk=project.pk %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
+        <i data-lucide="arrow-left" class="w-4 h-4"></i>
+        <span class="text-sm font-medium">{% trans "Back to Project" %}</span>
+    </a>
+</div>
+
+<!-- Header -->
+<header class="mb-6">
+    <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+        <i data-lucide="copy" class="w-6 h-6 text-purple-600"></i>
+        {% trans "Save Project as Template" %}
+    </h1>
+    <p class="text-sm text-slate mt-1">
+        {% trans "Create a reusable template from" %} <strong>{{ project.name }}</strong>
+    </p>
+</header>
+
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <!-- Main Form -->
+    <div class="lg:col-span-2">
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
+            <div class="px-6 py-4 border-b bg-slate-50">
+                <h2 class="text-sm font-bold text-navy">{% trans "Template Information" %}</h2>
+            </div>
+            <div class="p-6">
+                <form method="post" novalidate>
+                    {% csrf_token %}
+                    
+                    <!-- Template Name -->
+                    <div class="mb-6">
+                        <label for="template_name" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                            {% trans "Template Name" %} <span class="text-red-500">*</span>
+                        </label>
+                        <input type="text" 
+                               name="template_name" 
+                               id="template_name"
+                               class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm"
+                               value="{{ suggested_name }}"
+                               placeholder="{% trans 'Enter template name' %}">
+                        <p class="text-xs text-slate mt-1">{% trans "Give your template a descriptive name" %}</p>
+                    </div>
+
+                    <!-- Template Description -->
+                    <div class="mb-6">
+                        <label for="template_description" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                            {% trans "Description" %}
+                        </label>
+                        <textarea name="template_description" 
+                                  id="template_description"
+                                  rows="4"
+                                  class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm resize-none"
+                                  placeholder="{% trans 'Describe when and how this template should be used...' %}">{{ project.description }}</textarea>
+                    </div>
+
+                    <!-- Global Template Option (PX Admin only) -->
+                    {% if user.is_px_admin %}
+                    <div class="mb-6">
+                        <label class="flex items-center gap-3 cursor-pointer">
+                            <input type="checkbox" 
+                                   name="make_global" 
+                                   id="make_global"
+                                   class="w-5 h-5 rounded border-slate-300 text-navy focus:ring-navy">
+                            <div>
+                                <span class="text-sm font-medium text-navy">{% trans "Make this a global template" %}</span>
+                                <p class="text-xs text-slate">{% trans "Available to all hospitals in the system" %}</p>
+                            </div>
+                        </label>
+                    </div>
+                    {% endif %}
+
+                    <!-- Submit Buttons -->
+                    <div class="flex items-center gap-3 pt-6 border-t">
+                        <button type="submit" class="bg-purple-600 text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-purple/20 hover:bg-purple-700 flex items-center gap-2 transition">
+                            <i data-lucide="copy" class="w-4 h-4"></i>
+                            {% trans "Save as Template" %}
+                        </button>
+                        <a href="{% url 'projects:project_detail' pk=project.pk %}" class="bg-slate-100 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-200 transition">
+                            {% trans "Cancel" %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Preview Sidebar -->
+    <div class="lg:col-span-1">
+        <!-- Project Info -->
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden mb-6">
+            <div class="px-6 py-4 border-b bg-slate-50">
+                <h2 class="text-sm font-bold text-navy">{% trans "Project Preview" %}</h2>
+            </div>
+            <div class="p-6">
+                <div class="mb-4">
+                    <span class="text-xs font-bold text-slate uppercase">{% trans "Original Project" %}</span>
+                    <p class="text-sm font-medium text-navy mt-1">{{ project.name }}</p>
+                </div>
+                
+                <div class="mb-4">
+                    <span class="text-xs font-bold text-slate uppercase">{% trans "Hospital" %}</span>
+                    <p class="text-sm text-navy mt-1">{{ project.hospital.name }}</p>
+                </div>
+
+                {% if project.department %}
+                <div class="mb-4">
+                    <span class="text-xs font-bold text-slate uppercase">{% trans "Department" %}</span>
+                    <p class="text-sm text-navy mt-1">{{ project.department.name }}</p>
+                </div>
+                {% endif %}
+
+                <div class="mb-0">
+                    <span class="text-xs font-bold text-slate uppercase">{% trans "Tasks to Include" %}</span>
+                    <p class="text-sm text-navy mt-1">{{ project.tasks.count }} {% trans "task(s)" %}</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Tasks Preview -->
+        {% if project.tasks.exists %}
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
+            <div class="px-6 py-4 border-b bg-slate-50">
+                <h2 class="text-sm font-bold text-navy">{% trans "Tasks that will be copied" %}</h2>
+            </div>
+            <div class="p-0">
+                <ul class="divide-y divide-slate-100">
+                    {% for task in project.tasks.all %}
+                    <li class="px-6 py-3">
+                        <div class="flex items-start gap-3">
+                            <i data-lucide="check-square" class="w-4 h-4 text-slate mt-0.5 flex-shrink-0"></i>
+                            <div>
+                                <p class="text-sm font-medium text-navy">{{ task.title }}</p>
+                                {% if task.description %}
+                                <p class="text-xs text-slate mt-1">{{ task.description|truncatechars:60 }}</p>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/projects/task_confirm_delete.html b/templates/projects/task_confirm_delete.html
new file mode 100644
index 0000000..533c4ce
--- /dev/null
+++ b/templates/projects/task_confirm_delete.html
@@ -0,0 +1,49 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Delete Task" %} - PX360{% endblock %}
+
+{% block content %}
+<!-- Back Button -->
+<div class="mb-6">
+    <a href="{% url 'projects:project_detail' pk=task.project.pk %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
+        <i data-lucide="arrow-left" class="w-4 h-4"></i>
+        <span class="text-sm font-medium">{% trans "Back to Project" %}</span>
+    </a>
+</div>
+
+<!-- Delete Confirmation Card -->
+<div class="bg-white rounded-2xl border shadow-sm overflow-hidden max-w-xl mx-auto">
+    <div class="px-6 py-4 border-b bg-red-50">
+        <h1 class="text-lg font-bold text-red-600 flex items-center gap-2">
+            <i data-lucide="alert-triangle" class="w-5 h-5"></i>
+            {% trans "Delete Task" %}
+        </h1>
+    </div>
+    <div class="p-6">
+        <div class="text-center mb-6">
+            <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <i data-lucide="trash-2" class="w-8 h-8 text-red-600"></i>
+            </div>
+            <p class="text-slate mb-2">
+                {% trans "Are you sure you want to delete the task" %}
+            </p>
+            <p class="text-lg font-bold text-navy">"{{ task.title }}"</p>
+            <p class="text-sm text-slate mt-2">
+                {% trans "from project" %} <strong>{{ task.project.name }}</strong>
+            </p>
+        </div>
+        
+        <form method="post" class="flex items-center justify-center gap-3">
+            {% csrf_token %}
+            <button type="submit" class="bg-red-600 text-white px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-red-700 flex items-center gap-2 transition">
+                <i data-lucide="trash-2" class="w-4 h-4"></i>
+                {% trans "Yes, Delete Task" %}
+            </button>
+            <a href="{% url 'projects:project_detail' pk=task.project.pk %}" class="bg-slate-100 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-200 transition">
+                {% trans "Cancel" %}
+            </a>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/projects/task_delete_confirm.html b/templates/projects/task_delete_confirm.html
new file mode 100644
index 0000000..08f76f5
--- /dev/null
+++ b/templates/projects/task_delete_confirm.html
@@ -0,0 +1,47 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Delete Task" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="container-fluid">
+    <div class="row justify-content-center">
+        <div class="col-md-6">
+            <div class="card border-danger">
+                <div class="card-header bg-danger text-white">
+                    <h5 class="mb-0">
+                        <i class="bi bi-exclamation-triangle me-2"></i>
+                        {% trans "Delete Task" %}
+                    </h5>
+                </div>
+                <div class="card-body">
+                    <p class="mb-3">
+                        {% trans "Are you sure you want to delete this task?" %}
+                    </p>
+                    
+                    <div class="alert alert-secondary">
+                        <strong>{% trans "Task:" %}</strong> {{ task.title }}<br>
+                        <strong>{% trans "Project:" %}</strong> {{ project.name }}
+                    </div>
+                    
+                    <p class="text-danger mb-4">
+                        <strong>{% trans "This action cannot be undone." %}</strong>
+                    </p>
+                    
+                    <form method="post">
+                        {% csrf_token %}
+                        <div class="d-flex gap-2">
+                            <button type="submit" class="btn btn-danger">
+                                <i class="bi bi-trash me-1"></i> {% trans "Delete Task" %}
+                            </button>
+                            <a href="{% url 'projects:project_detail' pk=project.pk %}" class="btn btn-outline-secondary">
+                                {% trans "Cancel" %}
+                            </a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/projects/task_form.html b/templates/projects/task_form.html
new file mode 100644
index 0000000..b378eb3
--- /dev/null
+++ b/templates/projects/task_form.html
@@ -0,0 +1,112 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% if is_create %}{% trans "Add Task" %}{% else %}{% trans "Edit Task" %}{% endif %} - PX360{% endblock %}
+
+{% block content %}
+<!-- Back Button -->
+<div class="mb-6">
+    <a href="{% url 'projects:project_detail' pk=project.pk %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
+        <i data-lucide="arrow-left" class="w-4 h-4"></i>
+        <span class="text-sm font-medium">{% trans "Back to Project" %}</span>
+    </a>
+</div>
+
+<!-- Header -->
+<header class="mb-6">
+    <div class="flex justify-between items-start">
+        <div>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="check-square" class="w-6 h-6"></i>
+                {% if is_create %}{% trans "Add Task" %}{% else %}{% trans "Edit Task" %}{% endif %}
+            </h1>
+            <p class="text-sm text-slate mt-1">
+                {% if is_create %}
+                    {% trans "Create a new task for" %} <strong>{{ project.name }}</strong>
+                {% else %}
+                    {% trans "Update task details" %}
+                {% endif %}
+            </p>
+        </div>
+    </div>
+</header>
+
+<!-- Form Card -->
+<div class="bg-white rounded-2xl border shadow-sm overflow-hidden max-w-2xl">
+    <div class="px-6 py-4 border-b">
+        <h2 class="text-sm font-bold text-navy">{% trans "Task Information" %}</h2>
+    </div>
+    <div class="p-6">
+        <form method="post" novalidate>
+            {% csrf_token %}
+            
+            <!-- Title -->
+            <div>
+                <label for="{{ form.title.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                    {% trans "Task Title" %} <span class="text-red-500">*</span>
+                </label>
+                {{ form.title }}
+                {% if form.title.errors %}
+                <p class="text-red-500 text-xs mt-1">{{ form.title.errors.0 }}</p>
+                {% endif %}
+            </div>
+
+            <!-- Description -->
+            <div class="mt-6">
+                <label for="{{ form.description.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                    {% trans "Description" %}
+                </label>
+                {{ form.description }}
+                {% if form.description.errors %}
+                <p class="text-red-500 text-xs mt-1">{{ form.description.errors.0 }}</p>
+                {% endif %}
+            </div>
+
+            <div class="grid grid-cols-2 gap-6 mt-6">
+                <!-- Status -->
+                <div>
+                    <label for="{{ form.status.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                        {% trans "Status" %} <span class="text-red-500">*</span>
+                    </label>
+                    {{ form.status }}
+                    {% if form.status.errors %}
+                    <p class="text-red-500 text-xs mt-1">{{ form.status.errors.0 }}</p>
+                    {% endif %}
+                </div>
+                
+                <!-- Assigned To -->
+                <div>
+                    <label for="{{ form.assigned_to.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                        {% trans "Assigned To" %}
+                    </label>
+                    {{ form.assigned_to }}
+                    {% if form.assigned_to.errors %}
+                    <p class="text-red-500 text-xs mt-1">{{ form.assigned_to.errors.0 }}</p>
+                    {% endif %}
+                </div>
+            </div>
+
+            <div class="mt-6">
+                <label for="{{ form.due_date.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                    {% trans "Due Date" %}
+                </label>
+                {{ form.due_date }}
+                {% if form.due_date.errors %}
+                <p class="text-red-500 text-xs mt-1">{{ form.due_date.errors.0 }}</p>
+                {% endif %}
+            </div>
+
+            <!-- Submit Buttons -->
+            <div class="flex items-center gap-3 mt-8 pt-6 border-t">
+                <button type="submit" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
+                    <i data-lucide="save" class="w-4 h-4"></i>
+                    {% if is_create %}{% trans "Add Task" %}{% else %}{% trans "Save Changes" %}{% endif %}
+                </button>
+                <a href="{% url 'projects:project_detail' pk=project.pk %}" class="bg-slate-100 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-200 transition">
+                    {% trans "Cancel" %}
+                </a>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/projects/template_confirm_delete.html b/templates/projects/template_confirm_delete.html
new file mode 100644
index 0000000..40027f3
--- /dev/null
+++ b/templates/projects/template_confirm_delete.html
@@ -0,0 +1,64 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Delete Template" %} - PX360{% endblock %}
+
+{% block content %}
+<!-- Back Button -->
+<div class="mb-6">
+    <a href="{% url 'projects:template_list' %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
+        <i data-lucide="arrow-left" class="w-4 h-4"></i>
+        <span class="text-sm font-medium">{% trans "Back to Templates" %}</span>
+    </a>
+</div>
+
+<!-- Delete Confirmation Card -->
+<div class="bg-white rounded-2xl border shadow-sm overflow-hidden max-w-xl mx-auto">
+    <div class="px-6 py-4 border-b bg-red-50">
+        <h1 class="text-lg font-bold text-red-600 flex items-center gap-2">
+            <i data-lucide="alert-triangle" class="w-5 h-5"></i>
+            {% trans "Delete Template" %}
+        </h1>
+    </div>
+    <div class="p-6">
+        <div class="text-center mb-6">
+            <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <i data-lucide="trash-2" class="w-8 h-8 text-red-600"></i>
+            </div>
+            <p class="text-slate mb-2">
+                {% trans "Are you sure you want to delete the template" %}
+            </p>
+            <p class="text-lg font-bold text-navy">"{{ template.name }}"</p>
+        </div>
+        
+        {% if template.task_templates.count > 0 %}
+        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 mb-6">
+            <div class="flex items-start gap-3">
+                <i data-lucide="alert-circle" class="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5"></i>
+                <div>
+                    <p class="text-sm font-semibold text-yellow-800">{% trans "Warning" %}</p>
+                    <p class="text-xs text-yellow-700 mt-1">
+                        {% blocktrans count counter=template.task_templates.count %}
+                            This template has {{ counter }} task template that will also be deleted.
+                        {% plural %}
+                            This template has {{ counter }} task templates that will also be deleted.
+                        {% endblocktrans %}
+                    </p>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        
+        <form method="post" class="flex items-center justify-center gap-3">
+            {% csrf_token %}
+            <button type="submit" class="bg-red-600 text-white px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-red-700 flex items-center gap-2 transition">
+                <i data-lucide="trash-2" class="w-4 h-4"></i>
+                {% trans "Yes, Delete Template" %}
+            </button>
+            <a href="{% url 'projects:template_list' %}" class="bg-slate-100 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-200 transition">
+                {% trans "Cancel" %}
+            </a>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/projects/template_delete_confirm.html b/templates/projects/template_delete_confirm.html
new file mode 100644
index 0000000..0dcdb13
--- /dev/null
+++ b/templates/projects/template_delete_confirm.html
@@ -0,0 +1,51 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Delete Template" %} - PX360{% endblock %}
+
+{% block content %}
+<div class="container-fluid">
+    <div class="row justify-content-center">
+        <div class="col-md-6">
+            <div class="card border-danger">
+                <div class="card-header bg-danger text-white">
+                    <h5 class="mb-0">
+                        <i class="bi bi-exclamation-triangle me-2"></i>
+                        {% trans "Delete Template" %}
+                    </h5>
+                </div>
+                <div class="card-body">
+                    <p class="mb-3">
+                        {% trans "Are you sure you want to delete this project template?" %}
+                    </p>
+                    
+                    <div class="alert alert-secondary">
+                        <strong>{% trans "Template:" %}</strong> {{ template.name }}<br>
+                        {% if template.hospital %}
+                        <strong>{% trans "Hospital:" %}</strong> {{ template.hospital.name }}
+                        {% else %}
+                        <strong>{% trans "Scope:" %}</strong> {% trans "Global (All Hospitals)" %}
+                        {% endif %}
+                    </div>
+                    
+                    <p class="text-danger mb-4">
+                        <strong>{% trans "This action cannot be undone." %}</strong>
+                    </p>
+                    
+                    <form method="post">
+                        {% csrf_token %}
+                        <div class="d-flex gap-2">
+                            <button type="submit" class="btn btn-danger">
+                                <i class="bi bi-trash me-1"></i> {% trans "Delete Template" %}
+                            </button>
+                            <a href="{% url 'projects:template_list' %}" class="btn btn-outline-secondary">
+                                {% trans "Cancel" %}
+                            </a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/projects/template_detail.html b/templates/projects/template_detail.html
new file mode 100644
index 0000000..8635487
--- /dev/null
+++ b/templates/projects/template_detail.html
@@ -0,0 +1,147 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{{ template.name }} - {% trans "Template" %} - PX360{% endblock %}
+
+{% block content %}
+<!-- Back Button -->
+<div class="mb-6">
+    <a href="{% url 'projects:template_list' %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
+        <i data-lucide="arrow-left" class="w-4 h-4"></i>
+        <span class="text-sm font-medium">{% trans "Back to Templates" %}</span>
+    </a>
+</div>
+
+<!-- Header -->
+<header class="mb-6">
+    <div class="flex justify-between items-start">
+        <div>
+            <div class="flex items-center gap-3 mb-2">
+                <h1 class="text-2xl font-bold text-navy">{{ template.name }}</h1>
+                {% if not template.hospital %}
+                <span class="bg-blue-100 text-blue-800 text-xs font-bold px-3 py-1 rounded-full">
+                    {% trans "Global" %}
+                </span>
+                {% endif %}
+            </div>
+            {% if template.description %}
+            <p class="text-sm text-slate max-w-2xl">{{ template.description|linebreaksbr }}</p>
+            {% endif %}
+        </div>
+        <div class="flex items-center gap-3">
+            <a href="{% url 'projects:project_create' %}?template={{ template.pk }}" 
+               class="bg-green-600 text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-green-700 flex items-center gap-2 transition">
+                <i data-lucide="plus-circle" class="w-4 h-4"></i> {% trans "Use Template" %}
+            </a>
+            <a href="{% url 'projects:template_edit' pk=template.pk %}" 
+               class="bg-white text-blue border-2 border-blue/30 px-4 py-2 rounded-xl text-sm font-bold hover:bg-blue hover:text-white flex items-center gap-2 transition">
+                <i data-lucide="pencil" class="w-4 h-4"></i> {% trans "Edit" %}
+            </a>
+            <a href="{% url 'projects:template_delete' pk=template.pk %}" 
+               class="bg-white text-red-600 border-2 border-red-200 px-4 py-2 rounded-xl text-sm font-bold hover:bg-red-600 hover:text-white flex items-center gap-2 transition">
+                <i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
+            </a>
+        </div>
+    </div>
+</header>
+
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <!-- Main Content - Tasks -->
+    <div class="lg:col-span-2">
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
+            <div class="px-6 py-4 border-b flex justify-between items-center">
+                <h2 class="text-sm font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="check-square" class="w-4 h-4"></i>
+                    {% trans "Template Tasks" %}
+                </h2>
+                <span class="bg-slate-100 text-slate text-xs font-bold px-2 py-1 rounded">
+                    {{ tasks.count }} {% trans "tasks" %}
+                </span>
+            </div>
+            <div class="p-0">
+                {% if tasks %}
+                <ul class="divide-y divide-slate-100">
+                    {% for task in tasks %}
+                    <li class="px-6 py-4">
+                        <div class="flex items-start gap-4">
+                            <div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0">
+                                <span class="text-sm font-bold text-slate">{{ forloop.counter }}</span>
+                            </div>
+                            <div class="flex-1">
+                                <h3 class="text-sm font-medium text-navy">{{ task.title }}</h3>
+                                {% if task.description %}
+                                <p class="text-sm text-slate mt-1">{{ task.description|linebreaksbr }}</p>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </li>
+                    {% endfor %}
+                </ul>
+                {% else %}
+                <div class="p-8 text-center">
+                    <i data-lucide="check-square" class="w-12 h-12 text-slate-200 mx-auto mb-3"></i>
+                    <p class="text-slate">{% trans "No tasks in this template" %}</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    <!-- Sidebar - Template Info -->
+    <div class="lg:col-span-1">
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden mb-6">
+            <div class="px-6 py-4 border-b bg-slate-50">
+                <h2 class="text-sm font-bold text-navy">{% trans "Template Info" %}</h2>
+            </div>
+            <div class="p-6">
+                <div class="mb-4">
+                    <span class="text-xs font-bold text-slate uppercase">{% trans "Scope" %}</span>
+                    <p class="text-sm font-medium text-navy mt-1">
+                        {% if template.hospital %}
+                            {{ template.hospital.name }}
+                        {% else %}
+                            {% trans "Global (All Hospitals)" %}
+                        {% endif %}
+                    </p>
+                </div>
+
+                {% if template.department %}
+                <div class="mb-4">
+                    <span class="text-xs font-bold text-slate uppercase">{% trans "Department" %}</span>
+                    <p class="text-sm font-medium text-navy mt-1">{{ template.department.name }}</p>
+                </div>
+                {% endif %}
+
+                {% if template.target_completion_date %}
+                <div class="mb-4">
+                    <span class="text-xs font-bold text-slate uppercase">{% trans "Suggested Timeline" %}</span>
+                    <p class="text-sm font-medium text-navy mt-1">
+                        {{ template.target_completion_date|date:"M d, Y" }}
+                    </p>
+                </div>
+                {% endif %}
+
+                <div class="mb-0">
+                    <span class="text-xs font-bold text-slate uppercase">{% trans "Created" %}</span>
+                    <p class="text-sm text-slate mt-1">{{ template.created_at|date:"M d, Y" }}</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Usage Card -->
+        <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl border border-blue-100 overflow-hidden">
+            <div class="p-6">
+                <h3 class="text-sm font-bold text-navy mb-2">{% trans "How to use this template" %}</h3>
+                <p class="text-xs text-slate mb-4">
+                    {% trans "Click the button below to create a new QI project based on this template. All tasks will be copied to the new project." %}
+                </p>
+                <a href="{% url 'projects:project_create' %}?template={{ template.pk }}" 
+                   class="block w-full bg-navy text-white text-center px-4 py-3 rounded-xl text-sm font-bold hover:bg-blue transition">
+                    <i data-lucide="copy" class="w-4 h-4 inline mr-1"></i>
+                    {% trans "Create Project from Template" %}
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/projects/template_form.html b/templates/projects/template_form.html
new file mode 100644
index 0000000..4fe38c7
--- /dev/null
+++ b/templates/projects/template_form.html
@@ -0,0 +1,211 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% if is_create %}{% trans "Create Template" %}{% else %}{% trans "Edit Template" %}{% endif %} - PX360{% endblock %}
+
+{% block content %}
+<!-- Back Button -->
+<div class="mb-6">
+    <a href="{% url 'projects:template_list' %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
+        <i data-lucide="arrow-left" class="w-4 h-4"></i>
+        <span class="text-sm font-medium">{% trans "Back to Templates" %}</span>
+    </a>
+</div>
+
+<!-- Header -->
+<header class="mb-6">
+    <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+        <i data-lucide="layout-template" class="w-6 h-6"></i>
+        {% if is_create %}{% trans "Create Project Template" %}{% else %}{% trans "Edit Project Template" %}{% endif %}
+    </h1>
+    <p class="text-sm text-slate mt-1">
+        {% if is_create %}
+            {% trans "Create a reusable template for quality improvement projects" %}
+        {% else %}
+            {% trans "Update template details and task templates" %}
+        {% endif %}
+    </p>
+</header>
+
+<div class="grid grid-cols-3 gap-6">
+    <!-- Main Form -->
+    <div class="col-span-2">
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
+            <div class="px-6 py-4 border-b">
+                <h2 class="text-sm font-bold text-navy">{% trans "Template Information" %}</h2>
+            </div>
+            <div class="p-6">
+                <form method="post" novalidate>
+                    {% csrf_token %}
+                    
+                    <div class="grid grid-cols-2 gap-6">
+                        <!-- Name -->
+                        <div>
+                            <label for="{{ form.name.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                                {% trans "Template Name" %} <span class="text-red-500">*</span>
+                            </label>
+                            {{ form.name }}
+                            {% if form.name.errors %}
+                            <p class="text-red-500 text-xs mt-1">{{ form.name.errors.0 }}</p>
+                            {% endif %}
+                        </div>
+                        
+                        <!-- Is Active -->
+                        <div>
+                            <label for="{{ form.is_active.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                                {% trans "Status" %}
+                            </label>
+                            {{ form.is_active }}
+                            {% if form.is_active.errors %}
+                            <p class="text-red-500 text-xs mt-1">{{ form.is_active.errors.0 }}</p>
+                            {% endif %}
+                        </div>
+                    </div>
+
+                    <!-- Description -->
+                    <div class="mt-6">
+                        <label for="{{ form.description.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
+                            {% trans "Description" %}
+                        </label>
+                        {{ form.description }}
+                        {% if form.description.errors %}
+                        <p class="text-red-500 text-xs mt-1">{{ form.description.errors.0 }}</p>
+                        {% endif %}
+                    </div>
+
+                    <!-- Task Templates Formset -->
+                    <div class="mt-8">
+                        <h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
+                            <i data-lucide="check-square" class="w-4 h-4"></i>
+                            {% trans "Task Templates" %}
+                        </h3>
+                        
+                        {{ task_template_formset.management_form }}
+                        
+                        <div id="task-templates-container" class="space-y-4">
+                            {% for task_form in task_template_formset %}
+                            <div class="task-template-item bg-slate-50 rounded-xl p-4 border">
+                                <div class="grid grid-cols-12 gap-4 items-start">
+                                    <div class="col-span-5">
+                                        <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">
+                                            {% trans "Task Title" %}
+                                        </label>
+                                        {{ task_form.title }}
+                                        {% if task_form.title.errors %}
+                                        <p class="text-red-500 text-[10px] mt-0.5">{{ task_form.title.errors.0 }}</p>
+                                        {% endif %}
+                                    </div>
+                                    <div class="col-span-5">
+                                        <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">
+                                            {% trans "Description" %}
+                                        </label>
+                                        {{ task_form.description }}
+                                    </div>
+                                    <div class="col-span-2 flex items-center gap-2 pt-5">
+                                        {{ task_form.DELETE }}
+                                        <button type="button" class="remove-task-btn p-2 text-red-600 hover:bg-red-50 rounded-lg transition" title="{% trans 'Remove' %}">
+                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                        
+                        <button type="button" id="add-task-btn" class="mt-4 bg-slate-100 text-slate px-4 py-2 rounded-xl text-xs font-bold hover:bg-slate-200 flex items-center gap-2 transition">
+                            <i data-lucide="plus" class="w-3 h-3"></i> {% trans "Add Task Template" %}
+                        </button>
+                    </div>
+
+                    <!-- Submit Buttons -->
+                    <div class="flex items-center gap-3 mt-8 pt-6 border-t">
+                        <button type="submit" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
+                            <i data-lucide="save" class="w-4 h-4"></i>
+                            {% if is_create %}{% trans "Create Template" %}{% else %}{% trans "Save Changes" %}{% endif %}
+                        </button>
+                        <a href="{% url 'projects:template_list' %}" class="bg-slate-100 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-200 transition">
+                            {% trans "Cancel" %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sidebar -->
+    <div class="col-span-1">
+        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
+            <div class="px-6 py-4 border-b">
+                <h2 class="text-sm font-bold text-navy">{% trans "Help" %}</h2>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+                <div>
+                    <h3 class="text-xs font-bold text-navy mb-1">{% trans "What are templates?" %}</h3>
+                    <p class="text-xs text-slate">{% trans "Templates let you define standard project structures that can be reused across your organization." %}</p>
+                </div>
+                <div>
+                    <h3 class="text-xs font-bold text-navy mb-1">{% trans "Task Templates" %}</h3>
+                    <p class="text-xs text-slate">{% trans "Add common tasks that should be created automatically when using this template." %}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+// Handle task template removal
+document.querySelectorAll('.remove-task-btn').forEach(btn => {
+    btn.addEventListener('click', function() {
+        const item = this.closest('.task-template-item');
+        const deleteCheckbox = item.querySelector('input[name$="-DELETE"]');
+        if (deleteCheckbox) {
+            deleteCheckbox.checked = true;
+            item.style.display = 'none';
+        }
+    });
+});
+
+// Add new task template (simplified - in production you'd clone an empty form)
+document.getElementById('add-task-btn')?.addEventListener('click', function() {
+    const container = document.getElementById('task-templates-container');
+    const totalForms = document.querySelector('#id_tasktemplate_set-TOTAL_FORMS');
+    const formCount = parseInt(totalForms.value);
+    
+    const newForm = document.createElement('div');
+    newForm.className = 'task-template-item bg-slate-50 rounded-xl p-4 border';
+    newForm.innerHTML = `
+        <div class="grid grid-cols-12 gap-4 items-start">
+            <div class="col-span-5">
+                <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">Task Title</label>
+                <input type="text" name="tasktemplate_set-${formCount}-title" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm">
+            </div>
+            <div class="col-span-5">
+                <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">Description</label>
+                <input type="text" name="tasktemplate_set-${formCount}-description" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm">
+            </div>
+            <div class="col-span-2 flex items-center gap-2 pt-5">
+                <input type="checkbox" name="tasktemplate_set-${formCount}-DELETE" style="display:none">
+                <button type="button" class="remove-task-btn p-2 text-red-600 hover:bg-red-50 rounded-lg transition" title="Remove">
+                    <i data-lucide="trash-2" class="w-4 h-4"></i>
+                </button>
+            </div>
+        </div>
+    `;
+    
+    container.appendChild(newForm);
+    totalForms.value = formCount + 1;
+    
+    // Initialize lucide icons for new elements
+    if (window.lucide) {
+        window.lucide.createIcons();
+    }
+    
+    // Add remove handler
+    newForm.querySelector('.remove-task-btn').addEventListener('click', function() {
+        newForm.remove();
+    });
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/projects/template_list.html b/templates/projects/template_list.html
new file mode 100644
index 0000000..008adbb
--- /dev/null
+++ b/templates/projects/template_list.html
@@ -0,0 +1,97 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Project Templates" %} - PX360{% endblock %}
+
+{% block content %}
+<!-- Header -->
+<header class="mb-6">
+    <div class="flex justify-between items-start">
+        <div>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="layout-template" class="w-6 h-6"></i>
+                {% trans "Project Templates" %}
+            </h1>
+            <p class="text-sm text-slate mt-1">{% trans "Reusable templates for quality improvement projects" %}</p>
+        </div>
+        <div class="flex items-center gap-3">
+            <a href="{% url 'projects:project_list' %}" class="bg-white text-blue border-2 border-blue/30 px-4 py-2 rounded-xl text-sm font-bold hover:bg-blue hover:text-white flex items-center gap-2 transition">
+                <i data-lucide="kanban" class="w-4 h-4"></i> {% trans "View Projects" %}
+            </a>
+            {% if can_create %}
+            <a href="{% url 'projects:template_create' %}" class="bg-navy text-white px-4 py-2 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
+                <i data-lucide="plus" class="w-4 h-4"></i> {% trans "New Template" %}
+            </a>
+            {% endif %}
+        </div>
+    </div>
+</header>
+
+<!-- Templates Grid -->
+{% if templates %}
+<div class="grid grid-cols-3 gap-6">
+    {% for template in templates %}
+    <div class="bg-white rounded-2xl border shadow-sm overflow-hidden hover:shadow-md transition-shadow">
+        <div class="p-6">
+            <div class="flex items-start justify-between mb-3">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-blue/10 rounded-xl flex items-center justify-center">
+                        <i data-lucide="layout-template" class="w-5 h-5 text-blue"></i>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-navy">{{ template.name }}</h3>
+                        {% if template.is_active %}
+                        <span class="text-[10px] font-bold text-green-600 uppercase">{% trans "Active" %}</span>
+                        {% else %}
+                        <span class="text-[10px] font-bold text-slate uppercase">{% trans "Inactive" %}</span>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+            
+            {% if template.description %}
+            <p class="text-xs text-slate mb-4 line-clamp-2">{{ template.description }}</p>
+            {% endif %}
+            
+            <div class="flex items-center gap-4 text-xs text-slate mb-4">
+                <span class="flex items-center gap-1">
+                    <i data-lucide="check-square" class="w-3 h-3"></i>
+                    {{ template.tasks.count }} {% trans "tasks" %}
+                </span>
+                <span class="flex items-center gap-1">
+                    <i data-lucide="calendar" class="w-3 h-3"></i>
+                    {{ template.created_at|date:"M d, Y" }}
+                </span>
+            </div>
+            
+            <div class="flex items-center gap-2 pt-4 border-t">
+                {% if can_edit %}
+                <a href="{% url 'projects:template_detail' pk=template.pk %}" class="flex-1 bg-blue/10 text-blue text-center px-3 py-2 rounded-lg text-xs font-bold hover:bg-blue/20 transition">
+                    {% trans "View" %}
+                </a>
+                {% else %}
+                <a href="{% url 'projects:template_detail' pk=template.pk %}" class="flex-1 bg-slate-100 text-slate text-center px-3 py-2 rounded-lg text-xs font-bold hover:bg-slate-200 transition">
+                    {% trans "View" %}
+                </a>
+                {% endif %}
+                <a href="{% url 'projects:project_create_from_template' template_pk=template.pk %}" class="flex-1 bg-navy text-white text-center px-3 py-2 rounded-lg text-xs font-bold hover:bg-blue transition">
+                    {% trans "Use" %}
+                </a>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+{% else %}
+<div class="bg-white rounded-2xl border shadow-sm p-12 text-center">
+    <i data-lucide="layout-template" class="w-16 h-16 mx-auto text-slate-300 mb-4"></i>
+    <h3 class="text-lg font-bold text-navy mb-2">{% trans "No Templates Yet" %}</h3>
+    <p class="text-sm text-slate mb-6">{% trans "Create templates to quickly start new quality improvement projects" %}</p>
+    {% if can_create %}
+    <a href="{% url 'projects:template_create' %}" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue inline-flex items-center gap-2 transition">
+        <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Create First Template" %}
+    </a>
+    {% endif %}
+</div>
+{% endif %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/px_sources/source_list.html b/templates/px_sources/source_list.html
index 291eb3c..9bf5816 100644
--- a/templates/px_sources/source_list.html
+++ b/templates/px_sources/source_list.html
@@ -34,6 +34,7 @@
         width: 200px;
         height: 200px;
         background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+        pointer-events: none;
     }
 
     .data-card {
@@ -275,15 +276,17 @@
                                        class="p-2 text-navy hover:bg-navy/10 rounded-lg transition" title="{% trans 'Edit' %}">
                                         <i data-lucide="edit" class="w-4 h-4"></i>
                                     </a>
-                                    <a href="{% url 'px_sources:source_toggle_status' source.pk %}"
-                                       class="p-2 hover:bg-slate-100 rounded-lg transition" 
-                                       title="{% if source.is_active %}{% trans 'Deactivate' %}{% else %}{% trans 'Activate' %}{% endif %}">
-                                        {% if source.is_active %}
-                                            <i data-lucide="pause" class="w-4 h-4 text-yellow-600"></i>
-                                        {% else %}
-                                            <i data-lucide="play" class="w-4 h-4 text-green-600"></i>
-                                        {% endif %}
-                                    </a>
+                                    <form action="{% url 'px_sources:source_toggle_status' source.pk %}" method="post" style="display:inline">
+                                        {% csrf_token %}
+                                        <button type="submit" class="p-2 hover:bg-slate-100 rounded-lg transition" 
+                                                title="{% if source.is_active %}{% trans 'Deactivate' %}{% else %}{% trans 'Activate' %}{% endif %}">
+                                            {% if source.is_active %}
+                                                <i data-lucide="pause" class="w-4 h-4 text-yellow-600"></i>
+                                            {% else %}
+                                                <i data-lucide="play" class="w-4 h-4 text-green-600"></i>
+                                            {% endif %}
+                                        </button>
+                                    </form>
                                     {% if user.is_px_admin %}
                                     <a href="{% url 'px_sources:source_delete' source.pk %}"
                                        class="p-2 text-red-500 hover:bg-red-50 rounded-lg transition" title="{% trans 'Delete' %}">
diff --git a/templates/px_sources/source_user_complaint_list.html b/templates/px_sources/source_user_complaint_list.html
index b38e026..fef7acb 100644
--- a/templates/px_sources/source_user_complaint_list.html
+++ b/templates/px_sources/source_user_complaint_list.html
@@ -3,23 +3,39 @@
 
 {% block title %}{% trans "My Complaints" %} - {{ source.name_en }}{% endblock %}
 
+{% block extra_css %}
+<style>
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-in {
+        animation: fadeIn 0.5s ease-out forwards;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="p-6">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Page Header -->
-    <div class="flex flex-wrap justify-between items-center gap-4 mb-6">
-        <div>
-            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
-                <i data-lucide="alert-triangle" class="w-8 h-8 text-yellow-500"></i>
-                {% trans "My Complaints" %}
-                <span class="inline-flex items-center px-3 py-1 bg-navy text-white rounded-full text-sm font-medium">{{ complaints_count }}</span>
-            </h1>
-            <p class="text-slate mt-1">
-                {% trans "View all complaints from your source" %}
-            </p>
+    <div class="flex flex-wrap justify-between items-center gap-4 mb-8 animate-in">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-orange-400 to-orange-500 rounded-2xl shadow-lg shadow-orange-200">
+                <i data-lucide="alert-triangle" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% trans "My Complaints" %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% trans "View all complaints from your source" %}
+                    <span class="inline-flex items-center px-2.5 py-0.5 bg-navy text-white rounded-full text-xs font-bold ml-2">{{ complaints_count }}</span>
+                </p>
+            </div>
         </div>
         {% if source_user.can_create_complaints %}
-        <a href="{% url 'complaints:complaint_create' %}" 
-           class="inline-flex items-center gap-2 px-4 py-2 bg-navy text-white rounded-lg hover:bg-blue transition shadow-lg shadow-navy/20">
+        <a href="{% url 'px_sources:source_user_create_complaint' %}"
+           class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-navy to-blue text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
             <i data-lucide="plus-circle" class="w-4 h-4"></i>
             {% trans "Create Complaint" %}
         </a>
@@ -27,30 +43,32 @@
     </div>
 
     <!-- Filter Panel -->
-    <div class="bg-white rounded-xl shadow-sm border border-slate-200 mb-6">
-        <div class="p-4 border-b border-slate-200 bg-slate-50/50 rounded-t-xl">
-            <h2 class="text-sm font-semibold text-navy flex items-center gap-2">
-                <i data-lucide="filter" class="w-4 h-4 text-slate"></i>
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 mb-8 animate-in">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <h2 class="text-sm font-bold text-navy flex items-center gap-2">
+                <i data-lucide="filter" class="w-4 h-4 text-blue"></i>
                 {% trans "Filters" %}
             </h2>
         </div>
-        <div class="p-4">
-            <form method="get" class="grid grid-cols-1 md:grid-cols-12 gap-4">
+        <div class="p-6">
+            <form method="get" class="grid grid-cols-1 md:grid-cols-12 gap-5">
                 <!-- Search -->
                 <div class="md:col-span-4">
-                    <label class="block text-sm font-medium text-slate mb-1">{% trans "Search" %}</label>
-                    <input type="text" 
-                           class="w-full px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue focus:border-blue outline-none transition" 
-                           name="search"
-                           placeholder="{% trans 'Title, patient name...' %}"
-                           value="{{ search|default:'' }}">
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Search" %}</label>
+                    <div class="relative">
+                        <input type="text"
+                               class="w-full pl-10 pr-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                               name="search"
+                               placeholder="{% trans 'Title, patient name...' %}"
+                               value="{{ search|default:'' }}">
+                        <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate"></i>
+                    </div>
                 </div>
 
                 <!-- Status -->
                 <div class="md:col-span-2">
-                    <label class="block text-sm font-medium text-slate mb-1">{% trans "Status" %}</label>
-                    <select class="w-full px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue focus:border-blue outline-none transition bg-white" 
-                            name="status">
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Status" %}</label>
+                    <select class="w-full px-3 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
                         <option value="">{% trans "All Statuses" %}</option>
                         <option value="open" {% if status_filter == 'open' %}selected{% endif %}>{% trans "Open" %}</option>
                         <option value="in_progress" {% if status_filter == 'in_progress' %}selected{% endif %}>{% trans "In Progress" %}</option>
@@ -61,9 +79,8 @@
 
                 <!-- Priority -->
                 <div class="md:col-span-2">
-                    <label class="block text-sm font-medium text-slate mb-1">{% trans "Priority" %}</label>
-                    <select class="w-full px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue focus:border-blue outline-none transition bg-white" 
-                            name="priority">
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Priority" %}</label>
+                    <select class="w-full px-3 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
                         <option value="">{% trans "All Priorities" %}</option>
                         <option value="low" {% if priority_filter == 'low' %}selected{% endif %}>{% trans "Low" %}</option>
                         <option value="medium" {% if priority_filter == 'medium' %}selected{% endif %}>{% trans "Medium" %}</option>
@@ -73,16 +90,14 @@
 
                 <!-- Category -->
                 <div class="md:col-span-2">
-                    <label class="block text-sm font-medium text-slate mb-1">{% trans "Category" %}</label>
-                    <select class="w-full px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue focus:border-blue outline-none transition bg-white" 
-                            name="category">
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Category" %}</label>
+                    <select class="w-full px-3 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
                         <option value="">{% trans "All Categories" %}</option>
                         <option value="clinical_care" {% if category_filter == 'clinical_care' %}selected{% endif %}>{% trans "Clinical Care" %}</option>
                         <option value="staff_behavior" {% if category_filter == 'staff_behavior' %}selected{% endif %}>{% trans "Staff Behavior" %}</option>
-                        <option value="facility" {% if category_filter == 'facility' %}selected{% endif %}>{% trans "Facility & Environment" %}</option>
+                        <option value="facility" {% if category_filter == 'facility' %}selected{% endif %}>{% trans "Facility" %}</option>
                         <option value="wait_time" {% if category_filter == 'wait_time' %}selected{% endif %}>{% trans "Wait Time" %}</option>
                         <option value="billing" {% if category_filter == 'billing' %}selected{% endif %}>{% trans "Billing" %}</option>
-                        <option value="communication" {% if category_filter == 'communication' %}selected{% endif %}>{% trans "Communication" %}</option>
                         <option value="other" {% if category_filter == 'other' %}selected{% endif %}>{% trans "Other" %}</option>
                     </select>
                 </div>
@@ -90,14 +105,15 @@
                 <!-- Actions -->
                 <div class="md:col-span-2 flex items-end">
                     <div class="flex gap-2 w-full">
-                        <button type="submit" 
-                                class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-navy text-white rounded-lg hover:bg-blue transition flex-grow">
+                        <button type="submit"
+                                class="inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-gradient-to-r from-navy to-blue text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition flex-grow shadow-lg shadow-blue-200">
                             <i data-lucide="search" class="w-4 h-4"></i>
                             {% trans "Filter" %}
                         </button>
-                        <a href="{% url 'px_sources:source_user_complaint_list' %}" 
-                           class="inline-flex items-center justify-center p-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate">
-                            <i data-lucide="x-circle" class="w-4 h-4"></i>
+                        <a href="{% url 'px_sources:source_user_complaint_list' %}"
+                           class="inline-flex items-center justify-center p-2.5 border-2 border-slate-200 text-slate rounded-xl hover:bg-slate-50 transition"
+                           title="{% trans 'Clear filters' %}">
+                            <i data-lucide="x-circle" class="w-5 h-5"></i>
                         </a>
                     </div>
                 </div>
@@ -106,158 +122,130 @@
     </div>
 
     <!-- Complaints Table -->
-    <div class="bg-white rounded-xl shadow-sm border border-slate-200">
-        <div class="p-4 border-b border-slate-200 bg-slate-50/50 rounded-t-xl">
-            <h2 class="text-lg font-semibold text-navy flex items-center gap-2">
-                <i data-lucide="file-text" class="w-5 h-5 text-slate"></i>
-                {% trans "Complaints List" %}
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden animate-in">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                <i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
+                {% trans "All Complaints" %}
+                <span class="inline-flex items-center px-2.5 py-0.5 bg-blue-100 text-blue-700 rounded-full text-xs font-bold ml-2">{{ complaints_count }}</span>
             </h2>
         </div>
         <div class="overflow-x-auto">
             <table class="w-full">
-                <thead>
-                    <tr class="border-b border-slate-200">
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "ID" %}</th>
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Title" %}</th>
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Patient" %}</th>
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Category" %}</th>
-                        <th class="text-center py-3 px-4 text-sm font-semibold text-navy">{% trans "Status" %}</th>
-                        <th class="text-center py-3 px-4 text-sm font-semibold text-navy">{% trans "Priority" %}</th>
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Assigned To" %}</th>
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Created" %}</th>
-                        <th class="text-center py-3 px-4 text-sm font-semibold text-navy">{% trans "Actions" %}</th>
+                <thead class="bg-blue-50">
+                    <tr>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Reference" %}</th>
+                        <th class="text-left py-4 px-6 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Title" %}</th>
+                        <th class="text-left py-4 px-6 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Patient" %}</th>
+                        <th class="text-left py-4 px-6 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Department" %}</th>
+                        <th class="text-center py-4 px-6 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Status" %}</th>
+                        <th class="text-center py-4 px-6 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Priority" %}</th>
+                        <th class="text-left py-4 px-6 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Created" %}</th>
                     </tr>
                 </thead>
-                <tbody class="divide-y divide-slate-100">
+                <tbody class="divide-y divide-blue-50">
                     {% for complaint in complaints %}
-                    <tr class="hover:bg-slate-50 transition">
-                        <td class="py-3 px-4 text-sm font-mono text-slate">{{ complaint.id|slice:":8" }}</td>
-                        <td class="py-3 px-4">
-                            <a href="{% url 'complaints:complaint_detail' complaint.pk %}" 
+                    <tr class="hover:bg-blue-50/50 transition">
+                        <td class="px-6 py-4 text-sm font-mono text-slate font-medium">{{ complaint.reference_number|default:complaint.id|truncatechars:12 }}</td>
+                        <td class="px-6 py-4">
+                            <a href="{% url 'complaints:complaint_detail' complaint.pk %}"
                                class="text-navy font-semibold hover:text-blue transition">
-                                {{ complaint.title|truncatewords:8 }}
+                                {{ complaint.title|truncatechars:35 }}
                             </a>
                         </td>
-                        <td class="py-3 px-4">
-                            {% if complaint.patient %}
-                                <div class="font-medium text-slate">{{ complaint.patient.get_full_name }}</div>
-                                <div class="text-xs text-slate/70">{% trans "MRN" %}: {{ complaint.patient.mrn }}</div>
-                            {% else %}
-                                <span class="text-slate/60 italic">{% trans "Not specified" %}</span>
-                            {% endif %}
-                        </td>
-                        <td class="py-3 px-4">
-                            <span class="inline-flex items-center px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs font-medium">
-                                {{ complaint.get_category_display }}
-                            </span>
-                        </td>
-                        <td class="py-3 px-4 text-center">
+                        <td class="px-6 py-4 text-sm text-slate">{{ complaint.patient_name|default:"-" }}</td>
+                        <td class="px-6 py-4 text-sm text-slate">{{ complaint.department|default:"-" }}</td>
+                        <td class="px-6 py-4 text-center">
                             {% if complaint.status == 'open' %}
-                                <span class="inline-flex items-center px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs font-medium">{% trans "Open" %}</span>
+                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-700">
+                                    <i data-lucide="circle" class="w-2 h-2 fill-current"></i>
+                                    {% trans "Open" %}
+                                </span>
                             {% elif complaint.status == 'in_progress' %}
-                                <span class="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-medium">{% trans "In Progress" %}</span>
+                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">
+                                    <i data-lucide="loader" class="w-2 h-2"></i>
+                                    {% trans "In Progress" %}
+                                </span>
                             {% elif complaint.status == 'resolved' %}
-                                <span class="inline-flex items-center px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">{% trans "Resolved" %}</span>
+                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
+                                    <i data-lucide="check-circle" class="w-2 h-2"></i>
+                                    {% trans "Resolved" %}
+                                </span>
                             {% else %}
-                                <span class="inline-flex items-center px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs font-medium">{% trans "Closed" %}</span>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">{{ complaint.get_status_display }}</span>
                             {% endif %}
                         </td>
-                        <td class="py-3 px-4 text-center">
+                        <td class="px-6 py-4 text-center">
                             {% if complaint.priority == 'high' %}
-                                <span class="inline-flex items-center px-2 py-1 bg-red-100 text-red-700 rounded text-xs font-medium">{% trans "High" %}</span>
+                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-700">
+                                    <i data-lucide="arrow-up" class="w-2 h-2"></i>
+                                    {% trans "High" %}
+                                </span>
                             {% elif complaint.priority == 'medium' %}
-                                <span class="inline-flex items-center px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs font-medium">{% trans "Medium" %}</span>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-orange-100 text-orange-700">
+                                    {% trans "Medium" %}
+                                </span>
                             {% else %}
-                                <span class="inline-flex items-center px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">{% trans "Low" %}</span>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">
+                                    {% trans "Low" %}
+                                </span>
                             {% endif %}
                         </td>
-                        <td class="py-3 px-4 text-sm text-slate">
-                            {% if complaint.assigned_to %}
-                                {{ complaint.assigned_to.get_full_name }}
-                            {% else %}
-                                <span class="text-slate/60 italic">{% trans "Unassigned" %}</span>
-                            {% endif %}
-                        </td>
-                        <td class="py-3 px-4 text-sm text-slate">{{ complaint.created_at|date:"Y-m-d" }}</td>
-                        <td class="py-3 px-4 text-center">
-                            <a href="{% url 'complaints:complaint_detail' complaint.pk %}" 
-                               class="inline-flex items-center justify-center p-2 bg-blue text-white rounded-lg hover:bg-navy transition" 
-                               title="{% trans 'View' %}">
-                                <i data-lucide="eye" class="w-4 h-4"></i>
-                            </a>
-                        </td>
+                        <td class="px-6 py-4 text-sm text-slate">{{ complaint.created_at|date:"M d, Y" }}</td>
                     </tr>
                     {% empty %}
                     <tr>
-                        <td colspan="9" class="text-center py-12">
-                            <i data-lucide="inbox" class="w-16 h-16 mx-auto text-slate/30 mb-4"></i>
-                            <p class="text-slate mb-4">{% trans "No complaints found for your source." %}</p>
-                            {% if source_user.can_create_complaints %}
-                            <a href="{% url 'complaints:complaint_create' %}" 
-                               class="inline-flex items-center gap-2 px-4 py-2 bg-navy text-white rounded-lg hover:bg-blue transition">
-                                <i data-lucide="plus-circle" class="w-4 h-4"></i>
-                                {% trans "Create Complaint" %}
-                            </a>
-                            {% endif %}
+                        <td colspan="7" class="px-6 py-12 text-center">
+                            <div class="flex flex-col items-center">
+                                <div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mb-4">
+                                    <i data-lucide="file-text" class="w-8 h-8 text-blue-500"></i>
+                                </div>
+                                <p class="text-slate font-medium">{% trans "No complaints found" %}</p>
+                                {% if source_user.can_create_complaints %}
+                                <a href="{% url 'complaints:complaint_create' %}" class="mt-3 text-blue font-semibold hover:underline">
+                                    {% trans "Create your first complaint" %}
+                                </a>
+                                {% endif %}
+                            </div>
                         </td>
                     </tr>
                     {% endfor %}
                 </tbody>
             </table>
         </div>
-    </div>
 
-    <!-- Pagination -->
-    {% if complaints.has_other_pages %}
-    <nav aria-label="Complaints pagination" class="mt-6">
-        <ul class="flex justify-center items-center gap-2">
-            {% if complaints.has_previous %}
-            <li>
-                <a class="inline-flex items-center justify-center w-10 h-10 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate" 
-                   href="?page=1&search={{ search }}&status={{ status_filter }}&priority={{ priority_filter }}&category={{ category_filter }}">
-                    <i data-lucide="chevrons-left" class="w-4 h-4"></i>
-                </a>
-            </li>
-            <li>
-                <a class="inline-flex items-center justify-center w-10 h-10 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate" 
-                   href="?page={{ complaints.previous_page_number }}&search={{ search }}&status={{ status_filter }}&priority={{ priority_filter }}&category={{ category_filter }}">
-                    <i data-lucide="chevron-left" class="w-4 h-4"></i>
-                </a>
-            </li>
-            {% endif %}
-
-            {% for num in complaints.paginator.page_range %}
-                {% if complaints.number == num %}
-                <li>
-                    <span class="inline-flex items-center justify-center w-10 h-10 bg-navy text-white rounded-lg font-medium">{{ num }}</span>
-                </li>
-                {% elif num > complaints.number|add:'-3' and num < complaints.number|add:'3' %}
-                <li>
-                    <a class="inline-flex items-center justify-center w-10 h-10 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate" 
-                       href="?page={{ num }}&search={{ search }}&status={{ status_filter }}&priority={{ priority_filter }}&category={{ category_filter }}">
-                        {{ num }}
+        <!-- Pagination -->
+        {% if complaints.has_other_pages %}
+        <div class="px-6 py-4 border-t border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <div class="flex items-center justify-between">
+                <p class="text-sm text-slate">
+                    {% blocktrans with start=complaints.start_index end=complaints.end_index total=complaints.paginator.count %}
+                    Showing {{ start }} to {{ end }} of {{ total }} complaints
+                    {% endblocktrans %}
+                </p>
+                <div class="flex gap-2">
+                    {% if complaints.has_previous %}
+                    <a href="?page={{ complaints.previous_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if priority_filter %}&priority={{ priority_filter }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if search %}&search={{ search }}{% endif %}"
+                       class="px-4 py-2 border-2 border-blue-200 text-blue rounded-xl font-semibold hover:bg-blue-50 transition">
+                        {% trans "Previous" %}
                     </a>
-                </li>
-                {% endif %}
-            {% endfor %}
+                    {% endif %}
 
-            {% if complaints.has_next %}
-            <li>
-                <a class="inline-flex items-center justify-center w-10 h-10 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate" 
-                   href="?page={{ complaints.next_page_number }}&search={{ search }}&status={{ status_filter }}&priority={{ priority_filter }}&category={{ category_filter }}">
-                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
-                </a>
-            </li>
-            <li>
-                <a class="inline-flex items-center justify-center w-10 h-10 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate" 
-                   href="?page={{ complaints.paginator.num_pages }}&search={{ search }}&status={{ status_filter }}&priority={{ priority_filter }}&category={{ category_filter }}">
-                    <i data-lucide="chevrons-right" class="w-4 h-4"></i>
-                </a>
-            </li>
-            {% endif %}
-        </ul>
-    </nav>
-    {% endif %}
+                    <span class="px-4 py-2 bg-navy text-white rounded-xl font-semibold">
+                        {% blocktrans with num=complaints.number total=complaints.paginator.num_pages %}Page {{ num }} of {{ total }}{% endblocktrans %}
+                    </span>
+
+                    {% if complaints.has_next %}
+                    <a href="?page={{ complaints.next_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if priority_filter %}&priority={{ priority_filter }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if search %}&search={{ search }}{% endif %}"
+                       class="px-4 py-2 border-2 border-blue-200 text-blue rounded-xl font-semibold hover:bg-blue-50 transition">
+                        {% trans "Next" %}
+                    </a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+    </div>
 </div>
 
 <script>
diff --git a/templates/px_sources/source_user_create_complaint.html b/templates/px_sources/source_user_create_complaint.html
new file mode 100644
index 0000000..ee8e084
--- /dev/null
+++ b/templates/px_sources/source_user_create_complaint.html
@@ -0,0 +1,372 @@
+{% extends "layouts/source_user_base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Create Complaint" %} - {{ source.name_en }}{% endblock %}
+
+{% block extra_css %}
+<style>
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-in {
+        animation: fadeIn 0.5s ease-out forwards;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Page Header -->
+    <div class="flex flex-wrap justify-between items-center gap-4 mb-8 animate-in">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-orange-400 to-orange-500 rounded-2xl shadow-lg shadow-orange-200">
+                <i data-lucide="plus-circle" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% trans "Create Complaint" %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% trans "Submit a new complaint from" %} <strong>{{ source.name_en }}</strong>
+                </p>
+            </div>
+        </div>
+        <a href="{% url 'px_sources:source_user_complaint_list' %}"
+           class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-blue-200 text-navy rounded-xl font-semibold hover:bg-blue-50 transition">
+            <i data-lucide="arrow-left" class="w-4 h-4"></i>
+            {% trans "Back to Complaints" %}
+        </a>
+    </div>
+
+    <!-- Info Banner -->
+    <div class="bg-blue-50 border border-blue-200 rounded-2xl p-4 mb-8 animate-in">
+        <div class="flex items-start gap-3">
+            <i data-lucide="info" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
+            <div>
+                <p class="text-sm font-bold text-blue-800 mb-1">{% trans "Source Information" %}</p>
+                <p class="text-sm text-blue-700">
+                    {% trans "This complaint will be automatically linked to" %} <strong>{{ source.name_en }}</strong>. 
+                    {% trans "All required fields are marked with" %} <span class="text-red-500">*</span>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Form -->
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden animate-in">
+        <form method="post" novalidate>
+            {% csrf_token %}
+
+            <div class="p-6 md:p-8">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <!-- Complainant Name -->
+                    <div>
+                        <label for="{{ form.complainant_name.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.complainant_name.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.complainant_name }}
+                        {% if form.complainant_name.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.complainant_name.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Mobile Number -->
+                    <div>
+                        <label for="{{ form.mobile_number.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.mobile_number.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.mobile_number }}
+                        {% if form.mobile_number.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.mobile_number.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Email -->
+                    <div>
+                        <label for="{{ form.email.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.email.label }}
+                        </label>
+                        {{ form.email }}
+                        {% if form.email.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.email.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Relation to Patient -->
+                    <div>
+                        <label for="{{ form.relation_to_patient.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.relation_to_patient.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.relation_to_patient }}
+                        {% if form.relation_to_patient.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.relation_to_patient.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Patient Name -->
+                    <div>
+                        <label for="{{ form.patient_name.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.patient_name.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.patient_name }}
+                        {% if form.patient_name.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.patient_name.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- National ID -->
+                    <div>
+                        <label for="{{ form.national_id.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.national_id.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.national_id }}
+                        {% if form.national_id.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.national_id.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Incident Date -->
+                    <div>
+                        <label for="{{ form.incident_date.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.incident_date.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.incident_date }}
+                        {% if form.incident_date.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.incident_date.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Staff Name -->
+                    <div>
+                        <label for="{{ form.staff_name.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.staff_name.label }}
+                        </label>
+                        {{ form.staff_name }}
+                        <p class="text-xs text-slate mt-1">{% trans "Optional - Name of staff involved" %}</p>
+                        {% if form.staff_name.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.staff_name.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Hospital -->
+                    <div>
+                        <label for="{{ form.hospital.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.hospital.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.hospital }}
+                        {% if form.hospital.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.hospital.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Location -->
+                    <div>
+                        <label for="{{ form.location.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.location.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.location }}
+                        {% if form.location.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.location.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Main Section -->
+                    <div>
+                        <label for="{{ form.main_section.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.main_section.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.main_section }}
+                        {% if form.main_section.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.main_section.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Subsection -->
+                    <div>
+                        <label for="{{ form.subsection.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.subsection.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.subsection }}
+                        {% if form.subsection.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.subsection.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Complaint Details (Description) -->
+                    <div class="md:col-span-2">
+                        <label for="{{ form.complaint_details.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.complaint_details.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.complaint_details }}
+                        {% if form.complaint_details.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.complaint_details.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Expected Result -->
+                    <div class="md:col-span-2">
+                        <label for="{{ form.expected_result.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.expected_result.label }}
+                        </label>
+                        {{ form.expected_result }}
+                        <p class="text-xs text-slate mt-1">{% trans "What do you expect as a resolution? (Optional)" %}</p>
+                        {% if form.expected_result.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.expected_result.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+
+            <!-- Form Actions -->
+            <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-transparent border-t border-blue-100 flex gap-3">
+                <button type="submit"
+                        class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-navy to-blue text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                    <i data-lucide="check" class="w-5 h-5"></i>
+                    {% trans "Submit Complaint" %}
+                </button>
+                <a href="{% url 'px_sources:source_user_complaint_list' %}"
+                   class="inline-flex items-center gap-2 px-6 py-3 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                    <i data-lucide="x" class="w-5 h-5"></i>
+                    {% trans "Cancel" %}
+                </a>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+    
+    // Set max date for incident date to today
+    const incidentDateInput = document.getElementById('{{ form.incident_date.id_for_label }}');
+    if (incidentDateInput) {
+        const today = new Date().toISOString().split('T')[0];
+        incidentDateInput.setAttribute('max', today);
+    }
+    
+    // Cascading dropdowns for Location → Section → Subsection
+    const locationSelect = document.getElementById('{{ form.location.id_for_label }}');
+    const mainSectionSelect = document.getElementById('{{ form.main_section.id_for_label }}');
+    const subsectionSelect = document.getElementById('{{ form.subsection.id_for_label }}');
+    
+    // Load sections when location changes
+    if (locationSelect && mainSectionSelect) {
+        locationSelect.addEventListener('change', function() {
+            const locationId = this.value;
+            
+            // Clear and disable dependent dropdowns
+            mainSectionSelect.innerHTML = '<option value="">Select Section</option>';
+            subsectionSelect.innerHTML = '<option value="">Select Subsection</option>';
+            mainSectionSelect.disabled = true;
+            subsectionSelect.disabled = true;
+            
+            if (locationId) {
+                // Fetch sections for this location using the AJAX endpoint
+                fetch(`/organizations/ajax/main-sections/?location_id=${locationId}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.sections && data.sections.length > 0) {
+                            data.sections.forEach(section => {
+                                const option = document.createElement('option');
+                                option.value = section.id;
+                                option.textContent = section.name_en || section.name;
+                                mainSectionSelect.appendChild(option);
+                            });
+                            mainSectionSelect.disabled = false;
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error loading sections:', error);
+                    });
+            }
+        });
+        
+        // Trigger change on page load if location is pre-selected
+        if (locationSelect.value) {
+            locationSelect.dispatchEvent(new Event('change'));
+        }
+    }
+    
+    // Load subsections when main section changes
+    if (mainSectionSelect && subsectionSelect) {
+        mainSectionSelect.addEventListener('change', function() {
+            const locationId = locationSelect ? locationSelect.value : null;
+            const sectionId = this.value;
+            
+            // Clear and disable subsection dropdown
+            subsectionSelect.innerHTML = '<option value="">Select Subsection</option>';
+            subsectionSelect.disabled = true;
+            
+            if (locationId && sectionId) {
+                // Fetch subsections for this location and section
+                fetch(`/organizations/ajax/subsections/?location_id=${locationId}&main_section_id=${sectionId}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.subsections && data.subsections.length > 0) {
+                            data.subsections.forEach(subsection => {
+                                const option = document.createElement('option');
+                                option.value = subsection.id;
+                                option.textContent = subsection.name_en || subsection.name;
+                                subsectionSelect.appendChild(option);
+                            });
+                            subsectionSelect.disabled = false;
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error loading subsections:', error);
+                    });
+            }
+        });
+        
+        // Trigger change on page load if section is pre-selected
+        if (mainSectionSelect.value) {
+            mainSectionSelect.dispatchEvent(new Event('change'));
+        }
+    }
+});
+</script>
+{% endblock %}
diff --git a/templates/px_sources/source_user_create_inquiry.html b/templates/px_sources/source_user_create_inquiry.html
new file mode 100644
index 0000000..3fedc9f
--- /dev/null
+++ b/templates/px_sources/source_user_create_inquiry.html
@@ -0,0 +1,157 @@
+{% extends "layouts/source_user_base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Create Inquiry" %} - {{ source.name_en }}{% endblock %}
+
+{% block extra_css %}
+<style>
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-in {
+        animation: fadeIn 0.5s ease-out forwards;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Page Header -->
+    <div class="flex flex-wrap justify-between items-center gap-4 mb-8 animate-in">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-2xl shadow-lg shadow-cyan-200">
+                <i data-lucide="plus-circle" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% trans "Create Inquiry" %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% trans "Submit a new inquiry from" %} <strong>{{ source.name_en }}</strong>
+                </p>
+            </div>
+        </div>
+        <a href="{% url 'px_sources:source_user_inquiry_list' %}"
+           class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-blue-200 text-navy rounded-xl font-semibold hover:bg-blue-50 transition">
+            <i data-lucide="arrow-left" class="w-4 h-4"></i>
+            {% trans "Back to Inquiries" %}
+        </a>
+    </div>
+
+    <!-- Info Banner -->
+    <div class="bg-cyan-50 border border-cyan-200 rounded-2xl p-4 mb-8 animate-in">
+        <div class="flex items-start gap-3">
+            <i data-lucide="info" class="w-5 h-5 text-cyan-600 mt-0.5 flex-shrink-0"></i>
+            <div>
+                <p class="text-sm font-bold text-cyan-800 mb-1">{% trans "Source Information" %}</p>
+                <p class="text-sm text-cyan-700">
+                    {% trans "This inquiry will be automatically linked to" %} <strong>{{ source.name_en }}</strong>. 
+                    {% trans "All required fields are marked with" %} <span class="text-red-500">*</span>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Form -->
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden animate-in">
+        <form method="post" novalidate>
+            {% csrf_token %}
+
+            <div class="p-6 md:p-8">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <!-- Contact Name -->
+                    <div>
+                        <label for="{{ form.contact_name.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.contact_name.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.contact_name }}
+                        {% if form.contact_name.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.contact_name.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Contact Email -->
+                    <div>
+                        <label for="{{ form.contact_email.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.contact_email.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.contact_email }}
+                        {% if form.contact_email.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.contact_email.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Contact Phone -->
+                    <div>
+                        <label for="{{ form.contact_phone.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.contact_phone.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.contact_phone }}
+                        {% if form.contact_phone.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.contact_phone.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Subject -->
+                    <div>
+                        <label for="{{ form.subject.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.subject.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.subject }}
+                        {% if form.subject.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.subject.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <!-- Message -->
+                    <div class="md:col-span-2">
+                        <label for="{{ form.message.id_for_label }}" class="block text-sm font-bold text-navy mb-2">
+                            {{ form.message.label }} <span class="text-red-500">*</span>
+                        </label>
+                        {{ form.message }}
+                        {% if form.message.errors %}
+                        <div class="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                            {% for error in form.message.errors %}{{ error }}{% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+
+            <!-- Form Actions -->
+            <div class="px-6 py-4 bg-gradient-to-r from-cyan-50 to-transparent border-t border-blue-100 flex gap-3">
+                <button type="submit"
+                        class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-xl font-semibold hover:from-cyan-600 hover:to-blue-600 transition shadow-lg shadow-cyan-200">
+                    <i data-lucide="check" class="w-5 h-5"></i>
+                    {% trans "Submit Inquiry" %}
+                </button>
+                <a href="{% url 'px_sources:source_user_inquiry_list' %}"
+                   class="inline-flex items-center gap-2 px-6 py-3 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                    <i data-lucide="x" class="w-5 h-5"></i>
+                    {% trans "Cancel" %}
+                </a>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/px_sources/source_user_dashboard.html b/templates/px_sources/source_user_dashboard.html
index 7d80b5a..6cafc77 100644
--- a/templates/px_sources/source_user_dashboard.html
+++ b/templates/px_sources/source_user_dashboard.html
@@ -3,28 +3,43 @@
 
 {% block title %}{% trans "Source User Dashboard" %} - {{ source.name_en }} - PX360{% endblock %}
 
+{% block extra_css %}
+<style>
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-in {
+        animation: fadeIn 0.5s ease-out forwards;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="p-6">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Page Header -->
-    <div class="flex flex-wrap justify-between items-center gap-4 mb-6">
-        <div>
-            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
-                <i data-lucide="radio" class="w-8 h-8 text-blue"></i>
-                {{ source.name_en }}
-            </h1>
-            <p class="text-slate mt-1">
-                {% trans "Welcome" %}, {{ request.user.get_full_name }}!
-                {% trans "You're managing feedback from this source." %}
-            </p>
+    <div class="flex flex-wrap justify-between items-center gap-4 mb-8 animate-in">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="radio" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {{ source.name_en }}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% trans "Welcome" %}, {{ request.user.get_full_name|default:request.user.email }}!
+                </p>
+            </div>
         </div>
-        <div class="flex gap-2">
-            <a href="{% url 'px_sources:source_user_complaint_list' %}" 
-               class="inline-flex items-center gap-2 px-4 py-2 bg-navy text-white rounded-lg hover:bg-blue transition shadow-lg shadow-navy/20">
+        <div class="flex gap-3">
+            <a href="{% url 'px_sources:source_user_complaint_list' %}"
+               class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-navy to-blue text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
                 <i data-lucide="file-text" class="w-4 h-4"></i>
                 {% trans "All Complaints" %}
             </a>
-            <a href="{% url 'px_sources:source_user_inquiry_list' %}" 
-               class="inline-flex items-center gap-2 px-4 py-2 bg-blue text-white rounded-lg hover:bg-navy transition">
+            <a href="{% url 'px_sources:source_user_inquiry_list' %}"
+               class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-blue-200 text-navy rounded-xl font-semibold hover:bg-blue-50 transition">
                 <i data-lucide="help-circle" class="w-4 h-4"></i>
                 {% trans "All Inquiries" %}
             </a>
@@ -32,165 +47,256 @@
     </div>
 
     <!-- Statistics Cards -->
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-        <div class="bg-gradient-to-br from-navy to-blue rounded-xl p-4 text-white shadow-lg shadow-navy/20">
-            <div class="flex items-center justify-between">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <div class="stat-card bg-navy rounded-2xl p-6 text-white shadow-xl shadow-blue-200">
+            <div class="flex items-center justify-between mb-3">
                 <div>
-                    <p class="text-white/80 text-sm">{% trans "Total Complaints" %}</p>
-                    <p class="text-2xl font-bold">{{ total_complaints }}</p>
+                    <p class="text-white/80 text-sm font-medium">{% trans "Total Complaints" %}</p>
+                    <p class="text-4xl font-bold mt-2">{{ total_complaints }}</p>
+                </div>
+                <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center">
+                    <i data-lucide="file-text" class="w-7 h-7 text-white"></i>
                 </div>
-                <i data-lucide="file-text" class="w-10 h-10 text-white/30"></i>
             </div>
+            <div class="text-xs text-white/70">{% trans "From your source" %}</div>
         </div>
-        <div class="bg-gradient-to-br from-yellow-500 to-orange-500 rounded-xl p-4 text-white shadow-lg shadow-yellow/20">
-            <div class="flex items-center justify-between">
+
+        <div class="stat-card bg-orange-500 rounded-2xl p-6 text-white shadow-xl shadow-orange-200">
+            <div class="flex items-center justify-between mb-3">
                 <div>
-                    <p class="text-white/80 text-sm">{% trans "Open Complaints" %}</p>
-                    <p class="text-2xl font-bold">{{ open_complaints }}</p>
+                    <p class="text-white/80 text-sm font-medium">{% trans "Open Complaints" %}</p>
+                    <p class="text-4xl font-bold mt-2">{{ open_complaints }}</p>
+                </div>
+                <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center">
+                    <i data-lucide="alert-circle" class="w-7 h-7 text-white"></i>
                 </div>
-                <i data-lucide="alert-circle" class="w-10 h-10 text-white/30"></i>
             </div>
+            <div class="text-xs text-white/70">{% trans "Needs attention" %}</div>
         </div>
-        <div class="bg-gradient-to-br from-cyan-500 to-blue-500 rounded-xl p-4 text-white shadow-lg shadow-cyan/20">
-            <div class="flex items-center justify-between">
+
+        <div class="stat-card bg-cyan-500 rounded-2xl p-6 text-white shadow-xl shadow-cyan-200">
+            <div class="flex items-center justify-between mb-3">
                 <div>
-                    <p class="text-white/80 text-sm">{% trans "Total Inquiries" %}</p>
-                    <p class="text-2xl font-bold">{{ total_inquiries }}</p>
+                    <p class="text-white/80 text-sm font-medium">{% trans "Total Inquiries" %}</p>
+                    <p class="text-4xl font-bold mt-2">{{ total_inquiries }}</p>
+                </div>
+                <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center">
+                    <i data-lucide="help-circle" class="w-7 h-7 text-white"></i>
                 </div>
-                <i data-lucide="help-circle" class="w-10 h-10 text-white/30"></i>
             </div>
+            <div class="text-xs text-white/70">{% trans "From your source" %}</div>
         </div>
-        <div class="bg-gradient-to-br from-slate-500 to-slate-600 rounded-xl p-4 text-white shadow-lg shadow-slate/20">
-            <div class="flex items-center justify-between">
+
+        <div class="stat-card bg-indigo-500 rounded-2xl p-6 text-white shadow-xl shadow-indigo-200">
+            <div class="flex items-center justify-between mb-3">
                 <div>
-                    <p class="text-white/80 text-sm">{% trans "Open Inquiries" %}</p>
-                    <p class="text-2xl font-bold">{{ open_inquiries }}</p>
+                    <p class="text-white/80 text-sm font-medium">{% trans "Open Inquiries" %}</p>
+                    <p class="text-4xl font-bold mt-2">{{ open_inquiries }}</p>
+                </div>
+                <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center">
+                    <i data-lucide="message-circle" class="w-7 h-7 text-white"></i>
                 </div>
-                <i data-lucide="message-circle" class="w-10 h-10 text-white/30"></i>
             </div>
+            <div class="text-xs text-white/70">{% trans "Active inquiries" %}</div>
         </div>
     </div>
 
+    <!-- Quick Actions -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+        {% if can_create_complaints %}
+        <a href="{% url 'px_sources:source_user_create_complaint' %}" class="group">
+            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-blue-100 hover:border-blue hover:shadow-lg hover:-translate-y-1 transition-all duration-200">
+                <div class="flex items-center gap-4">
+                    <div class="w-14 h-14 bg-gradient-to-br from-orange-400 to-orange-500 rounded-xl flex items-center justify-center group-hover:shadow-lg transition">
+                        <i data-lucide="plus-circle" class="w-7 h-7 text-white"></i>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-navy text-lg">{% trans "New Complaint" %}</h3>
+                        <p class="text-sm text-slate">{% trans "File a new complaint" %}</p>
+                    </div>
+                </div>
+            </div>
+        </a>
+        {% endif %}
+
+        {% if can_create_inquiries %}
+        <a href="{% url 'px_sources:source_user_create_inquiry' %}" class="group">
+            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-blue-100 hover:border-blue hover:shadow-lg hover:-translate-y-1 transition-all duration-200">
+                <div class="flex items-center gap-4">
+                    <div class="w-14 h-14 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-xl flex items-center justify-center group-hover:shadow-lg transition">
+                        <i data-lucide="plus-circle" class="w-7 h-7 text-white"></i>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-navy text-lg">{% trans "New Inquiry" %}</h3>
+                        <p class="text-sm text-slate">{% trans "Submit a new inquiry" %}</p>
+                    </div>
+                </div>
+            </div>
+        </a>
+        {% endif %}
+    </div>
+
     <!-- Recent Complaints -->
-    <div class="bg-white rounded-xl shadow-sm border border-slate-200 mb-6">
-        <div class="p-4 border-b border-slate-200 bg-slate-50/50 rounded-t-xl flex justify-between items-center">
-            <h2 class="text-lg font-semibold text-navy flex items-center gap-2">
-                <i data-lucide="file-text" class="w-5 h-5 text-slate"></i>
-                {% trans "Recent Complaints" %} ({{ complaints|length }})
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden mb-8">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent flex justify-between items-center">
+            <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                <i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
+                {% trans "Recent Complaints" %}
+                <span class="inline-flex items-center px-2.5 py-0.5 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">
+                    {{ complaints|length }}
+                </span>
             </h2>
+            <a href="{% url 'px_sources:source_user_complaint_list' %}" class="text-blue font-semibold hover:text-navy flex items-center gap-1 text-sm">
+                {% trans "View All" %}
+                <i data-lucide="arrow-right" class="w-4 h-4"></i>
+            </a>
         </div>
-        <div class="p-4">
+        <div class="p-6">
             {% if complaints %}
             <div class="overflow-x-auto">
                 <table class="w-full">
                     <thead>
-                        <tr class="border-b border-slate-200">
-                            <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "ID" %}</th>
-                            <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Title" %}</th>
-                            <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Patient" %}</th>
-                            <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Category" %}</th>
-                            <th class="text-center py-3 px-4 text-sm font-semibold text-navy">{% trans "Status" %}</th>
-                            <th class="text-center py-3 px-4 text-sm font-semibold text-navy">{% trans "Priority" %}</th>
-                            <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Created" %}</th>
+                        <tr class="border-b-2 border-blue-100">
+                            <th class="text-left py-3 px-4 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Reference" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Title" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Patient" %}</th>
+                            <th class="text-center py-3 px-4 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Status" %}</th>
+                            <th class="text-center py-3 px-4 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Priority" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Date" %}</th>
                         </tr>
                     </thead>
-                    <tbody class="divide-y divide-slate-100">
-                        {% for complaint in complaints|slice:":10" %}
-                        <tr class="hover:bg-slate-50 transition">
-                            <td class="py-3 px-4 text-sm font-mono text-slate">{{ complaint.reference_number|default:complaint.id|truncatechars:12 }}</td>
+                    <tbody class="divide-y divide-blue-50">
+                        {% for complaint in complaints|slice:":5" %}
+                        <tr class="hover:bg-blue-50/50 transition">
+                            <td class="py-3 px-4 text-sm font-mono text-slate font-medium">{{ complaint.reference_number|default:complaint.id|truncatechars:12 }}</td>
                             <td class="py-3 px-4">
-                                <a href="{% url 'complaints:complaint_detail' complaint.pk %}" 
+                                <a href="{% url 'complaints:complaint_detail' complaint.pk %}"
                                    class="text-navy font-semibold hover:text-blue transition">
-                                    {{ complaint.title|truncatechars:40 }}
+                                    {{ complaint.title|truncatechars:35 }}
                                 </a>
                             </td>
-                            <td class="py-3 px-4 text-sm text-slate">{{ complaint.patient.get_full_name|default:"-" }}</td>
-                            <td class="py-3 px-4 text-sm text-slate">{{ complaint.category|default:"-" }}</td>
+                            <td class="py-3 px-4 text-sm text-slate">{{ complaint.patient_name|default:"-" }}</td>
                             <td class="py-3 px-4 text-center">
                                 {% if complaint.status == 'open' %}
-                                    <span class="inline-flex items-center px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs font-medium">{% trans "Open" %}</span>
+                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-700">
+                                        <i data-lucide="circle" class="w-2 h-2 fill-current"></i>
+                                        {% trans "Open" %}
+                                    </span>
                                 {% elif complaint.status == 'in_progress' %}
-                                    <span class="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-medium">{% trans "In Progress" %}</span>
+                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">
+                                        <i data-lucide="loader" class="w-2 h-2"></i>
+                                        {% trans "In Progress" %}
+                                    </span>
                                 {% elif complaint.status == 'resolved' %}
-                                    <span class="inline-flex items-center px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">{% trans "Resolved" %}</span>
+                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
+                                        <i data-lucide="check-circle" class="w-2 h-2"></i>
+                                        {% trans "Resolved" %}
+                                    </span>
                                 {% else %}
-                                    <span class="inline-flex items-center px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs font-medium">{{ complaint.get_status_display }}</span>
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">{{ complaint.get_status_display }}</span>
                                 {% endif %}
                             </td>
                             <td class="py-3 px-4 text-center">
                                 {% if complaint.priority == 'high' %}
-                                    <span class="inline-flex items-center px-2 py-1 bg-red-100 text-red-700 rounded text-xs font-medium">{% trans "High" %}</span>
+                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-700">
+                                        <i data-lucide="arrow-up" class="w-2 h-2"></i>
+                                        {% trans "High" %}
+                                    </span>
                                 {% elif complaint.priority == 'medium' %}
-                                    <span class="inline-flex items-center px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs font-medium">{% trans "Medium" %}</span>
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-orange-100 text-orange-700">
+                                        {% trans "Medium" %}
+                                    </span>
                                 {% else %}
-                                    <span class="inline-flex items-center px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">{% trans "Low" %}</span>
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">
+                                        {% trans "Low" %}
+                                    </span>
                                 {% endif %}
                             </td>
-                            <td class="py-3 px-4 text-sm text-slate">{{ complaint.created_at|date:"Y-m-d" }}</td>
+                            <td class="py-3 px-4 text-sm text-slate">{{ complaint.created_at|date:"M d, Y" }}</td>
                         </tr>
                         {% endfor %}
                     </tbody>
                 </table>
             </div>
             {% else %}
-            <div class="text-center py-8 text-slate">
-                <i data-lucide="file-text" class="w-12 h-12 mx-auto mb-3 opacity-30"></i>
-                <p>{% trans "No complaints found from this source." %}</p>
+            <div class="text-center py-12">
+                <div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="file-text" class="w-8 h-8 text-blue-500"></i>
+                </div>
+                <p class="text-slate font-medium">{% trans "No complaints from this source yet." %}</p>
             </div>
             {% endif %}
         </div>
     </div>
 
     <!-- Recent Inquiries -->
-    <div class="bg-white rounded-xl shadow-sm border border-slate-200">
-        <div class="p-4 border-b border-slate-200 bg-slate-50/50 rounded-t-xl flex justify-between items-center">
-            <h2 class="text-lg font-semibold text-navy flex items-center gap-2">
-                <i data-lucide="help-circle" class="w-5 h-5 text-slate"></i>
-                {% trans "Recent Inquiries" %} ({{ inquiries|length }})
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent flex justify-between items-center">
+            <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                <i data-lucide="help-circle" class="w-5 h-5 text-blue"></i>
+                {% trans "Recent Inquiries" %}
+                <span class="inline-flex items-center px-2.5 py-0.5 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">
+                    {{ inquiries|length }}
+                </span>
             </h2>
+            <a href="{% url 'px_sources:source_user_inquiry_list' %}" class="text-blue font-semibold hover:text-navy flex items-center gap-1 text-sm">
+                {% trans "View All" %}
+                <i data-lucide="arrow-right" class="w-4 h-4"></i>
+            </a>
         </div>
-        <div class="p-4">
+        <div class="p-6">
             {% if inquiries %}
             <div class="overflow-x-auto">
                 <table class="w-full">
                     <thead>
-                        <tr class="border-b border-slate-200">
-                            <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "ID" %}</th>
-                            <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Subject" %}</th>
-                            <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "From" %}</th>
-                            <th class="text-center py-3 px-4 text-sm font-semibold text-navy">{% trans "Status" %}</th>
-                            <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Created" %}</th>
+                        <tr class="border-b-2 border-blue-100">
+                            <th class="text-left py-3 px-4 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Reference" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Subject" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "From" %}</th>
+                            <th class="text-center py-3 px-4 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Status" %}</th>
+                            <th class="text-left py-3 px-4 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Date" %}</th>
                         </tr>
                     </thead>
-                    <tbody class="divide-y divide-slate-100">
-                        {% for inquiry in inquiries|slice:":10" %}
-                        <tr class="hover:bg-slate-50 transition">
-                            <td class="py-3 px-4 text-sm font-mono text-slate">{{ inquiry.reference_number|default:inquiry.id|truncatechars:12 }}</td>
+                    <tbody class="divide-y divide-blue-50">
+                        {% for inquiry in inquiries|slice:":5" %}
+                        <tr class="hover:bg-blue-50/50 transition">
+                            <td class="py-3 px-4 text-sm font-mono text-slate font-medium">{{ inquiry.reference_number|default:inquiry.id|truncatechars:12 }}</td>
                             <td class="py-3 px-4">
-                                <span class="text-navy font-medium">{{ inquiry.subject|truncatechars:40 }}</span>
+                                <span class="text-navy font-medium">{{ inquiry.subject|truncatechars:35 }}</span>
                             </td>
-                            <td class="py-3 px-4 text-sm text-slate">{{ inquiry.name }}</td>
+                            <td class="py-3 px-4 text-sm text-slate">{{ inquiry.contact_name|default:"-" }}</td>
                             <td class="py-3 px-4 text-center">
                                 {% if inquiry.status == 'open' %}
-                                    <span class="inline-flex items-center px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs font-medium">{% trans "Open" %}</span>
+                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-700">
+                                        <i data-lucide="circle" class="w-2 h-2 fill-current"></i>
+                                        {% trans "Open" %}
+                                    </span>
                                 {% elif inquiry.status == 'in_progress' %}
-                                    <span class="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-medium">{% trans "In Progress" %}</span>
+                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">
+                                        <i data-lucide="loader" class="w-2 h-2"></i>
+                                        {% trans "In Progress" %}
+                                    </span>
                                 {% elif inquiry.status == 'resolved' %}
-                                    <span class="inline-flex items-center px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">{% trans "Resolved" %}</span>
+                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
+                                        <i data-lucide="check-circle" class="w-2 h-2"></i>
+                                        {% trans "Resolved" %}
+                                    </span>
                                 {% else %}
-                                    <span class="inline-flex items-center px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs font-medium">{{ inquiry.get_status_display }}</span>
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">{{ inquiry.get_status_display }}</span>
                                 {% endif %}
                             </td>
-                            <td class="py-3 px-4 text-sm text-slate">{{ inquiry.created_at|date:"Y-m-d" }}</td>
+                            <td class="py-3 px-4 text-sm text-slate">{{ inquiry.created_at|date:"M d, Y" }}</td>
                         </tr>
                         {% endfor %}
                     </tbody>
                 </table>
             </div>
             {% else %}
-            <div class="text-center py-8 text-slate">
-                <i data-lucide="help-circle" class="w-12 h-12 mx-auto mb-3 opacity-30"></i>
-                <p>{% trans "No inquiries found from this source." %}</p>
+            <div class="text-center py-12">
+                <div class="w-16 h-16 bg-gradient-to-br from-cyan-100 to-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="help-circle" class="w-8 h-8 text-cyan-500"></i>
+                </div>
+                <p class="text-slate font-medium">{% trans "No inquiries from this source yet." %}</p>
             </div>
             {% endif %}
         </div>
diff --git a/templates/px_sources/source_user_form.html b/templates/px_sources/source_user_form.html
index 3769057..1f33af4 100644
--- a/templates/px_sources/source_user_form.html
+++ b/templates/px_sources/source_user_form.html
@@ -1,7 +1,26 @@
 {% extends "layouts/base.html" %}
 {% load i18n %}
 
-{% block title %}{% if source_user %}{% trans "Edit Source User" %}{% else %}{% trans "Create Source User" %}{% endif %} - {{ source.name_en }}{% endblock %}
+{% block title %}{% trans "Create Source User" %} - {{ source.name_en }}{% endblock %}
+
+{% block extra_css %}
+<style>
+    .tab-container {
+        display: none;
+    }
+    .tab-container.active {
+        display: block;
+    }
+    .tab-button {
+        border-bottom: 2px solid transparent;
+        transition: all 0.2s;
+    }
+    .tab-button.active {
+        border-bottom-color: #005696;
+        color: #005696;
+    }
+</style>
+{% endblock %}
 
 {% block content %}
 <div class="p-6">
@@ -13,7 +32,7 @@
             <li><a href="{% url 'px_sources:source_detail' source.pk %}" class="text-blue hover:text-navy">{{ source.name_en }}</a></li>
             <li><i data-lucide="chevron-right" class="w-4 h-4"></i></li>
             <li class="text-navy font-semibold">
-                {% if source_user %}{% trans "Edit Source User" %}{% else %}{% trans "Create Source User" %}{% endif %}
+                {% trans "Create Source User" %}
             </li>
         </ol>
     </nav>
@@ -22,16 +41,13 @@
     <div class="flex flex-wrap justify-between items-center gap-4 mb-6">
         <div>
             <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
-                {% if source_user %}
-                    <i data-lucide="user-cog" class="w-8 h-8 text-blue"></i>{% trans "Edit Source User" %}
-                {% else %}
-                    <i data-lucide="user-plus" class="w-8 h-8 text-blue"></i>{% trans "Create Source User" %}
-                {% endif %}
+                <i data-lucide="user-plus" class="w-8 h-8 text-blue"></i>
+                {% trans "Create Source User" %}
             </h1>
             <p class="text-slate mt-1">{{ source.name_en }}</p>
         </div>
         <div>
-            <a href="{% url 'px_sources:source_detail' source.pk %}" 
+            <a href="{% url 'px_sources:source_detail' source.pk %}"
                class="inline-flex items-center gap-2 px-4 py-2 border border-slate-200 text-slate-700 rounded-lg hover:bg-slate-50 transition">
                 <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Source" %}
             </a>
@@ -39,53 +55,172 @@
     </div>
 
     <!-- Form Card -->
-    <div class="bg-white rounded-xl shadow-sm border border-slate-200 max-w-3xl">
-        <div class="p-4 border-b border-slate-200 bg-slate-50/50 rounded-t-xl">
-            <h2 class="text-lg font-semibold text-navy flex items-center gap-2">
-                <i data-lucide="settings" class="w-5 h-5 text-slate"></i>
-                {% trans "Source User Details" %}
-            </h2>
+    <div class="bg-white rounded-xl shadow-sm border border-slate-200 max-w-4xl">
+        <!-- Tabs -->
+        <div class="border-b border-slate-200 bg-slate-50/50 rounded-t-xl">
+            <div class="flex gap-6 px-6 pt-4">
+                <button type="button" onclick="switchTab('existing')" id="tab-existing"
+                        class="tab-button active pb-3 px-2 font-semibold text-slate-600 hover:text-navy transition">
+                    <i data-lucide="users" class="w-5 h-5 inline mr-2"></i>
+                    {% trans "Select Existing User" %}
+                </button>
+                <button type="button" onclick="switchTab('new')" id="tab-new"
+                        class="tab-button pb-3 px-2 font-semibold text-slate-600 hover:text-navy transition">
+                    <i data-lucide="user-plus" class="w-5 h-5 inline mr-2"></i>
+                    {% trans "Create New User" %}
+                </button>
+            </div>
         </div>
+
         <div class="p-6">
-            <form method="POST" novalidate>
+            <form method="POST" novalidate id="sourceUserForm">
                 {% csrf_token %}
-                
-                {% if not source_user %}
-                <!-- User Selection (only for new source users) -->
-                <div class="mb-4">
-                    <label for="id_user" class="block text-sm font-semibold text-navy mb-2">
-                        {% trans "User" %} <span class="text-red-500">*</span>
-                    </label>
-                    <select name="user" id="id_user" required
-                            class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20 bg-white">
-                        <option value="">{% trans "Select a user" %}</option>
-                        {% for user in available_users %}
-                            <option value="{{ user.id }}" {% if form.user.value == user.id %}selected{% endif %}>
-                                {{ user.email }} {% if user.get_full_name %}({{ user.get_full_name }}){% endif %}
-                            </option>
-                        {% endfor %}
-                    </select>
-                    <p class="text-slate text-sm mt-1">
-                        {% trans "Select a user to assign as source user. A user can only manage one source." %}
-                    </p>
+
+                <!-- Creation Mode Hidden Field -->
+                <input type="hidden" name="creation_mode" id="creationMode" value="existing">
+
+                <!-- Tab 1: Select Existing User -->
+                <div id="tab-existing-content" class="tab-container active">
+                    <div class="mb-6">
+                        <label for="id_user" class="block text-sm font-semibold text-navy mb-2">
+                            {% trans "Select User" %} <span class="text-red-500">*</span>
+                        </label>
+                        <select name="user" id="id_user"
+                                class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20 bg-white">
+                            <option value="">{% trans "Choose a user..." %}</option>
+                            {% for user in available_users %}
+                                <option value="{{ user.id }}">
+                                    {{ user.email }} 
+                                    {% if user.get_full_name %}
+                                        - {{ user.get_full_name }}
+                                    {% endif %}
+                                    {% if user.groups.first %}
+                                        ({{ user.groups.first.name }})
+                                    {% endif %}
+                                </option>
+                            {% endfor %}
+                        </select>
+                        <p class="text-slate text-sm mt-2">
+                            <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
+                            {% trans "Select an existing user to assign as source user. A user can only manage one source." %}
+                        </p>
+                    </div>
+
+                    <!-- Info Box -->
+                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+                        <div class="flex items-start gap-3">
+                            <i data-lucide="lightbulb" class="w-5 h-5 text-blue-600 mt-0.5"></i>
+                            <div>
+                                <p class="text-sm font-semibold text-blue-800 mb-1">{% trans "Quick Tip" %}</p>
+                                <p class="text-sm text-blue-700">
+                                    {% trans "If you need to create a new user account first, switch to the 'Create New User' tab above." %}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                {% else %}
-                <!-- User Display (for editing) -->
-                <div class="mb-4">
-                    <label class="block text-sm font-semibold text-navy mb-2">{% trans "User" %}</label>
-                    <input type="text" 
-                           value="{{ source_user.user.email }} {% if source_user.user.get_full_name %}({{ source_user.user.get_full_name }}){% endif %}" 
-                           readonly
-                           class="w-full px-4 py-2 border border-slate-200 rounded-lg bg-slate-100 text-slate-600 cursor-not-allowed">
+
+                <!-- Tab 2: Create New User -->
+                <div id="tab-new-content" class="tab-container">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
+                        <!-- Email -->
+                        <div class="md:col-span-2">
+                            <label for="new_email" class="block text-sm font-semibold text-navy mb-2">
+                                {% trans "Email Address" %} <span class="text-red-500">*</span>
+                            </label>
+                            <input type="email" name="new_email" id="new_email" required
+                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
+                                   placeholder="user@example.com">
+                            <p class="text-xs text-slate mt-1">
+                                {% trans "This will be the user's login email" %}
+                            </p>
+                        </div>
+
+                        <!-- First Name -->
+                        <div>
+                            <label for="new_first_name" class="block text-sm font-semibold text-navy mb-2">
+                                {% trans "First Name" %} <span class="text-red-500">*</span>
+                            </label>
+                            <input type="text" name="new_first_name" id="new_first_name" required
+                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
+                                   placeholder="{% trans 'John' %}">
+                        </div>
+
+                        <!-- Last Name -->
+                        <div>
+                            <label for="new_last_name" class="block text-sm font-semibold text-navy mb-2">
+                                {% trans "Last Name" %} <span class="text-red-500">*</span>
+                            </label>
+                            <input type="text" name="new_last_name" id="new_last_name" required
+                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
+                                   placeholder="{% trans 'Doe' %}">
+                        </div>
+
+                        <!-- Phone -->
+                        <div>
+                            <label for="new_phone" class="block text-sm font-semibold text-navy mb-2">
+                                {% trans "Phone Number" %}
+                            </label>
+                            <input type="tel" name="new_phone" id="new_phone"
+                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
+                                   placeholder="+966 XX XXX XXXX">
+                        </div>
+
+                        <!-- Employee ID -->
+                        <div>
+                            <label for="new_employee_id" class="block text-sm font-semibold text-navy mb-2">
+                                {% trans "Employee ID" %}
+                            </label>
+                            <input type="text" name="new_employee_id" id="new_employee_id"
+                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
+                                   placeholder="{% trans 'Optional' %}">
+                        </div>
+
+                        <!-- Password -->
+                        <div>
+                            <label for="new_password" class="block text-sm font-semibold text-navy mb-2">
+                                {% trans "Password" %} <span class="text-red-500">*</span>
+                            </label>
+                            <input type="password" name="new_password" id="new_password" required minlength="8"
+                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
+                                   placeholder="••••••••">
+                            <p class="text-xs text-slate mt-1">
+                                {% trans "Minimum 8 characters" %}
+                            </p>
+                        </div>
+
+                        <!-- Confirm Password -->
+                        <div>
+                            <label for="new_password_confirm" class="block text-sm font-semibold text-navy mb-2">
+                                {% trans "Confirm Password" %} <span class="text-red-500">*</span>
+                            </label>
+                            <input type="password" name="new_password_confirm" id="new_password_confirm" required minlength="8"
+                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
+                                   placeholder="••••••••">
+                        </div>
+                    </div>
+
+                    <!-- Info Box -->
+                    <div class="bg-emerald-50 border border-emerald-200 rounded-lg p-4 mb-6">
+                        <div class="flex items-start gap-3">
+                            <i data-lucide="shield-check" class="w-5 h-5 text-emerald-600 mt-0.5"></i>
+                            <div>
+                                <p class="text-sm font-semibold text-emerald-800 mb-1">{% trans "Auto-Assignment" %}</p>
+                                <p class="text-sm text-emerald-700">
+                                    {% trans "The new user will be automatically assigned the PX Admin role and linked to this source." %}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                {% endif %}
+
+                <div class="border-t border-slate-200 my-6"></div>
 
                 <!-- Status -->
                 <div class="mb-6">
                     <label class="block text-sm font-semibold text-navy mb-2">{% trans "Status" %}</label>
                     <label class="flex items-center gap-3 cursor-pointer">
-                        <input type="checkbox" name="is_active" id="id_is_active" 
-                               {% if source_user.is_active|default:True %}checked{% endif %}
+                        <input type="checkbox" name="is_active" id="id_is_active" checked
                                class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-blue">
                         <span class="text-navy font-medium">{% trans "Active" %}</span>
                     </label>
@@ -102,16 +237,14 @@
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                     <div>
                         <label class="flex items-center gap-3 cursor-pointer">
-                            <input type="checkbox" name="can_create_complaints" id="id_can_create_complaints" 
-                                   {% if source_user.can_create_complaints|default:True %}checked{% endif %}
+                            <input type="checkbox" name="can_create_complaints" id="id_can_create_complaints" checked
                                    class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-blue">
                             <span class="text-navy">{% trans "Can create complaints" %}</span>
                         </label>
                     </div>
                     <div>
                         <label class="flex items-center gap-3 cursor-pointer">
-                            <input type="checkbox" name="can_create_inquiries" id="id_can_create_inquiries" 
-                                   {% if source_user.can_create_inquiries|default:True %}checked{% endif %}
+                            <input type="checkbox" name="can_create_inquiries" id="id_can_create_inquiries" checked
                                    class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-blue">
                             <span class="text-navy">{% trans "Can create inquiries" %}</span>
                         </label>
@@ -128,12 +261,12 @@
 
                 <!-- Submit Buttons -->
                 <div class="border-t border-slate-200 pt-4 flex gap-3">
-                    <button type="submit" 
-                            class="inline-flex items-center gap-2 px-6 py-2 bg-navy text-white rounded-lg hover:bg-blue transition shadow-lg shadow-navy/20">
-                        <i data-lucide="check" class="w-4 h-4"></i> {% trans "Save" %}
+                    <button type="submit"
+                            class="inline-flex items-center gap-2 px-6 py-3 bg-navy text-white rounded-lg hover:bg-blue transition shadow-lg shadow-navy/20 font-semibold">
+                        <i data-lucide="check" class="w-4 h-4"></i> {% trans "Create Source User" %}
                     </button>
-                    <a href="{% url 'px_sources:source_detail' source.pk %}" 
-                       class="inline-flex items-center gap-2 px-6 py-2 border border-slate-200 text-slate-700 rounded-lg hover:bg-slate-50 transition">
+                    <a href="{% url 'px_sources:source_detail' source.pk %}"
+                       class="inline-flex items-center gap-2 px-6 py-3 border border-slate-200 text-slate-700 rounded-lg hover:bg-slate-50 transition font-semibold">
                         <i data-lucide="x" class="w-4 h-4"></i> {% trans "Cancel" %}
                     </a>
                 </div>
@@ -145,6 +278,108 @@
 <script>
 document.addEventListener('DOMContentLoaded', function() {
     lucide.createIcons();
+    
+    // Form validation
+    const form = document.getElementById('sourceUserForm');
+    form.addEventListener('submit', function(e) {
+        const mode = document.getElementById('creationMode').value;
+        
+        if (mode === 'existing') {
+            const userSelect = document.getElementById('id_user');
+            if (!userSelect.value) {
+                e.preventDefault();
+                showAlert('error', '{% trans "Please select a user" %}');
+                userSelect.focus();
+                return false;
+            }
+        } else {
+            // Validate new user fields
+            const email = document.getElementById('new_email').value;
+            const firstName = document.getElementById('new_first_name').value;
+            const lastName = document.getElementById('new_last_name').value;
+            const password = document.getElementById('new_password').value;
+            const passwordConfirm = document.getElementById('new_password_confirm').value;
+            
+            if (!email || !firstName || !lastName || !password) {
+                e.preventDefault();
+                showAlert('error', '{% trans "Please fill in all required fields" %}');
+                return false;
+            }
+            
+            if (password.length < 8) {
+                e.preventDefault();
+                showAlert('error', '{% trans "Password must be at least 8 characters" %}');
+                document.getElementById('new_password').focus();
+                return false;
+            }
+            
+            if (password !== passwordConfirm) {
+                e.preventDefault();
+                showAlert('error', '{% trans "Passwords do not match" %}');
+                document.getElementById('new_password_confirm').focus();
+                return false;
+            }
+        }
+    });
 });
+
+function switchTab(tab) {
+    // Update hidden field
+    document.getElementById('creationMode').value = tab;
+    
+    // Update tab buttons
+    document.querySelectorAll('.tab-button').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    document.getElementById('tab-' + tab).classList.add('active');
+    
+    // Update tab content
+    document.querySelectorAll('.tab-container').forEach(content => {
+        content.classList.remove('active');
+    });
+    document.getElementById('tab-' + tab + '-content').classList.add('active');
+    
+    // Toggle required attributes
+    const existingFields = ['id_user'];
+    const newFields = ['new_email', 'new_first_name', 'new_last_name', 'new_password', 'new_password_confirm'];
+    
+    if (tab === 'existing') {
+        existingFields.forEach(id => {
+            document.getElementById(id).setAttribute('required', 'required');
+        });
+        newFields.forEach(id => {
+            document.getElementById(id).removeAttribute('required');
+        });
+    } else {
+        existingFields.forEach(id => {
+            document.getElementById(id).removeAttribute('required');
+        });
+        newFields.forEach(id => {
+            document.getElementById(id).setAttribute('required', 'required');
+        });
+    }
+}
+
+function showAlert(type, message) {
+    const alertClass = type === 'success' ? 'bg-emerald-500' : 'bg-red-500';
+    const icon = type === 'success' ? 'check-circle' : 'alert-circle';
+    
+    const alert = document.createElement('div');
+    alert.className = `${alertClass} text-white px-6 py-4 rounded-xl shadow-xl z-50 flex items-center gap-3 fixed top-4 right-4`;
+    alert.innerHTML = `
+        <i data-lucide="${icon}" class="w-5 h-5"></i>
+        <span class="font-semibold">${message}</span>
+        <button type="button" onclick="this.parentElement.remove()" class="text-white/80 hover:text-white">
+            <i data-lucide="x" class="w-4 h-4"></i>
+        </button>
+    `;
+    
+    document.body.appendChild(alert);
+    lucide.createIcons();
+    
+    setTimeout(() => {
+        alert.remove();
+    }, 5000);
+}
 </script>
 {% endblock %}
diff --git a/templates/px_sources/source_user_inquiry_list.html b/templates/px_sources/source_user_inquiry_list.html
index b4ab25b..a3ea1d1 100644
--- a/templates/px_sources/source_user_inquiry_list.html
+++ b/templates/px_sources/source_user_inquiry_list.html
@@ -3,23 +3,39 @@
 
 {% block title %}{% trans "My Inquiries" %} - {{ source.name_en }}{% endblock %}
 
+{% block extra_css %}
+<style>
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-in {
+        animation: fadeIn 0.5s ease-out forwards;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="p-6">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Page Header -->
-    <div class="flex flex-wrap justify-between items-center gap-4 mb-6">
-        <div>
-            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
-                <i data-lucide="help-circle" class="w-8 h-8 text-cyan-500"></i>
-                {% trans "My Inquiries" %}
-                <span class="inline-flex items-center px-3 py-1 bg-blue text-white rounded-full text-sm font-medium">{{ inquiries_count }}</span>
-            </h1>
-            <p class="text-slate mt-1">
-                {% trans "View all inquiries from your source" %}
-            </p>
+    <div class="flex flex-wrap justify-between items-center gap-4 mb-8 animate-in">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-2xl shadow-lg shadow-cyan-200">
+                <i data-lucide="help-circle" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% trans "My Inquiries" %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% trans "View all inquiries from your source" %}
+                    <span class="inline-flex items-center px-2.5 py-0.5 bg-cyan-500 text-white rounded-full text-xs font-bold ml-2">{{ inquiries_count }}</span>
+                </p>
+            </div>
         </div>
         {% if source_user.can_create_inquiries %}
-        <a href="{% url 'complaints:inquiry_create' %}" 
-           class="inline-flex items-center gap-2 px-4 py-2 bg-navy text-white rounded-lg hover:bg-blue transition shadow-lg shadow-navy/20">
+        <a href="{% url 'complaints:inquiry_create' %}"
+           class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-xl font-semibold hover:from-cyan-600 hover:to-blue-600 transition shadow-lg shadow-cyan-200">
             <i data-lucide="plus-circle" class="w-4 h-4"></i>
             {% trans "Create Inquiry" %}
         </a>
@@ -27,30 +43,32 @@
     </div>
 
     <!-- Filter Panel -->
-    <div class="bg-white rounded-xl shadow-sm border border-slate-200 mb-6">
-        <div class="p-4 border-b border-slate-200 bg-slate-50/50 rounded-t-xl">
-            <h2 class="text-sm font-semibold text-navy flex items-center gap-2">
-                <i data-lucide="filter" class="w-4 h-4 text-slate"></i>
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 mb-8 animate-in">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <h2 class="text-sm font-bold text-navy flex items-center gap-2">
+                <i data-lucide="filter" class="w-4 h-4 text-blue"></i>
                 {% trans "Filters" %}
             </h2>
         </div>
-        <div class="p-4">
-            <form method="get" class="grid grid-cols-1 md:grid-cols-12 gap-4">
+        <div class="p-6">
+            <form method="get" class="grid grid-cols-1 md:grid-cols-12 gap-5">
                 <!-- Search -->
                 <div class="md:col-span-5">
-                    <label class="block text-sm font-medium text-slate mb-1">{% trans "Search" %}</label>
-                    <input type="text" 
-                           class="w-full px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue focus:border-blue outline-none transition" 
-                           name="search"
-                           placeholder="{% trans 'Subject, contact name...' %}"
-                           value="{{ search|default:'' }}">
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Search" %}</label>
+                    <div class="relative">
+                        <input type="text"
+                               class="w-full pl-10 pr-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                               name="search"
+                               placeholder="{% trans 'Subject, contact name...' %}"
+                               value="{{ search|default:'' }}">
+                        <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate"></i>
+                    </div>
                 </div>
 
                 <!-- Status -->
                 <div class="md:col-span-3">
-                    <label class="block text-sm font-medium text-slate mb-1">{% trans "Status" %}</label>
-                    <select class="w-full px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue focus:border-blue outline-none transition bg-white" 
-                            name="status">
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Status" %}</label>
+                    <select class="w-full px-3 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
                         <option value="">{% trans "All Statuses" %}</option>
                         <option value="open" {% if status_filter == 'open' %}selected{% endif %}>{% trans "Open" %}</option>
                         <option value="in_progress" {% if status_filter == 'in_progress' %}selected{% endif %}>{% trans "In Progress" %}</option>
@@ -61,16 +79,13 @@
 
                 <!-- Category -->
                 <div class="md:col-span-2">
-                    <label class="block text-sm font-medium text-slate mb-1">{% trans "Category" %}</label>
-                    <select class="w-full px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue focus:border-blue outline-none transition bg-white" 
-                            name="category">
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Category" %}</label>
+                    <select class="w-full px-3 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
                         <option value="">{% trans "All Categories" %}</option>
                         <option value="clinical_care" {% if category_filter == 'clinical_care' %}selected{% endif %}>{% trans "Clinical Care" %}</option>
                         <option value="staff_behavior" {% if category_filter == 'staff_behavior' %}selected{% endif %}>{% trans "Staff Behavior" %}</option>
-                        <option value="facility" {% if category_filter == 'facility' %}selected{% endif %}>{% trans "Facility & Environment" %}</option>
-                        <option value="wait_time" {% if category_filter == 'wait_time' %}selected{% endif %}>{% trans "Wait Time" %}</option>
+                        <option value="facility" {% if category_filter == 'facility' %}selected{% endif %}>{% trans "Facility" %}</option>
                         <option value="billing" {% if category_filter == 'billing' %}selected{% endif %}>{% trans "Billing" %}</option>
-                        <option value="communication" {% if category_filter == 'communication' %}selected{% endif %}>{% trans "Communication" %}</option>
                         <option value="other" {% if category_filter == 'other' %}selected{% endif %}>{% trans "Other" %}</option>
                     </select>
                 </div>
@@ -78,14 +93,15 @@
                 <!-- Actions -->
                 <div class="md:col-span-2 flex items-end">
                     <div class="flex gap-2 w-full">
-                        <button type="submit" 
-                                class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-navy text-white rounded-lg hover:bg-blue transition flex-grow">
+                        <button type="submit"
+                                class="inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-gradient-to-r from-navy to-blue text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition flex-grow shadow-lg shadow-blue-200">
                             <i data-lucide="search" class="w-4 h-4"></i>
                             {% trans "Filter" %}
                         </button>
-                        <a href="{% url 'px_sources:source_user_inquiry_list' %}" 
-                           class="inline-flex items-center justify-center p-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate">
-                            <i data-lucide="x-circle" class="w-4 h-4"></i>
+                        <a href="{% url 'px_sources:source_user_inquiry_list' %}"
+                           class="inline-flex items-center justify-center p-2.5 border-2 border-slate-200 text-slate rounded-xl hover:bg-slate-50 transition"
+                           title="{% trans 'Clear filters' %}">
+                            <i data-lucide="x-circle" class="w-5 h-5"></i>
                         </a>
                     </div>
                 </div>
@@ -94,149 +110,121 @@
     </div>
 
     <!-- Inquiries Table -->
-    <div class="bg-white rounded-xl shadow-sm border border-slate-200">
-        <div class="p-4 border-b border-slate-200 bg-slate-50/50 rounded-t-xl">
-            <h2 class="text-lg font-semibold text-navy flex items-center gap-2">
-                <i data-lucide="help-circle" class="w-5 h-5 text-slate"></i>
-                {% trans "Inquiries List" %}
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden animate-in">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <h2 class="text-lg font-bold text-navy flex items-center gap-2">
+                <i data-lucide="help-circle" class="w-5 h-5 text-cyan-500"></i>
+                {% trans "All Inquiries" %}
+                <span class="inline-flex items-center px-2.5 py-0.5 bg-cyan-100 text-cyan-700 rounded-full text-xs font-bold ml-2">{{ inquiries_count }}</span>
             </h2>
         </div>
         <div class="overflow-x-auto">
             <table class="w-full">
-                <thead>
-                    <tr class="border-b border-slate-200">
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "ID" %}</th>
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Subject" %}</th>
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Contact" %}</th>
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Category" %}</th>
-                        <th class="text-center py-3 px-4 text-sm font-semibold text-navy">{% trans "Status" %}</th>
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Assigned To" %}</th>
-                        <th class="text-left py-3 px-4 text-sm font-semibold text-navy">{% trans "Created" %}</th>
-                        <th class="text-center py-3 px-4 text-sm font-semibold text-navy">{% trans "Actions" %}</th>
+                <thead class="bg-blue-50">
+                    <tr>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Reference" %}</th>
+                        <th class="text-left py-4 px-6 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Subject" %}</th>
+                        <th class="text-left py-4 px-6 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "From" %}</th>
+                        <th class="text-left py-4 px-6 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Contact" %}</th>
+                        <th class="text-center py-4 px-6 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Status" %}</th>
+                        <th class="text-left py-4 px-6 text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Created" %}</th>
                     </tr>
                 </thead>
-                <tbody class="divide-y divide-slate-100">
+                <tbody class="divide-y divide-blue-50">
                     {% for inquiry in inquiries %}
-                    <tr class="hover:bg-slate-50 transition">
-                        <td class="py-3 px-4 text-sm font-mono text-slate">{{ inquiry.id|slice:":8" }}</td>
-                        <td class="py-3 px-4">
-                            <a href="{% url 'complaints:inquiry_detail' inquiry.pk %}" 
+                    <tr class="hover:bg-blue-50/50 transition">
+                        <td class="px-6 py-4 text-sm font-mono text-slate font-medium">{{ inquiry.reference_number|default:inquiry.id|truncatechars:12 }}</td>
+                        <td class="px-6 py-4">
+                            <a href="{% url 'complaints:inquiry_detail' inquiry.pk %}"
                                class="text-navy font-semibold hover:text-blue transition">
-                                {{ inquiry.subject|truncatewords:8 }}
+                                {{ inquiry.subject|truncatechars:35 }}
                             </a>
                         </td>
-                        <td class="py-3 px-4">
-                            {% if inquiry.patient %}
-                                <div class="font-medium text-slate">{{ inquiry.patient.get_full_name }}</div>
-                                <div class="text-xs text-slate/70">{% trans "MRN" %}: {{ inquiry.patient.mrn }}</div>
-                            {% else %}
-                                <div class="font-medium text-slate">{{ inquiry.contact_name|default:"-" }}</div>
-                                <div class="text-xs text-slate/70">{{ inquiry.contact_email|default:"-" }}</div>
-                            {% endif %}
+                        <td class="px-6 py-4 text-sm text-slate">{{ inquiry.contact_name|default:"-" }}</td>
+                        <td class="px-6 py-4 text-sm text-slate">
+                            {% if inquiry.contact_email %}
+                            <i data-lucide="mail" class="w-3 h-3 inline mr-1"></i>
+                            {{ inquiry.contact_email|truncatechars:20 }}
+                            {% elif inquiry.contact_phone %}
+                            <i data-lucide="phone" class="w-3 h-3 inline mr-1"></i>
+                            {{ inquiry.contact_phone }}
+                            {% else %}-{% endif %}
                         </td>
-                        <td class="py-3 px-4">
-                            <span class="inline-flex items-center px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs font-medium">
-                                {{ inquiry.get_category_display }}
-                            </span>
-                        </td>
-                        <td class="py-3 px-4 text-center">
+                        <td class="px-6 py-4 text-center">
                             {% if inquiry.status == 'open' %}
-                                <span class="inline-flex items-center px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs font-medium">{% trans "Open" %}</span>
+                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-700">
+                                    <i data-lucide="circle" class="w-2 h-2 fill-current"></i>
+                                    {% trans "Open" %}
+                                </span>
                             {% elif inquiry.status == 'in_progress' %}
-                                <span class="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-medium">{% trans "In Progress" %}</span>
+                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">
+                                    <i data-lucide="loader" class="w-2 h-2"></i>
+                                    {% trans "In Progress" %}
+                                </span>
                             {% elif inquiry.status == 'resolved' %}
-                                <span class="inline-flex items-center px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">{% trans "Resolved" %}</span>
+                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
+                                    <i data-lucide="check-circle" class="w-2 h-2"></i>
+                                    {% trans "Resolved" %}
+                                </span>
                             {% else %}
-                                <span class="inline-flex items-center px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs font-medium">{% trans "Closed" %}</span>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">{{ inquiry.get_status_display }}</span>
                             {% endif %}
                         </td>
-                        <td class="py-3 px-4 text-sm text-slate">
-                            {% if inquiry.assigned_to %}
-                                {{ inquiry.assigned_to.get_full_name }}
-                            {% else %}
-                                <span class="text-slate/60 italic">{% trans "Unassigned" %}</span>
-                            {% endif %}
-                        </td>
-                        <td class="py-3 px-4 text-sm text-slate">{{ inquiry.created_at|date:"Y-m-d" }}</td>
-                        <td class="py-3 px-4 text-center">
-                            <a href="{% url 'complaints:inquiry_detail' inquiry.pk %}" 
-                               class="inline-flex items-center justify-center p-2 bg-blue text-white rounded-lg hover:bg-navy transition" 
-                               title="{% trans 'View' %}">
-                                <i data-lucide="eye" class="w-4 h-4"></i>
-                            </a>
-                        </td>
+                        <td class="px-6 py-4 text-sm text-slate">{{ inquiry.created_at|date:"M d, Y" }}</td>
                     </tr>
                     {% empty %}
                     <tr>
-                        <td colspan="8" class="text-center py-12">
-                            <i data-lucide="inbox" class="w-16 h-16 mx-auto text-slate/30 mb-4"></i>
-                            <p class="text-slate mb-4">{% trans "No inquiries found for your source." %}</p>
-                            {% if source_user.can_create_inquiries %}
-                            <a href="{% url 'complaints:inquiry_create' %}" 
-                               class="inline-flex items-center gap-2 px-4 py-2 bg-navy text-white rounded-lg hover:bg-blue transition">
-                                <i data-lucide="plus-circle" class="w-4 h-4"></i>
-                                {% trans "Create Inquiry" %}
-                            </a>
-                            {% endif %}
+                        <td colspan="6" class="px-6 py-12 text-center">
+                            <div class="flex flex-col items-center">
+                                <div class="w-16 h-16 bg-gradient-to-br from-cyan-100 to-blue-100 rounded-full flex items-center justify-center mb-4">
+                                    <i data-lucide="help-circle" class="w-8 h-8 text-cyan-500"></i>
+                                </div>
+                                <p class="text-slate font-medium">{% trans "No inquiries found" %}</p>
+                                {% if source_user.can_create_inquiries %}
+                                <a href="{% url 'complaints:inquiry_create' %}" class="mt-3 text-blue font-semibold hover:underline">
+                                    {% trans "Create your first inquiry" %}
+                                </a>
+                                {% endif %}
+                            </div>
                         </td>
                     </tr>
                     {% endfor %}
                 </tbody>
             </table>
         </div>
-    </div>
 
-    <!-- Pagination -->
-    {% if inquiries.has_other_pages %}
-    <nav aria-label="Inquiries pagination" class="mt-6">
-        <ul class="flex justify-center items-center gap-2">
-            {% if inquiries.has_previous %}
-            <li>
-                <a class="inline-flex items-center justify-center w-10 h-10 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate" 
-                   href="?page=1&search={{ search }}&status={{ status_filter }}&category={{ category_filter }}">
-                    <i data-lucide="chevrons-left" class="w-4 h-4"></i>
-                </a>
-            </li>
-            <li>
-                <a class="inline-flex items-center justify-center w-10 h-10 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate" 
-                   href="?page={{ inquiries.previous_page_number }}&search={{ search }}&status={{ status_filter }}&category={{ category_filter }}">
-                    <i data-lucide="chevron-left" class="w-4 h-4"></i>
-                </a>
-            </li>
-            {% endif %}
-
-            {% for num in inquiries.paginator.page_range %}
-                {% if inquiries.number == num %}
-                <li>
-                    <span class="inline-flex items-center justify-center w-10 h-10 bg-navy text-white rounded-lg font-medium">{{ num }}</span>
-                </li>
-                {% elif num > inquiries.number|add:'-3' and num < inquiries.number|add:'3' %}
-                <li>
-                    <a class="inline-flex items-center justify-center w-10 h-10 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate" 
-                       href="?page={{ num }}&search={{ search }}&status={{ status_filter }}&category={{ category_filter }}">
-                        {{ num }}
+        <!-- Pagination -->
+        {% if inquiries.has_other_pages %}
+        <div class="px-6 py-4 border-t border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <div class="flex items-center justify-between">
+                <p class="text-sm text-slate">
+                    {% blocktrans with start=inquiries.start_index end=inquiries.end_index total=inquiries.paginator.count %}
+                    Showing {{ start }} to {{ end }} of {{ total }} inquiries
+                    {% endblocktrans %}
+                </p>
+                <div class="flex gap-2">
+                    {% if inquiries.has_previous %}
+                    <a href="?page={{ inquiries.previous_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if search %}&search={{ search }}{% endif %}"
+                       class="px-4 py-2 border-2 border-blue-200 text-blue rounded-xl font-semibold hover:bg-blue-50 transition">
+                        {% trans "Previous" %}
                     </a>
-                </li>
-                {% endif %}
-            {% endfor %}
+                    {% endif %}
 
-            {% if inquiries.has_next %}
-            <li>
-                <a class="inline-flex items-center justify-center w-10 h-10 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate" 
-                   href="?page={{ inquiries.next_page_number }}&search={{ search }}&status={{ status_filter }}&category={{ category_filter }}">
-                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
-                </a>
-            </li>
-            <li>
-                <a class="inline-flex items-center justify-center w-10 h-10 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-slate" 
-                   href="?page={{ inquiries.paginator.num_pages }}&search={{ search }}&status={{ status_filter }}&category={{ category_filter }}">
-                    <i data-lucide="chevrons-right" class="w-4 h-4"></i>
-                </a>
-            </li>
-            {% endif %}
-        </ul>
-    </nav>
-    {% endif %}
+                    <span class="px-4 py-2 bg-navy text-white rounded-xl font-semibold">
+                        {% blocktrans with num=inquiries.number total=inquiries.paginator.num_pages %}Page {{ num }} of {{ total }}{% endblocktrans %}
+                    </span>
+
+                    {% if inquiries.has_next %}
+                    <a href="?page={{ inquiries.next_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if search %}&search={{ search }}{% endif %}"
+                       class="px-4 py-2 border-2 border-blue-200 text-blue rounded-xl font-semibold hover:bg-blue-50 transition">
+                        {% trans "Next" %}
+                    </a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+    </div>
 </div>
 
 <script>
diff --git a/templates/references/dashboard.html b/templates/references/dashboard.html
index eb2d1e1..edfffc1 100644
--- a/templates/references/dashboard.html
+++ b/templates/references/dashboard.html
@@ -3,111 +3,215 @@
 
 {% block title %}{% trans "Reference Section" %} - {% trans "PX360" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    /* PX360 App Theme Variables */
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    /* Page Header */
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    /* Section Cards */
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Stats Cards */
+    .stat-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        padding: 1.5rem;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s ease;
+    }
+    .stat-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        border-color: #005696;
+    }
+
+    /* Folder Cards */
+    .folder-card {
+        background: white;
+        border: 2px solid #e2e8f0;
+        border-radius: 0.75rem;
+        padding: 1rem;
+        transition: all 0.3s ease;
+        text-decoration: none;
+        color: inherit;
+        display: block;
+    }
+    .folder-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 12px 24px -8px rgba(0, 86, 150, 0.2);
+        border-color: #005696;
+    }
+
+    /* Document Rows */
+    .document-row {
+        display: flex;
+        align-items: center;
+        padding: 1rem;
+        transition: all 0.2s ease;
+        text-decoration: none;
+        color: inherit;
+    }
+    .document-row:hover {
+        background-color: #f8fafc;
+    }
+
+    /* Button Transitions */
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+
+    /* Empty State */
+    .empty-state {
+        text-align: center;
+        padding: 3rem;
+    }
+    .empty-state-icon {
+        width: 64px;
+        height: 64px;
+        margin: 0 auto 1rem;
+        color: #cbd5e1;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
+<div class="px-6 py-4">
     <!-- Page Header -->
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% trans "Reference Section" %}</h1>
-            <p class="text-muted small mb-0">{% trans "Access and manage reference documents" %}</p>
-        </div>
-        <div class="d-flex gap-2">
-            <a href="{% url 'references:search' %}" class="btn btn-outline-primary">
-                <i class="fas fa-search me-2"></i>{% trans "Search" %}
-            </a>
-            <a href="{% url 'references:folder_create' %}" class="btn btn-primary">
-                <i class="fas fa-folder-plus me-2"></i>{% trans "New Folder" %}
-            </a>
-            <a href="{% url 'references:document_create' %}" class="btn btn-success">
-                <i class="fas fa-upload me-2"></i>{% trans "Upload Document" %}
-            </a>
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Reference Section" %}</h1>
+                <p class="text-blue-100 text-sm">{% trans "Access and manage reference documents" %}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'references:search' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="search" class="w-4 h-4 me-2"></i>{% trans "Search" %}
+                </a>
+                <a href="{% url 'references:folder_create' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white text-navy font-medium rounded-xl hover:bg-blue-50 transition">
+                    <i data-lucide="folder-plus" class="w-4 h-4 me-2"></i>{% trans "New Folder" %}
+                </a>
+                <a href="{% url 'references:document_create' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                    <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload" %}
+                </a>
+            </div>
         </div>
     </div>
 
     <!-- Statistics Cards -->
-    <div class="row mb-4">
-        <div class="col-md-6">
-            <div class="card">
-                <div class="card-body">
-                    <div class="d-flex align-items-center">
-                        <div class="flex-shrink-0">
-                            <div class="bg-primary bg-opacity-10 rounded-3 p-3">
-                                <i class="fas fa-folder text-primary fa-2x"></i>
-                            </div>
-                        </div>
-                        <div class="flex-grow-1 ms-3">
-                            <h6 class="text-muted mb-1">{% trans "Total Folders" %}</h6>
-                            <h2 class="mb-0">{{ total_folders }}</h2>
-                        </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+        <div class="stat-card">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <div class="w-14 h-14 bg-navy/10 rounded-xl flex items-center justify-center">
+                        <i data-lucide="folder" class="w-7 h-7 text-navy"></i>
                     </div>
                 </div>
+                <div class="ml-4">
+                    <h6 class="text-slate-500 text-sm font-medium mb-1">{% trans "Total Folders" %}</h6>
+                    <h2 class="text-3xl font-bold text-gray-800">{{ total_folders }}</h2>
+                </div>
             </div>
         </div>
-        <div class="col-md-6">
-            <div class="card">
-                <div class="card-body">
-                    <div class="d-flex align-items-center">
-                        <div class="flex-shrink-0">
-                            <div class="bg-success bg-opacity-10 rounded-3 p-3">
-                                <i class="fas fa-file-alt text-success fa-2x"></i>
-                            </div>
-                        </div>
-                        <div class="flex-grow-1 ms-3">
-                            <h6 class="text-muted mb-1">{% trans "Total Documents" %}</h6>
-                            <h2 class="mb-0">{{ total_documents }}</h2>
-                        </div>
+        <div class="stat-card">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <div class="w-14 h-14 bg-green-500/10 rounded-xl flex items-center justify-center">
+                        <i data-lucide="file-text" class="w-7 h-7 text-green-600"></i>
                     </div>
                 </div>
+                <div class="ml-4">
+                    <h6 class="text-slate-500 text-sm font-medium mb-1">{% trans "Total Documents" %}</h6>
+                    <h2 class="text-3xl font-bold text-gray-800">{{ total_documents }}</h2>
+                </div>
             </div>
         </div>
     </div>
 
-    <div class="row">
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <!-- Folders -->
-        <div class="col-lg-8">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="mb-0">{% trans "Folders" %}</h5>
+        <div class="lg:col-span-2">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-navy/10">
+                        <i data-lucide="folder" class="w-5 h-5 text-navy"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Folders" %}</h5>
                 </div>
-                <div class="card-body">
+                <div class="p-4">
                     {% if folders %}
-                        <div class="row">
+                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                             {% for folder in folders %}
-                                <div class="col-md-6 col-lg-4 mb-3">
-                                    <a href="{% url 'references:folder_view' folder.id %}" class="card h-100 text-decoration-none text-dark folder-card">
-                                        <div class="card-body">
-                                            <div class="d-flex align-items-center mb-2">
-                                                <div class="flex-shrink-0">
-                                                    {% if folder.icon %}
-                                                        <i class="{{ folder.icon }} fa-2x text-primary"></i>
-                                                    {% else %}
-                                                        <i class="fas fa-folder fa-2x text-primary"></i>
-                                                    {% endif %}
-                                                </div>
-                                                <div class="flex-grow-1 ms-3">
-                                                    <h6 class="mb-0">{{ folder.name }}</h6>
-                                                    <small class="text-muted">{{ folder.document_count }} {% trans "documents" %}</small>
-                                                </div>
-                                            </div>
-                                            {% if folder.description %}
-                                                <p class="small text-muted mb-0">{{ folder.description|truncatewords:10 }}</p>
+                                <a href="{% url 'references:folder_view' folder.id %}" class="folder-card">
+                                    <div class="flex items-center mb-2">
+                                        <div class="flex-shrink-0">
+                                            {% if folder.icon %}
+                                                <i class="{{ folder.icon }} w-8 h-8 text-navy"></i>
+                                            {% else %}
+                                                <i data-lucide="folder" class="w-8 h-8 text-navy"></i>
                                             {% endif %}
                                         </div>
-                                    </a>
-                                </div>
-                            {% empty %}
-                                <p class="text-muted text-center py-5">
-                                    <i class="fas fa-folder-open fa-3x mb-3 d-block text-muted"></i>
-                                    {% trans "No folders yet. Create your first folder to get started." %}
-                                </p>
+                                        <div class="ml-3">
+                                            <h6 class="font-semibold text-gray-800 text-sm">{{ folder.name }}</h6>
+                                            <small class="text-slate-500 text-xs">{{ folder.document_count }} {% trans "documents" %}</small>
+                                        </div>
+                                    </div>
+                                    {% if folder.description %}
+                                        <p class="text-slate-500 text-xs">{{ folder.description|truncatewords:8 }}</p>
+                                    {% endif %}
+                                </a>
                             {% endfor %}
                         </div>
                     {% else %}
-                        <div class="text-center py-5">
-                            <i class="fas fa-folder-open fa-3x mb-3 text-muted"></i>
-                            <p class="text-muted mb-3">{% trans "No folders yet" %}</p>
-                            <a href="{% url 'references:folder_create' %}" class="btn btn-primary">
-                                <i class="fas fa-plus me-2"></i>{% trans "Create Folder" %}
+                        <div class="empty-state">
+                            <i data-lucide="folder-open" class="empty-state-icon"></i>
+                            <p class="text-slate-500 mb-4">{% trans "No folders yet. Create your first folder to get started." %}</p>
+                            <a href="{% url 'references:folder_create' %}" class="btn-transition inline-flex items-center px-4 py-2 bg-navy text-white font-medium rounded-lg hover:bg-blue transition">
+                                <i data-lucide="plus" class="w-4 h-4 me-2"></i>{% trans "Create Folder" %}
                             </a>
                         </div>
                     {% endif %}
@@ -116,47 +220,43 @@
         </div>
 
         <!-- Recent Documents -->
-        <div class="col-lg-4">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="mb-0">{% trans "Recent Documents" %}</h5>
+        <div class="lg:col-span-1">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-blue/10">
+                        <i data-lucide="file-clock" class="w-5 h-5 text-blue"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Recent Documents" %}</h5>
                 </div>
-                <div class="card-body">
+                <div class="p-0">
                     {% if recent_documents %}
-                        <div class="list-group list-group-flush">
+                        <div class="divide-y divide-gray-100">
                             {% for document in recent_documents %}
-                                <a href="{% url 'references:document_view' document.id %}" class="list-group-item list-group-item-action text-decoration-none">
-                                    <div class="d-flex align-items-center">
-                                        <div class="flex-shrink-0">
-                                            <i class="{{ document.get_file_icon }} fa-lg"></i>
-                                        </div>
-                                        <div class="flex-grow-1 ms-3">
-                                            <h6 class="mb-1 small">{{ document.title|truncatechars:40 }}</h6>
-                                            <small class="text-muted">{{ document.get_file_size_display }}</small>
-                                        </div>
+                                <a href="{% url 'references:document_view' document.id %}" class="document-row">
+                                    <div class="flex-shrink-0">
+                                        <i class="{{ document.get_file_icon }} w-8 h-8 text-blue"></i>
+                                    </div>
+                                    <div class="ml-3 flex-1 min-w-0">
+                                        <h6 class="font-medium text-gray-800 text-sm truncate">{{ document.title|truncatechars:35 }}</h6>
+                                        <small class="text-slate-500 text-xs">{{ document.get_file_size_display }}</small>
                                     </div>
                                 </a>
                             {% endfor %}
                         </div>
-                        <a href="{% url 'references:search' %}" class="btn btn-outline-primary btn-sm w-100 mt-3">
-                            {% trans "View All Documents" %}
-                        </a>
+                        <div class="p-4 border-t border-gray-100">
+                            <a href="{% url 'references:search' %}" class="btn-transition w-full inline-flex justify-center items-center px-4 py-2 bg-white border-2 border-navy text-navy font-medium rounded-lg hover:bg-navy hover:text-white transition text-sm">
+                                {% trans "View All Documents" %}
+                            </a>
+                        </div>
                     {% else %}
-                        <p class="text-muted text-center py-4">
-                            {% trans "No documents uploaded yet" %}
-                        </p>
+                        <div class="empty-state">
+                            <i data-lucide="file-text" class="w-12 h-12 mx-auto mb-3 text-slate-300"></i>
+                            <p class="text-slate-500 text-sm">{% trans "No documents uploaded yet" %}</p>
+                        </div>
                     {% endif %}
                 </div>
             </div>
         </div>
     </div>
 </div>
-
-<style>
-.folder-card:hover {
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    transform: translateY(-2px);
-    transition: all 0.2s ease;
-}
-</style>
 {% endblock %}
diff --git a/templates/references/document_form.html b/templates/references/document_form.html
index 512cf07..104b77e 100644
--- a/templates/references/document_form.html
+++ b/templates/references/document_form.html
@@ -6,93 +6,162 @@
 
 {% block extra_css %}
 <style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
     .form-section {
         background: #fff;
-        border: 1px solid #dee2e6;
-        border-radius: 8px;
-        padding: 25px;
-        margin-bottom: 20px;
+        border: 2px solid #e2e8f0;
+        border-radius: 1rem;
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+        transition: all 0.3s ease;
     }
+    .form-section:hover {
+        border-color: #005696;
+        box-shadow: 0 4px 12px rgba(0, 86, 150, 0.1);
+    }
+
     .form-section-title {
         font-size: 1.1rem;
         font-weight: 600;
-        color: #495057;
-        margin-bottom: 20px;
-        padding-bottom: 10px;
-        border-bottom: 2px solid #667eea;
+        color: #1e293b;
+        margin-bottom: 1.25rem;
+        padding-bottom: 0.75rem;
+        border-bottom: 2px solid #005696;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
     }
+
     .required-field::after {
         content: " *";
-        color: #dc3545;
+        color: #ef4444;
     }
+
+    .form-control-px360 {
+        width: 100%;
+        padding: 0.625rem 0.875rem;
+        border: 2px solid #e2e8f0;
+        border-radius: 0.5rem;
+        font-size: 0.875rem;
+        transition: all 0.2s;
+    }
+    .form-control-px360:focus {
+        outline: none;
+        border-color: #005696;
+        box-shadow: 0 0 0 3px rgba(0, 86, 150, 0.1);
+    }
+
+    .form-select-px360 {
+        width: 100%;
+        padding: 0.625rem 0.875rem;
+        border: 2px solid #e2e8f0;
+        border-radius: 0.5rem;
+        font-size: 0.875rem;
+        transition: all 0.2s;
+        background: white;
+    }
+    .form-select-px360:focus {
+        outline: none;
+        border-color: #005696;
+        box-shadow: 0 0 0 3px rgba(0, 86, 150, 0.1);
+    }
+
     .file-upload-wrapper {
-        border: 2px dashed #dee2e6;
-        border-radius: 8px;
-        padding: 30px;
+        border: 2px dashed #cbd5e1;
+        border-radius: 0.75rem;
+        padding: 2rem;
         text-align: center;
         transition: all 0.3s;
+        background: #f8fafc;
     }
     .file-upload-wrapper:hover {
-        border-color: #667eea;
-        background-color: #f8f9fa;
+        border-color: #005696;
+        background-color: #eef6fb;
     }
+
     .current-file-info {
         background: #e7f3ff;
-        border-left: 4px solid #0066cc;
-        padding: 15px;
-        margin-bottom: 15px;
-        border-radius: 4px;
+        border-left: 4px solid #005696;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        border-radius: 0.5rem;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+
+    .alert-info-px360 {
+        background: #e7f3ff;
+        border: 1px solid #005696;
+        border-radius: 0.75rem;
+        padding: 1rem;
+    }
+
+    .alert-secondary-px360 {
+        background: #f1f5f9;
+        border: 1px solid #cbd5e1;
+        border-radius: 0.75rem;
+        padding: 1rem;
     }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
+<div class="px-6 py-4">
     <!-- Page Header -->
-    <div class="mb-4">
-        {% if folder %}
-        <a href="{% url 'references:folder_view' folder.id %}" class="btn btn-outline-secondary btn-sm mb-3">
-            <i class="bi bi-arrow-left me-1"></i> {{ _("Back to Folder")}}
-        </a>
-        {% else %}
-        <a href="{% url 'references:dashboard' %}" class="btn btn-outline-secondary btn-sm mb-3">
-            <i class="bi bi-arrow-left me-1"></i> {{ _("Back to Dashboard")}}
-        </a>
-        {% endif %}
-        <h2 class="mb-1">
-            {% if document %}
-            <i class="bi bi-pencil-square text-primary me-2"></i>{{ _("Edit Document")}}
-            {% else %}
-            <i class="bi bi-upload text-primary me-2"></i>{{ _("Upload Document")}}
-            {% endif %}
-        </h2>
-        <p class="text-muted mb-0">
-            {% if document %}
-            {{ _("Update document information or upload a new version")}}
-            {% else %}
-            {{ _("Upload a new document to the reference library")}}
-            {% endif %}
-        </p>
+    <div class="page-header-gradient mb-6">
+        <div class="flex items-center gap-3">
+            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
+                {% if document %}
+                <i data-lucide="file-edit" class="w-6 h-6 text-white"></i>
+                {% else %}
+                <i data-lucide="upload-cloud" class="w-6 h-6 text-white"></i>
+                {% endif %}
+            </div>
+            <div>
+                <h2 class="text-2xl font-bold">
+                    {% if document %}{{ _("Edit Document")}}{% else %}{{ _("Upload Document")}}{% endif %}
+                </h2>
+                <p class="text-blue-100 text-sm">
+                    {% if document %}{{ _("Update document information")}}{% else %}{{ _("Upload a new document")}}{% endif %}
+                </p>
+            </div>
+        </div>
     </div>
 
     <form method="post" enctype="multipart/form-data" id="documentForm">
         {% csrf_token %}
 
-        <!-- Django Messages -->
+        <!-- Messages -->
         {% if messages %}
             {% for message in messages %}
-                <div class="alert alert-{{ message.tags }} alert-dismissible fade show mb-4" role="alert">
+                <div class="p-4 rounded-xl mb-4 border {% if message.tags == 'success' %}bg-green-50 border-green-200 text-green-800{% elif message.tags == 'error' %}bg-red-50 border-red-200 text-red-800{% else %}bg-blue-50 border-blue-200 text-blue-800{% endif %}" role="alert">
                     {{ message }}
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                 </div>
             {% endfor %}
         {% endif %}
 
         <!-- Form Errors -->
         {% if form.non_field_errors %}
-            <div class="alert alert-danger mb-4">
-                <strong><i class="bi bi-exclamation-triangle me-2"></i>{% trans "Please fix the following errors:" %}</strong>
-                <ul class="mb-0 mt-2">
+            <div class="bg-red-50 border-2 border-red-200 text-red-800 p-4 rounded-xl mb-4">
+                <strong class="flex items-center gap-2 mb-2"><i data-lucide="alert-triangle" class="w-5 h-5"></i>{% trans "Please fix the following errors:" %}</strong>
+                <ul class="mb-0 mt-2 list-disc list-inside">
                     {% for error in form.non_field_errors %}
                         <li>{{ error }}</li>
                     {% endfor %}
@@ -100,53 +169,46 @@
             </div>
         {% endif %}
 
-        <div class="row">
-            <div class="col-lg-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div class="lg:col-span-2">
                 <!-- Document File -->
                 <div class="form-section">
                     <h5 class="form-section-title">
-                        <i class="bi bi-file-earmark me-2"></i>{{ _("Document File")}}
+                        <i data-lucide="file-up" class="w-5 h-5"></i>{{ _("Document File")}}
                     </h5>
 
                     {% if document %}
                     <div class="current-file-info">
-                        <h6 class="mb-2"><i class="bi bi-file-earmark-text me-2"></i>{{ _("Current File")}}</h6>
-                        <ul class="mb-0 small">
+                        <h6 class="mb-2 text-sm font-semibold text-navy flex items-center gap-2">
+                            <i data-lucide="file-check" class="w-4 h-4"></i>{{ _("Current File")}}
+                        </h6>
+                        <ul class="mb-0 text-xs text-slate-600 space-y-1">
                             <li><strong>{{ _("Filename:") }}</strong> {{ document.filename }}</li>
-                            <li><strong>{{ _("File Size:") }}</strong> {{ document.file_size|filesizeformat }}</li>
+                            <li><strong>{{ _("Size:") }}</strong> {{ document.file_size|filesizeformat }}</li>
                             <li><strong>{{ _("Version:") }}</strong> {{ document.version }}</li>
-                            <li><strong>{{ _("Uploaded:") }}</strong> {{ document.created_at|date:"M d, Y H:i" }}</li>
                         </ul>
                     </div>
                     {% endif %}
 
                     <div class="file-upload-wrapper">
-                        <i class="bi bi-cloud-upload display-4 text-muted mb-3 d-block"></i>
+                        <i data-lucide="cloud-upload" class="w-16 h-16 mx-auto mb-3 text-slate-400"></i>
                         <p class="mb-3">
-                            <strong>{% trans "Drag & drop your file here" %}</strong><br>
-                            <span class="text-muted">{% trans "or click to browse" %}</span>
+                            <strong class="text-gray-700">{% trans "Drag & drop your file here" %}</strong><br>
+                            <span class="text-slate-500 text-sm">{% trans "or click to browse" %}</span>
                         </p>
-                        <input type="file" name="file" class="form-control{% if form.file.errors %} is-invalid{% endif %}" id="fileInput"
+                        <input type="file" name="file" id="fileInput" class="form-control-px360" 
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.jpg,.jpeg,.png"
                                {% if not document %}required{% endif %}>
-                        {% if form.file.errors %}
-                            <div class="invalid-feedback d-block">
-                                {% for error in form.file.errors %}
-                                    {{ error }}
-                                {% endfor %}
-                            </div>
-                        {% endif %}
-                        <small class="form-text text-muted">
-                            {% trans "Supported formats:" %} PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT, JPG, PNG<br>
-                            {% trans "Maximum file size:" %} 50 MB
+                        <small class="text-slate-500 text-xs block mt-2">
+                            {% trans "Supported: PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT, JPG, PNG (Max 50MB)" %}
                         </small>
                     </div>
 
                     {% if document %}
-                    <div class="form-check mt-3">
-                        <input class="form-check-input" type="checkbox" name="new_version" id="newVersionCheck">
-                        <label class="form-check-label" for="newVersionCheck">
-                            {% trans "Upload as new version (increment version number)" %}
+                    <div class="flex items-center gap-2 mt-4 p-3 bg-slate-50 rounded-lg">
+                        <input type="checkbox" name="new_version" id="newVersionCheck" class="w-4 h-4 text-navy rounded">
+                        <label for="newVersionCheck" class="text-sm text-gray-700 font-medium">
+                            {% trans "Upload as new version" %}
                         </label>
                     </div>
                     {% endif %}
@@ -155,156 +217,121 @@
                 <!-- Document Details -->
                 <div class="form-section">
                     <h5 class="form-section-title">
-                        <i class="bi bi-info-circle me-2"></i>{{ _("Document Information")}}
+                        <i data-lucide="info" class="w-5 h-5"></i>{{ _("Document Information")}}
                     </h5>
 
-                    <div class="mb-3">
-                        <label class="form-label required-field">{% trans "Title (English)" %}</label>
-                        <input type="text" name="title" class="form-control{% if form.title.errors %} is-invalid{% endif %}"
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1.5 required-field">{% trans "Title (English)" %}</label>
+                        <input type="text" name="title" class="form-control-px360" 
                                value="{% if form.title.value %}{{ form.title.value }}{% elif document %}{{ document.title }}{% endif %}"
-                               placeholder="{% trans 'Enter document title in English' %}" required>
-                        {% if form.title.errors %}
-                            <div class="invalid-feedback d-block">
-                                {% for error in form.title.errors %}
-                                    {{ error }}
-                                {% endfor %}
-                            </div>
-                        {% endif %}
+                               placeholder="{% trans 'Enter document title' %}" required>
                     </div>
 
-                    <div class="mb-3">
-                        <label class="form-label">{% trans "Title (Arabic)" %}</label>
-                        <input type="text" name="title_ar" class="form-control"
-                               value="{% if form.title_ar.value %}{{ form.title_ar.value }}{% elif document %}{{ document.title_ar }}{% endif %}"
-                               placeholder="{% trans 'Enter document title in Arabic (optional)' %}">
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1.5">{% trans "Title (Arabic)" %}</label>
+                        <input type="text" name="title_ar" class="form-control-px360" dir="rtl"
+                               value="{% if form.title_ar.value %}{{ form.title_ar.value }}{% elif document %}{{ document.title_ar }}{% endif %}">
                     </div>
 
-                    <div class="mb-3">
-                        <label class="form-label">{% trans "Description (English)" %}</label>
-                        <textarea name="description" class="form-control" rows="4"
-                                  placeholder="{% trans 'Detailed description of the document' %}">{% if form.description.value %}{{ form.description.value }}{% elif document %}{{ document.description }}{% endif %}</textarea>
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1.5">{% trans "Description (English)" %}</label>
+                        <textarea name="description" class="form-control-px360" rows="4">{% if form.description.value %}{{ form.description.value }}{% elif document %}{{ document.description }}{% endif %}</textarea>
                     </div>
 
-                    <div class="mb-3">
-                        <label class="form-label">{% trans "Description (Arabic)" %}</label>
-                        <textarea name="description_ar" class="form-control" rows="4"
-                                  placeholder="{% trans 'Arabic description (optional)' %}">{% if form.description_ar.value %}{{ form.description_ar.value }}{% elif document %}{{ document.description_ar }}{% endif %}</textarea>
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1.5">{% trans "Description (Arabic)" %}</label>
+                        <textarea name="description_ar" class="form-control-px360" rows="4" dir="rtl">{% if form.description_ar.value %}{{ form.description_ar.value }}{% elif document %}{{ document.description_ar }}{% endif %}</textarea>
                     </div>
 
-                    <div class="mb-3">
-                        <label class="form-label{% if not folder %} required-field{% endif %}">{% trans "Folder" %}</label>
-                        <select name="folder" class="form-select{% if form.folder.errors %} is-invalid{% endif %}"
-                                {% if not folder %}required{% endif %}>
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1.5{% if not folder %} required-field{% endif %}">{% trans "Folder" %}</label>
+                        <select name="folder" class="form-select-px360" {% if not folder %}required{% endif %}>
                             <option value="">{{ _("Select folder")}}</option>
                             {% for folder_option in all_folders %}
                             <option value="{{ folder_option.id }}"
                                     {% if document and document.folder_id == folder_option.id %}selected{% endif %}
                                     {% if folder and folder.id == folder_option.id %}selected{% endif %}>
                                 {{ folder_option.level_display }}{{ folder_option.name }}
-                                {% if folder_option.name_ar %}/ {{ folder_option.name_ar }}{% endif %}
                             </option>
                             {% endfor %}
                         </select>
-                        {% if form.folder.errors %}
-                            <div class="invalid-feedback d-block">
-                                {% for error in form.folder.errors %}
-                                    {{ error }}
-                                {% endfor %}
-                            </div>
-                        {% endif %}
                     </div>
 
-                    <div class="mb-3">
-                        <label class="form-label">{% trans "Tags" %}</label>
-                        <input type="text" name="tags" class="form-control"
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1.5">{% trans "Tags" %}</label>
+                        <input type="text" name="tags" class="form-control-px360"
                                value="{% if form.tags.value %}{{ form.tags.value }}{% elif document %}{{ document.tags }}{% endif %}"
-                               placeholder="{% trans 'Comma-separated tags (e.g., HR, Safety, 2024)' %}">
-                        <small class="form-text text-muted">{{ _("Use tags to categorize and search documents easily")}}</small>
+                               placeholder="{% trans 'Comma-separated tags' %}">
                     </div>
                 </div>
 
                 <!-- Access Control -->
                 <div class="form-section">
                     <h5 class="form-section-title">
-                        <i class="bi bi-shield-lock me-2"></i>{{ _("Access Control")}}
+                        <i data-lucide="shield" class="w-5 h-5"></i>{{ _("Access Control")}}
                     </h5>
 
-                    <div class="mb-3">
-                        <label class="form-label">{% trans "Access Roles" %}</label>
-                        {% for choice in form.access_roles %}
-                        <div class="form-check">
-                            {{ choice.tag }}
-                            <label class="form-check-label" for="{{ choice.id_for_label }}">
-                                {{ choice.choice_label }}
-                            </label>
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">{% trans "Access Roles" %}</label>
+                        <div class="border-2 border-gray-200 rounded-lg p-4 max-h-48 overflow-y-auto">
+                            {% for choice in form.access_roles %}
+                            <div class="flex items-center gap-2 mb-2">
+                                {{ choice.tag }}
+                                <label for="{{ choice.id_for_label }}" class="text-sm text-gray-700">{{ choice.choice_label }}</label>
+                            </div>
+                            {% endfor %}
                         </div>
-                        {% empty %}
-                        <p class="text-muted small">{{ _("No access roles available")}}</p>
-                        {% endfor %}
-                        <small class="form-text text-muted">{{ _("Select roles that can access this document")}}</small>
                     </div>
 
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="is_published" id="isPublishedCheck"
+                    <div class="flex items-center gap-2 p-3 bg-slate-50 rounded-lg">
+                        <input type="checkbox" name="is_published" id="isPublishedCheck" class="w-4 h-4 text-navy rounded"
                                {% if not document or document.is_published %}checked{% endif %}>
-                        <label class="form-check-label" for="isPublishedCheck">
-                            {% trans "Publish this document (make it visible to others)" %}
+                        <label for="isPublishedCheck" class="text-sm text-gray-700 font-medium">
+                            {% trans "Publish this document" %}
                         </label>
                     </div>
                 </div>
             </div>
 
             <!-- Sidebar -->
-            <div class="col-lg-4">
-                <!-- Information -->
-                <div class="alert alert-info">
-                    <h6 class="alert-heading">
-                        <i class="bi bi-info-circle me-2"></i>{{ _("Document Guidelines")}}
+            <div class="lg:col-span-1">
+                <!-- Guidelines -->
+                <div class="alert-info-px360 mb-4">
+                    <h6 class="font-semibold text-navy mb-2 flex items-center gap-2">
+                        <i data-lucide="info" class="w-5 h-5"></i>{{ _("Guidelines")}}
                     </h6>
-                    <p class="mb-0 small">
-                        {{ _("Upload important documents, policies, procedures, and reference materials for easy access by your team.")}}
-                    </p>
-                    <hr class="my-2">
-                    <ul class="mb-0 mt-2 small">
-                        <li>{{ _("Use descriptive titles in both languages")}}</li>
+                    <ul class="text-xs text-slate-600 space-y-1 list-disc list-inside">
+                        <li>{{ _("Use descriptive titles")}}</li>
                         <li>{{ _("Add clear descriptions")}}</li>
-                        <li>{{ _("Choose the right document type")}}</li>
-                        <li>{{ _("Set appropriate visibility levels")}}</li>
-                        <li>{{ _("Use tags for easy searching")}}</li>
-                        <li>{{ _("Upload new versions when updating")}}</li>
+                        <li>{{ _("Set appropriate visibility")}}</li>
+                        <li>{{ _("Use tags for searching")}}</li>
                     </ul>
                 </div>
 
-                <!-- Current Document Info (if editing) -->
+                <!-- Current Info -->
                 {% if document %}
-                <div class="alert alert-secondary">
-                    <h6 class="alert-heading">
-                        <i class="bi bi-file-earmark me-2"></i>{{ _("Current Document")}}
+                <div class="alert-secondary-px360 mb-4">
+                    <h6 class="font-semibold text-slate-700 mb-2 flex items-center gap-2">
+                        <i data-lucide="file-text" class="w-5 h-5"></i>{{ _("Current Document")}}
                     </h6>
-                    <ul class="mb-0 small">
-                        <li><strong>{{ _("Created:") }}</strong> {{ document.created_at|date:"M d, Y H:i" }}</li>
-                        <li><strong>{{ _("Updated:") }}</strong> {{ document.updated_at|date:"M d, Y H:i" }}</li>
+                    <ul class="text-xs text-slate-600 space-y-1">
+                        <li><strong>{{ _("Created:") }}</strong> {{ document.created_at|date:"M d, Y" }}</li>
+                        <li><strong>{{ _("Updated:") }}</strong> {{ document.updated_at|date:"M d, Y" }}</li>
                         <li><strong>{{ _("Version:") }}</strong> {{ document.version }}</li>
-                        <li><strong>{{ _("File Size:") }}</strong> {{ document.file_size|filesizeformat }}</li>
                     </ul>
                 </div>
                 {% endif %}
 
                 <!-- Action Buttons -->
-                <div class="d-grid gap-2">
-                    <button type="submit" class="btn btn-primary btn-lg">
-                        <i class="bi bi-check-circle me-2"></i>
-                        {% if document %}{{ _("Update Document")}}{% else %}{{ _("Upload Document")}}{% endif %}
+                <div class="flex flex-col gap-2 sticky top-4">
+                    <button type="submit" class="btn-transition inline-flex justify-center items-center px-6 py-3 bg-navy text-white font-semibold rounded-lg hover:bg-blue transition shadow-lg">
+                        <i data-lucide="check-circle" class="w-5 h-5 me-2"></i>
+                        {% if document %}{{ _("Update")}}{% else %}{{ _("Upload")}}{% endif %}
                     </button>
-                    {% if folder %}
-                    <a href="{% url 'references:folder_view' folder.id %}" class="btn btn-outline-secondary">
-                        <i class="bi bi-x-circle me-2"></i>{{ _("Cancel")}}
+                    <a href="{% if folder %}{% url 'references:folder_view' folder.id %}{% else %}{% url 'references:dashboard' %}{% endif %}" 
+                       class="btn-transition inline-flex justify-center items-center px-6 py-3 bg-white border-2 border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition">
+                        <i data-lucide="x-circle" class="w-5 h-5 me-2"></i>{{ _("Cancel")}}
                     </a>
-                    {% else %}
-                    <a href="{% url 'references:dashboard' %}" class="btn btn-outline-secondary">
-                        <i class="bi bi-x-circle me-2"></i>{{ _("Cancel")}}
-                    </a>
-                    {% endif %}
                 </div>
             </div>
         </div>
@@ -322,20 +349,20 @@ document.addEventListener('DOMContentLoaded', function() {
     // Drag and drop functionality
     fileUploadWrapper.addEventListener('dragover', function(e) {
         e.preventDefault();
-        this.style.borderColor = '#667eea';
+        this.style.borderColor = '#005696';
         this.style.backgroundColor = '#e7f3ff';
     });
 
     fileUploadWrapper.addEventListener('dragleave', function(e) {
         e.preventDefault();
-        this.style.borderColor = '#dee2e6';
-        this.style.backgroundColor = '#fff';
+        this.style.borderColor = '#cbd5e1';
+        this.style.backgroundColor = '#f8fafc';
     });
 
     fileUploadWrapper.addEventListener('drop', function(e) {
         e.preventDefault();
-        this.style.borderColor = '#dee2e6';
-        this.style.backgroundColor = '#fff';
+        this.style.borderColor = '#cbd5e1';
+        this.style.backgroundColor = '#f8fafc';
 
         const files = e.dataTransfer.files;
         if (files.length > 0) {
@@ -355,8 +382,11 @@ document.addEventListener('DOMContentLoaded', function() {
         const icon = fileUploadWrapper.querySelector('i');
         const p = fileUploadWrapper.querySelector('p');
 
-        icon.className = 'bi bi-file-earmark-check display-4 text-success mb-3 d-block';
-        p.innerHTML = `<strong>${fileName}</strong><br><span class="text-muted">{% trans "File selected" %}</span>`;
+        icon.setAttribute('data-lucide', 'file-check');
+        icon.classList.remove('text-slate-400');
+        icon.classList.add('text-green-600');
+        p.innerHTML = `<strong class="text-gray-800">${fileName}</strong><br><span class="text-slate-500 text-sm">{% trans "File selected" %}</span>`;
+        lucide.createIcons();
     }
 
     // Form validation
diff --git a/templates/references/document_view.html b/templates/references/document_view.html
index 401a98d..ff666b0 100644
--- a/templates/references/document_view.html
+++ b/templates/references/document_view.html
@@ -3,131 +3,441 @@
 
 {% block title %}{{ document.title }} - {% trans "Reference Section" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    /* PX360 App Theme Variables */
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    /* Page Header */
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    /* Section Cards */
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Detail Rows */
+    .detail-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem 1.5rem;
+        border-bottom: 1px solid #f1f5f9;
+    }
+    .detail-row:hover {
+        background-color: #f8fafc;
+    }
+    .detail-row:last-child {
+        border-bottom: none;
+    }
+
+    /* Table Styling */
+    .data-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+    .data-table th {
+        background: #f8fafc;
+        border-bottom: 2px solid #e2e8f0;
+        padding: 0.75rem 1rem;
+        text-align: left;
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: #64748b;
+        text-transform: uppercase;
+        letter-spacing: 0.025em;
+    }
+    .data-table td {
+        padding: 1rem;
+        border-bottom: 1px solid #f1f5f9;
+        vertical-align: middle;
+    }
+    .data-table tr:hover td {
+        background: #f8fafc;
+    }
+
+    /* Button Transitions */
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+
+    /* Badge */
+    .badge-px360 {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.25rem 0.75rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+    .badge-green {
+        background: #dcfce7;
+        color: #166534;
+    }
+    .badge-slate {
+        background: #f1f5f9;
+        color: #64748b;
+    }
+    .badge-blue {
+        background: #dbeafe;
+        color: #1e40af;
+    }
+
+    /* Action Buttons */
+    .action-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.75rem 1rem;
+        border-radius: 0.5rem;
+        font-weight: 500;
+        transition: all 0.2s;
+        width: 100%;
+    }
+    .action-btn-primary {
+        background: #005696;
+        color: white;
+    }
+    .action-btn-primary:hover {
+        background: #007bbd;
+    }
+    .action-btn-secondary {
+        background: white;
+        border: 2px solid #e2e8f0;
+        color: #374151;
+    }
+    .action-btn-secondary:hover {
+        background: #f8fafc;
+        border-color: #005696;
+    }
+    .action-btn-success {
+        background: white;
+        border: 2px solid #22c55e;
+        color: #22c55e;
+    }
+    .action-btn-success:hover {
+        background: #22c55e;
+        color: white;
+    }
+    .action-btn-danger {
+        background: white;
+        border: 2px solid #ef4444;
+        color: #ef4444;
+    }
+    .action-btn-danger:hover {
+        background: #ef4444;
+        color: white;
+    }
+
+    /* Related Document Link */
+    .related-doc-link {
+        display: flex;
+        align-items: center;
+        padding: 0.75rem 1rem;
+        transition: all 0.2s;
+        text-decoration: none;
+        color: inherit;
+    }
+    .related-doc-link:hover {
+        background: #f8fafc;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
+<div class="px-6 py-4">
     <!-- Page Header -->
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <nav aria-label="breadcrumb">
-                <ol class="breadcrumb mb-1">
-                    <li class="breadcrumb-item">
-                        <a href="{% url 'references:dashboard' %}">{% trans "Reference Section" %}</a>
-                    </li>
-                    {% if document.folder %}
-                        {% for folder in document.folder.get_full_path_folders %}
-                            <li class="breadcrumb-item">
-                                <a href="{% url 'references:folder_view' folder.id %}">{{ folder.name }}</a>
-                            </li>
-                        {% endfor %}
-                    {% endif %}
-                    <li class="breadcrumb-item active">{{ document.title }}</li>
-                </ol>
-            </nav>
-            <h1 class="h3 mb-0">
-                <i class="{{ document.get_file_icon }} me-2"></i>
-                {{ document.title }}
-            </h1>
-            <p class="text-muted small mb-0">{{ document.description }}</p>
-        </div>
-        <div class="d-flex gap-2">
-            <a href="{% url 'references:document_edit' document.id %}" class="btn btn-outline-primary">
-                <i class="fas fa-edit me-2"></i>{% trans "Edit" %}
-            </a>
-            <a href="{% url 'references:api_document_download' document.id %}" class="btn btn-primary">
-                <i class="fas fa-download me-2"></i>{% trans "Download" %}
-            </a>
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-start">
+            <div>
+                <nav aria-label="breadcrumb" class="mb-1">
+                    <ol class="flex items-center space-x-2 text-sm text-blue-100 flex-wrap">
+                        <li>
+                            <a href="{% url 'references:dashboard' %}" class="hover:text-white transition">{% trans "Reference Section" %}</a>
+                        </li>
+                        {% if document.folder %}
+                            {% for folder in document.folder.get_full_path_folders %}
+                                <li><span class="mx-2">/</span></li>
+                                <li><a href="{% url 'references:folder_view' folder.id %}" class="hover:text-white transition">{{ folder.name }}</a></li>
+                            {% endfor %}
+                        {% endif %}
+                        <li><span class="mx-2">/</span></li>
+                        <li class="text-white font-medium">{{ document.title }}</li>
+                    </ol>
+                </nav>
+                <h1 class="text-2xl font-bold flex items-center gap-2">
+                    <i class="{{ document.get_file_icon }}"></i>
+                    {{ document.title }}
+                </h1>
+                {% if document.description %}
+                    <p class="text-blue-100 text-sm mt-1">{{ document.description }}</p>
+                {% endif %}
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'references:document_edit' document.id %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="edit" class="w-4 h-4 me-2"></i>{% trans "Edit" %}
+                </a>
+                <a href="{% url 'references:api_document_download' document.id %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white text-navy font-medium rounded-xl hover:bg-blue-50 transition">
+                    <i data-lucide="download" class="w-4 h-4 me-2"></i>{% trans "Download" %}
+                </a>
+            </div>
         </div>
     </div>
 
-    <div class="row">
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <!-- Document Details -->
-        <div class="col-lg-8">
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h5 class="mb-0">{% trans "Document Details" %}</h5>
+        <div class="lg:col-span-2">
+            <div class="section-card mb-6">
+                <div class="section-header">
+                    <div class="section-icon bg-navy/10">
+                        <i data-lucide="file-text" class="w-5 h-5 text-navy"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Document Details" %}</h5>
                 </div>
-                <div class="card-body">
-                    <dl class="row">
-                        <dt class="col-sm-4">{% trans "File Name" %}</dt>
-                        <dd class="col-sm-8">{{ document.filename }}</dd>
-
-                        <dt class="col-sm-4">{% trans "File Type" %}</dt>
-                        <dd class="col-sm-8">
-                            <span class="badge bg-light text-dark">{{ document.file_type|upper }}</span>
-                        </dd>
-
-                        <dt class="col-sm-4">{% trans "File Size" %}</dt>
-                        <dd class="col-sm-8">{{ document.get_file_size_display }}</dd>
-
-                        <dt class="col-sm-4">{% trans "Version" %}</dt>
-                        <dd class="col-sm-8">
-                            {% if document.is_latest_version %}
-                                <span class="badge bg-success">{{ document.version }}</span>
-                            {% else %}
-                                <span class="badge bg-secondary">{{ document.version }}</span>
-                            {% endif %}
-                        </dd>
-
-                        <dt class="col-sm-4">{% trans "Downloads" %}</dt>
-                        <dd class="col-sm-8">{{ document.download_count }}</dd>
-
-                        <dt class="col-sm-4">{% trans "Uploaded By" %}</dt>
-                        <dd class="col-sm-8">
-                            {% if document.uploaded_by %}
-                                {{ document.uploaded_by.get_full_name }}
-                            {% else %}
-                                {% trans "Unknown" %}
-                            {% endif %}
-                        </dd>
-
-                        <dt class="col-sm-4">{% trans "Created" %}</dt>
-                        <dd class="col-sm-8">{{ document.created_at|date:"M d, Y H:i" }}</dd>
-
-                        <dt class="col-sm-4">{% trans "Last Modified" %}</dt>
-                        <dd class="col-sm-8">{{ document.updated_at|date:"M d, Y H:i" }}</dd>
-
-                        {% if document.tags %}
-                            <dt class="col-sm-4">{% trans "Tags" %}</dt>
-                            <dd class="col-sm-8">
-                                {% for tag in document.tags_list %}
-                                    <span class="badge bg-info text-white me-1">{{ tag }}</span>
-                                {% endfor %}
-                            </dd>
+                <div class="p-0">
+                    <div class="detail-row">
+                        <span class="text-sm text-slate-500">{% trans "File Name" %}</span>
+                        <span class="text-sm font-semibold text-gray-800">{{ document.filename }}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="text-sm text-slate-500">{% trans "File Type" %}</span>
+                        <span class="badge-px360 badge-slate">{{ document.file_type|upper }}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="text-sm text-slate-500">{% trans "File Size" %}</span>
+                        <span class="text-sm font-semibold text-gray-800">{{ document.get_file_size_display }}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="text-sm text-slate-500">{% trans "Version" %}</span>
+                        {% if document.is_latest_version %}
+                            <span class="badge-px360 badge-green">{{ document.version }}</span>
+                        {% else %}
+                            <span class="badge-px360 badge-slate">{{ document.version }}</span>
                         {% endif %}
-                    </dl>
+                    </div>
+                    <div class="detail-row">
+                        <span class="text-sm text-slate-500">{% trans "Downloads" %}</span>
+                        <span class="text-sm font-semibold text-gray-800">{{ document.download_count }}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="text-sm text-slate-500">{% trans "Uploaded By" %}</span>
+                        <span class="text-sm font-semibold text-gray-800">
+                            {% if document.uploaded_by %}{{ document.uploaded_by.get_full_name }}{% else %}{% trans "Unknown" %}{% endif %}
+                        </span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="text-sm text-slate-500">{% trans "Created" %}</span>
+                        <span class="text-sm font-semibold text-gray-800">{{ document.created_at|date:"M d, Y H:i" }}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="text-sm text-slate-500">{% trans "Last Modified" %}</span>
+                        <span class="text-sm font-semibold text-gray-800">{{ document.updated_at|date:"M d, Y H:i" }}</span>
+                    </div>
+                    {% if document.tags %}
+                        <div class="detail-row">
+                            <span class="text-sm text-slate-500">{% trans "Tags" %}</span>
+                            <div class="flex gap-1">
+                                {% for tag in document.tags_list %}
+                                    <span class="badge-px360 badge-blue">{{ tag }}</span>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    {% endif %}
                 </div>
             </div>
 
             <!-- Version History -->
             {% if versions %}
-                <div class="card">
-                    <div class="card-header">
-                        <h5 class="mb-0">{% trans "Version History" %}</h5>
+                <div class="section-card">
+                    <div class="section-header">
+                        <div class="section-icon bg-blue/10">
+                            <i data-lucide="history" class="w-5 h-5 text-blue"></i>
+                        </div>
+                        <h5 class="text-lg font-semibold text-gray-800">{% trans "Version History" %}</h5>
                     </div>
-                    <div class="card-body">
-                        <div class="table-responsive">
-                            <table class="table table-sm">
+                    <div class="p-0">
+                        <table class="data-table">
+                            <thead>
+                                <tr>
+                                    <th>{% trans "Version" %}</th>
+                                    <th>{% trans "File" %}</th>
+                                    <th>{% trans "Size" %}</th>
+                                    <th>{% trans "Created" %}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for version in versions %}
+                                    <tr{% if version.is_latest_version %} class="bg-blue-50/50"{% endif %}>
+                                        <td>
+                                            {% if version.is_latest_version %}
+                                                <span class="badge-px360 badge-green">{{ version.version }}</span>
+                                            {% else %}
+                                                <span class="badge-px360 badge-slate">{{ version.version }}</span>
+                                            {% endif %}
+                                        </td>
+                                        <td class="text-sm text-gray-700">{{ version.filename }}</td>
+                                        <td class="text-sm text-slate-600">{{ version.get_file_size_display }}</td>
+                                        <td class="text-sm text-slate-600">{{ version.created_at|date:"M d, Y H:i" }}</td>
+                                    </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+
+        <!-- Sidebar -->
+        <div class="lg:col-span-1">
+            <!-- Actions -->
+            <div class="section-card mb-6">
+                <div class="section-header">
+                    <div class="section-icon bg-green-500/10">
+                        <i data-lucide="wrench" class="w-5 h-5 text-green-600"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Actions" %}</h5>
+                </div>
+                <div class="p-4 space-y-2">
+                    <a href="{% url 'references:api_document_download' document.id %}" class="action-btn action-btn-primary">
+                        <i data-lucide="download" class="w-4 h-4 me-2"></i>{% trans "Download Document" %}
+                    </a>
+                    <a href="{% url 'references:document_edit' document.id %}" class="action-btn action-btn-secondary">
+                        <i data-lucide="edit" class="w-4 h-4 me-2"></i>{% trans "Edit Metadata" %}
+                    </a>
+                    {% if document.folder %}
+                        <a href="{% url 'references:document_create_in_folder' folder_pk=document.folder.id %}" class="action-btn action-btn-success">
+                            <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload New Version" %}
+                        </a>
+                    {% endif %}
+                    <button type="button" onclick="confirmDelete()" class="action-btn action-btn-danger">
+                        <i data-lucide="trash-2" class="w-4 h-4 me-2"></i>{% trans "Delete Document" %}
+                    </button>
+                </div>
+            </div>
+
+            <!-- Description -->
+            {% if document.description %}
+                <div class="section-card mb-6">
+                    <div class="section-header">
+                        <div class="section-icon bg-slate/10">
+                            <i data-lucide="align-left" class="w-5 h-5 text-slate"></i>
+                        </div>
+                        <h5 class="text-lg font-semibold text-gray-800">{% trans "Description" %}</h5>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-700 text-sm">{{ document.description|linebreaks }}</p>
+                    </div>
+                </div>
+            {% endif %}
+
+            <!-- Related Documents -->
+            {% if related_documents %}
+                <div class="section-card">
+                    <div class="section-header">
+                        <div class="section-icon bg-blue/10">
+                            <i data-lucide="link" class="w-5 h-5 text-blue"></i>
+                        </div>
+                        <h5 class="text-lg font-semibold text-gray-800">{% trans "Related Documents" %}</h5>
+                    </div>
+                    <div class="p-0">
+                        {% for related in related_documents %}
+                            <a href="{% url 'references:document_view' related.id %}" class="related-doc-link border-b border-gray-100 last:border-0">
+                                <i class="{{ related.get_file_icon }} w-5 h-5 text-blue me-2"></i>
+                                <span class="text-sm font-medium text-gray-800 truncate">{{ related.title|truncatechars:30 }}</span>
+                            </a>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<form id="deleteForm" method="post" action="{% url 'references:document_delete' document.id %}" style="display: none;">
+    {% csrf_token %}
+</form>
+
+<script>
+function confirmDelete() {
+    if (confirm('{% trans "Are you sure you want to delete this document?" %}')) {
+        document.getElementById('deleteForm').submit();
+    }
+}
+</script>
+{% endblock %}
+
+            <!-- Version History -->
+            {% if versions %}
+                <div class="section-card">
+                    <div class="section-header">
+                        <div class="section-icon bg-blue bg-opacity-10">
+                            <i data-lucide="history" class="w-6 h-6 text-blue"></i>
+                        </div>
+                        <h5 class="text-lg font-semibold text-gray-800">{% trans "Version History" %}</h5>
+                    </div>
+                    <div class="p-0">
+                        <div class="overflow-x-auto">
+                            <table class="w-full">
                                 <thead>
-                                    <tr>
-                                        <th>{% trans "Version" %}</th>
-                                        <th>{% trans "File" %}</th>
-                                        <th>{% trans "Size" %}</th>
-                                        <th>{% trans "Created" %}</th>
+                                    <tr class="bg-slate-50 border-b-2 border-gray-200">
+                                        <th class="text-left text-xs font-semibold text-slate-600 uppercase tracking-wider px-6 py-3">{% trans "Version" %}</th>
+                                        <th class="text-left text-xs font-semibold text-slate-600 uppercase tracking-wider px-6 py-3">{% trans "File" %}</th>
+                                        <th class="text-left text-xs font-semibold text-slate-600 uppercase tracking-wider px-6 py-3">{% trans "Size" %}</th>
+                                        <th class="text-left text-xs font-semibold text-slate-600 uppercase tracking-wider px-6 py-3">{% trans "Created" %}</th>
                                     </tr>
                                 </thead>
-                                <tbody>
+                                <tbody class="divide-y divide-gray-100">
                                     {% for version in versions %}
-                                        <tr{% if version.is_latest_version %} class="table-light"{% endif %}>
-                                            <td>
+                                        <tr{% if version.is_latest_version %} class="bg-blue bg-opacity-5"{% endif %}>
+                                            <td class="px-6 py-4">
                                                 {% if version.is_latest_version %}
-                                                    <span class="badge bg-success">{{ version.version }}</span>
+                                                    <span class="px-2.5 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">{{ version.version }}</span>
                                                 {% else %}
-                                                    <span class="badge bg-secondary">{{ version.version }}</span>
+                                                    <span class="px-2.5 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded-full">{{ version.version }}</span>
                                                 {% endif %}
                                             </td>
-                                            <td>{{ version.filename }}</td>
-                                            <td>{{ version.get_file_size_display }}</td>
-                                            <td>{{ version.created_at|date:"M d, Y H:i" }}</td>
+                                            <td class="px-6 py-4 text-sm text-gray-700">{{ version.filename }}</td>
+                                            <td class="px-6 py-4 text-sm text-slate-600">{{ version.get_file_size_display }}</td>
+                                            <td class="px-6 py-4 text-sm text-slate-600">{{ version.created_at|date:"M d, Y H:i" }}</td>
                                         </tr>
                                     {% endfor %}
                                 </tbody>
@@ -139,27 +449,30 @@
         </div>
 
         <!-- Sidebar -->
-        <div class="col-lg-4">
+        <div class="lg:col-span-1">
             <!-- Actions -->
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h5 class="mb-0">{% trans "Actions" %}</h5>
+            <div class="section-card mb-6">
+                <div class="section-header">
+                    <div class="section-icon bg-green-600 bg-opacity-10">
+                        <i data-lucide="wrench" class="w-6 h-6 text-green-600"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Actions" %}</h5>
                 </div>
-                <div class="card-body">
-                    <div class="d-grid gap-2">
-                        <a href="{% url 'references:api_document_download' document.id %}" class="btn btn-primary">
-                            <i class="fas fa-download me-2"></i>{% trans "Download Document" %}
+                <div class="p-6">
+                    <div class="flex flex-col gap-2">
+                        <a href="{% url 'references:api_document_download' document.id %}" class="btn-transition inline-flex justify-center items-center px-4 py-2.5 bg-navy text-white font-medium rounded-xl hover:bg-blue transition">
+                            <i data-lucide="download" class="w-4 h-4 me-2"></i>{% trans "Download Document" %}
                         </a>
-                        <a href="{% url 'references:document_edit' document.id %}" class="btn btn-outline-primary">
-                            <i class="fas fa-edit me-2"></i>{% trans "Edit Metadata" %}
+                        <a href="{% url 'references:document_edit' document.id %}" class="btn-transition inline-flex justify-center items-center px-4 py-2.5 bg-white border-2 border-navy text-navy font-medium rounded-xl hover:bg-navy hover:text-white transition">
+                            <i data-lucide="edit" class="w-4 h-4 me-2"></i>{% trans "Edit Metadata" %}
                         </a>
                         {% if document.folder %}
-                        <a href="{% url 'references:document_create_in_folder' folder_pk=document.folder.id %}" class="btn btn-outline-success">
-                            <i class="fas fa-upload me-2"></i>{% trans "Upload New Version" %}
+                        <a href="{% url 'references:document_create_in_folder' folder_pk=document.folder.id %}" class="btn-transition inline-flex justify-center items-center px-4 py-2.5 bg-white border-2 border-green-600 text-green-600 font-medium rounded-xl hover:bg-green-600 hover:text-white transition">
+                            <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload New Version" %}
                         </a>
                         {% endif %}
-                        <button type="button" class="btn btn-outline-danger" onclick="confirmDelete()">
-                            <i class="fas fa-trash me-2"></i>{% trans "Delete Document" %}
+                        <button type="button" onclick="confirmDelete()" class="btn-transition inline-flex justify-center items-center px-4 py-2.5 bg-white border-2 border-red-500 text-red-500 font-medium rounded-xl hover:bg-red-500 hover:text-white transition">
+                            <i data-lucide="trash-2" class="w-4 h-4 me-2"></i>{% trans "Delete Document" %}
                         </button>
                     </div>
                 </div>
@@ -167,28 +480,34 @@
 
             <!-- Description -->
             {% if document.description %}
-                <div class="card mb-4">
-                    <div class="card-header">
-                        <h5 class="mb-0">{% trans "Description" %}</h5>
+                <div class="section-card mb-6">
+                    <div class="section-header">
+                        <div class="section-icon bg-slate bg-opacity-10">
+                            <i data-lucide="align-left" class="w-6 h-6 text-slate"></i>
+                        </div>
+                        <h5 class="text-lg font-semibold text-gray-800">{% trans "Description" %}</h5>
                     </div>
-                    <div class="card-body">
-                        <p class="mb-0">{{ document.description|linebreaks }}</p>
+                    <div class="p-6">
+                        <p class="text-gray-700 text-sm mb-0">{{ document.description|linebreaks }}</p>
                     </div>
                 </div>
             {% endif %}
 
             <!-- Related Documents -->
             {% if related_documents %}
-                <div class="card">
-                    <div class="card-header">
-                        <h5 class="mb-0">{% trans "Related Documents" %}</h5>
+                <div class="section-card">
+                    <div class="section-header">
+                        <div class="section-icon bg-blue bg-opacity-10">
+                            <i data-lucide="link" class="w-6 h-6 text-blue"></i>
+                        </div>
+                        <h5 class="text-lg font-semibold text-gray-800">{% trans "Related Documents" %}</h5>
                     </div>
-                    <div class="card-body">
-                        <div class="list-group list-group-flush">
+                    <div class="p-0">
+                        <div class="divide-y divide-gray-100">
                             {% for related in related_documents %}
-                                <a href="{% url 'references:document_view' related.id %}" class="list-group-item list-group-item-action text-decoration-none">
-                                    <i class="{{ related.get_file_icon }} me-2"></i>
-                                    {{ related.title|truncatechars:30 }}
+                                <a href="{% url 'references:document_view' related.id %}" class="flex items-center p-4 hover:bg-slate-50 transition block">
+                                    <i class="{{ related.get_file_icon }} w-8 h-8 text-blue"></i>
+                                    <span class="ml-3 text-sm font-medium text-gray-800">{{ related.title|truncatechars:30 }}</span>
                                 </a>
                             {% endfor %}
                         </div>
diff --git a/templates/references/folder_form.html b/templates/references/folder_form.html
index 9e107fc..49ae37b 100644
--- a/templates/references/folder_form.html
+++ b/templates/references/folder_form.html
@@ -6,101 +6,161 @@
 
 {% block extra_css %}
 <style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
     .form-section {
         background: #fff;
-        border: 1px solid #dee2e6;
-        border-radius: 8px;
-        padding: 25px;
-        margin-bottom: 20px;
+        border: 2px solid #e2e8f0;
+        border-radius: 1rem;
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+        transition: all 0.3s ease;
     }
+    .form-section:hover {
+        border-color: #005696;
+        box-shadow: 0 4px 12px rgba(0, 86, 150, 0.1);
+    }
+
     .form-section-title {
         font-size: 1.1rem;
         font-weight: 600;
-        color: #495057;
-        margin-bottom: 20px;
-        padding-bottom: 10px;
-        border-bottom: 2px solid #667eea;
+        color: #1e293b;
+        margin-bottom: 1.25rem;
+        padding-bottom: 0.75rem;
+        border-bottom: 2px solid #005696;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
     }
+
     .required-field::after {
         content: " *";
-        color: #dc3545;
+        color: #ef4444;
+    }
+
+    .form-control-px360 {
+        width: 100%;
+        padding: 0.625rem 0.875rem;
+        border: 2px solid #e2e8f0;
+        border-radius: 0.5rem;
+        font-size: 0.875rem;
+        transition: all 0.2s;
+    }
+    .form-control-px360:focus {
+        outline: none;
+        border-color: #005696;
+        box-shadow: 0 0 0 3px rgba(0, 86, 150, 0.1);
+    }
+
+    .form-select-px360 {
+        width: 100%;
+        padding: 0.625rem 0.875rem;
+        border: 2px solid #e2e8f0;
+        border-radius: 0.5rem;
+        font-size: 0.875rem;
+        transition: all 0.2s;
+        background: white;
+    }
+    .form-select-px360:focus {
+        outline: none;
+        border-color: #005696;
+        box-shadow: 0 0 0 3px rgba(0, 86, 150, 0.1);
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+
+    .alert-info-px360 {
+        background: #e7f3ff;
+        border: 1px solid #005696;
+        border-radius: 0.75rem;
+        padding: 1rem;
+    }
+
+    .alert-secondary-px360 {
+        background: #f1f5f9;
+        border: 1px solid #cbd5e1;
+        border-radius: 0.75rem;
+        padding: 1rem;
     }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
+<div class="px-6 py-4">
     <!-- Page Header -->
-    <div class="mb-4">
-        {% if folder %}
-        <a href="{% url 'references:folder_view' folder.id %}" class="btn btn-outline-secondary btn-sm mb-3">
-            <i class="bi bi-arrow-left me-1"></i> {{ _("Back to Folder")}}
-        </a>
-        {% elif parent %}
-        <a href="{% url 'references:folder_view' parent.id %}" class="btn btn-outline-secondary btn-sm mb-3">
-            <i class="bi bi-arrow-left me-1"></i> {{ _("Back to Folder")}}
-        </a>
-        {% else %}
-        <a href="{% url 'references:dashboard' %}" class="btn btn-outline-secondary btn-sm mb-3">
-            <i class="bi bi-arrow-left me-1"></i> {{ _("Back to Dashboard")}}
-        </a>
-        {% endif %}
-        <h2 class="mb-1">
-            {% if folder %}
-            <i class="bi bi-pencil-square text-primary me-2"></i>{{ _("Edit Folder")}}
-            {% else %}
-            <i class="bi bi-folder-plus text-primary me-2"></i>{{ _("New Folder")}}
-            {% endif %}
-        </h2>
-        <p class="text-muted mb-0">
-            {% if folder %}
-            {{ _("Update folder information")}}
-            {% else %}
-            {{ _("Create a new folder to organize your documents")}}
-            {% endif %}
-        </p>
+    <div class="page-header-gradient mb-6">
+        <div class="flex items-center gap-3">
+            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
+                {% if folder %}
+                <i data-lucide="folder-edit" class="w-6 h-6 text-white"></i>
+                {% else %}
+                <i data-lucide="folder-plus" class="w-6 h-6 text-white"></i>
+                {% endif %}
+            </div>
+            <div>
+                <h2 class="text-2xl font-bold">
+                    {% if folder %}{{ _("Edit Folder")}}{% else %}{{ _("New Folder")}}{% endif %}
+                </h2>
+                <p class="text-blue-100 text-sm">
+                    {% if folder %}{{ _("Update folder information")}}{% else %}{{ _("Create a new folder")}}{% endif %}
+                </p>
+            </div>
+        </div>
     </div>
 
     <form method="post" id="folderForm">
         {% csrf_token %}
 
-        <div class="row">
-            <div class="col-lg-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div class="lg:col-span-2">
                 <!-- Folder Details -->
                 <div class="form-section">
                     <h5 class="form-section-title">
-                        <i class="bi bi-info-circle me-2"></i>{{ _("Folder Information")}}
+                        <i data-lucide="info" class="w-5 h-5"></i>{{ _("Folder Information")}}
                     </h5>
 
-                    <div class="mb-3">
-                        <label class="form-label required-field">{% trans "Name (English)" %}</label>
-                        <input type="text" name="name" class="form-control"
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1.5 required-field">{% trans "Name (English)" %}</label>
+                        <input type="text" name="name" class="form-control-px360" 
                                value="{% if folder %}{{ folder.name }}{% endif %}"
-                               placeholder="{% trans 'Enter folder name in English' %}" required>
+                               placeholder="{% trans 'Enter folder name' %}" required>
                     </div>
 
-                    <div class="mb-3">
-                        <label class="form-label">{% trans "Name (Arabic)" %}</label>
-                        <input type="text" name="name_ar" class="form-control"
-                               value="{% if folder %}{{ folder.name_ar }}{% endif %}"
-                               placeholder="{% trans 'Enter folder name in Arabic (optional)' %}">
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1.5">{% trans "Name (Arabic)" %}</label>
+                        <input type="text" name="name_ar" class="form-control-px360" dir="rtl"
+                               value="{% if folder %}{{ folder.name_ar }}{% endif %}">
                     </div>
 
-                    <div class="mb-3">
-                        <label class="form-label">{% trans "Description (English)" %}</label>
-                        <textarea name="description" class="form-control" rows="4"
-                                  placeholder="{% trans 'Optional description of this folder' %}">{% if folder %}{{ folder.description }}{% endif %}</textarea>
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1.5">{% trans "Description (English)" %}</label>
+                        <textarea name="description" class="form-control-px360" rows="4">{% if folder %}{{ folder.description }}{% endif %}</textarea>
                     </div>
 
-                    <div class="mb-3">
-                        <label class="form-label">{% trans "Description (Arabic)" %}</label>
-                        <textarea name="description_ar" class="form-control" rows="4"
-                                  placeholder="{% trans 'Optional Arabic description' %}">{% if folder %}{{ folder.description_ar }}{% endif %}</textarea>
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1.5">{% trans "Description (Arabic)" %}</label>
+                        <textarea name="description_ar" class="form-control-px360" rows="4" dir="rtl">{% if folder %}{{ folder.description_ar }}{% endif %}</textarea>
                     </div>
 
-                    <div class="mb-3">
-                        <label class="form-label">{% trans "Parent Folder" %}</label>
-                        <select name="parent" class="form-select">
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1.5">{% trans "Parent Folder" %}</label>
+                        <select name="parent" class="form-select-px360">
                             <option value="">{{ _("Root Level (No Parent)")}}</option>
                             {% for folder_option in all_folders %}
                             {% if folder_option.id != folder.id %}
@@ -108,37 +168,32 @@
                                     {% if folder and folder.parent_id == folder_option.id %}selected{% endif %}
                                     {% if parent and parent.id == folder_option.id %}selected{% endif %}>
                                 {{ folder_option.level_display }}{{ folder_option.name }}
-                                {% if folder_option.name_ar %}/ {{ folder_option.name_ar }}{% endif %}
                             </option>
                             {% endif %}
                             {% endfor %}
                         </select>
-                        <small class="form-text text-muted">{{ _("Leave empty to create at root level")}}</small>
                     </div>
 
-                    <div class="row">
-                        <div class="col-md-4 mb-3">
-                            <label class="form-label">{% trans "Icon" %}</label>
-                            <input type="text" name="icon" class="form-control"
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div class="mb-4">
+                            <label class="block text-sm font-medium text-gray-700 mb-1.5">{% trans "Icon" %}</label>
+                            <input type="text" name="icon" class="form-control-px360"
                                    value="{% if folder %}{{ folder.icon }}{% endif %}"
-                                   placeholder="{% trans 'e.g., fa-folder, fa-file-pdf' %}">
-                            <small class="form-text text-muted">{{ _("FontAwesome icon class")}}</small>
+                                   placeholder="{% trans 'fa-folder' %}">
                         </div>
 
-                        <div class="col-md-4 mb-3">
-                            <label class="form-label">{% trans "Color" %}</label>
-                            <input type="text" name="color" class="form-control"
+                        <div class="mb-4">
+                            <label class="block text-sm font-medium text-gray-700 mb-1.5">{% trans "Color" %}</label>
+                            <input type="text" name="color" class="form-control-px360"
                                    value="{% if folder %}{{ folder.color }}{% endif %}"
-                                   placeholder="{% trans 'e.g., #007bff' %}">
-                            <small class="form-text text-muted">{{ _("Hex color code")}}</small>
+                                   placeholder="{% trans '#007bff' %}">
                         </div>
 
-                        <div class="col-md-4 mb-3">
-                            <label class="form-label">{% trans "Order" %}</label>
-                            <input type="number" name="order" class="form-control"
+                        <div class="mb-4">
+                            <label class="block text-sm font-medium text-gray-700 mb-1.5">{% trans "Order" %}</label>
+                            <input type="number" name="order" class="form-control-px360"
                                    value="{% if folder %}{{ folder.order }}{% else %}0{% endif %}"
                                    min="0">
-                            <small class="form-text text-muted">{{ _("Display order")}}</small>
                         </div>
                     </div>
                 </div>
@@ -146,92 +201,70 @@
                 <!-- Access Control -->
                 <div class="form-section">
                     <h5 class="form-section-title">
-                        <i class="bi bi-shield-lock me-2"></i>{{ _("Access Control")}}
+                        <i data-lucide="shield" class="w-5 h-5"></i>{{ _("Access Control")}}
                     </h5>
 
-                    <div class="mb-3">
-                        <label class="form-label">{% trans "Access Roles" %}</label>
-                        <div class="border p-3 rounded" style="max-height: 200px; overflow-y: auto;">
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">{% trans "Access Roles" %}</label>
+                        <div class="border-2 border-gray-200 rounded-lg p-4 max-h-48 overflow-y-auto">
                             {% for choice in form.access_roles %}
-                            <div class="form-check mb-2">
+                            <div class="flex items-center gap-2 mb-2">
                                 {{ choice.tag }}
-                                <label class="form-check-label" for="{{ choice.id_for_label }}">
-                                    {{ choice.choice_label }}
-                                </label>
+                                <label for="{{ choice.id_for_label }}" class="text-sm text-gray-700">{{ choice.choice_label }}</label>
                             </div>
                             {% endfor %}
                         </div>
-                        <small class="form-text text-muted">
-                            {{ _("Leave all unchecked to make folder accessible to all users")}}
-                        </small>
                     </div>
 
-                    <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="is_active" id="isActiveCheck"
+                    <div class="flex items-center gap-2 p-3 bg-slate-50 rounded-lg">
+                        <input type="checkbox" name="is_active" id="isActiveCheck" class="w-4 h-4 text-navy rounded"
                                {% if not folder or folder.is_active %}checked{% endif %}>
-                        <label class="form-check-label" for="isActiveCheck">
+                        <label for="isActiveCheck" class="text-sm text-gray-700 font-medium">
                             {% trans "Active" %}
                         </label>
-                        <small class="form-text text-muted d-block">
-                            {{ _("Uncheck to hide this folder")}}
-                        </small>
                     </div>
                 </div>
             </div>
 
             <!-- Sidebar -->
-            <div class="col-lg-4">
-                <!-- Information -->
-                <div class="alert alert-info">
-                    <h6 class="alert-heading">
-                        <i class="bi bi-info-circle me-2"></i>{{ _("Folder Organization")}}
+            <div class="lg:col-span-1">
+                <!-- Guidelines -->
+                <div class="alert-info-px360 mb-4">
+                    <h6 class="font-semibold text-navy mb-2 flex items-center gap-2">
+                        <i data-lucide="info" class="w-5 h-5"></i>{{ _("Folder Organization")}}
                     </h6>
-                    <p class="mb-0 small">
-                        {{ _("Create folders to organize documents by category, department, or any structure that works for your team.")}}
-                    </p>
-                    <hr class="my-2">
-                    <ul class="mb-0 mt-2 small">
-                        <li>{{ _("Use meaningful names in both languages")}}</li>
-                        <li>{{ _("Add descriptions for clarity")}}</li>
-                        <li>{{ _("Set access roles to control visibility")}}</li>
-                        <li>{{ _("Use icons and colors for visual organization")}}</li>
+                    <ul class="text-xs text-slate-600 space-y-1 list-disc list-inside">
+                        <li>{{ _("Use meaningful names")}}</li>
+                        <li>{{ _("Add descriptions")}}</li>
+                        <li>{{ _("Set access roles")}}</li>
+                        <li>{{ _("Use icons and colors")}}</li>
                     </ul>
                 </div>
 
-                <!-- Current Folder Info (if editing) -->
+                <!-- Current Info -->
                 {% if folder %}
-                <div class="alert alert-secondary">
-                    <h6 class="alert-heading">
-                        <i class="bi bi-folder me-2"></i>{{ _("Current Folder")}}
+                <div class="alert-secondary-px360 mb-4">
+                    <h6 class="font-semibold text-slate-700 mb-2 flex items-center gap-2">
+                        <i data-lucide="folder" class="w-5 h-5"></i>{{ _("Current Folder")}}
                     </h6>
-                    <ul class="mb-0 small">
-                        <li><strong>{{ _("Created:") }} </strong>{{ folder.created_at|date:"M d, Y" }}</li>
-                        <li><strong>{{ _("Last Modified:") }} </strong>{{ folder.updated_at|date:"M d, Y" }}</li>
-                        <li><strong>{{ _("Documents:") }} </strong>{{ folder.documents.count }}</li>
-                        <li><strong>{{ _("Subfolders:") }} </strong>{{ folder.subfolders.count }}</li>
+                    <ul class="text-xs text-slate-600 space-y-1">
+                        <li><strong>{{ _("Created:") }}</strong> {{ folder.created_at|date:"M d, Y" }}</li>
+                        <li><strong>{{ _("Modified:") }}</strong> {{ folder.updated_at|date:"M d, Y" }}</li>
+                        <li><strong>{{ _("Documents:") }}</strong> {{ folder.documents.count }}</li>
                     </ul>
                 </div>
                 {% endif %}
 
                 <!-- Action Buttons -->
-                <div class="d-grid gap-2">
-                    <button type="submit" class="btn btn-primary btn-lg">
-                        <i class="bi bi-check-circle me-2"></i>
-                        {% if folder %}{{ _("Update Folder")}}{% else %}{{ _("Create Folder")}}{% endif %}
+                <div class="flex flex-col gap-2 sticky top-4">
+                    <button type="submit" class="btn-transition inline-flex justify-center items-center px-6 py-3 bg-navy text-white font-semibold rounded-lg hover:bg-blue transition shadow-lg">
+                        <i data-lucide="check-circle" class="w-5 h-5 me-2"></i>
+                        {% if folder %}{{ _("Update")}}{% else %}{{ _("Create")}}{% endif %}
                     </button>
-                    {% if folder %}
-                    <a href="{% url 'references:folder_view' folder.id %}" class="btn btn-outline-secondary">
-                        <i class="bi bi-x-circle me-2"></i>{{ _("Cancel")}}
+                    <a href="{% if folder %}{% url 'references:folder_view' folder.id %}{% elif parent %}{% url 'references:folder_view' parent.id %}{% else %}{% url 'references:dashboard' %}{% endif %}" 
+                       class="btn-transition inline-flex justify-center items-center px-6 py-3 bg-white border-2 border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition">
+                        <i data-lucide="x-circle" class="w-5 h-5 me-2"></i>{{ _("Cancel")}}
                     </a>
-                    {% elif parent %}
-                    <a href="{% url 'references:folder_view' parent.id %}" class="btn btn-outline-secondary">
-                        <i class="bi bi-x-circle me-2"></i>{{ _("Cancel")}}
-                    </a>
-                    {% else %}
-                    <a href="{% url 'references:dashboard' %}" class="btn btn-outline-secondary">
-                        <i class="bi bi-x-circle me-2"></i>{{ _("Cancel")}}
-                    </a>
-                    {% endif %}
                 </div>
             </div>
         </div>
diff --git a/templates/references/folder_view.html b/templates/references/folder_view.html
index 6388244..b2e24ba 100644
--- a/templates/references/folder_view.html
+++ b/templates/references/folder_view.html
@@ -3,90 +3,219 @@
 
 {% block title %}{% if current_folder %}{{ current_folder.name }}{% else %}{% trans "Folders" %}{% endif %} - {% trans "Reference Section" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    /* PX360 App Theme Variables */
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    /* Page Header */
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    /* Section Cards */
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Folder Cards */
+    .folder-card {
+        background: white;
+        border: 2px solid #e2e8f0;
+        border-radius: 0.75rem;
+        padding: 1rem;
+        transition: all 0.3s ease;
+        text-decoration: none;
+        color: inherit;
+        display: block;
+    }
+    .folder-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 12px 24px -8px rgba(0, 86, 150, 0.2);
+        border-color: #005696;
+    }
+
+    /* Table Styling */
+    .data-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+    .data-table th {
+        background: #f8fafc;
+        border-bottom: 2px solid #e2e8f0;
+        padding: 0.75rem 1rem;
+        text-align: left;
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: #64748b;
+        text-transform: uppercase;
+        letter-spacing: 0.025em;
+    }
+    .data-table td {
+        padding: 1rem;
+        border-bottom: 1px solid #f1f5f9;
+        vertical-align: middle;
+    }
+    .data-table tr:hover td {
+        background: #f8fafc;
+    }
+
+    /* Button Transitions */
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+
+    /* Badge */
+    .badge-px360 {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.25rem 0.75rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+    .badge-slate {
+        background: #f1f5f9;
+        color: #64748b;
+    }
+    .badge-green {
+        background: #dcfce7;
+        color: #166534;
+    }
+
+    /* Empty State */
+    .empty-state {
+        text-align: center;
+        padding: 3rem;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
+<div class="px-6 py-4">
     <!-- Page Header -->
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <nav aria-label="breadcrumb">
-                <ol class="breadcrumb mb-1">
-                    <li class="breadcrumb-item">
-                        <a href="{% url 'references:dashboard' %}">{% trans "Reference Section" %}</a>
-                    </li>
-                    {% for item in breadcrumb %}
-                        <li class="breadcrumb-item{% if forloop.last %} active{% endif %}">
-                            {% if not forloop.last %}
-                                <a href="{% url 'references:folder_view' item.id %}">{{ item.name }}</a>
-                            {% else %}
-                                {{ item.name }}
-                            {% endif %}
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-start">
+            <div>
+                <nav aria-label="breadcrumb" class="mb-1">
+                    <ol class="flex items-center space-x-2 text-sm text-blue-100 flex-wrap">
+                        <li>
+                            <a href="{% url 'references:dashboard' %}" class="hover:text-white transition">{% trans "Reference Section" %}</a>
                         </li>
-                    {% endfor %}
-                </ol>
-            </nav>
-            {% if current_folder %}
-                <h1 class="h3 mb-0">{{ current_folder.name }}</h1>
-                <p class="text-muted small mb-0">{{ current_folder.description }}</p>
-            {% else %}
-                <h1 class="h3 mb-0">{% trans "Folders" %}</h1>
-            {% endif %}
-        </div>
-        <div class="d-flex gap-2">
-            <a href="{% url 'references:search' %}" class="btn btn-outline-primary">
-                <i class="fas fa-search me-2"></i>{% trans "Search" %}
-            </a>
-            {% if current_folder %}
-            <a href="{% url 'references:folder_create_in_parent' parent_pk=current_folder.id %}" class="btn btn-primary">
-                <i class="fas fa-folder-plus me-2"></i>{% trans "New Folder" %}
-            </a>
-            {% else %}
-            <a href="{% url 'references:folder_create' %}" class="btn btn-primary">
-                <i class="fas fa-folder-plus me-2"></i>{% trans "New Folder" %}
-            </a>
-            {% endif %}
-            {% if current_folder %}
-            <a href="{% url 'references:document_create_in_folder' folder_pk=current_folder.id %}" class="btn btn-success">
-                <i class="fas fa-upload me-2"></i>{% trans "Upload Document" %}
-            </a>
-            {% else %}
-            <a href="{% url 'references:document_create' %}" class="btn btn-success">
-                <i class="fas fa-upload me-2"></i>{% trans "Upload Document" %}
-            </a>
-            {% endif %}
+                        {% for item in breadcrumb %}
+                            <li><span class="mx-2">/</span></li>
+                            <li{% if forloop.last %} class="text-white font-medium"{% endif %}>
+                                {% if not forloop.last %}
+                                    <a href="{% url 'references:folder_view' item.id %}" class="hover:text-white transition">{{ item.name }}</a>
+                                {% else %}
+                                    {{ item.name }}
+                                {% endif %}
+                            </li>
+                        {% endfor %}
+                    </ol>
+                </nav>
+                {% if current_folder %}
+                    <h1 class="text-2xl font-bold">{{ current_folder.name }}</h1>
+                    {% if current_folder.description %}
+                        <p class="text-blue-100 text-sm mt-1">{{ current_folder.description }}</p>
+                    {% endif %}
+                {% else %}
+                    <h1 class="text-2xl font-bold">{% trans "Folders" %}</h1>
+                {% endif %}
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'references:search' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="search" class="w-4 h-4 me-2"></i>{% trans "Search" %}
+                </a>
+                {% if current_folder %}
+                <a href="{% url 'references:folder_create_in_parent' parent_pk=current_folder.id %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white text-navy font-medium rounded-xl hover:bg-blue-50 transition">
+                    <i data-lucide="folder-plus" class="w-4 h-4 me-2"></i>{% trans "New Folder" %}
+                </a>
+                {% else %}
+                <a href="{% url 'references:folder_create' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white text-navy font-medium rounded-xl hover:bg-blue-50 transition">
+                    <i data-lucide="folder-plus" class="w-4 h-4 me-2"></i>{% trans "New Folder" %}
+                </a>
+                {% endif %}
+                {% if current_folder %}
+                <a href="{% url 'references:document_create_in_folder' folder_pk=current_folder.id %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                    <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload" %}
+                </a>
+                {% else %}
+                <a href="{% url 'references:document_create' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                    <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload" %}
+                </a>
+                {% endif %}
+            </div>
         </div>
     </div>
 
     <!-- Subfolders -->
     {% if subfolders %}
-        <div class="card mb-4">
-            <div class="card-header">
-                <h5 class="mb-0">{% trans "Folders" %}</h5>
+        <div class="section-card mb-6">
+            <div class="section-header">
+                <div class="section-icon bg-navy/10">
+                    <i data-lucide="folder" class="w-5 h-5 text-navy"></i>
+                </div>
+                <h5 class="text-lg font-semibold text-gray-800">{% trans "Folders" %}</h5>
             </div>
-            <div class="card-body">
-                <div class="row">
+            <div class="p-4">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                     {% for folder in subfolders %}
-                        <div class="col-md-4 col-lg-3 mb-3">
-                            <a href="{% url 'references:folder_view' folder.id %}" class="card h-100 text-decoration-none text-dark folder-card">
-                                <div class="card-body">
-                                    <div class="d-flex align-items-center mb-2">
-                                        <div class="flex-shrink-0">
-                                            {% if folder.icon %}
-                                                <i class="{{ folder.icon }} fa-2x text-primary"></i>
-                                            {% else %}
-                                                <i class="fas fa-folder fa-2x text-primary"></i>
-                                            {% endif %}
-                                        </div>
-                                        <div class="flex-grow-1 ms-3">
-                                            <h6 class="mb-0">{{ folder.name }}</h6>
-                                            <small class="text-muted">{{ folder.document_count }} {% trans "documents" %}</small>
-                                        </div>
-                                    </div>
-                                    {% if folder.description %}
-                                        <p class="small text-muted mb-0">{{ folder.description|truncatewords:8 }}</p>
+                        <a href="{% url 'references:folder_view' folder.id %}" class="folder-card">
+                            <div class="flex items-center mb-2">
+                                <div class="flex-shrink-0">
+                                    {% if folder.icon %}
+                                        <i class="{{ folder.icon }} w-8 h-8 text-navy"></i>
+                                    {% else %}
+                                        <i data-lucide="folder" class="w-8 h-8 text-navy"></i>
                                     {% endif %}
                                 </div>
-                            </a>
-                        </div>
+                                <div class="ml-3">
+                                    <h6 class="font-semibold text-gray-800 text-sm">{{ folder.name }}</h6>
+                                    <small class="text-slate-500 text-xs">{{ folder.document_count }} {% trans "documents" %}</small>
+                                </div>
+                            </div>
+                            {% if folder.description %}
+                                <p class="text-slate-500 text-xs">{{ folder.description|truncatewords:8 }}</p>
+                            {% endif %}
+                        </a>
                     {% endfor %}
                 </div>
             </div>
@@ -94,14 +223,17 @@
     {% endif %}
 
     <!-- Documents -->
-    <div class="card">
-        <div class="card-header">
-            <h5 class="mb-0">{% trans "Documents" %}</h5>
+    <div class="section-card">
+        <div class="section-header">
+            <div class="section-icon bg-blue/10">
+                <i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
+            </div>
+            <h5 class="text-lg font-semibold text-gray-800">{% trans "Documents" %}</h5>
         </div>
-        <div class="card-body">
+        <div class="p-0">
             {% if documents %}
-                <div class="table-responsive">
-                    <table class="table table-hover">
+                <div class="overflow-x-auto">
+                    <table class="data-table">
                         <thead>
                             <tr>
                                 <th>{% trans "Name" %}</th>
@@ -117,28 +249,28 @@
                             {% for document in documents %}
                                 <tr>
                                     <td>
-                                        <a href="{% url 'references:document_view' document.id %}" class="text-decoration-none">
+                                        <a href="{% url 'references:document_view' document.id %}" class="text-navy hover:text-blue transition font-medium">
                                             <i class="{{ document.get_file_icon }} me-2"></i>
                                             {{ document.title }}
                                         </a>
                                     </td>
                                     <td>
-                                        <span class="badge bg-light text-dark">{{ document.file_type|upper }}</span>
+                                        <span class="badge-px360 badge-slate">{{ document.file_type|upper }}</span>
                                     </td>
-                                    <td>{{ document.get_file_size_display }}</td>
+                                    <td class="text-sm text-slate-600">{{ document.get_file_size_display }}</td>
                                     <td>
                                         {% if document.is_latest_version %}
-                                            <span class="badge bg-success">{{ document.version }}</span>
+                                            <span class="badge-px360 badge-green">{{ document.version }}</span>
                                         {% else %}
-                                            <span class="badge bg-secondary">{{ document.version }}</span>
+                                            <span class="badge-px360 badge-slate">{{ document.version }}</span>
                                         {% endif %}
                                     </td>
-                                    <td>{{ document.download_count }}</td>
-                                    <td>{{ document.updated_at|date:"M d, Y" }}</td>
-                                    <td class="text-end">
-                                        <div class="btn-group btn-group-sm">
-                                            <a href="{% url 'references:api_document_download' document.id %}" class="btn btn-outline-primary" title="{% trans "Download" %}">
-                                                <i class="fas fa-download"></i>
+                                    <td class="text-sm text-slate-600">{{ document.download_count }}</td>
+                                    <td class="text-sm text-slate-600">{{ document.updated_at|date:"M d, Y" }}</td>
+                                    <td>
+                                        <div class="flex items-center justify-end gap-1">
+                                            <a href="{% url 'references:api_document_download' document.id %}" class="p-2 text-navy hover:bg-navy hover:text-white rounded-lg transition" title="{% trans "Download" %}">
+                                                <i data-lucide="download" class="w-4 h-4"></i>
                                             </a>
                                         </div>
                                     </td>
@@ -148,16 +280,152 @@
                     </table>
                 </div>
             {% else %}
-                <div class="text-center py-5">
-                    <i class="fas fa-file-alt fa-3x mb-3 text-muted"></i>
-                    <p class="text-muted mb-3">{% trans "No documents in this folder" %}</p>
+                <div class="empty-state">
+                    <i data-lucide="file-text" class="w-16 h-16 mx-auto mb-4 text-slate-300"></i>
+                    <p class="text-slate-500 mb-4">{% trans "No documents in this folder" %}</p>
                     {% if current_folder %}
-                    <a href="{% url 'references:document_create_in_folder' folder_pk=current_folder.id %}" class="btn btn-primary">
-                        <i class="fas fa-upload me-2"></i>{% trans "Upload Document" %}
+                    <a href="{% url 'references:document_create_in_folder' folder_pk=current_folder.id %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-navy text-white font-medium rounded-lg hover:bg-blue transition">
+                        <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload Document" %}
                     </a>
                     {% else %}
-                    <a href="{% url 'references:document_create' %}" class="btn btn-primary">
-                        <i class="fas fa-upload me-2"></i>{% trans "Upload Document" %}
+                    <a href="{% url 'references:document_create' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-navy text-white font-medium rounded-lg hover:bg-blue transition">
+                        <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload Document" %}
+                    </a>
+                    {% endif %}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endblock %}
+            <a href="{% url 'references:search' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white border-2 border-navy text-navy font-medium rounded-xl hover:bg-navy hover:text-white transition">
+                <i data-lucide="search" class="w-4 h-4 me-2"></i>{% trans "Search" %}
+            </a>
+            {% if current_folder %}
+            <a href="{% url 'references:folder_create_in_parent' parent_pk=current_folder.id %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-navy text-white font-medium rounded-xl hover:bg-blue transition">
+                <i data-lucide="folder-plus" class="w-4 h-4 me-2"></i>{% trans "New Folder" %}
+            </a>
+            {% else %}
+            <a href="{% url 'references:folder_create' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-navy text-white font-medium rounded-xl hover:bg-blue transition">
+                <i data-lucide="folder-plus" class="w-4 h-4 me-2"></i>{% trans "New Folder" %}
+            </a>
+            {% endif %}
+            {% if current_folder %}
+            <a href="{% url 'references:document_create_in_folder' folder_pk=current_folder.id %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-green-600 text-white font-medium rounded-xl hover:bg-green-700 transition">
+                <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload Document" %}
+            </a>
+            {% else %}
+            <a href="{% url 'references:document_create' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-green-600 text-white font-medium rounded-xl hover:bg-green-700 transition">
+                <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload Document" %}
+            </a>
+            {% endif %}
+        </div>
+    </div>
+
+    <!-- Subfolders -->
+    {% if subfolders %}
+        <div class="section-card mb-6">
+            <div class="section-header">
+                <div class="section-icon bg-navy bg-opacity-10">
+                    <i data-lucide="folder" class="w-6 h-6 text-navy"></i>
+                </div>
+                <h5 class="text-lg font-semibold text-gray-800">{% trans "Folders" %}</h5>
+            </div>
+            <div class="p-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                    {% for folder in subfolders %}
+                        <a href="{% url 'references:folder_view' folder.id %}" class="folder-card block bg-white border-2 border-gray-200 rounded-xl p-4">
+                            <div class="flex items-center mb-3">
+                                <div class="flex-shrink-0">
+                                    {% if folder.icon %}
+                                        <i class="{{ folder.icon }} w-10 h-10 text-navy"></i>
+                                    {% else %}
+                                        <i data-lucide="folder" class="w-10 h-10 text-navy"></i>
+                                    {% endif %}
+                                </div>
+                                <div class="flex-grow-1 ml-3">
+                                    <h6 class="font-semibold text-gray-800 mb-0.5">{{ folder.name }}</h6>
+                                    <small class="text-slate-500 text-xs">{{ folder.document_count }} {% trans "documents" %}</small>
+                                </div>
+                            </div>
+                            {% if folder.description %}
+                                <p class="text-slate-500 text-xs mb-0">{{ folder.description|truncatewords:8 }}</p>
+                            {% endif %}
+                        </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    {% endif %}
+
+    <!-- Documents -->
+    <div class="section-card">
+        <div class="section-header">
+            <div class="section-icon bg-blue bg-opacity-10">
+                <i data-lucide="file-text" class="w-6 h-6 text-blue"></i>
+            </div>
+            <h5 class="text-lg font-semibold text-gray-800">{% trans "Documents" %}</h5>
+        </div>
+        <div class="p-0">
+            {% if documents %}
+                <div class="overflow-x-auto">
+                    <table class="w-full">
+                        <thead>
+                            <tr class="bg-slate-50 border-b-2 border-gray-200">
+                                <th class="text-left text-xs font-semibold text-slate-600 uppercase tracking-wider px-6 py-3">{% trans "Name" %}</th>
+                                <th class="text-left text-xs font-semibold text-slate-600 uppercase tracking-wider px-6 py-3">{% trans "Type" %}</th>
+                                <th class="text-left text-xs font-semibold text-slate-600 uppercase tracking-wider px-6 py-3">{% trans "Size" %}</th>
+                                <th class="text-left text-xs font-semibold text-slate-600 uppercase tracking-wider px-6 py-3">{% trans "Version" %}</th>
+                                <th class="text-left text-xs font-semibold text-slate-600 uppercase tracking-wider px-6 py-3">{% trans "Downloads" %}</th>
+                                <th class="text-left text-xs font-semibold text-slate-600 uppercase tracking-wider px-6 py-3">{% trans "Modified" %}</th>
+                                <th class="text-right text-xs font-semibold text-slate-600 uppercase tracking-wider px-6 py-3"></th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100">
+                            {% for document in documents %}
+                                <tr class="document-row transition">
+                                    <td class="px-6 py-4">
+                                        <a href="{% url 'references:document_view' document.id %}" class="text-navy hover:text-blue transition font-medium">
+                                            <i class="{{ document.get_file_icon }} me-2"></i>
+                                            {{ document.title }}
+                                        </a>
+                                    </td>
+                                    <td class="px-6 py-4">
+                                        <span class="px-2.5 py-1 bg-slate-100 text-slate-700 text-xs font-medium rounded-full">{{ document.file_type|upper }}</span>
+                                    </td>
+                                    <td class="px-6 py-4 text-sm text-slate-600">{{ document.get_file_size_display }}</td>
+                                    <td class="px-6 py-4">
+                                        {% if document.is_latest_version %}
+                                            <span class="px-2.5 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">{{ document.version }}</span>
+                                        {% else %}
+                                            <span class="px-2.5 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded-full">{{ document.version }}</span>
+                                        {% endif %}
+                                    </td>
+                                    <td class="px-6 py-4 text-sm text-slate-600">{{ document.download_count }}</td>
+                                    <td class="px-6 py-4 text-sm text-slate-600">{{ document.updated_at|date:"M d, Y" }}</td>
+                                    <td class="px-6 py-4 text-right">
+                                        <div class="flex items-center justify-end gap-1">
+                                            <a href="{% url 'references:api_document_download' document.id %}" class="p-2 text-navy hover:bg-navy hover:text-white rounded-lg transition" title="{% trans "Download" %}">
+                                                <i data-lucide="download" class="w-4 h-4"></i>
+                                            </a>
+                                        </div>
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            {% else %}
+                <div class="text-center py-12">
+                    <i data-lucide="file-text" class="w-16 h-16 mx-auto mb-4 text-slate-300"></i>
+                    <p class="text-slate-500 mb-4">{% trans "No documents in this folder" %}</p>
+                    {% if current_folder %}
+                    <a href="{% url 'references:document_create_in_folder' folder_pk=current_folder.id %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-navy text-white font-medium rounded-xl hover:bg-blue transition">
+                        <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload Document" %}
+                    </a>
+                    {% else %}
+                    <a href="{% url 'references:document_create' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-navy text-white font-medium rounded-xl hover:bg-blue transition">
+                        <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload Document" %}
                     </a>
                     {% endif %}
                 </div>
@@ -165,12 +433,4 @@
         </div>
     </div>
 </div>
-
-<style>
-.folder-card:hover {
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    transform: translateY(-2px);
-    transition: all 0.2s ease;
-}
-</style>
 {% endblock %}
diff --git a/templates/references/search.html b/templates/references/search.html
index dd19618..1696251 100644
--- a/templates/references/search.html
+++ b/templates/references/search.html
@@ -3,57 +3,204 @@
 
 {% block title %}{% trans "Search Documents" %} - {% trans "Reference Section" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .data-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+    .data-table th {
+        background: #f8fafc;
+        border-bottom: 2px solid #e2e8f0;
+        padding: 0.75rem 1rem;
+        text-align: left;
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: #64748b;
+        text-transform: uppercase;
+        letter-spacing: 0.025em;
+    }
+    .data-table td {
+        padding: 1rem;
+        border-bottom: 1px solid #f1f5f9;
+        vertical-align: middle;
+    }
+    .data-table tr:hover td {
+        background: #f8fafc;
+    }
+
+    .form-control-px360 {
+        width: 100%;
+        padding: 0.625rem 0.875rem;
+        border: 2px solid #e2e8f0;
+        border-radius: 0.5rem;
+        font-size: 0.875rem;
+        transition: all 0.2s;
+    }
+    .form-control-px360:focus {
+        outline: none;
+        border-color: #005696;
+        box-shadow: 0 0 0 3px rgba(0, 86, 150, 0.1);
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+
+    .badge-px360 {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.25rem 0.75rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+    .badge-navy {
+        background: #005696;
+        color: white;
+    }
+    .badge-slate {
+        background: #f1f5f9;
+        color: #64748b;
+    }
+    .badge-green {
+        background: #dcfce7;
+        color: #166534;
+    }
+
+    .empty-state {
+        text-align: center;
+        padding: 3rem;
+    }
+
+    .pagination-btn {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.5rem 1rem;
+        border: 1px solid #e2e8f0;
+        background: white;
+        color: #005696;
+        border-radius: 0.5rem;
+        font-size: 0.875rem;
+        transition: all 0.2s;
+    }
+    .pagination-btn:hover {
+        background: #005696;
+        color: white;
+        border-color: #005696;
+    }
+    .pagination-btn.active {
+        background: #005696;
+        color: white;
+        border-color: #005696;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
+<div class="px-6 py-4">
     <!-- Page Header -->
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <nav aria-label="breadcrumb">
-                <ol class="breadcrumb mb-1">
-                    <li class="breadcrumb-item">
-                        <a href="{% url 'references:dashboard' %}">{% trans "Reference Section" %}</a>
-                    </li>
-                    <li class="breadcrumb-item active">{% trans "Search" %}</li>
-                </ol>
-            </nav>
-            <h1 class="h3 mb-0">{% trans "Search Documents" %}</h1>
-        </div>
-        <div>
-            <a href="{% url 'references:dashboard' %}" class="btn btn-outline-primary">
-                <i class="fas fa-arrow-left me-2"></i>{% trans "Back to Dashboard" %}
-            </a>
+    <div class="page-header-gradient mb-6">
+        <div class="flex justify-between items-center">
+            <div>
+                <nav aria-label="breadcrumb" class="mb-1">
+                    <ol class="flex items-center space-x-2 text-sm text-blue-100">
+                        <li>
+                            <a href="{% url 'references:dashboard' %}" class="hover:text-white transition">{% trans "Reference Section" %}</a>
+                        </li>
+                        <li><span class="mx-2">/</span></li>
+                        <li class="text-white font-medium">{% trans "Search" %}</li>
+                    </ol>
+                </nav>
+                <h1 class="text-2xl font-bold">{% trans "Search Documents" %}</h1>
+            </div>
+            <div>
+                <a href="{% url 'references:dashboard' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Dashboard" %}
+                </a>
+            </div>
         </div>
     </div>
 
     <!-- Search Form -->
-    <div class="card mb-4">
-        <div class="card-header">
-            <h5 class="mb-0">{% trans "Filter Documents" %}</h5>
+    <div class="section-card mb-6">
+        <div class="section-header">
+            <div class="section-icon bg-blue/10">
+                <i data-lucide="filter" class="w-5 h-5 text-blue"></i>
+            </div>
+            <h5 class="text-lg font-semibold text-gray-800">{% trans "Filter Documents" %}</h5>
         </div>
-        <div class="card-body">
-            <form method="get" class="row g-3">
-                <div class="col-md-4">
-                    <label for="{{ form.search.id_for_label }}" class="form-label">{{ form.search.label }}</label>
-                    {{ form.search }}
+        <div class="p-4">
+            <form method="get" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1.5">{{ form.search.label }}</label>
+                    <input type="text" name="search" value="{{ request.GET.search|default:'' }}" class="form-control-px360" placeholder="{% trans 'Search by title...' %}">
                 </div>
-                <div class="col-md-3">
-                    <label for="{{ form.folder.id_for_label }}" class="form-label">{{ form.folder.label }}</label>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1.5">{{ form.folder.label }}</label>
                     {{ form.folder }}
                 </div>
-                <div class="col-md-2">
-                    <label for="{{ form.file_type.id_for_label }}" class="form-label">{{ form.file_type.label }}</label>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1.5">{{ form.file_type.label }}</label>
                     {{ form.file_type }}
                 </div>
-                <div class="col-md-3">
-                    <label for="{{ form.tags.id_for_label }}" class="form-label">{{ form.tags.label }}</label>
-                    {{ form.tags }}
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1.5">{{ form.tags.label }}</label>
+                    <input type="text" name="tags" value="{{ request.GET.tags|default:'' }}" class="form-control-px360" placeholder="{% trans 'Filter by tags...' %}">
                 </div>
-                <div class="col-12">
-                    <button type="submit" class="btn btn-primary">
-                        <i class="fas fa-search me-2"></i>{% trans "Search" %}
+                <div class="lg:col-span-4 flex gap-2 pt-2">
+                    <button type="submit" class="btn-transition inline-flex items-center px-4 py-2.5 bg-navy text-white font-medium rounded-lg hover:bg-blue transition">
+                        <i data-lucide="search" class="w-4 h-4 me-2"></i>{% trans "Search" %}
                     </button>
-                    <a href="{% url 'references:search' %}" class="btn btn-outline-secondary">
-                        <i class="fas fa-times me-2"></i>{% trans "Clear" %}
+                    <a href="{% url 'references:search' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white border-2 border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition">
+                        <i data-lucide="x" class="w-4 h-4 me-2"></i>{% trans "Clear" %}
                     </a>
                 </div>
             </form>
@@ -61,21 +208,24 @@
     </div>
 
     <!-- Results -->
-    <div class="card">
-        <div class="card-header">
-            <div class="d-flex justify-content-between align-items-center">
-                <h5 class="mb-0">
+    <div class="section-card">
+        <div class="section-header">
+            <div class="section-icon bg-navy/10">
+                <i data-lucide="list" class="w-5 h-5 text-navy"></i>
+            </div>
+            <div class="flex items-center">
+                <h5 class="text-lg font-semibold text-gray-800">
                     {% trans "Results" %}
                     {% if page_obj %}
-                        <span class="badge bg-primary ms-2">{{ page_obj.paginator.count }}</span>
+                        <span class="ml-2 badge-px360 badge-navy">{{ page_obj.paginator.count }}</span>
                     {% endif %}
                 </h5>
             </div>
         </div>
-        <div class="card-body">
+        <div class="p-0">
             {% if documents %}
-                <div class="table-responsive">
-                    <table class="table table-hover">
+                <div class="overflow-x-auto">
+                    <table class="data-table">
                         <thead>
                             <tr>
                                 <th>{% trans "Name" %}</th>
@@ -92,43 +242,43 @@
                             {% for document in documents %}
                                 <tr>
                                     <td>
-                                        <a href="{% url 'references:document_view' document.id %}" class="text-decoration-none">
+                                        <a href="{% url 'references:document_view' document.id %}" class="text-navy hover:text-blue transition font-medium">
                                             <i class="{{ document.get_file_icon }} me-2"></i>
                                             {{ document.title }}
                                         </a>
                                         {% if document.description %}
-                                            <br><small class="text-muted">{{ document.description|truncatechars:50 }}</small>
+                                            <br><small class="text-slate-500 text-xs">{{ document.description|truncatechars:50 }}</small>
                                         {% endif %}
                                     </td>
                                     <td>
                                         {% if document.folder %}
-                                            <a href="{% url 'references:folder_view' document.folder.id %}" class="text-decoration-none">
+                                            <a href="{% url 'references:folder_view' document.folder.id %}" class="text-navy hover:text-blue transition text-sm">
                                                 {{ document.folder.name }}
                                             </a>
                                         {% else %}
-                                            <span class="text-muted">-</span>
+                                            <span class="text-slate-400 text-sm">-</span>
                                         {% endif %}
                                     </td>
                                     <td>
-                                        <span class="badge bg-light text-dark">{{ document.file_type|upper }}</span>
+                                        <span class="badge-px360 badge-slate">{{ document.file_type|upper }}</span>
                                     </td>
-                                    <td>{{ document.get_file_size_display }}</td>
+                                    <td class="text-sm text-slate-600">{{ document.get_file_size_display }}</td>
                                     <td>
                                         {% if document.is_latest_version %}
-                                            <span class="badge bg-success">{{ document.version }}</span>
+                                            <span class="badge-px360 badge-green">{{ document.version }}</span>
                                         {% else %}
-                                            <span class="badge bg-secondary">{{ document.version }}</span>
+                                            <span class="badge-px360 badge-slate">{{ document.version }}</span>
                                         {% endif %}
                                     </td>
-                                    <td>{{ document.download_count }}</td>
-                                    <td>{{ document.updated_at|date:"M d, Y" }}</td>
-                                    <td class="text-end">
-                                        <div class="btn-group btn-group-sm">
-                                            <a href="{% url 'references:api_document_download' document.id %}" class="btn btn-outline-primary" title="{% trans "Download" %}">
-                                                <i class="fas fa-download"></i>
+                                    <td class="text-sm text-slate-600">{{ document.download_count }}</td>
+                                    <td class="text-sm text-slate-600">{{ document.updated_at|date:"M d, Y" }}</td>
+                                    <td>
+                                        <div class="flex items-center justify-end gap-1">
+                                            <a href="{% url 'references:api_document_download' document.id %}" class="p-2 text-navy hover:bg-navy hover:text-white rounded-lg transition" title="{% trans "Download" %}">
+                                                <i data-lucide="download" class="w-4 h-4"></i>
                                             </a>
-                                            <a href="{% url 'references:document_view' document.id %}" class="btn btn-outline-secondary" title="{% trans "View" %}">
-                                                <i class="fas fa-eye"></i>
+                                            <a href="{% url 'references:document_view' document.id %}" class="p-2 text-slate-600 hover:bg-slate-200 rounded-lg transition" title="{% trans "View" %}">
+                                                <i data-lucide="eye" class="w-4 h-4"></i>
                                             </a>
                                         </div>
                                     </td>
@@ -140,16 +290,16 @@
 
                 <!-- Pagination -->
                 {% if page_obj.has_other_pages %}
-                    <nav aria-label="Page navigation" class="mt-3">
-                        <ul class="pagination justify-content-center">
+                    <nav aria-label="Page navigation" class="px-4 py-4 border-t border-gray-100">
+                        <ul class="flex justify-center gap-2">
                             {% if page_obj.has_previous %}
-                                <li class="page-item">
-                                    <a class="page-link" href="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
+                                <li>
+                                    <a class="pagination-btn" href="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                                         {% trans "First" %}
                                     </a>
                                 </li>
-                                <li class="page-item">
-                                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
+                                <li>
+                                    <a class="pagination-btn" href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                                         {% trans "Previous" %}
                                     </a>
                                 </li>
@@ -157,22 +307,22 @@
 
                             {% for num in page_obj.paginator.page_range %}
                                 {% if page_obj.number == num %}
-                                    <li class="page-item active"><span class="page-link">{{ num }}</span></li>
+                                    <li><span class="pagination-btn active">{{ num }}</span></li>
                                 {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
-                                    <li class="page-item">
-                                        <a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ num }}</a>
+                                    <li>
+                                        <a class="pagination-btn" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ num }}</a>
                                     </li>
                                 {% endif %}
                             {% endfor %}
 
                             {% if page_obj.has_next %}
-                                <li class="page-item">
-                                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
+                                <li>
+                                    <a class="pagination-btn" href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                                         {% trans "Next" %}
                                     </a>
                                 </li>
-                                <li class="page-item">
-                                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
+                                <li>
+                                    <a class="pagination-btn" href="?page={{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                                         {% trans "Last" %}
                                     </a>
                                 </li>
@@ -181,11 +331,11 @@
                     </nav>
                 {% endif %}
             {% else %}
-                <div class="text-center py-5">
-                    <i class="fas fa-search fa-3x mb-3 text-muted"></i>
-                    <p class="text-muted mb-3">{% trans "No documents found matching your search criteria" %}</p>
-                    <a href="{% url 'references:search' %}" class="btn btn-outline-primary">
-                        <i class="fas fa-times me-2"></i>{% trans "Clear Filters" %}
+                <div class="empty-state">
+                    <i data-lucide="search" class="w-16 h-16 mx-auto mb-4 text-slate-300"></i>
+                    <p class="text-slate-500 mb-4">{% trans "No documents found matching your search criteria" %}</p>
+                    <a href="{% url 'references:search' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white border-2 border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition">
+                        <i data-lucide="x" class="w-4 h-4 me-2"></i>{% trans "Clear Filters" %}
                     </a>
                 </div>
             {% endif %}
diff --git a/templates/reports/report_builder.html b/templates/reports/report_builder.html
new file mode 100644
index 0000000..3e275e3
--- /dev/null
+++ b/templates/reports/report_builder.html
@@ -0,0 +1,1036 @@
+{% extends 'layouts/base.html' %}
+{% load static %}
+
+{% block title %}Report Builder - PX360{% endblock %}
+
+{% block extra_css %}
+<style>
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-in {
+        animation: fadeIn 0.5s ease-out forwards;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Breadcrumb -->
+    <nav class="mb-6 animate-in">
+        <ol class="flex items-center gap-2 text-sm text-slate">
+            <li><a href="{% url 'dashboard:my_dashboard' %}" class="text-blue hover:text-navy font-medium">Dashboard</a></li>
+            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
+            <li class="text-navy font-semibold">Report Builder</li>
+        </ol>
+    </nav>
+
+    <!-- Page Header -->
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 mb-6 animate-in">
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+            <div class="flex items-center gap-3">
+                <div class="w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-200">
+                    <i data-lucide="file-spreadsheet" class="w-8 h-8 text-white"></i>
+                </div>
+                <div>
+                    <h1 class="text-2xl font-bold text-navy">Report Builder</h1>
+                    <p class="text-slate text-sm">Create custom reports with filters and export options</p>
+                </div>
+            </div>
+            <div class="flex gap-3">
+                <a href="{% url 'reports:saved_reports' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
+                    <i data-lucide="folder-open" class="w-4 h-4"></i>Saved Reports
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        <!-- Left Panel - Configuration -->
+        <div class="lg:col-span-1">
+            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 sticky top-6">
+                <!-- Data Source Selection -->
+                <div class="mb-6">
+                    <label class="block text-sm font-bold text-navy mb-2">Data Source</label>
+                    <select id="dataSource" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
+                        {% for value, label in data_sources %}
+                        <option value="{{ value }}">{{ label }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+
+                <!-- Date Range -->
+                <div class="mb-6">
+                    <label class="block text-sm font-bold text-navy mb-2">Date Range</label>
+                    <select id="dateRange" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
+                        <option value="7d">Last 7 Days</option>
+                        <option value="30d" selected>Last 30 Days</option>
+                        <option value="90d">Last 90 Days</option>
+                        <option value="ytd">Year to Date</option>
+                        <option value="custom">Custom Range</option>
+                    </select>
+                    <div id="customDateRange" class="hidden mt-3 space-y-2">
+                        <input type="date" id="startDate" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition">
+                        <input type="date" id="endDate" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition">
+                    </div>
+                </div>
+
+                <!-- Hospital Filter -->
+                <div class="mb-6">
+                    <label class="block text-sm font-bold text-navy mb-2">Hospital</label>
+                    <select id="hospitalFilter" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
+                        <option value="">All Hospitals</option>
+                        {% for hospital in hospitals %}
+                        <option value="{{ hospital.id }}">{{ hospital.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+
+                <!-- Department Filter -->
+                <div class="mb-6">
+                    <label class="block text-sm font-bold text-navy mb-2">Department</label>
+                    <select id="departmentFilter" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
+                        <option value="">All Departments</option>
+                    </select>
+                </div>
+
+                <!-- Status Filter -->
+                <div class="mb-6" id="statusFilterContainer">
+                    <label class="block text-sm font-bold text-navy mb-2">Status</label>
+                    <select id="statusFilter" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
+                        <option value="">All Statuses</option>
+                    </select>
+                </div>
+
+                <!-- Column Selection -->
+                <div class="mb-6" id="columnFilterContainer">
+                    <div class="flex items-center justify-between mb-2">
+                        <label class="text-sm font-bold text-navy">Columns</label>
+                        <div class="flex gap-2">
+                            <button type="button" id="selectAllColumns" class="text-xs text-blue-600 hover:text-blue-800 font-medium">Select All</button>
+                            <span class="text-slate-300">|</span>
+                            <button type="button" id="clearAllColumns" class="text-xs text-slate-500 hover:text-slate-700 font-medium">Clear All</button>
+                        </div>
+                    </div>
+                    <div id="columnCheckboxes" class="max-h-48 overflow-y-auto border-2 border-blue-100 rounded-xl p-3 space-y-2 bg-slate-50">
+                        <!-- Column checkboxes will be populated dynamically -->
+                        <p class="text-sm text-slate-400 italic">Select a data source to see available columns</p>
+                    </div>
+                </div>
+
+                <!-- Actions -->
+                <div class="space-y-3 pt-4 border-t border-blue-100">
+                    <button id="previewBtn" class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                        <i data-lucide="eye" class="w-4 h-4"></i>Generate Report
+                    </button>
+                    <button id="saveBtn" class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
+                        <i data-lucide="save" class="w-4 h-4"></i>Save Report
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right Panel - Preview -->
+        <div class="lg:col-span-3 space-y-6">
+            <!-- Summary Cards -->
+            <div id="summaryCards" class="grid grid-cols-1 md:grid-cols-4 gap-4" style="display:none;">
+                <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
+                    <div class="flex items-center gap-3">
+                        <div class="w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-xl flex items-center justify-center">
+                            <i data-lucide="database" class="w-6 h-6 text-white"></i>
+                        </div>
+                        <div>
+                            <div class="text-2xl font-bold text-navy" id="totalCount">0</div>
+                            <div class="text-xs text-slate uppercase font-semibold">Total Records</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Export Buttons -->
+            <div id="exportButtons" class="flex flex-wrap gap-3" style="display:none;">
+                <button id="exportCsvBtn" class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-green-200 text-green-700 rounded-xl font-semibold hover:bg-green-50 transition">
+                    <i data-lucide="file-text" class="w-4 h-4"></i>Export CSV
+                </button>
+                <button id="exportExcelBtn" class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-emerald-200 text-emerald-700 rounded-xl font-semibold hover:bg-emerald-50 transition">
+                    <i data-lucide="file-spreadsheet" class="w-4 h-4"></i>Export Excel
+                </button>
+                <button id="copyToClipboardBtn" class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
+                    <i data-lucide="copy" class="w-4 h-4"></i>Copy to Clipboard
+                </button>
+                <button id="printTableBtn" class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                    <i data-lucide="printer" class="w-4 h-4"></i>Print
+                </button>
+                <button id="columnVisibilityBtn" class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-indigo-200 text-indigo-700 rounded-xl font-semibold hover:bg-indigo-50 transition">
+                    <i data-lucide="eye" class="w-4 h-4"></i>Columns
+                </button>
+            </div>
+
+            <!-- Data Table -->
+            <div id="dataTableContainer" class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+                <div class="text-center py-16">
+                    <div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="file-spreadsheet" class="w-10 h-10 text-blue-500"></i>
+                    </div>
+                    <p class="text-slate font-medium text-lg">Configure your report and click "Generate Report" to see results</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Save Report Modal -->
+<div id="saveModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center backdrop-blur-sm">
+    <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 overflow-hidden">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-gradient-to-br from-blue to-navy rounded-xl flex items-center justify-center">
+                    <i data-lucide="save" class="w-5 h-5 text-white"></i>
+                </div>
+                <h3 class="text-lg font-bold text-navy">Save Report</h3>
+            </div>
+        </div>
+        <div class="p-6 space-y-4">
+            <div>
+                <label class="block text-sm font-bold text-navy mb-2">Report Name</label>
+                <input type="text" id="reportName" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition" placeholder="Enter report name">
+            </div>
+            <div>
+                <label class="block text-sm font-bold text-navy mb-2">Description</label>
+                <textarea id="reportDescription" rows="3" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition" placeholder="Enter description (optional)"></textarea>
+            </div>
+            <div class="flex items-center gap-3 p-4 bg-blue-50 rounded-xl">
+                <input type="checkbox" id="isShared" class="w-5 h-5 text-blue-600 border-blue-300 rounded focus:ring-blue">
+                <label for="isShared" class="text-sm font-medium text-navy">Share with my hospital</label>
+            </div>
+        </div>
+        <div class="px-6 py-5 bg-gradient-to-r from-blue-50 to-transparent flex justify-end gap-3">
+            <button id="cancelSave" class="inline-flex items-center gap-2 px-6 py-2.5 border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                <i data-lucide="x" class="w-4 h-4"></i>Cancel
+            </button>
+            <button id="confirmSave" class="inline-flex items-center gap-2 px-6 py-2.5 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                <i data-lucide="check" class="w-4 h-4"></i>Save Report
+            </button>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+// CSRF Token from template
+const CSRF_TOKEN = '{{ csrf_token }}';
+
+// DOM elements
+let dataSourceSelect = null;
+let dateRangeSelect = null;
+let hospitalFilter = null;
+let departmentFilter = null;
+let statusFilter = null;
+let previewBtn = null;
+let saveBtn = null;
+let saveModal = null;
+let cancelSaveBtn = null;
+let confirmSaveBtn = null;
+let exportCsvBtn = null;
+let exportExcelBtn = null;
+let currentReportId = null;
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+    
+    // Initialize DOM element references
+    dataSourceSelect = document.getElementById('dataSource');
+    dateRangeSelect = document.getElementById('dateRange');
+    hospitalFilter = document.getElementById('hospitalFilter');
+    departmentFilter = document.getElementById('departmentFilter');
+    statusFilter = document.getElementById('statusFilter');
+    previewBtn = document.getElementById('previewBtn');
+    saveBtn = document.getElementById('saveBtn');
+    saveModal = document.getElementById('saveModal');
+    cancelSaveBtn = document.getElementById('cancelSave');
+    confirmSaveBtn = document.getElementById('confirmSave');
+    exportCsvBtn = document.getElementById('exportCsvBtn');
+    exportExcelBtn = document.getElementById('exportExcelBtn');
+    copyToClipboardBtn = document.getElementById('copyToClipboardBtn');
+    printTableBtn = document.getElementById('printTableBtn');
+    columnVisibilityBtn = document.getElementById('columnVisibilityBtn');
+
+    // Event listeners
+    if (dataSourceSelect) dataSourceSelect.addEventListener('change', loadFilterOptions);
+    if (dateRangeSelect) dateRangeSelect.addEventListener('change', toggleCustomDateRange);
+    if (hospitalFilter) hospitalFilter.addEventListener('change', loadDepartments);
+    if (previewBtn) previewBtn.addEventListener('click', generateReport);
+    if (saveBtn) saveBtn.addEventListener('click', showSaveModal);
+    if (cancelSaveBtn) cancelSaveBtn.addEventListener('click', hideSaveModal);
+    if (confirmSaveBtn) confirmSaveBtn.addEventListener('click', saveReport);
+    if (exportCsvBtn) exportCsvBtn.addEventListener('click', () => exportReport('csv'));
+    if (exportExcelBtn) exportExcelBtn.addEventListener('click', () => exportReport('excel'));
+    if (copyToClipboardBtn) copyToClipboardBtn.addEventListener('click', copyTableToClipboard);
+    if (printTableBtn) printTableBtn.addEventListener('click', printTable);
+    if (columnVisibilityBtn) columnVisibilityBtn.addEventListener('click', toggleColumnVisibility);
+    
+    // Close modal on outside click
+    if (saveModal) {
+        saveModal.addEventListener('click', function(e) {
+            if (e.target === saveModal) {
+                hideSaveModal();
+            }
+        });
+    }
+    
+    // Initialize
+    loadFilterOptions();
+});
+
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+function getCSRFToken() {
+    if (typeof CSRF_TOKEN !== 'undefined' && CSRF_TOKEN) {
+        return CSRF_TOKEN;
+    }
+    return getCookie('csrftoken');
+}
+
+function toggleCustomDateRange() {
+    const customRange = document.getElementById('customDateRange');
+    if (dateRangeSelect.value === 'custom') {
+        customRange.classList.remove('hidden');
+    } else {
+        customRange.classList.add('hidden');
+    }
+}
+
+function showSaveModal() {
+    saveModal.classList.remove('hidden');
+}
+
+function hideSaveModal() {
+    saveModal.classList.add('hidden');
+}
+
+async function loadFilterOptions() {
+    const dataSource = dataSourceSelect.value;
+    try {
+        const response = await fetch(`/reports/api/filter-options/?data_source=${dataSource}`);
+        const data = await response.json();
+
+        // Populate status filter
+        if (data.status) {
+            statusFilter.innerHTML = '<option value="">All Statuses</option>';
+            data.status.forEach(status => {
+                const option = document.createElement('option');
+                option.value = status;
+                option.textContent = status;
+                statusFilter.appendChild(option);
+            });
+        }
+
+        // Populate column checkboxes
+        if (data.columns) {
+            renderColumnCheckboxes(data.columns);
+        }
+    } catch (error) {
+        console.error('Error loading filter options:', error);
+    }
+}
+
+function renderColumnCheckboxes(columns) {
+    const container = document.getElementById('columnCheckboxes');
+    if (!columns || columns.length === 0) {
+        container.innerHTML = '<p class="text-sm text-slate-400 italic">No columns available</p>';
+        return;
+    }
+
+    let html = '';
+    columns.forEach(col => {
+        const checked = col.selected ? 'checked' : '';
+        html += `
+            <label class="flex items-center gap-2 cursor-pointer hover:bg-white p-1.5 rounded-lg transition">
+                <input type="checkbox" name="column" value="${col.key}" ${checked}
+                    class="w-4 h-4 text-blue-600 border-blue-300 rounded focus:ring-blue">
+                <span class="text-sm text-navy">${col.label}</span>
+            </label>
+        `;
+    });
+    container.innerHTML = html;
+
+    // Setup select all / clear all handlers
+    document.getElementById('selectAllColumns').onclick = function() {
+        container.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = true);
+    };
+    document.getElementById('clearAllColumns').onclick = function() {
+        container.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
+    };
+}
+
+function getSelectedColumns() {
+    const checkboxes = document.querySelectorAll('#columnCheckboxes input[type="checkbox"]:checked');
+    return Array.from(checkboxes).map(cb => cb.value);
+}
+
+async function loadDepartments() {
+    const hospitalId = hospitalFilter.value;
+    if (!hospitalId) {
+        departmentFilter.innerHTML = '<option value="">All Departments</option>';
+        return;
+    }
+
+    try {
+        const response = await fetch(`/reports/api/filter-options/?hospital=${hospitalId}`);
+        const data = await response.json();
+
+        departmentFilter.innerHTML = '<option value="">All Departments</option>';
+        if (data.departments) {
+            data.departments.forEach(dept => {
+                const option = document.createElement('option');
+                option.value = dept.id;
+                option.textContent = dept.name;
+                departmentFilter.appendChild(option);
+            });
+        }
+    } catch (error) {
+        console.error('Error loading departments:', error);
+    }
+}
+
+function getDateRange() {
+    const range = dateRangeSelect.value;
+    if (range === 'custom') {
+        return {
+            start: document.getElementById('startDate').value,
+            end: document.getElementById('endDate').value
+        };
+    }
+    const days = { '7d': 7, '30d': 30, '90d': 90, 'ytd': 365 };
+    const endDate = new Date();
+    const startDate = new Date();
+    startDate.setDate(startDate.getDate() - (days[range] || 30));
+    return {
+        start: startDate.toISOString().split('T')[0],
+        end: endDate.toISOString().split('T')[0]
+    };
+}
+
+async function generateReport() {
+    const dateRange = getDateRange();
+    const selectedColumns = getSelectedColumns();
+    
+    const payload = {
+        data_source: dataSourceSelect.value,
+        filter_config: {
+            date_range: dateRangeSelect.value,
+            date_start: dateRange.start,
+            date_end: dateRange.end,
+            hospital: hospitalFilter.value,
+            department: departmentFilter.value,
+            status: statusFilter.value,
+        },
+        column_config: selectedColumns,
+        grouping_config: {},
+        chart_config: {},
+        sort_config: []
+    };
+
+    previewBtn.disabled = true;
+    previewBtn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Loading...';
+
+    try {
+        const response = await fetch('/reports/preview/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': getCSRFToken()
+            },
+            body: JSON.stringify(payload)
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            renderReport(data);
+        } else {
+            alert('Error: ' + (data.error || 'Failed to generate report'));
+        }
+    } catch (error) {
+        console.error('Error generating report:', error);
+        alert('Error generating report. Please try again.');
+    } finally {
+        previewBtn.disabled = false;
+        previewBtn.innerHTML = '<i data-lucide="eye" class="w-4 h-4"></i>Generate Report';
+        lucide.createIcons();
+    }
+}
+
+function renderReport(response) {
+    const data = response.data || {};
+    const summary = response.summary || {};
+    
+    // Show summary cards
+    const summaryCards = document.getElementById('summaryCards');
+    summaryCards.style.display = 'grid';
+    document.getElementById('totalCount').textContent = summary.total_count || data.rows?.length || 0;
+
+    // Show export buttons
+    document.getElementById('exportButtons').style.display = 'flex';
+
+    // Render data table
+    const rows = data.rows || [];
+    const columns = data.columns || [];
+    const columnKeys = data.column_keys || [];
+    renderDataTable(rows, columns, columnKeys);
+}
+
+function renderDataTable(data, columns, columnKeys) {
+    const container = document.getElementById('dataTableContainer');
+
+    if (!data || data.length === 0) {
+        container.innerHTML = `
+            <div class="text-center py-16">
+                <div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="inbox" class="w-10 h-10 text-blue-500"></i>
+                </div>
+                <p class="text-slate font-medium text-lg">No data found for the selected filters</p>
+                <p class="text-sm text-slate mt-2">Try adjusting your filters or selecting different columns</p>
+            </div>
+        `;
+        lucide.createIcons();
+        return;
+    }
+
+    // Use columnKeys for data access, columns for display
+    const displayColumns = columns.length > 0 ? columns : Object.keys(data[0]);
+    const dataKeys = columnKeys && columnKeys.length > 0 ? columnKeys : Object.keys(data[0]);
+
+    // Store data globally for sorting/filtering
+    window.currentReportData = data;
+    window.currentReportColumns = displayColumns;
+    window.currentReportKeys = dataKeys;
+    window.currentSortColumn = null;
+    window.currentSortDirection = 'asc';
+    
+    // Initialize column visibility
+    if (!window.columnVisibility) {
+        window.columnVisibility = {};
+        dataKeys.forEach(key => {
+            window.columnVisibility[key] = true;
+        });
+    }
+
+    let html = `
+        <div class="overflow-x-auto">
+            <!-- Table Search -->
+            <div class="p-4 border-b border-slate-200 bg-white sticky top-0 z-10">
+                <div class="flex items-center justify-between gap-4">
+                    <div class="relative flex-1 max-w-md">
+                        <input type="text" id="tableSearch" 
+                            placeholder="Search in results..." 
+                            class="w-full pl-10 pr-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition"
+                            onkeyup="searchTable(this.value)">
+                        <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate"></i>
+                    </div>
+                    <div class="text-sm text-slate">
+                        <span class="font-semibold text-navy">${data.length}</span> records × <span class="font-semibold text-navy">${displayColumns.length}</span> columns
+                    </div>
+                </div>
+            </div>
+            
+            <table class="w-full" id="reportTable">
+                <thead class="bg-slate-50 border-b-2 border-slate-200 sticky top-[73px] z-10">
+                    <tr>
+                        <th class="px-4 py-3 text-center text-xs font-bold text-slate-400 uppercase tracking-wider w-16">#</th>
+                        ${displayColumns.map((col, index) => {
+                            const key = dataKeys[index];
+                            const isVisible = window.columnVisibility[key] !== false;
+                            return `
+                            <th class="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition select-none ${!isVisible ? 'hidden' : ''}"
+                                onclick="sortTable('${key}')"
+                                data-key="${key}"
+                                data-column-index="${index}">
+                                <div class="flex items-center gap-2">
+                                    ${col}
+                                    <span class="sort-indicator text-blue-600"></span>
+                                </div>
+                            </th>
+                        `}).join('')}
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-100" id="tableBody">
+    `;
+
+    // Render rows with pagination (first 100)
+    const pageSize = 100;
+    data.slice(0, pageSize).forEach((row, rowIndex) => {
+        const actualIndex = rowIndex + 1;
+        html += `<tr class="hover:bg-blue-50 transition group" data-index="${rowIndex}">`;
+        html += `<td class="px-4 py-3 text-sm text-slate-400 text-center font-mono">${actualIndex}</td>`;
+        
+        dataKeys.forEach((key, index) => {
+            const isVisible = window.columnVisibility[key] !== false;
+            const value = row[key] || '-';
+            html += `<td class="px-4 py-3 text-sm text-navy ${!isVisible ? 'hidden' : ''}">${value}</td>`;
+        });
+        
+        html += '</tr>';
+    });
+
+    html += '</tbody></table></div>';
+
+    // Add pagination if more data
+    if (data.length > pageSize) {
+        html += `
+            <div class="flex items-center justify-between px-4 py-3 border-t border-slate-200 bg-slate-50">
+                <p class="text-sm text-slate">
+                    Showing <span class="font-semibold text-navy">1-${pageSize}</span> of <span class="font-semibold text-navy">${data.length}</span> records
+                </p>
+                <div class="flex gap-2">
+                    <span class="px-4 py-2 text-slate-400 text-sm">More pages coming soon</span>
+                </div>
+            </div>
+        `;
+    }
+
+    container.innerHTML = html;
+    lucide.createIcons();
+}
+
+// Search within table results
+function searchTable(searchTerm) {
+    if (!window.currentReportData) return;
+    
+    const term = searchTerm.toLowerCase().trim();
+    const dataKeys = window.currentReportKeys;
+    
+    let filteredData = window.currentReportData;
+    
+    if (term) {
+        filteredData = window.currentReportData.filter(row => {
+            return dataKeys.some(key => {
+                const value = row[key];
+                return value && String(value).toLowerCase().includes(term);
+            });
+        });
+    }
+    
+    // Re-render with filtered data
+    renderTableBody(filteredData);
+}
+
+// Sort table by column
+function sortTable(columnKey) {
+    if (!window.currentReportData) return;
+    
+    // Toggle sort direction
+    if (window.currentSortColumn === columnKey) {
+        window.currentSortDirection = window.currentSortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+        window.currentSortColumn = columnKey;
+        window.currentSortDirection = 'asc';
+    }
+    
+    // Sort data
+    const sortedData = [...window.currentReportData].sort((a, b) => {
+        let aVal = a[columnKey];
+        let bVal = b[columnKey];
+        
+        // Handle null/undefined
+        if (!aVal) aVal = '';
+        if (!bVal) bVal = '';
+        
+        // Try numeric comparison
+        const aNum = parseFloat(aVal);
+        const bNum = parseFloat(bVal);
+        
+        if (!isNaN(aNum) && !isNaN(bNum)) {
+            return window.currentSortDirection === 'asc' ? aNum - bNum : bNum - aNum;
+        }
+        
+        // String comparison
+        const aStr = String(aVal).toLowerCase();
+        const bStr = String(bVal).toLowerCase();
+        
+        if (window.currentSortDirection === 'asc') {
+            return aStr.localeCompare(bStr, 'en', { numeric: true });
+        } else {
+            return bStr.localeCompare(aStr, 'en', { numeric: true });
+        }
+    });
+    
+    // Update stored data
+    window.currentReportData = sortedData;
+    
+    // Update sort indicators
+    document.querySelectorAll('.sort-indicator').forEach(span => {
+        span.innerHTML = '';
+    });
+    
+    const activeHeader = document.querySelector(`th[data-key="${columnKey}"] .sort-indicator`);
+    if (activeHeader) {
+        activeHeader.innerHTML = window.currentSortDirection === 'asc' 
+            ? '<i data-lucide="arrow-up" class="w-4 h-4"></i>' 
+            : '<i data-lucide="arrow-down" class="w-4 h-4"></i>';
+        lucide.createIcons();
+    }
+    
+    // Re-render
+    renderTableBody(sortedData);
+}
+
+// Render table body only (for search/sort)
+function renderTableBody(dataToRender) {
+    const tbody = document.getElementById('tableBody');
+    if (!tbody) return;
+    
+    const dataKeys = window.currentReportKeys;
+    const pageSize = 100;
+    const data = dataToRender || window.currentReportData;
+    
+    let html = '';
+    data.slice(0, pageSize).forEach((row, rowIndex) => {
+        const actualIndex = rowIndex + 1;
+        html += `<tr class="hover:bg-blue-50 transition group" data-index="${rowIndex}">`;
+        html += `<td class="px-4 py-3 text-sm text-slate-400 text-center font-mono">${actualIndex}</td>`;
+        
+        dataKeys.forEach((key, index) => {
+            const isVisible = window.columnVisibility[key] !== false;
+            const value = row[key] || '-';
+            html += `<td class="px-4 py-3 text-sm text-navy ${!isVisible ? 'hidden' : ''}">${value}</td>`;
+        });
+        
+        html += '</tr>';
+    });
+    
+    tbody.innerHTML = html;
+}
+
+// Copy table to clipboard
+function copyTableToClipboard() {
+    if (!window.currentReportData || !window.currentReportColumns) {
+        alert('No data to copy. Please generate a report first.');
+        return;
+    }
+    
+    const data = window.currentReportData;
+    const columns = window.currentReportColumns;
+    const keys = window.currentReportKeys;
+    
+    // Create TSV (Tab-Separated Values) format
+    let tsv = columns.join('\t') + '\n';
+    
+    data.forEach(row => {
+        const values = keys.map(key => {
+            let val = row[key] || '';
+            // Escape tabs and newlines
+            val = String(val).replace(/[\t\n\r]/g, ' ');
+            return val;
+        });
+        tsv += values.join('\t') + '\n';
+    });
+    
+    // Copy to clipboard
+    navigator.clipboard.writeText(tsv).then(() => {
+        // Show success feedback
+        const originalText = copyToClipboardBtn.innerHTML;
+        copyToClipboardBtn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i>Copied!';
+        copyToClipboardBtn.classList.add('bg-green-50', 'border-green-300', 'text-green-700');
+        lucide.createIcons();
+        
+        setTimeout(() => {
+            copyToClipboardBtn.innerHTML = originalText;
+            copyToClipboardBtn.classList.remove('bg-green-50', 'border-green-300', 'text-green-700');
+            lucide.createIcons();
+        }, 2000);
+    }).catch(err => {
+        console.error('Failed to copy:', err);
+        alert('Failed to copy to clipboard. Please try again.');
+    });
+}
+
+// Print table
+function printTable() {
+    if (!window.currentReportData || !window.currentReportColumns) {
+        alert('No data to print. Please generate a report first.');
+        return;
+    }
+    
+    const data = window.currentReportData.slice(0, 500); // Limit to 500 rows for print
+    const columns = window.currentReportColumns;
+    const keys = window.currentReportKeys;
+    
+    // Create print window
+    const printWindow = window.open('', '_blank');
+    
+    let html = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <title>Report - ${new Date().toLocaleDateString()}</title>
+            <style>
+                @media print {
+                    body { font-family: Arial, sans-serif; margin: 20px; }
+                    table { width: 100%; border-collapse: collapse; }
+                    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; font-size: 10px; }
+                    th { background-color: #f5f5f5; font-weight: bold; }
+                    tr:nth-child(even) { background-color: #fafafa; }
+                    .header { margin-bottom: 20px; }
+                    .footer { margin-top: 20px; font-size: 10px; color: #666; }
+                }
+            </style>
+        </head>
+        <body>
+            <div class="header">
+                <h2>Report</h2>
+                <p>Generated: ${new Date().toLocaleString()}</p>
+                <p>Records: ${data.length}</p>
+            </div>
+            <table>
+                <thead>
+                    <tr>
+                        ${columns.map(col => `<th>${col}</th>`).join('')}
+                    </tr>
+                </thead>
+                <tbody>
+    `;
+    
+    data.forEach(row => {
+        html += '<tr>';
+        keys.forEach(key => {
+            html += `<td>${row[key] || '-'}</td>`;
+        });
+        html += '</tr>';
+    });
+    
+    html += `
+                </tbody>
+            </table>
+            <div class="footer">
+                <p>PX360 Report Builder</p>
+            </div>
+        </body>
+        </html>
+    `;
+    
+    printWindow.document.write(html);
+    printWindow.document.close();
+    printWindow.focus();
+    
+    setTimeout(() => {
+        printWindow.print();
+    }, 250);
+}
+
+// Toggle column visibility
+let columnVisibilityMenu = null;
+
+function toggleColumnVisibility() {
+    if (!window.currentReportColumns) {
+        alert('No data to configure. Please generate a report first.');
+        return;
+    }
+    
+    // Remove existing menu if open
+    if (columnVisibilityMenu) {
+        columnVisibilityMenu.remove();
+        columnVisibilityMenu = null;
+        return;
+    }
+    
+    const columns = window.currentReportColumns;
+    const keys = window.currentReportKeys;
+    
+    // Create dropdown menu
+    const menu = document.createElement('div');
+    menu.className = 'absolute right-0 mt-2 w-64 bg-white rounded-xl shadow-lg border-2 border-blue-100 z-50 overflow-hidden';
+    menu.style.top = '100%';
+    
+    let html = `
+        <div class="p-3 border-b border-slate-200 bg-slate-50">
+            <h4 class="font-bold text-navy text-sm">Column Visibility</h4>
+            <div class="flex gap-2 mt-2">
+                <button onclick="showAllColumns()" class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200">Show All</button>
+                <button onclick="hideAllColumns()" class="text-xs px-2 py-1 bg-slate-200 text-slate-700 rounded hover:bg-slate-300">Hide All</button>
+            </div>
+        </div>
+        <div class="max-h-64 overflow-y-auto p-2">
+    `;
+    
+    // Store initial visibility state if not exists
+    if (!window.columnVisibility) {
+        window.columnVisibility = {};
+        keys.forEach(key => {
+            window.columnVisibility[key] = true;
+        });
+    }
+    
+    columns.forEach((col, index) => {
+        const key = keys[index];
+        const isVisible = window.columnVisibility[key] !== false;
+        
+        html += `
+            <label class="flex items-center gap-2 p-2 hover:bg-blue-50 rounded-lg cursor-pointer">
+                <input type="checkbox" 
+                    data-column-key="${key}"
+                    data-column-index="${index}"
+                    ${isVisible ? 'checked' : ''}
+                    onchange="toggleColumn(${index})"
+                    class="w-4 h-4 text-blue-600 border-blue-300 rounded focus:ring-blue">
+                <span class="text-sm text-navy">${col}</span>
+            </label>
+        `;
+    });
+    
+    html += '</div>';
+    menu.innerHTML = html;
+    
+    // Position menu
+    columnVisibilityBtn.style.position = 'relative';
+    columnVisibilityBtn.appendChild(menu);
+    columnVisibilityMenu = menu;
+}
+
+function toggleColumn(index) {
+    const key = window.currentReportKeys[index];
+    window.columnVisibility[key] = !window.columnVisibility[key];
+    
+    // Update table visibility
+    const table = document.getElementById('reportTable');
+    if (!table) return;
+    
+    const cells = table.querySelectorAll(`tr > :nth-child(${index + 2})`); // +2 for row number column
+    cells.forEach(cell => {
+        cell.style.display = window.columnVisibility[key] ? '' : 'none';
+    });
+}
+
+function showAllColumns() {
+    window.currentReportKeys.forEach(key => {
+        window.columnVisibility[key] = true;
+    });
+    
+    // Re-render table
+    if (window.currentReportData) {
+        renderDataTable(window.currentReportData, window.currentReportColumns, window.currentReportKeys);
+    }
+    
+    // Close menu
+    if (columnVisibilityMenu) {
+        columnVisibilityMenu.remove();
+        columnVisibilityMenu = null;
+    }
+}
+
+function hideAllColumns() {
+    window.currentReportKeys.forEach(key => {
+        window.columnVisibility[key] = false;
+    });
+    
+    // Re-render table
+    if (window.currentReportData) {
+        renderDataTable(window.currentReportData, window.currentReportColumns, window.currentReportKeys);
+    }
+    
+    // Close menu
+    if (columnVisibilityMenu) {
+        columnVisibilityMenu.remove();
+        columnVisibilityMenu = null;
+    }
+}
+
+// Close column menu when clicking outside
+document.addEventListener('click', function(e) {
+    if (columnVisibilityMenu && !columnVisibilityBtn.contains(e.target)) {
+        columnVisibilityMenu.remove();
+        columnVisibilityMenu = null;
+    }
+});
+
+async function saveReport() {
+    const name = document.getElementById('reportName').value.trim();
+    const description = document.getElementById('reportDescription').value.trim();
+    const isShared = document.getElementById('isShared').checked;
+
+    if (!name) {
+        alert('Please enter a report name');
+        return;
+    }
+
+    confirmSaveBtn.disabled = true;
+    confirmSaveBtn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Saving...';
+
+    const dateRange = getDateRange();
+    const selectedColumns = getSelectedColumns();
+    const payload = {
+        name: name,
+        description: description,
+        is_shared: isShared,
+        data_source: dataSourceSelect.value,
+        filter_config: {
+            date_range: dateRangeSelect.value,
+            date_start: dateRange.start,
+            date_end: dateRange.end,
+            hospital: hospitalFilter.value,
+            department: departmentFilter.value,
+            status: statusFilter.value,
+        },
+        column_config: selectedColumns,
+        grouping_config: {},
+        chart_config: {},
+        sort_config: []
+    };
+
+    try {
+        const response = await fetch('/reports/save/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': getCSRFToken()
+            },
+            body: JSON.stringify(payload)
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            currentReportId = data.report_id;
+            hideSaveModal();
+            alert('Report saved successfully!');
+            document.getElementById('reportName').value = '';
+            document.getElementById('reportDescription').value = '';
+            document.getElementById('isShared').checked = false;
+        } else {
+            alert('Error: ' + (data.error || 'Failed to save report'));
+        }
+    } catch (error) {
+        console.error('Error saving report:', error);
+        alert('Error saving report. Please try again.');
+    } finally {
+        confirmSaveBtn.disabled = false;
+        confirmSaveBtn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i>Save Report';
+        lucide.createIcons();
+    }
+}
+
+function exportReport(format) {
+    if (!currentReportId) {
+        alert('Please save the report first before exporting.');
+        return;
+    }
+    window.location.href = `/reports/${currentReportId}/export/${format}/`;
+}
+</script>
+{% endblock extra_js %}
\ No newline at end of file
diff --git a/templates/reports/report_detail.html b/templates/reports/report_detail.html
new file mode 100644
index 0000000..2cfe4aa
--- /dev/null
+++ b/templates/reports/report_detail.html
@@ -0,0 +1,251 @@
+{% extends 'layouts/base.html' %}
+{% load static %}
+{% load hospital_filters %}
+
+{% block title %}{{ report.name }} - Report Details - PX360{% endblock %}
+
+{% block extra_css %}
+<style>
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-in {
+        animation: fadeIn 0.5s ease-out forwards;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Breadcrumb -->
+    <nav class="mb-6 animate-in">
+        <ol class="flex items-center gap-2 text-sm text-slate">
+            <li><a href="{% url 'dashboard:my_dashboard' %}" class="text-blue hover:text-navy font-medium">Dashboard</a></li>
+            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
+            <li><a href="{% url 'reports:builder' %}" class="text-blue hover:text-navy font-medium">Reports</a></li>
+            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
+            <li><a href="{% url 'reports:saved_reports' %}" class="text-blue hover:text-navy font-medium">Saved Reports</a></li>
+            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
+            <li class="text-navy font-semibold truncate max-w-xs">{{ report.name }}</li>
+        </ol>
+    </nav>
+
+    <!-- Page Header -->
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 mb-6 animate-in">
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+            <div class="flex items-center gap-3">
+                <div class="w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-200">
+                    <i data-lucide="file-text" class="w-8 h-8 text-white"></i>
+                </div>
+                <div>
+                    <h1 class="text-2xl font-bold text-navy">{{ report.name }}</h1>
+                    <div class="flex flex-wrap items-center gap-3 mt-1">
+                        <span class="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">
+                            <i data-lucide="database" class="w-3 h-3"></i>
+                            {{ report.get_data_source_display }}
+                        </span>
+                        {% if report.is_shared %}
+                        <span class="inline-flex items-center gap-1 px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm font-medium">
+                            <i data-lucide="users" class="w-3 h-3"></i>
+                            Shared
+                        </span>
+                        {% endif %}
+                        {% if report.last_run_at %}
+                        <span class="text-sm text-slate">
+                            <i data-lucide="clock" class="w-3 h-3 inline"></i>
+                            Last run: {{ report.last_run_at|date:"M d, Y H:i" }}
+                        </span>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+            <div class="flex flex-wrap gap-2">
+                <a href="{% url 'reports:saved_reports' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4"></i>Back
+                </a>
+                <a href="{% url 'reports:export_report' report.id 'csv' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-green-200 text-green-700 rounded-xl font-semibold hover:bg-green-50 transition">
+                    <i data-lucide="file-text" class="w-4 h-4"></i>CSV
+                </a>
+                <a href="{% url 'reports:export_report' report.id 'excel' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-emerald-200 text-emerald-700 rounded-xl font-semibold hover:bg-emerald-50 transition">
+                    <i data-lucide="file-spreadsheet" class="w-4 h-4"></i>Excel
+                </a>
+                <a href="{% url 'reports:export_report' report.id 'pdf' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-red-200 text-red-700 rounded-xl font-semibold hover:bg-red-50 transition">
+                    <i data-lucide="file-text" class="w-4 h-4"></i>PDF
+                </a>
+                {% if report.created_by == request.user %}
+                <a href="{% url 'reports:delete_report' report.id %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-red-200 text-red-700 rounded-xl font-semibold hover:bg-red-50 transition" onclick="return confirm('Are you sure you want to delete this report?')">
+                    <i data-lucide="trash-2" class="w-4 h-4"></i>Delete
+                </a>
+                {% endif %}
+            </div>
+        </div>
+        {% if report.description %}
+        <p class="mt-4 text-slate">{{ report.description }}</p>
+        {% endif %}
+    </div>
+
+    <!-- Summary Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6 animate-in">
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-xl flex items-center justify-center">
+                    <i data-lucide="database" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-navy">{{ summary.total_count|default:data.rows|length|default:0 }}</div>
+                    <div class="text-xs text-slate uppercase font-semibold">Total Records</div>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-xl flex items-center justify-center">
+                    <i data-lucide="calendar" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <div class="text-lg font-bold text-navy">{{ report.created_at|date:"M d, Y" }}</div>
+                    <div class="text-xs text-slate uppercase font-semibold">Created</div>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-xl flex items-center justify-center">
+                    <i data-lucide="columns" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-navy">{{ data.columns|length|default:0 }}</div>
+                    <div class="text-xs text-slate uppercase font-semibold">Columns</div>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
+            <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-500 rounded-xl flex items-center justify-center">
+                    <i data-lucide="user" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <div class="text-lg font-bold text-navy truncate">{{ report.created_by.get_full_name|default:report.created_by.username }}</div>
+                    <div class="text-xs text-slate uppercase font-semibold">Created By</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Data Table -->
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden animate-in">
+        {% if data.rows and data.rows|length > 0 %}
+        <div class="overflow-x-auto">
+            <table class="w-full">
+                <thead class="bg-slate-50 border-b border-slate-200">
+                    <tr>
+                        {% for column in data.columns %}
+                        <th class="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">{{ column }}</th>
+                        {% endfor %}
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-100">
+                    {% for row in data.rows %}
+                    <tr class="hover:bg-blue-50 transition">
+                        {% for column_key in data.column_keys %}
+                        <td class="px-4 py-3 text-sm text-navy">{{ row|lookup:column_key|default:"-" }}</td>
+                        {% endfor %}
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% if data.rows|length > 100 %}
+        <div class="px-4 py-3 bg-slate-50 text-center text-sm text-slate-600">
+            Showing 100 of {{ data.rows|length }} records
+        </div>
+        {% endif %}
+        {% else %}
+        <div class="text-center py-16">
+            <div class="w-20 h-20 bg-gradient-to-br from-slate-100 to-slate-200 rounded-full flex items-center justify-center mx-auto mb-4">
+                <i data-lucide="inbox" class="w-10 h-10 text-slate-400"></i>
+            </div>
+            <p class="text-slate font-medium text-lg">No data found</p>
+            <p class="text-slate mt-2">The report filters may be too restrictive or no data exists for the selected criteria.</p>
+        </div>
+        {% endif %}
+    </div>
+
+    <!-- Report Configuration (Collapsible) -->
+    <div class="mt-6 bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden animate-in">
+        <button type="button" class="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-slate-50 transition" onclick="toggleConfig()">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-gradient-to-br from-slate-100 to-slate-200 rounded-xl flex items-center justify-center">
+                    <i data-lucide="settings" class="w-5 h-5 text-slate-600"></i>
+                </div>
+                <span class="font-bold text-navy">Report Configuration</span>
+            </div>
+            <i data-lucide="chevron-down" class="w-5 h-5 text-slate transition-transform" id="configChevron"></i>
+        </button>
+        <div id="configPanel" class="hidden border-t border-slate-100">
+            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <h4 class="text-sm font-bold text-slate mb-2">Filter Configuration</h4>
+                    <pre class="bg-slate-50 rounded-xl p-4 text-xs text-slate overflow-x-auto">{{ report.filter_config|json_script:"filterConfig" }}</pre>
+                    <script id="filterConfig" type="application/json">{{ report.filter_config }}</script>
+                    <div class="bg-slate-50 rounded-xl p-4 text-xs text-slate">
+                        {% for key, value in report.filter_config.items %}
+                        <div class="flex justify-between py-1 border-b border-slate-200 last:border-0">
+                            <span class="font-medium">{{ key }}</span>
+                            <span>{{ value }}</span>
+                        </div>
+                        {% empty %}
+                        <p class="text-slate-400 italic">No filters configured</p>
+                        {% endfor %}
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-sm font-bold text-slate mb-2">Report Details</h4>
+                    <div class="bg-slate-50 rounded-xl p-4 text-xs text-slate space-y-2">
+                        <div class="flex justify-between py-1 border-b border-slate-200">
+                            <span class="font-medium">Data Source</span>
+                            <span>{{ report.get_data_source_display }}</span>
+                        </div>
+                        <div class="flex justify-between py-1 border-b border-slate-200">
+                            <span class="font-medium">Created</span>
+                            <span>{{ report.created_at|date:"M d, Y H:i" }}</span>
+                        </div>
+                        <div class="flex justify-between py-1 border-b border-slate-200">
+                            <span class="font-medium">Last Updated</span>
+                            <span>{{ report.updated_at|date:"M d, Y H:i" }}</span>
+                        </div>
+                        {% if report.last_run_at %}
+                        <div class="flex justify-between py-1 border-b border-slate-200">
+                            <span class="font-medium">Last Run</span>
+                            <span>{{ report.last_run_at|date:"M d, Y H:i" }}</span>
+                        </div>
+                        {% endif %}
+                        {% if report.last_run_count %}
+                        <div class="flex justify-between py-1">
+                            <span class="font-medium">Last Run Count</span>
+                            <span>{{ report.last_run_count }} records</span>
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function toggleConfig() {
+    const panel = document.getElementById('configPanel');
+    const chevron = document.getElementById('configChevron');
+    panel.classList.toggle('hidden');
+    chevron.classList.toggle('rotate-180');
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/reports/report_templates.html b/templates/reports/report_templates.html
new file mode 100644
index 0000000..b02756b
--- /dev/null
+++ b/templates/reports/report_templates.html
@@ -0,0 +1,183 @@
+{% extends 'layouts/base.html' %}
+{% load i18n static %}
+
+{% block title %}{% trans "Report Templates" %}{% endblock %}
+
+{% block content %}
+<div class="container mx-auto px-4 py-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-800">{% trans "Report Templates" %}</h1>
+            <p class="text-gray-600 text-sm mt-1">{% trans "Pre-built report templates for quick report generation" %}</p>
+        </div>
+        <a href="{% url 'reports:builder' %}" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center gap-2">
+            <i data-lucide="plus" class="w-4 h-4"></i>
+            {% trans "Custom Report" %}
+        </a>
+    </div>
+
+    <!-- Template Categories -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <!-- Complaints Templates -->
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            <div class="bg-red-50 px-4 py-3 border-b border-red-100">
+                <h3 class="font-semibold text-red-800 flex items-center gap-2">
+                    <i data-lucide="file-text" class="w-5 h-5"></i>
+                    {% trans "Complaints Reports" %}
+                </h3>
+            </div>
+            <div class="p-4 space-y-3">
+                <a href="{% url 'reports:builder' %}?template=complaints_by_department" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Complaints by Department" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Complaint count and resolution rate per department" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=complaints_by_journey" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Complaints by Journey" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Complaint distribution across patient journeys" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=complaints_trends" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Complaint Trends" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Monthly complaint trends and patterns" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=complaints_sla_compliance" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "SLA Compliance" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Resolution time compliance report" %}</p>
+                </a>
+            </div>
+        </div>
+
+        <!-- Inquiries Templates -->
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            <div class="bg-yellow-50 px-4 py-3 border-b border-yellow-100">
+                <h3 class="font-semibold text-yellow-800 flex items-center gap-2">
+                    <i data-lucide="help-circle" class="w-5 h-5"></i>
+                    {% trans "Inquiries Reports" %}
+                </h3>
+            </div>
+            <div class="p-4 space-y-3">
+                <a href="{% url 'reports:builder' %}?template=inquiries_by_department" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Inquiries by Department" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Inquiry volume per department" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=inquiries_response_time" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Response Time Analysis" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Average response time metrics" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=inquiries_by_source" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Inquiries by Source" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Distribution by communication channel" %}</p>
+                </a>
+            </div>
+        </div>
+
+        <!-- Surveys Templates -->
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            <div class="bg-green-50 px-4 py-3 border-b border-green-100">
+                <h3 class="font-semibold text-green-800 flex items-center gap-2">
+                    <i data-lucide="clipboard-list" class="w-5 h-5"></i>
+                    {% trans "Survey Reports" %}
+                </h3>
+            </div>
+            <div class="p-4 space-y-3">
+                <a href="{% url 'reports:builder' %}?template=survey_satisfaction" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Satisfaction Summary" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Overall satisfaction scores and trends" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=survey_by_journey" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Satisfaction by Journey" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Survey results by patient journey type" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=survey_response_rate" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Response Rate Report" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Survey response rates over time" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=negative_feedback" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Negative Feedback Analysis" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Detailed negative response breakdown" %}</p>
+                </a>
+            </div>
+        </div>
+
+        <!-- PX Actions Templates -->
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            <div class="bg-purple-50 px-4 py-3 border-b border-purple-100">
+                <h3 class="font-semibold text-purple-800 flex items-center gap-2">
+                    <i data-lucide="check-square" class="w-5 h-5"></i>
+                    {% trans "PX Action Reports" %}
+                </h3>
+            </div>
+            <div class="p-4 space-y-3">
+                <a href="{% url 'reports:builder' %}?template=actions_status" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Action Status Overview" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Current status of all PX actions" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=actions_by_department" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Actions by Department" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "PX actions assigned to each department" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=actions_overdue" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Overdue Actions" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "List of overdue action items" %}</p>
+                </a>
+            </div>
+        </div>
+
+        <!-- Observations Templates -->
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            <div class="bg-orange-50 px-4 py-3 border-b border-orange-100">
+                <h3 class="font-semibold text-orange-800 flex items-center gap-2">
+                    <i data-lucide="eye" class="w-5 h-5"></i>
+                    {% trans "Observation Reports" %}
+                </h3>
+            </div>
+            <div class="p-4 space-y-3">
+                <a href="{% url 'reports:builder' %}?template=observations_by_type" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Observations by Type" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Distribution by observation category" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=observations_trends" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Observation Trends" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Monthly observation patterns" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=observations_by_location" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Observations by Location" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Observations grouped by area/ward" %}</p>
+                </a>
+            </div>
+        </div>
+
+        <!-- Performance Templates -->
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            <div class="bg-blue-50 px-4 py-3 border-b border-blue-100">
+                <h3 class="font-semibold text-blue-800 flex items-center gap-2">
+                    <i data-lucide="trending-up" class="w-5 h-5"></i>
+                    {% trans "Performance Dashboards" %}
+                </h3>
+            </div>
+            <div class="p-4 space-y-3">
+                <a href="{% url 'reports:builder' %}?template=dept_performance" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Department Performance" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "KPI dashboard for departments" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=resolution_time" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Resolution Time Analysis" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Average resolution time metrics" %}</p>
+                </a>
+                <a href="{% url 'reports:builder' %}?template=monthly_summary" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
+                    <div class="font-medium text-gray-800">{% trans "Monthly Summary" %}</div>
+                    <p class="text-xs text-gray-500 mt-1">{% trans "Overall monthly performance summary" %}</p>
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Back Link -->
+    <div class="mt-6">
+        <a href="{% url 'reports:saved_reports' %}" class="text-blue-600 hover:text-blue-800 flex items-center gap-2">
+            <i data-lucide="arrow-left" class="w-4 h-4"></i>
+            {% trans "Back to Saved Reports" %}
+        </a>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/reports/saved_reports.html b/templates/reports/saved_reports.html
new file mode 100644
index 0000000..7ddf21d
--- /dev/null
+++ b/templates/reports/saved_reports.html
@@ -0,0 +1,203 @@
+{% extends 'layouts/base.html' %}
+{% load static %}
+
+{% block title %}Saved Reports - PX360{% endblock %}
+
+{% block extra_css %}
+<style>
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-in {
+        animation: fadeIn 0.5s ease-out forwards;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
+    <!-- Breadcrumb -->
+    <nav class="mb-6 animate-in">
+        <ol class="flex items-center gap-2 text-sm text-slate">
+            <li><a href="{% url 'dashboard:my_dashboard' %}" class="text-blue hover:text-navy font-medium">Dashboard</a></li>
+            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
+            <li><a href="{% url 'reports:builder' %}" class="text-blue hover:text-navy font-medium">Reports</a></li>
+            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
+            <li class="text-navy font-semibold">Saved Reports</li>
+        </ol>
+    </nav>
+
+    <!-- Page Header -->
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 mb-6 animate-in">
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+            <div class="flex items-center gap-3">
+                <div class="w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-200">
+                    <i data-lucide="folder-open" class="w-8 h-8 text-white"></i>
+                </div>
+                <div>
+                    <h1 class="text-2xl font-bold text-navy">Saved Reports</h1>
+                    <p class="text-slate text-sm">View and manage your saved reports</p>
+                </div>
+            </div>
+            <a href="{% url 'reports:builder' %}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                <i data-lucide="plus" class="w-4 h-4"></i>Create New Report
+            </a>
+        </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 mb-6 animate-in">
+        <div class="flex flex-col md:flex-row gap-4">
+            <div class="flex-1">
+                <div class="relative">
+                    <input type="text" id="searchInput" value="{{ search }}" placeholder="Search reports..."
+                        class="w-full pl-10 pr-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition">
+                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate"></i>
+                </div>
+            </div>
+            <div>
+                <select id="sourceFilter" class="px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
+                    <option value="">All Sources</option>
+                    {% for value, label in data_sources %}
+                    <option value="{{ value }}" {% if selected_source == value %}selected{% endif %}>{{ label }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <button onclick="applyFilters()" class="inline-flex items-center gap-2 px-6 py-2.5 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
+                <i data-lucide="filter" class="w-4 h-4"></i>Filter
+            </button>
+        </div>
+    </div>
+
+    <!-- Reports List -->
+    <div class="animate-in">
+        {% if reports %}
+        <div class="space-y-4">
+            {% for report in reports %}
+            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 hover:border-blue-300 hover:shadow-md transition-all duration-200">
+                <div class="flex items-start justify-between gap-4">
+                    <div class="flex-1 flex items-start gap-3">
+                        <div class="w-12 h-12 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
+                            <i data-lucide="file-text" class="w-6 h-6 text-blue-600"></i>
+                        </div>
+                        <div class="flex-1">
+                            <h3 class="font-bold text-lg text-navy">
+                                <a href="{% url 'reports:report_detail' report.id %}" class="hover:text-blue-600 transition">
+                                    {{ report.name }}
+                                </a>
+                            </h3>
+                            {% if report.description %}
+                            <p class="text-sm text-slate mt-1">{{ report.description }}</p>
+                            {% endif %}
+                            <div class="flex flex-wrap items-center gap-4 mt-3 text-sm text-slate">
+                                <span class="flex items-center gap-1">
+                                    <i data-lucide="database" class="w-4 h-4 text-blue-500"></i>
+                                    {{ report.get_data_source_display }}
+                                </span>
+                                <span class="flex items-center gap-1">
+                                    <i data-lucide="calendar" class="w-4 h-4 text-blue-500"></i>
+                                    Created {{ report.created_at|date:"M d, Y" }}
+                                </span>
+                                {% if report.last_run_at %}
+                                <span class="flex items-center gap-1">
+                                    <i data-lucide="clock" class="w-4 h-4 text-blue-500"></i>
+                                    Last run {{ report.last_run_at|date:"M d, Y H:i" }}
+                                </span>
+                                {% endif %}
+                                {% if report.is_shared %}
+                                <span class="flex items-center gap-1 text-emerald-600 font-medium">
+                                    <i data-lucide="users" class="w-4 h-4"></i>
+                                    Shared
+                                </span>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-2 flex-shrink-0">
+                        <a href="{% url 'reports:report_detail' report.id %}" class="inline-flex items-center justify-center w-10 h-10 bg-white border-2 border-blue-200 text-blue-700 rounded-xl hover:bg-blue-50 transition" title="View">
+                            <i data-lucide="eye" class="w-4 h-4"></i>
+                        </a>
+                        <a href="{% url 'reports:export_report' report.id 'excel' %}" class="inline-flex items-center justify-center w-10 h-10 bg-white border-2 border-emerald-200 text-emerald-700 rounded-xl hover:bg-emerald-50 transition" title="Export Excel">
+                            <i data-lucide="file-spreadsheet" class="w-4 h-4"></i>
+                        </a>
+                        <a href="{% url 'reports:export_report' report.id 'pdf' %}" class="inline-flex items-center justify-center w-10 h-10 bg-white border-2 border-red-200 text-red-700 rounded-xl hover:bg-red-50 transition" title="Export PDF">
+                            <i data-lucide="file-text" class="w-4 h-4"></i>
+                        </a>
+                        {% if report.created_by == request.user %}
+                        <a href="{% url 'reports:delete_report' report.id %}" class="inline-flex items-center justify-center w-10 h-10 bg-white border-2 border-red-200 text-red-700 rounded-xl hover:bg-red-50 transition" title="Delete" onclick="return confirm('Are you sure you want to delete this report?')">
+                            <i data-lucide="trash-2" class="w-4 h-4"></i>
+                        </a>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+
+        <!-- Pagination -->
+        {% if page_obj.has_other_pages %}
+        <div class="flex flex-col md:flex-row items-center justify-between gap-4 mt-6">
+            <p class="text-sm text-slate">
+                Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} reports
+            </p>
+            <nav class="flex items-center gap-2">
+                {% if page_obj.has_previous %}
+                <a href="?page={{ page_obj.previous_page_number }}&search={{ search }}&data_source={{ selected_source }}"
+                   class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl hover:bg-blue-50 transition font-semibold">
+                    <i data-lucide="chevron-left" class="w-4 h-4"></i>Previous
+                </a>
+                {% endif %}
+                {% for num in page_obj.paginator.page_range %}
+                    {% if page_obj.number == num %}
+                    <span class="px-4 py-2 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold">{{ num }}</span>
+                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
+                    <a href="?page={{ num }}&search={{ search }}&data_source={{ selected_source }}"
+                       class="inline-flex items-center px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl hover:bg-blue-50 transition font-semibold">{{ num }}</a>
+                    {% endif %}
+                {% endfor %}
+                {% if page_obj.has_next %}
+                <a href="?page={{ page_obj.next_page_number }}&search={{ search }}&data_source={{ selected_source }}"
+                   class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl hover:bg-blue-50 transition font-semibold">
+                    Next<i data-lucide="chevron-right" class="w-4 h-4"></i>
+                </a>
+                {% endif %}
+            </nav>
+        </div>
+        {% endif %}
+        {% else %}
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-12 text-center animate-in">
+            <div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <i data-lucide="folder-open" class="w-10 h-10 text-blue-500"></i>
+            </div>
+            <p class="text-slate font-medium text-lg">No saved reports found</p>
+            <p class="text-slate mt-2">Create your first report using the Report Builder</p>
+            <a href="{% url 'reports:builder' %}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200 mt-4">
+                <i data-lucide="plus" class="w-4 h-4"></i>Create Report
+            </a>
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function applyFilters() {
+    const search = document.getElementById('searchInput').value;
+    const source = document.getElementById('sourceFilter').value;
+    let url = '{% url "reports:saved_reports" %}?';
+    if (search) url += 'search=' + encodeURIComponent(search);
+    if (source) url += '&data_source=' + source;
+    window.location.href = url;
+}
+
+document.getElementById('searchInput').addEventListener('keypress', function(e) {
+    if (e.key === 'Enter') applyFilters();
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
+{% endblock %}
diff --git a/templates/social/social_analytics.html b/templates/social/social_analytics.html
index 4c07ddd..9391cf2 100644
--- a/templates/social/social_analytics.html
+++ b/templates/social/social_analytics.html
@@ -6,482 +6,475 @@
 {% block title %}{% trans "Analytics Dashboard" %} - {% trans "Social Media Monitoring" %} - PX360{% endblock %}
 
 {% block content %}
-<div class="container-fluid py-4">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Page Header -->
-    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
-        <div>
-            <h2 class="mb-1 fw-bold">
-                <i class="bi bi-graph-up-arrow text-primary me-2"></i>
-                {% trans "Analytics Dashboard" %}
-            </h2>
-            <p class="text-muted mb-0 small">{% trans "Social media insights and trends" %}</p>
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl shadow-lg shadow-blue-200">
+                <i data-lucide="trending-up" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% trans "Analytics Dashboard" %}
+                </h1>
+                <p class="text-slate text-sm">{% trans "Social media insights and trends" %}</p>
+            </div>
         </div>
-        <div class="d-flex flex-wrap gap-2">
-            <a href="{% url 'social:social_comment_list' %}" class="btn btn-outline-primary">
-                <i class="bi bi-grid-fill me-1"></i> {% trans "Dashboard" %}
+        <div class="flex flex-wrap gap-3">
+            <a href="{% url 'social:social_comment_list' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
+                <i data-lucide="layout-grid" class="w-4 h-4"></i> {% trans "Dashboard" %}
             </a>
-            <form class="d-inline-flex" method="get">
-                <div class="input-group shadow-sm">
-                    <span class="input-group-text bg-light border-end-0">
-                        <i class="bi bi-calendar-range text-muted"></i>
-                    </span>
-                    <input type="date" 
-                           name="start_date" 
-                           class="form-control border-start-0 border-end-0" 
-                           value="{{ start_date|default:'' }}" 
-                           placeholder="{% trans 'Date from' %}">
-                    <span class="input-group-text bg-light border-end-0 border-start-0">-</span>
-                    <input type="date" 
-                           name="end_date" 
-                           class="form-control border-start-0" 
-                           value="{{ end_date|default:'' }}" 
-                           placeholder="{% trans 'Date to' %}">
-                    <button type="submit" class="btn btn-primary px-4">
-                        <i class="bi bi-funnel-fill me-1"></i> {% trans "Filter" %}
-                    </button>
-                </div>
+            <form method="get" class="flex items-center gap-2">
+                <input type="date" name="start_date" class="px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition" value="{{ start_date|default:'' }}" placeholder="{% trans 'Date from' %}">
+                <span class="text-slate">-</span>
+                <input type="date" name="end_date" class="px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition" value="{{ end_date|default:'' }}" placeholder="{% trans 'Date to' %}">
+                <button type="submit" class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                    <i data-lucide="filter" class="w-4 h-4"></i> {% trans "Filter" %}
+                </button>
             </form>
         </div>
     </div>
 
     <!-- Overview Cards -->
-    <div class="row g-3 mb-4">
-        <!-- Total Comments Card -->
-        <div class="col-lg-3 col-md-6 mb-3">
-            <div class="card border-0 shadow-sm h-100">
-                <div class="card-body p-4">
-                    <div class="d-flex justify-content-between align-items-start mb-3">
-                        <div>
-                            <h6 class="text-muted text-uppercase small fw-bold mb-2">{% trans "Total Comments" %}</h6>
-                            <h2 class="mb-0 fw-bold text-primary">{{ total_comments }}</h2>
-                        </div>
-                        <div class="bg-primary bg-opacity-10 rounded-3 p-3">
-                            <i class="bi bi-chat-dots text-primary fs-4"></i>
-                        </div>
-                    </div>
-                    <div class="d-flex align-items-center gap-2">
-                        <span class="badge bg-success-subtle text-success">
-                            <i class="bi bi-check-circle me-1"></i>{{ analyzed_comments }}
-                        </span>
-                        <span class="text-muted small">{% trans "analyzed" %}</span>
-                    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <!-- Total Comments -->
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 hover:shadow-md transition">
+            <div class="flex items-center justify-between mb-4">
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase mb-1">{% trans "Total Comments" %}</p>
+                    <p class="text-3xl font-bold text-navy">{{ total_comments }}</p>
                 </div>
+                <div class="w-14 h-14 bg-gradient-to-br from-blue to-navy rounded-2xl flex items-center justify-center">
+                    <i data-lucide="message-square" class="w-7 h-7 text-white"></i>
+                </div>
+            </div>
+            <div class="flex items-center gap-2">
+                <span class="inline-flex items-center px-2 py-1 bg-emerald-100 text-emerald-700 rounded-lg text-xs font-bold">
+                    <i data-lucide="check" class="w-3 h-3 mr-1"></i>{{ analyzed_comments }}
+                </span>
+                <span class="text-xs text-slate">{% trans "analyzed" %}</span>
             </div>
         </div>
-        
-        <!-- Positive Comments Card -->
-        <div class="col-lg-3 col-md-6 mb-3">
-            <div class="card border-0 shadow-sm h-100">
-                <div class="card-body p-4">
-                    <div class="d-flex justify-content-between align-items-start mb-3">
-                        <div>
-                            <h6 class="text-muted text-uppercase small fw-bold mb-2">{% trans "Positive" %}</h6>
-                            <h2 class="mb-0 fw-bold text-success">{{ sentiment_distribution|get_sentiment_count:'positive' }}</h2>
-                        </div>
-                        <div class="bg-success bg-opacity-10 rounded-3 p-3">
-                            <i class="bi bi-emoji-smile text-success fs-4"></i>
-                        </div>
-                    </div>
-                    <div class="progress mb-2" style="height: 6px;">
-                        <div class="progress-bar bg-success" 
-                             role="progressbar" 
-                             style="width: {% widthratio sentiment_distribution|get_sentiment_count:'positive' total_comments 100 %}%"></div>
-                    </div>
-                    <small class="text-muted">{% widthratio sentiment_distribution|get_sentiment_count:'positive' total_comments 100 %}% {% trans "of total" %}</small>
+
+        <!-- Positive -->
+        <div class="bg-white rounded-2xl shadow-sm border border-emerald-100 p-6 hover:shadow-md transition">
+            <div class="flex items-center justify-between mb-3">
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase mb-1">{% trans "Positive" %}</p>
+                    <p class="text-3xl font-bold text-emerald-600">{{ sentiment_distribution|get_sentiment_count:'positive' }}</p>
+                </div>
+                <div class="w-14 h-14 bg-gradient-to-br from-emerald-500 to-green-500 rounded-2xl flex items-center justify-center">
+                    <i data-lucide="smile" class="w-7 h-7 text-white"></i>
                 </div>
             </div>
+            <div class="w-full bg-emerald-100 h-2 rounded-full overflow-hidden mb-2">
+                <div class="bg-gradient-to-r from-emerald-500 to-green-500 h-full rounded-full" style="width: {% widthratio sentiment_distribution|get_sentiment_count:'positive' total_comments 100 %}%"></div>
+            </div>
+            <p class="text-xs text-slate">{% widthratio sentiment_distribution|get_sentiment_count:'positive' total_comments 100 %}% {% trans "of total" %}</p>
         </div>
-        
-        <!-- Negative Comments Card -->
-        <div class="col-lg-3 col-md-6 mb-3">
-            <div class="card border-0 shadow-sm h-100">
-                <div class="card-body p-4">
-                    <div class="d-flex justify-content-between align-items-start mb-3">
-                        <div>
-                            <h6 class="text-muted text-uppercase small fw-bold mb-2">{% trans "Negative" %}</h6>
-                            <h2 class="mb-0 fw-bold text-danger">{{ sentiment_distribution|get_sentiment_count:'negative' }}</h2>
-                        </div>
-                        <div class="bg-danger bg-opacity-10 rounded-3 p-3">
-                            <i class="bi bi-emoji-frown text-danger fs-4"></i>
-                        </div>
-                    </div>
-                    <div class="progress mb-2" style="height: 6px;">
-                        <div class="progress-bar bg-danger" 
-                             role="progressbar" 
-                             style="width: {% widthratio sentiment_distribution|get_sentiment_count:'negative' total_comments 100 %}%"></div>
-                    </div>
-                    <small class="text-muted">{% widthratio sentiment_distribution|get_sentiment_count:'negative' total_comments 100 %}% {% trans "of total" %}</small>
+
+        <!-- Negative -->
+        <div class="bg-white rounded-2xl shadow-sm border border-red-100 p-6 hover:shadow-md transition">
+            <div class="flex items-center justify-between mb-3">
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase mb-1">{% trans "Negative" %}</p>
+                    <p class="text-3xl font-bold text-red-600">{{ sentiment_distribution|get_sentiment_count:'negative' }}</p>
+                </div>
+                <div class="w-14 h-14 bg-gradient-to-br from-red-500 to-rose-500 rounded-2xl flex items-center justify-center">
+                    <i data-lucide="frown" class="w-7 h-7 text-white"></i>
                 </div>
             </div>
+            <div class="w-full bg-red-100 h-2 rounded-full overflow-hidden mb-2">
+                <div class="bg-gradient-to-r from-red-500 to-rose-500 h-full rounded-full" style="width: {% widthratio sentiment_distribution|get_sentiment_count:'negative' total_comments 100 %}%"></div>
+            </div>
+            <p class="text-xs text-slate">{% widthratio sentiment_distribution|get_sentiment_count:'negative' total_comments 100 %}% {% trans "of total" %}</p>
         </div>
-        
-        <!-- Avg Engagement Card -->
-        <div class="col-lg-3 col-md-6 mb-3">
-            <div class="card border-0 shadow-sm h-100">
-                <div class="card-body p-4">
-                    <div class="d-flex justify-content-between align-items-start mb-3">
-                        <div>
-                            <h6 class="text-muted text-uppercase small fw-bold mb-2">{% trans "Avg Engagement" %}</h6>
-                            <h2 class="mb-0 fw-bold text-info">{{ engagement_metrics.avg_likes|add:engagement_metrics.avg_replies|floatformat:1 }}</h2>
-                        </div>
-                        <div class="bg-info bg-opacity-10 rounded-3 p-3">
-                            <i class="bi bi-heart-pulse text-info fs-4"></i>
-                        </div>
-                    </div>
-                    <small class="text-muted"><i class="bi bi-lightning me-1"></i>{% trans "likes + replies" %}</small>
+
+        <!-- Avg Engagement -->
+        <div class="bg-white rounded-2xl shadow-sm border border-orange-100 p-6 hover:shadow-md transition">
+            <div class="flex items-center justify-between mb-4">
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase mb-1">{% trans "Avg Engagement" %}</p>
+                    <p class="text-3xl font-bold text-orange-600">{{ engagement_metrics.avg_likes|add:engagement_metrics.avg_replies|floatformat:1 }}</p>
+                </div>
+                <div class="w-14 h-14 bg-gradient-to-br from-orange-400 to-orange-500 rounded-2xl flex items-center justify-center">
+                    <i data-lucide="heart-pulse" class="w-7 h-7 text-white"></i>
                 </div>
             </div>
+            <p class="text-xs text-slate"><i data-lucide="zap" class="w-3 h-3 inline mr-1"></i>{% trans "likes + replies" %}</p>
         </div>
     </div>
 
     <!-- Charts Row -->
-    <div class="row g-3 mb-4">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
         <!-- Sentiment Distribution -->
-        <div class="col-lg-6 mb-4">
-            <div class="card border-0 shadow-sm h-100">
-                <div class="card-header bg-white border-0 py-3">
-                    <div class="d-flex align-items-center">
-                        <div class="bg-primary bg-opacity-10 rounded-2 p-2 me-3">
-                            <i class="bi bi-pie-chart-fill text-primary"></i>
-                        </div>
-                        <h6 class="mb-0 fw-bold">{% trans "Sentiment Distribution" %}</h6>
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                    <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
+                        <i data-lucide="pie-chart" class="w-5 h-5 text-blue-600"></i>
                     </div>
-                </div>
-                <div class="card-body p-4">
-                    <canvas id="sentimentChart" height="220"></canvas>
-                </div>
+                    {% trans "Sentiment Distribution" %}
+                </h3>
+            </div>
+            <div class="p-6">
+                <canvas id="sentimentChart" height="200"></canvas>
             </div>
         </div>
 
         <!-- Platform Distribution -->
-        <div class="col-lg-6 mb-4">
-            <div class="card border-0 shadow-sm h-100">
-                <div class="card-header bg-white border-0 py-3">
-                    <div class="d-flex align-items-center">
-                        <div class="bg-info bg-opacity-10 rounded-2 p-2 me-3">
-                            <i class="bi bi-bar-chart-fill text-info"></i>
-                        </div>
-                        <h6 class="mb-0 fw-bold">{% trans "Platform Distribution" %}</h6>
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                    <div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center">
+                        <i data-lucide="bar-chart-3" class="w-5 h-5 text-indigo-600"></i>
                     </div>
-                </div>
-                <div class="card-body p-4">
-                    <canvas id="platformChart" height="220"></canvas>
-                </div>
+                    {% trans "Platform Distribution" %}
+                </h3>
+            </div>
+            <div class="p-6">
+                <canvas id="platformChart" height="200"></canvas>
             </div>
         </div>
     </div>
 
     <!-- Daily Trends -->
-    <div class="row g-3 mb-4">
-        <div class="col-12">
-            <div class="card border-0 shadow-sm">
-                <div class="card-header bg-white border-0 py-3">
-                    <div class="d-flex align-items-center">
-                        <div class="bg-success bg-opacity-10 rounded-2 p-2 me-3">
-                            <i class="bi bi-graph-up-arrow text-success"></i>
-                        </div>
-                        <h6 class="mb-0 fw-bold">{% trans "Daily Trends" %}</h6>
-                    </div>
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden mb-8">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
+                    <i data-lucide="trending-up" class="w-5 h-5 text-emerald-600"></i>
                 </div>
-                <div class="card-body p-4">
-                    <canvas id="trendsChart" height="120"></canvas>
-                </div>
-            </div>
+                {% trans "Daily Trends" %}
+            </h3>
+        </div>
+        <div class="p-6">
+            <canvas id="trendsChart" height="100"></canvas>
         </div>
     </div>
 
     <!-- Keywords & Topics -->
-    <div class="row g-3 mb-4">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
         <!-- Top Keywords -->
-        <div class="col-lg-6 mb-4">
-            <div class="card border-0 shadow-sm h-100">
-                <div class="card-header bg-white border-0 py-3">
-                    <div class="d-flex align-items-center">
-                        <div class="bg-warning bg-opacity-10 rounded-2 p-2 me-3">
-                            <i class="bi bi-key-fill text-warning"></i>
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                    <div class="w-10 h-10 bg-yellow-100 rounded-xl flex items-center justify-center">
+                        <i data-lucide="key" class="w-5 h-5 text-yellow-600"></i>
+                    </div>
+                    {% trans "Top Keywords" %}
+                </h3>
+            </div>
+            <div class="p-6">
+                {% if top_keywords %}
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {% for keyword in top_keywords|slice:":12" %}
+                    <div class="p-4 bg-gradient-to-br from-yellow-50 to-amber-50 rounded-xl border border-yellow-100">
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="font-bold text-navy">{{ keyword.keyword }}</span>
+                            <span class="inline-flex items-center px-2 py-1 bg-yellow-100 text-yellow-700 rounded-lg text-xs font-bold">{{ keyword.count }}</span>
                         </div>
-                        <h6 class="mb-0 fw-bold">{% trans "Top Keywords" %}</h6>
-                    </div>
-                </div>
-                <div class="card-body p-4">
-                    {% if top_keywords %}
-                    <div class="row g-2">
-                        {% for keyword in top_keywords|slice:":12" %}
-                        <div class="col-md-6 col-sm-12 mb-2">
-                            <div class="card border-0 shadow-sm p-3">
-                                <div class="d-flex justify-content-between align-items-center mb-2">
-                                    <span class="fw-semibold">{{ keyword.keyword }}</span>
-                                    <span class="badge bg-primary rounded-pill">{{ keyword.count }}</span>
-                                </div>
-                                <div class="progress mb-0" style="height: 8px;">
-                                    <div class="progress-bar bg-warning" 
-                                         role="progressbar" 
-                                         style="width: {% widthratio keyword.count top_keywords.0.count 100 %}%;
-                                                background: linear-gradient(90deg, #ffc107 0%, #ffca2c 100%);"></div>
-                                </div>
-                            </div>
+                        <div class="w-full bg-yellow-100 h-2 rounded-full overflow-hidden">
+                            <div class="bg-gradient-to-r from-yellow-400 to-amber-400 h-full rounded-full" style="width: {% widthratio keyword.count top_keywords.0.count 100 %}%"></div>
                         </div>
-                        {% endfor %}
                     </div>
-                    {% else %}
-                    <div class="text-center py-5">
-                        <i class="bi bi-key text-muted fs-1"></i>
-                        <p class="text-muted mt-2">{% trans "No keywords found" %}</p>
-                    </div>
-                    {% endif %}
+                    {% endfor %}
                 </div>
+                {% else %}
+                <div class="text-center py-12">
+                    <div class="w-16 h-16 bg-gradient-to-br from-yellow-100 to-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="key" class="w-8 h-8 text-yellow-500"></i>
+                    </div>
+                    <p class="text-slate font-medium">{% trans "No keywords found" %}</p>
+                </div>
+                {% endif %}
             </div>
         </div>
 
         <!-- Top Topics -->
-        <div class="col-lg-6 mb-4">
-            <div class="card border-0 shadow-sm h-100">
-                <div class="card-header bg-white border-0 py-3">
-                    <div class="d-flex align-items-center">
-                        <div class="bg-primary bg-opacity-10 rounded-2 p-2 me-3">
-                            <i class="bi bi-collection-fill text-primary"></i>
-                        </div>
-                        <h6 class="mb-0 fw-bold">{% trans "Top Topics" %}</h6>
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+            <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                    <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
+                        <i data-lucide="hash" class="w-5 h-5 text-purple-600"></i>
                     </div>
-                </div>
-                <div class="card-body p-4">
-                    {% if top_topics %}
-                    <div class="list-group list-group-flush">
-                        {% for topic in top_topics|slice:":10" %}
-                        <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-3 border-0">
-                            <div class="d-flex align-items-center">
-                                <div class="bg-primary bg-opacity-10 rounded-circle p-2 me-3">
-                                    <i class="bi bi-hash text-primary small"></i>
-                                </div>
-                                <span class="fw-medium">{{ topic.topic }}</span>
+                    {% trans "Top Topics" %}
+                </h3>
+            </div>
+            <div class="p-6">
+                {% if top_topics %}
+                <div class="space-y-3">
+                    {% for topic in top_topics|slice:":10" %}
+                    <div class="flex items-center justify-between p-4 bg-gradient-to-br from-purple-50 to-indigo-50 rounded-xl border border-purple-100">
+                        <div class="flex items-center gap-3">
+                            <div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-xl flex items-center justify-center">
+                                <i data-lucide="hash" class="w-5 h-5 text-white"></i>
                             </div>
-                            <span class="badge bg-info rounded-pill px-3 py-2">{{ topic.count }}</span>
+                            <span class="font-bold text-navy">{{ topic.topic }}</span>
                         </div>
-                        {% endfor %}
+                        <span class="inline-flex items-center px-3 py-1.5 bg-purple-100 text-purple-700 rounded-xl text-sm font-bold">{{ topic.count }}</span>
                     </div>
-                    {% else %}
-                    <div class="text-center py-5">
-                        <i class="bi bi-collection text-muted fs-1"></i>
-                        <p class="text-muted mt-2">{% trans "No topics found" %}</p>
-                    </div>
-                    {% endif %}
+                    {% endfor %}
                 </div>
+                {% else %}
+                <div class="text-center py-12">
+                    <div class="w-16 h-16 bg-gradient-to-br from-purple-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-lucide="hash" class="w-8 h-8 text-purple-500"></i>
+                    </div>
+                    <p class="text-slate font-medium">{% trans "No topics found" %}</p>
+                </div>
+                {% endif %}
             </div>
         </div>
     </div>
 
     <!-- Platform Breakdown -->
-    <div class="row g-3 mb-4">
-        <div class="col-12">
-            <div class="card border-0 shadow-sm">
-                <div class="card-header bg-white border-0 py-3">
-                    <div class="d-flex align-items-center">
-                        <div class="bg-secondary bg-opacity-10 rounded-2 p-2 me-3">
-                            <i class="bi bi-grid-fill text-secondary"></i>
-                        </div>
-                        <h6 class="mb-0 fw-bold">{% trans "Platform Breakdown" %}</h6>
-                    </div>
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden mb-8">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                <div class="w-10 h-10 bg-slate-100 rounded-xl flex items-center justify-center">
+                    <i data-lucide="grid-3x3" class="w-5 h-5 text-slate-600"></i>
                 </div>
-                <div class="card-body p-4">
-                    <div class="table-responsive">
-                        <table class="table table-hover table-striped border-0">
-                            <thead>
-                                <tr class="table-light">
-                                    <th class="fw-bold text-muted small text-uppercase ps-3">{% trans "Platform" %}</th>
-                                    <th class="fw-bold text-muted small text-uppercase">{% trans "Comments" %}</th>
-                                    <th class="fw-bold text-muted small text-uppercase">{% trans "Avg Sentiment" %}</th>
-                                    <th class="fw-bold text-muted small text-uppercase">{% trans "Total Likes" %}</th>
-                                    <th class="fw-bold text-muted small text-uppercase">{% trans "Total Replies" %}</th>
-                                    <th class="fw-bold text-muted small text-uppercase pe-3">{% trans "Actions" %}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {% for platform in platform_distribution %}
-                                <tr class="align-middle">
-                                    <td class="ps-3">
-                                        <a href="{% url 'social:social_platform' platform.platform %}" class="text-decoration-none fw-semibold text-primary">
-                                            {{ platform.platform_display }}
-                                        </a>
-                                    </td>
-                                    <td>
-                                        <span class="badge bg-light text-dark">{{ platform.count }}</span>
-                                    </td>
-                                    <td>
-                                        <span class="{% if platform.avg_sentiment > 0.5 %}badge bg-success-subtle text-success{% elif platform.avg_sentiment < 0.5 %}badge bg-danger-subtle text-danger{% else %}badge bg-secondary-subtle text-secondary{% endif %} px-3 py-2 rounded-pill">
-                                            {{ platform.avg_sentiment|floatformat:2 }}
-                                        </span>
-                                    </td>
-                                    <td>
-                                        <span class="d-inline-flex align-items-center gap-1">
-                                            <i class="bi bi-hand-thumbs-up text-muted small"></i>
-                                            <span>{{ platform.total_likes }}</span>
-                                        </span>
-                                    </td>
-                                    <td>
-                                        <span class="d-inline-flex align-items-center gap-1">
-                                            <i class="bi bi-chat text-muted small"></i>
-                                            <span>{{ platform.total_replies }}</span>
-                                        </span>
-                                    </td>
-                                    <td class="pe-3">
-                                        <a href="{% url 'social:social_platform' platform.platform %}" class="btn btn-sm btn-primary rounded-pill px-3">
-                                            <i class="bi bi-arrow-right me-1"></i>{% trans "View" %}
-                                        </a>
-                                    </td>
-                                </tr>
-                                {% empty %}
-                                <tr>
-                                    <td colspan="6" class="text-center py-5">
-                                        <i class="bi bi-grid text-muted fs-1 mb-2"></i>
-                                        <p class="text-muted mb-0">{% trans "No data available" %}</p>
-                                    </td>
-                                </tr>
-                                {% endfor %}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
+                {% trans "Platform Breakdown" %}
+            </h3>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="w-full">
+                <thead class="bg-blue-50">
+                    <tr>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Platform" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Comments" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Avg Sentiment" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Total Likes" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Total Replies" %}</th>
+                        <th class="px-6 py-4 text-left text-xs font-bold text-blue-800 uppercase tracking-wider">{% trans "Actions" %}</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-blue-50">
+                    {% for platform in platform_distribution %}
+                    <tr class="hover:bg-blue-50/50 transition">
+                        <td class="px-6 py-4">
+                            <a href="{% url 'social:social_platform' platform.platform %}" class="font-bold text-blue-600 hover:text-navy">
+                                {{ platform.platform_display }}
+                            </a>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="inline-flex items-center px-3 py-1 bg-slate-100 text-slate-700 rounded-lg text-sm font-bold">{{ platform.count }}</span>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="inline-flex items-center px-3 py-1 rounded-lg text-sm font-bold {% if platform.avg_sentiment > 0.5 %}bg-emerald-100 text-emerald-700{% elif platform.avg_sentiment < 0.5 %}bg-red-100 text-red-700{% else %}bg-slate-100 text-slate-700{% endif %}">
+                                {{ platform.avg_sentiment|floatformat:2 }}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="flex items-center gap-2 text-slate">
+                                <i data-lucide="heart" class="w-4 h-4 text-red-500"></i>
+                                <span class="font-medium">{{ platform.total_likes }}</span>
+                            </span>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span class="flex items-center gap-2 text-slate">
+                                <i data-lucide="message-square" class="w-4 h-4 text-blue-500"></i>
+                                <span class="font-medium">{{ platform.total_replies }}</span>
+                            </span>
+                        </td>
+                        <td class="px-6 py-4">
+                            <a href="{% url 'social:social_platform' platform.platform %}" class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200 text-sm">
+                                {% trans "View" %}
+                                <i data-lucide="arrow-right" class="w-4 h-4"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    {% empty %}
+                    <tr>
+                        <td colspan="6" class="px-6 py-12 text-center">
+                            <div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                <i data-lucide="grid-3x3" class="w-8 h-8 text-blue-500"></i>
+                            </div>
+                            <p class="text-slate font-medium">{% trans "No data available" %}</p>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
         </div>
     </div>
 
     <!-- Top Entities -->
-    <div class="row g-3">
-        <div class="col-12">
-            <div class="card border-0 shadow-sm">
-                <div class="card-header bg-white border-0 py-3">
-                    <div class="d-flex align-items-center">
-                        <div class="bg-purple bg-opacity-10 rounded-2 p-2 me-3">
-                            <i class="bi bi-tags-fill text-purple"></i>
-                        </div>
-                        <h6 class="mb-0 fw-bold">{% trans "Top Entities" %}</h6>
-                    </div>
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+        <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+            <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
+                    <i data-lucide="tags" class="w-5 h-5 text-purple-600"></i>
                 </div>
-                <div class="card-body p-4">
-                    {% if top_entities %}
-                    <div class="row g-3">
-                        {% for entity in top_entities|slice:":20" %}
-                        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-3">
-                            <div class="card border-0 shadow-sm h-100 hover-lift">
-                                <div class="card-body text-center p-3">
-                                    <div class="bg-purple bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 60px; height: 60px;">
-                                        <i class="bi bi-tag text-purple fs-5"></i>
-                                    </div>
-                                    <h6 class="mb-2 fw-semibold text-truncate" style="max-width: 120px; margin: 0 auto;">{{ entity.entity }}</h6>
-                                    <span class="badge bg-purple text-white rounded-pill px-3 py-2">{{ entity.count }}</span>
-                                </div>
-                            </div>
-                        </div>
-                        {% endfor %}
+                {% trans "Top Entities" %}
+            </h3>
+        </div>
+        <div class="p-6">
+            {% if top_entities %}
+            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                {% for entity in top_entities|slice:":20" %}
+                <div class="bg-gradient-to-br from-purple-50 to-indigo-50 border border-purple-100 rounded-2xl p-4 text-center hover:shadow-md hover:-translate-y-1 transition-all duration-200">
+                    <div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-3">
+                        <i data-lucide="tag" class="w-6 h-6 text-white"></i>
                     </div>
-                    {% else %}
-                    <div class="text-center py-5">
-                        <i class="bi bi-tags text-muted fs-1 mb-2"></i>
-                        <p class="text-muted mb-0">{% trans "No entities found" %}</p>
-                    </div>
-                    {% endif %}
+                    <p class="font-bold text-navy text-sm mb-2 truncate">{{ entity.entity }}</p>
+                    <span class="inline-flex items-center px-3 py-1.5 bg-purple-100 text-purple-700 rounded-xl text-xs font-bold">{{ entity.count }}</span>
                 </div>
+                {% endfor %}
             </div>
+            {% else %}
+            <div class="text-center py-12">
+                <div class="w-16 h-16 bg-gradient-to-br from-purple-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="tags" class="w-8 h-8 text-purple-500"></i>
+                </div>
+                <p class="text-slate font-medium">{% trans "No entities found" %}</p>
+            </div>
+            {% endif %}
         </div>
     </div>
 </div>
 
-{% block extra_js %}
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
-// Sentiment Distribution Chart
-const sentimentCtx = document.getElementById('sentimentChart').getContext('2d');
-new Chart(sentimentCtx, {
-    type: 'doughnut',
-    data: {
-        labels: ['Positive', 'Neutral', 'Negative'],
-        datasets: [{
-            data: [
-                {% for item in sentiment_distribution %}{% if item.sentiment == 'positive' %}{{ item.count }}{% endif %}{% endfor %},
-                {% for item in sentiment_distribution %}{% if item.sentiment == 'neutral' %}{{ item.count }}{% endif %}{% endfor %},
-                {% for item in sentiment_distribution %}{% if item.sentiment == 'negative' %}{{ item.count }}{% endif %}{% endfor %}
-            ],
-            backgroundColor: ['#198754', '#6c757d', '#dc3545']
-        }]
-    },
-    options: {
-        responsive: true,
-        plugins: {
-            legend: {
-                position: 'bottom'
-            }
-        }
-    }
-});
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
 
-// Platform Distribution Chart
-const platformCtx = document.getElementById('platformChart').getContext('2d');
-new Chart(platformCtx, {
-    type: 'bar',
-    data: {
-        labels: [{% for item in platform_distribution %}'{{ item.platform_display }}',{% endfor %}],
-        datasets: [{
-            label: 'Comments',
-            data: [{% for item in platform_distribution %}{{ item.count }},{% endfor %}],
-            backgroundColor: '#0d6efd'
-        }]
-    },
-    options: {
-        responsive: true,
-        plugins: {
-            legend: {
-                display: false
-            }
+    // Sentiment Distribution Chart
+    const sentimentCtx = document.getElementById('sentimentChart').getContext('2d');
+    new Chart(sentimentCtx, {
+        type: 'doughnut',
+        data: {
+            labels: ['Positive', 'Neutral', 'Negative'],
+            datasets: [{
+                data: [
+                    {% for item in sentiment_distribution %}{% if item.sentiment == 'positive' %}{{ item.count }}{% endif %}{% endfor %},
+                    {% for item in sentiment_distribution %}{% if item.sentiment == 'neutral' %}{{ item.count }}{% endif %}{% endfor %},
+                    {% for item in sentiment_distribution %}{% if item.sentiment == 'negative' %}{{ item.count }}{% endif %}{% endfor %}
+                ],
+                backgroundColor: ['#10b981', '#64748b', '#ef4444'],
+                borderWidth: 0
+            }]
         },
-        scales: {
-            y: {
-                beginAtZero: true
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                    labels: {
+                        usePointStyle: true,
+                        padding: 15,
+                        font: {
+                            size: 12,
+                            family: "'Inter', sans-serif"
+                        }
+                    }
+                }
             }
         }
-    }
-});
+    });
 
-// Daily Trends Chart
-const trendsCtx = document.getElementById('trendsChart').getContext('2d');
-new Chart(trendsCtx, {
-    type: 'line',
-    data: {
-        labels: [{% for item in daily_trends %}'{{ item.day }}',{% endfor %}],
-        datasets: [
-            {
-                label: 'Total',
-                data: [{% for item in daily_trends %}{{ item.count }},{% endfor %}],
-                borderColor: '#0d6efd',
-                tension: 0.1
-            },
-            {
-                label: 'Positive',
-                data: [{% for item in daily_trends %}{{ item.positive }},{% endfor %}],
-                borderColor: '#198754',
-                tension: 0.1
-            },
-            {
-                label: 'Negative',
-                data: [{% for item in daily_trends %}{{ item.negative }},{% endfor %}],
-                borderColor: '#dc3545',
-                tension: 0.1
-            }
-        ]
-    },
-    options: {
-        responsive: true,
-        plugins: {
-            legend: {
-                position: 'top'
-            }
+    // Platform Distribution Chart
+    const platformCtx = document.getElementById('platformChart').getContext('2d');
+    new Chart(platformCtx, {
+        type: 'bar',
+        data: {
+            labels: [{% for item in platform_distribution %}'{{ item.platform_display }}',{% endfor %}],
+            datasets: [{
+                label: 'Comments',
+                data: [{% for item in platform_distribution %}{{ item.count }},{% endfor %}],
+                backgroundColor: '#007bbd',
+                borderRadius: 8
+            }]
         },
-        scales: {
-            y: {
-                beginAtZero: true
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    grid: {
+                        color: '#f1f5f9'
+                    }
+                },
+                x: {
+                    grid: {
+                        display: false
+                    }
+                }
             }
         }
-    }
+    });
+
+    // Daily Trends Chart
+    const trendsCtx = document.getElementById('trendsChart').getContext('2d');
+    new Chart(trendsCtx, {
+        type: 'line',
+        data: {
+            labels: [{% for item in daily_trends %}'{{ item.day }}',{% endfor %}],
+            datasets: [
+                {
+                    label: 'Total',
+                    data: [{% for item in daily_trends %}{{ item.count }},{% endfor %}],
+                    borderColor: '#007bbd',
+                    backgroundColor: 'rgba(0, 123, 189, 0.1)',
+                    fill: true,
+                    tension: 0.4,
+                    borderRadius: 8
+                },
+                {
+                    label: 'Positive',
+                    data: [{% for item in daily_trends %}{{ item.positive }},{% endfor %}],
+                    borderColor: '#10b981',
+                    tension: 0.4,
+                    borderRadius: 8
+                },
+                {
+                    label: 'Negative',
+                    data: [{% for item in daily_trends %}{{ item.negative }},{% endfor %}],
+                    borderColor: '#ef4444',
+                    tension: 0.4,
+                    borderRadius: 8
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'top',
+                    labels: {
+                        usePointStyle: true,
+                        padding: 15,
+                        font: {
+                            size: 12,
+                            family: "'Inter', sans-serif"
+                        }
+                    }
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    grid: {
+                        color: '#f1f5f9'
+                    }
+                },
+                x: {
+                    grid: {
+                        display: false
+                    }
+                }
+            }
+        }
+    });
 });
 </script>
 {% endblock %}
-{% endblock %}
diff --git a/templates/social/social_comment_detail.html b/templates/social/social_comment_detail.html
index 86f7266..2909681 100644
--- a/templates/social/social_comment_detail.html
+++ b/templates/social/social_comment_detail.html
@@ -7,171 +7,162 @@
 {% block title %}Comment #{{ comment.id }} - {% trans "Social Media Monitoring" %} - PX360{% endblock %}
 
 {% block content %}
-<div class="container-fluid">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Breadcrumb -->
-    <nav aria-label="breadcrumb" class="mb-3">
-        <ol class="breadcrumb">
-            <li class="breadcrumb-item">
-                <a href="{% url 'social:social_comment_list' %}">{% trans "Social Media" %}</a>
-            </li>
-            <li class="breadcrumb-item">
-                <a href="{% url 'social:social_platform' comment.platform %}">{{ comment.get_platform_display }}</a>
-            </li>
-            <li class="breadcrumb-item active" aria-current="page">Comment #{{ comment.id }}</li>
+    <nav class="mb-6">
+        <ol class="flex items-center gap-2 text-sm text-slate">
+            <li><a href="{% url 'social:social_comment_list' %}" class="text-blue hover:text-navy font-medium">{% trans "Social Media" %}</a></li>
+            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
+            <li><a href="{% url 'social:social_platform' comment.platform %}" class="text-blue hover:text-navy font-medium">{{ comment.get_platform_display }}</a></li>
+            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
+            <li class="text-navy font-semibold">{% trans "Comment Details" %}</li>
         </ol>
     </nav>
 
-    <!-- Page Header -->
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div class="d-flex align-items-center">
-            <div class="me-3">
-                {% social_icon comment.platform %}
-            </div>
-            <div>
-                <h2 class="mb-1">{% trans "Comment Details" %}</h2>
-                <p class="text-muted mb-0">{{ comment.get_platform_display }}</p>
-            </div>
-        </div>
-        <div>
-            <a href="{% url 'social:social_comment_list' %}" class="btn btn-outline-secondary me-2">
-                <i class="bi bi-arrow-left me-1"></i> {% trans "View Similar" %}
-            </a>
-            <a href="{% url 'social:social_platform' comment.platform %}" class="btn btn-outline-primary">
-                <i class="bi bi-grid me-1"></i> {% trans "Back to Platform" %}
-            </a>
-        </div>
-    </div>
-
-    <div class="row">
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <!-- Comment Card -->
-        <div class="col-lg-8">
-            <div class="card mb-4">
-                <div class="card-header">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <div>
-                            <span class="badge bg-primary me-2">{{ comment.get_platform_display }}</span>
+        <div class="lg:col-span-2 space-y-6">
+            <!-- Main Comment Card -->
+            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+                <div class="p-6 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                    <div class="flex flex-wrap justify-between items-start gap-3">
+                        <div class="flex flex-wrap gap-2">
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gradient-to-r from-blue to-navy text-white">
+                                {{ comment.get_platform_display }}
+                            </span>
                             {% if comment.rating %}
-                            <span class="badge bg-warning text-dark me-2">
-                                {{ comment.rating|star_rating }} {{ comment.rating }}/5
+                            <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-700">
+                                <i data-lucide="star" class="w-3 h-3 fill-current"></i> {{ comment.rating }}/5
                             </span>
                             {% endif %}
                             {% if comment.ai_analysis %}
                                 {% with sentiment=comment.ai_analysis.sentiment.classification.en %}
                                     {% if sentiment == 'positive' %}
-                                    <span class="badge bg-success">Positive</span>
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
+                                        <i data-lucide="smile" class="w-3 h-3"></i> {% trans "Positive" %}
+                                    </span>
                                     {% elif sentiment == 'negative' %}
-                                    <span class="badge bg-danger">Negative</span>
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-700">
+                                        <i data-lucide="frown" class="w-3 h-3"></i> {% trans "Negative" %}
+                                    </span>
                                     {% else %}
-                                    <span class="badge bg-secondary">Neutral</span>
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">
+                                        <i data-lucide="meh" class="w-3 h-3"></i> {% trans "Neutral" %}
+                                    </span>
                                     {% endif %}
                                 {% endwith %}
-                            {% else %}
-                            <span class="badge bg-light text-dark">Not Analyzed</span>
                             {% endif %}
                         </div>
-                        <small class="text-muted">
+                        <p class="text-xs text-slate">
                             {% if comment.published_at %}
                                 {{ comment.published_at|date:"M d, Y H:i" }}
                             {% else %}
                                 {{ comment.scraped_at|date:"M d, Y H:i" }}
                             {% endif %}
-                        </small>
+                        </p>
                     </div>
                 </div>
-                <div class="card-body">
+                <div class="p-6">
                     {% if comment.author %}
-                    <h5 class="mb-3">@{{ comment.author }}</h5>
+                    <p class="text-lg font-bold text-navy mb-4">@{{ comment.author }}</p>
                     {% endif %}
-                    
-                    <p class="fs-5 mb-4">{{ comment.comments }}</p>
-                    
-                    <div class="row mb-3">
-                        <div class="col-md-4">
-                            <div class="text-center">
-                                <i class="bi bi-heart text-danger fs-4"></i>
-                                <h5 class="mb-0 mt-2">{{ comment.like_count }}</h5>
-                                <small class="text-muted">{% trans "Likes" %}</small>
+
+                    <p class="text-slate text-lg leading-relaxed mb-6">{{ comment.comments }}</p>
+
+                    <div class="grid grid-cols-3 gap-4 p-4 bg-blue-50 rounded-xl mb-4">
+                        <div class="text-center">
+                            <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mx-auto mb-2">
+                                <i data-lucide="heart" class="w-6 h-6 text-red-500"></i>
                             </div>
+                            <p class="text-2xl font-bold text-navy">{{ comment.like_count }}</p>
+                            <p class="text-xs text-slate">{% trans "Likes" %}</p>
                         </div>
-                        <div class="col-md-4">
-                            <div class="text-center">
-                                <i class="bi bi-chat text-primary fs-4"></i>
-                                <h5 class="mb-0 mt-2">{{ comment.reply_count }}</h5>
-                                <small class="text-muted">{% trans "Replies" %}</small>
+                        <div class="text-center">
+                            <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-2">
+                                <i data-lucide="message-square" class="w-6 h-6 text-blue-500"></i>
                             </div>
+                            <p class="text-2xl font-bold text-navy">{{ comment.reply_count }}</p>
+                            <p class="text-xs text-slate">{% trans "Replies" %}</p>
                         </div>
-                        <div class="col-md-4">
-                            <div class="text-center">
-                                <i class="bi bi-clock text-secondary fs-4"></i>
-                                <h5 class="mb-0 mt-2">{{ comment.scraped_at|timesince }}</h5>
-                                <small class="text-muted">{% trans "Scraped" %}</small>
+                        <div class="text-center">
+                            <div class="w-12 h-12 bg-slate-100 rounded-xl flex items-center justify-center mx-auto mb-2">
+                                <i data-lucide="clock" class="w-6 h-6 text-slate-500"></i>
                             </div>
+                            <p class="text-2xl font-bold text-navy">{{ comment.scraped_at|timesince }}</p>
+                            <p class="text-xs text-slate">{% trans "Ago" %}</p>
                         </div>
                     </div>
-                    
+
                     {% if comment.post_url %}
-                    <div class="mt-3">
-                        <a href="{{ comment.post_url }}" target="_blank" class="btn btn-outline-primary btn-sm">
-                            <i class="bi bi-box-arrow-up-right me-1"></i> {% trans "View Original Post" %}
-                        </a>
-                    </div>
+                    <a href="{{ comment.post_url }}" target="_blank" class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                        <i data-lucide="external-link" class="w-4 h-4"></i>
+                        {% trans "View Original Post" %}
+                    </a>
                     {% endif %}
                 </div>
             </div>
 
             <!-- AI Analysis -->
             {% if comment.ai_analysis %}
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h6 class="mb-0"><i class="bi bi-robot me-2"></i>{% trans "AI Analysis" %}</h6>
+            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+                <div class="p-6 border-b border-blue-100 bg-gradient-to-r from-purple-50 to-transparent">
+                    <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                        <i data-lucide="sparkles" class="w-5 h-5 text-purple-500"></i>
+                        {% trans "AI Analysis" %}
+                    </h3>
                 </div>
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-md-6">
-                            <h6>{% trans "Sentiment" %}</h6>
-                            <h2 class="{% if comment.ai_analysis.sentiment.classification.en == 'positive' %}text-success{% elif comment.ai_analysis.sentiment.classification.en == 'negative' %}text-danger{% else %}text-secondary{% endif %}">
+                <div class="p-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                        <div class="p-4 bg-gradient-to-br from-emerald-50 to-green-50 rounded-xl border border-emerald-100">
+                            <p class="text-sm font-semibold text-slate uppercase mb-2">{% trans "Sentiment" %}</p>
+                            <p class="text-3xl font-bold {% if comment.ai_analysis.sentiment.classification.en == 'positive' %}text-emerald-600{% elif comment.ai_analysis.sentiment.classification.en == 'negative' %}text-red-600{% else %}text-slate-600{% endif %}">
                                 {{ comment.ai_analysis.sentiment.classification.en|title }}
-                            </h2>
-                            <p class="text-muted">{{ comment.ai_analysis.sentiment.classification.ar }}</p>
+                            </p>
+                            <p class="text-sm text-slate mt-1">{{ comment.ai_analysis.sentiment.classification.ar }}</p>
                         </div>
-                        <div class="col-md-6">
-                            <h6>{% trans "Sentiment Score" %}</h6>
-                            <h2>{{ comment.ai_analysis.sentiment.score|floatformat:2 }}</h2>
-                            <p class="text-muted">{% trans "Analysis confidence" %}: {{ comment.ai_analysis.sentiment.confidence|floatformat:2 }}</p>
+                        <div class="p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl border border-blue-100">
+                            <p class="text-sm font-semibold text-slate uppercase mb-2">{% trans "Sentiment Score" %}</p>
+                            <p class="text-3xl font-bold text-blue-600">{{ comment.ai_analysis.sentiment.score|floatformat:2 }}</p>
+                            <p class="text-sm text-slate mt-1">{% trans "Confidence" %}: {{ comment.ai_analysis.sentiment.confidence|floatformat:2 }}</p>
                         </div>
                     </div>
-                    
+
                     {% if comment.ai_analysis.summaries.en %}
-                    <div class="mt-3">
-                        <h6>{% trans "Summary (English)" %}</h6>
-                        <p>{{ comment.ai_analysis.summaries.en }}</p>
+                    <div class="mb-6">
+                        <h4 class="text-sm font-bold text-navy mb-2">{% trans "Summary (English)" %}</h4>
+                        <p class="text-slate p-4 bg-blue-50 rounded-xl">{{ comment.ai_analysis.summaries.en }}</p>
                     </div>
                     {% endif %}
-                    
+
                     {% if comment.ai_analysis.summaries.ar %}
-                    <div class="mt-3">
-                        <h6>{% trans "الملخص (Arabic)" %}</h6>
-                        <p dir="rtl">{{ comment.ai_analysis.summaries.ar }}</p>
+                    <div class="mb-6">
+                        <h4 class="text-sm font-bold text-navy mb-2">{% trans "الملخص (Arabic)" %}</h4>
+                        <p class="text-slate p-4 bg-blue-50 rounded-xl" dir="rtl">{{ comment.ai_analysis.summaries.ar }}</p>
                     </div>
                     {% endif %}
-                    
+
                     {% if comment.ai_analysis.keywords.en %}
-                    <div class="mt-3">
-                        <h6>{% trans "Keywords" %}</h6>
-                        <div>
+                    <div class="mb-6">
+                        <h4 class="text-sm font-bold text-navy mb-2">{% trans "Keywords" %}</h4>
+                        <div class="flex flex-wrap gap-2">
                             {% for keyword in comment.ai_analysis.keywords.en %}
-                            <span class="badge bg-light text-dark me-1 mb-1">{{ keyword }}</span>
+                            <span class="inline-flex items-center px-3 py-1.5 bg-blue-50 text-blue-700 rounded-xl text-sm font-medium">
+                                {{ keyword }}
+                            </span>
                             {% endfor %}
                         </div>
                     </div>
                     {% endif %}
-                    
+
                     {% if comment.ai_analysis.topics.en %}
-                    <div class="mt-3">
-                        <h6>{% trans "Topics" %}</h6>
-                        <div>
+                    <div>
+                        <h4 class="text-sm font-bold text-navy mb-2">{% trans "Topics" %}</h4>
+                        <div class="flex flex-wrap gap-2">
                             {% for topic in comment.ai_analysis.topics.en %}
-                            <span class="badge bg-info text-dark me-1 mb-1">{{ topic }}</span>
+                            <span class="inline-flex items-center px-3 py-1.5 bg-purple-50 text-purple-700 rounded-xl text-sm font-medium">
+                                <i data-lucide="hash" class="w-3 h-3 mr-1"></i>
+                                {{ topic }}
+                            </span>
                             {% endfor %}
                         </div>
                     </div>
@@ -181,92 +172,115 @@
             {% endif %}
 
             <!-- Raw Data -->
-            <div class="card">
-                <div class="card-header">
-                    <button class="btn btn-link text-decoration-none p-0 w-100 text-start" type="button" data-bs-toggle="collapse" data-bs-target="#rawDataCollapse">
-                        <i class="bi bi-code-square me-2"></i>{% trans "Raw Data" %}
-                    </button>
-                </div>
-                <div class="collapse" id="rawDataCollapse">
-                    <div class="card-body">
-                        <pre class="bg-light p-3 rounded">{{ comment.raw_data }}</pre>
+            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+                <details class="group">
+                    <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+                        <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                            <i data-lucide="code" class="w-5 h-5 text-slate"></i>
+                            {% trans "Raw Data" %}
+                        </h3>
+                        <i data-lucide="chevron-down" class="w-5 h-5 text-slate group-open:rotate-180 transition-transform"></i>
+                    </summary>
+                    <div class="px-6 pb-6">
+                        <pre class="bg-slate-50 p-4 rounded-xl text-xs text-slate overflow-x-auto">{{ comment.raw_data }}</pre>
                     </div>
-                </div>
+                </details>
             </div>
         </div>
 
         <!-- Sidebar -->
-        <div class="col-lg-4">
+        <div class="space-y-6">
             <!-- Comment Info -->
-            <div class="card mb-3">
-                <div class="card-header">
-                    <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>{% trans "Comment Info" %}</h6>
+            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+                <div class="p-6 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                    <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                        <i data-lucide="info" class="w-5 h-5 text-blue"></i>
+                        {% trans "Comment Info" %}
+                    </h3>
                 </div>
-                <div class="card-body">
-                    <dl class="row mb-0">
-                        <dt class="col-sm-5">Comment ID:</dt>
-                        <dd class="col-sm-7">{{ comment.comment_id }}</dd>
-                        
-                        <dt class="col-sm-5">Post ID:</dt>
-                        <dd class="col-sm-7">{{ comment.post_id }}</dd>
-                        
-                        <dt class="col-sm-5">Platform:</dt>
-                        <dd class="col-sm-7">{{ comment.get_platform_display }}</dd>
-                        
-                        <dt class="col-sm-5">Published:</dt>
-                        <dd class="col-sm-7">
-                            {% if comment.published_at %}
-                                {{ comment.published_at|date:"M d, Y H:i" }}
-                            {% else %}
-                                <span class="text-muted">-</span>
-                            {% endif %}
-                        </dd>
-                        
-                        <dt class="col-sm-5">Scraped:</dt>
-                        <dd class="col-sm-7">{{ comment.scraped_at|date:"M d, Y H:i" }}</dd>
+                <div class="p-6">
+                    <dl class="space-y-4">
+                        <div class="flex justify-between items-center pb-3 border-b border-blue-50">
+                            <dt class="text-sm font-semibold text-slate">{% trans "Comment ID" %}</dt>
+                            <dd class="text-sm font-bold text-navy">{{ comment.comment_id }}</dd>
+                        </div>
+                        <div class="flex justify-between items-center pb-3 border-b border-blue-50">
+                            <dt class="text-sm font-semibold text-slate">{% trans "Post ID" %}</dt>
+                            <dd class="text-sm font-bold text-navy">{{ comment.post_id }}</dd>
+                        </div>
+                        <div class="flex justify-between items-center pb-3 border-b border-blue-50">
+                            <dt class="text-sm font-semibold text-slate">{% trans "Platform" %}</dt>
+                            <dd class="text-sm font-bold text-navy">{{ comment.get_platform_display }}</dd>
+                        </div>
+                        <div class="flex justify-between items-center pb-3 border-b border-blue-50">
+                            <dt class="text-sm font-semibold text-slate">{% trans "Published" %}</dt>
+                            <dd class="text-sm font-bold text-navy">
+                                {% if comment.published_at %}
+                                    {{ comment.published_at|date:"M d, Y" }}
+                                {% else %}
+                                    <span class="text-slate">-</span>
+                                {% endif %}
+                            </dd>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <dt class="text-sm font-semibold text-slate">{% trans "Scraped" %}</dt>
+                            <dd class="text-sm font-bold text-navy">{{ comment.scraped_at|date:"M d, Y" }}</dd>
+                        </div>
                     </dl>
                 </div>
             </div>
 
             <!-- Entities -->
             {% if comment.ai_analysis.entities %}
-            <div class="card mb-3">
-                <div class="card-header">
-                    <h6 class="mb-0"><i class="bi bi-tags me-2"></i>{% trans "Entities" %}</h6>
+            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+                <div class="p-6 border-b border-blue-100 bg-gradient-to-r from-purple-50 to-transparent">
+                    <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                        <i data-lucide="tags" class="w-5 h-5 text-purple-500"></i>
+                        {% trans "Entities" %}
+                    </h3>
                 </div>
-                <div class="card-body">
-                    <ul class="list-group list-group-flush">
+                <div class="p-6">
+                    <div class="space-y-2">
                         {% for entity in comment.ai_analysis.entities|slice:":10" %}
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            {% if entity.text %}{{ entity.text }}{% else %}{{ entity }}{% endif %}
+                        <div class="flex items-center justify-between p-3 bg-purple-50 rounded-xl">
+                            <span class="text-sm font-medium text-navy">{% if entity.text %}{{ entity.text }}{% else %}{{ entity }}{% endif %}</span>
                             {% if entity.type %}
-                            <span class="badge bg-secondary rounded-pill">{{ entity.type }}</span>
+                            <span class="inline-flex items-center px-2 py-1 bg-white text-slate-700 rounded-lg text-xs font-bold">
+                                {{ entity.type }}
+                            </span>
                             {% endif %}
-                        </li>
+                        </div>
                         {% endfor %}
-                    </ul>
+                    </div>
                 </div>
             </div>
             {% endif %}
 
             <!-- Actions -->
-            <div class="card">
-                <div class="card-header">
-                    <h6 class="mb-0"><i class="bi bi-lightning me-2"></i>{% trans "Actions" %}</h6>
+            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
+                <div class="p-6 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
+                    <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                        <i data-lucide="zap" class="w-5 h-5 text-blue"></i>
+                        {% trans "Actions" %}
+                    </h3>
                 </div>
-                <div class="card-body">
-                    <div class="d-grid gap-2">
-                        <button class="btn btn-primary">
-                            <i class="bi bi-plus-circle me-2"></i>{% trans "Create PX Action" %}
+                <div class="p-6">
+                    <div class="space-y-3">
+                        <button class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                            <i data-lucide="plus-circle" class="w-4 h-4"></i>
+                            {% trans "Create PX Action" %}
                         </button>
-                        <button class="btn btn-success">
-                            <i class="bi bi-check-circle me-2"></i>{% trans "Mark as Reviewed" %}
+                        <button class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-emerald-500 text-white rounded-xl font-semibold hover:bg-emerald-600 transition">
+                            <i data-lucide="check-circle" class="w-4 h-4"></i>
+                            {% trans "Mark as Reviewed" %}
                         </button>
-                        <button class="btn btn-warning">
-                            <i class="bi bi-flag me-2"></i>{% trans "Flag for Follow-up" %}
+                        <button class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-orange-500 text-white rounded-xl font-semibold hover:bg-orange-600 transition">
+                            <i data-lucide="flag" class="w-4 h-4"></i>
+                            {% trans "Flag for Follow-up" %}
                         </button>
-                        <button class="btn btn-outline-danger">
-                            <i class="bi bi-trash me-2"></i>{% trans "Delete Comment" %}
+                        <button class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-white border-2 border-red-200 text-red-600 rounded-xl font-semibold hover:bg-red-50 transition">
+                            <i data-lucide="trash-2" class="w-4 h-4"></i>
+                            {% trans "Delete Comment" %}
                         </button>
                     </div>
                 </div>
@@ -274,4 +288,10 @@
         </div>
     </div>
 </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
 {% endblock %}
diff --git a/templates/social/social_comment_list.html b/templates/social/social_comment_list.html
index 86ff8f0..24e264c 100644
--- a/templates/social/social_comment_list.html
+++ b/templates/social/social_comment_list.html
@@ -8,108 +8,124 @@
 {% block title %}{% trans "Social Media Monitoring" %} - PX360{% endblock %}
 
 {% block content %}
-<div class="container-fluid">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Page Header -->
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h2 class="mb-1">
-                <i class="bi bi-chat-dots text-purple me-2"></i>
-                {% trans "Social Media Monitoring" %}
-            </h2>
-            <p class="text-muted mb-0">{% trans "Track social media mentions and sentiment across all platforms" %}</p>
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-purple-500 to-indigo-500 rounded-2xl shadow-lg shadow-purple-200">
+                <i data-lucide="message-circle" class="w-8 h-8 text-white"></i>
+            </div>
+            <div>
+                <h1 class="text-2xl font-bold text-navy">
+                    {% trans "Social Media Monitoring" %}
+                </h1>
+                <p class="text-slate text-sm">
+                    {% trans "Track social media mentions and sentiment across all platforms" %}
+                </p>
+            </div>
         </div>
-        <div>
-            <a href="{% url 'social:social_analytics' %}" class="btn btn-outline-primary me-2">
-                <i class="bi bi-graph-up me-1"></i> {% trans "Analytics" %}
+        <div class="flex gap-3">
+            <a href="{% url 'social:social_analytics' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                <i data-lucide="bar-chart-3" class="w-4 h-4"></i>
+                {% trans "Analytics" %}
             </a>
-            <a href="{% url 'social:social_export_csv' %}" class="btn btn-outline-success me-2">
-                <i class="bi bi-file-earmark-csv me-1"></i> CSV
+            <a href="{% url 'social:social_export_csv' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-emerald-200 text-emerald-700 rounded-xl font-semibold hover:bg-emerald-50 transition">
+                <i data-lucide="file-spreadsheet" class="w-4 h-4"></i> CSV
             </a>
-            <a href="{% url 'social:social_export_excel' %}" class="btn btn-outline-success">
-                <i class="bi bi-file-earmark-excel me-1"></i> Excel
+            <a href="{% url 'social:social_export_excel' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-emerald-200 text-emerald-700 rounded-xl font-semibold hover:bg-emerald-50 transition">
+                <i data-lucide="file-spreadsheet" class="w-4 h-4"></i> Excel
             </a>
         </div>
     </div>
 
     <!-- Platform Cards -->
-    <div class="row mb-4">
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
         {% for platform_code, platform_name in platforms %}
-        <div class="col-md-2 col-sm-4 mb-3">
-            <a href="{% url 'social:social_platform' platform_code %}" class="text-decoration-none">
-            <div class="card platform-card h-100 border-0 shadow-sm">
-                <div class="card-body text-center">
-                    <div class="mb-2">
+        <a href="{% url 'social:social_platform' platform_code %}" class="group">
+            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-blue-100 hover:border-purple hover:shadow-lg hover:-translate-y-1 transition-all duration-200">
+                <div class="text-center">
+                    <div class="w-14 h-14 bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:shadow-lg transition">
                         {% social_icon platform_code %}
                     </div>
-                    <h6 class="mb-0">{{ platform_name }}</h6>
-                    <small class="text-muted">
+                    <h6 class="font-bold text-navy mb-1">{{ platform_name }}</h6>
+                    <p class="text-xs text-slate">
                         {{ stats|lookup:platform_code }} {% trans "comments" %}
-                    </small>
+                    </p>
                 </div>
             </div>
-            </a>
-        </div>
+        </a>
         {% endfor %}
     </div>
 
     <!-- Statistics Cards -->
-    <div class="row mb-4">
-        <div class="col-md-3">
-            <div class="card border-primary mb-3">
-                <div class="card-body">
-                    <h6 class="text-muted mb-1">{% trans "Total Comments" %}</h6>
-                    <h3 class="mb-0">{{ stats.total }}</h3>
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 hover:shadow-md transition">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-xl flex items-center justify-center">
+                    <i data-lucide="message-square" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase">{% trans "Total Comments" %}</p>
+                    <p class="text-2xl font-bold text-navy">{{ stats.total }}</p>
                 </div>
             </div>
         </div>
-        <div class="col-md-3">
-            <div class="card border-success mb-3">
-                <div class="card-body">
-                    <h6 class="text-muted mb-1">{% trans "Positive" %}</h6>
-                    <h3 class="mb-0 text-success">{{ stats.positive }}</h3>
-                    <small class="text-muted">
-                        {% widthratio stats.positive stats.total 100 %}% {% trans "of total" %}
-                    </small>
+
+        <div class="bg-white rounded-2xl shadow-sm border border-emerald-100 p-6 hover:shadow-md transition">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-green-500 rounded-xl flex items-center justify-center">
+                    <i data-lucide="smile" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase">{% trans "Positive" %}</p>
+                    <p class="text-2xl font-bold text-navy">{{ stats.positive }}</p>
+                    <p class="text-xs text-slate">{% widthratio stats.positive stats.total 100 %}% {% trans "of total" %}</p>
                 </div>
             </div>
         </div>
-        <div class="col-md-3">
-            <div class="card border-secondary mb-3">
-                <div class="card-body">
-                    <h6 class="text-muted mb-1">{% trans "Neutral" %}</h6>
-                    <h3 class="mb-0 text-secondary">{{ stats.neutral }}</h3>
-                    <small class="text-muted">
-                        {% widthratio stats.neutral stats.total 100 %}% {% trans "of total" %}
-                    </small>
+
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 hover:shadow-md transition">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-slate-400 to-slate-500 rounded-xl flex items-center justify-center">
+                    <i data-lucide="meh" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase">{% trans "Neutral" %}</p>
+                    <p class="text-2xl font-bold text-navy">{{ stats.neutral }}</p>
+                    <p class="text-xs text-slate">{% widthratio stats.neutral stats.total 100 %}% {% trans "of total" %}</p>
                 </div>
             </div>
         </div>
-        <div class="col-md-3">
-            <div class="card border-danger mb-3">
-                <div class="card-body">
-                    <h6 class="text-muted mb-1">{% trans "Negative" %}</h6>
-                    <h3 class="mb-0 text-danger">{{ stats.negative }}</h3>
-                    <small class="text-muted">
-                        {% widthratio stats.negative stats.total 100 %}% {% trans "of total" %}
-                    </small>
+
+        <div class="bg-white rounded-2xl shadow-sm border border-red-100 p-6 hover:shadow-md transition">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-rose-500 rounded-xl flex items-center justify-center">
+                    <i data-lucide="frown" class="w-6 h-6 text-white"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-slate uppercase">{% trans "Negative" %}</p>
+                    <p class="text-2xl font-bold text-navy">{{ stats.negative }}</p>
+                    <p class="text-xs text-slate">{% widthratio stats.negative stats.total 100 %}% {% trans "of total" %}</p>
                 </div>
             </div>
         </div>
     </div>
 
     <!-- Filters -->
-    <div class="card mb-4">
-        <div class="card-header">
-            <button class="btn btn-link text-decoration-none p-0" type="button" data-bs-toggle="collapse" data-bs-target="#filtersCollapse">
-                <i class="bi bi-funnel me-1"></i> {% trans "Advanced Filters" %}
-            </button>
-        </div>
-        <div class="collapse" id="filtersCollapse">
-            <div class="card-body">
-                <form method="get" class="row g-3">
-                    <div class="col-md-3">
-                        <label class="form-label">{% trans "Platform" %}</label>
-                        <select name="platform" class="form-select">
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden mb-8">
+        <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+                <h3 class="text-lg font-bold text-navy flex items-center gap-2">
+                    <i data-lucide="filter" class="w-5 h-5 text-blue"></i>
+                    {% trans "Advanced Filters" %}
+                </h3>
+                <i data-lucide="chevron-down" class="w-5 h-5 text-slate group-open:rotate-180 transition-transform"></i>
+            </summary>
+            <div class="px-6 pb-6">
+                <form method="get" class="grid grid-cols-1 md:grid-cols-5 gap-4">
+                    <div>
+                        <label class="block text-sm font-bold text-navy mb-2">{% trans "Platform" %}</label>
+                        <select name="platform" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
                             <option value="">{% trans "All Platforms" %}</option>
                             {% for platform_code, platform_name in platforms %}
                             <option value="{{ platform_code }}" {% if filters.platform == platform_code %}selected{% endif %}>
@@ -118,95 +134,113 @@
                             {% endfor %}
                         </select>
                     </div>
-                    <div class="col-md-3">
-                        <label class="form-label">{% trans "Sentiment" %}</label>
-                        <select name="sentiment" class="form-select">
+                    <div>
+                        <label class="block text-sm font-bold text-navy mb-2">{% trans "Sentiment" %}</label>
+                        <select name="sentiment" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
                             <option value="">{% trans "All Sentiments" %}</option>
                             <option value="positive" {% if filters.sentiment == 'positive' %}selected{% endif %}>{% trans "Positive" %}</option>
                             <option value="neutral" {% if filters.sentiment == 'neutral' %}selected{% endif %}>{% trans "Neutral" %}</option>
                             <option value="negative" {% if filters.sentiment == 'negative' %}selected{% endif %}>{% trans "Negative" %}</option>
                         </select>
                     </div>
-                    <div class="col-md-2">
-                        <label class="form-label">{% trans "Date From" %}</label>
-                        <input type="date" name="date_from" class="form-control" value="{{ filters.date_from|default:'' }}">
+                    <div>
+                        <label class="block text-sm font-bold text-navy mb-2">{% trans "Date From" %}</label>
+                        <input type="date" name="date_from" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition" value="{{ filters.date_from|default:'' }}">
                     </div>
-                    <div class="col-md-2">
-                        <label class="form-label">{% trans "Date To" %}</label>
-                        <input type="date" name="date_to" class="form-control" value="{{ filters.date_to|default:'' }}">
+                    <div>
+                        <label class="block text-sm font-bold text-navy mb-2">{% trans "Date To" %}</label>
+                        <input type="date" name="date_to" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition" value="{{ filters.date_to|default:'' }}">
                     </div>
-                    <div class="col-md-2 d-flex align-items-end">
-                        <button type="submit" class="btn btn-primary w-100">
-                            <i class="bi bi-search me-1"></i> {% trans "Filter" %}
+                    <div class="flex items-end">
+                        <button type="submit" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                            <i data-lucide="search" class="w-4 h-4"></i> {% trans "Filter" %}
                         </button>
                     </div>
                 </form>
             </div>
-        </div>
+        </details>
     </div>
 
     <!-- Comments Feed -->
-    <div class="row">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {% for comment in comments %}
-        <div class="col-lg-6 mb-3">
-            <div class="card h-100 social-card">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-start mb-2">
-                        <div>
-                            <span class="badge bg-primary mb-1">{{ comment.get_platform_display }}</span>
-                            {% if comment.rating %}
-                            <span class="badge bg-warning text-dark mb-1">{{ comment.rating|star_rating }} {{ comment.rating }}/5</span>
-                            {% endif %}
-                            {% if comment.ai_analysis %}
-                                {% with sentiment=comment.ai_analysis.sentiment.classification.en %}
-                                    {% if sentiment == 'positive' %}
-                                    <span class="badge bg-success">Positive</span>
-                                    {% elif sentiment == 'negative' %}
-                                    <span class="badge bg-danger">Negative</span>
-                                    {% else %}
-                                    <span class="badge bg-secondary">Neutral</span>
-                                    {% endif %}
-                                {% endwith %}
-                            {% else %}
-                            <span class="badge bg-light text-dark">Not Analyzed</span>
-                            {% endif %}
-                        </div>
-                        <small class="text-muted">
-                            {% if comment.published_at %}
-                                {{ comment.published_at|date:"M d, Y H:i" }}
-                            {% else %}
-                                {{ comment.scraped_at|date:"M d, Y H:i" }}
-                            {% endif %}
-                        </small>
-                    </div>
-                    
-                    {% if comment.author %}
-                    <p class="mb-1"><strong>@{{ comment.author }}</strong></p>
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 hover:shadow-lg hover:-translate-y-1 transition-all duration-200 overflow-hidden">
+            <div class="p-6">
+                <div class="flex flex-wrap gap-2 mb-4">
+                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gradient-to-r from-blue to-navy text-white">
+                        {{ comment.get_platform_display }}
+                    </span>
+                    {% if comment.rating %}
+                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-700">
+                        <i data-lucide="star" class="w-3 h-3 fill-current"></i> {{ comment.rating }}/5
+                    </span>
                     {% endif %}
-                    
-                    <p class="mb-3">{{ comment.comments|truncatewords:30 }}</p>
-                    
-                    <div class="d-flex justify-content-between align-items-center">
-                        <div>
-                            <small class="text-muted me-3">
-                                <i class="bi bi-heart"></i> {{ comment.like_count }}
-                            </small>
-                            <small class="text-muted">
-                                <i class="bi bi-chat"></i> {{ comment.reply_count }}
-                            </small>
+                    {% if comment.ai_analysis %}
+                        {% with sentiment=comment.ai_analysis.sentiment.classification.en %}
+                            {% if sentiment == 'positive' %}
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
+                                <i data-lucide="smile" class="w-3 h-3"></i> {% trans "Positive" %}
+                            </span>
+                            {% elif sentiment == 'negative' %}
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-700">
+                                <i data-lucide="frown" class="w-3 h-3"></i> {% trans "Negative" %}
+                            </span>
+                            {% else %}
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">
+                                <i data-lucide="meh" class="w-3 h-3"></i> {% trans "Neutral" %}
+                            </span>
+                            {% endif %}
+                        {% endwith %}
+                    {% else %}
+                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">
+                        {% trans "Not Analyzed" %}
+                    </span>
+                    {% endif %}
+                </div>
+
+                {% if comment.author %}
+                <p class="text-sm font-bold text-navy mb-3">@{{ comment.author }}</p>
+                {% endif %}
+
+                <p class="text-slate mb-4 line-clamp-3">{{ comment.comments|truncatewords:30 }}</p>
+
+                <div class="flex items-center justify-between pt-4 border-t border-blue-50">
+                    <div class="flex items-center gap-4">
+                        <div class="flex items-center gap-2 text-slate text-sm">
+                            <i data-lucide="heart" class="w-4 h-4 text-red-500"></i>
+                            <span class="font-medium">{{ comment.like_count }}</span>
                         </div>
-                        <a href="{% url 'social:social_comment_detail' comment.pk %}" class="btn btn-sm btn-outline-primary">
+                        <div class="flex items-center gap-2 text-slate text-sm">
+                            <i data-lucide="message-square" class="w-4 h-4 text-blue-500"></i>
+                            <span class="font-medium">{{ comment.reply_count }}</span>
+                        </div>
+                    </div>
+                    <div class="text-right">
+                        <a href="{% url 'social:social_comment_detail' comment.pk %}" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-700 rounded-xl font-semibold hover:bg-blue-100 transition text-sm">
                             {% trans "View Details" %}
+                            <i data-lucide="arrow-right" class="w-4 h-4"></i>
                         </a>
                     </div>
                 </div>
+
+                <div class="mt-3 text-right">
+                    <p class="text-xs text-slate">
+                        {% if comment.published_at %}
+                            {{ comment.published_at|date:"M d, Y H:i" }}
+                        {% else %}
+                            {{ comment.scraped_at|date:"M d, Y H:i" }}
+                        {% endif %}
+                    </p>
+                </div>
             </div>
         </div>
         {% empty %}
-        <div class="col-12">
-            <div class="text-center py-5">
-                <i class="bi bi-chat-dots" style="font-size: 3rem; color: #ccc;"></i>
-                <p class="text-muted mt-3">{% trans "No comments found" %}</p>
+        <div class="col-span-full">
+            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-12 text-center">
+                <div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="message-circle" class="w-10 h-10 text-blue-500"></i>
+                </div>
+                <p class="text-slate font-medium">{% trans "No comments found" %}</p>
             </div>
         </div>
         {% endfor %}
@@ -214,87 +248,31 @@
 
     <!-- Pagination -->
     {% if page_obj.has_other_pages %}
-    <nav aria-label="Comments pagination" class="mt-4">
-        <ul class="pagination justify-content-center">
-            {% if page_obj.has_previous %}
-            <li class="page-item">
-                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                    <i class="bi bi-chevron-left"></i>
-                </a>
-            </li>
-            {% endif %}
-            
-            {% for num in page_obj.paginator.page_range %}
-                {% if page_obj.number == num %}
-                <li class="page-item active"><span class="page-link">{{ num }}</span></li>
-                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
-                <li class="page-item">
-                    <a class="page-link" href="?page={{ num }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                        {{ num }}
-                    </a>
-                </li>
-                {% endif %}
-            {% endfor %}
-            
-            {% if page_obj.has_next %}
-            <li class="page-item">
-                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                    <i class="bi bi-chevron-right"></i>
-                </a>
-            </li>
-            {% endif %}
-        </ul>
-    </nav>
+    <div class="flex items-center justify-center gap-2 mt-8">
+        {% if page_obj.has_previous %}
+        <a href="?page={{ page_obj.previous_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}"
+           class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
+            <i data-lucide="chevron-left" class="w-4 h-4"></i>
+        </a>
+        {% endif %}
+
+        <span class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold">
+            {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
+        </span>
+
+        {% if page_obj.has_next %}
+        <a href="?page={{ page_obj.next_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}"
+           class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
+            <i data-lucide="chevron-right" class="w-4 h-4"></i>
+        </a>
+        {% endif %}
+    </div>
     {% endif %}
 </div>
 
-<style>
-.platform-card:hover {
-    transform: translateY(-5px);
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
-}
-
-.platform-icon[data-platform="facebook"] { color: #1877F2; }
-.platform-icon[data-platform="instagram"] { color: #C13584; }
-.platform-icon[data-platform="youtube"] { color: #FF0000; }
-.platform-icon[data-platform="twitter"] { color: #1DA1F2; }
-.platform-icon[data-platform="linkedin"] { color: #0077B5; }
-.platform-icon[data-platform="tiktok"] { color: #000000; }
-.platform-icon[data-platform="google"] { color: #4285F4; }
-
-.social-card {
-    border-left: 4px solid #6c757d;
-}
-
-.social-card .badge.bg-primary {
-    background-color: var(--platform-color) !important;
-}
-</style>
-
-{% block extra_js %}
 <script>
-// Set platform colors dynamically
-document.querySelectorAll('.platform-card').forEach(card => {
-    const icon = card.querySelector('.platform-icon');
-    const platform = icon.dataset.platform;
-    const colors = {
-        facebook: '#1877F2',
-        instagram: 'linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)',
-        youtube: '#FF0000',
-        twitter: '#1DA1F2',
-        linkedin: '#0077B5',
-        tiktok: '#000000',
-        google: '#4285F4'
-    };
-    const color = colors[platform];
-    if (platform === 'instagram') {
-        card.style.background = color;
-        card.style.color = 'white';
-    } else {
-        card.style.borderLeft = `4px solid ${color}`;
-    }
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
 });
 </script>
 {% endblock %}
-{% endblock %}
diff --git a/templates/social/social_platform.html b/templates/social/social_platform.html
index dba4a70..5fd152f 100644
--- a/templates/social/social_platform.html
+++ b/templates/social/social_platform.html
@@ -7,203 +7,198 @@
 {% block title %}{{ platform_display }} - {% trans "Social Media Monitoring" %} - PX360{% endblock %}
 
 {% block content %}
-<div class="container-fluid">
+<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
     <!-- Breadcrumb -->
-    <nav aria-label="breadcrumb" class="mb-3">
-        <ol class="breadcrumb">
-            <li class="breadcrumb-item">
-                <a href="{% url 'social:social_comment_list' %}">{% trans "Social Media" %}</a>
-            </li>
-            <li class="breadcrumb-item active" aria-current="page">{{ platform_display }}</li>
+    <nav class="mb-6">
+        <ol class="flex items-center gap-2 text-sm text-slate">
+            <li><a href="{% url 'social:social_comment_list' %}" class="text-blue hover:text-navy font-medium">{% trans "Social Media" %}</a></li>
+            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
+            <li class="text-navy font-semibold">{{ platform_display }}</li>
         </ol>
     </nav>
 
     <!-- Page Header -->
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div class="d-flex align-items-center">
-            <div class="me-3">
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+        <div class="flex items-center gap-3">
+            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-purple-500 rounded-2xl shadow-lg shadow-blue-200">
                 {% social_icon platform %}
             </div>
             <div>
-                <h2 class="mb-1">{{ platform_display }}</h2>
-                <p class="text-muted mb-0">{% trans "Monitor and analyze" %} {{ platform_display }} {% trans "comments" %}</p>
+                <h1 class="text-2xl font-bold text-navy">{{ platform_display }}</h1>
+                <p class="text-slate text-sm">{% trans "Monitor and analyze" %} {{ platform_display }} {% trans "comments" %}</p>
             </div>
         </div>
-        <div>
-            <a href="{% url 'social:social_analytics' %}?platform={{ platform }}" class="btn btn-outline-primary me-2">
-                <i class="bi bi-graph-up me-1"></i> {% trans "View Analytics" %}
+        <div class="flex gap-3">
+            <a href="{% url 'social:social_analytics' %}?platform={{ platform }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
+                <i data-lucide="bar-chart-3" class="w-4 h-4"></i> {% trans "View Analytics" %}
             </a>
-            <a href="{% url 'social:social_comment_list' %}" class="btn btn-outline-secondary">
-                <i class="bi bi-grid me-1"></i> {% trans "All Platforms" %}
+            <a href="{% url 'social:social_comment_list' %}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                <i data-lucide="grid-3x3" class="w-4 h-4"></i> {% trans "All Platforms" %}
             </a>
         </div>
     </div>
 
     <!-- Platform Statistics -->
-    <div class="row mb-4">
-        <div class="col-md-2">
-            <div class="card border-primary mb-3">
-                <div class="card-body text-center">
-                    <h6 class="text-muted mb-1">{% trans "Total" %}</h6>
-                    <h3 class="mb-0">{{ stats.total }}</h3>
-                </div>
-            </div>
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-4 text-center">
+            <p class="text-xs font-semibold text-slate uppercase mb-1">{% trans "Total" %}</p>
+            <p class="text-3xl font-bold text-navy">{{ stats.total }}</p>
         </div>
-        <div class="col-md-2">
-            <div class="card border-success mb-3">
-                <div class="card-body text-center">
-                    <h6 class="text-muted mb-1">{% trans "Positive" %}</h6>
-                    <h3 class="mb-0 text-success">{{ stats.positive }}</h3>
-                </div>
-            </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-emerald-100 p-4 text-center">
+            <p class="text-xs font-semibold text-slate uppercase mb-1">{% trans "Positive" %}</p>
+            <p class="text-3xl font-bold text-emerald-600">{{ stats.positive }}</p>
         </div>
-        <div class="col-md-2">
-            <div class="card border-secondary mb-3">
-                <div class="card-body text-center">
-                    <h6 class="text-muted mb-1">{% trans "Neutral" %}</h6>
-                    <h3 class="mb-0 text-secondary">{{ stats.neutral }}</h3>
-                </div>
-            </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4 text-center">
+            <p class="text-xs font-semibold text-slate uppercase mb-1">{% trans "Neutral" %}</p>
+            <p class="text-3xl font-bold text-slate-600">{{ stats.neutral }}</p>
         </div>
-        <div class="col-md-2">
-            <div class="card border-danger mb-3">
-                <div class="card-body text-center">
-                    <h6 class="text-muted mb-1">{% trans "Negative" %}</h6>
-                    <h3 class="mb-0 text-danger">{{ stats.negative }}</h3>
-                </div>
-            </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-red-100 p-4 text-center">
+            <p class="text-xs font-semibold text-slate uppercase mb-1">{% trans "Negative" %}</p>
+            <p class="text-3xl font-bold text-red-600">{{ stats.negative }}</p>
         </div>
-        <div class="col-md-2">
-            <div class="card border-info mb-3">
-                <div class="card-body text-center">
-                    <h6 class="text-muted mb-1">{% trans "Avg Sentiment" %}</h6>
-                    <h3 class="mb-0 text-info">{{ stats.avg_sentiment|floatformat:2 }}</h3>
-                </div>
-            </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-4 text-center">
+            <p class="text-xs font-semibold text-slate uppercase mb-1">{% trans "Avg Sentiment" %}</p>
+            <p class="text-3xl font-bold text-blue-600">{{ stats.avg_sentiment|floatformat:2 }}</p>
         </div>
-        <div class="col-md-2">
-            <div class="card border-warning mb-3">
-                <div class="card-body text-center">
-                    <h6 class="text-muted mb-1">{% trans "Engagement" %}</h6>
-                    <h3 class="mb-0 text-warning">{{ stats.total_likes|add:stats.total_replies }}</h3>
-                </div>
-            </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-orange-100 p-4 text-center">
+            <p class="text-xs font-semibold text-slate uppercase mb-1">{% trans "Engagement" %}</p>
+            <p class="text-3xl font-bold text-orange-600">{{ stats.total_likes|add:stats.total_replies }}</p>
         </div>
     </div>
 
     <!-- Time Filter & Search -->
-    <div class="card mb-4">
-        <div class="card-body">
-            <form method="get" class="row g-3 align-items-end">
-                <div class="col-md-2">
-                    <label class="form-label">{% trans "Time Period" %}</label>
-                    <select name="time_filter" class="form-select" onchange="this.form.submit()">
+    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden mb-8">
+        <form method="get" class="p-6">
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-7 gap-4">
+                <div>
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Time Period" %}</label>
+                    <select name="time_filter" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white" onchange="this.form.submit()">
                         <option value="all" {% if time_filter == 'all' %}selected{% endif %}>{% trans "All Time" %}</option>
                         <option value="today" {% if time_filter == 'today' %}selected{% endif %}>{% trans "Today" %}</option>
                         <option value="week" {% if time_filter == 'week' %}selected{% endif %}>{% trans "This Week" %}</option>
                         <option value="month" {% if time_filter == 'month' %}selected{% endif %}>{% trans "This Month" %}</option>
                     </select>
                 </div>
-                <div class="col-md-2">
-                    <label class="form-label">{% trans "Sentiment" %}</label>
-                    <select name="sentiment" class="form-select">
+                <div>
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Sentiment" %}</label>
+                    <select name="sentiment" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
                         <option value="">{% trans "All" %}</option>
                         <option value="positive" {% if filters.sentiment == 'positive' %}selected{% endif %}>{% trans "Positive" %}</option>
                         <option value="neutral" {% if filters.sentiment == 'neutral' %}selected{% endif %}>{% trans "Neutral" %}</option>
                         <option value="negative" {% if filters.sentiment == 'negative' %}selected{% endif %}>{% trans "Negative" %}</option>
                     </select>
                 </div>
-                <div class="col-md-2">
-                    <label class="form-label">{% trans "Date From" %}</label>
-                    <input type="date" name="date_from" class="form-control" value="{{ filters.date_from|default:'' }}">
+                <div>
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Date From" %}</label>
+                    <input type="date" name="date_from" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition" value="{{ filters.date_from|default:'' }}">
                 </div>
-                <div class="col-md-2">
-                    <label class="form-label">{% trans "Date To" %}</label>
-                    <input type="date" name="date_to" class="form-control" value="{{ filters.date_to|default:'' }}">
+                <div>
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Date To" %}</label>
+                    <input type="date" name="date_to" class="w-full px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition" value="{{ filters.date_to|default:'' }}">
                 </div>
-                <div class="col-md-2">
-                    <label class="form-label">{% trans "Search" %}</label>
-                    <input type="text" name="search" class="form-control" placeholder="{% trans 'Search comments...' %}" value="{{ filters.search|default:'' }}">
+                <div class="col-span-2">
+                    <label class="block text-sm font-bold text-navy mb-2">{% trans "Search" %}</label>
+                    <div class="relative">
+                        <input type="text" name="search" class="w-full pl-10 pr-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition" placeholder="{% trans 'Search comments...' %}" value="{{ filters.search|default:'' }}">
+                        <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate"></i>
+                    </div>
                 </div>
-                <div class="col-md-2">
-                    <button type="submit" class="btn btn-primary w-100">
-                        <i class="bi bi-search me-1"></i> {% trans "Filter" %}
+                <div class="flex items-end">
+                    <button type="submit" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
+                        <i data-lucide="search" class="w-4 h-4"></i> {% trans "Filter" %}
                     </button>
                 </div>
-            </form>
-        </div>
+            </div>
+        </form>
     </div>
 
     <!-- Comments Feed -->
-    <div class="row">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {% for comment in comments %}
-        <div class="col-lg-6 mb-3">
-            <div class="card h-100" style="border-left: 4px solid {{ platform_color }};">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-start mb-2">
-                        <div>
-                            <span class="badge" style="background-color: {{ platform_color }};">{{ comment.get_platform_display }}</span>
-                            {% if comment.rating %}
-                            <span class="badge bg-warning text-dark">{{ comment.rating|star_rating }} {{ comment.rating }}/5</span>
-                            {% endif %}
-                            {% if comment.ai_analysis %}
-                                {% with sentiment=comment.ai_analysis.sentiment.classification.en %}
-                                    {% if sentiment == 'positive' %}
-                                    <span class="badge bg-success">Positive</span>
-                                    {% elif sentiment == 'negative' %}
-                                    <span class="badge bg-danger">Negative</span>
-                                    {% else %}
-                                    <span class="badge bg-secondary">Neutral</span>
-                                    {% endif %}
-                                {% endwith %}
-                            {% else %}
-                            <span class="badge bg-light text-dark">Not Analyzed</span>
-                            {% endif %}
+        <div class="bg-white rounded-2xl shadow-sm border-l-4 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-200" style="border-left-color: {{ platform_color }};">
+            <div class="p-6">
+                <div class="flex flex-wrap justify-between items-start gap-3 mb-4">
+                    <div class="flex flex-wrap gap-2">
+                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold text-white" style="background-color: {{ platform_color }};">
+                            {{ comment.get_platform_display }}
+                        </span>
+                        {% if comment.rating %}
+                        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-700">
+                            <i data-lucide="star" class="w-3 h-3 fill-current"></i> {{ comment.rating|star_rating }} {{ comment.rating }}/5
+                        </span>
+                        {% endif %}
+                        {% if comment.ai_analysis %}
+                            {% with sentiment=comment.ai_analysis.sentiment.classification.en %}
+                                {% if sentiment == 'positive' %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
+                                    <i data-lucide="smile" class="w-3 h-3"></i> {% trans "Positive" %}
+                                </span>
+                                {% elif sentiment == 'negative' %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-700">
+                                    <i data-lucide="frown" class="w-3 h-3"></i> {% trans "Negative" %}
+                                </span>
+                                {% else %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">
+                                    <i data-lucide="meh" class="w-3 h-3"></i> {% trans "Neutral" %}
+                                </span>
+                                {% endif %}
+                            {% endwith %}
+                        {% else %}
+                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">
+                            {% trans "Not Analyzed" %}
+                        </span>
+                        {% endif %}
+                    </div>
+                    <p class="text-xs text-slate">
+                        {% if comment.published_at %}
+                            {{ comment.published_at|date:"M d, Y H:i" }}
+                        {% else %}
+                            {{ comment.scraped_at|date:"M d, Y H:i" }}
+                        {% endif %}
+                    </p>
+                </div>
+
+                {% if comment.author %}
+                <p class="text-sm font-bold text-navy mb-3">@{{ comment.author }}</p>
+                {% endif %}
+
+                <p class="text-slate mb-4 line-clamp-3">{{ comment.comments|truncatewords:30 }}</p>
+
+                {% if comment.ai_analysis and comment.ai_analysis.keywords.en %}
+                <div class="flex flex-wrap gap-2 mb-4">
+                    {% for keyword in comment.ai_analysis.keywords.en|slice:":5" %}
+                    <span class="inline-flex items-center px-2 py-1 bg-slate-100 text-slate-700 rounded-lg text-xs font-medium">
+                        {{ keyword }}
+                    </span>
+                    {% endfor %}
+                </div>
+                {% endif %}
+
+                <div class="flex items-center justify-between pt-4 border-t border-blue-50">
+                    <div class="flex items-center gap-4">
+                        <div class="flex items-center gap-2 text-slate text-sm">
+                            <i data-lucide="heart" class="w-4 h-4 text-red-500"></i>
+                            <span class="font-medium">{{ comment.like_count }}</span>
                         </div>
-                        <small class="text-muted">
-                            {% if comment.published_at %}
-                                {{ comment.published_at|date:"M d, Y H:i" }}
-                            {% else %}
-                                {{ comment.scraped_at|date:"M d, Y H:i" }}
-                            {% endif %}
-                        </small>
-                    </div>
-                    
-                    {% if comment.author %}
-                    <p class="mb-1"><strong>@{{ comment.author }}</strong></p>
-                    {% endif %}
-                    
-                    <p class="mb-3">{{ comment.comments|truncatewords:30 }}</p>
-                    
-                    {% if comment.ai_analysis and comment.ai_analysis.keywords.en %}
-                    <div class="mb-2">
-                        {% for keyword in comment.ai_analysis.keywords.en|slice:":5" %}
-                        <span class="badge bg-light text-dark me-1">{{ keyword }}</span>
-                        {% endfor %}
-                    </div>
-                    {% endif %}
-                    
-                    <div class="d-flex justify-content-between align-items-center">
-                        <div>
-                            <small class="text-muted me-3">
-                                <i class="bi bi-heart text-danger"></i> {{ comment.like_count }}
-                            </small>
-                            <small class="text-muted">
-                                <i class="bi bi-chat text-primary"></i> {{ comment.reply_count }}
-                            </small>
+                        <div class="flex items-center gap-2 text-slate text-sm">
+                            <i data-lucide="message-square" class="w-4 h-4 text-blue-500"></i>
+                            <span class="font-medium">{{ comment.reply_count }}</span>
                         </div>
-                        <a href="{% url 'social:social_comment_detail' comment.pk %}" class="btn btn-sm btn-outline-primary">
-                            {% trans "View Details" %}
-                        </a>
                     </div>
+                    <a href="{% url 'social:social_comment_detail' comment.pk %}" class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200 text-sm">
+                        {% trans "View Details" %}
+                        <i data-lucide="arrow-right" class="w-4 h-4"></i>
+                    </a>
                 </div>
             </div>
         </div>
         {% empty %}
-        <div class="col-12">
-            <div class="text-center py-5">
-                <i class="bi bi-chat-quote" style="font-size: 3rem; color: #ccc;"></i>
-                <p class="text-muted mt-3">{% trans "No comments found for this platform" %}</p>
+        <div class="col-span-full">
+            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-12 text-center">
+                <div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i data-lucide="message-circle" class="w-10 h-10 text-blue-500"></i>
+                </div>
+                <p class="text-slate font-medium">{% trans "No comments found for this platform" %}</p>
             </div>
         </div>
         {% endfor %}
@@ -211,45 +206,31 @@
 
     <!-- Pagination -->
     {% if page_obj.has_other_pages %}
-    <nav aria-label="Comments pagination" class="mt-4">
-        <ul class="pagination justify-content-center">
-            {% if page_obj.has_previous %}
-            <li class="page-item">
-                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                    <i class="bi bi-chevron-left"></i>
-                </a>
-            </li>
-            {% endif %}
-            
-            {% for num in page_obj.paginator.page_range %}
-                {% if page_obj.number == num %}
-                <li class="page-item active"><span class="page-link">{{ num }}</span></li>
-                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
-                <li class="page-item">
-                    <a class="page-link" href="?page={{ num }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                        {{ num }}
-                    </a>
-                </li>
-                {% endif %}
-            {% endfor %}
-            
-            {% if page_obj.has_next %}
-            <li class="page-item">
-                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}">
-                    <i class="bi bi-chevron-right"></i>
-                </a>
-            </li>
-            {% endif %}
-        </ul>
-    </nav>
+    <div class="flex items-center justify-center gap-2 mt-8">
+        {% if page_obj.has_previous %}
+        <a href="?page={{ page_obj.previous_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}"
+           class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
+            <i data-lucide="chevron-left" class="w-4 h-4"></i>
+        </a>
+        {% endif %}
+
+        <span class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold">
+            {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
+        </span>
+
+        {% if page_obj.has_next %}
+        <a href="?page={{ page_obj.next_page_number }}{% for key, value in filters.items %}&{{ key }}={{ value }}{% endfor %}"
+           class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
+            <i data-lucide="chevron-right" class="w-4 h-4"></i>
+        </a>
+        {% endif %}
+    </div>
     {% endif %}
 </div>
 
-{% block extra_css %}
-<style>
-.platform-color {
-    color: {{ platform_color }};
-}
-</style>
-{% endblock %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    lucide.createIcons();
+});
+</script>
 {% endblock %}
diff --git a/templates/standards/attachment_confirm_delete.html b/templates/standards/attachment_confirm_delete.html
new file mode 100644
index 0000000..882b770
--- /dev/null
+++ b/templates/standards/attachment_confirm_delete.html
@@ -0,0 +1,116 @@
+{% extends 'layouts/base.html' %}
+{% load i18n static %}
+
+{% block title %}{% trans "Delete Attachment" %}{% endblock %}
+
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Delete Attachment" %}</h1>
+                <p class="text-blue-100 text-sm">{% trans "Confirm deletion of evidence file" %}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'standards:standard_compliance_update' compliance_id=attachment.compliance.id %}" 
+                   class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Assessment" %}
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div class="max-w-2xl mx-auto">
+        <div class="section-card">
+            <div class="p-6">
+                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded-r-lg">
+                    <div class="flex items-start">
+                        <i data-lucide="alert-triangle" class="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5"></i>
+                        <div class="ml-3">
+                            <h3 class="text-sm font-semibold text-yellow-800">{% trans "Warning" %}</h3>
+                            <p class="text-sm text-yellow-700 mt-1">{% trans "This action cannot be undone. The file will be permanently deleted." %}</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">{% trans "Are you sure you want to delete this attachment?" %}</h3>
+
+                <div class="bg-gray-50 rounded-lg p-4 mb-6">
+                    <dl class="divide-y divide-gray-200">
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "File Name" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">{{ attachment.filename }}</dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Description" %}</dt>
+                            <dd class="text-sm text-gray-900">{{ attachment.description|default:"-" }}</dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Uploaded By" %}</dt>
+                            <dd class="text-sm text-gray-900">{{ attachment.uploaded_by.get_full_name }}</dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Upload Date" %}</dt>
+                            <dd class="text-sm text-gray-900">{{ attachment.created_at|date:"Y-m-d H:i" }}</dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Standard" %}</dt>
+                            <dd class="text-sm text-gray-900">{{ attachment.compliance.standard.code }}</dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Department" %}</dt>
+                            <dd class="text-sm text-gray-900">{{ attachment.compliance.department.name }}</dd>
+                        </div>
+                    </dl>
+                </div>
+
+                <form method="post">
+                    {% csrf_token %}
+                    <div class="flex gap-3">
+                        <button type="submit" class="btn-transition inline-flex items-center px-6 py-2.5 bg-red-500 text-white font-medium rounded-xl hover:bg-red-600 transition">
+                            <i data-lucide="trash-2" class="w-4 h-4 me-2"></i>{% trans "Delete Attachment" %}
+                        </button>
+                        <a href="{% url 'standards:standard_compliance_update' compliance_id=attachment.compliance.id %}" 
+                           class="btn-transition inline-flex items-center px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition">
+                            {% trans "Cancel" %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/standards/attachment_upload.html b/templates/standards/attachment_upload.html
index 2b2bde6..18b85f7 100644
--- a/templates/standards/attachment_upload.html
+++ b/templates/standards/attachment_upload.html
@@ -1,134 +1,239 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
+{% load i18n static %}
 
 {% block title %}{% trans "Upload Evidence" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% trans "Upload Evidence Attachment" %}</h1>
-            <p class="text-muted mb-0">{{ compliance.standard.code }} - {{ compliance.standard.title }}</p>
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Upload Evidence Attachment" %}</h1>
+                <p class="text-blue-100 text-sm">{{ compliance.standard.code }} - {{ compliance.standard.title }}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'standards:standard_compliance_update' compliance_id=compliance.id %}"
+                   class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Assessment" %}
+                </a>
+            </div>
         </div>
-        <a href="{% url 'standards:standard_compliance_update' compliance_id=compliance.id %}"
-           class="btn btn-outline-secondary">
-            <i class="fas fa-arrow-left me-2"></i>{% trans "Back to Assessment" %}
-        </a>
     </div>
 
-    <div class="row">
-        <div class="col-lg-8">
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Upload New Attachment" %}</h5>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+        <div class="lg:col-span-2">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-green-100">
+                        <i data-lucide="upload" class="w-5 h-5 text-green-600"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Upload New Attachment" %}</h5>
                 </div>
-                <div class="card-body">
+                <div class="p-6">
                     <form method="post" enctype="multipart/form-data">
                         {% csrf_token %}
-                        <div class="mb-3">
-                            <label for="{{ form.file.id_for_label }}" class="form-label">
+                        
+                        <div class="mb-4">
+                            <label for="{{ form.file.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {% trans "File" %}
                             </label>
                             {{ form.file }}
                             {% if form.file.errors %}
-                            <div class="text-danger">{{ form.file.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.file.errors }}</p>
                             {% endif %}
-                            <small class="form-text text-muted">
+                            <p class="mt-1 text-xs text-gray-500">
                                 {% trans "Accepted formats: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG" %}
-                            </small>
+                            </p>
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.description.id_for_label }}" class="form-label">
+                        <div class="mb-6">
+                            <label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {% trans "Description" %}
                             </label>
                             {{ form.description }}
                             {% if form.description.errors %}
-                            <div class="text-danger">{{ form.description.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.description.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <button type="submit" class="btn btn-primary">
-                            <i class="fas fa-upload me-2"></i>{% trans "Upload" %}
-                        </button>
-                        <a href="{% url 'standards:standard_compliance_update' compliance_id=compliance.id %}"
-                           class="btn btn-outline-secondary ms-2">
-                            {% trans "Cancel" %}
-                        </a>
+                        <div class="flex gap-3">
+                            <button type="submit" class="btn-transition inline-flex items-center px-6 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                                <i data-lucide="upload" class="w-4 h-4 me-2"></i>{% trans "Upload" %}
+                            </button>
+                            <a href="{% url 'standards:standard_compliance_update' compliance_id=compliance.id %}"
+                               class="btn-transition inline-flex items-center px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition">
+                                {% trans "Cancel" %}
+                            </a>
+                        </div>
                     </form>
                 </div>
             </div>
         </div>
 
-        <div class="col-lg-4">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Compliance Details" %}</h5>
+        <div class="lg:col-span-1">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-navy/10">
+                        <i data-lucide="clipboard-list" class="w-5 h-5 text-navy"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Compliance Details" %}</h5>
                 </div>
-                <div class="card-body">
-                    <table class="table table-sm">
-                        <tr>
-                            <th width="40%">{% trans "Standard" %}</th>
-                            <td>{{ compliance.standard.code }}</td>
-                        </tr>
-                        <tr>
-                            <th>{% trans "Title" %}</th>
-                            <td>{{ compliance.standard.title }}</td>
-                        </tr>
-                        <tr>
-                            <th>{% trans "Department" %}</th>
-                            <td>{{ compliance.department.name }}</td>
-                        </tr>
-                        <tr>
-                            <th>{% trans "Status" %}</th>
-                            <td>
-                                <span class="badge {% if compliance.status == 'met' %}bg-success{% elif compliance.status == 'partially_met' %}bg-warning{% elif compliance.status == 'not_met' %}bg-danger{% else %}bg-secondary{% endif %}">
-                                    {{ compliance.get_status_display }}
+                <div class="p-6">
+                    <dl class="divide-y divide-gray-100">
+                        <div class="py-3">
+                            <dt class="text-xs font-medium text-gray-500 mb-1">{% trans "Standard" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">{{ compliance.standard.code }}</dd>
+                        </div>
+                        <div class="py-3">
+                            <dt class="text-xs font-medium text-gray-500 mb-1">{% trans "Title" %}</dt>
+                            <dd class="text-sm text-gray-900">{{ compliance.standard.title }}</dd>
+                        </div>
+                        <div class="py-3">
+                            <dt class="text-xs font-medium text-gray-500 mb-1">{% trans "Department" %}</dt>
+                            <dd class="text-sm text-gray-900">{{ compliance.department.name }}</dd>
+                        </div>
+                        <div class="py-3">
+                            <dt class="text-xs font-medium text-gray-500 mb-1">{% trans "Status" %}</dt>
+                            <dd class="text-sm">
+                                {% if compliance.status == 'met' %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                                    <i data-lucide="check-circle" class="w-3 h-3 me-1"></i>{{ compliance.get_status_display }}
                                 </span>
-                            </td>
-                        </tr>
-                    </table>
+                                {% elif compliance.status == 'partially_met' %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+                                    <i data-lucide="alert-circle" class="w-3 h-3 me-1"></i>{{ compliance.get_status_display }}
+                                </span>
+                                {% elif compliance.status == 'not_met' %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                                    <i data-lucide="x-circle" class="w-3 h-3 me-1"></i>{{ compliance.get_status_display }}
+                                </span>
+                                {% else %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                                    <i data-lucide="help-circle" class="w-3 h-3 me-1"></i>{{ compliance.get_status_display }}
+                                </span>
+                                {% endif %}
+                            </dd>
+                        </div>
+                    </dl>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Existing Attachments -->
     {% if compliance.attachments.all %}
-    <div class="card mt-4">
-        <div class="card-header">
-            <h5 class="card-title mb-0">{% trans "Existing Attachments" %}</h5>
+    <div class="section-card">
+        <div class="section-header">
+            <div class="section-icon bg-blue/10">
+                <i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
+            </div>
+            <h5 class="text-lg font-semibold text-gray-800">{% trans "Existing Attachments" %}</h5>
         </div>
-        <div class="card-body">
-            <div class="table-responsive">
-                <table class="table table-hover">
-                    <thead>
+        <div class="p-0">
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
                         <tr>
-                            <th>{% trans "File Name" %}</th>
-                            <th>{% trans "Description" %}</th>
-                            <th>{% trans "Uploaded By" %}</th>
-                            <th>{% trans "Date" %}</th>
-                            <th>{% trans "Actions" %}</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "File Name" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Description" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Uploaded By" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Date" %}
+                            </th>
+                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Actions" %}
+                            </th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="bg-white divide-y divide-gray-200">
                         {% for attachment in compliance.attachments.all %}
-                        <tr>
-                            <td>
-                                <i class="fas fa-file me-2"></i>{{ attachment.filename }}
+                        <tr class="hover:bg-gray-50 transition">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="flex items-center">
+                                    <i data-lucide="file" class="w-4 h-4 text-gray-400 mr-2"></i>
+                                    <span class="text-sm font-medium text-gray-900">{{ attachment.filename }}</span>
+                                </div>
                             </td>
-                            <td>{{ attachment.description|default:"-" }}</td>
-                            <td>{{ attachment.uploaded_by.get_full_name }}</td>
-                            <td>{{ attachment.created_at|date:"Y-m-d H:i" }}</td>
-                            <td>
-                                <a href="{{ attachment.file.url }}" target="_blank"
-                                   class="btn btn-sm btn-outline-primary">
-                                    <i class="fas fa-download"></i>
-                                </a>
-                                <a href="{% url 'standards:attachment_delete' pk=attachment.id %}"
-                                   class="btn btn-sm btn-outline-danger">
-                                    <i class="fas fa-trash"></i>
-                                </a>
+                            <td class="px-6 py-4">
+                                <span class="text-sm text-gray-600">{{ attachment.description|default:"-" }}</span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                                {{ attachment.uploaded_by.get_full_name }}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                                {{ attachment.created_at|date:"Y-m-d H:i" }}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-right">
+                                <div class="flex gap-2 justify-end">
+                                    <a href="{{ attachment.file.url }}" target="_blank"
+                                       class="btn-transition inline-flex items-center px-3 py-1.5 bg-blue-500 text-white text-xs font-medium rounded-lg hover:bg-blue-600 transition">
+                                        <i data-lucide="download" class="w-3 h-3"></i>
+                                    </a>
+                                    <a href="{% url 'standards:attachment_delete' pk=attachment.id %}"
+                                       class="btn-transition inline-flex items-center px-3 py-1.5 bg-red-500 text-white text-xs font-medium rounded-lg hover:bg-red-600 transition">
+                                        <i data-lucide="trash-2" class="w-3 h-3"></i>
+                                    </a>
+                                </div>
                             </td>
                         </tr>
                         {% endfor %}
@@ -139,4 +244,22 @@
     </div>
     {% endif %}
 </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const formInputs = document.querySelectorAll('input[type="text"], textarea');
+    formInputs.forEach(input => {
+        if (!input.classList.contains('form-control') && input.type !== 'file') {
+            input.classList.add('w-full', 'px-4', 'py-2.5', 'border', 'border-gray-300', 'rounded-lg', 'focus:ring-2', 'focus:ring-navy', 'focus:border-transparent', 'transition');
+        }
+    });
+
+    const fileInputs = document.querySelectorAll('input[type="file"]');
+    fileInputs.forEach(input => {
+        if (!input.classList.contains('block')) {
+            input.classList.add('block', 'w-full', 'text-sm', 'text-gray-900', 'border', 'border-gray-300', 'rounded-lg', 'cursor-pointer', 'focus:outline-none', 'focus:ring-2', 'focus:ring-navy');
+        }
+    });
+});
+</script>
 {% endblock %}
diff --git a/templates/standards/category_confirm_delete.html b/templates/standards/category_confirm_delete.html
index 69ebb37..fd1a9a8 100644
--- a/templates/standards/category_confirm_delete.html
+++ b/templates/standards/category_confirm_delete.html
@@ -1,60 +1,127 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
-{% load action_icons %}
+{% load i18n static %}
 
 {% block title %}{% trans "Delete Category" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% trans "Delete Category" %}</h1>
-            <p class="text-muted mb-0">{% trans "Confirm deletion of standard category" %}</p>
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Delete Category" %}</h1>
+                <p class="text-blue-100 text-sm">{% trans "Confirm deletion of standard category" %}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'standards:category_list' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Categories" %}
+                </a>
+            </div>
         </div>
-        <a href="{% url 'standards:category_list' %}" class="btn btn-outline-secondary">
-            {% action_icon "back" %} {% trans "Back to Categories" %}
-        </a>
     </div>
 
-    <div class="row">
-        <div class="col-12 col-lg-8">
-            <div class="card">
-                <div class="card-body">
-                    <div class="alert alert-warning">
-                        {% action_icon "warning" %}
-                        <strong>{% trans "Warning:" %}</strong> {% trans "This action cannot be undone." %}
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="lg:col-span-2">
+            <div class="section-card">
+                <div class="p-6">
+                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded-r-lg">
+                        <div class="flex items-start">
+                            <i data-lucide="alert-triangle" class="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5"></i>
+                            <div class="ml-3">
+                                <h3 class="text-sm font-semibold text-yellow-800">{% trans "Warning" %}</h3>
+                                <p class="text-sm text-yellow-700 mt-1">{% trans "This action cannot be undone." %}</p>
+                            </div>
+                        </div>
                     </div>
 
-                    <h5>{% trans "Are you sure you want to delete this category?" %}</h5>
+                    <h3 class="text-lg font-semibold text-gray-900 mb-4">{% trans "Are you sure you want to delete this category?" %}</h3>
 
-                    <div class="table mt-3">
-                        <table class="table table-sm">
-                            <tr>
-                                <th width="30%">{% trans "Order" %}</th>
-                                <td><span class="badge bg-secondary">{{ category.order }}</span></td>
-                            </tr>
-                            <tr>
-                                <th>{% trans "Name" %}</th>
-                                <td><strong>{{ category.name }}</strong></td>
-                            </tr>
-                            <tr>
-                                <th>{% trans "Arabic Name" %}</th>
-                                <td>{{ category.name_ar|default:"-" }}</td>
-                            </tr>
-                            <tr>
-                                <th>{% trans "Description" %}</th>
-                                <td>{{ category.description|default:"-" }}</td>
-                            </tr>
-                        </table>
+                    <div class="bg-gray-50 rounded-lg p-4 mb-6">
+                        <dl class="divide-y divide-gray-200">
+                            <div class="py-3 flex justify-between">
+                                <dt class="text-sm font-medium text-gray-500">{% trans "Order" %}</dt>
+                                <dd class="text-sm font-semibold text-gray-900">
+                                    <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-semibold bg-gray-100 text-gray-700">
+                                        {{ category.order }}
+                                    </span>
+                                </dd>
+                            </div>
+                            <div class="py-3 flex justify-between">
+                                <dt class="text-sm font-medium text-gray-500">{% trans "Name" %}</dt>
+                                <dd class="text-sm font-semibold text-gray-900">{{ category.name }}</dd>
+                            </div>
+                            <div class="py-3 flex justify-between">
+                                <dt class="text-sm font-medium text-gray-500">{% trans "Arabic Name" %}</dt>
+                                <dd class="text-sm text-gray-900">{{ category.name_ar|default:"-" }}</dd>
+                            </div>
+                            <div class="py-3 flex justify-between">
+                                <dt class="text-sm font-medium text-gray-500">{% trans "Description" %}</dt>
+                                <dd class="text-sm text-gray-900">{{ category.description|default:"-" }}</dd>
+                            </div>
+                        </dl>
                     </div>
 
-                    <form method="post" class="mt-4">
+                    <form method="post">
                         {% csrf_token %}
-                        <div class="d-flex gap-2">
-                            <button type="submit" class="btn btn-danger">
-                                {% action_icon "delete" %} {% trans "Delete Category" %}
+                        <div class="flex gap-3">
+                            <button type="submit" class="btn-transition inline-flex items-center px-6 py-2.5 bg-red-500 text-white font-medium rounded-xl hover:bg-red-600 transition">
+                                <i data-lucide="trash-2" class="w-4 h-4 me-2"></i>{% trans "Delete Category" %}
                             </button>
-                            <a href="{% url 'standards:category_list' %}" class="btn btn-secondary">
+                            <a href="{% url 'standards:category_list' %}" class="btn-transition inline-flex items-center px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition">
                                 {% trans "Cancel" %}
                             </a>
                         </div>
@@ -63,23 +130,37 @@
             </div>
         </div>
 
-        <div class="col-12 col-lg-4">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Impact" %}</h5>
+        <div class="lg:col-span-1">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-red-100">
+                        <i data-lucide="alert-circle" class="w-5 h-5 text-red-600"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Impact" %}</h5>
                 </div>
-                <div class="card-body">
-                    <p class="small text-muted">
+                <div class="p-6">
+                    <p class="text-sm text-gray-600 mb-3">
                         {% trans "Deleting this category will affect:" %}
                     </p>
-                    <ul class="small">
-                        <li>{% trans "All standards linked to this category" %}</li>
-                        <li>{% trans "Compliance records for those standards" %}</li>
-                        <li>{% trans "Any reports or analytics using this data" %}</li>
+                    <ul class="text-sm text-gray-600 space-y-2 mb-4">
+                        <li class="flex items-start">
+                            <i data-lucide="x" class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5 mr-2"></i>
+                            <span>{% trans "All standards linked to this category" %}</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-lucide="x" class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5 mr-2"></i>
+                            <span>{% trans "Compliance records for those standards" %}</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-lucide="x" class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5 mr-2"></i>
+                            <span>{% trans "Any reports or analytics using this data" %}</span>
+                        </li>
                     </ul>
-                    <p class="small text-danger mt-3">
-                        <strong>{% trans "Consider:" %}</strong> {% trans "You may want to mark this category as inactive instead of deleting it." %}
-                    </p>
+                    <div class="bg-blue-50 rounded-lg p-3 mt-4">
+                        <p class="text-xs text-blue-800">
+                            <strong>{% trans "Consider:" %}</strong> {% trans "You may want to mark this category as inactive instead of deleting it." %}
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/templates/standards/category_form.html b/templates/standards/category_form.html
index 0dfe25f..d7bc014 100644
--- a/templates/standards/category_form.html
+++ b/templates/standards/category_form.html
@@ -1,88 +1,145 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
-{% load action_icons %}
+{% load i18n static %}
 
 {% block title %}{% if category %}{% trans "Update Category" %}{% else %}{% trans "Create Category" %}{% endif %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% if category %}{% trans "Update Category" %}{% else %}{% trans "Create Category" %}{% endif %}</h1>
-            <p class="text-muted mb-0">{% if category %}{% trans "Edit standard category" %}{% else %}{% trans "Add new standard category" %}{% endif %}</p>
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% if category %}{% trans "Update Category" %}{% else %}{% trans "Create Category" %}{% endif %}</h1>
+                <p class="text-blue-100 text-sm">{% if category %}{% trans "Edit standard category" %}{% else %}{% trans "Add new standard category" %}{% endif %}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'standards:category_list' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Categories" %}
+                </a>
+            </div>
         </div>
-        <a href="{% url 'standards:category_list' %}" class="btn btn-outline-secondary">
-            {% action_icon "back" %} {% trans "Back to Categories" %}
-        </a>
     </div>
 
-    <div class="row">
-        <div class="col-12 col-lg-8">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Category Information" %}</h5>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="lg:col-span-2">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-navy/10">
+                        <i data-lucide="tag" class="w-5 h-5 text-navy"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Category Information" %}</h5>
                 </div>
-                <div class="card-body">
+                <div class="p-6">
                     <form method="post">
                         {% csrf_token %}
 
-                        <div class="mb-3">
-                            <label for="{{ form.name.id_for_label }}" class="form-label">
-                                {{ form.name.label }} <span class="text-danger">*</span>
+                        <div class="mb-4">
+                            <label for="{{ form.name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                                {{ form.name.label }} <span class="text-red-500">*</span>
                             </label>
                             {{ form.name }}
                             {% if form.name.errors %}
-                            <div class="text-danger">{{ form.name.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.name.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.name_ar.id_for_label }}" class="form-label">
+                        <div class="mb-4">
+                            <label for="{{ form.name_ar.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {{ form.name_ar.label }}
                             </label>
                             {{ form.name_ar }}
                             {% if form.name_ar.errors %}
-                            <div class="text-danger">{{ form.name_ar.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.name_ar.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.order.id_for_label }}" class="form-label">
-                                {{ form.order.label }} <span class="text-danger">*</span>
+                        <div class="mb-4">
+                            <label for="{{ form.order.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                                {{ form.order.label }} <span class="text-red-500">*</span>
                             </label>
                             {{ form.order }}
-                            <small class="form-text text-muted">
-                                {% trans "Lower numbers appear first in lists" %}
-                            </small>
+                            <p class="mt-1 text-xs text-gray-500">{% trans "Lower numbers appear first in lists" %}</p>
                             {% if form.order.errors %}
-                            <div class="text-danger">{{ form.order.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.order.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.description.id_for_label }}" class="form-label">
+                        <div class="mb-4">
+                            <label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {{ form.description.label }}
                             </label>
                             {{ form.description }}
                             {% if form.description.errors %}
-                            <div class="text-danger">{{ form.description.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.description.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <div class="form-check">
+                        <div class="mb-6">
+                            <label class="flex items-center">
                                 {{ form.is_active }}
-                                <label for="{{ form.is_active.id_for_label }}" class="form-check-label">
-                                    {{ form.is_active.label }}
-                                </label>
-                            </div>
+                                <span class="ml-2 text-sm text-gray-700">{{ form.is_active.label }}</span>
+                            </label>
                         </div>
 
-                        <div class="d-flex gap-2">
-                            <button type="submit" class="btn btn-primary">
-                                {% action_icon "save" %} {% if category %}{% trans "Update Category" %}{% else %}{% trans "Create Category" %}{% endif %}
+                        <div class="flex gap-3">
+                            <button type="submit" class="btn-transition inline-flex items-center px-6 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                                <i data-lucide="save" class="w-4 h-4 me-2"></i>{% if category %}{% trans "Update Category" %}{% else %}{% trans "Create Category" %}{% endif %}
                             </button>
-                            <a href="{% url 'standards:category_list' %}" class="btn btn-secondary">
+                            <a href="{% url 'standards:category_list' %}" class="btn-transition inline-flex items-center px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition">
                                 {% trans "Cancel" %}
                             </a>
                         </div>
@@ -91,25 +148,34 @@
             </div>
         </div>
 
-        <div class="col-12 col-lg-4">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Help" %}</h5>
+        <div class="lg:col-span-1">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-blue/10">
+                        <i data-lucide="help-circle" class="w-5 h-5 text-blue"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Help" %}</h5>
                 </div>
-                <div class="card-body">
-                    <h6>{% trans "Category Order" %}</h6>
-                    <p class="small text-muted">
-                        {% trans "Use the order field to control how categories appear in lists and dropdowns. Lower numbers appear first." %}<br><br>
-                        <strong>{% trans "Example:" %}</strong><br>
-                        1 - Patient Safety<br>
-                        2 - Quality Management<br>
-                        3 - Infection Control
-                    </p>
+                <div class="p-6">
+                    <div class="mb-4">
+                        <h6 class="text-sm font-semibold text-gray-800 mb-2">{% trans "Category Order" %}</h6>
+                        <p class="text-xs text-gray-600 mb-2">
+                            {% trans "Use the order field to control how categories appear in lists and dropdowns. Lower numbers appear first." %}
+                        </p>
+                        <div class="text-xs text-gray-500 space-y-1">
+                            <p><strong>{% trans "Example:" %}</strong></p>
+                            <p class="ml-2">1 - Patient Safety</p>
+                            <p class="ml-2">2 - Quality Management</p>
+                            <p class="ml-2">3 - Infection Control</p>
+                        </div>
+                    </div>
 
-                    <h6 class="mt-3">{% trans "Active Status" %}</h6>
-                    <p class="small text-muted">
-                        {% trans "Only active categories can be used when creating new standards. Inactive categories remain in the system but are not available for selection." %}
-                    </p>
+                    <div>
+                        <h6 class="text-sm font-semibold text-gray-800 mb-2">{% trans "Active Status" %}</h6>
+                        <p class="text-xs text-gray-600">
+                            {% trans "Only active categories can be used when creating new standards. Inactive categories remain in the system but are not available for selection." %}
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -118,21 +184,19 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize form fields with Bootstrap classes
-    var formInputs = document.querySelectorAll('input[type="text"], input[type="number"], select, textarea');
-    for (var i = 0; i < formInputs.length; i++) {
-        if (!formInputs[i].classList.contains('form-control')) {
-            formInputs[i].classList.add('form-control');
+    const formInputs = document.querySelectorAll('input[type="text"], input[type="number"], select, textarea');
+    formInputs.forEach(input => {
+        if (!input.classList.contains('form-control') && input.type !== 'checkbox') {
+            input.classList.add('w-full', 'px-4', 'py-2.5', 'border', 'border-gray-300', 'rounded-lg', 'focus:ring-2', 'focus:ring-navy', 'focus:border-transparent', 'transition');
         }
-    }
+    });
 
-    // Initialize checkboxes with Bootstrap classes
-    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
-    for (var i = 0; i < checkboxes.length; i++) {
-        if (!checkboxes[i].classList.contains('form-check-input')) {
-            checkboxes[i].classList.add('form-check-input');
+    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+    checkboxes.forEach(checkbox => {
+        if (!checkbox.classList.contains('rounded')) {
+            checkbox.classList.add('rounded', 'border-gray-300', 'text-navy', 'focus:ring-navy', 'w-4', 'h-4');
         }
-    }
+    });
 });
 </script>
 {% endblock %}
diff --git a/templates/standards/category_list.html b/templates/standards/category_list.html
index 2032bb0..99836f9 100644
--- a/templates/standards/category_list.html
+++ b/templates/standards/category_list.html
@@ -1,57 +1,145 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
-{% load action_icons %}
+{% load i18n static %}
 
 {% block title %}{% trans "Standard Categories" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% trans "Standard Categories" %}</h1>
-            <p class="text-muted mb-0">{% trans "Manage categories to organize standards" %}</p>
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Standard Categories" %}</h1>
+                <p class="text-blue-100 text-sm">{% trans "Manage categories to organize standards" %}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'standards:category_create' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                    <i data-lucide="plus" class="w-4 h-4 me-2"></i>{% trans "Add Category" %}
+                </a>
+            </div>
         </div>
-        <a href="{% url 'standards:category_create' %}" class="btn btn-primary">
-            {% action_icon "create" %} {% trans "Add Category" %}
-        </a>
     </div>
 
-    <div class="card">
-        <div class="card-body">
+    <div class="section-card">
+        <div class="p-0">
             {% if categories %}
-            <div class="table-responsive">
-                <table class="table table-hover">
-                    <thead>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
                         <tr>
-                            <th width="10%">{% trans "Order" %}</th>
-                            <th>{% trans "Name" %}</th>
-                            <th>{% trans "Arabic Name" %}</th>
-                            <th>{% trans "Description" %}</th>
-                            <th>{% trans "Status" %}</th>
-                            <th>{% trans "Actions" %}</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-20">
+                                {% trans "Order" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Name" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Arabic Name" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Description" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Status" %}
+                            </th>
+                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Actions" %}
+                            </th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="bg-white divide-y divide-gray-200">
                         {% for category in categories %}
-                        <tr>
-                            <td><span class="badge bg-secondary">{{ category.order }}</span></td>
-                            <td><strong>{{ category.name }}</strong></td>
-                            <td>{{ category.name_ar|default:"-" }}</td>
-                            <td class="text-truncate" style="max-width: 200px;">{{ category.description|default:"-" }}</td>
-                            <td>
+                        <tr class="hover:bg-gray-50 transition">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-semibold bg-gray-100 text-gray-700">
+                                    {{ category.order }}
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm font-semibold text-gray-900">{{ category.name }}</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                                {{ category.name_ar|default:"-" }}
+                            </td>
+                            <td class="px-6 py-4">
+                                <div class="text-sm text-gray-600 max-w-xs truncate">{{ category.description|default:"-" }}</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
                                 {% if category.is_active %}
-                                <span class="badge bg-success">{% trans "Active" %}</span>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                                    <i data-lucide="check-circle" class="w-3 h-3 me-1"></i>{% trans "Active" %}
+                                </span>
                                 {% else %}
-                                <span class="badge bg-secondary">{% trans "Inactive" %}</span>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                                    <i data-lucide="minus-circle" class="w-3 h-3 me-1"></i>{% trans "Inactive" %}
+                                </span>
                                 {% endif %}
                             </td>
-                            <td>
-                                <div class="d-flex gap-1">
-                                    <a href="{% url 'standards:category_update' pk=category.pk %}" class="btn btn-sm btn-outline-primary" title="{% trans 'Edit' %}">
-                                        {% action_icon "edit" %}
+                            <td class="px-6 py-4 whitespace-nowrap text-right">
+                                <div class="flex gap-2 justify-end">
+                                    <a href="{% url 'standards:category_update' pk=category.pk %}" 
+                                       class="btn-transition inline-flex items-center px-3 py-1.5 bg-blue-500 text-white text-xs font-medium rounded-lg hover:bg-blue-600 transition"
+                                       title="{% trans 'Edit' %}">
+                                        <i data-lucide="edit-2" class="w-3 h-3"></i>
                                     </a>
-                                    <a href="{% url 'standards:category_delete' pk=category.pk %}" class="btn btn-sm btn-outline-danger" title="{% trans 'Delete' %}">
-                                        {% action_icon "delete" %}
+                                    <a href="{% url 'standards:category_delete' pk=category.pk %}" 
+                                       class="btn-transition inline-flex items-center px-3 py-1.5 bg-red-500 text-white text-xs font-medium rounded-lg hover:bg-red-600 transition"
+                                       title="{% trans 'Delete' %}">
+                                        <i data-lucide="trash-2" class="w-3 h-3"></i>
                                     </a>
                                 </div>
                             </td>
@@ -61,12 +149,12 @@
                 </table>
             </div>
             {% else %}
-            <div class="text-center py-5">
-                <span class="text-muted mb-3 d-block">{% action_icon "folder" size=64 %}</span>
-                <h5>{% trans "No categories found" %}</h5>
-                <p class="text-muted">{% trans "Add your first standard category to organize your standards" %}</p>
-                <a href="{% url 'standards:category_create' %}" class="btn btn-primary">
-                    {% action_icon "create" %} {% trans "Add Category" %}
+            <div class="text-center py-12 text-gray-500">
+                <i data-lucide="folder" class="w-16 h-16 mx-auto mb-4 text-gray-300"></i>
+                <h5 class="text-lg font-semibold text-gray-700 mb-2">{% trans "No categories found" %}</h5>
+                <p class="mb-6">{% trans "Add your first standard category to organize your standards" %}</p>
+                <a href="{% url 'standards:category_create' %}" class="btn-transition inline-flex items-center px-6 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition mx-auto">
+                    <i data-lucide="plus" class="w-4 h-4 me-2"></i>{% trans "Add Category" %}
                 </a>
             </div>
             {% endif %}
diff --git a/templates/standards/compliance_form.html b/templates/standards/compliance_form.html
index 35fdd82..4cc9ae3 100644
--- a/templates/standards/compliance_form.html
+++ b/templates/standards/compliance_form.html
@@ -1,164 +1,248 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
+{% load i18n static %}
 
 {% block title %}{% trans "Update Compliance" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% trans "Update Compliance Assessment" %}</h1>
-            <p class="text-muted mb-0">{{ compliance.standard.code }} - {{ compliance.standard.title }}</p>
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Update Compliance Assessment" %}</h1>
+                <p class="text-blue-100 text-sm">{{ compliance.standard.code }} - {{ compliance.standard.title }}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'standards:department_standards' pk=compliance.department.id %}"
+                   class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Standards" %}
+                </a>
+            </div>
         </div>
-        <a href="{% url 'standards:department_standards' pk=compliance.department.id %}"
-           class="btn btn-outline-secondary">
-            <i class="fas fa-arrow-left me-2"></i>{% trans "Back to Standards" %}
-        </a>
     </div>
 
-    <div class="row">
-        <div class="col-lg-8">
-            <!-- Standard Details -->
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Standard Details" %}</h5>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="lg:col-span-2 space-y-6">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-navy/10">
+                        <i data-lucide="clipboard-list" class="w-5 h-5 text-navy"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Standard Details" %}</h5>
                 </div>
-                <div class="card-body">
-                    <table class="table table-sm">
-                        <tr>
-                            <th width="30%">{% trans "Code" %}</th>
-                            <td>{{ compliance.standard.code }}</td>
-                        </tr>
-                        <tr>
-                            <th>{% trans "Title" %}</th>
-                            <td>{{ compliance.standard.title }}</td>
-                        </tr>
-                        <tr>
-                            <th>{% trans "Source" %}</th>
-                            <td>{{ compliance.standard.source.name }}</td>
-                        </tr>
-                        <tr>
-                            <th>{% trans "Category" %}</th>
-                            <td>{{ compliance.standard.category.name }}</td>
-                        </tr>
-                        <tr>
-                            <th>{% trans "Description" %}</th>
-                            <td>{{ compliance.standard.description|linebreaks }}</td>
-                        </tr>
-                    </table>
+                <div class="p-6">
+                    <dl class="divide-y divide-gray-100">
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Code" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">{{ compliance.standard.code }}</dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Title" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">{{ compliance.standard.title }}</dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Source" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">{{ compliance.standard.source.name }}</dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Category" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">{{ compliance.standard.category.name }}</dd>
+                        </div>
+                        <div class="py-3">
+                            <dt class="text-sm font-medium text-gray-500 mb-2">{% trans "Description" %}</dt>
+                            <dd class="text-sm text-gray-700">{{ compliance.standard.description|linebreaks }}</dd>
+                        </div>
+                    </dl>
                 </div>
             </div>
 
-            <!-- Compliance Form -->
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Compliance Assessment" %}</h5>
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-blue/10">
+                        <i data-lucide="check-square" class="w-5 h-5 text-blue"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Compliance Assessment" %}</h5>
                 </div>
-                <div class="card-body">
+                <div class="p-6">
                     <form method="post">
                         {% csrf_token %}
-                        <div class="mb-3">
-                            <label for="{{ form.status.id_for_label }}" class="form-label">
+                        
+                        <div class="mb-4">
+                            <label for="{{ form.status.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {% trans "Status" %}
                             </label>
                             {{ form.status }}
                             {% if form.status.errors %}
-                            <div class="text-danger">{{ form.status.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.status.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.last_assessed_date.id_for_label }}" class="form-label">
+                        <div class="mb-4">
+                            <label for="{{ form.last_assessed_date.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {% trans "Last Assessed Date" %}
                             </label>
                             {{ form.last_assessed_date }}
                             {% if form.last_assessed_date.errors %}
-                            <div class="text-danger">{{ form.last_assessed_date.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.last_assessed_date.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.assessor.id_for_label }}" class="form-label">
+                        <div class="mb-4">
+                            <label for="{{ form.assessor.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {% trans "Assessor" %}
                             </label>
                             {{ form.assessor }}
                             {% if form.assessor.errors %}
-                            <div class="text-danger">{{ form.assessor.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.assessor.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.notes.id_for_label }}" class="form-label">
+                        <div class="mb-4">
+                            <label for="{{ form.notes.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {% trans "Assessment Notes" %}
                             </label>
                             {{ form.notes }}
                             {% if form.notes.errors %}
-                            <div class="text-danger">{{ form.notes.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.notes.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.evidence_summary.id_for_label }}" class="form-label">
+                        <div class="mb-6">
+                            <label for="{{ form.evidence_summary.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {% trans "Evidence Summary" %}
                             </label>
                             {{ form.evidence_summary }}
                             {% if form.evidence_summary.errors %}
-                            <div class="text-danger">{{ form.evidence_summary.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.evidence_summary.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <button type="submit" class="btn btn-primary">
-                            <i class="fas fa-save me-2"></i>{% trans "Save Assessment" %}
+                        <button type="submit" class="btn-transition inline-flex items-center px-6 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                            <i data-lucide="save" class="w-4 h-4 me-2"></i>{% trans "Save Assessment" %}
                         </button>
                     </form>
                 </div>
             </div>
         </div>
 
-        <div class="col-lg-4">
-            <!-- Department Info -->
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Department" %}</h5>
+        <div class="lg:col-span-1 space-y-6">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-navy/10">
+                        <i data-lucide="building" class="w-5 h-5 text-navy"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Department" %}</h5>
                 </div>
-                <div class="card-body">
-                    <p><strong>{{ compliance.department.name }}</strong></p>
+                <div class="p-6">
+                    <p class="text-sm font-semibold text-gray-900 mb-1">{{ compliance.department.name }}</p>
                     {% if compliance.department.hospital %}
-                    <p class="text-muted mb-0">{{ compliance.department.hospital.name }}</p>
+                    <p class="text-xs text-gray-500">{{ compliance.department.hospital.name }}</p>
                     {% endif %}
                 </div>
             </div>
 
-            <!-- Evidence Attachments -->
-            <div class="card mb-4">
-                <div class="card-header d-flex justify-content-between align-items-center">
-                    <h5 class="card-title mb-0">{% trans "Evidence Attachments" %}</h5>
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-blue/10">
+                        <i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800 flex-1">{% trans "Evidence Attachments" %}</h5>
                     <a href="{% url 'standards:attachment_upload' compliance_id=compliance.id %}"
-                       class="btn btn-sm btn-success">
-                        <i class="fas fa-upload me-1"></i>{% trans "Upload" %}
+                       class="btn-transition inline-flex items-center px-3 py-1.5 bg-green-500 text-white text-xs font-medium rounded-lg hover:bg-green-600 transition">
+                        <i data-lucide="upload" class="w-3 h-3 me-1"></i>{% trans "Upload" %}
                     </a>
                 </div>
-                <div class="card-body">
+                <div class="p-0">
                     {% if compliance.attachments.all %}
-                    <ul class="list-group">
+                    <ul class="divide-y divide-gray-200">
                         {% for attachment in compliance.attachments.all %}
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            <div>
-                                <i class="fas fa-file me-2"></i>
-                                {{ attachment.filename }}
+                        <li class="px-4 py-3 hover:bg-gray-50 transition">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center flex-1 min-w-0">
+                                    <i data-lucide="file" class="w-4 h-4 text-gray-400 flex-shrink-0"></i>
+                                    <span class="ml-2 text-sm font-medium text-gray-900 truncate">{{ attachment.filename }}</span>
+                                </div>
+                                <span class="ml-2 text-xs text-gray-500 flex-shrink-0">
+                                    {{ attachment.uploaded_at|date:"Y-m-d" }}
+                                </span>
                             </div>
-                            <small class="text-muted">
-                                {{ attachment.uploaded_at|date:"Y-m-d" }}
-                            </small>
                         </li>
                         {% endfor %}
                     </ul>
                     {% else %}
-                    <p class="text-muted text-center mb-0">{% trans "No attachments" %}</p>
+                    <div class="text-center py-8 text-gray-500">
+                        <i data-lucide="file-x" class="w-8 h-8 mx-auto mb-2 text-gray-300"></i>
+                        <p class="text-xs">{% trans "No attachments" %}</p>
+                    </div>
                     {% endif %}
                 </div>
             </div>
         </div>
     </div>
 </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const formInputs = document.querySelectorAll('input[type="text"], input[type="date"], select, textarea');
+    formInputs.forEach(input => {
+        if (!input.classList.contains('form-control')) {
+            input.classList.add('w-full', 'px-4', 'py-2.5', 'border', 'border-gray-300', 'rounded-lg', 'focus:ring-2', 'focus:ring-navy', 'focus:border-transparent', 'transition');
+        }
+    });
+});
+</script>
 {% endblock %}
diff --git a/templates/standards/dashboard.html b/templates/standards/dashboard.html
index d3de7e1..5fe3631 100644
--- a/templates/standards/dashboard.html
+++ b/templates/standards/dashboard.html
@@ -1,110 +1,231 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
+{% load i18n static %}
 
 {% block title %}{% trans "Standards Compliance Dashboard" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .stat-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        padding: 1.5rem;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s ease;
+    }
+    .stat-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        border-color: #005696;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% trans "Standards Compliance Dashboard" %}</h1>
-            <p class="text-muted mb-0">{{ hospital.name }}</p>
-        </div>
-        <div>
-            <a href="{% url 'standards:search' %}" class="btn btn-primary">
-                <i class="fas fa-search me-2"></i>{% trans "Search Standards" %}
-            </a>
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Standards Compliance Dashboard" %}</h1>
+                <p class="text-blue-100 text-sm">{{ hospital.name }}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'standards:search' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="search" class="w-4 h-4 me-2"></i>{% trans "Search Standards" %}
+                </a>
+                {% if is_px_admin %}
+                <a href="{% url 'standards:standard_create_global' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                    <i data-lucide="plus" class="w-4 h-4 me-2"></i>{% trans "Create Standard" %}
+                </a>
+                {% endif %}
+            </div>
         </div>
     </div>
 
-    <!-- Statistics Cards -->
-    <div class="row mb-4">
-        <div class="col-md-2 mb-3">
-            <div class="card bg-info text-white h-100">
-                <div class="card-body">
-                    <h6 class="card-title">{% trans "Total Standards" %}</h6>
-                    <h2 class="mb-0">{{ stats.total_standards }}</h2>
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
+        <div class="stat-card">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center">
+                        <i data-lucide="clipboard-list" class="w-6 h-6 text-blue-600"></i>
+                    </div>
+                </div>
+                <div class="ml-3">
+                    <h6 class="text-slate-500 text-xs font-medium mb-1">{% trans "Total" %}</h6>
+                    <h2 class="text-2xl font-bold text-gray-800">{{ stats.total_standards }}</h2>
                 </div>
             </div>
         </div>
-        <div class="col-md-2 mb-3">
-            <div class="card bg-success text-white h-100">
-                <div class="card-body">
-                    <h6 class="card-title">{% trans "Met" %}</h6>
-                    <h2 class="mb-0">{{ stats.met }}</h2>
+
+        <div class="stat-card">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <div class="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center">
+                        <i data-lucide="check-circle" class="w-6 h-6 text-green-600"></i>
+                    </div>
+                </div>
+                <div class="ml-3">
+                    <h6 class="text-slate-500 text-xs font-medium mb-1">{% trans "Met" %}</h6>
+                    <h2 class="text-2xl font-bold text-green-600">{{ stats.met }}</h2>
                 </div>
             </div>
         </div>
-        <div class="col-md-2 mb-3">
-            <div class="card bg-warning text-dark h-100">
-                <div class="card-body">
-                    <h6 class="card-title">{% trans "Partially Met" %}</h6>
-                    <h2 class="mb-0">{{ stats.partially_met }}</h2>
+
+        <div class="stat-card">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <div class="w-12 h-12 bg-yellow-500/10 rounded-xl flex items-center justify-center">
+                        <i data-lucide="alert-circle" class="w-6 h-6 text-yellow-600"></i>
+                    </div>
+                </div>
+                <div class="ml-3">
+                    <h6 class="text-slate-500 text-xs font-medium mb-1">{% trans "Partial" %}</h6>
+                    <h2 class="text-2xl font-bold text-yellow-600">{{ stats.partially_met }}</h2>
                 </div>
             </div>
         </div>
-        <div class="col-md-2 mb-3">
-            <div class="card bg-danger text-white h-100">
-                <div class="card-body">
-                    <h6 class="card-title">{% trans "Not Met" %}</h6>
-                    <h2 class="mb-0">{{ stats.not_met }}</h2>
+
+        <div class="stat-card">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <div class="w-12 h-12 bg-red-500/10 rounded-xl flex items-center justify-center">
+                        <i data-lucide="x-circle" class="w-6 h-6 text-red-600"></i>
+                    </div>
+                </div>
+                <div class="ml-3">
+                    <h6 class="text-slate-500 text-xs font-medium mb-1">{% trans "Not Met" %}</h6>
+                    <h2 class="text-2xl font-bold text-red-600">{{ stats.not_met }}</h2>
                 </div>
             </div>
         </div>
-        <div class="col-md-2 mb-3">
-            <div class="card bg-secondary text-white h-100">
-                <div class="card-body">
-                    <h6 class="card-title">{% trans "Not Assessed" %}</h6>
-                    <h2 class="mb-0">{{ stats.not_assessed }}</h2>
+
+        <div class="stat-card">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <div class="w-12 h-12 bg-slate-500/10 rounded-xl flex items-center justify-center">
+                        <i data-lucide="help-circle" class="w-6 h-6 text-slate-600"></i>
+                    </div>
+                </div>
+                <div class="ml-3">
+                    <h6 class="text-slate-500 text-xs font-medium mb-1">{% trans "Not Assessed" %}</h6>
+                    <h2 class="text-2xl font-bold text-slate-600">{{ stats.not_assessed }}</h2>
                 </div>
             </div>
         </div>
-        <div class="col-md-2 mb-3">
-            <div class="card bg-primary text-white h-100">
-                <div class="card-body">
-                    <h6 class="card-title">{% trans "Departments" %}</h6>
-                    <h2 class="mb-0">{{ stats.total_departments }}</h2>
+
+        <div class="stat-card">
+            <div class="flex items-center">
+                <div class="flex-shrink-0">
+                    <div class="w-12 h-12 bg-navy/10 rounded-xl flex items-center justify-center">
+                        <i data-lucide="building" class="w-6 h-6 text-navy"></i>
+                    </div>
+                </div>
+                <div class="ml-3">
+                    <h6 class="text-slate-500 text-xs font-medium mb-1">{% trans "Departments" %}</h6>
+                    <h2 class="text-2xl font-bold text-gray-800">{{ stats.total_departments }}</h2>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Departments List -->
-    <div class="card mb-4">
-        <div class="card-header">
-            <h5 class="card-title mb-0">{% trans "Departments" %}</h5>
+    <div class="section-card mb-6">
+        <div class="section-header">
+            <div class="section-icon bg-navy/10">
+                <i data-lucide="building-2" class="w-5 h-5 text-navy"></i>
+            </div>
+            <h5 class="text-lg font-semibold text-gray-800">{% trans "Departments" %}</h5>
         </div>
-        <div class="card-body">
-            <div class="table-responsive">
-                <table class="table table-hover">
-                    <thead>
+        <div class="p-0">
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
                         <tr>
-                            <th>{% trans "Department" %}</th>
-                            <th>{% trans "Status" %}</th>
-                            <th>{% trans "Actions" %}</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Department" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Status" %}
+                            </th>
+                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Actions" %}
+                            </th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="bg-white divide-y divide-gray-200">
                         {% for department in departments %}
-                        <tr>
-                            <td>{{ department.name }}</td>
-                            <td>
-                                <span class="badge bg-info">
-                                    <i class="fas fa-folder-open me-1"></i>
+                        <tr class="hover:bg-gray-50 transition">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm font-medium text-gray-900">{{ department.name }}</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                    <i data-lucide="folder-open" class="w-3 h-3 me-1"></i>
                                     {% trans "View Standards" %}
                                 </span>
                             </td>
-                            <td>
+                            <td class="px-6 py-4 whitespace-nowrap text-right">
                                 <a href="{% url 'standards:department_standards' pk=department.id %}"
-                                   class="btn btn-sm btn-primary">
-                                    <i class="fas fa-list me-1"></i>{% trans "View" %}
+                                   class="btn-transition inline-flex items-center px-3 py-1.5 bg-navy text-white text-xs font-medium rounded-lg hover:bg-blue transition">
+                                    <i data-lucide="list" class="w-3 h-3 me-1"></i>{% trans "View" %}
                                 </a>
                             </td>
                         </tr>
                         {% empty %}
                         <tr>
-                            <td colspan="3" class="text-center text-muted">
-                                {% trans "No departments found" %}
+                            <td colspan="3" class="px-6 py-12 text-center text-gray-500">
+                                <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
+                                <p>{% trans "No departments found" %}</p>
                             </td>
                         </tr>
                         {% endfor %}
@@ -114,41 +235,74 @@
         </div>
     </div>
 
-    <!-- Recent Updates -->
-    <div class="card">
-        <div class="card-header">
-            <h5 class="card-title mb-0">{% trans "Recent Compliance Updates" %}</h5>
+    <div class="section-card">
+        <div class="section-header">
+            <div class="section-icon bg-blue/10">
+                <i data-lucide="clock" class="w-5 h-5 text-blue"></i>
+            </div>
+            <h5 class="text-lg font-semibold text-gray-800">{% trans "Recent Compliance Updates" %}</h5>
         </div>
-        <div class="card-body">
+        <div class="p-0">
             {% if recent_updates %}
-            <div class="table-responsive">
-                <table class="table table-sm">
-                    <thead>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
                         <tr>
-                            <th>{% trans "Standard" %}</th>
-                            <th>{% trans "Department" %}</th>
-                            <th>{% trans "Status" %}</th>
-                            <th>{% trans "Last Updated" %}</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Standard" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Department" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Status" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Last Updated" %}
+                            </th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="bg-white divide-y divide-gray-200">
                         {% for update in recent_updates %}
-                        <tr>
-                            <td>{{ update.standard.code }}</td>
-                            <td>{{ update.department.name }}</td>
-                            <td>
-                                <span class="badge {% if update.status == 'met' %}bg-success{% elif update.status == 'partially_met' %}bg-warning{% elif update.status == 'not_met' %}bg-danger{% else %}bg-secondary{% endif %}">
-                                    {{ update.get_status_display }}
-                                </span>
+                        <tr class="hover:bg-gray-50 transition">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm font-medium text-gray-900">{{ update.standard.code }}</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm text-gray-600">{{ update.department.name }}</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                {% if update.status == 'met' %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                                    <i data-lucide="check-circle" class="w-3 h-3 me-1"></i>{{ update.get_status_display }}
+                                </span>
+                                {% elif update.status == 'partially_met' %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+                                    <i data-lucide="alert-circle" class="w-3 h-3 me-1"></i>{{ update.get_status_display }}
+                                </span>
+                                {% elif update.status == 'not_met' %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                                    <i data-lucide="x-circle" class="w-3 h-3 me-1"></i>{{ update.get_status_display }}
+                                </span>
+                                {% else %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                                    <i data-lucide="help-circle" class="w-3 h-3 me-1"></i>{{ update.get_status_display }}
+                                </span>
+                                {% endif %}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                {{ update.updated_at|date:"Y-m-d H:i" }}
                             </td>
-                            <td>{{ update.updated_at|date:"Y-m-d H:i" }}</td>
                         </tr>
                         {% endfor %}
                     </tbody>
                 </table>
             </div>
             {% else %}
-            <p class="text-muted text-center">{% trans "No recent updates" %}</p>
+            <div class="text-center py-12 text-gray-500">
+                <i data-lucide="clock" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
+                <p>{% trans "No recent updates" %}</p>
+            </div>
             {% endif %}
         </div>
     </div>
diff --git a/templates/standards/department_standards.html b/templates/standards/department_standards.html
index cffbe5a..6cacf32 100644
--- a/templates/standards/department_standards.html
+++ b/templates/standards/department_standards.html
@@ -1,101 +1,196 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
+{% load i18n static %}
 {% load standards_filters %}
-{% load action_icons %}
 
 {% block title %}{% trans "Department Standards" %} - {{ department.name }}{% endblock %}
 
-{% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{{ department.name }}</h1>
-            <p class="text-muted mb-0">{% trans "Standards Compliance" %}</p>
-        </div>
-        <div class="d-flex gap-2">
-            {% if is_px_admin %}
-            <a href="{% url 'standards:standard_create' department_id=department.id %}" class="btn btn-primary">
-                {% action_icon "create" %} {% trans "Add Standard" %}
-            </a>
-            {% endif %}
-            <a href="{% url 'standards:dashboard' %}" class="btn btn-outline-secondary">
-                {% action_icon "back" %} {% trans "Back to Dashboard" %}
-            </a>
-        </div>
-    </div>
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
 
-    <!-- Search -->
-    <div class="card mb-4">
-        <div class="card-body">
-            <div class="row">
-                <div class="col-md-12">
-                    <input type="text" class="form-control" id="searchInput"
-                           placeholder="{% trans 'Search standards...' %}">
-                </div>
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<!-- CSRF token for AJAX requests -->
+<meta name="csrf-token" content="{{ csrf_token }}">
+<script>
+window.CSRF_TOKEN = '{{ csrf_token }}';
+</script>
+
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{{ department.name }}</h1>
+                <p class="text-blue-100 text-sm">{% trans "Standards Compliance" %}</p>
+            </div>
+            <div class="flex gap-2">
+                {% if is_px_admin %}
+                <a href="{% url 'standards:standard_create' department_id=department.id %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                    <i data-lucide="plus" class="w-4 h-4 me-2"></i>{% trans "Add Standard" %}
+                </a>
+                {% endif %}
+                <a href="{% url 'standards:dashboard' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Dashboard" %}
+                </a>
             </div>
         </div>
     </div>
 
-    <!-- Standards Table -->
-    <div class="card">
-        <div class="card-header">
-            <h5 class="card-title mb-0">{% trans "Standards List" %}</h5>
+    <div class="section-card mb-6">
+        <div class="p-6">
+            <div class="relative">
+                <i data-lucide="search" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
+                <input type="text" 
+                       class="w-full pl-12 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy focus:border-transparent transition"
+                       id="searchInput"
+                       placeholder="{% trans 'Search standards...' %}">
+            </div>
         </div>
-        <div class="card-body">
-            <div class="table-responsive">
-                <table class="table table-hover" id="standardsTable">
-                    <thead>
+    </div>
+
+    <div class="section-card">
+        <div class="section-header">
+            <div class="section-icon bg-navy/10">
+                <i data-lucide="clipboard-list" class="w-5 h-5 text-navy"></i>
+            </div>
+            <h5 class="text-lg font-semibold text-gray-800">{% trans "Standards List" %}</h5>
+        </div>
+        <div class="p-0">
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200" id="standardsTable">
+                    <thead class="bg-gray-50">
                         <tr>
-                            <th>{% trans "Code" %}</th>
-                            <th>{% trans "Title" %}</th>
-                            <th>{% trans "Status" %}</th>
-                            <th>{% trans "Evidence" %}</th>
-                            <th>{% trans "Actions" %}</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Code" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Title" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Status" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Evidence" %}
+                            </th>
+                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Actions" %}
+                            </th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="bg-white divide-y divide-gray-200">
                         {% for item in standards_data %}
-                        <tr data-standard-id="{{ item.standard.id }}"
+                        <tr class="hover:bg-gray-50 transition" 
+                            data-standard-id="{{ item.standard.id }}"
                             data-compliance-id="{% if item.compliance %}{{ item.compliance.id }}{% endif %}">
-                            <td><strong>{{ item.standard.code }}</strong></td>
-                            <td>
-                                <a href="{% url 'standards:standard_detail' pk=item.standard.id %}">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-semibold bg-navy/10 text-navy">
+                                    {{ item.standard.code }}
+                                </span>
+                            </td>
+                            <td class="px-6 py-4">
+                                <a href="{% url 'standards:standard_detail' pk=item.standard.id %}" class="text-sm font-medium text-gray-900 hover:text-navy transition">
                                     {{ item.standard.title }}
                                 </a>
                             </td>
-                            <td>
+                            <td class="px-6 py-4 whitespace-nowrap">
                                 {% if item.compliance %}
-                                <span class="badge {% if item.compliance.status == 'met' %}bg-success{% elif item.compliance.status == 'partially_met' %}bg-warning{% elif item.compliance.status == 'not_met' %}bg-danger{% else %}bg-secondary{% endif %}">
-                                    {{ item.compliance.get_status_display }}
-                                </span>
+                                    {% if item.compliance.status == 'met' %}
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                                        <i data-lucide="check-circle" class="w-3 h-3 me-1"></i>{{ item.compliance.get_status_display }}
+                                    </span>
+                                    {% elif item.compliance.status == 'partially_met' %}
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+                                        <i data-lucide="alert-circle" class="w-3 h-3 me-1"></i>{{ item.compliance.get_status_display }}
+                                    </span>
+                                    {% elif item.compliance.status == 'not_met' %}
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                                        <i data-lucide="x-circle" class="w-3 h-3 me-1"></i>{{ item.compliance.get_status_display }}
+                                    </span>
+                                    {% else %}
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                                        <i data-lucide="help-circle" class="w-3 h-3 me-1"></i>{{ item.compliance.get_status_display }}
+                                    </span>
+                                    {% endif %}
                                 {% else %}
-                                <span class="badge bg-secondary">{% trans "Not Assessed" %}</span>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                                    <i data-lucide="help-circle" class="w-3 h-3 me-1"></i>{% trans "Not Assessed" %}
+                                </span>
                                 {% endif %}
                             </td>
-                            <td>
-                                <span class="badge bg-info">
-                                    {% action_icon "attachment" %}
-                                    {{ item.attachment_count }}
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                    <i data-lucide="file-text" class="w-3 h-3 me-1"></i>{{ item.attachment_count }}
                                 </span>
                             </td>
-                            <td>
+                            <td class="px-6 py-4 whitespace-nowrap text-right">
                                 {% if item.compliance %}
-                                <button class="btn btn-sm btn-primary"
+                                <button class="btn-transition inline-flex items-center px-3 py-1.5 bg-navy text-white text-xs font-medium rounded-lg hover:bg-blue transition"
                                         onclick="openAssessModal('{{ item.compliance.id }}')">
-                                    {% action_icon "edit" %} {% trans "Assess" %}
+                                    <i data-lucide="edit-2" class="w-3 h-3 me-1"></i>{% trans "Assess" %}
                                 </button>
                                 {% else %}
-                                <button class="btn btn-sm btn-success"
+                                <button class="btn-transition inline-flex items-center px-3 py-1.5 bg-green-500 text-white text-xs font-medium rounded-lg hover:bg-green-600 transition"
                                         onclick="createAndAssess('{{ item.standard.id }}')">
-                                    {% action_icon "create" %} {% trans "Assess" %}
+                                    <i data-lucide="plus" class="w-3 h-3 me-1"></i>{% trans "Assess" %}
                                 </button>
                                 {% endif %}
                             </td>
                         </tr>
                         {% empty %}
                         <tr>
-                            <td colspan="5" class="text-center text-muted">
-                                {% trans "No standards found" %}
+                            <td colspan="5" class="px-6 py-12 text-center text-gray-500">
+                                <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
+                                <p>{% trans "No standards found" %}</p>
                             </td>
                         </tr>
                         {% endfor %}
@@ -106,105 +201,94 @@
     </div>
 </div>
 
-<!-- Compliance Assessment Modal -->
-<div class="modal fade" id="assessmentModal" tabindex="-1">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">{% trans "Compliance Assessment" %}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-            </div>
-            <form id="assessmentForm">
-                <div class="modal-body">
-                    <input type="hidden" id="complianceId" name="compliance_id">
-
-                    <div class="mb-3">
-                        <label for="status" class="form-label">
-                            {% trans "Compliance Status" %} <span class="text-danger">*</span>
-                        </label>
-                        <select class="form-select" id="status" name="status" required>
-                            <option value="not_assessed">{% trans "Not Assessed" %}</option>
-                            <option value="met">{% trans "Met" %}</option>
-                            <option value="partially_met">{% trans "Partially Met" %}</option>
-                            <option value="not_met">{% trans "Not Met" %}</option>
-                        </select>
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="last_assessed_date" class="form-label">
-                            {% trans "Assessment Date" %}
-                        </label>
-                        <input type="date" class="form-control" id="last_assessed_date" name="last_assessed_date">
-                        <small class="form-text text-muted">
-                            {% trans "Auto-filled with today's date" %}
-                        </small>
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="assessor" class="form-label">{% trans "Assessor" %}</label>
-                        <input type="text" class="form-control" id="assessor" name="assessor" readonly>
-                        <input type="hidden" id="assessor_id" name="assessor_id" value="{{ user.id }}">
-                        <small class="form-text text-muted">
-                            {% trans "Current logged-in user" %}
-                        </small>
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="notes" class="form-label">{% trans "Notes" %}</label>
-                        <textarea class="form-control" id="notes" name="notes" rows="3"
-                                  placeholder="{% trans 'Add any notes about the assessment...' %}"></textarea>
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="evidence_summary" class="form-label">{% trans "Evidence Summary" %}</label>
-                        <textarea class="form-control" id="evidence_summary" name="evidence_summary" rows="3"
-                                  placeholder="{% trans 'Summarize the evidence supporting this assessment...' %}"></textarea>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
-                        {% trans "Cancel" %}
-                    </button>
-                    <button type="submit" class="btn btn-primary">
-                        {% action_icon "save" %} {% trans "Save Assessment" %}
-                    </button>
-                </div>
-            </form>
+<!-- Compliance Assessment Modal (Tailwind) -->
+<div class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50" id="assessmentModal">
+    <div class="bg-white rounded-2xl shadow-2xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
+        <!-- Modal Header -->
+        <div class="flex justify-between items-center p-6 border-b border-gray-200">
+            <h5 class="text-xl font-bold text-gray-900">{% trans "Compliance Assessment" %}</h5>
+            <button type="button" class="text-gray-400 hover:text-gray-600 transition" onclick="closeModal('assessmentModal')">
+                <i data-lucide="x" class="w-6 h-6"></i>
+            </button>
         </div>
+        
+        <!-- Modal Body -->
+        <form id="assessmentForm">
+            <div class="p-6 space-y-4">
+                <input type="hidden" id="complianceId" name="compliance_id">
+
+                <div>
+                    <label for="status" class="block text-sm font-medium text-gray-700 mb-2">
+                        {% trans "Compliance Status" %} <span class="text-red-500">*</span>
+                    </label>
+                    <select class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy focus:border-transparent transition" id="status" name="status" required>
+                        <option value="not_assessed">{% trans "Not Assessed" %}</option>
+                        <option value="met">{% trans "Met" %}</option>
+                        <option value="partially_met">{% trans "Partially Met" %}</option>
+                        <option value="not_met">{% trans "Not Met" %}</option>
+                    </select>
+                </div>
+
+                <div>
+                    <label for="last_assessed_date" class="block text-sm font-medium text-gray-700 mb-2">
+                        {% trans "Assessment Date" %}
+                    </label>
+                    <input type="date" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy focus:border-transparent transition" id="last_assessed_date" name="last_assessed_date">
+                    <p class="mt-1 text-xs text-gray-500">{% trans "Auto-filled with today's date" %}</p>
+                </div>
+
+                <div>
+                    <label for="assessor" class="block text-sm font-medium text-gray-700 mb-2">{% trans "Assessor" %}</label>
+                    <input type="text" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg bg-gray-50 text-gray-600 transition" id="assessor" name="assessor" readonly>
+                    <input type="hidden" id="assessor_id" name="assessor_id" value="{{ user.id }}">
+                    <p class="mt-1 text-xs text-gray-500">{% trans "Current logged-in user" %}</p>
+                </div>
+
+                <div>
+                    <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">{% trans "Notes" %}</label>
+                    <textarea class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy focus:border-transparent transition" id="notes" name="notes" rows="3"
+                              placeholder="{% trans 'Add any notes about the assessment...' %}"></textarea>
+                </div>
+
+                <div>
+                    <label for="evidence_summary" class="block text-sm font-medium text-gray-700 mb-2">{% trans "Evidence Summary" %}</label>
+                    <textarea class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy focus:border-transparent transition" id="evidence_summary" name="evidence_summary" rows="3"
+                              placeholder="{% trans 'Summarize the evidence supporting this assessment...' %}"></textarea>
+                </div>
+            </div>
+            
+            <!-- Modal Footer -->
+            <div class="flex justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50 rounded-b-2xl">
+                <button type="button" class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition" onclick="closeModal('assessmentModal')">
+                    {% trans "Cancel" %}
+                </button>
+                <button type="submit" class="px-6 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition inline-flex items-center">
+                    <i data-lucide="save" class="w-4 h-4 me-2"></i>{% trans "Save Assessment" %}
+                </button>
+            </div>
+        </form>
     </div>
 </div>
 
 <script>
-// User data from template
 const userData = {
     id: '{{ user.id }}',
-    username: "{{ user.username }}",
-    fullName: "{% if user.get_full_name %}{{ user.get_full_name }}{% else %}{{ user.username }}{% endif %}"
+    username: "{{ user.username|escapejs }}",
+    fullName: "{% if user.get_full_name %}{{ user.get_full_name|escapejs }}{% else %}{{ user.username|escapejs }}{% endif %}"
 };
 
-let modalInstance = null;
-
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize Bootstrap modal
-    const modalElement = document.getElementById('assessmentModal');
-    if (modalElement) {
-        modalInstance = new bootstrap.Modal(modalElement);
-    }
-
-    // Set today's date
     const today = new Date().toISOString().split('T')[0];
     const dateInput = document.getElementById('last_assessed_date');
     if (dateInput) {
         dateInput.value = today;
     }
 
-    // Set assessor field
     const assessorInput = document.getElementById('assessor');
     if (assessorInput) {
         assessorInput.value = userData.fullName;
     }
 
-    // Filter functionality
     const searchInput = document.getElementById('searchInput');
     const table = document.getElementById('standardsTable');
 
@@ -226,7 +310,6 @@ document.addEventListener('DOMContentLoaded', function() {
 
     searchInput.addEventListener('input', filterTable);
 
-    // Form submission
     const form = document.getElementById('assessmentForm');
     if (form) {
         form.addEventListener('submit', function(e) {
@@ -251,8 +334,27 @@ function getCookie(name) {
     return cookieValue;
 }
 
+function showModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.classList.remove('hidden');
+        // Reinitialize Lucide icons
+        setTimeout(() => {
+            if (typeof lucide !== 'undefined') {
+                lucide.createIcons();
+            }
+        }, 100);
+    }
+}
+
+function closeModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.classList.add('hidden');
+    }
+}
+
 function createAndAssess(standardId) {
-    // Create compliance record first
     const data = {
         standard_id: standardId,
         department_id: '{{ department.id }}'
@@ -260,36 +362,41 @@ function createAndAssess(standardId) {
 
     console.log('Creating compliance:', data);
 
-    fetch(`/standards/api/compliance/create/`, {
+    fetch('{% url "standards:compliance_create_ajax" %}', {
         method: 'POST',
         headers: {
-            'X-CSRFToken': getCookie('csrftoken'),
+            'X-CSRFToken': window.CSRF_TOKEN || getCookie('csrftoken'),
             'Content-Type': 'application/json',
         },
         body: JSON.stringify(data)
     })
     .then(response => {
         console.log('Response status:', response.status);
+        if (!response.ok) {
+            return response.text().then(text => {
+                console.error('Error response:', text);
+                throw new Error('Server error: ' + response.status);
+            });
+        }
         return response.json();
     })
     .then(data => {
         console.log('Response data:', data);
         if (data.success) {
-            // Open modal with new compliance ID
             openAssessModal(data.compliance_id);
         } else {
-            alert('Error creating compliance record: ' + (data.error || ''));
+            alert('{% trans "Error creating compliance record:" %} ' + (data.error || '{% trans "Unknown error" %}'));
         }
     })
     .catch(error => {
         console.error('Error:', error);
-        alert('Error creating compliance record: ' + error);
+        alert('{% trans "Error creating compliance record:" %} ' + error.message);
     });
 }
 
 function openAssessModal(complianceId) {
     document.getElementById('complianceId').value = complianceId;
-    modalInstance.show();
+    showModal('assessmentModal');
 }
 
 function submitAssessment() {
@@ -304,7 +411,7 @@ function submitAssessment() {
     const assessor_id = document.getElementById('assessor_id').value;
 
     if (!compliance_id || !status) {
-        alert('Missing required fields');
+        alert('{% trans "Missing required fields" %}');
         return;
     }
 
@@ -319,32 +426,44 @@ function submitAssessment() {
 
     console.log('Submitting assessment:', data);
 
-    fetch(`/standards/api/compliance/update/`, {
+    fetch('{% url "standards:compliance_update_ajax" %}', {
         method: 'POST',
         headers: {
-            'X-CSRFToken': getCookie('csrftoken'),
+            'X-CSRFToken': window.CSRF_TOKEN || getCookie('csrftoken'),
             'Content-Type': 'application/json',
         },
         body: JSON.stringify(data)
     })
     .then(response => {
         console.log('Response status:', response.status);
+        if (!response.ok) {
+            return response.text().then(text => {
+                console.error('Error response:', text);
+                throw new Error('Server error: ' + response.status);
+            });
+        }
         return response.json();
     })
     .then(data => {
         console.log('Response data:', data);
         if (data.success) {
-            modalInstance.hide();
-            // Reload page to show updated status
+            closeModal('assessmentModal');
             location.reload();
         } else {
-            alert('Error updating compliance: ' + (data.error || ''));
+            alert('{% trans "Error updating compliance:" %} ' + (data.error || '{% trans "Unknown error" %}'));
         }
     })
     .catch(error => {
         console.error('Error:', error);
-        alert('Error updating compliance: ' + error);
+        alert('{% trans "Error updating compliance:" %} ' + error.message);
     });
 }
+
+// Close modal when clicking outside
+document.addEventListener('click', function(e) {
+    if (e.target && e.target.id === 'assessmentModal') {
+        closeModal('assessmentModal');
+    }
+});
 </script>
 {% endblock %}
diff --git a/templates/standards/search.html b/templates/standards/search.html
index e8647ed..9c5b60b 100644
--- a/templates/standards/search.html
+++ b/templates/standards/search.html
@@ -1,32 +1,107 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
+{% load i18n static %}
 
 {% block title %}{% trans "Search Standards" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% trans "Search Standards" %}</h1>
-            <p class="text-muted mb-0">{{ hospital.name }}</p>
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Search Standards" %}</h1>
+                <p class="text-blue-100 text-sm">{{ hospital.name }}</p>
+            </div>
+            <div class="flex gap-2">
+                {% if is_px_admin %}
+                <a href="{% url 'standards:standard_create_global' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                    <i data-lucide="plus" class="w-4 h-4 me-2"></i>{% trans "Create Standard" %}
+                </a>
+                {% endif %}
+                <a href="{% url 'standards:dashboard' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Dashboard" %}
+                </a>
+            </div>
         </div>
-        <a href="{% url 'standards:dashboard' %}" class="btn btn-outline-secondary">
-            <i class="fas fa-arrow-left me-2"></i>{% trans "Back to Dashboard" %}
-        </a>
     </div>
 
-    <!-- Search Form -->
-    <div class="card mb-4">
-        <div class="card-body">
-            <form method="get" class="row g-3">
-                <div class="col-md-6">
-                    <label for="q" class="form-label">{% trans "Search" %}</label>
-                    <input type="text" class="form-control" name="q" id="q"
-                           value="{{ query }}" placeholder="{% trans 'Search by code, title, or description...' %}">
+    <div class="section-card mb-6">
+        <div class="section-header">
+            <div class="section-icon bg-navy/10">
+                <i data-lucide="search" class="w-5 h-5 text-navy"></i>
+            </div>
+            <h5 class="text-lg font-semibold text-gray-800">{% trans "Search Filters" %}</h5>
+        </div>
+        <div class="p-6">
+            <form method="get" class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <div class="md:col-span-2">
+                    <label for="q" class="block text-sm font-medium text-gray-700 mb-2">{% trans "Search" %}</label>
+                    <input type="text" 
+                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy focus:border-transparent transition"
+                           name="q" 
+                           id="q"
+                           value="{{ query }}" 
+                           placeholder="{% trans 'Search by code, title, or description...' %}">
                 </div>
-                <div class="col-md-3">
-                    <label for="source" class="form-label">{% trans "Source" %}</label>
-                    <select class="form-select" name="source" id="source">
+                <div>
+                    <label for="source" class="block text-sm font-medium text-gray-700 mb-2">{% trans "Source" %}</label>
+                    <select class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy focus:border-transparent transition" 
+                            name="source" 
+                            id="source">
                         <option value="">{% trans "All Sources" %}</option>
                         {% for source in sources %}
                         <option value="{{ source.id }}" {% if source_filter == source.id|stringformat:"s" %}selected{% endif %}>
@@ -35,9 +110,11 @@
                         {% endfor %}
                     </select>
                 </div>
-                <div class="col-md-3">
-                    <label for="category" class="form-label">{% trans "Category" %}</label>
-                    <select class="form-select" name="category" id="category">
+                <div>
+                    <label for="category" class="block text-sm font-medium text-gray-700 mb-2">{% trans "Category" %}</label>
+                    <select class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-navy focus:border-transparent transition" 
+                            name="category" 
+                            id="category">
                         <option value="">{% trans "All Categories" %}</option>
                         {% for category in categories %}
                         <option value="{{ category.id }}" {% if category_filter == category.id|stringformat:"s" %}selected{% endif %}>
@@ -46,11 +123,11 @@
                         {% endfor %}
                     </select>
                 </div>
-                <div class="col-12">
-                    <button type="submit" class="btn btn-primary">
-                        <i class="fas fa-search me-2"></i>{% trans "Search" %}
+                <div class="md:col-span-4 flex gap-3">
+                    <button type="submit" class="btn-transition inline-flex items-center px-6 py-2.5 bg-navy text-white font-medium rounded-xl hover:bg-blue transition">
+                        <i data-lucide="search" class="w-4 h-4 me-2"></i>{% trans "Search" %}
                     </button>
-                    <a href="{% url 'standards:search' %}" class="btn btn-outline-secondary ms-2">
+                    <a href="{% url 'standards:search' %}" class="btn-transition inline-flex items-center px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition">
                         {% trans "Clear" %}
                     </a>
                 </div>
@@ -58,10 +135,12 @@
         </div>
     </div>
 
-    <!-- Results -->
-    <div class="card">
-        <div class="card-header">
-            <h5 class="card-title mb-0">
+    <div class="section-card">
+        <div class="section-header">
+            <div class="section-icon bg-blue/10">
+                <i data-lucide="clipboard-list" class="w-5 h-5 text-blue"></i>
+            </div>
+            <h5 class="text-lg font-semibold text-gray-800">
                 {% if query or source_filter or category_filter %}
                 {% trans "Search Results" %} ({{ standards.count }})
                 {% else %}
@@ -69,42 +148,62 @@
                 {% endif %}
             </h5>
         </div>
-        <div class="card-body">
+        <div class="p-0">
             {% if standards %}
-            <div class="table-responsive">
-                <table class="table table-hover">
-                    <thead>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
                         <tr>
-                            <th>{% trans "Code" %}</th>
-                            <th>{% trans "Title" %}</th>
-                            <th>{% trans "Source" %}</th>
-                            <th>{% trans "Category" %}</th>
-                            <th>{% trans "Department" %}</th>
-                            <th>{% trans "Actions" %}</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Code" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Title" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Source" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Category" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Department" %}
+                            </th>
+                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Actions" %}
+                            </th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="bg-white divide-y divide-gray-200">
                         {% for standard in standards %}
-                        <tr>
-                            <td><strong>{{ standard.code }}</strong></td>
-                            <td>
-                                <a href="{% url 'standards:standard_detail' pk=standard.id %}">
+                        <tr class="hover:bg-gray-50 transition">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-semibold bg-navy/10 text-navy">
+                                    {{ standard.code }}
+                                </span>
+                            </td>
+                            <td class="px-6 py-4">
+                                <a href="{% url 'standards:standard_detail' pk=standard.id %}" class="text-sm font-medium text-gray-900 hover:text-navy transition">
                                     {{ standard.title }}
                                 </a>
                             </td>
-                            <td>{{ standard.source.name }}</td>
-                            <td>{{ standard.category.name }}</td>
-                            <td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                                {{ standard.source.name }}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                                {{ standard.category.name }}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                 {% if standard.department %}
                                 {{ standard.department.name }}
                                 {% else %}
-                                <em>{% trans "All Departments" %}</em>
+                                <span class="text-gray-400 italic">{% trans "All Departments" %}</span>
                                 {% endif %}
                             </td>
-                            <td>
+                            <td class="px-6 py-4 whitespace-nowrap text-right">
                                 <a href="{% url 'standards:standard_detail' pk=standard.id %}"
-                                   class="btn btn-sm btn-primary">
-                                    <i class="fas fa-eye me-1"></i>{% trans "View" %}
+                                   class="btn-transition inline-flex items-center px-3 py-1.5 bg-navy text-white text-xs font-medium rounded-lg hover:bg-blue transition">
+                                    <i data-lucide="eye" class="w-3 h-3 me-1"></i>{% trans "View" %}
                                 </a>
                             </td>
                         </tr>
@@ -113,12 +212,12 @@
                 </table>
             </div>
             {% else %}
-            <div class="text-center py-5">
-                <i class="fas fa-search fa-3x text-muted mb-3"></i>
-                <p class="text-muted">{% trans "No standards found" %}</p>
+            <div class="text-center py-12 text-gray-500">
+                <i data-lucide="search-x" class="w-16 h-16 mx-auto mb-4 text-gray-300"></i>
+                <p class="text-lg mb-4">{% trans "No standards found" %}</p>
                 {% if query or source_filter or category_filter %}
-                <a href="{% url 'standards:search' %}" class="btn btn-outline-primary">
-                    {% trans "Clear Filters" %}
+                <a href="{% url 'standards:search' %}" class="btn-transition inline-flex items-center px-6 py-2.5 bg-navy text-white font-medium rounded-xl hover:bg-blue transition mx-auto">
+                    <i data-lucide="refresh-cw" class="w-4 h-4 me-2"></i>{% trans "Clear Filters" %}
                 </a>
                 {% endif %}
             </div>
diff --git a/templates/standards/source_confirm_delete.html b/templates/standards/source_confirm_delete.html
index 7c3c436..3894f28 100644
--- a/templates/standards/source_confirm_delete.html
+++ b/templates/standards/source_confirm_delete.html
@@ -1,70 +1,135 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
-{% load action_icons %}
+{% load i18n static %}
 
 {% block title %}{% trans "Delete Source" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% trans "Delete Source" %}</h1>
-            <p class="text-muted mb-0">{% trans "Confirm deletion of standard source" %}</p>
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Delete Source" %}</h1>
+                <p class="text-blue-100 text-sm">{% trans "Confirm deletion of standard source" %}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'standards:source_list' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Sources" %}
+                </a>
+            </div>
         </div>
-        <a href="{% url 'standards:source_list' %}" class="btn btn-outline-secondary">
-            {% action_icon "back" %} {% trans "Back to Sources" %}
-        </a>
     </div>
 
-    <div class="row">
-        <div class="col-12 col-lg-8">
-            <div class="card">
-                <div class="card-body">
-                    <div class="alert alert-warning">
-                        {% action_icon "warning" %}
-                        <strong>{% trans "Warning:" %}</strong> {% trans "This action cannot be undone." %}
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="lg:col-span-2">
+            <div class="section-card">
+                <div class="p-6">
+                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded-r-lg">
+                        <div class="flex items-start">
+                            <i data-lucide="alert-triangle" class="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5"></i>
+                            <div class="ml-3">
+                                <h3 class="text-sm font-semibold text-yellow-800">{% trans "Warning" %}</h3>
+                                <p class="text-sm text-yellow-700 mt-1">{% trans "This action cannot be undone." %}</p>
+                            </div>
+                        </div>
                     </div>
 
-                    <h5>{% trans "Are you sure you want to delete this source?" %}</h5>
+                    <h3 class="text-lg font-semibold text-gray-900 mb-4">{% trans "Are you sure you want to delete this source?" %}</h3>
 
-                    <div class="table mt-3">
-                        <table class="table table-sm">
-                            <tr>
-                                <th width="30%">{% trans "Code" %}</th>
-                                <td><strong>{{ source.code }}</strong></td>
-                            </tr>
-                            <tr>
-                                <th>{% trans "Name" %}</th>
-                                <td>{{ source.name }}</td>
-                            </tr>
-                            <tr>
-                                <th>{% trans "Arabic Name" %}</th>
-                                <td>{{ source.name_ar|default:"-" }}</td>
-                            </tr>
-                            <tr>
-                                <th>{% trans "Description" %}</th>
-                                <td>{{ source.description|default:"-" }}</td>
-                            </tr>
-                            <tr>
-                                <th>{% trans "Website" %}</th>
-                                <td>
+                    <div class="bg-gray-50 rounded-lg p-4 mb-6">
+                        <dl class="divide-y divide-gray-200">
+                            <div class="py-3 flex justify-between">
+                                <dt class="text-sm font-medium text-gray-500">{% trans "Code" %}</dt>
+                                <dd class="text-sm font-semibold text-gray-900">{{ source.code }}</dd>
+                            </div>
+                            <div class="py-3 flex justify-between">
+                                <dt class="text-sm font-medium text-gray-500">{% trans "Name" %}</dt>
+                                <dd class="text-sm font-semibold text-gray-900">{{ source.name }}</dd>
+                            </div>
+                            <div class="py-3 flex justify-between">
+                                <dt class="text-sm font-medium text-gray-500">{% trans "Arabic Name" %}</dt>
+                                <dd class="text-sm text-gray-900">{{ source.name_ar|default:"-" }}</dd>
+                            </div>
+                            <div class="py-3 flex justify-between">
+                                <dt class="text-sm font-medium text-gray-500">{% trans "Description" %}</dt>
+                                <dd class="text-sm text-gray-900">{{ source.description|default:"-" }}</dd>
+                            </div>
+                            <div class="py-3 flex justify-between">
+                                <dt class="text-sm font-medium text-gray-500">{% trans "Website" %}</dt>
+                                <dd class="text-sm">
                                     {% if source.website %}
-                                    <a href="{{ source.website }}" target="_blank">{{ source.website }}</a>
+                                    <a href="{{ source.website }}" target="_blank" class="text-blue-600 hover:text-blue-800 transition">
+                                        {{ source.website }}
+                                    </a>
                                     {% else %}
-                                    -
+                                    <span class="text-gray-400">-</span>
                                     {% endif %}
-                                </td>
-                            </tr>
-                        </table>
+                                </dd>
+                            </div>
+                        </dl>
                     </div>
 
-                    <form method="post" class="mt-4">
+                    <form method="post">
                         {% csrf_token %}
-                        <div class="d-flex gap-2">
-                            <button type="submit" class="btn btn-danger">
-                                {% action_icon "delete" %} {% trans "Delete Source" %}
+                        <div class="flex gap-3">
+                            <button type="submit" class="btn-transition inline-flex items-center px-6 py-2.5 bg-red-500 text-white font-medium rounded-xl hover:bg-red-600 transition">
+                                <i data-lucide="trash-2" class="w-4 h-4 me-2"></i>{% trans "Delete Source" %}
                             </button>
-                            <a href="{% url 'standards:source_list' %}" class="btn btn-secondary">
+                            <a href="{% url 'standards:source_list' %}" class="btn-transition inline-flex items-center px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition">
                                 {% trans "Cancel" %}
                             </a>
                         </div>
@@ -73,23 +138,37 @@
             </div>
         </div>
 
-        <div class="col-12 col-lg-4">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Impact" %}</h5>
+        <div class="lg:col-span-1">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-red-100">
+                        <i data-lucide="alert-circle" class="w-5 h-5 text-red-600"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Impact" %}</h5>
                 </div>
-                <div class="card-body">
-                    <p class="small text-muted">
+                <div class="p-6">
+                    <p class="text-sm text-gray-600 mb-3">
                         {% trans "Deleting this source will affect:" %}
                     </p>
-                    <ul class="small">
-                        <li>{% trans "All standards linked to this source" %}</li>
-                        <li>{% trans "Compliance records for those standards" %}</li>
-                        <li>{% trans "Any reports or analytics using this data" %}</li>
+                    <ul class="text-sm text-gray-600 space-y-2 mb-4">
+                        <li class="flex items-start">
+                            <i data-lucide="x" class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5 mr-2"></i>
+                            <span>{% trans "All standards linked to this source" %}</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-lucide="x" class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5 mr-2"></i>
+                            <span>{% trans "Compliance records for those standards" %}</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-lucide="x" class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5 mr-2"></i>
+                            <span>{% trans "Any reports or analytics using this data" %}</span>
+                        </li>
                     </ul>
-                    <p class="small text-danger mt-3">
-                        <strong>{% trans "Consider:" %}</strong> {% trans "You may want to mark this source as inactive instead of deleting it." %}
-                    </p>
+                    <div class="bg-blue-50 rounded-lg p-3 mt-4">
+                        <p class="text-xs text-blue-800">
+                            <strong>{% trans "Consider:" %}</strong> {% trans "You may want to mark this source as inactive instead of deleting it." %}
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/templates/standards/source_form.html b/templates/standards/source_form.html
index 60af491..f881c60 100644
--- a/templates/standards/source_form.html
+++ b/templates/standards/source_form.html
@@ -1,101 +1,156 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
-{% load action_icons %}
+{% load i18n static %}
 
 {% block title %}{% if source %}{% trans "Update Source" %}{% else %}{% trans "Create Source" %}{% endif %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% if source %}{% trans "Update Source" %}{% else %}{% trans "Create Source" %}{% endif %}</h1>
-            <p class="text-muted mb-0">{% if source %}{% trans "Edit standard source" %}{% else %}{% trans "Add new standard source" %}{% endif %}</p>
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% if source %}{% trans "Update Source" %}{% else %}{% trans "Create Source" %}{% endif %}</h1>
+                <p class="text-blue-100 text-sm">{% if source %}{% trans "Edit standard source" %}{% else %}{% trans "Add new standard source" %}{% endif %}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'standards:source_list' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Sources" %}
+                </a>
+            </div>
         </div>
-        <a href="{% url 'standards:source_list' %}" class="btn btn-outline-secondary">
-            {% action_icon "back" %} {% trans "Back to Sources" %}
-        </a>
     </div>
 
-    <div class="row">
-        <div class="col-12 col-lg-8">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Source Information" %}</h5>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="lg:col-span-2">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-navy/10">
+                        <i data-lucide="folder" class="w-5 h-5 text-navy"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Source Information" %}</h5>
                 </div>
-                <div class="card-body">
+                <div class="p-6">
                     <form method="post">
                         {% csrf_token %}
 
-                        <div class="mb-3">
-                            <label for="{{ form.name.id_for_label }}" class="form-label">
-                                {{ form.name.label }} <span class="text-danger">*</span>
+                        <div class="mb-4">
+                            <label for="{{ form.name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                                {{ form.name.label }} <span class="text-red-500">*</span>
                             </label>
                             {{ form.name }}
                             {% if form.name.errors %}
-                            <div class="text-danger">{{ form.name.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.name.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.name_ar.id_for_label }}" class="form-label">
+                        <div class="mb-4">
+                            <label for="{{ form.name_ar.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {{ form.name_ar.label }}
                             </label>
                             {{ form.name_ar }}
                             {% if form.name_ar.errors %}
-                            <div class="text-danger">{{ form.name_ar.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.name_ar.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.code.id_for_label }}" class="form-label">
-                                {{ form.code.label }} <span class="text-danger">*</span>
+                        <div class="mb-4">
+                            <label for="{{ form.code.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                                {{ form.code.label }} <span class="text-red-500">*</span>
                             </label>
                             {{ form.code }}
-                            <small class="form-text text-muted">
-                                {% trans "Unique code for the source (e.g., CBAHI, JCI, ISO)" %}
-                            </small>
+                            <p class="mt-1 text-xs text-gray-500">{% trans "Unique code for the source (e.g., CBAHI, JCI, ISO)" %}</p>
                             {% if form.code.errors %}
-                            <div class="text-danger">{{ form.code.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.code.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.website.id_for_label }}" class="form-label">
+                        <div class="mb-4">
+                            <label for="{{ form.website.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {{ form.website.label }}
                             </label>
                             {{ form.website }}
-                            <small class="form-text text-muted">
-                                {% trans "Official website URL (optional)" %}
-                            </small>
+                            <p class="mt-1 text-xs text-gray-500">{% trans "Official website URL (optional)" %}</p>
                             {% if form.website.errors %}
-                            <div class="text-danger">{{ form.website.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.website.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.description.id_for_label }}" class="form-label">
+                        <div class="mb-4">
+                            <label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {{ form.description.label }}
                             </label>
                             {{ form.description }}
                             {% if form.description.errors %}
-                            <div class="text-danger">{{ form.description.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.description.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <div class="form-check">
+                        <div class="mb-6">
+                            <label class="flex items-center">
                                 {{ form.is_active }}
-                                <label for="{{ form.is_active.id_for_label }}" class="form-check-label">
-                                    {{ form.is_active.label }}
-                                </label>
-                            </div>
+                                <span class="ml-2 text-sm text-gray-700">{{ form.is_active.label }}</span>
+                            </label>
                         </div>
 
-                        <div class="d-flex gap-2">
-                            <button type="submit" class="btn btn-primary">
-                                {% action_icon "save" %} {% if source %}{% trans "Update Source" %}{% else %}{% trans "Create Source" %}{% endif %}
+                        <div class="flex gap-3">
+                            <button type="submit" class="btn-transition inline-flex items-center px-6 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                                <i data-lucide="save" class="w-4 h-4 me-2"></i>{% if source %}{% trans "Update Source" %}{% else %}{% trans "Create Source" %}{% endif %}
                             </button>
-                            <a href="{% url 'standards:source_list' %}" class="btn btn-secondary">
+                            <a href="{% url 'standards:source_list' %}" class="btn-transition inline-flex items-center px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition">
                                 {% trans "Cancel" %}
                             </a>
                         </div>
@@ -104,25 +159,34 @@
             </div>
         </div>
 
-        <div class="col-12 col-lg-4">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Help" %}</h5>
+        <div class="lg:col-span-1">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-blue/10">
+                        <i data-lucide="help-circle" class="w-5 h-5 text-blue"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Help" %}</h5>
                 </div>
-                <div class="card-body">
-                    <h6>{% trans "Source Code" %}</h6>
-                    <p class="small text-muted">
-                        {% trans "Use a unique code to identify the standard source organization." %}<br><br>
-                        <strong>{% trans "Examples:" %}</strong><br>
-                        - CBAHI (Central Board for Accreditation of Healthcare Institutions)<br>
-                        - JCI (Joint Commission International)<br>
-                        - ISO (International Organization for Standardization)
-                    </p>
+                <div class="p-6">
+                    <div class="mb-4">
+                        <h6 class="text-sm font-semibold text-gray-800 mb-2">{% trans "Source Code" %}</h6>
+                        <p class="text-xs text-gray-600 mb-2">
+                            {% trans "Use a unique code to identify the standard source organization." %}
+                        </p>
+                        <div class="text-xs text-gray-500 space-y-1">
+                            <p><strong>{% trans "Examples:" %}</strong></p>
+                            <p class="ml-2">• CBAHI (Central Board for Accreditation of Healthcare Institutions)</p>
+                            <p class="ml-2">• JCI (Joint Commission International)</p>
+                            <p class="ml-2">• ISO (International Organization for Standardization)</p>
+                        </div>
+                    </div>
 
-                    <h6 class="mt-3">{% trans "Active Status" %}</h6>
-                    <p class="small text-muted">
-                        {% trans "Only active sources can be used when creating new standards. Inactive sources remain in the system but are not available for selection." %}
-                    </p>
+                    <div>
+                        <h6 class="text-sm font-semibold text-gray-800 mb-2">{% trans "Active Status" %}</h6>
+                        <p class="text-xs text-gray-600">
+                            {% trans "Only active sources can be used when creating new standards. Inactive sources remain in the system but are not available for selection." %}
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -131,19 +195,17 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize form fields with Bootstrap classes
     const formInputs = document.querySelectorAll('input[type="text"], input[type="url"], select, textarea');
     formInputs.forEach(input => {
-        if (!input.classList.contains('form-control')) {
-            input.classList.add('form-control');
+        if (!input.classList.contains('form-control') && input.type !== 'checkbox') {
+            input.classList.add('w-full', 'px-4', 'py-2.5', 'border', 'border-gray-300', 'rounded-lg', 'focus:ring-2', 'focus:ring-navy', 'focus:border-transparent', 'transition');
         }
     });
 
-    // Initialize checkboxes with Bootstrap classes
     const checkboxes = document.querySelectorAll('input[type="checkbox"]');
     checkboxes.forEach(checkbox => {
-        if (!checkbox.classList.contains('form-check-input')) {
-            checkbox.classList.add('form-check-input');
+        if (!checkbox.classList.contains('rounded')) {
+            checkbox.classList.add('rounded', 'border-gray-300', 'text-navy', 'focus:ring-navy', 'w-4', 'h-4');
         }
     });
 });
diff --git a/templates/standards/source_list.html b/templates/standards/source_list.html
index eb11ba2..6945c81 100644
--- a/templates/standards/source_list.html
+++ b/templates/standards/source_list.html
@@ -1,65 +1,151 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
-{% load action_icons %}
+{% load i18n static %}
 
 {% block title %}{% trans "Standard Sources" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% trans "Standard Sources" %}</h1>
-            <p class="text-muted mb-0">{% trans "Manage standard sources like CBAHI, JCI, ISO" %}</p>
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Standard Sources" %}</h1>
+                <p class="text-blue-100 text-sm">{% trans "Manage standard sources like CBAHI, JCI, ISO" %}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'standards:source_create' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                    <i data-lucide="plus" class="w-4 h-4 me-2"></i>{% trans "Add Source" %}
+                </a>
+            </div>
         </div>
-        <a href="{% url 'standards:source_create' %}" class="btn btn-primary">
-            {% action_icon "create" %} {% trans "Add Source" %}
-        </a>
     </div>
 
-    <div class="card">
-        <div class="card-body">
+    <div class="section-card">
+        <div class="p-0">
             {% if sources %}
-            <div class="table-responsive">
-                <table class="table table-hover">
-                    <thead>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
                         <tr>
-                            <th>{% trans "Code" %}</th>
-                            <th>{% trans "Name" %}</th>
-                            <th>{% trans "Arabic Name" %}</th>
-                            <th>{% trans "Website" %}</th>
-                            <th>{% trans "Status" %}</th>
-                            <th>{% trans "Actions" %}</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Code" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Name" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Arabic Name" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Website" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Status" %}
+                            </th>
+                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Actions" %}
+                            </th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="bg-white divide-y divide-gray-200">
                         {% for source in sources %}
-                        <tr>
-                            <td><strong>{{ source.code }}</strong></td>
-                            <td>{{ source.name }}</td>
-                            <td>{{ source.name_ar|default:"-" }}</td>
-                            <td>
+                        <tr class="hover:bg-gray-50 transition">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-semibold bg-navy/10 text-navy">
+                                    {{ source.code }}
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm font-semibold text-gray-900">{{ source.name }}</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                                {{ source.name_ar|default:"-" }}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                 {% if source.website %}
-                                <a href="{{ source.website }}" target="_blank" rel="noopener">
-                                    {{ source.website }}
+                                <a href="{{ source.website }}" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800 transition">
+                                    <i data-lucide="external-link" class="w-3 h-3 inline me-1"></i>{{ source.website }}
                                 </a>
                                 {% else %}
-                                -
+                                <span class="text-gray-400">-</span>
                                 {% endif %}
                             </td>
-                            <td>
+                            <td class="px-6 py-4 whitespace-nowrap">
                                 {% if source.is_active %}
-                                <span class="badge bg-success">{% trans "Active" %}</span>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                                    <i data-lucide="check-circle" class="w-3 h-3 me-1"></i>{% trans "Active" %}
+                                </span>
                                 {% else %}
-                                <span class="badge bg-secondary">{% trans "Inactive" %}</span>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                                    <i data-lucide="minus-circle" class="w-3 h-3 me-1"></i>{% trans "Inactive" %}
+                                </span>
                                 {% endif %}
                             </td>
-                            <td>
-                                <div class="d-flex gap-1">
-                                    <a href="{% url 'standards:source_update' pk=source.pk %}" class="btn btn-sm btn-outline-primary" title="{% trans 'Edit' %}">
-                                        {% action_icon "edit" %}
+                            <td class="px-6 py-4 whitespace-nowrap text-right">
+                                <div class="flex gap-2 justify-end">
+                                    <a href="{% url 'standards:source_update' pk=source.pk %}" 
+                                       class="btn-transition inline-flex items-center px-3 py-1.5 bg-blue-500 text-white text-xs font-medium rounded-lg hover:bg-blue-600 transition"
+                                       title="{% trans 'Edit' %}">
+                                        <i data-lucide="edit-2" class="w-3 h-3"></i>
                                     </a>
-                                    <a href="{% url 'standards:source_delete' pk=source.pk %}" class="btn btn-sm btn-outline-danger" title="{% trans 'Delete' %}">
-                                        {% action_icon "delete" %}
+                                    <a href="{% url 'standards:source_delete' pk=source.pk %}" 
+                                       class="btn-transition inline-flex items-center px-3 py-1.5 bg-red-500 text-white text-xs font-medium rounded-lg hover:bg-red-600 transition"
+                                       title="{% trans 'Delete' %}">
+                                        <i data-lucide="trash-2" class="w-3 h-3"></i>
                                     </a>
                                 </div>
                             </td>
@@ -69,12 +155,12 @@
                 </table>
             </div>
             {% else %}
-            <div class="text-center py-5">
-                <span class="text-muted mb-3 d-block">{% action_icon "folder" size=64 %}</span>
-                <h5>{% trans "No sources found" %}</h5>
-                <p class="text-muted">{% trans "Add your first standard source to get started" %}</p>
-                <a href="{% url 'standards:source_create' %}" class="btn btn-primary">
-                    {% action_icon "create" %} {% trans "Add Source" %}
+            <div class="text-center py-12 text-gray-500">
+                <i data-lucide="folder" class="w-16 h-16 mx-auto mb-4 text-gray-300"></i>
+                <h5 class="text-lg font-semibold text-gray-700 mb-2">{% trans "No sources found" %}</h5>
+                <p class="mb-6">{% trans "Add your first standard source to get started" %}</p>
+                <a href="{% url 'standards:source_create' %}" class="btn-transition inline-flex items-center px-6 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition mx-auto">
+                    <i data-lucide="plus" class="w-4 h-4 me-2"></i>{% trans "Add Source" %}
                 </a>
             </div>
             {% endif %}
diff --git a/templates/standards/standard_confirm_delete.html b/templates/standards/standard_confirm_delete.html
new file mode 100644
index 0000000..630f7da
--- /dev/null
+++ b/templates/standards/standard_confirm_delete.html
@@ -0,0 +1,122 @@
+{% extends 'layouts/base.html' %}
+{% load i18n static %}
+
+{% block title %}{% trans "Delete Standard" %} - {{ standard.code }}{% endblock %}
+
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Delete Standard" %}</h1>
+                <p class="text-blue-100 text-sm">{{ standard.code }} - {{ standard.title }}</p>
+            </div>
+            <div class="flex gap-2">
+                <a href="{% url 'standards:standard_detail' pk=standard.pk %}" 
+                   class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Standard" %}
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div class="max-w-2xl mx-auto">
+        <div class="section-card">
+            <div class="p-6">
+                <div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6 rounded-r-lg">
+                    <div class="flex items-start">
+                        <i data-lucide="alert-octagon" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
+                        <div class="ml-3">
+                            <h3 class="text-sm font-semibold text-red-800">{% trans "Warning: This action cannot be undone" %}</h3>
+                            <p class="text-sm text-red-700 mt-1">{% trans "Deleting this standard will permanently remove it from the system along with all associated compliance records and attachments." %}</p>
+                        </div>
+                    </div>
+                </div>
+
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">{% trans "Are you sure you want to delete this standard?" %}</h3>
+
+                <div class="bg-gray-50 rounded-lg p-4 mb-6">
+                    <dl class="divide-y divide-gray-200">
+                        <div class="py-3">
+                            <dt class="text-xs font-medium text-gray-500 mb-1">{% trans "Standard Code" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">{{ standard.code }}</dd>
+                        </div>
+                        <div class="py-3">
+                            <dt class="text-xs font-medium text-gray-500 mb-1">{% trans "Title" %}</dt>
+                            <dd class="text-sm text-gray-900">{{ standard.title }}</dd>
+                        </div>
+                        <div class="py-3">
+                            <dt class="text-xs font-medium text-gray-500 mb-1">{% trans "Source" %}</dt>
+                            <dd class="text-sm text-gray-900">{{ standard.source.name }}</dd>
+                        </div>
+                        <div class="py-3">
+                            <dt class="text-xs font-medium text-gray-500 mb-1">{% trans "Category" %}</dt>
+                            <dd class="text-sm text-gray-900">{{ standard.category.name }}</dd>
+                        </div>
+                        <div class="py-3">
+                            <dt class="text-xs font-medium text-gray-500 mb-1">{% trans "Department" %}</dt>
+                            <dd class="text-sm text-gray-900">
+                                {% if standard.department %}
+                                {{ standard.department.name }}
+                                {% else %}
+                                <span class="text-gray-400 italic">{% trans "All Departments" %}</span>
+                                {% endif %}
+                            </dd>
+                        </div>
+                        <div class="py-3">
+                            <dt class="text-xs font-medium text-gray-500 mb-1">{% trans "Compliance Records" %}</dt>
+                            <dd class="text-sm text-gray-900">{{ standard.compliance_records.count }} {% trans "records" %}</dd>
+                        </div>
+                    </dl>
+                </div>
+
+                <form method="post">
+                    {% csrf_token %}
+                    <div class="flex gap-3">
+                        <button type="submit" class="btn-transition inline-flex items-center px-6 py-2.5 bg-red-500 text-white font-medium rounded-xl hover:bg-red-600 transition">
+                            <i data-lucide="trash-2" class="w-4 h-4 me-2"></i>{% trans "Delete Standard" %}
+                        </button>
+                        <a href="{% url 'standards:standard_detail' pk=standard.pk %}" 
+                           class="btn-transition inline-flex items-center px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition">
+                            {% trans "Cancel" %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/standards/standard_detail.html b/templates/standards/standard_detail.html
index 98f8e1b..14d3d3b 100644
--- a/templates/standards/standard_detail.html
+++ b/templates/standards/standard_detail.html
@@ -1,95 +1,185 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
+{% load i18n static %}
 {% load standards_filters %}
-{% load action_icons %}
 
 {% block title %}{{ standard.code }} - {% trans "Standard Details" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .stat-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        padding: 1.5rem;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s ease;
+    }
+    .stat-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        border-color: #005696;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{{ standard.code }}</h1>
-            <p class="text-muted mb-0">{{ standard.title }}</p>
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{{ standard.code }}</h1>
+                <p class="text-blue-100 text-sm">{{ standard.title }}</p>
+            </div>
+            <div class="flex gap-2">
+                {% if is_px_admin %}
+                <a href="{% url 'standards:standard_update' pk=standard.pk %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                    <i data-lucide="edit-2" class="w-4 h-4 me-2"></i>{% trans "Edit" %}
+                </a>
+                <a href="{% url 'standards:standard_delete' pk=standard.pk %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-red-500 text-white font-medium rounded-xl hover:bg-red-600 transition">
+                    <i data-lucide="trash-2" class="w-4 h-4 me-2"></i>{% trans "Delete" %}
+                </a>
+                {% endif %}
+                <a href="{% url 'standards:dashboard' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Dashboard" %}
+                </a>
+            </div>
         </div>
-        <a href="{% url 'standards:dashboard' %}" class="btn btn-outline-secondary">
-            {% action_icon "back" %} {% trans "Back to Dashboard" %}
-        </a>
     </div>
 
-    <!-- Standard Information -->
-    <div class="row mb-4">
-        <div class="col-lg-8">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Standard Information" %}</h5>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+        <div class="lg:col-span-2">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-navy/10">
+                        <i data-lucide="clipboard-list" class="w-5 h-5 text-navy"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Standard Information" %}</h5>
                 </div>
-                <div class="card-body">
-                    <table class="table table-sm">
-                        <tr>
-                            <th width="30%">{% trans "Source" %}</th>
-                            <td>{{ standard.source.name }}</td>
-                        </tr>
-                        <tr>
-                            <th>{% trans "Category" %}</th>
-                            <td>{{ standard.category.name }}</td>
-                        </tr>
-                        <tr>
-                            <th>{% trans "Department" %}</th>
-                            <td>
+                <div class="p-6">
+                    <dl class="divide-y divide-gray-100">
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Source" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">{{ standard.source.name }}</dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Category" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">{{ standard.category.name }}</dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Department" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">
                                 {% if standard.department %}
                                 {{ standard.department.name }}
                                 {% else %}
-                                <em>{% trans "All Departments" %}</em>
+                                <span class="text-gray-400 italic">{% trans "All Departments" %}</span>
                                 {% endif %}
-                            </td>
-                        </tr>
-                        <tr>
-                            <th>{% trans "Effective Date" %}</th>
-                            <td>
+                            </dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Effective Date" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">
                                 {% if standard.effective_date %}
                                 {{ standard.effective_date|date:"Y-m-d" }}
                                 {% else %}
-                                <em>{% trans "Not specified" %}</em>
+                                <span class="text-gray-400 italic">{% trans "Not specified" %}</span>
                                 {% endif %}
-                            </td>
-                        </tr>
-                        <tr>
-                            <th>{% trans "Review Date" %}</th>
-                            <td>
+                            </dd>
+                        </div>
+                        <div class="py-3 flex justify-between">
+                            <dt class="text-sm font-medium text-gray-500">{% trans "Review Date" %}</dt>
+                            <dd class="text-sm font-semibold text-gray-900">
                                 {% if standard.review_date %}
                                 {{ standard.review_date|date:"Y-m-d" }}
                                 {% else %}
-                                <em>{% trans "Not specified" %}</em>
+                                <span class="text-gray-400 italic">{% trans "Not specified" %}</span>
                                 {% endif %}
-                            </td>
-                        </tr>
-                    </table>
+                            </dd>
+                        </div>
+                    </dl>
                 </div>
             </div>
         </div>
-        <div class="col-lg-4">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Compliance Summary" %}</h5>
+
+        <div class="lg:col-span-1">
+            <div class="stat-card">
+                <div class="text-center mb-4">
+                    <div class="text-4xl font-bold text-navy mb-1">{{ compliance_records.count }}</div>
+                    <div class="text-sm text-gray-600">{% trans "Assessments" %}</div>
                 </div>
-                <div class="card-body">
-                    <div class="text-center">
-                        <h2>{{ compliance_records.count }}</h2>
-                        <p class="text-muted">{% trans "Assessments" %}</p>
+                <div class="space-y-2">
+                    <div class="flex items-center justify-between p-2 bg-green-50 rounded-lg">
+                        <span class="text-sm text-gray-700">{% trans "Met" %}</span>
+                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
+                            {{ compliance_records|count_by:"status:met" }}
+                        </span>
                     </div>
-                    <div class="mt-3">
-                        <span class="badge bg-success me-1">
-                            {{ compliance_records|count_by:"status:met" }} {% trans "Met" %}
+                    <div class="flex items-center justify-between p-2 bg-yellow-50 rounded-lg">
+                        <span class="text-sm text-gray-700">{% trans "Partially Met" %}</span>
+                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
+                            {{ compliance_records|count_by:"status:partially_met" }}
                         </span>
-                        <span class="badge bg-warning me-1">
-                            {{ compliance_records|count_by:"status:partially_met" }} {% trans "Partially Met" %}
+                    </div>
+                    <div class="flex items-center justify-between p-2 bg-red-50 rounded-lg">
+                        <span class="text-sm text-gray-700">{% trans "Not Met" %}</span>
+                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800">
+                            {{ compliance_records|count_by:"status:not_met" }}
                         </span>
-                        <span class="badge bg-danger me-1">
-                            {{ compliance_records|count_by:"status:not_met" }} {% trans "Not Met" %}
-                        </span>
-                        <span class="badge bg-secondary">
-                            {{ compliance_records|count_by:"status:not_assessed" }} {% trans "Not Assessed" %}
+                    </div>
+                    <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
+                        <span class="text-sm text-gray-700">{% trans "Not Assessed" %}</span>
+                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">
+                            {{ compliance_records|count_by:"status:not_assessed" }}
                         </span>
                     </div>
                 </div>
@@ -97,65 +187,94 @@
         </div>
     </div>
 
-    <!-- Description -->
-    <div class="card mb-4">
-        <div class="card-header">
-            <h5 class="card-title mb-0">{% trans "Description" %}</h5>
+    <div class="section-card mb-6">
+        <div class="section-header">
+            <div class="section-icon bg-blue/10">
+                <i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
+            </div>
+            <h5 class="text-lg font-semibold text-gray-800">{% trans "Description" %}</h5>
         </div>
-        <div class="card-body">
-            {{ standard.description|linebreaks }}
+        <div class="p-6">
+            <div class="text-sm text-gray-700 leading-relaxed">
+                {{ standard.description|linebreaks }}
+            </div>
         </div>
     </div>
 
-    <!-- Compliance Records -->
-    <div class="card">
-        <div class="card-header">
-            <h5 class="card-title mb-0">{% trans "Compliance by Department" %}</h5>
+    <div class="section-card">
+        <div class="section-header">
+            <div class="section-icon bg-navy/10">
+                <i data-lucide="building-2" class="w-5 h-5 text-navy"></i>
+            </div>
+            <h5 class="text-lg font-semibold text-gray-800">{% trans "Compliance by Department" %}</h5>
         </div>
-        <div class="card-body">
+        <div class="p-0">
             {% if compliance_records %}
-            <div class="table-responsive">
-                <table class="table table-hover">
-                    <thead>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
                         <tr>
-                            <th>{% trans "Department" %}</th>
-                            <th>{% trans "Status" %}</th>
-                            <th>{% trans "Last Assessed" %}</th>
-                            <th>{% trans "Assessor" %}</th>
-                            <th>{% trans "Evidence" %}</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Department" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Status" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Last Assessed" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Assessor" %}
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {% trans "Evidence" %}
+                            </th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="bg-white divide-y divide-gray-200">
                         {% for record in compliance_records %}
-                        <tr>
-                            <td>
-                                <a href="{% url 'standards:department_standards' pk=record.department.id %}">
+                        <tr class="hover:bg-gray-50 transition">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <a href="{% url 'standards:department_standards' pk=record.department.id %}" class="text-sm font-medium text-gray-900 hover:text-navy transition">
                                     {{ record.department.name }}
                                 </a>
                             </td>
-                            <td>
-                                <span class="badge {% if record.status == 'met' %}bg-success{% elif record.status == 'partially_met' %}bg-warning{% elif record.status == 'not_met' %}bg-danger{% else %}bg-secondary{% endif %}">
-                                    {{ record.get_status_display }}
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                {% if record.status == 'met' %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                                    <i data-lucide="check-circle" class="w-3 h-3 me-1"></i>{{ record.get_status_display }}
                                 </span>
+                                {% elif record.status == 'partially_met' %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+                                    <i data-lucide="alert-circle" class="w-3 h-3 me-1"></i>{{ record.get_status_display }}
+                                </span>
+                                {% elif record.status == 'not_met' %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                                    <i data-lucide="x-circle" class="w-3 h-3 me-1"></i>{{ record.get_status_display }}
+                                </span>
+                                {% else %}
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                                    <i data-lucide="help-circle" class="w-3 h-3 me-1"></i>{{ record.get_status_display }}
+                                </span>
+                                {% endif %}
                             </td>
-                            <td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                 {% if record.last_assessed_date %}
                                 {{ record.last_assessed_date|date:"Y-m-d" }}
                                 {% else %}
-                                <em>{% trans "Not assessed" %}</em>
+                                <span class="text-gray-400 italic">{% trans "Not assessed" %}</span>
                                 {% endif %}
                             </td>
-                            <td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                 {% if record.assessor %}
                                 {{ record.assessor.get_full_name }}
                                 {% else %}
-                                <em>-</em>
+                                <span class="text-gray-400">-</span>
                                 {% endif %}
                             </td>
-                            <td>
-                                <span class="badge bg-info">
-                                    {% action_icon "attachment" %}
-                                    {{ record.attachments.count }}
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                                    <i data-lucide="file-text" class="w-3 h-3 me-1"></i>{{ record.attachments.count }}
                                 </span>
                             </td>
                         </tr>
@@ -164,7 +283,10 @@
                 </table>
             </div>
             {% else %}
-            <p class="text-muted text-center">{% trans "No compliance assessments yet" %}</p>
+            <div class="text-center py-12 text-gray-500">
+                <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
+                <p>{% trans "No compliance assessments yet" %}</p>
+            </div>
             {% endif %}
         </div>
     </div>
diff --git a/templates/standards/standard_form.html b/templates/standards/standard_form.html
index 11f89fb..2ff9dc8 100644
--- a/templates/standards/standard_form.html
+++ b/templates/standards/standard_form.html
@@ -1,163 +1,216 @@
 {% extends 'layouts/base.html' %}
-{% load i18n %}
-{% load action_icons %}
+{% load i18n static %}
 
 {% block title %}{% trans "Create Standard" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    :root {
+        --hh-navy: #005696;
+        --hh-blue: #007bbd;
+        --hh-light: #eef6fb;
+        --hh-slate: #64748b;
+    }
+
+    .page-header-gradient {
+        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        border-radius: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
+    }
+
+    .section-card {
+        background: white;
+        border-radius: 1rem;
+        border: 2px solid #e2e8f0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    .section-card:hover {
+        border-color: #005696;
+        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
+    }
+
+    .section-header {
+        padding: 1rem 1.5rem;
+        border-bottom: 2px solid #e2e8f0;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .section-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-transition {
+        transition: all 0.2s ease-in-out;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="container-fluid px-4">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-0">{% trans "Create New Standard" %}</h1>
-            <p class="text-muted mb-0">{% trans "Add a new compliance standard" %}</p>
-        </div>
-        <div>
-            {% if department_id %}
-            <a href="{% url 'standards:department_standards' pk=department_id %}" class="btn btn-outline-secondary">
-                {% action_icon "back" %} {% trans "Back to Department Standards" %}
-            </a>
-            {% else %}
-            <a href="{% url 'standards:dashboard' %}" class="btn btn-outline-secondary">
-                {% action_icon "back" %} {% trans "Back to Dashboard" %}
-            </a>
-            {% endif %}
+<div class="px-6 py-4">
+    <div class="page-header-gradient">
+        <div class="flex justify-between items-center">
+            <div>
+                <h1 class="text-2xl font-bold mb-1">{% trans "Create New Standard" %}</h1>
+                <p class="text-blue-100 text-sm">{% trans "Add a new compliance standard" %}</p>
+            </div>
+            <div class="flex gap-2">
+                {% if department_id %}
+                <a href="{% url 'standards:department_standards' pk=department_id %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Department Standards" %}
+                </a>
+                {% else %}
+                <a href="{% url 'standards:dashboard' %}" class="btn-transition inline-flex items-center px-4 py-2.5 bg-white/10 border-2 border-white/30 text-white font-medium rounded-xl hover:bg-white hover:text-navy transition">
+                    <i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Dashboard" %}
+                </a>
+                {% endif %}
+            </div>
         </div>
     </div>
 
-    <div class="row">
-        <div class="col-12 col-lg-8">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Standard Information" %}</h5>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="lg:col-span-2">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-navy/10">
+                        <i data-lucide="clipboard-list" class="w-5 h-5 text-navy"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Standard Information" %}</h5>
                 </div>
-                <div class="card-body">
+                <div class="p-6">
                     <form method="post">
                         {% csrf_token %}
 
-                        <div class="mb-3">
-                            <label for="{{ form.source.id_for_label }}" class="form-label">
-                                {{ form.source.label }} <span class="text-danger">*</span>
+                        <div class="mb-4">
+                            <label for="{{ form.source.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                                {{ form.source.label }} <span class="text-red-500">*</span>
                             </label>
                             {{ form.source }}
                             {% if form.source.help_text %}
-                            <small class="form-text text-muted">{{ form.source.help_text }}</small>
+                            <p class="mt-1 text-xs text-gray-500">{{ form.source.help_text }}</p>
                             {% endif %}
                             {% if form.source.errors %}
-                            <div class="text-danger">{{ form.source.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.source.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.category.id_for_label }}" class="form-label">
-                                {{ form.category.label }} <span class="text-danger">*</span>
+                        <div class="mb-4">
+                            <label for="{{ form.category.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                                {{ form.category.label }} <span class="text-red-500">*</span>
                             </label>
                             {{ form.category }}
                             {% if form.category.help_text %}
-                            <small class="form-text text-muted">{{ form.category.help_text }}</small>
+                            <p class="mt-1 text-xs text-gray-500">{{ form.category.help_text }}</p>
                             {% endif %}
                             {% if form.category.errors %}
-                            <div class="text-danger">{{ form.category.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.category.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.code.id_for_label }}" class="form-label">
-                                {{ form.code.label }} <span class="text-danger">*</span>
+                        <div class="mb-4">
+                            <label for="{{ form.code.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                                {{ form.code.label }} <span class="text-red-500">*</span>
                             </label>
                             {{ form.code }}
                             {% if form.code.help_text %}
-                            <small class="form-text text-muted">{{ form.code.help_text }}</small>
+                            <p class="mt-1 text-xs text-gray-500">{{ form.code.help_text }}</p>
                             {% endif %}
                             {% if form.code.errors %}
-                            <div class="text-danger">{{ form.code.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.code.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.title.id_for_label }}" class="form-label">
-                                {{ form.title.label }} <span class="text-danger">*</span>
+                        <div class="mb-4">
+                            <label for="{{ form.title.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                                {{ form.title.label }} <span class="text-red-500">*</span>
                             </label>
                             {{ form.title }}
                             {% if form.title.errors %}
-                            <div class="text-danger">{{ form.title.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.title.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.title_ar.id_for_label }}" class="form-label">
+                        <div class="mb-4">
+                            <label for="{{ form.title_ar.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {{ form.title_ar.label }}
                             </label>
                             {{ form.title_ar }}
                             {% if form.title_ar.errors %}
-                            <div class="text-danger">{{ form.title_ar.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.title_ar.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="mb-3">
-                            <label for="{{ form.description.id_for_label }}" class="form-label">
-                                {{ form.description.label }} <span class="text-danger">*</span>
+                        <div class="mb-4">
+                            <label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                                {{ form.description.label }} <span class="text-red-500">*</span>
                             </label>
                             {{ form.description }}
                             {% if form.description.errors %}
-                            <div class="text-danger">{{ form.description.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.description.errors }}</p>
                             {% endif %}
                         </div>
 
-
-                        <div class="mb-3">
-                            <label for="{{ form.department.id_for_label }}" class="form-label">
+                        <div class="mb-4">
+                            <label for="{{ form.department.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                 {{ form.department.label }}
                             </label>
                             {{ form.department }}
-                            <small class="form-text text-muted">
-                                {% trans "Leave empty to apply to all departments" %}
-                            </small>
+                            <p class="mt-1 text-xs text-gray-500">{% trans "Leave empty to apply to all departments" %}</p>
                             {% if form.department.errors %}
-                            <div class="text-danger">{{ form.department.errors }}</div>
+                            <p class="mt-1 text-xs text-red-600">{{ form.department.errors }}</p>
                             {% endif %}
                         </div>
 
-                        <div class="row">
-                            <div class="col-md-6 mb-3">
-                                <label for="{{ form.effective_date.id_for_label }}" class="form-label">
+                        <div class="grid grid-cols-2 gap-4 mb-4">
+                            <div>
+                                <label for="{{ form.effective_date.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                     {{ form.effective_date.label }}
                                 </label>
                                 {{ form.effective_date }}
                                 {% if form.effective_date.errors %}
-                                <div class="text-danger">{{ form.effective_date.errors }}</div>
+                                <p class="mt-1 text-xs text-red-600">{{ form.effective_date.errors }}</p>
                                 {% endif %}
                             </div>
-
-                            <div class="col-md-6 mb-3">
-                                <label for="{{ form.review_date.id_for_label }}" class="form-label">
+                            <div>
+                                <label for="{{ form.review_date.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                     {{ form.review_date.label }}
                                 </label>
                                 {{ form.review_date }}
                                 {% if form.review_date.errors %}
-                                <div class="text-danger">{{ form.review_date.errors }}</div>
+                                <p class="mt-1 text-xs text-red-600">{{ form.review_date.errors }}</p>
                                 {% endif %}
                             </div>
                         </div>
 
-                        <div class="mb-3">
-                            <div class="form-check">
+                        <div class="mb-6">
+                            <label class="flex items-center">
                                 {{ form.is_active }}
-                                <label for="{{ form.is_active.id_for_label }}" class="form-check-label">
-                                    {{ form.is_active.label }}
-                                </label>
-                            </div>
+                                <span class="ml-2 text-sm text-gray-700">{{ form.is_active.label }}</span>
+                            </label>
                         </div>
 
-                        <div class="d-flex gap-2">
-                            <button type="submit" class="btn btn-primary">
-                                {% action_icon "save" %} {% trans "Create Standard" %}
+                        <div class="flex gap-3">
+                            <button type="submit" class="btn-transition inline-flex items-center px-6 py-2.5 bg-green-500 text-white font-medium rounded-xl hover:bg-green-600 transition">
+                                <i data-lucide="save" class="w-4 h-4 me-2"></i>{% trans "Create Standard" %}
                             </button>
                             {% if department_id %}
-                            <a href="{% url 'standards:department_standards' pk=department_id %}" class="btn btn-secondary">
+                            <a href="{% url 'standards:department_standards' pk=department_id %}" class="btn-transition inline-flex items-center px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition">
                                 {% trans "Cancel" %}
                             </a>
                             {% else %}
-                            <a href="{% url 'standards:dashboard' %}" class="btn btn-secondary">
+                            <a href="{% url 'standards:dashboard' %}" class="btn-transition inline-flex items-center px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition">
                                 {% trans "Cancel" %}
                             </a>
                             {% endif %}
@@ -167,31 +220,42 @@
             </div>
         </div>
 
-        <div class="col-12 col-lg-4">
-            <div class="card">
-                <div class="card-header">
-                    <h5 class="card-title mb-0">{% trans "Help" %}</h5>
+        <div class="lg:col-span-1">
+            <div class="section-card">
+                <div class="section-header">
+                    <div class="section-icon bg-blue/10">
+                        <i data-lucide="help-circle" class="w-5 h-5 text-blue"></i>
+                    </div>
+                    <h5 class="text-lg font-semibold text-gray-800">{% trans "Help" %}</h5>
                 </div>
-                <div class="card-body">
-                    <h6>{% trans "Standard Code Format" %}</h6>
-                    <p class="small text-muted">
-                        {% trans "Use a unique code to identify this standard" %}<br>
-                        <strong>{% trans "Examples:" %}</strong><br>
-                        - STD-001<br>
-                        - QM-05<br>
-                        - PS-12
-                    </p>
+                <div class="p-6">
+                    <div class="mb-4">
+                        <h6 class="text-sm font-semibold text-gray-800 mb-2">{% trans "Standard Code Format" %}</h6>
+                        <p class="text-xs text-gray-600 mb-2">
+                            {% trans "Use a unique code to identify this standard" %}
+                        </p>
+                        <div class="text-xs text-gray-500 space-y-1">
+                            <p><strong>{% trans "Examples:" %}</strong></p>
+                            <p class="ml-2">• STD-001</p>
+                            <p class="ml-2">• QM-05</p>
+                            <p class="ml-2">• PS-12</p>
+                        </div>
+                    </div>
 
-                    <h6 class="mt-3">{% trans "Department Assignment" %}</h6>
-                    <p class="small text-muted">
-                        {% trans "Leave the department field empty if this standard applies to all departments. Select a specific department only if the standard is department-specific." %}
-                    </p>
+                    <div class="mb-4">
+                        <h6 class="text-sm font-semibold text-gray-800 mb-2">{% trans "Department Assignment" %}</h6>
+                        <p class="text-xs text-gray-600">
+                            {% trans "Leave the department field empty if this standard applies to all departments. Select a specific department only if the standard is department-specific." %}
+                        </p>
+                    </div>
 
-                    <h6 class="mt-3">{% trans "Dates" %}</h6>
-                    <p class="small text-muted">
-                        {% trans "Effective date: When the standard becomes mandatory" %}<br>
-                        {% trans "Review date: When the standard should be reviewed for updates" %}
-                    </p>
+                    <div>
+                        <h6 class="text-sm font-semibold text-gray-800 mb-2">{% trans "Dates" %}</h6>
+                        <p class="text-xs text-gray-600">
+                            {% trans "Effective date: When the standard becomes mandatory" %}<br>
+                            {% trans "Review date: When the standard should be reviewed for updates" %}
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -200,19 +264,17 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize form fields with Bootstrap classes
     const formInputs = document.querySelectorAll('input[type="text"], input[type="date"], select, textarea');
     formInputs.forEach(input => {
-        if (!input.classList.contains('form-control')) {
-            input.classList.add('form-control');
+        if (!input.classList.contains('form-control') && input.type !== 'checkbox') {
+            input.classList.add('w-full', 'px-4', 'py-2.5', 'border', 'border-gray-300', 'rounded-lg', 'focus:ring-2', 'focus:ring-navy', 'focus:border-transparent', 'transition');
         }
     });
 
-    // Initialize checkboxes with Bootstrap classes
     const checkboxes = document.querySelectorAll('input[type="checkbox"]');
     checkboxes.forEach(checkbox => {
-        if (!checkbox.classList.contains('form-check-input')) {
-            checkbox.classList.add('form-check-input');
+        if (!checkbox.classList.contains('rounded')) {
+            checkbox.classList.add('rounded', 'border-gray-300', 'text-navy', 'focus:ring-navy', 'w-4', 'h-4');
         }
     });
 });
diff --git a/templates/surveys/instance_list.html b/templates/surveys/instance_list.html
index a89e372..ec2e425 100644
--- a/templates/surveys/instance_list.html
+++ b/templates/surveys/instance_list.html
@@ -9,7 +9,10 @@
 <header class="mb-6">
     <div class="flex justify-between items-start">
         <div>
-            <h1 class="text-2xl font-bold text-navy">{% trans "Survey Instances" %}</h1>
+            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
+                <i data-lucide="clipboard-check" class="w-7 h-7 text-purple-500"></i>
+                {% trans "Survey Instances" %}
+            </h1>
             <p class="text-sm text-slate mt-1">{% trans "Monitor survey responses and scores" %}</p>
         </div>
         <div class="flex items-center gap-3">
@@ -27,7 +30,14 @@
 </header>
 
     <!-- Filters Panel -->
-    <div id="filtersPanel" class="hidden bg-slate-50 px-6 py-4 border-b border-slate-200 mb-6 rounded-2xl">
+    <div id="filtersPanel" class="hidden bg-white rounded-2xl shadow-sm border-2 border-slate-200 mb-6">
+        <div class="px-6 py-4 border-b-2 border-slate-200 flex justify-between items-center bg-gradient-to-r from-slate-50 to-slate-100">
+            <h3 class="font-bold text-navy flex items-center gap-2">
+                <i data-lucide="filter" class="w-5 h-5 text-navy"></i>
+                {% trans "Filters" %}
+            </h3>
+        </div>
+        <div class="px-6 py-4 bg-slate-50">
         <form method="get" class="flex flex-wrap gap-4 items-end">
             <div class="flex items-center gap-2">
                 <label class="text-xs font-bold text-slate uppercase">{% trans "Status" %}</label>
@@ -67,11 +77,12 @@
                 <a href="{% url 'surveys:instance_list' %}" class="px-4 py-1.5 border border-slate-200 rounded-lg text-xs font-semibold text-slate hover:bg-white transition">{% trans "Clear" %}</a>
             </div>
         </form>
+        </div>
     </div>
 
     <!-- Surveys Table -->
-    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
-        <div class="flex justify-between items-center p-5 border-b border-slate-100">
+    <div class="bg-white rounded-2xl shadow-sm border-2 border-slate-200 overflow-hidden">
+        <div class="flex justify-between items-center p-5 border-b-2 border-slate-200 bg-gradient-to-r from-slate-50 to-slate-100">
             <h3 class="font-bold text-navy flex items-center gap-2 text-sm">
                 <i data-lucide="table" class="w-4 h-4"></i>
                 {% trans "Survey List" %}