diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 5b0e7d1..60f961a 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -131,15 +131,28 @@
     let prevScrollPos = window.scrollY;
 
     window.onscroll = function() {
+      const navbar = document.querySelector('.navbar');
       let currentScrollPos = window.scrollY;
       if (prevScrollPos > currentScrollPos) {
-          document.querySelector('.navbar').style.top = '0';
+          navbar.style.top = '0';
       } else {
-          document.querySelector('.navbar').style.top = '-3rem';
+        if (!navbar.classList.contains('show')) {
+          navbar.style.top = '-3rem';
+        }
       }
       prevScrollPos = currentScrollPos;
     }
 
+    // Responsive navbar: hide and show burger menu
+    document.querySelector('.burger-icon').addEventListener('click', function() {
+      const navbar = document.querySelector('.navbar');
+      if (navbar.className === 'navbar') {
+        navbar.className += ' show';
+      } else {
+        navbar.className = 'navbar';
+      }
+    })
+
     /**
      * Replace Virtual Corpus field
      */
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 04e318e..5b244ba 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -39,25 +39,25 @@
 
     &-group {
 
-      & fieldset.fieldset-login {
+      fieldset.fieldset-login {
         display: inline;
         margin-right: 0;
         padding: 0;
         min-inline-size: unset;
         border: unset;
 
-        & form.login {
+        form.login {
           display: flex;
           align-items: center;
           
-          & input[type=text],
-          & input[type=password] {
+          input[type=text],
+          input[type=password] {
             @include input-field;
             margin-right: 8px;
             height: 2rem;
           }
     
-          & button.btn-login {
+          button.btn-login {
             width: 3rem;
             height: 3rem;
             background-color: $dark-green;
@@ -79,7 +79,7 @@
               content: $fa-login;
             }
           }
-          & button.btn-login:hover {
+          button.btn-login:hover {
             background-color: $middle-green;
           }
         }
@@ -140,7 +140,6 @@
         display: block;
         padding: .75rem;
         font-size: 120%;
-        // font-weight: bold;
         color: $nearly-white;
         transition:  all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
@@ -153,40 +152,14 @@
       }
     }
 
-    // &-item {
-    //   height: 3rem;
-    //   padding: .6rem .9rem;
-    //   font-size: 180% !important;
-    //   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;
+    .burger-icon {
+      display: none;
 
-    //   &:hover {
-    //     background-color: $middle-green;
-    //   }
-
-    //   &.profile {
-    //     width: 3rem;
-    //     height: 3rem;
-    //     padding: .6rem .9rem;
-
-    //     &:hover {
-    //       background-color: $middle-green;
-    //     }
-    //   }
-
-    //   &.logout {
-    //     width: 3rem;
-    //     height: 3rem;
-    //     margin-left: 1rem;
-    //     padding: .6rem .9rem;
-        
-    //     &:hover {
-    //       background-color: $middle-green;
-    //     }
-    //   }
-    // }
+      &::after {
+        @include icon-font;
+        content: $fa-bars;
+      }
+    }
   }
 
   span.select {
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index 80130f0..9c02452 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -26,6 +26,16 @@
   }
 }
 
+@media all and (max-width: 42.5em) {
+  div.intro {
+    &-container {
+      margin-top: 1rem;
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+}
+
 // aside.active ~ main div.intro {
 //   margin-left: $logo-left-distance - $standard-margin + $base-padding;
 // }
\ No newline at end of file
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 3a63c24..af8a0db 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -53,9 +53,9 @@
   }
 }
 
-aside.active ~ header h1 {
-  position: fixed;
-}
+// aside.active ~ header h1 {
+//   position: fixed;
+// }
 
 
 #overview {
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index 7cdb669..32b97b0 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -10,13 +10,23 @@
   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;
+    // 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 {
@@ -26,14 +36,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;
     }
@@ -43,13 +54,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;
     }
   }
 }
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index d7875f8..dcf78dd 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -21,16 +21,82 @@
   }
 
   header {
+    padding-top: 2rem;
     padding-right: 8px;
   }
   
   header form {
+    margin: 1.5rem 1rem;
     padding-left: 0;
-    padding-top: 33px;
+    // padding-top: 33px;
+  }
+
+  .navbar {
+    *:not(:first-child) {
+      display: none;
+    }
+
+    .burger-icon {
+      display: block !important;
+      padding: .6rem .9rem;
+      font-size: 1.5rem;
+      color: $nearly-white;
+    }
+
+    &.show .burger-icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background-color: $middle-green;
+    }
+
+    &.show * {
+      display: block;
+    }
+
+    &-group {
+      margin-top: 3rem;
+      width: 100%;
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      background-color: $middle-green;
+
+      fieldset.fieldset-login {
+        width: 100%;
+
+        form.login {
+          align-items: normal !important;
+          flex-direction: column;
+          gap: 6px;
+          
+          input[type=text],
+          input[type=password] {
+            @include input-field;
+            margin-right: 0 !important;
+          }
+    
+          button.btn-login {
+            width: 100% !important;
+            align-self: center;
+          }
+        }
+      }
+    }
+
+    @media (hover: none) and (pointer: coarse) {
+      .dropdown {
+        margin-right: 0 !important;
+
+        &-content {
+          display: block !important;
+        }
+      }
+    }
   }
 
   .vc {
-    
     font-size: 9pt;
     .builder {
       .doc {
@@ -58,6 +124,11 @@
     }
     z-index: 110;
     position: absolute !important;
+    top: 50%;
+    transform: translateY(-50%);
+    -o-transform: translateY(-50%);;
+    -moz-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
   }
 
   #searchbar {
@@ -81,6 +152,7 @@
   }
 
   main {
+    padding: 1rem;
     margin-left: $standard-margin;
     margin-right: $standard-margin;
   }
@@ -173,6 +245,7 @@
       width: 100%;
       top: 0;
       border-width: 0;
+
       fieldset input {
         font-size: 9pt;
       }
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index 9e52ab2..f5542ee 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -3,12 +3,11 @@
 @import "../util";
 
 aside {
-  display: none;
   background-color: $dark-green;
   color:       $nearly-white;
   width:       $logo-left-distance;
   position:    fixed;
-  // display:     block;
+  display:     block;
   transition:  all .3s ease-in-out;
   outline:     none;
   font-size:   10pt;
@@ -18,6 +17,10 @@
   height:      100%;
   padding-top: 65px;
 
+  &:not(.settings) {
+    display: none;
+  }
+
   > div {
     overflow-y: auto;
     overflow-x: visible;
@@ -152,6 +155,10 @@
       @include input-field;
       width: 100%;
     }
+
+    .login {
+      display: none;
+    }
     
     // search form
     > form > div {
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 756a6fe..f35fdc6 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -6,6 +6,13 @@
       %= include 'partial/auth/login'
       %= content_block 'headerButtonGroup'
     </div>
+
+    <div class="burger-icon"></div>
+
+    <!-- <a href="javascript:void(0);" class="burger-icon" onclick="toggleNavBar()"></a> -->
+
+    <!-- <input type="checkbox" class="burger-icon" id="burger-menu" />
+    <label for="burger-menu" class="burger-icon"></label> -->
   </nav>
 
   <form autocomplete="off" action="<%= url_for 'index' %>" id="searchform">