diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 12474c0..0d54ebc 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -2,7 +2,7 @@
  * Initialize The JS frontend part and decorate
  * the static HTML data.
  *
- * @author Nils Diewald
+ * @author Nils Diewald, Helge Stallkamp
  *
  * TODO: Create lazy loading of objects including
  * - obj.hint()
@@ -13,6 +13,9 @@
  * - obj.matchCreate() (using webpack)
  * - obj.koral() (show result, parse for errors ...)
  * - obj.alignment() // toggle
+ * 
+ * TODO: After upgrading to ES 6
+ * - use optional chaining operator (for example see below)
  */
 
 "use strict";
@@ -96,14 +99,20 @@
       for(let j = 0; j < gt.length; j++){
         gt[j].setAttribute('href', '#');
         gt[j].addEventListener('click', function(){
-        tourClass.gTstartSearch().start();
-      });
-    }
+          tourClass.gTstartSearch().start();
 
-    KorAP.tourshowR = function(){
-      tourClass.gTshowResults().start();
+          // Close the burger menu by simulating a click on the burger icon
+          const burgerIcon = document.querySelector('.burger-icon');
+          if (isBurgerMenuOpen) {
+            burgerIcon.click();
+          }
+        });
+      }
+
+      KorAP.tourshowR = function(){
+        tourClass.gTshowResults().start();
       };
-    };
+    }
     
     var obj = {};
 
@@ -129,6 +138,50 @@
       }
     );
 
+    // Responsive navbar: hide and show burger menu
+    const burgerIcon = document.querySelector('.burger-icon');
+    let isBurgerMenuOpen = false;
+
+    if (burgerIcon) {
+      burgerIcon.addEventListener('click', function() {
+        const navbar = document.querySelector('.navbar');
+        navbar.classList.toggle('show');
+
+        isBurgerMenuOpen = !isBurgerMenuOpen;
+        if (isBurgerMenuOpen) {
+          navbar.style.top = '0';
+        }
+      });
+    }
+    
+    // Fallback solution for login dropdown visibility (if :focus-within is not supported)
+    document.addEventListener('DOMContentLoaded', function() {
+      const dropdown = document.querySelector('.dropdown');
+      const dropdownContent = document.querySelector('.dropdown-content');
+      
+      dropdown.addEventListener('mouseenter', function() {
+        dropdownContent.style.display = 'block';
+      });
+    
+      dropdown.addEventListener('mouseleave', function() {
+        // If no input inside the form is focused, then close dropdown content
+        if (!dropdown.contains(document.activeElement)) {
+          dropdownContent.style.display = 'none';
+        }
+      });
+    
+      dropdownContent.addEventListener('focusin', function() {
+        dropdownContent.style.display = 'block';
+      });
+    
+      dropdownContent.addEventListener('focusout', function(e) {
+        // If focus moved outside the dropdown content, then close it
+        if (!dropdownContent.contains(e.relatedTarget)) {
+          dropdownContent.style.display = 'none';
+        }
+      });
+    });
+
     /**
      * Replace Virtual Corpus field
      */
@@ -212,6 +265,91 @@
       };
     });
     
+    // Function to toggle the shifted class on elements
+    function shiftContent() {
+      // Get elements to perform content shift when sidebar is active
+      const header = document.querySelector('header');
+      const main = document.querySelector('main');
+      const footer = document.querySelector('footer');
+      const hint = document.querySelector('#hint');
+      const results = document.querySelector('.found');
+      const aside = document.querySelector('aside');
+
+      if (aside && aside.classList.contains('active')) {
+        header.classList.add('shifted');
+        if (!results) {
+          main.classList.add('shifted');
+        }
+        footer.classList.add('shifted');
+        if (hint) {
+          hint.classList.add('shifted');
+          adjustHintPosition();
+        }
+      } else {
+        header.classList.remove('shifted');
+        main.classList.remove('shifted');
+        footer.classList.remove('shifted');
+        if (hint) {
+          hint.classList.remove('shifted');
+          adjustHintPosition();
+        }
+      }
+    }
+    
+    // Function to adjust the position of the annotation assistant bar (hint), when user types into the searchbar and clicks the sidebar (or anywhere outside the searchbar) afterwards
+    function adjustHintPosition() {
+      const hint = document.querySelector('#hint');
+      const searchInput = document.querySelector('#q-field');
+      const aside = document.querySelector('aside');
+
+      if (hint && searchInput) {
+        // Create a temporary span to measure the exact text width
+        const span = document.createElement('span');
+        span.style.visibility = 'hidden';
+        span.style.position = 'absolute';
+        span.style.whiteSpace = 'pre';
+        // Copy the input's font properties
+        const inputStyle = window.getComputedStyle(searchInput);
+        span.style.font = inputStyle.font;
+        span.style.fontSize = inputStyle.fontSize;
+        span.style.fontFamily = inputStyle.fontFamily;
+        span.textContent = searchInput.value;
+        document.body.appendChild(span);
+
+        // Get the actual width of the text
+        const inputWidth = searchInput.value.length > 0 ? span.offsetWidth : 0;
+        document.body.removeChild(span);
+        let hintLeftPosition = inputWidth;
+
+        // TODO: This shouldn't be a fixed position!
+        if (aside && aside.classList.contains('active')) {
+          hintLeftPosition += 230;
+        }
+        
+        hint.style.left = `${hintLeftPosition}px`;
+      }
+    }
+    //Can be solved more elegant witch ES6 (see optional chaining operator)
+    let qlf = document.querySelector('#q-field');
+      if(qlf != null){
+      qlf.addEventListener('blur', adjustHintPosition);
+    }
+ 
+    // MutationObserver to detect when #hint is injected into the DOM
+    const observer = new MutationObserver((mutationsList, observer) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+          const hint = document.querySelector('#hint');
+          if (hint) {
+            shiftContent();
+            observer.disconnect();
+          }
+        }
+      }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
     // Add focus listener to aside
     var aside = d.getElementsByTagName('aside')[0];
 
@@ -219,34 +357,36 @@
 
       // Horrible lock to deal with sidebar clicks
       var asideClicked = false;
-      
+
+      shiftContent();
+
       // Make aside active on focus
-      aside.addEventListener('focus', function(e) {
+      aside.addEventListener('focus', function (e) {
         this.classList.add('active');
+        shiftContent();
       });
 
       // Deactivate focus when clicking anywhere else
       var body = d.getElementsByTagName('body')[0];
       if (body !== null) {
-        body.addEventListener('click', function() {
+        body.addEventListener('click', function () {
           if (!asideClicked) {
             aside.classList.remove('active');
-          }
-          else {
+            shiftContent();
+          } else {
             asideClicked = false;
-          };
+          }
         });
-      };
+      }
 
       /* Stop click event on aside
        * (to not trickle down to body)
        */
-      aside.addEventListener('click', function(e) {
+      aside.addEventListener('click', function (e) {
         asideClicked = true;
       });
-    };
+    }
 
-      
     // Replace QL select menus with KorAP menus
     var qlField = d.getElementById('ql-field');
     if (qlField !== null) {
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index cfe10b5..7750665 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -34,16 +34,17 @@
   fill: $dark-grey;
 }
 
-html {
-  height: 100vh;
-}
+// html {
+//   height: 100vh;
+// }
 
 body {
-  position:   relative;
   min-height: 100vh;
   font-size:  12pt;
   margin:     0;
   padding:    0;
+  display:    flex;
+  flex-direction: column;
 }
 
 a {
@@ -99,6 +100,8 @@
   border-left:      5px solid $ids-blue-1;
   background-color: $ids-blue-2;
   color:            $ids-blue-1;
+  -webkit-mix-blend-mode: normal; // Safari
+  mix-blend-mode:   soft-light;
   
   &.bug,
   &.missing,
diff --git a/dev/scss/base/icons.scss b/dev/scss/base/icons.scss
index ae4974a..3d758c0 100644
--- a/dev/scss/base/icons.scss
+++ b/dev/scss/base/icons.scss
@@ -2,6 +2,7 @@
  * Font Awesome symbol table.
  */
 
+$fa-user:         "\f007";
 $fa-bars:         "\f0c9";
 $fa-extlink:      "\f08e";
 $fa-up:           "\f0d8";
diff --git a/dev/scss/base/lengths.scss b/dev/scss/base/lengths.scss
index c4a7e5a..613b8c6 100644
--- a/dev/scss/base/lengths.scss
+++ b/dev/scss/base/lengths.scss
@@ -4,15 +4,16 @@
  * Defined lengths and sizes for the
  * Kalamar layout.
  */
-$standard-border-radius: 6px;
-$item-padding:           3pt 6pt;
-$button-width:           30px;
-$base-padding:           8px;
-$border-size:            2px;
-$result-border-size:     1px;
-$left-width:             176px;
-$border-size:            2px;
-$left-distance:          $left-width + ($border-size * 2);
+$standard-border-radius:    6px;
+$item-padding:              3pt 6pt;
+$button-width:              30px;
+$base-padding:              8px;
+$border-size:               2px;
+$result-border-size:        1px;
+$left-width:                176px;
+$border-size:               2px;
+$left-distance:             $left-width + ($border-size * 2);
+$standard-size-and-spacing: 4rem;
 
 /**
  * Margins
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 1a5b312..0d85a78 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -7,9 +7,9 @@
  */
 footer {
   background-color: $dark-grey;
-  position:         absolute;
-  
-  bottom:           0;
+  // position:         absolute;
+  // bottom:           0;
+  margin-top:       auto;
   padding-bottom:   2px;
   font-size:        70%;
   width:            100%;
@@ -19,6 +19,10 @@
   align-items: center;
   height: $footer-height;
 
+  &.shifted {
+    padding-left: $logo-left-distance;
+  }
+
   nav {
     margin-left: $button-width;
     padding: $item-padding;
@@ -94,6 +98,6 @@
 }
 
 aside.active:not(.off) ~ footer {
-  padding-left: $logo-left-distance;
+  // padding-left: $logo-left-distance;
   transition:  all .3s ease-in-out;
 }
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 41b5cc4..ccd13bd 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -12,14 +12,289 @@
 @import "state";         // State
 @import "panel";         // Panel
 
+.navbar {
+  width: 100%;
+  height: $standard-size-and-spacing;
+  background-color: $dark-green;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: end;
+  // overflow: hidden;
+  // position: fixed;
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  transition: top .3s ease-in-out;
+  -o-transition: top .3s ease-in-out;
+  -moz-transition: top .3s ease-in-out;
+  -webkit-transition: top .3s ease-in-out;
+
+  &-group {
+    display: flex;
+    align-items: center;
+
+    h3.nav-link {
+      height: $standard-size-and-spacing;
+      font-size: 1rem;
+      transition:  all .2s ease-in-out;
+      -o-transition: all .2s ease-in-out;
+      -moz-transition: all .2s ease-in-out;
+      -webkit-transition: all .2s ease-in-out;
+
+      &:hover {
+        background-color: $middle-green;
+      }
+
+      a {
+        display: block;
+        padding: 1.5rem 1rem;
+        color: $nearly-white;
+      }
+    }
+
+    // fieldset.fieldset-login {
+    //   display: flex;
+    //   flex-direction: column;
+    //   margin-right: 4rem;
+    //   padding: 0;
+    //   min-inline-size: unset;
+    //   border: unset;
+
+    //   form.login {
+    //     display: flex;
+    //     align-items: center;
+        
+    //     input[type=text],
+    //     input[type=password] {
+    //       @include input-field;
+    //       margin-right: 8px;
+    //       height: 1.5rem;
+    //     }
+  
+    //     button.btn-login {
+    //       // width: 3rem;
+    //       // height: 3rem;
+    //       // background-color: $dark-green;
+    //       background-color: unset;
+    //       color: $nearly-white;
+    //       // padding: .75rem 1rem;
+    //       font-size: 180%;
+    //       border: none;
+    //       border-color: unset;
+    //       border-radius: 0;
+    //       text-shadow: none;
+    //       font-weight: normal;
+    //       top: unset;
+    //       transition:  all .2s ease-in-out;
+    //       -o-transition: all .2s ease-in-out;
+    //       -moz-transition: all .2s ease-in-out;
+    //       -webkit-transition: all .2s ease-in-out;
+  
+    //       &::after {
+    //         content: $fa-login;
+    //       }
+
+    //       &:hover {
+    //         // background-color: $middle-green;
+    //         color: $dark-orange;
+    //       }
+    //     }
+    //   }
+
+    //   p {
+    //     margin: 0;
+    //     font-size: .7rem;
+    //     color: $nearly-white;
+
+    //     a {
+    //       color: $dark-orange;
+
+    //       &:hover {
+    //         color: $middle-orange;
+    //       }
+    //     }
+    //   }
+    // }
+  }
+
+  .dropdown {
+    display: flex;
+    align-items: center;
+    margin-right: $standard-size-and-spacing;
+    position: relative;
+
+    &:hover .dropdown-content,
+    &:focus-within .dropdown-content {
+      display: block;
+    }
+
+    &:hover .dropdown-btn,
+    &:focus-within .dropdown-btn {
+      color: $nearly-white;
+      background-color: $middle-green;
+    }
+
+    &-btn {
+      height: $standard-size-and-spacing;
+      padding: 1.25rem 1rem;
+      color: $nearly-white;
+      transition:  all .2s ease-in-out;
+      -o-transition: all .2s ease-in-out;
+      -moz-transition: all .2s ease-in-out;
+      -webkit-transition: all .2s ease-in-out;
+      cursor: pointer;
+
+      &.login::before {
+        @include icon-font;
+        content: $fa-login;
+        font-size: 150%;
+      }
+      
+      &.profile::before {
+        @include icon-font;
+        content: $fa-user;
+        font-size: 150%;
+      }
+
+      h3.user-name {
+        padding-right: 2px;
+        // font-size: 85%;
+        font-size: 120%;
+        display: inline;
+      }
+    }
+
+    &-content {
+      display: none;
+      width: fit-content;
+      margin-top: $standard-size-and-spacing;
+      padding: 0;
+      background-color: $middle-green;
+      position: absolute;
+      top: 0;
+      z-index: 999;
+
+      &--left {
+        left: 0;
+      }
+
+      &--right {
+        right: 0;
+        padding: 1rem;
+      }
+
+      form.login {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        legend {
+          padding-bottom: $base-padding;
+          color: $nearly-white;
+        }
+        
+        input[type=text],
+        input[type=password] {
+          @include input-field;
+          margin-bottom: 8px;
+          height: 2rem;
+        }
+  
+        button.btn-login {
+          width: 100%;
+          height: 2rem;
+          margin-bottom: 1rem;
+          background-color: $dark-green;
+          color: $nearly-white;
+          font-size: 120%;
+          border: none;
+          border-color: unset;
+          border-radius: 0;
+          text-shadow: none;
+          font-weight: normal;
+          top: unset;
+          transition:  all .2s ease-in-out;
+          -o-transition: all .2s ease-in-out;
+          -moz-transition: all .2s ease-in-out;
+          -webkit-transition: all .2s ease-in-out;
+  
+          &::after {
+            content: $fa-login;
+          }
+
+          &:hover {
+            // color: $dark-orange;
+            background-color: $dark-orange;
+          }
+        }
+      }
+
+      p {
+        margin: 0;
+        font-size: .7rem;
+        color: $nearly-white;
+
+        a {
+          color: $dark-orange;
+
+          &:hover {
+            color: $middle-orange;
+          }
+        }
+      }
+    }
+
+    &-item {
+      display: block;
+      padding: .75rem;
+      font-size: 1rem;
+      color: $nearly-white;
+      transition:  all .2s ease-in-out;
+      -o-transition: all .2s ease-in-out;
+      -moz-transition: all .2s ease-in-out;
+      -webkit-transition: all .2s ease-in-out;
+
+      &:hover {
+        color: $nearly-white;
+        background-color: $light-green;
+      }
+
+      &.logout::before {
+        @include icon-font;
+        content: $fa-logout;
+        font-size: 1rem;
+      }
+
+      span {
+        display: inline;
+      }
+    }
+  }
+
+  .burger-icon {
+    display: none;
+
+    &::after {
+      @include icon-font;
+      content: $fa-bars;
+    }
+  }
+}
+
 header {
   @include box-sizing-box();
   position:         relative;
   background-color: $light-green;
-  padding:          $base-padding 0 0 $base-padding;
+  // padding:          $base-padding 0 0 $base-padding;
+  padding-top:      $standard-size-and-spacing;
   font-size:        10pt;
   color:            $nearly-white;
-  
+
+  &.shifted {
+    padding-left: $logo-left-distance;
+  }
+
   span.select {
     display:     inline-block;
     cursor:      pointer;
@@ -64,9 +339,12 @@
   form {
     position:     relative;
     display:      block;
-    padding-left: $logo-left-distance;
+    // padding-left: $logo-left-distance;
     min-height:   2.7em;
-    margin:       0px;
+
+    &#searchform {
+      margin: 0 $standard-size-and-spacing;
+    }
   }
 
   input {
@@ -92,7 +370,8 @@
       top:              0;
       right:            0;
       margin-right:     0;
-      width:            math.div($standard-margin,2);
+      width:            20px;
+      // width:            math.div($standard-margin,2);
       background-color: $dark-green;
       text-align:       center;
       height:           100%;
@@ -118,7 +397,6 @@
       @include icon-font;
     }
 
-    // Icons for buttons
     > a.tutorial::after {
       content: $fa-tutorial;
     }
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index 68222b7..df85e25 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -4,6 +4,13 @@
 /**
  * Rules for the Kalamar hint helper.
  */
+
+#hint {
+  &.shifted {
+    left: $logo-left-distance;
+  }
+}
+
 ul.menu.hint {
   display:     inline-block;
   white-space: normal;
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index b082050..48f8bc5 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -10,6 +10,7 @@
   margin-bottom: 3px;
   width:         100%;
   margin:        0;
+  border-radius: 6px;
 
   &::-webkit-search-cancel-button {
     display: none;
@@ -28,13 +29,14 @@
   position:      relative;
   width:         100%;
   padding:       0;
-  padding-right: $right-distance + $button-width;
+  // padding-right: $right-distance + $button-width;
   margin-top: 7pt;
 
   button[type=submit] {
     position: absolute;
     padding:  0;
-    right:    $right-distance;
+    // right:    $right-distance;
+    right: 0;
 
     &:not(.loading)::after {
       content: $fa-search;
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index edd83e9..9057cad 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -14,6 +14,12 @@
 
   .builder {
     position: initial;
+
+    + .action {
+      .minimize::after {
+        color: $dark-grey !important;
+      }
+    }
   }
 
   .docGroup {
diff --git a/dev/scss/main/announcements.scss b/dev/scss/main/announcements.scss
new file mode 100644
index 0000000..5db0e27
--- /dev/null
+++ b/dev/scss/main/announcements.scss
@@ -0,0 +1,66 @@
+@charset "utf-8";
+@import "../util";
+
+section#announcements {
+  background-color: $ids-green-2;
+  mix-blend-mode: soft-light;
+  padding: 1em;
+  padding-right: 2em;
+  border-radius: $standard-border-radius;
+  border-left: 5px solid $ids-green-1;
+  height: 20rem;
+  overflow-y: scroll;
+  font-size: .8rem;
+  width: 100%;
+
+  h3 {
+    font-size: 1rem;
+  }
+
+  dt {
+    // float: left;
+    // clear: left;
+    // width: 15ex;
+    // text-align: right;
+    text-align: left;
+    font-weight: bold;
+    float: none;
+    width: auto;
+    padding-bottom: .2em;
+  }
+  
+  dd.maintenance > h4::after {
+    @include icon-font;
+    color: $ids-pink-1;
+    content: " " + $fa-warn;
+  }
+  
+  dd {
+    // margin: 0 1ex 0 16ex;
+    margin-left: 1em;
+    padding: 0 0 0.5em 1em;
+    > p { 
+      max-width: 80ex;
+      margin-block-start: 0ex;
+    }
+
+    > h4 {
+      margin-block-start: 0ex;
+      margin-block-end: 0.33ex;
+    }
+  }
+}
+
+@media all and (max-width: 42.5em) {
+  section#announcements {
+    dt {
+      // text-align: left;
+      // float: none;
+      // width: auto;
+      // padding-bottom: .2em;
+    }
+    dd {
+      // margin-left: 1em;
+    }
+  }
+}
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index e3b4d63..f667759 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -5,6 +5,12 @@
  */
 div.intro {
 
+  &-container {
+    margin-top: 3rem;
+    display: flex;
+    gap: $standard-size-and-spacing;
+  }
+
   // Visited links
   a:visited {
     color: $darkest-orange
@@ -20,6 +26,17 @@
   }
 }
 
-aside.active:not(.off) ~ main div.intro {
-  margin-left: $logo-left-distance - $standard-margin + $base-padding;
-}
\ No newline at end of file
+@media all and (max-width: 42.5em) {
+  div.intro {
+    &-container {
+      margin-top: 1rem;
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+}
+
+// aside.active:not(.off) ~ main div.intro {
+//   margin-left: $logo-left-distance - $standard-margin + $base-padding;
+// }
+
diff --git a/dev/scss/main/introjs.scss b/dev/scss/main/introjs.scss
index 1e8ffe7..5cc4013 100644
--- a/dev/scss/main/introjs.scss
+++ b/dev/scss/main/introjs.scss
@@ -198,7 +198,9 @@
   padding: 0;
   font-weight: 700;
   float: left;
-  line-height: 32px; }
+  line-height: 32px;
+  top: 1rem;
+}
 
 .introjs-tooltip-header {
   padding-left: 20px;
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 9b26013..eaa309d 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -9,17 +9,17 @@
     content: "" !important;
   }
 
-  div.logoaddon {
-    position:absolute;
-    display: block;
-    font-size: 45%;
-    right: 5pt;
-    bottom: 2.5pt;
-    text-align:right;
-    color: $nearly-white;
-    padding: 3pt;
-    text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
-  }
+//  div.logoaddon {
+//    position:absolute;
+//    display: block;
+//    font-size: 45%;
+//    right: 5pt;
+//    bottom: 2.5pt;
+//    text-align:right;
+//    color: $nearly-white;
+//    padding: 3pt;
+//    text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
+//  }
   
   > * {
     background: {
@@ -31,6 +31,26 @@
     > span {
       @include blind;
     }
+
+    > div.logoaddon {
+      position:absolute;
+      display: block;
+      font-size: 10pt;
+      right: -1rem;
+      top: 1.7rem;
+      // bottom: 4pt;
+      // text-align:right;
+      color: $nearly-white;
+      // padding: 3pt;
+      text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
+
+      // Values from new logo:
+      // font-size: 45%;
+      // right: 5pt;
+      // bottom: 2.5pt;
+      // text-align: right;
+      // padding: 3pt;
+    }
   }
 }
 
@@ -44,9 +64,10 @@
 a.logo > h1 {
   position:    absolute;
   margin:      0;
-  margin-left: 10pt;
+  // margin-left: 10pt;
+  margin-left: 3rem;
   left:        0;
-  top:         0;
+  top:         50%;
   width:       7.8em;
   height:      2.4em;
   z-index:     105;
@@ -54,11 +75,15 @@
     size:  78% !important;
     image: url('#{$img-path}/korap-logo.svg');
   }
+  transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
 }
 
-aside.active ~ header h1 {
-  position: fixed;
-}
+// aside.active ~ header h1 {
+//   position: fixed;
+// }
 
 
 #overview {
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 78bbad4..bb64ac0 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -1,38 +1,43 @@
 @use 'sass:math';
-@import "highlight";   // JSON highlighting
-@import "kwic";        // Kwic view information
-@import "logos";       // Logo images
-@import "matchinfo";   // Match table
-@import "pagination";  // Pagination
-@import "query";       // View query
-@import "resultinfo";  // Information on results
-@import "tutorial";    // Embedded and non-embedded tutorial
-@import "koralquery";  // KoralQuery
-@import "alertify";    // Styling alerts
-@import "intro";       // Intro page
-@import "panel";       // Base panel system
-@import "introjs";     // Guided Tour
-@import "introjs-ids"; // Guided Tour: IDS specific 
-@import "oauth";       // OAuth Management styles
-@import "news";        // View for optional news
-@import "plugin";      // Rules for embedded plugins
-@import "marketplace"; // Plugin Marketplace styles
+@import 'highlight'; // JSON highlighting
+@import 'kwic'; // Kwic view information
+@import 'logos'; // Logo images
+@import 'matchinfo'; // Match table
+@import 'pagination'; // Pagination
+@import 'query'; // View query
+@import 'resultinfo'; // Information on results
+@import 'tutorial'; // Embedded and non-embedded tutorial
+@import 'koralquery'; // KoralQuery
+@import 'alertify'; // Styling alerts
+@import 'intro'; // Intro page
+@import 'panel'; // Base panel system
+@import 'introjs'; // Guided Tour
+@import 'introjs-ids'; // Guided Tour: IDS specific
+@import 'oauth'; // OAuth Management styles
+@import 'announcements'; // Styling for announcements
+@import 'news'; // View for optional news
+@import 'plugin'; // Rules for embedded plugins
+@import 'marketplace'; // Plugin Marketplace styles
 // @import "tagger";   // Tagger
 
-@import "../util";
-
+@import '../util';
 
 main {
-  padding-bottom: $footer-height + math.div($standard-margin,2);
+  padding: 0 $standard-size-and-spacing;
+  padding-bottom: $footer-height + math.div($standard-margin, 2);
 
-  margin: {
-    left:  $standard-margin; 
-    right: math.div($standard-margin,2);
+  // margin: {
+  //   left:  $standard-margin;
+  //   right: math.div($standard-margin,2);
+  // }
+
+  &.shifted {
+    padding-left: calc($standard-size-and-spacing + $logo-left-distance);
   }
 
   &.embedded {
     margin: {
-      left:  14px;
+      left: 14px;
       right: 14px;
     }
   }
@@ -45,27 +50,27 @@
   }
 
   h2#page-top {
-    margin-top:  0;
+    margin-top: 0;
     padding-top: 1em;
   }
 
-  &.page {
-    margin-left: $logo-left-distance + 15px;
-    p,
-    li,
-    dd,
-    dt {
-      code {
-        background-color: $ids-grey-2;
-        color:            $ids-grey-1;
-        padding:          0 .5em;
-        border-radius:    $standard-border-radius;
-      }
-    }
-  }
+  // &.page {
+  //   margin-left: $logo-left-distance + 15px;
+  //   p,
+  //   li,
+  //   dd,
+  //   dt {
+  //     code {
+  //       background-color: $ids-grey-2;
+  //       color:            $ids-grey-1;
+  //       padding:          0 .5em;
+  //       border-radius:    $standard-border-radius;
+  //     }
+  //   }
+  // }
 
   p.hint {
-    margin:     0 auto;
+    margin: 0 auto;
     text-align: center;
   }
 }
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index 41b5b44..c1c0911 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -2,20 +2,22 @@
 @import "../util";
 
 section#news {
-  background-color: $ids-green-2;
-  -webkit-mix-blend-mode: normal; // Safari
-  mix-blend-mode: soft-light;
-  padding: 1em;
-  padding-right: 2em;
-  border-radius: $standard-border-radius;
-  border-left: 5px solid $ids-green-1;
+  margin: 2rem 0;
+
+  h3 {
+    font-size: 1rem;
+  }
 
   dt {
-    float: left;
-    clear: left;
-    width: 15ex;
-    text-align: right;
+    // float: left;
+    // clear: left;
+    // width: 15ex;
+    // text-align: right;
+    text-align: left;
     font-weight: bold;
+    float: none;
+    width: auto;
+    padding-bottom: .2em;
   }
   
   dd.maintenance > h4::after {
@@ -25,14 +27,15 @@
   }
   
   dd {
-    margin: 0 1ex 0 16ex;
+    // margin: 0 1ex 0 16ex;
+    margin-left: 1em;
     padding: 0 0 0.5em 1em;
     > p { 
       max-width: 80ex;
       margin-block-start: 0ex;
     }
 
-    > h4 { 
+    > h4 {
       margin-block-start: 0ex;
       margin-block-end: 0.33ex;
     }
@@ -42,13 +45,13 @@
 @media all and (max-width: 42.5em) {
   section#news {
     dt {
-      text-align: left;
-      float: none;
-      width: auto;
-      padding-bottom: .2em;
+      // text-align: left;
+      // float: none;
+      // width: auto;
+      // padding-bottom: .2em;
     }
     dd {
-      margin-left: 1em;
+      // margin-left: 1em;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 88738a9..6ff91e7 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -21,16 +21,148 @@
   }
 
   header {
-    padding-right: 8px;
+    padding-top: 3rem;
+    // padding-right: 8px;
+
+    &.shifted {
+      padding-left: 0;
+    }
   }
   
   header form {
+    margin: 1.5rem 1rem;
     padding-left: 0;
-    padding-top: 33px;
+    // padding-top: 33px;
+
+    &#searchform {
+      margin: 2.5rem 1rem 0 1rem;
+    }
+  }
+
+  .navbar {
+    *:not(:first-child) {
+      display: none;
+    }
+
+    &-group {
+      h3.nav-link {
+        height: 2rem;
+
+        a {
+          padding: .75rem !important;
+        }
+      }
+    }
+
+    .burger-icon {
+      position: relative;
+      display: block !important;
+      width: $standard-size-and-spacing;
+      height: $standard-size-and-spacing;
+      font-size: 1.8rem;
+      color: $nearly-white;
+
+      &::after {
+        position: absolute;
+        top: 2rem;
+        left: 2rem;
+        transform: translate(-50%, -50%);
+        -o-transform: translate(-50%, -50%);
+        -moz-transform: translate(-50%, -50%);
+        -webkit-transform: translate(-50%, -50%);
+      }
+    }
+
+    &.show .burger-icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background-color: $middle-green;
+    }
+
+    &.show * {
+      display: block;
+    }
+
+    &-group {
+      margin-top: $standard-size-and-spacing;
+      width: 100%;
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: $middle-green;
+
+      fieldset.fieldset-login {
+        display: block !important;
+        margin-right: 0 !important;
+        padding: 1rem;
+
+        form.login {
+          align-items: normal !important;
+          flex-direction: column;
+          gap: 8px;
+          
+          input[type=text],
+          input[type=password] {
+            @include input-field;
+            margin-right: 0 !important;
+          }
+    
+          button.btn-login {
+            width: 100% !important;
+            align-self: center;
+            background-color: $dark-green !important;
+
+            &:hover {
+              background-color: $middle-green !important;
+              color: unset !important;
+            }
+          }
+        }
+
+        p {
+          padding: 1rem 0 0;
+
+          a {
+            display: inline;
+          }
+        }
+      }
+    }
+
+    @media (hover: none) and (pointer: coarse) {
+      .dropdown {
+        margin-right: 0 !important;
+
+        &-btn {
+          &.login {
+            visibility: hidden;
+          }
+        }
+
+        &-content {
+          display: block !important;
+          width: 100% !important;
+
+          form.login {
+            input[type=text],
+            input[type=password] {
+              width: 100%;
+            }
+          }
+
+          p {
+            a {
+              display: inline;
+            }
+          }
+        }
+      }
+    }
   }
 
   .vc {
-    
     font-size: 9pt;
     .builder {
       .doc {
@@ -58,13 +190,19 @@
     }
     z-index: 110;
     position: absolute !important;
+    top: 50%;
+    transform: translateY(-50%);
+    -o-transform: translateY(-50%);;
+    -moz-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
   }
 
   #searchbar {
     padding-right: 30px;
     margin-top: 0;
-    input {
+    input#q-field {
       font-size: 9pt;
+      border-radius: 6px 0 0 6px;
     }
     button[type=submit] {
       right: 0;
@@ -80,8 +218,13 @@
   }
 
   main {
+    padding: 1rem;
     margin-left: $standard-margin;
     margin-right: $standard-margin;
+
+    &.shifted {
+      padding-left: 0;
+    }
   }
 
   header .button {
@@ -129,10 +272,17 @@
       padding-right: 0;
       .logo > * {
         background: {
-        size: 60%;
-        position: 0 0;
+          size: 60%;
+          position: 0 0;
+        }
       }
-      }
+    }
+  }
+
+  .logo > * {
+    > div.logoaddon {
+      right: -1.2rem;
+      top: 1.4rem;
     }
   }
 
@@ -160,10 +310,10 @@
       font-size: 9pt;
       line-height: 1em;
     }
-    &.active ~ main div.intro,
-    &.active ~ main.page {
-      margin-left: $standard-margin !important;
-    }
+    // &.active ~ main div.intro,
+    // &.active ~ main.page {
+    //   margin-left: $standard-margin !important;
+    // }
 
     &.active {
       position: relative;
@@ -172,6 +322,7 @@
       width: 100%;
       top: 0;
       border-width: 0;
+
       fieldset input {
         font-size: 9pt;
       }
@@ -182,6 +333,10 @@
         display: none;
       }
     }
+
+    .nav.nav-doc:first-child {
+      margin-top: $standard-size-and-spacing !important;
+    }
   }
 
   #tutorial {
@@ -203,9 +358,9 @@
     }
   }
 
-  main.page {
-    margin-right: 20px;
-  }
+  // main.page {
+  //   margin-right: 20px;
+  // }
 
   footer {
     padding-left: 0 !important;
@@ -220,6 +375,9 @@
         }
       }
     }
+    padding-top: 2rem;
+    flex-direction: column;
+    height: unset;
   }
 }
 
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index da6541f..de7465c 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -1,26 +1,30 @@
 @charset "utf-8";
-@use 'sass:math';
+@use "sass:math";
 @import "../util";
 
 aside {
   background-color: $dark-green;
-  color:       $nearly-white;
-  width:       $logo-left-distance;
-  position:    fixed;
-  display:     block;
-  transition:  all .3s ease-in-out;
-  outline:     none;
-  font-size:   10pt;
-  z-index:     100; // Needs to be behind alerts
-  top:         0;
-  left:        0;
-  height:      100%;
+  color: $nearly-white;
+  width: $logo-left-distance;
+  position: fixed;
+  display: block;
+  transition: all 0.3s ease-in-out;
+  outline: none;
+  font-size: 10pt;
+  z-index: 100; // Needs to be behind alerts
+  top: 0;
+  left: 0;
+  height: 100%;
   padding-top: 65px;
 
   > div {
     overflow-y: auto;
     overflow-x: visible;
     max-height: 100%;
+
+    .fieldset-login {
+      display: none;
+    }
   }
 
   > * {
@@ -29,34 +33,35 @@
 
   &::after {
     @include icon-font;
-    position:  absolute;
-    display:   block;
-    opacity:   0;
-    cursor:    pointer;
-    right:     0;
-    bottom:    0;
-    content:   $fa-login;
+    position: absolute;
+    display: block;
+    opacity: 0;
+    cursor: pointer;
+    right: 0;
+    bottom: 0;
+    // content: $fa-settings;
+    // content: $fa-login;
     font-size: 16pt;
-    width:     16pt;  
-    height:    17pt;
-    padding:   6pt;
+    width: 16pt;
+    height: 17pt;
+    padding: 6pt;
     background-color: $dark-green;
     border-top-right-radius: $standard-border-radius;
-    margin-right: -1 * math.div($standard-margin,2);
+    margin-right: -1 * math.div($standard-margin, 2);
   }
 
   &.settings::after {
-    content:   $fa-settings;
+    content: $fa-settings;
   }
 
   h2,
   legend {
     line-height: 2em;
-    text-align:  center;
-    padding:     0;
-    margin:      0;
+    text-align: center;
+    padding: 0;
+    margin: 0;
     font: {
-      size:   100%;
+      size: 100%;
       weight: bold;
     }
   }
@@ -66,10 +71,10 @@
    */
   ul.nav {
     list-style-type: none;
-    margin:          0;
-    font-size:       10pt;
-    text-indent:     0;
-    padding:         0;
+    margin: 0;
+    font-size: 10pt;
+    text-indent: 0;
+    padding: 0;
 
     li {
       padding: 0;
@@ -116,7 +121,7 @@
         margin: 0;
         font: {
           weight: bold;
-          size:   100%;
+          size: 100%;
         }
       }
 
@@ -137,26 +142,31 @@
   nav > ul > li > a {
     font-weight: bold;
   }
-  
+
   fieldset {
-    position:     relative;
+    position: relative;
     border-width: 0;
 
     legend {
       display: none;
     }
-    
-    input[type=text],
-    input[type=password] {
+
+    input[type="text"],
+    input[type="password"] {
       @include input-field;
       width: 100%;
     }
-    
+
+    .login {
+      display: none;
+    }
+
+    // search form
     > form > div {
-      position:      relative;
-      width:         100%;
-      margin-top:    4px;
-      padding-right: $button-width
+      position: relative;
+      width: 100%;
+      margin-top: 4px;
+      padding-right: $button-width;
     }
 
     > p {
@@ -166,7 +176,7 @@
     > p.announcement {
       color: $nearly-white;
       > time {
-        display:   block;
+        display: block;
         font-size: 70%;
       }
     }
@@ -177,24 +187,24 @@
     }
 
     ul {
-      display:    block;
-      font-size:  80%;
+      display: block;
+      font-size: 80%;
       text-align: right;
-      padding:    0;
+      padding: 0;
       margin-top: 0;
 
       > li {
         display: inline;
         &:first-child::after {
-          content: ' | ';
+          content: " | ";
         }
       }
     }
 
     button {
       position: absolute;
-      top:      0;
-      right:    0;
+      top: 0;
+      right: 0;
       &::after {
         content: $fa-login;
       }
@@ -204,21 +214,25 @@
   // Off aside
   &.off,
   &:not(:focus):not(.active) {
-    margin-left: -1 * ($logo-left-distance - math.div($standard-margin,2));
+    margin-left: -1 * ($logo-left-distance - math.div($standard-margin, 2));
     &::after {
       opacity: 1;
     }
- 
+
     > * {
       opacity: 0;
       transition: {
         property: opacity;
-        duration: .3s;
+        duration: 0.3s;
       }
     }
   }
 
   &.off::after {
-    display:none;
+    display: none;
+  }
+
+  &.invisible {
+    display: none;
   }
 }