diff --git a/app/Http/Controllers/Admin/AdminExtraController.php b/app/Http/Controllers/Admin/AdminExtraController.php
index 1c4000f..e4eda98 100644
--- a/app/Http/Controllers/Admin/AdminExtraController.php
+++ b/app/Http/Controllers/Admin/AdminExtraController.php
@@ -336,11 +336,10 @@ public function refundPayment(Request $request, $id)
             'amount' => 'required|numeric|min:1'
         ]);
 
-        $payment = DB::table('payments')->where('id', $id)->first();
+        $payment = DB::table('subscriptions')->where('id', $id)->first();
         if ($payment) {
-            DB::table('payments')->where('id', $id)->update([
+            DB::table('subscriptions')->where('id', $id)->update([
                 'status' => 'refunded',
-                'description' => $payment->description . " (Refunded: " . $request->refund_reason . ")",
                 'updated_at' => now()
             ]);
 
@@ -448,7 +447,7 @@ public function analytics(Request $request)
             $orderColumn = 'users.created_at';
             $headers = ['Employer ID', 'Name', 'Email', 'Status', 'Subscription Status', 'Total Spent', 'Joined Date'];
             $mapFn = function($emp) {
-                $totalPaid = DB::table('payments')->where('user_id', $emp->id)->where('status', 'success')->sum('amount');
+                $totalPaid = DB::table('subscriptions')->where('user_id', $emp->id)->where('status', 'active')->sum('amount_aed');
                 return [
                     'id' => 'EMP-' . str_pad($emp->id, 4, '0', STR_PAD_LEFT),
                     'name' => $emp->name,
@@ -461,36 +460,37 @@ public function analytics(Request $request)
             };
 
         } elseif ($reportType === 'payments') {
-            $query = DB::table('payments')
-                ->leftJoin('users', 'payments.user_id', '=', 'users.id')
-                ->select('payments.*', 'users.name as user_name', 'users.email as user_email');
+            $query = DB::table('subscriptions')
+                ->leftJoin('users', 'subscriptions.user_id', '=', 'users.id')
+                ->select('subscriptions.*', 'users.name as user_name', 'users.email as user_email');
 
             if ($startDate) {
-                $query->whereDate('payments.created_at', '>=', $startDate);
+                $query->whereDate('subscriptions.created_at', '>=', $startDate);
             }
             if ($endDate) {
-                $query->whereDate('payments.created_at', '<=', $endDate);
+                $query->whereDate('subscriptions.created_at', '<=', $endDate);
             }
             if ($status && $status !== 'all') {
-                $query->where('payments.status', $status);
+                $query->where('subscriptions.status', $status === 'success' || $status === 'Completed' ? 'active' : $status);
             }
             if ($search) {
                 $query->where(function($q) use ($search) {
                     $q->where('users.name', 'like', "%{$search}%")
-                      ->orWhere('payments.description', 'like', "%{$search}%");
+                      ->orWhere('subscriptions.plan_id', 'like', "%{$search}%");
                 });
             }
 
-            $orderColumn = 'payments.created_at';
+            $orderColumn = 'subscriptions.created_at';
             $headers = ['Payment ID', 'Employer Name', 'Employer Email', 'Amount', 'Description', 'Status', 'Date'];
             $mapFn = function($pay) {
+                $planLabel = ucfirst($pay->plan_id) . ' Sponsor Pass';
                 return [
                     'id' => 'PAY-' . str_pad($pay->id, 4, '0', STR_PAD_LEFT),
                     'employer_name' => $pay->user_name ?: 'System Guest / Sponsor',
                     'employer_email' => $pay->user_email ?: 'no-email@marketplace.com',
-                    'amount' => number_format((float)$pay->amount, 2) . ' AED',
-                    'description' => $pay->description ?: 'Subscription Plan',
-                    'status' => ucfirst($pay->status),
+                    'amount' => number_format((float)$pay->amount_aed, 2) . ' AED',
+                    'description' => $planLabel,
+                    'status' => $pay->status === 'active' ? 'Success' : ucfirst($pay->status),
                     'date' => date('Y-m-d H:i', strtotime($pay->created_at)),
                 ];
             };
diff --git a/app/Http/Controllers/Admin/DashboardController.php b/app/Http/Controllers/Admin/DashboardController.php
index d7da971..65ce54d 100644
--- a/app/Http/Controllers/Admin/DashboardController.php
+++ b/app/Http/Controllers/Admin/DashboardController.php
@@ -18,14 +18,19 @@ public function index()
         $activeWorkers = \App\Models\Worker::where('status', 'active')->count();
         $inactiveWorkers = $totalWorkers - $activeWorkers;
         
-        $totalSponsors = \App\Models\Sponsor::count();
-        $activeSponsors = \App\Models\Sponsor::where('status', 'active')->count();
-        $inactiveSponsors = $totalSponsors - $activeSponsors;
+        $totalEmployers = \App\Models\User::where('role', 'employer')->count();
+        $activeEmployers = \App\Models\User::where('role', 'employer')
+            ->where(function($query) {
+                $query->whereHas('sponsor', function($q) {
+                    $q->where('status', 'active');
+                })->orWhereDoesntHave('sponsor');
+            })->count();
+        $inactiveEmployers = $totalEmployers - $activeEmployers;
         
-        $activeSubs = \App\Models\Sponsor::where('subscription_status', 'active')->count();
-        $expiredSubs = \App\Models\Sponsor::where('subscription_status', 'expired')->count();
-        $newSponsors = \App\Models\Sponsor::where('created_at', '>=', now()->subDays(7))->count();
-        $revenueSum = \Illuminate\Support\Facades\DB::table('payments')->where('status', 'success')->sum('amount');
+        $activeSubs = \Illuminate\Support\Facades\DB::table('subscriptions')->where('status', 'active')->count();
+        $expiredSubs = \Illuminate\Support\Facades\DB::table('subscriptions')->where('status', 'expired')->count();
+        $newEmployers = \App\Models\User::where('role', 'employer')->where('created_at', '>=', now()->subDays(7))->count();
+        $revenueSum = \Illuminate\Support\Facades\DB::table('subscriptions')->where('status', 'active')->sum('amount_aed');
 
         // Dynamic conversion rates
         $verifiedCount = \App\Models\Worker::where('verified', true)->count();
@@ -51,15 +56,18 @@ public function index()
             $monthStart = $date->copy()->startOfMonth();
             $monthEnd = $date->copy()->endOfMonth();
             
-            $basic = \App\Models\Sponsor::where('subscription_plan', 'basic')
+            $basic = \Illuminate\Support\Facades\DB::table('subscriptions')
+                ->where('plan_id', 'basic')
                 ->whereBetween('created_at', [$monthStart, $monthEnd])
                 ->count();
                 
-            $premium = \App\Models\Sponsor::where('subscription_plan', 'premium')
+            $premium = \Illuminate\Support\Facades\DB::table('subscriptions')
+                ->where('plan_id', 'premium')
                 ->whereBetween('created_at', [$monthStart, $monthEnd])
                 ->count();
                 
-            $vip = \App\Models\Sponsor::where('subscription_plan', 'vip')
+            $vip = \Illuminate\Support\Facades\DB::table('subscriptions')
+                ->whereIn('plan_id', ['vip', 'enterprise'])
                 ->whereBetween('created_at', [$monthStart, $monthEnd])
                 ->count();
 
@@ -85,12 +93,12 @@ public function index()
             'total_workers' => $totalWorkers,
             'active_workers' => $activeWorkers,
             'inactive_workers' => $inactiveWorkers,
-            'total_employers' => $totalSponsors,
-            'active_employers' => $activeSponsors,
-            'inactive_employers' => $inactiveSponsors,
+            'total_employers' => $totalEmployers,
+            'active_employers' => $activeEmployers,
+            'inactive_employers' => $inactiveEmployers,
             'active_subscriptions' => $activeSubs,
             'revenue_this_month_aed' => $revenueSum,
-            'new_employers_this_week' => $newSponsors,
+            'new_employers_this_week' => $newEmployers,
             'expired_subscriptions' => $expiredSubs,
             'hiring_conversion_rate' => $hiringConversionRate, 
             'chat_to_hire_rate' => $chatToHireRate, 
@@ -132,20 +140,23 @@ public function index()
                 ];
             })->toArray();
 
-        // Fetch recent subscriptions from Sponsors table
-        $recentSponsorsWithPlans = \App\Models\Sponsor::whereNotNull('subscription_plan')
-            ->latest('created_at')
+        // Fetch recent subscriptions from subscriptions table
+        $recentSubs = \Illuminate\Support\Facades\DB::table('subscriptions')
+            ->leftJoin('users', 'subscriptions.user_id', '=', 'users.id')
+            ->select('subscriptions.*', 'users.name as employer_name')
+            ->latest('subscriptions.created_at')
             ->take(5)
             ->get();
 
         $recentSubscriptions = [];
-        foreach ($recentSponsorsWithPlans as $sp) {
+        foreach ($recentSubs as $sub) {
+            $planName = ucfirst($sub->plan_id) . ' Pass';
             $recentSubscriptions[] = [
-                'id' => $sp->id,
-                'employer_name' => $sp->full_name,
-                'plan_name' => ucfirst($sp->subscription_plan) . ' Pass',
-                'amount_aed' => $sp->subscription_plan === 'vip' ? 499 : ($sp->subscription_plan === 'premium' ? 199 : 99),
-                'subscribed_at' => $sp->created_at->diffForHumans(),
+                'id' => $sub->id,
+                'employer_name' => $sub->employer_name ?: 'System Guest / Sponsor',
+                'plan_name' => $planName,
+                'amount_aed' => (float)$sub->amount_aed,
+                'subscribed_at' => \Carbon\Carbon::parse($sub->created_at)->diffForHumans(),
             ];
         }
 
diff --git a/app/Http/Controllers/Admin/FaqController.php b/app/Http/Controllers/Admin/FaqController.php
new file mode 100644
index 0000000..f6611da
--- /dev/null
+++ b/app/Http/Controllers/Admin/FaqController.php
@@ -0,0 +1,87 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Models\Faq;
+use Inertia\Inertia;
+
+class FaqController extends Controller
+{
+    public function index()
+    {
+        $faqs = Faq::orderBy('id', 'desc')->get()->map(function ($faq) {
+            return [
+                'id' => $faq->id,
+                'question' => $faq->question,
+                'answer' => $faq->answer,
+                'category' => $faq->category,
+                'is_published' => (bool)$faq->is_published,
+                'created_at' => $faq->created_at->format('Y-m-d H:i'),
+            ];
+        });
+
+        return Inertia::render('Admin/Faqs/Index', [
+            'faqs' => $faqs
+        ]);
+    }
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'question' => 'required|string|max:1000',
+            'answer' => 'required|string|max:5000',
+            'category' => 'nullable|string|max:255',
+            'is_published' => 'boolean'
+        ]);
+
+        $question = trim($request->question);
+        if (!str_ends_with($question, '?')) {
+            $question .= '?';
+        }
+
+        Faq::create([
+            'question' => $question,
+            'answer' => $request->answer,
+            'category' => $request->category ?: 'General',
+            'is_published' => $request->has('is_published') ? $request->is_published : true,
+        ]);
+
+        return redirect()->back()->with('success', 'FAQ created successfully.');
+    }
+
+    public function update(Request $request, $id)
+    {
+        $faq = Faq::findOrFail($id);
+
+        $request->validate([
+            'question' => 'required|string|max:1000',
+            'answer' => 'required|string|max:5000',
+            'category' => 'nullable|string|max:255',
+            'is_published' => 'boolean'
+        ]);
+
+        $question = trim($request->question);
+        if (!str_ends_with($question, '?')) {
+            $question .= '?';
+        }
+
+        $faq->update([
+            'question' => $question,
+            'answer' => $request->answer,
+            'category' => $request->category ?: 'General',
+            'is_published' => $request->has('is_published') ? $request->is_published : true,
+        ]);
+
+        return redirect()->back()->with('success', 'FAQ updated successfully.');
+    }
+
+    public function destroy($id)
+    {
+        $faq = Faq::findOrFail($id);
+        $faq->delete();
+
+        return redirect()->back()->with('success', 'FAQ deleted successfully.');
+    }
+}
diff --git a/app/Http/Controllers/Admin/SponsorController.php b/app/Http/Controllers/Admin/SponsorController.php
index 957f537..44d0f4d 100644
--- a/app/Http/Controllers/Admin/SponsorController.php
+++ b/app/Http/Controllers/Admin/SponsorController.php
@@ -15,7 +15,9 @@ class SponsorController extends Controller
      */
     public function index(Request $request)
     {
-        $query = Sponsor::query();
+        $query = Sponsor::whereNotIn('email', function($q) {
+            $q->select('email')->from('users')->where('role', 'employer');
+        });
 
         // Server-side Search
         if ($request->filled('search')) {
@@ -95,9 +97,15 @@ public function index(Request $request)
 
         // Global stats counts (removing Active plans / Pending approval, replacing with Total, Verified, Suspended)
         $stats = [
-            'total' => Sponsor::count(),
-            'verified' => Sponsor::where('is_verified', true)->count(),
-            'suspended' => Sponsor::where('status', 'suspended')->count(),
+            'total' => Sponsor::whereNotIn('email', function($q) {
+                $q->select('email')->from('users')->where('role', 'employer');
+            })->count(),
+            'verified' => Sponsor::whereNotIn('email', function($q) {
+                $q->select('email')->from('users')->where('role', 'employer');
+            })->where('is_verified', true)->count(),
+            'suspended' => Sponsor::whereNotIn('email', function($q) {
+                $q->select('email')->from('users')->where('role', 'employer');
+            })->where('status', 'suspended')->count(),
         ];
 
         return Inertia::render('Admin/CharityOrganizations/Index', [
@@ -113,7 +121,9 @@ public function index(Request $request)
      */
     public function export(Request $request)
     {
-        $query = Sponsor::query();
+        $query = Sponsor::whereNotIn('email', function($q) {
+            $q->select('email')->from('users')->where('role', 'employer');
+        });
 
         // Server-side Search
         if ($request->filled('search')) {
diff --git a/app/Http/Controllers/Api/EmployerPaymentController.php b/app/Http/Controllers/Api/EmployerPaymentController.php
index e85a321..d5e0ed6 100644
--- a/app/Http/Controllers/Api/EmployerPaymentController.php
+++ b/app/Http/Controllers/Api/EmployerPaymentController.php
@@ -22,49 +22,28 @@ public function getPayments(Request $request)
         try {
             $employerId = $employer->id;
 
-            // Auto-seed payments if none exist for a richer UX
-            $paymentsCount = Payment::where('user_id', $employerId)->count();
-            if ($paymentsCount === 0) {
-                // Determine their plan
-                $subscription = DB::table('subscriptions')->where('user_id', $employerId)->first();
-                $planName = $subscription ? (ucfirst($subscription->plan_id) . ' Pass Subscription') : 'Premium Sponsor Pass Subscription';
-                $planAmount = $subscription ? $subscription->amount_aed : 199.00;
-
-                for ($i = 0; $i < 8; $i++) {
-                    Payment::create([
-                        'user_id' => $employerId,
-                        'amount' => $planAmount,
-                        'currency' => 'AED',
-                        'description' => $planName,
-                        'status' => 'success',
-                        'created_at' => now()->subMonths($i)->subDays(rand(1, 5)),
-                        'updated_at' => now()->subMonths($i)->subDays(rand(1, 5)),
-                    ]);
-                }
-            }
-
             $page = (int)$request->input('page', 1);
             $perPage = (int)$request->input('per_page', 15);
 
-            $query = Payment::where('user_id', $employerId)
-                ->where(function ($q) {
-                    $q->where('description', 'like', '%Subscription%')
-                      ->orWhere('description', 'like', '%Pass%');
-                })
-                ->latest();
+            $query = DB::table('subscriptions')
+                ->where('user_id', $employerId)
+                ->orderBy('created_at', 'desc');
+
             $total = $query->count();
             $offset = ($page - 1) * $perPage;
 
             $payments = $query->skip($offset)->take($perPage)->get()
-                ->map(function ($payment) {
+                ->map(function ($sub) {
+                    $planLabel = ucfirst($sub->plan_id) . ' Sponsor Pass';
+                    $startsAt = $sub->starts_at ?? $sub->created_at;
                     return [
-                        'id' => $payment->id,
-                        'amount' => (float)$payment->amount,
-                        'currency' => $payment->currency,
-                        'description' => $payment->description,
-                        'status' => $payment->status,
-                        'date' => $payment->created_at->format('Y-m-d H:i:s'),
-                        'formatted_date' => $payment->created_at->format('M d, Y'),
+                        'id' => $sub->id,
+                        'amount' => (float)$sub->amount_aed,
+                        'currency' => 'AED',
+                        'description' => $planLabel,
+                        'status' => $sub->status === 'active' ? 'success' : $sub->status,
+                        'date' => date('Y-m-d H:i:s', strtotime($startsAt)),
+                        'formatted_date' => date('M d, Y', strtotime($startsAt)),
                     ];
                 });
 
diff --git a/app/Http/Controllers/Employer/ProfileController.php b/app/Http/Controllers/Employer/ProfileController.php
index a362965..3b2198f 100644
--- a/app/Http/Controllers/Employer/ProfileController.php
+++ b/app/Http/Controllers/Employer/ProfileController.php
@@ -8,7 +8,6 @@
 use App\Models\User;
 use App\Models\EmployerProfile;
 use Illuminate\Support\Facades\Hash;
-use Illuminate\Validation\Rules\Password;
 
 class ProfileController extends Controller
 {
@@ -36,6 +35,32 @@ private function resolveCurrentUser()
         return null;
     }
 
+    private function buildProfileData($user, $profile)
+    {
+        return [
+            'name' => $user->name,
+            'email' => $user->email,
+            'phone' => $profile->phone ?? '+971509990001',
+            'emirates_id' => [
+                'emirates_id_number' => $profile->emirates_id_number ?? '784-1988-5310327-2',
+                'name' => $profile->emirates_id_name ?? $user->name,
+                'date_of_birth' => $profile->emirates_id_dob ?? '1990-01-01',
+                'nationality' => $profile->nationality ?? 'Emirati',
+                'issue_date' => $profile->emirates_id_issue_date ?? '2023-04-11',
+                'expiry_date' => $profile->emirates_id_expiry ?? '2028-04-11',
+                'employer' => $profile->emirates_id_employer ?? 'Federal Authority',
+                'issue_place' => $profile->emirates_id_issue_place ?? 'Abu Dhabi',
+                'occupation' => $profile->emirates_id_occupation ?? 'Manager',
+            ],
+            'fcm_token' => $user->fcm_token ?? 'fcm_token_example',
+            'address' => $profile->address ?? 'Villa 45, Street 12',
+            'property_type' => $profile->property_type,
+            'profile_photo_url' => $profile->profile_photo_url,
+            'email_notifications' => (bool)($profile->email_notifications ?? true),
+            'push_notifications' => (bool)($profile->push_notifications ?? true),
+        ];
+    }
+
     public function index(Request $request)
     {
         $user = $this->resolveCurrentUser();
@@ -48,35 +73,59 @@ public function index(Request $request)
         if (!$profile) {
             $profile = EmployerProfile::create([
                 'user_id' => $user->id,
-                'company_name' => 'Al Mansoor Household',
-                'phone' => '+971 50 123 4567',
-                'emirates_id_status' => 'approved',
+                'phone' => '+971509990001',
+                'emirates_id_number' => '784-1988-5310327-2',
+                'emirates_id_name' => 'Ahmad Bin Ahmed',
+                'emirates_id_dob' => '1990-01-01',
+                'nationality' => 'Emirati',
+                'emirates_id_issue_date' => '2023-04-11',
+                'emirates_id_expiry' => '2028-04-11',
+                'emirates_id_employer' => 'Federal Authority',
+                'emirates_id_issue_place' => 'Abu Dhabi',
+                'emirates_id_occupation' => 'Manager',
+                'address' => 'Villa 45, Street 12',
             ]);
         }
 
-        $employerProfile = [
-            'name' => $user->name,
-            'email' => $user->email,
-            'company_name' => $profile->company_name,
-            'phone' => $profile->phone,
-            'language' => $profile->language ?? 'English',
-            'notifications' => (bool)($profile->notifications ?? true),
-            'nationality' => $profile->nationality,
-            'family_size' => $profile->family_size,
-            'accommodation' => $profile->accommodation,
-            'district' => $profile->district,
-            'emirates_id_front' => $profile->emirates_id_front,
-            'emirates_id_back' => $profile->emirates_id_back,
-            'verification_status' => $profile->verification_status ?? 'pending',
-            'emirates_id_number' => $profile->emirates_id_number,
-            'emirates_id_expiry' => $profile->emirates_id_expiry,
-        ];
+        $employerProfile = $this->buildProfileData($user, $profile);
 
         return Inertia::render('Employer/Profile', [
             'employerProfile' => $employerProfile,
         ]);
     }
 
+    public function edit(Request $request)
+    {
+        $user = $this->resolveCurrentUser();
+        if (!$user) {
+            return redirect()->route('employer.dashboard');
+        }
+
+        $profile = $user->employerProfile;
+        if (!$profile) {
+            $profile = EmployerProfile::create([
+                'user_id' => $user->id,
+                'phone' => '+971509990001',
+                'emirates_id_number' => '784-1988-5310327-2',
+                'emirates_id_name' => 'Ahmad Bin Ahmed',
+                'emirates_id_dob' => '1990-01-01',
+                'nationality' => 'Emirati',
+                'emirates_id_issue_date' => '2023-04-11',
+                'emirates_id_expiry' => '2028-04-11',
+                'emirates_id_employer' => 'Federal Authority',
+                'emirates_id_issue_place' => 'Abu Dhabi',
+                'emirates_id_occupation' => 'Manager',
+                'address' => 'Villa 45, Street 12',
+            ]);
+        }
+
+        $employerProfile = $this->buildProfileData($user, $profile);
+
+        return Inertia::render('Employer/ProfileEdit', [
+            'employerProfile' => $employerProfile,
+        ]);
+    }
+
     public function update(Request $request)
     {
         $user = $this->resolveCurrentUser();
@@ -97,17 +146,20 @@ public function update(Request $request)
                 $sponsor ? 'unique:sponsors,email,' . $sponsor->id : 'unique:sponsors,email',
             ],
             'phone' => 'required|string|max:255',
-            'company_name' => 'required|string|max:255',
-            'language' => 'required|string|in:English,Arabic,english,arabic',
-            'notifications' => 'required|boolean',
+            'company_name' => 'nullable|string|max:255',
+            'language' => 'nullable|string|in:English,Arabic,english,arabic',
+            'notifications' => 'nullable|boolean',
             'nationality' => 'nullable|string|max:255',
             'family_size' => 'nullable|string|max:255',
             'accommodation' => 'nullable|string|max:255',
             'district' => 'nullable|string|max:255',
             'emirates_id_front' => 'nullable|file|image|max:10240',
             'emirates_id_back' => 'nullable|file|image|max:10240',
-            'current_password' => 'nullable|required_with:new_password|string',
-            'new_password' => 'nullable|string|min:8|confirmed',
+            'address' => 'nullable|string|max:255',
+            'property_type' => 'nullable|string|max:255',
+            'profile_photo' => 'nullable|image|max:10240',
+            'email_notifications' => 'nullable|boolean',
+            'push_notifications' => 'nullable|boolean',
         ]);
 
         $oldEmail = $user->getOriginal('email') ?? $user->email;
@@ -133,17 +185,43 @@ public function update(Request $request)
         if (!$profile) {
             $profile = new EmployerProfile(['user_id' => $user->id]);
         }
-        $profile->company_name = $request->company_name;
         $profile->phone = $request->phone;
-        $profile->language = ucfirst(strtolower($request->language));
-        $profile->notifications = $request->notifications;
         
-        $profile->nationality = $request->nationality;
-        $profile->family_size = $request->family_size;
-        $profile->accommodation = $request->accommodation;
-        $profile->district = $request->district;
+        if ($request->has('company_name')) {
+            $profile->company_name = $request->company_name;
+        }
+        if ($request->has('language')) {
+            $profile->language = ucfirst(strtolower($request->language));
+        }
+        if ($request->has('notifications')) {
+            $profile->notifications = $request->notifications;
+        }
+        if ($request->has('nationality')) {
+            $profile->nationality = $request->nationality;
+        }
+        if ($request->has('family_size')) {
+            $profile->family_size = $request->family_size;
+        }
+        if ($request->has('accommodation')) {
+            $profile->accommodation = $request->accommodation;
+        }
+        if ($request->has('district')) {
+            $profile->district = $request->district;
+        }
+        if ($request->has('address')) {
+            $profile->address = $request->address;
+        }
+        if ($request->has('property_type')) {
+            $profile->property_type = $request->property_type;
+        }
+        if ($request->has('email_notifications')) {
+            $profile->email_notifications = $request->email_notifications;
+        }
+        if ($request->has('push_notifications')) {
+            $profile->push_notifications = $request->push_notifications;
+        }
 
-        // Document uploads with OCR extraction and PDPL compliance secure purge
+        // Handle physical uploads/OCR for Emirates ID
         $uploaded = false;
         $extractedIdNumber = null;
         $extractedExpiry = null;
@@ -175,18 +253,15 @@ public function update(Request $request)
             $profile->verification_status = 'approved';
         }
 
-        $profile->save();
-
-        // Update Password if provided
-        if ($request->filled('new_password')) {
-            if (!Hash::check($request->current_password, $user->password)) {
-                return back()->withErrors(['current_password' => 'The provided password does not match your current password.']);
-            }
-            $user->update([
-                'password' => Hash::make($request->new_password),
-            ]);
+        // Handle profile photo upload
+        if ($request->hasFile('profile_photo')) {
+            $file = $request->file('profile_photo');
+            $path = $file->store('profile_photos', 'public');
+            $profile->profile_photo_url = asset('storage/' . $path);
         }
 
+        $profile->save();
+
         // Update session user name/email
         session(['user' => (object)[
             'id' => $user->id,
@@ -194,9 +269,9 @@ public function update(Request $request)
             'email' => $user->email,
             'role' => 'employer',
             'subscription_status' => $user->subscription_status ?? 'active',
-            'verification_status' => $profile->verification_status,
+            'verification_status' => $profile->verification_status ?? 'approved',
         ]]);
 
-        return back()->with('success', 'Profile updated successfully.');
+        return redirect()->route('employer.profile')->with('success', 'Profile updated successfully.');
     }
 }
diff --git a/app/Http/Controllers/Employer/SupportTicketController.php b/app/Http/Controllers/Employer/SupportTicketController.php
index 8be09fa..825babe 100644
--- a/app/Http/Controllers/Employer/SupportTicketController.php
+++ b/app/Http/Controllers/Employer/SupportTicketController.php
@@ -58,8 +58,20 @@ public function index(Request $request)
                 ];
             });
 
+        $faqs = \App\Models\Faq::where('is_published', true)
+            ->orderBy('id', 'asc')
+            ->get()
+            ->map(function ($faq) {
+                return [
+                    'id' => $faq->id,
+                    'question' => $faq->question,
+                    'answer' => $faq->answer,
+                ];
+            });
+
         return Inertia::render('Employer/Support/Index', [
             'tickets' => $tickets,
+            'faqs' => $faqs,
         ]);
     }
 
diff --git a/app/Models/EmployerProfile.php b/app/Models/EmployerProfile.php
index 094ae88..06bbaf1 100644
--- a/app/Models/EmployerProfile.php
+++ b/app/Models/EmployerProfile.php
@@ -29,6 +29,10 @@ class EmployerProfile extends Model
         'emirates_id_employer',
         'emirates_id_issue_place',
         'emirates_id_occupation',
-        'address'
+        'address',
+        'property_type',
+        'profile_photo_url',
+        'email_notifications',
+        'push_notifications'
     ];
 }
diff --git a/app/Models/Faq.php b/app/Models/Faq.php
new file mode 100644
index 0000000..28db8c1
--- /dev/null
+++ b/app/Models/Faq.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Faq extends Model
+{
+    protected $fillable = [
+        'question',
+        'answer',
+        'category',
+        'is_published'
+    ];
+}
diff --git a/database/migrations/2026_06_19_134127_add_property_type_and_profile_photo_url_to_employer_profiles.php b/database/migrations/2026_06_19_134127_add_property_type_and_profile_photo_url_to_employer_profiles.php
new file mode 100644
index 0000000..239e8db
--- /dev/null
+++ b/database/migrations/2026_06_19_134127_add_property_type_and_profile_photo_url_to_employer_profiles.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('employer_profiles', function (Blueprint $table) {
+            $table->string('property_type')->nullable();
+            $table->string('profile_photo_url')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('employer_profiles', function (Blueprint $table) {
+            $table->dropColumn(['property_type', 'profile_photo_url']);
+        });
+    }
+};
diff --git a/database/migrations/2026_06_19_134828_add_notification_toggles_to_employer_profiles.php b/database/migrations/2026_06_19_134828_add_notification_toggles_to_employer_profiles.php
new file mode 100644
index 0000000..7691c9b
--- /dev/null
+++ b/database/migrations/2026_06_19_134828_add_notification_toggles_to_employer_profiles.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('employer_profiles', function (Blueprint $table) {
+            $table->boolean('email_notifications')->default(true);
+            $table->boolean('push_notifications')->default(true);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('employer_profiles', function (Blueprint $table) {
+            $table->dropColumn(['email_notifications', 'push_notifications']);
+        });
+    }
+};
diff --git a/database/migrations/2026_06_19_141645_create_faqs_table.php b/database/migrations/2026_06_19_141645_create_faqs_table.php
new file mode 100644
index 0000000..c8e6f7a
--- /dev/null
+++ b/database/migrations/2026_06_19_141645_create_faqs_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('faqs', function (Blueprint $table) {
+            $table->id();
+            $table->text('question');
+            $table->text('answer');
+            $table->string('category')->default('General');
+            $table->boolean('is_published')->default(true);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('faqs');
+    }
+};
diff --git a/resources/js/Layouts/AdminLayout.jsx b/resources/js/Layouts/AdminLayout.jsx
index 3241bed..1c1dc68 100644
--- a/resources/js/Layouts/AdminLayout.jsx
+++ b/resources/js/Layouts/AdminLayout.jsx
@@ -19,7 +19,8 @@ import {
     List,
     LifeBuoy,
     Heart,
-    Building
+    Building,
+    HelpCircle
 } from 'lucide-react';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 
@@ -37,8 +38,8 @@ export default function AdminLayout({ children, title = 'Dashboard' }) {
         { name: 'OCR Verification', href: '/admin/workers/verifications', icon: ShieldCheck },
         { name: 'Safety & Moderation', href: '/admin/safety', icon: ShieldAlert },
         { name: 'Support Tickets', href: '/admin/tickets', icon: LifeBuoy },
+        { name: 'Frequently Asked Questions', href: '/admin/faqs', icon: HelpCircle },
         { name: 'Payments', href: '/admin/payments', icon: BadgeDollarSign },
-        { name: 'Campaigns & Alerts', href: '/admin/notifications', icon: BellRing },
         { name: 'Reports & Analytics', href: '/admin/analytics', icon: BarChart3 },
         { name: 'System Audit Logs', href: '/admin/audit-logs', icon: History },
         { name: 'Charity Events', href: '/admin/events', icon: Heart },
diff --git a/resources/js/Layouts/EmployerLayout.jsx b/resources/js/Layouts/EmployerLayout.jsx
index c841f5f..b3413eb 100644
--- a/resources/js/Layouts/EmployerLayout.jsx
+++ b/resources/js/Layouts/EmployerLayout.jsx
@@ -252,11 +252,7 @@ export default function EmployerLayout({ children, title, fullPage = false }) {
                                     </DropdownMenuContent>
                                 </DropdownMenu>
 
-                                {/* Chat/Notifications */}
-                                <Link href="/employer/messages" className="relative p-2.5 text-slate-500 hover:text-[#185FA5] hover:bg-blue-50 rounded-xl transition-all group">
-                                    <MessageSquare className="w-5 h-5" />
-                                    <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white group-hover:scale-110 transition-transform" />
-                                </Link>
+
 
                                 {/* Profile Section with Dropdown */}
                                 <DropdownMenu>
diff --git a/resources/js/Pages/Admin/Faqs/Index.jsx b/resources/js/Pages/Admin/Faqs/Index.jsx
new file mode 100644
index 0000000..0e0e27c
--- /dev/null
+++ b/resources/js/Pages/Admin/Faqs/Index.jsx
@@ -0,0 +1,285 @@
+import React, { useState } from 'react';
+import { Head, router } from '@inertiajs/react';
+import AdminLayout from '@/Layouts/AdminLayout';
+import { 
+    Plus, 
+    Search, 
+    Edit2, 
+    Trash2, 
+    HelpCircle,
+    Info
+} from 'lucide-react';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+} from "@/components/ui/dialog";
+
+export default function FaqsIndex({ faqs }) {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [editingFaq, setEditingFaq] = useState(null);
+    
+    const [questionText, setQuestionText] = useState('');
+    const [answerText, setAnswerText] = useState('');
+    const [isPublished, setIsPublished] = useState(true);
+    const [error, setError] = useState('');
+
+    const handleOpenAdd = () => {
+        setEditingFaq(null);
+        setQuestionText('');
+        setAnswerText('');
+        setIsPublished(true);
+        setError('');
+        setIsDialogOpen(true);
+    };
+
+    const handleOpenEdit = (faq) => {
+        setEditingFaq(faq);
+        setQuestionText(faq.question);
+        setAnswerText(faq.answer);
+        setIsPublished(faq.is_published);
+        setError('');
+        setIsDialogOpen(true);
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (!questionText.trim()) {
+            setError('Question is required.');
+            return;
+        }
+        if (!answerText.trim()) {
+            setError('Answer is required.');
+            return;
+        }
+
+        const payload = {
+            question: questionText.trim(),
+            answer: answerText.trim(),
+            is_published: isPublished
+        };
+
+        if (editingFaq) {
+            router.post(`/admin/faqs/${editingFaq.id}`, payload, {
+                onSuccess: () => {
+                    setIsDialogOpen(false);
+                },
+                onError: (err) => {
+                    setError(Object.values(err)[0] || 'Failed to update FAQ.');
+                }
+            });
+        } else {
+            router.post('/admin/faqs', payload, {
+                onSuccess: () => {
+                    setIsDialogOpen(false);
+                },
+                onError: (err) => {
+                    setError(Object.values(err)[0] || 'Failed to add FAQ.');
+                }
+            });
+        }
+    };
+
+    const handleDelete = (id) => {
+        if (confirm('Are you sure you want to delete this FAQ?')) {
+            router.delete(`/admin/faqs/${id}`);
+        }
+    };
+
+    const filteredFaqs = faqs.filter(faq => 
+        faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        faq.answer.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    return (
+        <AdminLayout title="FAQ Management">
+            <Head title="Master Data - FAQ Management" />
+
+            <div className="max-w-4xl mx-auto space-y-6">
+                {/* Header Actions */}
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                    <div className="relative flex-1 max-w-sm">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                        <input 
+                            type="text" 
+                            placeholder="Find FAQ..." 
+                            value={searchTerm}
+                            onChange={e => setSearchTerm(e.target.value)}
+                            className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm font-medium focus:ring-4 focus:ring-teal-500/10 outline-none transition-all"
+                        />
+                    </div>
+                    <button 
+                        onClick={handleOpenAdd}
+                        className="bg-[#0F6E56] text-white px-6 py-2.5 rounded-xl text-sm font-bold flex items-center justify-center space-x-2 hover:bg-[#085041] transition-all shadow-lg shadow-teal-500/10 cursor-pointer"
+                    >
+                        <Plus className="w-4 h-4" />
+                        <span>Add FAQ</span>
+                    </button>
+                </div>
+
+                {/* FAQs Card */}
+                <div className="bg-white rounded-[24px] border border-slate-200 shadow-sm overflow-hidden">
+                    <div className="p-6 border-b border-slate-50 bg-slate-50/30">
+                        <div className="flex items-center space-x-3">
+                            <div className="p-2 bg-teal-50 rounded-lg">
+                                <HelpCircle className="w-5 h-5 text-[#0F6E56]" />
+                            </div>
+                            <div>
+                                <h2 className="text-sm font-black text-slate-900 uppercase tracking-tight font-sans">Frequently Asked Questions</h2>
+                                <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-0.5 font-sans">Manage support & compliance FAQs displayed to users</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Table>
+                        <TableHeader>
+                            <TableRow className="bg-white hover:bg-white">
+                                <TableHead className="font-bold text-slate-400 text-[10px] uppercase tracking-widest h-12 pl-6">Question & Answer</TableHead>
+                                <TableHead className="font-bold text-slate-400 text-[10px] uppercase tracking-widest h-12">Status</TableHead>
+                                <TableHead className="font-bold text-slate-400 text-[10px] uppercase tracking-widest h-12 text-right pr-6">Action</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {filteredFaqs.length > 0 ? (
+                                filteredFaqs.map((faq) => (
+                                    <TableRow key={faq.id} className="hover:bg-slate-50/50 transition-colors group">
+                                        <TableCell className="py-4 pl-6 max-w-[500px]">
+                                            <div className="space-y-1">
+                                                <div className="font-bold text-slate-900 text-sm leading-snug">
+                                                    {faq.question.trim().endsWith('?') ? faq.question.trim() : faq.question.trim() + '?'}
+                                                </div>
+                                                <div className="text-slate-500 text-xs font-medium leading-relaxed line-clamp-2">{faq.answer}</div>
+                                            </div>
+                                        </TableCell>
+                                        <TableCell className="align-middle">
+                                            <span className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-tight ${
+                                                faq.is_published 
+                                                    ? 'bg-emerald-50 text-emerald-600' 
+                                                    : 'bg-slate-100 text-slate-500'
+                                            }`}>
+                                                {faq.is_published ? 'Published' : 'Draft'}
+                                            </span>
+                                        </TableCell>
+                                        <TableCell className="text-right pr-6 align-middle">
+                                            <div className="flex items-center justify-end space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                                <button 
+                                                    onClick={() => handleOpenEdit(faq)}
+                                                    className="p-2 text-slate-400 hover:text-[#0F6E56] hover:bg-teal-50 rounded-lg transition-all cursor-pointer"
+                                                >
+                                                    <Edit2 className="w-4 h-4" />
+                                                </button>
+                                                <button 
+                                                    onClick={() => handleDelete(faq.id)}
+                                                    className="p-2 text-slate-400 hover:text-rose-500 hover:bg-rose-50 rounded-lg transition-all cursor-pointer"
+                                                >
+                                                    <Trash2 className="w-4 h-4" />
+                                                </button>
+                                            </div>
+                                        </TableCell>
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell colSpan={3} className="py-12 text-center text-slate-400 font-bold text-xs">
+                                        No FAQs found. Add one to get started!
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+
+                    <div className="p-6 bg-slate-50/50 border-t border-slate-100">
+                        <div className="flex items-start space-x-3 text-slate-400">
+                            <Info className="w-4 h-4 shrink-0 mt-0.5" />
+                            <p className="text-[10px] font-bold uppercase tracking-wide leading-relaxed">
+                                Tip: Draft FAQs will not be visible on user-facing support panels. Publish them to make them active.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* FAQ Add/Edit Modal */}
+            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+                <DialogContent className="sm:max-w-[500px] rounded-[24px] bg-white">
+                    <DialogHeader>
+                        <DialogTitle className="text-xl font-black text-slate-900 tracking-tight">
+                            {editingFaq ? 'Edit FAQ' : 'New FAQ'}
+                        </DialogTitle>
+                    </DialogHeader>
+                    
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        <div className="py-4 space-y-4">
+                            <div className="space-y-2">
+                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Question</label>
+                                <input 
+                                    className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold focus:ring-4 focus:ring-teal-500/10 outline-none" 
+                                    placeholder="e.g. How do I request a refund?" 
+                                    value={questionText}
+                                    onChange={e => setQuestionText(e.target.value)}
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Answer</label>
+                                <textarea 
+                                    className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold focus:ring-4 focus:ring-teal-500/10 outline-none min-h-[120px] resize-none" 
+                                    placeholder="Describe the answer in detail..." 
+                                    value={answerText}
+                                    onChange={e => setAnswerText(e.target.value)}
+                                />
+                                {error && (
+                                    <p className="text-xs text-rose-600 font-bold ml-1">{error}</p>
+                                )}
+                            </div>
+
+                            <div className="flex items-center space-x-3 pt-2">
+                                <button
+                                    type="button"
+                                    onClick={() => setIsPublished(!isPublished)}
+                                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${
+                                        isPublished ? 'bg-[#0F6E56]' : 'bg-slate-200'
+                                    }`}
+                                >
+                                    <span
+                                        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                                            isPublished ? 'translate-x-6' : 'translate-x-1'
+                                        }`}
+                                    />
+                                </button>
+                                <span className="text-xs font-bold text-slate-600">Publish Immediately</span>
+                            </div>
+                        </div>
+
+                        <DialogFooter className="sm:justify-end gap-3 pt-4 border-t border-slate-100">
+                            <button 
+                                type="button"
+                                onClick={() => setIsDialogOpen(false)}
+                                className="px-6 py-2.5 rounded-xl text-sm font-bold text-slate-400 uppercase tracking-widest hover:bg-slate-50 transition-colors"
+                            >
+                                Cancel
+                            </button>
+                            <button 
+                                type="submit"
+                                className="bg-[#0F6E56] text-white px-8 py-2.5 rounded-xl text-sm font-bold uppercase tracking-widest shadow-lg shadow-teal-500/20 active:scale-95 transition-all cursor-pointer"
+                            >
+                                {editingFaq ? 'Update' : 'Add FAQ'}
+                            </button>
+                        </DialogFooter>
+                    </form>
+                </DialogContent>
+            </Dialog>
+        </AdminLayout>
+    );
+}
diff --git a/resources/js/Pages/Admin/Support/Index.jsx b/resources/js/Pages/Admin/Support/Index.jsx
index d97e8cd..7677dff 100644
--- a/resources/js/Pages/Admin/Support/Index.jsx
+++ b/resources/js/Pages/Admin/Support/Index.jsx
@@ -174,6 +174,32 @@ export default function Index({ tickets, filters }) {
                     </div>
                 </div>
 
+                {/* Frequently Asked Questions */}
+                <div className="bg-white rounded-3xl border border-slate-200 p-8 shadow-sm space-y-6">
+                    <div className="flex items-center gap-2 pb-2">
+                        <MessageSquare className="w-5 h-5 text-[#185FA5]" />
+                        <h3 className="text-base font-bold text-slate-900">Frequently Asked Questions</h3>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        {/* FAQ 1 */}
+                        <div className="p-6 bg-slate-50/50 hover:bg-slate-100/50 rounded-2xl border border-slate-150 transition-colors">
+                            <h4 className="text-sm font-bold text-slate-800">How long does a ticket resolution take?</h4>
+                            <p className="text-xs text-slate-500 font-medium leading-relaxed mt-2">
+                                For priority high tickets, our engineering support response is typically under 2 hours. General queries resolve within 24 hours.
+                            </p>
+                        </div>
+
+                        {/* FAQ 2 */}
+                        <div className="p-6 bg-slate-50/50 hover:bg-slate-100/50 rounded-2xl border border-slate-150 transition-colors">
+                            <h4 className="text-sm font-bold text-slate-800">What is Tadbeer contract compliance?</h4>
+                            <p className="text-xs text-slate-500 font-medium leading-relaxed mt-2">
+                                All worker hirings conform to MOHRE Tadbeer rules. Contracts are electronically generated and uploaded for review.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
                 {/* Filters Row */}
                 <div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
                     <div className="p-4 border-b border-slate-100 flex flex-col lg:flex-row lg:items-center justify-between gap-4 bg-slate-50/20">
diff --git a/resources/js/Pages/Employer/Profile.jsx b/resources/js/Pages/Employer/Profile.jsx
index a7948df..88f42be 100644
--- a/resources/js/Pages/Employer/Profile.jsx
+++ b/resources/js/Pages/Employer/Profile.jsx
@@ -1,546 +1,567 @@
 import React, { useState } from 'react';
-import { Head, useForm } from '@inertiajs/react';
+import { Head, Link, router } from '@inertiajs/react';
 import EmployerLayout from '../../Layouts/EmployerLayout';
 import { useTranslation } from '../../lib/LanguageContext';
 import { 
     User, 
-    CheckCircle2, 
-    Save, 
-    Building2, 
-    Lock, 
-    Bell, 
     ShieldCheck, 
     Mail, 
     Phone,
     Globe,
-    CreditCard,
-    ChevronRight,
-    Camera,
-    Home,
-    Users,
     MapPin,
-    History,
-    Sparkles
+    Home,
+    Edit3,
+    Calendar,
+    Briefcase,
+    Building,
+    FileText,
+    MessageSquare,
+    AlertCircle,
+    CheckCircle2,
+    Lock,
+    ExternalLink,
+    Compass,
+    FileSpreadsheet,
+    Eye,
+    Bell,
+    Camera,
+    Save,
+    XCircle
 } from 'lucide-react';
 import { toast } from 'sonner';
 
 export default function Profile({ employerProfile }) {
     const { t } = useTranslation();
-    const { data: profile, setData, post, processing, errors } = useForm({
-        name: employerProfile?.name || '',
-        company_name: employerProfile?.company_name || '',
-        email: employerProfile?.email || '',
-        phone: employerProfile?.phone || '',
-        language: employerProfile?.language || 'English',
-        nationality: employerProfile?.nationality || '',
-        family_size: employerProfile?.family_size || '',
-        accommodation: employerProfile?.accommodation || '',
-        district: employerProfile?.district || '',
-        notifications: employerProfile?.notifications ?? true,
-        emirates_id_front: null,
-        emirates_id_back: null,
-        current_password: '',
-        new_password: '',
-        new_password_confirmation: '',
-    });
+    const [showConfirmPopup, setShowConfirmPopup] = useState(false);
 
-    const [activeTab, setActiveTab] = useState('personal');
-    const [saved, setSaved] = useState(false);
+    const handleEditClick = () => {
+        setShowConfirmPopup(true);
+    };
 
-    const handleSave = (e) => {
+    const handleConfirmEdit = () => {
+        setShowConfirmPopup(false);
+        router.get('/employer/profile/edit');
+    };
+
+    const handleCancelEdit = () => {
+        setShowConfirmPopup(false);
+    };
+
+    const [showRenewModal, setShowRenewModal] = useState(false);
+    const [frontFile, setFrontFile] = useState(null);
+    const [backFile, setBackFile] = useState(null);
+    const [frontPreview, setFrontPreview] = useState(null);
+    const [backPreview, setBackPreview] = useState(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const expiryDateStr = employerProfile?.emirates_id?.expiry_date;
+    const isExpired = expiryDateStr ? new Date(expiryDateStr) <= new Date() : false;
+
+    const handleRenewalSubmit = (e) => {
         e.preventDefault();
-        post('/employer/profile/update', {
-            preserveScroll: true,
+        if (!frontFile || !backFile) {
+            toast.error(t('upload_both_sides', 'Please upload both front and back sides of your Emirates ID.'));
+            return;
+        }
+
+        setIsSubmitting(true);
+
+        router.post('/employer/profile/update', {
+            name: employerProfile.name,
+            email: employerProfile.email,
+            phone: employerProfile.phone,
+            emirates_id_front: frontFile,
+            emirates_id_back: backFile,
+        }, {
+            forceFormData: true,
             onSuccess: () => {
-                setSaved(true);
-                toast.success(`🛡️ ${t('profile_updated_successfully', 'Profile updated successfully')}`, {
-                    description: t('profile_updated_successfully_desc', 'Household sponsor preferences and vetted credentials synchronized successfully.')
-                });
-                setTimeout(() => setSaved(false), 3000);
+                toast.success(t('document_renewed', 'Emirates ID renewed successfully!'));
+                setShowRenewModal(false);
+                setFrontFile(null);
+                setBackFile(null);
+                setFrontPreview(null);
+                setBackPreview(null);
+                setIsSubmitting(false);
             },
             onError: (errs) => {
-                toast.error(t('profile_update_failed', 'Failed to update profile'), {
-                    description: Object.values(errs)[0] || t('check_form_fields', 'Please check the form fields.')
-                });
+                toast.error(Object.values(errs)[0] || t('renewal_failed', 'Failed to renew Emirates ID.'));
+                setIsSubmitting(false);
             }
         });
     };
 
-    const tabs = [
-        { id: 'personal', label: t('tab_personal', 'Personal'), icon: User },
-        { id: 'security', label: t('tab_security', 'Security & Password'), icon: Lock },
-        { id: 'billing', label: t('tab_billing', 'Billing & Receipts'), icon: CreditCard },
-        { id: 'notifications', label: t('tab_notifications', 'Notifications Hub'), icon: Bell },
-    ];
+    const toggleNotification = (type, currentVal) => {
+        router.post('/employer/profile/update', {
+            name: employerProfile.name,
+            email: employerProfile.email,
+            phone: employerProfile.phone,
+            email_notifications: type === 'email' ? !currentVal : employerProfile.email_notifications,
+            push_notifications: type === 'push' ? !currentVal : employerProfile.push_notifications,
+        }, {
+            preserveScroll: true,
+            onSuccess: () => {
+                toast.success(t('preferences_updated', 'Preferences updated successfully'));
+            }
+        });
+    };
+
+    const profilePhoto = employerProfile?.profile_photo_url;
 
     return (
-        <EmployerLayout title={t('account_settings', 'Account Settings')}>
+        <EmployerLayout title={t('employer_profile_details', 'Profile Details')}>
             <Head title={`${t('profile', 'Profile')} - ${t('employer_portal', 'Employer Portal')}`} />
 
-            <div className="flex flex-col lg:flex-row gap-8 select-none w-full pb-16">
-                {/* Left Side: Navigation Tabs */}
-                <aside className="w-full lg:w-72 space-y-2 flex-shrink-0">
-                    {tabs.map((tab) => {
-                        const Icon = tab.icon;
-                        return (
-                            <button
-                                key={tab.id}
-                                onClick={() => setActiveTab(tab.id)}
-                                className={`w-full flex items-center justify-between p-4 rounded-2xl text-xs font-black uppercase tracking-wider transition-all ${
-                                    activeTab === tab.id
-                                        ? 'bg-[#185FA5] text-white shadow-md shadow-blue-900/10'
-                                        : 'bg-white text-slate-600 hover:bg-slate-50 border border-slate-100'
-                                }`}
-                            >
-                                <div className="flex items-center space-x-3">
-                                    <Icon className="w-5 h-5" />
-                                    <span>{tab.label}</span>
-                                </div>
-                                <ChevronRight className={`w-4 h-4 transition-transform ${activeTab === tab.id ? 'rotate-90' : ''}`} />
-                            </button>
-                        );
-                    })}
-                </aside>
+            <div className="max-w-5xl mx-auto pb-16 space-y-8 select-none animate-in fade-in duration-500">
+                {isExpired && (
+                    <div className="bg-rose-50 border border-rose-200 rounded-3xl p-6 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4 animate-in slide-in-from-top duration-300">
+                        <div className="flex items-start gap-4">
+                            <div className="p-3 bg-rose-100 text-rose-600 rounded-2xl">
+                                <AlertCircle className="w-6 h-6 animate-pulse" />
+                            </div>
+                            <div className="space-y-1">
+                                <h4 className="text-sm font-black text-rose-950 uppercase tracking-wide">Emirates ID Expired</h4>
+                                <p className="text-xs text-rose-700/90 font-bold leading-normal">
+                                    Your Emirates ID card expired on <span className="font-extrabold">{employerProfile?.emirates_id?.expiry_date}</span>. Please upload a renewed document to maintain compliance and system access.
+                                </p>
+                            </div>
+                        </div>
+                        <button
+                            onClick={() => setShowRenewModal(true)}
+                            className="bg-rose-600 hover:bg-rose-700 text-white px-5 py-3 rounded-2xl text-xs font-black uppercase tracking-wider transition-all shadow-md shadow-rose-200/50 flex items-center justify-center gap-2 whitespace-nowrap self-start md:self-center"
+                        >
+                            <span>Renew Emirates ID</span>
+                        </button>
+                    </div>
+                )}
 
-                {/* Right Side: Content Area */}
-                <div className="flex-1 space-y-6">
-                    {/* Header Info Card */}
-                    <div className="bg-white rounded-3xl border border-slate-200 p-8 shadow-sm relative overflow-hidden">
-                        <div className="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-full -mr-16 -mt-16 opacity-50 pointer-events-none" />
-                        
-                        <div className="flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8 relative z-10">
-                            <div className="relative group">
-                                <div className="w-20 h-20 rounded-2xl bg-blue-100 text-[#185FA5] flex items-center justify-center font-black text-3xl border-2 border-blue-200 shadow-md">
-                                    {profile.name?.charAt(0)}
+                {/* Premium Banner & Cover Section */}
+                <div className="relative bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
+                    {/* Artistic Enterprise Gradient Header Cover */}
+                    <div className="h-40 bg-gradient-to-r from-[#185FA5] via-[#2d7ad6] to-[#0f62ac] relative">
+                        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.15),transparent)] pointer-events-none" />
+                        <div className="absolute -bottom-8 left-8 flex items-center gap-2 text-white/10 select-none">
+                            <Compass className="w-32 h-32 stroke-[0.5]" />
+                        </div>
+                    </div>
+                    
+                    {/* Profile Header Details Row */}
+                    <div className="px-8 pb-8 pt-4 relative flex flex-col md:flex-row items-center md:items-end justify-between gap-6">
+                        <div className="flex flex-col md:flex-row items-center md:items-end gap-6 -mt-16 relative z-10 text-center md:text-left">
+                            {/* Profile Image with Glow Ring */}
+                            <div className="relative">
+                                <div className="w-28 h-28 rounded-2xl bg-white p-1.5 shadow-xl border border-slate-100">
+                                    {profilePhoto ? (
+                                        <img 
+                                            src={profilePhoto} 
+                                            alt={employerProfile?.name} 
+                                            className="w-full h-full rounded-xl object-cover"
+                                        />
+                                    ) : (
+                                        <div className="w-full h-full rounded-xl bg-gradient-to-br from-[#185FA5]/10 to-[#185FA5]/20 text-[#185FA5] flex items-center justify-center font-black text-4xl border border-blue-100">
+                                            {employerProfile?.name?.charAt(0)}
+                                        </div>
+                                    )}
                                 </div>
-                                <button type="button" className="absolute -bottom-1 -right-1 p-1.5 bg-white rounded-lg shadow-sm border border-slate-100 text-slate-600 hover:text-[#185FA5] transition-colors">
-                                    <Camera className="w-3.5 h-3.5" />
-                                </button>
+                                <span className="absolute bottom-1 right-1 w-4 h-4 bg-emerald-500 rounded-full border-2 border-white shadow-sm" />
                             </div>
                             
-                            <div className="flex-1 text-center md:text-left">
-                                <h2 className="text-xl font-black text-slate-900 leading-tight">{profile.name}</h2>
-                                <p className="text-slate-500 font-bold text-xs mt-1">{profile.company_name}</p>
+                            <div className="space-y-1.5 pb-2">
+                                <div className="flex flex-wrap items-center justify-center md:justify-start gap-2.5">
+                                    <h2 className="text-2xl font-black text-slate-900 tracking-tight leading-none">{employerProfile?.name}</h2>
+                                </div>
+                                <p className="text-slate-500 font-bold text-xs">{employerProfile?.email}</p>
                                 
-                                <div className="flex flex-wrap justify-center md:justify-start gap-2.5 mt-4">
-                                    <span className="bg-emerald-50 text-emerald-700 px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center space-x-1.5 border border-emerald-100">
-                                        <ShieldCheck className="w-3.5 h-3.5" />
-                                        <span>{t('emirates_id_vetted', 'Emirates ID Vetted')}</span>
-                                    </span>
-                                    <span className="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center space-x-1.5 border border-blue-100">
-                                        <CheckCircle2 className="w-3.5 h-3.5" />
-                                        <span>{t('direct_sponsor_portal', 'Direct Sponsor Portal')}</span>
-                                    </span>
+                            </div>
+                        </div>
+
+                        {/* Edit Button */}
+                        <button
+                            onClick={handleEditClick}
+                            className="bg-[#185FA5] hover:bg-[#144f8a] text-white px-6 py-3.5 rounded-2xl text-xs font-black uppercase tracking-wider flex items-center space-x-2 transition-all shadow-lg shadow-blue-200/50 hover:shadow-blue-300/60 active:scale-95 group"
+                        >
+                            <Edit3 className="w-4 h-4 transition-transform group-hover:rotate-12" />
+                            <span>{t('edit_profile_details', 'Edit Profile')}</span>
+                        </button>
+                    </div>
+                </div>
+
+                {/* Grid Layout: Left Details Column & Right Digital Card Column */}
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+                    
+                    {/* Left Column: General & Invoicing Info (7/12 width) */}
+                    <div className="lg:col-span-7 space-y-8">
+                        
+                        {/* Account & Contact Settings */}
+                        <div className="bg-white rounded-3xl border border-slate-200 p-8 shadow-sm space-y-6">
+                            <div className="border-b border-slate-100 pb-4">
+                                <h3 className="text-base font-black text-slate-900">{t('account_contact_info', 'Account & Contact Information')}</h3>
+                                <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">
+                                    {t('manage_contact_desc', 'Contact and notification channels')}
+                                </p>
+                            </div>
+
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                <div className="p-4 bg-slate-50 hover:bg-slate-100/50 rounded-2xl border border-slate-150 transition-colors">
+                                    <div className="flex items-center space-x-2 text-slate-400">
+                                        <User className="w-4 h-4 text-[#185FA5]" />
+                                        <span className="text-[9px] font-black uppercase tracking-wider">{t('full_name', 'Full Name')}</span>
+                                    </div>
+                                    <div className="text-xs font-black text-slate-800 mt-2">{employerProfile?.name}</div>
+                                </div>
+
+                                <div className="p-4 bg-slate-50 hover:bg-slate-100/50 rounded-2xl border border-slate-150 transition-colors">
+                                    <div className="flex items-center space-x-2 text-slate-400">
+                                        <Mail className="w-4 h-4 text-[#185FA5]" />
+                                        <span className="text-[9px] font-black uppercase tracking-wider">{t('email', 'Email Address')}</span>
+                                    </div>
+                                    <div className="text-xs font-black text-slate-800 mt-2 truncate" title={employerProfile?.email}>{employerProfile?.email}</div>
+                                </div>
+
+                                <div className="p-4 bg-slate-50 hover:bg-slate-100/50 rounded-2xl border border-slate-150 transition-colors">
+                                    <div className="flex items-center space-x-2 text-slate-400">
+                                        <Phone className="w-4 h-4 text-[#185FA5]" />
+                                        <span className="text-[9px] font-black uppercase tracking-wider">{t('phone', 'Phone Number')}</span>
+                                    </div>
+                                    <div className="text-xs font-black text-slate-800 mt-2">{employerProfile?.phone}</div>
+                                </div>
+
+                                <div className="p-4 bg-slate-50 hover:bg-slate-100/50 rounded-2xl border border-slate-150 transition-colors">
+                                    <div className="flex items-center space-x-2 text-slate-400">
+                                        <Home className="w-4 h-4 text-[#185FA5]" />
+                                        <span className="text-[9px] font-black uppercase tracking-wider">{t('property_type', 'Property Type')}</span>
+                                    </div>
+                                    <div className="text-xs font-black text-slate-800 mt-2">{employerProfile?.property_type || t('not_specified', 'Not Specified')}</div>
+                                </div>
+
+                                <div className="p-4 bg-slate-50 hover:bg-slate-100/50 rounded-2xl border border-slate-150 transition-colors sm:col-span-2">
+                                    <div className="flex items-center space-x-2 text-slate-400">
+                                        <MapPin className="w-4 h-4 text-[#185FA5]" />
+                                        <span className="text-[9px] font-black uppercase tracking-wider">{t('address', 'Address')}</span>
+                                    </div>
+                                    <div className="text-xs font-black text-slate-800 mt-2 leading-relaxed">{employerProfile?.address || t('not_specified', 'Not Specified')}</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Notification Preferences & Integration Card */}
+                        <div className="bg-white rounded-3xl border border-slate-200 p-8 shadow-sm space-y-6">
+                            <div className="border-b border-slate-100 pb-4">
+                                <h3 className="text-base font-black text-slate-900">{t('notification_preferences', 'Notification Preferences')}</h3>
+                            </div>
+
+                            {/* Preferences Toggles */}
+                            <div className="space-y-4">
+                                {/* Email Alerts Row */}
+                                <div className="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-150 transition-all hover:bg-slate-100/50">
+                                    <div className="flex items-center gap-3">
+                                        <div className="p-2.5 bg-blue-550/10 text-[#185FA5] rounded-xl">
+                                            <Mail className="w-5 h-5" />
+                                        </div>
+                                        <div>
+                                            <h4 className="text-xs font-black text-slate-800">{t('email_alerts', 'Email Alerts')}</h4>
+                                            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider mt-0.5">{t('email_alerts_sub', 'Invoices, updates & announcements')}</p>
+                                        </div>
+                                    </div>
+                                    <button
+                                        type="button"
+                                        onClick={() => toggleNotification('email', employerProfile?.email_notifications)}
+                                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${
+                                            employerProfile?.email_notifications ? 'bg-[#185FA5]' : 'bg-slate-200'
+                                        }`}
+                                    >
+                                        <span
+                                            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                                                employerProfile?.email_notifications ? 'translate-x-6' : 'translate-x-1'
+                                            }`}
+                                        />
+                                    </button>
+                                </div>
+
+                                {/* Push Notification Alerts Row */}
+                                <div className="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-150 transition-all hover:bg-slate-100/50">
+                                    <div className="flex items-center gap-3">
+                                        <div className="p-2.5 bg-blue-550/10 text-[#185FA5] rounded-xl">
+                                            <Bell className="w-5 h-5" />
+                                        </div>
+                                        <div>
+                                            <h4 className="text-xs font-black text-slate-800">{t('push_alerts', 'Push Notifications')}</h4>
+                                            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider mt-0.5">{t('push_alerts_sub', 'Live updates & mobile alerts')}</p>
+                                        </div>
+                                    </div>
+                                    <button
+                                        type="button"
+                                        onClick={() => toggleNotification('push', employerProfile?.push_notifications)}
+                                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${
+                                            employerProfile?.push_notifications ? 'bg-[#185FA5]' : 'bg-slate-200'
+                                        }`}
+                                    >
+                                        <span
+                                            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                                                employerProfile?.push_notifications ? 'translate-x-6' : 'translate-x-1'
+                                            }`}
+                                        />
+                                    </button>
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    {/* Tab Specific Content */}
-                    <div className="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
-                        <form onSubmit={handleSave} className="p-8 space-y-8">
-                            {activeTab === 'personal' && (
-                                <div className="space-y-6">
-                                    <div className="border-b border-slate-100 pb-4">
-                                        <h3 className="text-lg font-black text-slate-900">{t('personal_details_header', 'Personal details')}</h3>
-                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('personal_details_desc', 'Manage sponsor bio and credentials')}</p>
-                                    </div>
+                    {/* Right Column: Digital Emirates ID & Card Visual (5/12 width) */}
+                    <div className="lg:col-span-5 space-y-8">
+                        
+                        {/* Interactive Digital Emirates ID Widget */}
+                        <div className="bg-white rounded-3xl border border-slate-200 p-8 shadow-sm space-y-6">
+                            <div className="border-b border-slate-100 pb-4">
+                                <h3 className="text-base font-black text-slate-900">{t('identity_card', 'Emirates ID Details')}</h3>
+                                <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">
+                                    {t('vetted_details_badge', 'Vetted MOHRE identity credentials')}
+                                </p>
+                            </div>
 
-                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                        <div className="space-y-2">
-                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('full_sponsor_name', 'Full Sponsor Name')}</label>
-                                            <div className="relative">
-                                                <User className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
-                                                <input
-                                                    type="text"
-                                                    value={profile.name}
-                                                    onChange={(e) => setData('name', e.target.value)}
-                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
-                                                />
-                                            </div>
-                                        </div>
-
-                                        <div className="space-y-2">
-                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('invoicing_email', 'Invoicing Email')}</label>
-                                            <div className="relative">
-                                                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
-                                                <input
-                                                    type="email"
-                                                    value={profile.email}
-                                                    onChange={(e) => setData('email', e.target.value)}
-                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
-                                                 />
-                                             </div>
-                                        </div>
-
-                                        <div className="space-y-2">
-                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('uae_mobile_contact', 'UAE Mobile Contact')}</label>
-                                            <div className="relative">
-                                                <Phone className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
-                                                <input
-                                                    type="text"
-                                                    value={profile.phone}
-                                                    onChange={(e) => setData('phone', e.target.value)}
-                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
-                                                />
-                                            </div>
-                                        </div>
-
-                                        <div className="space-y-2">
-                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('sponsor_nationality', 'Sponsor Nationality')}</label>
-                                            <div className="relative">
-                                                <Globe className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
-                                                <select
-                                                    value={profile.nationality}
-                                                    onChange={(e) => setData('nationality', e.target.value)}
-                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none cursor-pointer"
-                                                >
-                                                    <option value="">{t('select_nationality', 'Select Nationality')}</option>
-                                                    <option value="UAE National">{t('uae_national', 'UAE National')}</option>
-                                                    <option value="Expat (UK / Europe)">{t('expat_uk_europe', 'Expat (UK / Europe)')}</option>
-                                                    <option value="Expat (USA / Canada)">{t('expat_usa_canada', 'Expat (USA / Canada)')}</option>
-                                                    <option value="Expat (Asia / GCC)">{t('expat_asia_gcc', 'Expat (Asia / GCC)')}</option>
-                                                </select>
-                                            </div>
-                                        </div>
-
-                                        <div className="space-y-2">
-                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('family_members_size', 'Family Members Size')}</label>
-                                            <div className="relative">
-                                                <Users className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
-                                                <select
-                                                    value={profile.family_size}
-                                                    onChange={(e) => setData('family_size', e.target.value)}
-                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none cursor-pointer"
-                                                >
-                                                    <option value="">{t('select_family_size', 'Select Family Size')}</option>
-                                                    <option value="1-2 Members">{t('family_1_2', '1-2 Members')}</option>
-                                                    <option value="3-4 Members">{t('family_3_4', '3-4 Members')}</option>
-                                                    <option value="5+ Members">{t('family_5_plus', '5+ Members')}</option>
-                                                </select>
-                                            </div>
-                                        </div>
-
-                                        <div className="space-y-2">
-                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('accommodation_residence', 'Accommodation Residence')}</label>
-                                            <div className="relative">
-                                                <Home className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
-                                                <select
-                                                    value={profile.accommodation}
-                                                    onChange={(e) => setData('accommodation', e.target.value)}
-                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none cursor-pointer"
-                                                >
-                                                    <option value="">{t('select_accommodation', 'Select Accommodation')}</option>
-                                                    <option value="Villa">{t('villa', 'Villa')}</option>
-                                                    <option value="Apartment (Penthouse)">{t('penthouse', 'Apartment (Penthouse)')}</option>
-                                                    <option value="Apartment (1-3 Bed)">{t('apartment_1_3', 'Apartment (1-3 Bed)')}</option>
-                                                </select>
-                                            </div>
-                                        </div>
-
-                                        <div className="space-y-2 md:col-span-2">
-                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('city_district_area', 'City District / Area')}</label>
-                                            <div className="relative">
-                                                <MapPin className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
-                                                <input
-                                                    type="text"
-                                                    value={profile.district}
-                                                    onChange={(e) => setData('district', e.target.value)}
-                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
-                                                />
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    {/* Emirates ID Verification */}
-                                    <div className="space-y-6 pt-6 border-t border-slate-100">
-                                        <div className="border-b border-slate-100 pb-4">
-                                            <h3 className="text-lg font-black text-slate-900">{t('emirates_id_verification_header', 'Emirates ID Verification')}</h3>
-                                            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('emirates_id_verification_desc', 'Regulatory compliance credentials')}</p>
-                                        </div>
-
-                                        {employerProfile?.verification_status === 'approved' ? (
-                                            <div className="space-y-4">
-                                                <div className="p-6 bg-emerald-50 rounded-3xl border border-emerald-200 flex items-start space-x-4">
-                                                    <div className="p-3 bg-emerald-100 text-emerald-600 rounded-2xl">
-                                                        <ShieldCheck className="w-6 h-6" />
-                                                    </div>
-                                                    <div>
-                                                        <h4 className="font-extrabold text-slate-900">{t('emirates_id_verified_status', 'Emirates ID Verified')}</h4>
-                                                        <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mt-0.5">{t('mohre_guidelines', 'Vetted under MOHRE Guidelines')}</p>
-                                                        <p className="text-xs text-slate-600 mt-2 font-medium leading-relaxed">
-                                                            {t('emirates_id_verified_desc', 'Your Emirates ID has been verified successfully. Your account is active for direct hiring.')}
-                                                        </p>
-                                                    </div>
-                                                </div>
-
-                                                {/* Extracted Details */}
-                                                {employerProfile?.emirates_id_number && (
-                                                    <div className="p-6 bg-slate-50 rounded-3xl border border-slate-200 grid grid-cols-1 sm:grid-cols-2 gap-4">
-                                                        <div>
-                                                            <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('extracted_eid_number', 'Extracted Emirates ID Number')}</div>
-                                                            <div className="text-sm font-bold text-slate-900 mt-1 font-mono">{employerProfile.emirates_id_number}</div>
-                                                        </div>
-                                                        <div>
-                                                            <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('extracted_eid_expiry', 'Extracted Expiry Date')}</div>
-                                                            <div className="text-sm font-bold text-slate-900 mt-1">{employerProfile.emirates_id_expiry}</div>
-                                                        </div>
-                                                    </div>
-                                                )}
-                                                
-                                                {/* Security Purge Notice */}
-                                                <div className="p-4 bg-blue-50/50 rounded-2xl border border-blue-100/50 text-[11px] font-bold text-blue-800 flex items-center space-x-2">
-                                                    <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse flex-shrink-0" />
-                                                    <span>{t('pdpl_purge_notice', 'Security Audit: Physical identity documents were purged from our databases immediately after verification to maintain PDPL compliance.')}</span>
-                                                </div>
-                                            </div>
-                                        ) : employerProfile?.verification_status === 'pending' && (employerProfile?.emirates_id_front || employerProfile?.emirates_id_back || employerProfile?.emirates_id_number) ? (
-                                            <div className="p-6 bg-amber-50 rounded-3xl border border-amber-200 flex items-start space-x-4">
-                                                <div className="p-3 bg-amber-100 text-amber-600 rounded-2xl animate-pulse">
-                                                    <ShieldCheck className="w-6 h-6" />
-                                                </div>
-                                                <div>
-                                                    <h4 className="font-extrabold text-slate-900">{t('verification_pending_status', 'Verification Pending Audit')}</h4>
-                                                    <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mt-0.5">{t('audit_queue', 'Audit Queue')}</p>
-                                                    <p className="text-xs text-slate-600 mt-2 font-medium leading-relaxed">
-                                                        {t('verification_pending_desc', 'Your Emirates ID document uploads are currently under review. Audits are typically completed within 24 hours.')}
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        ) : (
-                                            <div className="p-6 bg-rose-50 rounded-3xl border border-rose-200 flex items-start space-x-4">
-                                                <div className="p-3 bg-rose-100 text-rose-600 rounded-2xl">
-                                                    <ShieldCheck className="w-6 h-6" />
-                                                </div>
-                                                <div>
-                                                    <h4 className="font-extrabold text-slate-900">{t('verification_required_status', 'Emirates ID Verification Required')}</h4>
-                                                    <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mt-0.5">{t('action_needed', 'Action Needed')}</p>
-                                                    <p className="text-xs text-slate-600 mt-2 font-medium leading-relaxed">
-                                                        {t('verification_required_desc', 'Please upload high-resolution color scans of your Emirates ID to verify your identity and activate full hiring features.')}
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        )}
-
-                                        {/* File Upload Fields */}
-                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 bg-slate-50 p-6 rounded-3xl border border-slate-200">
-                                            <div className="space-y-2">
-                                                <label className="text-xs font-black text-slate-600 uppercase tracking-tight ml-1">{t('emirates_id_front_side', 'Emirates ID (Front Side)')}</label>
-                                                <input
-                                                    type="file"
-                                                    onChange={(e) => setData('emirates_id_front', e.target.files[0])}
-                                                    className="w-full text-xs font-semibold text-slate-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-black file:bg-[#185FA5]/10 file:text-[#185FA5] hover:file:bg-[#185FA5]/20 cursor-pointer"
-                                                />
-                                                {errors.emirates_id_front && <p className="text-xs text-red-500 mt-1">{errors.emirates_id_front}</p>}
-                                            </div>
-
-                                            <div className="space-y-2">
-                                                <label className="text-xs font-black text-slate-600 uppercase tracking-tight ml-1">{t('emirates_id_back_side', 'Emirates ID (Back Side)')}</label>
-                                                <input
-                                                    type="file"
-                                                    onChange={(e) => setData('emirates_id_back', e.target.files[0])}
-                                                    className="w-full text-xs font-semibold text-slate-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-black file:bg-[#185FA5]/10 file:text-[#185FA5] hover:file:bg-[#185FA5]/20 cursor-pointer"
-                                                />
-                                                {errors.emirates_id_back && <p className="text-xs text-red-500 mt-1">{errors.emirates_id_back}</p>}
-                                            </div>
-                                        </div>
-
-                                        {/* Uploaded Documents Details */}
-                                        {(employerProfile?.emirates_id_front || employerProfile?.emirates_id_back || employerProfile?.emirates_id_number) && (
-                                            <div className="space-y-4 pt-4 border-t border-slate-100">
-                                                <h4 className="text-xs font-black text-slate-600 uppercase tracking-wider ml-1">{t('uploaded_credentials_scans', 'Uploaded Credentials Status')}</h4>
-                                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                                                    <div className="p-4 bg-slate-50 border border-slate-200 rounded-2xl flex items-center justify-between col-span-2">
-                                                        <div className="flex items-center space-x-3 min-w-0">
-                                                            <div className="w-10 h-10 bg-emerald-100 text-emerald-700 rounded-xl flex items-center justify-center font-bold text-xs flex-shrink-0">
-                                                                SEC
-                                                            </div>
-                                                            <div className="min-w-0">
-                                                                <div className="text-xs font-black text-slate-800">{t('pdpl_secure_storage', 'PDPL Secure Storage')}</div>
-                                                                <div className="text-[10px] text-slate-400 font-bold truncate">Physical image files purged from storage</div>
-                                                            </div>
-                                                        </div>
-                                                        <span className="text-[10px] font-black uppercase bg-emerald-100 text-emerald-800 px-2.5 py-1 rounded-full">
-                                                            Secured
-                                                        </span>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                            )}
-
-                            {activeTab === 'security' && (
-                                <div className="space-y-6">
-                                    <div className="border-b border-slate-100 pb-4">
-                                        <h3 className="text-lg font-black text-slate-900">{t('security_password_header', 'Security & Password')}</h3>
-                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('security_password_desc', 'Keep your sponsor account secure')}</p>
-                                    </div>
-
-                                    <div className="space-y-4 max-w-md">
-                                        <div className="space-y-2">
-                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('current_password', 'Current Password')}</label>
-                                            <input
-                                                type="password"
-                                                placeholder="••••••••"
-                                                value={profile.current_password}
-                                                onChange={(e) => setData('current_password', e.target.value)}
-                                                className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
-                                            />
-                                        </div>
-                                        <div className="space-y-2">
-                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('new_password', 'New Password')}</label>
-                                            <input
-                                                type="password"
-                                                placeholder="••••••••"
-                                                value={profile.new_password}
-                                                onChange={(e) => setData('new_password', e.target.value)}
-                                                className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
-                                            />
-                                        </div>
-                                        <div className="space-y-2">
-                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('confirm_new_password', 'Confirm New Password')}</label>
-                                            <input
-                                                type="password"
-                                                placeholder="••••••••"
-                                                value={profile.new_password_confirmation}
-                                                onChange={(e) => setData('new_password_confirmation', e.target.value)}
-                                                className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-
-                            {activeTab === 'billing' && (
-                                <div className="space-y-8">
-                                    <div className="border-b border-slate-100 pb-4">
-                                        <h3 className="text-lg font-black text-slate-900">{t('tab_billing', 'Billing & Receipts')}</h3>
-                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('available_subscription_tiers_desc', 'Upgrade or cancel anytime. All contracts compliant with UAE Tadbeer MOHRE guides.')}</p>
-                                    </div>
-
-                                    {/* Current Plan Card */}
-                                    <div className="p-6 bg-gradient-to-br from-slate-900 to-slate-800 rounded-3xl text-white shadow-xl relative overflow-hidden">
-                                        <div className="absolute top-0 right-0 w-48 h-48 bg-blue-500/10 rounded-full -mr-24 -mt-24 blur-3xl pointer-events-none" />
-                                        <div className="relative z-10">
-                                            <div className="flex items-center justify-between">
-                                                <div>
-                                                    <span className="text-[10px] font-black uppercase tracking-widest text-slate-400">{t('current_plan', 'Current Plan')}</span>
-                                                    <h4 className="text-2xl font-black mt-1">Premium Employer</h4>
-                                                </div>
-                                                <div className="bg-white/10 backdrop-blur-md px-4 py-2 rounded-xl border border-white/10">
-                                                    <span className="text-sm font-black">{t('active_status', 'Active')}</span>
-                                                </div>
-                                            </div>
-                                            <div className="mt-8 flex items-end justify-between">
-                                                <div className="space-y-1">
-                                                    <div className="text-[10px] font-bold text-slate-400 uppercase">{t('next_payment', 'Next Payment')}</div>
-                                                    <div className="text-sm font-bold italic">Jun 15, 2026</div>
-                                                </div>
-                                                <div className="text-3xl font-black tracking-tighter">
-                                                    199 <span className="text-sm font-bold text-slate-400">AED/mo</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    {/* Transaction History */}
-                                    <div className="space-y-4">
-                                        <h4 className="text-xs font-black text-slate-400 uppercase tracking-widest">{t('recent_transactions', 'Recent Transactions')}</h4>
-                                        <div className="bg-slate-50 rounded-2xl border border-slate-100 overflow-hidden">
-                                            <table className="w-full text-left">
-                                                <thead className="bg-slate-100/50">
-                                                    <tr>
-                                                        <th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter">{t('date_header', 'Date')}</th>
-                                                        <th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter">{t('description_header', 'Description')}</th>
-                                                        <th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter">{t('amount_header', 'Amount')}</th>
-                                                        <th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter text-right">{t('receipt_header', 'Receipt')}</th>
-                                                    </tr>
-                                                </thead>
-                                                <tbody className="divide-y divide-slate-100">
-                                                    {[
-                                                        { date: 'May 01, 2026', desc: 'Premium Monthly Subscription', amount: '199 AED' },
-                                                        { date: 'Apr 01, 2026', desc: 'Premium Monthly Subscription', amount: '199 AED' }
-                                                    ].map((transaction, i) => (
-                                                        <tr key={i}>
-                                                            <td className="px-4 py-4 text-xs font-bold text-slate-600">{transaction.date}</td>
-                                                            <td className="px-4 py-4 text-xs font-bold text-slate-900">{transaction.desc}</td>
-                                                            <td className="px-4 py-4 text-xs font-black text-slate-900">{transaction.amount}</td>
-                                                            <td className="px-4 py-4 text-right">
-                                                                <button 
-                                                                    type="button"
-                                                                    onClick={() => toast.success("PDF Tax invoice receipt downloaded successfully")}
-                                                                    className="p-2 text-slate-400 hover:text-[#185FA5] transition-colors"
-                                                                >
-                                                                    <CreditCard className="w-4 h-4" />
-                                                                </button>
-                                                            </td>
-                                                        </tr>
-                                                    ))}
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-
-                            {activeTab === 'notifications' && (
-                                <div className="space-y-6">
-                                    <div className="border-b border-slate-100 pb-4">
-                                        <h3 className="text-lg font-black text-slate-900">{t('notification_settings_hub', 'Notification Settings Hub')}</h3>
-                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('notification_settings_desc', 'Choose how you want to receive alerts')}</p>
-                                    </div>
-
-                                    <div className="space-y-4">
-                                        {[
-                                            { title: t('email_alerts', 'Email Alerts'), desc: t('email_alerts_desc', 'Receive vetted worker recommendations and visa updates.') },
-                                            { title: t('sms_alerts', 'SMS Instant Receipts'), desc: t('sms_alerts_desc', 'Get SMS notifications for interview schedules.') },
-                                            { title: t('push_alerts', 'Push Notifications'), desc: t('push_alerts_desc', 'Get desktop sound alerts for new direct messages.') }
-                                        ].map((n, i) => (
-                                            <div key={i} className="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
-                                                <div className="space-y-0.5">
-                                                    <div className="text-xs font-black text-slate-900">{n.title}</div>
-                                                    <div className="text-[10px] font-bold text-slate-400 leading-tight">{n.desc}</div>
-                                                </div>
-                                                <button 
-                                                    type="button"
-                                                    onClick={() => setData('notifications', !profile.notifications)}
-                                                    className={`w-10 h-6 rounded-full p-1 transition-all ${profile.notifications ? 'bg-[#185FA5]' : 'bg-slate-200'}`}
-                                                >
-                                                    <div className={`w-4 h-4 bg-white rounded-full transition-transform ${profile.notifications ? 'translate-x-4' : 'translate-x-0'}`} />
-                                                </button>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            )}
-
-                            <div className="pt-8 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-4">
-                                {saved ? (
-                                    <div className="flex items-center space-x-2 text-emerald-600 animate-in fade-in slide-in-from-left-4">
-                                        <CheckCircle2 className="w-5 h-5" />
-                                        <span className="text-xs font-black uppercase">{t('changes_saved', 'Changes saved successfully')}</span>
-                                    </div>
-                                ) : (
-                                    <p className="text-[10px] font-bold text-slate-400 max-w-xs text-center sm:text-left">
-                                        {t('emirates_id_reverification_notice', 'Some updates may require Emirates ID re-verification.')}
-                                    </p>
-                                )}
+                            {/* Digital Emirates ID Visual */}
+                            <div className="relative bg-gradient-to-br from-[#1b3d6c] to-[#0d223e] p-6 rounded-2xl text-white shadow-xl overflow-hidden aspect-[1.586/1] border border-white/5 flex flex-col justify-between">
+                                {/* Sparkle Background Art */}
+                                <div className="absolute top-0 right-0 w-36 h-36 bg-blue-500/15 rounded-full -mr-12 -mt-12 blur-3xl pointer-events-none" />
+                                <div className="absolute bottom-0 left-0 w-36 h-36 bg-emerald-500/10 rounded-full -ml-12 -mb-12 blur-3xl pointer-events-none" />
                                 
+                                {isExpired && (
+                                    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border-4 border-rose-500/30 text-rose-500/30 font-black text-2xl uppercase tracking-widest px-4 py-2 rounded-xl rotate-12 select-none z-20 pointer-events-none">
+                                        Expired
+                                    </div>
+                                )}
+
+                                {/* Top Header */}
+                                <div className="flex items-center justify-between z-10">
+                                    <div className="space-y-0.5">
+                                        <div className="text-[7px] font-black tracking-widest text-slate-400 uppercase">United Arab Emirates</div>
+                                        <div className="text-[10px] font-black tracking-wide text-white uppercase">Resident Identity Card</div>
+                                    </div>
+                                    <div className="w-7 h-5 bg-white/10 rounded border border-white/10 flex items-center justify-center">
+                                        <Globe className="w-3.5 h-3.5 text-slate-300" />
+                                    </div>
+                                </div>
+
+                                {/* Card Number & Name */}
+                                <div className="space-y-2.5 z-10 my-4">
+                                    <div className="text-xs font-mono font-black tracking-widest text-white/95">
+                                        {employerProfile?.emirates_id?.emirates_id_number}
+                                    </div>
+                                    <div className="space-y-0.5">
+                                        <div className="text-[6px] font-black text-slate-400 uppercase tracking-wider">Name</div>
+                                        <div className="text-[11px] font-extrabold text-white truncate max-w-[240px]">
+                                            {employerProfile?.emirates_id?.name}
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Bottom Info Row */}
+                                <div className="grid grid-cols-3 gap-2 pt-2 border-t border-white/10 z-10">
+                                    <div>
+                                        <span className="text-[5px] font-black text-slate-400 uppercase tracking-wider block">Nationality</span>
+                                        <span className="text-[9px] font-bold text-white block">{employerProfile?.emirates_id?.nationality}</span>
+                                    </div>
+                                    <div>
+                                        <span className="text-[5px] font-black text-slate-400 uppercase tracking-wider block">Expiry Date</span>
+                                        <span className={`text-[9px] font-bold block ${isExpired ? 'text-rose-400 font-extrabold animate-pulse' : 'text-white'}`}>
+                                            {employerProfile?.emirates_id?.expiry_date}
+                                        </span>
+                                    </div>
+                                    <div>
+                                        <span className="text-[5px] font-black text-slate-400 uppercase tracking-wider block">Occupation</span>
+                                        <span className="text-[9px] font-bold text-white block truncate">{employerProfile?.emirates_id?.occupation}</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Renew Button below ID Card if expired */}
+                            {isExpired && (
+                                <button
+                                    onClick={() => setShowRenewModal(true)}
+                                    className="w-full bg-rose-600 hover:bg-rose-700 text-white py-3.5 rounded-2xl text-xs font-black uppercase tracking-wider flex items-center justify-center space-x-2 transition-all shadow-md shadow-rose-200"
+                                >
+                                    <span>Renew Emirates ID</span>
+                                </button>
+                            )}
+
+                            {/* Detailed Metadata Fields */}
+                            <div className="space-y-4 pt-4 border-t border-slate-100 text-xs">
+                                <div className="flex justify-between py-2 border-b border-slate-50">
+                                    <span className="font-bold text-slate-400 uppercase tracking-wider text-[9px]">{t('issue_place', 'Issue Place')}</span>
+                                    <span className="font-extrabold text-slate-700">{employerProfile?.emirates_id?.issue_place}</span>
+                                </div>
+                                <div className="flex justify-between py-2 border-b border-slate-50">
+                                    <span className="font-bold text-slate-400 uppercase tracking-wider text-[9px]">{t('issue_date', 'Issue Date')}</span>
+                                    <span className="font-extrabold text-slate-700">{employerProfile?.emirates_id?.issue_date}</span>
+                                </div>
+                                <div className="flex justify-between py-2 border-b border-slate-50">
+                                    <span className="font-bold text-slate-400 uppercase tracking-wider text-[9px]">{t('date_of_birth', 'Date of Birth')}</span>
+                                    <span className="font-extrabold text-slate-700">{employerProfile?.emirates_id?.date_of_birth}</span>
+                                </div>
+                                <div className="flex justify-between py-2">
+                                    <span className="font-bold text-slate-400 uppercase tracking-wider text-[9px]">{t('employer_agency', 'Employer / Sponsor')}</span>
+                                    <span className="font-extrabold text-[#185FA5] truncate max-w-[200px]" title={employerProfile?.emirates_id?.employer}>
+                                        {employerProfile?.emirates_id?.employer}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Confirmation Dialog Popup Modal */}
+            {showConfirmPopup && (
+                <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+                    <div className="bg-white rounded-3xl max-w-sm w-full p-8 border border-slate-100 shadow-2xl space-y-6 animate-in zoom-in-95 duration-200">
+                        <div className="flex flex-col items-center text-center space-y-4">
+                            <div className="p-4 bg-blue-50 text-[#185FA5] rounded-2xl">
+                                <AlertCircle className="w-8 h-8" />
+                            </div>
+                            <div className="space-y-2">
+                                <h3 className="text-base font-black text-slate-900">
+                                    {t('edit_profile_confirm_title', 'Edit Profile')}
+                                </h3>
+                                <p className="text-xs text-slate-500 font-medium leading-relaxed">
+                                    {t('edit_profile_confirm_body', 'Are you sure you want to edit your profile details?')}
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className="flex gap-4">
+                            <button
+                                onClick={handleCancelEdit}
+                                className="flex-1 px-4 py-3 border border-slate-200 hover:bg-slate-50 text-slate-650 rounded-xl text-xs font-black uppercase tracking-wider transition-colors outline-none"
+                            >
+                                {t('cancel', 'Cancel')}
+                            </button>
+                            <button
+                                onClick={handleConfirmEdit}
+                                className="flex-1 px-4 py-3 bg-[#185FA5] hover:bg-[#144f8a] text-white rounded-xl text-xs font-black uppercase tracking-wider transition-colors outline-none shadow-md shadow-blue-200/50"
+                            >
+                                {t('confirm', 'Confirm')}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Renew Emirates ID Modal */}
+            {showRenewModal && (
+                <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[9999] flex items-center justify-center p-4 animate-in fade-in duration-300">
+                    <div className="bg-white rounded-3xl border border-slate-200 shadow-2xl max-w-xl w-full overflow-hidden animate-in zoom-in-95 duration-300">
+                        {/* Modal Header */}
+                        <div className="bg-gradient-to-r from-rose-600 to-rose-700 p-6 text-white relative">
+                            <h3 className="text-base font-black uppercase tracking-wide">Renew Emirates ID</h3>
+                            <p className="text-[10px] text-rose-100 font-bold uppercase tracking-wider mt-1">Upload both sides of your new document</p>
+                            <button
+                                onClick={() => setShowRenewModal(false)}
+                                className="absolute top-6 right-6 text-rose-100 hover:text-white transition-colors"
+                            >
+                                <XCircle className="w-6 h-6" />
+                            </button>
+                        </div>
+
+                        {/* Modal Form */}
+                        <form onSubmit={handleRenewalSubmit} className="p-6 space-y-6">
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                {/* Front Side Upload */}
+                                <div className="space-y-2">
+                                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-wider block">Front Side</label>
+                                    <div className="border-2 border-dashed border-slate-200 hover:border-[#185FA5] rounded-2xl p-4 transition-all bg-slate-50/5 flex flex-col items-center justify-center min-h-[160px] relative overflow-hidden group">
+                                        {frontPreview ? (
+                                            <>
+                                                <img src={frontPreview} alt="Front ID Preview" className="absolute inset-0 w-full h-full object-cover" />
+                                                <div className="absolute inset-0 bg-slate-900/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                                                    <span className="text-[10px] font-black uppercase tracking-wider text-white">Change Photo</span>
+                                                </div>
+                                            </>
+                                        ) : (
+                                            <div className="flex flex-col items-center text-slate-400 space-y-2">
+                                                <Camera className="w-8 h-8 text-[#185FA5]/70" />
+                                                <span className="text-[10px] font-bold uppercase tracking-wider text-slate-500">Upload Front Side</span>
+                                            </div>
+                                        )}
+                                        <input
+                                            type="file"
+                                            accept="image/*"
+                                            onChange={(e) => {
+                                                const file = e.target.files[0];
+                                                if (file) {
+                                                    setFrontFile(file);
+                                                    setFrontPreview(URL.createObjectURL(file));
+                                                }
+                                            }}
+                                            className="absolute inset-0 opacity-0 cursor-pointer"
+                                            required
+                                        />
+                                    </div>
+                                </div>
+
+                                {/* Back Side Upload */}
+                                <div className="space-y-2">
+                                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-wider block">Back Side</label>
+                                    <div className="border-2 border-dashed border-slate-200 hover:border-[#185FA5] rounded-2xl p-4 transition-all bg-slate-50/5 flex flex-col items-center justify-center min-h-[160px] relative overflow-hidden group">
+                                        {backPreview ? (
+                                            <>
+                                                <img src={backPreview} alt="Back ID Preview" className="absolute inset-0 w-full h-full object-cover" />
+                                                <div className="absolute inset-0 bg-slate-900/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                                                    <span className="text-[10px] font-black uppercase tracking-wider text-white">Change Photo</span>
+                                                </div>
+                                            </>
+                                        ) : (
+                                            <div className="flex flex-col items-center text-slate-400 space-y-2">
+                                                <Camera className="w-8 h-8 text-[#185FA5]/70" />
+                                                <span className="text-[10px] font-bold uppercase tracking-wider text-slate-500">Upload Back Side</span>
+                                            </div>
+                                        )}
+                                        <input
+                                            type="file"
+                                            accept="image/*"
+                                            onChange={(e) => {
+                                                const file = e.target.files[0];
+                                                if (file) {
+                                                    setBackFile(file);
+                                                    setBackPreview(URL.createObjectURL(file));
+                                                }
+                                            }}
+                                            className="absolute inset-0 opacity-0 cursor-pointer"
+                                            required
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Actions */}
+                            <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-100">
+                                <button
+                                    type="button"
+                                    onClick={() => setShowRenewModal(false)}
+                                    className="px-5 py-3 border border-slate-200 hover:bg-slate-50 text-slate-650 rounded-xl text-xs font-black uppercase tracking-wider transition-colors outline-none"
+                                >
+                                    Cancel
+                                </button>
                                 <button
                                     type="submit"
-                                    disabled={processing}
-                                    className="w-full sm:w-auto bg-[#185FA5] hover:bg-[#144f8a] text-white px-8 py-3 rounded-2xl text-xs font-black uppercase tracking-widest flex items-center justify-center space-x-2 transition-all shadow-md shadow-blue-200/50"
+                                    disabled={isSubmitting}
+                                    className="bg-rose-600 hover:bg-rose-700 disabled:bg-rose-450 text-white px-6 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all flex items-center gap-2 shadow-md shadow-rose-100"
                                 >
-                                    <Save className="w-4 h-4" />
-                                    <span>{t('update_settings', 'Update Settings')}</span>
+                                    {isSubmitting ? (
+                                        <>
+                                            <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                                            <span>Processing OCR...</span>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <Save className="w-4 h-4" />
+                                            <span>Upload & Renew</span>
+                                        </>
+                                    )}
                                 </button>
                             </div>
                         </form>
                     </div>
                 </div>
-            </div>
+            )}
         </EmployerLayout>
     );
 }
diff --git a/resources/js/Pages/Employer/ProfileEdit.jsx b/resources/js/Pages/Employer/ProfileEdit.jsx
new file mode 100644
index 0000000..366f954
--- /dev/null
+++ b/resources/js/Pages/Employer/ProfileEdit.jsx
@@ -0,0 +1,241 @@
+import React, { useState } from 'react';
+import { Head, useForm, Link } from '@inertiajs/react';
+import EmployerLayout from '../../Layouts/EmployerLayout';
+import { useTranslation } from '../../lib/LanguageContext';
+import { 
+    User, 
+    Mail, 
+    Phone, 
+    MapPin, 
+    Home, 
+    Camera, 
+    Save, 
+    XCircle,
+    ArrowLeft,
+    Compass
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+export default function ProfileEdit({ employerProfile }) {
+    const { t } = useTranslation();
+
+    const { data, setData, post, processing, errors } = useForm({
+        name: employerProfile?.name || '',
+        email: employerProfile?.email || '',
+        phone: employerProfile?.phone || '',
+        address: employerProfile?.address || '',
+        property_type: employerProfile?.property_type || '',
+        profile_photo: null,
+    });
+
+    const [photoPreview, setPhotoPreview] = useState(employerProfile?.profile_photo_url || null);
+
+    const handlePhotoChange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+            setData('profile_photo', file);
+            setPhotoPreview(URL.createObjectURL(file));
+        }
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        post('/employer/profile/update', {
+            preserveScroll: true,
+            onSuccess: () => {
+                toast.success(t('profile_updated_successfully', 'Profile updated successfully!'));
+            },
+            onError: (errs) => {
+                toast.error(t('profile_update_failed', 'Failed to update profile'), {
+                    description: Object.values(errs)[0] || t('check_form_fields', 'Please check the form fields.')
+                });
+            }
+        });
+    };
+
+    return (
+        <EmployerLayout title={t('edit_profile', 'Edit Profile')}>
+            <Head title={`${t('edit_profile', 'Edit Profile')} - ${t('employer_portal', 'Employer Portal')}`} />
+
+            <div className="max-w-3xl mx-auto pb-16 space-y-8 select-none animate-in fade-in duration-500">
+                {/* Back Link */}
+                <div className="flex items-center">
+                    <Link
+                        href="/employer/profile"
+                        className="text-slate-450 hover:text-[#185FA5] flex items-center gap-2 text-xs font-black uppercase tracking-wider transition-colors group"
+                    >
+                        <ArrowLeft className="w-4 h-4 transition-transform group-hover:-translate-x-1" />
+                        <span>{t('back_to_profile', 'Back to Profile')}</span>
+                    </Link>
+                </div>
+
+                {/* Edit Form Card */}
+                <div className="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
+                    {/* Header Banner Accent */}
+                    <div className="h-28 bg-gradient-to-r from-[#185FA5] to-[#2d7ad6] relative">
+                        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.1),transparent)] pointer-events-none" />
+                        <div className="absolute -bottom-6 left-8 flex items-center gap-2 text-white/5 select-none">
+                            <Compass className="w-20 h-20 stroke-[0.5]" />
+                        </div>
+                    </div>
+
+                    <form onSubmit={handleSubmit} className="px-8 pb-8 pt-4 space-y-8 relative">
+                        
+                        {/* Profile Photo Floating Container */}
+                        <div className="flex flex-col sm:flex-row items-center gap-6 p-6 bg-slate-50 rounded-2xl border border-slate-150 -mt-14 relative z-10">
+                            <div className="relative group">
+                                <div className="w-20 h-20 rounded-2xl bg-white p-1 border border-slate-200 shadow-md overflow-hidden">
+                                    {photoPreview ? (
+                                        <img 
+                                            src={photoPreview} 
+                                            alt="Preview" 
+                                            className="w-full h-full rounded-xl object-cover"
+                                        />
+                                    ) : (
+                                        <div className="w-full h-full rounded-xl bg-[#185FA5]/10 text-[#185FA5] flex items-center justify-center font-black text-3xl">
+                                            {data.name?.charAt(0) || 'U'}
+                                        </div>
+                                    )}
+                                </div>
+                                <label className="absolute -bottom-2 -right-2 p-2 bg-[#185FA5] text-white rounded-xl shadow-lg hover:bg-[#144f8a] cursor-pointer transition-colors border border-white">
+                                    <Camera className="w-4 h-4" />
+                                    <input 
+                                        type="file" 
+                                        accept="image/*"
+                                        onChange={handlePhotoChange}
+                                        className="hidden" 
+                                    />
+                                </label>
+                            </div>
+                            <div className="space-y-1 text-center sm:text-left flex-1">
+                                <h4 className="text-xs font-black text-slate-800 uppercase tracking-wide">{t('profile_avatar', 'Profile Photo')}</h4>
+                                <p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">
+                                    {t('avatar_rules', 'Upload high-resolution avatar. Max 10MB.')}
+                                </p>
+                            </div>
+                            {errors.profile_photo && (
+                                <p className="text-xs text-red-500 mt-1">{errors.profile_photo}</p>
+                            )}
+                        </div>
+
+                        {/* Fields Grid */}
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-4">
+                            {/* Full Name */}
+                            <div className="space-y-2">
+                                <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">
+                                    {t('full_name', 'Full Name')}
+                                </label>
+                                <div className="relative">
+                                    <User className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                                    <input
+                                        type="text"
+                                        value={data.name}
+                                        onChange={(e) => setData('name', e.target.value)}
+                                        className="w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-150 rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 focus:bg-white transition-all outline-none"
+                                        required
+                                    />
+                                </div>
+                                {errors.name && <p className="text-xs text-red-500 mt-1">{errors.name}</p>}
+                            </div>
+
+                            {/* Email */}
+                            <div className="space-y-2">
+                                <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">
+                                    {t('email_address', 'Email Address')}
+                                </label>
+                                <div className="relative">
+                                    <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                                    <input
+                                        type="email"
+                                        value={data.email}
+                                        onChange={(e) => setData('email', e.target.value)}
+                                        className="w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-150 rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 focus:bg-white transition-all outline-none"
+                                        required
+                                    />
+                                </div>
+                                {errors.email && <p className="text-xs text-red-500 mt-1">{errors.email}</p>}
+                            </div>
+
+                            {/* Phone */}
+                            <div className="space-y-2">
+                                <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">
+                                    {t('phone_number', 'Phone Number')}
+                                </label>
+                                <div className="relative">
+                                    <Phone className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                                    <input
+                                        type="text"
+                                        value={data.phone}
+                                        onChange={(e) => setData('phone', e.target.value)}
+                                        className="w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-150 rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 focus:bg-white transition-all outline-none"
+                                        required
+                                    />
+                                </div>
+                                {errors.phone && <p className="text-xs text-red-500 mt-1">{errors.phone}</p>}
+                            </div>
+
+                            {/* Property Type */}
+                            <div className="space-y-2">
+                                <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">
+                                    {t('property_type', 'Property Type')}
+                                </label>
+                                <div className="relative">
+                                    <Home className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                                    <select
+                                        value={data.property_type}
+                                        onChange={(e) => setData('property_type', e.target.value)}
+                                        className="w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-150 rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 focus:bg-white transition-all outline-none cursor-pointer"
+                                    >
+                                        <option value="">{t('select_property_type', 'Select Property Type')}</option>
+                                        <option value="Villa">{t('villa', 'Villa')}</option>
+                                        <option value="Apartment">{t('apartment', 'Apartment')}</option>
+                                        <option value="Penthouse">{t('penthouse', 'Penthouse')}</option>
+                                        <option value="Townhouse">{t('townhouse', 'Townhouse')}</option>
+                                    </select>
+                                </div>
+                                {errors.property_type && <p className="text-xs text-red-500 mt-1">{errors.property_type}</p>}
+                            </div>
+
+                            {/* Address */}
+                            <div className="space-y-2 sm:col-span-2">
+                                <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">
+                                    {t('address', 'Address')}
+                                </label>
+                                <div className="relative">
+                                    <MapPin className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                                    <input
+                                        type="text"
+                                        value={data.address}
+                                        onChange={(e) => setData('address', e.target.value)}
+                                        className="w-full pl-12 pr-4 py-3 bg-slate-50 border border-slate-150 rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 focus:bg-white transition-all outline-none"
+                                    />
+                                </div>
+                                {errors.address && <p className="text-xs text-red-500 mt-1">{errors.address}</p>}
+                            </div>
+                        </div>
+
+                        {/* Form Action Controls */}
+                        <div className="pt-6 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-end gap-4">
+                            <Link
+                                href="/employer/profile"
+                                className="w-full sm:w-auto px-6 py-3.5 border border-slate-200 hover:bg-slate-50 text-slate-650 rounded-2xl text-xs font-black uppercase tracking-wider text-center transition-colors outline-none"
+                            >
+                                {t('cancel', 'Cancel')}
+                            </Link>
+                            
+                            <button
+                                type="submit"
+                                disabled={processing}
+                                className="w-full sm:w-auto bg-[#185FA5] hover:bg-[#144f8a] text-white px-8 py-3.5 rounded-2xl text-xs font-black uppercase tracking-wider flex items-center justify-center space-x-2 transition-all shadow-md shadow-blue-200/50"
+                            >
+                                <Save className="w-4 h-4" />
+                                <span>{t('save_changes', 'Save Changes')}</span>
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </EmployerLayout>
+    );
+}
diff --git a/resources/js/Pages/Employer/Support/Index.jsx b/resources/js/Pages/Employer/Support/Index.jsx
index 209f910..96c328f 100644
--- a/resources/js/Pages/Employer/Support/Index.jsx
+++ b/resources/js/Pages/Employer/Support/Index.jsx
@@ -14,7 +14,7 @@ import {
     MessageSquare
 } from 'lucide-react';
 
-export default function Index({ tickets }) {
+export default function Index({ tickets, faqs = [] }) {
     const { t } = useTranslation();
     const [searchQuery, setSearchQuery] = useState('');
     const [statusFilter, setStatusFilter] = useState('all');
@@ -204,23 +204,25 @@ export default function Index({ tickets }) {
                 </div>
 
                 {/* FAQ section */}
-                <div className="bg-slate-50 p-6 rounded-3xl border border-slate-200/80 space-y-4">
-                    <h3 className="font-black text-slate-800 text-sm flex items-center space-x-2">
-                        <MessageSquare className="w-4 h-4 text-[#185FA5]" />
-                        <span>{t('frequently_asked_questions', 'Frequently Asked Questions')}</span>
-                    </h3>
-                    
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
-                        <div className="bg-white p-4 rounded-2xl border border-slate-200/50 space-y-1">
-                            <h4 className="font-black text-slate-800">{t('faq_q1', 'How long does a ticket resolution take?')}</h4>
-                            <p className="text-slate-500 font-semibold">{t('faq_a1', 'For priority high tickets, our engineering support response is typically under 2 hours. General queries resolve within 24 hours.')}</p>
-                        </div>
-                        <div className="bg-white p-4 rounded-2xl border border-slate-200/50 space-y-1">
-                            <h4 className="font-black text-slate-800">{t('faq_q2', 'What is Tadbeer contract compliance?')}</h4>
-                            <p className="text-slate-500 font-semibold">{t('faq_a2', 'All worker hirings conform to MOHRE Tadbeer rules. Contracts are electronically generated and uploaded for review.')}</p>
+                {faqs && faqs.length > 0 && (
+                    <div className="bg-slate-50 p-6 rounded-3xl border border-slate-200/80 space-y-4">
+                        <h3 className="font-black text-slate-800 text-sm flex items-center space-x-2">
+                            <MessageSquare className="w-4 h-4 text-[#185FA5]" />
+                            <span>{t('frequently_asked_questions', 'Frequently Asked Questions')}</span>
+                        </h3>
+                        
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
+                            {faqs.map((faq) => (
+                                <div key={faq.id} className="bg-white p-4 rounded-2xl border border-slate-200/50 space-y-1">
+                                    <h4 className="font-black text-slate-800">
+                                        {faq.question.trim().endsWith('?') ? faq.question.trim() : faq.question.trim() + '?'}
+                                    </h4>
+                                    <p className="text-slate-500 font-semibold">{faq.answer}</p>
+                                </div>
+                            ))}
                         </div>
                     </div>
-                </div>
+                )}
 
             </div>
         </EmployerLayout>
diff --git a/routes/web.php b/routes/web.php
index d17d16a..ccaef98 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -80,28 +80,32 @@
     })->name('admin.subscriptions');
 
     Route::get('/payments', function () {
-        $payments = \Illuminate\Support\Facades\DB::table('payments')
-            ->leftJoin('users', 'payments.user_id', '=', 'users.id')
-            ->select('payments.*', 'users.name as user_name', 'users.email as user_email')
-            ->orderBy('payments.created_at', 'desc')
+        $payments = \Illuminate\Support\Facades\DB::table('subscriptions')
+            ->leftJoin('users', 'subscriptions.user_id', '=', 'users.id')
+            ->select('subscriptions.*', 'users.name as user_name', 'users.email as user_email')
+            ->orderBy('subscriptions.created_at', 'desc')
             ->get()
-            ->map(function($payment) {
+            ->map(function($sub) {
+                $planLabel = ucfirst($sub->plan_id) . ' Sponsor Pass';
+                $status = $sub->status === 'active' ? 'Completed' : (ucfirst($sub->status) ?: 'Completed');
+                $startsAt = $sub->starts_at ?? $sub->created_at;
+                $expiresAt = $sub->expires_at ?? date('Y-m-d H:i:s', strtotime($startsAt . ' +1 month'));
                 return [
-                    'id' => 'PAY-' . str_pad($payment->id, 3, '0', STR_PAD_LEFT),
-                    'employer' => $payment->user_name ?: 'System Guest / Sponsor',
-                    'plan' => $payment->description ?: 'Subscription Plan',
-                    'amount' => (float)$payment->amount,
-                    'method' => 'Stripe Gateway',
-                    'date' => date('Y-m-d', strtotime($payment->created_at)),
-                    'status' => $payment->status === 'success' ? 'Completed' : (ucfirst($payment->status) ?: 'Completed'),
-                    'period' => date('M Y', strtotime($payment->created_at)) . ' - ' . date('M Y', strtotime($payment->created_at . ' +1 month')),
+                    'id' => 'PAY-' . str_pad($sub->id, 3, '0', STR_PAD_LEFT),
+                    'employer' => $sub->user_name ?: 'System Guest / Sponsor',
+                    'plan' => $planLabel,
+                    'amount' => (float)$sub->amount_aed,
+                    'method' => 'PayTabs Gateway',
+                    'date' => date('Y-m-d', strtotime($startsAt)),
+                    'status' => $status,
+                    'period' => date('M Y', strtotime($startsAt)) . ' - ' . date('M Y', strtotime($expiresAt)),
                 ];
             });
 
-        $totalRevenue = \Illuminate\Support\Facades\DB::table('payments')->where('status', 'success')->sum('amount');
-        $activeSubs = \Illuminate\Support\Facades\DB::table('sponsors')->where('subscription_status', 'active')->count();
-        $failedPayments = \Illuminate\Support\Facades\DB::table('payments')->where('status', 'failed')->count();
-        $avgTicket = \Illuminate\Support\Facades\DB::table('payments')->where('status', 'success')->avg('amount') ?: 0;
+        $totalRevenue = \Illuminate\Support\Facades\DB::table('subscriptions')->where('status', 'active')->sum('amount_aed');
+        $activeSubs = \Illuminate\Support\Facades\DB::table('subscriptions')->where('status', 'active')->count();
+        $failedPayments = \Illuminate\Support\Facades\DB::table('subscriptions')->where('status', 'failed')->count();
+        $avgTicket = \Illuminate\Support\Facades\DB::table('subscriptions')->where('status', 'active')->avg('amount_aed') ?: 0;
 
         $stats = [
             'total_revenue' => number_format($totalRevenue, 2),
@@ -243,12 +247,16 @@
     // Route::post('/disputes/{id}/resolve', [\App\Http\Controllers\Admin\AdminExtraController::class, 'resolveDispute'])->name('admin.disputes.resolve');
     // Route::post('/disputes/{id}/add-note', [\App\Http\Controllers\Admin\AdminExtraController::class, 'addDisputeNote'])->name('admin.disputes.add-note');
 
-    Route::get('/notifications', [\App\Http\Controllers\Admin\AdminExtraController::class, 'notifications'])->name('admin.notifications');
-    Route::post('/notifications/broadcast', [\App\Http\Controllers\Admin\AdminExtraController::class, 'broadcastNotification'])->name('admin.notifications.broadcast');
 
     Route::get('/analytics', [\App\Http\Controllers\Admin\AdminExtraController::class, 'analytics'])->name('admin.analytics');
     Route::get('/audit-logs', [\App\Http\Controllers\Admin\AdminExtraController::class, 'auditLogs'])->name('admin.audit-logs');
 
+    // Admin FAQs Management
+    Route::get('/faqs', [\App\Http\Controllers\Admin\FaqController::class, 'index'])->name('admin.faqs');
+    Route::post('/faqs', [\App\Http\Controllers\Admin\FaqController::class, 'store'])->name('admin.faqs.store');
+    Route::post('/faqs/{id}', [\App\Http\Controllers\Admin\FaqController::class, 'update'])->name('admin.faqs.update');
+    Route::delete('/faqs/{id}', [\App\Http\Controllers\Admin\FaqController::class, 'destroy'])->name('admin.faqs.destroy');
+
     // Admin Support Tickets
     Route::get('/tickets', [\App\Http\Controllers\Admin\SupportTicketController::class, 'index'])->name('admin.tickets.index');
     Route::get('/tickets/{id}', [\App\Http\Controllers\Admin\SupportTicketController::class, 'show'])->name('admin.tickets.show');
@@ -374,6 +382,7 @@
     Route::post('/events/create', [\App\Http\Controllers\Employer\AnnouncementController::class, 'store'])->name('employer.events.store');
 
     Route::get('/profile', [\App\Http\Controllers\Employer\ProfileController::class, 'index'])->name('employer.profile');
+    Route::get('/profile/edit', [\App\Http\Controllers\Employer\ProfileController::class, 'edit'])->name('employer.profile.edit');
     Route::post('/profile/update', [\App\Http\Controllers\Employer\ProfileController::class, 'update'])->name('employer.profile.update');
 
     Route::get('/payments', [\App\Http\Controllers\Employer\PaymentController::class, 'index'])->name('employer.payments');