diff --git a/src/plugins/Controls/index.tsx b/src/plugins/Controls/index.tsx
index 2730c61c..79519e43 100644
--- a/src/plugins/Controls/index.tsx
+++ b/src/plugins/Controls/index.tsx
@@ -33,12 +33,6 @@ export default ({ style, className }: ControlProps) => {
         ...style,
       }}
     >
-      <div
-        className={`react-flow__controls-button react-flow__controls-${isInteractive? 'unlocked' : 'locked' }`}
-        onClick={() => setInteractive(!isInteractive)}
-      >
-        { isInteractive ? <UnlockIcon /> : <LockIcon /> }
-      </div>
       <div
         className="react-flow__controls-button react-flow__controls-zoomin"
         onClick={zoomIn}
@@ -57,6 +51,12 @@ export default ({ style, className }: ControlProps) => {
       >
         <FitviewIcon />
       </div>
+      <div
+        className={`react-flow__controls-button react-flow__controls-${isInteractive? 'unlocked' : 'locked' }`}
+        onClick={() => setInteractive(!isInteractive)}
+      >
+        { isInteractive ? <UnlockIcon /> : <LockIcon /> }
+      </div>
     </div>
   );
 };