diff --git a/src/views/header.mustache b/src/views/header.mustache
index 555932fd..092efec8 100644
--- a/src/views/header.mustache
+++ b/src/views/header.mustache
@@ -12,7 +12,7 @@
     <meta name="msapplication-TileColor" content="#00aba9">
     <meta name="theme-color" content="#344440">
 
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
+    <link rel="stylesheet" type="text/css" class="theme-css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" /><!-- integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />-->
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" integrity="sha256-YR4HrDE479EpYZgeTkQfgVJq08+277UXxMLbi/YP69o=" crossorigin="anonymous" />
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/rg-1.1.0/sc-1.5.0/datatables.min.css" />
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
diff --git a/src/views/index.mustache b/src/views/index.mustache
index 41cf0020..4ca0c0a4 100644
--- a/src/views/index.mustache
+++ b/src/views/index.mustache
@@ -791,3 +791,37 @@
     </div>
 
 {{> footer}}
+
+<script type="text/javascript">
+    const apiEndpoint = 'https://bootswatch.com/api/4.json';
+    $.getJSON(apiEndpoint, function(data) {
+        const themes = data.themes;
+        const select = $('#theme-selector');
+        select.show();
+        themes.forEach(function(value, index){
+            select.append($('<option />')
+                .val(index)
+                .text(value.name));
+        });
+        const existingValue = localStorage.getItem('theme');
+        if (existingValue !== null) {
+            select.val(existingValue);
+        }
+        select.change(function() {
+            const value = $(this).val();
+            let css;
+            if (value.includes('http')) {
+                css = value;
+            } else {
+                const theme = themes[value];
+                css = theme.css;
+            }
+            localStorage.setItem('theme', value);
+            //$("link").attr("href", theme.css);
+            $('.theme-css').attr('href', css);
+        }).change();
+
+    }, 'json').fail(function() {
+        console.error('Failed to get themes from api!');
+    });
+</script>
\ No newline at end of file
diff --git a/src/views/navbar.mustache b/src/views/navbar.mustache
index c3042aea..df64dae2 100644
--- a/src/views/navbar.mustache
+++ b/src/views/navbar.mustache
@@ -38,6 +38,11 @@
                 <a class="nav-link" href="{{url}}" target="_blank"><i class="{{icon}}"></i>&nbsp;{{{name}}}</a>
             </li>
         {{/buttons_right}}
+            <li class="nav-item nav-link">
+                <select id="theme-selector" class="form-control form-control-sm">
+                    <option value="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">Default</option>
+                </select>
+            </li>
         {{#username}}
             <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">