diff --git a/Makefile b/Makefile
index 0af7aa611..e398722f7 100644
--- a/Makefile
+++ b/Makefile
@@ -25,14 +25,11 @@ install-deps:
 	cd js && npm install --deps
 	cd js && ./node_modules/.bin/bower install
 
-build: build-js build-css
+build: build-js
 
 build-js: install-deps
 	cd js && ./node_modules/.bin/grunt build
 
-build-css: install-deps
-	./js/node_modules/node-sass/bin/node-sass --output-style compressed css/legacy.scss css/style.css
-
 watch:
 	cd js && ./node_modules/.bin/grunt watch
 
diff --git a/css/legacy.scss b/css/comp-appnav.scss
similarity index 60%
rename from css/legacy.scss
rename to css/comp-appnav.scss
index e99022075..49b0b2543 100644
--- a/css/legacy.scss
+++ b/css/comp-appnav.scss
@@ -1,5 +1,5 @@
 /*
- * @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
+ * @copyright Copyright (c) 2017 Julius Härtl <jus@bitgrid.net>
  *
  * @author Julius Härtl <jus@bitgrid.net>
  *
@@ -20,5 +20,26 @@
  *
  */
 
-@import '../../../core/css/variables.scss';
-@import 'style.scss';
+/**
+ * Hotfix for support <NC13 with new app sidebar
+ */
+#app-navigation {
+  .app-navigation-entry-menu.open {
+    ul li a {
+      background-position: 10px center;
+      padding: 0 10px 0 36px !important;
+    }
+  }
+  .app-navigation-entry-edit {
+    display: none;
+  }
+  .editing {
+    .app-navigation-entry-edit {
+      display: block;
+      position: absolute;
+      background: $color-main-background;
+      height: auto;
+      z-index: 250;
+    }
+  }
+}
diff --git a/css/icons.scss b/css/icons.scss
new file mode 100644
index 000000000..efa315e08
--- /dev/null
+++ b/css/icons.scss
@@ -0,0 +1,42 @@
+/**
+ * Custom icons
+ */
+.icon-deck {
+  background-image: url('../img/deck-dark.svg');
+}
+
+.icon-group {
+  background-image: url('../../../settings/img/users.svg');
+}
+
+.icon-help {
+  background-image: url('../../../settings/img/help.svg');
+}
+
+.icon-add-white {
+  background-image: url('../img/add-white.svg');
+}
+
+.icon-archive {
+  background-image: url('../img/archive.svg');
+}
+
+.icon-archive-white {
+  background-image: url('../img/archive-white.svg');
+}
+
+.icon-details {
+  background-image: url('../img/details.svg');
+}
+
+.icon-details-white {
+  background-image: url('../img/details-white.svg');
+}
+
+.icon-home {
+  background-image: url('../../../core/img/places/home.svg');
+}
+
+.icon-badge {
+  background-image: url('../../../core/img/places/calendar-dark.svg');
+}
\ No newline at end of file
diff --git a/css/style.scss b/css/style.scss
index 0c9dcaeda..8ea555390 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -22,19 +22,14 @@
  *
  */
 
-/**
- * Variables
- */
-$color-main-background: #fff;
-$color-primary-text: #fff;
-$color-error: #e9322d;
-$color-warning: #fbd850;
 $color-warning-light: nc-lighten($color-warning, 15%);
-$color-success: #46ba61;
 $color-lightgrey: nc-darken($color-main-background, 4%);
 $color-grey: nc-darken($color-main-background, 7%);
 $color-darkgrey: nc-darken($color-main-background, 32%);
 
+@import 'comp-appnav.scss';
+@import 'icons.scss';
+
 /**
  * General styles
  */
@@ -75,24 +70,9 @@ input.input-inline {
 /**
  * Navigation sidebar
  */
-.app-navigation-entry-menu {
-	ul {
-		flex-direction: row;
-	}
-}
 
 #app-navigation {
-	.app-navigation-entry-edit {
-		height: auto;
-
-		.colorselect div{
-			height: 32px;
-		}
-		form {
-			display: flex;
-		}
-	}
-
+	/** menu */
 	.board-bullet {
 		position: absolute;
 		margin-left: 17px;
@@ -103,21 +83,30 @@ input.input-inline {
 		border-radius: 50%;
 		cursor: pointer;
 	}
+	.app-navigation-entry-utils-menu-share i {
+		height: 100%;
+		width: 100%;
+	}
 
-	.app-navigation-entry-utils {
-		.app-navigation-entry-utils-menu-button {
-			display: block !important; // TODO: is this needed?
-		}
+	li {
+		transition: height 250ms ease-in-out, opacity 250ms ease-in-out, z-index 250ms ease-in-out;
+	}
+	.editing {
+		height: 82px;
 
-		.app-navigation-entry-utils-menu-share {
-			display: flex !important;
-			padding: 14px;
-			opacity: 0.5;
+		.icon-add {
+			background-position: 14px 14px;
 		}
 	}
-	.app-navigation-entry-menu ul {
-		flex-direction: row;
+	.app-navigation-entry-edit {
+		.colorselect div{
+			height: 32px;
+		}
+		form {
+			display: flex;
+		}
 	}
+
 }
 
 /**
@@ -510,8 +499,6 @@ input.input-inline {
 	z-index: 999;
 	opacity: 1;
 	display: block;
-	margin-top: 25px;
-	margin-right: 0px;
 
 	&.hidden {
 		display: none;
@@ -848,6 +835,7 @@ input.input-inline {
 
 			button {
 				opacity: 0.5;
+				padding: 22px;
 			}
 
 			&:hover button {
@@ -866,10 +854,6 @@ input.input-inline {
 		opacity: 0.5;
 	}
 
-	.popovermenu {
-		margin-top: 5px;
-	}
-
 	.board-edit-controls {
 		display: flex;
 	}
@@ -1166,48 +1150,6 @@ input.input-inline {
 	}
 }
 
-/**
- * Custom icons
- */
-.icon-deck {
-	background-image: url('../img/deck-dark.svg');
-}
-
-.icon-group {
-	background-image: url('../../../settings/img/users.svg');
-}
-
-.icon-help {
-	background-image: url('../../../settings/img/help.svg');
-}
-
-.icon-add-white {
-	background-image: url('../img/add-white.svg');
-}
-
-.icon-archive {
-	background-image: url('../img/archive.svg');
-}
-
-.icon-archive-white {
-	background-image: url('../img/archive-white.svg');
-}
-
-.icon-details {
-	background-image: url('../img/details.svg');
-}
-
-.icon-details-white {
-	background-image: url('../img/details-white.svg');
-}
-
-.icon-home {
-	background-image: url('../../../core/img/places/home.svg');
-}
-
-.icon-badge {
-	background-image: url('../../../core/img/places/calendar-dark.svg');
-}
 
 /**
  * Hotfix for https://github.com/angular-ui/ui-select/issues/1652
diff --git a/js/controller/ListController.js b/js/controller/ListController.js
index e9ffe5f43..419572ce4 100644
--- a/js/controller/ListController.js
+++ b/js/controller/ListController.js
@@ -22,7 +22,8 @@
 
 /* global app angular */
 
-app.controller('ListController', function ($scope, $location, $filter, BoardService, $element, $timeout, $stateParams, $state) {
+app.controller('ListController', function ($scope, $location, $filter, BoardService, $element, $timeout, $stateParams, $state, StatusService) {
+
 	function calculateNewColor() {
 		var boards = BoardService.getAll();
 		var boardKeys = Object.keys(boards);
@@ -53,44 +54,66 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ
 	};
 	$scope.colors = ['0082c9', '00c9c6','00c906', 'c92b00', 'F1DB50', '7C31CC', '3A3B3D', 'CACBCD'];
 	$scope.boardservice = BoardService;
-	$scope.newBoard.color = calculateNewColor();
 	$scope.updatingBoard = null;
 
-	// FIXME: not nice, but we want to load this only once
-	if($element.attr('id') === 'app-navigation') {
-		BoardService.fetchAll().then(function(data) {
-			$scope.filterData();
-		}, function (error) {
-			// TODO: show error when loading fails
-		});
-	}
-
-	$scope.filterData = function () {
-		angular.copy($scope.boardservice.getData(), $scope.boardservice.sorted);
-		angular.copy($scope.boardservice.sorted, $scope.boardservice.sidebar);
-		$scope.boardservice.sidebar = $filter('orderBy')($scope.boardservice.sidebar, 'title');
-		$scope.boardservice.sidebar = $filter('cardFilter')($scope.boardservice.sidebar, {archived: false});
-
-		if ($scope.status.filter === 'archived') {
-			var filter = {};
-			filter[$scope.status.filter] = true;
-			$scope.boardservice.sorted = $filter('cardFilter')($scope.boardservice.sorted, filter);
-		} else if ($scope.status.filter === 'shared') {
-			$scope.boardservice.sorted = $filter('cardFilter')($scope.boardservice.sorted, {archived: false});
-			$scope.boardservice.sorted = $filter('boardFilterAcl')($scope.boardservice.sorted);
+	var filterData = function () {
+		if($element.attr('id') === 'app-navigation') {
+			$scope.boardservice.sidebar = $scope.boardservice.getData();
+			$scope.boardservice.sidebar = $filter('orderBy')($scope.boardservice.sidebar, 'title');
+			$scope.boardservice.sidebar = $filter('cardFilter')($scope.boardservice.sidebar, {archived: false});
 		} else {
-			$scope.boardservice.sorted = $filter('cardFilter')($scope.boardservice.sorted, {archived: false});
+			$scope.boardservice.sorted = $scope.boardservice.getData();
+			if ($scope.status.filter === 'archived') {
+				var filter = {};
+				filter[$scope.status.filter] = true;
+				$scope.boardservice.sorted = $filter('cardFilter')($scope.boardservice.sorted, filter);
+			} else if ($scope.status.filter === 'shared') {
+				$scope.boardservice.sorted = $filter('cardFilter')($scope.boardservice.sorted, {archived: false});
+				$scope.boardservice.sorted = $filter('boardFilterAcl')($scope.boardservice.sorted);
+			} else {
+				$scope.boardservice.sorted = $filter('cardFilter')($scope.boardservice.sorted, {archived: false});
+			}
+			$scope.boardservice.sorted = $filter('orderBy')($scope.boardservice.sorted, ['deletedAt', 'title']);
 		}
-		$scope.boardservice.sorted = $filter('orderBy')($scope.boardservice.sorted, ['deletedAt', 'title']);
 	};
 
-	$scope.$watchCollection(function(){
-		return $state.params;
-	}, function(){
-		$scope.status.filter = $state.params.filter;
-		$scope.filterData();
-	});
+	var finishedLoading = function() {
+		filterData();
+		$scope.newBoard.color = calculateNewColor();
+	};
 
+	var initialize = function () {
+		$scope.statusservice = StatusService.listStatus;
+
+		if($element.attr('id') === 'app-navigation') {
+			$scope.statusservice.retainWaiting();
+			BoardService.fetchAll().then(function(data) {
+				finishedLoading();
+				$scope.statusservice.releaseWaiting();
+				BoardService.loaded = true;
+			}, function (error) {
+				$scope.statusservice.setError('Error occured', error);
+			});
+		} else {
+			/* Watch for data change of boardservice when boards are fetched */
+			var boardDataWatch = $scope.$watch(function () {
+				return $scope.boardservice.data;
+			}, function () {
+				if (BoardService.loaded === true) {
+					boardDataWatch();
+					finishedLoading();
+				}
+			}, true);
+		}
+		/* Watch for board filter change */
+		$scope.$watchCollection(function(){
+			return $state.params;
+		}, function(){
+			$scope.status.filter = $state.params.filter;
+			filterData();
+		});
+	};
+	initialize();
 
 	$scope.selectColor = function(color) {
 		$scope.newBoard.color = color;
@@ -113,7 +136,7 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ
 				$scope.newBoard = {};
 				$scope.newBoard.color = calculateNewColor();
 				$scope.status.addBoard=false;
-				$scope.filterData();
+				filterData();
 			}, function(error) {
 				$scope.status.createBoard = 'Unable to insert board: ' + error.message;
 			});
@@ -121,45 +144,45 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ
 
 	$scope.boardUpdate = function(board) {
 		BoardService.update(board).then(function(data) {
-			$scope.filterData();
 			board.status.edit = false;
+			filterData();
 		});
 	};
 
 	$scope.boardUpdateBegin = function(board) {
-		$scope.updatingBoard = board;
+		$scope.updatingBoard = angular.copy(board);
 	};
 
 	$scope.boardUpdateReset = function(board) {
 		board.title = $scope.updatingBoard.title;
 		board.color = $scope.updatingBoard.color;
-		$scope.filterData();
+		filterData();
 		board.status.edit = false;
 	};
 
 	$scope.boardArchive = function (board) {
 		board.archived = true;
 		BoardService.update(board).then(function(data) {
-			$scope.filterData();
+			filterData();
 		});
 	};
 
 	$scope.boardUnarchive = function (board) {
 		board.archived = false;
 		BoardService.update(board).then(function(data) {
-			$scope.filterData();
+			filterData();
 		});
 	};
 
 	$scope.boardDelete = function(board) {
 		BoardService.delete(board.id).then(function (data) {
-			$scope.filterData();
+			filterData();
 		});
 	};
 
 	$scope.boardDeleteUndo = function (board) {
 		BoardService.deleteUndo(board.id).then(function (data) {
-			$scope.filterData();
+			filterData();
 		});
 	};
 
diff --git a/js/directive/appPopoverMenuUtils.js b/js/directive/appPopoverMenuUtils.js
index 2f47063a5..09ffc1c19 100644
--- a/js/directive/appPopoverMenuUtils.js
+++ b/js/directive/appPopoverMenuUtils.js
@@ -28,12 +28,11 @@ app.directive('appPopoverMenuUtils', function () {
 			var menu = elm.find('.popovermenu');
 			var button = elm.find('button');
 			button.click(function (e) {
-				$('.popovermenu').addClass('hidden');
-				menu.toggleClass('hidden');
-				if(!menu.hasClass('hidden')) {
-					button.css('display','block');
-				} else {
-					button.css('display','');
+				var popovermenus = $('.popovermenu');
+				var shouldShow = menu.hasClass('hidden');
+				popovermenus.addClass('hidden');
+				if (shouldShow) {
+					menu.toggleClass('hidden');
 				}
 				e.stopPropagation();
 			});
@@ -42,7 +41,6 @@ app.directive('appPopoverMenuUtils', function () {
 				if (event.target !== button && !$(event.target).hasClass('no-close')) {
 					menu.addClass('hidden');
 				}
-				button.css('display','');
 			});
 		}
 	};
diff --git a/js/service/StatusService.js b/js/service/StatusService.js
index 4ccc3691e..45ad9d7b7 100644
--- a/js/service/StatusService.js
+++ b/js/service/StatusService.js
@@ -47,8 +47,9 @@ app.factory('StatusService', function () {
 	};
 
 	StatusService.prototype.releaseWaiting = function () {
-		if (this.counter > 0)
-		{this.counter--;}
+		if (this.counter > 0) {
+			this.counter--;
+		}
 		if (this.counter <= 0) {
 			this.active = false;
 			this.counter = 0;
@@ -70,7 +71,9 @@ app.factory('StatusService', function () {
 	return {
 		getInstance: function () {
 			return new StatusService();
-		}
+		},
+		/* Shared StatusService instance between both ListController instances */
+		listStatus: new StatusService()
 	};
 
 });
diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php
index f33748fa8..0a373449b 100644
--- a/templates/part.boardlist.php
+++ b/templates/part.boardlist.php
@@ -1,10 +1,15 @@
+<div id="board-status" ng-if="statusservice.active">
+	<div id="emptycontent">
+		<div class="icon-{{ statusservice.icon }}" title="<?php p($l->t('Status')); ?>"><span class="hidden-visually"><?php p($l->t('Status')); ?></span></div>
+		<h2>{{ statusservice.title }}</h2>
+		<p>{{ statusservice.text }}</p></div>
+</div>
 <div id="controls">
 	<div class="breadcrumb">
 		<div class="crumb svg last">
 			<a href="#" class="icon-home" title="<?php p($l->t('All Boards')); ?>">
 				<span class="hidden-visually"><?php p($l->t('All Boards')); ?></span>
 			</a>
-			<span style="display: none;"></span>
 		</div>
 	</div>
 </div>
@@ -21,16 +26,15 @@
 		<tbody>
 		<tr data-ng-repeat="b in boardservice.sorted" ng-class="{deleted: b.deletedAt > 0}">
 			<td ng-click="gotoBoard(b)">
-				<div class="board-bullet"
-					  ng-style="{'background-color':'#{{b.color}}'};"> </div>
+				<div class="board-bullet" ng-style="{'background-color':'#'+b.color}"> </div>
 			</td>
 			<td>
 				<div ng-click="gotoBoard(b)" ng-show="!b.status.edit">{{ b.title }}</div>
 				<div class="app-navigation-entry-edit" ng-show="b.status.edit">
 					<form ng-disabled="isAddingList" class="ng-pristine ng-valid" ng-submit="boardUpdate(b)">
-						<input id="newTitle" class="edit ng-valid ng-empty" type="text" autofocus-on-insert ng-model="b.title" maxlength="100">
+						<input id="newTitle" class="edit ng-valid ng-empty" type="text" autofocus-on-insert ng-model="b.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 						<div class="colorselect">
-							<div class="color" ng-repeat="c in colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b.color=c" ng-class="{'selected': (c == b.color) }"><br /></div>
+							<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b.color=c" ng-class="{'selected': (c == b.color) }"><br /></div>
 						</div>
 					</form>
 				</div>
@@ -42,9 +46,10 @@
 				</div>
 			</td>
 			<td>
-				<div class="hint"></div>
 				<div class="app-popover-menu-utils" ng-if="b.deletedAt == 0" ng-show="!b.status.edit">
-					<button class="icon icon-more button-inline" title="<?php p($l->t('More actions')); ?>"><span class="hidden-visually"><?php p($l->t('More actions')); ?></span></button>
+					<button class="icon icon-more button-inline" title="<?php p($l->t('More actions')); ?>">
+						<span class="hidden-visually"><?php p($l->t('More actions')); ?></span>
+					</button>
 					<div class="popovermenu bubble hidden">
 						<ul>
 							<li ng-click="boardUpdateBegin(b); b.status.edit = true">
@@ -96,9 +101,9 @@
 					  class="ng-pristine ng-valid" ng-submit="boardCreate()">
 					<input id="newTitle" class="edit ng-valid ng-empty"
 						   type="text" placeholder="<?php p($l->t('New board title')); ?>"
-						   autofocus-on-insert ng-model="newBoard.title" maxlength="100">
+						   autofocus-on-insert ng-model="newBoard.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 					<div class="colorselect">
-						<div class="color" ng-repeat="c in colors"
+						<div class="color" ng-repeat="c in ::colors"
 							 ng-style="{'background-color':'#{{ c }}'}"
 							 ng-click="selectColor(c)"
 							 ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"></div>
diff --git a/templates/part.navigation.php b/templates/part.navigation.php
index 46615fff5..9e207d0c7 100644
--- a/templates/part.navigation.php
+++ b/templates/part.navigation.php
@@ -4,44 +4,58 @@
 	<li ng-class="{active: status.filter === 'archived' || (boardservice.getCurrent() && boardservice.getCurrent().archived)}"><a ui-sref="list({ filter: 'archived' })" class="icon-archive"><?php p($l->t('Archived boards')); ?></a></li>
 	<li ng-class="{active: status.filter === 'shared'}"><a ui-sref="list({ filter: 'shared' })" class="icon-share"><?php p($l->t('Shared boards')); ?></a></li>
 
-	<li class="with-icon with-menu" ng-class="{active: b.id === boardservice.getCurrent().id}" data-ng-repeat="b in boardservice.sidebar" ng-if="b.deletedAt == 0">
-		<span class="board-bullet"  ng-style="{'background-color':'#{{b.color}}'}" ng-if="!b.status.edit"> </span>
-		<a href="#!/board/{{b.id}}/" ng-if="!b.status.edit">{{ b.title }}</a>
-		<div class="app-navigation-entry-utils" ng-show="!b.status.edit" style="position:absolute;">
+	<li class="with-icon with-menu" ng-class="{active: b.id === boardservice.getCurrent().id, editing: b.status.editNavigation}" data-ng-repeat="b in boardservice.sidebar" ng-if="b.deletedAt == 0">
+
+		<span class="board-bullet"  ng-style="{'background-color': '#' + b.color}"> </span>
+		<a href="#!/board/{{b.id}}/">{{ b.title }}</a>
+		<div class="app-navigation-entry-utils">
 			<ul>
-				<li class="app-navigation-entry-utils-menu-share svg" ng-if="b.shared>0"><i class="icon icon-share" title="<?php p($l->t('Shared with you')); ?>"><span class="hidden-visually"><?php p($l->t('Shared with you')); ?></span></i></li>
 				<li class="app-navigation-entry-utils-menu-button svg" ng-show="!status.deleteUndo[b.id]"><button class="icon-more" title="<?php p($l->t('View more')); ?>"><span class="hidden-visually"><?php p($l->t('View more')); ?></span></button></li>
 			</ul>
 		</div>
-		<div class="app-navigation-entry-menu app-navigation-noclose" ng-show="!b.status.edit">
+		<div class="app-navigation-entry-menu" ng-show="!b.status.editNavigation">
 			<ul>
-				<li ng-show="boardservice.canManage(b)"><button class="icon-rename svg" title="<?php p($l->t('Edit board')); ?>" ng-click="b.status.edit=true"></button></li>
-				<li ng-show="boardservice.canManage(b)"><button class="icon-archive svg" title="<?php p($l->t('Move board to archive')); ?>" ng-click="boardArchive(b)"></button></li>
+				<li ng-show="boardservice.canManage(b)">
+					<a class="icon-rename" title="<?php p($l->t('Edit board')); ?>" ng-click="b.status.editNavigation=true">
+						<?php p($l->t('Edit board')); ?>
+					</a>
+				</li>
+				<li ng-show="boardservice.canManage(b)">
+					<a class="icon-archive" title="<?php p($l->t('Move board to archive')); ?>" ng-click="boardArchive(b)">
+						<?php p($l->t('Archive board')); ?>
+					</a>
+				</li>
+				<li ui-sref="board.detail({boardId: b.id})">
+					<a class="icon-settings-dark">
+						<?php p($l->t('Board details')); ?>
+					</a>
+				</li>
 			</ul>
 		</div>
-		<div class="app-navigation-entry-edit" ng-show="b.status.edit">
+
+		<div class="app-navigation-entry-edit">
 			<form ng-disabled="isAddingList" class="ng-pristine ng-valid"  ng-submit="boardUpdate(b)">
-				<input id="newTitle" class="edit ng-valid ng-empty" type="text" autofocus-on-insert ng-model="b.title" maxlength="100">
+				<input id="newTitle" class="edit ng-valid ng-empty" type="text" autofocus-on-insert ng-model="b.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 				<input type="submit" value="" class="action icon-checkmark svg">
 			</form>
 			<div class="colorselect">
-				<div class="color" ng-repeat="c in colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b.color=c" ng-class="{'selected': (c == b.color) }"></div>
+				<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b.color=c" ng-class="{'selected': (c == b.color) }"></div>
 			</div>
 		</div>
 	</li>
 
-	<li>
-		<a ng-click="status.addBoard=!status.addBoard" ng-show="!status.addBoard" class="icon-add app-navigation-noclose">
+	<li ng-class="{editing: status.addBoard}">
+		<a ng-click="status.addBoard=!status.addBoard" class="icon-add app-navigation-noclose">
 			<?php p($l->t('Create a new board')); ?>
 		</a>
 		<div class="app-navigation-entry-edit" ng-if="status.addBoard">
 			<form ng-disabled="isAddingList" class="ng-pristine ng-valid"  ng-submit="boardCreate()">
-				<input id="newTitle" class="edit ng-valid ng-empty" type="text" placeholder="<?php p($l->t('New board title')); ?>" autofocus-on-insert ng-model="newBoard.title" maxlength="100">
+				<input id="newTitle" class="edit ng-valid ng-empty" type="text" placeholder="<?php p($l->t('New board title')); ?>" autofocus-on-insert ng-model="newBoard.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 				<input type="submit" value="" class="action icon-checkmark svg">
-				<div class="colorselect">
-					<div class="color" ng-repeat="c in colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="selectColor(c)" ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
-				</div>
 			</form>
+			<div class="colorselect">
+				<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="selectColor(c)" ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
+			</div>
 		</div>
 	</li>