diff --git a/Gruntfile.js b/Gruntfile.js
index 7eb523f..6a06564 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -115,6 +115,7 @@
       css: {
 	      files: ['dev/scss/{util,base,fonts,kalamar,media}.scss',
 		            'dev/scss/footer/footer.scss',
+		            'dev/scss/sidebar/sidebar.scss',
 		            'dev/scss/header/{header,hint,menu,searchbar,vc,datepicker}.scss',
 		            'dev/scss/main/{alertify,koralquery,highlight,kwic,kwic-new,logos,tagger,' +
 		            'main,matchinfo,pagination,query,'+
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
  */
diff --git a/kalamar.dict b/kalamar.dict
index 53a4eb5..8f9443b 100644
--- a/kalamar.dict
+++ b/kalamar.dict
@@ -28,6 +28,8 @@
     go => 'Los!',
     in => 'in',
     by => 'von',
+    pwd => 'Passwort',
+    email => 'Email',
     with => 'mit',
     glimpse => {
       -short => 'Stichprobe',
@@ -67,6 +69,8 @@
     searchplaceholder => 'Find ...',
     in => 'in',
     by => 'by',
+    pwd => 'Password',
+    email => 'Email',
     with => 'with',
     pubOn => 'published on',
     matchCount => '<%= quant($found, "match", "matches") %>',
diff --git a/lib/Kalamar.pm b/lib/Kalamar.pm
index 4dfb35d..9623a81 100644
--- a/lib/Kalamar.pm
+++ b/lib/Kalamar.pm
@@ -128,6 +128,9 @@
   my $match  = $text->get('/:match_id');
   $match->to('search#match_info')->name('match');
 
+  $r->post('/login')->to('User#login');
+  $r->post('/logout')->to('User#logout');
+
   # Default user is called 'korap'
   # $r->route('/user/:user/:collection')
 };
diff --git a/lib/Kalamar/Controller/User.pm b/lib/Kalamar/Controller/User.pm
new file mode 100644
index 0000000..691d648
--- /dev/null
+++ b/lib/Kalamar/Controller/User.pm
@@ -0,0 +1,13 @@
+package Kalamar::Controller::User;
+use Mojo::Base 'Mojolicious::Controller';
+
+sub login {
+  my $c = shift;
+  $c->render(json => {
+    response => 'logged in'
+  });
+};
+
+sub logout {};
+
+1;
diff --git a/templates/de/intro.html.ep b/templates/de/intro.html.ep
index 088a108..f4134a0 100644
--- a/templates/de/intro.html.ep
+++ b/templates/de/intro.html.ep
@@ -1,4 +1,7 @@
 % layout 'main';
+
+% stash(sidebar_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>
 
@@ -10,8 +13,6 @@
 
 </div>
 
-<!-- form -->
-
 <div id="logos">
   <div>
     <a href="http://www.ids-mannheim.de/" class="logo"><p id="ids-logo"><span>Entwickelt am Institut für Deutsche Sprache (IDS)</span></p></a>
diff --git a/templates/intro.html.ep b/templates/intro.html.ep
index 937bde3..ba9da37 100644
--- a/templates/intro.html.ep
+++ b/templates/intro.html.ep
@@ -1,4 +1,8 @@
 % layout 'main';
+
+% stash(sidebar_active => 1);
+
+
 <div class="intro">
   <p><strong>KorAP</strong> is a new Corpus Analysis Platform, suited for large, multiple annotated corpora and complex search queries independent of particular research questions.</p>
   <p>This is the new frontend for KorAP, <strong>Kalamar</strong>, with currently no access to restricted corpora. For full access, please visit the <a href="http://korap.ids-mannheim.de/app">first frontend</a>. <noscript>Kalamar expects activated JavaScript for some features.</noscript></p>
diff --git a/templates/layouts/main.html.ep b/templates/layouts/main.html.ep
index 7f6f811..af8feb4 100644
--- a/templates/layouts/main.html.ep
+++ b/templates/layouts/main.html.ep
@@ -23,6 +23,21 @@
       %= include 'partial/header'
     % }
 
+% if (1) { # user not logged in
+% content_for 'sidebar', begin
+<fieldset>
+  <form>
+    <legend><span><%= loc 'login' %></span></legend>
+    <input type="text" name="handle_or_email" placeholder="<%= loc 'email' %>" />
+    <div>
+      <input type="password" name="pwd" placeholder="<%= loc 'pwd' %>" />
+      <button type="submit"><span><%= loc 'go' %></span></button>
+    </div>
+  </form>
+</fieldset>
+% end
+% }
+
     % my $aside = content_for('sidebar');
     <aside tabindex="0" class="<% unless (length($aside) > 0) { %>off<% } elsif (stash('sidebar_active')) { %>active<% } %>">
       <div>