diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 34532f70..d780648c 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -12,6 +12,8 @@
 //
 //= require jquery2
 //= require jquery-ui
+//= require dataTables/jquery.dataTables
+//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
 //= require bootstrap-sprockets
 //= require turbolinks
 //= require_self
diff --git a/app/assets/javascripts/landing.js b/app/assets/javascripts/landing.js
index 1e9e48e2..9ebfb1cd 100644
--- a/app/assets/javascripts/landing.js
+++ b/app/assets/javascripts/landing.js
@@ -1,4 +1,6 @@
 (function() {
+  var recordingsTable = null;
+
   var waitForModerator = function(url) {
     $.get(url + "/wait", function(html) {
       $(".center-panel-wrapper").html(html);
@@ -72,8 +74,103 @@
       window.location.hostname +
       meetingURL.data('path');
     meetingURL.val(link);
+
+    // initialize recordings datatable
+    recordingsTable = $('#recordings').dataTable({
+      data: [],
+      rowId: 'id',
+      paging: false,
+      searching: false,
+      info: false,
+      ordering: false,
+      language: {
+        emptyTable: "Past recordings are shown here."
+      },
+      columns: [
+        { title: "Date Recorded", data: "start_time" },
+        { title: "Duration", data: "duration" },
+        { title: "Views", data: "playbacks" },
+        { title: "Actions", data: "id" }
+      ],
+      columnDefs: [
+        {
+          targets: 2,
+          render: function(data, type, row) {
+            if (type === 'display') {
+              var str = "";
+              for(let i in data) {
+                str += '<a href="'+data[i].url+'">'+data[i].type+'</a> ';
+              }
+              return str;
+            }
+            return data;
+          }
+        },
+        {
+          targets: -1,
+          render: function(data, type, row) {
+            if (type === 'display') {
+              var roomName = window.location.pathname.split('/').pop();
+              var published = row.published;
+              var eye = (published) ? 'eye' : 'eye-slash'
+              return '<button type="button" class="btn btn-default recording-update" data-id="'+data+'" data-room="'+roomName+'" data-published="'+published+'">' +
+                '<i class="fa fa-'+eye+'" aria-hidden="true"></i></button> ' +
+                '<button type="button" class="btn btn-default recording-delete" data-id="'+data+'" data-room="'+roomName+'">' +
+                '<i class="fa fa-trash-o" aria-hidden="true"></i></button>';
+            }
+            return data;
+          }
+        }
+      ]
+    });
+
+    $('#recordings').on('click', '.recording-update', function(event) {
+      var room = $(this).data('room');
+      var id = $(this).data('id');
+      var published = $(this).data('published');
+      $.ajax({
+        method: 'PATCH',
+        url: '/rooms/'+room+'/recordings/'+id,
+        data: {published: (!published).toString()}
+      }).done(function(data) {
+        $(this).prop("disabled", true);
+      });
+    });
+
+    $('#recordings').on('click', '.recording-delete', function(event) {
+      var room = $(this).data('room');
+      var id = $(this).data('id');
+      $.ajax({
+        method: 'DELETE',
+        url: '/rooms/'+room+'/recordings/'+id
+      }).done(function() {
+        $('tr[id="'+id+'"]').remove();
+      });
+    });
+
+    refreshRecordings();
   };
 
+  var refreshRecordings = function() {
+    if (!recordingsTable) {
+      return;
+    }
+    table = recordingsTable.api();
+    $.get("/rooms/"+window.location.pathname.split('/').pop()+"/recordings", function(data) {
+      var i;
+      for (i = 0; i < data.recordings.length; i++) {
+        var totalMinutes = Math.round((new Date(data.recordings[i].end_time) - new Date(data.recordings[i].start_time)) / 1000 / 60);
+        data.recordings[i].duration = totalMinutes;
+
+        data.recordings[i].start_time = new Date(data.recordings[i].start_time)
+          .toLocaleString([], {month: 'long', day: 'numeric', year: 'numeric', hour12: 'true', hour: '2-digit', minute: '2-digit'});
+      }
+      table.clear();
+      table.rows.add(data.recordings);
+      table.columns.adjust().draw();
+    });
+  }
+
   $(document).on("turbolinks:load", function() {
     init();
     if ($("body[data-controller=landing]").get(0)) {
diff --git a/app/assets/javascripts/shared.js b/app/assets/javascripts/shared.js
index edf84fc9..a1cc6c17 100644
--- a/app/assets/javascripts/shared.js
+++ b/app/assets/javascripts/shared.js
@@ -1,3 +1,9 @@
+$.ajaxSetup({
+  headers: {
+    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+  }
+});
+
 var meetingInstance = null;
 class Meeting {
   constructor(url, name) {
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 6f2b6eff..ca8885fa 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -11,7 +11,7 @@
  * It is generally better to create a new file per style scope.
  *
  *= require jquery-ui
- *= require dataTables/jquery.dataTables
+ *= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
  *= require_tree .
  *= require_self
  */
diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/landing.scss
index f33d6f8d..e2d46925 100644
--- a/app/assets/stylesheets/landing.scss
+++ b/app/assets/stylesheets/landing.scss
@@ -1,3 +1,9 @@
 // Place all the styles related to the landing controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+.rooms {
+  .table-wrapper {
+    padding: 40px 50px 10px 50px;
+  }
+}
diff --git a/app/controllers/bbb_controller.rb b/app/controllers/bbb_controller.rb
index abb5c037..bb3cb7be 100644
--- a/app/controllers/bbb_controller.rb
+++ b/app/controllers/bbb_controller.rb
@@ -49,14 +49,13 @@ class BbbController < ApplicationController
   # PATCH /rooms/:id/recordings/:record_id
   def update_recordings
     bbb_res = helpers.bbb_update_recordings(params[:record_id], params[:published] == 'true')
-    render_bbb_response bbb_res, bbb_res[:recordings]
+    render_bbb_response bbb_res
   end
 
   # DELETE /rooms/:id/recordings/:record_id
   def delete_recordings
-    byebug
     bbb_res = helpers.bbb_delete_recordings(params[:record_id])
-    render_bbb_response bbb_res, bbb_res[:recordings]
+    render_bbb_response bbb_res
   end
 
   private
@@ -69,7 +68,7 @@ class BbbController < ApplicationController
       render head(:unauthorized) && return
     end
 
-    recordings = helpers.bbb_get_recordings(params[:record_id])[:recordings]
+    recordings = helpers.bbb_get_recordings(params[:id])[:recordings]
     recordings.each do |recording|
       if recording[:recordID] == params[:record_id]
         return true
@@ -78,7 +77,7 @@ class BbbController < ApplicationController
     render head(:not_found) && return
   end
 
-  def render_bbb_response(bbb_res, response)
+  def render_bbb_response(bbb_res, response={})
     @messageKey = bbb_res[:messageKey]
     @message = bbb_res[:message]
     @status = bbb_res[:status]
diff --git a/app/views/landing/meetings.html.erb b/app/views/landing/meetings.html.erb
index 9bef80de..271c96d9 100644
--- a/app/views/landing/meetings.html.erb
+++ b/app/views/landing/meetings.html.erb
@@ -15,7 +15,7 @@
   </div>
 <% end %>
 
-<div class="page-wrapper meeting">
+<div class="page-wrapper meetings">
   <div class='container-fluid'>
 
   <%= render 'shared/title', title: 'Start A New Session' %>
diff --git a/app/views/landing/rooms.html.erb b/app/views/landing/rooms.html.erb
index 28e5ce9d..810489a4 100644
--- a/app/views/landing/rooms.html.erb
+++ b/app/views/landing/rooms.html.erb
@@ -16,7 +16,7 @@
   </div>
 <% end %>
 
-<div class="page-wrapper room">
+<div class="page-wrapper rooms">
   <div class="container-fluid">
 
     <%= render 'shared/title', title: page_title %>
@@ -34,7 +34,9 @@
       <% end %>
     </div>
 
-    <table id="recordings" class="table table-striped table-bordered dt-responsive" width="100%"></table>
-
+    <div class="table-wrapper">
+      <h3>Past Recordings</h3>
+      <table id="recordings" class="table" width="100%"></table>
+    </div>
   </div>
 </div>