diff --git a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopChapterNavigation.tsx b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopChapterNavigation.tsx
index c8884c24..8e7492a9 100644
--- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopChapterNavigation.tsx
+++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopChapterNavigation.tsx
@@ -26,6 +26,7 @@ import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import type { ReaderStateChapters } from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import type { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
+import { useTheme } from '@mui/material/styles';
 
 const BaseReaderNavBarDesktopChapterNavigation = ({
     currentChapterId,
@@ -43,6 +44,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
         readerThemeDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
     }) => {
     const { t } = useLingui();
+    const theme = useTheme();
 
     const popupState = usePopupState({ variant: 'popover', popupId: 'reader-nav-bar-desktop-chapter-list' });
 
@@ -60,7 +62,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
                 }}
                 disabled={getOptionForDirection(!previousChapter, !nextChapter, readerThemeDirection)}
             />
-            <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
+            <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }} dir={theme.direction}>
                 <InputLabel id="reader-nav-bar-desktop-chapter-select">{t`Chapter`}</InputLabel>
                 <Select
                     {...bindTrigger(popupState)}
diff --git a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
index f5e14121..22348985 100644
--- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
+++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
@@ -19,9 +19,11 @@ import { ReaderNavBarDesktopNextPreviousButton } from '@/features/reader/overlay
 import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { useReaderPagesStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
+import { useTheme } from '@mui/material/styles';
 
 const BaseReaderNavBarDesktopPageNavigation = () => {
     const { t } = useLingui();
+    const theme = useTheme();
     const getOptionForDirection = useGetOptionForDirection();
     const { currentPageIndex, pages } = useReaderPagesStore('currentPageIndex', 'pages');
     const readingDirection = useReaderSettingsStore((state) => state.readingDirection.value);
@@ -41,7 +43,7 @@ const BaseReaderNavBarDesktopPageNavigation = () => {
                 )}
                 onClick={() => ReaderControls.openPage('previous', undefined, false)}
             />
-            <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
+            <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }} dir={theme.direction}>
                 <InputLabel id="reader-nav-bar-desktop-page-select">{t`Page`}</InputLabel>
                 <Select
                     labelId="reader-nav-bar-desktop-page-select"