diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js
index 6ea3dbcd..99ab5ad4 100644
--- a/src/editor/components/seButton.js
+++ b/src/editor/components/seButton.js
@@ -27,7 +27,6 @@ template.innerHTML = `
   }
   img {
     border: none;
-    overflow: none;
     width: 100%;
     height: 100%;
   }
diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js
index 582fa00a..06bedc1f 100644
--- a/src/editor/components/seFlyingButton.js
+++ b/src/editor/components/seFlyingButton.js
@@ -13,7 +13,6 @@ template.innerHTML = `
     border: none;
     width: 24px;
     height: 24px;
-    overflow: none;
   }
   .pressed {
     background-color: #F4E284 !important;
@@ -54,29 +53,12 @@ template.innerHTML = `
     background: none !important;
   }
   .menu-item {
-    display: inline;
+    align-content: flex-start;
     height: 24px;
     width: 24px;
-    margin: 2px 2px 4px;
-    padding: 3px;
-    box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
-    background-color: #E8E8E8;
-    cursor: pointer;
     top:0px;
     left:0px;
   }
-  .open .item1 {
-    transition-duration: 190ms;
-  }
-  .open .item2 {
-    transition-duration: 290ms;
-  }
-  .open .item3 {
-    transition-duration: 390ms;
-  }
-  .open .item4 {
-    transition-duration: 490ms;
-  }
   </style>
   
   <div ">
@@ -105,15 +87,10 @@ export class FlyingButton extends HTMLElement {
     // locate the component
     this.$open = this._shadowRoot.querySelector('.menu-button');
     this.$img = this._shadowRoot.querySelector('img');
+    this.$menu = this._shadowRoot.querySelector('.menu');
     // the last element of the div is the slot
     // we retrieve all elements added in the slot (i.e. se-buttons)
-    this.$elements = this.$open.lastElementChild.assignedElements();
-    this.$elements[0].style.transitionDuration = '190ms';
-    this.$elements[0].style.transform = 'translate(2px,-3px)';
-    this.$elements[1].style.transitionDuration = '`2500ms';
-    this.$elements[1].style.transform = 'translate(0px,-3px)';
-    this.$elements[2].style.transitionDuration = '`2500ms';
-    this.$elements[2].style.transform = 'translate(0px,-3px)';
+    this.$elements = this.$menu.lastElementChild.assignedElements();
   }
   /**
    * @function observedAttributes
diff --git a/src/editor/images/fh_rect.svg b/src/editor/images/fh_rect.svg
index e69de29b..bad96937 100644
--- a/src/editor/images/fh_rect.svg
+++ b/src/editor/images/fh_rect.svg
@@ -0,0 +1,16 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+ <defs>
+  <linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
+   <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
+   <stop stop-opacity="1" stop-color="#3b7e9b" offset="1"/>
+  </linearGradient>
+  <linearGradient y2="0.3945" x2="0.6132" y1="0.1093" x1="0.3046" id="svg_9">
+   <stop stop-opacity="1" stop-color="#f9d225" offset="0"/>
+   <stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
+  </linearGradient>
+ </defs>
+  <rect stroke-width="2" stroke="#000000" fill="url(#svg_2)" x="3.25" y="25.75" width="46" height="25"/>
+  <path stroke-width="2" stroke="#000000" fill="url(#svg_9)" d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5"/>
+  <path stroke-width="2" stroke="#000000" fill="#fce0a9" d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z"/>
+  <path stroke-width="2" stroke="#000000" fill="#000000" d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z"/>
+</svg>
diff --git a/src/editor/images/freehand-circle.png b/src/editor/images/freehand-circle.png
deleted file mode 100644
index 24726c67..00000000
Binary files a/src/editor/images/freehand-circle.png and /dev/null differ
diff --git a/src/editor/images/freehand-square.svg b/src/editor/images/freehand-square.svg
deleted file mode 100644
index bad96937..00000000
--- a/src/editor/images/freehand-square.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
- <defs>
-  <linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
-   <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
-   <stop stop-opacity="1" stop-color="#3b7e9b" offset="1"/>
-  </linearGradient>
-  <linearGradient y2="0.3945" x2="0.6132" y1="0.1093" x1="0.3046" id="svg_9">
-   <stop stop-opacity="1" stop-color="#f9d225" offset="0"/>
-   <stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
-  </linearGradient>
- </defs>
-  <rect stroke-width="2" stroke="#000000" fill="url(#svg_2)" x="3.25" y="25.75" width="46" height="25"/>
-  <path stroke-width="2" stroke="#000000" fill="url(#svg_9)" d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5"/>
-  <path stroke-width="2" stroke="#000000" fill="#fce0a9" d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z"/>
-  <path stroke-width="2" stroke="#000000" fill="#000000" d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z"/>
-</svg>
diff --git a/src/editor/index.html b/src/editor/index.html
index ff4fcd33..08ecac40 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -385,12 +385,20 @@
       <div id="tools_left" class="tools_panel">
         <se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button>
         <se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button>
-        <se-flyingbutton id="test" title="Line Tool" src="./images/pen.svg">
-          <se-button id="tool_fhath" title="1" src="./images/logo.svg" shortcut="Q"></se-button>
-          <se-button id="tool_fhpth" title="2" src="./images/logo.svg" shortcut="Q"></se-button>          
-          <se-button id="tool_fhpth" title="3" src="./images/logo.svg" shortcut="Q"></se-button>          
+        <se-flyingbutton id="_tools_line_show" title="Line Tool (L)/Connect two objects" src="./images/pen.svg">
+          <se-button id="_tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
+          <se-button id="_mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>                   
+        </se-flyingbutton>
+        <se-flyingbutton id="_tools_rect_show" title="Square/Rect Tool" src="./images/rect.svg">
+          <se-button id="_tool_rect" title="Rectangle" src="./images/rect.svg"></se-button>
+          <se-button id="_tool_square" title="Square" src="./images/square.svg"></se-button>
+          <se-button id="_tool_fhrect" title="Free-Hand Rectangle" src="./images/fh_rect.svg"></se-button>                  
+        </se-flyingbutton>
+        <se-flyingbutton id="_tools_ellipse_show" title="Ellipse/Circle Tool" src="./images/ellipse.svg">
+          <se-button id="_tool_ellipse" title="Rectangle" src="./images/ellipse.svg"></se-button>
+          <se-button id="_tool_circle" title="Square" src="./images/circle.svg"></se-button>
+          <se-button id="_tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>                 
         </se-flyingbutton>
-        
         <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
         <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
         <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>