diff --git a/src/cloud/components/molecules/Editor/index.tsx b/src/cloud/components/molecules/Editor/index.tsx
index f058b959d6..006fa94743 100644
--- a/src/cloud/components/molecules/Editor/index.tsx
+++ b/src/cloud/components/molecules/Editor/index.tsx
@@ -672,6 +672,7 @@ const Editor = ({
                 tooltip={`${scrollSync ? 'Disable' : 'Enable'} scroll sync`}
                 path={scrollSync ? mdiRepeatOff : mdiRepeat}
                 onClick={toggleScrollSync}
+                className='scroll-sync'
               />
               <EditorToolbar
                 editorRef={editorRef}
diff --git a/src/cloud/components/molecules/Editor/styled.ts b/src/cloud/components/molecules/Editor/styled.ts
index f89d12a99d..c9fbffacf2 100644
--- a/src/cloud/components/molecules/Editor/styled.ts
+++ b/src/cloud/components/molecules/Editor/styled.ts
@@ -26,6 +26,11 @@ export const StyledEditorToolButtonContainer = styled.div`
     box-shadow: 0px 4px 0px 12px ${({ theme }) => theme.baseBackgroundColor};
     background: ${({ theme }) => theme.baseBackgroundColor};
   }
+
+  &.scroll-sync .bottom {
+    left: 100%;
+    transform: translateX(-20%);
+  }
 `
 
 export const StyledEditorToolButton = styled.button`