diff --git a/client/app/services/service-details/service-details-ansible.html b/client/app/services/service-details/service-details-ansible.html
index 8047e75f8..493eeebd5 100644
--- a/client/app/services/service-details/service-details-ansible.html
+++ b/client/app/services/service-details/service-details-ansible.html
@@ -12,8 +12,8 @@ <h3 translate>Results</h3>
                   <div class="form-group">
                     <label class="control-label col-sm-3" translate>Status</label>
                     <div class="col-sm-8">
-                      <input class="form-control text-capitalize" readonly
-                             value="{{item.stack.status || ('Unknown' | translate)}}"/>
+                      <icon-status status="item.stack.status" success="['successful', 'succeeded', 'create_complete']"
+                                   error="['failure', 'failed']"></icon-status>
                     </div>
                   </div>
                   <div class="form-group">
@@ -94,7 +94,7 @@ <h3 translate>Details</h3>
               </span>
                   </div>
                   <pf-list-view ng-if="item.credentials.length > 0" config="vm.credListConfig"
-                       items="item.credentials" custom-scope="vm">
+                                items="item.credentials" custom-scope="vm">
                     <div class="row">
                       <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                         <div class="list-view-stacked-item">
@@ -144,7 +144,7 @@ <h3 translate>Details</h3>
                 </span>
                   </div>
                   <pf-list-view ng-if="item.jobs.length > 0" config="vm.playsListConfig"
-                       items="item.jobs" custom-scope="vm">
+                                items="item.jobs" custom-scope="vm">
                     <div class="row">
                       <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                         <div class="list-view-stacked-item">
@@ -157,9 +157,9 @@ <h3 translate>Details</h3>
                       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                         <div class="list-view-stacked-item">
                           <strong translate>Status</strong>
-                          <div class="text-capitalize">
-                            {{ item.resource_status }}
-                          </div>
+                          <icon-status status="item.stack.status"
+                                       success="['successful', 'succeeded', 'create_complete']"
+                                       error="['failure', 'failed']"></icon-status>
                         </div>
                       </div>
                       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
diff --git a/client/app/shared/icon-status.component.js b/client/app/shared/icon-status.component.js
new file mode 100644
index 000000000..8e0e6e1ee
--- /dev/null
+++ b/client/app/shared/icon-status.component.js
@@ -0,0 +1,50 @@
+export const IconStatusComponent = {
+  controllerAs: 'vm',
+  controller: ComponentController,
+  bindings: {
+    status: '<',
+    success: '<?',
+    error: '<?',
+    queued: '<?',
+    inprogress: '<?',
+  },
+  template: `
+   <i class="pficon pficon-ok" ng-if="vm.isSuccess"
+     uib-tooltip="{{vm.status}}"
+     tooltip-append-to-body="true"
+     tooltip-popup-delay="1000"
+     tooltip-placement="bottom" />
+   <i class="pficon pficon-error-circle-o" ng-if="vm.isError"
+     uib-tooltip="{{vm.status}}"
+     tooltip-append-to-body="true"
+     tooltip-popup-delay="1000"
+     tooltip-placement="bottom" />
+   <span ng-if="vm.isInprogress" class="spinner spinner-xs spinner-inline"/>  
+   <i class="fa fa-hourglass-half" ng-if="vm.isQueued"
+     uib-tooltip="{{vm.status}}"
+     tooltip-append-to-body="true"
+     tooltip-popup-delay="1000"
+     tooltip-placement="bottom" />   
+   <i class="pficon pficon-help" ng-if="vm.isUnknown"
+     uib-tooltip="{{vm.status}}"
+     tooltip-append-to-body="true"
+     tooltip-popup-delay="1000"
+     tooltip-placement="bottom" />
+  `,
+};
+
+/** @ngInject */
+function ComponentController(lodash) {
+  const vm = this;
+  vm.$onChanges = function() {
+    vm.status = lodash.capitalize(vm.status);
+
+    angular.extend(vm, {
+      isSuccess: vm.success ? vm.success.some((status) => status.toLowerCase() === vm.status.toLowerCase()) : false,
+      isError: vm.error ? vm.error.some((status) => status.toLowerCase() === vm.status.toLowerCase()) : false,
+      isQueued: vm.queued ? vm.queued.some((status) => status.toLowerCase() === vm.status.toLowerCase()) : false,
+      isInprogress: vm.inprogress ? vm.inprogress.some((status) => status.toLowerCase() === vm.status.toLowerCase()) : false,
+    });
+    vm.isUnknown = !vm.isSuccess && !vm.isError && !vm.isQueued && !vm.isInprogress;
+  };
+}
diff --git a/client/app/shared/icon-status.component.spec.js b/client/app/shared/icon-status.component.spec.js
new file mode 100644
index 000000000..aa2c3908e
--- /dev/null
+++ b/client/app/shared/icon-status.component.spec.js
@@ -0,0 +1,47 @@
+describe('Component: Icon-status', () => {
+  let parentScope, $compile;
+
+  beforeEach(module('app.services', 'app.shared'));
+
+  beforeEach(inject(function(_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    parentScope = _$rootScope_.$new();
+  }));
+
+  const compileHtml = function(markup, scope) {
+    let element = angular.element(markup);
+    $compile(element)(scope);
+    scope.$digest();
+    return element;
+  };
+
+  it('should display success when status matches success', () => {
+    const renderedElement = compileHtml(angular.element(`<icon-status status="'success'" success="['success']"/>`), parentScope);
+
+    expect(renderedElement[0].querySelectorAll('.pficon-ok').length).to.eq(1);
+  });
+
+  it('should display error when status matches error', () => {
+    const renderedElement = compileHtml(angular.element(`<icon-status status="'error'" error="['error']"/>`), parentScope);
+
+    expect(renderedElement[0].querySelectorAll('.pficon-error-circle-o').length).to.eq(1);
+  });
+
+  it('should display pending when status matches pending', () => {
+    const renderedElement = compileHtml(angular.element(`<icon-status status="'pending'" queued="['pending']"/>`), parentScope);
+
+    expect(renderedElement[0].querySelectorAll('.fa-hourglass-half').length).to.eq(1);
+  });
+
+  it('should display spinner when status is matches inprogress', () => {
+    const renderedElement = compileHtml(angular.element(`<icon-status status="'inprogress'" inprogress="['inprogress']"/>`), parentScope);
+
+    expect(renderedElement[0].querySelectorAll('.spinner').length).to.eq(1);
+  });
+
+  it('should display unknown when status unknown', () => {
+    const renderedElement = compileHtml(angular.element(`<icon-status status="'foo'"/>`), parentScope);
+
+    expect(renderedElement[0].querySelectorAll('.pficon-help').length).to.eq(1);
+  });
+});
diff --git a/client/app/shared/shared.module.js b/client/app/shared/shared.module.js
index 3ee6734ac..b1cc77144 100644
--- a/client/app/shared/shared.module.js
+++ b/client/app/shared/shared.module.js
@@ -7,6 +7,7 @@ import {CustomDropdownComponent} from "./custom-dropdown/custom-dropdown.compone
 import {DialogContentComponent} from "./dialog-content/dialog-content.component.js";
 import {ElapsedTime} from "./elapsedTime.filter.js";
 import {IconListComponent} from "./icon-list/icon-list.component.js";
+import {IconStatusComponent} from './icon-status.component.js';
 import {LoadingComponent} from "./loading.component.js";
 import {PaginationComponent} from "./pagination/pagination.component.js";
 import {SSCardComponent} from "./ss-card/ss-card.component.js";
@@ -30,6 +31,7 @@ export const SharedModule = angular
   .component('dialogContent', DialogContentComponent)
   .component('explorerPagination', PaginationComponent)
   .component('iconList', IconListComponent)
+  .component('iconStatus', IconStatusComponent)
   .component('loading', LoadingComponent)
   .component('ssCard', SSCardComponent)
   .component('taggingWidget', TaggingComponent)