diff --git a/Gemfile b/Gemfile
index 9b584f9b..28799e49 100644
--- a/Gemfile
+++ b/Gemfile
@@ -61,5 +61,6 @@ gem 'bootstrap-social-rails', '~> 4.12'
 gem 'font-awesome-rails'
 gem 'jquery-ui-rails'
 gem 'jquery-datatables-rails', '~> 3.4.0'
+gem 'rails-timeago', '~> 2.0'
 
 gem 'http_accept_language'
diff --git a/Gemfile.lock b/Gemfile.lock
index ba66b8b8..0857cd9d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -152,6 +152,9 @@ GEM
       nokogiri (~> 1.6.0)
     rails-html-sanitizer (1.0.3)
       loofah (~> 2.0)
+    rails-timeago (2.15.0)
+      actionpack (>= 3.1)
+      activesupport (>= 3.1)
     railties (5.0.0.1)
       actionpack (= 5.0.0.1)
       activesupport (= 5.0.0.1)
@@ -224,6 +227,7 @@ DEPENDENCIES
   omniauth-twitter (= 1.2.1)
   puma (~> 3.0)
   rails (~> 5.0.0, >= 5.0.0.1)
+  rails-timeago (~> 2.0)
   sass-rails (~> 5.0)
   spring
   spring-watcher-listen (~> 2.0.0)
@@ -237,4 +241,4 @@ RUBY VERSION
    ruby 2.3.1p112
 
 BUNDLED WITH
-   1.13.5
+   1.13.6
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 3f386151..f087ae3b 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -18,6 +18,7 @@
 //= require jquery-ui
 //= require dataTables/jquery.dataTables
 //= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
+//= require rails-timeago-all
 //= require bootstrap-sprockets
 //= require turbolinks
 //= require_self
diff --git a/app/assets/javascripts/recordings.coffee b/app/assets/javascripts/recordings.coffee
index 1533685f..a4c69396 100644
--- a/app/assets/javascripts/recordings.coffee
+++ b/app/assets/javascripts/recordings.coffee
@@ -45,10 +45,13 @@ class @Recordings
           targets: 0,
           render: (data, type, row) ->
             if type == 'display'
-              return new Date(data)
+              date = new Date(data)
+              title = date
                 .toLocaleString($('html').attr('lang'),
                   {month: 'long', day: 'numeric', year: 'numeric',
                   hour12: 'true', hour: '2-digit', minute: '2-digit'})
+              timeago = '<time datetime="'+date.toISOString()+'" data-time-ago="'+date.toISOString()+'">'+date.toISOString()+'</time>'
+              return title+'<span class="timeago">('+timeago+')</span>'
             return data
         },
         {
@@ -194,7 +197,7 @@ class @Recordings
         btn.prop('disabled', false)
       )
 
-    this.table.on 'click', '.recording-delete', (event) ->
+    @getTable().on 'click', '.recording-delete', (event) ->
       btn = $(this)
       row = table_api.row($(this).closest('tr')).data()
       url = $('.meeting-url').val()
@@ -209,6 +212,9 @@ class @Recordings
         btn.prop('disabled', false)
       )
 
+    @getTable().on 'draw.dt', (event) ->
+      $('time[data-time-ago]').timeago();
+
   getTable: ->
     @table
 
diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/landing.scss
index 2b137c1a..06900393 100644
--- a/app/assets/stylesheets/landing.scss
+++ b/app/assets/stylesheets/landing.scss
@@ -37,16 +37,11 @@
       .dataTables_empty {
         text-align: center;
       }
-      .recording-update:hover > {
-        .default {
-          display: none;
-        }
-        .hover {
-          display: inline-block;
-        }
-      }
-      .fa.hover {
-        display: none;
+      .timeago {
+        margin-left: 5px;
+        font-size: 13px;
+        cursor: pointer;
+        color: #999;
       }
     }
   }