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 {