diff --git a/.gitignore b/.gitignore
index 2bed30eef..caf8b6a51 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,6 @@ cachefile.dbm
 *.log
 *.log.*
 *.db
-*.pyc
 .idea/*
 bazarr.pid
 /venv
diff --git a/bazarr/main.py b/bazarr/main.py
index 28dcdd9f3..b4e79c54c 100644
--- a/bazarr/main.py
+++ b/bazarr/main.py
@@ -883,13 +883,13 @@ def search_missing_subtitles_movie(no):
     redirect(ref)
 
 
-@app.route('/historyseries')
+@app.route('/historyseries/')
 # @custom_auth_basic(check_credentials)
 def historyseries():
     return render_template('historyseries.html')
 
 
-@app.route('/historymovies')
+@app.route('/historymovies/')
 # @custom_auth_basic(check_credentials)
 def historymovies():
     return render_template('historymovies.html')
diff --git a/static/css/bazarr.css b/static/css/bazarr.css
index 9bb2527cd..df6c98274 100644
--- a/static/css/bazarr.css
+++ b/static/css/bazarr.css
@@ -113,8 +113,7 @@ a.link:hover, a.link:focus {
           cursor: pointer; }
         .sidebar-nav ul li a.active {
           font-weight: 500;
-          color: #263238;
-          border-left: 3px solid #ce2829; }
+          color: #ce2829; }
       .sidebar-nav ul li ul {
         padding-left: 60px;
         padding-top: 10px;
@@ -136,7 +135,7 @@ a.link:hover, a.link:focus {
         display: block;
         margin: 20px 0; }
   .sidebar-nav > ul > li {
-    margin-bottom: 10px; }
+    margin-bottom: 0px; }
     .sidebar-nav > ul > li.active > a {
       color: #ce2829;
       font-weight: 500;
diff --git a/static/css/bazarr.css.map b/static/css/bazarr.css.map
index 64836c714..8c69b3fb5 100644
--- a/static/css/bazarr.css.map
+++ b/static/css/bazarr.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["../scss/bazarr.scss","../scss/variable.scss"],
 "names": [],
 "file": "bazarr.css"
diff --git a/static/scss/bazarr.scss b/static/scss/bazarr.scss
index 0299d5feb..303cf9745 100644
--- a/static/scss/bazarr.scss
+++ b/static/scss/bazarr.scss
@@ -153,8 +153,7 @@ a.link {
 
         &.active {
           font-weight: 500;
-          color: $dark;
-          border-left: 3px solid $topbar;
+          color: $topbar;
         }
       }
 
@@ -192,7 +191,7 @@ a.link {
   }
 
   > ul > li {
-    margin-bottom: 10px;
+    margin-bottom: 0px;
 
     &.active > a {
       color: $topbar;
diff --git a/views/_main.html b/views/_main.html
index 31e483885..790a933c9 100644
--- a/views/_main.html
+++ b/views/_main.html
@@ -30,7 +30,8 @@
         <link href="{{ url_for('static',filename='css/bazarr.css') }}" id="theme" rel="stylesheet">
 
         <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='datatables/datatables.min.css') }}">
-
+        <link rel="stylesheet" type="text/css"
+              href="{{ url_for('static',filename='plugins/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">
     {% endblock head_css %}
 
     {% block head %}
@@ -102,8 +103,10 @@
                             <div class="dropdown-menu dropdown-menu-right scale-up">
                                 <ul class="dropdown-user">
                                     <li><a href="{{ url_for('restart') }}"><i class="fas fa-redo"></i> Restart</a></li>
-                                    <li><a href="{{ url_for('shutdown') }}"><i class="fas fa-power-off"></i> Shutdown</a></li>
-                                    <li><a href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
+                                    <li><a href="{{ url_for('shutdown') }}"><i class="fas fa-power-off"></i>
+                                        Shutdown</a></li>
+                                    <li><a href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt"></i> Logout</a>
+                                    </li>
                                 </ul>
                             </div>
                         </li>
@@ -123,7 +126,7 @@
                 <!-- Sidebar navigation-->
                 <nav class="sidebar-nav">
                     <ul id="sidebarnav">
-                        <li><a class="active" href="{{ url_for('series') }}"><i class="fas fa-play"></i><span
+                        <li><a href="{{ url_for('series') }}"><i class="fas fa-play"></i><span
                                 class="hide-menu"> Series</span></a>
                         </li>
                         <li><a href="{{ url_for('movies') }}"><i class="fas fa-film"></i><span
@@ -135,7 +138,8 @@
                                 <li><a href="{{ url_for('historymovies') }}"> Movies</a></li>
                             </ul>
                         </li>
-                        <li><a href="#"><i class="fas fa-exclamation-triangle"></i><span class="hide-menu"> Wanted</span></a>
+                        <li><a href="#"><i class="fas fa-exclamation-triangle"></i><span
+                                class="hide-menu"> Wanted</span></a>
                             <ul aria-expanded="false" class="collapse">
                                 <li><a href="/"> Missing</a></li>
                                 <li><a href="/"> Cutoff Unmet</a></li>
@@ -191,7 +195,6 @@
     <!-- All Jquery -->
     <!-- ============================================================== -->
     <script src="{{ url_for('static',filename='plugins/jquery/jquery.min.js') }}"></script>
-    <script src="{{ url_for('static',filename='datatables/jquery.dataTables.min.js') }}"></script>
     <!-- Bootstrap tether Core JavaScript -->
     <script src="{{ url_for('static',filename='plugins/popper/popper.min.js') }}"></script>
     <script src="{{ url_for('static',filename='plugins/bootstrap/js/bootstrap.min.js') }}"></script>
@@ -203,6 +206,7 @@
     <script src="{{ url_for('static',filename='plugins/sticky-kit-master/dist/sticky-kit.min.js') }}"></script>
     <script src="{{ url_for('static',filename='plugins/sparkline/jquery.sparkline.min.js') }}"></script>
     <!--Custom JavaScript -->
+    <script src="{{ url_for('static',filename='plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
     <script src="{{ url_for('static',filename='js/custom.js') }}"></script>
 
     <script>
diff --git a/views/historymovies.html b/views/historymovies.html
index 6843c8d6e..a2e608cf4 100644
--- a/views/historymovies.html
+++ b/views/historymovies.html
@@ -7,35 +7,55 @@
 {% endblock head %}
 
 {% block body %}
-<table id="history_movies" class="mdl-data-table" style="width:100%">
-	<thead>
-		<tr>
-			<th>action</th>
-			<th>title</th>
-			<th>timestamp</th>
-			<th>description</th>
-		</tr>
-	</thead>
-</table>
+    <div class="container-fluid">
+        <!-- Bread crumb and right sidebar toggle -->
+        <!-- ============================================================== -->
+        <div class="row page-titles">
+            <div class="col-md-5 col-8 align-self-center">
+                <h3 class="text-themecolor m-b-0 m-t-0"><i class="fas fa-sync"></i></h3>
+            </div>
+            <div class="col-md-7 col-4 align-self-center">
+                <div class="d-flex m-t-10 justify-content-end">
+                    <div class="d-flex m-r-20 m-l-10 hidden-md-down">
+                        <div class="chart-text m-r-10">
+                            <h5 class="m-t-0 text-white">Some page settings</h5></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- ============================================================== -->
+        <!-- End Bread crumb and right sidebar toggle -->
+        <!-- ============================================================== -->
+        <table id="history_movies" class="table table-striped" style="width:100%">
+            <thead>
+            <tr>
+                <th>action</th>
+                <th>title</th>
+                <th>timestamp</th>
+                <th>description</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
 {% endblock body %}
 
 {% block tail %}
-<script>
-	$(document).ready(function() {
-        var table = $('#history_movies').DataTable( {
-            "processing": true,
-            "serverSide": true,
-			"searching": false,
-			"ordering": false,
-			"lengthChange": false,
-            "ajax": "/api/history_movies",
-            "columns": [
-            { "data": "action" },
-            { "data": "title" },
-            { "data": "timestamp" },
-            { "data": "description" }
-            ]
-        } );
-    } );
-</script>
+    <script>
+        $(document).ready(function () {
+            var table = $('#history_movies').DataTable({
+                "processing": true,
+                "serverSide": true,
+                "searching": false,
+                "ordering": false,
+                "lengthChange": false,
+                "ajax": "{{ url_for('api.historymovies') }}",
+                "columns": [
+                    {"data": "action"},
+                    {"data": "title"},
+                    {"data": "timestamp"},
+                    {"data": "description"}
+                ]
+            });
+        });
+    </script>
 {% endblock tail %}
diff --git a/views/historyseries.html b/views/historyseries.html
index bd42f9585..0163567a8 100644
--- a/views/historyseries.html
+++ b/views/historyseries.html
@@ -7,39 +7,59 @@
 {% endblock head %}
 
 {% block body %}
-<table id="history_series" class="mdl-data-table" style="width:100%">
-	<thead>
-		<tr>
-			<th>Action</th>
-			<th>Name</th>
-			<th>Episode</th>
-			<th>Episode Title</th>
-			<th>Date</th>
-			<th>Description</th>
-		</tr>
-	</thead>
-</table>
+    <div class="container-fluid">
+        <!-- Bread crumb and right sidebar toggle -->
+        <!-- ============================================================== -->
+        <div class="row page-titles">
+            <div class="col-md-5 col-8 align-self-center">
+                <h3 class="text-themecolor m-b-0 m-t-0"><i class="fas fa-sync"></i></h3>
+            </div>
+            <div class="col-md-7 col-4 align-self-center">
+                <div class="d-flex m-t-10 justify-content-end">
+                    <div class="d-flex m-r-20 m-l-10 hidden-md-down">
+                        <div class="chart-text m-r-10">
+                            <h5 class="m-t-0 text-white">Some page settings</h5></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- ============================================================== -->
+        <!-- End Bread crumb and right sidebar toggle -->
+        <!-- ============================================================== -->
+        <table id="history_series" class="table table-striped" style="width:100%">
+            <thead>
+            <tr>
+                <th>Action</th>
+                <th>Name</th>
+                <th>Episode</th>
+                <th>Episode Title</th>
+                <th>Date</th>
+                <th>Description</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
 {% endblock body %}
 
 {% block tail %}
-<script>
-	$(document).ready(function() {
-        var table = $('#history_series').DataTable( {
-            "processing": true,
-            "serverSide": true,
-			"searching": false,
-			"ordering": false,
-			"lengthChange": false,
-            "ajax": "/api/history_series",
-            "columns": [
-            { "data": "action" },
-            { "data": "seriesTitle" },
-            { "data": "episode_number" },
-            { "data": "episodeTitle" },
-            { "data": "timestamp" },
-            { "data": "description" }
-            ]
-        } );
-    } );
-</script>
+    <script>
+        $(document).ready(function () {
+            var table = $('#history_series').DataTable({
+                "processing": true,
+                "serverSide": true,
+                "searching": false,
+                "ordering": false,
+                "lengthChange": false,
+                "ajax": "{{ url_for('api.historyseries') }}",
+                "columns": [
+                    {"data": "action"},
+                    {"data": "seriesTitle"},
+                    {"data": "episode_number"},
+                    {"data": "episodeTitle"},
+                    {"data": "timestamp"},
+                    {"data": "description"}
+                ]
+            });
+        });
+    </script>
 {% endblock tail %}
diff --git a/views/movies.html b/views/movies.html
index 134438d5d..3d4fd5a96 100644
--- a/views/movies.html
+++ b/views/movies.html
@@ -7,79 +7,103 @@
 {% endblock head %}
 
 {% block body %}
-<table id="movies" class="mdl-data-table" style="width:100%">
-	<thead>
-		<tr>
-			<th></th>
-			<th>Name</th>
-			<th>Exist</th>
-			<th>Audio Language</th>
-			<th>Subtitles Languages</th>
-			<th>Hearing-Impaired</th>
-			<th>Forced</th>
-		</tr>
-	</thead>
-</table>
+    <div class="container-fluid">
+        <!-- Bread crumb and right sidebar toggle -->
+        <!-- ============================================================== -->
+        <div class="row page-titles">
+            <div class="col-md-5 col-8 align-self-center">
+                <h3 class="text-themecolor m-b-0 m-t-0"><i class="fas fa-sync"></i></h3>
+            </div>
+            <div class="col-md-7 col-4 align-self-center">
+                <div class="d-flex m-t-10 justify-content-end">
+                    <div class="d-flex m-r-20 m-l-10 hidden-md-down">
+                        <div class="chart-text m-r-10">
+                            <h5 class="m-t-0 text-white">Some page settings</h5></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- ============================================================== -->
+        <!-- End Bread crumb and right sidebar toggle -->
+        <!-- ============================================================== -->
+        <table id="movies" class="table table-striped" style="width:100%">
+            <thead>
+            <tr>
+                <th></th>
+                <th>Name</th>
+                <th>Exist</th>
+                <th>Audio Language</th>
+                <th>Subtitles Languages</th>
+                <th>Hearing-Impaired</th>
+                <th>Forced</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
 {% endblock body %}
 
 {% block tail %}
-<script>
-	$(document).ready(function() {
-        var table = $('#movies').DataTable( {
-            "processing": true,
-            "serverSide": true,
-			"searching": false,
-			"ordering": false,
-			"lengthChange": false,
-            "ajax": "/api/movies",
-            "columns": [
-            { "data": "monitored",
-				"render": function ( data, type, row ) {
-				    if (data === 'False') {
-				    	return '<i class="far fa-bookmark" data-toggle="tooltip" data-placement="right" title="Movie unmonitored in Radarr"></i>';
-					} else if (data === 'True') {
-				    	return '<i class="fas fa-bookmark" data-toggle="tooltip" data-placement="right" title="Movie monitored in Radarr"></i>';
-					}
-				}
-			},
-            { "data": null,
-				"render": function ( data ) {
-				    if (data.sceneName) {
-				    	return '<i class="fas fa-info-circle" data-toggle="tooltip" data-placement="right" title="' + data.sceneName + '"></i> ' + data.title;
-					} else {
-				    	return data.title;
-					}
-				}
-			},
-            { "data": "exist",
-				"render": function ( data ) {
-				    if (data === false) {
-				    	return '<i class="fas fa-exclamation-triangle" data-toggle="tooltip" data-placement="right" title="This path doesn\'t seem to be valid."></i>';
-					} else if (data === true) {
-				    	return '<i class="fas fa-check" data-toggle="tooltip" data-placement="right" title="This path seems to be valid."></i>';
-					}
-				}
-			},
-            { "data": "audio_language.name" },
-            { "data": "languages",
-				"render": function ( data ) {
-            		if (data !== 'None') {
-            			var languages = '';
-						data.forEach(appendFunc);
-						return languages;
-					} else {
-            			return null
-					}
+    <script>
+        $(document).ready(function () {
+            var table = $('#movies').DataTable({
+                "processing": true,
+                "serverSide": true,
+                "searching": false,
+                "ordering": false,
+                "lengthChange": false,
+                "ajax": "{{ url_for('api.movies') }}",
+                "columns": [
+                    {
+                        "data": "monitored",
+                        "render": function (data, type, row) {
+                            if (data === 'False') {
+                                return '<i class="far fa-bookmark" data-toggle="tooltip" data-placement="right" title="Movie unmonitored in Radarr"></i>';
+                            } else if (data === 'True') {
+                                return '<i class="fas fa-bookmark" data-toggle="tooltip" data-placement="right" title="Movie monitored in Radarr"></i>';
+                            }
+                        }
+                    },
+                    {
+                        "data": null,
+                        "render": function (data) {
+                            if (data.sceneName) {
+                                return '<i class="fas fa-info-circle" data-toggle="tooltip" data-placement="right" title="' + data.sceneName + '"></i> ' + data.title;
+                            } else {
+                                return data.title;
+                            }
+                        }
+                    },
+                    {
+                        "data": "exist",
+                        "render": function (data) {
+                            if (data === false) {
+                                return '<i class="fas fa-exclamation-triangle" data-toggle="tooltip" data-placement="right" title="This path doesn\'t seem to be valid."></i>';
+                            } else if (data === true) {
+                                return '<i class="fas fa-check" data-toggle="tooltip" data-placement="right" title="This path seems to be valid."></i>';
+                            }
+                        }
+                    },
+                    {"data": "audio_language.name"},
+                    {
+                        "data": "languages",
+                        "render": function (data) {
+                            if (data !== 'None') {
+                                var languages = '';
+                                data.forEach(appendFunc);
+                                return languages;
+                            } else {
+                                return null
+                            }
 
-            		function appendFunc(value) {
-            			languages = languages + '<span class="badge badge-secondary" data-toggle="tooltip" data-placement="right" title="'+value.name+'">'+value.code2+'</span> ';
-					}
-				}
-			},
-            { "data": "hearing_impaired" },
-            { "data": "forced" }
-            ]
-        } );
-    } );
-</script>
+                            function appendFunc(value) {
+                                languages = languages + '<span class="badge badge-secondary" data-toggle="tooltip" data-placement="right" title="' + value.name + '">' + value.code2 + '</span> ';
+                            }
+                        }
+                    },
+                    {"data": "hearing_impaired"},
+                    {"data": "forced"}
+                ]
+            });
+        });
+    </script>
 {% endblock tail %}
diff --git a/views/series.html b/views/series.html
index f192a6c13..ef23dc708 100644
--- a/views/series.html
+++ b/views/series.html
@@ -7,75 +7,95 @@
 {% endblock head %}
 
 {% block body %}
-<table id="series" class="mdl-data-table" style="width:100%">
-	<thead>
-		<tr>
-			<th>Name</th>
-			<th>Exist</th>
-			<th>Audio Language</th>
-			<th>Subtitles Languages</th>
-			<th>Hearing-Impaired</th>
-			<th>Forced</th>
-			<th>Subtitles</th>
-		</tr>
-	</thead>
-</table>
+    <div class="container-fluid">
+        <!-- Bread crumb and right sidebar toggle -->
+        <!-- ============================================================== -->
+        <div class="row page-titles">
+            <div class="col-md-5 col-8 align-self-center">
+                <h3 class="text-themecolor m-b-0 m-t-0"><i class="fas fa-sync"></i></h3>
+            </div>
+            <div class="col-md-7 col-4 align-self-center">
+                <div class="d-flex m-t-10 justify-content-end">
+                    <div class="d-flex m-r-20 m-l-10 hidden-md-down">
+                        <div class="chart-text m-r-10">
+                            <h5 class="m-t-0 text-white">Some page settings</h5></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <table id="series" class="table table-striped" style="width:100%">
+            <thead>
+            <tr>
+                <th>Name</th>
+                <th>Exist</th>
+                <th>Audio Language</th>
+                <th>Subtitles Languages</th>
+                <th>Hearing-Impaired</th>
+                <th>Forced</th>
+                <th>Subtitles</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
 {% endblock body %}
 
 {% block tail %}
-<script>
-	$(document).ready(function() {
-        var table = $('#series').DataTable( {
-            "processing": true,
-            "serverSide": true,
-			"searching": false,
-			"ordering": false,
-			"lengthChange": false,
-            "ajax": "/api/series",
-            "columns": [
-            { "data": "title" },
-            { "data": "exist",
-				"render": function ( data ) {
-				    if (data === false) {
-				    	return '<i class="fas fa-exclamation-triangle" data-toggle="tooltip" data-placement="right" title="This path doesn\'t seem to be valid."></i>';
-					} else if (data === true) {
-				    	return '<i class="fas fa-check" data-toggle="tooltip" data-placement="right" title="This path seems to be valid."></i>';
-					}
-				}
-			},
-            { "data": "audio_language.name" },
-            { "data": "languages",
-				"render": function ( data ) {
-            		if (data !== 'None') {
-						var languages = '';
-						data.forEach(appendFunc);
-						return languages;
-					} else {
-            			return null;
-					}
+    <script>
+        $(document).ready(function () {
+            var table = $('#series').DataTable({
+                "processing": true,
+                "serverSide": true,
+                "searching": false,
+                "ordering": false,
+                "lengthChange": false,
+                "ajax": "{{ url_for('api.series') }}",
+                "columns": [
+                    {"data": "title"},
+                    {
+                        "data": "exist",
+                        "render": function (data) {
+                            if (data === false) {
+                                return '<i class="fas fa-exclamation-triangle" data-toggle="tooltip" data-placement="right" title="This path doesn\'t seem to be valid."></i>';
+                            } else if (data === true) {
+                                return '<i class="fas fa-check" data-toggle="tooltip" data-placement="right" title="This path seems to be valid."></i>';
+                            }
+                        }
+                    },
+                    {"data": "audio_language.name"},
+                    {
+                        "data": "languages",
+                        "render": function (data) {
+                            if (data !== 'None') {
+                                var languages = '';
+                                data.forEach(appendFunc);
+                                return languages;
+                            } else {
+                                return null;
+                            }
 
-            		function appendFunc(value) {
-            			languages = languages + '<span class="badge badge-secondary" data-toggle="tooltip" data-placement="right" title="'+value.name+'">'+value.code2+'</span> ';
-					}
-				}
-			},
-            { "data": "hearing_impaired" },
-            { "data": "forced" },
-            { "data": null,
-				"render": function ( data ) {
-            		var total = data.episodeFileCount;
-            		var completed = data.episodeFileCount - data.episodeMissingCount;
-            		var completed_style = '';
-					var completed_text = '';
-					if (completed/total*100 > 0 && data.languages !== 'None') {
-						completed_style = ' style="width: '+completed/total*100+'%;"';
-						completed_text = completed+'/'+total;
-					}
-            		return '<div class="progress"><div class="progress-bar" role="progressbar"'+completed_style+' aria-valuenow="'+completed+'" aria-valuemin="0" aria-valuemax="'+total+'">'+completed_text+'</div></div>'
-				}
-			}
-            ]
-        } );
-    } );
-</script>
+                            function appendFunc(value) {
+                                languages = languages + '<span class="badge badge-secondary" data-toggle="tooltip" data-placement="right" title="' + value.name + '">' + value.code2 + '</span> ';
+                            }
+                        }
+                    },
+                    {"data": "hearing_impaired"},
+                    {"data": "forced"},
+                    {
+                        "data": null,
+                        "render": function (data) {
+                            var total = data.episodeFileCount;
+                            var completed = data.episodeFileCount - data.episodeMissingCount;
+                            var completed_style = '';
+                            var completed_text = '';
+                            if (completed / total * 100 > 0 && data.languages !== 'None') {
+                                completed_style = ' style="width: ' + completed / total * 100 + '%;"';
+                                completed_text = completed + '/' + total;
+                            }
+                            return '<div class="progress"><div class="progress-bar" role="progressbar"' + completed_style + ' aria-valuenow="' + completed + '" aria-valuemin="0" aria-valuemax="' + total + '">' + completed_text + '</div></div>'
+                        }
+                    }
+                ]
+            });
+        });
+    </script>
 {% endblock tail %}