diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-expand-button.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-expand-button.tsx
index 415b83b4ed..cfea856050 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-expand-button.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-expand-button.tsx
@@ -6,7 +6,7 @@ import { useMemo } from 'react'
 import { useLayoutContext } from '../../../shared/context/layout-context'
 
 function PdfExpandButton() {
-  const { pdfLayout, switchLayout } = useLayoutContext()
+  const { pdfLayout, switchLayout, detachRole } = useLayoutContext()
 
   const { t } = useTranslation()
 
@@ -14,6 +14,10 @@ function PdfExpandButton() {
     return pdfLayout === 'sideBySide' ? t('full_screen') : t('split_screen')
   }, [pdfLayout, t])
 
+  if (detachRole) {
+    return null
+  }
+
   return (
     <Tooltip
       id="expand-pdf-btn"
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js
index 0b2c7c91f3..1831d1d020 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js
@@ -65,7 +65,7 @@ function PdfPreviewHybridToolbarInner() {
       </div>
       <div className="toolbar-pdf-right">
         <PdfHybridCodeCheckButton />
-        {!window.showPdfDetach && <PdfExpandButton />}
+        <PdfExpandButton />
         <DetachedSynctexControl />
       </div>
     </>
diff --git a/services/web/frontend/js/features/source-editor/components/editor-expand-button.js b/services/web/frontend/js/features/source-editor/components/editor-expand-button.js
new file mode 100644
index 0000000000..5dc33a3be8
--- /dev/null
+++ b/services/web/frontend/js/features/source-editor/components/editor-expand-button.js
@@ -0,0 +1,43 @@
+import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from 'react-bootstrap'
+import Tooltip from '../../../shared/components/tooltip'
+import Icon from '../../../shared/components/icon'
+import { useLayoutContext } from '../../../shared/context/layout-context'
+
+function EditorExpandButton() {
+  const { pdfLayout, changeLayout, detachRole } = useLayoutContext()
+
+  const { t } = useTranslation()
+
+  const text = useMemo(() => {
+    return pdfLayout === 'sideBySide' ? t('full_screen') : t('split_screen')
+  }, [pdfLayout, t])
+
+  const switchEditorLayout = useCallback(() => {
+    const newLayout = pdfLayout === 'sideBySide' ? 'flat' : 'sideBySide'
+    changeLayout(newLayout, 'editor')
+  }, [pdfLayout, changeLayout])
+
+  if (detachRole) {
+    return null
+  }
+
+  return (
+    <Tooltip
+      id="expand-editor-btn"
+      description={text}
+      overlayProps={{ placement: 'left' }}
+    >
+      <Button
+        onClick={switchEditorLayout}
+        className="toolbar-editor-expand-btn toolbar-item"
+        aria-label={text}
+      >
+        <Icon type={pdfLayout === 'sideBySide' ? 'expand' : 'compress'} />
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default EditorExpandButton
diff --git a/services/web/frontend/js/ide/editor/EditorManager.js b/services/web/frontend/js/ide/editor/EditorManager.js
index 2b53c99647..9ee24e68c0 100644
--- a/services/web/frontend/js/ide/editor/EditorManager.js
+++ b/services/web/frontend/js/ide/editor/EditorManager.js
@@ -20,6 +20,7 @@ import './directives/aceEditor'
 import './directives/toggleSwitch'
 import './controllers/SavingNotificationController'
 import './controllers/CompileButton'
+import './controllers/EditorExpandButton'
 import getMeta from '../../utils/meta'
 let EditorManager
 
diff --git a/services/web/frontend/js/ide/editor/controllers/EditorExpandButton.js b/services/web/frontend/js/ide/editor/controllers/EditorExpandButton.js
new file mode 100644
index 0000000000..4b979b451e
--- /dev/null
+++ b/services/web/frontend/js/ide/editor/controllers/EditorExpandButton.js
@@ -0,0 +1,9 @@
+import App from '../../../base'
+import { react2angular } from 'react2angular'
+import { rootContext } from '../../../shared/context/root-context'
+import EditorExpandButton from '../../../features/source-editor/components/editor-expand-button'
+
+App.component(
+  'editorExpandButton',
+  react2angular(rootContext.use(EditorExpandButton))
+)
diff --git a/services/web/frontend/stylesheets/app/editor/pdf.less b/services/web/frontend/stylesheets/app/editor/pdf.less
index bd6e374dcd..3e2f49d88a 100644
--- a/services/web/frontend/stylesheets/app/editor/pdf.less
+++ b/services/web/frontend/stylesheets/app/editor/pdf.less
@@ -609,6 +609,7 @@
   );
 }
 
+.toolbar-editor-expand-btn,
 .toolbar-pdf-expand-btn {
   .btn-inline-link;
   margin-left: @margin-xs;
@@ -618,7 +619,6 @@
     color: @toolbar-icon-btn-hover-color;
   }
   &:active {
-    background-color: @link-color;
     color: #fff;
   }
   &:focus {
diff --git a/services/web/test/frontend/features/source-editor/components/editor-expand-button.test.js b/services/web/test/frontend/features/source-editor/components/editor-expand-button.test.js
new file mode 100644
index 0000000000..b9c8cf6149
--- /dev/null
+++ b/services/web/test/frontend/features/source-editor/components/editor-expand-button.test.js
@@ -0,0 +1,19 @@
+import { screen } from '@testing-library/react'
+import { renderWithEditorContext } from '../../../helpers/render-with-context'
+import EditorExpandButton from '../../../../../frontend/js/features/source-editor/components/editor-expand-button'
+
+describe('<EditorExpandButton />', function () {
+  it('show split screen button', function () {
+    renderWithEditorContext(<EditorExpandButton />, {
+      ui: { view: 'editor', pdfLayout: 'flat' },
+    })
+    screen.getByRole('button', { name: 'Split screen' })
+  })
+
+  it('show full screen button', function () {
+    renderWithEditorContext(<EditorExpandButton />, {
+      ui: { view: 'editor', pdfLayout: 'sideBySide' },
+    })
+    screen.getByRole('button', { name: 'Full screen' })
+  })
+})