diff --git a/app/static/custom/css/custom.css b/app/static/custom/css/custom.css
index c208fad..0abcc36 100644
--- a/app/static/custom/css/custom.css
+++ b/app/static/custom/css/custom.css
@@ -1,16 +1,34 @@
-.length-break {
-    word-break: break-all !important;
-}
-
-table td {
-    font-family:'Roboto Mono' !important;
-}
-
-/*Fit default macbook screen*/
-.small-box .icon {
-    font-size: 70px !important;
-}
-
-.btn {
-    padding: 5px 4px !important;
-}
\ No newline at end of file
+.length-break {
+    word-break: break-all !important;
+}
+
+table td {
+    font-family:'Roboto Mono' !important;
+}
+
+/*Fit default macbook screen*/
+.small-box .icon {
+    font-size: 70px !important;
+}
+
+.btn {
+    padding: 5px 4px !important;
+}
+
+/* Pretty JSON */
+.json-pre {
+   background-color: ghostwhite;
+   border: 1px solid silver;
+   padding: 10px 20px;
+   margin: 20px;
+}
+.json-key {
+   color: brown;
+}
+.json-value {
+   color: navy;
+}
+.json-string {
+   color: olive;
+}
+
diff --git a/app/static/custom/js/custom.js b/app/static/custom/js/custom.js
index d740766..67f8f0f 100644
--- a/app/static/custom/js/custom.js
+++ b/app/static/custom/js/custom.js
@@ -1,153 +1,178 @@
-function applyChanges(data, url, showResult, refreshPage) {
-	var success = false;
-	$.ajax({
-		type : "POST",
-		url : url,
-		data : JSON.stringify(data),// now data come in this function
-		contentType : "application/json; charset=utf-8",
-		crossDomain : true,
-		dataType : "json",
-		success : function(data, status, jqXHR) {
-			console.log("Applied changes successfully.")
-			if (showResult) {
-				var modal = $("#modal_success");
-				modal.find('.modal-body p').text("Applied changes successfully");
-				modal.modal('show');
-			}
-			if (refreshPage) {
-				location.reload(true);
-			}
-		},
-
-		error : function(jqXHR, status) {
-			console.log(jqXHR);
-			var modal = $("#modal_error");
-			modal.find('.modal-body p').text(jqXHR["responseText"]);
-			modal.modal('show');
-		}
-	});
-
-}
-
-function getTableData(table) {
-	var rData = []
-
-	// reformat - pretty format
-	var records = []
-	table.rows().every(function() {
-		var r = this.data();
-		var record = {}
-		record["record_name"] = r[0].trim();
-		record["record_type"] = r[1].trim();
-		record["record_status"] = r[2].trim();
-		record["record_ttl"] = r[3].trim();
-		record["record_data"] = r[4].trim();
-		records.push(record);
-	});
-	return records
-}
-
-function saveRow(oTable, nRow) {
-	
-	var jqInputs = $(oTable.row(nRow).node()).find("input");
-	var jqSelect = $(oTable.row(nRow).node()).find("select");
-
-	if (jqSelect[1].value == 'false') {
-		status = 'Active';
-	} else {
-		status = 'Disabled';
-	}
-
-
-	oTable.cell(nRow,0).data(jqInputs[0].value);
-	oTable.cell(nRow,1).data(jqSelect[0].value);
-	oTable.cell(nRow,2).data(status);
-	oTable.cell(nRow,3).data(jqSelect[2].value);
-	oTable.cell(nRow,4).data(jqInputs[1].value);
-
-	var record = jqInputs[0].value;
-	var button_edit = "<button type=\"button\" class=\"btn btn-flat btn-warning button_edit\" id=\"" + record +  "\">Edit&nbsp;<i class=\"fa fa-edit\"></i></button>"
-	var button_delete = "<button type=\"button\" class=\"btn btn-flat btn-danger button_delete\" id=\"" + record +  "\">Delete&nbsp;<i class=\"fa fa-trash\"></i></button>"
-
-	oTable.cell(nRow,5).data(button_edit);
-	oTable.cell(nRow,6).data(button_delete);
-	
-	oTable.draw();
-}
-
-function restoreRow(oTable, nRow) {
-    var aData = oTable.row(nRow).data();
-    var jqTds = $('>td', nRow);
-	oTable.row(nRow).data(aData);
-	oTable.draw();
-}
-
-function editRow(oTable, nRow) {
-    var aData = oTable.row(nRow).data();
-    var jqTds = oTable.cells(nRow,'').nodes();
-    var record_types = "";
-    for(var i = 0; i < records_allow_edit.length; i++) {
-       var record_type = records_allow_edit[i];
-       record_types += "<option value=\"" + record_type + "\">" + record_type + "</option>";
-    }
-    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>';
-    jqTds[4].innerHTML = '<input type="text" style="display:table-cell; width:100% !important" id="current_edit_record_data" name="current_edit_record_data" class="form-control input-small advance-data" value="' + aData[4].replace(/\"/g,"&quot;") + '">';
-    jqTds[5].innerHTML = '<button type="button" class="btn btn-flat btn-primary button_save">Save</button>';
-    jqTds[6].innerHTML = '<button type="button" class="btn btn-flat btn-primary button_cancel">Cancel</button>';
-
-    // set current value of dropdows column
-    if (aData[2] == 'Active'){
-        isDisabled = 'false';
-    }
-    else {
-        isDisabled = 'true';
-    }
-
-    SelectElement('record_type', aData[1]);
-    SelectElement('record_status', isDisabled);
-    SelectElement('record_ttl', aData[3]);
-}
-
-function SelectElement(elementID, valueToSelect)
-{    
-    var element = document.getElementById(elementID);
-    element.value = valueToSelect;
-}
-
-function getdnssec(url){
-	
-    $.getJSON(url, function(data) {
-    	var modal = $("#modal_dnssec_info");
-		
-        if (data['status'] == 'error'){
-    		modal.find('.modal-body p').text(data['msg']);
-        }
-        else {
-        	dnssec_msg = '';
-            var dnssec = data['dnssec'];
-            for (var i = 0; i < dnssec.length; i++) {
-                if (dnssec[i]['active']){
-                    dnssec_msg += '<form>'+
-                    '<h3><strong>'+dnssec[i]['keytype']+'</strong></h3>'+
-                    '<strong>DNSKEY</strong>'+
-                    '<input class="form-control" autocomplete="off" type="text" readonly="true" value="'+dnssec[i]['dnskey']+'">'+
-                    '</form>'+
-                    '<br/>';
-                    if(dnssec[i]['ds']){
-                        var dsList = dnssec[i]['ds'];
-                        dnssec_msg += '<strong>DS</strong>';
-                        for (var j = 0; j < dsList.length; j++){
-                            dnssec_msg += '<input class="form-control" autocomplete="off" type="text" readonly="true" value="'+dsList[j]+'">';
-                        }
-                    }
-                    dnssec_msg += '</form>';
-                }
-            }
-    		modal.find('.modal-body p').html(dnssec_msg);
-        }
-        modal.modal('show');
-    });
-}
\ No newline at end of file
+function applyChanges(data, url, showResult, refreshPage) {
+    var success = false;
+    $.ajax({
+        type : "POST",
+        url : url,
+        data : JSON.stringify(data),// now data come in this function
+        contentType : "application/json; charset=utf-8",
+        crossDomain : true,
+        dataType : "json",
+        success : function(data, status, jqXHR) {
+            console.log("Applied changes successfully.")
+            if (showResult) {
+                var modal = $("#modal_success");
+                modal.find('.modal-body p').text("Applied changes successfully");
+                modal.modal('show');
+            }
+            if (refreshPage) {
+                location.reload(true);
+            }
+        },
+
+        error : function(jqXHR, status) {
+            console.log(jqXHR);
+            var modal = $("#modal_error");
+            modal.find('.modal-body p').text(jqXHR["responseText"]);
+            modal.modal('show');
+        }
+    });
+}
+
+function getTableData(table) {
+    var rData = []
+
+    // reformat - pretty format
+    var records = []
+    table.rows().every(function() {
+        var r = this.data();
+        var record = {}
+        record["record_name"] = r[0].trim();
+        record["record_type"] = r[1].trim();
+        record["record_status"] = r[2].trim();
+        record["record_ttl"] = r[3].trim();
+        record["record_data"] = r[4].trim();
+        records.push(record);
+    });
+    return records
+}
+
+function saveRow(oTable, nRow) {
+
+    var jqInputs = $(oTable.row(nRow).node()).find("input");
+    var jqSelect = $(oTable.row(nRow).node()).find("select");
+
+    if (jqSelect[1].value == 'false') {
+        status = 'Active';
+    } else {
+        status = 'Disabled';
+    }
+
+
+    oTable.cell(nRow,0).data(jqInputs[0].value);
+    oTable.cell(nRow,1).data(jqSelect[0].value);
+    oTable.cell(nRow,2).data(status);
+    oTable.cell(nRow,3).data(jqSelect[2].value);
+    oTable.cell(nRow,4).data(jqInputs[1].value);
+
+    var record = jqInputs[0].value;
+    var button_edit = "<button type=\"button\" class=\"btn btn-flat btn-warning button_edit\" id=\"" + record +  "\">Edit&nbsp;<i class=\"fa fa-edit\"></i></button>"
+    var button_delete = "<button type=\"button\" class=\"btn btn-flat btn-danger button_delete\" id=\"" + record +  "\">Delete&nbsp;<i class=\"fa fa-trash\"></i></button>"
+
+    oTable.cell(nRow,5).data(button_edit);
+    oTable.cell(nRow,6).data(button_delete);
+
+    oTable.draw();
+}
+
+function restoreRow(oTable, nRow) {
+    var aData = oTable.row(nRow).data();
+    var jqTds = $('>td', nRow);
+    oTable.row(nRow).data(aData);
+    oTable.draw();
+}
+
+function editRow(oTable, nRow) {
+    var aData = oTable.row(nRow).data();
+    var jqTds = oTable.cells(nRow,'').nodes();
+    var record_types = "";
+    for(var i = 0; i < records_allow_edit.length; i++) {
+        var record_type = records_allow_edit[i];
+        record_types += "<option value=\"" + record_type + "\">" + record_type + "</option>";
+    }
+    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>';
+    jqTds[4].innerHTML = '<input type="text" style="display:table-cell; width:100% !important" id="current_edit_record_data" name="current_edit_record_data" class="form-control input-small advance-data" value="' + aData[4].replace(/\"/g,"&quot;") + '">';
+    jqTds[5].innerHTML = '<button type="button" class="btn btn-flat btn-primary button_save">Save</button>';
+    jqTds[6].innerHTML = '<button type="button" class="btn btn-flat btn-primary button_cancel">Cancel</button>';
+
+    // set current value of dropdows column
+    if (aData[2] == 'Active'){
+        isDisabled = 'false';
+    }
+    else {
+        isDisabled = 'true';
+    }
+
+    SelectElement('record_type', aData[1]);
+    SelectElement('record_status', isDisabled);
+    SelectElement('record_ttl', aData[3]);
+}
+
+function SelectElement(elementID, valueToSelect)
+{
+    var element = document.getElementById(elementID);
+    element.value = valueToSelect;
+}
+
+function getdnssec(url){
+
+    $.getJSON(url, function(data) {
+        var modal = $("#modal_dnssec_info");
+
+        if (data['status'] == 'error'){
+            modal.find('.modal-body p').text(data['msg']);
+        }
+        else {
+            dnssec_msg = '';
+            var dnssec = data['dnssec'];
+            for (var i = 0; i < dnssec.length; i++) {
+                if (dnssec[i]['active']){
+                    dnssec_msg += '<form>'+
+                    '<h3><strong>'+dnssec[i]['keytype']+'</strong></h3>'+
+                    '<strong>DNSKEY</strong>'+
+                    '<input class="form-control" autocomplete="off" type="text" readonly="true" value="'+dnssec[i]['dnskey']+'">'+
+                    '</form>'+
+                    '<br/>';
+                    if(dnssec[i]['ds']){
+                        var dsList = dnssec[i]['ds'];
+                        dnssec_msg += '<strong>DS</strong>';
+                        for (var j = 0; j < dsList.length; j++){
+                            dnssec_msg += '<input class="form-control" autocomplete="off" type="text" readonly="true" value="'+dsList[j]+'">';
+                        }
+                    }
+                    dnssec_msg += '</form>';
+                }
+            }
+            modal.find('.modal-body p').html(dnssec_msg);
+        }
+        modal.modal('show');
+    });
+}
+
+// pretty JSON
+json_library = {
+    replacer: function(match, pIndent, pKey, pVal, pEnd) {
+        var key = '<span class=json-key>';
+        var val = '<span class=json-value>';
+        var str = '<span class=json-string>';
+        var r = pIndent || '';
+        if (pKey){
+            r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
+        }
+        if (pVal){
+            r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
+        }
+        return r + (pEnd || '');
+    },
+    prettyPrint: function(obj) {
+        obj = obj.replace(/u'/g, "\'").replace(/'/g, "\"").replace(/(False|None)/g, "\"$1\"");
+        var jsonData = JSON.parse(obj);
+        var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
+            return JSON.stringify(jsonData, null, 3)
+            .replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
+            .replace(/</g, '&lt;').replace(/>/g, '&gt;')
+            .replace(jsonLine, json_library.replacer);
+        }
+    };
\ No newline at end of file
diff --git a/app/templates/admin_history.html b/app/templates/admin_history.html
index 40764d4..59773ac 100644
--- a/app/templates/admin_history.html
+++ b/app/templates/admin_history.html
@@ -42,8 +42,7 @@
                                 <td>{{ history.msg }}</td>
                                 <td>{{ history.created_on }}</td>
                                 <td width="6%">
-                                    <button type="button" class="btn btn-flat btn-primary history-info-button" value='{{ history.detail|replace("[]","None") }}'>
-                                        Info&nbsp;<i class="fa fa-info"></i>
+                                    <button type="button" class="btn btn-flat btn-primary history-info-button" value='{{ history.detail }}'>Info&nbsp;<i class="fa fa-info"></i>
                                     </button>
                                 </td>
                             </tr>
@@ -74,7 +73,7 @@
     $(document.body).on('click', '.history-info-button', function() {
         var modal = $("#modal_history_info");
         var info = $(this).val();
-        modal.find('.modal-body p').text(info);
+        $('#modal-code-content').html(json_library.prettyPrint(info));
         modal.modal('show');
     });
 </script>
@@ -97,8 +96,7 @@
             <div class="modal-footer">
                 <button type="button" class="btn btn-flat btn-default pull-left"
                     data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-flat btn-danger" onclick="applyChanges('', $SCRIPT_ROOT + '/admin/history');location.reload();">Clear
-                    History</button>
+                <button type="button" class="btn btn-flat btn-danger" onclick="applyChanges('', $SCRIPT_ROOT + '/admin/history');location.reload();">Clear History</button>
             </div>
         </div>
         <!-- /.modal-content -->
@@ -116,7 +114,7 @@
                 <h4 class="modal-title">History Details</h4>
             </div>
             <div class="modal-body">
-                <p></p>
+                <pre><code id="modal-code-content"></code></pre>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-flat btn-default pull-right"
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index a69b2f5..8c9a7e0 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -235,7 +235,7 @@
     $(document.body).on('click', '.history-info-button', function() {
         var modal = $("#modal_history_info");
         var info = $(this).val();
-        modal.find('.modal-body p').text(info);
+        $('#modal-code-content').html(json_library.prettyPrint(info));
         modal.modal('show');
     });
     $(document.body).on("click", ".button_dnssec", function() {
@@ -256,7 +256,7 @@
                 <h4 class="modal-title">History Details</h4>
             </div>
             <div class="modal-body">
-                <p></p>
+                <pre><code id="modal-code-content"></code></pre>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-flat btn-default pull-right"