diff --git a/website/index.php b/website/index.php
index ddb7e6e..d93caf4 100644
--- a/website/index.php
+++ b/website/index.php
@@ -53,6 +53,7 @@
             <option value="light">LordMZTE</option>
 	          <option value="old">Old</option>
             <option value="retro">Retro</option>
+            <option value="dark">Dark</option>
           </select>
         </div>
         <script src="switcher.js"></script>
diff --git a/website/themes/dark.css b/website/themes/dark.css
new file mode 100644
index 0000000..7e470cc
--- /dev/null
+++ b/website/themes/dark.css
@@ -0,0 +1,212 @@
+body{
+    color: #fff;
+  background: #151d28;
+  background-size: cover;
+  font-family: 'Arial';
+  letter-spacing: 0.2px;
+  margin-top: 0px;
+  }
+  
+  select {
+    background: #1a2332;
+    border: solid;
+    border-color: #212a39;
+    color: #b3b3b3;
+}
+
+  .Bilder_ {
+      padding: 10px;
+      max-width: 300px;
+      max-height:150px;
+      vertical-align: bottom;
+      display: block;
+      margin-top:auto;
+      margin-bottom:auto;
+      margin-left:auto;
+      margin-right:auto;
+      vertical-align: middle;
+      border: 0 none;
+      max-width: 200px;
+  
+  }
+  
+  #themediv {
+    float: left;
+  }
+  
+  .Videos_ {
+      padding: 10px;
+      max-width: 200px;
+      max-height:150px;
+      margin-top:auto;
+      margin-bottom:auto;
+      margin-left:auto;
+      margin-right:auto;
+      display: block;
+  }
+  
+  
+  .kasten{
+  margin-left: 10px;
+  margin-bottom: 10px;
+  border: 5px solid grey;
+  float:left;
+  width: 250px;
+  height: 200px;
+  min-height: 10em;
+  border: 4px solid #1cb09a;
+  }
+  
+  .bar-main{
+    background: #1a2332;
+    text-align: center;
+  }
+  
+  
+  #btn-close-CSS {
+      background: url(head.png)no-repeat;
+      display: flex;
+      justify-content: space-around;
+      background-size: contain;
+      background-position: center;
+      color:white;
+      background-color: lightgray;
+      border:noe;
+       height:50px;
+       width: 50px;
+  }
+  .img-fixed-info{
+    position: fixed;
+    width: 40px;
+  
+  }
+  input[type=text] {
+    background-color: rgba(0, 0, 0, 0.4);
+    color: white;
+  }
+  .btn-logout{
+    background: url(logout.png)no-repeat;
+    background-size: contain;
+    background-position: center;
+    color:white;
+    background-color: transparent;
+    border:none;
+    float: right;
+    margin-top: 5px;
+     padding: 15px;
+  }
+  #custom-button {
+    background-color: #1cb09a;
+    border-radius: 5px;
+    outline: 0;
+    border: 0;
+    color: #FFFFFF;
+    -webkit-transition: all 0.3 ease;
+    transition: all 0.3 ease;
+    cursor: pointer;
+  }
+  #custom-button:hover { /* color of the button, if its hovered */
+    background: #189684;
+    color: #b3b3b3;
+}
+  
+  #custom-text {
+    margin-left: 10px;
+    color: #aaa;
+  }
+  *, *::after, *::before {
+    box-sizing: border-box;
+  }
+  
+  .modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: 200ms ease-in-out;
+    border: 1px solid black;
+    border-radius: 10px;
+    z-index: 10;
+    background-color:#36393f;
+    width: 500px;
+    max-width: 80%;
+  }
+  
+  .modal.active {
+    transform: translate(-50%, -50%) scale(1);
+  }
+  
+  .modal-header {
+    padding: 10px 15px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border-bottom: 1px solid black;
+  }
+  
+  .modal-header .title {
+    font-size: 1.25rem;
+    font-weight: bold;
+  }
+  
+  .modal-header .close-button {
+    cursor: pointer;
+    border: none;
+    outline: none;
+    background: none;
+    font-size: 1.25rem;
+    font-weight: bold;
+  }
+  .close-button{
+    position: absolute;
+    right: 0px;
+    width: 30px;
+    font-size: 20px;
+  }
+  .modal-body {
+    padding: 10px 15px;
+  }
+  
+  #overlay {
+     position: fixed;
+    opacity: 0;
+    transition: 200ms ease-in-out;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color:rgba(50,53,59,0.9);
+    pointer-events: none;
+  }
+  
+  #overlay.active {
+    opacity: 1;
+    pointer-events: all;
+  }
+  .btn-modal{
+    background: url(info.png)no-repeat;
+    background-size: contain;
+    background-position: center;
+    color:white;
+    background-color: transparent;
+    border:none;
+     height:40px;
+     width: 50px;
+     padding: 15px;
+    float: left;
+  }
+  a{
+    color: white;
+    text-decoration: none;
+  }
+  a:hover{
+    font-weight: bold;
+    color:green;
+  }
+  
+  #token {
+    outline: 0;
+    box-sizing: border-box;
+    border: solid #212a39;
+    background: #1a2332;
+}
\ No newline at end of file