diff --git a/app/mapsketchingcontroller.cpp b/app/mapsketchingcontroller.cpp
index af5cf5010..d4cb4ef82 100644
--- a/app/mapsketchingcontroller.cpp
+++ b/app/mapsketchingcontroller.cpp
@@ -147,7 +147,13 @@ QgsGeometry MapSketchingController::highlightGeometry() const
 QStringList MapSketchingController::availableColors() const
 {
   const QStringList defaultColors = { "#FFFFFF", "#12181F", "#5E9EE4", "#57B46F", "#FDCB2A", "#FF9C40", "#FF8F93" };
-  return mMapSettings->project()->readListEntry( QStringLiteral( "Mergin" ), QStringLiteral( "MapSketching/Colors" ), defaultColors );
+
+  if ( mMapSettings && mMapSettings->project() )
+  {
+    return mMapSettings->project()->readListEntry( QStringLiteral( "Mergin" ), QStringLiteral( "MapSketching/Colors" ), defaultColors );
+  }
+
+  return defaultColors;
 }
 
 void MapSketchingController::clearHighlight()
@@ -187,6 +193,8 @@ void MapSketchingController::setMapSettings( InputMapSettings *settings )
 
   mMapSettings = settings;
   emit mapSettingsChanged();
+
+  setActiveColor( availableColors().first() );
 }
 
 InputMapSettings *MapSketchingController::mapSettings() const
diff --git a/app/qml/components/MMColorButton.qml b/app/qml/components/MMColorButton.qml
index fb4ce9bab..00fee304a 100644
--- a/app/qml/components/MMColorButton.qml
+++ b/app/qml/components/MMColorButton.qml
@@ -20,8 +20,6 @@ RoundButton {
   implicitWidth: __style.margin48
   implicitHeight: __style.margin48
 
-  anchors.verticalCenter: parent.verticalCenter
-
   contentItem: Rectangle {
     color: root.buttonColor
     radius: width / 2
diff --git a/app/qml/components/MMColorPicker.qml b/app/qml/components/MMColorPicker.qml
index 5effda495..794a56df5 100644
--- a/app/qml/components/MMColorPicker.qml
+++ b/app/qml/components/MMColorPicker.qml
@@ -18,6 +18,8 @@ ScrollView {
 
   property color activeColor
 
+  signal activeColorChangeRequested( color newColor )
+
   height: scrollRow.height
   ScrollBar.vertical.policy: ScrollBar.AlwaysOff
   ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
@@ -29,6 +31,7 @@ ScrollView {
 
     Repeater {
       model: root.colors
+
       MMColorButton{
         required property color modelData
         required property int index
@@ -36,16 +39,7 @@ ScrollView {
         buttonColor: modelData
         isSelected: root.activeColor === modelData
                 
-        onClicked: {
-          root.activeColor = modelData;
-        }
-        Component.onCompleted: {
-        // set the initial color to be the first one in the list
-          if ( index === 0 )
-          {
-            root.activeColor = modelData
-          }    
-        }  
+        onClicked: root.activeColorChangeRequested( modelData )
       } 
     }
   }
diff --git a/app/qml/map/MMMapSketchesDrawer.qml b/app/qml/map/MMMapSketchesDrawer.qml
index 25aa4ae4d..4f41856a8 100644
--- a/app/qml/map/MMMapSketchesDrawer.qml
+++ b/app/qml/map/MMMapSketchesDrawer.qml
@@ -79,15 +79,17 @@ MMComponents.MMDrawer {
       
       MMComponents.MMColorPicker {
         id: colorPicker
-        colors: root.sketchingController?.availableColors() ?? __style.photoSketchingWhiteColor
+
+        colors: root.sketchingController?.availableColors()
+        activeColor: root.sketchingController?.activeColor
 
         Layout.alignment: Qt.AlignHCenter
         Layout.maximumWidth: parent.width
 
-        onActiveColorChanged: {
+        onActiveColorChangeRequested: {
           if ( root.sketchingController )
           {
-            root.sketchingController.activeColor = colorPicker.activeColor
+            root.sketchingController.activeColor = newColor
             root.sketchingController.eraserActive = false
           }
         }