diff --git a/addon/button.js b/addon/button.js
index acb030ef..ab3222f5 100644
--- a/addon/button.js
+++ b/addon/button.js
@@ -23,8 +23,8 @@ function initButton(sfHost, inInspector) {
   btn.tabIndex = 0;
   btn.accessKey = "i";
   btn.title = "Show Salesforce details (Alt+I / Shift+Alt+I)";
-  rootEl.appendChild(btn);
   loadPopup();
+  rootEl.appendChild(btn);
   document.body.appendChild(rootEl);
 
   addFlowScrollability();
@@ -81,22 +81,71 @@ function initButton(sfHost, inInspector) {
     }
   }
 
-  function setRootCSSProperties(rootElement, buttonElement) {
+  function updateButtonCSSPropertiesFromStorage(rootElement, buttonElement, popupEl) {
     let popupArrowOrientation = iFrameLocalStorage.popupArrowOrientation ? iFrameLocalStorage.popupArrowOrientation : "vertical";
-    let popupArrowPosition = iFrameLocalStorage.popupArrowPosition ? (iFrameLocalStorage.popupArrowPosition + "%") : "122px";
-    let img = document.createElement("img");
+    let popupArrowPosition = iFrameLocalStorage.popupArrowPosition ? (iFrameLocalStorage.popupArrowPosition) : "15";
+    updateButtonCSSPropertiesIfNeeded(rootElement, buttonElement, popupEl, popupArrowOrientation, popupArrowPosition);
+  }
+
+  function updateButtonCSSPropertiesIfNeeded(rootElement, buttonElement, popupEl, popupArrowOrientation, popupArrowPosition) {
+
     if (popupArrowOrientation == "vertical") {
-      rootElement.style.right = 0;
-      rootElement.style.top = popupArrowPosition;
-      img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAA40lEQVQoz2P4//8/AzpWzGj6L59U/V8urgxMg/g4FUn6J/+X9E38LxWc8V8htR67IpCkuGfMfxCQjSpENRFFkXvk/1+/foGxQloDSD0DVkVfvnyBY7hCdEVv3rxBwXCFIIdKh2WDFT1+/BgDo1qd2fL/1q1bWDFcoW5xz3/Xppn/oycu/X/x4kUMDFeoWdD136R8wn+f9rlgxSdOnEDBKFajK96/fz8coyjEpnj79u1gjKEQXXFE/+L/Gzdu/G9WMfG/am4HZlzDFAf3LPwfOWEJWBPIwwzYUg9MsXXNFDAN4gMAmASShdkS4AcAAAAASUVORK5CYII=";
-      buttonElement.classList.add("insext-btn-vertical");
+      rootElement.style.top = popupArrowPosition + "%";
+
+      popupEl.classList.remove("insext-popup-horizontal");
+      popupEl.classList.remove("insext-popup-horizontal-left");
+      popupEl.classList.remove("insext-popup-horizontal-right");
+      popupEl.classList.remove("insext-popup-horizontal-centered");
+
+      popupEl.classList.add("insext-popup-vertical");
+      if (popupArrowPosition >= 55) {
+        popupEl.classList.add("insext-popup-vertical-up");
+      } else {
+        popupEl.classList.remove("insext-popup-vertical-up");
+      }
+
+      if (!(buttonElement.classList.contains("insext-btn-vertical"))) {
+        rootElement.style.right = "0px";
+        buttonElement.classList.add("insext-btn-vertical");
+        buttonElement.classList.remove("insext-btn-horizontal");
+        buttonElement.innerText = "";
+        let img = document.createElement("img");
+        img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAA40lEQVQoz2P4//8/AzpWzGj6L59U/V8urgxMg/g4FUn6J/+X9E38LxWc8V8htR67IpCkuGfMfxCQjSpENRFFkXvk/1+/foGxQloDSD0DVkVfvnyBY7hCdEVv3rxBwXCFIIdKh2WDFT1+/BgDo1qd2fL/1q1bWDFcoW5xz3/Xppn/oycu/X/x4kUMDFeoWdD136R8wn+f9rlgxSdOnEDBKFajK96/fz8coyjEpnj79u1gjKEQXXFE/+L/Gzdu/G9WMfG/am4HZlzDFAf3LPwfOWEJWBPIwwzYUg9MsXXNFDAN4gMAmASShdkS4AcAAAAASUVORK5CYII=";
+        buttonElement.appendChild(img);
+      }
     } else {
-      rootElement.style.bottom = "0px";
-      rootElement.style.right = popupArrowPosition;
-      img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAD6ADAAQAAAABAAAACgAAAADdC3pnAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAABKElEQVQoFWNgwAI0C7r+6xb3/AdJKaTW/1fMaAKz0ZUyoguANHKzszEIcnMy3Hn+muHX2+cMLDwCDExs7Az3Z9ShqGdC1gzTKCHAyyDGz8OwszCM4c/Hdwy/P75l+PfrJwO6C+CakTXyc3EwlDnogM09M6eL4e+Xj1gNAGtG15hrrozsIIarSydjNYARXWOKnhQDJycnBubg4GBQDk5lYObhZ2DlFwaHARMocORFBRl4ONgYYtSEUGxE5zzevJDh77cvwEB8AQ4DJnZWFgY2FmaGSCU+dLVY+S+2LWZg+PeP4f+f3wwsP3//Yfj8/SdD6/G3DK/evceqAVkQFHiMwGhjZGFlYPn68xfDwzfvGX78+sPwYFYDSjwia4KxQdHF/JePgZGZmQEASqV1t0W3n+oAAAAASUVORK5CYII=";
-      buttonElement.classList.add("insext-btn-horizontal");
+      // horizontal
+      rootElement.style.right = popupArrowPosition + "%";
+
+      if (popupArrowPosition < 8) {
+        popupEl.classList.add("insext-popup-horizontal-left");
+        popupEl.classList.remove("insext-popup-horizontal-right");
+        popupEl.classList.remove("insext-popup-horizontal-centered");
+      } else if (popupArrowPosition >= 90) {
+        popupEl.classList.remove("insext-popup-horizontal-left");
+        popupEl.classList.add("insext-popup-horizontal-right");
+        popupEl.classList.remove("insext-popup-horizontal-centered");
+      } else {
+        popupEl.classList.remove("insext-popup-horizontal-left");
+        popupEl.classList.remove("insext-popup-horizontal-right");
+        popupEl.classList.add("insext-popup-horizontal-centered");
+      }
+
+      popupEl.classList.add("insext-popup-horizontal");
+      popupEl.classList.remove("insext-popup-vertical");
+      popupEl.classList.remove("insext-popup-vertical-up");
+
+      if (!(buttonElement.classList.contains("insext-btn-horizontal"))) {
+        rootElement.style.bottom = "0px";
+        rootElement.style.top = "";
+        buttonElement.classList.add("insext-btn-horizontal");
+        buttonElement.classList.remove("insext-btn-vertical");
+        buttonElement.innerText = "";
+        let img = document.createElement("img");
+        img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAD6ADAAQAAAABAAAACgAAAADdC3pnAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAABKElEQVQoFWNgwAI0C7r+6xb3/AdJKaTW/1fMaAKz0ZUyoguANHKzszEIcnMy3Hn+muHX2+cMLDwCDExs7Az3Z9ShqGdC1gzTKCHAyyDGz8OwszCM4c/Hdwy/P75l+PfrJwO6C+CakTXyc3EwlDnogM09M6eL4e+Xj1gNAGtG15hrrozsIIarSydjNYARXWOKnhQDJycnBubg4GBQDk5lYObhZ2DlFwaHARMocORFBRl4ONgYYtSEUGxE5zzevJDh77cvwEB8AQ4DJnZWFgY2FmaGSCU+dLVY+S+2LWZg+PeP4f+f3wwsP3//Yfj8/SdD6/G3DK/evceqAVkQFHiMwGhjZGFlYPn68xfDwzfvGX78+sPwYFYDSjwia4KxQdHF/JePgZGZmQEASqV1t0W3n+oAAAAASUVORK5CYII=";
+        buttonElement.appendChild(img);
+      }
     }
-    buttonElement.appendChild(img);
   }
 
   function loadPopup() {
@@ -108,8 +157,34 @@ function initButton(sfHost, inInspector) {
       }
     });
 
-    let popupSrc = chrome.runtime.getURL("popup.html");
     let popupEl = document.createElement("iframe");
+
+    function onbuttonmove(event) {
+      let popupArrowOrientation;
+      let popupArrowPosition;
+      // if above the diagonal
+      if (event.clientY > (event.clientX / document.documentElement.clientWidth) * document.documentElement.clientHeight) {
+        popupArrowOrientation = "horizontal";
+        popupArrowPosition = 100 - Math.floor(event.clientX * 100 / document.documentElement.clientWidth);
+      } else {
+        popupArrowOrientation = "vertical";
+        popupArrowPosition = Math.floor(event.clientY * 100 / document.documentElement.clientHeight);
+      }
+      localStorage.setItem("popupArrowOrientation", popupArrowOrientation);
+      localStorage.setItem("popupArrowPosition", popupArrowPosition);
+      updateButtonCSSPropertiesIfNeeded(rootEl, btn, popupEl, popupArrowOrientation, popupArrowPosition);
+
+    }
+    function endmove(event) {
+      window.removeEventListener("mousemove", onbuttonmove);
+      window.removeEventListener("mouseup", endmove);
+    }
+    btn.addEventListener("mousedown", (event) => {
+      window.addEventListener("mousemove", onbuttonmove);
+      window.addEventListener("mouseup", endmove);
+    });
+
+    let popupSrc = chrome.runtime.getURL("popup.html");
     popupEl.className = "insext-popup";
     popupEl.classList.add(localStorage.getItem("popupArrowOrientation") == "horizontal" ? "insext-popup-horizontal" : "insext-popup-vertical");
     popupEl.src = popupSrc;
@@ -120,21 +195,8 @@ function initButton(sfHost, inInspector) {
       if (e.data.insextInitRequest) {
         // Set CSS classes for arrow button position
         iFrameLocalStorage = e.data.iFrameLocalStorage;
-        popupEl.classList.add(iFrameLocalStorage.popupArrowOrientation == "horizontal" ? "insext-popup-horizontal" : "insext-popup-vertical");
-        if (iFrameLocalStorage.popupArrowOrientation == "horizontal") {
-          if (iFrameLocalStorage.popupArrowPosition < 8) {
-            popupEl.classList.add("insext-popup-horizontal-left");
-          } else if (iFrameLocalStorage.popupArrowPosition >= 90) {
-            popupEl.classList.add("insext-popup-horizontal-right");
-          } else {
-            popupEl.classList.add("insext-popup-horizontal-centered");
-          }
-        } else if (iFrameLocalStorage.popupArrowOrientation == "vertical") {
-          if (iFrameLocalStorage.popupArrowPosition >= 55) {
-            popupEl.classList.add("insext-popup-vertical-up");
-          }
-        }
-        setRootCSSProperties(rootEl, btn);
+        
+        updateButtonCSSPropertiesFromStorage(rootEl, btn, popupEl);
         addFlowScrollability(popupEl);
         popupEl.contentWindow.postMessage({
           insextInitResponse: true,