diff --git a/apps/readest-app/src/__tests__/components/ProofreadRules.test.tsx b/apps/readest-app/src/__tests__/components/ProofreadRules.test.tsx
index 9d4fe036..d1b64ab8 100644
--- a/apps/readest-app/src/__tests__/components/ProofreadRules.test.tsx
+++ b/apps/readest-app/src/__tests__/components/ProofreadRules.test.tsx
@@ -150,9 +150,9 @@ describe('ProofreadRulesManager', () => {
     expect(dialog).toBeTruthy();
     // Library (global) rules
     expect(screen.getByText('foo')).toBeTruthy();
-    expect(screen.getByText('bar')).toBeTruthy();
+    expect(screen.getByText("'bar'")).toBeTruthy();
     expect(screen.getByText('hello')).toBeTruthy();
-    expect(screen.getByText('world')).toBeTruthy();
+    expect(screen.getByText("'world'")).toBeTruthy();
   });
 
   it('renders selection rules separately from book/library rules', async () => {
@@ -231,11 +231,11 @@ describe('ProofreadRulesManager', () => {
     // Single Instance Rules section
     expect(screen.getByText('Selected Text Rules')).toBeTruthy();
     expect(screen.getByText('only-once')).toBeTruthy();
-    expect(screen.getByText('single-hit')).toBeTruthy();
+    expect(screen.getByText("'single-hit'")).toBeTruthy();
 
     // Book section should still show book-wide rule
     expect(screen.getByText('book-wide')).toBeTruthy();
-    expect(screen.getByText('book-hit')).toBeTruthy();
+    expect(screen.getByText("'book-hit'")).toBeTruthy();
   });
 
   it('displays correct scope labels for different rule types', async () => {
diff --git a/apps/readest-app/src/app/reader/components/ProofreadRules.tsx b/apps/readest-app/src/app/reader/components/ProofreadRules.tsx
index 89d3692b..dc795442 100644
--- a/apps/readest-app/src/app/reader/components/ProofreadRules.tsx
+++ b/apps/readest-app/src/app/reader/components/ProofreadRules.tsx
@@ -88,12 +88,12 @@ const RuleItem: React.FC<{
   return (
     <div className='relative flex items-start justify-between gap-3 p-3'>
       <div className='flex min-w-0 flex-1 flex-col gap-1.5'>
-        <div className='break-words text-base font-medium leading-snug'>{rule.pattern}</div>
+        <div className='break-words pe-20 text-base font-medium leading-snug'>{rule.pattern}</div>
         <div className='text-base-content/70 break-words text-sm'>
           <span className='text-base-content/80 mr-1.5 text-xs font-medium'>
             {_('Replace with:')}
           </span>
-          <span className='text-base-content/90 text-xs'>{rule.replacement}</span>
+          <span className='text-base-content/90 text-xs'>{"'" + rule.replacement + "'"}</span>
         </div>
         <div className='text-base-content/60 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs'>
           <span className='inline-flex items-center gap-1'>
diff --git a/apps/readest-app/src/app/reader/components/annotator/ProofreadPopup.tsx b/apps/readest-app/src/app/reader/components/annotator/ProofreadPopup.tsx
index c1ca769e..f1792d25 100644
--- a/apps/readest-app/src/app/reader/components/annotator/ProofreadPopup.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/ProofreadPopup.tsx
@@ -125,7 +125,7 @@ const ProofreadPopup: React.FC<ProofreadPopupProps> = ({
       >
         <div className='flex flex-col gap-6 p-4'>
           <div className='not-eink:text-gray-400 flex gap-1 text-xs'>
-            <span>{_('Selected text:')}</span>
+            <span className='text-nowrap'>{_('Selected text:')}</span>
             <span className='not-eink:text-yellow-300 line-clamp-1 select-text break-words font-medium'>
               &quot;{selection?.text || ''}&quot;
             </span>
@@ -141,7 +141,7 @@ const ProofreadPopup: React.FC<ProofreadPopupProps> = ({
               value={replacementText}
               onChange={handleInputChange}
               onKeyDown={(e) => {
-                if (e.key === 'Enter' && replacementText.trim()) {
+                if (e.key === 'Enter' && replacementText) {
                   handleApply();
                 }
               }}
@@ -153,7 +153,7 @@ const ProofreadPopup: React.FC<ProofreadPopupProps> = ({
             />
             <button
               onClick={handleApply}
-              disabled={!replacementText.trim()}
+              disabled={!replacementText}
               className={clsx(
                 'btn btn-sm btn-ghost btn-primary disabled:text-base-content/75 text-blue-600 disabled:opacity-75',
                 'bg-transparent hover:bg-transparent disabled:bg-transparent',
@@ -171,7 +171,7 @@ const ProofreadPopup: React.FC<ProofreadPopupProps> = ({
             </span>
             <input
               type='checkbox'
-              className='toggle toggle-sm not-eink:bg-gray-500 checked:bg-black hover:bg-gray-500 hover:checked:bg-black'
+              className='toggle toggle-sm bg-gray-500 checked:bg-black hover:bg-gray-500 hover:checked:bg-black'
               style={
                 {
                   '--tglbg': '#4B5563',