diff --git a/index.html b/index.html
index 211e693..12a85a0 100644
--- a/index.html
+++ b/index.html
@@ -1,22 +1,28 @@
 <html>
   <head>
     <title>Widuri Client</title>
+    <link rel="stylesheet" href="//cdn.datatables.net/2.3.2/css/dataTables.dataTables.min.css">
   </head>
   <body>
-    <table>
-      <tr>
-        <th>ID<th>
-        <th>Name<th>
-        <th>Phone<th>
-      </tr>
+    <table id="table-list">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th>Phone</th>
+        </tr>
+      </thead>
 
-      <tr>
-        <td></td>
-        <td></td>
-        <td></td>
-      </tr>
+      <tbody></tbody>
       
     </table>
+    
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+    <script src="//cdn.datatables.net/2.3.2/js/dataTables.min.js"></script>
     <script src="js/carrack.js"></script>
+    <script>
+      var table = $('#table-list').DataTable({})
+    </script>
+    
   </body>
 </html>
