diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index fd6a0623c..880cfea9a 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -16,6 +16,8 @@ export type ArticleActionsMenuLayout = 'horizontal' | 'vertical'
 type ArticleActionsMenuProps = {
   article: ArticleAttributes
   layout: ArticleActionsMenuLayout
+  lineHeight: number
+  marginWidth: number
   articleActionHandler: (action: string, arg?: unknown) => void
 }
 
@@ -54,9 +56,6 @@ const ActionDropdown = (props: ActionDropdownProps): JSX.Element => {
 }
 
 export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element {
-  const [lineHeight, setLineHeight] = usePersistedState({ key: 'lineHeight', initialValue: 150 })
-  const [marginWidth, setMarginWidth] = usePersistedState({ key: 'marginWidth', initialValue: 200 })
-
   return (
     <>
     <Box
@@ -82,8 +81,8 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
         }
       >
         <ReaderSettingsControl
-          lineHeight={lineHeight}
-          marginWidth={marginWidth}
+          lineHeight={props.lineHeight}
+          marginWidth={props.marginWidth}
           articleActionHandler={props.articleActionHandler}
         />
       </ActionDropdown>
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index e720b3fc8..4e5f731aa 100644
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@@ -2,7 +2,7 @@ import { HStack, VStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
 import { styled, theme } from '../../tokens/stitches.config'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHorizontal, Minus, Pen, Plus, Trash, X } from 'phosphor-react'
 import { AIcon } from '../../elements/images/AIcon'
 import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
@@ -25,6 +25,11 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
   const [lineHeight, setLineHeight] = useState(props.lineHeight)
   const [marginWidth, setMarginWidth] = useState(props.marginWidth)
 
+  useEffect(() => {
+    setLineHeight(props.lineHeight)
+    setMarginWidth(props.marginWidth)
+  }, [props.lineHeight, props.marginWidth, setLineHeight, setMarginWidth])
+
   return (
     <VStack>
       <HStack 
@@ -111,7 +116,7 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
 
         <Button style='plainIcon' css={{ justifyContent: 'center', textDecoration: 'underline', display: 'flex', gap: '4px', width: '100%', fontSize: '12px', p: '8px', pb: '0px', pt: '16px', height: '42px', alignItems: 'center' }}
           onClick={() => {
-            setMarginWidth(200)
+            setMarginWidth(290)
             setLineHeight(150)
             props.articleActionHandler('resetReaderSettings')
             showSuccessToast('Display settings reset', { position: 'bottom-right' })
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 77d78c3d4..282bbf0d4 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -67,23 +67,12 @@ export default function Home(): JSX.Element {
 
   useKeyboardShortcuts(navigationCommands(router))
 
-  const updateFontSize = useCallback(async(newFontSize: number) => {
-    window?.localStorage.setItem("fontSize", newFontSize.toString())
-    setFontSize(newFontSize)
-    await userPersonalizationMutation({ fontSize: newFontSize })
-  }, [fontSize, setFontSize])
+  const actionHandler = useCallback(async(action: string, arg?: unknown) => {
+    const updateFontSize =  async(newFontSize: number) => {
+      setFontSize(newFontSize)
+      await userPersonalizationMutation({ fontSize: newFontSize })
+    }
 
-  const updateLineHeight = useCallback(async(newLineHeight: number) => {
-    window?.localStorage.setItem("lineHeight", newLineHeight.toString())
-    setLineHeight(newLineHeight)
-  }, [lineHeight, setLineHeight])
-
-  const updateMarginWidth = useCallback(async(newMargin: number) => {
-    window?.localStorage.setItem("marginWidth", newMargin.toString())
-    setMarginWidth(newMargin)
-  }, [marginWidth, setMarginWidth])
-
-  const actionHandler = async (action: string, arg?: unknown) => {
     switch (action) {
       case 'archive':
         if (article) {
@@ -125,20 +114,20 @@ export default function Home(): JSX.Element {
       case 'setMarginWidth': {
         const value = Number(arg)
         if (value >= 200 && value <= 560) {
-          updateMarginWidth(value)
+          setMarginWidth(value)
         }
         break
       }
       case 'incrementMarginWidth':
-        updateMarginWidth(Math.min(marginWidth + 45, 560))
+        setMarginWidth(Math.min(marginWidth + 45, 560))
         break
       case 'decrementMarginWidth':
-        updateMarginWidth(Math.max(marginWidth - 45, 200))
+        setMarginWidth(Math.max(marginWidth - 45, 200))
         break
       case 'setLineHeight': {
         const value = Number(arg)
         if (value >= 100 && value <= 300) {
-          updateLineHeight(arg as number)
+          setLineHeight(arg as number)
         }
         break
       }
@@ -152,12 +141,14 @@ export default function Home(): JSX.Element {
       }
       case 'resetReaderSettings': {
         updateFontSize(20)
-        updateMarginWidth(200)
-        updateLineHeight(150)
+        setMarginWidth(290)
+        setLineHeight(150)
         break
       }
     }
-  };
+  }, [article, cache, mutate, router,
+      fontSize, setFontSize, lineHeight,
+      setLineHeight, marginWidth, setMarginWidth])
 
   useKeyboardShortcuts(
     articleKeyboardCommands(router, async (action) => {
@@ -174,6 +165,8 @@ export default function Home(): JSX.Element {
           <ArticleActionsMenu
             article={article}
             layout='horizontal'
+            lineHeight={lineHeight}
+            marginWidth={marginWidth}
             articleActionHandler={actionHandler}
           />
         }
@@ -207,6 +200,8 @@ export default function Home(): JSX.Element {
             <ArticleActionsMenu
               article={article}
               layout='vertical'
+              lineHeight={lineHeight}
+              marginWidth={marginWidth}
               articleActionHandler={actionHandler}
             />
           ) : null}