diff --git a/css/style.scss b/css/style.scss
index 89e7db85e..d81e2c45d 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -655,12 +655,17 @@ input.input-inline {
  */
 
 #sidebar-header {
+
+	position: sticky;
+	top: 0;
+	background-color: $color-main-background;
+	z-index: 200;
+
 	h3 {
 		font-size: 14pt;
-		padding: 9px 10px;
+		padding: 15px 15px 3px;
 		margin: 0;
 		overflow: hidden;
-		background-color: $color-lightgrey;
 
 		input {
 			min-height: 0px;
@@ -668,6 +673,12 @@ input.input-inline {
 		}
 	}
 
+	#card-dates {
+		font-size: 80%;
+		opacity: 0.5;
+		padding-left: 15px;
+	}
+
 	.icon-close {
 		position: absolute;
 		top: 0px;
@@ -708,7 +719,7 @@ input.input-inline {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
-	padding: 15px;
+	padding: 0 15px;
 
 	.duedate {
 		display: flex;
@@ -785,12 +796,6 @@ input.input-inline {
 		display: inline;
 	}
 
-	#card-dates {
-		font-size: 80%;
-		opacity: 0.5;
-		text-align: right;
-	}
-
 	.card-details-assign-users {
 
 		.select2 .ui-select-choices-row-inner {
@@ -1336,7 +1341,7 @@ input.input-inline {
 	padding: 0;
 	float: left !important;
 	display: block;
-	border-radius: 0px 0px 5px 5px !important;
+	border-radius: 3px !important;
 
 	.select-label {
 		color: $color-primary-text;
@@ -1485,6 +1490,21 @@ input.input-inline {
 	}
 }
 
+.section-wrapper {
+	display: flex;
+	max-width: 100%;
+	margin-top: 10px;
+}
+
+.section-label {
+	background-position: 0px center;
+	width:28px;
+	flex-shrink: 0;
+}
+
+.section-details {
+	flex-grow: 1;
+}
 /**
  * Mobile optimizations
  */
diff --git a/templates/part.board.headerControls.php b/templates/part.board.headerControls.php
index 375cf9bb2..363bd452f 100644
--- a/templates/part.board.headerControls.php
+++ b/templates/part.board.headerControls.php
@@ -13,8 +13,8 @@
     </form>
 </div>
 
-<button ng-if="params.filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
-    <i class="icon icon-archive"></i>
+<button ng-if="params.filter!='archive'" ng-click="switchFilter('archive')" title="<?php p($l->t('Show archived cards')); ?>">
+    <i class="icon icon-archive" style="opacity:0.5;"></i>
     <span class="hidden-visually"><?php p($l->t('Show archived cards')); ?></span>
 </button>
 <button ng-if="params.filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
diff --git a/templates/part.card.php b/templates/part.card.php
index a2913e63e..183b2d469 100644
--- a/templates/part.card.php
+++ b/templates/part.card.php
@@ -23,70 +23,66 @@
 			{{ cardservice.getCurrent().title }}
 		</div>
 	</h3>
-</div>
-
-<div id="card-meta" class="card-block">
 	<div id="card-dates">
 		<?php p($l->t('Modified:')); ?> <span class="live-relative-timestamp" data-timestamp="{{cardservice.getCurrent().lastModified*1000}}">{{ cardservice.getCurrent().lastModified|relativeDateFilter }}</span>
 		<?php p($l->t('Created:')); ?> <span class="live-relative-timestamp" data-timestamp="{{cardservice.getCurrent().createdAt*1000}}">{{ cardservice.getCurrent().createdAt|relativeDateFilter }}</span>
-		<?php p($l->t('by')); ?>
-		<span>{{ cardservice.getCurrent().owner.displayname }}</span>
 	</div>
-	<div class="section-header">
-		<h4 id="card-tag-label" ng-if="!(boardservice.isArchived() || card.archived) && card.labels">
-			<?php p($l->t('Tags')); ?>
-		</h4>
+</div>
+
+<div id="card-meta" class="card-block">
+
+	<div class="section-wrapper" ng-if="!(boardservice.isArchived() || card.archived) && card.labels">
+		<div class="section-label icon-tag" data-toggle="tooltip" data-placement="right" title="<?php p($l->t('Tags')); ?>"><span class="hidden-visually"><?php p($l->t('Tags')); ?></span></div>
+		<div class="section-details">
+			<ui-select multiple tagging="" ng-model="card.labels" theme="select2"
+					   ng-disabled="boardservice.isArchived() || card.archived"
+					   title="<?php p($l->t('Choose a tag')); ?>"
+					   placeholder="<?php p($l->t('Add a tag')); ?>"
+					   on-select="labelAssign($item, $model)"
+					   on-remove="labelRemove($item, $model)" ng-disabled="!boardservice.canEdit() || archived">
+				<ui-select-match placeholder="<?php p($l->t('Select tags')); ?>">
+					<span class="select-label" ng-style="labelStyle($item.color)">{{$item.title}}&nbsp;</span>
+				</ui-select-match>
+				<ui-select-choices
+						repeat="label in boardservice.getCurrent().labels | filter:$select.search track by label.id">
+					<span class="choose-label" ng-style="labelStyle(label.color)">{{label.title}}</span>
+				</ui-select-choices>
+			</ui-select>
+		</div>
 	</div>
-	<div id="labels" ng-if="!(boardservice.isArchived() || card.archived) && card.labels">
-		<ui-select multiple tagging="" ng-model="card.labels" theme="select2"
-				   ng-disabled="boardservice.isArchived() || card.archived"
-				   title="<?php p($l->t('Choose a tag')); ?>"
-				   placeholder="<?php p($l->t('Add a tag')); ?>"
-				   on-select="labelAssign($item, $model)"
-				   on-remove="labelRemove($item, $model)" ng-disabled="!boardservice.canEdit() || archived">
-			<ui-select-match placeholder="<?php p($l->t('Select tags')); ?>">
-				<span class="select-label" ng-style="labelStyle($item.color)">{{$item.title}}&nbsp;</span>
-			</ui-select-match>
-			<ui-select-choices
-				repeat="label in boardservice.getCurrent().labels | filter:$select.search track by label.id">
-				<span class="choose-label" ng-style="labelStyle(label.color)">{{label.title}}</span>
-			</ui-select-choices>
-		</ui-select>
-	</div>
-	<div class="section-header" ng-click="toggleAssignUser()">
-		<h4><?php p($l->t('Assign users')); ?></h4>
-		<button class="button icon-add"></button>
-	</div>
-	<div class="section-content card-details-assign-users" ng-if="cardservice.getCurrent()">
-		<ui-select id="assignUserSelect" class="card-details-assign-user" ng-model="status.assignedUser" ng-show="status.showAssignUser" uis-open-close="assingUserOpenClose(isOpen)"
-				   theme="select2"
-				   title="<?php p($l->t('Choose a user to assign')); ?>" placeholder="<?php p($l->t('Choose a user to assign')); ?>"
-				   on-select="addAssignedUser($item)">
-			<ui-select-match placeholder="<?php p($l->t('Assign this card to a user')); ?>">
-				<span><i class="icon icon-{{$item.type}}"></i> {{ $item.participant.displayname }}</span>
-			</ui-select-match>
-			<ui-select-choices repeat="acl in boardservice.getUsers() | filter: $select.search | withoutAssignedUsers: cardservice.getCurrent().assignedUsers track by acl.uid">
-				<div class="avatardiv" avatar ng-attr-user="{{ acl.uid }}" ng-attr-displayname="{{ acl.displayname }}" ng-if="boardservice.id"></div><span>{{ acl.displayname }}</span>
-			</ui-select-choices>
-		</ui-select>
-		<div class="card-details-assign-users-list">
-			<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers track by user.participant.uid">
-				<avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" contactsmenudelete ></avatar>
+
+	<div class="section-wrapper card-details-assign-users" ng-click="toggleAssignUser()">
+		<div class="section-label icon-user" data-toggle="tooltip" data-placement="right" title="<?php p($l->t('Assign users')); ?>"><span class="hidden-visually"><?php p($l->t('Assign users')); ?></span></div>
+		<div class="section-details" ng-if="cardservice.getCurrent()">
+			<ui-select id="assignUserSelect" class="card-details-assign-user" ng-model="status.assignedUser" ng-show="status.showAssignUser" uis-open-close="assingUserOpenClose(isOpen)"
+					   theme="select2"
+					   title="<?php p($l->t('Choose a user to assign')); ?>" placeholder="<?php p($l->t('Choose a user to assign')); ?>"
+					   on-select="addAssignedUser($item)">
+				<ui-select-match placeholder="<?php p($l->t('Assign this card to a user')); ?>">
+					<span><i class="icon icon-{{$item.type}}"></i> {{ $item.participant.displayname }}</span>
+				</ui-select-match>
+				<ui-select-choices repeat="acl in boardservice.getUsers() | filter: $select.search | withoutAssignedUsers: cardservice.getCurrent().assignedUsers track by acl.uid">
+					<div class="avatardiv" avatar ng-attr-user="{{ acl.uid }}" ng-attr-displayname="{{ acl.displayname }}" ng-if="boardservice.id"></div><span>{{ acl.displayname }}</span>
+				</ui-select-choices>
+			</ui-select>
+			<div class="card-details-assign-users-list">
+				<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers track by user.participant.uid">
+					<avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" contactsmenudelete ></avatar>
+				</div>
+				<a class="icon-add icon-inline"></a>
 			</div>
 		</div>
 	</div>
 
-	<div class="section-header">
-		<h4>
-			<?php p($l->t('Due date')); ?>
-		</h4>
-	</div>
-	<div class="duedate">
-		<input class="datepicker-input medium focus" type="text" placeholder="<?php p($l->t('Click to set')); ?>" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" ng-disabled="(boardservice.isArchived() || card.archived)" />
-		<input class="timepicker-input medium focus" type="text" placeholder="00:00" ng-disabled="!cardservice.getCurrent().duedate || (boardservice.isArchived() || card.archived)" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
-		<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"><span class="hidden-visually"><?php p($l->t('Remove due date')); ?></span></button>
-	</div>
 
+	<div class="section-wrapper">
+		<div class="section-label icon-calendar-dark" data-placement="right" title="<?php p($l->t('Due date')); ?>"><span class="hidden-visually"><?php p($l->t('Due date')); ?></span></div>
+		<div class="section-details duedate">
+			<input class="datepicker-input medium focus" type="text" placeholder="<?php p($l->t('Click to set')); ?>" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" ng-disabled="(boardservice.isArchived() || card.archived)" />
+			<input class="timepicker-input medium focus" type="text" placeholder="00:00" ng-disabled="!cardservice.getCurrent().duedate || (boardservice.isArchived() || card.archived)" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
+			<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"><span class="hidden-visually"><?php p($l->t('Remove due date')); ?></span></button>
+		</div>
+	</div>
 
 	<div class="section-header-tabbed">
 		<ul class="tabHeaders ng-scope">