diff --git a/.gitignore b/.gitignore
index de2de2be7..6a99b45c4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -75,4 +75,5 @@ web-build/
 
 .vscode/
 src/sources/en/generators/
-*.lockb
\ No newline at end of file
+*.lockb
+.tool-versions
\ No newline at end of file
diff --git a/src/database/types/index.ts b/src/database/types/index.ts
index 07dc3ca59..5e3c2c7aa 100644
--- a/src/database/types/index.ts
+++ b/src/database/types/index.ts
@@ -35,6 +35,7 @@ export interface ChapterInfo {
   chapterNumber?: number;
   page: string;
   progress: number | null;
+  position?: number;
 }
 
 export interface DownloadedChapter extends ChapterInfo {
diff --git a/src/screens/reader/components/ChapterDrawer.tsx b/src/screens/reader/components/ChapterDrawer.tsx
deleted file mode 100644
index 4f64825e5..000000000
--- a/src/screens/reader/components/ChapterDrawer.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { StyleSheet, View, Pressable } from 'react-native';
-import { Text } from 'react-native-paper';
-import color from 'color';
-import { useAppSettings, useTheme } from '@hooks/persisted';
-import { FlashList, FlashListProps } from '@shopify/flash-list';
-import { Button, LoadingScreenV2 } from '@components/index';
-import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { getString } from '@strings/translations';
-import { ChapterScreenProps } from '@navigators/types';
-import { ChapterInfo } from '@database/types';
-import { ThemeColors } from '@theme/types';
-import { NovelSettings } from '@hooks/persisted/useNovel';
-
-type ChapterDrawerProps = ChapterScreenProps & {
-  chapters: ChapterInfo[];
-  novelSettings: NovelSettings;
-  pages: string[];
-  setPageIndex: (value: number) => void;
-};
-
-const ChapterDrawer = ({
-  route,
-  navigation,
-  chapters,
-  novelSettings,
-  pages,
-  setPageIndex,
-}: ChapterDrawerProps) => {
-  const theme = useTheme();
-  const insets = useSafeAreaInsets();
-  const styles = createStylesheet(theme, insets);
-  const listRef = useRef<FlashList<ChapterInfo>>(null);
-  const { chapter, novel: novelItem } = route.params;
-  const { defaultChapterSort } = useAppSettings();
-  const { sort = defaultChapterSort } = novelSettings;
-
-  const listAscending = sort === 'ORDER BY position ASC';
-  const scrollToIndex = useMemo(() => {
-    if (chapters.length < 1) {
-      return 0;
-    }
-    const indexOfCurrentChapter =
-      chapters.findIndex(el => {
-        return el.id === chapter.id;
-      }) || 0;
-    let res = indexOfCurrentChapter >= 2 ? indexOfCurrentChapter - 2 : 0;
-    return res;
-  }, [chapters, chapter.id, listAscending]);
-
-  const [buttonProperties, setButtonProperties] = useState({
-    up: {
-      text: getString('readerScreen.drawer.scrollToTop'),
-      func: () => {
-        listRef.current?.scrollToIndex({ index: 0, animated: true });
-      },
-    },
-    down: {
-      text: getString('readerScreen.drawer.scrollToBottom'),
-      func: () => {
-        listRef.current?.scrollToEnd({
-          animated: true,
-        });
-      },
-    },
-  });
-
-  const changeChapter = (item: ChapterInfo) => {
-    navigation.replace('Chapter', {
-      novel: novelItem,
-      chapter: item,
-    });
-  };
-  const renderItem: FlashListProps<ChapterInfo>['renderItem'] = ({ item }) => {
-    return (
-      <View
-        style={[
-          styles.drawerElementContainer,
-          item.id === chapter.id && {
-            backgroundColor: color(theme.primary).alpha(0.12).string(),
-          },
-        ]}
-      >
-        <Pressable
-          android_ripple={{ color: theme.rippleColor }}
-          onPress={() => changeChapter(item)}
-          style={styles.chapterCtn}
-        >
-          <Text
-            numberOfLines={1}
-            style={[
-              styles.chapterNameCtn,
-              { color: item.unread ? theme.onSurface : theme.outline },
-            ]}
-          >
-            {item.name}
-          </Text>
-          {item.releaseTime ? (
-            <Text
-              style={[
-                styles.releaseDateCtn,
-                { color: item.unread ? theme.onSurfaceVariant : theme.outline },
-              ]}
-            >
-              {item.releaseTime}
-            </Text>
-          ) : null}
-        </Pressable>
-      </View>
-    );
-  };
-
-  const ListFooter = () => {
-    return (
-      <View style={styles.footer}>
-        <Button
-          mode="contained"
-          style={styles.button}
-          title={buttonProperties.up.text}
-          onPress={buttonProperties.up.func}
-        />
-        <Button
-          mode="contained"
-          style={styles.button}
-          title={buttonProperties.down.text}
-          onPress={buttonProperties.down.func}
-        />
-      </View>
-    );
-  };
-  const checkViewableItems: FlashListProps<ChapterInfo>['onViewableItemsChanged'] =
-    ({ viewableItems }) => {
-      let up = {
-        text: getString('readerScreen.drawer.scrollToTop'),
-        func: () => {
-          listRef.current?.scrollToIndex({ index: 0, animated: true });
-        },
-      };
-      let down = {
-        text: getString('readerScreen.drawer.scrollToBottom'),
-        func: () => {
-          listRef.current?.scrollToEnd({
-            animated: true,
-          });
-        },
-      };
-      if (viewableItems.length !== 0) {
-        let visible = viewableItems.find(({ item }) => {
-          return item.id === chapter.id;
-        });
-        if (!visible) {
-          if (
-            listAscending
-              ? viewableItems[0].item.id < chapter.id
-              : viewableItems[0].item.id > chapter.id
-          ) {
-            down = {
-              text: getString('readerScreen.drawer.scrollToCurrentChapter'),
-              func: () => {
-                listRef.current?.scrollToIndex({
-                  index: scrollToIndex,
-                  animated: true,
-                });
-              },
-            };
-          } else {
-            up = {
-              text: getString('readerScreen.drawer.scrollToCurrentChapter'),
-              func: () => {
-                listRef.current?.scrollToIndex({
-                  index: scrollToIndex,
-                  animated: true,
-                });
-              },
-            };
-          }
-        }
-        setButtonProperties({
-          up: up,
-          down: down,
-        });
-      }
-    };
-  useEffect(() => {
-    let pageIndex = pages.indexOf(chapter.page);
-    if (pageIndex === -1) {
-      pageIndex = 0;
-    }
-    setPageIndex(pageIndex);
-  }, [chapter, pages]);
-  return (
-    <View style={styles.drawer}>
-      <Text style={styles.headerCtn}>{getString('common.chapters')}</Text>
-      {scrollToIndex !== undefined ? (
-        <FlashList
-          ref={listRef}
-          onViewableItemsChanged={checkViewableItems}
-          data={chapters}
-          renderItem={renderItem}
-          estimatedItemSize={60}
-          initialScrollIndex={scrollToIndex}
-        />
-      ) : (
-        <LoadingScreenV2 theme={theme} />
-      )}
-      <ListFooter />
-    </View>
-  );
-};
-
-const createStylesheet = (theme: ThemeColors, insets: EdgeInsets) => {
-  return StyleSheet.create({
-    drawer: {
-      flex: 1,
-      backgroundColor: theme.surface,
-      paddingTop: 48,
-    },
-    headerCtn: {
-      fontSize: 16,
-      padding: 16,
-      marginBottom: 4,
-      fontWeight: 'bold',
-      borderBottomWidth: 1,
-      borderBottomColor: theme.outline,
-      color: theme.onSurface,
-    },
-    chapterCtn: {
-      flex: 1,
-      paddingHorizontal: 20,
-      paddingVertical: 10,
-      justifyContent: 'center',
-    },
-    chapterNameCtn: {
-      fontSize: 12,
-      marginBottom: 2,
-      color: theme.onSurface,
-    },
-    releaseDateCtn: {
-      fontSize: 10,
-      color: theme.onSurfaceVariant,
-    },
-    drawerElementContainer: {
-      margin: 4,
-      marginLeft: 16,
-      marginRight: 16,
-      borderRadius: 50,
-      overflow: 'hidden',
-      minHeight: 48,
-    },
-    button: {
-      marginBottom: 12,
-      marginHorizontal: 16,
-      marginTop: 4,
-    },
-    footer: {
-      marginTop: 4,
-      paddingTop: 8,
-      paddingBottom: insets.bottom,
-      borderTopWidth: 1,
-      borderTopColor: theme.outline,
-    },
-  });
-};
-
-export default ChapterDrawer;
diff --git a/src/screens/reader/components/ChapterDrawer/RenderListChapter.tsx b/src/screens/reader/components/ChapterDrawer/RenderListChapter.tsx
new file mode 100644
index 000000000..d284a1287
--- /dev/null
+++ b/src/screens/reader/components/ChapterDrawer/RenderListChapter.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { View, Pressable, TextStyle } from 'react-native';
+import { Text } from 'react-native-paper';
+import color from 'color';
+import { ChapterInfo, NovelInfo } from '@database/types';
+import { ThemeColors } from '@theme/types';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '@navigators/types';
+import { StyleProp } from 'react-native';
+import { ViewStyle } from 'react-native';
+
+type Styles = {
+  chapterCtn: StyleProp<ViewStyle>;
+  drawerElementContainer: StyleProp<ViewStyle>;
+  chapterNameCtn: StyleProp<TextStyle>;
+  releaseDateCtn: StyleProp<TextStyle>;
+};
+type Navigation = StackNavigationProp<RootStackParamList, 'Chapter', undefined>;
+
+type Props = {
+  item: ChapterInfo;
+  novelItem: NovelInfo;
+  styles: Styles;
+  theme: ThemeColors;
+  navigation: Navigation;
+  chapterId: number;
+};
+const changeChapter = (
+  item: ChapterInfo,
+  navigation: Navigation,
+  novelItem: NovelInfo,
+) => {
+  navigation.replace('Chapter', {
+    novel: novelItem,
+    chapter: item,
+  });
+};
+const renderListChapter = ({
+  item,
+  novelItem,
+  styles,
+  theme,
+  navigation,
+  chapterId,
+}: Props) => {
+  return (
+    <View
+      style={[
+        styles.drawerElementContainer,
+        item.id === chapterId && {
+          backgroundColor: color(theme.primary).alpha(0.12).string(),
+        },
+      ]}
+    >
+      <Pressable
+        android_ripple={{ color: theme.rippleColor }}
+        onPress={() => changeChapter(item, navigation, novelItem)}
+        style={styles.chapterCtn}
+      >
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.chapterNameCtn,
+            { color: item.unread ? theme.onSurface : theme.outline },
+          ]}
+        >
+          {item.name}
+        </Text>
+        {item.releaseTime ? (
+          <Text
+            style={[
+              styles.releaseDateCtn,
+              { color: item.unread ? theme.onSurfaceVariant : theme.outline },
+            ]}
+          >
+            {item.releaseTime}
+          </Text>
+        ) : null}
+      </Pressable>
+    </View>
+  );
+};
+export default renderListChapter;
diff --git a/src/screens/reader/components/ChapterDrawer/index.tsx b/src/screens/reader/components/ChapterDrawer/index.tsx
new file mode 100644
index 000000000..063477556
--- /dev/null
+++ b/src/screens/reader/components/ChapterDrawer/index.tsx
@@ -0,0 +1,232 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Text } from 'react-native-paper';
+import { useAppSettings, useTheme } from '@hooks/persisted';
+import { FlashList, ViewToken } from '@shopify/flash-list';
+import { Button, LoadingScreenV2 } from '@components/index';
+import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { getString } from '@strings/translations';
+import { ChapterScreenProps } from '@navigators/types';
+import { ChapterInfo } from '@database/types';
+import { ThemeColors } from '@theme/types';
+import { NovelSettings } from '@hooks/persisted/useNovel';
+import renderListChapter from './RenderListChapter';
+
+type ChapterDrawerProps = ChapterScreenProps & {
+  chapters: ChapterInfo[];
+  novelSettings: NovelSettings;
+  pages: string[];
+  setPageIndex: (value: number) => void;
+};
+type ButtonProperties = {
+  text: string;
+  index?: number;
+};
+
+type ButtonsProperties = {
+  up: ButtonProperties;
+  down: ButtonProperties;
+};
+
+const ChapterDrawer = ({
+  route,
+  navigation,
+  chapters,
+  novelSettings,
+  pages,
+  setPageIndex,
+}: ChapterDrawerProps) => {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const { defaultChapterSort } = useAppSettings();
+  const listRef = useRef<FlashList<ChapterInfo>>(null);
+
+  const styles = createStylesheet(theme, insets);
+
+  const { chapter, novel: novelItem } = route.params;
+  const { sort = defaultChapterSort } = novelSettings;
+  const listAscending = sort === 'ORDER BY position ASC';
+
+  const defaultButtonLayout: ButtonsProperties = {
+    up: {
+      text: getString('readerScreen.drawer.scrollToTop'),
+      index: 0,
+    },
+    down: {
+      text: getString('readerScreen.drawer.scrollToBottom'),
+      index: undefined,
+    },
+  };
+
+  useEffect(() => {
+    let pageIndex = pages.indexOf(chapter.page);
+    if (pageIndex === -1) {
+      pageIndex = 0;
+    }
+    setPageIndex(pageIndex);
+  }, [chapter, pages, setPageIndex]);
+
+  const scrollToIndex = useMemo(() => {
+    if (chapters.length < 1) {
+      return;
+    }
+
+    const indexOfCurrentChapter =
+      chapters.findIndex(el => {
+        return el.id === chapter.id;
+      }) || 0;
+    return indexOfCurrentChapter >= 2 ? indexOfCurrentChapter - 2 : 0;
+  }, [chapters, chapter.id]);
+
+  const [footerBtnProps, setButtonProperties] =
+    useState<ButtonsProperties>(defaultButtonLayout);
+
+  const checkViewableItems = ({
+    viewableItems,
+  }: {
+    viewableItems: ViewToken[];
+  }) => {
+    const curChapter = getString('readerScreen.drawer.scrollToCurrentChapter');
+    let newBtnLayout = Object.create(defaultButtonLayout);
+
+    if (viewableItems.length !== 0) {
+      let visible = viewableItems.find(({ item }) => {
+        return item.id === chapter.id;
+      });
+      if (!visible && scrollToIndex) {
+        if (
+          listAscending
+            ? (viewableItems[0].index ?? 0) < scrollToIndex + 2
+            : (viewableItems[0].index ?? 0) > scrollToIndex + 2
+        ) {
+          newBtnLayout.down = {
+            text: curChapter,
+            index: scrollToIndex,
+          };
+        } else {
+          newBtnLayout.up = {
+            text: curChapter,
+            index: scrollToIndex,
+          };
+        }
+      }
+
+      setButtonProperties(newBtnLayout);
+    }
+  };
+  const scroll = useCallback((index?: number) => {
+    if (index !== undefined) {
+      listRef.current?.scrollToIndex({
+        index,
+        animated: true,
+      });
+    } else {
+      listRef.current?.scrollToEnd({
+        animated: true,
+      });
+    }
+  }, []);
+
+  return (
+    <View style={styles.drawer}>
+      <Text style={styles.headerCtn}>{getString('common.chapters')}</Text>
+      {scrollToIndex === undefined ? (
+        <LoadingScreenV2 theme={theme} />
+      ) : (
+        <FlashList
+          ref={listRef}
+          onViewableItemsChanged={checkViewableItems}
+          data={chapters}
+          renderItem={val =>
+            renderListChapter({
+              item: val.item,
+              novelItem,
+              styles,
+              theme,
+              navigation,
+              chapterId: chapter.id,
+            })
+          }
+          estimatedItemSize={60}
+          initialScrollIndex={scrollToIndex}
+        />
+      )}
+      <View style={styles.footer}>
+        <Button
+          mode="contained"
+          style={styles.button}
+          title={footerBtnProps.up.text}
+          onPress={() => scroll(footerBtnProps.up.index)}
+        />
+        <Button
+          mode="contained"
+          style={styles.button}
+          title={footerBtnProps.down.text}
+          onPress={() => scroll(footerBtnProps.down.index)}
+        />
+      </View>
+    </View>
+  );
+};
+
+const createStylesheet = (theme: ThemeColors, insets: EdgeInsets) => {
+  return StyleSheet.create({
+    drawer: {
+      flex: 1,
+      backgroundColor: theme.surface,
+      paddingTop: 48,
+    },
+    headerCtn: {
+      fontSize: 16,
+      padding: 16,
+      marginBottom: 4,
+      fontWeight: 'bold',
+      borderBottomWidth: 1,
+      borderBottomColor: theme.outline,
+      color: theme.onSurface,
+    },
+    chapterCtn: {
+      flex: 1,
+      paddingHorizontal: 20,
+      paddingVertical: 10,
+      justifyContent: 'center',
+    },
+    chapterNameCtn: {
+      fontSize: 12,
+      marginBottom: 2,
+      color: theme.onSurface,
+    },
+    releaseDateCtn: {
+      fontSize: 10,
+      color: theme.onSurfaceVariant,
+    },
+    drawerElementContainer: {
+      margin: 4,
+      marginLeft: 16,
+      marginRight: 16,
+      borderRadius: 50,
+      overflow: 'hidden',
+      minHeight: 48,
+    },
+    button: {
+      marginBottom: 12,
+      marginHorizontal: 16,
+      marginTop: 4,
+    },
+    footer: {
+      marginTop: 4,
+      paddingTop: 8,
+      paddingBottom: insets.bottom,
+      borderTopWidth: 1,
+      borderTopColor: theme.outline,
+    },
+  });
+};
+
+export default ChapterDrawer;