diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue
index a279ddaa2..6e5f441a2 100644
--- a/src/components/ColorPicker.vue
+++ b/src/components/ColorPicker.vue
@@ -21,67 +21,93 @@
   -->
 
 <template>
-	<div class="color-picker">
+	<div v-click-outside="hidePicker" class="color-picker">
 		<div class="color-picker-compact">
-			<Compact :palette="defaultColors" @input="updateColor" v-model="color"></Compact>
-			<div class="custom-color-button icon-colorpicker" :style="{'background-color': color.hex}" @click="showFullPicker=!showFullPicker"></div>
+			<Compact :palette="defaultColors" v-model="color" @input="updateColor" />
+			<div :style="{'background-color': color.hex}" class="custom-color-button icon-colorpicker" @click.prevent="showFullPicker=!showFullPicker" />
 		</div>
-		<Chrome v-if="showFullPicker" :palette="defaultColors" @input="updateColor" v-model="color"></Chrome>
+		<Chrome v-if="showFullPicker" :palette="defaultColors" v-model="color"
+			@input="updateColor" />
 	</div>
 </template>
 
 <script>
-	// TODO: import styles manually if possible
-	import { Compact, Chrome } from 'vue-color'
+// TODO: import styles manually if possible
+import { Compact, Chrome } from 'vue-color'
+import ClickOutside from 'vue-click-outside'
 
-	export default {
-		name: 'ColorPicker',
-		components: {
-			Compact,
-			Chrome
+export default {
+	name: 'ColorPicker',
+	components: {
+		Compact,
+		Chrome
+	},
+	directives: {
+		ClickOutside
+	},
+	props: {
+		value: {
+			type: [String, Object],
+			default: null
+		}
+	},
+	data() {
+		return {
+			color: { hex: this.value },
+			defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
+			showFullPicker: false
+		}
+	},
+	methods: {
+		updateColor() {
+			this.$emit('input', this.color)
 		},
-		props: ['value'],
-		data() {
-			return {
-				color: { hex: this.value },
-				defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
-				showFullPicker: false,
-			}
-		},
-		methods: {
-			updateColor() {
-				this.$emit('input', this.color)
-			}
+		hidePicker() {
+			this.showFullPicker = false
 		}
 	}
+}
 </script>
 
 <style scoped>
 	div.color-picker {
 		display: block !important;
-	}
-	.color-picker-compact {
-		display: flex;
-	}
-	.custom-color-button {
-		width: 24px;
-		height: 24px;
-		display: block;
-	}
-	.vc-chrome {
-		display: block !important;
-	}
-
-	.vc-compact {
-		padding: 0;
-		border-radius: 0;
-		box-shadow: none;
-		background-color: transparent;
-		width: auto;
+		overflow: hidden;
+		border-radius: 3px;
 	}
 </style>
 <style lang="scss">
-	.color-picker {
+	$color-field-width: 27px;
+	#content .color-picker {
+		// this is required to overwrite
+		// #app-navigation .app-navigation-entry-edit form, #app-navigation .app-navigation-entry-edit div
+		// which has a to wide scope in the server styles
+		div {
+			width: auto;
+			display: block;
+		}
+		.color-picker-compact {
+			display: flex;
+		}
+		.custom-color-button {
+			width: $color-field-width;
+			height: $color-field-width;
+			display: block;
+			flex-grow: 1;
+		}
+
+		.vc-compact {
+			padding: 0;
+			border-radius: 0;
+			box-shadow: none;
+			background-color: transparent;
+			width: auto;
+		}
+
+		.vc-chrome {
+			border-radius: 0 3px;
+			box-shadow: 0 0 2px var(--color-box-shadow);
+		}
 		.vc-chrome-fields-wrap {
 			display: none !important;
 		}
@@ -91,10 +117,40 @@
 		}
 		.vc-compact-color-item {
 			display: inline-flex;
-			height: 24px;
-			width: 24px;
+			height: $color-field-width;
+			width: $color-field-width;
 			padding: 0;
 			margin: 0;
 		}
+		.vc-chrome-controls {
+			display: flex;
+		}
+		.vc-chrome-active-color {
+			position: relative;
+			width: 30px;
+			height: 30px;
+			border-radius: 15px;
+			overflow: hidden;
+			z-index: 1;
+		}
+		.vc-chrome-color-wrap {
+			position: relative;
+			width: 36px;
+		}
+		.vc-saturation-pointer {
+			cursor: pointer;
+			position: absolute;
+			width: 12px;
+			height: 10px;
+		}
+		.vc-chrome-alpha-wrap {
+			display: none;
+		}
+		.vc-chrome-hue-wrap {
+			position: relative;
+			height: 10px;
+			margin-bottom: 8px;
+			margin-top: 10px;
+		}
 	}
 </style>
diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
index 889a867c1..460bf374b 100644
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -28,23 +28,23 @@
 		</a>
 
 		<!-- edit entry -->
-		<div v-if="editing" class="app-navigation-entry-edit-copy">
+		<div v-if="editing" class="app-navigation-entry-edit">
 			<form @submit.prevent.stop="createBoard">
 				<input :placeholder="t('deck', 'New board title')" type="text">
 				<input type="submit" value="" class="icon-confirm">
 				<input type="submit" value="" class="icon-close"
 					@click.stop.prevent="cancelEdit">
 			</form>
-			<ColorPicker v-model="color"></ColorPicker>
+			<ColorPicker v-model="color" />
 		</div>
 	</li>
 </template>
 
 <script>
-import ColorPicker from '../ColorPicker';
+import ColorPicker from '../ColorPicker'
 export default {
 	name: 'AppNavigationAddBoard',
-	components: {ColorPicker},
+	components: { ColorPicker },
 	directives: {},
 	props: {},
 	data() {
@@ -77,19 +77,9 @@ export default {
 	}
 }
 </script>
-<style>
-	#app-navigation .app-navigation-entry-edit-copy {
-		width: calc(100% - 1px);
-		transition: transform 250ms ease-in-out, opacity 250ms ease-in-out, z-index 250ms ease-in-out;
-		position: absolute;
-		left: 0;
-		background-color: var(--color-main-background);
-		box-sizing: border-box;
+<style scoped>
+	#app-navigation .app-navigation-entry-edit div {
+		width: auto;
 		display: block;
-		position: absolute;
-		background: #fff;
-		height: auto;
-		z-index: 250;
-		padding-left: 38px !important;
 	}
 </style>