diff --git a/dashboard-ui/components/appfooter/appfooter.css b/dashboard-ui/components/appfooter/appfooter.css
new file mode 100644
index 000000000..145d58834
--- /dev/null
+++ b/dashboard-ui/components/appfooter/appfooter.css
@@ -0,0 +1,20 @@
+.appfooter {
+    background: #1c1c1c;
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    bottom: 0;
+}
+
+.appfooter-headroom {
+    transition: transform 180ms linear;
+}
+
+.appfooter--pinned {
+    transform: none;
+}
+
+.appfooter--unpinned {
+    transform: translateY(100%);
+}
\ No newline at end of file
diff --git a/dashboard-ui/components/appfooter/appfooter.js b/dashboard-ui/components/appfooter/appfooter.js
new file mode 100644
index 000000000..c2bdbd5d8
--- /dev/null
+++ b/dashboard-ui/components/appfooter/appfooter.js
@@ -0,0 +1,72 @@
+define(['css!./appfooter'], function () {
+
+    function render(options) {
+
+        var elem = document.createElement('div');
+
+        elem.classList.add('appfooter');
+
+        document.body.appendChild(elem);
+
+        return elem;
+    }
+
+    function initHeadRoom(instance, elem) {
+
+        require(["headroom"], function () {
+
+            // construct an instance of Headroom, passing the element
+            var headroom = new Headroom(elem, {
+                // or scroll tolerance per direction
+                tolerance: {
+                    down: 20,
+                    up: 0
+                },
+                classes: {
+                    pinned: 'appfooter--pinned',
+                    unpinned: 'appfooter--unpinned',
+                    top: 'appfooter--top',
+                    notTop: 'appfooter--not-top',
+                    initial: 'appfooter-headroom'
+                }
+            });
+            // initialise
+            headroom.init();
+
+            instance.headroom = headroom;
+        });
+    }
+
+    function dockedTabs(options) {
+
+        var self = this;
+
+        self.element = render(options);
+
+        self.add = function (elem) {
+            self.element.appendChild(elem);
+        };
+
+        self.insert = function (elem) {
+            if (typeof elem === 'string') {
+                self.element.insertAdjacentHTML('afterbegin', elem);
+            } else {
+                self.element.insertBefore(elem, self.element.firstChild);
+            }
+        };
+
+        initHeadRoom(self, self.element);
+    }
+
+    dockedTabs.prototype.destroy = function () {
+        var self = this;
+
+        if (self.headroom) {
+            self.headroom.destroy();
+        }
+
+        self.Element = null;
+    };
+
+    return dockedTabs;
+});
\ No newline at end of file
diff --git a/dashboard-ui/components/dockedtabs/dockedtabs.css b/dashboard-ui/components/dockedtabs/dockedtabs.css
index 1fc63186c..1c975aed3 100644
--- a/dashboard-ui/components/dockedtabs/dockedtabs.css
+++ b/dashboard-ui/components/dockedtabs/dockedtabs.css
@@ -1,32 +1,7 @@
-.dockedtabs {
-    height: 54px;
-    background: #212121;
-    position: fixed;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    display: flex;
-}
-
-.dockedtabs-bottom {
-    bottom: 0;
-}
-
-.dockedtabs-headroom {
-    transition: transform 180ms linear;
-}
-
-.dockedtabs--pinned {
-    transform: none;
-}
-
-.dockedtabs--unpinned {
-    transform: translateY(100%);
-}
-
-.dockedtabs-tabs {
+.dockedtabs-tabs {
     flex-grow: 1;
     display: flex;
+    padding: .5em 0;
 }
 
 .dockedtabs-tab-button {
diff --git a/dashboard-ui/components/dockedtabs/dockedtabs.js b/dashboard-ui/components/dockedtabs/dockedtabs.js
index f5cd853b2..7c5074b89 100644
--- a/dashboard-ui/components/dockedtabs/dockedtabs.js
+++ b/dashboard-ui/components/dockedtabs/dockedtabs.js
@@ -36,53 +36,21 @@
 
         elem.innerHTML = html;
 
-        document.body.appendChild(elem);
+        options.appFooter.add(elem);
 
         return elem;
     }
 
-    function initHeadRoom(instance, elem) {
-
-        require(["headroom"], function () {
-
-            // construct an instance of Headroom, passing the element
-            var headroom = new Headroom(elem, {
-                // or scroll tolerance per direction
-                tolerance: {
-                    down: 20,
-                    up: 0
-                },
-                classes: {
-                    pinned: 'dockedtabs--pinned',
-                    unpinned: 'dockedtabs--unpinned',
-                    top: 'dockedtabs--top',
-                    notTop: 'dockedtabs--not-top',
-                    initial: 'dockedtabs-headroom'
-                }
-            });
-            // initialise
-            headroom.init();
-
-            instance.headroom = headroom;
-        });
-    }
-
     function dockedTabs(options) {
 
         var self = this;
 
         self.element = render(options);
-
-        initHeadRoom(self, self.element);
     }
 
-    dockedTabs.prototype.destroy = function() {
+    dockedTabs.prototype.destroy = function () {
         var self = this;
 
-        if (self.headroom) {
-            self.headroom.destroy();
-        }
-
         self.Element = null;
     };
 
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index 43f607d68..4688e5f5e 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -33,9 +33,14 @@
                     <button is="emby-button" type="button" class="raised subdued hide btnCancelRecording"><i class="md-icon">delete</i><span>${ButtonCancelRecording}</span></button>
                     <button is="emby-button" type="button" class="raised subdued btnSync hide"><i class="md-icon">sync</i><span>${ButtonSync}</span></button>
                     <button is="emby-button" type="button" class="raised subdued btnMoreCommands hide notext"><i class="md-icon">more_vert</i></button>
-                    <button is="emby-button" type="button" class="fab mini subdued btnSyncLocal hide"><i class="md-icon">file_download</i></button>
                     <div class="detailUserDataIcons userDataIcons"></div>
                 </div>
+                <div class="syncLocalContainer hide" style="margin-top:1em; display: inline-flex; padding: 0 .5em;">
+                    <label class="checkboxContainer" style="margin:0;">
+                        <input type="checkbox" is="emby-checkbox" class="chkOffline" />
+                        <span>Make Available Offline</span>
+                    </label>
+                </div>
             </div>
         </div>
     </div>
@@ -52,9 +57,14 @@
             <button is="emby-button" type="button" class="raised subdued hide btnCancelRecording"><i class="md-icon">delete</i><span>${ButtonCancelRecording}</span></button>
             <button is="emby-button" type="button" class="raised subdued btnSync hide"><i class="md-icon">sync</i><span>${ButtonSync}</span></button>
             <button is="emby-button" type="button" class="raised subdued btnMoreCommands hide notext"><i class="md-icon">more_vert</i></button>
-            <button is="emby-button" type="button" class="fab mini subdued btnSyncLocal hide"><i class="md-icon">file_download</i></button>
             <div class="detailUserDataIcons userDataIcons"></div>
         </div>
+        <div class="syncLocalContainer hide" style="margin-top:1em; display: inline-flex; padding: 0 .5em;">
+            <label class="checkboxContainer" style="margin:0;">
+                <input type="checkbox" is="emby-checkbox" class="chkOffline" />
+                <span>Make Available Offline</span>
+            </label>
+        </div>
     </div>
     <div data-role="content" style="padding-top:0;clear:both;">
         <div class="detailPageContent">
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index 11c544575..be5a1304f 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -1,4 +1,4 @@
-define(['layoutManager', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'indicators', 'apphost', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom, indicators, appHost) {
+define(['layoutManager', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'indicators', 'apphost', 'scrollStyles', 'emby-itemscontainer', 'emby-checkbox'], function (layoutManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom, indicators, appHost) {
 
     var currentItem;
 
@@ -87,16 +87,10 @@
     function updateSyncStatus(page, item) {
 
         var i, length;
-        var elems = page.querySelectorAll('.btnSyncLocal');
+        var elems = page.querySelectorAll('.chkOffline');
         for (i = 0, length = elems.length; i < length; i++) {
 
-            if (item.SyncPercent == 100) {
-                elems[i].querySelector('i').innerHTML = 'offline_pin';
-                elems[i].classList.add('btnSyncComplete');
-            } else {
-                elems[i].querySelector('i').innerHTML = 'file_download';
-                elems[i].classList.remove('btnSyncComplete');
-            }
+            elems[i].checked = item.SyncPercent == 100;
         }
     }
 
@@ -169,16 +163,16 @@
 
             if (itemHelper.canSync(user, item)) {
                 if (appHost.supports('sync')) {
-                    hideAll(page, 'btnSyncLocal', true);
+                    hideAll(page, 'syncLocalContainer', true);
                     hideAll(page, 'btnSync');
                 } else {
-                    hideAll(page, 'btnSyncLocal');
+                    hideAll(page, 'syncLocalContainer');
                     hideAll(page, 'btnSync', true);
                 }
                 updateSyncStatus(page, item);
             } else {
                 hideAll(page, 'btnSync');
-                hideAll(page, 'btnSyncLocal');
+                hideAll(page, 'syncLocalContainer');
             }
 
             if (item.Type == 'Program' && item.TimerId) {
@@ -2060,6 +2054,19 @@
         });
     }
 
+    function onSyncLocalClick() {
+
+        if (this.checked) {
+            require(['syncDialog'], function (syncDialog) {
+                syncDialog.showMenu({
+                    items: [currentItem]
+                });
+            });
+        } else {
+
+        }
+    }
+
     return function (view, params) {
 
         function onPlayTrailerClick() {
@@ -2116,9 +2123,9 @@
             elems[i].addEventListener('click', onSyncClick);
         }
 
-        elems = view.querySelectorAll('.btnSyncLocal');
+        elems = view.querySelectorAll('.chkOffline');
         for (i = 0, length = elems.length; i < length; i++) {
-            elems[i].addEventListener('click', onSyncClick);
+            elems[i].addEventListener('change', onSyncLocalClick);
         }
 
         elems = view.querySelectorAll('.btnRecord,.btnFloatingRecord');
diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index b24afda04..720591519 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -666,7 +666,7 @@
                 }
 
                 viewMenuBarTabs.querySelector('is=["emby-tabs"]').selectedIndex(selectedIndex);
-               
+
                 LibraryMenu.tabType = type;
             });
         },
@@ -1105,7 +1105,12 @@
 
     setDrawerClass();
 
-    //require(['dockedtabs'], function (dockedtabs) {
-    //    new dockedtabs({});
+    //require(['appfooter'], function (appfooter) {
+    //    var footer = new appfooter({});
+    //    require(['dockedtabs'], function (dockedtabs) {
+    //        new dockedtabs({
+    //            appFooter: footer
+    //        });
+    //    });
     //});
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index d54bc28b9..1d4f3c3de 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1260,6 +1260,7 @@ var AppInfo = {};
 
         define("libjass", [bowerPath + "/libjass/libjass.min", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency);
 
+        define("appfooter", ["components/appfooter/appfooter"], returnFirstDependency);
         define("dockedtabs", ["components/dockedtabs/dockedtabs"], returnFirstDependency);
         define("directorybrowser", ["components/directorybrowser/directorybrowser"], returnFirstDependency);
         define("metadataEditor", [embyWebComponentsBowerPath + "/metadataeditor/metadataeditor"], returnFirstDependency);
diff --git a/dashboard-ui/serviceworker.js b/dashboard-ui/serviceworker.js
index 4c84b6b81..148397257 100644
--- a/dashboard-ui/serviceworker.js
+++ b/dashboard-ui/serviceworker.js
@@ -7,6 +7,8 @@ var staticFileBaseUrl = baseUrl + '/staticfiles';
 console.log('service worker location: ' + self.location);
 console.log('service worker base url: ' + baseUrl);
 
+var connectionManager;
+
 function getStaticFileList() {
 
     if (staticFileList) {
@@ -100,6 +102,13 @@ self.addEventListener('activate', function (event) {
 });
 
 function getApiClient(serverId) {
+
+    if (connectionManager) {
+        return Promise.resolve(connectionManager.getApiClient(serverId));
+    }
+
+    //importScripts('serviceworker-cache-polyfill.js');
+
     return Promise.reject();
 }