diff --git a/src/content/components/TranslatePanel.js b/src/content/components/TranslatePanel.js
index a2b47c6..74a1c7a 100644
--- a/src/content/components/TranslatePanel.js
+++ b/src/content/components/TranslatePanel.js
@@ -19,41 +19,51 @@ export default class TranslatePanel extends Component {
       shouldResize: true,
       isOverflow: false
     };
-    this.isFirst = true;
+
+    this.dragOffsets = { x: 0, y: 0 };
+    this.isDragging = false;
+  }
+
+  componentDidMount = () => {
     document.addEventListener("dragstart", this.handleDragStart);
     document.addEventListener("dragover", this.handleDragOver);
     document.addEventListener("drop", this.handleDrop);
-  }
+  };
+
+  componentWillUnmount = () => {
+    document.removeEventListener("dragstart", this.handleDragStart);
+    document.removeEventListener("dragover", this.handleDragOver);
+    document.removeEventListener("drop", this.handleDrop);
+  };
 
   handleDragStart = e => {
-    // Firefox.
-    if (e.explicitOriginalTarget) {
-      if (e.explicitOriginalTarget.className !== "simple-translate-move") {
-        return;
-      }
-    }
-    // Chrome.
-    else if (e.target.className !== "simple-translate-move") {
-      return;
-    }
+    if (e.target.className !== "simple-translate-move") return;
+    this.isDragging = true;
+
     const rect = document.querySelector(".simple-translate-panel").getBoundingClientRect();
-    const offsets = {
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top
+    this.dragOffsets = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
     };
-    e.dataTransfer.setData("text/plain", JSON.stringify(offsets));
+    e.dataTransfer.setData("text/plain", "");
   };
 
   handleDragOver = e => {
+    if (!this.isDragging) return;
     e.preventDefault();
+    const panel = document.querySelector(".simple-translate-panel");
+    panel.style.top = `${e.clientY - this.dragOffsets.y}px`;
+    panel.style.left = `${e.clientX - this.dragOffsets.x}px`;
   };
 
   handleDrop = e => {
+    if (!this.isDragging) return;
     e.preventDefault();
+    this.isDragging = false;
+
     const panel = document.querySelector(".simple-translate-panel");
-    const offsets = JSON.parse(e.dataTransfer.getData("text/plain"));
-    panel.style.top = `${e.clientY - offsets.y}px`;
-    panel.style.left = `${e.clientX - offsets.x}px`;
+    panel.style.top = `${e.clientY - this.dragOffsets.y}px`;
+    panel.style.left = `${e.clientX - this.dragOffsets.x}px`;
   };
 
   calcPosition = () => {
@@ -175,11 +185,6 @@ export default class TranslatePanel extends Component {
     const candidateStyles = {
       color: getSettings("candidateFontColor")
     };
-    const moveStyles = {
-      backgroundColor: "rgb(0, 145, 247)",
-      cursor: "grab",
-      height: "15px"
-    };
 
     return (
       <div
@@ -187,19 +192,21 @@ export default class TranslatePanel extends Component {
         ref="panel"
         style={panelStyles}
       >
-        <div className="simple-translate-move" draggable="true" style={moveStyles}></div>
         <div className="simple-translate-result-wrapper" ref="wrapper" style={wrapperStyles}>
-          <p className="simple-translate-result" style={resultStyles}>
-            {splitLine(resultText)}
-          </p>
-          <p className="simple-translate-candidate" style={candidateStyles}>
-            {splitLine(candidateText)}
-          </p>
-          {isError && (
-            <p className="simple-translate-error" style={candidateStyles}>
-              {getErrorMessage(statusText)}
+          <div className="simple-translate-move" draggable="true" ref="move"></div>
+          <div className="simple-translate-result-contents">
+            <p className="simple-translate-result" style={resultStyles}>
+              {splitLine(resultText)}
             </p>
-          )}
+            <p className="simple-translate-candidate" style={candidateStyles}>
+              {splitLine(candidateText)}
+            </p>
+            {isError && (
+              <p className="simple-translate-error" style={candidateStyles}>
+                {getErrorMessage(statusText)}
+              </p>
+            )}
+          </div>
         </div>
       </div>
     );
diff --git a/src/content/styles/TranslatePanel.scss b/src/content/styles/TranslatePanel.scss
index b7a1681..8869725 100644
--- a/src/content/styles/TranslatePanel.scss
+++ b/src/content/styles/TranslatePanel.scss
@@ -23,7 +23,6 @@
       font-size: inherit;
       visibility: inherit;
       opacity: inherit;
-      padding: 10px 18px;
       box-sizing: border-box;
       width: max-content;
       height: max-content;
@@ -33,32 +32,40 @@
       max-height: 100%;
       overflow: auto;
 
-      p {
-        all: initial;
-        display: block;
-        margin: 0;
-        font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", "Arial",
-          "Helvetica", sans-serif !important;
-        text-align: left;
-        word-wrap: break-word;
-        font-size: inherit;
-        line-height: 150%;
-        visibility: inherit;
-        opacity: inherit;
+      .simple-translate-move {
+        height: 15px;
+        cursor: grab;
+      }
 
-        &::-moz-selection {
-          background: var(--simple-translate-line);
-        }
+      .simple-translate-result-contents {
+        padding: 0px 18px 15px;
+        p {
+          all: initial;
+          display: block;
+          margin: 0;
+          font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", "Arial",
+            "Helvetica", sans-serif !important;
+          text-align: left;
+          word-wrap: break-word;
+          font-size: inherit;
+          line-height: 150%;
+          visibility: inherit;
+          opacity: inherit;
 
-        &.simple-translate-result {
-          color: var(--simple-translate-main-text);
-        }
-        &.simple-translate-candidate,
-        &.simple-translate-error {
-          color: var(--simple-translate-sub-text);
-          margin-top: 1em;
-          &:empty {
-            margin-top: 0;
+          &::-moz-selection {
+            background: var(--simple-translate-line);
+          }
+
+          &.simple-translate-result {
+            color: var(--simple-translate-main-text);
+          }
+          &.simple-translate-candidate,
+          &.simple-translate-error {
+            color: var(--simple-translate-sub-text);
+            margin-top: 1em;
+            &:empty {
+              margin-top: 0;
+            }
           }
         }
       }