diff --git a/ui/css/tmgmt_ui.admin.css b/ui/css/tmgmt_ui.admin.css
index 57f1c1d..0fdf281 100644
--- a/ui/css/tmgmt_ui.admin.css
+++ b/ui/css/tmgmt_ui.admin.css
@@ -72,6 +72,20 @@ table.tmgmt-ui-review tbody th {
   background : -moz-linear-gradient(top, #aaa, #666);
 }
 
+.tmgmt-ui-icon-white {
+  border-color: #080f00;
+  background: #fff;
+  background : -webkit-gradient(linear, left top, left bottom, from(#fff), to(#aaa));
+  background : -moz-linear-gradient(top, #fff, #aaa);
+}
+
+.tmgmt-ui-icon-blue {
+  border-color: #080f00;
+  background: #007fff;
+  background : -webkit-gradient(linear, left top, left bottom, from(#007fff), to(#0050A0));
+  background : -moz-linear-gradient(top, #007fff, #0050A0);
+}
+
 .tmgmt-ui-icon-yellow {
   border-color: #544300;
   background: #a88700;
@@ -79,11 +93,18 @@ table.tmgmt-ui-review tbody th {
   background : -moz-linear-gradient(top, #ffcc00, #a88700);
 }
 
-.tmgmt-ui-icon-red {
+.tmgmt-ui-icon-yellow {
+  border-color: #544300;
+  background: #a88700;
+  background : -webkit-gradient(linear, left top, left bottom, from(#ffcc00), to(#a88700));
+  background : -moz-linear-gradient(top, #ffcc00, #a88700);
+}
+
+.tmgmt-ui-icon-orange {
   border-color: #210000;
-  background: #750000;
-  background : -webkit-gradient(linear, left top, left bottom, from(#cc0000), to(#750000));
-  background : -moz-linear-gradient(top, #cc0000, #750000);
+  background: #FF7f00;
+  background : -webkit-gradient(linear, left top, left bottom, from(#FF7f00), to(#A55000));
+  background : -moz-linear-gradient(top, #FF7f00, #A55000);
 }
 
 /* Icon sizes. */
@@ -128,3 +149,13 @@ table.tmgmt-ui-review tbody th {
 .tmgmt-ui-icon.tmgmt-ui-icon-32 span {
   font-size: 23px;
 }
+
+.tmgmt-ui-icon-16 {
+  width: 16px;
+  height: 16px;
+  border-width: 1px;
+  line-height: 16px;
+  text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+}
diff --git a/ui/images/active.png b/ui/images/active.png
deleted file mode 100644
index 883f545..0000000
Binary files a/ui/images/active.png and /dev/null differ
diff --git a/ui/images/current.png b/ui/images/current.png
deleted file mode 100644
index 1c5edf1..0000000
Binary files a/ui/images/current.png and /dev/null differ
diff --git a/ui/images/missing.png b/ui/images/missing.png
deleted file mode 100644
index 6aa6ca1..0000000
Binary files a/ui/images/missing.png and /dev/null differ
diff --git a/ui/images/original.png b/ui/images/original.png
deleted file mode 100644
index ca72972..0000000
Binary files a/ui/images/original.png and /dev/null differ
diff --git a/ui/images/outofdate.png b/ui/images/outofdate.png
deleted file mode 100644
index e68a802..0000000
Binary files a/ui/images/outofdate.png and /dev/null differ
diff --git a/ui/images/translated.png b/ui/images/translated.png
deleted file mode 100644
index 5b38ebc..0000000
Binary files a/ui/images/translated.png and /dev/null differ
diff --git a/ui/includes/tmgmt_ui.theme.inc b/ui/includes/tmgmt_ui.theme.inc
index cb08dea..cdb8d08 100644
--- a/ui/includes/tmgmt_ui.theme.inc
+++ b/ui/includes/tmgmt_ui.theme.inc
@@ -51,22 +51,26 @@ function theme_tmgmt_ui_translation_language_status_single($variables) {
 
   switch ($variables['translation_status']) {
     case 'original':
-      $label = t('Source');
+      $label = t('Source language');
+      $icon_color = 'tmgmt-ui-icon-white';
       break;
 
     case 'missing':
-      $label = t('Missing');
-      break;
+      $label = t('Not translated');
+      $icon_color = 'tmgmt-ui-icon-grey';
+     break;
 
     case 'outofdate':
-      $label = t('Outdated');
+      $label = t('Translation Outdated');
+      $icon_color = 'tmgmt-ui-icon-orange';
       break;
 
     default:
-      $label = t('Current');
+      $label = t('Translation up to date');
+      $icon_color = 'tmgmt-ui-icon-green';
   }
 
-  // Override the image in case of an active job.
+  // Override the label and color in case of an active job.
   if (isset($variables['job_item'])) {
     $wrapper = entity_metadata_wrapper('tmgmt_job_item', $variables['job_item']);
 
@@ -75,27 +79,28 @@ function theme_tmgmt_ui_translation_language_status_single($variables) {
     switch ($variables['job_item']->state) {
       case TMGMT_JOB_ITEM_STATE_ACTIVE:
         $variables['translation_status'] = 'active';
+        $icon_color = 'tmgmt-ui-icon-blue';
         break;
 
       case TMGMT_JOB_ITEM_STATE_REVIEW:
         $variables['translation_status'] = 'translated';
+        $icon_color = 'tmgmt-ui-icon-yellow';
         break;
     }
   }
-
-  $url = drupal_get_path('module', 'tmgmt_ui') . '/images/' . $variables['translation_status'] . '.png';
-
-  // Theme the image.
-  $image_variables = array(
-    'path' => $url,
-    'alt' => $label,
-    'title' => $label,
-    'attributes' => array(
-      'class' => array('tmgmt-translation-status-image', 'tmgmt-translation-status-' . $variables['translation_status']),
-    ),
-  );
-  $status = theme('image', $image_variables);
-
+  
+  
+  //add classes to show the correct html icon
+  $classes = array();
+  $classes[] = 'tmgmt-ui-icon';
+  $classes[] = 'tmgmt-ui-icon-16'; // Icon size 16px square.
+  $classes[] = $icon_color;
+
+  //load css file, @TODO: find the right place to load this
+  drupal_add_css(drupal_get_path('module', 'tmgmt_ui') . '/css/tmgmt_ui.admin.css');
+  
+  $status = sprintf('<div class="%s" title="%s"><span></span></div>', implode(' ', $classes), $label);
+  
   // If we have an active job item, wrap it in a link.
   if (!empty($variables['job_item'])) {
     $uri = $variables['job_item']->uri();