diff --git a/AUTHORS b/AUTHORS
index 30d597ba2..4bad0b219 100644
--- a/AUTHORS
+++ b/AUTHORS
@@ -16,3 +16,4 @@ Authors of OpenSlides in chronological order of first contribution:
     Dominik Breu <dominikbreu@yahoo.de>
     André Böhlke <ab@bcoding.de>
     René von der Haar <rene.vonderhaar@medienweite.de> (Logo design)
+    Jörn Bensch <bensch@triagonale.de> (Template design)
diff --git a/bower.json b/bower.json
index 6684fe652..bc7667e17 100644
--- a/bower.json
+++ b/bower.json
@@ -20,7 +20,6 @@
     "angular-ui-switch": "~0.1.1",
     "angular-ui-tree": "~2.2.0",
     "angular-gettext": "~2.1.2",
-    "angular-xeditable": "~0.1.9",
     "angular-scroll-glue": "~2.0.6",
     "ngBootbox": "~0.1.2",
     "ng-dialog": "~0.5.6",
@@ -30,6 +29,8 @@
     "js-data-angular": "~3.1.0",
     "ng-file-upload": "~9.1.2",
     "ckeditor": "~4.5.4",
-    "angular-ckeditor": "~1.0.0"
+    "angular-ckeditor": "~1.0.0",
+    "roboto-condensed": "~0.3.0",
+    "opensans-webfont-for-bower": "a4b3b75afa"
   }
 }
diff --git a/openslides/agenda/static/js/agenda/site.js b/openslides/agenda/static/js/agenda/site.js
index 09f9f0a11..c09c64140 100644
--- a/openslides/agenda/static/js/agenda/site.js
+++ b/openslides/agenda/static/js/agenda/site.js
@@ -83,6 +83,7 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
             $scope.items = AgendaTree.getFlatTree(Agenda.getAll());
         });
         $scope.alert = {};
+        $scope.isFilter = true;
 
         // project related item (content object)
         $scope.project = function (item) {
diff --git a/openslides/agenda/static/templates/agenda/item-detail.html b/openslides/agenda/static/templates/agenda/item-detail.html
index 673abf51b..1c2d1b3ee 100644
--- a/openslides/agenda/static/templates/agenda/item-detail.html
+++ b/openslides/agenda/static/templates/agenda/item-detail.html
@@ -1,51 +1,53 @@
-<h1>{{ item.title }}</h1>
-
-<div id="submenu">
-  <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to agenda</translate>
-  </a>
-  <!-- project -->
-  <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
-      ng-class="{ 'btn-primary': item.isProjected() }"
-      ng-click="item.project()"
-      title="{{ 'Project item' | translate }}">
-    <i class="fa fa-video-camera"></i>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to agenda</translate>
+      </a>
+      <!-- TODO: project list
+           ng-class="{ 'btn-primary': item.isListOfSpeakersProjected() }"-->
+      <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
+          ng-click="projectListOfSpeakers()">
+        <i class="fa fa-video-camera"></i>
+        <translate>List of speakers</translate>
+      </a>
+      <!-- project -->
+      <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
+          ng-class="{ 'btn-primary': item.isProjected() }"
+          ng-click="item.project()"
+          title="{{ 'Project item' | translate }}">
+        <i class="fa fa-video-camera"></i>
+      </a>
+    </div>
+    <h1>{{ item.title }}</h1>
+    <h2><translate>List of speakers</translate></h2>
+  </div>
 </div>
 
-
-<h2>
-  <translate>List of speakers</translate>
-  <span os-perms="agenda.can_manage">
-    <button ng-if="item.speaker_list_closed" ng-click="closeList(false)"
-        class="btn btn-sm btn-danger" translate>
-      Closed
-    </button>
-    <button ng-if="!item.speaker_list_closed" ng-click="closeList(true)"
-        class="btn btn-sm btn-success" translate>
-      Opened
-    </button>
-  </span>
-  <!-- TODO: project list
-       ng-class="{ 'btn-primary': item.isListOfSpeakersProjected() }"-->
-  <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
-      ng-click="projectListOfSpeakers()">
-    <i class="fa fa-video-camera"></i>
-    <translate>List of speakers</translate>
-  </a>
-</h2>
+<div class="details">
+  <div class="pull-right">
+    <span os-perms="agenda.can_manage">
+      <button ng-if="item.speaker_list_closed" ng-click="closeList(false)"
+          class="btn btn-sm btn-default" translate>
+        <i class="fa fa-toggle-off"></i>
+        Close
+      </button>
+      <button ng-if="!item.speaker_list_closed" ng-click="closeList(true)"
+          class="btn btn-sm btn-default" translate>
+        <i class="fa fa-toggle-on"></i>
+        Open
+      </button>
+    </span>
+  </div>
 
 <!-- TODO:
    * show only 'add me' OR 'remove me' button
 -->
-  <button class="btn btn-default btn-xs" type="button"
-      data-toggle="collapse" data-target="#old_speakers"
-      aria-expanded="false" aria-controls="collapseExample">
+  <button class="btn btn-default btn-sm" ng-click="showOldSpeakers = !showOldSpeakers">
     Show all old speakers
   </button>
-
-  <div class="collapse" id="old_speakers">
+  <div uib-collapse="!showOldSpeakers">
   <h3 translate>Old speakers:</h3>
     <ol>
       <li ng-repeat="speaker in item.speakers | filter: {end_time: '!!'}">
@@ -116,3 +118,4 @@
         <translate>Stop current speaker</translate>
       </button>
   </div>
+</div>
diff --git a/openslides/agenda/static/templates/agenda/item-form.html b/openslides/agenda/static/templates/agenda/item-form.html
deleted file mode 100644
index c988ae79b..000000000
--- a/openslides/agenda/static/templates/agenda/item-form.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<h1 ng-if="item.id" translate>Edit agenda item</h1>
-<h1 ng-if="!item.id" translate>New agenda item</h1>
-
-<div id="submenu">
-  <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
-</div>
-
-<form name="agendaItemForm">
-  <div class="form-group">
-    <label for="inputNumber" translate>Number</label>
-    <input type="text" ng-model="item.item_number" class="form-control" name="inputNumber">
-  </div>
-  <div class="form-group">
-    <label for="inputTitle" translate>Title</label>
-    <input type="text" ng-model="item.title" class="form-control" name="inputTitle" required>
-  </div>
-  <div class="form-group">
-    <label for="textareaDesciption" translate>Text</label>
-    <textarea ng-model="item.text" class="form-control" name="textareaText" />
-  </div>
-  <div class="form-group">
-    <label for="textareaComment" translate>Comment</label>
-    <textarea ng-model="item.comment" class="form-control" name="textareaComment" />
-  </div>
-  <div class="form-group">
-    <label for="inputDuration" translate>Duration</label>
-    <input type="text" ng-model="item.duration" class="form-control" name="inputDuration">
-  </div>
-  <div class="form-group">
-    <label for="selectType" translate>Type</label>
-    <select ng-options="type.value as type.display_name for type in types"
-        ng-model="item.type" class="form-control" name="selectType">
-    </select>
-  </div>
-  <div class="form-group">
-    <label for="selectTags" translate>Tags</label>
-    <select multiple ng-options="tag.id as tag.name for tag in tags"
-        ng-model="item.tags_id" class="form-control" name="selectTags">
-    </select>
-  </div>
-
-  <button type="submit" ng-click="save(item)" class="btn btn-primary" translate>
-    Save
-  </button>
-  <button ui-sref="agenda.item.list" class="btn btn-default" translate>
-    Cancel
-  </button>
-</form>
diff --git a/openslides/agenda/static/templates/agenda/item-import.html b/openslides/agenda/static/templates/agenda/item-import.html
index d52033e35..a935e9036 100644
--- a/openslides/agenda/static/templates/agenda/item-import.html
+++ b/openslides/agenda/static/templates/agenda/item-import.html
@@ -1,13 +1,17 @@
- <h1 translate>Import agenda items</h1>
-
-<div id="submenu">
-  <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+    </div>
+    <h1 translate>Import agenda items</h1>
+  </div>
 </div>
 
-<h2 translate>Import by copy/paste</h2>
+<div class="details">
+<h3 translate>Import by copy/paste</h3>
 <p translate>Copy and paste your agenda item titles in this textbox.
 Keep each item in a single line.</p>
 
@@ -28,7 +32,7 @@ Keep each item in a single line.</p>
 
 <hr>
 
-<h2 translate>Import by CSV file</h2>
+<h3 translate>Import by CSV file</h3>
 <p translate>Select a CSV file to import agenda items!
 
 <p translate>Please note:</p>
@@ -86,3 +90,4 @@ Keep each item in a single line.</p>
       </button>
     </div>
 </div>
+</div>
diff --git a/openslides/agenda/static/templates/agenda/item-list.html b/openslides/agenda/static/templates/agenda/item-list.html
index 4889f377f..ed1ac1bc5 100644
--- a/openslides/agenda/static/templates/agenda/item-list.html
+++ b/openslides/agenda/static/templates/agenda/item-list.html
@@ -1,195 +1,210 @@
-<h1 translate>Agenda</h1>
-
-<div id="submenu">
-  <a ng-click="newDialog()" os-perms="agenda.can_manage" class="btn btn-primary btn-sm">
-    <i class="fa fa-plus fa-lg"></i>
-    <translate>New</translate>
-  </a>
-  <a ui-sref="agenda.item.sort" os-perms="agenda.can_manage" class="btn btn-default btn-sm">
-    <i class="fa fa-sitemap fa-lg"></i>
-    <translate>Sort agenda</translate>
-  </a>
-  <a ui-sref="agenda.item.import" os-perms="agenda.can_manage" class="btn btn-default btn-sm">
-    <i class="fa fa-download fa-lg"></i>
-    <translate>Import</translate>
-  </a>
-  <a ui-sref="core.tag.list" os-perms="core.can_manage_tags" class="btn btn-default btn-sm">
-    <i class="fa fa-tags fa-lg"></i>
-    <translate>Tags</translate>
-  </a>
-  <a ui-sref="agenda_pdf" target="_blank" class="btn btn-default btn-sm">
-    <i class="fa fa-file-pdf-o fa-lg"></i>
-    <translate>PDF</translate>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ng-click="newDialog()" os-perms="agenda.can_manage" class="btn btn-primary btn-sm">
+        <i class="fa fa-plus fa-lg"></i>
+        <translate>New</translate>
+      </a>
+      <a ui-sref="agenda.item.sort" os-perms="agenda.can_manage" class="btn btn-default btn-sm">
+        <i class="fa fa-sitemap fa-lg"></i>
+        <translate>Sort agenda</translate>
+      </a>
+      <a ui-sref="agenda.item.import" os-perms="agenda.can_manage" class="btn btn-default btn-sm">
+        <i class="fa fa-download fa-lg"></i>
+        <translate>Import</translate>
+      </a>
+      <a ui-sref="core.tag.list" os-perms="core.can_manage_tags" class="btn btn-default btn-sm">
+        <i class="fa fa-tags fa-lg"></i>
+        <translate>Tags</translate>
+      </a>
+      <a ui-sref="agenda_pdf" target="_blank" class="btn btn-default btn-sm">
+        <i class="fa fa-file-pdf-o fa-lg"></i>
+        <translate>PDF</translate>
+      </a>
+    </div>
+    <h1 translate>Agenda</h1>
+  </div>
 </div>
 
-
-<div class="row">
-  <div class="col-sm-8">
-    <form class="form-inline">
-      <!-- delete mode -->
-      <div os-perms-lite="agenda.can_manage" class="form-group">
-        <label for="deleteSwitcher" translate>Delete mode</label>
-        <switch id="deleteSwitcher" ng-model="isDeleteMode" ng-change="uncheckAll()"
-            on="{{'On'|translate}}" off="{{'Off'|translate}}"
-            class="green wide form-control">
-        </switch>
+<div class="details">
+  <div class="row">
+    <div class="col-sm-6">
+      <form class="form-inline">
+        <!-- delete mode -->
+        <button os-perms-lite="agenda.can_manage" class="btn btn-default"
+            ng-click="isDeleteMode = !isDeleteMode; uncheckAll()">
+          <i class="fa fa-check-square-o"></i>
+          <translate>Select</translate>...
+        </button>
+        <div class="form-group">
+          <!-- project agenda button -->
+          <a os-perms="core.can_manage_projector"
+              class="btn btn-default form-control"
+              title="'Project agenda'|translate"
+              ng-click="projectAgenda()"
+              ng-class="{ 'btn-primary': isAgendaProjected() }">
+            <i class="fa fa-video-camera"></i>
+            <translate>Agenda</translate>
+          </a>
+          <!-- auto numbering button -->
+          <a os-perms="core.can_manage_projector"
+              class="btn btn-default form-control"
+              ng-click="autoNumbering()">
+            <i class="fa fa-sort-numeric-asc"></i>
+            <translate>Auto numbering</translate>
+          </a>
+        </div>
+      </form>
+    </div>
+    <div class="col-sm-6">
+      <div class="form-inline text-right">
+        <div class="form-group">
+          <div class="input-group">
+            <div class="input-group-addon"><i class="fa fa-search"></i></div>
+            <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+               placeholder="{{ 'Search' | translate}}">
+          </div>
+        </div>
+        <button class="btn btn-default" ng-click="isFilter = !isFilter">
+          <i class="fa fa-filter"></i>
+          <translate>Filter</translate>...
+        </button>
       </div>
-      <div class="form-group">
-        <!-- project agenda button -->
-        <a ng-show="!isDeleteMode" os-perms="core.can_manage_projector"
-            class="btn btn-default btn-sm form-control"
-            ng-click="projectAgenda()"
-            ng-class="{ 'btn-primary': isAgendaProjected() }">
-          <i class="fa fa-video-camera"></i>
-          <translate>Project agenda</translate>
-        </a>
-        <!-- auto numbering button -->
-        <a ng-show="!isDeleteMode" os-perms="core.can_manage_projector"
-            class="btn btn-default btn-sm form-control"
-            ng-click="autoNumbering()">
-          <i class="fa fa-list-ol"></i>
-          <translate>Number agenda items</translate>
-        </a>
-        <!-- delete button -->
-        <a ng-show="isDeleteMode && (items|filter:{selected:true}).length > 0"
-            os-perms="agenda.can_manage" ng-click="delete()"
-            class="btn btn-primary btn-sm form-control">
-          <i class="fa fa-trash fa-lg"></i>
-          <translate>Delete selected items</translate>
-        </a>
-        <!-- hidden item filter -->
-        <label>
-          <input type="checkbox" ng-model="filter.noHiddenItems" ng-true-value="1" ng-false-value="">
-          <translate> Hide internal agenda items</translate>
-        </label>
-        <!-- closed filter -->
-        <label>
-          <input type="checkbox" ng-model="filter.noClosedItems" ng-true-value="false" ng-false-value="">
-          <translate> Hide closed items</translate>
-        </label>
-      </div>
-    </form>
-  </div>
-  <div class="col-sm-4">
-    <div class="input-group">
-      <div class="input-group-addon"><i class="fa fa-filter"></i></div>
-      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-         placeholder="{{ 'Filter' | translate}}">
     </div>
   </div>
-</div>
+  <div uib-collapse="isFilter" class="row">
+    <div class="col-sm-12 text-right">
+      <!-- hidden item filter -->
+      <input type="checkbox" ng-model="filter.noHiddenItems" ng-true-value="1" ng-false-value="">
+      <translate> Hide internal agenda items</translate>
+      <!-- closed filter -->
+      <input type="checkbox" ng-model="filter.noClosedItems" ng-true-value="false" ng-false-value="">
+      <translate> Hide closed items</translate>
+    </div>
+  </div>
+  <div uib-collapse="!isDeleteMode" class="row spacer">
+    <div class="col-sm-12 text-left">
+      <!-- delete button -->
+      <a ng-show="isDeleteMode"
+          os-perms="agenda.can_manage" ng-click="delete()"
+          class="btn btn-primary">
+        <i class="fa fa-trash fa-lg"></i>
+        <translate>Delete selected items</translate>
+      </a>
+    </div>
+  </div>
 
-<i>
-  {{ items.length }} {{ "items" | translate }}<span ng-if="(items|filter:{selected:true}).length > 0">,
-  {{(items|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
-</i>
-<table class="table table-striped table-bordered table-hover">
-  <thead>
-    <tr>
-      <!-- projector column -->
-      <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn"></th>
-      <!-- delete selection column -->
-      <th ng-show="isDeleteMode" os-perms-lite="agenda.can_manage" class="firstColumn deleteColumn"
-          ng-click="$event.stopPropagation();">
-        <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
-      <!-- agenda item column -->
-      <th>
-        <translate>Agenda item</translate>
-      <th os-perms="agenda.can_manage">
-        <translate>Duration</translate>
-      <th class="minimum">
-        <translate>Done</translate>
-  <tbody>
-    <tr ng-repeat="item in items | filter: filter.search |  filter: {type: filter.noHiddenItems}
-        |  filter: {closed: filter.noClosedItems}"
-        class="animate-item"
-        ng-class="{ 'activeline': item.isProjected(), 'selected': item.selected, 'hiddenrow': item.type == 2}">
-      <!-- projector column -->
-      <td ng-show="!isDeleteMode" os-perms="core.can_manage_projector">
-        <a class="btn btn-default btn-sm"
-            ng-class="{ 'btn-primary': item.isProjected() }"
-            ng-click="project(item)"
-            title="{{ 'Project item' | translate }}">
-          <i class="fa fa-video-camera"></i>
-        </a>
-      <!-- delete selection column -->
-      <td ng-show="isDeleteMode" os-perms="agenda.can_manage" class="deleteColumn">
-        <input type="checkbox" ng-model="item.selected">
-      <!-- agenda data columns -->
-      <td ng-if="!item.quickEdit" ng-mouseover="item.hover=true" ng-mouseleave="item.hover=false">
-        <span ng-if="item.type == 2" title="'Hidden agenda item'|translate"><i class="fa fa-ban"></i></span>
-        <strong>
-          <a href="" ng-click="open(item)">
-            <span ng-repeat="n in [].constructor(item.parentCount) track by $index">&ndash;</span>
-            {{ item.getTitle() }}
+  <i class="spacer">
+    {{ items.length }} {{ "items" | translate }}<span ng-if="(items|filter:{selected:true}).length > 0">,
+    {{(items|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
+  </i>
+  <table class="table table-striped table-bordered table-hover">
+    <thead>
+      <tr>
+        <!-- projector column -->
+        <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="minimum"></th>
+        <!-- delete selection column -->
+        <th ng-show="isDeleteMode" os-perms-lite="agenda.can_manage" class="minimum deleteColumn"
+            ng-click="$event.stopPropagation();">
+          <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
+        <!-- agenda item column -->
+        <th>
+          <translate>Agenda item</translate>
+        <th os-perms="agenda.can_manage">
+          <translate>Duration</translate>
+        <th class="minimum">
+          <translate>Done</translate>
+    <tbody>
+      <tr ng-repeat="item in items | filter: filter.search |  filter: {type: filter.noHiddenItems}
+          |  filter: {closed: filter.noClosedItems}"
+          class="animate-item"
+          ng-class="{ 'activeline': item.isProjected(), 'selected': item.selected, 'hiddenrow': item.type == 2}">
+        <!-- projector column -->
+        <td ng-show="!isDeleteMode" os-perms="core.can_manage_projector">
+          <a class="btn btn-default btn-sm"
+              ng-class="{ 'btn-primary': item.isProjected() }"
+              ng-click="project(item)"
+              title="{{ 'Project item' | translate }}">
+            <i class="fa fa-video-camera"></i>
           </a>
-        </strong>
-        <div ng-if="item.comment">
-          <small><i class="fa fa-info-circle"></i> {{ item.comment }}</small>
-        </div>
-        <div os-perms="agenda.can_manage" class="hoverActions" ng-class="{'hiddenDiv': !item.hover}">
-          <a ui-sref="agenda.item.detail({id: item.id})" translate>List of speakers</a> |
-          <a href="" ng-click="item.quickEdit=true" translate>QuickEdit</a> |
-          <a href="" ng-click="editDialog(item)" translate>Edit</a>
-          <!-- TODO: translate confirm message -->
-          <span ng-if="item.content_object.collection == 'core/customslide'"> |
-            <a href="" class="text-danger"
-              ng-bootbox-confirm="Are you sure you want to delete <b>{{ item.getTitle() }}</b>?"
-              ng-bootbox-confirm-action="deleteRelatedItem(item)" translate>Delete</a>
-          </span>
-        </div>
-      <td ng-if="!item.quickEdit" class="optional">
-        {{ item.duration }}
-        <span ng-if="item.duration" translate>h</span>
-      <td ng-if="!item.quickEdit">
-        <input type="checkbox" ng-model="item.closed" ng-change="save(item.id);">
-      <!-- quickEdit columns -->
-      <td ng-if="item.quickEdit" os-perms-lite="agenda.can_manage" colspan="3">
-        <form ng-submit="save(item)">
-        <h4>{{ item.getTitle() }} <span class="text-muted">&ndash; QuickEdit</span></h4>
-          <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
-            {{alert.msg}}
-          </alert>
-          <div class="row">
-            <div class="col-xs-6">
-              <label for="inputTitle" translate>Title</label>
-              <input type="text" ng-model="item.title" class="form-control input-sm" id="inputTitle">
-            </div>
-            <div class="col-xs-6">
-              <label for="inputComment" translate>Comment</label>
-              <input type="text" ng-model="item.comment" class="form-control input-sm" id="inputComment">
-            </div>
+        <!-- delete selection column -->
+        <td ng-show="isDeleteMode" os-perms="agenda.can_manage" class="deleteColumn">
+          <input type="checkbox" ng-model="item.selected">
+        <!-- agenda data columns -->
+        <td ng-if="!item.quickEdit" ng-mouseover="item.hover=true" ng-mouseleave="item.hover=false">
+          <span ng-if="item.type == 2" title="'Hidden agenda item'|translate"><i class="fa fa-ban"></i></span>
+          <strong>
+            <a href="" ng-click="open(item)">
+              <span ng-repeat="n in [].constructor(item.parentCount) track by $index">&ndash;</span>
+              {{ item.getTitle() }}
+            </a>
+          </strong>
+          <div ng-if="item.comment">
+            <small><i class="fa fa-info-circle"></i> {{ item.comment }}</small>
           </div>
-          <div class="row">
-            <div class="col-xs-6">
-              <label for="inputItemNumber" translate>Item number</label>
-              <input type="text" ng-model="item.item_number" class="form-control input-sm" id="inputItemNumber">
-            </div>
-            <div class="col-xs-6">
-              <label for="inputDuration" translate>Duration</label>
-              <input type="text" ng-model="item.duration" class="form-control input-sm" id="inputDuration">
-            </div>
+          <div os-perms="agenda.can_manage" class="hoverActions" ng-class="{'hiddenDiv': !item.hover}">
+            <a ui-sref="agenda.item.detail({id: item.id})" translate>List of speakers</a> |
+            <a href="" ng-click="item.quickEdit=true" translate>QuickEdit</a> |
+            <a href="" ng-click="editDialog(item)" translate>Edit</a>
+            <!-- TODO: translate confirm message -->
+            <span ng-if="item.content_object.collection == 'core/customslide'"> |
+              <a href="" class="text-danger"
+                ng-bootbox-confirm="Are you sure you want to delete <b>{{ item.getTitle() }}</b>?"
+                ng-bootbox-confirm-action="deleteRelatedItem(item)" translate>Delete</a>
+            </span>
           </div>
-          <div class="row">
-            <div class="col-xs-6">
-              <label>
-                <!-- item type: AGENDA_ITEM = 1, HIDDEN_ITEM = 2 -->
-                <input type="checkbox" ng-model="item.type" ng-true-value="2" ng-false-value="1">
-                <translate> Hidden agenda item</translate>
-              </label>
+        <td ng-if="!item.quickEdit" class="optional">
+          {{ item.duration }}
+          <span ng-if="item.duration" translate>h</span>
+        <td ng-if="!item.quickEdit">
+          <input type="checkbox" ng-model="item.closed" ng-change="save(item.id);">
+        <!-- quickEdit columns -->
+        <td ng-if="item.quickEdit" os-perms-lite="agenda.can_manage" colspan="3">
+          <form ng-submit="save(item)">
+          <h4>{{ item.getTitle() }} <span class="text-muted">&ndash; QuickEdit</span></h4>
+            <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
+              {{alert.msg}}
+            </alert>
+            <div class="row">
+              <div class="col-xs-6">
+                <label for="inputTitle" translate>Title</label>
+                <input type="text" ng-model="item.title" class="form-control input-sm" id="inputTitle">
+              </div>
+              <div class="col-xs-6">
+                <label for="inputComment" translate>Comment</label>
+                <input type="text" ng-model="item.comment" class="form-control input-sm" id="inputComment">
+              </div>
             </div>
-            <div class="col-xs-6">
+            <div class="row">
+              <div class="col-xs-6">
+                <label for="inputItemNumber" translate>Item number</label>
+                <input type="text" ng-model="item.item_number" class="form-control input-sm" id="inputItemNumber">
+              </div>
+              <div class="col-xs-6">
+                <label for="inputDuration" translate>Duration</label>
+                <input type="text" ng-model="item.duration" class="form-control input-sm" id="inputDuration">
+              </div>
             </div>
-          </div>
-          <div class="spacer">
-            <button ng-click="item.quickEdit=false" class="btn btn-default pull-left" translate>
-              Cancel
-            </button> &nbsp;
-            <button type="submit" class="btn btn-primary" translate>
-              Update
-            </button>
-            <a href="" ng-click="edit(item)" class="pull-right"><translate>Edit</translate>...</a>
-          </div>
-        </form>
-</table>
+            <div class="row">
+              <div class="col-xs-6">
+                <label>
+                  <!-- item type: AGENDA_ITEM = 1, HIDDEN_ITEM = 2 -->
+                  <input type="checkbox" ng-model="item.type" ng-true-value="2" ng-false-value="1">
+                  <translate> Hidden agenda item</translate>
+                </label>
+              </div>
+              <div class="col-xs-6">
+              </div>
+            </div>
+            <div class="spacer">
+              <button ng-click="item.quickEdit=false" class="btn btn-default pull-left" translate>
+                Cancel
+              </button> &nbsp;
+              <button type="submit" class="btn btn-primary" translate>
+                Update
+              </button>
+              <a href="" ng-click="edit(item)" class="pull-right"><translate>Edit</translate>...</a>
+            </div>
+          </form>
+  </table>
+</div>
diff --git a/openslides/agenda/static/templates/agenda/item-sort.html b/openslides/agenda/static/templates/agenda/item-sort.html
index aec04f62d..56bf4ac57 100644
--- a/openslides/agenda/static/templates/agenda/item-sort.html
+++ b/openslides/agenda/static/templates/agenda/item-sort.html
@@ -1,18 +1,23 @@
-<h1 translate>Sort agenda</h1>
-
-<div id="submenu">
-  <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+    </div>
+    <h1 translate>Sort agenda</h1>
+  </div>
 </div>
 
-<p translate>Drag and drop items to change the order of the agenda. Your modification will be saved directly.</p>
+<div class="details">
+  <p class="lead" translate>Drag and drop items to change the order of the agenda. Your modification will be saved directly.</p>
 
-<div ui-tree callbacks="treeOptions">
-  <ol ui-tree-nodes="" ng-model="items" id="tree-root">
-    <li ng-repeat="item in items" ui-tree-node ng-include="'nodes_renderer.html'">
-  </ol>
+  <div ui-tree callbacks="treeOptions">
+    <ol ui-tree-nodes="" ng-model="items" id="tree-root">
+      <li ng-repeat="item in items" ui-tree-node ng-include="'nodes_renderer.html'">
+    </ol>
+  </div>
 </div>
 
 
diff --git a/openslides/assignments/static/js/assignments/site.js b/openslides/assignments/static/js/assignments/site.js
index 2a942f190..dace872e5 100644
--- a/openslides/assignments/static/js/assignments/site.js
+++ b/openslides/assignments/static/js/assignments/site.js
@@ -319,14 +319,17 @@ angular.module('OpenSlidesApp.assignments.site', ['OpenSlidesApp.assignments'])
             poll.DSDestroy();
         }
         // edit poll dialog
-        $scope.editPollDialog = function (poll) {
+        $scope.editPollDialog = function (poll, ballot) {
             ngDialog.open({
                 template: 'static/templates/assignments/assignmentpoll-form.html',
                 controller: 'AssignmentPollUpdateCtrl',
                 className: 'ngdialog-theme-default',
                 resolve: {
-                    assignmentpoll: function(AssignmentPoll) {
+                    assignmentpoll: function (AssignmentPoll) {
                         return AssignmentPoll.find(poll.id);
+                    },
+                    ballot: function () {
+                        return ballot;
                     }
                 }
             });
@@ -394,9 +397,11 @@ angular.module('OpenSlidesApp.assignments.site', ['OpenSlidesApp.assignments'])
     'gettext',
     'AssignmentPoll',
     'assignmentpoll',
-    function($scope, $state, gettext, AssignmentPoll, assignmentpoll) {
+    'ballot',
+    function($scope, $state, gettext, AssignmentPoll, assignmentpoll, ballot) {
         // set initial values for form model
         $scope.model = assignmentpoll;
+        $scope.ballot = ballot;
         $scope.formFields = [];
         // add dynamic form fields
         assignmentpoll.options.forEach(function(option) {
diff --git a/openslides/assignments/static/templates/assignments/assignment-detail.html b/openslides/assignments/static/templates/assignments/assignment-detail.html
index 34af5bcc0..7d54c8bfd 100644
--- a/openslides/assignments/static/templates/assignments/assignment-detail.html
+++ b/openslides/assignments/static/templates/assignments/assignment-detail.html
@@ -1,126 +1,131 @@
-<h1>{{ assignment.title }}</h1>
-
-<div id="submenu">
-  <a ui-sref="assignments.assignment.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
-  <a ui-sref="assignments_single_pdf({pk: assignment.id})" target="_blank" class="btn btn-default btn-sm">
-    <i class="fa fa-file-pdf-o fa-lg"></i>
-    <translate>PDF</translate>
-  </a>
-  <!-- List of speakers -->
-  <a ui-sref="agenda.item.detail({id: assignment.agenda_item_id})" class="btn btn-sm btn-default">
-    <i class="fa fa-microphone fa-lg"></i>
-    <translate>List of speakers</translate>
-  </a>
-  <!-- project -->
-  <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
-      ng-class="{ 'btn-primary': assignment.isProjected() }"
-      ng-click="assignment.project()"
-      title="{{ 'Project election' | translate }}">
-    <i class="fa fa-video-camera"></i>
-  </a>
-  <!-- edit -->
-  <a ui-sref="assignments.assignment.detail.update({id: assignment.id })" os-perms="assignments.can_manage"
-      class="btn btn-default btn-sm"
-      title="{{ 'Edit' | translate}}">
-    <i class="fa fa-pencil"></i>
-  </a>
-</div>
-
-
-<h3 translate>Description</h3>
-<div class="white-space-pre-line">{{ assignment.description }}</div>
-
-<h3 translate>Candidates</h3>
-<ol>
-  <li ng-repeat="related_user in assignment.assignment_related_users" ng-if="related_user.status == 1">
-    <a ui-sref="users.user.detail({id: related_user.user_id})">{{ related_user.user.get_full_name() }}</a>
-    <button os-perms="assignments.can_manage" ng-click="removeCandidate(related_user.user_id)"
-        class="btn btn-default btn-xs">
-      <i class="fa fa-times"></i>
-    </button>
-</ol>
-
-<div class="form-group">
-  <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
-    {{alert.msg}}
-  </alert>
-  <div os-perms="assignments.can_nominate_other" class="input-group">
-    <ui-select ng-model="candidate.selected" ng-change="addCandidate(candidate.selected.id)">
-      <ui-select-match placeholder="{{ 'Select or search a participant...' | translate }}">
-        {{ $select.selected.get_full_name() }}
-      </ui-select-match>
-      <ui-select-choices repeat="user in users | filter: $select.search">
-        <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
-      </ui-select-choices>
-    </ui-select>
-    <span class="input-group-btn">
-      <a ng-click="candidate={}" class="btn btn-default">
-        <i class="fa fa-times-circle"></i>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="assignments.assignment.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
       </a>
-    </span>
-  </div>
-  <p os-perm="assignments.can_nominate_self">
-    <button ng-if="!isCandidate()" ng-click="addMe()" class="btn btn-default">
-      <i class="fa fa-plus"></i>
-      <translate>Add me</translate>
-    </button>
-    <button ng-if="isCandidate()" ng-click="removeMe()" class="btn btn-default">
-      <i class="fa fa-minus"></i>
-      <translate>Remove me</translate>
-    </button>
-</div>
-
-<h3 translate>Election result</h3>
-<button os-perms="assignments.can_manage" ng-click="createBallot()" class="btn btn-default btn-sm">
-  <i class="fa fa-bar-chart fa-lg"></i>
-  <translate>New ballot</translate>
-</button>
-
-<uib-tabset class="spacer">
-  <uib-tab ng-repeat="poll in assignment.polls" heading="Ballot {{$index+1}}">
-    <div os-perms="assignments.can_manage" class="spacer">
-      <button ng-click="editPollDialog(poll)"
-          class="btn btn-default btn-sm">
+      <a ui-sref="assignments_single_pdf({pk: assignment.id})" target="_blank" class="btn btn-default btn-sm">
+        <i class="fa fa-file-pdf-o fa-lg"></i>
+        <translate>PDF</translate>
+      </a>
+      <!-- List of speakers -->
+      <a ui-sref="agenda.item.detail({id: assignment.agenda_item_id})" class="btn btn-sm btn-default">
+        <i class="fa fa-microphone fa-lg"></i>
+        <translate>List of speakers</translate>
+      </a>
+      <!-- project -->
+      <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
+          ng-class="{ 'btn-primary': assignment.isProjected() }"
+          ng-click="assignment.project()"
+          title="{{ 'Project election' | translate }}">
+        <i class="fa fa-video-camera"></i>
+      </a>
+      <!-- edit -->
+      <a ui-sref="assignments.assignment.detail.update({id: assignment.id })" os-perms="assignments.can_manage"
+          class="btn btn-default btn-sm"
+          title="{{ 'Edit' | translate}}">
         <i class="fa fa-pencil"></i>
-        <translate>Edit</translate>
-      </button>
-      <!-- angular requires to open the link in new tab with "target='_blank'".
-      Otherwise the pdf url can't be open in same window; angular redirects to "/". -->
-      <a ui-sref="assignmentpoll_pdf({poll_pk: poll.id})" target="_blank"
-          class="btn btn-default btn-sm">
-        <i class="fa fa-file-pdf-o"></i> Ballot paper
-      </a>
-      <button os-perms-lite="assignments.can_manage" ng-if="!poll.published" ng-click="publishBallot(poll)"
-          class="btn btn-primary btn-sm">
-        <i class="fa fa-globe"></i>
-        <translate>Publish result</translate>
-      </button>
-      <button os-perms-lite="assignments.can_manage" ng-if="poll.published" ng-click="unpublishBallot(poll)"
-          class="btn btn-default btn-sm">
-        <i class="fa fa-globe"></i>
-        <translate>Unpublish result</translate>
-      </button>
-      <a ng-click="deleteBallot(poll)" class="btn btn-default btn-sm">
-        <i class="fa fa-times"></i>
-        <translate>Delete</translate>
       </a>
     </div>
-    <div class="results">
-      <div ng-repeat="option in poll.options">
-        <strong>{{ option.candidate.get_full_name() }}</strong>
-        <div ng-if="option.votes.length > 0">
-          <div ng-repeat="vote in option.votes">
-            {{ vote.value}}: {{ vote.weight}}
+    <h1>{{ assignment.title }}</h1>
+    <h2 translate>Election</h2>
+  </div>
+</div>
+
+<div class="details">
+  <h3 translate>Description</h3>
+  <div class="white-space-pre-line">{{ assignment.description }}</div>
+
+  <h3 translate>Candidates</h3>
+  <ol>
+    <li ng-repeat="related_user in assignment.assignment_related_users" ng-if="related_user.status == 1">
+      <a ui-sref="users.user.detail({id: related_user.user_id})">{{ related_user.user.get_full_name() }}</a>
+      <button os-perms="assignments.can_manage" ng-click="removeCandidate(related_user.user_id)"
+          class="btn btn-default btn-xs">
+        <i class="fa fa-times"></i>
+      </button>
+  </ol>
+
+  <div class="form-group">
+    <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
+      {{alert.msg}}
+    </alert>
+    <div os-perms="assignments.can_nominate_other" class="input-group">
+      <ui-select ng-model="candidate.selected" ng-change="addCandidate(candidate.selected.id)">
+        <ui-select-match placeholder="{{ 'Select or search a participant...' | translate }}">
+          {{ $select.selected.get_full_name() }}
+        </ui-select-match>
+        <ui-select-choices repeat="user in users | filter: $select.search">
+          <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
+        </ui-select-choices>
+      </ui-select>
+      <span class="input-group-btn">
+        <a ng-click="candidate={}" class="btn btn-default">
+          <i class="fa fa-times-circle"></i>
+        </a>
+      </span>
+    </div>
+    <p os-perm="assignments.can_nominate_self">
+      <button ng-if="!isCandidate()" ng-click="addMe()" class="btn btn-default">
+        <i class="fa fa-plus"></i>
+        <translate>Add me</translate>
+      </button>
+      <button ng-if="isCandidate()" ng-click="removeMe()" class="btn btn-default">
+        <i class="fa fa-minus"></i>
+        <translate>Remove me</translate>
+      </button>
+  </div>
+
+  <h3 translate>Election result</h3>
+  <button os-perms="assignments.can_manage" ng-click="createBallot()" class="btn btn-default btn-sm">
+    <i class="fa fa-bar-chart fa-lg"></i>
+    <translate>New ballot</translate>
+  </button>
+
+  <uib-tabset class="spacer">
+    <uib-tab ng-repeat="poll in assignment.polls" heading="Ballot {{$index+1}}">
+      <div os-perms="assignments.can_manage" class="spacer">
+        <button ng-click="editPollDialog(poll, $index+1)"
+            class="btn btn-default btn-sm">
+          <i class="fa fa-pencil"></i>
+          <translate>Edit</translate>
+        </button>
+        <!-- angular requires to open the link in new tab with "target='_blank'".
+        Otherwise the pdf url can't be open in same window; angular redirects to "/". -->
+        <a ui-sref="assignmentpoll_pdf({poll_pk: poll.id})" target="_blank"
+            class="btn btn-default btn-sm">
+          <i class="fa fa-file-pdf-o"></i> Ballot paper
+        </a>
+        <button os-perms-lite="assignments.can_manage" ng-if="!poll.published" ng-click="publishBallot(poll)"
+            class="btn btn-primary btn-sm">
+          <i class="fa fa-globe"></i>
+          <translate>Publish result</translate>
+        </button>
+        <button os-perms-lite="assignments.can_manage" ng-if="poll.published" ng-click="unpublishBallot(poll)"
+            class="btn btn-default btn-sm">
+          <i class="fa fa-globe"></i>
+          <translate>Unpublish result</translate>
+        </button>
+        <a ng-click="deleteBallot(poll)" class="btn btn-default btn-sm">
+          <i class="fa fa-times"></i>
+          <translate>Delete</translate>
+        </a>
+      </div>
+      <div class="results">
+        <div ng-repeat="option in poll.options">
+          <strong>{{ option.candidate.get_full_name() }}</strong>
+          <div ng-if="option.votes.length > 0">
+            <div ng-repeat="vote in option.votes">
+              {{ vote.value}}: {{ vote.weight}}
+            </div>
           </div>
         </div>
+        <hr>
+        Valid votes: {{ poll.votesvalid }}<br>
+        Invalid votes: {{ poll.votesinvalid }}<br>
+        Votes cast:  {{ poll.votescast }}
       </div>
-      <hr>
-      Valid votes: {{ poll.votesvalid }}<br>
-      Invalid votes: {{ poll.votesinvalid }}<br>
-      Votes cast:  {{ poll.votescast }}
-    </div>
-  </uib-tab>
-</uib-tabset>
+    </uib-tab>
+  </uib-tabset>
+</div>
diff --git a/openslides/assignments/static/templates/assignments/assignment-list.html b/openslides/assignments/static/templates/assignments/assignment-list.html
index eda10d8fe..b39390d97 100644
--- a/openslides/assignments/static/templates/assignments/assignment-list.html
+++ b/openslides/assignments/static/templates/assignments/assignment-list.html
@@ -1,145 +1,168 @@
-<h1 translate>Elections</h1>
-
-<div id="submenu">
-  <a ng-click="newDialog()" os-perms="assignments.can_manage" class="btn btn-primary btn-sm">
-    <i class="fa fa-plus fa-lg"></i>
-    <translate>New</translate>
-  </a>
-  <a ui-sref="core.tag.list" os-perms="core.can_manage_tags" class="btn btn-default btn-sm">
-    <i class="fa fa-tags fa-lg"></i>
-    <translate>Tags</translate>
-  </a>
-  <a ui-sref="assignments_pdf" target="_blank" class="btn btn-default btn-sm">
-    <i class="fa fa-file-pdf-o fa-lg"></i>
-    <translate>PDF</translate>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ng-click="newDialog()" os-perms="assignments.can_manage" class="btn btn-primary btn-sm">
+        <i class="fa fa-plus fa-lg"></i>
+        <translate>New</translate>
+      </a>
+      <a ui-sref="core.tag.list" os-perms="core.can_manage_tags" class="btn btn-default btn-sm">
+        <i class="fa fa-tags fa-lg"></i>
+        <translate>Tags</translate>
+      </a>
+      <a ui-sref="assignments_pdf" target="_blank" class="btn btn-default btn-sm">
+        <i class="fa fa-file-pdf-o fa-lg"></i>
+        <translate>PDF</translate>
+      </a>
+    </div>
+    <h1 translate>Elections</h1>
+  </div>
 </div>
 
-<div class="row form-group">
-  <div class="col-sm-8">
-    <form class="form-inline">
-      <!-- delete mode -->
-      <div os-perms-lite="assignments.can_manage" class="form-group">
-        <label for="deleteSwitcher" translate>Delete mode</label>
-        <switch id="deleteSwitcher" ng-model="isDeleteMode" ng-change="uncheckAll()"
-            on="{{'On'|translate}}" off="{{'Off'|translate}}"
-            class="green wide form-control">
-        </switch>
+<div class="details">
+  <div class="row form-group">
+    <div class="col-sm-6">
+      <form class="form-inline">
+        <!-- delete mode -->
+        <button os-perms-lite="assignments.can_manage" class="btn btn-default"
+            ng-click="isDeleteMode = !isDeleteMode; uncheckAll()">
+          <i class="fa fa-check-square-o"></i>
+          <translate>Select</translate>...
+        </button>
+      </form>
+    </div>
+    <div class="col-sm-6">
+      <div class="form-inline text-right">
+        <div class="form-group">
+          <div class="input-group">
+            <div class="input-group-addon"><i class="fa fa-search"></i></div>
+            <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+               placeholder="{{ 'Search' | translate}}">
+          </div>
+        </div>
+        <button class="btn btn-default" ng-click="isFilter = !isFilter">
+          <i class="fa fa-filter"></i>
+          <translate>Filter</translate>...
+        </button>
       </div>
-      <!-- delete button -->
-      <a ng-show="isDeleteMode && (assignments|filter:{selected:true}).length > 0"
-          os-perms="assignments.can_manage" ng-click="deleteMultiple()"
-          class="btn btn-primary btn-sm form-control">
-        <i class="fa fa-trash fa-lg"></i>
-        <translate>Delete selected elections</translate>
-      </a>
+    </div>
+  </div>
+  <div uib-collapse="!isFilter" class="row">
+    <div class="col-sm-6 text-right"></div>
+    <div class="col-sm-6 text-right">
       <!-- phase filter -->
-      &nbsp;
       <select ng-model="phaseFilter" class="form-control" id="phaseFilter">
         <option value="" translate>--- Select phase ---</option>
         <option ng-repeat="phase in phases" value="{{ phase.value }}">{{ phase.display_name }}</option>
       </select>
-    </form>
-  </div>
-  <div class="col-sm-4">
-    <div class="input-group">
-      <div class="input-group-addon"><i class="fa fa-filter"></i></div>
-      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-         placeholder="{{ 'Filter' | translate}}">
     </div>
   </div>
-</div>
+  <div uib-collapse="!isDeleteMode" class="row spacer">
+    <div class="col-sm-12 text-left">
+      <!-- delete button -->
+      <a ng-show="isDeleteMode"
+          os-perms="assignments.can_manage" ng-click="deleteMultiple()"
+          class="btn btn-primary">
+        <i class="fa fa-trash fa-lg"></i>
+        <translate>Delete selected elections</translate>
+      </a>
+    </div>
+  </div>
 
-<table class="table table-striped table-bordered table-hover">
-  <thead>
-    <tr>
-      <!-- projector column -->
-      <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn">
-      <!-- delete selection column -->
-      <th ng-show="isDeleteMode" os-perms-lite="assignments.can_manage" class="firstColumn deleteColumn">
-        <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
-      <th ng-click="toggleSort('title')" class="sortable">
-        <translate>Title</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'title' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('open_posts')" class="sortable optional">
-        <translate>Candidates</translate> / <translate>Posts</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'open_posts' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('phase')" class="sortable optional">
-        <translate>Phase</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'phase' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-  <tbody>
-    <tr ng-repeat="assignment in assignments | filter: filter.search | filter: {phase: phaseFilter} |
-        orderBy: sortColumn:reverse"
-        class="animate-item"
-        ng-class="{ 'activeline': assignment.isProjected(), 'selected': assignment.selected }">
-      <!-- projector column -->
-      <td ng-show="!isDeleteMode" os-perms-lite="core.can_manage_projector">
-        <a class="btn btn-default btn-sm"
-            ng-class="{ 'btn-primary': assignment.isProjected() }"
-            ng-click="assignment.project()"
-            title="{{ 'Project assignment' | translate }}">
-          <i class="fa fa-video-camera"></i>
-        </a>
-      <!-- delete selection column -->
-      <td ng-show="isDeleteMode" os-perms="assignments.can_manage" class="deleteColumn">
-        <input type="checkbox" ng-model="assignment.selected">
-      <!-- assignment data colums -->
-      <td ng-if="!assignment.quickEdit" ng-mouseover="assignment.hover=true" ng-mouseleave="assignment.hover=false">
-        <strong><a ui-sref="assignments.assignment.detail({id: assignment.id})">{{ assignment.title }}</a></strong>
-        <div os-perms="assignments.can_manage" class="hoverActions" ng-class="{'hiddenDiv': !assignment.hover}">
-          <a href="" ng-click="editDialog(assignment)" translate>Edit</a> |
-          <a href="" ng-click="assignment.quickEdit=true" translate>QuickEdit</a> |
-          <!-- TODO: translate confirm message -->
-          <a href="" class="text-danger"
-              ng-bootbox-confirm="Are you sure you want to delete <b>{{ assignment.title }}</b>?"
-              ng-bootbox-confirm-action="delete(assignment)" translate>Delete</a>
-        </div>
-      <td ng-if="!assignment.quickEdit" class="optional"><span class="badge">{{ assignment.open_posts }}</span>
-      <td ng-if="!assignment.quickEdit" class="optional">
-        <span class="label" ng-class="{'label-primary': assignment.phase == 0,
-                                       'label-warning': assignment.phase == 1,
-                                       'label-success': assignment.phase == 2 }">
-          {{ phases[assignment.phase].display_name }}
-        </span>
-      <!-- quickEdit columns -->
-      <td ng-if="assignment.quickEdit" colspan="3">
-        <h4>{{ assignment.title }} <span class="text-muted">&ndash; Quick Edit</span></h4>
-          <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
-            {{alert.msg}}
-          </alert>
-          <div class="row">
-            <div class="col-xs-6">
-              <label for="inputTitle" translate>Title</label>
-              <input type="text" ng-model="assignment.title" class="form-control input-sm" id="inputTitle">
-            </div>
-            <div class="col-xs-6">
-              <label for="inputPosts" translate>Number of members to be elected</label>
-              <input type="number" ng-model="assignment.open_posts" class="form-control input-sm" id="inputPosts">
-            </div>
+  <i class="spacer">
+    {{ assignments.length }} {{ "elections" | translate }}<span ng-if="(assignments|filter:{selected:true}).length > 0">,
+    {{(assignments|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
+  </i>
+  <table class="table table-striped table-bordered table-hover">
+    <thead>
+      <tr>
+        <!-- projector column -->
+        <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="minimum">
+        <!-- delete selection column -->
+        <th ng-show="isDeleteMode" os-perms-lite="assignments.can_manage" class="minimum deleteColumn">
+          <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
+        <th ng-click="toggleSort('title')" class="sortable">
+          <translate>Title</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'title' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('open_posts')" class="sortable optional">
+          <translate>Candidates</translate> / <translate>Posts</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'open_posts' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('phase')" class="sortable optional">
+          <translate>Phase</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'phase' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+    <tbody>
+      <tr ng-repeat="assignment in assignments | filter: filter.search | filter: {phase: phaseFilter} |
+          orderBy: sortColumn:reverse"
+          class="animate-item"
+          ng-class="{ 'activeline': assignment.isProjected(), 'selected': assignment.selected }">
+        <!-- projector column -->
+        <td ng-show="!isDeleteMode" os-perms-lite="core.can_manage_projector">
+          <a class="btn btn-default btn-sm"
+              ng-class="{ 'btn-primary': assignment.isProjected() }"
+              ng-click="assignment.project()"
+              title="{{ 'Project assignment' | translate }}">
+            <i class="fa fa-video-camera"></i>
+          </a>
+        <!-- delete selection column -->
+        <td ng-show="isDeleteMode" os-perms="assignments.can_manage" class="deleteColumn">
+          <input type="checkbox" ng-model="assignment.selected">
+        <!-- assignment data colums -->
+        <td ng-if="!assignment.quickEdit" ng-mouseover="assignment.hover=true" ng-mouseleave="assignment.hover=false">
+          <strong><a ui-sref="assignments.assignment.detail({id: assignment.id})">{{ assignment.title }}</a></strong>
+          <div os-perms="assignments.can_manage" class="hoverActions" ng-class="{'hiddenDiv': !assignment.hover}">
+            <a href="" ng-click="editDialog(assignment)" translate>Edit</a> |
+            <a href="" ng-click="assignment.quickEdit=true" translate>QuickEdit</a> |
+            <!-- TODO: translate confirm message -->
+            <a href="" class="text-danger"
+                ng-bootbox-confirm="Are you sure you want to delete <b>{{ assignment.title }}</b>?"
+                ng-bootbox-confirm-action="delete(assignment)" translate>Delete</a>
           </div>
-          <div class="row">
-            <div class="col-xs-6">
-              <label for="selectPhase" translate>Phase</label>
-              <select ng-options="phase.value as phase.display_name for phase in phases"
-                  ng-model="assignment.phase" class="form-control" id="selectPhase">
-              </select>
+        <td ng-if="!assignment.quickEdit" class="optional"><span class="badge">{{ assignment.open_posts }}</span>
+        <td ng-if="!assignment.quickEdit" class="optional">
+          <span class="label" ng-class="{'label-primary': assignment.phase == 0,
+                                         'label-warning': assignment.phase == 1,
+                                         'label-success': assignment.phase == 2 }">
+            {{ phases[assignment.phase].display_name }}
+          </span>
+        <!-- quickEdit columns -->
+        <td ng-if="assignment.quickEdit" colspan="3">
+          <h4>{{ assignment.title }} <span class="text-muted">&ndash; Quick Edit</span></h4>
+            <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
+              {{alert.msg}}
+            </alert>
+            <div class="row">
+              <div class="col-xs-6">
+                <label for="inputTitle" translate>Title</label>
+                <input type="text" ng-model="assignment.title" class="form-control input-sm" id="inputTitle">
+              </div>
+              <div class="col-xs-6">
+                <label for="inputPosts" translate>Number of members to be elected</label>
+                <input type="number" ng-model="assignment.open_posts" class="form-control input-sm" id="inputPosts">
+              </div>
             </div>
-            <div class="col-xs-6"></div>
-          </div>
-          <div class="spacer">
-            <button ng-click="assignment.quickEdit=false" class="btn btn-default pull-left" translate>
-              Cancel
-            </button> &nbsp;
-            <button ng-click="save(assignment)" class="btn btn-primary" translate>
-              Update
-            </button>
-            <a href="" ng-click="editDialog(assignment)"
-                class="pull-right" translate>Edit election...</a>
-          </div>
-</table>
+            <div class="row">
+              <div class="col-xs-6">
+                <label for="selectPhase" translate>Phase</label>
+                <select ng-options="phase.value as phase.display_name for phase in phases"
+                    ng-model="assignment.phase" class="form-control" id="selectPhase">
+                </select>
+              </div>
+              <div class="col-xs-6"></div>
+            </div>
+            <div class="spacer">
+              <button ng-click="assignment.quickEdit=false" class="btn btn-default pull-left" translate>
+                Cancel
+              </button> &nbsp;
+              <button ng-click="save(assignment)" class="btn btn-primary" translate>
+                Update
+              </button>
+              <a href="" ng-click="editDialog(assignment)"
+                  class="pull-right" translate>Edit election...</a>
+            </div>
+  </table>
+</div>
diff --git a/openslides/assignments/static/templates/assignments/assignmentpoll-form.html b/openslides/assignments/static/templates/assignments/assignmentpoll-form.html
index 7383a276f..af4c08e23 100644
--- a/openslides/assignments/static/templates/assignments/assignmentpoll-form.html
+++ b/openslides/assignments/static/templates/assignments/assignmentpoll-form.html
@@ -1,4 +1,4 @@
-<h1 translate>Update ballot</h1>
+<h1 translate>Ballot {{ ballot }}</h1>
 
 <form name="assignmentpollForm" ng-submit="save(model)">
   <formly-form model="model" fields="formFields">
diff --git a/openslides/core/signals.py b/openslides/core/signals.py
index e6d8bb257..13afbd393 100644
--- a/openslides/core/signals.py
+++ b/openslides/core/signals.py
@@ -84,7 +84,7 @@ def setup_general_config(sender, **kwargs):
         label=ugettext_lazy('Show logo on projector'),
         help_text=ugettext_lazy(
             'You can replace the logo. Just copy a file to '
-            '"static/img/logo.png" in your OpenSlides data path.'),
+            '"static/img/logo-projector.png" in your OpenSlides data path.'),
         weight=150,
         group=ugettext_lazy('Projector'))
 
diff --git a/openslides/core/static/css/app.css b/openslides/core/static/css/app.css
index e1323a1f6..b3e53c316 100644
--- a/openslides/core/static/css/app.css
+++ b/openslides/core/static/css/app.css
@@ -1,111 +1,594 @@
 /*
- * OpenSlides default template styles of the web interface
+ * OpenSlides template styles of web interface
  */
 
-body {
-   background-color: #FBFBFB;
+
+* { /* set margin/padding for all (block) elements to null */
+    margin: 0;
+    padding: 0;
 }
 
-/* TODO: Move only used custom style for angular templates in new css file */
+body {
+    font-family: "open_sansregular",Helvetica,Arial,sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #222;
+    text-align: center;
+    background: #e8eaed;
+}
+
+
+div {
+    text-align: left;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
+    font-weight: 400;
+    line-height: 1.1;
+}
+
+h1 {
+    font-size: 36px;
+    color: #317796;
+    padding-bottom: 8px;
+}
+
+h2 {
+    font-size: 22px;
+    color: #9a9898;
+    padding-bottom: 14px;
+}
+
+h3 {
+    font-size: 22px;
+    color: #222;
+    padding-bottom: 14px;
+}
+
+
+p {
+    padding-bottom: 14px;
+}
+
+a {
+    text-decoration: none;
+    color: #2b6883;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+img {
+    border: none;
+}
+
+#wrapper {
+    float: left;
+    width: 100%;
+    margin: 0 auto 0 auto;
+}
+
+
+/** Header **/
+
+#header {
+    float: left;
+    width: 100%;
+    height: 40px;
+    background: #002c42;
+    color: #999;
+}
+
+#header .title {
+    float: left;
+    margin: 2px 0 0 -5px;
+    font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
+    font-weight: 400;
+    color: #fff;
+}
+
+#header .user {
+    float: right;
+    margin: 5px 0 0 0;
+    height: 100%;
+}
+#header .user .inline {
+   display: inline;
+}
+
+#nav {
+    float: left;
+    width: 100%;
+    height: 99px;
+    background: #317796;
+    color: #fff;
+    overflow-y: hidden;
+}
+
+#header .containerOS, #nav .containerOS, #content .containerOS {
+    max-width: 1300px;
+    height: 100%;
+    margin: 0 auto 0 auto;
+    padding: 0 30px;
+}
+
+#nav .navbar {
+    float: left;
+    border: none;
+    margin: 0;
+}
+
+#nav .navbar .button {
+    float: left;
+    display: none;
+}
+
+#nav .navbar .button i {
+    padding-top: 33px;
+    font-size: 28px;
+    opacity: 0.5;
+}
+
+#nav .navbar .button a i {
+    display: block;
+    color: #fff;
+}
+#nav .navbar .button a:hover i {
+    opacity: 1;
+}
+
+#nav .navbar ul {
+    list-style: none;
+    margin: 0;
+}
+
+#nav .navbar ul li {
+    float: left;
+    text-align: center;
+}
+
+#nav .navbar ul li.active {
+    background: url('/static/img/nav_dark-bg.png');
+}
+
+#nav .navbar ul li.active a {
+    background: url('/static/img/nav_active.png') no-repeat bottom;
+}
+
+#nav .navbar li a {
+    display: block;
+    color: #fff;
+    padding: 22px 15px;
+}
+
+#nav .navbar li a:hover {
+    background: url('/static/img/nav_dark-bg.png');
+    text-decoration: none;
+}
+
+#nav .navbar li i {
+    font-size: 28px;
+    display: block;
+    margin-bottom: 6px;
+    margin-right: 0;
+    opacity: 0.5;
+}
+
+#nav .navbar li.active i, #nav .navbar li a:hover i {
+    opacity: 1;
+}
+
+#nav .searchbar {
+    float: right;
+    margin-top: 35px;
+}
+
+.searchbar .input-medium {
+    float: left;
+    height: 28px;
+    width: 200px;
+    border: 1px solid #ccc;
+    padding: 0 5px;
+    font-size: 14px;
+}
+
+.searchbar .btn {
+    float: left;
+    height: 30px;
+    width: 30px;
+    background: #e8eaed;
+    border: 1px solid #ccc;
+    border-left: none;
+    font-size: 14px;
+    color: #555;
+}
+
+
+/** Content **/
+
+#content {
+    float: left;
+    width: 100%;
+    margin-top: 20px;
+}
+
+#content .containerOS {
+    height: 30px;
+}
+
+
+/** Main column **/
+
+#content .col1 {
+    float: left;
+}
+
+#content .col1.min { /*with maximized sidebar*/
+    width: calc(100% - 330px);
+}
+
+#content .col1.max { /*with minimized sidebar*/
+    width: calc(100% - 70px);
+}
+
+.col1 .header {
+    background: #fff;
+    border: 1px solid #d3d3d3;
+}
+
+.col1 .title {
+    padding: 0 20px;
+    width: auto;
+    background: #fff;
+}
+
+.col1 .header .submenu {
+    float: right;
+}
+
+.col1 .meta {
+    padding: 0 20px 10px 20px;
+    width: auto;
+    min-height: 30px;
+    background: #bed4de;
+}
+
+.col1 .meta h3 {
+    padding-bottom: 0;
+    margin-bottom: 5px;
+}
+
+.col1 .details {
+    padding: 20px;
+    width: auto;
+    margin-top: 20px;
+    background: #fff;
+    padding: 20px;
+    border: 1px solid #d3d3d3;
+}
+
+.col1 ul, .col1 ol {
+    margin-left: 20px;
+}
+
+
+/** Projector sidebar column **/
+
+#content .col2 {
+    float: right;
+}
+
+#content .col2.max {
+    width: 330px;
+}
+
+#content .col2.min {
+    width: 70px;
+}
+
+#content .col2 h4 {
+    font-size: 22px;
+    line-height: 24px;
+    font-family: 'Roboto Condensed Light';
+    font-weight: 300;
+}
+
+#content .col2 a h4 {
+    color: #444;
+}
+
+#content .col2 a:hover h4 {
+    text-decoration: none;
+}
+
+.col2 .projector_min {
+    background: url('/static/img/nav_projector_sidebar_min.png') no-repeat left 17px;
+    width: 50px;
+    padding-left: 8px;
+    float: right;
+}
+
+.col2 .projector_min .icon {
+    float: left;
+    color: #fff;
+    font-size: 24px;
+    width: 50px;
+    text-align: center;
+    padding: 7px 0;
+    background: #317796;
+}
+
+.col2 .projector_min .icon a i {
+    opacity: 0.5;
+}
+
+.col2 .projector_min .icon a:hover i {
+    opacity: 1;
+}
+
+
+.col2 .projector_min .icon a {
+    color: #fff;
+    display: block;
+ }
+
+.col2 .projector_full {
+    margin-left: 30px;
+    width: auto;
+}
+
+ .col2 .projector_full .title {
+    width: 100%;
+    color: #fff;
+    height: 50px;
+    background: #317796;
+    cursor: pointer;
+}
+
+.col2 .projector_full .title i {
+    margin-right: 10px;
+}
+
+.col2 .projector_full .title .name {
+    float: left;
+    padding: 8px 0 0 20px;
+    font-size: 22px;
+    font-weight: 400;
+}
+
+.col2 .projector_full .title .icon {
+    float: right;
+    width: 50px;
+    text-align: center;
+    padding-top: 7px;
+    font-size: 24px;
+    opacity: 0.5;
+}
+
+.col2 .projector_full .title a, .col2 .projector_full .title a:hover {
+    color: #fff;
+    text-decoration: none;
+    display: block;
+}
+
+.col2 .projector_full .details {
+    clear: both;
+    width: 100%;
+    background: #d3d3d3;
+}
+
+.col2 .projector_full .details .section {
+    padding: 10px 20px;
+    width: auto;
+    border-bottom: 1px solid #c2c2c2;
+}
+
+#content .col2 .section a:hover {
+    text-decoration: none;
+    opacity: 0.5;
+}
+
+#content .toggle-icon {
+    font-size: 20px;
+    float: right;
+}
+
+/* countdown and message controls */
+.col2 .countdown.panel, .col2 .message.panel {
+    margin-bottom: 7px;
+}
+
+.col2 .countdown .panel-heading {
+    padding: 3px 15px;
+}
+
+.col2 .countdown .panel-body {
+    padding: 5px 15px;
+}
+
+.col2 .message .panel-body {
+    padding: 10px 15px;
+}
+
+.col2 .countdown_timer {
+    font-size: 2.2em;
+    font-weight: bold;
+}
+
+.col2 .countdown .editicon, .col2 .message .editicon {
+    padding-right: 10px;
+}
+
+.col2 .notNull {
+    color: red;
+    font-weight: bold;
+}
+
+/* iframe for live view */
+.col2 #iframe {
+    width: 1024px;
+    height: 768px;
+    -moz-transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
+    transform-origin: 0 0 0;
+    -moz-transform: scale(0.25);
+    -webkit-transform: scale(0.25);
+    -o-transform: scale(0.25);
+    transform: scale(0.25);
+    /* IE8+ - must be on one line, unfortunately */
+    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.25, M12=0, M21=0, M22=0.25, SizingMethod='auto expand')";
+}
+
+.col2 #iframewrapper {
+    width: 256px;
+    height: 192px;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid #D5D5D5;
+    margin-bottom: 10px;
+}
+
+.col2 #iframeoverlay {
+    width: 256px;
+    height: 192px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: block;
+    z-index: 1;
+}
+
+
+/** Footer **/
+
+#footer {
+    float: left;
+    height: 50px;
+    padding-top: 15px;
+    font-size: 90%;
+}
+
+
+/** General helper classes **/
+
+
+.btn-primary {
+    background-color: #317796;
+}
+
+.spacer, .spacer-top {
+    margin-top: 7px;
+}
+
+.spacer-right {
+    margin-right: 5px;
+}
+
+.hoverActions {
+    font-size: 85%;
+}
+
+.hiddenDiv {
+    visibility: hidden;
+}
+
+.vcenter {
+    vertical-align: middle;
+}
+
+.white-space-pre-line {
+    white-space: pre-line;
+}
+
+.slimlist {
+    padding-left: 20px;
+}
+
+.smallhr {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    border-color: #cccccc;
+}
+
+.nobr {
+    white-space: nowrap;
+}
+
+.optional { /* show optional column */
+    display: auto;
+}
+
+.login-logo {
+    width: 250px;
+}
+
+.modal-header {
+    padding: 5px;
+}
+
+/* user details */
+.user_details fieldset {
+    margin-bottom: 10px;
+}
+.user_details legend {
+    margin-bottom: 5px;
+}
+.user_details label {
+    font-weight: bold;
+    margin: 10px 0 0 0;
+    display: block;
+}
+.user_details label:after {
+    content: ":";
+}
+
+
+/* ngDialog: override ngdialog-theme-default */
+
+.ngdialog.ngdialog-theme-default {
+    padding-top: 40px;
+}
+
+.ngdialog.ngdialog-theme-default.wide-form .ngdialog-content {
+    width: 650px;
+}
+
+.ngdialog h2 {
+    margin-top: 5px;
+}
+
+
+/* angular-ui-tree style */
+
 .angular-ui-tree-handle {
     background: none repeat scroll 0 0 #f8faff;
     border: 1px solid #dae2ea;
     color: #7c9eb2;
     padding: 10px;
 }
+
 .angular-ui-tree-handle:hover {
     background: none repeat scroll 0 0 #f4f6f7;
     border-color: #dce2e8;
     color: #438eb9;
 }
+
 .angular-ui-tree-placeholder {
     background: none repeat scroll 0 0 #f0f9ff;
     border: 2px dashed #bed2db;
     box-sizing: border-box;
 }
-.countdown.panel, .message.panel {
-    margin-bottom: 7px;
-}
-.countdown .panel-heading {
-    padding: 3px 15px;
-}
-.countdown .panel-body {
-    padding: 5px 15px;
-}
-.message .panel-body {
-    padding: 10px 15px;
-}
-.countdown_timer {
-    font-size: 2.2em;
-    font-weight: bold;
-}
-.countdown .editicon, .message .editicon {
-    padding-right: 10px;
-}
-.vcenter {
-    vertical-align: middle;
-}
-.notNull {
-    color: red;
-    font-weight: bold;
-}
-.spacer, .spacer-top {
-    margin-top: 7px;
-}
-.spacer-right {
-    margin-right: 5px;
-}
-.hoverActions {
-    font-size: 85%;
-}
-.hiddenDiv {
-    visibility: hidden;
-}
-/* override bootstraps's progress bar for poll results */
-.pollresults .progress {
-    height: 12px;
-    margin-bottom: 0;
-}
-/* voting results */
-.result_label {
-    margin-top: 5px;
-}
-/* background colors for table rows */
-tr.offline td, li.offline {
-    background-color: #EAEAEA !important;
-}
-tr.hiddenrow td {
-    background-color: #e5e5e5;
-}
-tr.activeline td, li.activeline, .projected {
-    background-color: #bed4de;
-}
-tr.selected td {
-    background-color: #ff9999;
-}
-
-/* override ngdialog-theme-default */
-.ngdialog.ngdialog-theme-default {
-    padding-top: 50px;
-}
-.ngdialog.ngdialog-theme-default.wide-form .ngdialog-content {
-    width: 650px;
-}
-.ngdialog h2 {
-    margin-top: 5px;
-    margin-bottom: 20px;
-}
-
-.inline {
-   display: inline;
-}
-
 
 /* ngAnimate classes */
 .animate-item.ng-enter {
     -webkit-animation: fade-in 1s linear;
     animation: fade-in 1.5s linear;
 }
+
 .animate-item.ng-leave {
     -webkit-animation: fade-out 1s linear;
     animation: fade-out 1.5s linear;
@@ -122,10 +605,21 @@ tr.selected td {
     100% { opacity: 1; background: none; }
 }
 
+/* override bootstraps's progress bar for poll results */
+.pollresults .progress {
+    height: 12px;
+    margin-bottom: 0;
+}
+
+/* voting results */
+.result_label {
+    margin-top: 5px;
+}
+
 /* Chatbox */
 #chatbox {
     position: fixed;
-    top: 50px;
+    top: 40px;
     right: 0;
     width: 40%;
     border-color: #dddddd;
@@ -139,435 +633,87 @@ tr.selected td {
     overflow-y: scroll;
     height: 190px;
 }
-/* Header */
-#header {
-    background-color: #333333;
-    background-image: -moz-linear-gradient(top, #444444, #222222);
-    background-image: -ms-linear-gradient(top, #444444, #222222);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
-    background-image: -webkit-linear-gradient(top, #444444, #222222);
-    background-image: -o-linear-gradient(top, #444444, #222222);
-    background-image: linear-gradient(top, #444444, #222222);
-    box-shadow: 0 0 7px rgba(0,0,0,0.6);
-    border-radius: 0;
-    height: 35px;
-    margin-bottom: 20px;
-    padding: 7px 20px 0;
-    position: relative;
-}
-.navbar-brand {
-    padding: 2px;
-    height: 40px;
-}
-.navbar-text {
-    margin-top: 9px;
-}
-#logo {
-    height: 30px;
-    padding-left: 3px;
-}
-#header .title {
-    font-size: 16px;
-    color: #999999;
-    position: absolute;
-    margin: 8px 0 0 50px;
-}
-#searchform {
-    margin-top: 0px;
+
+/* tables */
+
+.minimum {
+    width: 1px;
 }
 
-footer {
-    margin-bottom: 20px;
-}
-
-/* Headings and Links */
-h1 {
-    border-bottom: 1px solid #EEEEEE;
-    margin: 0px 0 30px;
-    padding-bottom: 9px;
-}
-#submenu {
-    float: right;
-    font-size: 85%;
-    position: absolute;
-    top: 0;
-    right: 15px;
-}
-a:hover {
-    text-decoration: none;
-}
-
-/* Login page */
-#login-page.container {
-    width: 320px;
-    margin-top: 20px;
-}
-#login-page h2 {
-    margin-left: 30px;
-    margin-bottom: 20px;
-}
-#login-page h2 img {
-    width: 250px;
-}
-#login-page .well {
-    background-color: white;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 6px 6px 6px 6px;
-    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-    margin-top: 20px;
-    padding-bottom: 20px;
-    line-height: 45px;
-}
-
-/* List tables */
-th.sortable:hover, tr.pointer:hover, .pointer {
-    cursor: pointer;
-}
-
-
-/* iframe for live view */
-#iframe {
-    width: 1024px;
-    height: 768px;
-    -moz-transform-origin: 0 0;
-    -webkit-transform-origin: 0 0;
-    -o-transform-origin: 0 0;
-    transform-origin: 0 0 0;
-    -moz-transform: scale(0.25);
-    -webkit-transform: scale(0.25);
-    -o-transform: scale(0.25);
-    transform: scale(0.25);
-    /* IE8+ - must be on one line, unfortunately */
-    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.25, M12=0, M21=0, M22=0.25, SizingMethod='auto expand')";
-}
-#iframewrapper {
-    width: 256px;
-    height: 192px;
-    position: relative;
-    overflow: hidden;
-    border: 1px solid #D5D5D5;
-    margin-bottom: 10px;
-}
-#iframeoverlay {
-    width: 256px;
-    height: 192px;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    display: block;
-    z-index: 1;
-}
-
-
-/* Log */
-#log {
-    padding-left: 14px;
-}
-
-/** Utils **/
-div.import .label {
-    color: #333 !important;
-    font-size: 100%;
-    font-weight: normal;
-}
-div.import > div > input[type="text"] {
-    width: 30px;
-}
-.white-space-pre-line {
-    white-space: pre-line;
-}
-
-
-
-.nopadding {
-    padding: 0;
-}
-.alert form {
-    margin-bottom: 0;
-}
-.slimlist {
-    padding-left: 20px;
-}
-.smallhr {
-    margin-top: 5px;
-    margin-bottom: 5px;
-    border-color: #cccccc;
-}
-.resultcolumn {
-    font-weight: bold;
-}
-.nobr {
-    white-space: nowrap;
-}
-.right {
-    float: right;
-}
-.indentation {
-    margin-left: 12px;
-}
-.firstColumn {
-    width: 55px;
-}
 .deleteColumn {
     text-align: center;
     background-color: #ff9999 !important;
 }
-.switch.checked {
-    background-color: #ff9999 !important;
-    border-color: #ff9999;
+
+th.sortable:hover, tr.pointer:hover, .pointer {
+    cursor: pointer;
 }
 
+/* background colors for table rows */
+tr.hiddenrow td {
+    background-color: #e5e5e5;
+}
 
-.minimum, .mini_width {
-    width: 1px;
+tr.activeline td, li.activeline, .projected {
+    background-color: #bed4de;
 }
-/* show optional column */
-.optional {
-    display: auto;
-}
-.user_details fieldset {
-    margin-bottom: 10px;
-}
-.user_details legend {
-    margin-bottom: 5px;
-}
-.user_details label {
-    font-weight: bold;
-    margin: 10px 0 0 0;
-    display: block;
-}
-.user_details label:after {
-    content: ":";
+
+tr.selected td {
+    background-color: #ff9999;
 }
 
+
 /** Colors **/
-.grey {
-    color: grey;
-}
 
-/** Forms **/
-
-/* Fix the top position by using fa-icons
- * in bootstrap's form elements with form-control-feedback */
-.has-feedback i.form-control-feedback {
-    top: 35px;
-}
-legend + .control-group {
-    margin-top: 0px !important;
-}
-#id_permissions {
-    height: 310px;
-    width: auto;
-}
-#id_users {
-    height: 110px;
-    width: auto;
-}
-#dataTable_filter input {
-    width: auto;
-}
-#dataTable {
-    clear: none;
-}
-#dataTable_wrapper .row-fluid:after {
-    clear: none;
-}
-.searchresults li {
-    margin-bottom: 15px;
-}
-.searchresults li .app {
-    color: #999999;
-}
-.highlighted {
-    font-weight: bold;
-}
-
-/* ckeditor plugin insertpre: textarea style */
-table.cke_dialog_contents textarea {
-    font-family: monospace !important;
+.grey { /*h2 grey*/
+    color: #9a9898;
 }
 
 
-/** Left sidebar navigation **/
-.leftmenu ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-.leftmenu ul ul {
-    display: none;
-    margin-left: 35px;
-    margin-top: -1px;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-}
-.leftmenu ul li {
-    display: block;
-    width: 100%;
-    line-height: 22px;
-}
-.leftmenu ul li a {
-    border-style: none solid solid;
-    border-width: 0 1px 1px;
-    border-color: #dddddd;
-    color: #666666;
-    display: block;
-    font-weight: bold;
-    background-color: #ffffff;
-    padding: 0;
-}
-.leftmenu ul li:first-child a {
-    border-top: 1px solid #DDDDDD;
-}
-.leftmenu ul li a span.ico {
-    display: inline-block;
-    background: #f9f9f9;
-    padding: 8px 10px 6px;
-    margin: 0 5px 0 0;
-    border-right: 1px solid #dddddd;
-    width: 35px;
-}
-.leftmenu ul li a, .leftmenu ul li a span.ico {
-    -webkit-transition: background 0.2s ease-in-out;
-    -moz-transition: background 0.2s ease-in-out;
-    -ms-transition: background 0.2s ease-in-out;
-    -o-transition: background 0.2s ease-in-out;
-    transition: background 0.2s ease-in-out;
-}
-.leftmenu ul li a:hover {
-    background-color: #f5f5f5;
-    color: #000000;
-}
-.leftmenu ul li a:hover span.ico {
-    background-color: #efefef;
-}
-.leftmenu ul li.active a {
-    background-color: #333333;
-    color: #ffffff;
-}
-.leftmenu ul li.active a span.ico {
-    background-color: #333333;
-    border-right: 1px solid #444444;
-}
-.leftmenu ul li.hider a {
-    margin-top: 5px;
-    height: 20px;
-}
-.leftmenu.lefticon > ul {
-    width: 37px !important;
-}
-.leftmenu.lefticon ul ul {
-    position: absolute;
-    z-index: 20;
-    margin-top: -34px;
-}
-.leftmenu.lefticon > ul > li > a > span.text {
-    /*display: none;*/
-}
-.leftmenu.lefticon ul > li > a {
-    min-width: 150px !important;
-}
-.leftmenu.lefticon span.text {
-    padding-right: 15px;
+/*////////////////////////////////////////
+    =MEDIA QUERIES (RESPONSIVE DESIGN)
+////////////////////////////////////////*/
+
+/* display for 900 to 1200px resolutions */
+@media only screen and (max-width: 1200px) {
+
+    body { font-size: 12px;}
+
+
+    h1 { font-size: 30px; padding-bottom: 6px; }
+
+    h2 { font-size: 22px; padding-bottom: 10px; }
+
+    h3 { font-size: 18px; padding-bottom: 10px; }
+
 }
 
-/** Icons **/
-/* TODO: Move some of them to the respective apps. */
-.status_link .icon-on, .icon-checked-new {
-    background-image: url("../img/glyphicons_152_check.png");
-    background-position: 0;
-}
-.icon-checked-new_white {
-    background-image: url("../img/glyphicons_152_check_white.png");
-    background-position: 0;
-}
-.status_link .icon-off, .icon-unchecked-new {
-    background-image: url("../img/glyphicons_153_unchecked.png");
-    background-position: 0;
-}
-.icon-summary {
-    background-image: url("../img/glyphicons_154_more_windows.png");
-    background-position: 0;
-}
-.icon-summary.icon-white {
-    background-image: url("../img/glyphicons_154_more_windows_white.png");
-    background-position: 0;
-}
-.icon-login {
-    background-image: url("../img/glyphicons_044_keys.png");
-    background-position: 0;
-}
-.icon-group {
-    background-image: url("../img/glyphicons_043_group.png");
-    background-position: 0;
-}
-.icon-import {
-    background-image: url("../img/glyphicons_358_file_import.png");
-    background-position: 0;
-}
-.icon-delete {
-    background-image: url("../img/glyphicons_256_delete.png");
-    background-position: 0;
-}
-.icon-add-user {
-    background-image: url("../img/glyphicons_006_user_add.png");
-    background-position: 0;
-}
-.icon-clock {
-    background-image: url("../img/glyphicons_054_clock.png");
-    background-position: 0;
-}
-.icon-speaker {
-    background-image: url("../img/glyphicons_300_microphone.png");
-    background-position: 0;
+
+
+/* display for resolutions smaller that 880px */
+@media only screen and (max-width: 880px) {
+
+    #nav .navbar li a { padding: 24px 5px; }
 }
 
-/** Responsive **/
-@media (max-width: 767px) {
-    body {
-        padding: 0;
-    }
-    .row-fluid .leftmenu {
-        float: left;
-        width: auto;
-    }
-    #content {
-        margin: 0 5px 0 45px;
-        width: auto;
-    }
-    /* hide optional column */
-    .optional, #searchform #id_q {
-        display: none;
-    }
-    #searchform button {
-        border-radius: 4px;
-    }
-}
 
-@media (max-width: 480px) {
-    body {
-        padding: 0;
-    }
-    .row-fluid .leftmenu {
-        float: left;
-        width: auto;
-    }
-    #header {
-        padding: 7px 5px 0;
-    }
-    #content {
-        margin: 0 5px 0 45px;
-        width: auto;
-    }
-    /* hide optional column */
-    .optional, .optional-small{
-        display: none;
-    }
-    #menu-overview .manage, .agenda_list .manage {
-        width: 50px !important;
-    }
-}
+/* display for resolutions smaller that 480px */
+@media only screen and (max-width: 480px) {
 
-/* Hide elements with os-perms-lite */
-.os-perms-lite {
-  display: none !important;
+    h1 { font-size: 22px; padding-bottom: 4px; }
+
+    h2 { font-size: 16px; padding-bottom: 4px; }
+
+    h3 { font-size: 14px; padding-bottom: 4px; }
+
+    #header { height: 80px;  }
+    #header .title { width: 100%; text-align: center; margin-top: 5px;  }
+    #header .user { float: left; width: 100%;  }
+
+    #nav { height: 60px; }
+    #nav .navbar ul { display:none;}
+    #nav .navbar .button { display: block;}
+    #nav .navbar .button i { padding-top: 15px;}
+    #nav .searchbar { margin-top: 15px; }
+    .searchbar .input-medium { width: 150px; }
 }
diff --git a/openslides/core/static/img/favicon.png b/openslides/core/static/img/favicon.png
index a10d30810..84f1e3d37 100644
Binary files a/openslides/core/static/img/favicon.png and b/openslides/core/static/img/favicon.png differ
diff --git a/openslides/core/static/img/logo-login.png b/openslides/core/static/img/logo-login.png
deleted file mode 100644
index edd092950..000000000
Binary files a/openslides/core/static/img/logo-login.png and /dev/null differ
diff --git a/openslides/core/static/img/logo-projector.png b/openslides/core/static/img/logo-projector.png
new file mode 100644
index 000000000..f1e9a195c
Binary files /dev/null and b/openslides/core/static/img/logo-projector.png differ
diff --git a/openslides/core/static/img/logo-small.png b/openslides/core/static/img/logo-small.png
deleted file mode 100644
index 3ded4b8a5..000000000
Binary files a/openslides/core/static/img/logo-small.png and /dev/null differ
diff --git a/openslides/core/static/img/logo.png b/openslides/core/static/img/logo.png
deleted file mode 100644
index 9b81eb762..000000000
Binary files a/openslides/core/static/img/logo.png and /dev/null differ
diff --git a/openslides/core/static/img/nav_active.png b/openslides/core/static/img/nav_active.png
new file mode 100644
index 000000000..48be90846
Binary files /dev/null and b/openslides/core/static/img/nav_active.png differ
diff --git a/openslides/core/static/img/nav_dark-bg.png b/openslides/core/static/img/nav_dark-bg.png
new file mode 100644
index 000000000..f53619aff
Binary files /dev/null and b/openslides/core/static/img/nav_dark-bg.png differ
diff --git a/openslides/core/static/img/nav_projector_sidebar_min.png b/openslides/core/static/img/nav_projector_sidebar_min.png
new file mode 100644
index 000000000..d8d3e371f
Binary files /dev/null and b/openslides/core/static/img/nav_projector_sidebar_min.png differ
diff --git a/openslides/core/static/img/openslides-logo-dark.png b/openslides/core/static/img/openslides-logo-dark.png
new file mode 100644
index 000000000..f1e9a195c
Binary files /dev/null and b/openslides/core/static/img/openslides-logo-dark.png differ
diff --git a/openslides/core/static/img/openslides-logo.png b/openslides/core/static/img/openslides-logo.png
new file mode 100644
index 000000000..7b1417ebe
Binary files /dev/null and b/openslides/core/static/img/openslides-logo.png differ
diff --git a/openslides/core/static/img/voting-abstention.png b/openslides/core/static/img/voting-abstention.png
deleted file mode 100644
index 5aa635062..000000000
Binary files a/openslides/core/static/img/voting-abstention.png and /dev/null differ
diff --git a/openslides/core/static/img/voting-invalid.png b/openslides/core/static/img/voting-invalid.png
deleted file mode 100644
index a3f45d4fb..000000000
Binary files a/openslides/core/static/img/voting-invalid.png and /dev/null differ
diff --git a/openslides/core/static/img/voting-no.png b/openslides/core/static/img/voting-no.png
deleted file mode 100644
index 3b8ee10b7..000000000
Binary files a/openslides/core/static/img/voting-no.png and /dev/null differ
diff --git a/openslides/core/static/img/voting-total.png b/openslides/core/static/img/voting-total.png
deleted file mode 100644
index 4a1590355..000000000
Binary files a/openslides/core/static/img/voting-total.png and /dev/null differ
diff --git a/openslides/core/static/img/voting-yes-grey.png b/openslides/core/static/img/voting-yes-grey.png
deleted file mode 100644
index faac1de32..000000000
Binary files a/openslides/core/static/img/voting-yes-grey.png and /dev/null differ
diff --git a/openslides/core/static/img/voting-yes.png b/openslides/core/static/img/voting-yes.png
deleted file mode 100644
index 3a2178d95..000000000
Binary files a/openslides/core/static/img/voting-yes.png and /dev/null differ
diff --git a/openslides/core/static/js/core/base.js b/openslides/core/static/js/core/base.js
index a76aaab94..169a1aa66 100644
--- a/openslides/core/static/js/core/base.js
+++ b/openslides/core/static/js/core/base.js
@@ -4,14 +4,12 @@
 
 // The core module used for the OpenSlides site and the projector
 angular.module('OpenSlidesApp.core', [
-    'angular-loading-bar',
     'js-data',
     'gettext',
     'ngAnimate',
     'ngSanitize',  // TODO: only use this in functions that need it.
     'ui.bootstrap',
     'ui.tree',
-    'uiSwitch',
 ])
 
 .config(['DSProvider', 'DSHttpAdapterProvider', function(DSProvider, DSHttpAdapterProvider) {
diff --git a/openslides/core/static/js/core/site.js b/openslides/core/static/js/core/site.js
index 0b4bfa38f..f25894413 100644
--- a/openslides/core/static/js/core/site.js
+++ b/openslides/core/static/js/core/site.js
@@ -6,6 +6,7 @@
 angular.module('OpenSlidesApp.core.site', [
     'OpenSlidesApp.core',
     'ui.router',
+    'angular-loading-bar',
     'formly',
     'formlyBootstrap',
     'ngBootbox',
@@ -14,7 +15,6 @@ angular.module('OpenSlidesApp.core.site', [
     'ngCsvImport',
     'ui.select',
     'luegg.directives',
-    'xeditable',
     'ckeditor',
 ])
 
@@ -73,14 +73,6 @@ angular.module('OpenSlidesApp.core.site', [
             'weight': 100,
         });
 
-        mainMenuProvider.register({
-            'ui_sref': 'core.customslide.list',
-            'img_class': 'video-camera',
-            'title': 'Projector',
-            'weight': 110,
-            'perm': 'core.can_see_projector',
-        });
-
         mainMenuProvider.register({
             'ui_sref': 'config',
             'img_class': 'cog',
@@ -288,11 +280,6 @@ angular.module('OpenSlidesApp.core.site', [
     });
 })
 
-// options for angular-xeditable
-.run(function(editableOptions) {
-    editableOptions.theme = 'bs3';
-})
-
 // angular formly config options
 .run([
     'formlyConfig',
@@ -367,6 +354,17 @@ angular.module('OpenSlidesApp.core.site', [
     };
 })
 
+// Projector Sidebar Controller
+.controller('ProjectorSidebarCtrl', [
+    '$scope',
+    function ($scope) {
+        $scope.isProjectorSidebar = false;
+        $scope.showProjectorSidebar = function (show) {
+            $scope.isProjectorSidebar = show;
+        };
+    }
+])
+
 // Version Controller
 .controller('VersionCtrl', [
     '$scope',
diff --git a/openslides/core/static/templates/config.html b/openslides/core/static/templates/config.html
index 150ff9e9e..cc995add9 100644
--- a/openslides/core/static/templates/config.html
+++ b/openslides/core/static/templates/config.html
@@ -1,27 +1,33 @@
-<h1 translate>Settings</h1>
+<div class="header">
+  <div class="title">
+    <h1 translate>Settings</h1>
+  </div>
+</div>
 
-<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
-  <!-- generate config groups -->
-  <div ng-repeat="group in configGroups">
-    <div class="panel panel-default">
-      <div class="panel-heading" role="tab" id="heading-{{ group.name }}">
-        <h4 class="panel-title">
-          <a data-toggle="collapse" data-parent="#accordion" href="#{{ group.name }}"
-              aria-expanded="false" aria-controls="{{ group.name }}" translate>
-            {{ group.name }}
-          </a>
-        </h4>
-      </div> <!-- heading -->
-      <div id="{{ group.name }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ group.name }}">
-        <div class="panel-body">
-          <div ng-repeat="subgroup in group.subgroups">
-            <h3>{{ subgroup.name }}</h3>
-            <div ng-repeat="configOption in subgroup.items">
-              <os-form-field field="configOption"></os-form-field>
+<div class="details">
+  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+    <!-- generate config groups -->
+    <div ng-repeat="group in configGroups">
+      <div class="panel panel-default">
+        <div class="panel-heading" role="tab" id="heading-{{ group.name }}">
+          <h4 class="panel-title">
+            <a data-toggle="collapse" data-parent="#accordion" href="#{{ group.name }}"
+                aria-expanded="false" aria-controls="{{ group.name }}" translate>
+              {{ group.name }}
+            </a>
+          </h4>
+        </div> <!-- heading -->
+        <div id="{{ group.name }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ group.name }}">
+          <div class="panel-body">
+            <div ng-repeat="subgroup in group.subgroups">
+              <h3>{{ subgroup.name }}</h3>
+              <div ng-repeat="configOption in subgroup.items">
+                <os-form-field field="configOption"></os-form-field>
+              </div>
             </div>
           </div>
-        </div>
-      </div> <!-- group.name -->
+        </div> <!-- group.name -->
+      </div>
     </div>
   </div>
 </div>
diff --git a/openslides/core/static/templates/core/customslide-detail.html b/openslides/core/static/templates/core/customslide-detail.html
index 250e51cfd..c946de4db 100644
--- a/openslides/core/static/templates/core/customslide-detail.html
+++ b/openslides/core/static/templates/core/customslide-detail.html
@@ -1,23 +1,28 @@
-<h1>{{ customslide.title }}</h1>
-
-<div id="submenu">
-  <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
-  <!-- List of speakers -->
-  <a ui-sref="agenda.item.detail({id: customslide.agenda_item_id})" class="btn btn-sm btn-default">
-    <i class="fa fa-microphone fa-lg"></i>
-    <translate>List of speakers</translate>
-  </a>
-  <!-- project -->
-  <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
-      ng-class="{ 'btn-primary': customslide.isProjected() }"
-      ng-click="customslide.project()"
-      title="{{ 'Project agenda item' | translate }}">
-    <i class="fa fa-video-camera"></i>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+      <!-- List of speakers -->
+      <a ui-sref="agenda.item.detail({id: customslide.agenda_item_id})" class="btn btn-sm btn-default">
+        <i class="fa fa-microphone fa-lg"></i>
+        <translate>List of speakers</translate>
+      </a>
+      <!-- project -->
+      <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
+          ng-class="{ 'btn-primary': customslide.isProjected() }"
+          ng-click="customslide.project()"
+          title="{{ 'Project agenda item' | translate }}">
+        <i class="fa fa-video-camera"></i>
+      </a>
+    </div>
+    <h1>{{ customslide.title }}</h1>
+    <h2 translate>Agenda item</h2>
+  </div>
 </div>
 
-<div ng-bind-html="customslide.text"></div>
-
+<div class="details">
+  <div ng-bind-html="customslide.text"></div>
+</div>
diff --git a/openslides/core/static/templates/core/customslide-form.html b/openslides/core/static/templates/core/customslide-form.html
index e4a905470..485ffbf13 100644
--- a/openslides/core/static/templates/core/customslide-form.html
+++ b/openslides/core/static/templates/core/customslide-form.html
@@ -1,5 +1,5 @@
 <h1 ng-if="model.id" translate>Edit agenda item</h1>
-<h2 ng-if="!model.id" translate>New agenda item</h2>
+<h1 ng-if="!model.id" translate>New agenda item</h1>
 
 <form name="customslideForm" ng-submit="save(model)">
   <formly-form model="model" fields="formFields">
diff --git a/openslides/core/static/templates/core/customslide-list.html b/openslides/core/static/templates/core/customslide-list.html
deleted file mode 100644
index d013e7075..000000000
--- a/openslides/core/static/templates/core/customslide-list.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<h1 translate>Custom slides</h1>
-
-<div id="submenu">
-  <a ui-sref="core.customslide.create" os-perms="core.can_manage_projector" class="btn btn-primary btn-sm">
-    <i class="fa fa-plus fa-lg"></i>
-    <translate>New</translate>
-  </a>
-</div>
-
-
-
-<div class="row form-group">
-  <div class="col-sm-8" os-perms="core.can_manage_projector">
-    <p><input type="text" os-focus-me ng-model="filter.search" class="form-control"
-        placeholder="{{ 'Filter' | translate}}">
-    <table class="table table-striped table-bordered table-hover">
-      <thead>
-        <tr>
-          <th ng-click="toggleSort('title')" class="sortable">
-            <translate>Title</translate>
-            <i class="pull-right fa" ng-show="sortColumn === 'title' && header.sortable != false"
-                ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-            </i>
-          <th os-perms="core.can_manage_projector" class="minimum">
-            <translate>Actions</translate>
-      <tbody>
-        <tr ng-repeat="customslide in customslides | filter: filter.search |
-            orderBy: sortColumn:reverse" ng-class="{ 'activeline': customslide.isProjected() }">
-          <td><a ui-sref="core.customslide.detail({id: customslide.id})">{{ customslide.title }}</a>
-          <td os-perms="core.can_manage_projector" class="nobr">
-            <!-- project -->
-            <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm" ng-class="{ 'btn-primary': customslide.isProjected() }"
-                ng-click="customslide.project()"
-                title="{{ 'Project user' | translate }}">
-              <i class="fa fa-video-camera"></i>
-            </a>
-            <!-- edit -->
-            <a ui-sref="core.customslide.detail.update({id: customslide.id })"
-                class="btn btn-default btn-sm"
-                title="{{ 'Edit' | translate}}">
-              <i class="fa fa-pencil"></i>
-            </a>
-            <!-- delete -->
-            <a ng-click="delete(customslide)" class="btn btn-danger btn-sm"
-                title="{{ 'Delete' | translate }}">
-              <i class="fa fa-trash-o"></i>
-            </a>
-    </table>
-  </div>
-  <div class="col-sm-4">
-    <div class="well">
-      <div ng-include src="'static/templates/core/projector-controls.html'"></div>
-    </div>
-  </div>
-</div>
diff --git a/openslides/core/static/templates/core/login-form.html b/openslides/core/static/templates/core/login-form.html
index a2e9f45c2..91ecc11f7 100644
--- a/openslides/core/static/templates/core/login-form.html
+++ b/openslides/core/static/templates/core/login-form.html
@@ -1,6 +1,6 @@
 <form ng-submit="login(username, password)">
   <div class="modal-header">
-    <img src="/static/img/logo-login.png" alt="OpenSlides" class="center-block">
+    <img src="/static/img/openslides-logo.png" alt="OpenSlides" class="login-logo center-block">
   </div>
   <div class="modal-body">
     <uib-alert ng-repeat="alert in alerts" type="{{ alert.type }}" close="closeAlert($index)">
diff --git a/openslides/core/static/templates/core/projector-controls.html b/openslides/core/static/templates/core/projector-controls.html
index 8ac7df034..5bf56e0f8 100644
--- a/openslides/core/static/templates/core/projector-controls.html
+++ b/openslides/core/static/templates/core/projector-controls.html
@@ -1,177 +1,201 @@
-<!-- projector live view -->
-<h3 translate>Projector</h3>
-<a ui-sref="projector" target="_blank">
-  <div id="iframewrapper">
-    <iframe id="iframe" src="/projector" frameborder="0"></iframe>
-    <div id="iframeoverlay"></div>
-  </div>
-</a>
 
-<div ng-controller="ProjectorControlCtrl">
-  <!-- projector control buttons -->
-  <p os-perms="core.can_manage_projector">
-    <a ng-click="editCurrentSlide()"
-        class="btn btn-default btn-sm"
-        title="{{ 'Edit current slide' | translate}}">
-      <i class="fa fa-pencil"></i>
-    </a>
-    &nbsp;
-    <a ng-click="controlProjector('scale', 'down')"
-        class="btn btn-default btn-sm"
-        title="{{ 'Smaller' | translate}}">
-      <i class="fa fa-search-minus"></i>
-    </a>
-    <a ng-click="controlProjector('scale', 'up')"
-        class="btn btn-default btn-sm"
-        title="{{ 'Bigger' | translate}}">
-      <i class="fa fa-search-plus"></i>
-    </a>
-    <span ng-class="{ 'notNull': scaleLevel != 0 }">{{ scaleLevel }}</span>
-    &nbsp;
-    <a ng-click="controlProjector('scroll', 'down')"
-        class="btn btn-default btn-sm"
-        title="{{ 'Scroll up' | translate}}">
-      <i class="fa fa-arrow-up"></i>
-    </a>
-    <a ng-click="controlProjector('scroll', 'up')"
-        class="btn btn-default btn-sm"
-        title="{{ 'Scroll down' | translate}}">
-      <i class="fa fa-arrow-down"></i>
-    </a>
-    <a ng-click="controlProjector('scroll', 'reset')"
-        class="btn btn-default btn-sm"
-        title="{{ 'Reset scrolling' | translate}}">
-      <i class="fa fa-undo"></i>
-    </a>
-    <span ng-class="{ 'notNull': scrollLevel != 0 }">{{ scrollLevel }}</span>
-  </p>
+<div class="details">
 
-  <!-- countdowns -->
-  <div os-perms-lite="core.can_manage_projector">
-    <div ng-repeat="countdown in countdowns | orderBy: 'index'" id="{{countdown.uuid}}" class="countdown panel panel-default">
-      <div class="panel-heading">
-        <span ng-if="countdown.description">{{ countdown.description }}</span>
-        <span ng-if="!countdown.description">Countdown {{ countdown.index +1 }}</span>
-        <!-- remove countdown button -->
-        <button type="button" class="close"
-            ng-click="removeCountdown(countdown)"
-            title="{{ 'Remove countdown' | translate}}">
-            <i class="fa fa-times"></i>
-        </button>
-        <!-- edit countdown button -->
-        <button ng-show="countdown.status=='stop'"
-            type="button" class="close editicon"
-            ng-click="editCountdownFlag=true;"
-            title="{{ 'Edit countdown' | translate}}">
-            <i class="fa fa-pencil"></i>
-        </button>
-      </div>
-      <div class="panel-body"
-          ng-class="{ 'projected': countdown.visible }">
-        <!-- project countdown button -->
-        <a class="btn btn-default btn-sm"
-            ng-model="countdown.visible"
-            ng-click="showCountdown(countdown)"
-            ng-class="{ 'btn-primary': countdown.visible }"
-            title="{{ 'Project countdown' | translate }}">
-          <i class="fa fa-video-camera"></i>
-        </a>
-        &nbsp;&nbsp;
-        <!-- countdown controls -->
-        <a class="btn btn-default vcenter"
-            ng-click="resetCountdown(countdown)"
-            ng-class="{ 'disabled': countdown.status == 'stop' && countdown.default == countdown.countdown_time }"
-            title="{{ 'Reset countdown' | translate}}">
-          <i class="fa fa-stop"></i>
-        </a>
-        <a ng-if="countdown.status=='stop'" class="btn btn-default vcenter"
-            ng-click="startCountdown(countdown)"
-            title="{{ 'Start' | translate}}">
-          <i  class="fa fa-play"></i>
-          <i ng-if="countdown.status=='running'" class="fa fa-pause"></i>
-        </a>
-        <a ng-if="countdown.status=='running'" class="btn btn-default vcenter"
-            ng-click="stopCountdown(countdown)"
-            title="{{ 'Pause' | translate}}">
-          <i  class="fa fa-pause"></i>
-        </a>
-        <span ng-if="!editTime" class="countdown_timer vcenter"
-              ng-class="{ 'negative': countdown.seconds < 0 }">
-            {{ countdown.seconds | osSecondsToTime }}
-        </span>
-        <!-- edit countdown form -->
-        <form ng-show="editCountdownFlag" ng-submit="editCountdown(countdown)">
-          <div class="form-group">
-            <label translate>Description</label>
-            <input ng-model="countdown.description" type="text" class="form-control input-sm">
+  <div ng-controller="ProjectorControlCtrl">
+    <!-- live view -->
+    <div class="section" os-perms-lite="core.can_see_projector">
+      <a href="#" ng-click="isLiveView = !isLiveView">
+        <i class="fa toggle-icon" ng-class="isLiveView ? 'fa-angle-up' : 'fa-angle-down'"></i>
+        <h4 translate>Live view</h4>
+      </a>
+      <div uib-collapse="!isLiveView">
+        <a ui-sref="projector" target="_blank">
+          <div id="iframewrapper">
+            <iframe id="iframe" src="/projector" frameborder="0"></iframe>
+            <div id="iframeoverlay"></div>
           </div>
-          <div class="form-group">
-            <label translate>Start time</label>
-            <input ng-model="countdown.default" type="number" class="form-control input-sm">
-          </div>
-          <button type="submit"
-              title="{{ 'Save' | translate}}"
-              class="btn btn-sm btn-primary">
-            <i class="fa fa-check"></i>
-          </button>
-          <button ng-click="editCountdownFlag=false;"
-              title="{{ 'Cancel' | translate}}"
-              class="btn btn-default btn-sm">
-            <i class="fa fa-times"></i>
-          </button>
-        </form>
-      </div>
-    </div>
-    <!-- Add countdown button -->
-    <a ng-click="addCountdown()"
-        class="btn btn-default btn-sm"
-        title="{{ 'Add countdown' | translate}}">
-      <i class="fa fa-plus"></i> <translate>Add new countdown</translate>
-    </a>
-  </div>
-
-  <!-- messages -->
-  <div os-perms-lite="core.can_manage_projector">
-    <h3 translate>Messages</h3>
-    <div ng-repeat="message in messages | orderBy: 'index'" id="{{message.uuid}}" class="message panel panel-default">
-      <div class="panel-body"
-          ng-class="{ 'projected': message.visible }">
-        <!-- project message button -->
-        <a class="btn btn-default btn-sm"
-            ng-model="message.visible"
-            ng-click="showMessage(message)"
-            ng-class="{ 'btn-primary': message.visible }"
-            title="{{ 'Project message' | translate }}">
-          <i class="fa fa-video-camera"></i>
         </a>
-        &nbsp;&nbsp;
-        {{ message.message }}
-        <!-- remove message button -->
-        <button type="button" class="close"
-            ng-click="removeMessage(message)"
-            title="{{ 'Remove message' | translate}}">
-            <i class="fa fa-times"></i>
-        </button>
-        <button type="button" class="close editicon"
-            ng-click="editMessageFlag=true;"
-            title="{{ 'Edit message' | translate}}">
+        <!-- projector control buttons -->
+        <p os-perms="core.can_manage_projector">
+          <a ng-click="editCurrentSlide()"
+              class="btn btn-default btn-sm"
+              title="{{ 'Edit current slide' | translate}}">
             <i class="fa fa-pencil"></i>
-        </button>
-        <div ng-if="editMessageFlag" class="input-group">
-          <input ng-model="message.message" type="text" class="form-control input-sm">
-          <a ng-click="editMessage(message)"
-              title="{{ 'Save' | translate}}"
-             class="btn btn-sm btn-primary input-group-addon">
-            <i class="fa fa-check"></i>
           </a>
-        </div>
+          &nbsp;
+          <a ng-click="controlProjector('scale', 'down')"
+              class="btn btn-default btn-sm"
+              title="{{ 'Smaller' | translate}}">
+            <i class="fa fa-search-minus"></i>
+          </a>
+          <a ng-click="controlProjector('scale', 'up')"
+              class="btn btn-default btn-sm"
+              title="{{ 'Bigger' | translate}}">
+            <i class="fa fa-search-plus"></i>
+          </a>
+          <span ng-class="{ 'notNull': scaleLevel != 0 }">{{ scaleLevel }}</span>
+          &nbsp;
+          <a ng-click="controlProjector('scroll', 'down')"
+              class="btn btn-default btn-sm"
+              title="{{ 'Scroll up' | translate}}">
+            <i class="fa fa-arrow-up"></i>
+          </a>
+          <a ng-click="controlProjector('scroll', 'up')"
+              class="btn btn-default btn-sm"
+              title="{{ 'Scroll down' | translate}}">
+            <i class="fa fa-arrow-down"></i>
+          </a>
+          <a ng-click="controlProjector('scroll', 'reset')"
+              class="btn btn-default btn-sm"
+              title="{{ 'Reset scrolling' | translate}}">
+            <i class="fa fa-undo"></i>
+          </a>
+          <span ng-class="{ 'notNull': scrollLevel != 0 }">{{ scrollLevel }}</span>
+        </p>
       </div>
     </div>
-    <!-- Add message button -->
-    <a ng-click="addMessage()"
-        class="btn btn-default btn-sm"
-        title="{{ 'Add message' | translate}}">
-      <i class="fa fa-plus"></i> <translate>Add new message</translate>
-    </a>
-  </div>
+
+    <!-- countdowns -->
+    <div class="section" os-perms-lite="core.can_manage_projector">
+      <a href="#" ng-click="isCountdowns = !isCountdowns">
+        <i class="fa toggle-icon" ng-class="isCountdowns ? 'fa-angle-up' : 'fa-angle-down'"></i>
+        <h4 translate>Countdowns</h4>
+      </a>
+      <div uib-collapse="!isCountdowns">
+        <div ng-repeat="countdown in countdowns | orderBy: 'index'" id="{{countdown.uuid}}"
+            class="countdown panel panel-default">
+          <div class="panel-heading">
+            <span ng-if="countdown.description">{{ countdown.description }}</span>
+            <span ng-if="!countdown.description">Countdown {{ countdown.index +1 }}</span>
+            <!-- remove countdown button -->
+            <button type="button" class="close"
+                ng-click="removeCountdown(countdown)"
+                title="{{ 'Remove countdown' | translate}}">
+                <i class="fa fa-times"></i>
+            </button>
+            <!-- edit countdown button -->
+            <button ng-show="countdown.status=='stop'"
+                type="button" class="close editicon"
+                ng-click="editCountdownFlag=true;"
+                title="{{ 'Edit countdown' | translate}}">
+                <i class="fa fa-pencil"></i>
+            </button>
+          </div>
+          <div class="panel-body"
+              ng-class="{ 'projected': countdown.visible }">
+            <!-- project countdown button -->
+            <a class="btn btn-default btn-sm"
+                ng-model="countdown.visible"
+                ng-click="showCountdown(countdown)"
+                ng-class="{ 'btn-primary': countdown.visible }"
+                title="{{ 'Project countdown' | translate }}">
+              <i class="fa fa-video-camera"></i>
+            </a>
+            &nbsp;&nbsp;
+            <!-- countdown controls -->
+            <a class="btn btn-default vcenter"
+                ng-click="resetCountdown(countdown)"
+                ng-class="{ 'disabled': countdown.status == 'stop' && countdown.default == countdown.countdown_time }"
+                title="{{ 'Reset countdown' | translate}}">
+              <i class="fa fa-stop"></i>
+            </a>
+            <a ng-if="countdown.status=='stop'" class="btn btn-default vcenter"
+                ng-click="startCountdown(countdown)"
+                title="{{ 'Start' | translate}}">
+              <i  class="fa fa-play"></i>
+              <i ng-if="countdown.status=='running'" class="fa fa-pause"></i>
+            </a>
+            <a ng-if="countdown.status=='running'" class="btn btn-default vcenter"
+                ng-click="stopCountdown(countdown)"
+                title="{{ 'Pause' | translate}}">
+              <i  class="fa fa-pause"></i>
+            </a>
+            <span ng-if="!editTime" class="countdown_timer vcenter"
+                  ng-class="{ 'negative': countdown.seconds < 0 }">
+                {{ countdown.seconds | osSecondsToTime }}
+            </span>
+            <!-- edit countdown form -->
+            <form ng-show="editCountdownFlag" ng-submit="editCountdown(countdown)">
+              <div class="form-group">
+                <label translate>Description</label>
+                <input ng-model="countdown.description" type="text" class="form-control input-sm">
+              </div>
+              <div class="form-group">
+                <label translate>Start time</label>
+                <input ng-model="countdown.default" type="number" class="form-control input-sm">
+              </div>
+              <button type="submit"
+                  title="{{ 'Save' | translate}}"
+                  class="btn btn-sm btn-primary">
+                <i class="fa fa-check"></i>
+              </button>
+              <button ng-click="editCountdownFlag=false;"
+                  title="{{ 'Cancel' | translate}}"
+                  class="btn btn-default btn-sm">
+                <i class="fa fa-times"></i>
+              </button>
+            </form>
+          </div>
+        </div>
+        <!-- Add countdown button -->
+        <a ng-click="addCountdown()"
+            class="btn btn-default btn-sm"
+            title="{{ 'Add countdown' | translate}}">
+          <i class="fa fa-plus"></i> <translate>Add new countdown</translate>
+        </a>
+      </div>
+    </div>
+
+
+    <!-- messages -->
+    <div class="section" os-perms="core.can_manage_projector">
+      <a href="#" ng-click="isMessages = !isMessages">
+        <i class="fa toggle-icon" ng-class="isMessages ? 'fa-angle-up' : 'fa-angle-down'"></i>
+        <h4 translate>Messages</h4>
+      </a>
+      <div uib-collapse="!isMessages">
+        <div ng-repeat="message in messages | orderBy: 'index'" id="{{message.uuid}}" class="message panel panel-default">
+          <div class="panel-body"
+              ng-class="{ 'projected': message.visible }">
+            <!-- project message button -->
+            <a class="btn btn-default btn-sm"
+                ng-model="message.visible"
+                ng-click="showMessage(message)"
+                ng-class="{ 'btn-primary': message.visible }"
+                title="{{ 'Project message' | translate }}">
+              <i class="fa fa-video-camera"></i>
+            </a>
+            &nbsp;&nbsp;
+            {{ message.message }}
+            <!-- remove message button -->
+            <button type="button" class="close"
+                ng-click="removeMessage(message)"
+                title="{{ 'Remove message' | translate}}">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" class="close editicon"
+                ng-click="editMessageFlag=true;"
+                title="{{ 'Edit message' | translate}}">
+                <i class="fa fa-pencil"></i>
+            </button>
+            <div ng-if="editMessageFlag" class="input-group">
+              <input ng-model="message.message" type="text" class="form-control input-sm">
+              <a ng-click="editMessage(message)"
+                  title="{{ 'Save' | translate}}"
+                 class="btn btn-sm btn-primary input-group-addon">
+                <i class="fa fa-check"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+        <!-- Add message button -->
+        <a ng-click="addMessage()"
+            class="btn btn-default btn-sm"
+            title="{{ 'Add message' | translate}}">
+          <i class="fa fa-plus"></i> <translate>Add new message</translate>
+        </a>
+      </div>
+    </div>
+  </div><!-- end div ProjectorControlCtrl -->
+
 </div>
diff --git a/openslides/core/static/templates/core/tag-form.html b/openslides/core/static/templates/core/tag-form.html
index aabbd5afc..36d46b227 100644
--- a/openslides/core/static/templates/core/tag-form.html
+++ b/openslides/core/static/templates/core/tag-form.html
@@ -1,13 +1,17 @@
-<h1 ng-if="tag.id" translate>Edit tag</h1>
-<h1 ng-if="!tag.id" translate>New tag</h1>
-
-<div id="submenu">
-  <a ui-sref="core.tag.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="core.tag.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+    </div>
+    <h1 ng-if="tag.id" translate>Edit tag</h1>
+    <h1 ng-if="!tag.id" translate>New tag</h1>
+  </div>
 </div>
 
+<div class="details">
 <form name="tagForm">
   <div class="form-group">
     <label for="inputName" translate>Name</label>
@@ -21,3 +25,4 @@
     Cancel
   </button>
 </form>
+</div>
diff --git a/openslides/core/static/templates/core/tag-list.html b/openslides/core/static/templates/core/tag-list.html
index f6520d759..009c75e8c 100644
--- a/openslides/core/static/templates/core/tag-list.html
+++ b/openslides/core/static/templates/core/tag-list.html
@@ -1,44 +1,43 @@
-<h1 translate>Tags</h1>
-
-<div id="submenu">
-  <a ui-sref="core.tag.create" os-perms="core.can_manage_tags" class="btn btn-primary btn-sm">
-    <i class="fa fa-plus fa-lg"></i>
-    <translate>New</translate>
-  </a>
-</div>
-
-<div class="row form-group">
-  <div class="col-sm-8"></div>
-  <div class="col-sm-4">
-    <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-        placeholder="{{ 'Filter' | translate}}">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="core.tag.create" os-perms="core.can_manage_tags" class="btn btn-primary btn-sm">
+        <i class="fa fa-plus fa-lg"></i>
+        <translate>New</translate>
+      </a>
+    </div>
+    <h1 translate>Tags</h1>
   </div>
 </div>
 
-<table class="table table-striped table-bordered table-hover">
-  <thead>
-    <tr>
-      <th ng-click="toggleSort('name')" class="sortable">
-        <translate>Name</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'name' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th os-perms="core.can_manage_tags" class="minimum">
-        <translate>Actions</translate>
-  <tbody>
-    <tr ng-repeat="tag in tags | filter: filter.search |
-        orderBy: sortColumn:reverse">
-      <td>{{ tag.name }}
-      <td os-perms="core.can_manage_tags" class="nobr">
-        <!-- edit -->
-        <a ui-sref="core.tag.detail.update({id: tag.id })"
-            class="btn btn-default btn-sm"
-            title="{{ 'Edit' | translate}}">
-          <i class="fa fa-pencil"></i>
-        </a>
-        <!-- delete -->
-        <a ng-click="delete(tag)"class="btn btn-danger btn-sm"
-            title="{{ 'Delete' | translate }}">
-          <i class="fa fa-trash-o"></i>
-        </a>
-</table>
+<div class="details">
+  <div class="row form-group">
+    <div class="col-sm-8"></div>
+    <div class="col-sm-4">
+      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+          placeholder="{{ 'Filter' | translate}}">
+    </div>
+  </div>
+
+  <table os-perms="core.can_manage_tags" class="table table-striped table-bordered table-hover">
+    <thead>
+      <tr>
+        <th ng-click="toggleSort('name')" class="sortable">
+          <translate>Name</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'name' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+    <tbody>
+      <tr ng-repeat="tag in tags | filter: filter.search |
+          orderBy: sortColumn:reverse">
+        <td ng-mouseover="tag.hover=true" ng-mouseleave="tag.hover=false">
+          <strong>{{ tag.name }}</strong>
+          <div class="hoverActions" ng-class="{'hiddenDiv': !tag.hover}">
+            <a ui-sref="core.tag.detail.update({id: tag.id })" translate>Edit</a> |
+            <!-- TODO: translate confirm message -->
+            <a href="" class="text-danger"
+              ng-bootbox-confirm="Are you sure you want to delete <b>{{ tag.name }}</b>?"
+              ng-bootbox-confirm-action="delete(tag)" translate>Delete</a>
+          </div>
+  </table>
+</div>
diff --git a/openslides/core/static/templates/dashboard.html b/openslides/core/static/templates/dashboard.html
index f396246b9..249084720 100644
--- a/openslides/core/static/templates/dashboard.html
+++ b/openslides/core/static/templates/dashboard.html
@@ -1,3 +1,9 @@
-<h1>{{ config('projector_welcome_title') }}</h1>
+<div class="header">
+  <div class="title">
+    <h1>{{ config('projector_welcome_title') }}</h1>
+  </div>
+</div>
 
-{{ config('projector_welcome_text') }}
+<div class="details">
+  {{ config('projector_welcome_text') }}
+</div>
diff --git a/openslides/core/static/templates/index.html b/openslides/core/static/templates/index.html
index 62d4be574..c8c43a6cd 100644
--- a/openslides/core/static/templates/index.html
+++ b/openslides/core/static/templates/index.html
@@ -5,29 +5,33 @@
 <base href="/">
 <title>OpenSlides</title>
 <meta name="description" content="">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
 <link rel="stylesheet" href="static/css/openslides-libs.css">
 <link rel="stylesheet" href="static/css/app.css">
+<link rel="icon" href="/static/img/favicon.png">
 <script src="static/js/openslides-libs.js"></script>
 <script src="static/ckeditor/ckeditor.js"></script>
+<div id="wrapper">
 
-<!-- Navbar -->
-<nav id="header" class="navbar navbar-inverse">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <a ui-sref="dashboard" class="navbar-brand">
-        <img id="logo" src="/static/img/logo.png" alt="OpenSlides" />
+<!-- Header -->
+<div id="header">
+  <div class="containerOS">
+    <!-- Logo -->
+    <div class="title">
+      <a ui-sref="dashboard">
+        <img src="/static/img/openslides-logo-dark.png" alt="Logo" height="35">
       </a>
-      <span class="navbar-text optional">{{ config('general_event_name') }}</span>
+      <!-- TODO: <span class="navbar-text optional">{{ config('general_event_name') }}</span>-->
     </div>
-    <div class="navbar-right" ng-controller="userMenu">
+
+    <!-- user specific header (chat, user settings / login, language)-->
+    <div class="user" ng-controller="userMenu">
       <div class="btn-group">
-        <!-- Logout / user setttings button -->
         <div ng-if="operator.isAuthenticated()">
 
           <!-- chatbox -->
           <div ng-controller="ChatMessageCtrl" os-perms="core.can_use_chat" class="inline">
-            <button ng-click="openChatbox()" class="btn btn-default">
+            <button ng-click="openChatbox()" class="btn btn-sm btn-default">
               <i class="fa fa-comment"></i>
               <translate>Chat</translate>
               <span ng-if="unreadMessages > 0 && chatboxIsCollapsed" class="badge">
@@ -60,7 +64,7 @@
 
           <!-- user settings / logout button -->
           <div class="btn-group" uib-dropdown>
-            <button type="button" class="btn btn-default" uib-dropdown-toggle>
+            <button type="button" class="btn btn-sm btn-default" uib-dropdown-toggle>
               <i class="fa fa-user"></i>
               <span class="optional-small">{{ operator.user.get_short_name() }}</span>
               <span class="caret"></span>
@@ -87,7 +91,7 @@
         </div>
         <!-- Login button -->
         <div ng-if="!operator.isAuthenticated()">
-          <button class="btn btn-default" ng-click="openLoginForm()">
+          <button class="btn btn-sm btn-default" ng-click="openLoginForm()">
             <i class="fa fa-sign-in"></i>
             <translate>Login</translate>
           </button>
@@ -96,11 +100,11 @@
 
       <!-- language switcher -->
       <div class="btn-group" ng-controller="LanguageCtrl" uib-dropdown>
-        <button class="btn btn-default" uib-dropdown-toggle>
+        <button class="btn btn-sm btn-default" uib-dropdown-toggle>
           <i class="fa fa-flag"></i>
           <span class="caret"></span>
         </button>
-        <ul class="uib-dropdown-menu uib-dropdown-menu-right" role="menu" aria-labelledby="single-button">
+        <ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="single-button">
           <li>
             <a href="" ng-click="switchLanguage('en')">
               <i class="fa fa-flag"></i>
@@ -118,45 +122,70 @@
             </a>
         </ul>
       </div>
+
     </div>
   </div>
-</nav>
+</div><!--end header-->
 
-<!-- Container -->
-<div id="container" class="container-fluid">
-  <div class="row">
-    <!-- Main menu -->
-    <div id="main-menu" class="col-md-2 leftmenu lefticon">
+<!-- Navbar -->
+<div id="nav">
+  <div class="containerOS">
+    <div class="navbar">
+      <div class="button"><a href="#"><i class="fa fa-bars"></i></a></div>
+      <!-- Main menu -->
       <ul ng-controller="MainMenuCtrl">
-        <li ng-repeat="element in elements">
+        <li ng-repeat="element in elements" ui-sref-active="active">
           <a ui-sref="{{ element.ui_sref }}">
-            <span class="ico"><i class="fa fa-{{ element.img_class }} fa-lg"></i></span>
-            <span class="text" translate>{{ element.title }}</span>
+            <i class="fa fa-{{ element.img_class }}"></i>
+            <translate>{{ element.title }}</translate>
           </a>
       </ul>
-    </div><!--/#main-menu-->
-    <!-- Content -->
-    <div id="content" class="col-md-7">
-      <div class="row">
-        <div class="col-md-12">
-          <div ui-view></div>
+    </div>
+   </div>
+</div><!--end nav-->
+
+
+<!-- Content -->
+<div id="content" ng-controller="ProjectorSidebarCtrl">
+  <div class="containerOS">
+    <div class="col1" ng-class="isProjectorSidebar ? 'min' : 'max'">
+        <!-- dynamic views -->
+        <div ui-view></div>
+        <!-- footer -->
+        <div id="footer">
+          &copy; Copyright by <a href="http://www.openslides.org" target="_blank">OpenSlides</a> |
+          <a ui-sref="version">Version</a>
+        </div><!--end footer-->
+    </div>
+    <div class="col2" os-perms="core.can_see_projector"
+        ng-class="isProjectorSidebar ? 'max' : 'min'">
+      <!-- sidebar maximized -->
+      <div class="projector_full" ng-if="isProjectorSidebar">
+        <div class="title" ng-click="showProjectorSidebar(false)">
+          <div class="name">
+            <i class="fa fa-caret-square-o-right"></i>
+            <translate>Projector</translate>
+          </div>
+          <div class="icon">
+            <i class="fa fa-video-camera"></i>
+          </div>
         </div>
-      </div>
-    </div><!--/#content-->
-    <div class="col-sm-3" os-perms="core.can_see_projector">
-      <div class="well">
         <div ng-include src="'static/templates/core/projector-controls.html'"></div>
       </div>
-    </div>
-  </div><!--/.row-->
+      <!-- sidebar minimized -->
+      <div class="projector_min" ng-if="!isProjectorSidebar">
+        <div class="icon">
+          <a href="" ng-click="showProjectorSidebar(true)">
+            <i class="fa fa-video-camera"></i>
+          </a>
+        </div>
+      </div>
+    </div><!--end col2-->
+
+  </div><!--end content-container--> 
+</div><!--end content--> 
+
+</div><!--end wrapper-->
 
-  <hr>
-  <footer>
-    <small>
-      &copy; Copyright by <a href="http://www.openslides.org" target="_blank">OpenSlides</a> |
-      <a ui-sref="version">Version</a>
-    </small>
-  </footer>
-</div><!--/#container-->
 
 <script src="/angular_js/site/"></script>
diff --git a/openslides/core/static/templates/projector.html b/openslides/core/static/templates/projector.html
index 5d8993c0f..14e39e7de 100644
--- a/openslides/core/static/templates/projector.html
+++ b/openslides/core/static/templates/projector.html
@@ -31,7 +31,7 @@
 
 
 <div id="header">
-  <img id="logo" src="/static/img/logo.png" alt="OpenSlides" />
+  <img id="logo" src="/static/img/logo-projector.png" alt="OpenSlides" />
   <div id="eventdata">
     <div class="title">
       {{ config('general_event_name') }}
diff --git a/openslides/core/static/templates/version.html b/openslides/core/static/templates/version.html
index 987c0b67d..c31cc9356 100644
--- a/openslides/core/static/templates/version.html
+++ b/openslides/core/static/templates/version.html
@@ -1,12 +1,17 @@
-<h1 translate>Version</h1>
-
-<p>OpenSlides Version {{ core_version }}
-
-<div ng-show="plugins.length">
-  <p translate>Installed plugins:</p>
-  <ol>
-    <li ng-repeat="plugin in plugins">
-      {{ plugin.verbose_name }}: {{ plugin.version }}
-  </ol>
+<div class="header">
+  <div class="title">
+    <h1 translate>Version</h1>
+  </div>
 </div>
 
+<div class="details">
+  <p class="lead">OpenSlides {{ core_version }}
+
+  <div ng-show="plugins.length">
+    <p translate>Installed plugins:</p>
+    <ol>
+      <li ng-repeat="plugin in plugins">
+        {{ plugin.verbose_name }}: {{ plugin.version }}
+    </ol>
+  </div>
+</div>
diff --git a/openslides/mediafiles/static/templates/mediafiles/mediafile-form.html b/openslides/mediafiles/static/templates/mediafiles/mediafile-form.html
index 16a785f14..dd39c8934 100644
--- a/openslides/mediafiles/static/templates/mediafiles/mediafile-form.html
+++ b/openslides/mediafiles/static/templates/mediafiles/mediafile-form.html
@@ -1,38 +1,43 @@
-<h1 ng-if="mediafile.id" translate>Edit file</h1>
-<h1 ng-if="!mediafile.id" translate>New file</h1>
-
-<div id="submenu">
-  <a ui-sref="mediafiles.mediafile.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="mediafiles.mediafile.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+    </div>
+    <h1 ng-if="mediafile.id" translate>Edit file</h1>
+    <h1 ng-if="!mediafile.id" translate>New file</h1>
+  </div>
 </div>
 
-<form name="mediafileForm">
+<div class="details">
+  <form name="mediafileForm">
 
-  <div class="form-group">
-    <div ng-if="mediafile.id">
-      <span translate>Current value: </span>{{ mediafile.filename }}
+    <div class="form-group">
+      <div ng-if="mediafile.id">
+        <span translate>Current value: </span>{{ mediafile.filename }}
+      </div>
+      <input type="file" ngf-select ng-model="mediafile.newFile" required/>
     </div>
-    <input type="file" ngf-select ng-model="mediafile.newFile" required/>
-  </div>
 
-  <div class="form-group">
-    <label for="inputTitle" translate>Title</label>
-    <input type="text" ng-model="mediafile.title" class="form-control" name="inputTitle">
-  </div>
+    <div class="form-group">
+      <label for="inputTitle" translate>Title</label>
+      <input type="text" ng-model="mediafile.title" class="form-control" name="inputTitle">
+    </div>
 
-  <span ng-show="mediafile.mediafile.result">Upload Successful</span>
-  <span class="err" ng-show="errorMsg">{{ errorMsg }}</span>
+    <span ng-show="mediafile.mediafile.result">Upload Successful</span>
+    <span class="err" ng-show="errorMsg">{{ errorMsg }}</span>
 
-  <i ng-show="mediafile.file.$error.required">*required</i><br>
-  <i ng-show="mediafile.file.$error.maxSize">File too large
-    {{ picFile.size / 1000000|number:1}}MB: max {{ mediafile.mediafile.$errorParam}}</i>
+    <i ng-show="mediafile.file.$error.required">*required</i><br>
+    <i ng-show="mediafile.file.$error.maxSize">File too large
+      {{ picFile.size / 1000000|number:1}}MB: max {{ mediafile.mediafile.$errorParam}}</i>
 
-  <button type="submit" ng-click="save(mediafile)" class="btn btn-primary" translate>
-    Save
-  </button>
-  <button ui-sref="mediafiles.mediafile.list" class="btn btn-default" translate>
-    Cancel
-  </button>
-</form>
+    <button type="submit" ng-click="save(mediafile)" class="btn btn-primary" translate>
+      Save
+    </button>
+    <button ui-sref="mediafiles.mediafile.list" class="btn btn-default" translate>
+      Cancel
+    </button>
+  </form>
+</div>
diff --git a/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html b/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html
index 34564e4b3..df631deb5 100644
--- a/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html
+++ b/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html
@@ -1,78 +1,82 @@
-<h1 translate>Files</h1>
-
-<div id="submenu">
-  <a ui-sref="mediafiles.mediafile.create" os-perms="mediafiles.can_upload" class="btn btn-primary btn-sm">
-    <i class="fa fa-plus fa-lg"></i>
-    <translate>New</translate>
-  </a>
-</div>
-
-<div class="row form-group">
-  <div class="col-sm-8"></div>
-  <div class="col-sm-4">
-    <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-        placeholder="{{ 'Filter' | translate }}">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="mediafiles.mediafile.create" os-perms="mediafiles.can_upload" class="btn btn-primary btn-sm">
+        <i class="fa fa-plus fa-lg"></i>
+        <translate>New</translate>
+      </a>
+    </div>
+    <h1 translate>Files</h1>
   </div>
 </div>
 
-<table class="table table-striped table-bordered table-hover">
-  <thead>
-    <tr>
-      <th ng-click="toggleSort('title_or_filename')" class="sortable">
-        <translate>Title</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'title_or_filename' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('filetype')" class="sortable">
-        <translate>Filetype</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'filetype' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('filesize')" class="sortable">
-        <translate>Filesize</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'filesize' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('timestamp')" class="sortable">
-        <translate>Upload time</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'timestamp' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('uploader')" class="sortable">
-        <translate>Uploaded by</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'uploader' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th os-perms="mediafiles.can_manage core.can_manage_projector" class="minimum">
-        <translate>Actions</translate>
-      </th>
-    </tr>
-  <tbody>
-    <tr ng-repeat="mediafile in mediafiles | filter: filter.search |
-        orderBy: sortColumn:reverse">
-      <td><a ng-href="/media/{{ mediafile.mediafile.name }}" target="_self">{{ mediafile.title_or_filename }}</a>
-      <td class="optional">{{ mediafile.mediafile.type }}
-      <td>{{ mediafile.filesize }}
-      <td>{{ mediafile.timestamp }}
-      <td>{{ mediafile.uploader }}
-      <td os-perms="mediafiles.can_manage core.can_manage_projector" class="nobr">
-        <!-- projector, TODO: add link to activate slide -->
-        <a href="#TODO" ng-if="mediafile.is_presentable" os-perms-lite="core.can_manage_projector"
-            class="btn btn-default btn-sm"
-            title="{{ 'Show' | translate }}">
-          <i class="fa fa-video-camera"></i>
-        </a>
-        <!-- edit -->
-        <a ui-sref="mediafiles.mediafile.detail.update({id: mediafile.id })" os-perms="mediafiles.can_manage"
-            class="btn btn-default btn-sm"
-            title="{{ 'Edit' | translate }}">
-          <i class="fa fa-pencil"></i>
-        </a>
-        <!-- delete -->
-        <a ng-click="delete(mediafile)" os-perms="mediafiles.can_manage" class="btn btn-danger btn-sm"
-            title="{{ 'Delete' | translate }}">
-          <i class="fa fa-trash-o"></i>
-        </a>
-    </tr>
-  </tbody>
-</table>
+<div class="details">
+  <div class="row form-group">
+    <div class="col-sm-8"></div>
+    <div class="col-sm-4">
+      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+          placeholder="{{ 'Filter' | translate }}">
+    </div>
+  </div>
+  <table class="table table-striped table-bordered table-hover">
+    <thead>
+      <tr>
+        <th ng-click="toggleSort('title_or_filename')" class="sortable">
+          <translate>Title</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'title_or_filename' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('filetype')" class="sortable">
+          <translate>Filetype</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'filetype' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('filesize')" class="sortable">
+          <translate>Filesize</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'filesize' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('timestamp')" class="sortable">
+          <translate>Upload time</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'timestamp' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('uploader')" class="sortable">
+          <translate>Uploaded by</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'uploader' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th os-perms="mediafiles.can_manage core.can_manage_projector">
+          <translate>Actions</translate>
+        </th>
+      </tr>
+    <tbody>
+      <tr ng-repeat="mediafile in mediafiles | filter: filter.search |
+          orderBy: sortColumn:reverse">
+        <td><a ng-href="/media/{{ mediafile.mediafile.name }}" target="_self">{{ mediafile.title_or_filename }}</a>
+        <td class="optional">{{ mediafile.mediafile.type }}
+        <td>{{ mediafile.filesize }}
+        <td>{{ mediafile.timestamp }}
+        <td>{{ mediafile.uploader }}
+        <td os-perms="mediafiles.can_manage core.can_manage_projector" class="nobr">
+          <!-- projector, TODO: add link to activate slide -->
+          <a href="#TODO" ng-if="mediafile.is_presentable" os-perms-lite="core.can_manage_projector"
+              class="btn btn-default btn-sm"
+              title="{{ 'Show' | translate }}">
+            <i class="fa fa-video-camera"></i>
+          </a>
+          <!-- edit -->
+          <a ui-sref="mediafiles.mediafile.detail.update({id: mediafile.id })" os-perms="mediafiles.can_manage"
+              class="btn btn-default btn-sm"
+              title="{{ 'Edit' | translate }}">
+            <i class="fa fa-pencil"></i>
+          </a>
+          <!-- delete -->
+          <a ng-click="delete(mediafile)" os-perms="mediafiles.can_manage" class="btn btn-danger btn-sm"
+              title="{{ 'Delete' | translate }}">
+            <i class="fa fa-trash-o"></i>
+          </a>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/openslides/motions/static/templates/motions/category-detail.html b/openslides/motions/static/templates/motions/category-detail.html
index af1822def..005855cf3 100644
--- a/openslides/motions/static/templates/motions/category-detail.html
+++ b/openslides/motions/static/templates/motions/category-detail.html
@@ -1,12 +1,16 @@
-<h1>{{ category.name }}</h1>
-
-<div id="submenu">
-  <a ui-sref="motions.category.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="motions.category.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+    </div>
+    <h1>{{ category.name }}</h1>
+  </div>
 </div>
 
-
-<b translate>Prefix:</b>
-{{ category.prefix }}
+<div class="details">
+  <strong translate>Prefix:</strong>
+  {{ category.prefix }}
+</div>
diff --git a/openslides/motions/static/templates/motions/category-form.html b/openslides/motions/static/templates/motions/category-form.html
index 411216ccd..4359fc36f 100644
--- a/openslides/motions/static/templates/motions/category-form.html
+++ b/openslides/motions/static/templates/motions/category-form.html
@@ -1,27 +1,32 @@
-<h1 ng-if="category.id" translate>Edit category</h1>
-<h1 ng-if="!category.id" translate>New category</h1>
-
-<div id="submenu">
-  <a ui-sref="motions.category.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="motions.category.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+    </div>
+    <h1 ng-if="category.id" translate>Edit category</h1>
+    <h1 ng-if="!category.id" translate>New category</h1>
+  </div>
 </div>
 
-<form name="groupForm">
-  <div class="form-group">
-    <label for="inputPrefix" translate>Prefix</label>
-    <input type="text" ng-model="category.prefix" class="form-control" name="inputPrefix">
-  </div>
-  <div class="form-group">
-    <label for="inputName" translate>Name</label>
-    <input type="text" ng-model="category.name" class="form-control" name="inputName" ng-required="true">
-  </div>
+<div class="details">
+  <form name="groupForm">
+    <div class="form-group">
+      <label for="inputPrefix" translate>Prefix</label>
+      <input type="text" ng-model="category.prefix" class="form-control" name="inputPrefix">
+    </div>
+    <div class="form-group">
+      <label for="inputName" translate>Name</label>
+      <input type="text" ng-model="category.name" class="form-control" name="inputName" ng-required="true">
+    </div>
 
-  <button type="submit" ng-click="save(category)" class="btn btn-primary" translate>
-    Save
-  </button>
-  <button ui-sref="motions.category.list" class="btn btn-default" translate>
-    Cancel
-  </button>
-</form>
+    <button type="submit" ng-click="save(category)" class="btn btn-primary" translate>
+      Save
+    </button>
+    <button ui-sref="motions.category.list" class="btn btn-default" translate>
+      Cancel
+    </button>
+  </form>
+</div>
diff --git a/openslides/motions/static/templates/motions/category-list.html b/openslides/motions/static/templates/motions/category-list.html
index d446bb0cf..ad9234361 100644
--- a/openslides/motions/static/templates/motions/category-list.html
+++ b/openslides/motions/static/templates/motions/category-list.html
@@ -1,56 +1,61 @@
-<h1 translate>Categories</h1>
-
-<div id="submenu">
-  <a ui-sref="motions.category.create" os-perms="motions.can_manage" class="btn btn-primary btn-sm">
-    <i class="fa fa-plus fa-lg"></i>
-    <translate>New</translate>
-  </a>
-  <a ui-sref="motions.motion.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
-</div>
-
-<div class="row form-group">
-  <div class="col-sm-4 right">
-    <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-        placeholder="{{ 'Filter' | translate }}">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="motions.category.create" os-perms="motions.can_manage" class="btn btn-primary btn-sm">
+        <i class="fa fa-plus fa-lg"></i>
+        <translate>New</translate>
+      </a>
+      <a ui-sref="motions.motion.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+    </div>
+    <h1 translate>Categories</h1>
   </div>
 </div>
 
-<table class="table table-striped table-bordered table-hover">
-  <thead>
-    <tr>
-      <th ng-click="sortby='prefix';reverse=!reverse">
-        <translate>Prefix</translate>
-        <i class="fa" ng-show="sortby == 'prefix'"
-            ng-class="reverse ? 'fa-caret-down' : 'fa-caret-up'"></i>
-      <th ng-click="sortby='name';reverse=!reverse">
-        <translate>Name</translate>
-        <i class="fa" ng-show="sortby == 'name'"
-            ng-class="reverse ? 'fa-caret-down' : 'fa-caret-up'"></i>
-      <th os-perms="motions.can_manage core.can_manage_projector" class="mini_width" translate>Actions</th>
-  <tbody>
-    <tr ng-repeat="category in categories | filter: filter.search | orderBy:sortby:reverse">
-      <td>{{ category.prefix }}
-      <td><a ui-sref="motions.category.detail({id: category.id})">{{ category.name }}</a>
-      <td os-perms="motions.can_manage core.can_manage_projector" class="nobr">
-        <!-- projector, TODO: add link to activate slidea-->
-        <a href="#TODO" os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
-            title="{{ 'Show' | translate }}">
-          <i class="fa fa-video-camera"></i>
-        </a>
-        <!-- edit -->
-        <a ui-sref="motions.category.detail.update({id: category.id})" os-perms="motions.can_manage"
-            class="btn btn-default btn-sm"
-            title="{{ 'Edit' | translate }}">
-          <i class="fa fa-pencil"></i>
-        </a>
-        <!-- delete -->
-        <a os-perms="motions.can_manage" class="btn btn-danger btn-sm"
-            ng-bootbox-confirm="Are you sure you want to delete <b>{{ category.name }}</b>?"
-            ng-bootbox-confirm-action="delete(category)"
-            title="{{ 'Delete' | translate }}">
-          <i class="fa fa-trash-o"></i>
-        </a>
-</table>
+<div class="details">
+  <div class="row form-group">
+    <div class="col-sm-4 pull-right">
+      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+          placeholder="{{ 'Filter' | translate }}">
+    </div>
+  </div>
+
+  <table class="table table-striped table-bordered table-hover">
+    <thead>
+      <tr>
+        <th ng-click="sortby='prefix';reverse=!reverse">
+          <translate>Prefix</translate>
+          <i class="fa" ng-show="sortby == 'prefix'"
+              ng-class="reverse ? 'fa-caret-down' : 'fa-caret-up'"></i>
+        <th ng-click="sortby='name';reverse=!reverse">
+          <translate>Name</translate>
+          <i class="fa" ng-show="sortby == 'name'"
+              ng-class="reverse ? 'fa-caret-down' : 'fa-caret-up'"></i>
+        <th os-perms="motions.can_manage core.can_manage_projector" class="mini_width" translate>Actions</th>
+    <tbody>
+      <tr ng-repeat="category in categories | filter: filter.search | orderBy:sortby:reverse">
+        <td>{{ category.prefix }}
+        <td><a ui-sref="motions.category.detail({id: category.id})">{{ category.name }}</a>
+        <td os-perms="motions.can_manage core.can_manage_projector" class="nobr">
+          <!-- projector, TODO: add link to activate slidea-->
+          <a href="#TODO" os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
+              title="{{ 'Show' | translate }}">
+            <i class="fa fa-video-camera"></i>
+          </a>
+          <!-- edit -->
+          <a ui-sref="motions.category.detail.update({id: category.id})" os-perms="motions.can_manage"
+              class="btn btn-default btn-sm"
+              title="{{ 'Edit' | translate }}">
+            <i class="fa fa-pencil"></i>
+          </a>
+          <!-- delete -->
+          <a os-perms="motions.can_manage" class="btn btn-danger btn-sm"
+              ng-bootbox-confirm="Are you sure you want to delete <b>{{ category.name }}</b>?"
+              ng-bootbox-confirm-action="delete(category)"
+              title="{{ 'Delete' | translate }}">
+            <i class="fa fa-trash-o"></i>
+          </a>
+  </table>
+</div>
diff --git a/openslides/motions/static/templates/motions/motion-detail.html b/openslides/motions/static/templates/motions/motion-detail.html
index 8f6393591..9f796c0ab 100644
--- a/openslides/motions/static/templates/motions/motion-detail.html
+++ b/openslides/motions/static/templates/motions/motion-detail.html
@@ -1,251 +1,262 @@
-<h1>
-  {{ motion.getTitle() }}
-  <small>
-    <translate>Motion</translate> {{ motion.identifier }}
-    <span ng-if="motion.versions.length > 1" >| Version {{ motion.active_version }}</span>
-  </small>
-</h1>
-
-<!-- TODO: show list of speakers controls for { motion.agenda_item } -->
-
-<div id="submenu">
-  <a ui-sref="motions.motion.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
-  <a ui-sref="motions_single_pdf({pk: motion.id})" target="_blank" class="btn btn-default btn-sm">
-    <i class="fa fa-file-pdf-o fa-lg"></i>
-    <translate>PDF</translate>
-  </a>
-  <!-- List of speakers -->
-  <a ui-sref="agenda.item.detail({id: motion.agenda_item_id})" class="btn btn-sm btn-default">
-    <i class="fa fa-microphone fa-lg"></i>
-    <translate>List of speakers</translate>
-  </a>
-  <!-- project -->
-  <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
-      ng-class="{ 'btn-primary': motion.isProjected() }"
-      ng-click="motion.project()"
-      title="{{ 'Project motion' | translate }}">
-    <i class="fa fa-video-camera"></i>
-  </a>
-  <!-- edit -->
-  <a ng-if="motion.isAllowed('update')" ng-click="editDialog(motion)"
-      class="btn btn-default btn-sm"
-      title="{{ 'Edit' | translate}}">
-    <i class="fa fa-pencil"></i>
-  </a>
+<div class="header">
+  <div class="title">
+    <!-- TODO: show list of speakers controls for { motion.agenda_item } -->
+    <div class="submenu">
+      <a ui-sref="motions.motion.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+      <a ui-sref="motions_single_pdf({pk: motion.id})" target="_blank" class="btn btn-default btn-sm">
+        <i class="fa fa-file-pdf-o fa-lg"></i>
+        <translate>PDF</translate>
+      </a>
+      <!-- List of speakers -->
+      <a ui-sref="agenda.item.detail({id: motion.agenda_item_id})" class="btn btn-sm btn-default">
+        <i class="fa fa-microphone fa-lg"></i>
+        <translate>List of speakers</translate>
+      </a>
+      <!-- project -->
+      <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
+          ng-class="{ 'btn-primary': motion.isProjected() }"
+          ng-click="motion.project()"
+          title="{{ 'Project motion' | translate }}">
+        <i class="fa fa-video-camera"></i>
+      </a>
+      <!-- edit -->
+      <a ng-if="motion.isAllowed('update')" ui-sref="motions.motion.detail.update({id: motion.id })"
+          class="btn btn-default btn-sm"
+          title="{{ 'Edit' | translate}}">
+        <i class="fa fa-pencil"></i>
+      </a>
+    </div>
+    <h1>{{ motion.getTitle() }}</h1>
+    <h2>
+        <translate>Motion</translate> {{ motion.identifier }}
+        <span ng-if="motion.versions.length > 1" >| Version {{ motion.active_version }}</span>
+    </h2>
+  </div>
 </div>
 
-<div class="row">
-  <div class="col-sm-8">
-    <h3 translate>Text</h3>
-    <div class="white-space-pre-line" ng-bind-html="motion.getText()"></div>
+<div class="meta">
+  <i class="fa toggle-icon pointer" ng-click="isMeta = !isMeta"
+    ng-class="isMeta ? 'fa-angle-down' : 'fa-angle-up'"></i>
+  <div class="row" uib-collapse="isMeta">
+    <div class="col-sm-4">
+        <!-- submitters -->
+        <h3 translate>Submitters</h3>
+        <div ng-repeat="submitter in motion.submitters">
+          {{ submitter.get_full_name() }}<br>
+        </div>
 
-    <!-- reason -->
-    <div ng-if="motion.getReason() != ''">
-      <h3 translate>Reason</h3>
-      <div class="white-space-pre-line" ng-bind-html="motion.getReason()"></div>
-    </div>
-
-    <!-- attachments
-    TODO: make 'motion.attachments' useable and itteratable in template
-    <div ng-if="motion.attachments">
-      <h3 translate>Attachments</h3>
-    </div>
-    -->
-
-    <!-- log -->
-    <button type="button" class="btn btn-default spacer" ng-click="isCollapsed = !isCollapsed" translate>
-      Show log
-    </button>
-    <div uib-collapse="isCollapsed">
-      <div class="well well-sm">
-        <ul class="list-unstyled">
-          <li ng-repeat="message in motion.log_messages">
-            <small>{{ message.message }}</small>
-      </div>
-    </div>
-  </div>
-
-  <div class="col-sm-4">
-    <div class="well">
-      <!-- submitters -->
-      <h3 translate>Submitters</h3>
-      <div ng-repeat="submitter in motion.submitters">
-        {{ submitter.get_full_name() }}<br>
-      </div>
-
-      <!-- supporters -->
-      <div ng-if="config('motions_min_supporters') > 0">
-        <h3 translate>Supporters</h3>
-        <ol>
-          <li ng-repeat="supporters in motion.supporters">
-            {{ supporters.get_full_name() }}
-        </ol>
-        <!-- support button -->
-        <button ng-if="motion.isAllowed('support')" ng-click="support()" class="btn btn-default btn-sm">
-          <i class="fa fa-heart"></i>
-          <translate>Support motion</translate>
-        </button>
-        <!-- unsupport button -->
-        <button ng-if="motion.isAllowed('unsupport')" ng-click="unsupport()" class="btn btn-default btn-sm">
-          <i class="fa fa-heart-o"></i>
-          <translate>Unsupport motion</translate>
-        </button>
-      </div>
-
-      <h3 translate>State</h3>
-      <span class="label" ng-class="'label-'+motion.state.css_class">
-        {{ motion.state.name | translate }}
-      </span>
-      <div ng-if="motion.isAllowed('change_state')" class="spacer">
-        <div class="btn-group-vertical spacer" role="group">
-          <button ng-repeat="state in motion.state.getNextStates()" ng-click="update_state(state)"
-              class="btn btn-default btn-sm">
-            {{state.action_word}}
+        <!-- supporters -->
+        <div ng-if="config('motions_min_supporters') > 0">
+          <h3 translate>Supporters</h3>
+          <ol>
+            <li ng-repeat="supporters in motion.supporters">
+              {{ supporters.get_full_name() }}
+          </ol>
+          <!-- support button -->
+          <button ng-if="motion.isAllowed('support')" ng-click="support()" class="btn btn-default btn-sm">
+            <i class="fa fa-heart"></i>
+            <translate>Support motion</translate>
           </button>
-          <button ng-if="motion.isAllowed('reset_state')" ng-click="reset_state()"
-              class="btn btn-danger btn-xs">
-            <i class="fa fa-exclamation-triangle"></i>
-            <translate>Reset state</translate>
+          <!-- unsupport button -->
+          <button ng-if="motion.isAllowed('unsupport')" ng-click="unsupport()" class="btn btn-default btn-sm">
+            <i class="fa fa-heart-o"></i>
+            <translate>Unsupport motion</translate>
           </button>
         </div>
-      </div>
+    </div>
+    <div class="col-sm-4">
+        <!-- Category -->
+        <h3 translate>Category</h3>
+        {{ motion.category.name }}</a>
 
-      <h3 translate>Voting result</h3>
-      <ol class="slimlist">
-        <li ng-repeat="poll in motion.polls" class="spacer">
-          <translate>Vote</translate>
-          <button os-perms-lite="motions.can_manage" ng-click="poll.isEditMode=true;"
-              class="btn btn-default btn-xs">
-            <i class="fa fa-pencil"></i>
-          </button>
-          <button os-perms="motions.can_manage" ng-click="delete_poll(poll)"
-              class="btn btn-default btn-xs">
-            <i class="fa fa-times"></i>
-          </button>
-          <div ng-show="poll.isEditMode" class="spacer">
-            <form>
-              <p>
-                <translate>Special values</translate>:<br>
-                <span class="badge badge-success">-1</span> = <translate>majority</translate><br>
-                <span class="badge">-2</span> = <translate>undocumented</translate>
-              </p>
-              <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
-                {{alert.msg}}
-              </alert>
+        <!-- Tags -->
+        <h3 translate>Tags</h3>
+        <span ng-repeat="tag in motion.tags">
+          {{ tag.name }}{{$last ? '' : ', '}}
+        </span>
+
+        <!-- State -->
+        <h3 translate>State</h3>
+        <span class="label" ng-class="'label-'+motion.state.css_class">
+          {{ motion.state.name | translate }}
+        </span>
+        <div ng-if="motion.isAllowed('change_state')" class="spacer">
+          <div class="btn-group-vertical spacer" role="group">
+            <button ng-repeat="state in motion.state.getNextStates()" ng-click="update_state(state)"
+                class="btn btn-default btn-sm">
+              {{state.action_word}}
+            </button>
+            <button ng-if="motion.isAllowed('reset_state')" ng-click="reset_state()"
+                class="btn btn-danger btn-xs">
+              <i class="fa fa-exclamation-triangle"></i>
+              <translate>Reset state</translate>
+            </button>
+          </div>
+        </div>
+    </div>
+    <div class="col-sm-3">
+        <h3 translate>Voting result</h3>
+        <ol class="slimlist">
+          <li ng-repeat="poll in motion.polls" class="spacer">
+            <translate>Vote</translate>
+            <button os-perms-lite="motions.can_manage" ng-click="poll.isEditMode=true;"
+                class="btn btn-default btn-xs">
+              <i class="fa fa-pencil"></i>
+            </button>
+            <button os-perms="motions.can_manage" ng-click="delete_poll(poll)"
+                class="btn btn-default btn-xs">
+              <i class="fa fa-times"></i>
+            </button>
+            <div ng-show="poll.isEditMode" class="spacer">
+              <form>
+                <p>
+                  <translate>Special values</translate>:<br>
+                  <span class="badge badge-success">-1</span> = <translate>majority</translate><br>
+                  <span class="badge">-2</span> = <translate>undocumented</translate>
+                </p>
+                <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
+                  {{alert.msg}}
+                </alert>
+                <!-- yes -->
+                <div class="input-group col-sm-8 spacer">
+                  <div class="input-group-addon" title="{{ 'Yes' | translate }}"><i class="fa fa-thumbs-up"></i></div>
+                  <input type="number" ng-model="poll.yes" class="form-control input-sm" placeholder="{{ 'Yes' | translate }}">
+                </div>
+                <!-- no -->
+                <div class="input-group col-sm-8">
+                  <div class="input-group-addon" title="{{ 'No' | translate }}"><i class="fa fa-thumbs-down"></i></div>
+                  <input type="number" ng-model="poll.no" class="form-control input-sm" placeholder="{{ 'No' | translate }}">
+                </div>
+                <!-- abstain -->
+                <div class="input-group col-sm-8">
+                  <div class="input-group-addon" title="{{ 'Abstain' | translate }}"><b>&empty;</b></div>
+                  <input type="number" ng-model="poll.abstain" class="form-control input-sm" placeholder="{{ 'Abstain' | translate }}">
+                </div>
+                <!-- valid votes -->
+                <div class="input-group col-sm-8 spacer">
+                  <div class="input-group-addon" title="{{ 'Valid votes' | translate }}"><i class="fa fa-check"></i></div>
+                  <input type="number" ng-model="poll.votesvalid" class="form-control input-sm" placeholder="{{ 'Valid votes' | translate }}">
+                </div>
+                <!-- invalid votes -->
+                <div class="input-group col-sm-8">
+                  <div class="input-group-addon" title="{{ 'Invalid votes' | translate }}"><i class="fa fa-ban"></i></div>
+                  <input type="number" ng-model="poll.votesinvalid" class="form-control input-sm" placeholder="{{ 'Invalid votes' | translate }}">
+                </div>
+                <!-- votes cast -->
+                <div class="input-group col-sm-8 spacer">
+                  <div class="input-group-addon" title="{{ 'Votes cast' | translate }}"><b>&sum;</b></div>
+                  <input type="number" ng-model="poll.votescast" class="form-control input-sm" placeholder="{{ 'Votes cast' | translate }}">
+                </div>
+                <!-- buttons -->
+                <div class="spacer">
+                  <button type="submit" ng-click="update_poll(poll)" class="btn btn-primary" translate>
+                    Save
+                  </button>
+                  <button ng-click="poll.isEditMode=false;" class="btn btn-default" translate>
+                    Cancel
+                  </button>
+                </div>
+              </form>
+            </div>
+            <div ng-show="!poll.isEditMode && poll.yes >= -2" class="pollresults">
               <!-- yes -->
-              <div class="input-group col-sm-8 spacer">
-                <div class="input-group-addon" title="{{ 'Yes' | translate }}"><i class="fa fa-thumbs-up"></i></div>
-                <input type="number" ng-model="poll.yes" class="form-control input-sm" placeholder="{{ 'Yes' | translate }}">
+              <div class="result_label">
+                <i class="fa fa-thumbs-up"></i>
+                <translate>Yes</translate>:
               </div>
+              <div ng-if="poll.getYesPercent(true)">
+                <uib-progressbar value="poll.getYesPercent(true)" type="success"></uib-progressbar>
+              </div>
+              <div class="result_value">{{ poll.yes }} {{ poll.getYesPercent() }}</div>
               <!-- no -->
-              <div class="input-group col-sm-8">
-                <div class="input-group-addon" title="{{ 'No' | translate }}"><i class="fa fa-thumbs-down"></i></div>
-                <input type="number" ng-model="poll.no" class="form-control input-sm" placeholder="{{ 'No' | translate }}">
+              <div class="result_label">
+                <i class="fa fa-thumbs-down"></i>
+                <translate>No</translate>:
               </div>
+              <div ng-if="poll.getNoPercent(true)">
+                <uib-progressbar value="poll.getNoPercent(true)" type="danger"></uib-progressbar>
+              </div>
+              <div class="result_value">{{ poll.no }} {{ poll.getNoPercent() }}</div>
               <!-- abstain -->
-              <div class="input-group col-sm-8">
-                <div class="input-group-addon" title="{{ 'Abstain' | translate }}"><b>&empty;</b></div>
-                <input type="number" ng-model="poll.abstain" class="form-control input-sm" placeholder="{{ 'Abstain' | translate }}">
+              <div class="result_label">
+                <b>&empty;</b>
+                <translate>Abstain</translate>:
               </div>
+              <div ng-if="poll.getAbstainPercent(true)">
+                <uib-progressbar value="poll.getAbstainPercent(true)" type="warning"></uib-progressbar>
+              </div>
+              <div class="result_value">{{ poll.abstain }} {{ poll.getAbstainPercent() }}</div>
+              <hr class="smallhr" ng-if="poll.votesvalid || poll.votesinvalid">
               <!-- valid votes -->
-              <div class="input-group col-sm-8 spacer">
-                <div class="input-group-addon" title="{{ 'Valid votes' | translate }}"><i class="fa fa-check"></i></div>
-                <input type="number" ng-model="poll.votesvalid" class="form-control input-sm" placeholder="{{ 'Valid votes' | translate }}">
+              <div ng-if="poll.votesvalid">
+                <div class="result_label">
+                  <i class="fa fa-check"></i>
+                  <translate>Valid votes</translate>:
+                </div>
+                <div class="result_value">{{ poll.votesvalid }} {{ poll.getVotesValidPercent() }}</div>
               </div>
               <!-- invalid votes -->
-              <div class="input-group col-sm-8">
-                <div class="input-group-addon" title="{{ 'Invalid votes' | translate }}"><i class="fa fa-ban"></i></div>
-                <input type="number" ng-model="poll.votesinvalid" class="form-control input-sm" placeholder="{{ 'Invalid votes' | translate }}">
+              <div ng-if="poll.votesinvalid">
+                <div class="result_label">
+                  <i class="fa fa-ban"></i>
+                  <translate>Invalid votes</translate>:
+                </div>
+                <div class="result_value">{{ poll.votesinvalid }} {{ poll.getVotesInvalidPercent() }}</div>
               </div>
+              <hr class="smallhr" ng-if="poll.votescast">
               <!-- votes cast -->
-              <div class="input-group col-sm-8 spacer">
-                <div class="input-group-addon" title="{{ 'Votes cast' | translate }}"><b>&sum;</b></div>
-                <input type="number" ng-model="poll.votescast" class="form-control input-sm" placeholder="{{ 'Votes cast' | translate }}">
+              <div ng-if="poll.votescast">
+                <div class="result_label">
+                  <b>&sum;</b>
+                  <translate>Votes cast</translate>:
+                </div>
+                <div class="result_value">{{ poll.votescast }} {{ poll.getVotesCastPercent() }}</div>
               </div>
-              <!-- buttons -->
-              <div class="spacer">
-                <button type="submit" ng-click="update_poll(poll)" class="btn btn-primary" translate>
-                  Save
-                </button>
-                <button ng-click="poll.isEditMode=false;" class="btn btn-default" translate>
-                  Cancel
-                </button>
-              </div>
-            </form>
-          </div>
-          <div ng-show="!poll.isEditMode && poll.yes >= -2" class="pollresults">
-            <!-- yes -->
-            <div class="result_label">
-              <i class="fa fa-thumbs-up"></i>
-              <translate>Yes</translate>:
             </div>
-            <div ng-if="poll.getYesPercent(true)">
-              <uib-progressbar value="poll.getYesPercent(true)" type="success"></uib-progressbar>
-            </div>
-            <div class="result_value">{{ poll.yes }} {{ poll.getYesPercent() }}</div>
-            <!-- no -->
-            <div class="result_label">
-              <i class="fa fa-thumbs-down"></i>
-              <translate>No</translate>:
-            </div>
-            <div ng-if="poll.getNoPercent(true)">
-              <uib-progressbar value="poll.getNoPercent(true)" type="danger"></uib-progressbar>
-            </div>
-            <div class="result_value">{{ poll.no }} {{ poll.getNoPercent() }}</div>
-            <!-- abstain -->
-            <div class="result_label">
-              <b>&empty;</b>
-              <translate>Abstain</translate>:
-            </div>
-            <div ng-if="poll.getAbstainPercent(true)">
-              <uib-progressbar value="poll.getAbstainPercent(true)" type="warning"></uib-progressbar>
-            </div>
-            <div class="result_value">{{ poll.abstain }} {{ poll.getAbstainPercent() }}</div>
-            <hr class="smallhr" ng-if="poll.votesvalid || poll.votesinvalid">
-            <!-- valid votes -->
-            <div ng-if="poll.votesvalid">
-              <div class="result_label">
-                <i class="fa fa-check"></i>
-                <translate>Valid votes</translate>:
-              </div>
-              <div class="result_value">{{ poll.votesvalid }} {{ poll.getVotesValidPercent() }}</div>
-            </div>
-            <!-- invalid votes -->
-            <div ng-if="poll.votesinvalid">
-              <div class="result_label">
-                <i class="fa fa-ban"></i>
-                <translate>Invalid votes</translate>:
-              </div>
-              <div class="result_value">{{ poll.votesinvalid }} {{ poll.getVotesInvalidPercent() }}</div>
-            </div>
-            <hr class="smallhr" ng-if="poll.votescast">
-            <!-- votes cast -->
-            <div ng-if="poll.votescast">
-              <div class="result_label">
-                <b>&sum;</b>
-                <translate>Votes cast</translate>:
-              </div>
-              <div class="result_value">{{ poll.votescast }} {{ poll.getVotesCastPercent() }}</div>
-            </div>
-          </div>
-      </ol>
-      <button ng-if="motion.isAllowed('create_poll')" ng-click="create_poll()" class="btn btn-default btn-sm">
-        <i class="fa fa-bar-chart fa-lg"></i>
-        <translate>New poll</translate>
-      </button>
-
-      <h3 translate>Category</h3>
-      {{ motion.category.name }}</a>
-
-      <h3 translate>Tags</h3>
-      <p ng-repeat="tag in motion.tags">
-        <span class="label label-default spacer-top">
-          {{ tag.name }}
-        </span>
-      </p>
+        </ol>
+        <button ng-if="motion.isAllowed('create_poll')" ng-click="create_poll()" class="btn btn-default btn-sm">
+          <i class="fa fa-bar-chart fa-lg"></i>
+          <translate>New poll</translate>
+        </button>
     </div>
+    <div class="col-sm-1"></div>
+  </div>
+</div>
+
+<div class="details">
+  <div class="row">
+    <div class="col-sm-8">
+      <h3 translate>Text</h3>
+      <div class="white-space-pre-line" ng-bind-html="motion.getText()"></div>
+
+      <!-- reason -->
+      <div ng-if="motion.getReason() != ''">
+        <h3 translate>Reason</h3>
+        <div class="white-space-pre-line" ng-bind-html="motion.getReason()"></div>
+      </div>
+
+      <!-- attachments
+      TODO: make 'motion.attachments' useable and itteratable in template
+      <div ng-if="motion.attachments">
+        <h3 translate>Attachments</h3>
+      </div>
+      -->
+
+      <!-- log -->
+      <button type="button" class="btn btn-default spacer" ng-click="isCollapsed = !isCollapsed" translate>
+        Show log
+      </button>
+      <div uib-collapse="isCollapsed">
+        <div class="well well-sm">
+          <ul class="list-unstyled">
+            <li ng-repeat="message in motion.log_messages">
+              <small>{{ message.message }}</small>
+        </div>
+      </div>
+    </div>
+
   </div>
 </div>
diff --git a/openslides/motions/static/templates/motions/motion-list.html b/openslides/motions/static/templates/motions/motion-list.html
index 162dad123..426ad87f6 100644
--- a/openslides/motions/static/templates/motions/motion-list.html
+++ b/openslides/motions/static/templates/motions/motion-list.html
@@ -1,185 +1,180 @@
-<h1 translate>Motions</h1>
-
-<div id="submenu">
-  <a ng-click="newDialog()" os-perms="motions.can_create" class="btn btn-primary btn-sm">
-    <i class="fa fa-plus fa-lg"></i>
-    <translate>New</translate>
-  </a>
-  <a ui-sref="motions.category.list" os-perms="motions.can_manage" class="btn btn-default btn-sm">
-    <i class="fa fa-sitemap fa-lg"></i>
-    <translate>Categories</translate>
-  </a>
-  <a ui-sref="core.tag.list" os-perms="core.can_manage_tags" class="btn btn-default btn-sm">
-    <i class="fa fa-tags fa-lg"></i>
-    <translate>Tags</translate>
-  </a>
-  <a ui-sref="motions_pdf" target="_blank" class="btn btn-default btn-sm">
-    <i class="fa fa-file-pdf-o fa-lg"></i>
-    <translate>PDF</translate>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ng-click="newDialog()" os-perms="motions.can_create" class="btn btn-primary btn-sm">
+        <i class="fa fa-plus fa-lg"></i>
+        <translate>New</translate>
+      </a>
+      <a ui-sref="motions.category.list" os-perms="motions.can_manage" class="btn btn-default btn-sm">
+        <i class="fa fa-sitemap fa-lg"></i>
+        <translate>Categories</translate>
+      </a>
+      <a ui-sref="core.tag.list" os-perms="core.can_manage_tags" class="btn btn-default btn-sm">
+        <i class="fa fa-tags fa-lg"></i>
+        <translate>Tags</translate>
+      </a>
+      <a ui-sref="motions_pdf" target="_blank" class="btn btn-default btn-sm">
+        <i class="fa fa-file-pdf-o fa-lg"></i>
+        <translate>PDF</translate>
+      </a>
+    </div>
+    <h1 translate>Motions</h1>
+  </div>
 </div>
 
-<div class="row form-group">
-  <div class="col-sm-8">
-    <form class="form-inline">
+<div class="details">
+  <div class="row">
+    <div class="col-sm-6">
       <!-- delete mode -->
-      <div os-perms-lite="motions.can_manage" class="form-group">
-        <label for="deleteSwitcher" translate>Delete mode</label>
-        <switch id="deleteSwitcher" ng-model="isDeleteMode" ng-change="uncheckAll()"
-            on="{{'On'|translate}}" off="{{'Off'|translate}}"
-            class="green wide form-control">
-        </switch>
+      <button os-perms-lite="motions.can_manage" class="btn btn-default"
+          ng-click="isDeleteMode = !isDeleteMode; uncheckAll()">
+        <i class="fa fa-check-square-o"></i>
+        <translate>Select</translate>...
+      </button>
+    </div>
+    <div class="col-sm-6">
+      <div class="form-inline text-right">
+        <div class="form-group">
+          <div class="input-group">
+            <div class="input-group-addon"><i class="fa fa-search"></i></div>
+            <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+               placeholder="{{ 'Search' | translate}}">
+          </div>
+        </div>
+        <button class="btn btn-default" ng-click="isFilter = !isFilter">
+          <i class="fa fa-filter"></i>
+          <translate>Filter</translate>...
+        </button>
       </div>
-      <!-- delete button -->
-      <a ng-show="isDeleteMode && (motions|filter:{selected:true}).length > 0"
-          os-perms="motions.can_manage" ng-click="deleteMultiple()"
-          class="btn btn-primary btn-sm form-control">
-        <i class="fa fa-trash fa-lg"></i>
-        <translate>Delete selected motions</translate>
-      </a>
+    </div>
+  </div>
+  <div uib-collapse="!isFilter" class="row">
+    <div class="col-sm-6 text-right"></div>
+    <div class="col-sm-6 text-right">
       <!-- state filter -->
-      &nbsp;
       <select ng-model="stateFilter" class="form-control" id="stateFilter">
         <option value="" translate>--- Select state ---</option>
         <option ng-repeat="state in states" value="{{ state.id }}">{{ state.name }}</option>
       </select>
-    </form>
-  </div>
-  <div class="col-sm-4">
-    <div class="input-group">
-      <div class="input-group-addon"><i class="fa fa-filter"></i></div>
-      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-         placeholder="{{ 'Filter' | translate}}">
     </div>
   </div>
-</div>
+  <div uib-collapse="!isDeleteMode" class="row spacer">
+    <div class="col-sm-12 text-left">
+      <!-- delete button -->
+      <a ng-show="isDeleteMode"
+          os-perms="motions.can_manage" ng-click="delete()"
+          class="btn btn-primary">
+        <i class="fa fa-trash fa-lg"></i>
+        <translate>Delete selected items</translate>
+      </a>
+    </div>
+  </div>
 
-<table class="table table-striped table-bordered table-hover">
-  <thead>
-    <tr>
-      <!-- projector column -->
-      <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn">
-      <!-- delete selection column -->
-      <th ng-show="isDeleteMode" os-perms-lite="motions.can_manage" class="firstColumn deleteColumn">
-        <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
-      <th ng-click="toggleSort('identifier')" class="sortable minimum">
-        <translate>Identifier</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'identifier' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('getTitle()')" class="sortable">
-        <translate>Title</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'getTitle()' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('submitters')" class="sortable optional">
-        <translate>Submitters</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'submitters' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('category')" class="sortable optional">
-        <translate>Category</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'category' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('state.name')" class="sortable optional">
-        <translate>State</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'state.name' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-  <tbody>
-    <tr ng-repeat="motion in motions | filter: filter.search | filter: {state_id: stateFilter} |
-        orderBy: sortColumn:reverse"
-        class="animate-item"
-        ng-class="{ 'activeline': motion.isProjected(), 'selected': motion.selected }">
-      <!-- projector column -->
-      <td ng-show="!isDeleteMode" os-perms-lite="core.can_manage_projector">
-        <a class="btn btn-default btn-sm"
-            ng-class="{ 'btn-primary': motion.isProjected() }"
-            ng-click="motion.project()"
-            title="{{ 'Project motion' | translate }}">
-          <i class="fa fa-video-camera"></i>
-        </a>
-      <!-- delete selection column -->
-      <td ng-show="isDeleteMode" os-perms="motions.can_manage" class="deleteColumn">
-        <input type="checkbox" ng-model="motion.selected">
-      <!-- motion data colums -->
-      <td ng-if="!motion.quickEdit">{{ motion.identifier }}
-      <td ng-if="!motion.quickEdit" ng-mouseover="motion.hover=true" ng-mouseleave="motion.hover=false">
-          <strong><a ui-sref="motions.motion.detail({id: motion.id})">{{ motion.getTitle() }}</a></strong>
-          <div ng-if="motion.isAllowed('update')" class="hoverActions" ng-class="{'hiddenDiv': !motion.hover}">
-            <span ng-if="motion.isAllowed('update')">
-              <a href="" ng-click="editDialog(motion)" translate>Edit</a>
-            </span>
-            <span ng-if="motion.isAllowed('quickedit')">
-              | <a href="" ng-click="motion.quickEdit=true" translate>QuickEdit</a> |
-            </span>
-            <span ng-if="motion.isAllowed('delete')">
-              <!-- TODO: translate confirm message -->
-              <a href="" class="text-danger"
-                ng-bootbox-confirm="Are you sure you want to delete <b>{{ motion.getTitle() }}</b>?"
-                ng-bootbox-confirm-action="delete(motion)" translate>Delete</a>
-            </span>
+  <i class="spacer">
+    {{ motions.length }} {{ "motion" | translate }}<span ng-if="(motions|filter:{selected:true}).length > 0">,
+    {{(motions|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
+  </i>
+  <table class="table table-striped table-bordered table-hover">
+    <thead>
+      <tr>
+        <!-- projector column -->
+        <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn">
+        <!-- delete selection column -->
+        <th ng-show="isDeleteMode" os-perms-lite="motions.can_manage" class="firstColumn deleteColumn">
+          <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
+        <th ng-click="toggleSort('identifier')" class="sortable minimum">
+          <translate>Identifier</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'identifier' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('getTitle()')" class="sortable">
+          <translate>Title</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'getTitle()' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('submitters')" class="sortable optional">
+          <translate>Submitters</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'submitters' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('category')" class="sortable optional">
+          <translate>Category</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'category' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('state.name')" class="sortable optional">
+          <translate>State</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'state.name' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+    <tbody>
+      <tr ng-repeat="motion in motions | filter: filter.search | filter: {state_id: stateFilter} |
+          orderBy: sortColumn:reverse"
+          class="animate-item"
+          ng-class="{ 'activeline': motion.isProjected(), 'selected': motion.selected }">
+        <!-- projector column -->
+        <td ng-show="!isDeleteMode" os-perms-lite="core.can_manage_projector">
+          <a class="btn btn-default btn-sm"
+              ng-class="{ 'btn-primary': motion.isProjected() }"
+              ng-click="motion.project()"
+              title="{{ 'Project motion' | translate }}">
+            <i class="fa fa-video-camera"></i>
+          </a>
+        <!-- delete selection column -->
+        <td ng-show="isDeleteMode" os-perms="motions.can_manage" class="deleteColumn">
+          <input type="checkbox" ng-model="motion.selected">
+        <!-- motion data colums -->
+        <td ng-if="!motion.quickEdit">{{ motion.identifier }}
+        <td ng-if="!motion.quickEdit" ng-mouseover="motion.hover=true" ng-mouseleave="motion.hover=false">
+            <strong><a ui-sref="motions.motion.detail({id: motion.id})">{{ motion.getTitle() }}</a></strong>
+            <div ng-if="motion.isAllowed('update')" class="hoverActions" ng-class="{'hiddenDiv': !motion.hover}">
+              <span ng-if="motion.isAllowed('update')">
+                <a href="" ng-click="editDialog(motion)" translate>Edit</a>
+              </span>
+              <span ng-if="motion.isAllowed('quickedit')">
+                | <a href="" ng-click="motion.quickEdit=true" translate>QuickEdit</a> |
+              </span>
+              <span ng-if="motion.isAllowed('delete')">
+                <!-- TODO: translate confirm message -->
+                <a href="" class="text-danger"
+                  ng-bootbox-confirm="Are you sure you want to delete <b>{{ motion.getTitle() }}</b>?"
+                  ng-bootbox-confirm-action="delete(motion)" translate>Delete</a>
+              </span>
+            </div>
+        <td ng-if="!motion.quickEdit" class="optional">
+          <div ng-repeat="submitter in motion.submitters">
+            {{ submitter.get_full_name() }}<br>
           </div>
-      <td ng-if="!motion.quickEdit" class="optional">
-        <div ng-repeat="submitter in motion.submitters">
-          {{ submitter.get_full_name() }}<br>
-        </div>
-      <td ng-if="!motion.quickEdit" class="optional">
-        {{ motion.category.name }}
-      <td ng-if="!motion.quickEdit" class="optional">
-        <span class="label" ng-class="'label-'+motion.state.css_class">
-          {{ motion.state.name | translate }}
-        </span>
-      <!-- quickEdit columns -->
-      <td ng-if="motion.quickEdit && motion.isAllowed('quickedit')" colspan="5">
-        <h4>{{ motion.getTitle() }} <span class="text-muted">&ndash; Quick Edit</span></h4>
-          <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
-            {{alert.msg}}
-          </alert>
-          <div class="row">
-            <div class="col-xs-6">
-              <label for="inputIdentifier" translate>Identifier</label>
-              <input type="text" ng-model="motion.identifier" class="form-control input-sm"
-                  name="inputIdentifier">
+        <td ng-if="!motion.quickEdit" class="optional">
+          {{ motion.category.name }}
+        <td ng-if="!motion.quickEdit" class="optional">
+          <span class="label" ng-class="'label-'+motion.state.css_class">
+            {{ motion.state.name | translate }}
+          </span>
+        <!-- quickEdit columns -->
+        <td ng-if="motion.quickEdit && motion.isAllowed('quickedit')" colspan="5">
+          <h4>{{ motion.getTitle() }} <span class="text-muted">&ndash; Quick Edit</span></h4>
+            <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
+              {{alert.msg}}
+            </alert>
+            <div class="row">
+              <div class="col-xs-6">
+                <label for="inputIdentifier" translate>Identifier</label>
+                <input type="text" ng-model="motion.identifier" class="form-control input-sm"
+                    name="inputIdentifier">
+              </div>
+              <div class="col-xs-6">
+                <label for="selectCategory" translate>Category</label>
+                <select ng-options="category.id as category.name for category in categories"
+                    ng-model="motion.category_id" class="form-control" name="selectCategory">
+                </select>
+              </div>
             </div>
-            <div class="col-xs-6">
-              <label for="selectCategory" translate>Category</label>
-              <select ng-options="category.id as category.name for category in categories"
-                  ng-model="motion.category_id" class="form-control" name="selectCategory">
-              </select>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-xs-6">
-              <label for="selectSubmitter" translate>Submitters</label>
-              <ui-select multiple ng-model="motion.submitters_id" name="selectSubmitter">
-                <ui-select-match placeholder="{{ 'Select or search a submitter...' | translate }}">
-                  {{ $item.get_full_name() }}
-                </ui-select-match>
-                <ui-select-choices repeat="user.id as user in users | filter: $select.search">
-                  <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
-                </ui-select-choices>
-              </ui-select>
-            </div>
-            <div class="col-xs-6">
-              <label for="selectTags" translate>Tags</label>
-              <ui-select multiple ng-model="motion.tags_id">
-                <ui-select-match placeholder="{{ 'Select or search a tag...' | translate }}">
-                  {{ $item.name }}
-                </ui-select-match>
-                <ui-select-choices repeat="tag.id as tag in tags | filter: $select.search">
-                  {{ tag.name }}
-                </ui-select-choices>
-              </ui-select>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-xs-6">
-              <div ng-if="config('motions_min_supporters') > 0">
-                <label for="selectSubmitter" translate>Supporters</label>
-                <ui-select multiple ng-model="motion.supporters_id">
-                  <ui-select-match placeholder="{{ 'Select or search a supporter...' | translate }}">
+            <div class="row">
+              <div class="col-xs-6">
+                <label for="selectSubmitter" translate>Submitters</label>
+                <ui-select multiple ng-model="motion.submitters_id" name="selectSubmitter">
+                  <ui-select-match placeholder="{{ 'Select or search a submitter...' | translate }}">
                     {{ $item.get_full_name() }}
                   </ui-select-match>
                   <ui-select-choices repeat="user.id as user in users | filter: $select.search">
@@ -187,16 +182,42 @@
                   </ui-select-choices>
                 </ui-select>
               </div>
+              <div class="col-xs-6">
+                <label for="selectTags" translate>Tags</label>
+                <ui-select multiple ng-model="motion.tags_id">
+                  <ui-select-match placeholder="{{ 'Select or search a tag...' | translate }}">
+                    {{ $item.name }}
+                  </ui-select-match>
+                  <ui-select-choices repeat="tag.id as tag in tags | filter: $select.search">
+                    {{ tag.name }}
+                  </ui-select-choices>
+                </ui-select>
+              </div>
             </div>
-          </div>
-          <div class="spacer">
-            <button ng-click="motion.quickEdit=false" class="btn btn-default pull-left" translate>
-              Cancel
-            </button> &nbsp;
-            <button ng-if="motion.isAllowed('update')" ng-click="save(motion)" class="btn btn-primary" translate>
-              Update
-            </button>
-            <a ng-if="motion.isAllowed('update')" ui-sref="motions.motion.detail.update({id: motion.id })"
-                class="pull-right" translate>Edit motion...</a>
-          </div>
-</table>
+            <div class="row">
+              <div class="col-xs-6">
+                <div ng-if="config('motions_min_supporters') > 0">
+                  <label for="selectSubmitter" translate>Supporters</label>
+                  <ui-select multiple ng-model="motion.supporters_id">
+                    <ui-select-match placeholder="{{ 'Select or search a supporter...' | translate }}">
+                      {{ $item.get_full_name() }}
+                    </ui-select-match>
+                    <ui-select-choices repeat="user.id as user in users | filter: $select.search">
+                      <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
+                    </ui-select-choices>
+                  </ui-select>
+                </div>
+              </div>
+            </div>
+            <div class="spacer">
+              <button ng-click="motion.quickEdit=false" class="btn btn-default pull-left" translate>
+                Cancel
+              </button> &nbsp;
+              <button ng-if="motion.isAllowed('update')" ng-click="save(motion)" class="btn btn-primary" translate>
+                Update
+              </button>
+              <a ng-if="motion.isAllowed('update')" ui-sref="motions.motion.detail.update({id: motion.id })"
+                  class="pull-right" translate>Edit motion...</a>
+            </div>
+  </table>
+</div>
diff --git a/openslides/users/static/js/users/site.js b/openslides/users/static/js/users/site.js
index de297f888..4d5ba3608 100644
--- a/openslides/users/static/js/users/site.js
+++ b/openslides/users/static/js/users/site.js
@@ -718,7 +718,7 @@ angular.module('OpenSlidesApp.users.site', ['OpenSlidesApp.users'])
         $scope.alerts.push({
             type: 'success',
             msg: gettext("Installation was successfully.") + "<br>" +
-                 gettext("Use <strong>admin</strong> and <strong>admin</strong> for first login.") + "<p>" +
+                 gettext("Use <strong>admin</strong> and <strong>admin</strong> for first login.") + "<br>" +
                  gettext("Important: Please change your password!")
         });
         // close alert function
diff --git a/openslides/users/static/templates/users/group-detail.html b/openslides/users/static/templates/users/group-detail.html
index 380c0c069..864673c25 100644
--- a/openslides/users/static/templates/users/group-detail.html
+++ b/openslides/users/static/templates/users/group-detail.html
@@ -1,14 +1,19 @@
-<h1>{{ group.name }}</h1>
-
-<div id="submenu">
-  <a ui-sref="users.group.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="users.group.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+    </div>
+    <h1>{{ group.name }}</h1>
+    <h2 translate>Group</h2>
+  </div>
 </div>
 
-
-<b translate>Permissions:</b>
-<ul ng-repeat="perm in group.permissions">
-  <li>{{ perm }}
-</ul>
+<div class="details">
+  <p class="lead" translate>Permissions:</p>
+  <ul ng-repeat="perm in group.permissions">
+    <li>{{ perm }}
+  </ul>
+</div>
diff --git a/openslides/users/static/templates/users/group-form.html b/openslides/users/static/templates/users/group-form.html
index e4ddb4ffc..18554152e 100644
--- a/openslides/users/static/templates/users/group-form.html
+++ b/openslides/users/static/templates/users/group-form.html
@@ -1,29 +1,34 @@
-<h1 ng-if="group.id" translate>Edit group</h1>
-<h1 ng-if="!group.id" translate>New group</h1>
-
-<div id="submenu">
-  <a ui-sref="users.group.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="users.group.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+    </div>
+    <h1 ng-if="group.id" translate>Edit group</h1>
+    <h1 ng-if="!group.id" translate>New group</h1>
+  </div>
 </div>
 
-<form name="groupForm">
-  <div class="form-group">
-    <label for="inputName" translate>Name</label>
-    <input type="text" ng-model="group.name" class="form-control" name="inputName" required>
-  </div>
-  <div class="form-group">
-    <label for="selectPermissions" translate>Permissions</label>
-    <select multiple size="15" ng-options="permission.value as permission.display_name for permission in permissions"
-        ng-model="group.permissions" class="form-control" name="selectPermissions" required>
-    </select>
-  </div>
+<div class="details">
+  <form name="groupForm">
+    <div class="form-group">
+      <label for="inputName" translate>Name</label>
+      <input type="text" ng-model="group.name" class="form-control" name="inputName" required>
+    </div>
+    <div class="form-group">
+      <label for="selectPermissions" translate>Permissions</label>
+      <select multiple size="15" ng-options="permission.value as permission.display_name for permission in permissions"
+          ng-model="group.permissions" class="form-control" name="selectPermissions" required>
+      </select>
+    </div>
 
-  <button type="submit" ng-click="save(group)" class="btn btn-primary" translate>
-    Save
-  </button>
-  <button ui-sref="users.group.list" class="btn btn-default" translate>
-    Cancel
-  </button>
-</form>
+    <button type="submit" ng-click="save(group)" class="btn btn-primary" translate>
+      Save
+    </button>
+    <button ui-sref="users.group.list" class="btn btn-default" translate>
+      Cancel
+    </button>
+  </form>
+</div>
diff --git a/openslides/users/static/templates/users/group-list.html b/openslides/users/static/templates/users/group-list.html
index 2d76ec452..cec870e53 100644
--- a/openslides/users/static/templates/users/group-list.html
+++ b/openslides/users/static/templates/users/group-list.html
@@ -1,51 +1,61 @@
-<h1 translate>Groups</h1>
-
-<div id="submenu">
-  <a ui-sref="users.group.create" os-perms="users.can_manage" class="btn btn-primary btn-sm">
-    <i class="fa fa-plus fa-lg"></i>
-    <translate>New</translate>
-  </a>
-  <a ui-sref="users.user.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
-</div>
-
-<div class="row form-group">
-  <div class="col-sm-4 right">
-    <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-        placeholder="{{ 'Filter' | translate }}">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="users.group.create" os-perms="users.can_manage" class="btn btn-primary btn-sm">
+        <i class="fa fa-plus fa-lg"></i>
+        <translate>New</translate>
+      </a>
+      <a ui-sref="users.user.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+    </div>
+    <h1 translate>Groups</h1>
   </div>
 </div>
 
-<table class="table table-striped table-bordered table-hover">
-  <thead>
-    <tr>
-      <th ng-click="sortby='id';reverse=!reverse">
-        <translate>ID</translate>
-        <i class="fa" ng-show="sortby == 'id'"
-            ng-class="reverse ? 'fa-caret-down' : 'fa-caret-up'"></i>
-      <th ng-click="sortby='name';reverse=!reverse">
-        <translate>Name</translate>
-        <i class="fa" ng-show="sortby == 'name'"
-            ng-class="reverse ? 'fa-caret-down' : 'fa-caret-up'"></i>
-      <th os-perms="users.can_manage core.can_manage_projector" class="mini_width" translate>Actions</th>
-  <tbody>
-    <tr ng-repeat="group in groups | filter: filter.search | orderBy:sortby:reverse">
-      <td>{{ group.id }}
-      <td><a ui-sref="users.group.detail({id: group.id})">{{ group.name }}</a>
-      <td os-perms="users.can_manage" class="nobr">
-        <!-- edit -->
-        <a ui-sref="users.group.detail.update({id: group.id})" os-perms="users.can_manage"
-            class="btn btn-default btn-sm"
-            title="{{ 'Edit' | translate }}">
-          <i class="fa fa-pencil"></i>
-        </a>
-        <!-- delete -->
-        <a os-perms="users.can_manage" class="btn btn-danger btn-sm"
-            ng-bootbox-confirm="Are you sure you want to delete <b>{{ group.name }}</b>?"
-            ng-bootbox-confirm-action="delete(group)"
-            title="{{ 'Delete' | translate }}">
-          <i class="fa fa-trash-o"></i>
-        </a>
-</table>
+<div class="details">
+  <div class="row form-group">
+    <div class="col-sm-4 pull-right">
+      <div class="form-group">
+        <div class="input-group">
+          <div class="input-group-addon"><i class="fa fa-search"></i></div>
+          <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+             placeholder="{{ 'Search' | translate}}">
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <table class="table table-striped table-bordered table-hover">
+    <thead>
+      <tr>
+        <th ng-click="sortby='id';reverse=!reverse">
+          <translate>ID</translate>
+          <i class="fa" ng-show="sortby == 'id'"
+              ng-class="reverse ? 'fa-caret-down' : 'fa-caret-up'"></i>
+        <th ng-click="sortby='name';reverse=!reverse">
+          <translate>Name</translate>
+          <i class="fa" ng-show="sortby == 'name'"
+              ng-class="reverse ? 'fa-caret-down' : 'fa-caret-up'"></i>
+        <th os-perms="users.can_manage core.can_manage_projector" class="mini_width" translate>Actions</th>
+    <tbody>
+      <tr ng-repeat="group in groups | filter: filter.search | orderBy:sortby:reverse">
+        <td>{{ group.id }}
+        <td><a ui-sref="users.group.detail({id: group.id})">{{ group.name }}</a>
+        <td os-perms="users.can_manage" class="nobr">
+          <!-- edit -->
+          <a ui-sref="users.group.detail.update({id: group.id})" os-perms="users.can_manage"
+              class="btn btn-default btn-sm"
+              title="{{ 'Edit' | translate }}">
+            <i class="fa fa-pencil"></i>
+          </a>
+          <!-- delete -->
+          <a os-perms="users.can_manage" class="btn btn-danger btn-sm"
+              ng-bootbox-confirm="Are you sure you want to delete <b>{{ group.name }}</b>?"
+              ng-bootbox-confirm-action="delete(group)"
+              title="{{ 'Delete' | translate }}">
+            <i class="fa fa-trash-o"></i>
+          </a>
+  </table>
+</div>
diff --git a/openslides/users/static/templates/users/user-detail-password.html b/openslides/users/static/templates/users/user-detail-password.html
index d75862e19..a0857aa39 100644
--- a/openslides/users/static/templates/users/user-detail-password.html
+++ b/openslides/users/static/templates/users/user-detail-password.html
@@ -1,37 +1,43 @@
-<h1>Change password</h1>
+<div class="header">
+  <div class="title">
+    <h1>Change password</h1>
+  </div>
+</div>
 
-<p ng-if='formError' class="text-danger">
-  <strong>{{ formError }}</strong>
-</p>
-<form name="userForm" >
-  <div class="form-group">
-    <label for="inputOldPassword" translate>Old password</label>
-    <input type="password"
-           ng-model="oldPassword"
-           class="form-control"
-           name="inputOldPassword"
-           required>
-  </div>
-  <div class="form-group">
-    <label for="inputNewPassword" translate>New password</label>
-    <input type="password"
-           ng-model="newPassword"
-           class="form-control"
-           name="inputNewPassword"
-           required>
-  </div>
-  <div class="form-group">
-    <label for="inputNewPassword2" translate>Confirm new password</label>
-    <input type="password"
-           ng-model="newPassword2"
-           class="form-control"
-           name="inputNewPassword2"
-           required>
-  </div>
-  <button type="submit" ng-click="save(user)" class="btn btn-primary" translate>
-    Save
-  </button>
-  <button ui-sref="users.user.list" class="btn btn-default" translate>
-    Cancel
-  </button>
-</form>
+<div class="details">
+  <p ng-if='formError' class="text-danger">
+    <strong>{{ formError }}</strong>
+  </p>
+  <form name="userForm" >
+    <div class="form-group">
+      <label for="inputOldPassword" translate>Old password</label>
+      <input type="password"
+             ng-model="oldPassword"
+             class="form-control"
+             name="inputOldPassword"
+             required>
+    </div>
+    <div class="form-group">
+      <label for="inputNewPassword" translate>New password</label>
+      <input type="password"
+             ng-model="newPassword"
+             class="form-control"
+             name="inputNewPassword"
+             required>
+    </div>
+    <div class="form-group">
+      <label for="inputNewPassword2" translate>Confirm new password</label>
+      <input type="password"
+             ng-model="newPassword2"
+             class="form-control"
+             name="inputNewPassword2"
+             required>
+    </div>
+    <button type="submit" ng-click="save(user)" class="btn btn-primary" translate>
+      Save
+    </button>
+    <button ui-sref="users.user.list" class="btn btn-default" translate>
+      Cancel
+    </button>
+  </form>
+</div>
diff --git a/openslides/users/static/templates/users/user-detail-profile.html b/openslides/users/static/templates/users/user-detail-profile.html
index 0fb6c703d..3cd4c9392 100644
--- a/openslides/users/static/templates/users/user-detail-profile.html
+++ b/openslides/users/static/templates/users/user-detail-profile.html
@@ -1,44 +1,50 @@
-<h1>Edit profil</h1>
+<div class="header">
+  <div class="title">
+    <h1 translate>Edit profil</h1>
+  </div>
+</div>
 
-<p ng-if='formError' class="text-danger">
-  <strong>{{ formError }}</strong>
-</p>
-<form name="userForm" >
-  <div class="form-group">
-    <label for="inputUsername" translate>Username</label>
-    <input type="text"
-           ng-model="user.username"
-           class="form-control"
-           name="inputUsername"
-           required>
-  </div>
-  <div class="form-group row">
-    <div class="col-xs-2">
-      <label for="inputTitle" translate-comment="academic degree" translate>Title</label>
-      <input type="text" ng-model="user.title" class="form-control" name="inputTitle">
+<div class="details">
+  <p ng-if='formError' class="text-danger">
+    <strong>{{ formError }}</strong>
+  </p>
+  <form name="userForm" >
+    <div class="form-group">
+      <label for="inputUsername" translate>Username</label>
+      <input type="text"
+             ng-model="user.username"
+             class="form-control"
+             name="inputUsername"
+             required>
     </div>
-    <div class="col-xs-5">
-      <label for="inputFirstName" translate>First name</label>
-      <input type="text" ng-model="user.first_name" class="form-control" name="inputFirstName">
+    <div class="form-group row">
+      <div class="col-xs-2">
+        <label for="inputTitle" translate-comment="academic degree" translate>Title</label>
+        <input type="text" ng-model="user.title" class="form-control" name="inputTitle">
+      </div>
+      <div class="col-xs-5">
+        <label for="inputFirstName" translate>First name</label>
+        <input type="text" ng-model="user.first_name" class="form-control" name="inputFirstName">
+      </div>
+      <div class="col-xs-5">
+        <label for="inputLastName" translate>Last name</label>
+        <input type="text" ng-model="user.last_name" class="form-control" name="inputLastName">
+      </div>
     </div>
-    <div class="col-xs-5">
-      <label for="inputLastName" translate>Last name</label>
-      <input type="text" ng-model="user.last_name" class="form-control" name="inputLastName">
+    <div class="form-group">
+      <label for="inputStructureLevel" translate>Structure level</label>
+      <input type="text" ng-model="user.structure_level" class="form-control" name="inputStructureLevel">
+    </div>
+    <div class="form-group">
+      <label for="textAbout" translate>About me</label>
+      <textarea ng-model="user.about_me" class="form-control" name="textAbout" />
     </div>
-  </div>
-  <div class="form-group">
-    <label for="inputStructureLevel" translate>Structure level</label>
-    <input type="text" ng-model="user.structure_level" class="form-control" name="inputStructureLevel">
-  </div>
-  <div class="form-group">
-    <label for="textAbout" translate>About me</label>
-    <textarea ng-model="user.about_me" class="form-control" name="textAbout" />
-  </div>
 
-  <button type="submit" ng-click="save(user)" class="btn btn-primary" translate>
-    Save
-  </button>
-  <button ui-sref="users.user.list" class="btn btn-default" translate>
-    Cancel
-  </button>
-</form>
+    <button type="submit" ng-click="save(user)" class="btn btn-primary" translate>
+      Save
+    </button>
+    <button ui-sref="users.user.list" class="btn btn-default" translate>
+      Cancel
+    </button>
+  </form>
+</div>
diff --git a/openslides/users/static/templates/users/user-detail.html b/openslides/users/static/templates/users/user-detail.html
index 332dd59a2..9967aad53 100644
--- a/openslides/users/static/templates/users/user-detail.html
+++ b/openslides/users/static/templates/users/user-detail.html
@@ -1,43 +1,49 @@
-<h1>{{ user.get_short_name() }}</h1>
-
-<div id="submenu">
-  <a ui-sref="users.user.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
-  <!-- project -->
-  <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
-      ng-class="{ 'btn-primary': user.isProjected() }"
-      ng-click="user.project()"
-      title="{{ 'Project user' | translate }}">
-    <i class="fa fa-video-camera"></i>
-  </a>
-  <!-- edit -->
-  <a ui-sref="users.user.detail.update({id: user.id })" os-perms="users.can_manage"
-      class="btn btn-default btn-sm"
-      title="{{ 'Edit' | translate}}">
-    <i class="fa fa-pencil"></i>
-  </a>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="users.user.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
+      <!-- project -->
+      <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
+          ng-class="{ 'btn-primary': user.isProjected() }"
+          ng-click="user.project()"
+          title="{{ 'Project user' | translate }}">
+        <i class="fa fa-video-camera"></i>
+      </a>
+      <!-- edit -->
+      <a ui-sref="users.user.detail.update({id: user.id })" os-perms="users.can_manage"
+          class="btn btn-default btn-sm"
+          title="{{ 'Edit' | translate}}">
+        <i class="fa fa-pencil"></i>
+      </a>
+    </div>
+    <h1>{{ user.get_short_name() }}</h1>
+    <h2 translate>Participant</h2>
+  </div>
 </div>
 
-<div class="user_details form-group">
-  <fieldset>
-    <legend translate>Personal data</legend>
-    <label translate>Structure level</label>
-      {{ user.structure_level }}
-    <label translate>Groups</label>
-      <div ng-repeat="group in user.groups">
-        {{ (groups | filter: {id: group})[0].name }}
-      </div>
-    <label translate>About me</label>
-      <div class="white-space-pre-line">{{ user.about_me }}</div>
-  </fieldset>
+<div class="details">
+  <div class="user_details form-group">
+    <fieldset>
+      <legend translate>Personal data</legend>
+      <label translate>Structure level</label>
+        {{ user.structure_level }}
+      <label translate>Groups</label>
+        <div ng-repeat="group in user.groups">
+          {{ (groups | filter: {id: group})[0].name }}
+        </div>
+      <label translate>About me</label>
+        <div class="white-space-pre-line">{{ user.about_me }}</div>
+    </fieldset>
 
-  <fieldset os-perms="users.can_manage">
-    <legend translate>Administrative data</legend>
-    <label translate>Username</label>
-      {{ user.username }}
-    <label translate>Comment</label>
-      <div class="white-space-pre-line">{{ user.comment }}</div>
-  </fieldset>
+    <fieldset os-perms="users.can_manage">
+      <legend translate>Administrative data</legend>
+      <label translate>Username</label>
+        {{ user.username }}
+      <label translate>Comment</label>
+        <div class="white-space-pre-line">{{ user.comment }}</div>
+    </fieldset>
+  </div>
 </div>
diff --git a/openslides/users/static/templates/users/user-import.html b/openslides/users/static/templates/users/user-import.html
index a305af450..49571e544 100644
--- a/openslides/users/static/templates/users/user-import.html
+++ b/openslides/users/static/templates/users/user-import.html
@@ -1,98 +1,103 @@
- <h1 translate>Import participants</h1>
-
-<div id="submenu">
-  <a ui-sref="users.user.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
-</div>
-
-<h2 translate>Import by copy/paste</h2>
-<p translate>Copy and paste your participant names in this textbox.
-Keep each person in a single line.</p>
-
-<div class="row">
-  <div class="form-group col-sm-6">
-    <textarea ng-model="userlist" rows="5" class="form-control" ng-list="/\n/"></textarea>
-  </div>
-</div>
-
-<div class="clearfix">
-  <button ng-click="importByLine()" class="btn btn-primary pull-left" translate>Import</button>
-  <div class="col-xs-5" ng-if="users">
-    <progressbar animate="false" type="success" max="users.length" value="importcounter">
-      <i>{{ importcounter }} / {{ users.length }} {{ "imported" | translate }}</i>
-    </progressbar>
-  </div>
-</div>
-
-<hr>
-
-<h2 translate>Import by CSV file</h2>
-<p translate>Select a CSV file to import users!
-
-<p translate>Please note:</p>
-<ul>
-    <li><translate>Required comma separated values</translate>:<br>
-        <code translate>'title, first_name, last_name, structure level, groups, comment, is active'</code>
-    <li><translate>Default groups</translate>:
-        <translate>Delegate</translate> <code>3</code>,
-        <translate>Staff</translate> <code>4</code>
-    <li translate>At least first name or lastname have to be filled in. All
-      other fields are optional and may be empty.
-    <li translate>The header in first line is required.
-    <li translate>Required CSV file encoding is UTF-8.
-    <li><a href="https://github.com/OpenSlides/OpenSlides/wiki/CSV-Import" translate>
-          Use the CSV example file from OpenSlides Wiki.
-        </a>
-</ul>
-
-<ng-csv-import
-  content="csv.content"
-  class="import"
-  header="csv.header"
-  separator="csv.separator"
-  result="csv.result"></ng-csv-import>
-
-<div ng-if="csv.result" class="col-sm-10 well">
-  <h3 translate>Preview</h3>
-  <table class="table table-striped table-bordered table-condensed">
-    <thead>
-      <tr>
-        <th>#
-        <th translate>Title
-        <th translate>First name
-        <th translate>Last name
-        <th translate>Structure level
-        <th translate>Groups
-        <th translate>Comment</th>
-    <tbody ng-repeat="user in csv.result">
-      <tr>
-        <td>{{ $index+1 }}
-        <td>{{ user.title }}
-        <td>{{ user.first_name }}
-        <td>{{ user.last_name }}
-        <td>{{ user.structure_level }}
-        <td>{{ user.groups }}
-        <td>{{ user.comment }}
-  </table>
-
-<div class="clearfix">
-  <button ng-if="!csvimporting" ng-click="importByCSV(csv.result)" class="btn btn-primary pull-left" translate>Import</button>
-  <div ng-if="csvimporting">
-    <progressbar animate="false"  type="success" max="csvlines" value="csvimportcounter">
-      <i>{{ csvimportcounter }} / {{ csvlines }} {{ "imported" | translate }}</i>
-    </progressbar>
-  </div>
-  <a ng-if="csvimported" ui-sref="users.user.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to users overview</translate>
-  </a>
-</div>
-  <p>
-    <div class="form-group">
-      <button ng-if="!csvimporting" ng-click="clear()" class="btn btn-default" translate>
-        Clear
-      </button>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ui-sref="users.user.list" class="btn btn-sm btn-default">
+        <i class="fa fa-angle-double-left fa-lg"></i>
+        <translate>Back to overview</translate>
+      </a>
     </div>
+    <h1 translate>Import participants</h1>
+  </div>
+</div>
+
+<div class="details">
+  <h3 translate>Import by copy/paste</h3>
+  <p translate>Copy and paste your participant names in this textbox.
+  Keep each person in a single line.</p>
+
+  <div class="row">
+    <div class="form-group col-sm-6">
+      <textarea ng-model="userlist" rows="5" class="form-control" ng-list="/\n/"></textarea>
+    </div>
+  </div>
+
+  <div class="clearfix">
+    <button ng-click="importByLine()" class="btn btn-primary pull-left" translate>Import</button>
+    <div class="col-xs-5" ng-if="users">
+      <progressbar animate="false" type="success" max="users.length" value="importcounter">
+        <i>{{ importcounter }} / {{ users.length }} {{ "imported" | translate }}</i>
+      </progressbar>
+    </div>
+  </div>
+
+  <hr>
+
+  <h3 translate>Import by CSV file</h3>
+  <p translate>Select a CSV file to import users!
+
+  <p translate>Please note:</p>
+  <ul>
+      <li><translate>Required comma separated values</translate>:<br>
+          <code translate>'title, first_name, last_name, structure level, groups, comment, is active'</code>
+      <li><translate>Default groups</translate>:
+          <translate>Delegate</translate> <code>3</code>,
+          <translate>Staff</translate> <code>4</code>
+      <li translate>At least first name or lastname have to be filled in. All
+        other fields are optional and may be empty.
+      <li translate>The header in first line is required.
+      <li translate>Required CSV file encoding is UTF-8.
+      <li><a href="https://github.com/OpenSlides/OpenSlides/wiki/CSV-Import" translate>
+            Use the CSV example file from OpenSlides Wiki.
+          </a>
+  </ul>
+
+  <ng-csv-import
+    content="csv.content"
+    class="import"
+    header="csv.header"
+    separator="csv.separator"
+    result="csv.result"></ng-csv-import>
+
+  <div ng-if="csv.result" class="col-sm-10 well">
+    <h3 translate>Preview</h3>
+    <table class="table table-striped table-bordered table-condensed">
+      <thead>
+        <tr>
+          <th>#
+          <th translate>Title
+          <th translate>First name
+          <th translate>Last name
+          <th translate>Structure level
+          <th translate>Groups
+          <th translate>Comment</th>
+      <tbody ng-repeat="user in csv.result">
+        <tr>
+          <td>{{ $index+1 }}
+          <td>{{ user.title }}
+          <td>{{ user.first_name }}
+          <td>{{ user.last_name }}
+          <td>{{ user.structure_level }}
+          <td>{{ user.groups }}
+          <td>{{ user.comment }}
+    </table>
+
+  <div class="clearfix">
+    <button ng-if="!csvimporting" ng-click="importByCSV(csv.result)" class="btn btn-primary pull-left" translate>Import</button>
+    <div ng-if="csvimporting">
+      <progressbar animate="false"  type="success" max="csvlines" value="csvimportcounter">
+        <i>{{ csvimportcounter }} / {{ csvlines }} {{ "imported" | translate }}</i>
+      </progressbar>
+    </div>
+    <a ng-if="csvimported" ui-sref="users.user.list" class="btn btn-sm btn-default">
+      <i class="fa fa-angle-double-left fa-lg"></i>
+      <translate>Back to users overview</translate>
+    </a>
+  </div>
+    <p>
+      <div class="form-group">
+        <button ng-if="!csvimporting" ng-click="clear()" class="btn btn-default" translate>
+          Clear
+        </button>
+      </div>
+  </div>
 </div>
diff --git a/openslides/users/static/templates/users/user-list.html b/openslides/users/static/templates/users/user-list.html
index bc4905c3a..861140ba6 100644
--- a/openslides/users/static/templates/users/user-list.html
+++ b/openslides/users/static/templates/users/user-list.html
@@ -1,131 +1,153 @@
-<h1 translate>Participants</h1>
-
-<div id="submenu">
-  <a ng-click="newDialog()" os-perms="users.can_manage" class="btn btn-primary btn-sm">
-    <i class="fa fa-user-plus fa-lg"></i>
-    <translate>New</translate>
-  </a>
-  <a ui-sref="users.group.list" os-perms="users.can_manage" class="btn btn-default btn-sm">
-    <i class="fa fa-group fa-lg"></i>
-    <translate>Groups</translate>
-  </a>
-  <a ui-sref="users.user.import" os-perms="users.can_manage" class="btn btn-default btn-sm">
-    <i class="fa fa-download fa-lg"></i>
-    <translate>Import</translate>
-  </a>
-  <div class="btn-group" uib-dropdown>
-    <button os-perms="users.can_manage" class="btn btn-default btn-sm" uib-dropdown-toggle>
-      <i class="fa fa-file-pdf-o fa-lg"></i>
-      <translate>PDF</translate>
-      <span class="caret"></span>
-    </button>
-    <ul class="uib-dropdown-menu uib-dropdown-menu-right">
-      <li><a ui-sref="user_listpdf" target="_blank">
-            <i class="fa fa-list fa-fw"></i>
-            <translate>List of participants</translate>
-          </a>
-      <li os-perms="users.can_manage">
-          <a ui-sref="user_passwordspdf" target="_blank">
-            <i class="fa fa-qrcode fa-fw"></i>
-            <translate>List of access data</translate>
-          </a>
-    </ul>
+<div class="header">
+  <div class="title">
+    <div class="submenu">
+      <a ng-click="newDialog()" os-perms="users.can_manage" class="btn btn-primary btn-sm">
+        <i class="fa fa-user-plus fa-lg"></i>
+        <translate>New</translate>
+      </a>
+      <a ui-sref="users.group.list" os-perms="users.can_manage" class="btn btn-default btn-sm">
+        <i class="fa fa-group fa-lg"></i>
+        <translate>Groups</translate>
+      </a>
+      <a ui-sref="users.user.import" os-perms="users.can_manage" class="btn btn-default btn-sm">
+        <i class="fa fa-download fa-lg"></i>
+        <translate>Import</translate>
+      </a>
+      <div class="btn-group" uib-dropdown>
+        <button os-perms="users.can_manage" class="btn btn-default btn-sm" uib-dropdown-toggle>
+          <i class="fa fa-file-pdf-o fa-lg"></i>
+          <translate>PDF</translate>
+          <span class="caret"></span>
+        </button>
+        <ul class="uib-dropdown-menu uib-dropdown-menu-right">
+          <li><a ui-sref="user_listpdf" target="_blank">
+                <i class="fa fa-list fa-fw"></i>
+                <translate>List of participants</translate>
+              </a>
+          <li os-perms="users.can_manage">
+              <a ui-sref="user_passwordspdf" target="_blank">
+                <i class="fa fa-qrcode fa-fw"></i>
+                <translate>List of access data</translate>
+              </a>
+        </ul>
+      </div>
+    </div>
+    <h1 translate>Participants</h1>
   </div>
 </div>
 
-<div class="row form-group">
-  <div class="col-sm-8">
-    <form class="form-inline">
+<div class="details">
+  <div class="row">
+    <div class="col-sm-6">
       <!-- delete mode -->
-      <div os-perms-lite="users.can_manage" class="form-group">
-        <label for="deleteSwitcher" translate>Delete mode</label>
-        <switch id="deleteSwitcher" ng-model="isDeleteMode" ng-change="uncheckAll()"
-            on="{{'On'|translate}}" off="{{'Off'|translate}}"
-            class="green wide form-control">
-        </switch>
+      <button os-perms-lite="users.can_manage" class="btn btn-default"
+          ng-click="isDeleteMode = !isDeleteMode; uncheckAll()">
+        <i class="fa fa-check-square-o"></i>
+        <translate>Select</translate>...
+      </button>
+    </div>
+    <div class="col-sm-6">
+      <div class="form-inline text-right">
+        <div class="form-group">
+          <div class="input-group">
+            <div class="input-group-addon"><i class="fa fa-search"></i></div>
+            <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+               placeholder="{{ 'Search' | translate}}">
+          </div>
+        </div>
+        <button class="btn btn-default" ng-click="isFilter = !isFilter">
+          <i class="fa fa-filter"></i>
+          <translate>Filter</translate>...
+        </button>
       </div>
-      <!-- delete button -->
-      <a ng-show="isDeleteMode && (users|filter:{selected:true}).length > 0"
-          os-perms="users.can_manage" ng-click="deleteMultiple()"
-          class="btn btn-primary btn-sm form-control">
-        <i class="fa fa-trash fa-lg"></i>
-        <translate>Delete selected users</translate>
-      </a>
+    </div>
+  </div>
+  <div uib-collapse="!isFilter" class="row">
+    <div class="col-sm-6 text-right"></div>
+    <div class="col-sm-6 text-right">
       <!-- isPresent filter -->
       <input type="checkbox" ng-model="filterPresent" ng-false-value="''">
       <translate>Is present</translate>
-    </form>
-  </div>
-  <div class="col-sm-4">
-    <div class="input-group">
-      <div class="input-group-addon"><i class="fa fa-filter"></i></div>
-      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-         placeholder="{{ 'Filter' | translate}}">
     </div>
   </div>
-</div>
+  <div uib-collapse="!isDeleteMode" class="row spacer">
+    <div class="col-sm-12 text-left">
+      <!-- delete button -->
+      <a ng-show="isDeleteMode"
+          os-perms="users.can_manage" ng-click="delete()"
+          class="btn btn-primary">
+        <i class="fa fa-trash fa-lg"></i>
+        <translate>Delete selected items</translate>
+      </a>
+    </div>
+  </div>
 
-<table class="table table-striped table-bordered table-hover">
-  <thead>
-    <tr>
-      <!-- projector column -->
-      <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn">
-      <!-- delete selection column -->
-      <th ng-show="isDeleteMode" os-perms-lite="users.can_manage" class="firstColumn deleteColumn">
-        <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
-      <th ng-click="toggleSort('first_name')" class="sortable">
-        <translate>Name</translate>
-        <!-- TODO: sort by first OR last name -->
-        <i class="pull-right fa" ng-show="sortColumn === 'first_name' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('structure_level')" class="sortable optional">
-        <translate>Structure level</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'structure_level' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('groups')" class="sortable optional">
-        <translate>Groups</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'groups' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-      <th ng-click="toggleSort('is_present')" class="sortable minimum">
-        <translate>Present</translate>
-        <i class="pull-right fa" ng-show="sortColumn === 'is_present' && header.sortable != false"
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-        </i>
-  <tbody>
-    <tr ng-repeat="user in users | filter: filter.search | filter: {is_present: filterPresent} |
-        orderBy: sortColumn:reverse"
-        ng-class="{ 'activeline': user.isProjected(), 'selected': assignment.selected  }">
-      <!-- projector column -->
-      <td ng-show="!isDeleteMode" os-perms="core.can_manage_projector">
-        <a class="btn btn-default btn-sm"
-            ng-class="{ 'btn-primary': user.isProjected() }"
-            ng-click="user.project()"
-            title="{{ 'Project user' | translate }}">
-          <i class="fa fa-video-camera"></i>
-        </a>
-      <!-- delete selection column -->
-      <td ng-show="isDeleteMode" os-perms="users.can_manage" class="deleteColumn">
-        <input type="checkbox" ng-model="user.selected">
-      <!-- user data colums -->
-      <td ng-mouseover="user.hover=true" ng-mouseleave="user.hover=false">
-        <strong><a ui-sref="users.user.detail({id: user.id})">{{ user.get_short_name() }}</a></strong>
-        <div ng-if="user.comment">
-          <small><i class="fa fa-info-circle"></i> {{ user.comment }}</small>
-        </div>
-        <div os-perms="users.can_manage" class="hoverActions" ng-class="{'hiddenDiv': !user.hover}">
-          <a href="" ng-click="editDialog(user)" translate>Edit</a> |
-          <!-- TODO: translate confirm message -->
-          <a href="" class="text-danger"
-              ng-bootbox-confirm="Are you sure you want to delete <b>{{ user.get_short_name() }}</b>?"
-              ng-bootbox-confirm-action="delete(user)" translate>Delete</a>
-        </div>
-      <td class="optional">{{ user.structure_level }}
-      <td class="optional">
-        <div ng-repeat="group in user.groups">
-          {{ (groups | filter: {id: group})[0].name }}
-        </div>
-      <td><input type="checkbox" ng-model="user.is_present" ng-click="save(user)">
-</table>
+  <i class="spacer">
+    {{ users.length }} {{ "participants" | translate }}<span ng-if="(users|filter:{selected:true}).length > 0">,
+    {{(users|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
+  </i>
+  <table class="table table-striped table-bordered table-hover">
+    <thead>
+      <tr>
+        <!-- projector column -->
+        <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn">
+        <!-- delete selection column -->
+        <th ng-show="isDeleteMode" os-perms-lite="users.can_manage" class="firstColumn deleteColumn">
+          <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
+        <th ng-click="toggleSort('first_name')" class="sortable">
+          <translate>Name</translate>
+          <!-- TODO: sort by first OR last name -->
+          <i class="pull-right fa" ng-show="sortColumn === 'first_name' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('structure_level')" class="sortable optional">
+          <translate>Structure level</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'structure_level' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('groups')" class="sortable optional">
+          <translate>Groups</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'groups' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+        <th ng-click="toggleSort('is_present')" class="sortable minimum">
+          <translate>Present</translate>
+          <i class="pull-right fa" ng-show="sortColumn === 'is_present' && header.sortable != false"
+              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+          </i>
+    <tbody>
+      <tr ng-repeat="user in users | filter: filter.search | filter: {is_present: filterPresent} |
+          orderBy: sortColumn:reverse"
+          ng-class="{ 'activeline': user.isProjected(), 'selected': user.selected  }">
+        <!-- projector column -->
+        <td ng-show="!isDeleteMode" os-perms="core.can_manage_projector">
+          <a class="btn btn-default btn-sm"
+              ng-class="{ 'btn-primary': user.isProjected() }"
+              ng-click="user.project()"
+              title="{{ 'Project user' | translate }}">
+            <i class="fa fa-video-camera"></i>
+          </a>
+        <!-- delete selection column -->
+        <td ng-show="isDeleteMode" os-perms="users.can_manage" class="deleteColumn">
+          <input type="checkbox" ng-model="user.selected">
+        <!-- user data colums -->
+        <td ng-mouseover="user.hover=true" ng-mouseleave="user.hover=false">
+          <strong><a ui-sref="users.user.detail({id: user.id})">{{ user.get_short_name() }}</a></strong>
+          <div ng-if="user.comment">
+            <small><i class="fa fa-info-circle"></i> {{ user.comment }}</small>
+          </div>
+          <div os-perms="users.can_manage" class="hoverActions" ng-class="{'hiddenDiv': !user.hover}">
+            <a href="" ng-click="editDialog(user)" translate>Edit</a> |
+            <!-- TODO: translate confirm message -->
+            <a href="" class="text-danger"
+                ng-bootbox-confirm="Are you sure you want to delete <b>{{ user.get_short_name() }}</b>?"
+                ng-bootbox-confirm-action="delete(user)" translate>Delete</a>
+          </div>
+        <td class="optional">{{ user.structure_level }}
+        <td class="optional">
+          <div ng-repeat="group in user.groups">
+            {{ (groups | filter: {id: group})[0].name }}
+          </div>
+        <td><input type="checkbox" ng-model="user.is_present" ng-click="save(user)">
+  </table>
+</div>