diff --git a/dev/demo/all.html b/dev/demo/all.html
index ffbad93..067acef 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -19,7 +19,9 @@
       <a href="/" class="logo" tabindex="-1"><h1><span>KorAP - Corpus Analysis Platform</span></h1></a>
 
       <div class="button top">
+<!--
 	<a href="#" class="login" tabindex="-1"><span>Login</span></a>
+-->
       </div>
 
       <form autocomplete="off" action="/kalamar" id="searchform">
@@ -63,13 +65,24 @@
       </form>
     </header>
 
-    <aside tabindex="0">
+    <aside tabindex="0" class="active">
+      <div>
+	<fieldset>
+	  <form>
+	    <legend><span>Login</span></legend>
+ 	    <input type="text" name="handle_or_email" placeholder="Benutzername" />
+	    <div>
+	      <input type="password" name="pwd" placeholder="Passwort" />
+	      <button type="submit"><span>Go</span></button>
+	    </div>
+	</form>
+	</fieldset>
+      </div>
+
+<!--
       <h2>Einstellungen</h2>
-      <p>Anzahl Treffer pro Seite</p>
-      <p>Kontext:</p>
-      <p>200 Zeichen/Token - 200 Zeichen/Token</p>
-      <p>1 Satz 1 Paragraph</p>
       <a>Deutsch|Englisch</a>
+-->
     </aside>
 
     <main>
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index cbdc377..68854fb 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,6 +1,8 @@
 @charset "utf-8";
 @import "util";
 
+$border-size: 2px;
+
 /**
  * Basic global CSS rules for Kalamar
  */
@@ -41,6 +43,8 @@
   position: relative;
   min-height: 100%;
   font-size: 12pt;
+  margin: 0;
+  padding: 0;
 }
 
 
@@ -84,3 +88,50 @@
     }
   }
 }
+
+button[type=submit] {
+  font-weight: normal;
+  @include choose-item;
+  padding: 0;
+  height: 100%;
+  top: 0;
+  width: $button-width;
+  cursor:pointer;
+  > span:nth-of-type(1) {
+    @include blind;
+  }
+  &::after {
+    font-family: "FontAwesome";
+  }
+  border: {
+    width: $border-size;
+    style: solid;
+    color: $nearly-white;
+  }
+  &:hover, &:focus {
+    @include choose-hover;
+  }
+  &::-moz-focus-inner {
+    border: none;
+  }
+  &:active {
+    @include choose-active;
+  }
+  /**
+   * This is just for styling the last button,
+   * in case there are more than one buttons.
+   */
+  &:last-of-type {
+    // @include box-sizing-box();
+    border: {
+      right-width: $border-size;
+      right-style: solid;
+      top-right-radius: $standard-border-radius;
+      bottom-right-radius: $standard-border-radius;
+    }
+  }
+}
+
+button + button {
+  right: 0;
+}
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index a959a08..5d366db 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -11,7 +11,7 @@
   background-color: $light-green;
 //  @include light-noise;
   @include box-sizing-box();
-  padding: 8px;
+  padding: $base-padding;
   padding-bottom: 0;
   font-size: 10pt;
   color: $nearly-white;
@@ -85,6 +85,10 @@
       background-color: $dark-green;
       text-align: center;
       height: 100%;
+      z-index: 20;
+      > a:hover {
+	color: $nearly-white
+      }
     }
     color: $nearly-white;
     line-height: 2em;
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 4fee390..37d7d69 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -16,10 +16,7 @@
 }
 
 header input {
-  outline: none;
-  font-size: 11pt;
-  border: $border-size solid $nearly-white;
-  padding: 2px;
+  @include input-field;
 }
 
 #searchbar {
@@ -28,52 +25,10 @@
   padding-right: $right-padding;
   button[type=submit] {
     position: absolute;
-    font-weight: normal;
-    @include choose-item;
-    padding: 0;
-    height: 100%;
-    top: 0;
     right: $right-distance;
-    width: 30px;
-    cursor:pointer;
-    > span:nth-of-type(1) {
-      @include blind;
-    }
     &::after {
-      font-family: "FontAwesome";
       content: $fa-search;
     }
-    border: {
-      width: $border-size;
-      style: solid;
-      color: $nearly-white;
-    }
-    &:hover, &:focus {
-      @include choose-hover;
-    }
-    &::-moz-focus-inner {
-      border: none;
-    }
-    &:active {
-      @include choose-active;
-    }
-
-    /**
-     * This is just for styling the last button,
-     * in case there are more than one buttons.
-     */
-    &:last-of-type {
-      @include box-sizing-box();
-      border: {
-	right-width: $border-size;
-	right-style: solid;
-	top-right-radius: $standard-border-radius;
-	bottom-right-radius: $standard-border-radius;
-      }
-    }
-  }
-  button + button {
-    right: 0;
   }
 }
 
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index 18da240..d8a9272 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -5,9 +5,10 @@
  */
 
 // Global variables and mixins
-@import "fonts";         // Font families
-@import "base";          // Base styles
-@import "main/main";     // Main frame styles
-@import "header/header"; // Top frame styles
-@import "footer/footer"; // Bottom frame styles
-@import "media";         // Media queries
+@import "fonts";           // Font families
+@import "base";            // Base styles
+@import "main/main";       // Main frame styles
+@import "header/header";   // Top frame styles
+@import "footer/footer";   // Bottom frame styles
+@import "sidebar/sidebar"; // Left frame styles
+@import "media";           // Media queries
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 90c6660..570ed06 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -5,14 +5,12 @@
 @import "pagination"; // Pagination
 @import "query";      // View query
 @import "resultinfo"; // Information on results
-@import "sidebar";    // Navigation on the left side
 @import "tutorial";   // Embedded and non-embedded tutorial
 @import "koralquery"; // KoralQuery
 @import "tagger";     // Tagger
 @import "alertify";
 
 div.intro {
-  width: 70%;
   min-width: 600px;
 
   // Visited links
@@ -21,6 +19,9 @@
   }
 }
 
+aside.active + main div.intro {
+  margin-left: $logo-left-distance - $standard-margin + $base-padding;
+}
 
 main {
   margin: {
diff --git a/dev/scss/main/sidebar.scss b/dev/scss/sidebar/sidebar.scss
similarity index 85%
rename from dev/scss/main/sidebar.scss
rename to dev/scss/sidebar/sidebar.scss
index ce267fa..ddcf811 100644
--- a/dev/scss/main/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -2,9 +2,11 @@
 @import "../util";
 
 $border-size: 2px;
+$right-padding: 60px;
 
 aside {
   outline: none;
+  font-size: 10pt;
   display: block;
   background-color: $dark-green;
   position: fixed;
@@ -40,7 +42,7 @@
     padding: 6pt;
     border-top-right-radius: $standard-border-radius;
   }
-  h2 {
+  h2, legend {
     font: {
       size: 100%;
       weight: bold;
@@ -129,6 +131,31 @@
   nav > ul > li > a {
     font-weight: bold;
   }
+
+  fieldset {
+    position: relative;
+    border-width: 0;
+    input[type=text], input[type=password] {
+      @include input-field;
+      width: 100%;
+    }
+    > form > div {
+      position: relative;
+      width: 100%;
+      margin-top: 4px;
+      padding-right: $button-width
+    }
+
+    button {
+      position: absolute;
+      // height: 100%;
+      top: 0;
+      right: 0;
+      &::after {
+	content: $fa-login;
+      }
+    }
+  }
 }
 
 aside:focus {
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 20651cb..13799cd 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -89,6 +89,8 @@
 $choose-box-shadow: 2px 2px 2px  rgba(0,0,0,0.2);
 $standard-border-radius: 6px;
 $item-padding: 3pt 6pt;
+$button-width: 30px;
+$base-padding: 8px;
 
 $total-results: $light-green;
 
@@ -173,6 +175,14 @@
   transition: color 0.3s ease 0s;
 }
 
+@mixin input-field {
+  outline: none;
+  font-size: 11pt;
+  border: $border-size solid $nearly-white;
+  padding: 2px;
+  margin: 0;
+}
+
 /**
  * Mixing for basic text padding
  */