diff --git a/app/static/custom/js/custom.js b/app/static/custom/js/custom.js
index 73c6c3a..d740766 100644
--- a/app/static/custom/js/custom.js
+++ b/app/static/custom/js/custom.js
@@ -90,7 +90,7 @@ function editRow(oTable, nRow) {
        var record_type = records_allow_edit[i];
        record_types += "<option value=\"" + record_type + "\">" + record_type + "</option>";
     }
-    jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
+    jqTds[0].innerHTML = '<input type="text" id="edit-row-focus" class="form-control input-small" value="' + aData[0] + '">';
     jqTds[1].innerHTML = '<select class="form-control" id="record_type" name="record_type" value="' + aData[1]  + '"' + '>' + record_types + '</select>';
     jqTds[2].innerHTML = '<select class="form-control" id="record_status" name="record_status" value="' + aData[2]  + '"' + '><option value="false">Active</option><option value="true">Disabled</option></select>';
     jqTds[3].innerHTML = '<select class="form-control" id="record_ttl" name="record_ttl" value="' + aData[3]  + '"' + '><option value="60">1 minute</option><option value="300">5 minutes</option><option value="1800">30 minutes</option><option value="3600">60 minutes</option><option value="86400">24 hours</option></select>';
diff --git a/app/templates/domain.html b/app/templates/domain.html
index a634d46..4b19e7c 100644
--- a/app/templates/domain.html
+++ b/app/templates/domain.html
@@ -71,38 +71,28 @@
                                 {% if domain.type != 'Slave' %}
                                     <td width="6%">
                                     {% if record.is_allowed() %}
-                                        <button type="button" class="btn btn-flat btn-warning button_edit" id="{{ (record.name,domain.name)|display_record_name }}">
-                                            Edit&nbsp;<i class="fa fa-edit"></i>
-                                        </button>
+                                        <button type="button" class="btn btn-flat btn-warning button_edit" id="{{ (record.name,domain.name)|display_record_name }}">Edit&nbsp;<i class="fa fa-edit"></i></button>
                                        {% else %}
-                                       <button type="button" class="btn btn-flat btn-warning"">
-                                            &nbsp;&nbsp;<i class="fa fa-exclamation-circle"></i>&nbsp;&nbsp;
-                                        </button>
+                                       <button type="button" class="btn btn-flat btn-warning"">&nbsp;&nbsp;<i class="fa fa-exclamation-circle"></i>&nbsp;&nbsp;</button>
                                     {% endif %}
                                     </td>
                                     <td width="6%">
                                     {% if record.is_allowed() %}
-                                        <button type="button" class="btn btn-flat btn-danger button_delete" id="{{ (record.name,domain.name)|display_record_name }}">
-                                            Delete&nbsp;<i class="fa fa-trash"></i>
-                                        </button>
+                                        <button type="button" class="btn btn-flat btn-danger button_delete" id="{{ (record.name,domain.name)|display_record_name }}">Delete&nbsp;<i class="fa fa-trash"></i></button>
                                     {% else %}
-                                        <button type="button" class="btn btn-flat btn-warning"">
-                                            &nbsp;&nbsp;<i class="fa fa-exclamation-circle"></i>&nbsp;&nbsp;
-                                        </button>
+                                        <button type="button" class="btn btn-flat btn-warning"">&nbsp;&nbsp;<i class="fa fa-exclamation-circle"></i>&nbsp;&nbsp;</button>
                                     {% endif %}
                                 {% else %}
                                     <td width="6%">
-                                        <button type="button" class="btn btn-flat btn-warning"">
-                                            &nbsp;&nbsp;<i class="fa fa-exclamation-circle"></i>&nbsp;&nbsp;
-                                        </button>
+                                        <button type="button" class="btn btn-flat btn-warning"">&nbsp;&nbsp;<i class="fa fa-exclamation-circle"></i>&nbsp;&nbsp;</button>
                                     </td>
                                     <td width="6%">
-                                        <button type="button" class="btn btn-flat btn-warning"">
-                                            &nbsp;&nbsp;<i class="fa fa-exclamation-circle"></i>&nbsp;&nbsp;
-                                        </button>
+                                        <button type="button" class="btn btn-flat btn-warning"">&nbsp;&nbsp;<i class="fa fa-exclamation-circle"></i>&nbsp;&nbsp;</button>
                                     </td> 
                                 {% endif %}
                                     </td>
+                                    <!-- hidden column that we can sort on -->
+                                    <td>1</td>
                                 </tr>
                                 {% endfor %}
                         </tbody>
@@ -145,8 +135,18 @@
         },
         "retrieve" : true,
         "columnDefs": [
-	       { type: 'natural', targets: [0, 4] }
-        ]
+            {
+                type: 'natural',
+                targets: [0, 4]
+            },
+            {
+                // hidden column so that we can add new records on top
+                // regardless of whatever sorting is done
+                visible: false,
+                targets: [ 7 ]
+            }
+        ],
+        "orderFixed": [[7, 'asc']]
     });
     
     // handle delete button
@@ -214,15 +214,18 @@
     // handle add record button
     $(document.body).on("click", ".button_add_record", function (e) {
             if (nNew || nEditing) {
-                // TODO: replace this alert with modal
-                alert("Previous record not saved. Please save it before adding more record.")
+                var modal = $("#modal_error");
+                modal.find('.modal-body p').text("Previous record not saved. Please save it before adding more record.");
+                modal.modal('show');
                 return;
             }
-            var table = $("#tbl_records").DataTable();
-
-            var aiNew = table.row.add(['', 'A', 'Active', 3600, '', '', '']).draw();
-            var nRow = aiNew.index();
-            editRow(table, nRow);
+            // clear search first
+            $("#tbl_records").DataTable().search('').columns().search('').draw();
+            
+            // add new row
+            var nRow = jQuery('#tbl_records').dataTable().fnAddData(['', 'A', 'Active', 3600, '', '', '', '0']);
+            editRow($("#tbl_records").DataTable(), nRow);
+            document.getElementById("edit-row-focus").focus();
             nEditing = nRow;
             nNew = true;
         });