diff --git a/css/globalstyles.scss b/css/globalstyles.scss
new file mode 100644
index 000000000..1a1a65d38
--- /dev/null
+++ b/css/globalstyles.scss
@@ -0,0 +1,40 @@
+/*
+ * @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ * @author Artem Anufrij <artem.anufrij@live.de>
+ * @author Marin Treselj <marin@pixelipo.com>
+ * @author Oskar Kurz <oskar.kurz@gmail.com>
+ * @author Ryan Fletcher <ryan.fletcher@codepassion.ca>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+// colors
+$color-warning-light: nc-lighten($color-warning, 15%);
+$color-lightgrey: nc-darken($color-main-background, 4%);
+$color-grey: nc-darken($color-main-background, 7%);
+$color-darkgrey: nc-darken($color-main-background, 32%);
+
+// margins/paddings
+$board-item-margin: 10px 10px 20px 10px;
+$board-last-item-margin: 10px;
+
+$compact-board-item-margin: 5px 10px 10px 10px;
+$compact-board-last-item-margin: 5px 10px 10px;
+
+@import 'icons';
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index d3be7cec1..a60564b5f 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -32,6 +32,7 @@
 			</div>
 		</div>
 		<div v-if="board" class="crumb svg">
+			<div class="board-bullet"></div>
 			<a href="#todo">{{ board.title }}</a>
 			<span style="display: inline;" class="icon-shared" />
 		</div>
@@ -41,21 +42,15 @@
 					<label for="new-stack-input-main" class="hidden-visually">Add a new stack</label>
 					<input id="new-stack-input-main" type="text" class="no-close"
 						placeholder="Add a new stack">
-					<button class="button-inline icon icon-add" type="submit" title="Submit">
-						<span class="hidden-visually">Submit</span>
-					</button>
+					<input class="icon-confirm" type="button" title="Submit" />
 				</form>
 			</div>
-			<button title="Show archived cards">
-				<i class="icon icon-archive" />
-				<span class="hidden-visually">Show archived cards</span>
-			</button>
-			<button title="Toggle compact mode">
-				<i class="icon icon-toggle-compact-expanded" />
-				<span class="hidden-visually">Toggle compact mode</span>
-			</button>
-			<router-link v-tooltip="t('deck', 'Board settings')" :to="{name: 'board.details'}" class="icon-settings"
-				tag="button" />
+			<div class="board-action-buttons">
+				<button title="Show archived cards" class="icon icon-archive" />
+				<button title="Toggle compact mode" class="icon icon-toggle-compact-expanded" />
+				<router-link v-tooltip="t('deck', 'Board settings')" :to="{name: 'board.details'}" class="icon-settings-dark"
+					tag="button" />
+			</div>
 		</div>
 	</div>
 
@@ -83,6 +78,45 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+	.controls {
+		.crumb {
+			order: 0;
+
+			a:nth-child(2),
+			a:nth-child(3) {
+				padding-left: 0;
+				margin-left: -5px;
+			}
+
+			a .icon {
+				margin-top: 2px;
+			}
+
+			.board-bullet {
+				display: inline-block;
+				width: 20px;
+				height: 20px;
+				border: none;
+				border-radius: 50%;
+				background-color: #aaa;
+				margin: 12px;
+				margin-left: -4px;
+			}
+		}
+
+		#stack-add form {
+			display: flex;
+		}
+	}
+
+	#app-navigation-toggle-custom {
+		width: 44px;
+		height: 44px;
+		cursor: pointer;
+		opacity: 1;
+		display: inline-block !important;
+		position: fixed;
+	}
 
 	.controls {
 		display: flex;
@@ -98,8 +132,21 @@ export default {
 		display: flex;
 		justify-content: flex-end;
 	}
-	button.icon-settings {
-		width: 44px;
+
+	.board-action-buttons {
+		display: flex;
+		padding: 3px 4px 7px 4px;
+		button {
+			border-radius: 0;
+			width: 44px;
+			margin: 0 0 0 -1px;
+		}
+		button:first-child {
+			border-radius: 3px 0 0 3px;
+		}
+		button:last-child {
+			border-radius: 0 3px 3px 0;
+		}
 	}
 
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index cf0b3bf9c..497d0db33 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -21,7 +21,9 @@
   -->
 
 <template>
+	<div id="app-sidebar">
 		<router-view name="sidebar" />
+	</div>
 </template>
 
 <script>
diff --git a/templates/main.php b/templates/main.php
index 41a20c9ec..d359d97e7 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -23,7 +23,7 @@
 
 use OCP\Util;
 
-style('deck', 'style');
+style('deck', 'globalstyles');
 script('deck', 'deck');
 
 \OC::$server->getEventDispatcher()->dispatch('\OCP\Collaboration\Resources::loadAdditionalScripts');