diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue
index 6e5f441a2..0d6a6705f 100644
--- a/src/components/ColorPicker.vue
+++ b/src/components/ColorPicker.vue
@@ -74,6 +74,7 @@ export default {
 		display: block !important;
 		overflow: hidden;
 		border-radius: 3px;
+		margin-bottom: 10px;
 	}
 </style>
 <style lang="scss">
@@ -101,7 +102,7 @@ export default {
 			border-radius: 0;
 			box-shadow: none;
 			background-color: transparent;
-			width: auto;
+			width: 90%
 		}
 
 		.vc-chrome {
@@ -118,9 +119,18 @@ export default {
 		.vc-compact-color-item {
 			display: inline-flex;
 			height: $color-field-width;
-			width: $color-field-width;
 			padding: 0;
 			margin: 0;
+			flex-grow: 1;
+		}
+		.vc-compact-dot {
+			width: 10px;
+			height: 10px;
+			position: unset;
+			border-radius: 50%;
+			opacity: 1;
+			background: #fff;
+			margin: auto;
 		}
 		.vc-chrome-controls {
 			display: flex;
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index ab2d0f8fb..eb14ba6da 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -57,6 +57,7 @@
 				<input type="submit" value="" class="icon-close"
 					@click.stop.prevent="cancelEdit">
 			</form>
+			<ColorPicker v-model="editColor" />
 		</div>
 	</router-link>
 </template>
@@ -64,10 +65,12 @@
 <script>
 import { PopoverMenu } from 'nextcloud-vue'
 import ClickOutside from 'vue-click-outside'
+import ColorPicker from '../ColorPicker';
 
 export default {
 	name: 'AppNavigationBoard',
 	components: {
+		ColorPicker,
 		PopoverMenu
 	},
 	directives: {
@@ -87,7 +90,8 @@ export default {
 			editing: false,
 			menuOpen: false,
 			undoTimeoutHandle: null,
-			editTitle: ''
+			editTitle: '',
+			editColor: '',
 		}
 	},
 	computed: {
@@ -113,6 +117,7 @@ export default {
 					action: () => {
 						this.hideMenu()
 						this.editTitle = this.board.title
+						this.editColor = '#' + this.board.color
 						this.editing = true
 					},
 					icon: 'icon-rename',
@@ -194,10 +199,11 @@ export default {
 		},
 		applyEdit(e) {
 			this.editing = false
-			if (this.editTitle) {
+			if (this.editTitle || this.editColor) {
 				this.loading = true
 				const copy = JSON.parse(JSON.stringify(this.board))
 				copy.title = this.editTitle
+				copy.color = (typeof this.editColor.hex !== 'undefined' ? this.editColor.hex : this.editColor).substring(1)
 				this.$store.dispatch('updateBoard', copy)
 					.then(() => {
 						this.loading = false