diff --git a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx
index d1ceefce..b8a53f4e 100644
--- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx
@@ -98,42 +98,54 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   useEffect(() => {
     if (marginTopPx === viewSettings.marginTopPx) return;
-    viewSettings.marginPx = undefined;
+    if (viewSettings.marginPx !== undefined) {
+      saveViewSettings(envConfig, bookKey, 'marginPx', undefined, false, false);
+    }
     saveViewSettings(envConfig, bookKey, 'marginTopPx', marginTopPx, false, false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [marginTopPx]);
 
   useEffect(() => {
     if (marginBottomPx === viewSettings.marginBottomPx) return;
-    viewSettings.marginPx = undefined;
+    if (viewSettings.marginPx !== undefined) {
+      saveViewSettings(envConfig, bookKey, 'marginPx', undefined, false, false);
+    }
     saveViewSettings(envConfig, bookKey, 'marginBottomPx', marginBottomPx, false, false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [marginBottomPx]);
 
   useEffect(() => {
     if (marginRightPx === viewSettings.marginRightPx) return;
-    viewSettings.marginPx = undefined;
+    if (viewSettings.marginPx !== undefined) {
+      saveViewSettings(envConfig, bookKey, 'marginPx', undefined, false, false);
+    }
     saveViewSettings(envConfig, bookKey, 'marginRightPx', marginRightPx, false, false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [marginRightPx]);
 
   useEffect(() => {
     if (marginLeftPx === viewSettings.marginLeftPx) return;
-    viewSettings.marginPx = undefined;
+    if (viewSettings.marginPx !== undefined) {
+      saveViewSettings(envConfig, bookKey, 'marginPx', undefined, false, false);
+    }
     saveViewSettings(envConfig, bookKey, 'marginLeftPx', marginLeftPx, false, false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [marginLeftPx]);
 
   useEffect(() => {
     if (compactMarginTopPx === viewSettings.compactMarginTopPx) return;
-    viewSettings.compactMarginPx = undefined;
+    if (viewSettings.compactMarginPx !== undefined) {
+      saveViewSettings(envConfig, bookKey, 'compactMarginPx', undefined, false, false);
+    }
     saveViewSettings(envConfig, bookKey, 'compactMarginTopPx', compactMarginTopPx, false, false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [compactMarginTopPx]);
 
   useEffect(() => {
     if (compactMarginBottomPx === viewSettings.compactMarginBottomPx) return;
-    viewSettings.compactMarginPx = undefined;
+    if (viewSettings.compactMarginPx !== undefined) {
+      saveViewSettings(envConfig, bookKey, 'compactMarginPx', undefined, false, false);
+    }
     saveViewSettings(
       envConfig,
       bookKey,
@@ -147,7 +159,9 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   useEffect(() => {
     if (compactMarginRightPx === viewSettings.compactMarginRightPx) return;
-    viewSettings.compactMarginPx = undefined;
+    if (viewSettings.compactMarginPx !== undefined) {
+      saveViewSettings(envConfig, bookKey, 'compactMarginPx', undefined, false, false);
+    }
     saveViewSettings(
       envConfig,
       bookKey,
@@ -161,7 +175,9 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   useEffect(() => {
     if (compactMarginLeftPx === viewSettings.compactMarginLeftPx) return;
-    viewSettings.compactMarginPx = undefined;
+    if (viewSettings.compactMarginPx !== undefined) {
+      saveViewSettings(envConfig, bookKey, 'compactMarginPx', undefined, false, false);
+    }
     saveViewSettings(envConfig, bookKey, 'compactMarginLeftPx', compactMarginLeftPx, false, false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [compactMarginLeftPx]);
diff --git a/apps/readest-app/src/services/constants.ts b/apps/readest-app/src/services/constants.ts
index b6010ffb..c5e33c3d 100644
--- a/apps/readest-app/src/services/constants.ts
+++ b/apps/readest-app/src/services/constants.ts
@@ -89,7 +89,7 @@ export const DEFAULT_BOOK_FONT: BookFont = {
 
 export const DEFAULT_BOOK_LAYOUT: BookLayout = {
   marginTopPx: 44,
-  marginBottomPx: 16,
+  marginBottomPx: 44,
   marginLeftPx: 16,
   marginRightPx: 16,
   compactMarginTopPx: 16,
@@ -136,6 +136,7 @@ export const DEFAULT_MOBILE_VIEW_SETTINGS: Partial<ViewSettings> = {
   fullJustification: false,
   animated: true,
   defaultFont: 'Sans-serif',
+  marginBottomPx: 16,
 };
 
 export const DEFAULT_CJK_VIEW_SETTINGS: Partial<ViewSettings> = {