diff --git a/onboarding.php b/onboarding.php
index 9fb857b..f7557ca 100644
--- a/onboarding.php
+++ b/onboarding.php
@@ -6,32 +6,56 @@ if (!isset($_SESSION['user_id'])) {
 }
 require_once 'db/config.php';
 
-// Template data from the React snippet
-$templateTasks = [
-    ['name' => "Setup Development Environment", 'status' => "in-progress", 'category' => "IT"],
-    ['name' => "Complete HR Documentation", 'status' => "completed", 'category' => "HR"],
-    ['name' => "Benefits Enrollment", 'status' => "completed", 'category' => "HR"],
-    ['name' => "Team Introduction Meeting", 'status' => "pending", 'category' => "Manager"],
-    ['name' => "Assign First Project", 'status' => "pending", 'category' => "Manager"],
-    ['name' => "Security Training", 'status' => "pending", 'category' => "IT"],
-    ['name' => "Code Review Process Training", 'status' => "pending", 'category' => "Manager"],
-    ['name' => "Setup Communication Tools", 'status' => "completed", 'category' => "IT"],
+// --- Data based on the new text provided ---
+
+$employee = [
+    'name' => 'Emily Davis',
+    'initials' => 'ED',
+    'title' => 'Product Designer',
+    'team' => 'Design Team',
+    'start_date' => 'Dec 15, 2024',
+    'manager' => 'Sarah Johnson',
+    'day' => 3,
+    'total_days' => 30,
+    'avatar_url' => 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop'
 ];
 
-$completedTasks = count(array_filter($templateTasks, function($t) { return $t['status'] === "completed"; }));
-$progressPercent = ($completedTasks / count($templateTasks)) * 100;
-
-$status_map = [
-    'completed' => ['icon' => 'check-circle-2', 'color' => 'text-green-500', 'bg' => 'bg-green-100'],
-    'in-progress' => ['icon' => 'clock', 'color' => 'text-blue-500', 'bg' => 'bg-blue-100'],
-    'pending' => ['icon' => 'file-text', 'color' => 'text-gray-500', 'bg' => 'bg-gray-100']
+$tasks = [
+    'in_progress' => [
+        ['title' => 'I-9 Form', 'description' => 'Verify employment eligibility documentation', 'due' => 'Dec 10, 2024', 'assignee' => 'Emily Davis'],
+        ['title' => 'Set Up Email Account', 'description' => 'Configure company email and Slack access', 'due' => 'Dec 11, 2024', 'assignee' => 'IT Team'],
+        ['title' => 'Equipment Setup', 'description' => 'Receive and configure laptop and peripherals', 'due' => 'Dec 12, 2024', 'assignee' => 'IT Team'],
+    ],
+    'upcoming' => [
+        ['title' => 'Benefits Enrollment', 'description' => 'Review and select health insurance options', 'due' => 'Dec 20, 2024'],
+        ['title' => 'Department Orientation', 'description' => 'Meet with design team and review processes', 'due' => 'Dec 22, 2024'],
+        ['title' => 'Security Training', 'description' => 'Complete online security awareness course', 'due' => 'Dec 27, 2024'],
+    ],
+    'completed' => [
+        ['title' => 'Sign Offer Letter', 'description' => 'Completed by Emily Davis on Dec 5, 2024'],
+        ['title' => 'Background Check', 'description' => 'Completed by HR Team on Dec 6, 2024'],
+        ['title' => 'Upload Profile Photo', 'description' => 'Completed by Emily Davis on Dec 7, 2024'],
+        ['title' => 'Emergency Contact Info', 'description' => 'Completed by Emily Davis on Dec 7, 2024'],
+    ]
 ];
 
-$category_map = [
-    'IT' => 'text-red-500',
-    'HR' => 'text-blue-500',
-    'Manager' => 'text-purple-500',
-];
+// Numbers from the user's text for summary
+$completed_count_from_text = 12;
+$total_tasks_from_text = 20;
+$progressPercent = ($completed_count_from_text / $total_tasks_from_text) * 100;
+
+function getStatusChip($status) {
+    switch ($status) {
+        case 'In Progress':
+            return '<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">In Progress</span>';
+        case 'Upcoming':
+            return '<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Upcoming</span>';
+        case 'Completed':
+            return '<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Completed</span>';
+        default:
+            return '<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded-full"></span>';
+    }
+}
 
 ?>
 <!DOCTYPE html>
@@ -39,7 +63,7 @@ $category_map = [
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Onboarding - FinMox</title>
+    <title>Onboarding Tasks - FinMox</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
 </head>
@@ -47,94 +71,104 @@ $category_map = [
     <div class="flex h-screen bg-gray-200">
         <?php include '_sidebar.php'; ?>
 
-        <main class="flex-1 flex overflow-hidden">
+        <main class="flex-1 flex flex-col overflow-hidden">
             <div class="flex-1 overflow-y-auto bg-[#fafafa] p-8">
-                <h1 class="text-3xl font-bold text-gray-900 mb-8">Onboarding Plan for Sarah Kim</h1>
                 
-                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                    
-                    <!-- Main Content -->
-                    <div class="lg:col-span-2 space-y-8">
-                        <!-- Welcome Card -->
-                        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
-                            <h3 class="text-xl font-semibold mb-4">Welcome to the Team, Sarah!</h3>
-                            <p class="text-gray-600">We're thrilled to have you on board. This onboarding plan is designed to help you get up to speed quickly and smoothly. Please review the checklist and let your manager know if you have any questions.</p>
-                        </div>
+                <div class="max-w-7xl mx-auto">
+                    <div class="mb-8">
+                        <h1 class="text-3xl font-bold text-gray-900">Onboarding Tasks</h1>
+                        <p class="text-gray-600 mt-1">Manage and track employee onboarding progress</p>
                     </div>
 
-                    <!-- Sidebar -->
-                    <div class="w-full space-y-6">
-                        <!-- Employee Info -->
-                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200">
-                            <div class="p-6 space-y-4">
-                                <h3 class="flex items-center gap-2 font-semibold">
-                                    <i data-lucide="user" class="w-5 h-5 text-[#3A66FF]"></i>
-                                    Employee Information
-                                </h3>
-                                <div class="flex items-center gap-3 pt-2">
-                                    <img class="w-16 h-16 rounded-full" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop" alt="Sarah Kim">
-                                    <div>
-                                        <p class="font-semibold">Sarah Kim</p>
-                                        <p class="text-sm text-gray-500">New Hire</p>
-                                    </div>
-                                </div>
-                                <div class="pt-4 border-t border-gray-200 space-y-3 text-sm">
-                                    <div class="flex items-center gap-3">
-                                        <i data-lucide="briefcase" class="w-4 h-4 text-gray-500"></i>
-                                        <div>
-                                            <p class="text-gray-500">Position</p>
-                                            <p class="font-medium">Senior Full-Stack Engineer</p>
-                                        </div>
-                                    </div>
-                                     <div class="flex items-center gap-3">
-                                        <i data-lucide="mail" class="w-4 h-4 text-gray-500"></i>
-                                        <div>
-                                            <p class="text-gray-500">Email</p>
-                                            <p class="font-medium">sarah.kim@finmox.com</p>
-                                        </div>
-                                    </div>
-                                    <div class="flex items-center gap-3">
-                                        <i data-lucide="calendar" class="w-4 h-4 text-gray-500"></i>
-                                        <div>
-                                            <p class="text-gray-500">Start Date</p>
-                                            <p class="font-medium">December 17, 2025</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                        
+                        <!-- Main Content: Task Lists -->
+                        <div class="lg:col-span-2 space-y-8">
 
-                        <!-- Onboarding Checklist -->
-                        <div class="bg-white rounded-2xl shadow-sm border border-gray-200">
-                            <div class="p-6">
-                                <h3 class="flex items-center gap-2 font-semibold">
-                                    <i data-lucide="layers" class="w-5 h-5 text-[#3A66FF]"></i>
-                                    Onboarding Checklist
-                                </h3>
-                                <div class="mt-4">
-                                    <div class="flex justify-between items-center mb-2">
-                                        <span class="text-sm font-medium text-gray-700">Progress</span>
-                                        <span class="text-sm font-medium text-gray-700"><?= number_format($progressPercent, 0) ?>%</span>
-                                    </div>
-                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                        <div class="bg-[#3A66FF] h-2.5 rounded-full" style="width: <?= $progressPercent ?>%"></div>
-                                    </div>
-                                </div>
-                                <div class="mt-6 space-y-4">
-                                    <?php foreach ($templateTasks as $task): ?>
-                                    <div class="flex items-start gap-3">
-                                        <div class="flex-shrink-0 w-6 h-6 rounded-full <?= $status_map[$task['status']]['bg'] ?> flex items-center justify-center mt-1">
-                                            <i data-lucide="<?= $status_map[$task['status']]['icon'] ?>" class="w-4 h-4 <?= $status_map[$task['status']]['color'] ?>"></i>
-                                        </div>
+                            <!-- In Progress -->
+                            <div>
+                                <h2 class="text-xl font-semibold mb-4">In Progress <span class="text-base font-normal text-gray-500">(<?= count($tasks['in_progress']) ?>)</span></h2>
+                                <div class="space-y-4">
+                                    <?php foreach ($tasks['in_progress'] as $task): ?>
+                                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex items-start justify-between">
                                         <div>
-                                            <p class="font-medium"><?= htmlspecialchars($task['name']) ?></p>
-                                            <span class="text-xs font-semibold px-2 py-0.5 rounded-full <?= $category_map[$task['category']] ?? 'text-gray-500' ?> bg-gray-100 border"><?= htmlspecialchars($task['category']) ?></span>
+                                            <h3 class="font-semibold text-gray-800"><?= htmlspecialchars($task['title']) ?></h3>
+                                            <p class="text-sm text-gray-500 mt-1"><?= htmlspecialchars($task['description']) ?></p>
+                                            <p class="text-sm text-gray-500 mt-2">Due: <?= htmlspecialchars($task['due']) ?></p>
+                                        </div>
+                                        <div class="text-right">
+                                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Complete</span>
+                                            <p class="text-sm font-medium text-gray-600 mt-2"><?= htmlspecialchars($task['assignee']) ?></p>
                                         </div>
                                     </div>
                                     <?php endforeach; ?>
                                 </div>
                             </div>
+
+                            <!-- Upcoming -->
+                            <div>
+                                <h2 class="text-xl font-semibold mb-4">Upcoming <span class="text-base font-normal text-gray-500">(<?= count($tasks['upcoming']) ?>)</span></h2>
+                                <div class="space-y-4">
+                                     <?php foreach ($tasks['upcoming'] as $task): ?>
+                                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex items-start justify-between">
+                                        <div>
+                                            <h3 class="font-semibold text-gray-800"><?= htmlspecialchars($task['title']) ?></h3>
+                                            <p class="text-sm text-gray-500 mt-1"><?= htmlspecialchars($task['description']) ?></p>
+                                        </div>
+                                        <div class="text-right">
+                                             <span class="text-sm text-gray-500">Scheduled: <?= htmlspecialchars($task['due']) ?></span>
+                                        </div>
+                                    </div>
+                                    <?php endforeach; ?>
+                                </div>
+                            </div>
+
+                            <!-- Completed -->
+                             <div>
+                                <h2 class="text-xl font-semibold mb-4">Completed <span class="text-base font-normal text-gray-500">(<?= count($tasks['completed']) ?>)</span></h2>
+                                <div class="space-y-4">
+                                     <?php foreach ($tasks['completed'] as $task): ?>
+                                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+                                        <h3 class="font-semibold text-gray-800"><?= htmlspecialchars($task['title']) ?></h3>
+                                        <p class="text-sm text-gray-500 mt-1"><?= htmlspecialchars($task['description']) ?></p>
+                                    </div>
+                                    <?php endforeach; ?>
+                                </div>
+                            </div>
                         </div>
+
+                        <!-- Sidebar: Employee Overview -->
+                        <div class="space-y-6">
+                            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                                <h3 class="text-lg font-semibold mb-4">Employee Overview</h3>
+                                <div class="flex items-center gap-4">
+                                    <div class="w-16 h-16 rounded-full bg-blue-500 text-white flex items-center justify-center text-2xl font-bold">
+                                        <?= htmlspecialchars($employee['initials']) ?>
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-lg"><?= htmlspecialchars($employee['name']) ?></p>
+                                        <p class="text-gray-600"><?= htmlspecialchars($employee['title']) ?> &bull; <?= htmlspecialchars($employee['team']) ?></p>
+                                    </div>
+                                </div>
+                                <div class="mt-4 pt-4 border-t border-gray-200 text-sm space-y-2">
+                                    <p><span class="font-semibold">Start Date:</span> <?= htmlspecialchars($employee['start_date']) ?></p>
+                                    <p><span class="font-semibold">Manager:</span> <?= htmlspecialchars($employee['manager']) ?></p>
+                                    <p class="text-gray-500 mt-1">Day <?= htmlspecialchars($employee['day']) ?> of <?= htmlspecialchars($employee['total_days']) ?></p>
+                                </div>
+                            </div>
+
+                            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                                <h3 class="text-lg font-semibold mb-4">Overall Progress</h3>
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="text-sm font-medium text-gray-700"><?= $completed_count_from_text ?> of <?= $total_tasks_from_text ?> tasks</span>
+                                    <span class="text-sm font-medium text-gray-700"><?= number_format($progressPercent, 0) ?>%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                    <div class="bg-blue-600 h-2.5 rounded-full" style="width: <?= $progressPercent ?>%"></div>
+                                </div>
+                            </div>
+                        </div>
+
                     </div>
                 </div>
             </div>
@@ -144,4 +178,4 @@ $category_map = [
         lucide.createIcons();
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>