diff --git a/app/components/InfoButton/InfoButton.styles.ts b/app/components/InfoButton/InfoButton.styles.ts
index 18142fe0..ef743819 100644
--- a/app/components/InfoButton/InfoButton.styles.ts
+++ b/app/components/InfoButton/InfoButton.styles.ts
@@ -1,11 +1,9 @@
 import { StyleSheet } from "react-native";
 
-import { Layout } from "constant";
 import { Colors } from "style";
 
 export default StyleSheet.create({
   infoIcon: {
-    marginRight: Layout.PADDING_HORIZONTAL,
     color: Colors.secondary,
   },
 });
diff --git a/app/components/InfoButton/__tests__/__snapshots__/InfoButton.test.tsx.snap b/app/components/InfoButton/__tests__/__snapshots__/InfoButton.test.tsx.snap
index 32918604..597cd23c 100644
--- a/app/components/InfoButton/__tests__/__snapshots__/InfoButton.test.tsx.snap
+++ b/app/components/InfoButton/__tests__/__snapshots__/InfoButton.test.tsx.snap
@@ -11,7 +11,6 @@ exports[`renders correctly 1`] = `
     style={
       {
         "color": "#3957D0",
-        "marginRight": 16,
       }
     }
   />
diff --git a/app/constant/Layout.ts b/app/constant/Layout.ts
index 30cac351..8c1109fb 100644
--- a/app/constant/Layout.ts
+++ b/app/constant/Layout.ts
@@ -17,6 +17,6 @@ const screen = {
 };
 
 // Standard Android Bottom Tab Bar height (typically 56dp) plus a small 4dp buffer. We must use a hardcoded value here because the dynamic useBottomTabBarHeight hook causes a crash when used outside the Tab Navigator context (which is the case with our Native Tabs setup)
-const ANDROID_TAB_BAR_HEIGHT = 60;
+const ANDROID_TAB_BAR_HEIGHT = 90;
 
 export { screen, isSmallDevice, PADDING_HORIZONTAL, SPACING, ANDROID_TAB_BAR_HEIGHT };
diff --git a/app/interfaces/navigation/navigation.ts b/app/interfaces/navigation/navigation.ts
index 11a14f10..66b48ede 100644
--- a/app/interfaces/navigation/navigation.ts
+++ b/app/interfaces/navigation/navigation.ts
@@ -1,7 +1,8 @@
 import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 interface NavStatelessComponent extends React.FC {
-  navigationOptions?: StackNavigationOptions;
+  navigationOptions?: StackNavigationOptions | NativeStackNavigationOptions;
 }
 
 export default NavStatelessComponent;
diff --git a/app/navigation/Navigator/BottomTab/ActNavigator.tsx b/app/navigation/Navigator/BottomTab/ActNavigator.tsx
index 163543ee..18f94338 100644
--- a/app/navigation/Navigator/BottomTab/ActNavigator.tsx
+++ b/app/navigation/Navigator/BottomTab/ActNavigator.tsx
@@ -1,22 +1,22 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import ActTabNavigator from "./ActTabNavigator";
 import ActDetailScreen from "../../../screens/ActDetail";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const ActNavigator = (): React.ReactElement => (
   <Stack.Navigator id="ActStack">
     <Stack.Screen
       name="ActTabNavigator"
-      options={ActTabNavigator.navigationOptions}
+      options={ActTabNavigator.navigationOptions as NativeStackNavigationOptions}
       component={ActTabNavigator}
     />
     <Stack.Screen
       name="ActDetail"
       component={ActDetailScreen}
-      options={ActDetailScreen.navigationOptions}
+      options={ActDetailScreen.navigationOptions as NativeStackNavigationOptions}
     />
   </Stack.Navigator>
 );
diff --git a/app/navigation/Navigator/BottomTab/ActTabNavigator.tsx b/app/navigation/Navigator/BottomTab/ActTabNavigator.tsx
index 30132b6d..10fee656 100644
--- a/app/navigation/Navigator/BottomTab/ActTabNavigator.tsx
+++ b/app/navigation/Navigator/BottomTab/ActTabNavigator.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import { Text } from "components";
 import { t } from "utils";
-import { ComponentsStyle, Colors, Font } from "style";
+import { Colors, Font } from "style";
 import { NavStatelessComponent } from "interfaces";
 
 import { GuideCategory } from "../../../types/guide";
@@ -83,13 +83,14 @@ const ActTabNavigator: NavStatelessComponent = () => (
   </Tab.Navigator>
 );
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("ACT_SCREEN_TITLE"),
   headerBackButtonDisplayMode: "minimal",
-  headerTitle: () => <Text.H1>{t("ACT_SCREEN_TITLE")}</Text.H1>,
+  headerTintColor: Colors.grey100,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 ActTabNavigator.navigationOptions = navigationOptions();
diff --git a/app/navigation/Navigator/BottomTab/AddEmissionNavigator.tsx b/app/navigation/Navigator/BottomTab/AddEmissionNavigator.tsx
index 68ade3b0..0c4b5fe4 100644
--- a/app/navigation/Navigator/BottomTab/AddEmissionNavigator.tsx
+++ b/app/navigation/Navigator/BottomTab/AddEmissionNavigator.tsx
@@ -1,33 +1,33 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import AddEmissionScreen from "../../../screens/AddEmission";
 import CategorySelectionScreen from "../../../screens/CategorySelection";
 import SubCategorySelectionScreen from "../../../screens/SubCategorySelection";
 import BarCodeScanScreen from "../../../screens/BarCodeScan";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const AddEmissionNavigator = (): React.ReactElement => (
   <Stack.Navigator id="AddEmissionStack">
     <Stack.Screen
       name="CategorySelection"
-      options={CategorySelectionScreen.navigationOptions}
+      options={CategorySelectionScreen.navigationOptions as NativeStackNavigationOptions}
       component={CategorySelectionScreen}
     />
     <Stack.Screen
       name="SubCategorySelection"
-      options={SubCategorySelectionScreen.navigationOptions}
+      options={SubCategorySelectionScreen.navigationOptions as NativeStackNavigationOptions}
       component={SubCategorySelectionScreen}
     />
     <Stack.Screen
       name="AddEmission"
-      options={AddEmissionScreen.navigationOptions}
+      options={AddEmissionScreen.navigationOptions as NativeStackNavigationOptions}
       component={AddEmissionScreen}
     />
     <Stack.Screen
       name="BarCodeScan"
-      options={BarCodeScanScreen.navigationOptions}
+      options={BarCodeScanScreen.navigationOptions as NativeStackNavigationOptions}
       component={BarCodeScanScreen}
     />
   </Stack.Navigator>
diff --git a/app/navigation/Navigator/BottomTab/BudgetNavigator.tsx b/app/navigation/Navigator/BottomTab/BudgetNavigator.tsx
index 3d1d8abb..839c39b8 100644
--- a/app/navigation/Navigator/BottomTab/BudgetNavigator.tsx
+++ b/app/navigation/Navigator/BottomTab/BudgetNavigator.tsx
@@ -1,23 +1,27 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import BudgetScreen from "../../../screens/Budget";
 import MontlyBudgetScreen from "../../../screens/MonthlyBudget";
 import AddEmissionScreen from "../../../screens/AddEmission";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const BudgetNavigator = (): React.ReactElement => (
   <Stack.Navigator id="BudgetStack">
-    <Stack.Screen name="Budget" options={BudgetScreen.navigationOptions} component={BudgetScreen} />
+    <Stack.Screen
+      name="Budget"
+      options={BudgetScreen.navigationOptions as NativeStackNavigationOptions}
+      component={BudgetScreen}
+    />
     <Stack.Screen
       name="MonthlyBudget"
-      options={MontlyBudgetScreen.navigationOptions}
+      options={MontlyBudgetScreen.navigationOptions as NativeStackNavigationOptions}
       component={MontlyBudgetScreen}
     />
     <Stack.Screen
       name="AddEmission"
-      options={AddEmissionScreen.navigationOptions}
+      options={AddEmissionScreen.navigationOptions as NativeStackNavigationOptions}
       component={AddEmissionScreen}
     />
   </Stack.Navigator>
diff --git a/app/navigation/Navigator/BottomTab/EmissionsNavigator.tsx b/app/navigation/Navigator/BottomTab/EmissionsNavigator.tsx
index 8f73a06a..1a5b4651 100644
--- a/app/navigation/Navigator/BottomTab/EmissionsNavigator.tsx
+++ b/app/navigation/Navigator/BottomTab/EmissionsNavigator.tsx
@@ -1,33 +1,33 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import EmissionItemScreen from "../../../screens/EmissionItem";
 import EmissionsScreen from "../../../screens/Emissions";
 import MonthlyEmissionsScreen from "../../../screens/MonthlyEmissions";
 import RecurringEmissionsScreen from "../../../screens/RecurringEmissions";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const EmissionsNavigator = (): React.ReactElement => (
   <Stack.Navigator id="EmissionsStack">
     <Stack.Screen
       name="Emissions"
-      options={EmissionsScreen.navigationOptions}
+      options={EmissionsScreen.navigationOptions as NativeStackNavigationOptions}
       component={EmissionsScreen}
     />
     <Stack.Screen
       name="EmissionItem"
-      options={EmissionItemScreen.navigationOptions}
+      options={EmissionItemScreen.navigationOptions as NativeStackNavigationOptions}
       component={EmissionItemScreen}
     />
     <Stack.Screen
       name="MonthlyEmissions"
-      options={MonthlyEmissionsScreen.navigationOptions}
+      options={MonthlyEmissionsScreen.navigationOptions as NativeStackNavigationOptions}
       component={MonthlyEmissionsScreen}
     />
     <Stack.Screen
       name="RecurringEmissions"
-      options={RecurringEmissionsScreen.navigationOptions}
+      options={RecurringEmissionsScreen.navigationOptions as NativeStackNavigationOptions}
       component={RecurringEmissionsScreen}
     />
   </Stack.Navigator>
diff --git a/app/navigation/Navigator/BottomTab/SettingsNavigator.tsx b/app/navigation/Navigator/BottomTab/SettingsNavigator.tsx
index d1016ffe..d23d3db1 100644
--- a/app/navigation/Navigator/BottomTab/SettingsNavigator.tsx
+++ b/app/navigation/Navigator/BottomTab/SettingsNavigator.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import SettingsScreen from "../../../screens/Settings";
 import AboutScreen from "../../../screens/About";
@@ -10,36 +10,36 @@ import NotificationsScreen from "../../../screens/Notifications";
 import MyData from "../../../screens/MyData";
 import LanguagesScreen from "../../../screens/Languages/LanguagesScreen";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const SettingsNavigator = (): React.ReactElement => (
   <Stack.Navigator id="SettingsStack">
     <Stack.Screen
       name="Settings"
-      options={SettingsScreen.navigationOptions}
+      options={SettingsScreen.navigationOptions as NativeStackNavigationOptions}
       component={SettingsScreen}
     />
-    <Stack.Screen name="About" options={AboutScreen.navigationOptions} component={AboutScreen} />
+    <Stack.Screen name="About" options={AboutScreen.navigationOptions as NativeStackNavigationOptions} component={AboutScreen} />
     <Stack.Screen
       name="SupportUs"
-      options={SupportUsScreen.navigationOptions}
+      options={SupportUsScreen.navigationOptions as NativeStackNavigationOptions}
       component={SupportUsScreen}
     />
     <Stack.Screen
       name="MyLocation"
-      options={MyLocationScreen.navigationOptions}
+      options={MyLocationScreen.navigationOptions as NativeStackNavigationOptions}
       component={MyLocationScreen}
     />
-    <Stack.Screen name="Faq" options={FaqScreen.navigationOptions} component={FaqScreen} />
+    <Stack.Screen name="Faq" options={FaqScreen.navigationOptions as NativeStackNavigationOptions} component={FaqScreen} />
     <Stack.Screen
       name="Notifications"
-      options={NotificationsScreen.navigationOptions}
+      options={NotificationsScreen.navigationOptions as NativeStackNavigationOptions}
       component={NotificationsScreen}
     />
-    <Stack.Screen name="MyData" options={MyData.navigationOptions} component={MyData} />
+    <Stack.Screen name="MyData" options={MyData.navigationOptions as NativeStackNavigationOptions} component={MyData} />
     <Stack.Screen
       name="Languages"
-      options={LanguagesScreen.navigationOptions}
+      options={LanguagesScreen.navigationOptions as NativeStackNavigationOptions}
       component={LanguagesScreen}
     />
   </Stack.Navigator>
diff --git a/app/navigation/Navigator/BottomTabNavigator.tsx b/app/navigation/Navigator/BottomTabNavigator.tsx
index 5cdba2d3..bc38ba85 100644
--- a/app/navigation/Navigator/BottomTabNavigator.tsx
+++ b/app/navigation/Navigator/BottomTabNavigator.tsx
@@ -64,11 +64,9 @@ const BottomTabNavigator = (): React.ReactElement => {
         options={AddEmissionOptions}
         component={AddEmissionNavigator}
       />
-      <BottomTab.Screen
-        name="Act"
-        options={ActOptions}
-        component={ActNavigator}
-      />
+      {__DEV__ && (
+        <BottomTab.Screen name="Act" options={ActOptions} component={ActNavigator} />
+      )}
       <BottomTab.Screen
         name="SettingsNavigator"
         options={SettingsOptions}
diff --git a/app/navigation/Navigator/InfoModalNavigator.tsx b/app/navigation/Navigator/InfoModalNavigator.tsx
index c41edda7..af16093c 100644
--- a/app/navigation/Navigator/InfoModalNavigator.tsx
+++ b/app/navigation/Navigator/InfoModalNavigator.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createStackNavigator, StackNavigationOptions } from "@react-navigation/stack";
 
 import InfoModalScreen from "../../screens/InfoModal";
 
@@ -9,7 +9,7 @@ const InfoModalNavigator = (): React.ReactElement => (
   <Stack.Navigator id="InfoModalStack">
     <Stack.Screen
       name="InfoModal"
-      options={InfoModalScreen.navigationOptions}
+      options={InfoModalScreen.navigationOptions as StackNavigationOptions}
       component={InfoModalScreen}
     />
   </Stack.Navigator>
diff --git a/app/navigation/Navigator/ModalNavigator.tsx b/app/navigation/Navigator/ModalNavigator.tsx
index 320b5463..038ad7fd 100644
--- a/app/navigation/Navigator/ModalNavigator.tsx
+++ b/app/navigation/Navigator/ModalNavigator.tsx
@@ -1,27 +1,27 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import ComingSoonScreen from "../../screens/ComingSoon";
 import PeriodicityModalScreen from "../../screens/Periodicity";
 import InfoModalScreen from "../../screens/InfoModal";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const ModalNavigator = (): React.ReactElement => (
   <Stack.Navigator id="ModalStack">
     <Stack.Screen
       name="ComingSoonModal"
-      options={ComingSoonScreen.navigationOptions}
+      options={ComingSoonScreen.navigationOptions as NativeStackNavigationOptions}
       component={ComingSoonScreen}
     />
     <Stack.Screen
       name="PeriodicityModal"
-      options={PeriodicityModalScreen.navigationOptions}
+      options={PeriodicityModalScreen.navigationOptions as NativeStackNavigationOptions}
       component={PeriodicityModalScreen}
     />
     <Stack.Screen
       name="InfoModal"
-      options={InfoModalScreen.navigationOptions}
+      options={InfoModalScreen.navigationOptions as NativeStackNavigationOptions}
       component={InfoModalScreen}
     />
   </Stack.Navigator>
diff --git a/app/navigation/Navigator/PeriodicityModalNavigator.tsx b/app/navigation/Navigator/PeriodicityModalNavigator.tsx
index c3e4486c..0dfd39b8 100644
--- a/app/navigation/Navigator/PeriodicityModalNavigator.tsx
+++ b/app/navigation/Navigator/PeriodicityModalNavigator.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createStackNavigator, StackNavigationOptions } from "@react-navigation/stack";
 
 import PeriodicityModalScreen from "../../screens/Periodicity";
 
@@ -9,7 +9,7 @@ const PeriodicityModalNavigator = (): React.ReactElement => (
   <Stack.Navigator id="PeriodicityModalStack">
     <Stack.Screen
       name="PeriodicityModal"
-      options={PeriodicityModalScreen.navigationOptions}
+      options={PeriodicityModalScreen.navigationOptions as StackNavigationOptions}
       component={PeriodicityModalScreen}
     />
   </Stack.Navigator>
diff --git a/app/navigation/Navigator/RootNavigator.tsx b/app/navigation/Navigator/RootNavigator.tsx
index 94fa157d..aa56f89f 100644
--- a/app/navigation/Navigator/RootNavigator.tsx
+++ b/app/navigation/Navigator/RootNavigator.tsx
@@ -1,18 +1,16 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 import { useSelector } from "react-redux";
 
 import { Preferences } from "constant";
 import { userPreferences } from "ducks";
-import { ComponentsStyle } from "style";
 
 import IntroScreen from "../../screens/Intro";
 import BottomTabNavigator from "./BottomTabNavigator";
 
-const Stack = createStackNavigator();
-const screenOptions = {
+const Stack = createNativeStackNavigator();
+const screenOptions: NativeStackNavigationOptions = {
   headerShown: false,
-  ...ComponentsStyle.transitionBetweenScreenPresets,
 };
 
 const RootNavigator = (): React.ReactElement => {
diff --git a/app/screens/About/AboutScreen.navigationOptions.tsx b/app/screens/About/AboutScreen.navigationOptions.tsx
index 24026694..47de6676 100644
--- a/app/screens/About/AboutScreen.navigationOptions.tsx
+++ b/app/screens/About/AboutScreen.navigationOptions.tsx
@@ -1,20 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Layout, Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("ABOUT_SCREEN_TITLE"),
   headerTintColor: Colors.grey100,
   headerBackButtonDisplayMode: "minimal",
-  headerTitle: () => (
-    <Text.Header style={Layout.androidNavTitle}>{t("ABOUT_SCREEN_TITLE")}</Text.Header>
-  ),
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/Act/ActScreen.navigationOptions.tsx b/app/screens/Act/ActScreen.navigationOptions.tsx
index 062c158e..0e01bf70 100644
--- a/app/screens/Act/ActScreen.navigationOptions.tsx
+++ b/app/screens/Act/ActScreen.navigationOptions.tsx
@@ -1,16 +1,15 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { ComponentsStyle } from "style";
+import { Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("ACT_SCREEN_TITLE"),
   headerBackButtonDisplayMode: "minimal",
-  headerTitle: () => <Text.H1>{t("ACT_SCREEN_TITLE")}</Text.H1>,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/ActDetail/ActDetailScreen.navigationOptions.tsx b/app/screens/ActDetail/ActDetailScreen.navigationOptions.tsx
index a463a467..6ff3310c 100644
--- a/app/screens/ActDetail/ActDetailScreen.navigationOptions.tsx
+++ b/app/screens/ActDetail/ActDetailScreen.navigationOptions.tsx
@@ -1,18 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("ACT_DETAIL_SCREEN_TITLE"),
   headerTintColor: Colors.grey100,
   headerBackButtonDisplayMode: "minimal",
-  headerTitle: () => <Text.Header>{t("ACT_DETAIL_SCREEN_TITLE")}</Text.Header>,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/AddEmission/AddEmissionScreen.navigationOptions.tsx b/app/screens/AddEmission/AddEmissionScreen.navigationOptions.tsx
index 4c6bcce8..871d11ce 100644
--- a/app/screens/AddEmission/AddEmissionScreen.navigationOptions.tsx
+++ b/app/screens/AddEmission/AddEmissionScreen.navigationOptions.tsx
@@ -1,19 +1,19 @@
 import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text, InfoButton } from "components";
+import { InfoButton } from "components";
 import { t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("ADD_EMISSION_SCREEN_TITLE"),
   headerBackButtonDisplayMode: "minimal",
   headerTintColor: Colors.grey100,
   headerRight: () => <InfoButton />,
-  headerTitle: () => <Text.Header>{t("ADD_EMISSION_SCREEN_TITLE")}</Text.Header>,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/BarCodeScan/BarCodeScanScreen.navigationOptions.tsx b/app/screens/BarCodeScan/BarCodeScanScreen.navigationOptions.tsx
index 5679e70e..0f5b060c 100644
--- a/app/screens/BarCodeScan/BarCodeScanScreen.navigationOptions.tsx
+++ b/app/screens/BarCodeScan/BarCodeScanScreen.navigationOptions.tsx
@@ -1,18 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("BAR_CODE_SCAN_SCREEN_TITLE"),
   headerBackButtonDisplayMode: "minimal",
   headerTintColor: Colors.grey100,
-  headerTitle: () => <Text.Header>{t("BAR_CODE_SCAN_SCREEN_TITLE")}</Text.Header>,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/Budget/BudgetScreen.navigationOptions.tsx b/app/screens/Budget/BudgetScreen.navigationOptions.tsx
index ab741249..e5be6b04 100644
--- a/app/screens/Budget/BudgetScreen.navigationOptions.tsx
+++ b/app/screens/Budget/BudgetScreen.navigationOptions.tsx
@@ -1,16 +1,23 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
 
-import { Text } from "components";
-import { t } from "utils";
-import { Layout, ComponentsStyle } from "style";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  headerStyle: {
-    ...ComponentsStyle.header,
+import { t, platform } from "utils";
+import { Colors, Font } from "style";
+
+const navigationOptions: NativeStackNavigationOptions = {
+  title: t("BUDGET_SCREEN_TITLE"),
+  headerLargeTitleEnabled: true,
+  headerTransparent: platform.isIOS,
+  headerBlurEffect: platform.isIOS26OrLater() ? undefined : "regular",
+  headerBackButtonDisplayMode: "minimal",
+  headerTintColor: Colors.grey100,
+  headerLargeTitleStyle: {
+    fontFamily: Font.FontWeight.Black,
+  },
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
   },
-  headerBackTitle: null,
-  headerTitle: () => <Text.H1 style={Layout.androidNavTitle}>{t("BUDGET_SCREEN_TITLE")}</Text.H1>,
-});
+};
 
 export default navigationOptions;
diff --git a/app/screens/Budget/BudgetScreen.tsx b/app/screens/Budget/BudgetScreen.tsx
index 1fd513c8..84cf92d1 100644
--- a/app/screens/Budget/BudgetScreen.tsx
+++ b/app/screens/Budget/BudgetScreen.tsx
@@ -97,6 +97,6 @@ const BudgetScreen: NavStatelessComponent = () => {
   );
 };
 
-BudgetScreen.navigationOptions = navigationOptions();
+BudgetScreen.navigationOptions = navigationOptions;
 
 export default BudgetScreen;
diff --git a/app/screens/CategorySelection/CategorySelectionScreen.navigationOptions.tsx b/app/screens/CategorySelection/CategorySelectionScreen.navigationOptions.tsx
index d4a2c98c..77bafb48 100644
--- a/app/screens/CategorySelection/CategorySelectionScreen.navigationOptions.tsx
+++ b/app/screens/CategorySelection/CategorySelectionScreen.navigationOptions.tsx
@@ -1,18 +1,23 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
 
-import { Text } from "components";
-import { t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+import { platform, t } from "utils";
+import { Colors, Font } from "style";
+
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("CATEGORY_SELECTION_SCREEN_TITLE"),
+  headerLargeTitleEnabled: true,
+  headerTransparent: platform.isIOS,
+  headerBlurEffect: platform.isIOS26OrLater() ? undefined : "regular",
   headerBackButtonDisplayMode: "minimal",
   headerTintColor: Colors.grey100,
-  headerTitle: () => <Text.H1>{t("CATEGORY_SELECTION_SCREEN_TITLE")}</Text.H1>,
+  headerLargeTitleStyle: {
+    fontFamily: Font.FontWeight.Black,
+  },
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/ComingSoon/ComingSoonScreen.navigationOptions.tsx b/app/screens/ComingSoon/ComingSoonScreen.navigationOptions.tsx
index 637ffd44..7062ab6b 100644
--- a/app/screens/ComingSoon/ComingSoonScreen.navigationOptions.tsx
+++ b/app/screens/ComingSoon/ComingSoonScreen.navigationOptions.tsx
@@ -1,43 +1,34 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Layout } from "constant";
 import { platform } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 import { navigate } from "navigation";
 
-const iconStyle = { paddingRight: Layout.PADDING_HORIZONTAL };
 
-const navigationOptionsAndroid = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
-  headerTitle: () => null,
-  headerRight: () => null,
-});
-
-const navigationOptionsIOS = ({ navigation }): StackNavigationOptions => ({
-  headerStyle: {
-    ...ComponentsStyle.header,
-    borderBottomWidth: 0,
-  },
+const navigationOptions = ({ navigation }): NativeStackNavigationOptions => ({
   headerTitle: () => null,
+  headerBackVisible: false,
   headerLeft: () => null,
-  headerRight: () => (
-    <TouchableOpacity
-      style={iconStyle}
-      onPress={() => {
-        navigate(navigation).goBack();
-      }}
-    >
-      <Ionicons name="close" size={32} color={Colors.grey100} />
-    </TouchableOpacity>
-  ),
+  headerTransparent: platform.isIOS,
+  headerBlurEffect: platform.isIOS26OrLater() ? undefined : "regular",
+  headerRight: platform.isIOS
+    ? () => (
+      <TouchableOpacity
+        onPress={() => {
+          navigate(navigation).goBack();
+        }}
+      >
+        <Ionicons name="close" size={32} color={Colors.grey100} />
+      </TouchableOpacity>
+    )
+    : undefined,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
-const navigationOptions = platform.isAndroid ? navigationOptionsAndroid : navigationOptionsIOS;
-
 export default navigationOptions;
diff --git a/app/screens/EmissionItem/EmissionItemScreen.navigationOptions.tsx b/app/screens/EmissionItem/EmissionItemScreen.navigationOptions.tsx
index e141bec9..a0550437 100644
--- a/app/screens/EmissionItem/EmissionItemScreen.navigationOptions.tsx
+++ b/app/screens/EmissionItem/EmissionItemScreen.navigationOptions.tsx
@@ -1,35 +1,32 @@
 /* eslint-disable  @typescript-eslint/explicit-module-boundary-types */
+
 import React from "react";
 import { path, includes } from "ramda";
 import { FoodType } from "carbon-footprint";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text, InfoButton } from "components";
+import { InfoButton } from "components";
 import { t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
 const emissionsInfoAvailable = [FoodType.cheese];
 
-const navigationOptions = (prop): StackNavigationOptions => {
+const navigationOptions = (prop): NativeStackNavigationOptions => {
   const emissionModelType = path(["route", "params", "emissionModelType"], prop);
   const showInfoButton = includes(emissionModelType, emissionsInfoAvailable);
   const isRecurringEmission = path(["route", "params", "isRecurringEmission"], prop);
 
   return {
-    ...ComponentsStyle.transitionBetweenScreenPresets,
-    headerStyle: {
-      ...ComponentsStyle.header,
-    },
-    headerTintColor: Colors.grey100,
+    title: isRecurringEmission
+      ? t("EMISSION_ITEM_SCREEN_RECURRING_EMISSION")
+      : t("EMISSION_ITEM_SCREEN_EMISSION"),
     headerBackButtonDisplayMode: "minimal",
+    headerTintColor: Colors.grey100,
     headerRight: () => (showInfoButton ? <InfoButton /> : null),
-    headerTitle: () => (
-      <Text.Header>
-        {isRecurringEmission
-          ? t("EMISSION_ITEM_SCREEN_RECURRING_EMISSION")
-          : t("EMISSION_ITEM_SCREEN_EMISSION")}
-      </Text.Header>
-    ),
+    headerTitleStyle: {
+      fontFamily: Font.FontWeight.Bold,
+      fontSize: Font.FontSize.Header,
+    },
   };
 };
 
diff --git a/app/screens/Emissions/EmissionsScreen.navigationOptions.tsx b/app/screens/Emissions/EmissionsScreen.navigationOptions.tsx
index 6605ba01..954e32d3 100644
--- a/app/screens/Emissions/EmissionsScreen.navigationOptions.tsx
+++ b/app/screens/Emissions/EmissionsScreen.navigationOptions.tsx
@@ -1,18 +1,23 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
 
-import { Text } from "components";
-import { t } from "utils";
-import { Layout, ComponentsStyle } from "style";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  headerStyle: {
-    ...ComponentsStyle.header,
+import { platform, t } from "utils";
+import { Colors, Font } from "style";
+
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("EMISSIONS_SCREEN_TITLE"),
+  headerLargeTitleEnabled: true,
+  headerTransparent: platform.isIOS,
+  headerBlurEffect: platform.isIOS26OrLater() ? undefined : "regular",
+  headerBackButtonDisplayMode: "minimal",
+  headerTintColor: Colors.grey100,
+  headerLargeTitleStyle: {
+    fontFamily: Font.FontWeight.Black,
+  },
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
   },
-  headerBackTitle: null,
-  headerTitle: () => (
-    <Text.H1 style={Layout.androidNavTitle}>{t("EMISSIONS_SCREEN_TITLE")}</Text.H1>
-  ),
 });
 
 export default navigationOptions;
diff --git a/app/screens/Faq/FaqScreen.navigationOptions.tsx b/app/screens/Faq/FaqScreen.navigationOptions.tsx
index c3496da1..fd991d1a 100644
--- a/app/screens/Faq/FaqScreen.navigationOptions.tsx
+++ b/app/screens/Faq/FaqScreen.navigationOptions.tsx
@@ -1,20 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Layout, Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("FAQ_SCREEN_TITLE"),
   headerTintColor: Colors.grey100,
   headerBackButtonDisplayMode: "minimal",
-  headerTitle: () => (
-    <Text.Header style={Layout.androidNavTitle}>{t("FAQ_SCREEN_TITLE")}</Text.Header>
-  ),
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/InfoModal/InfoModal.navigationOptions.tsx b/app/screens/InfoModal/InfoModal.navigationOptions.tsx
index 8e03faa3..3a1e5383 100644
--- a/app/screens/InfoModal/InfoModal.navigationOptions.tsx
+++ b/app/screens/InfoModal/InfoModal.navigationOptions.tsx
@@ -1,45 +1,23 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Layout } from "constant";
-import { Text } from "components";
 import { platform, t, ui } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 import { navigate } from "navigation";
 
-const iconStyle = { paddingRight: Layout.PADDING_HORIZONTAL };
 
-const navigationOptionsAndroid = ({ route }): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
-  headerTitle: () =>
-    route.params?.emissionModelType ? (
-      <Text.H1>{ui.getTranslationEmissionModelType(route.params.emissionModelType)}</Text.H1>
-    ) : (
-      <Text.H1>{t("INFO_MODAL_SCREEN_METHODOLOGY")}</Text.H1>
-    ),
-  headerRight: () => null,
-});
-
-const navigationOptionsIOS = ({ navigation, route }): StackNavigationOptions => ({
-  headerStyle: {
-    ...ComponentsStyle.header,
-    borderBottomWidth: 0,
-  },
-  headerTitle: () =>
-    route.params?.emissionModelType ? (
-      <Text.H1>{ui.getTranslationEmissionModelType(route.params.emissionModelType)}</Text.H1>
-    ) : (
-      <Text.H1>{t("INFO_MODAL_SCREEN_METHODOLOGY")}</Text.H1>
-    ),
+const navigationOptions = ({ navigation, route }): NativeStackNavigationOptions => ({
+  title: route.params?.emissionModelType
+    ? ui.getTranslationEmissionModelType(route.params.emissionModelType)
+    : t("INFO_MODAL_SCREEN_METHODOLOGY"),
+  headerBackVisible: false,
   headerLeft: () => null,
+  headerTransparent: platform.isIOS,
+  headerBlurEffect: platform.isIOS26OrLater() ? undefined : "regular",
   headerRight: () => (
     <TouchableOpacity
-      style={iconStyle}
       onPress={() => {
         navigate(navigation).goBack();
       }}
@@ -47,8 +25,11 @@ const navigationOptionsIOS = ({ navigation, route }): StackNavigationOptions =>
       <Ionicons name="close" size={32} color={Colors.grey100} />
     </TouchableOpacity>
   ),
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
+  headerTintColor: Colors.grey100,
 });
 
-const navigationOptions = platform.isAndroid ? navigationOptionsAndroid : navigationOptionsIOS;
-
 export default navigationOptions;
diff --git a/app/screens/InfoModal/InfoModalScreen.tsx b/app/screens/InfoModal/InfoModalScreen.tsx
index d1979599..d9669d8b 100644
--- a/app/screens/InfoModal/InfoModalScreen.tsx
+++ b/app/screens/InfoModal/InfoModalScreen.tsx
@@ -28,7 +28,10 @@ const InfoModalScreen: NavStatelessComponent = () => {
   }
 
   return (
-    <ScrollView style={styles.container} contentInsetAdjustmentBehavior="automatic">
+    <ScrollView
+      style={styles.container}
+      contentInsetAdjustmentBehavior="automatic"
+    >
       <HTML source={{ html }} onLinkPress={ui.onHTMLBodyLinkPress} baseFontStyle={styles.text} />
     </ScrollView>
   );
diff --git a/app/screens/Languages/LanguagesScreen.navigationOptions.tsx b/app/screens/Languages/LanguagesScreen.navigationOptions.tsx
index 22ed94d5..7a468222 100644
--- a/app/screens/Languages/LanguagesScreen.navigationOptions.tsx
+++ b/app/screens/Languages/LanguagesScreen.navigationOptions.tsx
@@ -1,18 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("LANGUAGES_SCREEN_TITLE"),
   headerBackButtonDisplayMode: "minimal",
   headerTintColor: Colors.grey100,
-  headerTitle: () => <Text.Header>{t("LANGUAGES_SCREEN_TITLE")}</Text.Header>,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/MonthlyBudget/MonthlyBudgetScreen.navigationOptions.tsx b/app/screens/MonthlyBudget/MonthlyBudgetScreen.navigationOptions.tsx
index 46ae6844..210e60d0 100644
--- a/app/screens/MonthlyBudget/MonthlyBudgetScreen.navigationOptions.tsx
+++ b/app/screens/MonthlyBudget/MonthlyBudgetScreen.navigationOptions.tsx
@@ -1,18 +1,17 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
 
-import { Text } from "components";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
+
 import { t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("MONTHLY_BUDGET_SCREEN_TITLE"),
   headerBackButtonDisplayMode: "minimal",
   headerTintColor: Colors.grey100,
-  headerTitle: () => <Text.Header>{t("MONTHLY_BUDGET_SCREEN_TITLE")}</Text.Header>,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/MonthlyEmissions/MonthlyEmissionsScreen.navigationOptions.tsx b/app/screens/MonthlyEmissions/MonthlyEmissionsScreen.navigationOptions.tsx
index d170803a..96cbc7ff 100644
--- a/app/screens/MonthlyEmissions/MonthlyEmissionsScreen.navigationOptions.tsx
+++ b/app/screens/MonthlyEmissions/MonthlyEmissionsScreen.navigationOptions.tsx
@@ -1,21 +1,15 @@
-/* eslint-disable  @typescript-eslint/explicit-module-boundary-types */
-import React from "react";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
-import { Layout, ComponentsStyle, Colors } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = ({ route }) => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = ({ route }): NativeStackNavigationOptions => ({
+  title: route?.params?.monthAndYear,
   headerBackButtonDisplayMode: "minimal",
   headerTintColor: Colors.grey100,
-  headerTitle: () => (
-    <Text.Header style={[Layout.androidNavTitle, { textTransform: "capitalize" }]}>
-      {route?.params?.monthAndYear}
-    </Text.Header>
-  ),
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/MyData/MyDataScreen.navigationOptions.tsx b/app/screens/MyData/MyDataScreen.navigationOptions.tsx
index fed0b199..fd7a1638 100644
--- a/app/screens/MyData/MyDataScreen.navigationOptions.tsx
+++ b/app/screens/MyData/MyDataScreen.navigationOptions.tsx
@@ -1,18 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("MY_DATA_SCREEN_TITLE"),
   headerBackButtonDisplayMode: "minimal",
   headerTintColor: Colors.grey100,
-  headerTitle: () => <Text.Header>{t("MY_DATA_SCREEN_TITLE")}</Text.Header>,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/MyLocation/MyLocationScreen.navigationOptions.tsx b/app/screens/MyLocation/MyLocationScreen.navigationOptions.tsx
index ec6ac017..7c72517d 100644
--- a/app/screens/MyLocation/MyLocationScreen.navigationOptions.tsx
+++ b/app/screens/MyLocation/MyLocationScreen.navigationOptions.tsx
@@ -1,18 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("MY_LOCATION_SCREEN_TITLE"),
   headerBackButtonDisplayMode: "minimal",
   headerTintColor: Colors.grey100,
-  headerTitle: () => <Text.Header>{t("MY_LOCATION_SCREEN_TITLE")}</Text.Header>,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/Notifications/NotificationsScreen.navigationOptions.tsx b/app/screens/Notifications/NotificationsScreen.navigationOptions.tsx
index c5672c3f..211e1fe0 100644
--- a/app/screens/Notifications/NotificationsScreen.navigationOptions.tsx
+++ b/app/screens/Notifications/NotificationsScreen.navigationOptions.tsx
@@ -1,18 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("NOTIFICATIONS_SCREEN_TITLE"),
   headerBackButtonDisplayMode: "minimal",
   headerTintColor: Colors.grey100,
-  headerTitle: () => <Text.Header>{t("NOTIFICATIONS_SCREEN_TITLE")}</Text.Header>,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/Periodicity/PeriodicityModal.navigationOptions.tsx b/app/screens/Periodicity/PeriodicityModal.navigationOptions.tsx
index 5d00c77a..5dd41c90 100644
--- a/app/screens/Periodicity/PeriodicityModal.navigationOptions.tsx
+++ b/app/screens/Periodicity/PeriodicityModal.navigationOptions.tsx
@@ -1,39 +1,29 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Layout } from "constant";
-import { Text } from "components";
 import { platform, t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 import { navigate } from "navigation";
 
-const iconStyle = { paddingRight: Layout.PADDING_HORIZONTAL };
 
-const navigationOptionsAndroid = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
-  headerTitle: () => <Text.H1>{t("PERIODICITY_MODAL_SCREEN_TITLE")}</Text.H1>,
-  headerRight: () => null,
-});
-
-const navigationOptionsIOS = ({ navigation }): StackNavigationOptions => ({
-  headerStyle: {
-    ...ComponentsStyle.header,
-    borderBottomWidth: 0,
-  },
-  headerTitle: () => <Text.H1>{t("PERIODICITY_MODAL_SCREEN_TITLE")}</Text.H1>,
+const navigationOptions = ({ navigation }): NativeStackNavigationOptions => ({
+  title: t("PERIODICITY_MODAL_SCREEN_TITLE"),
+  headerBackVisible: false,
   headerLeft: () => null,
+  headerTransparent: platform.isIOS,
+  headerBlurEffect: platform.isIOS26OrLater() ? undefined : "regular",
   headerRight: () => (
-    <TouchableOpacity style={iconStyle} onPress={() => navigate(navigation).goBack()}>
+    <TouchableOpacity onPress={() => navigate(navigation).goBack()}>
       <Ionicons name="close" size={32} color={Colors.grey100} />
     </TouchableOpacity>
   ),
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
+  headerTintColor: Colors.grey100,
 });
 
-const navigationOptions = platform.isAndroid ? navigationOptionsAndroid : navigationOptionsIOS;
-
 export default navigationOptions;
diff --git a/app/screens/RecurringEmissions/RecurringEmissionsScreen.navigationOptions.tsx b/app/screens/RecurringEmissions/RecurringEmissionsScreen.navigationOptions.tsx
index 56aa80ce..27767e70 100644
--- a/app/screens/RecurringEmissions/RecurringEmissionsScreen.navigationOptions.tsx
+++ b/app/screens/RecurringEmissions/RecurringEmissionsScreen.navigationOptions.tsx
@@ -1,22 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Layout, Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("RECURRING_EMISSIONS_SCREEN_TITLE"),
   headerTintColor: Colors.grey100,
   headerBackButtonDisplayMode: "minimal",
-  headerTitle: () => (
-    <Text.Header style={Layout.androidNavTitle}>
-      {t("RECURRING_EMISSIONS_SCREEN_TITLE")}
-    </Text.Header>
-  ),
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/Settings/SettingsScreen.navigationOptions.tsx b/app/screens/Settings/SettingsScreen.navigationOptions.tsx
index b80c18a9..afe36b52 100644
--- a/app/screens/Settings/SettingsScreen.navigationOptions.tsx
+++ b/app/screens/Settings/SettingsScreen.navigationOptions.tsx
@@ -1,16 +1,23 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
 
-import { Text } from "components";
-import { t } from "utils";
-import { Layout, ComponentsStyle } from "style";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  headerStyle: {
-    ...ComponentsStyle.header,
+import { platform, t } from "utils";
+import { Colors, Font } from "style";
+
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("SETTINGS_SCREEN_TITLE"),
+  headerLargeTitleEnabled: true,
+  headerTransparent: platform.isIOS,
+  headerBlurEffect: platform.isIOS26OrLater() ? undefined : "regular",
+  headerBackButtonDisplayMode: "minimal",
+  headerTintColor: Colors.grey100,
+  headerLargeTitleStyle: {
+    fontFamily: Font.FontWeight.Black,
+  },
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
   },
-  headerBackTitle: null,
-  headerTitle: () => <Text.H1 style={Layout.androidNavTitle}>{t("SETTINGS_SCREEN_TITLE")}</Text.H1>,
 });
 
 export default navigationOptions;
diff --git a/app/screens/SubCategorySelection/SubCategorySelectionScreen.navigationOptions.tsx b/app/screens/SubCategorySelection/SubCategorySelectionScreen.navigationOptions.tsx
index e12e4215..3932a96a 100644
--- a/app/screens/SubCategorySelection/SubCategorySelectionScreen.navigationOptions.tsx
+++ b/app/screens/SubCategorySelection/SubCategorySelectionScreen.navigationOptions.tsx
@@ -1,18 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("SUB_CATEGORY_SELECTION_SCREEN_TITLE"),
   headerBackButtonDisplayMode: "minimal",
   headerTintColor: Colors.grey100,
-  headerTitle: () => <Text.Header>{t("SUB_CATEGORY_SELECTION_SCREEN_TITLE")}</Text.Header>,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/screens/SupportUs/SupportUsScreen.navigationOptions.tsx b/app/screens/SupportUs/SupportUsScreen.navigationOptions.tsx
index 094877fd..029ff145 100644
--- a/app/screens/SupportUs/SupportUsScreen.navigationOptions.tsx
+++ b/app/screens/SupportUs/SupportUsScreen.navigationOptions.tsx
@@ -1,20 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Layout, Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("SUPPORT_US_SCREEN_TITLE"),
   headerTintColor: Colors.grey100,
   headerBackButtonDisplayMode: "minimal",
-  headerTitle: () => (
-    <Text.Header style={Layout.androidNavTitle}>{t("SUPPORT_US_SCREEN_TITLE")}</Text.Header>
-  ),
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;
diff --git a/app/utils/platform/platform.ts b/app/utils/platform/platform.ts
index 5e3596c4..8d735ef6 100644
--- a/app/utils/platform/platform.ts
+++ b/app/utils/platform/platform.ts
@@ -3,4 +3,15 @@ import { Platform } from "react-native";
 const isIOS = Platform.OS === "ios";
 const isAndroid = Platform.OS === "android";
 
-export default { isIOS, isAndroid };
+function getIOSVersion(): number {
+    if (isIOS) {
+        return parseInt(String(Platform.Version), 10);
+    }
+    return 0;
+}
+
+function isIOS26OrLater(): boolean {
+    return getIOSVersion() >= 26;
+}
+
+export default { isIOS, isAndroid, getIOSVersion, isIOS26OrLater };
diff --git a/package.json b/package.json
index fbe35dab..e0e0269b 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@react-navigation/bottom-tabs": "^7.8.12",
     "@react-navigation/material-top-tabs": "^7.4.10",
     "@react-navigation/native": "^7.1.25",
+    "@react-navigation/native-stack": "^7.2.0",
     "@react-navigation/stack": "^7.6.12",
     "@reduxjs/toolkit": "1.8.6",
     "@sentry/react-native": "~7.2.0",
@@ -125,4 +126,4 @@
   },
   "name": "nmf-app",
   "version": "1.0.0"
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 25e12ffe..bcfbdbd3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1778,6 +1778,15 @@
     use-latest-callback "^0.2.4"
     use-sync-external-store "^1.5.0"
 
+"@react-navigation/elements@^2.9.3":
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-2.9.3.tgz#505ae38af347a0bc5326155318a3d9a54e2071e3"
+  integrity sha512-3+eyvWiVPIEf6tN9UdduhOEHcTuNe3R5WovgiVkfH9+jApHMTZDc2loePTpY/i2HDJhObhhChpJzO6BVjrpdYQ==
+  dependencies:
+    color "^4.2.3"
+    use-latest-callback "^0.2.4"
+    use-sync-external-store "^1.5.0"
+
 "@react-navigation/material-top-tabs@^7.4.10":
   version "7.4.10"
   resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-7.4.10.tgz#413bd97ff3861da19117dbad21988e65fa06020e"
@@ -1787,6 +1796,16 @@
     color "^4.2.3"
     react-native-tab-view "^4.2.1"
 
+"@react-navigation/native-stack@^7.2.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-7.9.0.tgz#4fcd08a403ff86c465a908f3b49f86ab3f66d06a"
+  integrity sha512-C/mNPhI0Pnerl7C2cB+6fAkdgSmfKECMERrbyfjx3P6JmEuTC54o+GV1c62FUmlRaRUassVHbtw4EeaY2uLh0g==
+  dependencies:
+    "@react-navigation/elements" "^2.9.3"
+    color "^4.2.3"
+    sf-symbols-typescript "^2.1.0"
+    warn-once "^0.1.1"
+
 "@react-navigation/native@^7.1.25":
   version "7.1.25"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-7.1.25.tgz#48a267d5ab260d98edca63fab897d8fce244c665"
@@ -1799,9 +1818,9 @@
     use-latest-callback "^0.2.4"
 
 "@react-navigation/routers@^7.5.2":
-  version "7.5.2"
-  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-7.5.2.tgz#c885a66a76286f1c4c94261814ceddad628fbbea"
-  integrity sha512-kymreY5aeTz843E+iPAukrsOtc7nabAH6novtAPREmmGu77dQpfxPB2ZWpKb5nRErIRowp1kYRoN2Ckl+S6JYw==
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-7.5.3.tgz#8002930ef5f62351be2475d0dffde3ffaee174d7"
+  integrity sha512-1tJHg4KKRJuQ1/EvJxatrMef3NZXEPzwUIUZ3n1yJ2t7Q97siwRtbynRpQG9/69ebbtiZ8W3ScOZF/OmhvM4Rg==
   dependencies:
     nanoid "^3.3.11"
 
@@ -8680,7 +8699,7 @@ walker@^1.0.7, walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-warn-once@0.1.1, warn-once@^0.1.0:
+warn-once@0.1.1, warn-once@^0.1.0, warn-once@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
   integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==