diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html
index e530c09ace..0577ab05f3 100644
--- a/dashboard-ui/movies.html
+++ b/dashboard-ui/movies.html
@@ -54,14 +54,20 @@
         </div>
     </div>
     <div class="pageTabContent ehsContent" id="trailersTab" data-index="2">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+        </div>
+
         <div class="alphaPicker alphabetPicker vertical">
         </div>
-        <div class="viewSettings">
-            <div class="listTopPaging">
-            </div>
+
+        <div class="itemsContainer itemsContainerWithAlphaPicker">
+        </div>
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
         </div>
-        <div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
-        <p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
     </div>
     <div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .25em;">
diff --git a/dashboard-ui/scripts/movietrailers.js b/dashboard-ui/scripts/movietrailers.js
index 586111da79..72e999e495 100644
--- a/dashboard-ui/scripts/movietrailers.js
+++ b/dashboard-ui/scripts/movietrailers.js
@@ -1,103 +1,229 @@
-define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
 
-    var data = {};
+    return function (view, params, tabContent) {
 
-    function getQuery(context) {
+        var self = this;
+        var pageSize = libraryBrowser.getDefaultPageSize();
 
-        var key = getSavedQueryKey(context);
-        var pageData = data[key];
+        var data = {};
 
-        if (!pageData) {
-            pageData = data[key] = {
-                query: {
-                    SortBy: "SortName",
-                    SortOrder: "Ascending",
-                    IncludeItemTypes: "Trailer",
-                    Recursive: true,
-                    Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,SyncInfo",
-                    ImageTypeLimit: 1,
-                    EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
-                    StartIndex: 0,
-                    Limit: LibraryBrowser.getDefaultPageSize()
+        function getPageData(context) {
+            var key = getSavedQueryKey(context);
+            var pageData = data[key];
+
+            if (!pageData) {
+                pageData = data[key] = {
+                    query: {
+                        SortBy: "SortName",
+                        SortOrder: "Ascending",
+                        IncludeItemTypes: "Trailer",
+                        Recursive: true,
+                        Fields: "PrimaryImageAspectRatio,MediaSourceCount,SortName,SyncInfo",
+                        ImageTypeLimit: 1,
+                        EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
+                        StartIndex: 0,
+                        Limit: pageSize
+                    },
+                    view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster')
+                };
+
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
+            }
+            return pageData;
+        }
+
+        function getQuery(context) {
+
+            return getPageData(context).query;
+        }
+
+        function getSavedQueryKey(context) {
+
+            if (!context.savedQueryKey) {
+                context.savedQueryKey = libraryBrowser.getSavedQueryKey('trailers');
+            }
+            return context.savedQueryKey;
+        }
+
+        function reloadItems(page) {
+
+            Dashboard.showLoadingMsg();
+
+            var query = getQuery(page);
+
+            ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
+
+                // Scroll back up so they can see the results from the beginning
+                window.scrollTo(0, 0);
+
+                updateFilterControls(page);
+
+                var pagingHtml = LibraryBrowser.getQueryPagingHtml({
+                    startIndex: query.StartIndex,
+                    limit: query.Limit,
+                    totalRecordCount: result.TotalRecordCount,
+                    showLimit: false,
+                    updatePageSizeSetting: false,
+                    addLayoutButton: false,
+                    sortButton: false,
+                    filterButton: false
+                });
+
+                var html;
+                var viewStyle = self.getCurrentViewStyle();
+
+                if (viewStyle == "Thumb") {
+
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "backdrop",
+                        preferThumb: true,
+                        context: 'movies',
+                        lazy: true,
+                        overlayPlayButton: true
+                    });
                 }
-            };
+                else if (viewStyle == "ThumbCard") {
 
-            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "backdrop",
+                        preferThumb: true,
+                        context: 'movies',
+                        lazy: true,
+                        cardLayout: true,
+                        showTitle: true,
+                        showYear: true
+                    });
+                }
+                else if (viewStyle == "Banner") {
+
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "banner",
+                        preferBanner: true,
+                        context: 'movies',
+                        lazy: true
+                    });
+                }
+                else if (viewStyle == "List") {
+
+                    html = libraryBrowser.getListViewHtml({
+                        items: result.Items,
+                        context: 'movies',
+                        sortBy: query.SortBy
+                    });
+                }
+                else if (viewStyle == "PosterCard") {
+
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "portrait",
+                        context: 'movies',
+                        showTitle: true,
+                        showYear: true,
+                        lazy: true,
+                        cardLayout: true
+                    });
+                }
+                else {
+
+                    // Poster
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "portrait",
+                        context: 'movies',
+                        centerText: true,
+                        lazy: true,
+                        overlayPlayButton: true
+                    });
+                }
+
+                var i, length;
+                var elems = tabContent.querySelectorAll('.paging');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].innerHTML = pagingHtml;
+                }
+
+                function onNextPageClick() {
+                    query.StartIndex += query.Limit;
+                    reloadItems(tabContent);
+                }
+
+                function onPreviousPageClick() {
+                    query.StartIndex -= query.Limit;
+                    reloadItems(tabContent);
+                }
+
+                elems = tabContent.querySelectorAll('.btnNextPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onNextPageClick);
+                }
+
+                elems = tabContent.querySelectorAll('.btnPreviousPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onPreviousPageClick);
+                }
+
+                if (!items.length) {
+                    html = '<p style="text-align:center;">' + Globalize.translate('MessageNoTrailersFound') + '</p>';
+                }
+
+                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                itemsContainer.innerHTML = html;
+                imageLoader.lazyChildren(itemsContainer);
+
+                libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
+
+                Dashboard.hideLoadingMsg();
+            });
         }
-        return pageData.query;
-    }
 
-    function getSavedQueryKey(context) {
+        self.showFilterMenu = function () {
 
-        if (!context.savedQueryKey) {
-            context.savedQueryKey = LibraryBrowser.getSavedQueryKey('trailers');
+            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+
+                var filterDialog = new filterDialogFactory({
+                    query: getQuery(tabContent)
+                });
+
+                Events.on(filterDialog, 'filterchange', function () {
+                    getQuery(tabContent).StartIndex = 0;
+                    reloadItems(tabContent);
+                });
+
+                filterDialog.show();
+            });
         }
-        return context.savedQueryKey;
-    }
 
-    function reloadItems(page) {
+        function updateFilterControls(tabContent) {
 
-        Dashboard.showLoadingMsg();
+            var query = getQuery(tabContent);
+            self.alphaPicker.value(query.NameStartsWithOrGreater);
+        }
 
-        var query = getQuery(page);
-        var userId = Dashboard.getCurrentUserId();
+        function initPage(tabContent) {
 
-        ApiClient.getItems(userId, query).then(function (result) {
-
-            // Scroll back up so they can see the results from the beginning
-            window.scrollTo(0, 0);
-
-            if (result.Items.length) {
-                $('.noItemsMessage', page).hide();
-            }
-            else {
-                $('.noItemsMessage', page).show();
-            }
-
-            var html = '';
-            var pagingHtml = LibraryBrowser.getQueryPagingHtml({
-                startIndex: query.StartIndex,
-                limit: query.Limit,
-                totalRecordCount: result.TotalRecordCount,
-                sortButton: true,
-                showLimit: false,
-                updatePageSizeSetting: false,
-                filterButton: true
+            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+                var newValue = e.detail.value;
+                var query = getQuery(tabContent);
+                query.NameStartsWithOrGreater = newValue;
+                query.StartIndex = 0;
+                reloadItems(tabContent);
             });
 
-            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
-
-            updateFilterControls(page);
-
-            html = LibraryBrowser.getPosterViewHtml({
-                items: result.Items,
-                shape: "portrait",
-                lazy: true,
-                showDetailsMenu: true,
-                overlayPlayButton: true
+            self.alphaPicker = new alphaPicker({
+                element: alphaPickerElement,
+                valueChangeEvent: 'click'
             });
 
-            var elem = page.querySelector('.itemsContainer');
-            elem.innerHTML = html + pagingHtml;
-            ImageLoader.lazyChildren(elem);
-
-            $('.btnNextPage', page).on('click', function () {
-                query.StartIndex += query.Limit;
-                reloadItems(page);
+            tabContent.querySelector('.btnFilter').addEventListener('click', function () {
+                self.showFilterMenu();
             });
 
-            $('.btnPreviousPage', page).on('click', function () {
-                query.StartIndex -= query.Limit;
-                reloadItems(page);
-            });
-
-            $('.btnFilter', page).on('click', function () {
-                showFilterMenu(page);
-            });
-
-            // On callback make sure to set StartIndex = 0
-            $('.btnSort', page).on('click', function () {
-                LibraryBrowser.showSortMenu({
+            tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
+                libraryBrowser.showSortMenu({
                     items: [{
                         name: Globalize.translate('OptionNameSort'),
                         id: 'SortName'
@@ -127,78 +253,28 @@
                         id: 'PremiereDate,SortName'
                     }],
                     callback: function () {
-                        reloadItems(page);
+                        getQuery(tabContent).StartIndex = 0;
+                        reloadItems(tabContent);
                     },
-                    query: query
+                    query: getQuery(tabContent),
+                    button: e.target
                 });
             });
+        }
 
-            LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
-
-            Dashboard.hideLoadingMsg();
-        });
-    }
-
-    function showFilterMenu(page) {
-
-        require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
-
-            var filterDialog = new filterDialogFactory({
-                query: getQuery(page)
-            });
-
-            Events.on(filterDialog, 'filterchange', function () {
-                reloadItems(page);
-            });
-
-            filterDialog.show();
-        });
-    }
-
-    function updateFilterControls(tabContent) {
-
-        var query = getQuery(tabContent);
-
-        self.alphaPicker.value(query.NameStartsWithOrGreater);
-    }
-
-    function initPage(page, tabContent) {
-
-        var alphaPickerElement = tabContent.querySelector('.alphaPicker');
-        alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-            var newValue = e.detail.value;
-            var query = getQuery(tabContent);
-            query.NameStartsWithOrGreater = newValue;
-            query.StartIndex = 0;
-            reloadItems(tabContent);
-        });
-
-        self.alphaPicker = new alphaPicker({
-            element: alphaPickerElement,
-            valueChangeEvent: 'click'
-        });
-
-        tabContent.querySelector('.itemsContainer').addEventListener('needsrefresh', function () {
-
-            reloadItems(tabContent);
-
-        });
-    }
-
-    return function (view, params, tabContent) {
-
-        var self = this;
-
-        self.initTab = function () {
-
-            initPage(view, tabContent);
+        self.getCurrentViewStyle = function () {
+            return getPageData(tabContent).view;
         };
 
+        initPage(tabContent);
+
         self.renderTab = function () {
 
             reloadItems(tabContent);
             updateFilterControls(tabContent);
         };
-    };
 
+        self.destroy = function () {
+        };
+    };
 });
\ No newline at end of file