diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/bastion_katello.js b/engines/bastion_katello/app/assets/javascripts/bastion_katello/bastion_katello.js
index fbe86231a5e..c09326f3405 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/bastion_katello.js
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/bastion_katello.js
@@ -94,6 +94,8 @@
 //= require "bastion_katello/architectures/architectures.module.js"
 //= require_tree "./architectures"
 
+//= require "bastion_katello/dates/dates.module.js"
+
 //= require "bastion_katello/i18n/translations.js"
 
 //= require "bastion_katello/bastion-katello-bootstrap.js"
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/common/views/subscription-add-or-remove.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/common/views/subscription-add-or-remove.html
index 65ed428c143..e801695127d 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/common/views/subscription-add-or-remove.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/common/views/subscription-add-or-remove.html
@@ -40,7 +40,7 @@
        </td>
        <td bst-table-cell><div subscription-type="subscription"></div></td>
        <td bst-table-cell><div subscription-start-date="subscription"></div></td>
-       <td bst-table-cell>{{ subscription.end_date | date:"shortDate" }}</td>
+       <td bst-table-cell><date date="subscription.end_date" /></td>
        <td bst-table-cell>{{ subscription.support_level }}</td>
        <td bst-table-cell>{{ subscription.contract_number }}</td>
        <td bst-table-cell>{{ subscription.account_number }}</td>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/bulk/views/content-hosts-bulk-subscriptions-modal.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/bulk/views/content-hosts-bulk-subscriptions-modal.html
index 5b8d7b8df9a..5ae7dbb830b 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/bulk/views/content-hosts-bulk-subscriptions-modal.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/bulk/views/content-hosts-bulk-subscriptions-modal.html
@@ -101,7 +101,7 @@ <h4 data-block="modal-header" translate>
               <td bst-table-cell>{{ subscription | subscriptionConsumedFilter }}</td>
               <td bst-table-cell><div subscription-type="subscription"></div></td>
               <td bst-table-cell><div subscription-start-date="subscription"></div></td>
-              <td bst-table-cell>{{ subscription.end_date | date:"shortDate" }}</td>
+              <td bst-table-cell><date date="subscription.end_date" /></td>
               <td bst-table-cell>{{ subscription.support_level }}</td>
               <td bst-table-cell>{{ subscription.contract_number }}</td>
               <td bst-table-cell>{{ subscription.account_number }}</td>
@@ -118,4 +118,4 @@ <h4 data-block="modal-header" translate>
       Done
     </button>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/content-hosts.module.js b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/content-hosts.module.js
index 10f3d1aca42..b246112c30e 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/content-hosts.module.js
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/content-hosts.module.js
@@ -19,5 +19,6 @@ angular.module('Bastion.content-hosts', [
     'Bastion.hosts',
     'Bastion.errata',
     'Bastion.host-collections',
-    'Bastion.repository-sets'
+    'Bastion.repository-sets',
+    'Bastion.dates'
 ]);
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/content/views/content-host-errata.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/content/views/content-host-errata.html
index aecd6fb1f9c..e9f9fc30cb6 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/content/views/content-host-errata.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/content/views/content-host-errata.html
@@ -137,8 +137,8 @@ <h3 translate ng-show="selectedErrataOption === 'current'">Installable Errata</h
                 {{ erratum.errata_id }}
               </a>
             </td>
-            <td bst-table-cell >{{ erratum.title }}</td>
-            <td bst-table-cell >{{ erratum.updated | date:'shortDate' }}</td>
+            <td bst-table-cell>{{ erratum.title }}</td>
+            <td bst-table-cell><date date="erratum.updated" /></td>
           </tr>
         </tbody>
       </table>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-events.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-events.html
index 2fe5b851fa8..4c7f16ca298 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-events.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-events.html
@@ -20,7 +20,7 @@
             <td bst-table-cell>{{ event.type }}</td>
             <td bst-table-cell>{{ event.target }}</td>
             <td bst-table-cell>{{ event.messageText }}</td>
-            <td bst-table-cell>{{ event.timestamp | date:"short" }}</td>
+            <td bst-table-cell><short-date-time date="event.timestamp" /></td>
           </tr>
         </tbody>
       </table>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-info.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-info.html
index 8331619a9a2..2c4bb7f0b28 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-info.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-info.html
@@ -288,7 +288,7 @@ <h4 translate>Content Host Status</h4>
 
       <dl class="dl-horizontal dl-horizontal-left">
         <dt translate>Registered</dt>
-        <dd>{{ host.created_at | date:'short' }}</dd>
+        <dd><short-date-time date="host.created_at" /></dd>
 
         <dt translate> Registered By</dt>
         <dd>
@@ -315,7 +315,7 @@ <h4 translate>Content Host Status</h4>
         </dd>
 
         <dt translate>Last Checkin</dt>
-        <dd>{{ (host.subscription_facet_attributes.last_checkin | date:'short') || ("Never checked in" | translate) }}</dd>
+        <dd><short-date-time date="host.subscription_facet_attributes.last_checkin" default="'Never checked in' | translate" /></dd>
       </dl>
 
       <div class="divider"></div>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-provisioning-info.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-provisioning-info.html
index 0105a40a708..36461cc39e6 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-provisioning-info.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/details/views/content-host-provisioning-info.html
@@ -25,7 +25,7 @@ <h4 translate>Provisioning Host Details</h4>
       <dd>{{ host.puppet_environment_name }}</dd>
 
       <dt translate>Last Puppet Report</dt>
-      <dd>{{ host.last_report | date:'short' }}</dd>
+      <dd><short-date-time date="host.last_report" /></dd>
 
       <dt translate>Model</dt>
       <dd>{{ host.model_name }}</dd>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/views/content-hosts.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/views/content-hosts.html
index 1930103f6aa..84a83dd6e54 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/views/content-hosts.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-hosts/views/content-hosts.html
@@ -123,8 +123,8 @@ <h2 translate>Content Hosts</h2>
           <td bst-table-cell>{{ host.operatingsystem_name }}</td>
           <td bst-table-cell>{{ host.content_facet_attributes.lifecycle_environment.name }}</td>
           <td bst-table-cell>{{ host.content_facet_attributes.content_view.name || "" }}</td>
-          <td bst-table-cell>{{ (host.subscription_facet_attributes.registered_at | date:'short') || ("Never registered" | translate) }}</td>
-          <td bst-table-cell>{{ (host.subscription_facet_attributes.last_checkin | date:'short') || ("Never checked in" | translate) }}</td>
+          <td bst-table-cell><short-date-time date="host.subscription_facet_attributes.registered_at" default="'Never registered' | translate" /></td>
+          <td bst-table-cell><short-date-time date="host.subscription_facet_attributes.last_checkin" default="'Never checked in' | translate" /></td>
         </tr>
       </tbody>
     </table>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/content-views.module.js b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/content-views.module.js
index 7550e44dcac..d7a6c477b3d 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/content-views.module.js
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/content-views.module.js
@@ -13,5 +13,6 @@ angular.module('Bastion.content-views', [
     'Bastion.utils',
     'Bastion.content-views.versions',
     'Bastion.components',
-    'Bastion.packages'
+    'Bastion.packages',
+    'Bastion.dates'
 ]);
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/errata-filter-details.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/errata-filter-details.html
index 3913cdfc97c..8929baf2d6a 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/errata-filter-details.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/errata-filter-details.html
@@ -48,10 +48,10 @@
           {{ errata.type }}
         </td>
         <td bst-table-cell>
-          {{ errata.issued | date:'M/d/yy' }}
+          <date date="errata.issued" />
         </td>
         <td bst-table-cell>
-          {{ errata.updated | date:'M/d/yy' }}
+          <date date="errata.updated" />
         </td>
         <td bst-table-cell>{{ errata.title }}</td>
       </tr>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/filter-repositories.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/filter-repositories.html
index 9839190c116..4a8b5810b93 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/filter-repositories.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/filter-repositories.html
@@ -87,7 +87,7 @@
                   </span>
                   <span ng-hide="repository.last_sync == null">
                     <a href="/foreman_tasks/tasks/{{repository.last_sync.id}}">{{ repository.last_sync.result | capitalize}}</a>
-                    ({{ repository.last_sync.ended_at | date:"short" }})
+                    <short-date-time date="repository.last_sync.ended_at" />
                   </span>
                 </span>
               <span ng-hide="repository.url" translate>N/A</span>
@@ -113,4 +113,4 @@
       </table>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/filters.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/filters.html
index 7d739030f77..a21e2849544 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/filters.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/filters/views/filters.html
@@ -66,7 +66,7 @@
             </a>
           </td>
           <td bst-table-cell>{{ filter.description }}</td>
-          <td bst-table-cell>{{ filter.updated_at | date:"short" }}</td>
+          <td bst-table-cell><short-date-time date="filter.updated_at" /></td>
           <td bst-table-cell>
             {{ filter.type | filterContentType }}
             <span ng-if="filter.type === 'erratum' && filter.rules[0].types">{{ '- Date and Type' | translate }}</span>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/histories/views/content-view-history.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/histories/views/content-view-history.html
index 5773ff2c556..263e4ef6afe 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/histories/views/content-view-history.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/histories/views/content-view-history.html
@@ -10,27 +10,27 @@ <h3 translate>Promotion History</h3>
 
   <div data-block="table">
     <table class="table table-striped table-bordered" ng-class="{'table-mask': table.working}">
-     <thead>
-       <tr bst-table-head>
-         <th translate>Date</th>
-         <th translate>Version</th>
-         <th translate>Description</th>
-         <th translate>Action</th>
-         <th translate>User</th>
-         <th translate>Status</th>
-       </tr>
-     </thead>
+      <thead>
+        <tr bst-table-head>
+          <th translate>Date</th>
+          <th translate>Version</th>
+          <th translate>Description</th>
+          <th translate>Action</th>
+          <th translate>User</th>
+          <th translate>Status</th>
+        </tr>
+      </thead>
 
-     <tbody>
-       <tr bst-table-row ng-repeat="history in table.rows">
-         <td bst-table-cell>{{ history.created_at | date:'short' }}</td>
-         <td bst-table-cell>{{ history.version }} </td>
-         <td bst-table-cell class="preserve-newlines">{{ history.description }}</td>
-         <td bst-table-cell>{{ actionText(history) }}</td>
-         <td bst-table-cell>{{ history.user }}</td>
-         <td bst-table-cell>{{ history.task.result }}</td>
-       </tr>
-     </tbody>
+      <tbody>
+        <tr bst-table-row ng-repeat="history in table.rows">
+          <td bst-table-cell><short-date-time date="history.created_at" /></td>
+           <td bst-table-cell>{{ history.version }} </td>
+           <td bst-table-cell class="preserve-newlines">{{ history.description }}</td>
+          <td bst-table-cell>{{ actionText(history) }}</td>
+          <td bst-table-cell>{{ history.user }}</td>
+          <td bst-table-cell>{{ history.task.result }}</td>
+        </tr>
+      </tbody>
     </table>
   </div>
 </div>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-deb-repositories.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-deb-repositories.html
index e9473280e54..9237a01e958 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-deb-repositories.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-deb-repositories.html
@@ -71,7 +71,7 @@ <h3 translate>Deb Repositories</h3>
             Not Synced
           </span>
           <span ng-show="repository.url">
-            {{ repository.last_sync.ended_at | date:"short" }}
+            <short-date-time date="repository.last_sync.ended_at" />
           </span>
           <span ng-hide="repository.url" translate>N/A</span>
         </td>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-docker-repositories.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-docker-repositories.html
index 4c7985b6c51..0f3dfd72905 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-docker-repositories.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-docker-repositories.html
@@ -79,7 +79,7 @@ <h3 translate>
               Not Synced
             </span>
             <span ng-show="repository.url">
-              {{ repository.last_sync.ended_at | date:"short" }}
+              <short-date-time date="repository.last_sync.ended_at" />
             </span>
             <span ng-hide="repository.url" translate>N/A</span>
           </td>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-file-repositories.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-file-repositories.html
index b705c6ea0c5..bb35f88926f 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-file-repositories.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-file-repositories.html
@@ -71,7 +71,7 @@ <h3 translate>File Repositories</h3>
             Not Synced
           </span>
           <span ng-show="repository.url">
-            {{ repository.last_sync.ended_at | date:"short" }}
+            <short-date-time date="repository.last_sync.ended_at" />
           </span>
           <span ng-hide="repository.url" translate>N/A</span>
         </td>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-ostree-repositories.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-ostree-repositories.html
index 813cf919d27..4b5d0fba487 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-ostree-repositories.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-ostree-repositories.html
@@ -71,7 +71,7 @@ <h3 translate>OSTree Repositories</h3>
             Not Synced
           </span>
           <span ng-show="repository.url">
-            {{ repository.last_sync.ended_at | date:"short" }}
+            <short-date-time date="repository.last_sync.ended_at" />
           </span>
           <span ng-hide="repository.url" translate>N/A</span>
         </td>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-repositories.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-repositories.html
index 8c13ae53520..5b10ced550b 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-repositories.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-repositories.html
@@ -74,7 +74,7 @@ <h3 translate>
             Not Synced
           </span>
           <span ng-show="repository.url">
-            {{ repository.last_sync.ended_at | date:"short" }}
+            <short-date-time date="repository.last_sync.ended_at" />
           </span>
           <span ng-hide="repository.url" translate>N/A</span>
         </td>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-versions.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-versions.html
index 2bfa82b4254..d6c6200b338 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-versions.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/details/views/content-view-versions.html
@@ -41,7 +41,7 @@
 
             <span ng-show="hideProgress(version)">
               {{ historyText(version) }}
-              ({{ version.last_event.created_at | date:'short' }})
+              (<short-date-time date="version.last_event.created_at" />)
             </span>
           </td>
           <td bst-table-cell>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/versions/views/content-view-version-errata.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/versions/views/content-view-version-errata.html
index d13e039adf3..6ced929dce3 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/versions/views/content-view-version-errata.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/versions/views/content-view-version-errata.html
@@ -38,7 +38,7 @@
           <span ng-show="errata.severity">- {{ errata.severity }}</span>
         </td>
         <td bst-table-cell>{{ errata.hosts_available_count || 0 }}</td>
-        <td bst-table-cell>{{ errata.updated | date:'shortDate'}}</td>
+        <td bst-table-cell><date date="errata.updated" /></td>
       </tr>
     </tbody>
   </table>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/views/content-views.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/views/content-views.html
index c2a02ab8b43..384dbfa10d1 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/views/content-views.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/content-views/views/content-views.html
@@ -47,7 +47,7 @@ <h2 translate>Content Views</h2>
             <span ng-hide="contentView.composite" translate>No</span>
           </td>
           <td bst-table-cell>
-            <span ng-show="contentView.last_published">{{ contentView.last_published | date:"medium" }}</span>
+            <span ng-show="contentView.last_published"><long-date-time date="contentView.last_published" /></span>
           <span ng-hide="contentView.last_published" translate>
             Not yet published
           </span>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/dates/dates.module.js b/engines/bastion_katello/app/assets/javascripts/bastion_katello/dates/dates.module.js
new file mode 100644
index 00000000000..677efe80a90
--- /dev/null
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/dates/dates.module.js
@@ -0,0 +1,50 @@
+/**
+ * @ngdoc module
+ * @name  Bastion.dates
+ *
+ * @description
+ *   Module providing directives for formatting dates.
+ */
+angular.module('Bastion.dates', [
+    'Bastion',
+    'react'
+]);
+
+angular.module('Bastion.dates').factory('componentRegistry',
+    ['$window', function($window) {
+        return $window.tfm.componentRegistry;
+    }]
+);
+
+angular.module('Bastion.dates').factory('dateComponent',
+    ['componentRegistry', function(componentRegistry) {
+        return function(componentName) {
+            var dateWrapper = componentRegistry.wrapperFactory().with('i18n').wrapper;
+            return dateWrapper(componentRegistry.getComponent(componentName).type);
+        };
+    }]
+);
+
+angular.module('Bastion.dates').directive('date',
+    ['dateComponent', 'reactDirective', function(dateComponent, reactDirective) {
+        return reactDirective(dateComponent('IsoDate'), ['date']);
+    }]
+);
+
+angular.module('Bastion.dates').directive('shortDateTime',
+    ['dateComponent', 'reactDirective', function(dateComponent, reactDirective) {
+        return reactDirective(dateComponent('ShortDateTime'), ['date', 'seconds']);
+    }]
+);
+
+angular.module('Bastion.dates').directive('longDateTime',
+    ['dateComponent', 'reactDirective', function(dateComponent, reactDirective) {
+        return reactDirective(dateComponent('LongDateTime'), ['date', 'seconds']);
+    }]
+);
+
+angular.module('Bastion.dates').directive('relativeDate',
+    ['dateComponent', 'reactDirective', function(dateComponent, reactDirective) {
+        return reactDirective(dateComponent('RelativeDateTime'), ['date']);
+    }]
+);
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/details/views/environment-content-views.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/details/views/environment-content-views.html
index 9e9072940e9..a87cfa71b99 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/details/views/environment-content-views.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/details/views/environment-content-views.html
@@ -28,7 +28,7 @@
           <span ng-show="contentView.composite" translate>Yes</span>
           <span ng-hide="contentView.composite" translate>No</span>
         </td>
-        <td bst-table-cell>{{ contentView.last_published | date:'longDate' }}</td>
+        <td bst-table-cell><long-date-time date="contentView.last_published" /></td>
         <td bst-table-cell class="number-cell">{{ contentView.repositories.length || 0 }}</td>
       </tr>
     </tbody>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/details/views/environment-errata.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/details/views/environment-errata.html
index c4df9a8b4c3..26aee3d2c95 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/details/views/environment-errata.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/details/views/environment-errata.html
@@ -50,7 +50,8 @@
           <span ng-show="errata.severity">- {{ errata.severity | errataSeverity}}</span>
         </td>
         <td bst-table-cell class="number-cell">{{ errata.hosts_available_count || 0 }}</td>
-        <td bst-table-cell>{{ errata.updated | date:'shortDate'}}</td>
+
+        <td bst-table-cell><date date="errata.updated" /></td>
       </tr>
     </tbody>
   </table>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/environments.module.js b/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/environments.module.js
index dd5fbee37c1..64be8d8f4e9 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/environments.module.js
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/environments/environments.module.js
@@ -17,5 +17,6 @@ angular.module('Bastion.environments', [
     'Bastion.ostree-branches',
     'Bastion.puppet-modules',
     'Bastion.repositories',
-    'Bastion.content-views'
+    'Bastion.content-views',
+    'Bastion.dates'
 ]);
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/details/views/erratum-info.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/details/views/erratum-info.html
index 23f5e524491..ec37f6ec7b2 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/details/views/erratum-info.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/details/views/erratum-info.html
@@ -24,10 +24,10 @@ <h4 translate>{{ errata.title }}</h4>
       <dd>{{ errata.severity | errataSeverity }}</dd>
 
       <dt translate>Issued</dt>
-      <dd>{{ errata.issued | date:'shortDate' }}</dd>
+      <dd><short-date-time date="errata.issued" /></dd>
 
       <dt translate>Last Updated On</dt>
-      <dd>{{ errata.updated | date:'shortDate' }}</dd>
+      <dd><short-date-time date="errata.updated" /></dd>
 
       <dt translate>Reboot Suggested?</dt>
       <dd>{{ errata.reboot_suggested | booleanToYesNo }}</dd>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/errata.module.js b/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/errata.module.js
index 7fb8c2854ab..b59c2a23ffb 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/errata.module.js
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/errata.module.js
@@ -12,5 +12,6 @@ angular.module('Bastion.errata', [
     'Bastion.common',
     'Bastion.i18n',
     'Bastion.components.formatters',
-    'Bastion.tasks'
+    'Bastion.tasks',
+    'Bastion.dates'
 ]);
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/views/errata.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/views/errata.html
index 5cbc1d7bf5d..9e07fd50f55 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/views/errata.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/errata/views/errata.html
@@ -101,7 +101,7 @@
             <span translate>{{ errata.hosts_applicable_count || 0 }} Applicable, </span>
             <span translate>{{ errata.hosts_available_count || 0 }} Installable</span>
           </td>
-          <td bst-table-cell>{{ errata.updated | date:'shortDate'}}</td>
+          <td bst-table-cell><short-date-time date="errata.updated" /></td>
         </tr>
       </tbody>
     </table>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/bulk/views/products-bulk-sync-plan-modal.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/bulk/views/products-bulk-sync-plan-modal.html
index 6bb4d966573..5da0014bd41 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/bulk/views/products-bulk-sync-plan-modal.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/bulk/views/products-bulk-sync-plan-modal.html
@@ -68,10 +68,10 @@ <h4 data-block="modal-header">Sync Plan Management</h4>
             <tr bst-table-row ng-repeat="syncPlan in table.rows" class="clickable-row"
                 ng-click="selectSyncPlan(syncPlan)" ng-class="{'selected-row': syncPlan === selectedSyncPlan }">
               <td bst-table-cell>{{ syncPlan.name }}</td>
-              <td bst-table-cell>{{ syncPlan.sync_date | date:'medium' }}</td>
+              <td bst-table-cell><long-date-time date="syncPlan.sync_date" /></td>
               <td bst-table-cell>{{ syncPlan.enabled }}</td>
               <td bst-table-cell>{{ syncPlan.interval | translate | capitalize }}</td>
-              <td bst-table-cell>{{ syncPlan.next_sync | date:'medium' }}</td>
+              <td bst-table-cell><long-date-time date="syncPlan.next_sync" /></td>
             </tr>
           </tbody>
         </table>
@@ -84,4 +84,4 @@ <h4 data-block="modal-header">Sync Plan Management</h4>
       Done
     </button>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/details/repositories/details/views/repository-info.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/details/repositories/details/views/repository-info.html
index 6fb91312b87..eab1ccc64f3 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/details/repositories/details/views/repository-info.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/details/repositories/details/views/repository-info.html
@@ -248,13 +248,14 @@ <h4 translate>Sync Status</h4>
       <dd ng-show="repository.last_sync == null" translate>
         Not Synced
       </dd>
-      <dd ng-hide="repository.last_sync == null || repository.last_sync.ended_at == null" translate>
-        {{ repository.last_sync_words }} Ago ({{ repository.last_sync.ended_at | date:'medium' }} Local Time)
+      <dd ng-hide="repository.last_sync == null || repository.last_sync.ended_at == null">
+        <relative-date date="repository.last_sync.ended_at" />
+        (<short-date-time date="repository.last_sync.ended_at" /> <translate>Local Time</translate>)
       </dd>
 
       <dt translate>Next Sync</dt>
-      <dd ng-show="repository.product.sync_plan.next_sync" translate>
-        {{ repository.product.sync_plan.next_sync | date:'medium' }} (Server Time)
+      <dd ng-show="repository.product.sync_plan.next_sync">
+        <long-date-time date="repository.product.sync_plan.next_sync" /> (<translate>Server Time</translate>)
       </dd>
       <dd ng-hide="repository.product.sync_plan.next_sync" translate>
         Synced manually, no interval set.
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/details/views/product-info.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/details/views/product-info.html
index f7cbb59a3e4..41ba3e5940b 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/details/views/product-info.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/details/views/product-info.html
@@ -87,13 +87,14 @@ <h4 translate>Sync Status</h4>
       <span ng-include="'products/details/partials/sync-status.html'"></span>
 
       <dt translate>Last Sync</dt>
-      <dd translate>
-        {{ product.last_sync_words }} Ago ({{ product.sync_status.finish_time | date:'medium' }} Local Time)
+      <dd>
+        <relative-date date="product.last_sync" />
+        (<long-date-time date="product.last_sync" /> <translate>Local Time</translate>)
       </dd>
 
       <dt translate>Next Sync</dt>
-      <dd ng-show="product.sync_plan.next_sync" translate>
-        {{ product.sync_plan.next_sync | date:'medium' }} (Server Time)
+      <dd ng-show="product.sync_plan.next_sync">
+        <long-date-time date="product.sync_plan.next_sync" /> (<translate>Server Time</translate>)
       </dd>
       <dd ng-hide="product.sync_plan.next_sync" translate>
         Synced manually, no interval set.
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/views/partials/product-table-sync-status.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/views/partials/product-table-sync-status.html
index 723365662b1..abf4e60dd1c 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/views/partials/product-table-sync-status.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/products/views/partials/product-table-sync-status.html
@@ -1,6 +1,7 @@
-<div class="list-unstyled" ng-show="product.last_sync_words">
-  <div translate>
-    Last synced {{ product.last_sync_words }} ago.
+<div class="list-unstyled" ng-show="product.last_sync">
+  <div>
+    <span translate>Last synced </span>
+    <relative-date date="product.last_sync" />.
   </div>
   <div ng-show="mostImportantSyncState(product) == 'pending'"
         translate
@@ -23,4 +24,4 @@
         1 successfully synced repository.
   </div>
 </div>
-<span ng-hide="product.last_sync_words" translate>Never synced</span>
+<span ng-hide="product.last_sync" translate>Never synced</span>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/details/views/subscription-info.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/details/views/subscription-info.html
index 0aba2519472..e7e5a16f804 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/details/views/subscription-info.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/details/views/subscription-info.html
@@ -8,7 +8,7 @@ <h4 translate>Subscription Info</h4>
 
       <dt translate>Description</dt>
       <dd>{{ subscription.description }}</dd>
-      
+
       <dt>
         <span translate>Virt-Who Usage Required</span>
         <i class="pf pficon-info"
@@ -26,10 +26,10 @@ <h4 translate>Subscription Info</h4>
       <dd>{{ subscription | subscriptionConsumedFilter }}</dd>
 
       <dt translate>Starts</dt>
-      <dd>{{ subscription.start_date | date:"short" }}</dd>
+      <dd><short-date-time date="subscription.start_date" /></dd>
 
       <dt translate>Ends</dt>
-      <dd>{{ subscription.end_date | date:"short" }}</dd>
+      <dd><short-date-time date="subscription.end_date" /></dd>
 
       <dt translate>Product ID</dt>
       <dd>{{ subscription.product_id }}</dd>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/manifest/views/manifest-details.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/manifest/views/manifest-details.html
index 30f3934ccdb..ea0deb7f97c 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/manifest/views/manifest-details.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/manifest/views/manifest-details.html
@@ -19,12 +19,12 @@ <h4 translate>Subscription Details</h4>
 
     <div class="detail">
       <span class="info-label" translate>Generated On</span>
-      <span class="info-value">{{ manifestImport.generatedDate | date:"short" }}</span>
+      <span class="info-value"><short-date-time date="manifestImport.generatedDate" /></span>
     </div>
 
     <div class="detail">
       <span class="info-label" translate>Last Updated</span>
-      <span class="info-value">{{ upstream.updated | date:"short" }}</span>
+      <span class="info-value"><short-date-time date="upstream.updated" /></span>
     </div>
 
   </section>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/manifest/views/manifest-import-history.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/manifest/views/manifest-import-history.html
index 67c35d5b13a..b6dbe10dd9c 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/manifest/views/manifest-import-history.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/manifest/views/manifest-import-history.html
@@ -11,7 +11,7 @@
           <i ng-class="status.status == 'FAILURE' ? 'fa fa-warning' : 'fa fa-check'" />
           {{ status.statusMessage }}
         </td>
-        <td>{{ status.created | date:"short" }}</td>
+        <td><short-date-time date="status.created" /></td>
     </tr>
   </tbody>
 </table>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/views/subscription-start-date.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/views/subscription-start-date.html
index fa34e8ce5fa..b6db41c723d 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/views/subscription-start-date.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/views/subscription-start-date.html
@@ -1,2 +1,2 @@
 
-{{ subscription.start_date | date:"shortDate" }}{{ checkFutureDate(subscription.start_date) }}
+<short-date-time date="subscription.start_date" />{{ checkFutureDate(subscription.start_date) }}
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/views/subscriptions.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/views/subscriptions.html
index b2dcea7fc97..41f3ab3b71a 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/views/subscriptions.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/subscriptions/views/subscriptions.html
@@ -51,7 +51,7 @@ <h2 translate>Subscriptions</h2>
           </td>
           <td bst-table-cell><div subscription-type="subscription"></div></td>
           <td bst-table-cell><div subscription-start-date="subscription"></div></td>
-          <td bst-table-cell>{{ subscription.end_date | date:"shortDate" }}</td>
+          <td bst-table-cell><short-date-time date="subscription.end_date" /></td>
           <td bst-table-cell>{{ subscription.support_level }}</td>
           <td bst-table-cell>{{ subscription.contract_number }}</td>
           <td bst-table-cell>{{ subscription.account_number }}</td>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/sync-plans/details/views/sync-plan-info.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/sync-plans/details/views/sync-plan-info.html
index d436c42d272..dfb105daa3c 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/sync-plans/details/views/sync-plan-info.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/sync-plans/details/views/sync-plan-info.html
@@ -42,7 +42,7 @@ <h4 translate>Basic Information</h4>
       </dd>
 
       <dt translate>Next Sync</dt>
-      <dd>{{ syncPlan.next_sync | date:'medium' }}</dd>
+      <dd><long-date-time date="syncPlan.next_sync" /></dd>
 
       <dt translate>Recurring Logic</dt>
       <dd>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/sync-plans/views/sync-plans.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/sync-plans/views/sync-plans.html
index a0f7e1c23e8..ee35ff62480 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/sync-plans/views/sync-plans.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/sync-plans/views/sync-plans.html
@@ -43,10 +43,10 @@ <h2 translate>Sync Plans</h2>
             </a>
           </td>
           <td bst-table-cell>{{ syncPlan.description }}</td>
-          <td bst-table-cell>{{ syncPlan.sync_date | date:'medium' }}</td>
+          <td bst-table-cell><long-date-time date="syncPlan.sync_date" /></td>
           <td bst-table-cell>{{ syncPlan.enabled }}</td>
           <td bst-table-cell>{{ syncPlan.interval | translate | capitalize }}</td>
-          <td bst-table-cell>{{ syncPlan.next_sync | date:'medium' }}</td>
+          <td bst-table-cell><long-date-time date="syncPlan.next_sync" /></td>
         </tr>
       </tbody>
     </table>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/task-details.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/task-details.html
index 2ca84cdadc1..19d697485f6 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/task-details.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/task-details.html
@@ -8,10 +8,10 @@ <h4 translate>Task Details</h4>
   <dd>{{ task.username }}</dd>
 
   <dt translate>Started At</dt>
-  <dd>{{ task.started_at | date:"short"  }}</dd>
+  <dd><short-date-time date="task.started_at" /></dd>
 
   <dt translate>Finished At</dt>
-  <dd>{{ task.ended_at | date:"short"  }}</dd>
+  <dd><short-date-time date="task.ended_at" /></dd>
 
   <dt translate>Parameters</dt>
   <dd ng-switch="isArray(task.humanized.input)">
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/tasks-table.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/tasks-table.html
index 2991f47377c..4f83a198f9f 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/tasks-table.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/tasks-table.html
@@ -32,7 +32,7 @@
             </a>
           </td>
           <td bst-table-cell>{{ task.username }}</td>
-          <td bst-table-cell>{{ task.started_at | date:"short" }}</td>
+          <td bst-table-cell><short-date-time date="task.started_at" /></td>
         </tr>
       </tbody>
     </table>
diff --git a/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/user-tasks-table.html b/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/user-tasks-table.html
index 63f06a3892f..b49dabe0a74 100644
--- a/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/user-tasks-table.html
+++ b/engines/bastion_katello/app/assets/javascripts/bastion_katello/tasks/views/user-tasks-table.html
@@ -22,7 +22,7 @@
               {{ task.humanized.input | taskInputShort | taskInputCompile }}
             </a>
           </td>
-          <td bst-table-cell>{{ task.started_at | date:"short" }}</td>
+          <td bst-table-cell><short-date-time date="task.started_at" /></td>
         </tr>
       </tbody>
     </table>
diff --git a/engines/bastion_katello/lib/bastion_katello/engine.rb b/engines/bastion_katello/lib/bastion_katello/engine.rb
index e4e297762d3..59e6cbfab16 100644
--- a/engines/bastion_katello/lib/bastion_katello/engine.rb
+++ b/engines/bastion_katello/lib/bastion_katello/engine.rb
@@ -14,7 +14,12 @@ class Engine < ::Rails::Engine
 
       Bastion.register_plugin(
         :name => 'bastion_katello',
-        :javascript => 'bastion_katello/bastion_katello',
+        :javascript => proc do
+          [
+            javascript_include_tag(*webpack_asset_paths('katello_common', :extension => 'js'), "data-turbolinks-track" => true),
+            javascript_include_tag('bastion_katello/bastion_katello')
+          ]
+        end,
         :stylesheet => 'bastion_katello/bastion_katello',
         :pages => %w(
           activation_keys
diff --git a/package.json b/package.json
index b6337682c59..92374172d31 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,8 @@
     "lodash": "^4.17.5",
     "patternfly": "^3.41.1",
     "patternfly-react": "^2.5.1",
+    "angular": "1.5.5",
+    "ngreact": "^0.5.0",
     "prop-types": "^15.6.0",
     "query-string": "^6.1.0",
     "react": "^16.4.0",
diff --git a/webpack/common_index.js b/webpack/common_index.js
new file mode 100644
index 00000000000..851f3e628ce
--- /dev/null
+++ b/webpack/common_index.js
@@ -0,0 +1,6 @@
+/* eslint import/no-unresolved: [2, { ignore: [foremanReact/*] }] */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+
+require('ngreact');