diff --git a/css/stylesheet.css b/css/stylesheet.css
index 80bbc60b90dfd3c9ae5404f1f9ecfa0d221b5e52..3242f2e8177f45932fb01b410eb379f7d151ee65 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -65,7 +65,7 @@ button:not([disabled]):hover {
 
 .btn.active,
 button.active {
-    background: rgba(0, 0, 0, .28);
+    background: rgb(38, 38, 38);
 }
 
 .btn input,
@@ -138,7 +138,7 @@ nav h3 {
 }
 
 .sidemenu #footer {
-    border-top: 2px solid rgba(0, 0, 0, .28);
+    border-top: 2px solid rgb(38, 38, 38);
 }
 
 .sidemenu button {
@@ -181,7 +181,7 @@ section,
 
 nav,
 section {
-    border: 1px solid rgba(0, 0, 0, .28);
+    border: 1px solid rgb(38, 38, 38);
     box-sizing: border-box;
 }
 
@@ -227,7 +227,7 @@ section {
     z-index: 5;
     padding: 4px;
     font-size: 14px;
-    background: rgba(0, 0, 0, .28);
+    background: rgba(0, 0, 0, .4);
 }
 
 .module_wrapper > .wrapper {
@@ -299,10 +299,11 @@ section {
 }
 
 .explanation_container {
+    border: none;
     top: 30px;
     height: 30px;
-    background: rgba(0, 0, 0, .28);
-    padding: 7px;
+    background: rgb(38, 38, 38);
+    padding: 8px;
     font-size: 12px;
 }
 
diff --git a/js/module/array2d.js b/js/module/array2d.js
index 2a1de13a75a2a9bf19ce0fc10577158bb2706b63..6c86849e0ac4d55928d825464d8a53809b257311 100644
--- a/js/module/array2d.js
+++ b/js/module/array2d.js
@@ -100,7 +100,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
             case 'notify':
                 if (step.v) {
                     var $row = this.$table.find('.mtbl-row').eq(step.x);
-                    $row.find('.mtbl-cell').eq(step.y).text(TracerUtil.refineNumber(step.v));
+                    $row.find('.mtbl-cell').eq(step.y).text(TracerUtil.refineByType(step.v));
                 }
             case 'denotify':
             case 'select':
@@ -130,7 +130,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
         if (Tracer.prototype.setData.apply(this, arguments)) {
             this.$table.find('.mtbl-row').each(function (i) {
                 $(this).children().each(function (j) {
-                    $(this).text(TracerUtil.refineNumber(D[i][j]));
+                    $(this).text(TracerUtil.refineByType(D[i][j]));
                 });
             });
             return true;
@@ -143,7 +143,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
             for (var j = 0; j < D[i].length; j++) {
                 var $cell = $('<div class="mtbl-cell">')
                     .css(this.getCellCss())
-                    .text(TracerUtil.refineNumber(D[i][j]));
+                    .text(TracerUtil.refineByType(D[i][j]));
                 $row.append($cell);
             }
         }
diff --git a/js/module/weighted_directed_graph.js b/js/module/weighted_directed_graph.js
index ea706c9bc6659f3b846260b66f193644795e5843..94b2682e6aac2e72db0db21cdb0d441e9b9ed2b0 100644
--- a/js/module/weighted_directed_graph.js
+++ b/js/module/weighted_directed_graph.js
@@ -45,7 +45,7 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
         switch (step.type) {
             case 'weight':
                 var targetNode = this.graph.nodes(this.n(step.target));
-                if (step.weight !== undefined) targetNode.weight = TracerUtil.refineNumber(step.weight);
+                if (step.weight !== undefined) targetNode.weight = TracerUtil.refineByType(step.weight);
                 break;
             case 'visit':
             case 'leave':
@@ -53,7 +53,7 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
                 var targetNode = this.graph.nodes(this.n(step.target));
                 var color = visit ? this.color.visited : this.color.left;
                 targetNode.color = color;
-                if (step.weight !== undefined) targetNode.weight = TracerUtil.refineNumber(step.weight);
+                if (step.weight !== undefined) targetNode.weight = TracerUtil.refineByType(step.weight);
                 if (step.source !== undefined) {
                     var edgeId = this.e(step.source, step.target);
                     var edge = this.graph.edges(edgeId);
@@ -97,7 +97,7 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
                         target: this.n(j),
                         color: this.color.default,
                         size: 1,
-                        weight: TracerUtil.refineNumber(G[i][j])
+                        weight: TracerUtil.refineByType(G[i][j])
                     });
                 }
             }
diff --git a/js/tracer_manager.js b/js/tracer_manager.js
index 34944b169805776b6956558b253431460361c930..acf5186807841e41d9f612792ef5c54ee71ff4b4 100644
--- a/js/tracer_manager.js
+++ b/js/tracer_manager.js
@@ -189,6 +189,12 @@ var TracerUtil = {
             return value === "Infinity" ? Infinity : value;
         });
     },
+    refineByType: function (item) {
+      return $.isNumeric(item) ? this.refineNumber(item) : this.refineString(item);  
+    },
+    refineString: function (string) {
+        return string === '' ? ' ' : string;
+    },
     refineNumber: function (number) {
         return number === Infinity ? '∞' : number;
     }