diff --git a/services/web/app/views/project/editor/left-menu-react.pug b/services/web/app/views/project/editor/left-menu-react.pug
index 60ce3d48ea..d6376250a6 100644
--- a/services/web/app/views/project/editor/left-menu-react.pug
+++ b/services/web/app/views/project/editor/left-menu-react.pug
@@ -1,2 +1 @@
-div(ng-controller="SettingsController")
-	editor-left-menu()
\ No newline at end of file
+editor-left-menu()
\ No newline at end of file
diff --git a/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx b/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx
index 16fb8c1094..b834256e89 100644
--- a/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx
@@ -11,15 +11,16 @@ import type {
   ProjectCompiler,
 } from '../../../../../types/project-settings'
 import useScopeValue from '../../../shared/hooks/use-scope-value'
+import useSetProjectWideSettings from '../hooks/use-set-project-wide-settings'
 
 type ProjectSettingsContextValue = {
-  compiler: ProjectCompiler
+  compiler?: ProjectCompiler
   setCompiler: (compiler: ProjectCompiler) => void
-  imageName: string
+  imageName?: string
   setImageName: (imageName: string) => void
-  rootDocId: string
+  rootDocId?: string
   setRootDocId: (rootDocId: string) => void
-  spellCheckLanguage: string
+  spellCheckLanguage?: string
   setSpellCheckLanguage: (spellCheckLanguage: string) => void
   autoComplete: boolean
   setAutoComplete: (autoComplete: boolean) => void
@@ -50,13 +51,17 @@ export const ProjectSettingsContext = createContext<
 export function ProjectSettingsProvider({
   children,
 }: PropsWithChildren<Record<string, never>>) {
-  const [compiler, setCompiler] =
-    useScopeValue<ProjectCompiler>('project.compiler')
-  const [imageName, setImageName] = useScopeValue<string>('project.imageName')
-  const [rootDocId, setRootDocId] = useScopeValue<string>('project.rootDoc_id')
-  const [spellCheckLanguage, setSpellCheckLanguage] = useScopeValue<string>(
-    'project.spellCheckLanguage'
-  )
+  const {
+    compiler,
+    setCompiler,
+    imageName,
+    setImageName,
+    rootDocId,
+    setRootDocId,
+    spellCheckLanguage,
+    setSpellCheckLanguage,
+  } = useSetProjectWideSettings()
+
   const [autoComplete, setAutoComplete] = useScopeValue<boolean>(
     'settings.autoComplete'
   )
diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx
new file mode 100644
index 0000000000..d8cae54cb7
--- /dev/null
+++ b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx
@@ -0,0 +1,90 @@
+import { useCallback } from 'react'
+import { ProjectCompiler } from '../../../../../types/project-settings'
+import { postJSON } from '../../../infrastructure/fetch-json'
+import { useProjectContext } from '../../../shared/context/project-context'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
+
+type ProjectScope = {
+  compiler: ProjectCompiler
+  imageName: string
+  rootDoc_id: string
+  spellCheckLanguage: string
+}
+
+function useSaveProjectSettings() {
+  const { _id: projectId } = useProjectContext()
+
+  const saveProject = useCallback(
+    (data: Partial<ProjectScope>) => {
+      postJSON(`/project/${projectId}/settings`, {
+        body: data,
+      })
+    },
+    [projectId]
+  )
+
+  return saveProject
+}
+
+// TODO: handle ignoreUpdates
+export default function useSetProjectWideSettings() {
+  // The value will be undefined on mount
+  const [project, setProject] = useScopeValue<ProjectScope | undefined>(
+    'project',
+    true
+  )
+
+  const saveProject = useSaveProjectSettings()
+
+  const setCompiler = useCallback(
+    (compiler: ProjectCompiler) => {
+      if (project?.compiler) {
+        setProject({ ...project, compiler })
+        saveProject({ compiler })
+      }
+    },
+    [saveProject, project, setProject]
+  )
+
+  const setImageName = useCallback(
+    (imageName: string) => {
+      if (project?.imageName) {
+        setProject({ ...project, imageName })
+        saveProject({ imageName })
+      }
+    },
+    [saveProject, project, setProject]
+  )
+
+  // TODO
+  const setRootDocId = useCallback(
+    (rootDocId: string) => {
+      if (project?.imageName) {
+        setProject({ ...project, rootDoc_id: rootDocId })
+        // saveProject({ root })
+      }
+    },
+    [project, setProject]
+  )
+
+  const setSpellCheckLanguage = useCallback(
+    (spellCheckLanguage: string) => {
+      if (project?.spellCheckLanguage) {
+        setProject({ ...project, spellCheckLanguage })
+        saveProject({ spellCheckLanguage })
+      }
+    },
+    [saveProject, project, setProject]
+  )
+
+  return {
+    compiler: project?.compiler,
+    setCompiler,
+    imageName: project?.imageName,
+    setImageName,
+    rootDocId: project?.rootDoc_id,
+    setRootDocId,
+    spellCheckLanguage: project?.spellCheckLanguage,
+    setSpellCheckLanguage,
+  }
+}