diff --git a/apps/readest-app/src-tauri/tauri.conf.json b/apps/readest-app/src-tauri/tauri.conf.json
index bb4e457b..0b6ffb17 100644
--- a/apps/readest-app/src-tauri/tauri.conf.json
+++ b/apps/readest-app/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Readest",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "identifier": "com.bilingify.digest",
   "build": {
     "frontendDist": "../out",
diff --git a/apps/readest-app/src/app/reader/components/BookGrid.tsx b/apps/readest-app/src/app/reader/components/BookGrid.tsx
index 73d1660a..d69d59e5 100644
--- a/apps/readest-app/src/app/reader/components/BookGrid.tsx
+++ b/apps/readest-app/src/app/reader/components/BookGrid.tsx
@@ -17,22 +17,19 @@ interface BookGridProps {
 }
 
 const BookGrid: React.FC<BookGridProps> = ({ bookKeys, onCloseBook }) => {
-  const { isSideBarPinned, isSideBarVisible, sideBarWidth } = useReaderStore();
   const { getConfig, getProgress, getBookData, getViewState, getViewSettings } = useReaderStore();
   const { isFontLayoutSettingsDialogOpen, setFontLayoutSettingsDialogOpen } = useReaderStore();
-  const gridWidth = isSideBarPinned && isSideBarVisible ? `calc(100% - ${sideBarWidth})` : '100%';
   const gridTemplate = getGridTemplate(bookKeys.length, window.innerWidth / window.innerHeight);
 
   return (
     <div
-      className='grid h-full'
+      className='grid h-full flex-grow'
       style={{
-        width: gridWidth,
         gridTemplateColumns: gridTemplate.columns,
         gridTemplateRows: gridTemplate.rows,
       }}
     >
-      {bookKeys.map((bookKey) => {
+      {bookKeys.map((bookKey, index) => {
         const bookData = getBookData(bookKey);
         const config = getConfig(bookKey);
         const progress = getProgress(bookKey);
@@ -54,6 +51,7 @@ const BookGrid: React.FC<BookGridProps> = ({ bookKeys, onCloseBook }) => {
             <HeaderBar
               bookKey={bookKey}
               bookTitle={book.title}
+              isTopLeft={index === 0}
               isHoveredAnim={bookKeys.length > 2}
               onCloseBook={onCloseBook}
               onSetSettingsDialogOpen={setFontLayoutSettingsDialogOpen}
diff --git a/apps/readest-app/src/app/reader/components/HeaderBar.tsx b/apps/readest-app/src/app/reader/components/HeaderBar.tsx
index ef89a991..242646db 100644
--- a/apps/readest-app/src/app/reader/components/HeaderBar.tsx
+++ b/apps/readest-app/src/app/reader/components/HeaderBar.tsx
@@ -14,6 +14,7 @@ import ViewMenu from './ViewMenu';
 interface HeaderBarProps {
   bookKey: string;
   bookTitle: string;
+  isTopLeft: boolean;
   isHoveredAnim: boolean;
   onCloseBook: (bookKey: string) => void;
   onSetSettingsDialogOpen: (open: boolean) => void;
@@ -22,6 +23,7 @@ interface HeaderBarProps {
 const HeaderBar: React.FC<HeaderBarProps> = ({
   bookKey,
   bookTitle,
+  isTopLeft,
   isHoveredAnim,
   onCloseBook,
   onSetSettingsDialogOpen,
@@ -41,7 +43,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
       ref={headerRef}
       className={clsx(
         `header-bar absolute top-0 z-10 flex h-11 w-full items-center pr-4`,
-        isFullScreen ? 'pl-4' : 'pl-16',
+        !isFullScreen && isTopLeft && !isSideBarVisible ? 'pl-16' : 'pl-4',
         `shadow-xs bg-base-100 rounded-window-top-right transition-opacity duration-300`,
         !isSideBarVisible && 'rounded-window-top-left',
         isHoveredAnim && 'hover-bar-anim',
diff --git a/apps/readest-app/src/app/reader/components/ReaderContent.tsx b/apps/readest-app/src/app/reader/components/ReaderContent.tsx
index f8e3c764..985ea041 100644
--- a/apps/readest-app/src/app/reader/components/ReaderContent.tsx
+++ b/apps/readest-app/src/app/reader/components/ReaderContent.tsx
@@ -18,9 +18,8 @@ const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) =>
   const router = useRouter();
   const { envConfig } = useEnv();
   const { bookKeys, dismissBook, getNextBookKey, openSplitView } = useBooks();
-  const { sideBarBookKey, getConfig, setSideBarBookKey } = useReaderStore();
-  const { getView, getBookData, getViewState, clearViewState, saveConfig, saveSettings } =
-    useReaderStore();
+  const { sideBarBookKey, getView, getConfig, setSideBarBookKey } = useReaderStore();
+  const { getBookData, getViewState, clearViewState, saveConfig, saveSettings } = useReaderStore();
 
   useBookShortcuts({ sideBarBookKey, bookKeys, openSplitView, getNextBookKey });
 
@@ -71,17 +70,9 @@ const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) =>
 
   return (
     <div className='flex h-screen'>
-      <SideBar
-        width={settings.globalReadSettings.sideBarWidth}
-        isPinned={settings.globalReadSettings.isSideBarPinned}
-        onGoToLibrary={handleCloseBooks}
-        onOpenSplitView={openSplitView}
-      />
+      <SideBar onGoToLibrary={handleCloseBooks} onOpenSplitView={openSplitView} />
       <BookGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
-      <Notebook
-        width={settings.globalReadSettings.notebookWidth}
-        isPinned={settings.globalReadSettings.isNotebookPinned}
-      />
+      <Notebook />
     </div>
   );
 };
diff --git a/apps/readest-app/src/app/reader/components/SectionInfo.tsx b/apps/readest-app/src/app/reader/components/SectionInfo.tsx
index 15fdb6c7..39aaadc0 100644
--- a/apps/readest-app/src/app/reader/components/SectionInfo.tsx
+++ b/apps/readest-app/src/app/reader/components/SectionInfo.tsx
@@ -1,3 +1,4 @@
+import { useReaderStore } from '@/store/readerStore';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -7,9 +8,13 @@ interface SectionInfoProps {
 }
 
 const SectionInfo: React.FC<SectionInfoProps> = ({ chapter, gapLeft }) => {
+  const { isSideBarVisible } = useReaderStore();
   return (
     <div
-      className={clsx('pageinfo absolute right-0 top-0 flex h-[30px] items-end')}
+      className={clsx(
+        'pageinfo absolute right-0 top-0 flex items-end',
+        isSideBarVisible ? 'h-[30px]' : 'h-[44px]',
+      )}
       style={{ left: gapLeft }}
     >
       <h2 className='text-center font-sans text-xs font-light text-slate-500'>{chapter || ''}</h2>
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 2a9a12eb..fce34cee 100644
--- a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
+++ b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
@@ -11,10 +11,10 @@ import { BookNote } from '@/types/book';
 import { uniqueId } from '@/utils/misc';
 import BooknoteItem from '../sidebar/BooknoteItem';
 
-const MIN_NOTEBOOK_WIDTH = 0.05;
+const MIN_NOTEBOOK_WIDTH = 0.15;
 const MAX_NOTEBOOK_WIDTH = 0.45;
 
-const Notebook: React.FC<{ width: string; isPinned: boolean }> = ({ width, isPinned }) => {
+const Notebook: React.FC = ({}) => {
   const { envConfig } = useEnv();
   const { settings, sideBarBookKey, notebookWidth } = useReaderStore();
   const { isNotebookVisible, isNotebookPinned } = useReaderStore();
@@ -23,6 +23,12 @@ const Notebook: React.FC<{ width: string; isPinned: boolean }> = ({ width, isPin
   const { getConfig, saveConfig, getView, setNotebookVisible, updateBooknotes } = useReaderStore();
   const { setNotebookNewAnnotation, setNotebookEditAnnotation } = useReaderStore();
 
+  useEffect(() => {
+    setNotebookWidth(settings.globalReadSettings.notebookWidth);
+    setNotebookPin(settings.globalReadSettings.isNotebookPinned);
+    setNotebookVisible(settings.globalReadSettings.isNotebookPinned);
+  }, []);
+
   const handleNotebookResize = (newWidth: string) => {
     setNotebookWidth(newWidth);
     settings.globalReadSettings.notebookWidth = newWidth;
@@ -86,12 +92,6 @@ const Notebook: React.FC<{ width: string; isPinned: boolean }> = ({ width, isPin
     setNotebookEditAnnotation(null);
   };
 
-  useEffect(() => {
-    setNotebookWidth(width);
-    setNotebookPin(isPinned);
-    setNotebookVisible(isPinned);
-  }, []);
-
   const { handleMouseDown } = useDragBar(handleDragMove);
   const deleteNote = (note: BookNote) => {
     if (!sideBarBookKey) return;
@@ -118,26 +118,26 @@ const Notebook: React.FC<{ width: string; isPinned: boolean }> = ({ width, isPin
 
   return isNotebookVisible ? (
     <>
-      {!isPinned && (
+      {!isNotebookPinned && (
         <div className='overlay fixed inset-0 z-10 bg-black/20' onClick={handleClickOverlay} />
       )}
       <div
         className={clsx(
           'notebook-container bg-base-200 right-0 z-20 h-full min-w-60 select-none',
           'rounded-window-top-right rounded-window-bottom-right',
-          !isPinned && 'shadow-2xl',
+          !isNotebookPinned && 'shadow-2xl',
         )}
         style={{
           width: `${notebookWidth}`,
           maxWidth: `${MAX_NOTEBOOK_WIDTH * 100}%`,
-          position: isPinned ? 'relative' : 'absolute',
+          position: isNotebookPinned ? 'relative' : 'absolute',
         }}
       >
         <div
           className='drag-bar absolute left-0 top-0 h-full w-0.5 cursor-col-resize'
           onMouseDown={handleMouseDown}
         />
-        <NotebookHeader isPinned={isPinned} handleTogglePin={handleTogglePin} />
+        <NotebookHeader isPinned={isNotebookPinned} handleTogglePin={handleTogglePin} />
         <div className='max-h-[calc(100vh-44px)] overflow-y-auto px-3'>
           <div>{excerptNotes.length > 0 && <p className='pt-1 text-sm'>Excerpts</p>}</div>
           <ul className=''>
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 86f26227..a2a55291 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
@@ -14,22 +14,24 @@ const MIN_SIDEBAR_WIDTH = 0.05;
 const MAX_SIDEBAR_WIDTH = 0.45;
 
 const SideBar: React.FC<{
-  width: string;
-  isPinned: boolean;
   onGoToLibrary: () => void;
   onOpenSplitView: () => void;
-}> = ({ width, isPinned, onGoToLibrary, onOpenSplitView }) => {
+}> = ({ onGoToLibrary, onOpenSplitView }) => {
   const { envConfig } = useEnv();
   const { sideBarBookKey, settings } = useReaderStore();
   const { saveSettings, getBookData } = useReaderStore();
   const [activeTab, setActiveTab] = useState(settings.globalReadSettings.sideBarTab);
   const {
     sideBarWidth,
+    isSideBarPinned,
     isSideBarVisible,
     setSideBarVisible,
     handleSideBarResize,
     handleSideBarTogglePin,
-  } = useSidebar(width, isPinned);
+  } = useSidebar(
+    settings.globalReadSettings.sideBarWidth,
+    settings.globalReadSettings.isSideBarPinned,
+  );
 
   const handleDragMove = (e: MouseEvent) => {
     const widthFraction = e.clientX / window.innerWidth;
@@ -62,16 +64,16 @@ const SideBar: React.FC<{
         className={clsx(
           'sidebar-container bg-base-200 z-20 h-full min-w-60 select-none',
           'rounded-window-top-left rounded-window-bottom-left',
-          !isPinned && 'shadow-2xl',
+          !isSideBarPinned && 'shadow-2xl',
         )}
         style={{
           width: `${sideBarWidth}`,
           maxWidth: `${MAX_SIDEBAR_WIDTH * 100}%`,
-          position: isPinned ? 'relative' : 'absolute',
+          position: isSideBarPinned ? 'relative' : 'absolute',
         }}
       >
         <SidebarHeader
-          isPinned={isPinned}
+          isPinned={isSideBarPinned}
           onGoToLibrary={onGoToLibrary}
           onOpenSplitView={onOpenSplitView}
           handleTogglePin={handleSideBarTogglePin}
@@ -86,7 +88,7 @@ const SideBar: React.FC<{
           onMouseDown={handleMouseDown}
         ></div>
       </div>
-      {!isPinned && (
+      {!isSideBarPinned && (
         <div className='overlay fixed inset-0 z-10 bg-black/20' onClick={handleClickOverlay} />
       )}
     </>