diff --git a/client/src/css/structure.css b/client/src/css/structure.css
index 0f62de597d..2042f97af7 100644
--- a/client/src/css/structure.css
+++ b/client/src/css/structure.css
@@ -931,6 +931,11 @@ a[disabled] {
   padding-left : 5px;
 }
 
+.filter-text-link {
+  color: #fff;
+  margin-left: 5px;
+}
+
 .strike {
   text-decoration : line-through;
 }
diff --git a/client/src/js/components/bhFilter.js b/client/src/js/components/bhFilter.js
new file mode 100644
index 0000000000..c54c7f891a
--- /dev/null
+++ b/client/src/js/components/bhFilter.js
@@ -0,0 +1,21 @@
+angular.module('bhima.components')
+  .component('bhFilter', {
+    templateUrl : 'modules/templates/bhFilter.tmpl.html',
+    controller : bhFilterController,
+    bindings : {
+      filter : '<',
+      onRemove : '&',
+    }
+    ,
+  });
+
+function bhFilterController() {
+  const $ctrl = this;
+  const DEFAULT_FILTER_COMPARITOR = ':';
+
+  $ctrl.$onInit = function onInit() {
+    // fill in label details required by the template
+    $ctrl.filter = $ctrl.filter || {};
+    $ctrl.filter.comparitorLabel = $ctrl.filter._comparitor || DEFAULT_FILTER_COMPARITOR;
+  };
+}
diff --git a/client/src/js/components/bhFilters.js b/client/src/js/components/bhFilters.js
index b9afc34906..4c985ec935 100644
--- a/client/src/js/components/bhFilters.js
+++ b/client/src/js/components/bhFilters.js
@@ -1,22 +1,22 @@
 angular.module('bhima.components')
-.component('bhFilters', {
-  templateUrl : 'modules/templates/bhFilters.tmpl.html',
-  controller  : bhFiltersController,
-  bindings    : {
-    filters        : '<',
-    onRemoveFilter : '&',  // fires to remove the filter
-  },
-});
+  .component('bhFilters', {
+    templateUrl : 'modules/templates/bhFilters.tmpl.html',
+    controller  : bhFiltersController,
+    bindings    : {
+      filters        : '<',
+      onRemoveFilter : '&',
+    },
+  });
 
 bhFiltersController.$inject = ['$filter'];
 function bhFiltersController($filter) {
-  var $ctrl = this;
+  const $ctrl = this;
 
   // formats the $viewValue according to any filters passed in
   $ctrl.$onChanges = function onChanges(changes) {
     if (!changes.filters) { return; }
 
-    var filters = changes.filters.currentValue;
+    const filters = changes.filters.currentValue;
 
     if (!filters) { return; }
 
diff --git a/client/src/modules/templates/bhFilter.tmpl.html b/client/src/modules/templates/bhFilter.tmpl.html
new file mode 100644
index 0000000000..c72f0b392a
--- /dev/null
+++ b/client/src/modules/templates/bhFilter.tmpl.html
@@ -0,0 +1,19 @@
+<span data="filter">
+  <span class="label" ng-class="{ 'label-primary' : $ctrl.filter._isDefault, 'label-emphasize' : !$ctrl.filter._isDefault }">
+    <i class="fa fa-filter"></i>
+
+    <span translate>{{$ctrl.filter._label}}</span>
+    <span>{{$ctrl.filter.comparitorLabel}}</span>
+    <span>{{$ctrl.filter.displayValue}}</span>
+
+    <!-- optional close button, displayed if this is not a default filter -->
+    <a
+       href
+       ng-if="!$ctrl.filter._isDefault"
+       ng-click="$ctrl.onRemove({ filter: $ctrl.filter._key })"
+       class="filter-text-link">
+
+      <i class="fa fa-close"></i>
+    </a>
+  </span>
+</span>
diff --git a/client/src/modules/templates/bhFilters.tmpl.html b/client/src/modules/templates/bhFilters.tmpl.html
index 082ada5c62..a42eff8ff6 100644
--- a/client/src/modules/templates/bhFilters.tmpl.html
+++ b/client/src/modules/templates/bhFilters.tmpl.html
@@ -7,11 +7,7 @@
     <!--
       TODO: these should be a custom CSS class.  Label is just too small!
     -->
-    <span class="label label-emphasize">
-      <i class="fa fa-filter"></i>
-      <span translate>{{filter._label}}</span> {{ filter._comparitor ? " " + filter._comparitor : ":" }}
-      {{ filter.displayValue }}
-    </span>
+    <bh-filter filter="filter"></bh-filter>
   </li>
 </ul>
 
@@ -19,19 +15,10 @@
 <div ng-if="$ctrl.filters.defaultFilters.length && $ctrl.filters.customFilters.length" style="display : inline-block; width : 1px; height: 25px; vertical-align : top; background-color : #ccc;"></div>
 
 <ul ng-if="$ctrl.filters.customFilters.length" class="list-inline filter-list" data-bh-filter-bar-custom-filters>
-
   <li ng-repeat="filter in $ctrl.filters.customFilters">
-    <span class="label label-primary">
-      <i class="fa fa-filter"></i>
-      <span translate>{{filter._label}}</span>
-      {{ filter._comparitor ? " " + filter._comparitor : ":" }}
-      {{ filter.displayValue }}
-
-      <a ng-if="!filter.isDefault" href ng-click="$ctrl.onRemoveFilter({ filter : filter._key })"
-        style="color:#fff; margin-left:5px;">
-        <i class="fa fa-close"></i>
-      </a>
 
-    </span>
+    <!-- on-remove is passing an object containing 'locals' (variables) as part of the Angular -->
+    <!-- component callback structure - these methods are not directly called but are wrapper methods -->
+    <bh-filter filter="filter" on-remove="$ctrl.onRemoveFilter({ filter: filter})"></bh-filter>
   </li>
 </ul>