diff --git a/src/main/webapp/preview/book.html b/src/main/webapp/preview/book.html
index 266c350..eb30c83 100644
--- a/src/main/webapp/preview/book.html
+++ b/src/main/webapp/preview/book.html
@@ -3,28 +3,14 @@
 <head>
     <title>Amazon light</title>
 
-    <script>
-        function getStylesheet() {
-            var dark = true;
-            if (dark) {
-                document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
-                document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
-            } else {
-                document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
-                document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
-            }
-        }
+    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
+    <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-        getStylesheet();
-    </script>
-    <noscript>
-        <link href="css/m-light.css" rel="stylesheet">
-    </noscript>
     <link href="css/custom.css" rel="stylesheet">
     <link href="css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
-          integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -35,7 +21,7 @@
     <nav id="navigation">
         <div class="m-container">
             <div class="m-row">
-                <a href="#" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">Amazon light</a>
+                <a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
                 <a id="m-navbar-show" href="#navigation" title="Show navigation"
                    class="m-col-t-3 m-hide-m m-text-right"></a>
                 <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
@@ -55,6 +41,22 @@
                                 </ol>
                             </li>
                         </ol>
+                        <ol class="m-col-t-6 m-col-m-none" start="6">
+                            <li>
+                                <a href="#"><i class="fas fa-ellipsis-v"></i></a>
+                                <ol>
+                                    <li>Dark Theme
+                                        <div class="onoffswitch">
+                                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
+                                            <label class="onoffswitch-label" for="myonoffswitch">
+                                                <span class="onoffswitch-inner"></span>
+                                                <span class="onoffswitch-switch"></span>
+                                            </label>
+                                        </div>
+                                    </li>
+                                </ol>
+                            </li>
+                        </ol>
                     </div>
                 </div>
             </div>
@@ -149,6 +151,8 @@
             </div>
         </div>
     </nav>
+
+
 </footer>
 
 
@@ -156,10 +160,25 @@
 <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 <script>
+    function changeTheme() {
+
+        if(document.getElementById('myonoffswitch').checked) {
+            swapStyleSheet("dark", "#22272e");
+        }else {
+            swapStyleSheet("light", "#cb4b16");
+        }
+
+    }
+
+    function swapStyleSheet(sheet, color) {
+        document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
+        document.getElementById("pagecolor").setAttribute("content", color);
+    }
+
     $(document).ready(function () {
         $('.slider').slick({
             infinite: true,
-            slidesToShow: 3,
+            slidesToShow: 6,
             slidesToScroll: 3
         })
     });
diff --git a/src/main/webapp/preview/catalog.html b/src/main/webapp/preview/catalog.html
index 9994be6..f4c13b7 100644
--- a/src/main/webapp/preview/catalog.html
+++ b/src/main/webapp/preview/catalog.html
@@ -3,23 +3,10 @@
 <head>
     <title>Amazon light</title>
 
-    <script>
-        function getStylesheet() {
-            var dark = true;
-            if (dark) {
-                document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
-                document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
-            } else {
-                document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
-                document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
-            }
-        }
+    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
+    <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-        getStylesheet();
-    </script>
-    <noscript>
-        <link href="css/m-light.css" rel="stylesheet">
-    </noscript>
     <link href="css/custom.css" rel="stylesheet">
     <link href="css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
@@ -32,15 +19,48 @@
 
 <header>
     <nav id="navigation">
-        <div class="">
+        <div class="m-container">
             <div class="m-row">
-                <a href="#" id="m-navbar-brand" class="m-col-t-2 m-col-m-none m-left-m">Amazon light</a>
-                <div class="m-button m-flat m-col-t-1 m-push-l-8">
-                    <a href="#"><span class="fas fa-user"> Anmelden/Registrieren</span></a>
+                <a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
+                <a id="m-navbar-show" href="#navigation" title="Show navigation"
+                   class="m-col-t-3 m-hide-m m-text-right"></a>
+                <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
+                <div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
+                    <div class="m-row">
+                        <ol class="m-col-t-6 m-col-m-none">
+                            <li><a href="#">Katalog</a></li>
+                            <li><a href="#">(1) Warenkorb</a></li>
+                        </ol>
+                        <ol class="m-col-t-6 m-col-m-none" start="4">
+                            <li>
+                                <a href="#">Mein Account</a>
+                                <ol>
+                                    <li><a href="#">Meine Bestellungen</a></li>
+                                    <li><a href="#">Adressen & Konten</a></li>
+                                    <li><a href="#">Abmelden</a></li>
+                                </ol>
+                            </li>
+                        </ol>
+                        <ol class="m-col-t-6 m-col-m-none" start="6">
+                            <li>
+                                <a href="#"><i class="fas fa-ellipsis-v"></i></a>
+                                <ol>
+                                    <li>Dark Theme
+                                        <div class="onoffswitch">
+                                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
+                                            <label class="onoffswitch-label" for="myonoffswitch">
+                                                <span class="onoffswitch-inner"></span>
+                                                <span class="onoffswitch-switch"></span>
+                                            </label>
+                                        </div>
+                                    </li>
+                                </ol>
+                            </li>
+                        </ol>
+                    </div>
                 </div>
             </div>
         </div>
-
     </nav>
 </header>
 
@@ -227,6 +247,8 @@
             </div>
         </div>
     </nav>
+
+
 </footer>
 
 
@@ -234,12 +256,27 @@
 <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 <script>
-    $(document).ready(function(){
+    function changeTheme() {
+
+        if(document.getElementById('myonoffswitch').checked) {
+            swapStyleSheet("dark", "#22272e");
+        }else {
+            swapStyleSheet("light", "#cb4b16");
+        }
+
+    }
+
+    function swapStyleSheet(sheet, color) {
+        document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
+        document.getElementById("pagecolor").setAttribute("content", color);
+    }
+
+    $(document).ready(function () {
         $('.slider').slick({
             infinite: true,
             slidesToShow: 3,
             slidesToScroll: 3
-    })
+        })
     });
 </script>
 
diff --git a/src/main/webapp/preview/confirmation.html b/src/main/webapp/preview/confirmation.html
index d27306f..418faea 100644
--- a/src/main/webapp/preview/confirmation.html
+++ b/src/main/webapp/preview/confirmation.html
@@ -3,28 +3,14 @@
 <head>
     <title>Amazon light</title>
 
-    <script>
-        function getStylesheet() {
-            var dark = true;
-            if (dark) {
-                document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
-                document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
-            } else {
-                document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
-                document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
-            }
-        }
+    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
+    <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-        getStylesheet();
-    </script>
-    <noscript>
-        <link href="css/m-light.css" rel="stylesheet">
-    </noscript>
     <link href="css/custom.css" rel="stylesheet">
     <link href="css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
-          integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -35,7 +21,7 @@
     <nav id="navigation">
         <div class="m-container">
             <div class="m-row">
-                <a href="#" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">Amazon light</a>
+                <a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
                 <a id="m-navbar-show" href="#navigation" title="Show navigation"
                    class="m-col-t-3 m-hide-m m-text-right"></a>
                 <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
@@ -55,6 +41,22 @@
                                 </ol>
                             </li>
                         </ol>
+                        <ol class="m-col-t-6 m-col-m-none" start="6">
+                            <li>
+                                <a href="#"><i class="fas fa-ellipsis-v"></i></a>
+                                <ol>
+                                    <li>Dark Theme
+                                        <div class="onoffswitch">
+                                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
+                                            <label class="onoffswitch-label" for="myonoffswitch">
+                                                <span class="onoffswitch-inner"></span>
+                                                <span class="onoffswitch-switch"></span>
+                                            </label>
+                                        </div>
+                                    </li>
+                                </ol>
+                            </li>
+                        </ol>
                     </div>
                 </div>
             </div>
@@ -164,6 +166,8 @@
             </div>
         </div>
     </nav>
+
+
 </footer>
 
 
@@ -171,6 +175,21 @@
 <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 <script>
+    function changeTheme() {
+
+        if(document.getElementById('myonoffswitch').checked) {
+            swapStyleSheet("dark", "#22272e");
+        }else {
+            swapStyleSheet("light", "#cb4b16");
+        }
+
+    }
+
+    function swapStyleSheet(sheet, color) {
+        document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
+        document.getElementById("pagecolor").setAttribute("content", color);
+    }
+
     $(document).ready(function () {
         $('.slider').slick({
             infinite: true,
diff --git a/src/main/webapp/preview/css/custom.css b/src/main/webapp/preview/css/custom.css
index e69de29..4207907 100644
--- a/src/main/webapp/preview/css/custom.css
+++ b/src/main/webapp/preview/css/custom.css
@@ -0,0 +1,46 @@
+.onoffswitch {
+    position: relative; width: 88px;
+    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch-label {
+    display: block; overflow: hidden; cursor: pointer;
+    border: 2px solid #999999; border-radius: 50px;
+}
+.onoffswitch-inner {
+    display: block; width: 200%; margin-left: -100%;
+    transition: margin 0.3s ease-in 0s;
+}
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+    display: block; float: left; width: 50%; height: 50px; padding: 0; line-height: 50px;
+    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
+    box-sizing: border-box;
+}
+.onoffswitch-inner:before {
+    content: "";
+    padding-left: 10px;
+    background-color: #EEEEEE; color: #FFFFFF;
+}
+.onoffswitch-inner:after {
+    content: "";
+    padding-right: 10px;
+    background-color: #EEEEEE; color: #999999;
+    text-align: right;
+}
+.onoffswitch-switch {
+    display: block; width: 38px; margin: 6px;
+    background: #A1A1A1;
+    position: absolute; top: 0; bottom: 0;
+    right: 34px;
+    border: 2px solid #999999; border-radius: 50px;
+    transition: all 0.3s ease-in 0s;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+    margin-left: 0;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+    right: 0px;
+    background-color: #27A1CA;
+}
\ No newline at end of file
diff --git a/src/main/webapp/preview/index.html b/src/main/webapp/preview/index.html
index 61b7756..638daa0 100644
--- a/src/main/webapp/preview/index.html
+++ b/src/main/webapp/preview/index.html
@@ -3,5 +3,5 @@
 <a href="login.html">Login</a><br>
 <a href="register.html">Registrierung</a><br>
 <a href="detailpage.html">Bücherliste</a><br>
-<a href="book.html">Buchdetails</a>
-<a href="confirmation.html">Bestätigung</a>
\ No newline at end of file
+<a href="book.html">Buchdetails</a><br>
+<a href="confirmation.html">Bestätigung</a><br>
\ No newline at end of file
diff --git a/src/main/webapp/preview/start.html b/src/main/webapp/preview/start.html
index 1f986d2..0e62712 100644
--- a/src/main/webapp/preview/start.html
+++ b/src/main/webapp/preview/start.html
@@ -3,28 +3,14 @@
 <head>
     <title>Amazon light</title>
 
-    <script>
-        function getStylesheet() {
-            var dark = true;
-            if (dark) {
-                document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
-                document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
-            } else {
-                document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
-                document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
-            }
-        }
+    <link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
+    <meta name="theme-color" content="#cb4b16" id="pagecolor"/>
 
-        getStylesheet();
-    </script>
-    <noscript>
-        <link href="css/m-light.css" rel="stylesheet">
-    </noscript>
     <link href="css/custom.css" rel="stylesheet">
     <link href="css/slick-theme.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
-          integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -55,6 +41,22 @@
                                 </ol>
                             </li>
                         </ol>
+                        <ol class="m-col-t-6 m-col-m-none" start="6">
+                            <li>
+                                <a href="#"><i class="fas fa-ellipsis-v"></i></a>
+                                <ol>
+                                    <li>Dark Theme
+                                        <div class="onoffswitch">
+                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
+                                        <label class="onoffswitch-label" for="myonoffswitch">
+                                            <span class="onoffswitch-inner"></span>
+                                            <span class="onoffswitch-switch"></span>
+                                        </label>
+                                    </div>
+                                    </li>
+                                </ol>
+                            </li>
+                        </ol>
                     </div>
                 </div>
             </div>
@@ -212,6 +214,21 @@
 <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 <script>
+    function changeTheme() {
+
+        if(document.getElementById('myonoffswitch').checked) {
+            swapStyleSheet("dark", "#22272e");
+        }else {
+            swapStyleSheet("light", "#cb4b16");
+        }
+
+    }
+
+    function swapStyleSheet(sheet, color) {
+        document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
+        document.getElementById("pagecolor").setAttribute("content", color);
+    }
+
     $(document).ready(function () {
         $('.slider').slick({
             infinite: true,
