diff --git a/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx b/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx
index 713332ea3b..bc2ce5a673 100644
--- a/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx
+++ b/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx
@@ -31,6 +31,7 @@ import { EditorType } from '@/features/ide-react/editor/types/editor-type'
 import { DocId } from '../../../../../types/project-settings'
 import { Update } from '@/features/history/services/types/update'
 import { useDebugDiffTracker } from '../hooks/use-debug-diff-tracker'
+import { useEditorContext } from '@/shared/context/editor-context'
 
 interface GotoOffsetOptions {
   gotoOffset: number
@@ -93,6 +94,7 @@ export const EditorManagerProvider: FC = ({ children }) => {
   const ide = useIdeContext()
   const { projectId } = useIdeReactContext()
   const { reportError, eventEmitter, eventLog } = useIdeReactContext()
+  const { setOutOfSync } = useEditorContext()
   const { socket, disconnect, connectionState } = useConnectionContext()
   const { view, setView } = useLayoutContext()
   const { showGenericMessageModal, genericModalVisible, showOutOfSyncModal } =
@@ -566,6 +568,9 @@ export const EditorManagerProvider: FC = ({ children }) => {
 
         // Tell the user about the error state.
         setIsInErrorState(true)
+        // Ensure that the editor is locked
+        setOutOfSync(true)
+        // Display the "out of sync" modal
         showOutOfSyncModal(editorContent || '')
 
         // Do not forceReopen the document.
@@ -592,6 +597,7 @@ export const EditorManagerProvider: FC = ({ children }) => {
     setIsInErrorState,
     showGenericMessageModal,
     showOutOfSyncModal,
+    setOutOfSync,
     t,
   ])
 
diff --git a/services/web/frontend/js/shared/context/editor-context.tsx b/services/web/frontend/js/shared/context/editor-context.tsx
index b7e0070cfd..8db44eb688 100644
--- a/services/web/frontend/js/shared/context/editor-context.tsx
+++ b/services/web/frontend/js/shared/context/editor-context.tsx
@@ -50,6 +50,7 @@ export const EditorContext = createContext<
       setCurrentPopup: Dispatch<SetStateAction<string | null>>
       writefullAdClicked: writefullAdButtons
       setWritefullAdClicked: Dispatch<SetStateAction<writefullAdButtons>>
+      setOutOfSync: (value: boolean) => void
     }
   | undefined
 >(undefined)
@@ -81,6 +82,7 @@ export const EditorProvider: FC = ({ children }) => {
   const [projectName, setProjectName] = useScopeValue('project.name')
   const [permissionsLevel, setPermissionsLevel] =
     useScopeValue('permissionsLevel')
+  const [outOfSync, setOutOfSync] = useState(false)
   const [showSymbolPalette] = useScopeValue('editor.showSymbolPalette')
   const [toggleSymbolPalette] = useScopeValue('editor.toggleSymbolPalette')
 
@@ -171,7 +173,7 @@ export const EditorProvider: FC = ({ children }) => {
       hasPremiumCompile: features?.compileGroup === 'priority',
       loading,
       renameProject,
-      permissionsLevel,
+      permissionsLevel: outOfSync ? 'readOnly' : permissionsLevel,
       setPermissionsLevel,
       isProjectOwner: owner?._id === userId,
       isRestrictedTokenMember: getMeta('ol-isRestrictedTokenMember'),
@@ -184,6 +186,7 @@ export const EditorProvider: FC = ({ children }) => {
       setCurrentPopup,
       writefullAdClicked,
       setWritefullAdClicked,
+      setOutOfSync,
     }),
     [
       cobranding,
@@ -203,6 +206,8 @@ export const EditorProvider: FC = ({ children }) => {
       setCurrentPopup,
       writefullAdClicked,
       setWritefullAdClicked,
+      outOfSync,
+      setOutOfSync,
     ]
   )