diff --git a/ApiClient.js b/ApiClient.js
index e260a0a050..18c0079626 100644
--- a/ApiClient.js
+++ b/ApiClient.js
@@ -445,6 +445,17 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
             });
         };
 
+        self.getLiveTvRecordingGroups = function (options) {
+
+            var url = self.getUrl("LiveTv/Recordings/Groups", options || {});
+
+            return self.ajax({
+                type: "GET",
+                url: url,
+                dataType: "json"
+            });
+        };
+
         self.getLiveTvRecording = function (id, userId) {
 
             if (!id) {
diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css
index 4229fafcf5..536b50855c 100644
--- a/dashboard-ui/css/mediaplayer.css
+++ b/dashboard-ui/css/mediaplayer.css
@@ -1,6 +1,6 @@
 /* Now playing bar */
 .nowPlayingBar {
-    padding: 6px 0 12px 0;
+    padding: 6px 0 15px 0;
     border-top: 2px solid green;
 }
 
diff --git a/dashboard-ui/css/posteritem.css b/dashboard-ui/css/posteritem.css
index 1f1596ce15..3d1bbd5b92 100644
--- a/dashboard-ui/css/posteritem.css
+++ b/dashboard-ui/css/posteritem.css
@@ -62,9 +62,11 @@
     overflow: hidden;
     text-wrap: none;
     white-space: nowrap;
-    padding: 5px 5px 4px;
+    padding: 5px 4px 4px;
     background-color: #222;
     text-shadow: none;
+    font-size: 14px;
+    font-weight: 300;
 }
 
 .posterItemTextOverlay {
diff --git a/dashboard-ui/livetvrecordings.html b/dashboard-ui/livetvrecordings.html
index c276f4ee10..5e61d0ebec 100644
--- a/dashboard-ui/livetvrecordings.html
+++ b/dashboard-ui/livetvrecordings.html
@@ -13,27 +13,9 @@
             <a href="livetvseriestimers.html">Series</a>
         </div>
         <div data-role="content">
-            <div class="itemsContainer">
-
-                <br />
-                <div class="detailTableContainer">
-                    <table id="table-column-toggle" class="detailTable">
-                        <thead>
-                            <tr>
-                                <th class="desktopColumn"></th>
-                                <th>Name</th>
-                                <th class="desktopColumn">Channel</th>
-                                <th>Date</th>
-                                <th>Start</th>
-                                <th class="tabletColumn">Length</th>
-                                <th class="tabletColumn">Status</th>
-                            </tr>
-                        </thead>
-
-                        <tbody>
-                        </tbody>
-                    </table>
-                </div>
+            <div style="max-width: 700px; margin: 0 auto;">
+                <h1 class="listHeader">Recording Groups</h1>
+                <div id="items"></div>
             </div>
         </div>
     </div>
diff --git a/dashboard-ui/livetvtimers.html b/dashboard-ui/livetvtimers.html
index fce746a6c5..c08e373e2d 100644
--- a/dashboard-ui/livetvtimers.html
+++ b/dashboard-ui/livetvtimers.html
@@ -13,8 +13,9 @@
             <a href="livetvseriestimers.html">Series</a>
         </div>
         <div data-role="content">
-            <br />
-            <div id="items" class="itemsContainer"></div>
+            <div style="max-width: 700px; margin: 0 auto;">
+                <div id="items"></div>
+            </div>
         </div>
     </div>
 </body>
diff --git a/dashboard-ui/scripts/livetvrecordings.js b/dashboard-ui/scripts/livetvrecordings.js
index cb8969031d..47e2ea5be5 100644
--- a/dashboard-ui/scripts/livetvrecordings.js
+++ b/dashboard-ui/scripts/livetvrecordings.js
@@ -18,32 +18,77 @@
 
         });
     }
+    
+    function loadRecordings(page, elem, groupId) {
 
-    function renderRecordings(page, recordings) {
+        var contentElem = $('.recordingList', elem).html('<div class="circle"></div><div class="circle1"></div>');
+
+        apiClient.getLiveTvRecordings({
+
+            userId: Dashboard.getCurrentUserId(),
+            groupId: groupId
+
+        }).done(function (result) {
+
+            renderRecordings(page, contentElem, result.Items);
+
+        });
+    }
+
+    function getRecordingGroupHtml(group) {
 
         var html = '';
 
+        html += '<div data-role="collapsible" class="recordingGroupCollapsible" data-recordinggroupid="' + group.Id + '" style="margin-top:1em" data-mini="true">';
+
+        html += '<h3>' + group.Name + '</h3>';
+
+        html += '<div class="recordingList">';
+        html += '</div>';
+
+        html += '</div>';
+
+        return html;
+    }
+
+    function renderRecordingGroups(page, groups) {
+
+        var html = '';
+
+        for (var i = 0, length = groups.length; i < length; i++) {
+
+            html += getRecordingGroupHtml(groups[i]);
+        }
+
+        var elem = $('#items', page).html(html).trigger('create');
+
+        $('.recordingGroupCollapsible', elem).on('collapsibleexpand.lazyload', function () {
+
+            $(this).off('collapsibleexpand.lazyload');
+
+            var groupId = this.getAttribute('data-recordinggroupid');
+
+            loadRecordings(page, this, groupId);
+        });
+
+        Dashboard.hideLoadingMsg();
+    }
+
+    function renderRecordings(page, elem, recordings) {
+
+        var html = '';
+
+        html += '<ul data-role="listview" data-split-icon="delete" data-inset="false">';
+
         for (var i = 0, length = recordings.length; i < length; i++) {
 
             var recording = recordings[i];
 
-            html += '<tr>';
+            html += '<li><a href="livetvrecording.html?id=' + recording.Id + '">';
 
-            html += '<td class="desktopColumn">';
-            html += '<button data-recordingid="' + recording.Id + '" class="btnDeleteRecording" type="button" data-icon="delete" data-inline="true" data-mini="true" data-iconpos="notext">Delete</button>';
-            html += '</td>';
-
-            html += '<td>';
-            html += '<a href="livetvrecording.html?id=' + recording.Id + '">';
-            html += recording.Name || '(blank)';
-            html += '</a>';
-            html += '</td>';
-
-            html += '<td class="desktopColumn">';
-            if (recording.ChannelId) {
-                html += '<a href="livetvchannel.html?id=' + recording.ChannelId + '">' + recording.ChannelName + '</a>';
-            }
-            html += '</td>';
+            html += '<h3>';
+            html += recording.EpisodeTitle || recording.Name;
+            html += '</h3>';
 
             var startDate = recording.StartDate;
 
@@ -55,22 +100,29 @@
 
             }
 
-            html += '<td>' + startDate.toLocaleDateString() + '</td>';
-
-            html += '<td>' + LiveTvHelpers.getDisplayTime(recording.StartDate) + '</td>';
-
             var minutes = recording.RunTimeTicks / 600000000;
 
             minutes = minutes || 1;
 
-            html += '<td class="tabletColumn">' + Math.round(minutes) + 'min</td>';
+            html += '<p>';
+            html += startDate.toLocaleDateString();
+            html += '&nbsp; &#8226; &nbsp;' + Math.round(minutes) + 'min';
+            html += '</p>';
 
-            html += '<td class="tabletColumn">' + (recording.Status || '') + '</td>';
+            if (recording.Status !== 'Completed') {
+                html += '<p class="ui-li-aside"><span style="color:red;">' + recording.StatusName + '</span></p>';
+            }
 
-            html += '</tr>';
+            html += '</a>';
+
+            html += '<a href="#" class="btnDeleteRecording" data-recordingid="' + recording.Id + '">Delete</a>';
+
+            html += '</li>';
         }
 
-        var elem = $('#table-column-toggle tbody', page).html(html).trigger('create');
+        html += '</ul>';
+
+        elem.html(html).trigger('create');
 
         $('.btnDeleteRecording', elem).on('click', function () {
 
@@ -86,9 +138,13 @@
 
         Dashboard.showLoadingMsg();
 
-        apiClient.getLiveTvRecordings().done(function (result) {
+        apiClient.getLiveTvRecordingGroups({
 
-            renderRecordings(page, result.Items);
+            userId: Dashboard.getCurrentUserId()
+
+        }).done(function (result) {
+
+            renderRecordingGroups(page, result.Items);
 
         });
     }
@@ -98,6 +154,12 @@
         var page = this;
 
         reload(page);
+
+    }).on('pagehide', "#liveTvRecordingsPage", function () {
+
+        var page = this;
+
+        $('.recordingGroupCollapsible', page).off('collapsibleexpand.lazyload');
     });
 
 })(jQuery, document, ApiClient);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/livetvseriestimers.js b/dashboard-ui/scripts/livetvseriestimers.js
index 7c569d6d69..11d60c5382 100644
--- a/dashboard-ui/scripts/livetvseriestimers.js
+++ b/dashboard-ui/scripts/livetvseriestimers.js
@@ -67,7 +67,7 @@
             html += '</li>';
         }
 
-        html += '</a></ul>';
+        html += '</ul>';
 
         $('#items', page).html(html).trigger('create');
 
diff --git a/packages.config b/packages.config
index 659c5db1e4..e36a72adfa 100644
--- a/packages.config
+++ b/packages.config
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
-  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.210" targetFramework="net45" />
+  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.212" targetFramework="net45" />
 </packages>
\ No newline at end of file