diff --git a/index.html b/index.html
index 03cb9a0..0ed1843 100644
--- a/index.html
+++ b/index.html
@@ -27,25 +27,35 @@
 
 <body>
 
+  <a href="#space"
+    class="hidden"
+    title="Springe zum Inhalt">Springe zum Inhalt</a>
+
   <!-- head with banner and navigation ---------------------------------->
 
   <header>
     <div class="center-content max-width">
-      <div id="headline" class="flex-box-row">
-        <div>
-          <p>
+      <div id="headline" class="flex-box row">
+        <div id="header-left" class="flex-box row center">
+          <div id="status-icon" class="icon">
+            <img class="icon-img" src="./images/user-times.svg" />
+          </div>
+          <div id="banner-div" class="flex-box column">
             <a id="banner" href="#"
               role="banner"
-              title="Zum Seitenanfang">kraut.space</a></p>
+              title="Zum Seitenanfang"><h1>kraut.space</h1></a>
+          </div>
         </div>
-        <div class="flex-box-row">
+        <div id="header-right" class="flex-box row">
           <p>
             <a id="open-menu"
+              title="Menu öffnen"
               href="#menu">Menu</a>
           </p>
-          <nav id="menu" class="flex-box-column">
+          <nav id="menu" class="flex-box column">
             <p>
               <a id="close-menu"
+              title="Menu schliessen"
                 href="#open-menu">Close</a>
             </p>
             <ul role="menu">
@@ -93,10 +103,7 @@
   <!-- main area with content ------------------------------------------>
 
   <main role="main">
-
-
     <div class="wrapper center-content max-width">
-
       <div id="space" class="panel-wrapper content-overlay">
 
         <h2>Krautspace</h2>
@@ -136,7 +143,7 @@
           Matrix. Du kannst dort gern Kontakt zu uns aufnehmen.
           </p>
 
-          <div class="flex-box-column with-aside">
+          <div class="flex-box column with-aside">
             <div>
             <h3>Termine</h3>
             <ul>
@@ -271,7 +278,7 @@
           Das sind die Stra&szlig;enbahnen der Linie 16, sowie die Busse der
           Linie 5.
           </p>
-          <div id="map-box" class="flex-box-column with-aside">
+          <div id="map-box" class="flex-box column with-aside">
             <div id="map">
             <a class="extern"
               href="http://www.openstreetmap.org/node/1875593753">
@@ -300,14 +307,13 @@
           </div>
         </section>
       </div>  <!-- end class panel-wrapper content-overlay -->
-
   </main>
   <hr/>
 
   <!-- footer ---------------------------------------------------------->
 
   <footer>
-    <div id="footer" class="flex-box-row center-content max-width">
+    <div id="footer" class="flex-box row center-content max-width">
       <div class="sub-panel">
       <h4>Kontakt</h4>
       <ul>
@@ -348,11 +354,11 @@
 
   <!-- go-to-top ------------------------------------------------------->
 
-  <div id="go-to-top" class="max-width">
+  <div id="go-to-top" class="icon">
     <a href="#start-image-container"
       alt="Springe zum Seitenanfang"
       title="Springe zum Seitenanfang">
-      <img id="to-top"
+      <img class="icon-img"
         alt="Pfeil nach oben"
         src="./images/arrow-up.svg" />
     </a>
diff --git a/style.css b/style.css
index 5c54fb5..3967d8b 100644
--- a/style.css
+++ b/style.css
@@ -48,6 +48,11 @@ a:hover, a:focus {
   display: none;
 }
 
+h1 {
+  font-size: 130%;
+  padding-left: 1em;
+}
+
 .center-content {
   margin: 0 auto;
 }
@@ -56,18 +61,38 @@ a:hover, a:focus {
   max-width: 72em;
 }
 
-.flex-box-row {
+.flex-box {
   display: flex;
+  justify-content: space-between;
+}
+
+.row {
   flex-direction: row;
-  justify-content: space-between;
 }
 
-.flex-box-column {
-  display: flex;
+.column {
   flex-direction: column;
-  justify-content: space-between;
 }
 
+.center {
+  justify-content: center;
+  align-items: center;
+}
+
+.icon {
+  width: 2em;
+  height: 2em;
+  border-radius: 0.5em;
+  background-color: #ffffff;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
+  overflow: hidden;
+}
+
+.icon-img {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
 
 /*** head with navigation menu ***/
 
@@ -86,6 +111,15 @@ div#headline {
   padding: 0 1em 0 1em;
 }
 
+div#status-div {
+  width: 2em;
+}
+
+div#status-div:hover {
+  width: 10em;
+  z-index: 150;
+}
+
 a#banner:hover,
 a#banner:focus {
   text-decoration: none;
@@ -164,7 +198,7 @@ main {
 
 .content-overlay {
   position: relative;
-  top: -40px;
+  top: -50px;
 }
 
 .panel-wrapper {
@@ -231,12 +265,6 @@ div#go-to-top {
   position: fixed;
   right: 2%;
   bottom: 2%;
-  width: 2em;
-  height: 2em;
-  border-radius: 0.5em;
-  background-color: #ffffff;
-  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
-  overflow: hidden;
   z-index: 10;
 }
 
@@ -272,6 +300,10 @@ img#to-top {
     display: flex;
   }
 
+  nav#menu li {
+    border: none;
+  }
+
   div.with-aside {
     flex-direction: row;
     justify-content: space-around;
