diff --git a/.DS_Store b/.DS_Store
index aea3758c7..474ee832f 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index 8413af8f8..d57a525c8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -130,6 +130,7 @@ output/*
#OS X metadata files
._*
+.DS_Store
_start
_temp_*/**/*
diff --git a/gulp/less.js b/gulp/less.js
index fecb67cb0..92d50a43e 100644
--- a/gulp/less.js
+++ b/gulp/less.js
@@ -27,6 +27,7 @@ gulp.task('less', function() {
paths.src.root + 'System/Logs/logs.less',
paths.src.root + 'System/Update/update.less',
paths.src.root + 'System/Info/info.less',
+ paths.src.root + 'Movies/movies.less',
];
diff --git a/src/.DS_Store b/src/.DS_Store
index f133d9381..cbd549c7f 100644
Binary files a/src/.DS_Store and b/src/.DS_Store differ
diff --git a/src/UI/.DS_Store b/src/UI/.DS_Store
index df70b98af..6cf6f2ffc 100644
Binary files a/src/UI/.DS_Store and b/src/UI/.DS_Store differ
diff --git a/src/UI/Movies/movies.less b/src/UI/Movies/movies.less
new file mode 100644
index 000000000..08fca5152
--- /dev/null
+++ b/src/UI/Movies/movies.less
@@ -0,0 +1,471 @@
+@import "../Content/Bootstrap/variables";
+@import "../Shared/Styles/card.less";
+@import "../Shared/Styles/clickable.less";
+@import "../Content/prefixer";
+
+.series-poster {
+ min-width: 56px;
+ max-width: 100%;
+}
+
+.edit-movie-modal, .delete-movie-modal {
+ overflow : visible;
+
+ .series-poster {
+ padding-left : 20px;
+ width : 168px;
+ }
+
+ .form-horizontal {
+ margin-top : 10px;
+ }
+
+ .twitter-typeahead {
+ .form-control[disabled] {
+ background-color: #ffffff;
+ }
+ }
+}
+
+.delete-movie-modal {
+ .path {
+ margin-left : 30px;
+ }
+
+ .delete-files-info {
+ margin-top : 10px;
+ display : none;
+ }
+}
+
+.movie-item {
+ padding-bottom : 30px;
+
+ :hover {
+ text-decoration : none;
+ }
+
+ h2 {
+ margin-top : 0px;
+ }
+
+ a {
+ color : #000000;
+ }
+}
+
+.movie-page-header {
+ .card(black);
+ .opacity(0.9);
+ background : #000000;
+ color : #ffffff;
+ padding : 30px 15px;
+ margin : 50px 10px;
+
+ .poster {
+ margin-top : 4px;
+ }
+
+ .header-text {
+ margin-top : 0px;
+ }
+}
+
+.movie-season {
+ .card;
+ .opacity(0.9);
+ margin : 30px 10px;
+ padding : 10px 25px;
+
+ .show-hide-episodes {
+ .clickable();
+ text-align : center;
+
+ i {
+ .clickable();
+ }
+ }
+}
+
+.series-posters {
+ list-style-type: none;
+
+ @media (max-width: @screen-xs-max) {
+ padding : 0px;
+ }
+
+ li {
+ display : inline-block;
+ vertical-align : top;
+ }
+
+ .series-posters-item {
+
+ .card;
+ .clickable;
+ margin-bottom : 20px;
+ height : 315px;
+
+ .center {
+ display : block;
+ margin-left : auto;
+ margin-right : auto;
+ text-align : center;
+
+ .progress {
+ text-align : left;
+ margin-top : 5px;
+ left : 0px;
+ width : 170px;
+
+ .progressbar-front-text, .progressbar-back-text {
+ width : 170px;
+ }
+ }
+ }
+
+ .labels {
+ display : inline-block;
+ .opacity(0.75);
+ width : 170px;
+
+ :hover {
+ cursor : default;
+ }
+
+ .label {
+ margin-top : 3px;
+ display : block;
+ }
+
+ .tooltip {
+ .opacity(1);
+ }
+ }
+
+ @media (max-width: @screen-xs-max) {
+ height : 235px;
+ margin : 5px;
+ padding : 6px 5px;
+
+ .center {
+ .progress {
+ width : 125px;
+
+ .progressbar-front-text, .progressbar-back-text {
+ width : 125px
+ }
+ }
+ }
+
+ .labels {
+ width: 125px;
+ }
+ }
+ }
+
+ .series-poster-container {
+ position : relative;
+ overflow : hidden;
+ display : inline-block;
+
+ .placeholder-image ~ .title {
+ opacity: 1.0;
+ }
+
+ .title {
+ position : absolute;
+ top : 25px;
+ color : #f5f5f5;
+ width : 100%;
+ font-size : 22px;
+ line-height: 24px;
+ opacity : 0.0;
+ font-weight: 100;
+ }
+
+ .ended-banner {
+ color : #eeeeee;
+ background-color : #b94a48;
+ .box-shadow(2px 2px 20px #888888);
+ -moz-transform-origin : 50% 50%;
+ -webkit-transform-origin : 50% 50%;
+ position : absolute;
+ width : 320px;
+ top : 200px;
+ left : -122px;
+ text-align : center;
+ .opacity(0.9);
+
+ .transform(rotate(45deg));
+ }
+
+ .movie-controls {
+ position : absolute;;
+ top : 0px;
+ overflow : hidden;
+ background-color : #eeeeee;
+ width : 100%;
+ text-align : right;
+ padding-right : 10px;
+ display : none;
+ .opacity(0.8);
+
+ i {
+ .clickable();
+ }
+ }
+
+ .hidden-title {
+ position : absolute;;
+ bottom : 0px;
+ overflow : hidden;
+ background-color : #eeeeee;
+ width : 100%;
+ text-align : center;
+ .opacity(0.8);
+ display : none;
+ }
+
+ .series-poster {
+ width : 168px;
+ height : 247px;
+ display : block;
+ font-size : 34px;
+ line-height : 34px;
+ }
+
+ @media (max-width: @screen-xs-max) {
+ .series-poster {
+ width : 120px;
+ height : 176px;
+ }
+
+ .ended-banner {
+ top : 145px;
+ left : -137px;
+ }
+ }
+ }
+}
+
+.movie-detail-overview {
+ margin-bottom : 50px;
+}
+
+.movie-season {
+
+ .episode-number-cell {
+ width : 40px;
+ white-space: nowrap;
+ }
+ .episode-air-date-cell {
+ width : 150px;
+ }
+
+ .episode-status-cell {
+ width : 100px;
+ }
+
+ .episode-title-cell {
+ cursor : pointer;
+ }
+}
+
+.episode-detail-modal {
+
+ .episode-info {
+ margin-bottom : 10px;
+ }
+
+ .episode-overview {
+ font-style : italic;
+ }
+
+ .episode-file-info {
+ margin-top : 30px;
+ font-size : 12px;
+ }
+
+ .episode-history-details-cell .popover {
+ max-width: 800px;
+ }
+
+ .hidden-movie-title {
+ display : none;
+ }
+}
+
+.season-grid {
+ .toggle-cell {
+ width : 28px;
+ text-align : center;
+ padding-left : 0px;
+ padding-right : 0px;
+ }
+
+ .toggle-cell {
+ i {
+ .clickable;
+ }
+ }
+}
+
+.season-actions {
+ width: 100px;
+}
+
+.season-actions, .movie-actions {
+
+ div {
+ display : inline-block
+ }
+
+ text-transform : none;
+
+ i {
+ .clickable();
+ font-size : 24px;
+ margin-left : 5px;
+ }
+}
+
+.movie-stats {
+ font-size : 11px;
+}
+
+.movie-legend {
+ padding-top : 5px;
+}
+
+.seasonpass-movie {
+ .card;
+ margin : 20px 0px;
+
+ .title {
+ font-weight : 300;
+ font-size : 24px;
+ line-height : 30px;
+ margin-left : 5px;
+ }
+
+ .season-select {
+ margin-bottom : 0px;
+ }
+
+ .expander {
+ .clickable;
+ line-height : 30px;
+ margin-left : 8px;
+ width : 16px;
+ }
+
+ .season-grid {
+ margin-top : 10px;
+ }
+
+ .season-pass-button {
+ display : inline-block;
+ }
+
+ .movie-monitor-toggle {
+ font-size : 24px;
+ margin-top : 3px;
+ }
+
+ .help-inline {
+ margin-top : 7px;
+ display : inline-block;
+ }
+}
+
+.season-status {
+ font-size : 11px;
+ vertical-align : middle !important;
+}
+
+//Overview List
+.movie-overview-list-actions {
+ min-width: 56px;
+ max-width: 56px;
+
+ i {
+ .clickable();
+ }
+}
+
+//Editor
+
+.movie-editor-footer {
+ max-width: 1160px;
+ color: #f5f5f5;
+ margin-left: auto;
+ margin-right: auto;
+
+ .form-group {
+ padding-top: 0px;
+ }
+}
+
+.update-files-movie-modal {
+ .selected-movie {
+ margin-top: 15px;
+ }
+}
+
+//Series Details
+
+.movie-not-monitored {
+ .season-monitored, .episode-monitored {
+ color: #888888;
+ cursor: not-allowed;
+
+ i {
+ cursor: not-allowed;
+ }
+ }
+}
+
+.movie-info {
+ .row {
+ margin-bottom : 3px;
+
+ .label {
+ display : inline-block;
+ margin-bottom : 2px;
+ padding : 4px 6px 3px 6px;
+ max-width : 100%;
+ white-space : normal;
+ word-wrap : break-word;
+ }
+ }
+
+ .movie-info-links {
+ @media (max-width: @screen-sm-max) {
+ display : inline-block;
+ margin-top : 5px;
+ }
+ }
+}
+
+.scene-info {
+ .key, .value {
+ display : inline-block;
+ }
+
+ .key {
+ width : 80px;
+ margin-left : 10px;
+ vertical-align : top;
+ }
+
+ .value {
+ margin-right : 10px;
+ max-width : 170px;
+ }
+
+ ul {
+ padding-left : 0px;
+ list-style-type : none;
+ }
+}
diff --git a/src/UI/index.html b/src/UI/index.html
index 75acdd7ff..64fb75f03 100644
--- a/src/UI/index.html
+++ b/src/UI/index.html
@@ -22,6 +22,7 @@
+