diff --git a/resources/assets/less/default.less b/resources/assets/less/default.less
deleted file mode 100644
index 4d17a1361c1359d3bf5124e4f64879add8ef033f..0000000000000000000000000000000000000000
--- a/resources/assets/less/default.less
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "./font-awesome/fontawesome.less";
-@import "./font-awesome/solid.less";
-@import "./bootstrap/bootstrap.less";
-@import "./metager/metager.less";
\ No newline at end of file
diff --git a/resources/assets/less/metager.less b/resources/assets/less/metager.less
new file mode 100644
index 0000000000000000000000000000000000000000..3aac09d88cf95723e4234d0d569053316e94a41a
--- /dev/null
+++ b/resources/assets/less/metager.less
@@ -0,0 +1,4 @@
+@import "./metager/variables.less";
+@import "./metager/cards.less";
+@import "./metager/general.less";
+@import "./metager/specific.less";
\ No newline at end of file
diff --git a/resources/assets/less/metager/aufruf-winter.less b/resources/assets/less/metager/aufruf-winter.less
index 7a4ee98fca97f8c1ed0721cb20de4f66dd0265dc..d02d0f91a3f9003a3da99c96f5012a0cf4700dd0 100644
--- a/resources/assets/less/metager/aufruf-winter.less
+++ b/resources/assets/less/metager/aufruf-winter.less
@@ -1,17 +1,19 @@
 /* Winter-Spendenaufruf */
 
+@import "./variables.less";
+@import "./cards.less";
 @base-aufruf-winter-color: #ab2121;
 @base-aufruf-winter-border-color: #953535;
 @base-aufruf-winter-btn-color: white;
 @base-aufruf-winter-btn-hover-background-color: #bd0d0d;
 //
 @aufruf-winter-a-normal-or-visited: @base-aufruf-winter-color;
-@aufruf-winter-aufruf-action-btn-color: @base-aufruf-winter-btn-color!important;
-@aufruf-winter-aufruf-action-btn-background-color: @base-aufruf-winter-color!important;
+@aufruf-winter-aufruf-action-btn-color: @base-aufruf-winter-btn-color !important;
+@aufruf-winter-aufruf-action-btn-background-color: @base-aufruf-winter-color !important;
 @aufruf-winter-aufruf-action-btn-border-color: @base-aufruf-winter-border-color;
-@aufruf-winter-aufruf-action-btn-hover-background-color: @base-aufruf-winter-btn-hover-background-color !important;
+@aufruf-winter-aufruf-action-btn-hover-background-color: @base-aufruf-winter-btn-hover-background-color  !important;
 @aufruf-winter-aufruf-action-btn-hover-border-color: @base-aufruf-winter-border-color;
-@aufruf-winter-quicktip-border-color: @base-aufruf-winter-color!important;
+@aufruf-winter-quicktip-border-color: @base-aufruf-winter-color !important;
 .aufruf-winter {
     h1 {
         font-size: 32px;
diff --git a/resources/assets/less/metager/footer.less b/resources/assets/less/metager/footer.less
index 347197d1bc218f39d3a73bdea88515ac0d5b6776..7f50e7793cb522922d21541d7346eda540b50efd 100644
--- a/resources/assets/less/metager/footer.less
+++ b/resources/assets/less/metager/footer.less
@@ -1,5 +1,7 @@
 /* Footer bar with logos and general links */
 
+@import "./variables.less";
+@import "./cards.less";
 footer {
     padding: 5px 5px 15px 5px;
     width: 100%;
diff --git a/resources/assets/less/metager/general.less b/resources/assets/less/metager/general.less
index 3693057baeddab94114cf99fa40880c6d4c74415..6c52dcb647d80f20a826a86a4485d7d78b1344e9 100644
--- a/resources/assets/less/metager/general.less
+++ b/resources/assets/less/metager/general.less
@@ -1,3 +1,4 @@
+@import "./helpers.less";
 /* Default Font */
 
 body {
@@ -103,14 +104,6 @@ a {
 
 /* Logo */
 
-.logo {
-    color: @metager-orange;
-    font-family: Arimo, Liberation Sans, sans-serif;
-    font-style: italic;
-    font-weight: bold;
-    white-space: nowrap;
-}
-
 #startpage-logo {
     .logo;
     display: flex;
@@ -288,12 +281,6 @@ summary {
     cursor: not-allowed !important;
 }
 
-.overflow-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
 /* Button */
 
 button {
@@ -326,4 +313,4 @@ li.nodot {
 // Used on labels which initiate visual change (e.g. open-sidebar-button)
 .navigation-element {
     cursor: pointer;
-}
+}
\ No newline at end of file
diff --git a/resources/assets/less/metager/helpers.less b/resources/assets/less/metager/helpers.less
new file mode 100644
index 0000000000000000000000000000000000000000..c38c7acc3e3e43610179f94e835ed3940f9681cd
--- /dev/null
+++ b/resources/assets/less/metager/helpers.less
@@ -0,0 +1,13 @@
+.overflow-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.logo {
+    color: @metager-orange;
+    font-family: Arimo, Liberation Sans, sans-serif;
+    font-style: italic;
+    font-weight: bold;
+    white-space: nowrap;
+}
\ No newline at end of file
diff --git a/resources/assets/less/metager/metager.less b/resources/assets/less/metager/metager.less
index 1351c3a8e588c33f8ff13a04a624abc260ccf754..305f528329777d2b08272a6fd03dd40c5fe40bcf 100644
--- a/resources/assets/less/metager/metager.less
+++ b/resources/assets/less/metager/metager.less
@@ -1,13 +1,9 @@
-@import "./general.less";
-@import "./specific.less";
 @import "./result-page.less";
 @import "./start-page.less";
 @import "./settings.less";
-@import "./variables.less";
 @import "./sidebar.less";
 @import "./modals.less";
 @import "./footer.less";
 @import "./searchbar.less";
 @import "./aufruf-winter.less";
-@import "./cards.less";
 @import "./widget.less";
\ No newline at end of file
diff --git a/resources/assets/less/metager/modals.less b/resources/assets/less/metager/modals.less
index 2d6b70a7d4119aa893ba727a5c02a73c8001c74f..faaebbfae735562e7ac1878db6e5f3dcb7994a4a 100644
--- a/resources/assets/less/metager/modals.less
+++ b/resources/assets/less/metager/modals.less
@@ -1,97 +1,93 @@
 /* Rund ums Fokus Modal */
 
+@import "./variables.less";
+@import "./cards.less";
 #show-create-focus:checked {
-  & + #create-focus-modal {
-    position: fixed;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
+    &+#create-focus-modal {
+        position: fixed;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+    }
 }
 
 #plugin-modal-checkbox:checked {
-  & + #plugin-modal {
-    display: block;
-  }
+    &+#plugin-modal {
+        display: block;
+    }
 }
 
 .metager-modal {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  min-height: 100%;
-  width: 100%;
-  background: -webkit-gradient(
-    linear,
-    left top,
-    left bottom,
-    from(rgba(0, 0, 0, 0.7)),
-    to(rgba(0, 0, 0, 0.7))
-  );
-  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
-  z-index: 150;
-  .metager-modal-dialog {
-    background-color: white;
-    max-width: 700px;
-    margin: 30px auto;
-    height: 90vh;
-    overflow-y: auto;
-    .metager-modal-content {
-      .metager-modal-header {
-        padding: 15px;
-        position: relative;
-        border-bottom: 1px solid #e5e5e5;
-        .close-metager-modal {
-          position: absolute;
-          right: 15px;
-          &::after {
-            font-size: 24px;
-            content: "×";
-          }
-        }
-      }
-      #toggle-dropdowns-label {
-        cursor: pointer;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-      }
-      .focus-dropdown-toggle {
-        display: none;
-        &:not(:checked) {
-          & ~ .focus-dropdown-label ~ .row {
-            max-height: 0px;
-            overflow: hidden;
-          }
-        }
-        &:checked {
-          & ~ .focus-dropdown-label::after {
-            content: " âž– ";
-          }
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    min-height: 100%;
+    width: 100%;
+    background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7)));
+    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
+    z-index: 150;
+    .metager-modal-dialog {
+        background-color: white;
+        max-width: 700px;
+        margin: 30px auto;
+        height: 90vh;
+        overflow-y: auto;
+        .metager-modal-content {
+            .metager-modal-header {
+                padding: 15px;
+                position: relative;
+                border-bottom: 1px solid #e5e5e5;
+                .close-metager-modal {
+                    position: absolute;
+                    right: 15px;
+                    &::after {
+                        font-size: 24px;
+                        content: "×";
+                    }
+                }
+            }
+            #toggle-dropdowns-label {
+                cursor: pointer;
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+            }
+            .focus-dropdown-toggle {
+                display: none;
+                &:not(:checked) {
+                    &~.focus-dropdown-label~.row {
+                        max-height: 0px;
+                        overflow: hidden;
+                    }
+                }
+                &:checked {
+                    &~.focus-dropdown-label::after {
+                        content: " âž– ";
+                    }
+                }
+            }
+            .focus-dropdown-label {
+                cursor: pointer;
+                &::after {
+                    font-size: 16px;
+                    content: " âž• ";
+                    margin-left: 3px;
+                    vertical-align: middle;
+                }
+                &~.row {
+                    -webkit-transition: max-height 0.4s ease;
+                    /* Chrome 1-25, Safari 3.2+ */
+                    /* Firefox 4-15 */
+                    /* Opera 10.50–12.00 */
+                    transition: max-height 0.4s ease;
+                    max-height: 400px;
+                }
+            }
         }
-      }
-      .focus-dropdown-label {
-        cursor: pointer;
-        &::after {
-          font-size: 16px;
-          content: " âž• ";
-          margin-left: 3px;
-          vertical-align: middle;
-        }
-        & ~ .row {
-          -webkit-transition: max-height 0.4s ease;
-          /* Chrome 1-25, Safari 3.2+ */
-          /* Firefox 4-15 */
-          /* Opera 10.50–12.00 */
-          transition: max-height 0.4s ease;
-          max-height: 400px;
-        }
-      }
     }
-  }
-}
+}
\ No newline at end of file
diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less
index 109a472a075ee5c7a2f3bc070b3e1c6d553de766..ddf743aa4dbd949d9f7f5b5514b61f091d32c63b 100644
--- a/resources/assets/less/metager/result-page.less
+++ b/resources/assets/less/metager/result-page.less
@@ -1,39 +1,12 @@
 /* Ergebnisseite */
 
+@import "./variables.less";
+@import "./cards.less";
+@import "./helpers.less";
 @import "./quicktips.less";
 @import "./result-saver.less";
 @import "./result.less";
 @import "./product.less";
-//
-@resultpage-background-color: #FAFAFA;
-//
-@results-margin-left: 16px;
-//
-@result-page-body-background-color: @background-color;
-@result-page-a-hover-color: red;
-@result-page-product-shop-color: green;
-//
-@body-background-color: @result-page-body-background-color;
-@a-hover-color: @result-page-a-hover-color;
-@a-donation-hover-color: @result-page-a-hover-color;
-@product-shop-color: @result-page-product-shop-color;
-//
-@results-width-min: 500px;
-@results-width-max: 700px;
-@additions-width-min: 400px;
-@additions-width-max: 500px;
-//
-@resultpage-breakpoint-large: (@results-width-max + @additions-width-max + @padding-small-default * 4);
-@resultpage-breakpoint-small: (@results-width-min + @additions-width-min + @padding-small-default * 4);
-//
-@resultpage-leftbox-max-width: @results-width-max;
-@resultpage-leftbox-min-dist-left-right: @padding-small-default;
-@resultpage-leftbox-min-dist-top-bottom: @padding-small-default;
-//
-@logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
-//
-@sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
-//
 #header-logo {
     z-index: 0;
     padding-right: 10px;
diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less
index 295c9494076e5b4209cc4cb5cf45fc667a28fcd1..6464ccb60d21bbf01ef0b3443f3289bb2a939a40 100644
--- a/resources/assets/less/metager/searchbar.less
+++ b/resources/assets/less/metager/searchbar.less
@@ -1,6 +1,7 @@
 /* Suchleiste */
 
-@startpage-border-color: #a2a2a2;
+@import "./variables.less";
+@import "./cards.less";
 /**/
 
 .searchbar {
diff --git a/resources/assets/less/metager/settings.less b/resources/assets/less/metager/settings.less
index 5596a208808d6e0c1491f7ac8fe5153d3f0f2a04..10246596e5eef4cddd16a2569a2c1ee951dd54c0 100644
--- a/resources/assets/less/metager/settings.less
+++ b/resources/assets/less/metager/settings.less
@@ -1,5 +1,7 @@
 /* Einstellungen */
 
+@import "./variables.less";
+@import "./cards.less";
 @settings-abort-btn-color: white;
 #settings-buttons {
     margin-top: 10px;
diff --git a/resources/assets/less/metager/sidebar.less b/resources/assets/less/metager/sidebar.less
index dd7aec9d495210706b2b1d223c1c736962ed5fbd..f90cca8ec42eada535433d12196039d19e2070fe 100644
--- a/resources/assets/less/metager/sidebar.less
+++ b/resources/assets/less/metager/sidebar.less
@@ -1,5 +1,7 @@
 /* Navigations-Seitenleiste */
 
+@import "./variables.less";
+@import "./cards.less";
 .sidebar {
     border-left: 1px solid #ccc;
     box-shadow: 0px 1px 1.5px 1px #c0c0c0;
diff --git a/resources/assets/less/metager/start-page.less b/resources/assets/less/metager/start-page.less
index 378550993dfbdb076aad9f847a5e1dc90acb228f..ba1b113b1031cb3a113abf4b7c777b86f24d3558 100644
--- a/resources/assets/less/metager/start-page.less
+++ b/resources/assets/less/metager/start-page.less
@@ -1,5 +1,7 @@
 /* Startseite */
 
+@import "./variables.less";
+@import "./cards.less";
 @search-bar-width: 1000px;
 //
 @focus-hover-focus-edit-background-color: #e3e3e3;
diff --git a/resources/assets/less/metager/variables.less b/resources/assets/less/metager/variables.less
index 69fd93bd44f252d375c5ee02585209705d9878cf..27ed4e0f46d8bc37a309b630fd447fc7c532e5a8 100644
--- a/resources/assets/less/metager/variables.less
+++ b/resources/assets/less/metager/variables.less
@@ -18,7 +18,8 @@
 //
 @body-bg: rgb(250, 250, 250);
 @input-border-focus: @metager-orange;
-@font-family-sans-serif: Arimo, "Liberation Sans",
+@font-family-sans-serif: Arimo,
+"Liberation Sans",
 "Helvetica Neue",
 Helvetica,
 Arial,
@@ -27,6 +28,12 @@ sans-serif;
 @link-color: #0066CC;
 //
 @padding-small-default: 8px;
+/* Screen Sizes */
+
+@screen-xs-max: 767px;
+@screen-sm-max: 991;
+@screen-md-max: 1199px;
+@screen-lg: 1200;
 /* Unsorted */
 
 @quicktip-background-color: @color-white;
@@ -56,3 +63,35 @@ sans-serif;
 @product-price-background-color: fade(@color-white, 90%);
 @lsprev-or-lsnext-i-background-color: @color-black;
 @searchbar-background-color: white;
+//
+@startpage-border-color: #a2a2a2;
+//
+@resultpage-background-color: #FAFAFA;
+//
+@results-margin-left: 16px;
+//
+@result-page-body-background-color: @background-color;
+@result-page-a-hover-color: red;
+@result-page-product-shop-color: green;
+//
+@body-background-color: @result-page-body-background-color;
+@a-hover-color: @result-page-a-hover-color;
+@a-donation-hover-color: @result-page-a-hover-color;
+@product-shop-color: @result-page-product-shop-color;
+//
+@results-width-min: 500px;
+@results-width-max: 700px;
+@additions-width-min: 400px;
+@additions-width-max: 500px;
+//
+@resultpage-breakpoint-large: (@results-width-max + @additions-width-max + @padding-small-default * 4);
+@resultpage-breakpoint-small: (@results-width-min + @additions-width-min + @padding-small-default * 4);
+//
+@resultpage-leftbox-max-width: @results-width-max;
+@resultpage-leftbox-min-dist-left-right: @padding-small-default;
+@resultpage-leftbox-min-dist-top-bottom: @padding-small-default;
+//
+@logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
+//
+@sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
+//
\ No newline at end of file
diff --git a/resources/assets/less/metager/widget.less b/resources/assets/less/metager/widget.less
index 37f6514edbfa95a2d786e17fa99ecfeb2f2f8842..8cb729d8678bffdd0807ab13e19fcec0b17c75fd 100644
--- a/resources/assets/less/metager/widget.less
+++ b/resources/assets/less/metager/widget.less
@@ -1,3 +1,5 @@
+@import "./variables.less";
+@import "./cards.less";
 .metager-searchinput {
     height: 30px;
     float: left;
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 947310b4382a138ea23697c3f61614e20b91a91f..06235dd060489cd2e2c3729818bba5aca89f0fde 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -2,6 +2,10 @@
 
 @section('title', $title )
 
+@section('stylesheets')
+	<link type="text/css" rel="stylesheet" href="{{ mix('css/start-page.css') }}" />
+@endsection
+
 @section('content')
 	@include('modals.plugin-modal')
 	<h1 id="startpage-logo">
diff --git a/resources/views/layouts/resultPage.blade.php b/resources/views/layouts/resultPage.blade.php
index ad6d1af8fd169b925347221e4349ebf558524584..1b3e78d1b833a78dfa6f4c28d69b0c3e722702de 100644
--- a/resources/views/layouts/resultPage.blade.php
+++ b/resources/views/layouts/resultPage.blade.php
@@ -12,7 +12,11 @@
 		<meta name="mm" content="{{ $metager->getVerificationId() }}" />
 		<meta name="mn" content="{{ $metager->getVerificationCount() }}" />
 		<link rel="search" type="application/opensearchdescription+xml" title="{!! trans('resultPage.opensearch') !!}" href="{{  LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), action('StartpageController@loadPlugin', ['params' => base64_encode(serialize(Request::all()))])) }}">
-		<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/default.css') }}" />
+		<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" href="{{ mix('css/bootstrap.css') }}" />
+		<link type="text/css" rel="stylesheet" href="{{ mix('css/metager.css') }}" />
+		<link type="text/css" rel="stylesheet" href="{{ mix('css/result-page.css') }}" />
 		<link type="text/css" rel="stylesheet" href="/fonts/arimo/stylesheet.css" />
 		<meta name="referrer" content="origin">
 		<meta name="age-meta-label" content="age=18"/>
diff --git a/resources/views/layouts/staticPages.blade.php b/resources/views/layouts/staticPages.blade.php
index c55905c8bd46af985dc90a7c41d1b2257a3c101e..fdd80c76825274e9b4f3b2a579ae2ba9209240bc 100644
--- a/resources/views/layouts/staticPages.blade.php
+++ b/resources/views/layouts/staticPages.blade.php
@@ -14,8 +14,12 @@
 		<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
 		<link rel="search" type="application/opensearchdescription+xml" title="{{ trans('staticPages.opensearch') }}" href="{{  LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), action('StartpageController@loadPlugin', ['params' => base64_encode(serialize(Request::all()))])) }}">
 		<link type="text/css" rel="stylesheet" href="/fonts/arimo/stylesheet.css" />
-		<link type="text/css" rel="stylesheet" href="{{ mix('css/themes/default.css') }}" />
+		<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" href="{{ mix('css/bootstrap.css') }}" />
+		<link type="text/css" rel="stylesheet" href="{{ mix('css/metager.css') }}" />
 		<link type="text/css" rel="stylesheet" href="{{ mix('css/utility.css') }}" />
+		@yield('stylesheets')
 		<script src="{{ mix('js/lib.js') }}"></script>
 		<script src="{{ mix('js/utility.js') }}"></script>
 		@if (isset($css))
diff --git a/resources/views/modals/create-focus-modal.blade.php b/resources/views/modals/create-focus-modal.blade.php
index 0dcb2df0fe80838370ad717c8c3e360171a8904c..ef1cf7a69a611648109f19de104e79b64ff38430 100644
--- a/resources/views/modals/create-focus-modal.blade.php
+++ b/resources/views/modals/create-focus-modal.blade.php
@@ -1,3 +1,4 @@
+<link type="text/css" rel="stylesheet" href="{{ mix('css/modals.css') }}" />
 <input type="checkbox" id="show-create-focus" class="hidden">
 <div class="metager-modal" id="create-focus-modal" role="dialog">
 	<div class="metager-modal-dialog">
@@ -22,7 +23,7 @@
 				<form id="customSearchForm" method="GET" action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3 ") }}" accept-charset="UTF-8">
 					<input type="hidden" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif">
 					<input type="hidden" name="encoding" value="utf8">
-					<input type="hidden" name="focus" value="focus_custom">																			
+					<input type="hidden" name="focus" value="focus_custom">
 					@foreach( App\Http\Controllers\FokiLoader::loadFoki() as $fokus => $sumas )
 						<div class="headingGroup {{ $fokus }}">
 							<input type="checkbox" id="toggle-{{ $fokus }}-dropdown" class="focus-dropdown-toggle" checked>
@@ -57,4 +58,4 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/views/modals/plugin-modal.blade.php b/resources/views/modals/plugin-modal.blade.php
index aa112c261b5529fea39c2a885e8e027b13bd78c5..2d35fcca9e1d64daee410dfc2e9b2d1850bed911 100644
--- a/resources/views/modals/plugin-modal.blade.php
+++ b/resources/views/modals/plugin-modal.blade.php
@@ -1,3 +1,5 @@
+
+<link type="text/css" rel="stylesheet" href="{{ mix('css/modals.css') }}" />
 <input type="checkbox" id="plugin-modal-checkbox" class="hidden" @if( isset($pluginmodal) && $pluginmodal == 'on') checked @endif>
 <div class="metager-modal" id="plugin-modal" role="dialog">
 		<div class="metager-modal-dialog ">
diff --git a/resources/views/parts/sidebar.blade.php b/resources/views/parts/sidebar.blade.php
index b32363cd0fa1094cec96ecb96eb902a9280325f3..f2b9957626fb23473a5f4eea539c56d2a3bfd8f5 100644
--- a/resources/views/parts/sidebar.blade.php
+++ b/resources/views/parts/sidebar.blade.php
@@ -1,3 +1,4 @@
+<link type="text/css" rel="stylesheet" href="{{ mix('css/sidebar.css') }}" />
 <input id="sidebarToggle" class="hidden" type="checkbox">
 <div class="sidebar">
   <a class="sidebar-logo" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
diff --git a/resources/views/settings.blade.php b/resources/views/settings.blade.php
index f0bbca1d5b0f14d67ddee800bded472020e7cf5c..5c261dad418629297380a4b73805ec51d5a7c8e2 100644
--- a/resources/views/settings.blade.php
+++ b/resources/views/settings.blade.php
@@ -2,6 +2,10 @@
 
 @section('title', $title )
 
+@section('stylesheets')
+	<link type="text/css" rel="stylesheet" href="{{ mix('css/settings.css') }}" />
+@endsection
+
 @section('content')
 	<form id="settings-form" action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}" method="get">
 		<h1>{!! trans('settings.head.1') !!}</h1>
diff --git a/webpack.mix.js b/webpack.mix.js
index 5607e98dc82e175cb2aa68904f38fc64781db332..3cb8f6e536fe50ba580859166893043001638ec5 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,31 +1,59 @@
 let mix = require("laravel-mix");
 
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel application. By default, we are compiling the Sass
- | file for the application as well as bundling up all the JS files.
- |
- */
-
 mix
   // css
-  .less("resources/assets/less/default.less", "public/css/themes/default.css", {
+  .less("resources/assets/less/metager.less", "public/css/metager.css", {
     strictMath: true
   })
   .less(
     "resources/assets/less/metager/beitritt.less",
-    "public/css/beitritt.css",
-    {
+    "public/css/beitritt.css", {
       strictMath: true
     }
   )
   .less("resources/assets/less/utility.less", "public/css/utility.css", {
     strictMath: true
   })
+  .less("resources/assets/less/bootstrap/bootstrap.less", "public/css/bootstrap.css", {
+    strictMath: true
+  })
+  .less("resources/assets/less/font-awesome/fontawesome.less", "public/css/fontawesome.css", {
+    strictMath: true
+  })
+  .less("resources/assets/less/font-awesome/solid.less", "public/css/fontawesome-solid.css", {
+    strictMath: true
+  })
+  /* Site specific less files */
+  .less("resources/assets/less/metager/result-page.less", "public/css/result-page.css", {
+    strictMath: true
+  })
+  .less("resources/assets/less/metager/start-page.less", "public/css/start-page.css", {
+    strictMath: true
+  })
+  .less("resources/assets/less/metager/settings.less", "public/css/settings.css", {
+    strictMath: true
+  })
+  .less("resources/assets/less/metager/variables.less", "public/css/variables.css", {
+    strictMath: true
+  })
+  .less("resources/assets/less/metager/sidebar.less", "public/css/sidebar.css", {
+    strictMath: true
+  })
+  .less("resources/assets/less/metager/modals.less", "public/css/modals.css", {
+    strictMath: true
+  })
+  .less("resources/assets/less/metager/footer.less", "public/css/footer.css", {
+    strictMath: true
+  })
+  .less("resources/assets/less/metager/searchbar.less", "public/css/searchbar.css", {
+    strictMath: true
+  })
+  .less("resources/assets/less/metager/aufruf-winter.less", "public/css/aufruf-winter.css", {
+    strictMath: true
+  })
+  .less("resources/assets/less/metager/widget.less", "public/css/widget.css", {
+    strictMath: true
+  })
   // js
   .babel(
     [
@@ -66,4 +94,4 @@ mix
   // source maps
   .sourceMaps(false, "inline-source-map")
   // versioning
-  .version();
+  .version();
\ No newline at end of file