diff --git a/src/app/pages/customization/Color.component.ts b/src/app/pages/customization/Color.component.ts
index b83d8e9..70bbda1 100644
--- a/src/app/pages/customization/Color.component.ts
+++ b/src/app/pages/customization/Color.component.ts
@@ -5,11 +5,15 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
   selector: 'color',
   template: `
     <div [class]="(addMargin?'uk-margin-small-top':'') + ' colorPicker'">
-      <div class="uk-grid uk-remove-margin">
+      <div class="uk-grid uk-flex uk-flex-middle uk-remove-margin">
         <div class="uk-width-2-3"> {{label}}:</div>
         <div class="uk-width-1-3 uk-padding-remove-left">
-          <input class="uk-margin-small-left uk-width-small "  color-picker [colorPicker]="color"   [style.background]="color"
-                 (colorPickerChange)="color=$event; colorChanged();"/>
+          <button [(colorPicker)]="color" [style.background]="color"
+                  id="color" class="uk-margin-small-left uk-icon-button"
+                  (colorPickerChange)="color=$event; colorChanged();">
+          </button>
+          <!--<input class="uk-margin-small-left uk-width-small "  color-picker [colorPicker]="color"   [style.background]="color"
+                 (colorPickerChange)="color=$event; colorChanged();"/>-->
         </div>
       </div>
     </div>