diff --git a/resources/js/scriptSettings.js b/resources/js/scriptSettings.js
new file mode 100644
index 0000000000000000000000000000000000000000..144a2ce85ce0db74d07d8ef35c0312e39c6e1731
--- /dev/null
+++ b/resources/js/scriptSettings.js
@@ -0,0 +1,7 @@
+$(document).ready(function () {
+    $("#filter-form").find("button[type=submit]").css("display", "none");
+    $("#filter-form").find("select").on("change", function () {
+        $("#filter-form").submit();
+    });
+    console.log("Test");
+});
\ No newline at end of file
diff --git a/resources/less/metager/metager.less b/resources/less/metager/metager.less
index 32137ee5e1eb71190a821a119e43687e4578e27e..edbe70c98e5312f06282cb485062b1febc6d2c22 100644
--- a/resources/less/metager/metager.less
+++ b/resources/less/metager/metager.less
@@ -13,6 +13,7 @@
 @import "./pages/resultpage.less";
 @import "./pages/start-page.less";
 @import "./pages/widget.less";
+@import "./pages/settings.less";
 // Parts
 @import "./parts/aufruf-winter.less";
 @import "./parts/footer.less";
diff --git a/resources/less/metager/pages/settings.less b/resources/less/metager/pages/settings.less
new file mode 100644
index 0000000000000000000000000000000000000000..02b4bb610b75a0c83efda94f1763257d3d64842e
--- /dev/null
+++ b/resources/less/metager/pages/settings.less
@@ -0,0 +1,44 @@
+#settings {
+    .sumas {
+        display: flex;
+        flex-wrap: wrap;
+        margin-left: -8px;
+        .suma button {
+            padding: 8px;
+            margin-left: 8px;
+            margin-top: 8px;
+            border-radius: 4px;
+        }
+        &.enabled-engines .suma button {
+            background-color: #9ad79a;
+        }
+        &.disabled-engines .suma button {
+            background-color: #fea0a0;
+        }
+        &.filtered-engines .suma{
+            background-color: #bababa;
+            padding: 8px;
+            margin-left: 8px;
+            margin-top: 8px;
+            border-radius: 4px;
+        }
+    }
+
+    #filter-options {
+        display: flex;
+        flex-wrap: wrap;
+        margin-left: -8px;
+        > div {
+            margin-left: 8px;
+        }
+    }
+
+    #actions {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        #back {
+            margin-left: 8px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/views/settings.blade.php b/resources/views/settings.blade.php
deleted file mode 100644
index f0bbca1d5b0f14d67ddee800bded472020e7cf5c..0000000000000000000000000000000000000000
--- a/resources/views/settings.blade.php
+++ /dev/null
@@ -1,60 +0,0 @@
-@extends('layouts.subPages')
-
-@section('title', $title )
-
-@section('content')
-	<form id="settings-form" action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}" method="get">
-		<h1>{!! trans('settings.head.1') !!}</h1>
-		<p id="lead">{!! trans('settings.head.2') !!}</p>
-		<h2>{!! trans('settings.allgemein.1') !!}</h2>
-		<div id="settings-selectors">
-			<div>
-				<label class="select-label">@lang("settings.quotes.label")</label>
-				<select class="form-control settings-form-control" name="param_sprueche">
-					<option value="on" selected>@lang("settings.quotes.on")</option>
-					<option value="off">@lang("settings.quotes.off")</option>
-				</select>
-			</div>
-			<div>
-				<label class="select-label">@lang("settings.tab.label")</label>
-				<select class="form-control settings-form-control" name="param_newtab">
-					<option value="on" selected>@lang("settings.tab.new")</option>
-					<option value="off">@lang("settings.tab.same")</option>
-				</select>
-			</div>
-			<div>
-				<label class="select-label">{!! trans('settings.language.label') !!}</label>
-				<select class="form-control settings-form-control" name="param_lang">
-					<option value="all" @if(App::isLocale('de')) selected @endif >{!! trans('settings.language.all') !!}</option>
-					<option value="de">{!! trans('settings.language.de') !!}</option>
-					<option value="en" @if(App::isLocale('en')) selected @endif>{!! trans('settings.language.en') !!}</option>
-				</select>
-			</div>
-			<div>
-				<label class="select-label">{{ trans('settings.request') }}:</label>
-				<select class="form-control settings-form-control" name="request">
-					<option value="GET" selected>GET</option>
-					<option value="POST">POST</option>
-				</select>
-			</div>
-			<div>
-				<label class="select-label">@lang('settings.autocomplete.label'):</label>
-				<select class="form-control settings-form-control" name="param_autocomplete">
-					<option value="on" selected>@lang('settings.autocomplete.on')</option>
-					<option value="off">@lang('settings.autocomplete.off')</option>
-				</select>
-			</div>
-			<div>
-				<label class="select-label">@lang('settings.key.label'):</label>
-				<input type="text" class="form-control settings-form-control" name="param_key" placeholder="@lang('settings.key.placeholder')">
-			</div>
-		</div>
-		<div id="settings-buttons">
-			<a id="settings-abort-btn" class="btn btn-danger mutelink" href="{{ URL::previous() }}">@lang('settings.abort') <i class="fa fa-times" aria-hidden="true"></i></a>
-			<input id="unten" class="btn btn-primary" type="submit" value="{!! trans('settings.speichern.1') !!}">
-			<input id="save" class="btn btn-primary hidden" type="button" data-href="{{ URL::previous() }}" value="{!! trans('settings.speichern.2') !!}">
-			<input id="plugin" class="btn btn-primary" type="submit" value="{!! trans('settings.speichern.3') !!}">
-		</div>
-	</form>
-	<script src="{{ mix('js/settings.js') }}"></script>
-@endsection
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index ed52e6e587db016f57fce380555982463bbafaca..7397b154ec5bb82b2276debc5af69479d24c68be 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -3,141 +3,96 @@
 @section('title', $title )
 
 @section('content')
-<div class="card-light">
-    <h2>Sucheinstellungen ({{ $fokusName }})</h2>
-    <p>Hier können Sie Sucheinstellungen für Ihre MetaGer Suche im Fokus {{ $fokusName }} vornehmen. Diese bleiben solange gespeichert, wie Sie Cookies im Browser speichern.</p>
-</div>
-<div class="card-light">
-    <h2>Verwendete Suchmaschinen</h2>
-    <p>Nachfolgend sehen Sie alle für diesen Fokus verfügbaren Suchmaschinen. Mit einem Klick auf den Namen können Sie Ein-/Ausgeschaltet werden. Eingeschaltete Suchmaschinen sind in grün dargestellt. Ausgeschaltete in rot oder grau.</p>
-    <p></p>
-    <div class="sumas enabled-engines">
-        @foreach($sumas as $suma => $sumaInfo)
-        @if(! $sumaInfo["filtered"] && $sumaInfo["enabled"])
-            <div class="suma">
-                <form action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('disableEngine')) }}" method="post">
-                    <input type="hidden" name="suma" value="{{ $suma }}">
-                    <input type="hidden" name="fokus" value="{{ $fokus }}">
-                    <input type="hidden" name="url" value="{{ $url }}">
-                    <button type="submit">{{ $sumaInfo["display-name"] }}</button>
-                </form>
-            </div>
-        @endif
-        @endforeach
-    </div>
-    <div class="sumas disabled-engines">
-        @foreach($sumas as $suma => $sumaInfo)
-        @if( !$sumaInfo["filtered"] && !$sumaInfo["enabled"])
-            <div class="suma">
-                <form action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('enableEngine')) }}" method="post">
-                    <input type="hidden" name="suma" value="{{ $suma }}">
-                    <input type="hidden" name="fokus" value="{{ $fokus }}">
-                    <input type="hidden" name="url" value="{{ $url }}">
-                    <button type="submit">{{ $sumaInfo["display-name"] }}</button>
-                </form>
-            </div>
-        @endif
-        @endforeach
+<div id="settings">
+    <div class="card-light">
+        <h2>Sucheinstellungen ({{ $fokusName }})</h2>
+        <p>Hier können Sie Sucheinstellungen für Ihre MetaGer Suche im Fokus {{ $fokusName }} vornehmen. Diese bleiben solange gespeichert, wie Sie Cookies im Browser speichern.</p>
     </div>
-    @if($filteredSumas)
-    <h4>Durch Suchfilter deaktiviert:</h4>
-    <div class="sumas filtered-engines">
-        @foreach($sumas as $suma => $sumaInfo)
-        @if($sumaInfo["filtered"])
-            <div class="suma">
-                {{ $sumaInfo["display-name"] }}
-            </div>
-        @endif
-        @endforeach
-    </div>
-    @endif
-</div>
-<div class="card-light">
-    <h2>Suchfilter</h2>
-    <p>An dieser Stelle können Sie Suchfilter dauerhaft setzen. Mit der Auswahl eines Suchfilters stehen nur noch Suchmaschinen zur Verfügung, welche diesen Filter unterstützen. Umgekehrt werden auch nur Suchfilter angezeigt, welche von der aktuellen Suchmaschinenauswahl unterstützt werden.</p>
-    <form id="filter-form" action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('enableFilter')) }}" method="post" class="form">
-        <input type="hidden" name="fokus" value="{{ $fokus }}">
-        <input type="hidden" name="url" value="{{ $url }}">
-        <div id="filter-options">
-            @foreach($filter as $name => $filterInfo)
-            <div class="form-group">
-                <label for="{{ $filterInfo->{"get-parameter"} }}">@lang($filterInfo->name)</label>
-                <select name="{{ $filterInfo->{"get-parameter"} }}" id="{{ $filterInfo->{"get-parameter"} }}" class="form-control">
-                    <option value="" @if(Cookie::get($fokus . "_setting_" . $filterInfo->{"get-parameter"}) === null)disabled selected @endif>Beliebig</option>
-                    @foreach($filterInfo->values as $key => $value)
-                    @if(!empty($key))
-                    <option value="{{ $key }}" {{ Cookie::get($fokus . "_setting_" . $filterInfo->{"get-parameter"}) === $key ? "disabled selected" : "" }}>@lang($value)</option>
-                    @endif
-                    @endforeach
-                </select>
-            </div>
+    <div class="card-light">
+        <h2>Verwendete Suchmaschinen</h2>
+        <p>Nachfolgend sehen Sie alle für diesen Fokus verfügbaren Suchmaschinen. Mit einem Klick auf den Namen können Sie Ein-/Ausgeschaltet werden. Eingeschaltete Suchmaschinen sind in grün dargestellt. Ausgeschaltete in rot oder grau.</p>
+        <p></p>
+        <div class="sumas enabled-engines">
+            @foreach($sumas as $suma => $sumaInfo)
+            @if(! $sumaInfo["filtered"] && $sumaInfo["enabled"])
+                <div class="suma">
+                    <form action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('disableEngine')) }}" method="post">
+                        <input type="hidden" name="suma" value="{{ $suma }}">
+                        <input type="hidden" name="fokus" value="{{ $fokus }}">
+                        <input type="hidden" name="url" value="{{ $url }}">
+                        <button type="submit">{{ $sumaInfo["display-name"] }}</button>
+                    </form>
+                </div>
+            @endif
             @endforeach
         </div>
-        <button type="submit" class="btn btn-default">Speichern</button>
-    </form>
-
-</div>
-<div class="card-light" id="actions">
-    @if($settingActive)
-    <div id="reset">
-        <form action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('deleteSettings', ["fokus" => $fokus, "url" => $url])) }}" method="post">
-            <input type="hidden" name="url" value="{{ $url }}">
+        <div class="sumas disabled-engines">
+            @foreach($sumas as $suma => $sumaInfo)
+            @if( !$sumaInfo["filtered"] && !$sumaInfo["enabled"])
+                <div class="suma">
+                    <form action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('enableEngine')) }}" method="post">
+                        <input type="hidden" name="suma" value="{{ $suma }}">
+                        <input type="hidden" name="fokus" value="{{ $fokus }}">
+                        <input type="hidden" name="url" value="{{ $url }}">
+                        <button type="submit">{{ $sumaInfo["display-name"] }}</button>
+                    </form>
+                </div>
+            @endif
+            @endforeach
+        </div>
+        @if($filteredSumas)
+        <h4>Durch Suchfilter deaktiviert:</h4>
+        <div class="sumas filtered-engines">
+            @foreach($sumas as $suma => $sumaInfo)
+            @if($sumaInfo["filtered"])
+                <div class="suma">
+                    {{ $sumaInfo["display-name"] }}
+                </div>
+            @endif
+            @endforeach
+        </div>
+        @endif
+    </div>
+    <div class="card-light">
+        <h2>Suchfilter</h2>
+        <p>An dieser Stelle können Sie Suchfilter dauerhaft setzen. Mit der Auswahl eines Suchfilters stehen nur noch Suchmaschinen zur Verfügung, welche diesen Filter unterstützen. Umgekehrt werden auch nur Suchfilter angezeigt, welche von der aktuellen Suchmaschinenauswahl unterstützt werden.</p>
+        <form id="filter-form" action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('enableFilter')) }}" method="post" class="form">
             <input type="hidden" name="fokus" value="{{ $fokus }}">
-            <button type="submit" class="btn btn-sm btn-danger">Alle Einstellungen löschen</button>
+            <input type="hidden" name="url" value="{{ $url }}">
+            <div id="filter-options">
+                @foreach($filter as $name => $filterInfo)
+                <div class="form-group">
+                    <label for="{{ $filterInfo->{"get-parameter"} }}">@lang($filterInfo->name)</label>
+                    <select name="{{ $filterInfo->{"get-parameter"} }}" id="{{ $filterInfo->{"get-parameter"} }}" class="form-control">
+                        <option value="" @if(Cookie::get($fokus . "_setting_" . $filterInfo->{"get-parameter"}) === null)disabled selected @endif>Beliebig</option>
+                        @foreach($filterInfo->values as $key => $value)
+                        @if(!empty($key))
+                        <option value="{{ $key }}" {{ Cookie::get($fokus . "_setting_" . $filterInfo->{"get-parameter"}) === $key ? "disabled selected" : "" }}>@lang($value)</option>
+                        @endif
+                        @endforeach
+                    </select>
+                </div>
+                @endforeach
+            </div>
+            <button type="submit" class="btn btn-default">Speichern</button>
         </form>
+
     </div>
-    @endif
-    <div id="back">
-        <a href="{{ $url }}" class="btn btn-sm btn-default">Zurück zur letzten Seite</a>
+    <div class="card-light" id="actions">
+        @if($settingActive)
+        <div id="reset">
+            <form action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('deleteSettings', ["fokus" => $fokus, "url" => $url])) }}" method="post">
+                <input type="hidden" name="url" value="{{ $url }}">
+                <input type="hidden" name="fokus" value="{{ $fokus }}">
+                <button type="submit" class="btn btn-sm btn-danger">Alle Einstellungen löschen</button>
+            </form>
+        </div>
+        @endif
+        <div id="back">
+            <a href="{{ $url }}" class="btn btn-sm btn-default">Zurück zur letzten Seite</a>
+        </div>
     </div>
-</div>
-<style>
-    .sumas {
-        display: flex;
-        flex-wrap: wrap;
-        margin-left: -8px;
-    }
-    .sumas .suma button, .sumas.filtered-engines .suma {
-        padding: 8px;
-        margin-left: 8px;
-        margin-top: 8px;
-        border-radius: 4px;
-    }
-    .sumas.enabled-engines .suma button {
-        background-color: #9ad79a;
-    }
-    .sumas.disabled-engines .suma button {
-        background-color: #fea0a0;
-    }
-
-    .sumas.filtered-engines .suma{
-        background-color: #bababa;
-    }
-    #filter-options {
-        display: flex;
-        flex-wrap: wrap;
-        margin-left: -8px;
-    }
-    #filter-options > div {
-        margin-left: 8px;
-    }
 
-    #actions {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    #actions #back {
-        margin-left: 8px;
-    }
-</style>
-<script>
-    $(document).ready(function(){
-        $("#filter-form").find("button[type=submit]").css("display", "none");
-        $("#filter-form").find("select").on("change", function(){
-            $("#filter-form").submit();
-        });
-        console.log("Test");
-    });
-</script>
+    <script src="{{ mix('js/scriptSettings.js') }}"></script>
+</div>
 @endsection
diff --git a/webpack.mix.js b/webpack.mix.js
index b1958e40df88d14bfda3213a3bd32e864944df0e..19f67149574b8f6713986de5bb28109b9580ea11 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -57,6 +57,12 @@ mix
     ],
     "public/js/scriptStartPage.js"
   )
+  .babel(
+    [
+      "resources/js/scriptSettings.js"
+    ],
+    "public/js/scriptSettings.js"
+  )
   .babel(
     [
       "resources/js/scriptResultPage.js",