diff --git a/js/timelaps.js b/js/timelaps.js
index 8b7dde9..c04a262 100644
--- a/js/timelaps.js
+++ b/js/timelaps.js
@@ -165,8 +165,10 @@ function listKarts() {
         url: api_url + 'karts/',
         dataType: 'json',
         success: function (data, status) {
-            console.log(data);
-            $('#dataTable_kart_list').DataTable({
+            if(tableListKart instanceof $.fn.dataTable.Api){
+                tableListKart.destroy();
+            }
+            tableListKart = $('#dataTable_kart_list').DataTable({
                 data: data,
                 columns: [
                     {
@@ -176,7 +178,7 @@ function listKarts() {
                                         '<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">' +
+                                    '<a href="#" onclick="if ( confirm( \'Do you want to delete the kart\' ) ) {deleteKarts('+data+','+meta.row+')}" class="btn btn-danger btn-circle">' +
                                         '<i class="fas fa-trash"></i>' +
                                     '</a>';
                         }
@@ -197,16 +199,15 @@ function listKarts() {
     });
 }
 
-function deleteKarts(id) {
+function deleteKarts(id, index) {
     $.ajax({
         type: 'DELETE',
         crossDomain: true,
         url: api_url + 'karts/'+id+'/',
         dataType: 'json',
-        data: data,
         success: function (data, status) {
             $.notify("Delete done!", "success");
-            showKarts();
+            tableListKart.row(index).remove().draw();
         },
         error: function (xhr) {
             $.notify("APIs unreachable!", "error");
@@ -224,11 +225,14 @@ function addKarts(data) {
         data: data,
         success: function (data, status) {
             $.notify("Update done!", "success");
-            //showKarts();
+            $('#modal_newkart').modal('hide');
+            $("#saveKartChanges").prop('disabled', false);
+            listKarts()
         },
         error: function (xhr) {
             $.notify("APIs unreachable!", "error");
             console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+            $("#saveKartChanges").prop('disabled', false);
         },
     });
 }
diff --git a/js/var_conf.js b/js/var_conf.js
index 9a19e33..19831c1 100644
--- a/js/var_conf.js
+++ b/js/var_conf.js
@@ -1 +1,2 @@
-var api_url = 'http://timelaps.local:8000/api/v1/';
\ No newline at end of file
+var api_url = 'http://timelaps.local:8000/api/v1/';
+var tableListKart = '';
\ No newline at end of file
diff --git a/karts.html b/karts.html
index 637a378..156a171 100644
--- a/karts.html
+++ b/karts.html
@@ -200,10 +200,8 @@
                                 <i class="fas fa-plus"></i>
                             </a>
                         </h6>
-
-
-                        </a>
                     </div>
+
                     <div class="card-body">
                         <div class="table-responsive">
                             <table class="table table-bordered" id="dataTable_kart_list" width="100%" cellspacing="0">
@@ -241,23 +239,23 @@
                     </div>
                     <form id="kartForm">
                         <div class="modal-body">
-                            <input type="hidden" class="form-control" id="id" value="">
+                            <input type="hidden" class="form-control" id="id" name="id" value="">
                             <div class="form-group">
                                 <label for="name">Name</label>
-                                <input type="text" class="form-control" id="name" placeholder="Enter kart name">
+                                <input type="text" class="form-control" id="name" name="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">
+                                <input type="number" step="1" class="form-control" id="autonomy" name="autonomy" placeholder="Autonomy">
                             </div>
                             <div class="form-group">
                                 <label for="comment">Comment</label>
-                                <textarea class="form-control" id="comment" rows="3"></textarea>
+                                <textarea class="form-control" id="comment" name="comment" rows="3"></textarea>
                             </div>
                         </div>
                         <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                            <button type="submit" class="btn btn-primary">Save changes</button>
+                            <button type="submit" id="saveKartChanges" class="btn btn-primary">Save changes</button>
                         </div>
                     </form>
                 </div>
@@ -307,9 +305,8 @@
         listKarts();
 
         $("#kartForm").submit(function (event) {
-            console.log('prevent submit');
+            $("#saveKartChanges").prop('disabled', true);
             event.preventDefault();
-            console.log($(this).serialize());
             addKarts($( this ).serialize())
         });