diff --git a/dashboard-ui/gamedetail.html b/dashboard-ui/gamedetail.html
new file mode 100644
index 0000000000..1483aec01b
--- /dev/null
+++ b/dashboard-ui/gamedetail.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dashboard-ui/games.html b/dashboard-ui/games.html
new file mode 100644
index 0000000000..7b6a860697
--- /dev/null
+++ b/dashboard-ui/games.html
@@ -0,0 +1,116 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name |
+ Game System |
+ Release Year |
+ Genre |
+ Studio |
+ Rating |
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dashboard-ui/gamesrecommended.html b/dashboard-ui/gamesrecommended.html
new file mode 100644
index 0000000000..7893d3c968
--- /dev/null
+++ b/dashboard-ui/gamesrecommended.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dashboard-ui/gamesystem.html b/dashboard-ui/gamesystem.html
new file mode 100644
index 0000000000..ec17913fb9
--- /dev/null
+++ b/dashboard-ui/gamesystem.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dashboard-ui/scripts/gamedetailpage.js b/dashboard-ui/scripts/gamedetailpage.js
new file mode 100644
index 0000000000..0736e6e86a
--- /dev/null
+++ b/dashboard-ui/scripts/gamedetailpage.js
@@ -0,0 +1,254 @@
+
+(function ($, document, LibraryBrowser, window) {
+
+ var currentItem;
+
+ function reload(page) {
+
+ var id = getParameterByName('id');
+
+ Dashboard.showLoadingMsg();
+
+ ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
+
+ currentItem = item;
+
+ var name = item.Name;
+
+ if (item.IndexNumber != null) {
+ name = item.IndexNumber + " - " + name;
+ }
+ if (item.ParentIndexNumber != null) {
+ name = item.ParentIndexNumber + "." + name;
+ }
+
+ $('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
+
+ Dashboard.setPageTitle(name);
+
+ $('#itemName', page).html(name);
+
+ setInitialCollapsibleState(page, item);
+ renderDetails(page, item);
+
+ Dashboard.hideLoadingMsg();
+ });
+ }
+
+ function setInitialCollapsibleState(page, item) {
+
+ if (!item.LocalTrailerCount || item.LocalTrailerCount == 0) {
+ $('#trailersCollapsible', page).hide();
+ } else {
+ $('#trailersCollapsible', page).show();
+ }
+ }
+
+ function renderDetails(page, item) {
+
+ if (item.Taglines && item.Taglines.length) {
+ $('#itemTagline', page).html(item.Taglines[0]).show();
+ } else {
+ $('#itemTagline', page).hide();
+ }
+
+ if (item.Overview || item.OverviewHtml) {
+ var overview = item.OverviewHtml || item.Overview;
+
+ $('#itemOverview', page).html(overview).show();
+ $('#itemOverview a').each(function () {
+ $(this).attr("target", "_blank");
+ });
+ } else {
+ $('#itemOverview', page).hide();
+ }
+
+ if (item.CommunityRating) {
+ $('#itemCommunityRating', page).html(LibraryBrowser.getStarRatingHtml(item)).show().attr('title', item.CommunityRating);
+ } else {
+ $('#itemCommunityRating', page).hide();
+ }
+
+ LibraryBrowser.renderBudget($('#itemBudget', page), item);
+
+ $('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
+
+ LibraryBrowser.renderGenres($('#itemGenres', page), item);
+ LibraryBrowser.renderStudios($('#itemStudios', page), item);
+ renderUserDataIcons(page, item);
+ LibraryBrowser.renderLinks($('#itemLinks', page), item);
+ }
+
+ function renderUserDataIcons(page, item) {
+ $('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
+ }
+
+ function renderGallery(page, item) {
+
+ var imageTags = item.ImageTags || {};
+ var html = '';
+
+ if (imageTags.Logo) {
+
+ html += createGalleryImage(item.Id, "Logo", item.ImageTags.Logo);
+ }
+ if (imageTags.Thumb) {
+
+ html += createGalleryImage(item.Id, "Thumb", item.ImageTags.Thumb);
+ }
+ if (imageTags.Art) {
+
+ html += createGalleryImage(item.Id, "Art", item.ImageTags.Art);
+
+ }
+ if (imageTags.Menu) {
+
+ html += createGalleryImage(item.Id, "Menu", item.ImageTags.Menu);
+
+ }
+ if (imageTags.Disc) {
+
+ html += createGalleryImage(item.Id, "Disc", item.ImageTags.Disc);
+ }
+ if (imageTags.Box) {
+
+ html += createGalleryImage(item.Id, "Box", item.ImageTags.Box);
+ }
+
+ if (item.BackdropImageTags) {
+
+ for (var i = 0, length = item.BackdropImageTags.length; i < length; i++) {
+ html += createGalleryImage(item.Id, "Backdrop", item.BackdropImageTags[0], i);
+ }
+
+ }
+
+ $('#galleryContent', page).html(html).trigger('create');
+ }
+
+ function createGalleryImage(itemId, type, tag, index) {
+
+ var downloadWidth = 400;
+ var lightboxWidth = 800;
+ var html = '';
+
+ if (typeof (index) == "undefined") index = 0;
+
+ html += '