diff --git a/src/interface/web/index.html b/src/interface/web/index.html
index 8ed66446..05bee0a4 100644
--- a/src/interface/web/index.html
+++ b/src/interface/web/index.html
@@ -163,13 +163,15 @@
         span.task-status {
             color: white;
             padding: 3.5px 3.5px 0;
-            margin: 5px;
+            margin-right: 5px;
+            border-radius: 5px;
+            background-color: #ed6f00;
         }
         span.task-status.todo {
-            background-color: rgb(39, 149, 182);
+            background-color: #048ba8
         }
         span.task-status.done {
-            background-color: rgb(81, 143, 31);
+            background-color: #06a77d;
         }
     </style>
 
diff --git a/src/interface/web/org.js b/src/interface/web/org.js
index f43c956f..a220a228 100644
--- a/src/interface/web/org.js
+++ b/src/interface/web/org.js
@@ -1124,13 +1124,6 @@ var Org = (function () {
 
       switch (node.type) {
       case Node.types.header:
-        // Parse task status
-        var taskStatus = null;
-        if (childText.indexOf("TODO ") === 0)
-          taskStatus = "todo";
-        else if (childText.indexOf("DONE ") === 0)
-          taskStatus = "done";
-
         // Compute section number
         var sectionNumberText = null;
         if (recordHeader) {
@@ -1150,8 +1143,7 @@ var Org = (function () {
           node.sectionNumberText = sectionNumberText; // Can be used in ToC
         }
 
-        text = this.convertHeader(node, childText, auxData,
-                                  taskStatus, sectionNumberText);
+        text = this.convertHeader(node, childText, auxData, sectionNumberText);
 
         if (recordHeader)
           this.headers.push(node);
@@ -1493,14 +1485,19 @@ var Org = (function () {
     // Node conversion
     // ----------------------------------------------------
 
-    convertHeader: function (node, childText, auxData,
-                             taskStatus, sectionNumberText) {
+    convertHeader: function (node, childText, auxData, sectionNumberText) {
       var headerAttributes = {};
 
+      // Parse task status
+      taskStatusRegex = /^\s*([A-Z]+) /
+      taskStatusMatch = childText.match(taskStatusRegex);
+      taskStatus = taskStatusMatch && taskStatusMatch[1];
+      childText = childText.replace(taskStatusRegex, "");
+
       if (taskStatus) {
-        childText = this.inlineTag("span", childText.substring(0, 4), {
+        childText = this.inlineTag("span", taskStatus, {
           "class": "task-status " + taskStatus
-        }) + childText.substring(5);
+        }) + childText;
       }
 
       if (sectionNumberText) {