diff --git a/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
index d051445c..0ad2222c 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
@@ -77,7 +77,8 @@ export const ColorPanel: React.FC<ColorPanelProps> = ({
   };
 
   const classes = clsx(
-    'footerbar-color-mobile bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'footerbar-color-mobile not-eink:bg-base-200 eink:bg-base-100 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'eink:border-base-content eink:border-t',
     !forceMobileLayout && 'sm:hidden',
     actionTab === 'color'
       ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'
diff --git a/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx
index ad684685..71d9684f 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx
@@ -93,7 +93,8 @@ export const FontLayoutPanel: React.FC<FontLayoutPanelProps> = ({
   }, []);
 
   const classes = clsx(
-    'footerbar-font-mobile bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'footerbar-font-mobile not-eink:bg-base-200 eink:bg-base-100 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'eink:border-base-content eink:border-t',
     !forceMobileLayout && 'sm:hidden',
     actionTab === 'font'
       ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'
diff --git a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
index d1eb3ffc..de861214 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
@@ -219,7 +219,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
   const containerClasses = clsx(
     'footer-bar shadow-xs bottom-0 left-0 z-10 flex w-full flex-col',
     !forceMobileLayout && 'sm:h-[52px] sm:bg-base-100 sm:border-none',
-    'border-base-300/50 border-t',
+    'not-eink:border-base-300/50 eink:border-base-content border-t',
     'transition-[opacity,transform] duration-300',
     forceMobileLayout || window.innerWidth < 640 ? 'fixed' : 'absolute',
     appService?.hasRoundedWindow && 'rounded-window-bottom-right',
diff --git a/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
index ffbfea37..2e4cb3f8 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
@@ -39,7 +39,8 @@ export const NavigationBar: React.FC<NavigationBarProps> = ({
   return (
     <div
       className={clsx(
-        'bg-base-200 z-30 mt-auto flex w-full justify-between px-8 py-4',
+        'not-eink:bg-base-200 eink:bg-base-100 z-30 mt-auto flex w-full justify-between px-8 py-4',
+        'eink:border-base-content eink:border-t',
         !forceMobileLayout && 'sm:hidden',
       )}
       style={{
diff --git a/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
index dd432bd1..73cfd7b3 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
@@ -58,7 +58,8 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
   );
 
   const classes = clsx(
-    'footerbar-progress-mobile bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'footerbar-progress-mobile not-eink:bg-base-200 eink:bg-base-100 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all',
+    'eink:border-base-content eink:border-t',
     !forceMobileLayout && 'sm:hidden',
     actionTab === 'progress'
       ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'