diff --git a/android/app/src/main/assets/css/index.js b/android/app/src/main/assets/css/index.js
new file mode 100644
index 000000000..7cc906b42
--- /dev/null
+++ b/android/app/src/main/assets/css/index.js
@@ -0,0 +1,455 @@
+export default `
+html {
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+  padding-top: var(--StatusBar-currentHeight);
+  word-wrap: break-word;
+  padding: 0;
+}
+
+::selection {
+  color: var(--theme-onSecondary);
+  background-color: var(--theme-secondary);
+}
+
+::-moz-selection {
+  color: var(--theme-onSecondary);
+  background-color: var(--theme-secondary);
+}
+
+body {
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+  padding-bottom: 40px;
+
+  font-size: var(--readerSettings-textSize);
+  background-color: var(--readerSettings-theme);
+  color: var(--readerSettings-textColor);
+  text-align: var(--readerSettings-textAlign);
+  line-height: var(--readerSettings-lineHeight);
+  font-family: var(--readerSettings-fontFamily);
+}
+
+chapter {
+  width: 100%;
+  display: block;
+}
+
+chapter > * {
+  max-width: 100vw;
+  padding-left: var(--readerSettings-padding);
+  padding-right: var(--readerSettings-padding);
+}
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+a {
+  color: var(--theme-primary);
+}
+
+img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+}
+
+table {
+  background-color: var(--theme-onPrimary);
+  border-collapse: collapse;
+  color: var(--theme-primary);
+}
+
+th {
+  font-weight: bold;
+}
+
+td {
+  padding: 10px;
+  text-align: center;
+}
+
+table,
+th,
+td {
+  border: 1px solid var(--theme-outline);
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.nextButton,
+.infoText {
+  margin-left: var(--readerSettings-padding);
+  margin-right: var(--readerSettings-padding);
+  width: calc(100% - var(--readerSettings-padding) * 2);
+  border-radius: 50px;
+  border-width: 1;
+  color: var(--theme-onPrimary);
+  background-color: var(--theme-primary);
+  font-family: var(--readerSettings-fontFamily);
+  font-size: 16px;
+  border-width: 0;
+  user-select: none;
+}
+
+.nextButton {
+  min-height: 40px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0 16px;
+}
+
+.infoText {
+  background-color: transparent;
+  text-align: center;
+  border: none;
+  margin: 0px;
+  color: inherit;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.chapterCtn {
+  min-height: var(--chapterCtn-height);
+  margin-bottom: auto;
+}
+
+.d-none {
+  display: none;
+}
+
+#ToolWrapper {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 5vw;
+}
+
+#ToolWrapper.horizontal {
+  top: unset;
+  right: unset;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 120px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+@media only screen and (min-width: 500px) {
+  #ToolWrapper.horizontal {
+    bottom: 80px;
+  }
+}
+
+#ToolWrapper.hidden {
+  opacity: 0;
+  right: 0;
+}
+
+#ToolWrapper.hidden.horizontal {
+  opacity: 0;
+  bottom: 0;
+  right: unset;
+}
+
+#TTS-Controller {
+  display: block;
+}
+
+#ToolWrapper.horizontal > #TTS-Controller {
+  margin-left: 4px;
+}
+
+#TTS-Controller button {
+  background: var(--theme-surface-0-9);
+  border: 0;
+}
+
+#TTS-Controller svg {
+  fill: var(--theme-onSurface);
+}
+
+#ToolWrapper > #ScrollBar {
+  margin-top: 8px;
+  width: 2.4rem;
+  height: 45vh;
+  min-height: 200px;
+  border-radius: 1.2rem;
+  background-color: var(--theme-surface-0-9);
+  touch-action: none;
+  font-size: 14px;
+  user-select: none;
+}
+
+#ScrollBar > .scrollbar-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--theme-onSurface);
+}
+
+#ScrollBar > .scrollbar-item.scrollbar-text {
+  height: 12.5%;
+}
+
+#ScrollBar > .scrollbar-item#scrollbar-slider {
+  height: 75%;
+  align-items: unset;
+}
+
+#ScrollBar #scrollbar-track {
+  width: 0.1rem;
+  height: 100%;
+  background-color: var(--theme-outline);
+}
+
+#ScrollBar #scrollbar-progress {
+  width: 100%;
+  height: 0;
+  background-color: var(--theme-primary);
+}
+
+#ScrollBar #scrollbar-thumb-wrapper {
+  position: relative;
+  top: 100%;
+  height: 2rem;
+  width: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-0.95rem, -1rem);
+}
+
+#ScrollBar #scrollbar-thumb {
+  top: 100%;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 100%;
+  background-color: var(--theme-primary);
+}
+
+#ToolWrapper.horizontal > #ScrollBar {
+  display: flex;
+  width: 80vw;
+  height: 2.4rem;
+  min-height: unset;
+  align-items: center;
+  margin-top: unset;
+}
+
+#ToolWrapper.horizontal > #ScrollBar > .scrollbar-item {
+  display: flex;
+  justify-content: center;
+  color: var(--theme-onSurface);
+}
+
+#ToolWrapper.horizontal > #ScrollBar > .scrollbar-item.scrollbar-text {
+  width: 12.5%;
+}
+
+#ToolWrapper.horizontal > #ScrollBar > .scrollbar-item#scrollbar-slider {
+  width: 75%;
+  align-items: center;
+}
+
+#ToolWrapper.horizontal > #ScrollBar #scrollbar-track {
+  height: 0.1rem;
+  width: 100%;
+  background-color: var(--theme-outline);
+}
+
+#ToolWrapper.horizontal > #ScrollBar #scrollbar-progress {
+  height: 100%;
+  width: 0;
+  background-color: var(--theme-primary);
+}
+
+#ToolWrapper.horizontal > #ScrollBar #scrollbar-thumb-wrapper {
+  position: relative;
+  left: 100%;
+  height: 2rem;
+  width: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-0.95rem, -1rem);
+}
+
+#ToolWrapper.horizontal > #ScrollBar #scrollbar-thumb {
+  top: 100%;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 100%;
+  background-color: var(--theme-primary);
+}
+
+#reader-footer-wrapper {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+#reader-footer {
+  display: flex;
+  flex: 3;
+  padding: 0.2rem 2rem;
+  background-color: var(--readerSettings-theme);
+  color: var(--readerSettings-textColor);
+  font-size: 1rem;
+  text-align: center;
+  user-select: none;
+}
+
+.reader-footer-item {
+  flex: 1;
+}
+
+.reader-footer-item:first-child {
+  text-align: left;
+}
+
+.reader-footer-item:last-child {
+  text-align: right;
+}
+
+.highlight {
+  color: var(--theme-onSecondary);
+  background-color: var(--theme-secondary);
+}
+
+.contextMenu {
+  position: fixed;
+  background: var(--theme-surface-0-9);
+  height: 0;
+  top: var(--top);
+  left: var(--left);
+  overflow: hidden;
+  -webkit-backdrop-filter: blur(1px);
+  backdrop-filter: blur(1px);
+  -webkit-animation: menuAnimation 0.4s 0s both;
+  animation: menuAnimation 0.4s 0s both;
+  transform-origin: left;
+  list-style: none;
+  margin: 4px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: 999999999;
+}
+
+.contextMenu-item {
+  padding: 4px;
+}
+
+.contextMenu-button {
+  color: var(--theme-onSurface);
+  background: 0;
+  border: 0;
+  border-radius: 4px;
+  white-space: nowrap;
+  padding: 6px 24px 6px 7px;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  width: 100%;
+  -webkit-animation: menuItemAnimation 0.2s 0s both;
+  animation: menuItemAnimation 0.2s 0s both;
+  font-family: var(--readerSettings-fontFamily);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: var(--theme-rippleColor);
+}
+
+.contextMenu-button svg {
+  fill: var(--theme-onSurface);
+}
+
+.contextMenu-button span {
+  margin-left: 4px;
+}
+
+@-webkit-keyframes menuAnimation {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    height: var(--height);
+    opacity: 1;
+    border-radius: 8px;
+    transform: scale(1);
+  }
+}
+
+@keyframes menuAnimation {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    height: var(--height);
+    opacity: 1;
+    border-radius: 8px;
+    transform: scale(1);
+  }
+}
+
+@-webkit-keyframes menuItemAnimation {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes menuItemAnimation {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+#Image-Modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  user-select: none;
+}
+
+#Image-Modal.show {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  background-color: var(--theme-surface-0-9);
+  align-items: center;
+  justify-content: center;
+  overflow: scroll;
+}
+
+#Image img {
+  display: block;
+  width: 100%;
+}
+
+`;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 64221bafb..946f0e135 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "lnreader",
       "version": "2.0.0",
       "dependencies": {
-        "@cd-z/react-native-epub-creator": "^2.0.4",
+        "@cd-z/react-native-epub-creator": "^3.0.0",
         "@gorhom/bottom-sheet": "^4.4.5",
         "@react-native-community/slider": "^4.4.2",
         "@react-native-cookies/cookies": "^6.2.1",
@@ -43,6 +43,7 @@
         "react-native-device-info": "^8.4.7",
         "react-native-drawer-layout": "^3.2.2",
         "react-native-error-boundary": "^1.1.16",
+        "react-native-file-access": "^3.1.0",
         "react-native-gesture-handler": "~2.12.0",
         "react-native-lottie-splash-screen": "^1.0.1",
         "react-native-mmkv": "^2.11.0",
@@ -2043,18 +2044,20 @@
       }
     },
     "node_modules/@cd-z/epub-constructor": {
-      "version": "2.2.5",
-      "license": "MIT",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@cd-z/epub-constructor/-/epub-constructor-3.0.1.tgz",
+      "integrity": "sha512-gI8eZ2+YnkflO48p+IjRVjFMJXv/86MYNdL6cxZUNd+GPEv3XBebg/hrHKXvTGTcBA3502CnwBf0hWoQyx3OoQ==",
       "dependencies": {
-        "node-html-parser": "^4.1.4"
+        "sanitize-html": "^2.13.0"
       }
     },
     "node_modules/@cd-z/react-native-epub-creator": {
-      "version": "2.0.4",
-      "license": "MIT",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@cd-z/react-native-epub-creator/-/react-native-epub-creator-3.0.0.tgz",
+      "integrity": "sha512-vpI3viNxkSJWuSCuotFKfe1Ulg7Z+VPBTSt4GkGSGwHwpZxkNnh/UOZqyHBTtn3yvjaq2PK3GABDZlxlDhiQvA==",
       "dependencies": {
-        "@cd-z/epub-constructor": "^2.1.0",
-        "expo-file-system": "^15.2.2",
+        "@cd-z/epub-constructor": "^3.0.0",
+        "react-native-file-access": "^3.1.0",
         "react-native-saf-x": "^2.2.1",
         "react-native-zip-archive": "^6.0.3"
       },
@@ -10212,13 +10215,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/he": {
-      "version": "1.2.0",
-      "license": "MIT",
-      "bin": {
-        "he": "bin/he"
-      }
-    },
     "node_modules/hermes-estree": {
       "version": "0.12.0",
       "license": "MIT"
@@ -13462,72 +13458,6 @@
         "node": ">= 6.13.0"
       }
     },
-    "node_modules/node-html-parser": {
-      "version": "4.1.5",
-      "license": "MIT",
-      "dependencies": {
-        "css-select": "^4.1.3",
-        "he": "1.2.0"
-      }
-    },
-    "node_modules/node-html-parser/node_modules/css-select": {
-      "version": "4.3.0",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^6.0.1",
-        "domhandler": "^4.3.1",
-        "domutils": "^2.8.0",
-        "nth-check": "^2.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/node-html-parser/node_modules/css-select/node_modules/domhandler": {
-      "version": "4.3.1",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "domelementtype": "^2.2.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/node-html-parser/node_modules/css-select/node_modules/domutils": {
-      "version": "2.8.0",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
-    "node_modules/node-html-parser/node_modules/css-select/node_modules/domutils/node_modules/dom-serializer": {
-      "version": "1.4.1",
-      "license": "MIT",
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/node-html-parser/node_modules/css-select/node_modules/domutils/node_modules/dom-serializer/node_modules/entities": {
-      "version": "2.2.0",
-      "license": "BSD-2-Clause",
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "license": "MIT"
@@ -14866,6 +14796,15 @@
         }
       }
     },
+    "node_modules/react-native-file-access": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-file-access/-/react-native-file-access-3.1.0.tgz",
+      "integrity": "sha512-wOpfKpJ8s4Csfjcvf7H4L1EtmejM07HQpndzMRWAianLC50EsPc78iV8TQaw5yI7j18rh9fWMqpevz8f5a1rsA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.12.1",
       "license": "MIT",
diff --git a/package.json b/package.json
index 409f69844..0738370bf 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,14 @@
     "start": "react-native start",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\" ./scripts",
-    "buildRelease": "node scripts/setEnvFile.cjs Release && cd android && ./gradlew clean && ./gradlew assembleRelease",
+    "buildRelease": "node scripts/convertCssToJs.cjs && node scripts/setEnvFile.cjs Release && cd android && ./gradlew clean && ./gradlew assembleRelease",
     "open": "open ./android/app/build/outputs/apk/release/",
     "strings": "node scripts/stringTypes.cjs",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "cssToJs": "node scripts/convertCssToJs.cjs"
   },
   "dependencies": {
-    "@cd-z/react-native-epub-creator": "^2.0.4",
+    "@cd-z/react-native-epub-creator": "^3.0.0",
     "@gorhom/bottom-sheet": "^4.4.5",
     "@react-native-community/slider": "^4.4.2",
     "@react-native-cookies/cookies": "^6.2.1",
@@ -50,6 +51,7 @@
     "react-native-device-info": "^8.4.7",
     "react-native-drawer-layout": "^3.2.2",
     "react-native-error-boundary": "^1.1.16",
+    "react-native-file-access": "^3.1.0",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-lottie-splash-screen": "^1.0.1",
     "react-native-mmkv": "^2.11.0",
diff --git a/scripts/convertCssToJs.cjs b/scripts/convertCssToJs.cjs
new file mode 100644
index 000000000..8ae58d357
--- /dev/null
+++ b/scripts/convertCssToJs.cjs
@@ -0,0 +1,29 @@
+const fs = require('fs');
+const path = require('path');
+
+const cssFilePath = path.resolve(
+  __dirname + '/../android/app/src/main/assets/css/',
+  'index.css',
+);
+const jsFilePath = path.resolve(
+  __dirname + '/../android/app/src/main/assets/css/',
+  'index.js',
+);
+
+fs.readFile(cssFilePath, 'utf8', (err, data) => {
+  if (err) {
+    console.error('Error reading CSS file:', err);
+    return;
+  }
+
+  const jsContent = `export default \`\n${data}\n\`;`;
+
+  fs.writeFile(jsFilePath, jsContent, 'utf8', err => {
+    if (err) {
+      console.error('Error writing JS file:', err);
+      return;
+    }
+
+    console.info('CSS file successfully converted to JS module.');
+  });
+});
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 3356aa0db..5be6512b3 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -8,6 +8,7 @@ import { useTheme } from '@hooks/persisted';
 
 interface ButtonProps extends Partial<PaperButtonProps> {
   title?: string;
+  children?: string;
 }
 
 const Button: React.FC<ButtonProps> = props => {
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 2607c7b6b..703b4ea5b 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -87,13 +87,21 @@ const InfoItem = ({
   title,
   icon = 'information-outline',
   theme,
+  paddingHorizontal = 16,
 }: {
   title: string;
   icon?: string;
   theme: ThemeColors;
+  paddingHorizontal?: number;
 }) => (
-  <View style={styles.infoCtn}>
-    <MaterialIcon size={20} color={theme.onSurfaceVariant} name={icon} />
+  <View style={[styles.infoCtn, { paddingHorizontal }]}>
+    <MaterialIcon
+      size={20}
+      color={theme.onSurfaceVariant}
+      name={icon}
+      style={{ width: 20 }}
+    />
+
     <Text style={[styles.infoMsg, { color: theme.onSurfaceVariant }]}>
       {title}
     </Text>
@@ -159,10 +167,13 @@ const styles = StyleSheet.create({
   },
   infoCtn: {
     paddingVertical: 12,
-    paddingHorizontal: 16,
+    // paddingHorizontal: 16,
+    display: 'flex',
+    flexDirection: 'row',
   },
   infoMsg: {
-    marginTop: 12,
+    marginLeft: 6,
+    verticalAlign: 'middle',
     fontSize: 12,
   },
   iconCtn: {
diff --git a/src/screens/novel/NovelScreen.tsx b/src/screens/novel/NovelScreen.tsx
index 4937dc824..842a7d7df 100644
--- a/src/screens/novel/NovelScreen.tsx
+++ b/src/screens/novel/NovelScreen.tsx
@@ -89,6 +89,7 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
     refreshChapters,
     deleteChapters,
   } = useNovel(path, pluginId);
+
   const theme = useTheme();
   const { top: topInset, bottom: bottomInset } = useSafeAreaInsets();
 
@@ -381,7 +382,9 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
             {selected.length === 0 ? (
               <NovelAppbar
                 novel={novel}
-                chapters={chapters}
+                chapters={
+                  sort.includes('DESC') ? chapters.slice().reverse() : chapters
+                }
                 deleteChapters={deleteChs}
                 downloadChapters={downloadChs}
                 showEditInfoModal={showEditInfoModal}
diff --git a/src/screens/novel/components/ChooseEpubLocationModal.tsx b/src/screens/novel/components/ExportToEpub/ChooseEpubLocationModal.tsx
similarity index 88%
rename from src/screens/novel/components/ChooseEpubLocationModal.tsx
rename to src/screens/novel/components/ExportToEpub/ChooseEpubLocationModal.tsx
index ec790e231..3eca86b5e 100644
--- a/src/screens/novel/components/ChooseEpubLocationModal.tsx
+++ b/src/screens/novel/components/ExportToEpub/ChooseEpubLocationModal.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Modal, TextInput, Text } from 'react-native-paper';
-import { openDocumentTree } from 'react-native-saf-x';
 
 import { Button, List, SwitchItem } from '@components';
 
@@ -9,6 +8,7 @@ import { useBoolean } from '@hooks';
 import { getString } from '@strings/translations';
 import { useChapterReaderSettings, useTheme } from '@hooks/persisted';
 import { showToast } from '@utils/showToast';
+import FileManager from '@native/FileManager';
 
 interface ChooseEpubLocationModalProps {
   isVisible: boolean;
@@ -54,9 +54,9 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
 
   const openFolderPicker = async () => {
     try {
-      const resultUri = await openDocumentTree(true);
+      const resultUri = await FileManager.pickFolder();
       if (resultUri) {
-        setUri(resultUri.uri);
+        setUri(resultUri);
       }
     } catch (error: any) {
       showToast(error.message);
@@ -76,6 +76,7 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
         <Text style={[styles.modalTitle, { color: theme.onSurface }]}>
           {getString('novelScreen.convertToEpubModal.chooseLocation')}
         </Text>
+
         <TextInput
           onChangeText={setUri}
           value={uri}
@@ -84,6 +85,7 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
           mode="outlined"
           theme={{ colors: { ...theme } }}
           underlineColor={theme.outline}
+          editable={false}
           dense
           right={
             <TextInput.Icon
@@ -99,12 +101,14 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
           value={useAppTheme.value}
           onPress={useAppTheme.toggle}
           theme={theme}
+          style={styles.switch}
         />
         <SwitchItem
           label={getString('novelScreen.convertToEpubModal.useCustomCSS')}
           value={useCustomCSS.value}
           onPress={useCustomCSS.toggle}
           theme={theme}
+          style={styles.switch}
         />
         <SwitchItem
           label={getString('novelScreen.convertToEpubModal.useCustomJS')}
@@ -114,11 +118,18 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
           value={useCustomJS.value}
           onPress={useCustomJS.toggle}
           theme={theme}
+          style={styles.switch}
         />
       </View>
       <List.InfoItem
         title={getString('novelScreen.convertToEpubModal.chaptersWarning')}
         theme={theme}
+        paddingHorizontal={20}
+      />
+      <List.InfoItem
+        title={getString('novelScreen.convertToEpubModal.settingsWarning')}
+        theme={theme}
+        paddingHorizontal={20}
       />
       <View style={styles.modalFooterCtn}>
         <Button title={getString('common.submit')} onPress={onSubmit} />
@@ -136,19 +147,18 @@ const styles = StyleSheet.create({
     borderRadius: 32,
   },
   settings: {
-    marginTop: 12,
-    padding: 24,
+    paddingBottom: 24,
+  },
+  switch: {
+    paddingHorizontal: 20,
   },
   modalHeaderCtn: {
     padding: 20,
-    paddingTop: 32,
-    paddingBottom: 0,
   },
   modalFooterCtn: {
     flexDirection: 'row-reverse',
-    paddingHorizontal: 20,
+    padding: 20,
     paddingTop: 8,
-    paddingBottom: 20,
   },
   modalTitle: {
     fontSize: 24,
diff --git a/src/screens/novel/components/EpubIconButton.tsx b/src/screens/novel/components/ExportToEpub/ExportEpubModal.tsx
similarity index 52%
rename from src/screens/novel/components/EpubIconButton.tsx
rename to src/screens/novel/components/ExportToEpub/ExportEpubModal.tsx
index f7464643a..0afabf776 100644
--- a/src/screens/novel/components/EpubIconButton.tsx
+++ b/src/screens/novel/components/ExportToEpub/ExportEpubModal.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { IconButton, Portal } from 'react-native-paper';
+import { Portal } from 'react-native-paper';
 import ChooseEpubLocationModal from './ChooseEpubLocationModal';
 import { StatusBar } from 'react-native';
 import { ThemeColors } from '@theme/types';
@@ -8,27 +8,29 @@ import EpubBuilder from '@cd-z/react-native-epub-creator';
 import { ChapterInfo, NovelInfo } from '@database/types';
 
 import { useChapterReaderSettings } from '@hooks/persisted';
-import { useBoolean } from '@hooks/index';
 import { showToast } from '@utils/showToast';
 import { NOVEL_STORAGE } from '@utils/Storages';
 import FileManager from '@native/FileManager';
+import color from 'color';
+//@ts-ignore
+import css from '../../../../../android/app/src/main/assets/css/index';
+// import style from './index.css';
 
-interface EpubIconButtonProps {
+interface ExportEpubModalProps {
   theme: ThemeColors;
   novel: NovelInfo;
   chapters: ChapterInfo[];
+  isVisible: boolean;
+  onClose: () => void;
 }
 
-const EpubIconButton: React.FC<EpubIconButtonProps> = ({
+const ExportEpubModal: React.FC<ExportEpubModalProps> = ({
   theme,
   novel,
   chapters,
+  isVisible,
+  onClose,
 }) => {
-  const {
-    value: isVisible,
-    setTrue: showModal,
-    setFalse: hideModal,
-  } = useBoolean(false);
   const readerSettings = useChapterReaderSettings();
   const {
     epubUseAppTheme = false,
@@ -41,36 +43,31 @@ const EpubIconButton: React.FC<EpubIconButtonProps> = ({
       `${
         epubUseAppTheme
           ? `
-              html {
-                scroll-behavior: smooth;
-                overflow-x: hidden;
-                padding-top: ${StatusBar.currentHeight};
-                word-wrap: break-word;
-              }
-              body {
-                padding-left: ${readerSettings.padding}%;
-                padding-right: ${readerSettings.padding}%;
-                padding-bottom: 40px;
-                font-size: ${readerSettings.textSize}px;
-                color: ${readerSettings.textColor};
-                text-align: ${readerSettings.textAlign};
-                line-height: ${readerSettings.lineHeight};
-                font-family: "${readerSettings.fontFamily}";
-                background-color: "${readerSettings.theme}";
-              }
-              hr {
-                margin-top: 20px;
-                margin-bottom: 20px;
-              }
-              a {
-                color: ${theme.primary};
-              }
-              img {
-                display: block;
-                width: auto;
-                height: auto;
-                max-width: 100%;
-            }`
+             :root {
+               --StatusBar-currentHeight: ${StatusBar.currentHeight};
+               --readerSettings-theme: ${readerSettings.theme};
+               --readerSettings-padding: ${readerSettings.padding}%;
+               --readerSettings-textSize: ${readerSettings.textSize / 10}rem;
+               --readerSettings-textColor: ${readerSettings.textColor};
+               --readerSettings-textAlign: ${readerSettings.textAlign};
+               --readerSettings-lineHeight: ${readerSettings.lineHeight}rem;
+               --theme-primary: ${theme.primary};
+               --theme-onPrimary: ${theme.onPrimary};
+               --theme-secondary: ${theme.secondary};
+               --theme-tertiary: ${theme.tertiary};
+               --theme-onTertiary: ${theme.onTertiary};
+               --theme-onSecondary: ${theme.onSecondary};
+               --theme-surface: ${theme.surface};
+               --theme-surface-0-9: ${color(theme.surface)
+                 .alpha(0.9)
+                 .toString()};
+               --theme-onSurface: ${theme.onSurface};
+               --theme-surfaceVariant: ${theme.surfaceVariant};
+               --theme-onSurfaceVariant: ${theme.onSurfaceVariant};
+               --theme-outline: ${theme.outline};
+               --theme-rippleColor: ${theme.rippleColor};
+             }
+             ` + (css as string).replace(/chapter/g, '#chapter')
           : ''
       }
       ${
@@ -97,7 +94,7 @@ const EpubIconButton: React.FC<EpubIconButtonProps> = ({
         let sourceId =${novel.pluginId};
         let chapterId ="";
         let novelId =${novel.id};
-        let html = document.querySelector("chapter").innerHTML;
+        let html = document.querySelector("#chapter").innerHTML;
           
         ${readerSettings.customJS}
         `,
@@ -108,7 +105,6 @@ const EpubIconButton: React.FC<EpubIconButtonProps> = ({
     var epub = new EpubBuilder(
       {
         title: novel.name,
-        fileName: novel.name.replace(/\s/g, ''),
         language: 'en',
         cover: novel.cover,
         description: novel.summary,
@@ -119,36 +115,21 @@ const EpubIconButton: React.FC<EpubIconButtonProps> = ({
       },
       uri,
     );
-    console.log({
-      title: novel.name,
-      fileName: novel.name.replace(/\s/g, ''),
-      language: 'en',
-      cover: novel.cover,
-      description: novel.summary,
-      author: novel.author,
-      bookId: novel.pluginId.toString(),
-      stylesheet: epubStyle || undefined,
-      js: epubUseCustomJS ? epubJS : undefined,
-    });
+
     try {
       await epub.prepare();
+
       for (let i = 0; i < chapters.length; i++) {
         const chapter = chapters[i];
         const filePath = `${NOVEL_STORAGE}/${novel.pluginId}/${novel.id}/${chapter.id}/index.html`;
         if (await FileManager.exists(filePath)) {
           const downloaded = FileManager.readFile(filePath);
-          console.log({
-            title:
-              chapter.name?.trim() ?? 'Chapter ' + (chapter.chapterNumber || i),
-            fileName: 'Chapter' + i,
-            htmlBody: `<chapter data-novel-id='${novel.pluginId}' data-chapter-id='${chapter.id}'>${downloaded}</chapter>`,
-          });
 
           await epub.addChapter({
             title:
               chapter.name?.trim() ?? 'Chapter ' + (chapter.chapterNumber || i),
             fileName: 'Chapter' + i,
-            htmlBody: `<chapter data-novel-id='${novel.pluginId}' data-chapter-id='${chapter.id}'>${downloaded}</chapter>`,
+            htmlBody: `<div id="chapter" data-plugin-id='${novel.pluginId}' data-novel-id='${chapter.novelId}' data-chapter-id='${chapter.id}'>${downloaded}</div>`,
           });
         }
       }
@@ -160,22 +141,15 @@ const EpubIconButton: React.FC<EpubIconButtonProps> = ({
       await epub.discardChanges();
     }
   };
+
   return (
-    <>
-      <IconButton
-        icon="book-arrow-down-outline"
-        iconColor={theme.onBackground}
-        size={21}
-        onPress={showModal}
+    <Portal>
+      <ChooseEpubLocationModal
+        isVisible={isVisible}
+        hideModal={onClose}
+        onSubmit={createEpub}
       />
-      <Portal>
-        <ChooseEpubLocationModal
-          isVisible={isVisible}
-          hideModal={hideModal}
-          onSubmit={createEpub}
-        />
-      </Portal>
-    </>
+    </Portal>
   );
 };
-export default EpubIconButton;
+export default ExportEpubModal;
diff --git a/src/screens/novel/components/NovelAppbar.tsx b/src/screens/novel/components/NovelAppbar.tsx
index 3d3255e9f..3819d636f 100644
--- a/src/screens/novel/components/NovelAppbar.tsx
+++ b/src/screens/novel/components/NovelAppbar.tsx
@@ -7,8 +7,9 @@ import Animated, {
   interpolateColor,
   useAnimatedStyle,
 } from 'react-native-reanimated';
-import EpubIconButton from './EpubIconButton';
+import ExportEpubModal from './ExportToEpub/ExportEpubModal';
 import { ChapterInfo, NovelInfo } from '@database/types';
+import { useBoolean } from '@hooks/index';
 
 const NovelAppbar = ({
   novel,
@@ -43,7 +44,7 @@ const NovelAppbar = ({
     const backgroundColor = interpolateColor(
       headerOpacity.value,
       [0, 1],
-      ['transparent', theme.surface2],
+      ['transparent', theme.surface2!],
     );
     return {
       backgroundColor,
@@ -52,13 +53,24 @@ const NovelAppbar = ({
 
   const [downloadMenu, showDownloadMenu] = useState(false);
   const [extraMenu, showExtraMenu] = useState(false);
+  const exportEpubModal = useBoolean(false);
 
   return (
     <Animated.View style={[headerOpacityStyle]}>
       <Appbar.Header theme={{ colors: { ...theme, surface: 'transparent' } }}>
         <Appbar.BackAction onPress={goBack} />
         <Appbar.Content title="" />
-        <EpubIconButton theme={theme} novel={novel} chapters={chapters} />
+        <Appbar.Action
+          icon="book-arrow-down-outline"
+          onPress={exportEpubModal.setTrue}
+        />
+        <ExportEpubModal
+          theme={theme}
+          novel={novel}
+          chapters={chapters}
+          isVisible={exportEpubModal.value}
+          onClose={exportEpubModal.setFalse}
+        />
         <Appbar.Action icon="share-variant" onPress={shareNovel} />
         <Appbar.Action
           icon="text-box-search-outline"
diff --git a/src/screens/reader/ChapterLoadingScreen/ChapterLoadingScreen.tsx b/src/screens/reader/ChapterLoadingScreen/ChapterLoadingScreen.tsx
index c83d8102d..a40a39137 100644
--- a/src/screens/reader/ChapterLoadingScreen/ChapterLoadingScreen.tsx
+++ b/src/screens/reader/ChapterLoadingScreen/ChapterLoadingScreen.tsx
@@ -5,18 +5,17 @@ import color from 'color';
 import SkeletonLines from '../components/SkeletonLines';
 import { useChapterReaderSettings } from '@hooks/persisted';
 
-const ChapterLoadingScreen = () => {
+const ChapterLoadingScreen = ({ onPress }: { onPress: () => void }) => {
   const {
     theme: backgroundColor,
     padding,
-    textSize,
     lineHeight,
   } = useChapterReaderSettings();
 
   return (
-    <View style={{ backgroundColor }}>
+    <View style={{ backgroundColor }} onTouchEnd={onPress}>
       <SkeletonLines
-        containerMargin={padding}
+        containerMargin={`${padding}%`}
         containerHeight={'100%'}
         containerWidth={'100%'}
         color={
@@ -33,7 +32,6 @@ const ChapterLoadingScreen = () => {
               : color(backgroundColor).negate().darken(0.92).toString()
             : color(backgroundColor).darken(0.08).toString()
         }
-        textSize={textSize}
         lineHeight={lineHeight}
       />
     </View>
diff --git a/src/screens/reader/ReaderScreen.tsx b/src/screens/reader/ReaderScreen.tsx
index 7eb7e0374..29658b124 100644
--- a/src/screens/reader/ReaderScreen.tsx
+++ b/src/screens/reader/ReaderScreen.tsx
@@ -9,7 +9,6 @@ import ReaderFooter from './components/ReaderFooter';
 import WebViewReader from './components/WebViewReader';
 import ReaderBottomSheetV2 from './components/ReaderBottomSheet/ReaderBottomSheet';
 import ChapterDrawer from './components/ChapterDrawer';
-import ChapterLoadingScreen from './ChapterLoadingScreen/ChapterLoadingScreen';
 import { ErrorScreenV2 } from '@components';
 import { ChapterScreenProps } from '@navigators/types';
 import WebView from 'react-native-webview';
diff --git a/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx b/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx
index d79b04ce4..f8dde747c 100644
--- a/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx
+++ b/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx
@@ -27,6 +27,9 @@ const ReaderTab: React.FC = () => {
       <ReaderValueChange
         label={getString('readerScreen.bottomSheet.lineHeight')}
         valueKey="lineHeight"
+        min={1}
+        max={4}
+        unit="rem"
       />
       <ReaderValueChange
         label={getString('readerScreen.bottomSheet.padding')}
diff --git a/src/screens/reader/components/ReaderBottomSheet/ReaderValueChange.tsx b/src/screens/reader/components/ReaderBottomSheet/ReaderValueChange.tsx
index 7bc84d857..88881f8a3 100644
--- a/src/screens/reader/components/ReaderBottomSheet/ReaderValueChange.tsx
+++ b/src/screens/reader/components/ReaderBottomSheet/ReaderValueChange.tsx
@@ -17,7 +17,7 @@ interface ReaderValueChangeProps {
   decimals?: number;
   min?: number;
   max?: number;
-  unit?: string;
+  unit?: '%' | 'px' | 'rem';
 }
 
 const ReaderValueChange: React.FC<ReaderValueChangeProps> = ({
@@ -32,7 +32,9 @@ const ReaderValueChange: React.FC<ReaderValueChangeProps> = ({
 }) => {
   const theme = useTheme();
   const { setChapterReaderSettings, ...settings } = useChapterReaderSettings();
-
+  if (!valueKey) {
+    throw new Error('ValueKey has to be defined');
+  }
   return (
     <View style={styles.container}>
       <Text style={[{ color: theme.onSurfaceVariant }, labelStyle]}>
@@ -52,7 +54,7 @@ const ReaderValueChange: React.FC<ReaderValueChangeProps> = ({
           theme={theme}
         />
         <Text style={[styles.value, { color: theme.onSurface }]}>
-          {`${((settings[valueKey] * 10) / 10).toFixed(decimals)}${unit}`}
+          {`${settings[valueKey].toFixed(decimals)}${unit}`}
         </Text>
         <IconButtonV2
           name="plus"
diff --git a/src/screens/reader/components/ReaderBottomSheet/TextSizeSlider.tsx b/src/screens/reader/components/ReaderBottomSheet/TextSizeSlider.tsx
index 1d6d0e25d..d5da8db04 100644
--- a/src/screens/reader/components/ReaderBottomSheet/TextSizeSlider.tsx
+++ b/src/screens/reader/components/ReaderBottomSheet/TextSizeSlider.tsx
@@ -20,9 +20,9 @@ const TextSizeSlider: React.FC = () => {
       <Slider
         style={styles.slider}
         value={textSize}
-        minimumValue={12}
-        maximumValue={20}
-        step={1}
+        minimumValue={0.2}
+        maximumValue={3}
+        step={0.1}
         minimumTrackTintColor={theme.primary}
         maximumTrackTintColor={TRACK_TINT_COLOR}
         thumbTintColor={theme.primary}
diff --git a/src/screens/reader/components/SkeletonLines.tsx b/src/screens/reader/components/SkeletonLines.tsx
index dbbc528ed..f10027d8c 100644
--- a/src/screens/reader/components/SkeletonLines.tsx
+++ b/src/screens/reader/components/SkeletonLines.tsx
@@ -7,7 +7,6 @@ import { useAppSettings } from '@hooks/persisted/index';
 const SkeletonLines = ({
   width,
   lineHeight,
-  textSize,
   containerWidth,
   containerHeight,
   containerMargin,
@@ -16,10 +15,9 @@ const SkeletonLines = ({
 }: {
   width?: string | number;
   lineHeight: number;
-  textSize: number;
-  containerWidth: string | number;
-  containerHeight: string | number;
-  containerMargin?: string | number;
+  containerWidth: `${number}%` | number;
+  containerHeight: `${number}%` | number;
+  containerMargin?: `${number}%` | number;
   color?: string;
   highlightColor?: string;
 }) => {
@@ -30,14 +28,13 @@ const SkeletonLines = ({
     containerHeight,
     containerMargin === undefined ? 0 : containerMargin,
     lineHeight,
-    textSize,
   );
 
   const createLines = () => {
     let availableHeight: number = percentToNumberV(containerHeight) - 10;
     let res: boolean[] = [];
     let numberOfLongLines = 0;
-    const height = textSize * lineHeight;
+    const height = lineHeight * 10;
 
     while (availableHeight > height) {
       if (Math.random() * 4 > 1 && numberOfLongLines <= 5) {
@@ -58,7 +55,8 @@ const SkeletonLines = ({
     const skeletonWidth: number = width
       ? Number(width)
       : percentToNumberH('90%');
-    const skeletonHeight = textSize;
+
+    const skeletonHeight = 1.5 * 15;
     if (typeof color !== 'string') {
       color = '#ebebeb';
     }
@@ -126,11 +124,10 @@ const percentToNumberH = (number: number | string): number => {
 };
 
 const createStyleSheet = (
-  containerWidth: number | string,
-  containerHeight: number | string,
-  containerMargin: number | string,
+  containerWidth: number | `${number}%`,
+  containerHeight: number | `${number}%`,
+  containerMargin: number | `${number}%`,
   lineHeight: number,
-  textSize: number,
 ) => {
   return StyleSheet.create({
     container: {
@@ -139,15 +136,16 @@ const createStyleSheet = (
       height: containerHeight,
       backgroundColor: 'transparent',
       margin: containerMargin,
+      marginTop: '6%',
     },
     lineDefault: {
       marginLeft: 0,
       marginRight: 0,
       borderRadius: 8,
-      marginBottom: textSize * (lineHeight - 1),
+      marginBottom: lineHeight * 10,
     },
     gap: {
-      height: textSize * (lineHeight - 1),
+      height: lineHeight * 10,
       margin: 8,
     },
   });
diff --git a/src/screens/reader/components/WebViewReader.tsx b/src/screens/reader/components/WebViewReader.tsx
index 7928b02ec..435464835 100644
--- a/src/screens/reader/components/WebViewReader.tsx
+++ b/src/screens/reader/components/WebViewReader.tsx
@@ -21,6 +21,7 @@ import { getBatteryLevelSync } from 'react-native-device-info';
 import * as Speech from 'expo-speech';
 import { PLUGIN_STORAGE } from '@utils/Storages';
 import { useChapterContext } from '../ChapterContext';
+import ChapterLoadingScreen from '../ChapterLoadingScreen/ChapterLoadingScreen';
 
 type WebViewPostEvent = {
   type: string;
@@ -31,6 +32,7 @@ type WebViewReaderProps = {
   html: string;
   nextChapter?: ChapterInfo;
   webViewRef: React.RefObject<WebView>;
+  loading: boolean;
   saveProgress(percentage: number): void;
   onPress(): void;
   navigateChapter(position: 'NEXT' | 'PREV'): void;
@@ -48,6 +50,7 @@ const onLogMessage = (payload: { nativeEvent: { data: string } }) => {
   }
 };
 
+
 const { RNDeviceInfo } = NativeModules;
 const deviceInfoEmitter = new NativeEventEmitter(RNDeviceInfo);
 
@@ -176,10 +179,10 @@ const WebViewReader: React.FC<WebViewReaderProps> = ({
               <link rel="stylesheet" href="${assetsUriPrefix}/css/index.css">
               <style>
               :root {
-                --StatusBar-currentHeight: ${StatusBar.currentHeight}px;
+                --StatusBar-currentHeight: ${StatusBar.currentHeight};
                 --readerSettings-theme: ${readerSettings.theme};
-                --readerSettings-padding: ${readerSettings.padding}px;
-                --readerSettings-textSize: ${readerSettings.textSize}px;
+                --readerSettings-padding: ${readerSettings.padding}%;
+                --readerSettings-textSize: ${readerSettings.textSize}rem;
                 --readerSettings-textColor: ${readerSettings.textColor};
                 --readerSettings-textAlign: ${readerSettings.textAlign};
                 --readerSettings-lineHeight: ${readerSettings.lineHeight};
diff --git a/strings/languages/en/strings.json b/strings/languages/en/strings.json
index eae20b9cc..8ef136f9d 100644
--- a/strings/languages/en/strings.json
+++ b/strings/languages/en/strings.json
@@ -345,6 +345,7 @@
     "continueReading": "Continue reading",
     "convertToEpubModal": {
       "chaptersWarning": "Only downloaded chapters are included in the EPUB",
+      "settingsWarning": "Settings may not apply to your EPUB reader",
       "chooseLocation": "Select EPUB storage directory",
       "pathToFolder": "Path to EPUB save folder",
       "useCustomCSS": "Use custom CSS",
diff --git a/strings/types/index.ts b/strings/types/index.ts
index 3ccc898bf..9df4de9a0 100644
--- a/strings/types/index.ts
+++ b/strings/types/index.ts
@@ -278,6 +278,7 @@ export interface StringMap {
   'novelScreen.chapters': 'string';
   'novelScreen.continueReading': 'string';
   'novelScreen.convertToEpubModal.chaptersWarning': 'string';
+  'novelScreen.convertToEpubModal.settingsWarning': 'string';
   'novelScreen.convertToEpubModal.chooseLocation': 'string';
   'novelScreen.convertToEpubModal.pathToFolder': 'string';
   'novelScreen.convertToEpubModal.useCustomCSS': 'string';