diff --git a/js/script.js b/js/script.js
index 4af6c2c5..01a4e0b9 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,6 +1,9 @@
-$.ajaxSetup({cache: false, dataType: "text"});
+$.ajaxSetup({
+    cache: false,
+    dataType: "text"
+});
 
-$(document).on('click', 'a', function (e) {
+$(document).on('click', 'a', function(e) {
     e.preventDefault();
 
     if (!window.open($(this).attr('href'), '_blank')) {
@@ -10,19 +13,21 @@ $(document).on('click', 'a', function (e) {
 
 var tm = new TracerManager();
 
-$('#btn_interval input').on('change', function () {
+$('#btn_interval input').on('change', function() {
     tm.interval = Number.parseFloat($(this).val() * 1000);
     showInfoToast('Tracing interval has been set to ' + tm.interval / 1000 + ' second(s).');
 });
 
 var $module_container = $('.module_container');
 ace.require("ace/ext/language_tools");
-var initEditor = function (id) {
+var initEditor = function(id) {
     var editor = ace.edit(id);
     editor.setOptions({
         enableBasicAutocompletion: true,
         enableSnippets: true,
-        enableLiveAutocompletion: true
+        enableLiveAutocompletion: true,
+        fontFamily: "Source Code Pro",
+        fontSize: "10pt"
     });
     editor.setTheme("ace/theme/tomorrow_night_eighties");
     editor.session.setMode("ace/mode/javascript");
@@ -32,37 +37,36 @@ var initEditor = function (id) {
 var dataEditor = initEditor('data');
 var codeEditor = initEditor('code');
 var lastFile = null;
-dataEditor.on('change', function () {
+dataEditor.on('change', function() {
     var data = dataEditor.getValue();
     if (lastFile) cachedFile[lastFile].data = data;
     try {
         tm.deallocateAll();
         eval(data);
-    } catch (err) {
-    } finally {
+    } catch (err) {} finally {
         tm.visualize();
         tm.removeUnallocated();
     }
 });
-codeEditor.on('change', function () {
+codeEditor.on('change', function() {
     var code = codeEditor.getValue();
     if (lastFile) cachedFile[lastFile].code = code;
 });
 
 var cachedFile = {};
 var loading = false;
-var isScratchPaper = function (category, algorithm) {
+var isScratchPaper = function(category, algorithm) {
     return category == null && algorithm == 'scratch_paper';
 };
-var getAlgorithmDir = function (category, algorithm) {
+var getAlgorithmDir = function(category, algorithm) {
     if (isScratchPaper(category, algorithm)) return './algorithm/scratch_paper/';
     return './algorithm/' + category + '/' + algorithm + '/';
 };
-var getFileDir = function (category, algorithm, file) {
+var getFileDir = function(category, algorithm, file) {
     if (isScratchPaper(category, algorithm)) return './algorithm/scratch_paper/';
     return './algorithm/' + category + '/' + algorithm + '/' + file + '/';
 };
-var loadFile = function (category, algorithm, file, explanation) {
+var loadFile = function(category, algorithm, file, explanation) {
     if (checkLoading()) return;
     $('#explanation').html(explanation);
 
@@ -76,15 +80,15 @@ var loadFile = function (category, algorithm, file, explanation) {
         cachedFile[dir] = {};
         dataEditor.setValue('');
         codeEditor.setValue('');
-        var onFail = function (jqXHR, textStatus, errorThrown) {
+        var onFail = function(jqXHR, textStatus, errorThrown) {
             loading = false;
             alert("AJAX call failed: " + textStatus + ", " + errorThrown);
         };
-        $.get(dir + 'data.js', function (data) {
+        $.get(dir + 'data.js', function(data) {
             cachedFile[dir].data = data;
             dataEditor.setValue(data, -1);
 
-            $.get(dir + 'code.js', function (code) {
+            $.get(dir + 'code.js', function(code) {
                 cachedFile[dir].code = code;
                 codeEditor.setValue(code, -1);
                 loading = false;
@@ -92,14 +96,14 @@ var loadFile = function (category, algorithm, file, explanation) {
         }).fail(onFail);
     }
 };
-var checkLoading = function () {
+var checkLoading = function() {
     if (loading) {
         showErrorToast('Wait until it completes loading of previous file.');
         return true;
     }
     return false;
 };
-var showDescription = function (data) {
+var showDescription = function(data) {
     var $container = $('#tab_desc > .wrapper');
     $container.empty();
     for (var key in data) {
@@ -110,7 +114,7 @@ var showDescription = function (data) {
         } else if (Array.isArray(value)) {
             var $ul = $('<ul>');
             $container.append($ul);
-            value.forEach(function (li) {
+            value.forEach(function(li) {
                 $ul.append($('<li>').html(li));
             });
         } else if (typeof value === "object") {
@@ -122,7 +126,7 @@ var showDescription = function (data) {
         }
     }
 };
-var showAlgorithm = function (category, algorithm) {
+var showAlgorithm = function(category, algorithm) {
     var $menu;
     var category_name;
     var algorithm_name;
@@ -148,12 +152,12 @@ var showAlgorithm = function (category, algorithm) {
     dataEditor.setValue('');
     codeEditor.setValue('');
 };
-var showFiles = function (category, algorithm, files) {
+var showFiles = function(category, algorithm, files) {
     $('.files_bar').empty();
     var init = false;
     for (var file in files) {
-        (function (file, explanation) {
-            var $file = $('<button>').append(file).click(function () {
+        (function(file, explanation) {
+            var $file = $('<button>').append(file).click(function() {
                 loadFile(category, algorithm, file, explanation);
                 $('.files_bar > button').removeClass('active');
                 $(this).addClass('active');
@@ -166,13 +170,13 @@ var showFiles = function (category, algorithm, files) {
         })(file, files[file]);
     }
 };
-var loadAlgorithm = function (category, algorithm) {
+var loadAlgorithm = function(category, algorithm) {
     if (checkLoading()) return;
     showAlgorithm(category, algorithm);
 
     var dir = getAlgorithmDir(category, algorithm);
 
-    $.getJSON(dir + 'desc.json', function (data) {
+    $.getJSON(dir + 'desc.json', function(data) {
         var files = data.files;
         delete data.files;
 
@@ -181,24 +185,27 @@ var loadAlgorithm = function (category, algorithm) {
     });
 };
 var list = {};
-$.getJSON('./algorithm/category.json', function (data) {
+$.getJSON('./algorithm/category.json', function(data) {
     list = data;
     var init = false;
     for (var category in list) {
-        (function (category) {
-            var $category = $('<button class="category">').append(list[category].name);
-            $category.click(function () {
+        (function(category) {
+            var $category = $('<button class="category">')
+                .append('<i class="fa fa-fw fa-caret-down">')
+                .append(list[category].name);
+            $category.click(function() {
                 $('[data-category="' + category + '"]').toggleClass('collapse');
+                $(this).find('i.fa').toggleClass('fa-caret-down fa-caret-up');
             });
             $('#list').append($category);
             var subList = list[category].list;
             for (var algorithm in subList) {
-                (function (category, subList, algorithm) {
+                (function(category, subList, algorithm) {
                     var $algorithm = $('<button class="indent">')
                         .append(subList[algorithm])
                         .attr('data-algorithm', algorithm)
                         .attr('data-category', category)
-                        .click(function () {
+                        .click(function() {
                             loadAlgorithm(category, algorithm);
                         });
                     $('#list').append($algorithm);
@@ -211,15 +218,15 @@ $.getJSON('./algorithm/category.json', function (data) {
         })(category);
     }
 });
-$('#powered-by').click(function () {
+$('#powered-by').click(function() {
     $('#powered-by-list button').toggleClass('collapse');
 });
-$('#scratch-paper').click(function () {
+$('#scratch-paper').click(function() {
     loadAlgorithm(null, 'scratch_paper');
 });
 
 var sidemenu_percent;
-$('#navigation').click(function () {
+$('#navigation').click(function() {
     var $sidemenu = $('.sidemenu');
     var $workspace = $('.workspace');
     $sidemenu.toggleClass('active');
@@ -235,27 +242,27 @@ $('#navigation').click(function () {
     tm.resize();
 });
 
-var showErrorToast = function (err) {
+var showErrorToast = function(err) {
     var $toast = $('<div class="toast error">').append(err);
     $('.toast_container').append($toast);
-    setTimeout(function () {
-        $toast.fadeOut(function () {
+    setTimeout(function() {
+        $toast.fadeOut(function() {
             $toast.remove();
         });
     }, 3000);
 };
 
-var showInfoToast = function (info) {
+var showInfoToast = function(info) {
     var $toast = $('<div class="toast info">').append(info);
     $('.toast_container').append($toast);
-    setTimeout(function () {
-        $toast.fadeOut(function () {
+    setTimeout(function() {
+        $toast.fadeOut(function() {
             $toast.remove();
         });
     }, 3000);
 };
 
-$('#btn_run').click(function () {
+$('#btn_run').click(function() {
     $('#btn_trace').click();
     try {
         tm.deallocateAll();
@@ -269,36 +276,36 @@ $('#btn_run').click(function () {
         tm.removeUnallocated();
     }
 });
-$('#btn_pause').click(function () {
+$('#btn_pause').click(function() {
     if (tm.isPause()) {
         tm.resumeStep();
     } else {
         tm.pauseStep();
     }
 });
-$('#btn_prev').click(function () {
+$('#btn_prev').click(function() {
     tm.pauseStep();
     tm.prevStep();
 });
-$('#btn_next').click(function () {
+$('#btn_next').click(function() {
     tm.pauseStep();
     tm.nextStep();
 });
 
-$('#btn_desc').click(function () {
+$('#btn_desc').click(function() {
     $('.tab_container > .tab').removeClass('active');
     $('#tab_desc').addClass('active');
     $('.tab_bar > button').removeClass('active');
     $(this).addClass('active');
 });
-$('#btn_trace').click(function () {
+$('#btn_trace').click(function() {
     $('.tab_container > .tab').removeClass('active');
     $('#tab_module').addClass('active');
     $('.tab_bar > button').removeClass('active');
     $(this).addClass('active');
 });
 
-$(window).resize(function () {
+$(window).resize(function() {
     tm.resize();
 });
 
@@ -309,7 +316,7 @@ var dividers = [
 ];
 for (var i = 0; i < dividers.length; i++) {
     var divider = dividers[i];
-    (function (divider) {
+    (function(divider) {
         var vertical = divider[0] == 'v';
         var $first = divider[1];
         var $second = divider[2];
@@ -328,11 +335,11 @@ for (var i = 0; i < dividers.length; i++) {
                 width: thickness
             });
             var x;
-            $divider.mousedown(function (e) {
+            $divider.mousedown(function(e) {
                 x = e.pageX;
                 dragging = true;
             });
-            $(document).mousemove(function (e) {
+            $(document).mousemove(function(e) {
                 if (dragging) {
                     var new_left = $second.position().left + e.pageX - x;
                     var percent = new_left / $parent.width() * 100;
@@ -343,7 +350,7 @@ for (var i = 0; i < dividers.length; i++) {
                     tm.resize();
                 }
             });
-            $(document).mouseup(function (e) {
+            $(document).mouseup(function(e) {
                 dragging = false;
             });
         } else {
@@ -356,11 +363,11 @@ for (var i = 0; i < dividers.length; i++) {
                 right: 0
             });
             var y;
-            $divider.mousedown(function (e) {
+            $divider.mousedown(function(e) {
                 y = e.pageY;
                 dragging = true;
             });
-            $(document).mousemove(function (e) {
+            $(document).mousemove(function(e) {
                 if (dragging) {
                     var new_top = $second.position().top + e.pageY - y;
                     var percent = new_top / $parent.height() * 100;
@@ -371,7 +378,7 @@ for (var i = 0; i < dividers.length; i++) {
                     tm.resize();
                 }
             });
-            $(document).mouseup(function (e) {
+            $(document).mouseup(function(e) {
                 dragging = false;
             });
         }
@@ -380,22 +387,22 @@ for (var i = 0; i < dividers.length; i++) {
     })(divider);
 }
 
-$module_container.on('mousedown', '.module_wrapper', function (e) {
+$module_container.on('mousedown', '.module_wrapper', function(e) {
     tm.findOwner(this).mousedown(e);
 });
-$module_container.on('mousemove', '.module_wrapper', function (e) {
+$module_container.on('mousemove', '.module_wrapper', function(e) {
     tm.findOwner(this).mousemove(e);
 });
-$(document).mouseup(function (e) {
+$(document).mouseup(function(e) {
     tm.command('mouseup', e);
 });
-$module_container.on('DOMMouseScroll mousewheel', '.module_wrapper', function (e) {
+$module_container.on('DOMMouseScroll mousewheel', '.module_wrapper', function(e) {
     tm.findOwner(this).mousewheel(e);
 });
 
 // Share scratch paper
 
-var getParameterByName = function (name) {
+var getParameterByName = function(name) {
     var url = window.location.href;
     name = name.replace(/[\[\]]/g, "\\$&");
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
@@ -405,23 +412,27 @@ var getParameterByName = function (name) {
     return decodeURIComponent(results[2].replace(/\+/g, " "));
 };
 
-var shareScratchPaper = function () {
+var shareScratchPaper = function() {
     var gist = {
         'description': 'temp',
         'public': true,
         'files': {
-            'code.js': {'content': dataEditor.getValue()},
-            'data.js': {'content': codeEditor.getValue()}
+            'code.js': {
+                'content': dataEditor.getValue()
+            },
+            'data.js': {
+                'content': codeEditor.getValue()
+            }
         }
     };
-    $.post('https://api.github.com/gists', JSON.stringify(gist), function (res) {
+    $.post('https://api.github.com/gists', JSON.stringify(gist), function(res) {
         var data = JSON.parse(res);
         console.log(location.protocol + '//' + location.host + location.pathname + '?scratch-paper=' + data.id);
     });
 };
 
-var loadScratchPaper = function (gistID) {
-    $.get('https://api.github.com/gists/' + gistID, function (res) {
+var loadScratchPaper = function(gistID) {
+    $.get('https://api.github.com/gists/' + gistID, function(res) {
         var data = JSON.parse(res);
         console.log(data);
     });
@@ -433,18 +444,18 @@ if (/[?&]scratch-paper=/.test(location.search)) {
     loadScratchPaper(gistID);
 }
 
-var toJSON = function (obj) {
-    return JSON.stringify(obj, function (key, value) {
+var toJSON = function(obj) {
+    return JSON.stringify(obj, function(key, value) {
         return value === Infinity ? "Infinity" : value;
     });
 };
 
-var fromJSON = function (obj) {
-    return JSON.parse(obj, function (key, value) {
+var fromJSON = function(obj) {
+    return JSON.parse(obj, function(key, value) {
         return value === "Infinity" ? Infinity : value;
     });
 };
 
-var refineNumber = function (number) {
+var refineNumber = function(number) {
     return number === Infinity ? '∞' : number;
 };
\ No newline at end of file