diff --git a/app/Http/Controllers/StartpageController.php b/app/Http/Controllers/StartpageController.php
index c5e4ff612abdbac0cd7e31dcf2ddcae4239d447e..6f7d66fc80535e1d9c97eef17276dcfb8b3bbb2b 100644
--- a/app/Http/Controllers/StartpageController.php
+++ b/app/Http/Controllers/StartpageController.php
@@ -43,6 +43,11 @@ class StartpageController extends Controller
             $lang = 'all';
         }
 
+        if(Cookie::get('dark_mode') === "2")
+            $css = mix('css/themes/startpage-only-dark.css');
+        else
+            $css = mix('css/themes/startpage-only-light.css');
+
         return view('index')
             ->with('title', trans('titles.index'))
             ->with('homeIcon')
@@ -53,7 +58,8 @@ class StartpageController extends Controller
             ->with('request', $request->input('request', 'GET'))
             ->with('option_values', $option_values)
             ->with('autocomplete', $autocomplete)
-            ->with('pluginmodal', $request->input('plugin-modal', 'off'));
+            ->with('pluginmodal', $request->input('plugin-modal', 'off'))
+            ->with('css', [$css]);
     }
 
     public function loadPage($subpage)
diff --git a/resources/less/metager/general/base.less b/resources/less/metager/general/base.less
index 50f241c54a097b85402b9b9d95eed55bf43bafff..2c542869ca80ecae0195bb30187f93a7f1192cb9 100644
--- a/resources/less/metager/general/base.less
+++ b/resources/less/metager/general/base.less
@@ -259,8 +259,8 @@ summary {
         top: 100%;
         left: 0;
         z-index: 1;
-        color: black;
-        background-color: white;
+        color: @text-color;
+        background-color: @body-background-color;
         border: 2px solid @metager-orange;
         border-radius: 6px;
         padding: 3px 8px;
diff --git a/resources/less/metager/pages/resultpage/result-page.less b/resources/less/metager/pages/resultpage/result-page.less
index a54a8f2fdaa9545cad6577107cb2547f27d5394f..985b981aaee0b3f2c81775836b373f2f0ba9b6c2 100644
--- a/resources/less/metager/pages/resultpage/result-page.less
+++ b/resources/less/metager/pages/resultpage/result-page.less
@@ -142,7 +142,7 @@ nav .input-group {
 }
 
 #helpButton {
-    color: black;
+    color: @text-color;
 }
 
 a {
@@ -355,7 +355,8 @@ a {
         grid-area: searchbar;
         padding-top: @padding-small-default;
         background-color: @resultpage-background-color;
-        box-shadow: 0px 1px 3px 2px white, 1px 0px 1px 2px white;
+        border: solid @metager-orange;
+        border-width: 0px 0px 2px 0px;
         position: sticky;
     }
     #foki {
diff --git a/resources/less/metager/parts/searchbar.less b/resources/less/metager/parts/searchbar.less
index c546cef27de039ab403bb874ec2e483013052a94..969bf687b6a2c1b5212053b988904d421c1ddd24 100644
--- a/resources/less/metager/parts/searchbar.less
+++ b/resources/less/metager/parts/searchbar.less
@@ -1,6 +1,5 @@
 @searchbar-border-color: #585858;
 @searchbar-border-color-light: #777777;
-@searchbar-background-color: white;
 .searchbar {
     display: -webkit-box;
     display: -moz-box;
@@ -69,6 +68,7 @@
                 -webkit-box-shadow: none;
                 box-shadow: none;
                 background-color: transparent;
+                color:@text-color;
             }
             #search-delete-btn {
                 position: absolute;
@@ -78,12 +78,14 @@
                 height: calc(100% - 4px);
                 margin: 2px 2px 2px 0;
                 border: none;
-                background-color: white;
+                background-color: transparent;
                 font-size: 1.8em;
                 font-weight: normal;
                 display: none;
+                filter: invert(@icon-color);
                 &:hover {
                     color: red;
+                    filter: invert(0);
                 }
             }
         }
@@ -95,6 +97,7 @@
                 background-color: transparent;
                 padding: 0;
                 color: #585858;
+                filter: invert(@icon-color);
             }
         }
     }
diff --git a/resources/less/metager/parts/sidebar.less b/resources/less/metager/parts/sidebar.less
index f80e03453ed624a72ae102981cf467d614e4714d..462a61df0ed5fb0fc5833de66e07f899363a40c0 100644
--- a/resources/less/metager/parts/sidebar.less
+++ b/resources/less/metager/parts/sidebar.less
@@ -47,6 +47,9 @@
                     text-align: center;
                     margin-right: 7px;
                 }
+                &>img {
+                    filter: invert(@icon-color);
+                }
             }
             &>label {
                 font-size: 1.1em;
diff --git a/resources/less/metager/startpage-only.less b/resources/less/metager/startpage-only.less
index 8fdae69b6455f9b68db403fd8b7d8fb0a6dc7fa7..aaeee14cdf89151f5616c7bc82b142e90cd9cb15 100644
--- a/resources/less/metager/startpage-only.less
+++ b/resources/less/metager/startpage-only.less
@@ -171,7 +171,7 @@ footer {
 #story-container > section > p { // sets all paragraphs for all sections
     grid-area: paragraph;
     font-size: 30px;
-    color: #474747;
+    color: @story-font-color;
     max-width: 1100px;
     padding-right: 50px;
 }
@@ -194,6 +194,9 @@ footer {
 #story-privacy {
     margin-bottom: 0;
     background-color: @story-privacy-background;
+    .story-icon{
+        filter: invert(@icon-color);
+    }
 }
 
 #story-ngo {
@@ -203,7 +206,7 @@ footer {
 }
 
 #story-ngo > h1 {
-    color:#AD1A00;
+    color:@story-ngo-color;
 }
 
 #story-diversity {
@@ -213,7 +216,7 @@ footer {
 }
 
 #story-diversity > h1 {
-    color: #0c4690;
+    color: @story-diversity-color;
 }
 
 #story-eco {
@@ -223,14 +226,14 @@ footer {
 }
 
 #story-eco > h1 {
-    color:#0c621a;
+    color: @story-eco-color;
 }
 #story-container #story-plugin > h1 { 
     font-size:60px;
 }
 #story-container #story-plugin { 
     min-height: 60vh;
-    background-color: white;
+    background-color: @story-plugin-background;
     clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
 }
 
diff --git a/resources/less/metager/variables-dark.less b/resources/less/metager/variables-dark.less
index aec4e5febb9e4c177e917002b73a7e6662c0e523..ea43ab34d7e63c0e1da4ad3226d054a1cb72d9b1 100644
--- a/resources/less/metager/variables-dark.less
+++ b/resources/less/metager/variables-dark.less
@@ -5,7 +5,7 @@
 @background-color: @color-almost-black;
 @background-color-mobile: @color-almost-black;
 // General text color.
-@text-color: @color-white;
+@text-color: @color-almost-white;
 // Default textual link color.
 @link-color: #FF8000;
 // Sidebar styles
@@ -15,9 +15,17 @@
 // Default Borde Color 
 @border-color: #727272;
 
-@background-color:black;
+// Story coloring
+@story-privacy-background: @color-strong-grey;
+@story-privacy-color: @color-almost-white;
+@story-ngo-background:#200000;
+@story-ngo-color:#ffaaaa;
+@story-diversity-background:#000020;
+@story-diversity-color:#aaaaff;
+@story-eco-background:#002000;
+@story-eco-color:#aaffaa;
+@story-plugin-background: @color-almost-black;
+@story-font-color: @color-almost-white;
+@icon-color:1;
 
-@story-privacy-background: #111111;
-@story-ngo-background:#000000;
-@story-diversity-background:#000030;
-@story-eco-background:#003000;
\ No newline at end of file
+@searchbar-background-color: @color-almost-black;
\ No newline at end of file
diff --git a/resources/less/metager/variables.less b/resources/less/metager/variables.less
index c8b85e4b9f295f30504b95db7b06f99d2493c270..90be249ac52617c1b5d37d612e9dc39fdf510372 100644
--- a/resources/less/metager/variables.less
+++ b/resources/less/metager/variables.less
@@ -64,6 +64,15 @@ sans-serif;
 @spruch-author-color: @color-strong-grey;
 
 @story-privacy-background: @color-almost-white;
+@story-privacy-color:@color-almost-black;
 @story-ngo-background:white;
+@story-ngo-color:#AD1A00;
 @story-diversity-background:#edfdff;
-@story-eco-background:#e3ffe9;
\ No newline at end of file
+@story-diversity-color:#0c4690;
+@story-eco-background:#e3ffe9;
+@story-eco-color:#0c621a;
+@story-plugin-background:white;
+@story-font-color:#474747;
+@icon-color:0;
+
+@searchbar-background-color: white;
\ No newline at end of file
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 5e080dacd9e22a41d34d7a453f0f9679de80ecb9..3af21c8c3c9ea2241c10c4bd69e98bd3b82881c6 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.staticPages', ['page' => 'startpage', 'css' => [mix('css/themes/startpage-only.css')]])
+@extends('layouts.staticPages', ['page' => 'startpage'])
 
 @section('title', $title )
 
diff --git a/resources/views/layouts/resultPage.blade.php b/resources/views/layouts/resultPage.blade.php
index ebd1002983ffc47e971b4b39b70d64d31be48088..8b63a3b37c7e38bbd50212d48a1714c17be99ed8 100644
--- a/resources/views/layouts/resultPage.blade.php
+++ b/resources/views/layouts/resultPage.blade.php
@@ -15,18 +15,18 @@
 		<link rel="apple-touch-icon" sizes="152x152" href="/img/apple/touch-icon-152.png">
 		<link rel="apple-touch-icon" sizes="180x180" href="/img/apple/touch-icon-180.png">
 		@if(empty(Cookie::get('key')))
-		<link rel="search" type="application/opensearchdescription+xml" title="{{ trans('staticPages.opensearch') }}" href="{{  LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), action('StartpageController@loadPlugin')) }}">
+			<link rel="search" type="application/opensearchdescription+xml" title="{{ trans('staticPages.opensearch') }}" href="{{  LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), action('StartpageController@loadPlugin')) }}">
 		@else
-		<link rel="search" type="application/opensearchdescription+xml" title="{{ trans('staticPages.opensearch') }}" href="{{  LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), action('StartpageController@loadPlugin', ['key' => Cookie::get('key')])) }}">
+			<link rel="search" type="application/opensearchdescription+xml" title="{{ trans('staticPages.opensearch') }}" href="{{  LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), action('StartpageController@loadPlugin', ['key' => Cookie::get('key')])) }}">
 		@endif
 		<link href="/fonts/liberationsans/stylesheet.css" rel="stylesheet">
 		<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome.css') }}" />
 		<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome-solid.css') }}" />
 
 		@if(Cookie::get('dark_mode') === "2")
-		<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
+			<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
 		@else
-		<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
+			<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
 		@endif
 
 @endif
diff --git a/resources/views/layouts/resultpage/resources.blade.php b/resources/views/layouts/resultpage/resources.blade.php
index 05173510d86345b513576881f1fe15a0dc101004..f0300a4cc7c63cacfa5d7459f97bdbb41caa3b41 100644
--- a/resources/views/layouts/resultpage/resources.blade.php
+++ b/resources/views/layouts/resultpage/resources.blade.php
@@ -17,5 +17,8 @@
 	<link href="/fonts/liberationsans/stylesheet.css" rel="stylesheet">
 	<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome.css') }}" />
 	<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome-solid.css') }}" />
-	<link type="text/css" rel="stylesheet alternate" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
-	<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
+	@if(Cookie::get('dark_mode') === "2")
+		<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
+	@else
+		<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
+	@endif
diff --git a/resources/views/layouts/staticPages.blade.php b/resources/views/layouts/staticPages.blade.php
index 9dd9b9c86ef53449e4673aa8ee6e5042d60cef55..bcad68ca9894733d1a54bd74250532b45ecf1855 100644
--- a/resources/views/layouts/staticPages.blade.php
+++ b/resources/views/layouts/staticPages.blade.php
@@ -28,11 +28,10 @@
 		@endif
 
 		@if(Cookie::get('dark_mode') === "2")
-			<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
+			<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>	
 		@else
 			<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
 		@endif
-
 		<link type="text/css" rel="stylesheet" href="{{ mix('css/utility.css') }}" />
 		<link href="/fonts/liberationsans/stylesheet.css" rel="stylesheet">
 		<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome.css') }}" />
diff --git a/webpack.mix.js b/webpack.mix.js
index 0288185dadab892196980bd4df5965d8b69c7456..0eecdfda1c18753088d4aa7890e0e0d3ad45cd56 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -22,7 +22,7 @@ mix
   .less("resources/less/metager/metager.less", "public/css/themes/metager.css", {
     strictMath: true
   })
-  .less("resources/less/metager/startpage-only-light.less", "public/css/themes/startpage-only.css", {
+  .less("resources/less/metager/startpage-only-light.less", "public/css/themes/startpage-only-dark.css", {
     strictMath: true
   })
   .less("resources/less/metager/startpage-only-dark.less", "public/css/themes/startpage-only-dark.css", {