diff --git a/src/constants/note-width.ts b/src/constants/note-width.ts
index fa0d4ea..eaeeba6 100644
--- a/src/constants/note-width.ts
+++ b/src/constants/note-width.ts
@@ -10,3 +10,7 @@ export const getNoteWidth = () => {
   }
   return cached
 }
+
+export const resetNoteWidthCache = () => {
+  cached = undefined
+}
diff --git a/src/modules/repo/interfaces/UserSettings.ts b/src/modules/repo/interfaces/UserSettings.ts
index edfefe4..60fe42d 100644
--- a/src/modules/repo/interfaces/UserSettings.ts
+++ b/src/modules/repo/interfaces/UserSettings.ts
@@ -10,4 +10,5 @@ export interface UserSettings extends Model<DataType.UserSettings> {
   backlink?: boolean
   chosenTitleFont?: string
   chosenBodyFont?: string
+  pageWidth?: string
 }
diff --git a/src/modules/user/hooks/useUserSettings.hook.ts b/src/modules/user/hooks/useUserSettings.hook.ts
index 64ffadb..f469bbb 100644
--- a/src/modules/user/hooks/useUserSettings.hook.ts
+++ b/src/modules/user/hooks/useUserSettings.hook.ts
@@ -1,5 +1,6 @@
 import { watchEffect } from "vue"
 
+import { resetNoteWidthCache } from "@/constants/note-width"
 import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
 import { downloadFont } from "@/utils/downloadFont"
 
@@ -22,5 +23,11 @@ export const useUserSettings = () => {
       "--title-font-family"
     )
     root.style.setProperty("--font-size", fontSize || DEFAULT_FONT_SIZE)
+
+    const pageWidth = store.userSettings?.pageWidth
+    if (pageWidth) {
+      root.style.setProperty("--note-width", pageWidth)
+      resetNoteWidthCache()
+    }
   })
 }