diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index 10d7ff52..63d4403c 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -14,6 +14,7 @@ import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useProgressSync } from '../hooks/useProgressSync';
 import { useProgressAutoSave } from '../hooks/useProgressAutoSave';
 import {
+  applyFixedlayoutStyles,
   applyImageStyle,
   applyTranslationStyle,
   getStyles,
@@ -134,6 +135,10 @@ const FoliateViewer: React.FC<{
 
       mountAdditionalFonts(detail.doc, isCJKLang(bookData.book?.primaryLanguage));
 
+      if (bookDoc.rendition?.layout === 'pre-paginated') {
+        applyFixedlayoutStyles(detail.doc);
+      }
+
       applyImageStyle(detail.doc);
 
       // Inline scripts in tauri platforms are not executed by default
diff --git a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
index 0b412708..fc229790 100644
--- a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
+++ b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
@@ -216,7 +216,7 @@ const Notebook: React.FC = ({}) => {
           }
         `}</style>
         <div
-          className='drag-bar absolute left-0 top-0 -m-3 h-full w-0.5 cursor-col-resize p-3'
+          className='drag-bar absolute left-0 top-0 -m-2 h-full w-0.5 cursor-col-resize bg-transparent p-2'
           onMouseDown={handleDragStart}
           onTouchStart={handleDragStart}
         />
diff --git a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
index 8bbb5f68..ce9e2c10 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
@@ -259,7 +259,7 @@ const SideBar: React.FC<{
         )}
         <div
           className={clsx(
-            'drag-bar absolute -right-1 top-0 -m-1 h-full w-0.5 cursor-col-resize p-1',
+            'drag-bar absolute right-0 top-0 -m-2 h-full w-0.5 cursor-col-resize bg-transparent p-2',
             isMobile && 'hidden',
           )}
           onMouseDown={handleHorizontalDragStart}
diff --git a/apps/readest-app/src/libs/document.ts b/apps/readest-app/src/libs/document.ts
index 8afee1a0..f89ebc35 100644
--- a/apps/readest-app/src/libs/document.ts
+++ b/apps/readest-app/src/libs/document.ts
@@ -83,6 +83,10 @@ export type BookMetadata = {
 
 export interface BookDoc {
   metadata: BookMetadata;
+  rendition?: {
+    layout?: 'pre-paginated' | 'reflowable';
+    viewport?: { width: number; height: number };
+  };
   dir: string;
   toc?: Array<TOCItem>;
   sections?: Array<SectionItem>;
diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index 89cd1524..a8d06614 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -538,3 +538,21 @@ export const applyImageStyle = (document: Document) => {
     }
   });
 };
+
+export const applyFixedlayoutStyles = (document: Document) => {
+  const style = document.createElement('style');
+  style.textContent = `
+    html, body {
+      overflow: hidden;
+      height: 100%;
+      width: 100%;
+    }
+    body {
+      position: relative;
+    }
+    img.singlePage {
+      position: relative;
+    }
+  `;
+  document.head.appendChild(style);
+};