diff --git a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx
index f2124039..86578a3a 100644
--- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx
@@ -37,14 +37,14 @@ export const ReaderProgressBarCurrentPageSlot = ({
                 position: 'absolute',
                 cursor: isDragging ? 'grabbing' : 'grab',
                 ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, {
-                    left: `${(Math.max(0, currentPagesIndex) / pagesLength) * 100}%`,
-                    width: `calc(100% / ${pagesLength})`,
+                    left: `${(Math.max(0, currentPagesIndex - 1) / (pagesLength - 1)) * 100}%`,
+                    width: `calc(100% / ${pagesLength - 1})`,
                     height: '100%',
                 }),
                 ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
-                    top: `${(Math.max(0, currentPagesIndex) / pagesLength) * 100}%`,
+                    top: `${(Math.max(0, currentPagesIndex - 1) / pagesLength - 1) * 100}%`,
                     width: '100%',
-                    height: `calc(100% / ${pagesLength})`,
+                    height: `calc(100% / ${pagesLength - 1})`,
                 }),
                 ...boxProps?.sx,
             }}
diff --git a/src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx b/src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx
index 18076f24..346dc717 100644
--- a/src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx
@@ -20,33 +20,68 @@ const SLOT_SX_PROP: NonNullable<NonNullable<ComponentProps<typeof ReaderProgress
     backgroundColor: 'background.default',
 };
 
-const ProgressBarPagePoint = memo(({ isTrailingPage }: { isTrailingPage: boolean }) => (
-    <Box
-        sx={{
-            position: 'absolute',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            right: '2px',
-            width: '2px',
-            height: '2px',
-            borderRadius: 100,
-            backgroundColor: 'background.paper',
-            ...applyStyles(isTrailingPage, {
-                backgroundColor: 'primary.main',
-            }),
-            zIndex: 1,
-        }}
-    />
-));
+const START_END_GAP = '4px';
+const POINT_SIZE = '3px';
+const ProgressBarPagePoint = memo(
+    ({
+        isTrailingPage,
+        pagesIndex,
+        totalPages,
+    }: {
+        isTrailingPage: boolean;
+        pagesIndex: number;
+        totalPages: number;
+    }) => {
+        const isFirstPage = pagesIndex === 0;
+        const isLastPage = pagesIndex === totalPages - 1;
+
+        const left = `${(pagesIndex / (totalPages - 1)) * 100}%`;
+
+        return (
+            <Box
+                sx={{
+                    position: 'absolute',
+                    top: '50%',
+                    left,
+                    ...applyStyles(isFirstPage, {
+                        left: START_END_GAP,
+                    }),
+                    ...applyStyles(isLastPage, {
+                        left: `calc(${left} - ${START_END_GAP})`,
+                    }),
+                    transform: 'translate(-50%, -50%)',
+                    width: POINT_SIZE,
+                    height: POINT_SIZE,
+                    borderRadius: 100,
+                    backgroundColor: 'background.paper',
+                    ...applyStyles(isTrailingPage, {
+                        backgroundColor: 'primary.main',
+                    }),
+                    zIndex: 1,
+                }}
+            />
+        );
+    },
+);
 
 export const ReaderProgressBarSlotMobile = memo(
-    ({ pageName, isTrailingPage }: { pageName: string; isTrailingPage: boolean }) => (
+    ({
+        pageName,
+        isTrailingPage,
+        pagesIndex,
+        totalPages,
+    }: {
+        pageName: string;
+        isTrailingPage: boolean;
+        pagesIndex: number;
+        totalPages: number;
+    }) => (
         <ReaderProgressBarSlot
             pageName={pageName}
             progressBarPosition={ProgressBarPosition.BOTTOM}
             slotProps={{ box: { sx: SLOT_SX_PROP } }}
         >
-            <ProgressBarPagePoint isTrailingPage={isTrailingPage} />
+            <ProgressBarPagePoint isTrailingPage={isTrailingPage} pagesIndex={pagesIndex} totalPages={totalPages} />
         </ReaderProgressBarSlot>
     ),
 );
diff --git a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
index e2a27443..6f3ec8fe 100644
--- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
@@ -12,7 +12,7 @@ import SkipNextIcon from '@mui/icons-material/SkipNext';
 import Stack from '@mui/material/Stack';
 import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import { ComponentProps, memo, useCallback, useLayoutEffect } from 'react';
+import { ComponentProps, memo, useCallback, useLayoutEffect, useMemo } from 'react';
 import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
@@ -27,6 +27,7 @@ import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.type
 import { ReaderProgressBarProps, TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { ReaderProgressBarSlotMobile } from '@/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
+import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 
 const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotProps'] = {
     container: {
@@ -59,6 +60,7 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotPro
     progressBarSlotsContainer: {
         sx: {
             borderRadius: 100,
+            backgroundColor: 'background.default',
         },
     },
     progressBarSlot: {
@@ -69,7 +71,6 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotPro
     progressBarCurrentPageSlot: {
         sx: {
             display: 'flex',
-            justifyContent: 'end',
             alignItems: 'center',
             zIndex: 1,
             pointer: 'default',
@@ -80,19 +81,6 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotPro
     },
 };
 
-const PROGRESS_BAR_SLOTS: ComponentProps<typeof ReaderProgressBar>['slots'] = {
-    progressBarCurrentPage: (
-        <Box
-            sx={{
-                minWidth: '5px',
-                height: '75%',
-                backgroundColor: 'primary.main',
-                borderRadius: 100,
-            }}
-        />
-    ),
-};
-
 const BaseMobileReaderProgressBar = ({
     previousChapter,
     nextChapter,
@@ -110,6 +98,29 @@ const BaseMobileReaderProgressBar = ({
     const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
     const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
 
+    const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]);
+
+    const progressBarCurrentPage = useMemo(
+        () => ({
+            progressBarCurrentPage: (
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        left: 'calc(100% - 6px)',
+                        ...applyStyles(currentPagesIndex === 0, {
+                            left: '0',
+                        }),
+                        width: '6px',
+                        height: '75%',
+                        backgroundColor: 'primary.main',
+                        borderRadius: 100,
+                    }}
+                />
+            ),
+        }),
+        [currentPagesIndex, pages.length],
+    );
+
     useLayoutEffect(() => {
         setIsMaximized(isVisible);
 
@@ -135,8 +146,13 @@ const BaseMobileReaderProgressBar = ({
                 </IconButton>
                 <ReaderProgressBar
                     createProgressBarSlot={useCallback(
-                        (page, _1, _2, _3, _4, _5, isTrailingPage) => (
-                            <ReaderProgressBarSlotMobile pageName={page.name} isTrailingPage={isTrailingPage} />
+                        (page, pagesIndex, _2, _3, _4, _5, isTrailingPage, totalPages) => (
+                            <ReaderProgressBarSlotMobile
+                                pageName={page.name}
+                                isTrailingPage={isTrailingPage}
+                                pagesIndex={pagesIndex}
+                                totalPages={totalPages}
+                            />
                         ),
                         [],
                     )}
@@ -147,11 +163,11 @@ const BaseMobileReaderProgressBar = ({
                                 height: '20px',
                                 backgroundColor: 'primary.main',
                                 borderRadius: '400px 0 0 400px',
-                                width: `calc(${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / pages.length) * 100}% + 100% / ${pages.length})`,
+                                width: `${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / (pages.length - 1)) * 100}%`,
                             },
                         },
                     }}
-                    slots={PROGRESS_BAR_SLOTS}
+                    slots={progressBarCurrentPage}
                 />
                 <IconButton
                     onClick={openNextChapter}