diff --git a/.idea/compiler.xml b/.idea/compiler.xml
index b589d56..b86273d 100644
--- a/.idea/compiler.xml
+++ b/.idea/compiler.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="CompilerConfiguration">
-    <bytecodeTargetLevel target="17" />
+    <bytecodeTargetLevel target="21" />
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
index aa7afe9..44c281a 100644
--- a/.idea/deploymentTargetSelector.xml
+++ b/.idea/deploymentTargetSelector.xml
@@ -4,10 +4,10 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-09-27T08:39:55.747634120Z">
+        <DropdownSelection timestamp="2024-10-10T08:27:50.482366388Z">
           <Target type="DEFAULT_BOOT">
             <handle>
-              <DeviceId pluginId="LocalEmulator" identifier="path=/home/starry/.android/avd/Pixel_6a_API_35.avd" />
+              <DeviceId pluginId="PhysicalDevice" identifier="serial=685adbce" />
             </handle>
           </Target>
         </DropdownSelection>
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 0897082..7b3006b 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -4,6 +4,7 @@
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
+        <option name="testRunner" value="CHOOSE_PER_TEST" />
         <option name="externalProjectPath" value="$PROJECT_DIR$" />
         <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
         <option name="modules">
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 575b933..ab9faf5 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="EntryPointsManager">
     <list size="1">
@@ -5,7 +6,7 @@
     </list>
   </component>
   <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
   <component name="ProjectType">
diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml
new file mode 100644
index 0000000..931b96c
--- /dev/null
+++ b/.idea/runConfigurations.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="RunConfigurationProducerService">
+    <option name="ignoredProducers">
+      <set>
+        <option value="com.intellij.execution.junit.AbstractAllInDirectoryConfigurationProducer" />
+        <option value="com.intellij.execution.junit.AllInPackageConfigurationProducer" />
+        <option value="com.intellij.execution.junit.TestInClassConfigurationProducer" />
+        <option value="com.intellij.execution.junit.UniqueIdConfigurationProducer" />
+      </set>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/app/build.gradle b/app/build.gradle
index 2cd5ccd..d307c2f 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -93,7 +93,7 @@ aboutLibraries {
 
 
 dependencies {
-    def composeBom = platform('androidx.compose:compose-bom:2024.09.02')
+    def composeBom = platform('androidx.compose:compose-bom:2024.09.03')
     implementation composeBom
     androidTestImplementation composeBom
 
@@ -111,7 +111,7 @@ dependencies {
     implementation "androidx.compose.runtime:runtime-livedata"
     implementation "androidx.compose.material3:material3"
     // Material icons.
-    implementation 'androidx.compose.material:material-icons-extended:1.7.2'
+    implementation 'androidx.compose.material:material-icons-extended:1.7.3'
     // Material theme for main activity.
     implementation 'com.google.android.material:material:1.12.0'
     // Android 12+ splash API.
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 098158c..f628f18 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -39,7 +39,8 @@
         <activity
             android:name=".ui.screens.reader.main.activities.ReaderActivity"
             android:configChanges="orientation|screenSize|uiMode|locale|layoutDirection|screenLayout"
-            android:exported="true">
+            android:exported="true"
+            android:theme="@style/Theme.Myne.ReaderActivity">
             <intent-filter>
                 <action android:name="android.intent.action.VIEW" />
                 <category android:name="android.intent.category.DEFAULT" />
diff --git a/app/src/main/java/com/starry/myne/ui/screens/main/MainScreen.kt b/app/src/main/java/com/starry/myne/ui/screens/main/MainScreen.kt
index 5497f78..2956eeb 100644
--- a/app/src/main/java/com/starry/myne/ui/screens/main/MainScreen.kt
+++ b/app/src/main/java/com/starry/myne/ui/screens/main/MainScreen.kt
@@ -79,7 +79,8 @@ fun MainScreen(
     Scaffold(
         bottomBar = {
             BottomBar(navController = navController)
-        }, containerColor = MaterialTheme.colorScheme.background
+        },
+        containerColor = MaterialTheme.colorScheme.background,
     ) {
         NavGraph(
             startDestination = startDestination,
diff --git a/app/src/main/java/com/starry/myne/ui/screens/reader/main/activities/ReaderActivity.kt b/app/src/main/java/com/starry/myne/ui/screens/reader/main/activities/ReaderActivity.kt
index 1d62452..9fccbfc 100644
--- a/app/src/main/java/com/starry/myne/ui/screens/reader/main/activities/ReaderActivity.kt
+++ b/app/src/main/java/com/starry/myne/ui/screens/reader/main/activities/ReaderActivity.kt
@@ -116,11 +116,13 @@ class ReaderActivity : AppCompatActivity() {
                         ChaptersContent(
                             state = state,
                             lazyListState = lazyListState,
-                            onToggleReaderMenu = {
-                                viewModel.toggleReaderMenu()
-                                toggleSystemBars(state.showReaderMenu)
-                            }
+                            onToggleReaderMenu = { viewModel.toggleReaderMenu() }
                         )
+
+                        // Toggle system bars based on reader menu visibility.
+                        LaunchedEffect(state.showReaderMenu) {
+                            toggleSystemBars(state.showReaderMenu)
+                        }
                     })
             }
         }
diff --git a/app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ChaptersContent.kt b/app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ChaptersContent.kt
index 1a42a00..4044094 100644
--- a/app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ChaptersContent.kt
+++ b/app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ChaptersContent.kt
@@ -93,7 +93,10 @@ private fun ChapterLazyItemItem(
     val context = LocalContext.current
     val paragraphs = remember { chunkText(chapter.body) }
 
-    val targetFontSize = (state.fontSize / 10) * 1.8f
+    val targetFontSize = remember(state.fontSize) {
+        (state.fontSize / 10) * 1.8f
+    }
+
     val fontSize by animateFloatAsState(
         targetValue = targetFontSize,
         animationSpec = tween(durationMillis = 300),
diff --git a/app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ReaderBottomBar.kt b/app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ReaderBottomBar.kt
new file mode 100644
index 0000000..903b2a2
--- /dev/null
+++ b/app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ReaderBottomBar.kt
@@ -0,0 +1,295 @@
+package com.starry.myne.ui.screens.reader.main.composables
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.selection.selectable
+import androidx.compose.foundation.selection.selectableGroup
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.FilledTonalButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.RadioButtonDefaults
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.surfaceColorAtElevation
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.starry.myne.R
+import com.starry.myne.ui.screens.reader.main.viewmodel.ReaderFont
+import com.starry.myne.ui.screens.reader.main.viewmodel.ReaderScreenState
+import com.starry.myne.ui.theme.poppinsFont
+import kotlinx.coroutines.launch
+
+private enum class TextScaleButtonType { INCREASE, DECREASE }
+
+@Composable
+fun ReaderBottomBar(
+    state: ReaderScreenState,
+    showFontDialog: MutableState<Boolean>,
+    snackBarHostState: SnackbarHostState,
+    onFontSizeChanged: (newValue: Int) -> Unit
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp))
+            .background(MaterialTheme.colorScheme.surfaceColorAtElevation(2.dp))
+            .padding(vertical = 24.dp, horizontal = 16.dp)
+    ) {
+        TextScaleControls(
+            fontSize = state.fontSize,
+            snackBarHostState = snackBarHostState,
+            onFontSizeChanged = onFontSizeChanged
+        )
+
+        Spacer(modifier = Modifier.height(14.dp))
+
+        FontSelectionButton(
+            readerFontFamily = state.fontFamily,
+            showFontDialog = showFontDialog
+        )
+    }
+}
+
+
+@Composable
+private fun TextScaleControls(
+    fontSize: Int,
+    snackBarHostState: SnackbarHostState,
+    onFontSizeChanged: (newValue: Int) -> Unit
+) {
+    Box(
+        modifier = Modifier.fillMaxWidth(),
+        contentAlignment = Alignment.Center
+    ) {
+        Row(
+            modifier = Modifier.width(335.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            ReaderTextScaleButton(
+                buttonType = TextScaleButtonType.DECREASE,
+                fontSize = fontSize,
+                snackBarHostState = snackBarHostState,
+                onFontSizeChanged = onFontSizeChanged
+            )
+
+            Box(
+                modifier = Modifier
+                    .size(100.dp, 45.dp)
+                    .clip(RoundedCornerShape(16.dp))
+                    .background(ButtonDefaults.filledTonalButtonColors().containerColor),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = fontSize.toString(),
+                    fontFamily = poppinsFont,
+                    fontSize = 16.sp,
+                    color = MaterialTheme.colorScheme.onSurface,
+                    modifier = Modifier.padding(start = 2.dp, bottom = 1.dp)
+                )
+            }
+
+            ReaderTextScaleButton(
+                buttonType = TextScaleButtonType.INCREASE,
+                fontSize = fontSize,
+                snackBarHostState = snackBarHostState,
+                onFontSizeChanged = onFontSizeChanged
+            )
+        }
+    }
+}
+
+@Composable
+private fun FontSelectionButton(
+    readerFontFamily: ReaderFont,
+    showFontDialog: MutableState<Boolean>
+) {
+    Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
+        FilledTonalButton(
+            onClick = { showFontDialog.value = true },
+            modifier = Modifier
+                .width(365.dp)
+                .padding(horizontal = 14.dp),
+            shape = RoundedCornerShape(16.dp),
+        ) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Icon(
+                    imageVector = ImageVector.vectorResource(id = R.drawable.ic_reader_font),
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.onSurface
+                )
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(
+                    text = readerFontFamily.name,
+                    color = MaterialTheme.colorScheme.onSurface
+                )
+            }
+        }
+    }
+}
+
+
+@Composable
+private fun ReaderTextScaleButton(
+    buttonType: TextScaleButtonType,
+    fontSize: Int,
+    snackBarHostState: SnackbarHostState,
+    onFontSizeChanged: (newValue: Int) -> Unit
+) {
+    val coroutineScope = rememberCoroutineScope()
+
+    val context = LocalContext.current
+    val (iconRes, adjustment) = remember(buttonType) {
+        when (buttonType) {
+            TextScaleButtonType.DECREASE -> Pair(R.drawable.ic_reader_text_minus, -10)
+            TextScaleButtonType.INCREASE -> Pair(R.drawable.ic_reader_text_plus, 10)
+        }
+    }
+
+    val callback: () -> Unit = {
+        val newSize = fontSize + adjustment
+        when {
+            newSize < 50 -> {
+                coroutineScope.launch {
+                    snackBarHostState.showSnackbar(
+                        context.getString(R.string.reader_min_font_size_reached),
+                        null
+                    )
+                }
+            }
+
+            newSize > 200 -> {
+                coroutineScope.launch {
+                    snackBarHostState.showSnackbar(
+                        context.getString(R.string.reader_max_font_size_reached),
+                        null
+                    )
+                }
+            }
+
+            else -> {
+                coroutineScope.launch {
+                    val adjustedSize = fontSize + adjustment
+                    onFontSizeChanged(adjustedSize)
+                }
+            }
+        }
+    }
+
+    FilledTonalButton(
+        onClick = { callback() },
+        modifier = Modifier.size(100.dp, 45.dp),
+        shape = RoundedCornerShape(18.dp),
+    ) {
+        Icon(
+            imageVector = ImageVector.vectorResource(id = iconRes),
+            contentDescription = null,
+            modifier = Modifier.size(ButtonDefaults.IconSize)
+        )
+    }
+}
+
+@Composable
+fun ReaderFontChooserDialog(
+    showFontDialog: MutableState<Boolean>,
+    fontFamily: ReaderFont,
+    onFontFamilyChanged: (ReaderFont) -> Unit
+) {
+    val radioOptions = ReaderFont.getAllFonts().map { it.name }
+    val (selectedOption, onOptionSelected) = remember {
+        mutableStateOf(fontFamily)
+    }
+
+    if (showFontDialog.value) {
+        AlertDialog(onDismissRequest = {
+            showFontDialog.value = false
+        }, title = {
+            Text(
+                text = stringResource(id = R.string.reader_font_style_chooser),
+                color = MaterialTheme.colorScheme.onSurface,
+            )
+        }, text = {
+            Column(
+                modifier = Modifier.selectableGroup(),
+                verticalArrangement = Arrangement.Center,
+            ) {
+                radioOptions.forEach { text ->
+                    Row(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(46.dp)
+                            .selectable(
+                                selected = (text == selectedOption.name),
+                                onClick = { onOptionSelected(ReaderFont.getFontByName(text)) },
+                                role = Role.RadioButton,
+                            ),
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        RadioButton(
+                            selected = (text == selectedOption.name),
+                            onClick = null,
+                            colors = RadioButtonDefaults.colors(
+                                selectedColor = MaterialTheme.colorScheme.primary,
+                                unselectedColor = MaterialTheme.colorScheme.inversePrimary,
+                                disabledSelectedColor = Color.Black,
+                                disabledUnselectedColor = Color.Black
+                            ),
+                        )
+                        Text(
+                            text = text,
+                            modifier = Modifier.padding(start = 16.dp),
+                            color = MaterialTheme.colorScheme.onSurface,
+                            fontFamily = poppinsFont
+                        )
+                    }
+                }
+            }
+        }, confirmButton = {
+            FilledTonalButton(
+                onClick = {
+                    showFontDialog.value = false
+                    onFontFamilyChanged(selectedOption)
+                }, colors = ButtonDefaults.filledTonalButtonColors(
+                    contentColor = MaterialTheme.colorScheme.onPrimary,
+                    containerColor = MaterialTheme.colorScheme.primary
+                )
+            ) {
+                Text(stringResource(id = R.string.theme_dialog_apply_button))
+            }
+        }, dismissButton = {
+            TextButton(onClick = {
+                showFontDialog.value = false
+            }) {
+                Text(stringResource(id = R.string.cancel))
+            }
+        })
+    }
+}
diff --git a/app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ReaderScreen.kt b/app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ReaderScreen.kt
index 463593d..c191f55 100644
--- a/app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ReaderScreen.kt
+++ b/app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ReaderScreen.kt
@@ -53,6 +53,7 @@ import androidx.compose.material3.rememberDrawerState
 import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
@@ -78,6 +79,13 @@ fun ReaderScreen(
         viewModel.hideReaderInfo()
     }
 
+    val showFontDialog = remember { mutableStateOf(false) }
+    ReaderFontChooserDialog(
+        showFontDialog = showFontDialog,
+        fontFamily = state.fontFamily,
+        onFontFamilyChanged = { viewModel.setFontFamily(it) }
+    )
+
     val snackBarHostState = remember { SnackbarHostState() }
     val drawerState = rememberDrawerState(DrawerValue.Closed)
     val coroutineScope = rememberCoroutineScope()
@@ -108,7 +116,12 @@ fun ReaderScreen(
                     enter = expandVertically(initialHeight = { 0 }) + fadeIn(),
                     exit = shrinkVertically(targetHeight = { 0 }) + fadeOut(),
                 ) {
-
+                    ReaderBottomBar(
+                        state = state,
+                        showFontDialog = showFontDialog,
+                        snackBarHostState = snackBarHostState,
+                        onFontSizeChanged = { viewModel.setFontSize(it) },
+                    )
                 }
             },
             content = { paddingValues ->
diff --git a/app/src/main/res/values-night/themes.xml b/app/src/main/res/values-night/themes.xml
index 016350f..b2857f3 100644
--- a/app/src/main/res/values-night/themes.xml
+++ b/app/src/main/res/values-night/themes.xml
@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="Theme.Myne" parent="Theme.Material3.Dark.NoActionBar">
+    <style name="Theme.Myne" parent="Theme.Material3.Dark.NoActionBar" />
+
+    <style name="Theme.Myne.ReaderActivity" parent="Theme.Myne">
         <item name="android:statusBarColor">@android:color/transparent</item>
         <item name="android:navigationBarColor">@android:color/transparent</item>
         <item name="android:windowLightStatusBar">true</item>
diff --git a/app/src/main/res/values-v27/themes.xml b/app/src/main/res/values-v27/themes.xml
deleted file mode 100644
index 2f5e02c..0000000
--- a/app/src/main/res/values-v27/themes.xml
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-
-    <style name="Theme.Myne" parent="Theme.Material3.Light.NoActionBar">
-        <item name="android:statusBarColor">@android:color/transparent</item>
-        <item name="android:navigationBarColor">@android:color/transparent</item>
-        <item name="android:windowLightNavigationBar">true</item>
-        <item name="android:windowLightStatusBar">true</item>
-        <item name="android:windowTranslucentStatus">true</item>
-        <item name="android:windowTranslucentNavigation">true</item>
-        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
-    </style>
-</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index f7dc55f..f691f68 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:tools="http://schemas.android.com/tools">
 
-    <style name="Theme.Myne" parent="Theme.Material3.Light.NoActionBar">
+    <style name="Theme.Myne" parent="Theme.Material3.Light.NoActionBar" />
+
+    <style name="Theme.Myne.ReaderActivity" parent="Theme.Myne">
         <item name="android:statusBarColor">@android:color/transparent</item>
         <item name="android:navigationBarColor">@android:color/transparent</item>
         <item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>
diff --git a/build.gradle b/build.gradle
index e068c57..6f5a21f 100644
--- a/build.gradle
+++ b/build.gradle
@@ -1,7 +1,7 @@
 buildscript {
     ext {
         kotlin_version = '2.0.0'
-        gradle_version = '8.6.1'
+        gradle_version = '8.7.0'
         hilt_version = '2.51.1'
         room_version = '2.6.1'
     }
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
index e9a6775..6853c53 100644
--- a/gradle/wrapper/gradle-wrapper.properties
+++ b/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 #Mon Nov 21 12:06:18 IST 2022
 distributionBase=GRADLE_USER_HOME
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.9-bin.zip
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME