diff --git a/application/controllers/Mode.php b/application/controllers/Mode.php
index b6176fbb..258e1a22 100644
--- a/application/controllers/Mode.php
+++ b/application/controllers/Mode.php
@@ -39,15 +39,11 @@ class Mode extends CI_Controller {
 		if ($this->form_validation->run() == FALSE)
 		{
 			$data['page_title'] = "Create Mode";
-			$this->load->view('interface_assets/header', $data);
-			$this->load->view('mode/create');
-			$this->load->view('interface_assets/footer');
+			$this->load->view('mode/create', $data);
 		}
 		else
 		{	
 			$this->modes->add();
-			
-			redirect('mode');
 		}
 	}
 
@@ -84,11 +80,10 @@ class Mode extends CI_Controller {
         }
 	}
 
-	public function delete($id) {
+	public function delete() {
+	    $id = $this->input->post('id');
 		$this->load->model('modes');
 		$this->modes->delete($id);
-		
-		redirect('mode');
 	}
 
 	public function activate() {
diff --git a/application/views/interface_assets/footer.php b/application/views/interface_assets/footer.php
index d72d89cc..755dbcfa 100644
--- a/application/views/interface_assets/footer.php
+++ b/application/views/interface_assets/footer.php
@@ -1811,6 +1811,56 @@ $(document).ready(function(){
 
     <?php if ($this->uri->segment(1) == "mode") { ?>
         <script>
+            $('.modetable').DataTable({
+                "pageLength": 25,
+                responsive: false,
+                ordering: false,
+                "scrollY":        "500px",
+                "scrollCollapse": true,
+                "paging":         false,
+                "scrollX": true
+            });
+
+            function createModeDialog() {
+                var baseURL= "<?php echo base_url();?>";
+                $.ajax({
+                    url: baseURL + 'index.php/mode/create',
+                    type: 'post',
+                    success: function(html) {
+                        BootstrapDialog.show({
+                            title: 'Create mode',
+                            size: BootstrapDialog.SIZE_WIDE,
+                            cssClass: 'create-mode-dialog',
+                            nl2br: false,
+                            message: html,
+                            buttons: [{
+                                label: 'Close',
+                                action: function (dialogItself) {
+                                    dialogItself.close();
+                                }
+                            }]
+                        });
+                    }
+                });
+            }
+
+            function createMode(form) {
+                var baseURL= "<?php echo base_url();?>";
+                if (form.mode.value != '') {
+                    $.ajax({
+                        url: baseURL + 'index.php/mode/create',
+                        type: 'post',
+                        data: {'mode': form.mode.value,
+                            'submode': form.submode.value,
+                            'qrgmode': form.qrgmode.value,
+                            'active': form.active.value},
+                        success: function(html) {
+                            location.reload();
+                        }
+                    });
+                }
+            }
+
             function deactivateMode(modeid) {
                 var baseURL= "<?php echo base_url();?>";
                 $.ajax({
@@ -1838,6 +1888,31 @@ $(document).ready(function(){
                     }
                 });
             }
+
+            function deleteMode(id, mode) {
+                BootstrapDialog.confirm({
+                    title: 'DANGER',
+                    message: 'Warning! Are you sure you want to delete the following mode: ' + mode + '?'  ,
+                    type: BootstrapDialog.TYPE_DANGER,
+                    closable: true,
+                    draggable: true,
+                    btnOKClass: 'btn-danger',
+                    callback: function(result) {
+                        if(result) {
+                            var baseURL= "<?php echo base_url();?>";
+                            $.ajax({
+                                url: baseURL + 'index.php/mode/delete',
+                                type: 'post',
+                                data: {'id': id
+                                },
+                                success: function(data) {
+                                    $(".mode_" + id).parent("tr:first").remove(); // removes mode from table
+                                }
+                            });
+                        }
+                    }
+                });
+            }
         </script>
     <?php } ?>
 
diff --git a/application/views/mode/create.php b/application/views/mode/create.php
index 808fa07d..c6e71af2 100644
--- a/application/views/mode/create.php
+++ b/application/views/mode/create.php
@@ -9,14 +9,6 @@
 		</div>
 	<?php } ?>
 
-<div class="card">
-  <div class="card-header">
-    <?php echo $page_title; ?>
-  </div>
-  <div class="card-body">
-    <h5 class="card-title"></h5>
-    <p class="card-text"></p>
-
 		<?php if($this->session->flashdata('notice')) { ?>
 			<div id="message" >
 			<?php echo $this->session->flashdata('notice'); ?>
@@ -27,7 +19,7 @@
 
 		<?php echo validation_errors(); ?>
 
-		<form method="post" action="<?php echo site_url('mode/create'); ?>" name="create_profile">
+		<form method="post" name="create_profile">
 		<div class="form-group">
 		    <label for="modeInput">ADIF Mode</label>
 		    <input type="text" class="form-control" name="mode" id="modeInput" aria-describedby="modeInputHelp" required>
@@ -59,12 +51,7 @@
 		    <small id="activeInputHelp" class="form-text text-muted">Set to active if to be listed in Modes-list</small>
 		  </div>
 
-			<button type="submit" class="btn btn-primary"><i class="fas fa-plus-square"></i> Create mode</button>
+			<button onclick="createMode(this.form);" class="btn btn-primary"><i class="fas fa-plus-square"></i> Create mode</button>
 
 		</form>
-  </div>
-</div>
-
-<br>
-
 </div>
\ No newline at end of file
diff --git a/application/views/mode/index.php b/application/views/mode/index.php
index ff866336..0b6c27ea 100644
--- a/application/views/mode/index.php
+++ b/application/views/mode/index.php
@@ -14,14 +14,16 @@
   </div>
   <div class="card-body">
     <p class="card-text">This is the place you can customize your modes-list by activating/deactivating modes to be shown in the select-list.</p>
+      <p><button onclick="createModeDialog();" class="btn btn-primary"><i class="fas fa-plus"></i> Create a Mode</button></p>
     <div class="table-responsive">
-		<table class="table table-striped">
+		<table style="width:100%" class="modetable table table-striped">
 			<thead>
 				<tr>
 					<th scope="col">Mode</th>
 					<th scope="col">Sub-Mode</th>
 					<th scope="col">SSB/DATA/CW</th>
 					<th scope="col">Active</th>
+                    <th scope="col"></th>
 					<th scope="col"></th>
 					<th scope="col"></th>
 				</tr>
@@ -44,7 +46,7 @@
 						<a href="<?php echo site_url('mode/edit')."/".$row->id; ?>" class="btn btn-info btn-sm"><i class="fas fa-edit-alt"></i> Edit</a>
 					</td>
 					<td>
-						<a href="<?php echo site_url('mode/delete')."/".$row->id; ?>" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want delete mode <?php echo $row->mode; ?> ');"><i class="fas fa-trash-alt"></i> Delete</a>
+						<a href="javascript:deleteMode('<?php echo $row->id; ?>', '<?php echo $row->mode; ?>');" class="btn btn-danger btn-sm" ><i class="fas fa-trash-alt"></i> Delete</a>
                     </td>
 				</tr>
 
@@ -53,7 +55,7 @@
 		<table>
 	</table>
 	
-	<p><a href="<?php echo site_url('mode/create'); ?>" class="btn btn-primary"><i class="fas fa-plus"></i> Create a Mode</a></p>
+
   </div>
 </div>