diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index 1fc91598..af3a7575 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { BookDoc } from '@/libs/document';
 import { BookConfig, BookNote, BookSearchConfig, BookSearchResult } from '@/types/book';
@@ -72,7 +72,6 @@ const FoliateViewer: React.FC<{
 }> = ({ bookKey, bookDoc, config }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<FoliateView | null>(null);
-  const [viewInited, setViewInited] = useState(false);
   const isViewCreated = useRef(false);
   const isScrolling = useRef(false);
   const { getView, setView: setFoliateView, setProgress, getViewSettings } = useReaderStore();
@@ -214,7 +213,6 @@ const FoliateViewer: React.FC<{
       } else {
         await view.goToFraction(0);
       }
-      setViewInited(true);
 
       window.addEventListener('message', handleClickTurnPage);
     };
@@ -223,23 +221,6 @@ const FoliateViewer: React.FC<{
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const initAnnotations = () => {
-    const { booknotes = [] } = config;
-    const annotations = booknotes.filter((item) => item.type === 'annotation' && item.style);
-    try {
-      Promise.all(annotations.map((annotation) => viewRef.current?.addAnnotation(annotation)));
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  useEffect(() => {
-    if (viewInited) {
-      initAnnotations();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [viewInited]);
-
   return (
     <div
       className='foliate-viewer h-[100%] w-[100%]'
diff --git a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
index 46ac2b5c..a66a94e9 100644
--- a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
@@ -8,6 +8,7 @@ import { RiDeleteBinLine } from 'react-icons/ri';
 import { BsTranslate } from 'react-icons/bs';
 import { SiDeepl } from 'react-icons/si';
 
+import * as CFI from 'foliate-js/epubcfi.js';
 import { Overlayer } from 'foliate-js/overlayer.js';
 import { useEnv } from '@/context/EnvContext';
 import { BookNote, HighlightColor, HighlightStyle } from '@/types/book';
@@ -32,7 +33,6 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const { getProgress, getView, getViewsById } = useReaderStore();
   const { isNotebookPinned, isNotebookVisible } = useNotebookStore();
   const { setNotebookVisible, setNotebookNewAnnotation } = useNotebookStore();
-  const globalReadSettings = settings.globalReadSettings;
   const config = getConfig(bookKey)!;
   const progress = getProgress(bookKey)!;
   const bookData = getBookData(bookKey)!;
@@ -52,10 +52,10 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [highlightOptionsVisible, setHighlightOptionsVisible] = useState(false);
 
   const [selectedStyle, setSelectedStyle] = useState<HighlightStyle>(
-    globalReadSettings.highlightStyle,
+    settings.globalReadSettings.highlightStyle,
   );
   const [selectedColor, setSelectedColor] = useState<HighlightColor>(
-    globalReadSettings.highlightStyles[selectedStyle],
+    settings.globalReadSettings.highlightStyles[selectedStyle],
   );
 
   const dictPopupWidth = 400;
@@ -177,9 +177,29 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     return () => clearTimeout(timer);
   }, [toastMessage]);
 
+  useEffect(() => {
+    if (!progress) return;
+    const { location } = progress;
+    const start = CFI.collapse(location);
+    const end = CFI.collapse(location, true);
+    const { booknotes = [] } = config;
+    const annotations = booknotes.filter(
+      (item) =>
+        item.type === 'annotation' &&
+        item.style &&
+        CFI.compare(item.cfi, start) >= 0 &&
+        CFI.compare(item.cfi, end) <= 0,
+    );
+    try {
+      Promise.all(annotations.map((annotation) => view?.addAnnotation(annotation)));
+    } catch (e) {
+      console.error(e);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [progress]);
+
   const handleCopy = () => {
     if (!selection || !selection.text) return;
-    setShowAnnotPopup(false);
     setToastMessage('Copied to notebook');
 
     const { booknotes: annotations = [] } = config;
@@ -209,7 +229,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     if (updatedConfig) {
       saveConfig(envConfig, bookKey, updatedConfig, settings);
     }
-    setHighlightOptionsVisible(false);
+    handleDismissPopupAndSelection();
     setNotebookVisible(true);
   };
 
@@ -220,8 +240,8 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     const { sectionHref: href } = progress;
     const cfi = view?.getCFI(selection.index, selection.range);
     if (!cfi) return;
-    const style = globalReadSettings.highlightStyle;
-    const color = globalReadSettings.highlightStyles[style];
+    const style = settings.globalReadSettings.highlightStyle;
+    const color = settings.globalReadSettings.highlightStyles[style];
     const annotation: BookNote = {
       id: uniqueId(),
       type: 'annotation',
diff --git a/apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx b/apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx
index 1aacd04f..f6063e74 100644
--- a/apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx
@@ -17,22 +17,27 @@ interface HighlightOptionsProps {
 
 const HighlightOptions: React.FC<HighlightOptionsProps> = ({
   style,
-  selectedStyle,
-  selectedColor,
+  selectedStyle: _selectedStyle,
+  selectedColor: _selectedColor,
   onHandleHighlight,
 }) => {
   const { settings, setSettings } = useSettingsStore();
   const globalReadSettings = settings.globalReadSettings;
+  const [selectedStyle, setSelectedStyle] = React.useState<HighlightStyle>(_selectedStyle);
+  const [selectedColor, setSelectedColor] = React.useState<HighlightColor>(_selectedColor);
 
   const handleSelectStyle = (style: HighlightStyle) => {
     globalReadSettings.highlightStyle = style;
     setSettings(settings);
+    setSelectedStyle(style);
+    setSelectedColor(globalReadSettings.highlightStyles[style]);
     onHandleHighlight(true);
   };
   const handleSelectColor = (color: HighlightColor) => {
     const style = globalReadSettings.highlightStyle;
     globalReadSettings.highlightStyles[style] = color;
     setSettings(settings);
+    setSelectedColor(color);
     onHandleHighlight(true);
   };
   return (
diff --git a/apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx b/apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx
index 2b39341d..44929753 100644
--- a/apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx
+++ b/apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx
@@ -73,7 +73,7 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
           )}
           onClick={handleSaveNote}
         >
-          <div className='align-bottom text-blue-400'>Save</div>
+          <div className='pr-1 align-bottom text-xs text-blue-400'>Save</div>
         </button>
       </div>
       <div className='flex items-start pt-2'>
diff --git a/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx b/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
index e1302cfd..54cfe5f2 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
@@ -103,15 +103,17 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item, editable = f
           onClick={(e) => e.stopPropagation()}
         >
           <div className='flex justify-end space-x-3'>
-            <button
-              className={clsx(
-                'btn btn-ghost settings-content hover:bg-transparent',
-                'flex h-4 min-h-4 items-end p-0',
-              )}
-              onClick={editNote.bind(null, item)}
-            >
-              <div className='align-bottom text-xs text-blue-400'>Edit</div>
-            </button>
+            {item.note && (
+              <button
+                className={clsx(
+                  'btn btn-ghost settings-content hover:bg-transparent',
+                  'flex h-4 min-h-4 items-end p-0',
+                )}
+                onClick={editNote.bind(null, item)}
+              >
+                <div className='align-bottom text-blue-400'>Edit</div>
+              </button>
+            )}
             <button
               className={clsx(
                 'btn btn-ghost settings-content hover:bg-transparent',
@@ -119,7 +121,7 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item, editable = f
               )}
               onClick={deleteNote.bind(null, item)}
             >
-              <div className='align-bottom text-xs text-red-400'>Delete</div>
+              <div className='align-bottom text-red-400'>Delete</div>
             </button>
           </div>
         </div>
diff --git a/packages/foliate-js b/packages/foliate-js
index 80c51427..6a34c66b 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit 80c51427eabcf5dcf61f3dd0f1b9bc903957f94f
+Subproject commit 6a34c66bb1fae756aa4f56702ec000d617fc2f40