diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 97024b07..45039dde 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -40,6 +40,7 @@ const DEFAULT_SETTINGS: UserSettings = {
   rebroadcastToAllRelays: false,
   paragraphAlignment: 'justify',
   syncReadingPosition: true,
+  autoMarkAsReadOnCompletion: false,
 }
 
 interface SettingsProps {
diff --git a/src/components/Settings/LayoutBehaviorSettings.tsx b/src/components/Settings/LayoutBehaviorSettings.tsx
index efc17384..d042e7cc 100644
--- a/src/components/Settings/LayoutBehaviorSettings.tsx
+++ b/src/components/Settings/LayoutBehaviorSettings.tsx
@@ -117,6 +117,19 @@ const LayoutBehaviorSettings: React.FC<LayoutBehaviorSettingsProps> = ({ setting
           <span>Sync reading position across devices</span>
         </label>
       </div>
+
+      <div className="setting-group">
+        <label htmlFor="autoMarkAsReadOnCompletion" className="checkbox-label">
+          <input
+            id="autoMarkAsReadOnCompletion"
+            type="checkbox"
+            checked={settings.autoMarkAsReadOnCompletion ?? false}
+            onChange={(e) => onUpdate({ autoMarkAsReadOnCompletion: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Automatically mark as read at 100% (with animation)</span>
+        </label>
+      </div>
     </div>
   )
 }