diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index c245cd9..d5b646d 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -32,12 +32,12 @@
 }
 
 html {
-  height: 100%;
+  height: 100vh;
 }
 
 body {
   position:   relative;
-  min-height: 100%;
+  min-height: 100vh;
   font-size:  12pt;
   margin:     0;
   padding:    0;
diff --git a/dev/scss/base/colors.scss b/dev/scss/base/colors.scss
index 244d1fe..2873ec7 100644
--- a/dev/scss/base/colors.scss
+++ b/dev/scss/base/colors.scss
@@ -18,6 +18,7 @@
 $ids-pink-2:   rgb(250, 243, 222); // Lexik
 
 $black:        #333;
+$darker-black: rgb(20,20,20); // official footer
 
 
 /**
diff --git a/dev/scss/base/lengths.scss b/dev/scss/base/lengths.scss
index d0aafd5..9dd307d 100644
--- a/dev/scss/base/lengths.scss
+++ b/dev/scss/base/lengths.scss
@@ -19,3 +19,4 @@
 $right-distance:      $standard-margin;
 $right-view-distance: $standard-margin / 2;
 $logo-left-distance:  230px;
+$footer-height:       100pt;
\ No newline at end of file
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 8c2675c..76f2846 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -7,15 +7,37 @@
 footer {
   background-color: $dark-grey;
   position:         absolute;
+  
   bottom:           0;
   padding-bottom:   2px;
   font-size:        70%;
   width:            100%;
   text-align:       right;
 
+  display: flex;
+  align-items: center;
+  height: $footer-height;
+
+  nav {
+    margin-left: $button-width;
+    padding: $item-padding;
+    text-align: left;
+    flex-grow: 2;
+    a {
+      white-space: nowrap;
+    }
+  }
+
+  div.logos {
+    font-size: 0;
+    flex-grow: 1;
+  }
+
+
   a {
+    font-size: 10pt;
     &:link {
-      margin: 0 .5em;
+      // margin: 0 .5em;
       color:  $light-grey;
     }
     &:visited {
@@ -29,10 +51,34 @@
       content: none
     }
   }
+
   span.separator {
     &:after {
-      content: "-";
-      color:   $light-grey;
+      font-size: bold;
+      content: " | ";
+      color:   $dark-orange;
     }
   }
 }
+
+/**
+ * Logo table of the front page
+ */
+#logos {
+  margin-right: $standard-margin;
+}
+
+/**
+ * Logo: Institute for German Language
+ */
+#ids-logo {
+  display:          inline-block;
+  width:            (631 / 30) + em;
+  height:           (200 / 30) + em;
+  background-image: url('#{$img-path}/ids-institute-for-the-german-language-white.svg');
+}
+
+aside.active ~ footer {
+  padding-left: $logo-left-distance;
+  transition:  all .3s ease-in-out;
+}
\ No newline at end of file
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 40f42de..47adb78 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -23,40 +23,6 @@
 }
 
 /**
- * Logo table of the front page
- */
-#logos {
-  position:    relative;
-  text-align:  right;
-  font-size:   85%;
-  right:       0;
-  width:       100%;
-  margin-left: ($standard-margin / 2);
-  padding-left: 60%;
-
-  > div {
-    border-top:    26px solid $dark-orange;
-    padding-right: 2em;
-  }
-  p {
-    text-align: left;
-    display:    inline-block;
-  }
-}
-
-
-/**
- * Logo: Institute for German Language
- */
-#ids-logo {
-  display:          block;
-  width:            (631 / 30) + em;
-  height:           (200 / 30) + em;
-  background-image: url('#{$img-path}/ids-leibniz-institute-for-the-german-language.svg');
-}
-
-
-/**
  * Logo: KorAP
  */
 h1 {
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 1c1f5e0..85182dc 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -22,7 +22,7 @@
 
 
 main {
-  padding-bottom: 20pt;
+  padding-bottom: $footer-height;
 
   margin: {
     left:  $standard-margin; 
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index a03f107..910d1eb 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -205,6 +205,10 @@
   main.page {
     margin-right: 20px;
   }
+
+  footer {
+    padding-left: 0 !important;
+  }
 }