diff --git a/content/about.de.md b/content/about.de.md
index 61bf79a0b3bd1789882f1eb6564c3bb0c8799b93..cb3b7ccfcbd784adbcb7f2f667d0772d6f97d510 100644
--- a/content/about.de.md
+++ b/content/about.de.md
@@ -1,5 +1,6 @@
 ---
 title: StuStaNet e.V.
+description: Information über den StuStaNet e. V. in der Studentenstadt Freimann, München
 type: page
 color: green
 ---
@@ -18,7 +19,7 @@ Für Interessierte, die mehr wollen, als nur "surfen", gibt es die Möglichkeit,
 Bewohner der Studentenstadt Freimann, die dem Verein beitreten möchten, müssen einen Aufnahmeantrag ausfüllen, den sie in der Sprechstunde des Vereins erhalten und abgeben können. Die Sprechstunde im Vereinsbüro im "Blauen Haus" (Zimmer 028) ist auch erste Anlaufstelle für weitere Informationen zum Verein und bei Problemen mit dem wohnheimweiten LAN. Die Sprechzeiten hängen an den schwarzen Brettern der Häuser sowie am Sprechstundenraum aus.
 
 ## Vorstand
-Die Kontaktadressen des aktuellen Vorstands finden sich im [Impressum]({{< ref "impressum.md" >}}).
+Die Kontaktadressen des aktuellen Vorstands findet sich im [Impressum]({{< ref "impressum.md" >}}).
 
 ## Satzung
 Die aktuelle Satzung des StuStaNet e.V. ist [hier einsehbar](https://vereinsanzeiger.stustanet.de/satzung.pdf).
diff --git a/content/about.en.md b/content/about.en.md
index 59fc665f3847fc9528b6d927794c9670e7b32a06..405f201ceedfe78da30d4445051b3f0fa425b5b0 100644
--- a/content/about.en.md
+++ b/content/about.en.md
@@ -1,5 +1,6 @@
 ---
 title: StuStaNet e.V.
+description: Information about StuStaNet in Studentenstadt Freiman, Munich, Germany
 type: page
 color: green
 ---
diff --git a/content/impressum.md b/content/impressum.md
index 1600ecb77c48011a2c406779d2d5516b5a655b09..bf6d309a959d72a019aabe6128199dbf27d99673 100644
--- a/content/impressum.md
+++ b/content/impressum.md
@@ -1,5 +1,6 @@
 ---
 title: Impressum
+description: Impressum für stustanet.de
 type: page
 noindex: true
 color: yellow
diff --git a/i18n/de.toml b/i18n/de.toml
index 690d9c82e53cb410860631e8fb45f537fba37723..d047fd72aef7a08f452b0bc3f8fe54dca43789a6 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -2,4 +2,7 @@
 other = "Diese Seite bearbeiten"
 
 [imprint]
-other = "Impressum"
\ No newline at end of file
+other = "Impressum"
+
+[toHomepage]
+other = "Zur Startseite"
\ No newline at end of file
diff --git a/i18n/en.toml b/i18n/en.toml
index e27b33f89e8aeb6d97eee3b8d4687230a1dad742..e278d42299c19faa85be89f43b9fe373af0fcdbe 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -2,4 +2,7 @@
 other = "Edit this Page"
 
 [imprint]
-other = "Imprint"
\ No newline at end of file
+other = "Imprint"
+
+[toHomepage]
+other = "To Homepage"
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index afb112c8197fed7ba0de32f732c6560c906d2940..36a06e384844e32c02909cfa99f90bc4584b126c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -4,6 +4,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
+    {{ if .Params.Description }}
+    <meta name="description" content="{{ .Params.Description }}" />
+    {{ end }}
     <meta name="viewport" content="width=device-width,minimum-scale=1">
     {{ if and (isset .Params "noindex") .Params.noindex }}
     <meta name="robots" content="noindex">
@@ -25,7 +28,7 @@
     <nav id="top-bar">
       <div class="container">
         <div class="logo">
-          <a href="/" title="To Homepage"><img src="/logo.png" alt="StuStaNet" /></a>
+          <a href="/" title="{{ i18n "toHomepage" }}"></a>
         </div>
         <ul class="menu">
           {{ $currentPage := . }}
@@ -33,10 +36,12 @@
             <li><a class="menu-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a></li>
           {{ end }}
         </ul>
+        {{ $.Scratch.Set "nav-orientation" "" }}
+        {{ partial "lang-dropdown.html" . }}
       </div>
     </nav>
 
-    <main aria-role="main">
+    <article>
       <header class="{{ .Params.Color | default "blue" }}">
         <h1>{{.Title}}</h1>
         {{ with .Params.subtitle }}
@@ -46,7 +51,7 @@
       <div class="container">
         {{ block "main" . }}{{.Content}}{{ end }}
       </div>
-    </main>
+    </article>
 
     <footer>
       <div class="editPage">
@@ -56,29 +61,8 @@
         <a href="{{ ref . "impressum.md" }}">{{ i18n "imprint" }}</a>
       </div>
       <div class="lang-dropdown-container">
-        <div class="lang-dropdown">
-          <span><i class="globe"></i>{{ .Site.Language.LanguageName }} &#9652;</span>
-          <ul class="up">
-          {{ if .Site.IsMultiLingual }}
-            {{ $lang := .Site.Language }}
-            {{ range .Site.Languages }}
-              <li>
-                {{ $translated := where $.Translations "Lang" .Lang }}
-                {{ if $translated }}
-                  {{ $.Scratch.Set "url" (index $translated 0).Permalink }}
-                {{ else if eq .Lang $.Page.Lang }}
-                  {{ $.Scratch.Set "url" $.Permalink }}
-                {{ else }}
-                  {{ $.Scratch.Set "url" (delimit (slice "/" .) "") }}
-                {{ end }}
-                <a href="{{ $.Scratch.Get "url" }}" class="lang">
-                  <span class="shorthand">{{ .Lang }}</span>{{ .LanguageName }}
-                </a>
-              </li>
-            {{ end }}
-          {{ end }}
-          </ul>
-        </div>
+        {{ $.Scratch.Set "nav-orientation" "up" }}
+        {{ partial "lang-dropdown.html" . }}
       </div>
     </footer>
   </body>
diff --git a/layouts/partials/lang-dropdown.html b/layouts/partials/lang-dropdown.html
new file mode 100644
index 0000000000000000000000000000000000000000..a762827e9459342427f1ac4f20772aec0c6df502
--- /dev/null
+++ b/layouts/partials/lang-dropdown.html
@@ -0,0 +1,23 @@
+<div class="lang-dropdown {{ default "" ($.Scratch.Get "nav-orientation") }}">
+    <span><i class="globe"></i>{{ .Site.Language.Lang }}</span>
+    <ul>
+    {{ if .Site.IsMultiLingual }}
+        {{ $lang := .Site.Language }}
+        {{ range .Site.Languages }}
+        <li>
+            {{ $translated := where $.Translations "Lang" .Lang }}
+            {{ if $translated }}
+                {{ $.Scratch.Set "url" (index $translated 0).Permalink }}
+            {{ else if eq .Lang $.Page.Lang }}
+                {{ $.Scratch.Set "url" $.Permalink }}
+            {{ else }}
+                {{ $.Scratch.Set "url" (delimit (slice "/" .) "") }}
+            {{ end }}
+            <a href="{{ $.Scratch.Get "url" }}" class="lang">
+                <span class="shorthand">{{ .Lang }}</span>{{ .LanguageName }}
+            </a>
+        </li>
+        {{ end }}
+    {{ end }}
+    </ul>
+</div>
\ No newline at end of file
diff --git a/static/globe.svg b/static/globe.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b71eece43e7d709dc5a686a9277b3e692b42d0eb
--- /dev/null
+++ b/static/globe.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   viewBox="0 0 760 760">
+  <path
+     d="m760 380a380 380 0 1 1 -760 0 380 380 0 1 1 760 0z"
+     class="land"
+     style="fill:#1b54ac" />
+  <path
+     d="m10 380c0 69 19 133 52 188l5-90c-42-59-52-84-53-154-3 18-4 37-4 56zm87-238 50-17c33-43 99-94 166-94-26 8-101 44-107 67 28-18 51-21 79-21l61-34-20-29c-92 13-172 60-229 128zm49 239c0 22 22 68 48 68h64l8 13c20 0 20 14 20 32 0 24 30 28 30 66 0 10-12 14-12 30 0 14 37 86 60 86 40 0 84-36 84-52 0-38 34-28 34-54 0-118 48-62 66-164l-41 16c-44-37-70-91-70-111 13 0 53 60 67 96 34-14 69-39 78-75l-18-8-6-12-14 18c-5 0-28-17-35-41 32 21 47 21 103 21 26 0 41 75 66 88 0-41 3-74 18-107 14 0 37 23 53 68-9-164-125-300-280-338l23 19h-25c0 53-16 35-52 75 0-10 0-14 8-19-15-9-29-12-39-12-15 0-56 26-68 52l21-2 8 18c18-11 12-47 39-47 0 8-11 11-11 25l25-1c-23 26-35 32-66 32l-5-16c-9 23-36 35-58 37 0 12-1 19-8 30l-26-5-17 38 33 7c15-24 33-37 58-42l32 35c0 4-6 7-20 7l12 8 18-22c-16-9-22-19-22-31 38 11 29 50 46 53 0-45 31-4 31-58 22 0 60 13 60 29-57 0-73 2-73 20 0 9 49-5 49 42-40 0-58 0-80-12l-7 20c-24-7-49-20-49-48l-58 9-16-10c-40 50-86 44-86 129zm106-217 15-3 7-14c-14 0-21 9-22 17zm9 11 32-5-5-39c-19 10 3 25-27 44zm2-72c13 0 24-2 24-11l-19-4zm218 98c27 0 46 33 46 47l-24-2c0-16-9-33-22-45zm10 431c24 0 48-37 48-77l-38 32z"
+     class="see"
+     style="fill:#ffffff" />
+</svg>
diff --git a/static/globe.up.svg b/static/globe.up.svg
new file mode 100644
index 0000000000000000000000000000000000000000..60e6505a08f40a01977ed1c058c8a4c02576bf3c
--- /dev/null
+++ b/static/globe.up.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   viewBox="0 0 760 760">
+  <path
+     d="m760 380a380 380 0 1 1 -760 0 380 380 0 1 1 760 0z"
+     class="land"
+     style="fill:#FFFFFF" />
+  <path
+     d="m10 380c0 69 19 133 52 188l5-90c-42-59-52-84-53-154-3 18-4 37-4 56zm87-238 50-17c33-43 99-94 166-94-26 8-101 44-107 67 28-18 51-21 79-21l61-34-20-29c-92 13-172 60-229 128zm49 239c0 22 22 68 48 68h64l8 13c20 0 20 14 20 32 0 24 30 28 30 66 0 10-12 14-12 30 0 14 37 86 60 86 40 0 84-36 84-52 0-38 34-28 34-54 0-118 48-62 66-164l-41 16c-44-37-70-91-70-111 13 0 53 60 67 96 34-14 69-39 78-75l-18-8-6-12-14 18c-5 0-28-17-35-41 32 21 47 21 103 21 26 0 41 75 66 88 0-41 3-74 18-107 14 0 37 23 53 68-9-164-125-300-280-338l23 19h-25c0 53-16 35-52 75 0-10 0-14 8-19-15-9-29-12-39-12-15 0-56 26-68 52l21-2 8 18c18-11 12-47 39-47 0 8-11 11-11 25l25-1c-23 26-35 32-66 32l-5-16c-9 23-36 35-58 37 0 12-1 19-8 30l-26-5-17 38 33 7c15-24 33-37 58-42l32 35c0 4-6 7-20 7l12 8 18-22c-16-9-22-19-22-31 38 11 29 50 46 53 0-45 31-4 31-58 22 0 60 13 60 29-57 0-73 2-73 20 0 9 49-5 49 42-40 0-58 0-80-12l-7 20c-24-7-49-20-49-48l-58 9-16-10c-40 50-86 44-86 129zm106-217 15-3 7-14c-14 0-21 9-22 17zm9 11 32-5-5-39c-19 10 3 25-27 44zm2-72c13 0 24-2 24-11l-19-4zm218 98c27 0 46 33 46 47l-24-2c0-16-9-33-22-45zm10 431c24 0 48-37 48-77l-38 32z"
+     class="see"
+     style="fill:#363636" />
+</svg>
diff --git a/static/styles.css b/static/styles.css
index bb2861b2479f449d4fb487dfd366d99c791ab2bf..44e9246326d05b293d71fd1087c082227b60b03f 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -42,18 +42,25 @@ body {
 
 #top-bar div.logo {
     display: inline-block;
+    flex: 1 1 0;
+    height: 30px;
 }
 
-#top-bar .logo a img {
-    height: 34px;
-    width: auto;
-    margin: 10px 10px 10px -5px;
+#top-bar .logo a {
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    background-image: url(/logo.png);
+    background-size: contain;
+    background-position: left center;
+    background-repeat: no-repeat;
 }
 
 ul.menu {
     list-style-type: none;
     margin: 0;
     padding: 0;
+    flex: 0 0 0;
 }
 
 ul.menu li {
@@ -65,15 +72,15 @@ ul.menu li a {
     padding: 15px 5px;
 }
 
-#top-bar .menu {
-    float: right;
-
-}
-
 .lang-dropdown {
-    color: #EDEDED;
     cursor: default;
     position: relative;
+    flex: 0 0 0;
+}
+
+.lang-dropdown > span {
+    text-transform: uppercase;
+    font-size: 12px;
 }
 
 .lang-dropdown a {
@@ -82,11 +89,15 @@ ul.menu li a {
 
 .lang-dropdown .globe {
     display: inline-block;
-    width: 16px;
-    height: 16px;
+    width: 13px;
+    height: 13px;
     margin: -2px 5px 0 0;
-    vertical-align: top;
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABFklEQVQoz13RMUgbUBSF4duCg4MmQQK6FbQ4d3Ps6uQQBRdp0U5uxdCAiF1aLBQLLQjilEWcAkJALbWtg1tBKAh2ERxiwQSFDm6az8EXk+Zs79yf+945LyJJ1rJvaq4c+OxZ/C8DJqwqWnIIbnzR3w2VVLxwCa6dGe4GMkYU/ARHZj3pBvpUNdyCdTPWTHkUnnsaIWvIjrYWDHtpw9uwoiznr0bHuOxxe/F3bHnll1PNBJQ6b/6RzB098jZBzaR5g/fAxwQsRkTo99pJcubugel0/KM37awkp9qq+DwZexERRlNVfG29YjwZxxERfj9kudbXQj6Bf3Led4TdlWlnKahjzEUaNr3r6CIiQt4bH+yr21Zsf/cd+nQr23neGI8AAAAASUVORK5CYII=) no-repeat;
+    vertical-align: middle;
+    background: url(/globe.svg) no-repeat;
+}
+
+.lang-dropdown.up .globe {
+    background: url(/globe.up.svg) no-repeat;
 }
 
 .lang-dropdown ul {
@@ -98,6 +109,7 @@ ul.menu li a {
     font: bold 12px sans-serif;
     overflow: hidden;
     max-height: 0px;
+    text-align: center;
     -webkit-transition: max-height 0.4s linear;
     -moz-transition: max-height 0.4s linear;
     transition: max-height 0.4s linear;
@@ -105,7 +117,7 @@ ul.menu li a {
 .lang-dropdown:hover ul {
     max-height: 200px;
 }
-.lang-dropdown ul.up {
+.lang-dropdown.up ul {
     top: auto;
     bottom: 20px;
 }
@@ -130,27 +142,27 @@ ul.menu li a {
     height: 1px;
     border: 5px solid transparent;
     border-bottom-color: #454545;
-    left: 50%;
+    left: 75%;
     top: -11px;
     margin-left: -5px;
 }
 .lang-dropdown li:last-child {
     border-radius: 0 0 3px 3px;
 }
-.lang-dropdown .up li:first-child {
+.lang-dropdown.up li:first-child {
     margin-top: 0px;
 }
-.lang-dropdown .up li:last-child {
+.lang-dropdown.up li:last-child {
     margin-bottom: 15px;
 }
-.lang-dropdown .up li:last-child:after {
+.lang-dropdown.up li:last-child:after {
     content:'';
     position: absolute;
     width: 1px;
     height: 1px;
     border: 5px solid transparent;
     border-top-color: #454545;
-    left: 50%;
+    left: 75%;
     bottom: -11px;
     margin-left: -5px;
 }
@@ -177,15 +189,46 @@ article > *,
 .container,
 header h1 {
     position: relative;
-    max-width: 800px;
     margin-left: auto;
     margin-right: auto;
+    padding: 0 20px;
+}
+
+nav .container {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+article > * {
+    max-width: 800px;
     padding: 0 50px;
 }
 
+.container .lang-dropdown {
+    color: #1b54ac;
+}
+
+.container .lang-dropdown {
+    padding: 15px 5px 15px 25px;
+}
+
+.lang-dropdown::after { 
+    content: 'â–¾';
+}
+
+.up.lang-dropdown::after {
+    content: 'â–´';
+}
+
+.container .lang-dropdown ul {
+    top: 10px;
+}
+
 header {
     position: relative;
     display: block;
+    max-width: 100%;
     background-image: url(/header.jpg);
     background-size: cover;
     background-position-y: 30%;
@@ -259,7 +302,7 @@ h2 + h3 {
     margin-top: 0.3rem;
 }
 
-main {
+article {
     background: #FFF;
     width: 100%;
     position: relative;
@@ -322,7 +365,7 @@ code {
 }
 
 a {
-    color: #3273dc;
+    color: #1b54ac;
     cursor: pointer;
     text-decoration: none;
 }
@@ -335,11 +378,14 @@ footer {
     background: #363636;
     display: flex;
     flex-shrink: 0;
+    white-space: nowrap;
 }
 
 footer .editPage {
     padding: 15px;
     flex: 1 1 0;
+    text-overflow: clip;
+    overflow: hidden;
 }
 
 footer .editPage a {
@@ -365,6 +411,7 @@ footer .lang-dropdown-container {
 
 footer .lang-dropdown {
     display: inline;
+    color: #EDEDED;
 }
 
 .we-are-not-stuwerk {
@@ -383,4 +430,38 @@ footer .lang-dropdown {
 
 .vorstand ul {
     padding-left: 0;
+}
+
+@media (max-width: 720px) {
+    main {
+        padding: 25px 0;
+    }
+
+    h1 {
+        font-size: 1.6rem;
+        line-height: 2rem;
+    }
+
+    h2 {
+        font-size: 1.4rem;
+        line-height: 1.6rem;
+    }
+
+    h3 {
+        font-size: 1.2rem;
+    }
+
+    header h1 {
+        padding: 50px 0 50px;
+        font-size: 2rem;
+        line-height: inherit;
+    }
+
+    article > *, .container {
+        padding: 0 25px;
+    }
+
+    footer .editPage a {
+        color: transparent;
+    }
 }
\ No newline at end of file