diff --git a/js/carrack.js b/js/carrack.js
new file mode 100644
index 0000000..db11e92
--- /dev/null
+++ b/js/carrack.js
@@ -0,0 +1,19 @@
+function sendHttpRequest(url, method, data, callback, contentType = "multipart/form-data", authorization = "") {
+  var xhr = new XMLHttpRequest();
+  xhr.open(method, url, true);
+  xhr.setRequestHeader("Content-Type", contentType);
+  xhr.setRequestHeader("Authorization", authorization);
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      if (xhr.status === 200) {
+        var response = xhr.responseText;
+        callback(null, response);
+      }
+      else callback(xhr.status, null);
+    }
+  };
+  var requestData;
+  if (contentType === "application/json") requestData = JSON.stringify(data);
+  else requestData = data;
+  xhr.send(requestData);
+}
diff --git a/js/data.js b/js/data.js
new file mode 100644
index 0000000..53e2c82
--- /dev/null
+++ b/js/data.js
@@ -0,0 +1,35 @@
+var table = $('#table-list').DataTable({
+    "ajax": {
+        "url": "http://localhost:11000/api/read",
+        "tyoe": "POST",
+        "dataSrc": "data",
+        "contentType": "application/json",
+        "data": function (d) {
+            return JSON.stringify({});
+        },
+        "error": function (xhr, error, thrown) {
+            console.error("Error fetching data:", thrown);
+            console.error("Respones", xhr.responseText);
+        }
+    },
+    "columns": [
+        { 
+            "data": "id",
+            "render": function (data, type, row) {
+                return data;
+            }
+        },
+        { 
+            "data": "name",
+            "render": function (data, type, row) {
+                return data;
+            }
+        },
+        { 
+            "data": "phone",
+            "render": function (data, type, row) {
+                return data;
+            }
+        },
+    ]
+})