diff --git a/webapp/live.html b/webapp/live.html
index c259f35..8bb496e 100644
--- a/webapp/live.html
+++ b/webapp/live.html
@@ -13,7 +13,7 @@ <h2>PocketSphinx.js live demo</h2>
     <select id="grammars"></select>
     <button id="startBtn">Start</button>
     <button id="stopBtn">Stop</button>
-    <span id="recording-indicator" style="border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 20px; height: 20px; background: red;"></span>
+    <span id="recording-indicator" style="border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 20px; height: 20px; background: red; color: red;"></span>
     <h2>Recognition Output</h2>
     <div id="output" style="height:150px;overflow:auto;" >
     </div>
@@ -61,9 +61,9 @@ <h2>Status</h2>
         document.getElementById('current-status').innerHTML += "<br/>" + newStatus;
       };
 
-      // A not-so-great recording indicator
+      // A great recording indicator
       function displayRecording(display) {
-        if (display) document.getElementById('recording-indicator').innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
+        if (display) document.getElementById('recording-indicator').innerHTML = "00";
         else document.getElementById('recording-indicator').innerHTML = "";
       };
 
diff --git a/webapp/live_kws.html b/webapp/live_kws.html
index d11a591..2ea9a29 100644
--- a/webapp/live_kws.html
+++ b/webapp/live_kws.html
@@ -13,7 +13,7 @@ <h2>PocketSphinx.js live demo for keyword spotting</h2>
     <select id="keyword"></select>
     <button id="startBtn">Start</button>
     <button id="stopBtn">Stop</button>
-    <span id="recording-indicator" style="border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 20px; height: 20px; background: red;"></span>
+    <span id="recording-indicator" style="border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 20px; height: 20px; background: red; color: red;"></span>
     <h2>Number of spotted keywords</h2>
     <div id="output" style="height:150px;overflow:auto;" >
     </div>
@@ -61,9 +61,9 @@ <h2>Status</h2>
         document.getElementById('current-status').innerHTML += "<br/>" + newStatus;
       };
 
-      // A not-so-great recording indicator
+      // A great recording indicator
       function displayRecording(display) {
-        if (display) document.getElementById('recording-indicator').innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
+        if (display) document.getElementById('recording-indicator').innerHTML = "00";
         else document.getElementById('recording-indicator').innerHTML = "";
       };
 
diff --git a/webapp/live_zh.html b/webapp/live_zh.html
index 9dad144..25972c2 100644
--- a/webapp/live_zh.html
+++ b/webapp/live_zh.html
@@ -13,7 +13,7 @@ <h2>PocketSphinx.js live demo for Chinese language</h2>
     <select id="grammars"></select>
     <button id="startBtn">Start</button>
     <button id="stopBtn">Stop</button>
-    <span id="recording-indicator" style="border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 20px; height: 20px; background: red;"></span>
+    <span id="recording-indicator" style="border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 20px; height: 20px; background: red; color: red;"></span>
     <h2>Recognition Output</h2>
     <div id="output" style="height:150px;overflow:auto;" >
     </div>
@@ -63,9 +63,9 @@ <h2>Status</h2>
         document.getElementById('current-status').innerHTML += "<br/>" + newStatus;
       };
 
-      // A not-so-great recording indicator
+      // A great recording indicator
       function displayRecording(display) {
-        if (display) document.getElementById('recording-indicator').innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
+        if (display) document.getElementById('recording-indicator').innerHTML = "00";
         else document.getElementById('recording-indicator').innerHTML = "";
       };