diff --git a/UI/Cells/QualityCell.js b/UI/Cells/QualityCell.js
index d46ac4531..65d5b28cc 100644
--- a/UI/Cells/QualityCell.js
+++ b/UI/Cells/QualityCell.js
@@ -6,7 +6,7 @@ define(
         return TemplatedCell.extend({
 
             className: 'quality-cell',
-            template : 'Cells/QualityTemplate'
+            template : 'Cells/QualityCellTemplate'
 
         });
     });
diff --git a/UI/Cells/QualityCellTemplate.html b/UI/Cells/QualityCellTemplate.html
new file mode 100644
index 000000000..429ef0c0f
--- /dev/null
+++ b/UI/Cells/QualityCellTemplate.html
@@ -0,0 +1,5 @@
+{{#if proper}}
+    <span class="badge badge-info" title="PROPER">{{quality.name}}</span>
+{{else}}
+    <span class="badge badge-inverse">{{quality.name}}</span>
+{{/if}}
\ No newline at end of file
diff --git a/UI/Cells/QualityTemplate.html b/UI/Cells/QualityTemplate.html
deleted file mode 100644
index 83c3a557d..000000000
--- a/UI/Cells/QualityTemplate.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{{quality.name}}
-
-{{#if proper}}
-    [PROPER]
-{{/if}}
diff --git a/UI/Cells/cells.less b/UI/Cells/cells.less
index 68a6c3cb2..14b120b84 100644
--- a/UI/Cells/cells.less
+++ b/UI/Cells/cells.less
@@ -17,10 +17,6 @@
   cursor: default;
 }
 
-.quality-cell {
-  width : 130px;
-}
-
 .history-event-type-cell {
   width : 10px;
 }
@@ -44,8 +40,9 @@
   }
 }
 
-td.episode-status-cell {
+td.episode-status-cell, td.quality-cell {
   text-align: center;
+  width: 80px;
 
   .badge {
     font-size: 9px;