diff --git a/setup/styles.css b/setup/styles.css
index 9183ed887a..bfc247e899 100644
--- a/setup/styles.css
+++ b/setup/styles.css
@@ -6,7 +6,11 @@ body {
   padding-bottom: 1em;
   color: #444;
   font: 0.8em sans-serif;
-  background: url(../themes/pmahomme/img/left_nav_bg.png) repeat-y 80px 0 #f3f3f3;
+  background: linear-gradient(to right, #f3f3f3, #dadcde);
+  background-position: 180px 0px;
+  background-repeat: repeat-y;
+  background-color: #f3f3f3;
+  background-size: 25px auto;
 }
 
 input,
diff --git a/themes/bootstrap/img/designer/Header.png b/themes/bootstrap/img/designer/Header.png
deleted file mode 100644
index 2d2090e95e..0000000000
Binary files a/themes/bootstrap/img/designer/Header.png and /dev/null differ
diff --git a/themes/bootstrap/img/designer/Header_Linked.png b/themes/bootstrap/img/designer/Header_Linked.png
deleted file mode 100644
index afd3f045f8..0000000000
Binary files a/themes/bootstrap/img/designer/Header_Linked.png and /dev/null differ
diff --git a/themes/bootstrap/img/designer/left_panel_butt.png b/themes/bootstrap/img/designer/left_panel_butt.png
deleted file mode 100644
index 03317301b0..0000000000
Binary files a/themes/bootstrap/img/designer/left_panel_butt.png and /dev/null differ
diff --git a/themes/bootstrap/img/select_bg.png b/themes/bootstrap/img/select_bg.png
deleted file mode 100644
index 22c3ea6c2a..0000000000
Binary files a/themes/bootstrap/img/select_bg.png and /dev/null differ
diff --git a/themes/bootstrap/scss/_designer.scss b/themes/bootstrap/scss/_designer.scss
index f9ac2e1f18..45aa3ba777 100644
--- a/themes/bootstrap/scss/_designer.scss
+++ b/themes/bootstrap/scss/_designer.scss
@@ -1,8 +1,5 @@
-$header-img: '../img/designer/Header.png';
-$header-linked-img: '../img/designer/Header_Linked.png';
 $minus-img: '../img/designer/minus.png';
 $plus-img: '../img/designer/plus.png';
-$left-panel-button-img: '../img/designer/left_panel_butt.png';
 $top-panel-img: '../img/designer/top_panel.png';
 $small-tab-img: '../img/designer/small_tab.png';
 $frams1-img: '../img/designer/1.png';
@@ -56,8 +53,7 @@ canvas.designer {
   user-select: none;
 
   .header {
-    background-image: url($header-img);
-    background-repeat: repeat-x;
+    background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
   }
 }
 
@@ -69,8 +65,7 @@ canvas.designer {
 }
 
 .tab_zag_2 {
-  background-image: url($header-linked-img);
-  background-repeat: repeat-x;
+  background: linear-gradient(#fffa96 0%, #fffa96 39%, #ffe796 40%, #ffe796 100%);
   text-align: center;
   cursor: move;
   padding: 1px;
@@ -132,8 +127,7 @@ canvas.designer {
   font-weight: bold;
   margin-left: 2px;
   text-align: left;
-  background-color: #fff;
-  background-image: url($left-panel-button-img);
+  background: linear-gradient(#fff, #dfe5e7 70%, #fff 70%, #fff 100%);
   border: #ccc solid 1px;
 
   &:hover {
@@ -167,8 +161,7 @@ canvas.designer {
   cursor: default;
   width: 1px;
   color: #000;
-  background-image: url($header-img);
-  background-repeat: repeat-x;
+  background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
 }
 
 .small_tab {
@@ -199,8 +192,7 @@ canvas.designer {
 }
 
 .small_tab_pref {
-  background-image: url($header-img);
-  background-repeat: repeat-x;
+  background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
   text-align: center;
   width: 1px;
 
diff --git a/themes/bootstrap/scss/_navigation.scss b/themes/bootstrap/scss/_navigation.scss
index b8a0b53e1e..8877d0fe8b 100644
--- a/themes/bootstrap/scss/_navigation.scss
+++ b/themes/bootstrap/scss/_navigation.scss
@@ -106,7 +106,8 @@
   margin-left: 0.75em;
 
   select {
-    background: url('../img/select_bg.png') repeat scroll 0 0;
+    background: linear-gradient(#fff, #f1f1f1, #fff);
+    -webkit-border-radius: 2px;
     border-radius: 2px;
     border: 1px solid #bbb;
     border-top: 1px solid #bbb;
diff --git a/themes/original/scss/_navigation.scss b/themes/original/scss/_navigation.scss
index 4cfdd7ee5c..65e94a7ed8 100644
--- a/themes/original/scss/_navigation.scss
+++ b/themes/original/scss/_navigation.scss
@@ -119,7 +119,8 @@
   margin-left: 0.75em;
 
   select {
-    background: url("../../pmahomme/img/select_bg.png") repeat scroll 0 0;
+    background: linear-gradient(#fff, #f1f1f1, #fff);
+    -webkit-border-radius: 2px;
     border-radius: 2px;
     border: 1px solid #bbb;
     border-top: 1px solid #bbb;
diff --git a/themes/pmahomme/img/designer/Header.png b/themes/pmahomme/img/designer/Header.png
deleted file mode 100644
index 2d2090e95e..0000000000
Binary files a/themes/pmahomme/img/designer/Header.png and /dev/null differ
diff --git a/themes/pmahomme/img/designer/Header_Linked.png b/themes/pmahomme/img/designer/Header_Linked.png
deleted file mode 100644
index afd3f045f8..0000000000
Binary files a/themes/pmahomme/img/designer/Header_Linked.png and /dev/null differ
diff --git a/themes/pmahomme/img/designer/bord.png b/themes/pmahomme/img/designer/bord.png
deleted file mode 100644
index 0b3191de9b..0000000000
Binary files a/themes/pmahomme/img/designer/bord.png and /dev/null differ
diff --git a/themes/pmahomme/img/designer/left_panel_butt.png b/themes/pmahomme/img/designer/left_panel_butt.png
deleted file mode 100644
index 03317301b0..0000000000
Binary files a/themes/pmahomme/img/designer/left_panel_butt.png and /dev/null differ
diff --git a/themes/pmahomme/img/left_nav_bg.png b/themes/pmahomme/img/left_nav_bg.png
deleted file mode 100644
index 42b6f3823c..0000000000
Binary files a/themes/pmahomme/img/left_nav_bg.png and /dev/null differ
diff --git a/themes/pmahomme/img/select_bg.png b/themes/pmahomme/img/select_bg.png
deleted file mode 100644
index 22c3ea6c2a..0000000000
Binary files a/themes/pmahomme/img/select_bg.png and /dev/null differ
diff --git a/themes/pmahomme/scss/_designer.scss b/themes/pmahomme/scss/_designer.scss
index 6fe75376a1..e4f883effa 100644
--- a/themes/pmahomme/scss/_designer.scss
+++ b/themes/pmahomme/scss/_designer.scss
@@ -1,8 +1,5 @@
-$header-img: '../img/designer/Header.png';
-$header-linked-img: '../img/designer/Header_Linked.png';
 $minus-img: '../img/designer/minus.png';
 $plus-img: '../img/designer/plus.png';
-$left-panel-button-img: '../img/designer/left_panel_butt.png';
 $top-panel-img: '../img/designer/top_panel.png';
 $small-tab-img: '../img/designer/small_tab.png';
 $frams1-img: '../img/designer/1.png';
@@ -56,8 +53,7 @@ canvas.designer {
   user-select: none;
 
   .header {
-    background-image: url($header-img);
-    background-repeat: repeat-x;
+    background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
   }
 }
 
@@ -69,7 +65,7 @@ canvas.designer {
 }
 
 .tab_zag_2 {
-  background-image: url($header-linked-img);
+  background: linear-gradient(#fffa96 0%, #fffa96 39%, #ffe796 40%, #ffe796 100%);
   background-repeat: repeat-x;
   text-align: center;
   cursor: move;
@@ -132,8 +128,7 @@ canvas.designer {
   font-weight: bold;
   margin-left: 2px;
   text-align: left;
-  background-color: #fff;
-  background-image: url($left-panel-button-img);
+  background: linear-gradient(#fff, #dfe5e7 70%, #fff 70%, #fff 100%);
   border: #ccc solid 1px;
 
   &:hover {
@@ -167,8 +162,7 @@ canvas.designer {
   cursor: default;
   width: 1px;
   color: #000;
-  background-image: url($header-img);
-  background-repeat: repeat-x;
+  background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
 }
 
 .small_tab {
@@ -199,8 +193,7 @@ canvas.designer {
 }
 
 .small_tab_pref {
-  background-image: url($header-img);
-  background-repeat: repeat-x;
+  background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
   text-align: center;
   width: 1px;
 
diff --git a/themes/pmahomme/scss/_navigation.scss b/themes/pmahomme/scss/_navigation.scss
index a2d957fc8f..18e529f23e 100644
--- a/themes/pmahomme/scss/_navigation.scss
+++ b/themes/pmahomme/scss/_navigation.scss
@@ -5,7 +5,7 @@
   top: 0;
   left: 0;
   height: 100vh;
-  background: url('../img/left_nav_bg.png') repeat-y right 0 $navi-background;
+  background: linear-gradient(to right, $navi-background, $navi-right-gradient);
   color: $navi-color;
   z-index: 800;
 
@@ -92,7 +92,8 @@
   margin-left: 0.75em;
 
   select {
-    background: url('../img/select_bg.png') repeat scroll 0 0;
+    background: linear-gradient(#fff, #f1f1f1, #fff);
+    -webkit-border-radius: 2px;
     border-radius: 2px;
     border: 1px solid #bbb;
     border-top: 1px solid #bbb;
diff --git a/themes/pmahomme/scss/_variables.scss b/themes/pmahomme/scss/_variables.scss
index 15d8ce9b28..0a163fdc1e 100644
--- a/themes/pmahomme/scss/_variables.scss
+++ b/themes/pmahomme/scss/_variables.scss
@@ -10,6 +10,7 @@ $navi-color: #000;
 
 // background for the navi frame
 $navi-background: #f3f3f3;
+$navi-right-gradient: #dadcde;
 
 // foreground (text) color of the pointer in navi frame
 $navi-pointer-color: #000;