diff --git a/Changes b/Changes
index 0fdac7b..fb8c43c 100644
--- a/Changes
+++ b/Changes
@@ -1,3 +1,26 @@
+0.57 2024-07-14
+        - Improve appearance of title-addon on logo. (uyen-nhu)
+        - Create and style new item on top navbar for 'News'. (uyen-nhu)
+        - Change settings link in logout.html.ep to dynamic link. (uyen-nhu)
+
+0.56 2024-07-09
+        - Add an indicator for user login, and some minor design changes. (uyen-nhu)
+        - Add back content_block headerButtonGroup due to backwards
+          compatibility and modify header.html.ep to fit changes. (uyen-nhu)
+        - Correct color of minimize button for snippets to
+          nearly-white, and add media query for border-radius of
+          the search bar. (uyen-nhu)
+        - Delete helper class get_user_name and set user_handle
+          instead to get the user name. (uyen-nhu)
+        - Add scroll functionality for navbar: hide on scroll down,
+          show on scroll up. (uyen-nhu)
+        - Create burger menu and add responsive styles for navbar,
+          optimize element positions in header. (uyen-nhu)
+        - Add and style registration link to fit in login area,
+          change navbar size and input fields, improve positionings of
+          logo and icons, fix animation of navbar when scrolling on
+          small devices. (uyen-nhu)
+
 0.55 2024-06-26
         - Removed deprecated doc_link_to helper. (diewald)
         - Removed deprecated doc_ext_link_to helper. (diewald)
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 6e6b4f1..bc1d2e9 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -127,6 +127,32 @@
       }
     );
 
+    // Hide and show navbar on scroll
+    let prevScrollPos = window.scrollY;
+
+    window.onscroll = function() {
+      const navbar = document.querySelector('.navbar');
+      let currentScrollPos = window.scrollY;
+      if (prevScrollPos > currentScrollPos) {
+          navbar.style.top = '0';
+      } else {
+        if (!navbar.classList.contains('show')) {
+          navbar.style.top = '-4rem';
+        }
+      }
+      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/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/footer/footer.scss b/dev/scss/footer/footer.scss
index e2ec64e..f981cbc 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%;
@@ -94,6 +94,6 @@
 }
 
 aside.active ~ 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 10d1256..dcae2d2 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -15,10 +15,194 @@
   @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:      4rem;
   font-size:        10pt;
   color:            $nearly-white;
   
+  .navbar {
+    width: 100%;
+    height: 4rem;
+    background-color: $dark-green;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+    // overflow: hidden;
+    position: fixed;
+    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: baseline;
+
+      h3.news {
+        height: 4rem;
+        font-size: 120%;
+        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;
+
+          a {
+            color: $dark-orange;
+
+            &:hover {
+              color: $middle-orange;
+            }
+          }
+        }
+      }
+    }
+
+    .dropdown {
+      display: flex;
+      align-items: center;
+      margin-right: 4rem;
+      position: relative;
+
+      &:hover .dropdown-content {
+        display: block;
+      }
+
+      &:hover .dropdown-btn {
+        background-color: $middle-green;
+      }
+
+      &-btn {
+        height: 4rem;
+        // padding: 1rem;
+        padding: 1.5rem 1rem;
+        // font-size: 180% !important;
+        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;
+        
+        &.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: 4rem;
+        padding: 0;
+        background-color: $middle-green;
+        list-style: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 999;
+      }
+
+      &-item {
+        display: block;
+        padding: .75rem;
+        font-size: 120%;
+        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 {
+          background-color: $light-green;
+        }
+      }
+    }
+
+    .burger-icon {
+      display: none;
+
+      &::after {
+        @include icon-font;
+        content: $fa-bars;
+      }
+    }
+  }
+
   span.select {
     display:     inline-block;
     cursor:      pointer;
@@ -63,9 +247,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 4rem;
+    }
   }
 
   input {
@@ -91,7 +278,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%;
@@ -117,7 +305,6 @@
       @include icon-font;
     }
 
-    // Icons for buttons
     > a.tutorial::after {
       content: $fa-tutorial;
     }
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/intro.scss b/dev/scss/main/intro.scss
index 8f83175..9c02452 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: 4rem;
+  }
+
   // Visited links
   a:visited {
     color: $darkest-orange
@@ -20,6 +26,16 @@
   }
 }
 
-aside.active ~ 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 ~ 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 325196c..8f5d2c2 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: 4pt;
-    text-align:right;
-    color: $dark-orange;
-    padding: 3pt;
-    text-shadow: 1pt 1pt 0 $nearly-white, -1pt -1pt 0 $nearly-white, -1pt 1pt 0 $nearly-white, 1pt -1pt 0 $nearly-white;
-  }
+  // div.logoaddon {
+  //   position:absolute;
+  //   display: block;
+  //   font-size: 45%;
+  //   right: 5pt;
+  //   bottom: 4pt;
+  //   text-align:right;
+  //   color: $dark-orange;
+  //   padding: 3pt;
+  //   text-shadow: 1pt 1pt 0 $nearly-white, -1pt -1pt 0 $nearly-white, -1pt 1pt 0 $nearly-white, 1pt -1pt 0 $nearly-white;
+  // }
   
   > * {
     background: {
@@ -31,6 +31,19 @@
     > span {
       @include blind;
     }
+
+    > div.logoaddon {
+      position:absolute;
+      display: block;
+      font-size: 10pt;
+      right: -1rem;
+      top: 1.7rem;
+      // bottom: 4pt;
+      // text-align:right;
+      color: $dark-orange;
+      // padding: 3pt;
+      text-shadow: 1pt 1pt 0 $nearly-white, -1pt -1pt 0 $nearly-white, -1pt 1pt 0 $nearly-white, 1pt -1pt 0 $nearly-white;
+    }
   }
 }
 
@@ -40,9 +53,10 @@
 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;
@@ -50,11 +64,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 e8c062d..910cd0a 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -23,12 +23,13 @@
 
 
 main {
+  padding: 0 4rem;
   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);
+  // }
 
   &.embedded {
     margin: {
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index 41b5b44..32b97b0 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -3,19 +3,30 @@
 
 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;
+  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 {
@@ -25,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;
     }
@@ -42,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;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 88738a9..4c089a0 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -21,16 +21,122 @@
   }
 
   header {
-    padding-right: 8px;
+    padding-top: 2rem;
+    // padding-right: 8px;
   }
   
   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.news {
+        a {
+          padding: .75rem !important;
+        }
+      }
+    }
+
+    .burger-icon {
+      position: relative;
+      display: block !important;
+      width: 4rem;
+      height: 4rem;
+      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: 4rem;
+      width: 100%;
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      background-color: $middle-green;
+
+      fieldset.fieldset-login {
+        display: block !important;
+        margin-right: 0 !important;
+
+        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;
+            background-color: $dark-green !important;
+
+            &:hover {
+              background-color: $middle-green !important;
+              color: unset !important;
+            }
+          }
+        }
+
+        p {
+          padding: 0 1rem 1rem;
+
+          a {
+            display: inline;
+          }
+        }
+      }
+    }
+
+    @media (hover: none) and (pointer: coarse) {
+      .dropdown {
+        margin-right: 0 !important;
+
+        &-content {
+          display: block !important;
+          width: 100% !important;
+        }
+      }
+    }
   }
 
   .vc {
-    
     font-size: 9pt;
     .builder {
       .doc {
@@ -58,13 +164,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,6 +192,7 @@
   }
 
   main {
+    padding: 1rem;
     margin-left: $standard-margin;
     margin-right: $standard-margin;
   }
@@ -129,10 +242,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;
     }
   }
 
@@ -172,6 +292,7 @@
       width: 100%;
       top: 0;
       border-width: 0;
+
       fieldset input {
         font-size: 9pt;
       }
@@ -220,6 +341,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..39680a8 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,21 @@
   // 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;
   }
 }
diff --git a/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep b/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep
index 9d6d535..34692c9 100644
--- a/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep
+++ b/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep
@@ -6,9 +6,9 @@
 %   } elsif (flash('handle') && !param('handle')) {
 %     param(handle_or_email => flash('handle'));
 %   };
-    <fieldset>
+    <fieldset class="fieldset-login">
     %= form_for 'login', 'accept-charset' => 'utf-8', class => 'login', begin
-      <legend><span><%= loc 'login' %></span></legend>
+      <!-- <legend><span><%= loc 'login' %></span></legend> -->
       %= csrf_field
       %= text_field 'handle_or_email', placeholder => loc('userormail')
       %= hidden_field fwd => $c->url_with
@@ -19,10 +19,10 @@
         %= hidden_field 'scope' => stash('scope')
         %= hidden_field 'redirect_uri' => stash('close_redirect_uri')
       % };
-      <div>
+      <!-- <div> -->
         %= password_field 'pwd', placeholder => loc('pwd')
-        <button type="submit"><span><%= loc 'go' %></span></button>
-      </div>
+        <button type="submit" class="btn-login"><span><%= loc 'go' %></span></button>
+      <!-- </div> -->
     % end
 
     %= content_block 'loginInfo', separator => '<hr />'
diff --git a/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep b/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
index 5464664..a10c746 100644
--- a/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
+++ b/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
@@ -1,6 +1,27 @@
 % if ($c->auth->token) {
    %# TODO: CSRF protection
-   <a href="<%= url_for 'logout' %>"
-      class="logout"
-      title="<%= loc 'logout' %>: <%= user_handle %>"><span><%= loc 'logout' %></span></a>
+   <h3 class="news"><%= link_to loc('news') => 'doc/news' %></h3>
+   <div class="dropdown">
+      <div class="dropdown-btn profile">
+         <h3 class="user-name">
+            <%= user_handle %>
+         </h3>
+      </div>
+      <ul class="dropdown-content">
+         <li>
+            <%= link_to loc('settings') => 'settings', class => 'dropdown-item' %>
+         </li>
+         <li>
+            <a href="<%= url_for 'logout' %>"
+            class="dropdown-item logout"
+            title="<%= loc 'logout' %>: <%= user_handle %>">
+               <span><%= loc 'logout' %></span>
+            </a>
+         </li>
+      </ul>
+      <!-- <a href="<%= url_for 'logout' %>"
+         class="navbar-item logout"
+         title="<%= loc 'logout' %>: <%= user_handle %>"><span><%= loc 'logout' %></span>
+      </a> -->
+   </div>
 % };
diff --git a/lib/Kalamar/Plugin/KalamarUser.pm b/lib/Kalamar/Plugin/KalamarUser.pm
index 3963fec..0b3fee8 100644
--- a/lib/Kalamar/Plugin/KalamarUser.pm
+++ b/lib/Kalamar/Plugin/KalamarUser.pm
@@ -54,7 +54,7 @@
         $c->stash(user => $user);
         return $user;
       };
-
+      
       return 'not_logged_in';
     }
   );
diff --git a/templates/de/intro.html.ep b/templates/de/intro.html.ep
index e15c9a2..d4f0dc5 100644
--- a/templates/de/intro.html.ep
+++ b/templates/de/intro.html.ep
@@ -1,13 +1,16 @@
 % layout 'main', login_active => 1;
 
-<div class="intro">
-  <p><strong>KorAP</strong> ist eine neue Korpusanalyseplattform, optimiert für große, mehrfach annotierte Korpora und komplexe Suchmechanismen. Dabei versucht KorAP unabhängig von spezifischen Forschungsfragen zu sein.</p>
+<div class="intro-container">
+  <div class="intro">
+    <p><strong>KorAP</strong> ist eine neue Korpusanalyseplattform, optimiert für große, mehrfach annotierte Korpora und komplexe Suchmechanismen. Dabei versucht KorAP unabhängig von spezifischen Forschungsfragen zu sein.</p>
 
-  <p><noscript>KorAP erwartet für einige Funktionen die Aktivierung von JavaScript.</noscript></p>
-  <p><strong>Neu bei KorAP?</strong> Dann starten Sie doch mit unserer <a id="link-guided-tour">Tour</a> oder lesen Sie unsere <%= doc_opener 'ql', begin %>Einführung<% end %>!</p>
-  
+    <p><noscript>KorAP erwartet für einige Funktionen die Aktivierung von JavaScript.</noscript></p>
+    <p><strong>Neu bei KorAP?</strong> Dann starten Sie doch mit unserer <a id="link-guided-tour">Tour</a> oder lesen Sie unsere <%= doc_opener 'ql', begin %>Einführung<% end %>!</p>
+    
+    <!-- %= include 'announcement', lang => 'de' -->
+
+    <p>KorAP wird am <a href="http://www.ids-mannheim.de">Leibniz-Institut für Deutsche Sprache</a> in Mannheim entwickelt, Mitglied der <a href="http://www.leibniz-gemeinschaft.de">Leibniz Gemeinschaft</a>. Die einzelnen Module werden als Open Source auf <a href="http://github.com/KorAP">GitHub</a> veröffentlicht.</p>
+  </div>
+
   %= include 'announcement', lang => 'de'
-
-  <p>KorAP wird am <a href="http://www.ids-mannheim.de">Leibniz-Institut für Deutsche Sprache</a> in Mannheim entwickelt, Mitglied der <a href="http://www.leibniz-gemeinschaft.de">Leibniz Gemeinschaft</a>. Die einzelnen Module werden als Open Source auf <a href="http://github.com/KorAP">GitHub</a> veröffentlicht.</p>
-
-</div>
+</div>
\ No newline at end of file
diff --git a/templates/intro.html.ep b/templates/intro.html.ep
index 1ecab62..1a5febc 100644
--- a/templates/intro.html.ep
+++ b/templates/intro.html.ep
@@ -1,15 +1,17 @@
 % layout 'main', login_active => 1;
 
+<div class="intro-container">
+  <div class="intro">
+    <p><strong>KorAP</strong> is a new Corpus Analysis Platform, suited for large, multiply annotated corpora and complex search queries independent of particular research questions.</p>
 
-<div class="intro">
-  <p><strong>KorAP</strong> is a new Corpus Analysis Platform, suited for large, multiply annotated corpora and complex search queries independent of particular research questions.</p>
+    <p><noscript>KorAP expects activated JavaScript for some features.</noscript></p>
 
-  <p><noscript>KorAP expects activated JavaScript for some features.</noscript></p>
+    <p><strong>New to KorAP?</strong> Please check out our <a id="link-guided-tour">guided tour</a> or our <%= doc_opener 'ql', begin %>tutorial<% end %>!</p>
+    
+    <!-- %= include 'announcement', lang => 'en' -->
 
-  <p><strong>New to KorAP?</strong> Please check out our <a id="link-guided-tour">guided tour</a> or our <%= doc_opener 'ql', begin %>tutorial<% end %>!</p>
-  
+    <p>KorAP is developed at the <a href="https://www.ids-mannheim.de">Leibniz Institute for the German Language</a>, member of the <a href="http://www.leibniz-gemeinschaft.de">Leibniz Association</a>. The separated modules are being published as open source at <a href="http://github.com/KorAP">GitHub</a>.</p>
+  </div>
+
   %= include 'announcement', lang => 'en'
-
-  <p>KorAP is developed at the <a href="https://www.ids-mannheim.de">Leibniz Institute for the German Language</a>, member of the <a href="http://www.leibniz-gemeinschaft.de">Leibniz Association</a>. The separated modules are being published as open source at <a href="http://github.com/KorAP">GitHub</a>.</p>
-
-</div>
+</div>
\ No newline at end of file
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 5622d32..f35fdc6 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -1,8 +1,20 @@
 <header>
-  <%= link_to 'index', class => 'logo', begin %><h1><span><%= title() // loc('korap_desc') %></span><% if (loc('title_addon')) { %><div class="logoaddon"><%= loc('title_addon') %></div><% } %></h1><% end %>
-  <div class="button top">
-    %= content_block 'headerButtonGroup'
-  </div>
+  <nav class="navbar">
+    <%= link_to 'index', class => 'logo', begin %><h1><span><%= title() // loc('korap_desc') %></span><% if (loc('title_addon')) { %><div class="logoaddon"><%= loc('title_addon') %></div><% } %></h1><% end %>
+
+    <div class="navbar-group">
+      %= 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">
     <div id="searchbar">
       %= search_field 'q', id => 'q-field', autofocus => 'autofocus', placeholder => loc('searchplaceholder'), spellcheck => 'false', autocomplete => 'off', autocorrect => 'off', autocapitalize => 'off'
diff --git a/templates/partial/side.html.ep b/templates/partial/side.html.ep
index a8deb0e..365635a 100644
--- a/templates/partial/side.html.ep
+++ b/templates/partial/side.html.ep
@@ -13,8 +13,8 @@
 %   $classes .= ' off';
 % } elsif (stash('sidebar_active')) {
 %   $classes .= ' active';
-% } elsif (stash('login_active') && !$classes) {
-%   $classes .= ' active';
+#% } elsif (stash('login_active') && !$classes) {
+#%   $classes .= ' active';
 % };