diff --git a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/customers/customers.html b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/customers/customers.html
index 79af1a3..365cb95 100644
--- a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/customers/customers.html
+++ b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/customers/customers.html
@@ -24,31 +24,7 @@
         </tbody>
     </table>
     <h2 id="add">Add a new line</h2>
-    <table class="inputs">
-        <tr>
-            <td>ID</td>
-            <td class="inputcell"><input type="text" id="in_id"></td>
-        </tr>
-        <tr>
-            <td>Name</td>
-            <td class="inputcell"><input type="text" id="in_name"></td>
-        </tr>
-        <tr>
-            <td>Email</td>
-            <td class="inputcell"><input type="text" id="in_email"></td>
-        </tr>
-        <tr>
-            <td>Phone</td>
-            <td class="inputcell"><input type="text" id="in_phone"></td>
-        </tr>
-        <tr>
-            <td>Service ID</td>
-            <td class="inputcell"><input type="text" id="in_service_id"></td>
-        </tr>
-        <tr>
-           <td colspan="2"><button onclick="addcustomer()">Save</button></td>
-        </tr>
-    </table>
-    <h2 id="addresult"></h2>
+    <div id="forms"></div>
+    <h2 id="saveresult"></h2>
 </body>
 </html>
\ No newline at end of file
diff --git a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/customers/customers.js b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/customers/customers.js
index fa153dd..96ba326 100644
--- a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/customers/customers.js
+++ b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/customers/customers.js
@@ -25,74 +25,125 @@ function display()
         '</td><td>'
         + '<button type="button" onclick="deletecustomer(' + t.id + ')">Delete</button>'
         + '</td><td>'
-        + '<button type="button" onclick="updatecustomer(' + t.id + ')">Edit</button>'
+        + '<button type="button" onclick="editcustomer(' + t.id + ')">Edit</button>'
         + '</td></tr>';
     });
 
 }
 
-function updatecustomer(id)
-{
-    let customer_id = document.getElementById('in_id').value;
-    let customer_name = document.getElementById('in_name').value;
-    let customer_email = document.getElementById('in_email').value;
-    let customer_phone = document.getElementById('in_phone').value;
-    let customer_service_id = document.getElementById('in_service_id').value;
-
-    fetch ('https://localhost:5001/api/Customer/' + id, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-            id: customer_id,
-            name: customer_name,
-            email: customer_email,
-            phone: customer_phone,
-            service_id: customer_service_id
-        })
-    })
-}
-
 function addcustomer()
 {
-    let customer_id = document.getElementById('in_id').value;
-    let customer_name = document.getElementById('in_name').value;
-    let customer_email = document.getElementById('in_email').value;
-    let customer_phone = document.getElementById('in_phone').value;
-    let customer_service_id = document.getElementById('in_service_id').value;
+    document.getElementById('forms').innerHTML = '';
+    document.getElementById('forms').innerHTML +=
+    '<table class="inputs">' +
+    '<tr>' +
+    '<td>ID</td>' +
+    '<td class="inputcell"><input type="text" id="in_id"></td>' +
+    '</tr>' +
+    '<tr>' +
+    '<td>Name</td>' +
+    '<td class="inputcell"><input type="text" id="in_name"></td>' +
+    '</tr>' +
+    '<tr>' +
+    '<td>Email</td>' +
+    '<td class="inputcell"><input type="text" id="in_email"></td>' +
+    '</tr>' +
+    '<tr>' +
+    '<td>Phone</td>' +
+    '<td class="inputcell"><input type="text" id="in_phone"></td>' +
+    '</tr>' +
+    '<tr>' +
+    '<td>Service ID</td>' +
+    '<td class="inputcell"><input type="text" id="in_service_id"></td>' +
+    '</tr>' +
+    '<tr>' +
+    '<td colspan="2"><button onclick="savecustomer(\'PUT\')">Add</button></td>' +
+    '</tr>' +
+    '</table>';
+}
+
+function editcustomer(id)
+{
+    existing_item = customers.find(x => x.id == id);
+
+    document.getElementById('forms').innerHTML = '';
+    document.getElementById('forms').innerHTML +=
+    '<table class="inputs">' +
+    '<tr>' +
+    '<td>ID</td>' +
+    '<td class="inputcell"><input type="text" id="in_id" readonly value="' + existing_item.id + '"></td>' +
+    '</tr>' +
+    '<tr>' +
+    '<td>Name</td>' +
+    '<td class="inputcell"><input type="text" id="in_name" value="' + existing_item.name + '"></td>' +
+    '</tr>' +
+    '<tr>' +
+    '<td>Email</td>' +
+    '<td class="inputcell"><input type="text" id="in_email" value="' + existing_item.email + '"></td>' +
+    '</tr>' +
+    '<tr>' +
+    '<td>Phone</td>' +
+    '<td class="inputcell"><input type="text" id="in_phone" value="' + existing_item.phone + '"></td>' +
+    '</tr>' +
+    '<tr>' +
+    '<td>Service ID</td>' +
+    '<td class="inputcell"><input type="text" id="in_service_id" value="' + existing_item.servicE_ID + '"></td>' +
+    '</tr>' +
+    '<tr>' +
+    '<td colspan="2"><button onclick="savecustomer(\'POST\')">Update</button></td>' +
+    '</tr>' +
+    '</table>';
+}
+
+function savecustomer(method)
+{
+    if (method != 'POST' && method != 'PUT')
+    {
+        console.error('Invalid method: ' + method);
+        return;
+    }
+
+    customer_id = document.getElementById('in_id').value;
+    customer_name = document.getElementById('in_name').value;
+    customer_email = document.getElementById('in_email').value;
+    customer_phone = document.getElementById('in_phone').value;
+    customer_service_id = document.getElementById('in_service_id').value;
 
     fetch('https://localhost:5001/api/Customer', {
-        method: 'PUT',
+        method: method,
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
             id: customer_id,
             name: customer_name,
             email: customer_email,
             phone: customer_phone,
-            service_id: customer_service_id
+            servicE_ID: customer_service_id
         })
     })
     .then(response => response)
     .then(data => {
         console.log("Success: ", data)
-
-        document.getElementById('addresult').innerHTML = '';
-        document.getElementById('addresult').innerHTML +=
-        'Added customer ' + customer_name + ' successfully';
-
+    
+        document.getElementById('saveresult').innerHTML = '';
+        document.getElementById('saveresult').innerHTML +=
+        'Saved customer ' + customer_name + ' successfully';
+    
         getcustomers();
-
+    
     })
     .catch(error => {
         console.error("Error: ", error);
-
-        document.getElementById('addresult').innerHTML = '';
-        document.getElementById('addresult').innerHTML +=
-        'Failed to add customer ' + customer_name;
+    
+        document.getElementById('saveresult').innerHTML = '';
+        document.getElementById('saveresult').innerHTML +=
+        'Failed to save customer ' + customer_name;
     });
 }
 
 function deletecustomer(id)
 {
+    document.getElementById('forms').innerHTML = '';
+
     fetch('https://localhost:5001/api/Customer/' + id, {
         method: 'DELETE',
         headers: { 'Content-Type': 'application/json' },
@@ -101,6 +152,11 @@ function deletecustomer(id)
     .then(data =>
     {
         console.log("Success: ", data)
+
+        document.getElementById('saveresult').innerHTML = '';
+        document.getElementById('saveresult').innerHTML +=
+        'Deleted customer number ' + id + ' successfully';
+
         getcustomers();
     })
     .catch(error => console.error("Error: ", error));