diff --git a/src/screens/reader/ReaderScreen.js b/src/screens/reader/ReaderScreen.js
index 6046597a..09b8055a 100644
--- a/src/screens/reader/ReaderScreen.js
+++ b/src/screens/reader/ReaderScreen.js
@@ -13,7 +13,6 @@ import { IconButton, Portal } from 'react-native-paper';
 import { useKeepAwake } from 'expo-keep-awake';
 
 import {
-  getChapterFromDB,
   getNextChapter,
   getPrevChapter,
 } from '../../database/queries/ChapterQueries';
@@ -51,6 +50,7 @@ import TextReader from './components/TextReader';
 import WebViewReader from './components/WebViewReader';
 import { useTextToSpeech } from '../../hooks/useTextToSpeech';
 import { useFullscreenMode } from '../../hooks';
+import { getChapterFromDb } from '../../database/queries/DownloadQueries';
 
 const Chapter = ({ route, navigation }) => {
   useKeepAwake();
@@ -110,7 +110,7 @@ const Chapter = ({ route, navigation }) => {
   const getChapter = async id => {
     try {
       if (id) {
-        const chapterDownloaded = await getChapterFromDB(chapterId);
+        const chapterDownloaded = await getChapterFromDb(chapterId);
 
         if (chapterDownloaded) {
           setChapter(chapterDownloaded);
@@ -453,6 +453,7 @@ const Chapter = ({ route, navigation }) => {
         )}
         <ReaderFooter
           theme={theme}
+          novelUrl={novelUrl}
           swipeGestures={swipeGestures}
           enableSwipeGestures={enableSwipeGestures}
           enableWebView={enableWebView}
diff --git a/src/screens/reader/components/ReaderAppbar.js b/src/screens/reader/components/ReaderAppbar.js
index 0c96736c..da3daecb 100644
--- a/src/screens/reader/components/ReaderAppbar.js
+++ b/src/screens/reader/components/ReaderAppbar.js
@@ -1,12 +1,13 @@
+import { useNavigation } from '@react-navigation/native';
 import React, { useState } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { Appbar } from 'react-native-paper';
+import { IconButtonV2 } from '../../../components';
 import FadeView from '../../../components/Common/CrossFadeView';
 import { bookmarkChapterAction } from '../../../redux/novel/novel.actions';
 
-const ChapterAppbar = ({
-  navigation,
+const ReaderAppbar = ({
   bookmark,
   novelName,
   chapterId,
@@ -19,27 +20,24 @@ const ChapterAppbar = ({
   textToSpeechPosition,
   pauseTts,
 }) => {
+  const { goBack } = useNavigation();
   const [bookmarked, setBookmarked] = useState(bookmark);
 
   return (
-    <FadeView
-      style={{
-        flex: 1,
-        position: 'absolute',
-        width: '100%',
-        top: 0,
-        zIndex: 1,
-      }}
-      active={hide}
-      animationDuration={150}
-    >
-      <View style={{ flex: 1, backgroundColor: `${theme.colorPrimary}E6` }}>
-        <Appbar.Header style={{ backgroundColor: 'transparent', elevation: 0 }}>
-          <Appbar.BackAction
-            onPress={navigation.goBack}
+    <FadeView style={styles.container} active={hide} animationDuration={150}>
+      <View
+        style={[
+          { backgroundColor: `${theme.colorPrimary}E6` },
+          styles.appbarContainer,
+        ]}
+      >
+        <Appbar.Header style={styles.appbar}>
+          <IconButtonV2
+            name="arrow-left"
+            onPress={goBack}
             color={theme.textColorPrimary}
             size={26}
-            style={{ marginRight: 0 }}
+            theme={theme}
           />
           <Appbar.Content
             title={novelName}
@@ -57,7 +55,6 @@ const ChapterAppbar = ({
                 : theme.textColorPrimary
             }
           />
-
           {textToSpeechPosition.end > 0 && (
             <Appbar.Action
               icon={textToSpeech === 'paused' ? 'play' : 'pause'}
@@ -67,7 +64,7 @@ const ChapterAppbar = ({
             />
           )}
 
-          <Appbar.Action
+          <IconButtonV2
             icon={bookmarked ? 'bookmark' : 'bookmark-outline'}
             size={24}
             onPress={() => {
@@ -75,6 +72,7 @@ const ChapterAppbar = ({
               setBookmarked(!bookmarked);
             }}
             color={theme.textColorPrimary}
+            theme={theme}
           />
         </Appbar.Header>
       </View>
@@ -82,4 +80,21 @@ const ChapterAppbar = ({
   );
 };
 
-export default ChapterAppbar;
+export default ReaderAppbar;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'absolute',
+    width: '100%',
+    top: 0,
+    zIndex: 1,
+  },
+  appbarContainer: {
+    flex: 1,
+  },
+  appbar: {
+    backgroundColor: 'transparent',
+    elevation: 0,
+  },
+});
diff --git a/src/screens/reader/components/ReaderFooter.js b/src/screens/reader/components/ReaderFooter.js
index ab7d62ad..f1e262a8 100644
--- a/src/screens/reader/components/ReaderFooter.js
+++ b/src/screens/reader/components/ReaderFooter.js
@@ -16,9 +16,6 @@ const ChapterFooter = ({
   prevChapter,
   useWebViewForChapter,
   enableSwipeGestures,
-  autoScroll,
-  enableWebView,
-  enableAutoScroll,
 }) => {
   const rippleConfig = {
     color: theme.rippleColor,
@@ -29,22 +26,15 @@ const ChapterFooter = ({
   const insets = useSafeAreaInsets();
 
   return (
-    <FadeView
-      style={{
-        position: 'absolute',
-        zIndex: 2,
-        bottom: 0,
-        width: '100%',
-      }}
-      active={hide}
-      animationDuration={150}
-    >
+    <FadeView style={styles.footer} active={hide} animationDuration={150}>
       <View
-        style={{
-          backgroundColor: `${theme.colorPrimary}E6`,
-          flexDirection: 'row',
-          paddingBottom: insets.bottom,
-        }}
+        style={[
+          {
+            backgroundColor: `${theme.colorPrimary}E6`,
+            paddingBottom: insets.bottom,
+          },
+          styles.buttonsContainer,
+        ]}
       >
         <Pressable
           android_ripple={rippleConfig}
@@ -72,18 +62,6 @@ const ChapterFooter = ({
         </Pressable>
         {!useWebViewForChapter && (
           <>
-            {/* <Pressable
-              android_ripple={rippleConfig}
-              style={styles.buttonStyles}
-              onPress={enableAutoScroll}
-            >
-              <IconButton
-                icon="chevron-triple-down"
-                disabled={!autoScroll}
-                size={26}
-                color={theme.textColorPrimary}
-              />
-            </Pressable> */}
             <Pressable
               android_ripple={rippleConfig}
               style={styles.buttonStyles}
@@ -97,18 +75,6 @@ const ChapterFooter = ({
             </Pressable>
           </>
         )}
-        {/* <Pressable
-          android_ripple={rippleConfig}
-          style={styles.buttonStyles}
-          onPress={enableWebView}
-        >
-          <IconButton
-            icon="language-html5"
-            disabled={!useWebViewForChapter}
-            size={26}
-            color={theme.textColorPrimary}
-          />
-        </Pressable> */}
         <Pressable
           android_ripple={rippleConfig}
           style={styles.buttonStyles}
@@ -137,7 +103,7 @@ const ChapterFooter = ({
   );
 };
 
-export default ChapterFooter;
+export default React.memo(ChapterFooter);
 
 const styles = StyleSheet.create({
   buttonStyles: {
@@ -147,4 +113,13 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingBottom: 4,
   },
+  footer: {
+    position: 'absolute',
+    zIndex: 2,
+    bottom: 0,
+    width: '100%',
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+  },
 });