diff --git a/index.html b/index.html
index 3d80329..e5543ca 100644
--- a/index.html
+++ b/index.html
@@ -469,6 +469,7 @@
 <!-- Custom scripts for all pages-->
 <script src="js/sb-admin-2.min.js"></script>
 <script src="vendor/notify/notify.min.js"></script>
+<script src="js/var_conf.js"></script>
 <script src="js/timelaps.js"></script>
 
 <!-- Page level plugins -->
diff --git a/js/timelaps.js b/js/timelaps.js
index 33f9422..8b7dde9 100644
--- a/js/timelaps.js
+++ b/js/timelaps.js
@@ -1,42 +1,3 @@
-var api_url = 'http://timelaps.local:8000/api/v1/';
-
-function getParams() {
-
-}
-
-function showKarts() {
-    $.ajax({
-        type: 'GET',
-        crossDomain: true,
-        url: api_url + 'karts/',
-        dataType: 'json',
-        success: function (data, status) {
-            console.log(data);
-            $('#dataTable_kart_list').DataTable({
-                data: data,
-                columns: [
-                    {
-                        data: "id",
-                        render: function (data, type, row, meta) {
-                            return '<a href="#" class="btn btn-primary btn-circle"><i class="fas fa-edit"></i></a>&nbsp;<a href="#" class="btn btn-danger btn-circle"><i class="fas fa-trash"></i>';
-                        }
-                    },
-                    {
-                        data: "name"
-                    },
-                    {
-                        data: "autonomy"
-                    }
-                ]
-            });
-        },
-        error: function (xhr) {
-            $.notify("APIs unreachable!", "error");
-            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
-        },
-    });
-}
-
 function getKartsMenu() {
     $.ajax({
         type: 'GET',
@@ -136,3 +97,195 @@ function getPilotsByKart() {
         },
     });
 }
+
+function getParams() {
+
+    $.ajax({
+        type: 'GET',
+        crossDomain: true,
+        url: api_url + 'params/1/',
+        dataType: 'json',
+        success: function (data, status) {
+            $('#id').val(data.id);
+            $('#autonomy').val(data.autonomy);
+            $('#stand_minimum_time').val(data.stand_minimum_time);
+            $('#default_relay').val(data.default_relay);
+            $('#comment').val(data.comment);
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+        },
+    });
+}
+
+function editParams(data) {
+    $.ajax({
+        type: 'PUT',
+        crossDomain: true,
+        url: api_url + 'params/1/',
+        dataType: 'json',
+        data: data,
+        success: function (data, status) {
+            $.notify("Update done!", "success");
+            getParams();
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+        },
+    });
+}
+
+function getKarts(id) {
+
+    $.ajax({
+        type: 'GET',
+        crossDomain: true,
+        url: api_url + 'karts/'+id+'/',
+        dataType: 'json',
+        success: function (data, status) {
+            $('#id').val(data.id);
+            $('#autonomy').val(data.autonomy);
+            $('#stand_minimum_time').val(data.stand_minimum_time);
+            $('#default_relay').val(data.default_relay);
+            $('#comment').val(data.comment);
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+        },
+    });
+}
+
+function listKarts() {
+    $.ajax({
+        type: 'GET',
+        crossDomain: true,
+        url: api_url + 'karts/',
+        dataType: 'json',
+        success: function (data, status) {
+            console.log(data);
+            $('#dataTable_kart_list').DataTable({
+                data: data,
+                columns: [
+                    {
+                        data: "id",
+                        render: function (data, type, row, meta) {
+                            return  '<a href="#" onclick="" class="btn btn-primary btn-circle">' +
+                                        '<i class="fas fa-edit"></i>' +
+                                    '</a>' +
+                                    '&nbsp;' +
+                                    '<a href="#" onclick="if ( confirm( \'Do you want to delete the kart\' ) ) {deleteKarts('+data+')}" class="btn btn-danger btn-circle">' +
+                                        '<i class="fas fa-trash"></i>' +
+                                    '</a>';
+                        }
+                    },
+                    {
+                        data: "name"
+                    },
+                    {
+                        data: "autonomy"
+                    }
+                ]
+            });
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+        },
+    });
+}
+
+function deleteKarts(id) {
+    $.ajax({
+        type: 'DELETE',
+        crossDomain: true,
+        url: api_url + 'karts/'+id+'/',
+        dataType: 'json',
+        data: data,
+        success: function (data, status) {
+            $.notify("Delete done!", "success");
+            showKarts();
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+        },
+    });
+}
+
+function addKarts(data) {
+    $.ajax({
+        type: 'POST',
+        crossDomain: true,
+        url: api_url + 'karts/',
+        dataType: 'json',
+        data: data,
+        success: function (data, status) {
+            $.notify("Update done!", "success");
+            //showKarts();
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+        },
+    });
+}
+
+function editKarts(data) {
+    $.ajax({
+        type: 'PUT',
+        crossDomain: true,
+        url: api_url + 'karts/1/',
+        dataType: 'json',
+        data: data,
+        success: function (data, status) {
+            $.notify("Update done!", "success");
+            showKarts();
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+        },
+    });
+}
+
+function getDriver(id) {
+
+    $.ajax({
+        type: 'GET',
+        crossDomain: true,
+        url: api_url + 'drivers/'+id+'/',
+        dataType: 'json',
+        success: function (data, status) {
+            $('#id').val(data.id);
+            $('#autonomy').val(data.autonomy);
+            $('#stand_minimum_time').val(data.stand_minimum_time);
+            $('#default_relay').val(data.default_relay);
+            $('#comment').val(data.comment);
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+        },
+    });
+}
+
+function editDriver(data) {
+    $.ajax({
+        type: 'PUT',
+        crossDomain: true,
+        url: api_url + 'drivers/1/',
+        dataType: 'json',
+        data: data,
+        success: function (data, status) {
+            $.notify("Update done!", "success");
+            getPilotsByKart();
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+        },
+    });
+}
diff --git a/js/var_conf.js b/js/var_conf.js
new file mode 100644
index 0000000..9a19e33
--- /dev/null
+++ b/js/var_conf.js
@@ -0,0 +1 @@
+var api_url = 'http://timelaps.local:8000/api/v1/';
\ No newline at end of file
diff --git a/karts.html b/karts.html
index 3a80647..637a378 100644
--- a/karts.html
+++ b/karts.html
@@ -195,7 +195,8 @@
                     <div class="card-header py-3">
                         <h6 class="m-0 font-weight-bold text-primary">
                             Karting list -
-                            <a href="#" class="btn btn-primary btn-circle" data-toggle="modal" data-target="#modal_newkart">
+                            <a href="#" class="btn btn-primary btn-circle" data-toggle="modal"
+                               data-target="#modal_newkart">
                                 <i class="fas fa-plus"></i>
                             </a>
                         </h6>
@@ -215,42 +216,6 @@
                                 </tr>
                                 </thead>
                                 <tbody>
-                                <!---
-                                <tr>
-                                    <td>
-                                        <a href="#" class="btn btn-primary btn-circle">
-                                            <i class="fas fa-edit"></i>
-                                        </a>
-                                        <a href="#" class="btn btn-danger btn-circle">
-                                            <i class="fas fa-trash"></i>
-                                        </a>
-                                    </td>
-                                    <td>OCK 1</td>
-                                    <td>150</td>
-                                    <td>45</td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        <a href="#" class="btn btn-primary btn-circle">
-                                            <i class="fas fa-edit"></i>
-                                        </a>
-                                        <a href="#" class="btn btn-danger btn-circle">
-                                            <i class="fas fa-trash"></i>
-                                        </a>
-                                    </td>
-                                    <td>OCK 2</td>
-                                    <td>150</td>
-                                    <td>45</td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        <a href="#" class="btn btn-primary btn-circle"><i class="fas fa-edit"></i></a><a href="#" class="btn btn-danger btn-circle"><i class="fas fa-trash"></i></a>
-                                    </td>
-                                    <td>OCK 3</td>
-                                    <td>150</td>
-                                    <td>45</td>
-                                </tr>
-                                -->
                                 </tbody>
                             </table>
                         </div>
@@ -264,7 +229,8 @@
         </div>
         <!-- End of Main Content -->
 
-        <div class="modal fade" id="modal_newkart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal fade" id="modal_newkart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+             aria-hidden="true">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -273,16 +239,21 @@
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
-                    <form>
+                    <form id="kartForm">
                         <div class="modal-body">
-                                <div class="form-group">
-                                    <label for="inputKartName">Name</label>
-                                    <input type="email" class="form-control" id="inputKartName" placeholder="Enter kart name">
-                                </div>
-                                <div class="form-group">
-                                    <label for="inputAutonomy">Autonomy</label>
-                                    <input type="password" class="form-control" id="inputAutonomy" placeholder="Autonomy">
-                                </div>
+                            <input type="hidden" class="form-control" id="id" value="">
+                            <div class="form-group">
+                                <label for="name">Name</label>
+                                <input type="text" class="form-control" id="name" placeholder="Enter kart name">
+                            </div>
+                            <div class="form-group">
+                                <label for="autonomy">Autonomy</label>
+                                <input type="number" step="1" class="form-control" id="autonomy" placeholder="Autonomy">
+                            </div>
+                            <div class="form-group">
+                                <label for="comment">Comment</label>
+                                <textarea class="form-control" id="comment" rows="3"></textarea>
+                            </div>
                         </div>
                         <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
@@ -326,13 +297,22 @@
 <script src="vendor/datatables/jquery.dataTables.min.js"></script>
 <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
 <script src="vendor/notify/notify.min.js"></script>
+<script src="js/var_conf.js"></script>
 <script src="js/timelaps.js"></script>
 
 <script>
 
     $(document).ready(function () {
         getKartsMenu();
-        showKarts();
+        listKarts();
+
+        $("#kartForm").submit(function (event) {
+            console.log('prevent submit');
+            event.preventDefault();
+            console.log($(this).serialize());
+            addKarts($( this ).serialize())
+        });
+
     });
 
 </script>
diff --git a/params.html b/params.html
index 2cb4943..298a19e 100644
--- a/params.html
+++ b/params.html
@@ -193,26 +193,26 @@
                         <h6 class="m-0 font-weight-bold text-primary">Race params</h6>
                     </div>
                     <div class="card-body">
-                        <form method="GET" action="paramRace.php">
+                        <form id="edit_params" method="GET">
                             <div class="form-group">
-                                <input type="hidden" class="form-control" name="name" value="startRace">
-                                <label for="autonomie">Autonomie du karting (Minutes)</label>
-                                <input type="number" step="1" name="autonomie" class="form-control" id="autonomie"
-                                       placeholder="140" value="" required="">
+                                <input type="hidden" class="form-control" name="id" id="id" value="1">
+                                <label for="autonomy">Autonomie du karting (Minutes)</label>
+                                <input type="number" step="1" name="autonomy" class="form-control" id="autonomy"
+                                       value="" required="">
                             </div>
                             <div class="form-group">
-                                <label for="dureeRelai">Durée des relais par défaut (Minutes)</label>
-                                <input type="number" step="1" name="dureeRelai" class="form-control" id="dureeRelai"
-                                       placeholder="45" value="" required="">
+                                <label for="default_relay">Durée des relais par défaut (Minutes)</label>
+                                <input type="number" step="1" name="default_relay" class="form-control" id="default_relay"
+                                       value="" required="">
                             </div>
                             <div class="form-group">
-                                <label for="dureeStand">Duree dans les stands minimum (Minutes)</label>
-                                <input type="number" step="1" name="dureeStand" class="form-control" id="dureeStand"
-                                       placeholder="1.5" value="" required="">
+                                <label for="stand_minimum_time">Duree dans les stands minimum (Minutes)</label>
+                                <input type="number" step="1" name="stand_minimum_time" class="form-control" id="stand_minimum_time"
+                                       value="" required="">
                             </div>
                             <div class="form-group">
-                                <label for="commentaire">Commentaire</label>
-                                <textarea class="form-control" name="commentaire" id="commentaire" rows="3"></textarea>
+                                <label for="comment">Commentaire</label>
+                                <textarea class="form-control" name="comment" id="comment" rows="3"></textarea>
                             </div>
 
                             <button type="submit" class="btn btn-primary">Enregistrer</button>
@@ -257,12 +257,18 @@
 <!-- Custom scripts for all pages-->
 <script src="js/sb-admin-2.min.js"></script>
 <script src="vendor/notify/notify.min.js"></script>
+<script src="js/var_conf.js"></script>
 <script src="js/timelaps.js"></script>
 
 <script>
 
     $(document).ready(function () {
         getKartsMenu();
+        getParams();
+        $( "#edit_params" ).submit(function( event ) {
+            event.preventDefault();
+           editParams($( this ).serialize())
+        });
     });
 
 </script>
diff --git a/pilots.html b/pilots.html
index 3dad637..958fd18 100644
--- a/pilots.html
+++ b/pilots.html
@@ -230,6 +230,7 @@
 <script src="vendor/datatables/jquery.dataTables.min.js"></script>
 <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
 <script src="vendor/notify/notify.min.js"></script>
+<script src="js/var_conf.js"></script>
 <script src="js/timelaps.js"></script>
 
 <script>