diff --git a/apps/readest-app/src/app/reader/components/BooksGrid.tsx b/apps/readest-app/src/app/reader/components/BooksGrid.tsx
index 87185bed..a46526f6 100644
--- a/apps/readest-app/src/app/reader/components/BooksGrid.tsx
+++ b/apps/readest-app/src/app/reader/components/BooksGrid.tsx
@@ -14,7 +14,7 @@ import SettingsDialog from '@/components/settings/SettingsDialog';
 import FoliateViewer from './FoliateViewer';
 import SectionInfo from './SectionInfo';
 import HeaderBar from './HeaderBar';
-import FooterBar from './FooterBar';
+import FooterBar from './footerbar/FooterBar';
 import ProgressInfoView from './ProgressInfo';
 import Ribbon from './Ribbon';
 import Annotator from './annotator/Annotator';
diff --git a/apps/readest-app/src/app/reader/components/FooterBar.tsx b/apps/readest-app/src/app/reader/components/FooterBar.tsx
deleted file mode 100644
index dce6b184..00000000
--- a/apps/readest-app/src/app/reader/components/FooterBar.tsx
+++ /dev/null
@@ -1,422 +0,0 @@
-import React, { useEffect } from 'react';
-import clsx from 'clsx';
-import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
-import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
-import { RiArrowLeftDoubleLine, RiArrowRightDoubleLine } from 'react-icons/ri';
-import { FaHeadphones } from 'react-icons/fa6';
-import { IoIosList as TOCIcon } from 'react-icons/io';
-import { PiNotePencil as NoteIcon } from 'react-icons/pi';
-import { RxSlider as SliderIcon } from 'react-icons/rx';
-import { RiFontFamily as FontIcon } from 'react-icons/ri';
-import { MdOutlineHeadphones as TTSIcon } from 'react-icons/md';
-import { TbBoxMargin } from 'react-icons/tb';
-import { RxLineHeight } from 'react-icons/rx';
-
-import { useEnv } from '@/context/EnvContext';
-import { useReaderStore } from '@/store/readerStore';
-import { useSidebarStore } from '@/store/sidebarStore';
-import { useBookDataStore } from '@/store/bookDataStore';
-import { useTranslation } from '@/hooks/useTranslation';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';
-import { saveViewSettings } from '@/helpers/viewSettings';
-import { eventDispatcher } from '@/utils/event';
-import { viewPagination } from '../hooks/usePagination';
-import { PageInfo } from '@/types/book';
-import { Insets } from '@/types/misc';
-import Button from '@/components/Button';
-import Slider from '@/components/Slider';
-import TTSControl from './tts/TTSControl';
-
-interface FooterBarProps {
-  bookKey: string;
-  bookFormat: string;
-  section?: PageInfo;
-  pageinfo?: PageInfo;
-  isHoveredAnim: boolean;
-  gridInsets: Insets;
-}
-
-const FooterBar: React.FC<FooterBarProps> = ({
-  bookKey,
-  bookFormat,
-  section,
-  pageinfo,
-  isHoveredAnim,
-  gridInsets,
-}) => {
-  const _ = useTranslation();
-  const { envConfig, appService } = useEnv();
-  const { getConfig, setConfig } = useBookDataStore();
-  const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
-  const { getView, getViewState, getProgress, getViewSettings } = useReaderStore();
-  const { isSideBarVisible, setSideBarVisible } = useSidebarStore();
-  const [actionTab, setActionTab] = React.useState('');
-  const sliderHeight = useResponsiveSize(28);
-  const tocIconSize = useResponsiveSize(23);
-  const fontIconSize = useResponsiveSize(18);
-  const marginIconSize = useResponsiveSize(20);
-
-  const view = getView(bookKey);
-  const config = getConfig(bookKey);
-  const progress = getProgress(bookKey);
-  const viewSettings = getViewSettings(bookKey);
-  const viewState = getViewState(bookKey);
-
-  const handleProgressChange = (value: number) => {
-    view?.goToFraction(value / 100.0);
-  };
-
-  const handleFontSizeChange = (value: number) => {
-    saveViewSettings(envConfig, bookKey, 'defaultFontSize', value);
-  };
-
-  const handleMarginChange = (value: number) => {
-    const viewSettings = getViewSettings(bookKey)!;
-    const marginPx = Math.round((value / 100) * 88);
-    const gapPercent = Math.round((value / 100) * 10);
-    viewSettings.marginTopPx = marginPx;
-    viewSettings.marginBottomPx = marginPx / 2;
-    viewSettings.marginLeftPx = marginPx / 2;
-    viewSettings.marginRightPx = marginPx / 2;
-    saveViewSettings(envConfig, bookKey, 'gapPercent', gapPercent, false, false);
-    view?.renderer.setAttribute('margin', `${marginPx}px`);
-    view?.renderer.setAttribute('gap', `${gapPercent}%`);
-    if (viewSettings?.scrolled) {
-      view?.renderer.setAttribute('flow', 'scrolled');
-    }
-  };
-
-  const handleLineHeightChange = (value: number) => {
-    saveViewSettings(envConfig, bookKey, 'lineHeight', value / 10);
-  };
-
-  const handleGoPrevPage = () => {
-    viewPagination(view, viewSettings, 'left');
-  };
-
-  const handleGoNextPage = () => {
-    viewPagination(view, viewSettings, 'right');
-  };
-
-  const handleGoPrevSection = () => {
-    if (view?.renderer.prevSection) {
-      view?.renderer.prevSection();
-    }
-  };
-
-  const handleGoNextSection = () => {
-    if (view?.renderer.nextSection) {
-      view?.renderer.nextSection();
-    }
-  };
-
-  const handleGoBack = () => {
-    view?.history.back();
-  };
-
-  const handleGoForward = () => {
-    view?.history.forward();
-  };
-
-  const handleSpeakText = async () => {
-    if (!view || !progress || !viewState) return;
-    if (viewState.ttsEnabled) {
-      eventDispatcher.dispatch('tts-stop', { bookKey });
-    } else {
-      eventDispatcher.dispatch('tts-speak', { bookKey });
-    }
-  };
-
-  const handleSetActionTab = (tab: string) => {
-    setActionTab(actionTab === tab ? '' : tab);
-    if (tab === 'tts') {
-      setHoveredBookKey('');
-      handleSpeakText();
-    } else if (tab === 'toc') {
-      setHoveredBookKey('');
-      if (config && config.viewSettings) {
-        config.viewSettings.sideBarTab = 'toc';
-        setConfig(bookKey, config);
-      }
-      setSideBarVisible(true);
-    } else if (tab === 'note') {
-      setHoveredBookKey('');
-      setSideBarVisible(true);
-      if (config && config.viewSettings) {
-        config.viewSettings.sideBarTab = 'annotations';
-        setConfig(bookKey, config);
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (hoveredBookKey !== bookKey) {
-      setActionTab('');
-    }
-  }, [hoveredBookKey, bookKey]);
-
-  const getMarginProgressValue = (marginPx: number, gapPercent: number) => {
-    return (marginPx / 88 + gapPercent / 10) * 50;
-  };
-
-  const isVisible = hoveredBookKey === bookKey;
-  const ttsEnabled = viewState?.ttsEnabled;
-  const progressInfo = bookFormat === 'PDF' ? section : pageinfo;
-  const progressValid = !!progressInfo;
-  const progressFraction =
-    progressValid && progressInfo?.total > 0
-      ? (progressInfo!.current + 1) / progressInfo!.total || 0
-      : 0;
-
-  const isMobile = window.innerWidth < 640 || window.innerHeight < 640;
-
-  return (
-    <>
-      <div
-        role='none'
-        className={clsx(
-          'absolute bottom-0 left-0 z-10 hidden w-full sm:flex sm:h-[52px]',
-          // show scroll bar when vertical and scrolled in desktop
-          viewSettings?.vertical && viewSettings?.scrolled && 'sm:!bottom-3 sm:!h-7',
-        )}
-        onMouseEnter={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
-        onTouchStart={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
-      />
-      <div
-        role='group'
-        aria-label={_('Footer Bar')}
-        className={clsx(
-          'footer-bar shadow-xs bottom-0 z-10 flex w-full flex-col',
-          'sm:h-[52px] sm:justify-center',
-          'sm:bg-base-100 border-base-300/50 border-t sm:border-none',
-          'transition-[opacity,transform] duration-300',
-          // See: https://github.com/readest/readest/issues/1716
-          appService?.isAndroidApp && window.innerWidth < 640 ? 'fixed' : 'absolute',
-          appService?.hasRoundedWindow && 'rounded-window-bottom-right',
-          !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left',
-          isHoveredAnim && 'hover-bar-anim',
-          // show scroll bar when vertical and scrolled in desktop
-          viewSettings?.vertical && viewSettings?.scrolled && 'sm:!bottom-3 sm:!h-7',
-          isVisible
-            ? `pointer-events-auto translate-y-0 opacity-100`
-            : `pointer-events-none translate-y-full opacity-0 sm:translate-y-0`,
-        )}
-        dir={viewSettings?.rtl ? 'rtl' : 'ltr'}
-        onFocus={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
-        onMouseLeave={() => window.innerWidth >= 640 && setHoveredBookKey('')}
-      >
-        {/* Mobile footer bar */}
-        <div
-          className={clsx(
-            'footerbar-progress-mobile bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all sm:hidden',
-            actionTab === 'progress'
-              ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'
-              : 'pointer-events-none invisible translate-y-full overflow-hidden pb-0 pt-0 ease-in',
-          )}
-          style={{
-            bottom: isMobile ? `${gridInsets.bottom * 0.33 + 64}px` : '64px',
-          }}
-        >
-          <div className='flex w-full items-center justify-between gap-x-6'>
-            <Slider
-              label={_('Reading Progress')}
-              heightPx={sliderHeight}
-              bubbleLabel={`${Math.round(progressFraction * 100)}%`}
-              initialValue={progressValid ? progressFraction * 100 : 0}
-              onChange={(e) => handleProgressChange(e)}
-            />
-          </div>
-          <div className='flex w-full items-center justify-between gap-x-6'>
-            <Button
-              icon={viewSettings?.rtl ? <RiArrowRightDoubleLine /> : <RiArrowLeftDoubleLine />}
-              onClick={viewSettings?.rtl ? handleGoNextSection : handleGoPrevSection}
-              label={viewSettings?.rtl ? _('Next Section') : _('Previous Section')}
-            />
-            <Button
-              icon={viewSettings?.rtl ? <RiArrowRightSLine /> : <RiArrowLeftSLine />}
-              onClick={viewSettings?.rtl ? handleGoNextPage : handleGoPrevPage}
-              label={viewSettings?.rtl ? _('Next Page') : _('Previous Page')}
-            />
-            <Button
-              icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
-              onClick={handleGoBack}
-              label={_('Go Back')}
-              disabled={!view?.history.canGoBack}
-            />
-            <Button
-              icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
-              onClick={handleGoForward}
-              label={_('Go Forward')}
-              disabled={!view?.history.canGoForward}
-            />
-            <Button
-              icon={viewSettings?.rtl ? <RiArrowLeftSLine /> : <RiArrowRightSLine />}
-              onClick={viewSettings?.rtl ? handleGoPrevPage : handleGoNextPage}
-              label={viewSettings?.rtl ? _('Previous Page') : _('Next Page')}
-            />
-            <Button
-              icon={viewSettings?.rtl ? <RiArrowLeftDoubleLine /> : <RiArrowRightDoubleLine />}
-              onClick={viewSettings?.rtl ? handleGoPrevSection : handleGoNextSection}
-              label={viewSettings?.rtl ? _('Previous Section') : _('Next Section')}
-            />
-          </div>
-        </div>
-        <div
-          className={clsx(
-            'footerbar-font-mobile bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all sm:hidden',
-            actionTab === 'font'
-              ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'
-              : 'pointer-events-none invisible translate-y-full overflow-hidden pb-0 pt-0 ease-in',
-          )}
-          style={{
-            bottom: isMobile ? `${gridInsets.bottom * 0.33 + 64}px` : '64px',
-          }}
-        >
-          <Slider
-            label={_('Font Size')}
-            initialValue={viewSettings?.defaultFontSize ?? 16}
-            bubbleLabel={`${viewSettings?.defaultFontSize ?? 16}`}
-            minLabel='A'
-            maxLabel='A'
-            minClassName='text-xs'
-            maxClassName='text-base'
-            onChange={handleFontSizeChange}
-            min={8}
-            max={30}
-          />
-          <div className='flex w-full items-center justify-between gap-x-6'>
-            <Slider
-              label={_('Page Margin')}
-              initialValue={getMarginProgressValue(
-                viewSettings?.marginTopPx ?? 44,
-                viewSettings?.gapPercent ?? 5,
-              )}
-              bubbleElement={<TbBoxMargin size={marginIconSize} />}
-              minLabel={_('Small')}
-              maxLabel={_('Large')}
-              step={10}
-              onChange={handleMarginChange}
-            />
-            <Slider
-              label={_('Line Spacing')}
-              initialValue={(viewSettings?.lineHeight ?? 1.6) * 10}
-              bubbleElement={<RxLineHeight size={marginIconSize} />}
-              minLabel={_('Small')}
-              maxLabel={_('Large')}
-              min={8}
-              max={24}
-              onChange={handleLineHeightChange}
-            />
-          </div>
-        </div>
-        <div
-          className={clsx(
-            'bg-base-200 z-30 mt-auto flex w-full justify-between px-8 py-4 sm:hidden',
-          )}
-          style={{
-            paddingBottom: isMobile ? `${gridInsets.bottom * 0.33 + 16}px` : '0px',
-          }}
-        >
-          <Button
-            label={_('Table of Contents')}
-            icon={<TOCIcon size={tocIconSize} className='' />}
-            onClick={() => handleSetActionTab('toc')}
-          />
-          <Button
-            label={_('Notes')}
-            icon={<NoteIcon className='' />}
-            onClick={() => handleSetActionTab('note')}
-          />
-          <Button
-            label={_('Reading Progress')}
-            icon={<SliderIcon className={clsx(actionTab === 'progress' && 'text-blue-500')} />}
-            onClick={() => handleSetActionTab('progress')}
-          />
-          <Button
-            label={_('Font & Layout')}
-            icon={
-              <FontIcon
-                size={fontIconSize}
-                className={clsx(actionTab === 'font' && 'text-blue-500')}
-              />
-            }
-            onClick={() => handleSetActionTab('font')}
-          />
-          <Button
-            label={_('Speak')}
-            icon={<TTSIcon className={ttsEnabled ? 'text-blue-500' : ''} />}
-            onClick={() => handleSetActionTab('tts')}
-          />
-        </div>
-        {/* Desktop / Pad footer bar */}
-        <div
-          className='absolute hidden h-full w-full items-center gap-x-4 px-4 sm:flex'
-          style={{
-            bottom: isMobile ? `${gridInsets.bottom * 0.33}px` : '0px',
-          }}
-        >
-          <Button
-            icon={viewSettings?.rtl ? <RiArrowRightDoubleLine /> : <RiArrowLeftDoubleLine />}
-            onClick={viewSettings?.rtl ? handleGoNextSection : handleGoPrevSection}
-            label={viewSettings?.rtl ? _('Next Section') : _('Previous Section')}
-          />
-          <Button
-            icon={viewSettings?.rtl ? <RiArrowRightSLine /> : <RiArrowLeftSLine />}
-            onClick={viewSettings?.rtl ? handleGoNextPage : handleGoPrevPage}
-            label={viewSettings?.rtl ? _('Next Page') : _('Previous Page')}
-          />
-          <Button
-            icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
-            onClick={handleGoBack}
-            label={_('Go Back')}
-            disabled={!view?.history.canGoBack}
-          />
-          <Button
-            icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
-            onClick={handleGoForward}
-            label={_('Go Forward')}
-            disabled={!view?.history.canGoForward}
-          />
-          {progressValid && (
-            <span
-              title={_('Reading Progress')}
-              aria-label={_('Reading Progress') + ': ' + `${Math.round(progressFraction * 100)}%`}
-              className='mx-2 text-center text-sm'
-            >
-              <span aria-hidden='true'>{`${Math.round(progressFraction * 100)}%`}</span>
-            </span>
-          )}
-          <input
-            type='range'
-            className='text-base-content mx-2 min-w-0 flex-1'
-            min={0}
-            max={100}
-            aria-label={_('Jump to Location')}
-            value={progressValid ? progressFraction * 100 : 0}
-            onChange={(e) =>
-              handleProgressChange(parseInt((e.target as HTMLInputElement).value, 10))
-            }
-          />
-          <Button
-            icon={<FaHeadphones className={ttsEnabled ? 'text-blue-500' : ''} />}
-            onClick={handleSpeakText}
-            label={_('Speak')}
-          />
-          <Button
-            icon={viewSettings?.rtl ? <RiArrowLeftSLine /> : <RiArrowRightSLine />}
-            onClick={viewSettings?.rtl ? handleGoPrevPage : handleGoNextPage}
-            label={viewSettings?.rtl ? _('Previous Page') : _('Next Page')}
-          />
-          <Button
-            icon={viewSettings?.rtl ? <RiArrowLeftDoubleLine /> : <RiArrowRightDoubleLine />}
-            onClick={viewSettings?.rtl ? handleGoPrevSection : handleGoNextSection}
-            label={viewSettings?.rtl ? _('Previous Section') : _('Next Section')}
-          />
-        </div>
-      </div>
-      <TTSControl bookKey={bookKey} gridInsets={gridInsets} />
-    </>
-  );
-};
-
-export default FooterBar;
diff --git a/apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx
new file mode 100644
index 00000000..340804be
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { FaHeadphones } from 'react-icons/fa6';
+import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
+import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
+import { RiArrowLeftDoubleLine, RiArrowRightDoubleLine } from 'react-icons/ri';
+import { getNavigationIcon, getNavigationLabel, getNavigationHandler } from './utils';
+import { useReaderStore } from '@/store/readerStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { FooterBarChildProps } from './types';
+import Button from '@/components/Button';
+
+const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
+  bookKey,
+  gridInsets,
+  progressValid,
+  progressFraction,
+  navigationHandlers,
+  onSpeakText,
+}) => {
+  const _ = useTranslation();
+  const { getView, getViewState, getViewSettings } = useReaderStore();
+  const view = getView(bookKey);
+  const viewState = getViewState(bookKey);
+  const viewSettings = getViewSettings(bookKey);
+  const isMobile = window.innerWidth < 640 || window.innerHeight < 640;
+
+  return (
+    <div
+      className='absolute hidden h-full w-full items-center gap-x-4 px-4 sm:flex'
+      style={{ bottom: isMobile ? `${gridInsets.bottom * 0.33}px` : '0px' }}
+    >
+      <Button
+        icon={getNavigationIcon(
+          viewSettings?.rtl,
+          <RiArrowLeftDoubleLine />,
+          <RiArrowRightDoubleLine />,
+        )}
+        onClick={getNavigationHandler(
+          viewSettings?.rtl,
+          navigationHandlers.onPrevSection,
+          navigationHandlers.onNextSection,
+        )}
+        label={getNavigationLabel(viewSettings?.rtl, _('Previous Section'), _('Next Section'))}
+      />
+      <Button
+        icon={getNavigationIcon(viewSettings?.rtl, <RiArrowLeftSLine />, <RiArrowRightSLine />)}
+        onClick={getNavigationHandler(
+          viewSettings?.rtl,
+          navigationHandlers.onPrevPage,
+          navigationHandlers.onNextPage,
+        )}
+        label={getNavigationLabel(viewSettings?.rtl, _('Previous Page'), _('Next Page'))}
+      />
+      <Button
+        icon={getNavigationIcon(viewSettings?.rtl, <RiArrowGoBackLine />, <RiArrowGoForwardLine />)}
+        onClick={navigationHandlers.onGoBack}
+        label={_('Go Back')}
+        disabled={!view?.history.canGoBack}
+      />
+      <Button
+        icon={getNavigationIcon(viewSettings?.rtl, <RiArrowGoForwardLine />, <RiArrowGoBackLine />)}
+        onClick={navigationHandlers.onGoForward}
+        label={_('Go Forward')}
+        disabled={!view?.history.canGoForward}
+      />
+      {progressValid && (
+        <span
+          title={_('Reading Progress')}
+          aria-label={`${_('Reading Progress')}: ${Math.round(progressFraction * 100)}%`}
+          className='mx-2 text-center text-sm'
+        >
+          <span aria-hidden='true'>{`${Math.round(progressFraction * 100)}%`}</span>
+        </span>
+      )}
+      <input
+        type='range'
+        className='text-base-content mx-2 min-w-0 flex-1'
+        min={0}
+        max={100}
+        aria-label={_('Jump to Location')}
+        value={progressValid ? progressFraction * 100 : 0}
+        onChange={(e) => navigationHandlers.onProgressChange(parseInt(e.target.value, 10))}
+      />
+      <Button
+        icon={<FaHeadphones className={viewState?.ttsEnabled ? 'text-blue-500' : ''} />}
+        onClick={onSpeakText!}
+        label={_('Speak')}
+      />
+      <Button
+        icon={getNavigationIcon(viewSettings?.rtl, <RiArrowRightSLine />, <RiArrowLeftSLine />)}
+        onClick={getNavigationHandler(
+          viewSettings?.rtl,
+          navigationHandlers.onNextPage,
+          navigationHandlers.onPrevPage,
+        )}
+        label={getNavigationLabel(viewSettings?.rtl, _('Next Page'), _('Previous Page'))}
+      />
+      <Button
+        icon={getNavigationIcon(
+          viewSettings?.rtl,
+          <RiArrowRightDoubleLine />,
+          <RiArrowLeftDoubleLine />,
+        )}
+        onClick={getNavigationHandler(
+          viewSettings?.rtl,
+          navigationHandlers.onNextSection,
+          navigationHandlers.onPrevSection,
+        )}
+        label={getNavigationLabel(viewSettings?.rtl, _('Next Section'), _('Previous Section'))}
+      />
+    </div>
+  );
+};
+
+export default DesktopFooterBar;
diff --git a/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx
new file mode 100644
index 00000000..0e73d99a
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx
@@ -0,0 +1,140 @@
+import clsx from 'clsx';
+import React, { useCallback } from 'react';
+import { TbBoxMargin } from 'react-icons/tb';
+import { RxLineHeight } from 'react-icons/rx';
+import { useEnv } from '@/context/EnvContext';
+import { useReaderStore } from '@/store/readerStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { saveViewSettings } from '@/helpers/viewSettings';
+import Slider from '@/components/Slider';
+
+const FONT_SIZE_LIMITS = {
+  MIN: 8,
+  MAX: 30,
+  DEFAULT: 16,
+} as const;
+
+const LINE_HEIGHT_LIMITS = {
+  MIN: 8,
+  MAX: 24,
+  DEFAULT: 16,
+  MULTIPLIER: 10,
+} as const;
+
+const MARGIN_CONSTANTS = {
+  MAX_MARGIN_PX: 88,
+  MAX_GAP_PERCENT: 10,
+  MARGIN_RATIO: 50,
+} as const;
+
+interface FontLayoutPanelProps {
+  bookKey: string;
+  actionTab: string;
+  mobileBottomOffset: string;
+  marginIconSize: number;
+}
+
+export const FontLayoutPanel: React.FC<FontLayoutPanelProps> = ({
+  bookKey,
+  actionTab,
+  mobileBottomOffset,
+  marginIconSize,
+}) => {
+  const _ = useTranslation();
+  const { envConfig } = useEnv();
+  const { getView, getViewSettings } = useReaderStore();
+  const viewSettings = getViewSettings(bookKey);
+  const view = getView(bookKey);
+
+  const handleFontSizeChange = useCallback(
+    (value: number) => {
+      saveViewSettings(envConfig, bookKey, 'defaultFontSize', value);
+    },
+    [envConfig, bookKey],
+  );
+
+  const handleMarginChange = useCallback(
+    (value: number) => {
+      const currentViewSettings = getViewSettings(bookKey);
+      if (!currentViewSettings) return;
+
+      const { MAX_MARGIN_PX, MAX_GAP_PERCENT } = MARGIN_CONSTANTS;
+      const marginPx = Math.round((value / 100) * MAX_MARGIN_PX);
+      const gapPercent = Math.round((value / 100) * MAX_GAP_PERCENT);
+
+      currentViewSettings.marginTopPx = marginPx;
+      currentViewSettings.marginBottomPx = marginPx / 2;
+      currentViewSettings.marginLeftPx = marginPx / 2;
+      currentViewSettings.marginRightPx = marginPx / 2;
+
+      saveViewSettings(envConfig, bookKey, 'gapPercent', gapPercent, false, false);
+      view?.renderer.setAttribute('margin', `${marginPx}px`);
+      view?.renderer.setAttribute('gap', `${gapPercent}%`);
+
+      if (currentViewSettings?.scrolled) {
+        view?.renderer.setAttribute('flow', 'scrolled');
+      }
+    },
+    [envConfig, bookKey, view, getViewSettings],
+  );
+
+  const handleLineHeightChange = useCallback(
+    (value: number) => {
+      saveViewSettings(envConfig, bookKey, 'lineHeight', value / LINE_HEIGHT_LIMITS.MULTIPLIER);
+    },
+    [envConfig, bookKey],
+  );
+
+  const getMarginProgressValue = useCallback((marginPx: number, gapPercent: number) => {
+    const { MAX_MARGIN_PX, MAX_GAP_PERCENT, MARGIN_RATIO } = MARGIN_CONSTANTS;
+    return (marginPx / MAX_MARGIN_PX + gapPercent / MAX_GAP_PERCENT) * MARGIN_RATIO;
+  }, []);
+
+  const classes = clsx(
+    'footerbar-font-mobile bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all sm:hidden',
+    actionTab === 'font'
+      ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'
+      : 'pointer-events-none invisible translate-y-full overflow-hidden pb-0 pt-0 ease-in',
+  );
+
+  return (
+    <div className={classes} style={{ bottom: mobileBottomOffset }}>
+      <Slider
+        label={_('Font Size')}
+        initialValue={viewSettings?.defaultFontSize ?? FONT_SIZE_LIMITS.DEFAULT}
+        bubbleLabel={`${viewSettings?.defaultFontSize ?? FONT_SIZE_LIMITS.DEFAULT}`}
+        minLabel='A'
+        maxLabel='A'
+        minClassName='text-xs'
+        maxClassName='text-base'
+        onChange={handleFontSizeChange}
+        min={FONT_SIZE_LIMITS.MIN}
+        max={FONT_SIZE_LIMITS.MAX}
+      />
+      <div className='flex w-full items-center justify-between gap-x-6'>
+        <Slider
+          label={_('Page Margin')}
+          initialValue={getMarginProgressValue(
+            viewSettings?.marginTopPx ?? 44,
+            viewSettings?.gapPercent ?? 5,
+          )}
+          bubbleElement={<TbBoxMargin size={marginIconSize} />}
+          minLabel={_('Small')}
+          maxLabel={_('Large')}
+          step={10}
+          onChange={handleMarginChange}
+        />
+        <Slider
+          label={_('Line Spacing')}
+          initialValue={(viewSettings?.lineHeight ?? 1.6) * LINE_HEIGHT_LIMITS.MULTIPLIER}
+          bubbleElement={<RxLineHeight size={marginIconSize} />}
+          minLabel={_('Small')}
+          maxLabel={_('Large')}
+          min={LINE_HEIGHT_LIMITS.MIN}
+          max={LINE_HEIGHT_LIMITS.MAX}
+          onChange={handleLineHeightChange}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
new file mode 100644
index 00000000..bdcebbe7
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
@@ -0,0 +1,201 @@
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import clsx from 'clsx';
+import { useEnv } from '@/context/EnvContext';
+import { useReaderStore } from '@/store/readerStore';
+import { useSidebarStore } from '@/store/sidebarStore';
+import { useBookDataStore } from '@/store/bookDataStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { eventDispatcher } from '@/utils/event';
+import { FooterBarProps, NavigationHandlers, FooterBarChildProps } from './types';
+import { viewPagination } from '../../hooks/usePagination';
+import MobileFooterBar from './MobileFooterBar';
+import DesktopFooterBar from './DesktopFooterBar';
+import TTSControl from '../tts/TTSControl';
+
+const FooterBar: React.FC<FooterBarProps> = ({
+  bookKey,
+  bookFormat,
+  section,
+  pageinfo,
+  isHoveredAnim,
+  gridInsets,
+}) => {
+  const _ = useTranslation();
+  const { appService } = useEnv();
+  const { getConfig, setConfig } = useBookDataStore();
+  const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
+  const { getView, getViewState, getProgress, getViewSettings } = useReaderStore();
+  const { isSideBarVisible, setSideBarVisible } = useSidebarStore();
+
+  const [actionTab, setActionTab] = useState('');
+
+  const view = getView(bookKey);
+  const config = getConfig(bookKey);
+  const viewState = getViewState(bookKey);
+  const progress = getProgress(bookKey);
+  const viewSettings = getViewSettings(bookKey);
+
+  const isVisible = hoveredBookKey === bookKey;
+
+  const progressInfo = useMemo(
+    () => (bookFormat === 'PDF' ? section : pageinfo),
+    [bookFormat, section, pageinfo],
+  );
+
+  const progressValid = !!progressInfo;
+  const progressFraction = useMemo(() => {
+    if (!progressValid || !progressInfo?.total || progressInfo.total <= 0) {
+      return 0;
+    }
+    return (progressInfo.current + 1) / progressInfo.total;
+  }, [progressValid, progressInfo]);
+
+  const handleProgressChange = useCallback(
+    (value: number) => {
+      view?.goToFraction(value / 100.0);
+    },
+    [view],
+  );
+
+  const handleGoPrevPage = useCallback(() => {
+    viewPagination(view, viewSettings, 'left');
+  }, [view, viewSettings]);
+
+  const handleGoNextPage = useCallback(() => {
+    viewPagination(view, viewSettings, 'right');
+  }, [view, viewSettings]);
+
+  const handleGoPrevSection = useCallback(() => {
+    view?.renderer.prevSection?.();
+  }, [view]);
+
+  const handleGoNextSection = useCallback(() => {
+    view?.renderer.nextSection?.();
+  }, [view]);
+
+  const handleGoBack = useCallback(() => {
+    view?.history.back();
+  }, [view]);
+
+  const handleGoForward = useCallback(() => {
+    view?.history.forward();
+  }, [view]);
+
+  const handleSpeakText = useCallback(async () => {
+    if (!view || !progress || !viewState) return;
+
+    const eventType = viewState.ttsEnabled ? 'tts-stop' : 'tts-speak';
+    eventDispatcher.dispatch(eventType, { bookKey });
+  }, [view, progress, viewState, bookKey]);
+
+  const handleSetActionTab = useCallback(
+    (tab: string) => {
+      setActionTab((prevTab) => (prevTab === tab ? '' : tab));
+
+      if (tab === 'tts') {
+        setHoveredBookKey('');
+        handleSpeakText();
+      } else if (tab === 'toc') {
+        setHoveredBookKey('');
+        if (config?.viewSettings) {
+          config.viewSettings.sideBarTab = 'toc';
+          setConfig(bookKey, config);
+        }
+        setSideBarVisible(true);
+      } else if (tab === 'note') {
+        setHoveredBookKey('');
+        setSideBarVisible(true);
+        if (config?.viewSettings) {
+          config.viewSettings.sideBarTab = 'annotations';
+          setConfig(bookKey, config);
+        }
+      }
+    },
+    [config, bookKey, setConfig, setSideBarVisible, setHoveredBookKey, handleSpeakText],
+  );
+
+  useEffect(() => {
+    if (hoveredBookKey !== bookKey) {
+      setActionTab('');
+    }
+  }, [hoveredBookKey, bookKey]);
+
+  const navigationHandlers: NavigationHandlers = useMemo(
+    () => ({
+      onPrevPage: handleGoPrevPage,
+      onNextPage: handleGoNextPage,
+      onPrevSection: handleGoPrevSection,
+      onNextSection: handleGoNextSection,
+      onGoBack: handleGoBack,
+      onGoForward: handleGoForward,
+      onProgressChange: handleProgressChange,
+    }),
+    [
+      handleGoPrevPage,
+      handleGoNextPage,
+      handleGoPrevSection,
+      handleGoNextSection,
+      handleGoBack,
+      handleGoForward,
+      handleProgressChange,
+    ],
+  );
+
+  const commonProps: FooterBarChildProps = {
+    bookKey,
+    gridInsets,
+    actionTab,
+    progressValid,
+    progressFraction,
+    navigationHandlers,
+    onSetActionTab: handleSetActionTab,
+    onSpeakText: handleSpeakText,
+  };
+
+  const containerClasses = clsx(
+    'footer-bar shadow-xs bottom-0 z-10 flex w-full flex-col',
+    'sm:h-[52px] sm:justify-center',
+    'sm:bg-base-100 border-base-300/50 border-t sm:border-none',
+    'transition-[opacity,transform] duration-300',
+    appService?.isAndroidApp && window.innerWidth < 640 ? 'fixed' : 'absolute',
+    appService?.hasRoundedWindow && 'rounded-window-bottom-right',
+    !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left',
+    isHoveredAnim && 'hover-bar-anim',
+    viewSettings?.vertical && viewSettings?.scrolled && 'sm:!bottom-3 sm:!h-7',
+    isVisible
+      ? 'pointer-events-auto translate-y-0 opacity-100'
+      : 'pointer-events-none translate-y-full opacity-0 sm:translate-y-0',
+  );
+
+  return (
+    <>
+      {/* Hover trigger area */}
+      <div
+        role='none'
+        className={clsx(
+          'absolute bottom-0 left-0 z-10 hidden w-full sm:flex sm:h-[52px]',
+          viewSettings?.vertical && viewSettings?.scrolled && 'sm:!bottom-3 sm:!h-7',
+        )}
+        onMouseEnter={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
+        onTouchStart={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
+      />
+
+      {/* Main footer container */}
+      <div
+        role='group'
+        aria-label={_('Footer Bar')}
+        className={containerClasses}
+        dir={viewSettings?.rtl ? 'rtl' : 'ltr'}
+        onFocus={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
+        onMouseLeave={() => window.innerWidth >= 640 && setHoveredBookKey('')}
+      >
+        <MobileFooterBar {...commonProps} />
+        <DesktopFooterBar {...commonProps} />
+      </div>
+
+      <TTSControl bookKey={bookKey} gridInsets={gridInsets} />
+    </>
+  );
+};
+
+export default FooterBar;
diff --git a/apps/readest-app/src/app/reader/components/footerbar/MobileFooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/MobileFooterBar.tsx
new file mode 100644
index 00000000..36ed2ae3
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/footerbar/MobileFooterBar.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { NavigationPanel } from './NavigationPanel';
+import { FontLayoutPanel } from './FontLayoutPanel';
+import { NavigationBar } from './NavigationBar';
+import { FooterBarChildProps } from './types';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+
+const MobileFooterBar: React.FC<FooterBarChildProps> = ({
+  bookKey,
+  gridInsets,
+  actionTab,
+  progressValid,
+  progressFraction,
+  navigationHandlers,
+  onSetActionTab,
+}) => {
+  const isMobile = window.innerWidth < 640 || window.innerHeight < 640;
+  const sliderHeight = useResponsiveSize(28);
+  const marginIconSize = useResponsiveSize(20);
+  const bottomOffset = isMobile ? `${gridInsets.bottom * 0.33 + 64}px` : '64px';
+  const navPadding = isMobile ? `${gridInsets.bottom * 0.33 + 16}px` : '0px';
+
+  return (
+    <>
+      <NavigationPanel
+        actionTab={actionTab!}
+        progressFraction={progressFraction}
+        progressValid={progressValid}
+        navigationHandlers={navigationHandlers}
+        bottomOffset={bottomOffset}
+        sliderHeight={sliderHeight}
+      />
+      <FontLayoutPanel
+        bookKey={bookKey}
+        actionTab={actionTab!}
+        mobileBottomOffset={bottomOffset}
+        marginIconSize={marginIconSize}
+      />
+      <NavigationBar
+        bookKey={bookKey}
+        actionTab={actionTab!}
+        navPadding={navPadding}
+        onSetActionTab={onSetActionTab!}
+      />
+    </>
+  );
+};
+
+export default MobileFooterBar;
diff --git a/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
new file mode 100644
index 00000000..9c0e95bb
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
@@ -0,0 +1,62 @@
+import clsx from 'clsx';
+import React from 'react';
+import { IoIosList as TOCIcon } from 'react-icons/io';
+import { PiNotePencil as NoteIcon } from 'react-icons/pi';
+import { RxSlider as SliderIcon } from 'react-icons/rx';
+import { RiFontFamily as FontIcon } from 'react-icons/ri';
+import { MdOutlineHeadphones as TTSIcon } from 'react-icons/md';
+import { useReaderStore } from '@/store/readerStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+import Button from '@/components/Button';
+
+interface NavigationBarProps {
+  bookKey: string;
+  actionTab: string;
+  navPadding: string;
+  onSetActionTab: (tab: string) => void;
+}
+
+export const NavigationBar: React.FC<NavigationBarProps> = ({
+  bookKey,
+  actionTab,
+  navPadding: mobileNavPadding,
+  onSetActionTab,
+}) => {
+  const _ = useTranslation();
+  const { getViewState } = useReaderStore();
+  const viewState = getViewState(bookKey);
+  const tocIconSize = useResponsiveSize(23);
+  const fontIconSize = useResponsiveSize(18);
+
+  return (
+    <div
+      className={clsx('bg-base-200 z-30 mt-auto flex w-full justify-between px-8 py-4 sm:hidden')}
+      style={{ paddingBottom: mobileNavPadding }}
+    >
+      <Button
+        label={_('Table of Contents')}
+        icon={<TOCIcon size={tocIconSize} />}
+        onClick={() => onSetActionTab('toc')}
+      />
+      <Button label={_('Notes')} icon={<NoteIcon />} onClick={() => onSetActionTab('note')} />
+      <Button
+        label={_('Reading Progress')}
+        icon={<SliderIcon className={clsx(actionTab === 'progress' && 'text-blue-500')} />}
+        onClick={() => onSetActionTab('progress')}
+      />
+      <Button
+        label={_('Font & Layout')}
+        icon={
+          <FontIcon size={fontIconSize} className={clsx(actionTab === 'font' && 'text-blue-500')} />
+        }
+        onClick={() => onSetActionTab('font')}
+      />
+      <Button
+        label={_('Speak')}
+        icon={<TTSIcon className={viewState?.ttsEnabled ? 'text-blue-500' : ''} />}
+        onClick={() => onSetActionTab('tts')}
+      />
+    </div>
+  );
+};
diff --git a/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
new file mode 100644
index 00000000..edf2a30c
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import clsx from 'clsx';
+import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
+import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
+import { RiArrowLeftDoubleLine, RiArrowRightDoubleLine } from 'react-icons/ri';
+import { getNavigationIcon, getNavigationLabel, getNavigationHandler } from './utils';
+import { useTranslation } from '@/hooks/useTranslation';
+import { ViewSettings } from '@/types/book';
+import { NavigationHandlers } from './types';
+import Button from '@/components/Button';
+import Slider from '@/components/Slider';
+
+interface NavigationPanelProps {
+  actionTab: string;
+  progressFraction: number;
+  progressValid: boolean;
+  navigationHandlers: NavigationHandlers;
+  viewSettings?: ViewSettings;
+  bottomOffset: string;
+  sliderHeight: number;
+}
+
+export const NavigationPanel: React.FC<NavigationPanelProps> = ({
+  actionTab,
+  progressFraction,
+  progressValid,
+  navigationHandlers,
+  viewSettings,
+  bottomOffset: mobileBottomOffset,
+  sliderHeight,
+}) => {
+  const _ = useTranslation();
+  const classes = clsx(
+    'footerbar-progress-mobile bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all sm:hidden',
+    actionTab === 'progress'
+      ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'
+      : 'pointer-events-none invisible translate-y-full overflow-hidden pb-0 pt-0 ease-in',
+  );
+
+  return (
+    <div className={classes} style={{ bottom: mobileBottomOffset }}>
+      <div className='flex w-full items-center justify-between gap-x-6'>
+        <Slider
+          label={_('Reading Progress')}
+          heightPx={sliderHeight}
+          bubbleLabel={`${Math.round(progressFraction * 100)}%`}
+          initialValue={progressValid ? progressFraction * 100 : 0}
+          onChange={navigationHandlers.onProgressChange}
+        />
+      </div>
+      <div className='flex w-full items-center justify-between gap-x-6'>
+        <Button
+          icon={getNavigationIcon(
+            viewSettings?.rtl,
+            <RiArrowLeftDoubleLine />,
+            <RiArrowRightDoubleLine />,
+          )}
+          onClick={getNavigationHandler(
+            viewSettings?.rtl,
+            navigationHandlers.onPrevSection,
+            navigationHandlers.onNextSection,
+          )}
+          label={getNavigationLabel(viewSettings?.rtl, _('Previous Section'), _('Next Section'))}
+        />
+        <Button
+          icon={getNavigationIcon(viewSettings?.rtl, <RiArrowLeftSLine />, <RiArrowRightSLine />)}
+          onClick={getNavigationHandler(
+            viewSettings?.rtl,
+            navigationHandlers.onPrevPage,
+            navigationHandlers.onNextPage,
+          )}
+          label={getNavigationLabel(viewSettings?.rtl, _('Previous Page'), _('Next Page'))}
+        />
+        <Button
+          icon={getNavigationIcon(
+            viewSettings?.rtl,
+            <RiArrowGoBackLine />,
+            <RiArrowGoForwardLine />,
+          )}
+          onClick={navigationHandlers.onGoBack}
+          label={_('Go Back')}
+          disabled={!navigationHandlers.onGoBack}
+        />
+        <Button
+          icon={getNavigationIcon(
+            viewSettings?.rtl,
+            <RiArrowGoForwardLine />,
+            <RiArrowGoBackLine />,
+          )}
+          onClick={navigationHandlers.onGoForward}
+          label={_('Go Forward')}
+          disabled={!navigationHandlers.onGoForward}
+        />
+        <Button
+          icon={getNavigationIcon(viewSettings?.rtl, <RiArrowRightSLine />, <RiArrowLeftSLine />)}
+          onClick={getNavigationHandler(
+            viewSettings?.rtl,
+            navigationHandlers.onNextPage,
+            navigationHandlers.onPrevPage,
+          )}
+          label={getNavigationLabel(viewSettings?.rtl, _('Next Page'), _('Previous Page'))}
+        />
+        <Button
+          icon={getNavigationIcon(
+            viewSettings?.rtl,
+            <RiArrowRightDoubleLine />,
+            <RiArrowLeftDoubleLine />,
+          )}
+          onClick={getNavigationHandler(
+            viewSettings?.rtl,
+            navigationHandlers.onNextSection,
+            navigationHandlers.onPrevSection,
+          )}
+          label={getNavigationLabel(viewSettings?.rtl, _('Next Section'), _('Previous Section'))}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/readest-app/src/app/reader/components/footerbar/types.ts b/apps/readest-app/src/app/reader/components/footerbar/types.ts
new file mode 100644
index 00000000..ef894e6c
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/footerbar/types.ts
@@ -0,0 +1,32 @@
+import { PageInfo } from '@/types/book';
+import { Insets } from '@/types/misc';
+
+export interface FooterBarProps {
+  bookKey: string;
+  bookFormat: string;
+  section?: PageInfo;
+  pageinfo?: PageInfo;
+  isHoveredAnim: boolean;
+  gridInsets: Insets;
+}
+
+export interface NavigationHandlers {
+  onPrevPage: () => void;
+  onNextPage: () => void;
+  onPrevSection: () => void;
+  onNextSection: () => void;
+  onGoBack: () => void;
+  onGoForward: () => void;
+  onProgressChange: (value: number) => void;
+}
+
+export interface FooterBarChildProps {
+  bookKey: string;
+  navigationHandlers: NavigationHandlers;
+  progressFraction: number;
+  progressValid: boolean;
+  gridInsets: Insets;
+  actionTab: string;
+  onSetActionTab: (tab: string) => void;
+  onSpeakText: () => void;
+}
diff --git a/apps/readest-app/src/app/reader/components/footerbar/utils.ts b/apps/readest-app/src/app/reader/components/footerbar/utils.ts
new file mode 100644
index 00000000..22e0ba04
--- /dev/null
+++ b/apps/readest-app/src/app/reader/components/footerbar/utils.ts
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const getNavigationIcon = (
+  rtl: boolean | undefined,
+  prevIcon: React.ReactNode,
+  nextIcon: React.ReactNode,
+) => (rtl ? nextIcon : prevIcon);
+
+export const getNavigationLabel = (
+  rtl: boolean | undefined,
+  prevLabel: string,
+  nextLabel: string,
+) => (rtl ? nextLabel : prevLabel);
+
+export const getNavigationHandler = (
+  rtl: boolean | undefined,
+  prevHandler: () => void,
+  nextHandler: () => void,
+) => (rtl ? nextHandler : prevHandler);