diff --git a/apps/readest-app/src/app/library/components/LibraryHeader.tsx b/apps/readest-app/src/app/library/components/LibraryHeader.tsx
index bf39caf5..ed338b93 100644
--- a/apps/readest-app/src/app/library/components/LibraryHeader.tsx
+++ b/apps/readest-app/src/app/library/components/LibraryHeader.tsx
@@ -7,6 +7,7 @@ import { MdOutlineMenu } from 'react-icons/md';
 
 import { useEnv } from '@/context/EnvContext';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import useTrafficLight from '@/hooks/useTrafficLight';
 import WindowButtons from '@/components/WindowButtons';
 import Dropdown from '@/components/Dropdown';
@@ -27,6 +28,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
   const { appService } = useEnv();
   const { isTrafficLightVisible } = useTrafficLight();
   const headerRef = useRef<HTMLDivElement>(null);
+  const iconSize16 = useResponsiveSize(16);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -101,7 +103,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
           <Dropdown
             className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
             buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
-            toggleButton={<MdOutlineMenu />}
+            toggleButton={<MdOutlineMenu size={iconSize16} />}
           >
             <SettingsMenu />
           </Dropdown>
diff --git a/apps/readest-app/src/app/reader/components/FooterBar.tsx b/apps/readest-app/src/app/reader/components/FooterBar.tsx
index cbf45bec..96997f4c 100644
--- a/apps/readest-app/src/app/reader/components/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/FooterBar.tsx
@@ -60,7 +60,7 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
   return (
     <div
       className={clsx(
-        'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center px-4',
+        'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center gap-x-4 px-4',
         'shadow-xs bg-base-100 transition-opacity duration-300',
         isTauriAppPlatform() && 'rounded-window-bottom-right',
         !isSideBarVisible && isTauriAppPlatform() && 'rounded-window-bottom-left',
@@ -70,7 +70,9 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
       onMouseEnter={() => setHoveredBookKey(bookKey)}
       onMouseLeave={() => setHoveredBookKey('')}
     >
-      <Button icon={<RiArrowLeftWideLine />} onClick={handleGoPrev} tooltip={_('Go Left')} />
+      <div className='hidden sm:flex'>
+        <Button icon={<RiArrowLeftWideLine />} onClick={handleGoPrev} tooltip={_('Go Left')} />
+      </div>
       <Button
         icon={<RiArrowGoBackLine />}
         onClick={handleGoBack}
@@ -95,7 +97,9 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
         onChange={(e) => handleProgressChange(e)}
       />
       <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
-      <Button icon={<RiArrowRightWideLine />} onClick={handleGoNext} tooltip={_('Go Right')} />
+      <div className='hidden sm:flex'>
+        <Button icon={<RiArrowRightWideLine />} onClick={handleGoNext} tooltip={_('Go Right')} />
+      </div>
     </div>
   );
 };
diff --git a/apps/readest-app/src/app/reader/components/HeaderBar.tsx b/apps/readest-app/src/app/reader/components/HeaderBar.tsx
index 4bb2746b..7ecd1fad 100644
--- a/apps/readest-app/src/app/reader/components/HeaderBar.tsx
+++ b/apps/readest-app/src/app/reader/components/HeaderBar.tsx
@@ -6,6 +6,7 @@ import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { isTauriAppPlatform } from '@/services/environment';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import useTrafficLight from '@/hooks/useTrafficLight';
 import WindowButtons from '@/components/WindowButtons';
 import Dropdown from '@/components/Dropdown';
@@ -38,6 +39,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { hoveredBookKey, setHoveredBookKey, bookKeys } = useReaderStore();
   const { isSideBarVisible } = useSidebarStore();
+  const iconSize16 = useResponsiveSize(16);
 
   const handleToggleDropdown = (isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
@@ -60,7 +62,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
       onMouseEnter={() => setHoveredBookKey(bookKey)}
       onMouseLeave={() => setHoveredBookKey('')}
     >
-      <div className='sidebar-bookmark-toggler bg-base-100 z-20 flex h-full items-center space-x-2 sm:space-x-4'>
+      <div className='sidebar-bookmark-toggler bg-base-100 z-20 flex h-full items-center space-x-4'>
         <SidebarToggler bookKey={bookKey} />
         <BookmarkToggler bookKey={bookKey} />
       </div>
@@ -69,13 +71,13 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
         <h2 className='line-clamp-1 max-w-[50%] text-center text-xs font-semibold'>{bookTitle}</h2>
       </div>
 
-      <div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-2 sm:space-x-4'>
+      <div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-4'>
         <SettingsToggler />
         <NotebookToggler bookKey={bookKey} />
         <Dropdown
           className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
           buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
-          toggleButton={<PiDotsThreeVerticalBold />}
+          toggleButton={<PiDotsThreeVerticalBold size={iconSize16} />}
           onToggle={handleToggleDropdown}
         >
           <ViewMenu bookKey={bookKey} onSetSettingsDialogOpen={onSetSettingsDialogOpen} />
diff --git a/apps/readest-app/src/app/reader/components/NotebookToggler.tsx b/apps/readest-app/src/app/reader/components/NotebookToggler.tsx
index b8b24427..b2dde4b0 100644
--- a/apps/readest-app/src/app/reader/components/NotebookToggler.tsx
+++ b/apps/readest-app/src/app/reader/components/NotebookToggler.tsx
@@ -4,6 +4,7 @@ import { LuNotebookPen } from 'react-icons/lu';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useNotebookStore } from '@/store/notebookStore';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import Button from '@/components/Button';
 
 interface NotebookTogglerProps {
@@ -14,6 +15,8 @@ const NotebookToggler: React.FC<NotebookTogglerProps> = ({ bookKey }) => {
   const _ = useTranslation();
   const { sideBarBookKey, setSideBarBookKey } = useSidebarStore();
   const { isNotebookVisible, toggleNotebook } = useNotebookStore();
+  const iconSize16 = useResponsiveSize(16);
+
   const handleToggleSidebar = () => {
     if (sideBarBookKey === bookKey) {
       toggleNotebook();
@@ -26,9 +29,9 @@ const NotebookToggler: React.FC<NotebookTogglerProps> = ({ bookKey }) => {
     <Button
       icon={
         sideBarBookKey == bookKey && isNotebookVisible ? (
-          <LuNotebookPen className='text-base-content' />
+          <LuNotebookPen size={iconSize16} className='text-base-content' />
         ) : (
-          <LuNotebookPen className='text-base-content' />
+          <LuNotebookPen size={iconSize16} className='text-base-content' />
         )
       }
       onClick={handleToggleSidebar}
diff --git a/apps/readest-app/src/app/reader/components/notebook/Header.tsx b/apps/readest-app/src/app/reader/components/notebook/Header.tsx
index d43b1c2a..3441b68a 100644
--- a/apps/readest-app/src/app/reader/components/notebook/Header.tsx
+++ b/apps/readest-app/src/app/reader/components/notebook/Header.tsx
@@ -5,6 +5,7 @@ import { FiSearch } from 'react-icons/fi';
 import { LuNotebookPen } from 'react-icons/lu';
 import { MdArrowBackIosNew, MdOutlinePushPin, MdPushPin } from 'react-icons/md';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 const NotebookHeader: React.FC<{
   isPinned: boolean;
@@ -12,6 +13,7 @@ const NotebookHeader: React.FC<{
   handleTogglePin: () => void;
 }> = ({ isPinned, handleClose, handleTogglePin }) => {
   const _ = useTranslation();
+  const iconSize14 = useResponsiveSize(14);
   return (
     <div className='notebook-header relative flex h-11 items-center px-3'>
       <div className='absolute inset-0 flex items-center justify-center space-x-2'>
@@ -26,7 +28,7 @@ const NotebookHeader: React.FC<{
             isPinned ? 'bg-base-300' : 'bg-base-300/65',
           )}
         >
-          {isPinned ? <MdPushPin /> : <MdOutlinePushPin />}
+          {isPinned ? <MdPushPin size={iconSize14} /> : <MdOutlinePushPin size={iconSize14} />}
         </button>
         <button
           onClick={handleClose}
diff --git a/apps/readest-app/src/app/reader/components/sidebar/Header.tsx b/apps/readest-app/src/app/reader/components/sidebar/Header.tsx
index 8d26c325..79f9899b 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/Header.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/Header.tsx
@@ -21,6 +21,7 @@ const SidebarHeader: React.FC<{
   const { isTrafficLightVisible } = useTrafficLight();
   const iconSize14 = useResponsiveSize(14);
   const iconSize18 = useResponsiveSize(18);
+  const iconSize22 = useResponsiveSize(22);
   return (
     <div
       className={clsx(
@@ -33,7 +34,7 @@ const SidebarHeader: React.FC<{
           onClick={onClose}
           className={'btn btn-ghost btn-circle flex h-6 min-h-6 w-6 hover:bg-transparent sm:hidden'}
         >
-          <MdArrowBackIosNew />
+          <MdArrowBackIosNew size={iconSize22} />
         </button>
         <button className='btn btn-ghost h-8 min-h-8 w-8 p-0' onClick={onGoToLibrary}>
           <GiBookshelf className='fill-base-content' />
diff --git a/apps/readest-app/src/components/BookDetailModal.tsx b/apps/readest-app/src/components/BookDetailModal.tsx
index 699546c1..af31cdd8 100644
--- a/apps/readest-app/src/components/BookDetailModal.tsx
+++ b/apps/readest-app/src/components/BookDetailModal.tsx
@@ -110,12 +110,12 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
                 {window.innerWidth >= 400 && (
                   <div className='flex flex-wrap items-center gap-x-4 gap-y-2 py-2'>
                     <button
-                      className='btn rounded bg-red-600 text-white hover:bg-red-700'
+                      className='btn rounded-xl bg-red-600 px-4 text-white hover:bg-red-700'
                       onClick={handleDelete}
                     >
                       {_('Delete')}
                     </button>
-                    <button className='btn btn-disabled bg-primary/25 hover:bg-primary/85 rounded px-4 text-white'>
+                    <button className='btn btn-disabled bg-primary/25 hover:bg-primary/85 rounded-xl px-4 text-white'>
                       {_('More Info')}
                     </button>
                   </div>
diff --git a/apps/readest-app/src/components/Dialog.tsx b/apps/readest-app/src/components/Dialog.tsx
index c723b7c1..624a23a2 100644
--- a/apps/readest-app/src/components/Dialog.tsx
+++ b/apps/readest-app/src/components/Dialog.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { ReactNode, useEffect } from 'react';
 import { MdArrowBackIosNew } from 'react-icons/md';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 interface DialogProps {
   id?: string;
@@ -25,6 +26,7 @@ const Dialog: React.FC<DialogProps> = ({
   contentClassName,
   onClose,
 }) => {
+  const iconSize22 = useResponsiveSize(22);
   const handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
       onClose();
@@ -67,7 +69,7 @@ const Dialog: React.FC<DialogProps> = ({
                   'btn btn-ghost btn-circle flex h-6 min-h-6 w-6 hover:bg-transparent focus:outline-none sm:hidden'
                 }
               >
-                <MdArrowBackIosNew />
+                <MdArrowBackIosNew size={iconSize22} />
               </button>
               <div className='z-15 pointer-events-none absolute inset-0 flex h-11 items-center justify-center'>
                 <span className='line-clamp-1 text-center font-bold'>{title ?? ''}</span>
diff --git a/apps/readest-app/src/hooks/useResponsiveSize.ts b/apps/readest-app/src/hooks/useResponsiveSize.ts
index 27ba01e5..1eb45cb9 100644
--- a/apps/readest-app/src/hooks/useResponsiveSize.ts
+++ b/apps/readest-app/src/hooks/useResponsiveSize.ts
@@ -4,8 +4,8 @@ import { useMediaQuery } from 'react-responsive';
 export const useResponsiveSize = (baseSize: number) => {
   const isPhone = useMediaQuery({ maxWidth: 480 });
   const isTablet = useMediaQuery({ minWidth: 481, maxWidth: 1024 });
-  if (isPhone) return baseSize * 1.5;
-  if (isTablet) return baseSize * 1.25;
+  if (isPhone) return baseSize * 1.25;
+  if (isTablet) return baseSize * 1.15;
   return baseSize;
 };