diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index 86f4e29a..0a633fc8 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -11,6 +11,28 @@ const $ = [
 const template = document.createElement('template');
 template.innerHTML = `
   <style>
+  img {
+    height: 22px;
+    width: 22px;
+  }
+  .block {
+    height: 22px;
+    width: 22px;
+    float: right;
+    background-color: darkgrey;
+  }
+  #picker {
+    background: #f0f0f0;
+    height: 26px;
+    line-height: 26px;
+    border-radius: 3px;
+    min-width: 52px;
+    display: flex;
+    align-items: center;
+    margin-right: 4px;
+    justify-content: space-evenly;
+  }
+  
   </style>
   <div id="picker">
       <img src="./images/logo.svg" alt="icon">
diff --git a/src/editor/index.html b/src/editor/index.html
index b9a93d8e..4ffb7fb3 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -340,8 +340,8 @@
           <div value="layer">Fit to layer content</div>
           <div value="content">Fit to all content</div>
         </se-dropdown>
-        <se-colorpicker id="fill_color" src="fill.svg" title="Change fill color" type="fill"></se-colorpicker>
-        <se-colorpicker id="stroke_color" src="stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker>
+        <se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
+        <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width by 1" label=""></se-spin-input>
         <label class="stroke_tool">
           <select id="stroke_style" title="Change stroke dash style">
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index d179c8cc..123924dc 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -416,31 +416,6 @@ hr {
   margin-top: 5px;
 }
 
-#fill_color,  #stroke_color {
-  height: 16px;
-  width: 16px;
-  border: 1px solid #808080;
-  cursor: pointer;
-  overflow: hidden;
-}
-
-#fill_color,  #stroke_color {
-  height: 16px;
-  width: 16px;
-  border: 1px solid #808080;
-  cursor: pointer;
-  overflow: hidden;
-}
-
-.color_block {
-  top: 0;
-  left: 0;
-}
-
-.color_block svg {
-  display: block;
-}
-
 #tools_left {
   position: absolute;
   border-right: none;
@@ -695,20 +670,12 @@ input[type=text] {
   display: none;
 }
 
-#color_picker {
-  position: absolute;
-  display: none;
-  background: #E8E8E8;
-  height: 350px;
-  z-index: 5;
-}
-
 #tools_bottom {
   position: absolute;
   left: 40px;
   right: 0;
   bottom: 0;
-  height: 40px;
+  height: 33px;
   overflow: visible;
 }
 
@@ -754,10 +721,7 @@ input[type=text] {
 #toggle_stroke_tools:hover {
   background: white;
 }
-.color_tool > * {
-  float: left;
-  margin-right: 5px;
-}
+
 #tool_opacity { right: 0;}
 
 #tool_opacity {
@@ -883,10 +847,6 @@ ul li.current {
   margin-left: 30px;
 }
 
-#bg_blocks .color_block {
-  position: static;
-}
-
 #svg_docprops #svg_docprops_container,
 #svg_prefs #svg_prefs_container {
   position: absolute;