diff --git a/.gitignore b/.gitignore
index e55cbb8..8971415 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,4 +45,6 @@ next-env.d.ts
 .env*.local
 
 # Ngrok
-ngrok.yml
\ No newline at end of file
+ngrok.yml
+
+/.vscode/
diff --git a/src/features/editor/components/Editor/Editor.tsx b/src/features/editor/components/Editor/Editor.tsx
index aa32b69..bfd8b8b 100644
--- a/src/features/editor/components/Editor/Editor.tsx
+++ b/src/features/editor/components/Editor/Editor.tsx
@@ -7,8 +7,9 @@ import { EmbedBubbleInput } from '@extensions/Embed.ext/EmbedBubbleInput'
 import extensions from '@extensions/extensions'
 import { FileHandlerExt } from '@extensions/FileHandler.ext'
 import { ImageExt } from '@extensions/Image.ext'
+import { SettingsContext } from '@settings/providers/settings.provider'
 import { EditorContent, useEditor } from '@tiptap/react'
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import { useShallow } from 'zustand/shallow'
 
 interface EditorProps {
@@ -18,6 +19,7 @@ interface EditorProps {
 }
 
 export const Editor = ({ token, content, backgroundColor }: EditorProps) => {
+  const settingsStoreApi = useContext(SettingsContext)
   const { setEditor, destroyEditor, showEmbedInput, setShowEmbedInput } = useEditorStore(
     useShallow((s) => ({
       setEditor: s.setEditor,
@@ -36,6 +38,11 @@ export const Editor = ({ token, content, backgroundColor }: EditorProps) => {
     onCreate({ editor }) {
       editor.storage.token.token = token
     },
+    onUpdate: ({ editor }) => {
+      settingsStoreApi?.getState().setSettings({
+        content: editor.getHTML(),
+      })
+    },
   })
 
   useEffect(() => {
diff --git a/src/features/editor/hooks/useAppControls.tsx b/src/features/editor/hooks/useAppControls.tsx
index 368c9e6..dd89701 100644
--- a/src/features/editor/hooks/useAppControls.tsx
+++ b/src/features/editor/hooks/useAppControls.tsx
@@ -7,8 +7,6 @@ import { useShallow } from 'zustand/shallow'
 import { areObjKeysEqual } from '@/utils/objects'
 
 export const useAppControls = () => {
-  const editor = useEditorStore((s) => s.editor)
-
   const updateSettingsMutation = useSettingsMutation()
 
   const subheading = useSettingsStore((s) => s.subheading)
@@ -16,8 +14,13 @@ export const useAppControls = () => {
   const backgroundColor = useSettingsStore((s) => s.backgroundColor)
   const setSettings = useSettingsStore((s) => s.setSettings)
 
-  const content = editor?.getHTML()
-  const settings: SettingsUpdateDto = { content, subheading, bannerImageId, backgroundColor }
+  const content = useSettingsStore((s) => s.content)
+  const settings: SettingsUpdateDto = {
+    content,
+    subheading,
+    bannerImageId,
+    backgroundColor,
+  }
 
   const actions: SettingsUpdateDto['actions'] = useSettingsStore(
     useShallow((s) => ({