diff --git a/src/routes/backoffice/humanresource/employee/+page.svelte b/src/routes/backoffice/humanresource/employee/+page.svelte
index 21e3681..fb4e6d4 100644
--- a/src/routes/backoffice/humanresource/employee/+page.svelte
+++ b/src/routes/backoffice/humanresource/employee/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { supabase } from "$lib/supabaseClient";
+    import { formatCurrency } from "$lib/utils/conversion";
     import { onMount } from "svelte";
     import { writable } from "svelte/store";
     import { v4 as uuidv4 } from "uuid";
@@ -154,6 +155,7 @@
         { key: "position_allowance", title: "Position Allowance" },
         { key: "meal_allowance", title: "Meal Allowance" },
         { key: "transportation_allowance", title: "Transportation Allowance" },
+        { key: "total_salary", title: "Total Salary" },
         { key: "created_at", title: "Created At" },
         { key: "updated_at", title: "Updated At" },
     ];
@@ -345,16 +347,7 @@
         updated_at: new Date(),
     };
 
-    let employeeBenefits: EmployeeBenefits = {
-        id: "",
-        employee_id: "",
-        basic_salary: 0,
-        position_allowance: 0,
-        meal_allowance: 0,
-        transportation_allowance: 0,
-        created_at: new Date(),
-        updated_at: new Date(),
-    }
+    let employeeBenefits: Record<string, any> = {};
 
     const excludedKeys = ["id", "actions", "created_at", "no"];
     const formColumns = columns.filter(
@@ -364,6 +357,7 @@
     const excludedKeysBenefits = [
         "id",
         "employee_id",
+        "total_salary",
         "created_at",
         "benefits",
         "updated_at",
@@ -469,6 +463,28 @@
 
         if (benefits) {
             employeeBenefits = benefits;
+
+            employeeBenefits.total_salary = formatCurrency(
+                employeeBenefits.basic_salary +
+                    employeeBenefits.position_allowance +
+                    employeeBenefits.meal_allowance +
+                    employeeBenefits.transportation_allowance,
+            );
+
+            employeeBenefits.basic_salary = formatCurrency(
+                employeeBenefits.basic_salary,
+            );
+            employeeBenefits.position_allowance = formatCurrency(
+                employeeBenefits.position_allowance,
+            );
+            employeeBenefits.meal_allowance = formatCurrency(
+                employeeBenefits.meal_allowance,
+            );
+            employeeBenefits.transportation_allowance = formatCurrency(
+                employeeBenefits.transportation_allowance,
+            );
+
+            console.log("Employee Benefits:", employeeBenefits);
         } else {
             employeeBenefits = {
                 id: "",
@@ -477,6 +493,7 @@
                 position_allowance: 0,
                 meal_allowance: 0,
                 transportation_allowance: 0,
+                total_salary: 0,
                 created_at: new Date(),
                 updated_at: new Date(),
             };
@@ -1056,7 +1073,7 @@
                         </label>
                         {#if col.key === "basic_salary"}
                             <input
-                                type="number"
+                                type="text"
                                 id={col.key}
                                 bind:value={employeeBenefits[col.key]}
                                 class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -1064,7 +1081,7 @@
                             />
                         {:else}
                             <input
-                                type="number"
+                                type="text"
                                 id={col.key}
                                 bind:value={
                                     employeeBenefits[
@@ -1077,6 +1094,22 @@
                         {/if}
                     </div>
                 {/each}
+                <div class="mb-4">
+                    <label
+                        for="total_salary"
+                        class="block text-sm font-medium text-gray-700 mb-1"
+                    >
+                        Total Salary
+                    </label>
+                    <input
+                        type="text"
+                        id="total_salary"
+                        bind:value={employeeBenefits.total_salary}
+                        class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        readonly
+                    />
+                </div>
+
 
                 <div class="flex justify-end">
                     <button