diff --git a/css/style.css b/css/style.css
index 459e651b9..c14572b35 100644
--- a/css/style.css
+++ b/css/style.css
@@ -148,61 +148,28 @@ button.button-inline:hover {
 	padding: 7px;
 }
 
-#board-header #home {
-	position: relative;
-	padding: 0px;
-}
-
-#board-actions {
-	font-size: 10pt;
-	float: right;
-	position: relative;
-	color: #888;
-	margin: 8px;
-}
-
-#board-actions .filter .filter-button {
-	margin-left: 10px;
-	margin-right: 10px;
-}
-
-#board-actions .filter:hover {
-	color: #333333;
-	cursor: pointer;
-}
-
-#board-header-controls {
-	display: flex;
-	align-items: center;
-	position: relative;
+.board-header-controls {
 	margin-left: auto;
 }
 
-#board-header-controls-menu {
-  display: none;
+.board-header-controls.app-popover-menu-utils {
+	display: flex;
 }
 
-#board-header-controls-menu button {
-	padding: 15px 20px 15px 20px;
+.board-header-controls > button {
+	padding: 16px 20px;
 }
 
-#board-header-controls-menu #popover-controls {
+.board-header-controls.app-popover-menu-utils #popover-controls {
 	display: flex;
 	align-items: center;
-	padding-left: 3px;
 }
 
-#board-header-controls-menu .popovermenu{
+.board-header-controls.app-popover-menu-utils .popovermenu {
 	margin-top: 35px;
 	margin-right: 6px;
 }
 
-.board-action-button,
-.board-action-button * {
-	display: flex;
-	align-items: center;
-}
-
 .filter-select {
 	position: absolute;
 	right: auto;
@@ -224,20 +191,10 @@ button.button-inline:hover {
 	margin-right: 5px;
 }
 
-#board-actions div {
-	padding: 5px;
-	float: left;
-}
-
-.board-actions button {
-	border: none;
-	background-color: transparent;
-}
-
 #stack-add {
 	background-color: rgba(240,240,240,.9);
 	border-radius: 3px;
-	margin-right: 3px;
+	margin: 3px;
 }
 
 #stack-add > form {
@@ -248,7 +205,7 @@ button.button-inline:hover {
 	padding: 4px 5px;
 	border: 0px none transparent;
 	min-height: initial;
-	background-color: rgba(240,240,240,.9);
+	background-color: transparent;
 }
 
 #stack-add input:invalid {
@@ -887,14 +844,14 @@ button.button-inline:hover {
  * Mobile optimizations
  */
 
-@media (max-width: 480px) {
+@media (min-width: 481px) {
 	/* hide board actions on mobile */
-	#board-header-controls {
-		display: none !important;
+	.board-header-controls {
+		display: flex;
 	}
 
-	#board-header-controls-menu {
-		display: flex;
+	.board-header-controls.app-popover-menu-utils {
+		display: none;
 	}
 }
 
diff --git a/templates/part.board.headerControls.php b/templates/part.board.headerControls.php
new file mode 100644
index 000000000..df05998fe
--- /dev/null
+++ b/templates/part.board.headerControls.php
@@ -0,0 +1,20 @@
+<div id="stack-add" ng-if="boardservice.canEdit() && checkCanEdit()">
+    <form class="ng-pristine ng-valid" ng-submit="createStack()">
+        <input type="text" class="no-close" placeholder="Add a new stack"
+            ng-focus="status.addStack=true"
+            ng-blur="status.addStack=false"
+            ng-model="newStack.title" required
+            maxlength="100" />
+        <button class="button-inline icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button>
+    </form>
+</div>
+
+<a class="board-action-button button" ng-if="filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
+    <i class="icon icon-archive"></i>
+</a>
+<a class="board-action-button button" ng-if="filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
+    <i class="icon icon-archive"></i>
+</a>
+<a class="board-action-button button" ui-sref="board.detail({ id: id })"  title="<?php p($l->t('Board details')); ?>">
+    <i class="icon icon-details"></i>
+</a>
diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php
index 4a457d5c7..0b9c36a27 100644
--- a/templates/part.board.mainView.php
+++ b/templates/part.board.mainView.php
@@ -4,6 +4,7 @@
 		<h2>{{ statusservice.title }}</h2>
 		<p>{{ statusservice.text }}</p></div>
 </div>
+
 <div id="board-header">
 	<a class="crumb" href="#" title="<?php p($l->t('All Boards')); ?>">
 		<i class="icon icon-home"></i>
@@ -12,50 +13,14 @@
 	<h1 class="title" style="border-bottom: 2px solid #{{boardservice.getCurrent().color }};">
 		{{ boardservice.getCurrent().title }}
 	</h1>
-	<div id="board-header-controls">
-		<div id="stack-add" ng-if="boardservice.canEdit() && checkCanEdit()">
-			<form class="ng-pristine ng-valid" ng-submit="createStack()">
-				<input type="text" placeholder="Add a new stack"
-					ng-focus="status.addStack=true"
-					ng-blur="status.addStack=false"
-					ng-model="newStack.title" required
-					maxlength="100" />
-				<button class="button-inline icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button>
-			</form>
-		</div>
-		<a class="board-action-button button" ng-if="filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
-			<i class="icon icon-archive"></i>
-		</a>
-		<a class="board-action-button button" ng-if="filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
-			<i class="icon icon-archive"></i>
-		</a>
-		<a class="board-action-button button" ui-sref="board.detail({ id: id })"  title="<?php p($l->t('Board details')); ?>">
-			<i class="icon icon-details"></i>
-		</a>
+	<div class="board-header-controls hidden">
+		<?php print_unescaped($this->inc('part.board.headerControls')); ?>
 	</div>
-	<div id="board-header-controls-menu" class="app-popover-menu-utils">
-		<button class="icon-more button board-action-button"></button>
+	<div class="board-header-controls app-popover-menu-utils">
+		<button class="icon-more button"></button>
 		<div class="popovermenu hidden">
 			<div id="popover-controls">
-				<div id="stack-add" ng-if="boardservice.canEdit() && checkCanEdit()">
-					<form class="ng-pristine ng-valid" ng-submit="createStack()">
-						<input type="text" class="no-close" placeholder="Add a new stack"
-							ng-focus="status.addStack=true"
-							ng-blur="status.addStack=false"
-							ng-model="newStack.title" required
-							maxlength="100" />
-						<button class="button-inline icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button>
-					</form>
-				</div>
-				<a class="board-action-button button" ng-if="filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
-					<i class="icon icon-archive"></i>
-				</a>
-				<a class="board-action-button button" ng-if="filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
-					<i class="icon icon-archive"></i>
-				</a>
-				<a class="board-action-button button" ui-sref="board.detail({ id: id })"  title="<?php p($l->t('Board details')); ?>">
-					<i class="icon icon-details"></i>
-				</a>
+				<?php print_unescaped($this->inc('part.board.headerControls')); ?>
 			</div>
 		</div>
 	</div>