diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index adf3abd..5b62bb8 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -6,15 +6,15 @@
         </h1>
     </div>
     <div class="row">
-        <color-picker [setColor]="configService.config.planBg" (color)="onPlanColorChange($event)">Plan window
+        <color-picker [placement]="{color: 'bottom'}" [setColor]="configService.config.planBg" (color)="onPlanColorChange($event)">Plan window
             background</color-picker>
     </div>
     <div class="row">
-        <color-picker [setColor]="configService.config.backdropBg" (color)="onBackdropColorChange($event)">Overlay
+        <color-picker [placement]="{color: 'bottom'}" [setColor]="configService.config.backdropBg" (color)="onBackdropColorChange($event)">Overlay
             backdrop color</color-picker>
     </div>
     <div class="row">
-        <color-picker [setColor]="configService.config.noteDefaultFg" (color)="onNoteColorChange($event)">Overlay
+        <color-picker [placement]="{color: 'bottom'}" [setColor]="configService.config.noteDefaultFg" (color)="onNoteColorChange($event)">Overlay
             default
             font color</color-picker>