diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index b15149e61..69b091f55 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -69,7 +69,12 @@
 					class="icon-close"
 					@click.stop.prevent="cancelEdit">
 			</form>
-			<ColorPicker v-model="editColor" />
+			<!-- <ColorPicker v-model="editColor" /> -->
+			<ColorPicker :value="`#${board.color}`" @input="updateColor">
+				<div :style="{ backgroundColor: getColor }" class="color0">
+					Click to choose color
+				</div>
+			</ColorPicker>
 		</div>
 	</router-link>
 </template>
@@ -77,7 +82,8 @@
 <script>
 import { PopoverMenu } from '@nextcloud/vue/dist/Components/PopoverMenu'
 import ClickOutside from 'vue-click-outside'
-import ColorPicker from '../ColorPicker'
+// import ColorPicker from '../ColorPicker'
+import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
 
 export default {
 	name: 'AppNavigationBoard',
@@ -107,6 +113,12 @@ export default {
 		}
 	},
 	computed: {
+		getColor() {
+			if (this.editColor !== '') {
+				return this.editColor
+			}
+			return this.board.color
+		},
 		undoText: function() {
 			// todo translation
 			return 'deleted ' + this.board.title
@@ -232,6 +244,9 @@ export default {
 		hideMenu() {
 			this.menuOpen = false
 		},
+		updateColor(newColor) {
+			this.editColor = newColor
+		},
 		applyEdit(e) {
 			this.editing = false
 			if (this.editTitle || this.editColor) {
@@ -264,4 +279,8 @@ export default {
 	#app-navigation #deck-navigation .editing {
 		height: auto !important;
 	}
+	.color0 {
+		border-radius: 6px;
+		height: 25px;
+	}
 </style>