diff --git a/resources/assets/less/metager/foki.less b/resources/assets/less/metager/foki.less
deleted file mode 100644
index 53d7279892a2a4e5e7245d640d79a607b3be715f..0000000000000000000000000000000000000000
--- a/resources/assets/less/metager/foki.less
+++ /dev/null
@@ -1,82 +0,0 @@
-/* Rund ums Fokus Modal */
-
-#show-create-focus:checked {
-    &+#create-focus-modal {
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-    }
-}
-
-#create-focus-modal {
-    display: none;
-    position: fixed;
-    -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, .7)), to(rgba(0, 0, 0, .7)));
-    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7));
-    z-index: 150;
-    #foki-modal-dialog {
-        background-color: white;
-        max-width: 700px;
-        margin: 30px auto;
-        height: 90vh;
-        overflow-y: auto;
-        #foki-modal-content {
-            #foki-modal-header {
-                padding: 15px;
-                position: relative;
-                border-bottom: 1px solid #e5e5e5;
-                #close-create-focus {
-                    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;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/resources/assets/less/metager/footer.less b/resources/assets/less/metager/footer.less
index 0fe236e28a102a790eb23a195a06903123693b3f..347197d1bc218f39d3a73bdea88515ac0d5b6776 100644
--- a/resources/assets/less/metager/footer.less
+++ b/resources/assets/less/metager/footer.less
@@ -5,14 +5,19 @@ footer {
     width: 100%;
     background-color: inherit;
     display: flex;
+    flex-direction: column;
     justify-content: space-around;
     white-space: pre-line;
     align-items: center;
     div {
-        text-align: center;
-        margin-left: 10px;
-        &:first-child {
-            margin-left: 0px;
+        display: flex;
+        flex-direction: row;
+        &>* {
+            padding: 0px 10px;
+            border-left: 1px solid #aaa;
+        }
+        &>:first-child {
+            border-left: none;
         }
     }
     img {
@@ -29,8 +34,4 @@ footer {
             display: none;
         }
     }
-    #info {
-        display: flex;
-        flex-direction: column;
-    }
 }
\ No newline at end of file
diff --git a/resources/assets/less/metager/metager.less b/resources/assets/less/metager/metager.less
index 5ed01cb8ffa4e6089f6d9ad42a737cd19d6df722..1351c3a8e588c33f8ff13a04a624abc260ccf754 100644
--- a/resources/assets/less/metager/metager.less
+++ b/resources/assets/less/metager/metager.less
@@ -5,7 +5,7 @@
 @import "./settings.less";
 @import "./variables.less";
 @import "./sidebar.less";
-@import "./foki.less";
+@import "./modals.less";
 @import "./footer.less";
 @import "./searchbar.less";
 @import "./aufruf-winter.less";
diff --git a/resources/assets/less/metager/modals.less b/resources/assets/less/metager/modals.less
new file mode 100644
index 0000000000000000000000000000000000000000..c1261b7f026d0395431af3f79a9e3c9d8d48de6b
--- /dev/null
+++ b/resources/assets/less/metager/modals.less
@@ -0,0 +1,96 @@
+/* Rund ums Fokus Modal */
+
+#show-create-focus:checked {
+  & + #create-focus-modal {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+#show-plugin-modal:checked {
+  & + #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: " âž– ";
+          }
+        }
+      }
+      .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;
+        }
+      }
+    }
+  }
+}
diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less
index e3a41ba771b5a0b463dbfc4e8af0a69113230688..dabf8bc788721978e9df1f2588c17cfaa2266cd8 100644
--- a/resources/assets/less/metager/searchbar.less
+++ b/resources/assets/less/metager/searchbar.less
@@ -1,5 +1,8 @@
 /* Suchleiste */
 
+@startpage-border-color: #a2a2a2;
+/**/
+
 .searchbar {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -24,33 +27,66 @@
         display: -ms-flexbox;
         display: flex;
         max-width: 600px;
-    }
-    .search-input {
-        -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-        flex-grow: 1;
-        input {
-            border: none;
-            border-bottom: none;
-            height: 40px;
-            -webkit-box-shadow: none;
-            box-shadow: none;
-            &:focus {
-                outline-color: @metager-orange;
-                -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
-                box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
-                border-color: rgba(255, 128, 0, 1);
+        .search-key {
+            display: flex;
+            z-index: 1;
+            #input-key {
+                margin: 0;
+                padding: 0px;
+                border: none;
+                box-shadow: none;
+                height: 40px;
+                width: 0px;
+                &:focus {
+                    width: 200px;
+                    padding: 6px 10px 6px 10px;
+                    outline-color: @metager-orange;
+                    -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
+                    box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
+                    border-color: rgba(255, 128, 0, 1);
+                    border-radius: 4px;
+                    +#key-label {
+                        display: none;
+                    }
+                }
+            }
+            #key-label {
+                cursor: pointer;
+                height: 40px;
+                width: 40px;
+                margin: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
         }
-    }
-    .search-submit {
-        button {
-            width: 50px;
-            line-height: 100%;
-            border: 0;
-            background-color: transparent;
-            padding: 0;
-            height: 100%;
+        .search-input {
+            -webkit-box-flex: 1;
+            -ms-flex-positive: 1;
+            flex-grow: 1;
+            input {
+                border: none;
+                height: 40px;
+                -webkit-box-shadow: none;
+                box-shadow: none;
+                &:focus {
+                    outline-color: @metager-orange;
+                    -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
+                    box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
+                    border-color: rgba(255, 128, 0, 1);
+                    border-radius: 4px;
+                }
+            }
+        }
+        .search-submit {
+            button {
+                width: 50px;
+                line-height: 100%;
+                border: 0;
+                background-color: transparent;
+                padding: 0;
+                height: 100%;
+            }
         }
     }
     .search-hidden {
@@ -69,7 +105,7 @@
 
 .startpage-searchbar {
     >* {
-        border: 1px solid #a2a2a2;
+        border: 1px solid @startpage-border-color;
         &:not(:first-child) {
             border-left: none;
         }
@@ -79,9 +115,12 @@
         @media (max-width: @screen-xs-max) {
             max-width: initial;
         }
-    }
-    .search-submit {
-        border-left: 1px solid #aaa;
+        .search-key {
+            border-right: 1px solid @startpage-border-color;
+        }
+        .search-submit {
+            border-left: 1px solid #aaa;
+        }
     }
     @media (max-width: @screen-xs-max) {
         .search-focus-selector {
diff --git a/resources/lang/de/footer.php b/resources/lang/de/footer.php
index e368a0fcc85378a74563e528faee9f93329d29ca..aaebf673810792a4d8c89e81bb03a5e3b91f35d3 100644
--- a/resources/lang/de/footer.php
+++ b/resources/lang/de/footer.php
@@ -1,6 +1,6 @@
 <?php
 
 return [
-    'sumaev.1' => 'MetaGer wird entwickelt und betrieben vom ',
-    'sumaev.2' => 'SUMA-EV - Verein für freien Wissenszugang.',
+    'sumaev.1' => 'Ein Projekt des',
+    'sumaev.2' => 'SUMA-EV',
 ];
diff --git a/resources/lang/de/index.php b/resources/lang/de/index.php
index cd1b849d377ae59a2f02b349c240278d0d8a14d5..7062602dc65b5c5203143b745fcd2de1d142ad52 100644
--- a/resources/lang/de/index.php
+++ b/resources/lang/de/index.php
@@ -26,7 +26,7 @@ return [
     'focus-creator.focusname'        => 'Suchname: ',
 
     'slogan.title'                   => 'Besser&nbsp;suchen, schneller&nbsp;finden',
-    'slogan.1'                       => '<a href="/datenschutz">Datenschutz & Privatsphäre</a>: Bei uns einfach und selbstverständlich.<br>Wir arbeiten nicht gewinnorientiert, wir sind ein gemeinnütziger <a href="/spende">Verein</a>: <a href="/beitritt">Werden Sie Mitglied</a>!',
+    'slogan.1'                       => 'Datenschutz & Privatsphäre: Bei uns einfach und selbstverständlich.<br>Wir arbeiten nicht gewinnorientiert, wir sind ein gemeinnütziger Verein: <a href="/beitritt">Werden Sie Mitglied</a> oder <a href="/spende">spenden Sie</a>!',
     'slogan.2'                       => 'Mit MetaGer bewahren Sie einen neutralen Blick auf’s Web!',
 
 
@@ -41,6 +41,7 @@ return [
     'about.2.1'                      => 'Wir arbeiten nicht gewinnorientiert, wir sind ein <a href="/spende">gemeinnütziger Verein</a>: <a href="/beitritt">Werden Sie Mitglied!</a>',
     'about.3.1'                      => '',
 
+    'key.placeholder'                => 'Mitglieder Key eingeben',
     'placeholder'                    => 'MetaGer: Sicher suchen & finden, Privatsphäre schützen',
 
     'plugin.head.1'                  => 'MetaGer zum Firefox hinzufügen',
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index c653fb8da62fcdc0182ece8bf9266a9d2e1c3461..1e05af4e094b4a068ffd9ffcd704995de10c30af 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -1,14 +1,16 @@
-@extends('layouts.indexPage')
+@extends('layouts.staticPages', ['page' => 'startpage'])
 
 @section('title', $title )
 
 @section('content')
-	@include('modals.create-focus-modal')
 	@include('modals.plugin-modal')
 	<h1 id="startpage-logo">
 		<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">MetaGer</a>
 	</h1>
 	@include('parts.searchbar', ['class' => 'startpage-searchbar'])
+	<div>
+	<label for="show-plugin-modal" role="button" class="btn btn-default" title="MetaGer zu Ihrem Browser hinzufügen"><i class="fa fa-plug" aria-hidden="true"></i> MetaGer-Plugin hinzufügen</a>
+	</div>
 	<script type="text/javascript" src="{{ mix('js/scriptStartPage.js') }}"></script>
 	<script type="text/javascript" src="{{ mix('js/searchbar.js') }}"></script>
 @endsection
diff --git a/resources/views/layouts/indexPage.blade.php b/resources/views/layouts/indexPage.blade.php
deleted file mode 100644
index fc3ee746b88e63df92ae17c22f4aaab4e0dd05b4..0000000000000000000000000000000000000000
--- a/resources/views/layouts/indexPage.blade.php
+++ /dev/null
@@ -1 +0,0 @@
-@extends('layouts.staticPages', ['page' => 'startpage'])
diff --git a/resources/views/modals/create-focus-modal.blade.php b/resources/views/modals/create-focus-modal.blade.php
index 7a355a3727cb62309059720a1cc9d9811f371a40..8a68de53b5a6fb6d4e8adfc6e32b867ee1ccc5a5 100644
--- a/resources/views/modals/create-focus-modal.blade.php
+++ b/resources/views/modals/create-focus-modal.blade.php
@@ -1,9 +1,9 @@
 <input type="checkbox" id="show-create-focus" class="hidden">
-<div id="create-focus-modal" tab-index="-1" role="dialog">
-	<div id="foki-modal-dialog">
-		<div id="foki-modal-content">
-			<div id="foki-modal-header">
-				<label type="button" id="close-create-focus" role= "button" for="show-create-focus"></label>
+<div class="metager-modal" id="create-focus-modal" tab-index="-1" role="dialog">
+	<div class="metager-modal-dialog">
+		<div class="metager-modal-content">
+			<div class="metager-modal-header">
+				<label type="button" class="close-metager-modal" role= "button" for="show-create-focus"></label>
 				<h4>
 					@lang("index.focus-creator.head")
 				</h4>
diff --git a/resources/views/modals/plugin-modal.blade.php b/resources/views/modals/plugin-modal.blade.php
index 5b3f0e9a2acb66a16f561e9707e98f94982af899..8c28dd5a5777a76e99137296c2a111cd228d9cac 100644
--- a/resources/views/modals/plugin-modal.blade.php
+++ b/resources/views/modals/plugin-modal.blade.php
@@ -1,140 +1,140 @@
-<div class="modal fade" id="plugin-modal" tab-index="-1" role="dialog">
-	<div class="modal-dialog ">
-		<div class="content modal-content">
-			<div class="modal-header">
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-				</button>
-				<h4>
-					@if ($browser === 'Firefox' || $browser === 'Mozilla') 
-						{{ trans('index.plugin.head.1') }}
+<input type="checkbox" id="show-plugin-modal" class="hidden">
+<div class="metager-modal" id="plugin-modal" tab-index="-1" role="dialog">
+		<div class="metager-modal-dialog ">
+			<div class="metager-modal-content">
+				<div class="metager-modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+					<h4>
+						@if ($browser === 'Firefox' || $browser === 'Mozilla')
+							{{ trans('index.plugin.head.1') }}
+						@elseif ($browser === 'Chrome')
+							{{ trans('index.plugin.head.2') }}
+						@elseif ($browser === 'Opera')
+							{{ trans('index.plugin.head.3') }}
+						@elseif ($browser === 'IE')
+							{{ trans('index.plugin.head.4') }}
+						@elseif ($browser === 'Edge')
+							{{ trans('index.plugin.head.5') }}
+						@elseif ($browser === 'Safari')
+							{{ trans('index.plugin.head.6') }}
+						@elseif ($browser === 'Vivaldi')
+							{{ trans('index.plugin.head.6') }}
+						@else
+							$(".seperator").addClass("hidden");
+						@endif
+					</h4>
+					<p class="text-muted">{{ trans('index.plugin.head.info') }}</p>
+				</div>
+				<div class="modal-body">
+					@if ($browser === 'Firefox' || $browser === 'Mozilla')
+						<ol>
+							<li>{{ trans('index.plugin.firefox.1') }}<img src="/img/Firefox.png" width="100%" /></li>
+							<li>{{ trans('index.plugin.firefox.2') }}<img src="/img/Firefox_Standard.png" width="100%" /></li>
+						</ol>
+						<hr />
+						<h4>{!! trans('index.plugin.firefox.3', ['browser' => $browser]) !!}</h4>
+						<ol>
+							<li>{!! trans('index.plugin.firefox.4') !!}</li>
+							<li>{!! trans('index.plugin.firefox.5') !!}</li>
+						</ol>
+						<hr>
+						<h4>{{ trans('index.plugin.head.8') }}</h4>
+						<ol>
+							<li>{!! trans('index.plugin.firefox-klar.1') !!}</li>
+							<li>{{ trans('index.plugin.firefox-klar.2')}}<img src="/img/FirefoxKlar-Settings.png" width="100%"/></li>
+							<li>{{ trans('index.plugin.firefox-klar.3') }}<img src="/img/FirefoxKlar-addSearchengine.png" width="100%"/></li>
+							<li>{{ trans('index.plugin.firefox-klar.4') }}</li>
+						</ol>
 					@elseif ($browser === 'Chrome')
-						{{ trans('index.plugin.head.2') }}
+						<ol>
+							<li>{!! trans('index.plugin.chrome.1') !!}</li>
+							<li>{!! trans('index.plugin.chrome.2') !!}</li>
+							<li>{{ trans('index.plugin.chrome.3') }}</li>
+						</ol>
+						<hr />
+						<h4>{!! trans('index.plugin.chrome.4', ['browser' => $browser]) !!}</h4>
+						<ol>
+							<li>{!! trans('index.plugin.chrome.5') !!}</li>
+							<li>{!! trans('index.plugin.chrome.6') !!}</li>
+							<li>{!! trans('index.plugin.chrome.7') !!}</li>
+							<li>{!! trans('index.plugin.chrome.8') !!}</li>
+						</ol>
 					@elseif ($browser === 'Opera')
-						{{ trans('index.plugin.head.3') }}
+						<ol>
+							<li>{!! trans('index.plugin.opera.1') !!}</li>
+							<li>{!! trans('index.plugin.opera.2') !!}</li>
+							<li>{!! trans('index.plugin.opera.3') !!}</li>
+							<li>{!! trans('index.plugin.opera.4') !!}</li>
+							<li><small>{!! trans('index.plugin.opera.5') !!}</small>
+						</ol>
+						<hr />
+						<h4>{!! trans('index.plugin.opera.6', ['browser' => $browser]) !!}</h4>
+						<ol>
+							<li>{!! trans('index.plugin.opera.7') !!}</li>
+							<li>{!! trans('index.plugin.opera.8') !!}</li>
+							<li>{!! trans('index.plugin.opera.9') !!}</li>
+							<li>{!! trans('index.plugin.opera.10') !!}</li>
+						</ol>
 					@elseif ($browser === 'IE')
-						{{ trans('index.plugin.head.4') }}
+						<ol>
+							<li>{!! trans('index.plugin.IE.1') !!}</li>
+							<li>{!! trans('index.plugin.IE.4') !!} (<i class="fa fa-cog" aria-hidden="true"></i>)</li>
+							<li>{!! trans('index.plugin.IE.5') !!}</li>
+							<li>{!! trans('index.plugin.IE.6') !!}</li>
+							<li>{!! trans('index.plugin.IE.7') !!}</li>
+						</ol>
+						<hr />
+						<h4>{!! trans('index.plugin.IE.8', ['browser' => $browser]) !!}</h4>
+						<ol>
+							<li>{!! trans('index.plugin.IE.9') !!}</li>
+							<li>{!! trans('index.plugin.IE.10') !!}</li>
+							<li>{!! trans('index.plugin.IE.11') !!}</li>
+						</ol>
 					@elseif ($browser === 'Edge')
-						{{ trans('index.plugin.head.5') }}
+						<ol>
+							<li>{!! trans('index.plugin.edge.1') !!}<i class="fa fa-ellipsis-h" aria-hidden="true"></i>{!! trans('index.plugin.edge.2') !!}</li>
+							<li>{!! trans('index.plugin.edge.3') !!}</li>
+							<li>{!! trans('index.plugin.edge.4') !!}</li>
+							<li>{!! trans('index.plugin.edge.5') !!}</li>
+						</ol>
+						<hr />
+						<h4>{!! trans('index.plugin.edge.6', ['browser' => $browser]) !!}</h4>
+						<ol>
+							<li>{!! trans('index.plugin.edge.7') !!}</li>
+							<li>{!! trans('index.plugin.edge.8') !!}</li>
+							<li>{!! trans('index.plugin.edge.9') !!}</li>
+							<li>{!! trans('index.plugin.edge.10') !!}</li>
+							<li>{!! trans('index.plugin.edge.11') !!}</li>
+						</ol>
 					@elseif ($browser === 'Safari')
-						{{ trans('index.plugin.head.6') }}
+						<ol>
+							<li>{!! trans('index.plugin.safari.1') !!}</li>
+							<li>{!! trans('index.plugin.safari.2') !!}</li>
+							<li>{!! trans('index.plugin.safari.3') !!}</li>
+							<li>{!! trans('index.plugin.safari.4') !!}</li>
+						</ol>
 					@elseif ($browser === 'Vivaldi')
-						{{ trans('index.plugin.head.6')	}}
-					@else
-						$(".seperator").addClass("hidden");
+						<ol>
+							<li>{!! trans('index.plugin.vivaldi.1') !!}</li>
+							<li>{!! trans('index.plugin.vivaldi.2') !!}</li>
+							<li>{!! trans('index.plugin.vivaldi.3') !!}</li>
+							<li>{!! trans('index.plugin.vivaldi.4') !!}</li>
+							<li>{!! trans('index.plugin.vivaldi.5') !!}</li>
+							<li>{!! trans('index.plugin.vivaldi.6') !!}</li>
+							<li>{!! trans('index.plugin.vivaldi.7') !!}</li>
+						</ol>
+						<hr />
+						<h4>{!! trans('index.plugin.vivaldi.8', ['browser' => $browser]) !!}</h4>
+						<ol>
+							<li>{!! trans('index.plugin.vivaldi.9') !!}</li>
+							<li>{!! trans('index.plugin.vivaldi.10') !!}</li>
+						</ol>
 					@endif
-				</h4>
-				<p class="text-muted">{{ trans('index.plugin.head.info') }}</p>
-			</div>
-			<div class="modal-body">
-				@if ($browser === 'Firefox' || $browser === 'Mozilla')
-				<ol>
-					<li>{{ trans('index.plugin.firefox.1') }}
-						<img src="/img/Firefox.png" width="100%" />
-					</li>
-					<li>{{ trans('index.plugin.firefox.2') }}
-						<img src="/img/Firefox_Standard.png" width="100%" />
-					</li>
-				</ol>
-				<hr />
-				<h4>{!! trans('index.plugin.firefox.3', ['browser' => $browser]) !!}</h4>
-				<ol>
-					<li>{!! trans('index.plugin.firefox.4') !!}</li>
-					<li>{!! trans('index.plugin.firefox.5') !!}</li>
-				</ol>
-				@elseif ($browser === 'Chrome')
-				<ol>
-					<li>{!! trans('index.plugin.chrome.1') !!}</li>
-					<li>{!! trans('index.plugin.chrome.2') !!}</li>
-					<li>{{ trans('index.plugin.chrome.3') }}</li>
-				</ol>
-				<hr />
-				<h4>{!! trans('index.plugin.chrome.4', ['browser' => $browser]) !!}</h4>
-				<ol>
-					<li>{!! trans('index.plugin.chrome.5') !!}</li>
-					<li>{!! trans('index.plugin.chrome.6') !!}</li>
-					<li>{!! trans('index.plugin.chrome.7') !!}</li>
-					<li>{!! trans('index.plugin.chrome.8') !!}</li>
-				</ol>
-				@elseif ($browser === 'Opera')
-				<ol>
-					<li>{!! trans('index.plugin.opera.1') !!}</li>
-					<li>{!! trans('index.plugin.opera.2') !!}</li>
-					<li>{!! trans('index.plugin.opera.3') !!}</li>
-					<li>{!! trans('index.plugin.opera.4') !!}</li>
-					<li>
-						<small>{!! trans('index.plugin.opera.5') !!}</small>
-				</ol>
-				<hr />
-				<h4>{!! trans('index.plugin.opera.6', ['browser' => $browser]) !!}</h4>
-				<ol>
-					<li>{!! trans('index.plugin.opera.7') !!}</li>
-					<li>{!! trans('index.plugin.opera.8') !!}</li>
-					<li>{!! trans('index.plugin.opera.9') !!}</li>
-					<li>{!! trans('index.plugin.opera.10') !!}</li>
-				</ol>
-				@elseif ($browser === 'IE')
-				<ol>
-					<li>{!! trans('index.plugin.IE.1') !!}</li>
-					<li>{!! trans('index.plugin.IE.4') !!} (
-						<i class="fa fa-cog" aria-hidden="true"></i>)</li>
-					<li>{!! trans('index.plugin.IE.5') !!}</li>
-					<li>{!! trans('index.plugin.IE.6') !!}</li>
-					<li>{!! trans('index.plugin.IE.7') !!}</li>
-				</ol>
-				<hr />
-				<h4>{!! trans('index.plugin.IE.8', ['browser' => $browser]) !!}</h4>
-				<ol>
-					<li>{!! trans('index.plugin.IE.9') !!}</li>
-					<li>{!! trans('index.plugin.IE.10') !!}</li>
-					<li>{!! trans('index.plugin.IE.11') !!}</li>
-				</ol>
-				@elseif ($browser === 'Edge')
-				<ol>
-					<li>{!! trans('index.plugin.edge.1') !!}
-						<i class="fa fa-ellipsis-h" aria-hidden="true"></i>{!! trans('index.plugin.edge.2') !!}</li>
-					<li>{!! trans('index.plugin.edge.3') !!}</li>
-					<li>{!! trans('index.plugin.edge.4') !!}</li>
-					<li>{!! trans('index.plugin.edge.5') !!}</li>
-				</ol>
-				<hr />
-				<h4>{!! trans('index.plugin.edge.6', ['browser' => $browser]) !!}</h4>
-				<ol>
-					<li>{!! trans('index.plugin.edge.7') !!}</li>
-					<li>{!! trans('index.plugin.edge.8') !!}</li>
-					<li>{!! trans('index.plugin.edge.9') !!}</li>
-					<li>{!! trans('index.plugin.edge.10') !!}</li>
-					<li>{!! trans('index.plugin.edge.11') !!}</li>
-				</ol>
-				@elseif ($browser === 'Safari')
-				<ol>
-					<li>{!! trans('index.plugin.safari.1') !!}</li>
-					<li>{!! trans('index.plugin.safari.2') !!}</li>
-					<li>{!! trans('index.plugin.safari.3') !!}</li>
-					<li>{!! trans('index.plugin.safari.4') !!}</li>
-				</ol>
-				@elseif ($browser === 'Vivaldi')
-				<ol>
-					<li>{!! trans('index.plugin.vivaldi.1') !!}</li>
-					<li>{!! trans('index.plugin.vivaldi.2') !!}</li>
-					<li>{!! trans('index.plugin.vivaldi.3') !!}</li>
-					<li>{!! trans('index.plugin.vivaldi.4') !!}</li>
-					<li>{!! trans('index.plugin.vivaldi.5') !!}</li>
-					<li>{!! trans('index.plugin.vivaldi.6') !!}</li>
-					<li>{!! trans('index.plugin.vivaldi.7') !!}</li>
-				</ol>
-				<hr />
-				<h4>{!! trans('index.plugin.vivaldi.8', ['browser' => $browser]) !!}</h4>
-				<ol>
-					<li>{!! trans('index.plugin.vivaldi.9') !!}</li>
-					<li>{!! trans('index.plugin.vivaldi.10') !!}</li>
-				</ol>
-				@endif
-				<hr>
-				<p>@lang('index.plugin.faq.1')
-					<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), " /faq#mg-plugin ") }}">@lang('index.plugin.faq.2')</a>
-				</p>
+					<hr>
+					<p>@lang('index.plugin.faq.1')<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/faq#mg-plugin") }}">@lang('index.plugin.faq.2')</a></p>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
diff --git a/resources/views/parts/footer.blade.php b/resources/views/parts/footer.blade.php
index b1e488662cd3bd915c3c4fb27970cc41336d5b1f..e2e4385574efd024f648667a09ea359b707947b9 100644
--- a/resources/views/parts/footer.blade.php
+++ b/resources/views/parts/footer.blade.php
@@ -1,8 +1,15 @@
 @if ($type === 'startpage' || $type === 'subpage' || $type === 'resultpage')
 <footer class="{{ $id }} noprint">
-  <div id="info">
-    <span><a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "kontakt") }}">{{ trans('sidebar.nav5') }}</a> - <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "impressum") }}">{{ trans('sidebar.nav8') }}</a>@if(LaravelLocalization::getCurrentLocale() == "de") - <a href="https://shop.spreadshirt.de/metager/" rel="noopener" target="_blank">{{ trans('sidebar.nav26') }}</a>@endif</span>
-    <span class="hidden-xs">{{ trans('footer.sumaev.1') }}<a href="https://www.suma-ev.de/">{{ trans('footer.sumaev.2') }}</a></span>
+  <div>
+    <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "kontakt") }}">{{ trans('sidebar.nav5') }}</a>
+    <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "impressum") }}">{{ trans('sidebar.nav8') }}</a>
+    <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "datenschutz") }}">{{ trans('sidebar.nav3') }}</a>
+    @if(LaravelLocalization::getCurrentLocale() == "de")
+      <a href="https://shop.spreadshirt.de/metager/" rel="noopener" target="_blank">{{ trans('sidebar.nav26') }}</a>
+    @endif
+  </div>
+  <div>
+    <span class="hidden-xs">{{ trans('footer.sumaev.1') }} <a href="https://www.suma-ev.de/">{{ trans('footer.sumaev.2') }}</a></span>
   </div>
 </footer>
 @endif
\ No newline at end of file
diff --git a/resources/views/parts/searchbar.blade.php b/resources/views/parts/searchbar.blade.php
index 4a3e42572dc7634c24497917780b2cf7cf14e50e..3936bd0d48aa0036eee7bdc936f4e5a1f4c20bf4 100644
--- a/resources/views/parts/searchbar.blade.php
+++ b/resources/views/parts/searchbar.blade.php
@@ -1,11 +1,17 @@
-{{-- Don't forget to @include('modals.create-focus-modal') --}}
+{{-- Don't forget @include('modals.create-focus-modal') --}}
 {{-- Don't forget <script type="text/javascript" src="{{ mix('js/searchbar.js') }}"></script> --}}
 <fieldset>
 	<form id="searchForm" method={{ $request }} action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3 ") }}" accept-charset="UTF-8">
 		<div class="searchbar {{$class or ''}}">
 			<div class="search-input-submit">
+				<div class="search-key">
+					<input id="input-key" type="text" name="key" placeholder="{{ trans ('index.key.placeholder') }}">
+					<label id="key-label" for="input-key">
+						<i class="fa fa-key" aria-hidden="true"></i>
+					</label>
+				</div>
 				<div class="search-input">
-					<input type="text" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required="" @if($class=='startpage-searchbar') @endif autocomplete="{{$autocomplete or 'off'}}" class="form-control" placeholder="{{ trans('index.placeholder') }}" tabindex="1">
+					<input type="text" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required=""  autocomplete="{{$autocomplete or 'off'}}" class="form-control" placeholder="{{ trans('index.placeholder') }}" tabindex="1">
 					<button class="hidden" id="search-delete-btn" type="button">
 						&#xd7;
 					</button>
diff --git a/resources/views/spende/beitritt.blade.php b/resources/views/spende/beitritt.blade.php
index 73a19bd66195faa85c6603fcde6919293361f478..dec186339343d1033a92619d610f27756b61738d 100644
--- a/resources/views/spende/beitritt.blade.php
+++ b/resources/views/spende/beitritt.blade.php
@@ -6,7 +6,7 @@
 
 @section('content')
 	<link type="text/css" rel="stylesheet" href="{{ mix('/css/beitritt.css') }}" />	
-	<script src="{{ mix('js/scriptJoinPage.js') }}"></script>
+	<script type="text/javascript" src="{{ mix('js/scriptJoinPage.js') }}"></script>
 <form id="donation-form">
 	<div class="card-heavy">
 		<h1>{{ trans('beitritt.heading.1') }}</h1>
diff --git a/webpack.mix.js b/webpack.mix.js
index 2f3bee78a9575f74464dd1e1a5475c53d4eb8046..ccff195bdab4461ef4a345dc2e2e05cd1b6b74df 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -35,6 +35,7 @@ mix
   // utility
   .babel(['resources/assets/js/utility.js', 'resources/assets/js/translations.js'], 'public/js/utility.js')
   .babel('resources/assets/js/widgets.js', 'public/js/widgets.js')
+  .babel('resources/assets/js/scriptJoinPage.js', 'public/js/scriptJoinPage.js')
   // source maps
   .sourceMaps(false, 'inline-source-map')
   // versioning