diff --git a/src/routes/backoffice/humanresource/employee/+page.svelte b/src/routes/backoffice/humanresource/employee/+page.svelte
index 2b90592..88520f3 100644
--- a/src/routes/backoffice/humanresource/employee/+page.svelte
+++ b/src/routes/backoffice/humanresource/employee/+page.svelte
@@ -31,7 +31,26 @@
         salary: number;
         last_edu: string;
         document: string;
-        url: string;
+        hire_date?: Date;
+        leaving_date?: Date;
+        termination_reason?: string;
+        special_notes?: string;
+        company?: string;
+        blood_type?: string;
+        religion?: string;
+        marital_status?: string;
+        id_number?: string;
+        emergency_contact_relation?: string;
+        bank_account_name?: string;
+        bpjs_kesehatan_id?: string;
+        father_name?: string;
+        mother_name?: string;
+        spouse_name?: string;
+        number_of_children?: number;
+        child_1?: string;
+        child_2?: string;
+        child_3?: string;
+        place_of_birth?: string;
         created_at?: Date;
     };
 
@@ -46,6 +65,13 @@
         OutSource: "Outsource",
     };
 
+    const MaritalStatus = {
+        Single: "Single",
+        Married: "Married",
+        Divorced: "Divorced",
+        Widowed: "Widowed",
+    };
+
     let allRows: EmployeeItem[] = [];
 
     let offset = 0;
@@ -58,15 +84,23 @@
     let search: string = "";
 
     const columns: columns[] = [
-        { key: "no", title: "No. " },
+        { key: "no", title: "Employee No." },
         { key: "employee_name", title: "Employee Name" },
         { key: "employee_status", title: "Status" },
         { key: "location", title: "Location" },
+        { key: "company", title: "Company" },
         { key: "department", title: "Department" },
         { key: "contract_start", title: "Contract Start" },
         { key: "end_of_contract", title: "End of Contract" },
+        { key: "hire_date", title: "Hire Date" },
+        { key: "leaving_date", title: "Leaving Date" },
+        { key: "termination_reason", title: "Termination/Leaving Reason" },
+        { key: "special_notes", title: "Special Notes" },
         { key: "employee_type", title: "Type" },
+        { key: "place_of_birth", title: "Place of Birth" },
         { key: "date_of_birth", title: "Date of Birth" },
+        { key: "id_number", title: "ID Number" },
+        { key: "marital_status", title: "Marital Status" },
         { key: "photo_url", title: "Photo" },
         { key: "phone", title: "Phone" },
         { key: "mobile", title: "Mobile" },
@@ -76,15 +110,26 @@
         { key: "temporary_address", title: "Temporary Address" },
         { key: "job_title", title: "Job Title" },
         { key: "emergency_contact_name", title: "Emergency Contact Name" },
+        { key: "emergency_contact_relation", title: "Emergency Contact Relation" },
         { key: "emergency_contact_phone", title: "Emergency Contact Phone" },
         { key: "bank_account", title: "Bank Account" },
+        { key: "bank_account_name", title: "Employee Bank Account Name" },
         { key: "jamsostek_id", title: "Jamsostek ID" },
+        { key: "bpjs_kesehatan_id", title: "BPJS Kesehatan ID" },
         { key: "npwp_id", title: "NPWP ID" },
         { key: "remarks", title: "Remarks" },
         { key: "salary", title: "Salary" },
         { key: "last_edu", title: "Last Education" },
+        { key: "religion", title: "Religion" },
+        { key: "blood_type", title: "Blood Type" },
+        { key: "father_name", title: "Father’s Name" },
+        { key: "mother_name", title: "Mother’s Name" },
+        { key: "spouse_name", title: "Spouse Name" },
+        { key: "number_of_children", title: "Number of Children" },
+        { key: "child_1", title: "Child 1" },
+        { key: "child_2", title: "Child 2" },
+        { key: "child_3", title: "Child 3" },
         { key: "document", title: "Document" },
-        { key: "url", title: "URL" },
         { key: "created_at", title: "Created At" },
         { key: "actions", title: "Actions" },
     ];
@@ -196,12 +241,14 @@
         department: "IT",
         contract_start: new Date(),
         end_of_contract: new Date(),
+        hire_date: new Date(),
+        leaving_date: new Date(),
         employee_type: "Contract",
         date_of_birth: new Date(),
         photo_url:
             "https://nusapenida-balitour.com/wp-content/uploads/2022/10/a-glance-nusa-penida-scaled.jpg",
-        phone: "08123456789",
-        mobile: "08123456789",
+        phone: "082177751041",
+        mobile: "082177751041",
         personal_email: "ajitest@example.com",
         work_email: "ajitest@workmail.com",
         permanent_address: "Jl. Example No. 123, Jakarta",
@@ -217,7 +264,21 @@
         last_edu: "Bachelor's Degree",
         document:
             "https://nusapenida-balitour.com/wp-content/uploads/2022/10/a-glance-nusa-penida-scaled.jpg",
-        url: "https://example.com/employee/ajitest",
+        place_of_birth: "Jakarta",
+        marital_status: "Single",
+        id_number: "3171234567890001",
+        emergency_contact_relation: "Brother",
+        bank_account_name: "Aji Setiaji",
+        bpjs_kesehatan_id: "1122334455",
+        father_name: "Budi Setiaji",
+        mother_name: "Siti Aminah",
+        spouse_name: "",
+        number_of_children: 100,
+        child_1: "",
+        child_2: "",
+        child_3: "",
+        religion: "Islam",
+        blood_type: "O",
         created_at: new Date(),
     };
 
@@ -266,7 +327,26 @@
                 salary: 0,
                 last_edu: "",
                 document: "",
-                url: "",
+                hire_date: new Date(),
+                leaving_date: new Date(),
+                termination_reason: "",
+                special_notes: "",
+                company: "",
+                blood_type: "",
+                religion: "",
+                marital_status: "",
+                id_number: "",
+                emergency_contact_relation: "",
+                bank_account_name: "",
+                bpjs_kesehatan_id: "",
+                father_name: "",
+                mother_name: "",
+                spouse_name: "",
+                number_of_children: 0,
+                child_1: "",
+                child_2: "",
+                child_3: "",
+                place_of_birth: "",
                 created_at: new Date(),
             };
         }
@@ -624,7 +704,7 @@
                             {col.title}
                         </label>
 
-                        {#if col.key === "contract_start" || col.key === "end_of_contract" || col.key === "date_of_birth"}
+                        {#if col.key === "contract_start" || col.key === "end_of_contract" || col.key === "date_of_birth" || col.key === "hire_date" || col.key === "leaving_date"}
                             <input
                                 type="date"
                                 id={col.key}
@@ -668,6 +748,19 @@
                                     <option value={key}>{value}</option>
                                 {/each}
                             </select>
+                        {:else if col.key === "marital_status"}
+                            <select
+                                id={col.key}
+                                bind:value={newEmployeeInsert[col.key]}
+                                class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 {errorClass(
+                                    col.key,
+                                )}"
+                            >
+                                <option value="" disabled>Select marital status</option>
+                                {#each Object.entries(MaritalStatus) as [key, value]}
+                                    <option value={key}>{value}</option>
+                                {/each}
+                            </select>
                         {:else}
                             <input
                                 type="text"