diff --git a/packages/web/components/templates/article/ReaderSettingsModal.tsx b/packages/web/components/templates/article/ReaderSettingsModal.tsx
index fbab67335..58e59bcfb 100644
--- a/packages/web/components/templates/article/ReaderSettingsModal.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsModal.tsx
@@ -25,12 +25,15 @@ type ReaderSettingsProps = {
   articleActionHandler: (action: string, arg?: number) => void
 }
 
+const VerticalDivider = styled(SpanBox, {
+  width: '1px',
+  height: '100%',
+  background: `${theme.colors.grayLine.toString()}`,
+})
+
 export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
-  const VerticalDivider = styled(SpanBox, {
-      width: '1px',
-      height: '100%',
-      background: `${theme.colors.grayLine.toString()}`,
-  })
+  const [marginWidth, setMarginWidth] = useState(props.userPreferences?.margin ?? 0)
+
   return (
     <VStack>
       <HStack 
@@ -65,8 +68,9 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
           <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => props.articleActionHandler('decrementMarginWidth')}>
             <ArrowsInLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
           </Button>
-          <TickedRangeSlider min={10} max={28} value={props.userPreferences?.margin || 0} onChange={(value) => {
-            console.log('range changed', value)
+          <TickedRangeSlider min={200} max={560} step={45} value={marginWidth} onChange={(value) => {
+            setMarginWidth(value)
+            props.articleActionHandler('setMarginWidth', value)
           }} />
           <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => props.articleActionHandler('incrementMarginWidth')}>
             <ArrowsOutLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index b339ebc65..cb820d9d8 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -101,11 +101,18 @@ export default function Home(): JSX.Element {
       case 'decrementFontSize':
         await updateFontSize(Math.max(fontSize - 2, 10))
         break
+      case 'setMarginWidth': {
+        const value = Number(arg)
+        if (value > 200 && value < 560) {
+          updateMarginWidth(value)
+        }
+        break
+      }
       case 'incrementMarginWidth':
-        updateMarginWidth(Math.min(marginWidth + 50, 560))
+        updateMarginWidth(Math.min(marginWidth + 45, 560))
         break
       case 'decrementMarginWidth':
-        updateMarginWidth(Math.max(marginWidth - 50, 200))
+        updateMarginWidth(Math.max(marginWidth - 45, 200))
         break
     }
   };