diff --git a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html
index 9fa1cbd..818d170 100644
--- a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html
+++ b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html
@@ -5,27 +5,86 @@
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
-    <h1>Hello, World!</h1>
-    <p>Welcome to my first web page.</p>
+    <div class="datatable">
+        <div class="list">
+            <h1>Customers:</h1>
+            <table>
+                <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>Name</th>
+                        <th colspan="2">Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="resultarea">
 
-    <div id="formdiv">
-        <input type="text" id="customername" placeholder="Customer name">
-        <button id="add" onclick="addCustomer()">Add</button>
+                </tbody>
+            </table>
+        </div>
+
+        <h2>Create new customer:</h2>
+        <div class="formdiv">
+            <table>
+                <tr>
+                    <td>
+                        <input type="text" id="customername" placeholder="Customer name">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="text" id="customeremail" placeholder="Email address">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="text" id="customerphone" placeholder="Phone number">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <button id="add" onclick="addCustomer()">Add</button>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <h2>Edit customer:</h2>
+        <div class="formdiv">
+            <table>
+                <tr>
+                    <td>
+                        <input type="text" id="customerid" placeholder="Customer ID">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="text" id="customername" placeholder="Customer name">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="text" id="customeremail" placeholder="Email address">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="text" id="customerphone" placeholder="Phone number">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="text" id="customerserviceid" placeholder="Service ID">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <button id="add" onclick="editCustomer()">Add</button>
+                    </td>
+                </tr>
+            </table>
+        </div>
     </div>
 
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>Name</th>
-                <th>Actions</th>
-            </tr>
-        </thead>
-        <tbody id="resultarea">
-
-        </tbody>
-    </table>
-
     <script src="script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js
index 300c75a..337568b 100644
--- a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js
+++ b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js
@@ -26,20 +26,46 @@ function display()
         '</td><td>'
         + t.name +
         '</td><td>'
-        + '<button type="button" onclick="deleteCustomer(' + t.id + ')">Delete</button>' +
-        '</td></tr>';
+        + '<button type="button" onclick="deleteCustomer(' + t.id + ')">Delete</button>'
+        + '</td><td>'
+        + '<button type="button" onclick="updateCustomer(' + t.id + ')">Update</button>'
+        + '</td></tr>';
     });
 }
 
+function updateCustomer(id)
+{
+    let customerId = document.getElementById('customerid').value;
+    let customerName = document.getElementById('customername').value;
+    let customerPhone = document.getElementById('customerphone').value;
+    let customerEmail = document.getElementById('customeremail').value;
+    let customerServiceId = document.getElementById('customerserviceid').value;
+
+
+    fetch ('https://localhost:5001/api/Customer/' + id, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            name: 'Updated Name',
+            phone: 'Updated Phone',
+            customerEmail: 'Updated Email'
+        })
+    })
+}
+
 function addCustomer()
 {
     let customerName = document.getElementById('customername').value;
+    let customerPhone = document.getElementById('customerphone').value;
+    let customerEmail = document.getElementById('customeremail').value;
 
     fetch('https://localhost:5001/api/Customer', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
             name: customerName,
+            phone: customerPhone,
+            customerEmail: customerEmail
         })
     })
     .then(response => response)
diff --git a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css
index 031ba92..88a8855 100644
--- a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css
+++ b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css
@@ -3,35 +3,55 @@
     width: 100%;
 }
 
-table, th, td
+.list table, .list th, .list td
 {
     border: 1px solid black;
 }
 
-table
+.list table
 {
     border-collapse: collapse;
 }
 
-th,td
+.list th, .list td
 {
     padding: 5px;
 }
 
-th
+.list th
 {
     background-color: rgb(127, 255, 138);
 }
 
-#formdiv
+.list button
+{
+    width: 100%;
+    height: 30px;
+    box-sizing: border-box;
+}
+
+
+
+
+.formdiv
 {
     display: flex;
     flex-direction: column;
-    margin-bottom: 20px;
 }
 
-#formdiv button input
+.formdiv table
 {
-    margin: 10px;
-    padding: 5px;
+    border: none;
+}
+
+.formdiv button, .formdiv input
+{
+    width: 100%;
+    height: 60px;
+    box-sizing: border-box;
+}
+
+.datatable *
+{
+    padding: 10;
 }
\ No newline at end of file
