diff --git a/src/routes/backoffice/project/+page.svelte b/src/routes/backoffice/project/+page.svelte
index 8b7cb1d..6af0b51 100644
--- a/src/routes/backoffice/project/+page.svelte
+++ b/src/routes/backoffice/project/+page.svelte
@@ -17,6 +17,7 @@
     type insertProject = {
         issue_id: string;
         input_by: string;
+        project_start_date?: string;
         project_due_date: string;
         picture_link: string;
         updated_at?: string; // Optional, if not always present
@@ -36,6 +37,7 @@
         issue_number: string;
         issue_id: string;
         report_date: string;
+        project_start_date?: string; 
         project_due_date: string;
         project_number?: string; // Optional, if not always present
         assigned_name?: string; // Optional, if not always present
@@ -98,8 +100,10 @@
     let showProjectEditModal = false;
     let projectEditForm = {
         project_number: "",
-        issue_id: "",
+        issue_desc: "",
         project_name: "",
+        project_start_date:"",
+        project_due_date:"",
         project_status: "On Progress",
         project_comment: "",
         picture_link: "",
@@ -111,8 +115,10 @@
     function openProjectEditModal(row) {
         projectEditForm = {
             project_number: row.project_number || "",
-            issue_id: row.issue_id || "",
+            issue_desc: row.issue_name || "",
             project_name: row.project_name || "",
+            project_start_date: row.project_start_date || "",
+            project_due_date: row.project_due_date || "",
             project_status: row.project_status || "On Progress",
             project_comment: row.project_comment || "",
             picture_link: row.picture_link || "",
@@ -155,7 +161,8 @@
         const { data, error } = await supabase
             .from("vb_employee")
             .select("id, employee_name, employee_status")
-            .eq("employee_status", "Active");
+            .eq("employee_status", "Active")
+            .order("employee_name", { ascending: true });
 
         if (error) {
             console.error("Error fetching employees:", error);
@@ -618,6 +625,8 @@
             project_comment: projectEditForm.project_comment,
             picture_link: projectEditForm.picture_link,
             assigned_to: projectEditForm.assigned_to,
+            project_start_date: projectEditForm.project_start_date,
+            project_due_date: projectEditForm.project_due_date,
             updated_at: formattedDate,
             updated_by: user.id  // ✅ real user info
             })
@@ -1134,59 +1143,75 @@
 {#if showProjectEditModal}
   <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
     <div class="min-h-screen flex items-center justify-center p-4">
-      <div class="bg-white rounded-lg shadow-lg w-full max-w-xl max-h-[90vh] overflow-y-auto p-6 space-y-6">
+      <div class="bg-white rounded-2xl shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto p-8 space-y-6">
+        
+        <h2 class="text-2xl font-semibold text-gray-800">🛠️ Edit Project</h2>
 
-        <h2 class="text-2xl font-semibold">Edit Project</h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <!-- Left -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Left Column -->
           <div class="space-y-4">
             <div>
-              <label class="block text-sm font-medium text-gray-700">Project Number</label>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Project Number</label>
               <input type="text" value={projectEditForm.project_number} disabled class="w-full border p-2 bg-gray-100 rounded" />
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-gray-700">Issue ID</label>
-              <input type="text" value={projectEditForm.issue_id} disabled class="w-full border p-2 bg-gray-100 rounded" />
+              <label class="block text-sm font-medium text-gray-700 mb-1">Issue Description</label>
+              <textarea value={projectEditForm.issue_desc} disabled class="w-full border p-2 bg-gray-100 rounded resize-none" rows="3" />
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-gray-700">Project Name</label>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Project Name</label>
               <input type="text" bind:value={projectEditForm.project_name} class="w-full border p-2 rounded" />
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-gray-700">Project Status</label>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Project Status</label>
               <select bind:value={projectEditForm.project_status} class="w-full border p-2 rounded">
                 <option value="On Progress">On Progress</option>
                 <option value="Done">Done</option>
               </select>
             </div>
+
+            
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Picture Link</label>
+                <input type="text" bind:value={projectEditForm.picture_link} class="w-full border p-2 rounded" />
+            </div>
           </div>
 
-          <!-- Right -->
+          <!-- Right Column -->
           <div class="space-y-4">
             <div>
-              <label class="block text-sm font-medium text-gray-700">Picture Link</label>
-              <input type="text" bind:value={projectEditForm.picture_link} class="w-full border p-2 rounded" />
+                <label class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
+                <input type="date" bind:value={projectEditForm.project_start_date} class="w-full border p-2 rounded" />
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-gray-700">Assigned To</label>
-              <input type="text" bind:value={projectEditForm.assigned_to} class="w-full border p-2 rounded" />
+              <label class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>
+              <input type="date" bind:value={projectEditForm.project_due_date} class="w-full border p-2 rounded" />
             </div>
 
             <div>
-              <label class="block text-sm font-medium text-gray-700">Project Comment</label>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Assigned To</label>
+              <select bind:value={projectEditForm.assigned_to} class="w-full border p-2 rounded">
+                <option value="">Select Employee</option>
+                {#each employees as emp}
+                  <option value={emp.id}>{emp.employee_name}</option>
+                {/each}
+              </select>
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Project Comment</label>
               <textarea bind:value={projectEditForm.project_comment} rows="4" class="w-full border p-2 rounded"></textarea>
             </div>
           </div>
         </div>
 
-        <div class="flex justify-end space-x-2 pt-4">
-          <button on:click={saveProjectEdit} class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Save</button>
-          <button on:click={() => showProjectEditModal = false} class="px-4 py-2 rounded border">Cancel</button>
+        <div class="flex justify-end gap-3 pt-4">
+          <button on:click={() => showProjectEditModal = false} class="px-4 py-2 rounded border text-gray-700 hover:bg-gray-100">Cancel</button>
+          <button on:click={saveProjectEdit} class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Save</button>
         </div>
 
       </div>
@@ -1194,3 +1219,4 @@
   </div>
 {/if}
 
+
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 4aee318..8841e4d 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { supabase } from "$lib/supabaseClient";
     import { goto } from "$app/navigation";
-    import logo from "$lib/images/villa.png"; // Confirm this path and image is suitable
+    import logo from "$lib/images/logo.webp"; // Confirm this path and image is suitable
 
     let email = "";
     let password = "";