diff --git a/src/app/components/editSymbol/editSymbol.component.html b/src/app/components/editSymbol/editSymbol.component.html
index 77a7f5b..e69e576 100644
--- a/src/app/components/editSymbol/editSymbol.component.html
+++ b/src/app/components/editSymbol/editSymbol.component.html
@@ -1,10 +1,14 @@
-<div>
-    <div class="row">
-        <mat-form-field appearance="fill" class="col-12 col-md-6">
-            <mat-label>Label</mat-label>
-            <input matInput [(ngModel)]="symbol.label">
-        </mat-form-field>
-        <div class="ml-auto mt-1 mr-3 rounded-circle border curs-pointer" (click)="colorPicker()" style="width: 46px; height: 46px;" [style.background]="symbol.color"></div>
+<div class="pt-sm-2">
+    <div class="d-flex flex-column-reverse flex-sm-row">
+        <div class="flex-grow-1">
+            <mat-form-field appearance="fill" class="w-100 pr-sm-3">
+                <mat-label>Label</mat-label>
+                <input matInput [(ngModel)]="symbol.label">
+            </mat-form-field>
+        </div>
+        <div class="flex-shrink-0 py-3 py-sm-1">
+            <palette [(selected)]="symbol.color"></palette>
+        </div>
     </div>
     <div class="row">
         <mat-form-field appearance="fill" class="col-12">
diff --git a/src/app/components/palette/palette.component.html b/src/app/components/palette/palette.component.html
index faed275..e0d99de 100644
--- a/src/app/components/palette/palette.component.html
+++ b/src/app/components/palette/palette.component.html
@@ -1,3 +1,3 @@
-<div class="py-1">
-    <div *ngFor="let c of colors" class="m-3 color-palette" [ngClass]="{'selected': selected == c}" [style.backgroundColor]="c" (click)="selected = c"></div>
+<div [ngClass]="{'d-flex-column': vertical, 'd-flex': !vertical}">
+    <div *ngFor="let c of colors" class="color-palette" [ngClass]="{'selected': selected == c, 'my-3 mx-auto': vertical, 'mx-2 my-auto': !vertical}" [style.backgroundColor]="c" (click)="selected = c"></div>
 </div>
diff --git a/src/app/components/palette/palette.component.scss b/src/app/components/palette/palette.component.scss
index 4e2a1c3..a33159e 100644
--- a/src/app/components/palette/palette.component.scss
+++ b/src/app/components/palette/palette.component.scss
@@ -2,8 +2,10 @@
   border-radius: 50% 50%;
   width: 30px;
   height: 30px;
+  border: 2px solid #dddddd;
 
   &.selected {
-    border: 4px solid #3b5998;
+    width: 45px;
+    height: 45px;
   }
 }
diff --git a/src/app/components/palette/palette.component.ts b/src/app/components/palette/palette.component.ts
index f1327ff..3b42c26 100644
--- a/src/app/components/palette/palette.component.ts
+++ b/src/app/components/palette/palette.component.ts
@@ -6,7 +6,8 @@ import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
     styleUrls: ['palette.component.scss']
 })
 export class PaletteComponent implements OnInit {
-    @Input() colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#ff4141'];
+    @Input() colors = ['#1d1d1a', '#ffffff', '#008dd5', '#1a891d', '#ff4141'];
+    @Input() vertical = false;
 
     @Output() selectedChange = new EventEmitter<string>();
 
diff --git a/src/app/views/map/map.component.html b/src/app/views/map/map.component.html
index 2a64237..4f88af6 100644
--- a/src/app/views/map/map.component.html
+++ b/src/app/views/map/map.component.html
@@ -1,7 +1,7 @@
 <toolbar [(menuItems)]="menu" [status]="syncService.status" (save)="syncService.save()"></toolbar>
 <div id="map"></div>
 <div *ngIf="showPalette" [@flyInRight] [@flyOutRight] class="palette">
-    <palette [(selected)]="drawColor"></palette>
+    <palette [(selected)]="drawColor" [vertical]="true"></palette>
 </div>
 <div *ngIf="shareDialog" class="share" [@flyInRight] [@flyOutRight]>
     <div class="input-group">