diff --git a/README.md b/README.md
index a2df142d..08a73039 100644
--- a/README.md
+++ b/README.md
@@ -4,14 +4,22 @@ Online Doctor Appointment & Consultation App
 
 ## Table Of Content
 
- - [Description](#description)
-  
- - [Documentation](#documentation)
- - [Setup](#setup)
- - [Testing](#testing)
- - [Contribute](#contribute)
- - [Contact](#contact)
- - [License](#license)
+- [Medica App](#medica-app)
+  - [Table Of Content](#table-of-content)
+  - [Description](#description)
+  - [Overview;](#overview)
+  - [Overview;](#overview-1)
+  - [Documentation](#documentation)
+    - [Endpoints](#endpoints)
+  - [Setup](#setup)
+    - [Dependencies](#dependencies)
+    - [Getting Started](#getting-started)
+    - [Run The Service](#run-the-service)
+  - [Testing](#testing)
+  - [Contribute](#contribute)
+  - [Contact](#contact)
+  - [Contact](#contact-1)
+  - [License](#license)
   
 
 ## Description
@@ -21,6 +29,9 @@ Medica is a mobile application designed to facilitate online doctor appointments
 ## Overview;
 None at the moment!!
 
+## Overview;
+None at the moment!!
+
 ## Documentation
 
 ### Endpoints
@@ -58,7 +69,7 @@ git clone https://github.com/atlp-rwanda/matadors-rn-medica.git
 ```bash
 npm install 
 ```
-5. Set up environment variables:
+1. Set up environment variables:
 - Create a `.env` file based on `.env.example` and fill in necessary values.
 
 ### Run The Service
@@ -67,6 +78,16 @@ npm install
 ```bash
 npm start
 ```
+1. Use the Expo client on your mobile device or simulator to run the app.
+
+## Testing
+
+To run tests, use the following command:
+```bash
+npm test
+```
+npm start
+```
 2. Use the Expo client on your mobile device or simulator to run the app.
 
 ## Testing
@@ -84,14 +105,23 @@ Contributions are welcome! To contribute to this repository, please follow these
 4. Push to the branch (`git push origin feature/my-feature`).
 5. Create a new Pull Request.
 
+## Contact
+
+Feel free to reach out to us:
+[Nkbtemmy](https://github.com/Nkbtemmy)
+[mukunzidd](https://github.com/mukunzidd)
 
-  ## Contact
+## Contact
 
-  Feel free to reach out to us:
-  [Nkbtemmy](https://github.com/Nkbtemmy)
-  [mukunzidd](https://github.com/mukunzidd)
+Feel free to reach out to me on my email:
+example@gmail.com  
+[GitHub](https://github.com/Nkbtemmy)
+[GitHub](https://github.com/mukunzidd)
+Feel free to reach out to us:
+[Nkbtemmy](https://github.com/Nkbtemmy)
+[mukunzidd](https://github.com/mukunzidd)
 
-  ## License
+## License
 
   None At the moment !!
 #  Test coverage
diff --git a/SpashScreen/Splash.tsx b/SpashScreen/Splash.tsx
index 596a3109..a5f666cf 100644
--- a/SpashScreen/Splash.tsx
+++ b/SpashScreen/Splash.tsx
@@ -1,56 +1,50 @@
 import Loading from "@/app/spinner/Loading";
 import { Image, StyleSheet, Text, View } from "react-native";
 
-
-
-export default function SplashScreen(){
-    return (
-        <>
-        <View style={styles.container}>
-            <View style={styles.splash}>
-                <View>
-                <View>
-                <Image source={require('../assets/images/icon.png')}/>
-                </View>
-                </View>
-                
-       <View>
-       <Text style={styles.text}>Medica</Text>
-       </View>
-    <View style={styles.spin}>
-    <Loading/>
-    </View>
-         
-            
+export default function SplashScreen() {
+  return (
+    <>
+      <View style={styles.container}>
+        <View style={styles.splash}>
+          <View>
+            <View>
+              <Image source={require("../assets/images/icon.png")} />
             </View>
-          
+          </View>
+
+          <View>
+            <Text style={styles.text}>Medica</Text>
+          </View>
+          <View style={styles.spin}>
+            <Loading />
+          </View>
         </View>
-        </>
-    )
+      </View>
+    </>
+  );
 }
 
 const styles = StyleSheet.create({
-    container:{
-flex:1,
-justifyContent:'center',
-alignItems:'center',
-backgroundColor:'#ffff'
-    },
-    splash:{
-        flex:1,
-        flexDirection:'row',
-        justifyContent:'center',
-        alignItems:'center',
-        backgroundColor:'white',
-        gap:20,
-        width:'100%'
-    },
-    text:{
-        fontSize:30
-    },
-    spin:{
-        position:'absolute',
-        bottom: 50
-
-    }
-})
\ No newline at end of file
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#ffff",
+  },
+  splash: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "white",
+    gap: 20,
+    width: "100%",
+  },
+  text: {
+    fontSize: 30,
+  },
+  spin: {
+    position: "absolute",
+    bottom: 50,
+  },
+});
diff --git a/app.json b/app.json
index 2837dc35..2a248f42 100644
--- a/app.json
+++ b/app.json
@@ -16,8 +16,8 @@
     ],
     "ios": {
       "supportsTablet": true,
-      "config": {
-        "usesNonExemptEncryption": false
+      "infoPlist": {
+        "NSFaceIDUsageDescription": "This app uses Face ID and Touch ID for some features"
       },
       "bundleIdentifier": "medical.app"
     },
@@ -35,7 +35,12 @@
     },
     "plugins": [
       "expo-router",
-      "expo-secure-store"
+      [
+        "expo-local-authentication",
+        {
+          "faceIDPermission": "Allow $(PRODUCT_NAME) to use Face ID."
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true
diff --git a/app/(app)/HomeScreen.tsx b/app/(app)/HomeScreen.tsx
index 20b19115..3776b9b8 100644
--- a/app/(app)/HomeScreen.tsx
+++ b/app/(app)/HomeScreen.tsx
@@ -3,7 +3,6 @@ import Typography from "@/constants/Typography";
 import Colors from "@/constants/Colors";
 
 
-
 export default function HomeScreen(){
     return (
         <>
diff --git a/app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx b/app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx
index c25df595..e0918607 100644
--- a/app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx
+++ b/app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx
@@ -1,15 +1,228 @@
+import ModalScreen from "@/app/modal";
 import { Text, View } from "@/components/Themed";
-import { LeftArrow } from "@/components/UI/icons";
-import { ThemeContext } from "@/ctx/ThemeContext";
-import { useContext, useEffect } from "react";
 import { SvgUri, SvgXml } from "react-native-svg";
 
+import Button from "@/components/UI/Button";
+import { Colors } from "@/constants/Colors";
+import Typography from "@/constants/Typography";
+import { Image, ScrollView } from "react-native";
+import { ThemeContext } from "@/ctx/ThemeContext";
+import React, { useContext, useEffect } from "react";
+import * as LocalAuthentication from "expo-local-authentication";
+import ModalContainer from "@/components/UI/Modal";
+import { useModal } from "@/ctx/ModalContext";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { LoadingIcon } from "@/components/UI/Icons";
+
 export default function SetYourFingerPrint() {
   const { theme, changeTheme } = useContext(ThemeContext);
+  const modal = useModal();
+
+  const rotationValue = useSharedValue(0);
+
+  useEffect(() => {
+    rotationValue.value = withRepeat(withTiming(1, { duration: 2000 }), -1);
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotationValue.value * 360}deg` }],
+  }));
 
   return (
     <>
-      <Text>Set Your Finger Print</Text>
+      <ScrollView
+        contentContainerStyle={{
+          paddingHorizontal: 20,
+          height: "100%",
+          backgroundColor:
+            theme === "light" ? Colors.others.white : Colors.others.black,
+        }}
+      >
+        <View
+          style={{
+            height: "100%",
+            justifyContent: "space-between",
+            paddingVertical: 20,
+            backgroundColor:
+              theme === "light" ? Colors.others.white : Colors.others.black,
+          }}
+        >
+          <Text
+            style={[
+              Typography.regular.xLarge,
+              {
+                textAlign: "center",
+                color:
+                  theme === "light"
+                    ? Colors.grayScale._900
+                    : Colors.others.white,
+              },
+            ]}
+          >
+            Add a fingerprint to make your account more secure.
+          </Text>
+
+          <Image source={require("@/assets/images/fingerprint.png")} />
+
+          <View
+            style={{
+              gap: 60,
+              backgroundColor:
+                theme === "light" ? Colors.others.white : Colors.others.black,
+            }}
+          >
+            <Text
+              style={[
+                Typography.regular.xLarge,
+                { textAlign: "center" },
+                {
+                  shadowColor: "red",
+                  shadowOffset: { width: -2, height: 20 },
+                  shadowOpacity: 1,
+                  shadowRadius: 20,
+                  color:
+                    theme === "light"
+                      ? Colors.grayScale._900
+                      : Colors.others.white,
+                },
+              ]}
+            >
+              Please put your finger on the fingerprint scanner to get started.
+            </Text>
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "center",
+                alignItems: "center",
+                width: "100%",
+                gap: 4,
+                backgroundColor:
+                  theme === "light" ? Colors.others.white : Colors.others.black,
+              }}
+            >
+              <View
+                style={{
+                  flexGrow: 1,
+                  backgroundColor:
+                    theme === "light"
+                      ? Colors.others.white
+                      : Colors.others.black,
+                }}
+              >
+                <Button
+                  backgroundColor={Colors.main.primary._100}
+                  title="Skip"
+                  textColor={{ color: Colors.main.primary._500 }}
+                  onPress={() => {}}
+                />
+              </View>
+              <View
+                style={[
+                  { flexGrow: 1 },
+                  {
+                    shadowColor: "red",
+                    shadowOffset: { width: 6, height: 6 },
+                    shadowOpacity: 1,
+                    shadowRadius: 20,
+                    backgroundColor:
+                      theme === "light"
+                        ? Colors.others.white
+                        : Colors.others.black,
+                  },
+                ]}
+              >
+                <Button
+                  backgroundColor={Colors.main.primary._500}
+                  title="Continue"
+                  shadowColor={Colors.main.primary._500}
+                  onPress={async () => {
+                    try {
+                      const { success } =
+                        await LocalAuthentication.authenticateAsync();
+
+                      if (success) {
+                        modal.show({
+                          children: (
+                            <View
+                              style={{
+                                padding: 40,
+                                alignItems: "center",
+                                gap: 20,
+                                borderRadius: 48,
+                                backgroundColor:
+                                  theme === "light"
+                                    ? Colors.others.white
+                                    : Colors.grayScale._900,
+                              }}
+                            >
+                              <Image
+                                source={require("@/assets/images/SetYourFingerPrintModalAccountImage.png")}
+                              />
+                              <View
+                                style={{
+                                  gap: 20,
+                                  backgroundColor:
+                                    theme === "light"
+                                      ? Colors.others.white
+                                      : Colors.grayScale._900,
+                                }}
+                              >
+                                <Text
+                                  style={[
+                                    Typography.heading._4,
+                                    {
+                                      color: Colors.main.primary._500,
+                                      textAlign: "center",
+                                    },
+                                  ]}
+                                >
+                                  Congratulations!
+                                </Text>
+                                <Text
+                                  style={[
+                                    Typography.regular.large,
+                                    {
+                                      textAlign: "center",
+                                      color:
+                                        theme === "light"
+                                          ? Colors.grayScale._900
+                                          : Colors.others.white,
+                                    },
+                                  ]}
+                                >
+                                  Your account is ready to use. You will be
+                                  redirected to the Home page in a few seconds..
+                                </Text>
+                              </View>
+                              <Animated.View style={[animatedStyle]}>
+                                <LoadingIcon
+                                  fillColor={Colors.main.primary._500}
+                                />
+                              </Animated.View>
+                            </View>
+                          ),
+                        });
+
+                        setTimeout(() => {
+                          modal.hide();
+                        }, 4000);
+                      }
+                    } catch (err) {
+                      console.log(err);
+                      throw err;
+                    }
+                  }}
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </ScrollView>
     </>
   );
 }
diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index 275a76d0..272de0e2 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -1,18 +1,20 @@
 import Header from "@/components/UI/Header";
+import Modal from "@/components/UI/Modal";
 import { Stack } from "expo-router";
 
 export default function AuthLayout() {
   return (
-    <Stack initialRouteName="SignIn&SignOut/SetYourFingerPrint">
-      <Stack.Screen
-        name="SignIn&SignOut/SetYourFingerPrint"
-        options={{
-          header: () => {
-            return <Header />;
-          },
-        }}
-      />
-    </Stack>
-    
+    <>
+      <Stack initialRouteName="SignIn&SignOut/SetYourFingerPrint">
+        <Stack.Screen
+          name="SignIn&SignOut/SetYourFingerPrint"
+          options={{
+            header: () => {
+              return <Header title="Set Your Fingerprint" />;
+            },
+          }}
+        />
+      </Stack>
+    </>
   );
 }
diff --git a/app/+html.tsx b/app/+html.tsx
index cb31090e..d4ee3235 100644
--- a/app/+html.tsx
+++ b/app/+html.tsx
@@ -1,4 +1,4 @@
-import { ScrollViewStyleReset } from 'expo-router/html';
+import { ScrollViewStyleReset } from "expo-router/html";
 
 // This file is web-only and used to configure the root HTML for every
 // web page during static rendering.
@@ -10,7 +10,10 @@ export default function Root({ children }: { children: React.ReactNode }) {
       <head>
         <meta charSet="utf-8" />
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
 
         {/* 
           Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. 
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 6e95168e..bb4bae56 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -6,25 +6,18 @@ import * as SecureStore from "expo-secure-store";
 
 import { useContext, useEffect, useState } from "react";
 
+import * as NavigationBar from "expo-navigation-bar";
+import { ZoomOutUp } from "react-native-reanimated";
 import ThemeProvider, { ThemeContext } from "@/ctx/ThemeContext";
 import { Pressable, View, useColorScheme } from "react-native";
 import { ThemeType } from "@/constants/Types";
 import { Text } from "@/components/Themed";
-import {
-  DarkTheme,
-  DefaultTheme,
-} from "@react-navigation/native";
+import ModalProvider from "@/ctx/ModalContext";
+import ModalContainer from "@/components/UI/Modal";
 
-
-
-export {
-
-
-  ErrorBoundary,
-} from "expo-router";
+export { ErrorBoundary } from "expo-router";
 
 export const unstable_settings = {
-
   initialRouteName: "(auth)",
 };
 
@@ -69,7 +62,22 @@ export default function RootLayout() {
   }, [error]);
 
   useEffect(() => {
-    if (loaded && favoredTheme) {
+    async function handleNavigationButtons() {
+      await NavigationBar.setPositionAsync("absolute");
+      await NavigationBar.setBackgroundColorAsync("#ffffff00");
+      await NavigationBar.setBehaviorAsync("inset-swipe");
+      await NavigationBar.setVisibilityAsync("hidden");
+
+      NavigationBar.addVisibilityListener(({ visibility }) => {
+        if (visibility === "visible") {
+          setTimeout(async () => {
+            await NavigationBar.setVisibilityAsync("hidden");
+          }, 2000);
+        }
+      });
+    }
+    if (loaded) {
+      handleNavigationButtons();
       SplashScreen.hideAsync();
     }
   }, [loaded, favoredTheme]);
@@ -80,7 +88,9 @@ export default function RootLayout() {
 
   return (
     <ThemeProvider theme={favoredTheme}>
-      <RootLayoutNav />
+      <ModalProvider>
+        <RootLayoutNav />
+      </ModalProvider>
     </ThemeProvider>
   );
 }
@@ -93,8 +103,8 @@ function RootLayoutNav() {
         <Stack.Screen name="index" options={{ headerShown: false }} />
         <Stack.Screen name="modal" options={{ presentation: "modal" }} />
         <Stack.Screen name="index" options={{ headerShown: false }} />
-        <Stack.Screen name="onBoarding" options={{ headerShown: false }} />
       </Stack>
+      <ModalContainer />
     </>
   );
 }
diff --git a/app/index.tsx b/app/index.tsx
index 29bc972e..d47c1f7b 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,10 +1,11 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
-import HomeScreen from './(app)/HomeScreen';
-import SplashScreen from '@/SpashScreen/Splash';
-import { useEffect, useState } from 'react';
-import OnboardingScreen from './Onboading/OnboardingScreen';
-import CreateNewPassword from './(auth)/CreateNewPassword';
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
+import HomeScreen from "./(app)/HomeScreen";
+import SplashScreen from "@/SpashScreen/Splash";
+import { useEffect, useState } from "react";
+import OnboardingScreen from "./Onboading/OnboardingScreen";
+import CreateNewPassword from "./(auth)/CreateNewPassword";
+import { router } from "expo-router";
 
 export default function App() {
   const [showSplash, setShowSplash] = useState(true);
@@ -12,34 +13,36 @@ export default function App() {
   const [showOnboarding, setShowOnboarding] = useState(false);
 
   useEffect(() => {
-   
     const splashTimeout = setTimeout(() => {
       setShowSplash(false);
       setShowHome(true);
     }, 3000);
 
-
     return () => clearTimeout(splashTimeout);
   }, []);
 
   useEffect(() => {
     if (showHome) {
- 
       const homeTimeout = setTimeout(() => {
         setShowHome(false);
         setShowOnboarding(true);
-      }, 5000); 
+      }, 5000);
 
-      
       return () => clearTimeout(homeTimeout);
     }
   }, [showHome]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      router.push("/(auth)/SignIn&SignOut/SetYourFingerPrint");
+    }, 2000);
+  }, []);
+
   return (
     <>
       {showSplash && <SplashScreen />}
       {showHome && <HomeScreen />}
-      {showOnboarding && <CreateNewPassword />} 
+      {showOnboarding && <CreateNewPassword />}
     </>
   );
 
diff --git a/app/spinner/Loading.tsx b/app/spinner/Loading.tsx
index 86d96ce3..53dab385 100644
--- a/app/spinner/Loading.tsx
+++ b/app/spinner/Loading.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { StyleSheet, View} from 'react-native';
+import React from "react";
+import { StyleSheet, View } from "react-native";
 // import { ActivityIndicator,MD2Colors } from 'react-native-paper';
 
 import {
@@ -12,29 +12,27 @@ import {
   SkypeIndicator,
   UIActivityIndicator,
   WaveIndicator,
-} from 'react-native-indicators';
+} from "react-native-indicators";
 
 const Loading = () => (
   <View style={[styles.container, styles.horizontal]}>
-
-<BallIndicator animating={true} color={'#236bfd'}/>
-    
+    <BallIndicator animating={true} color={"#236bfd"} />
   </View>
 );
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   horizontal: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
+    flexDirection: "row",
+    justifyContent: "space-around",
     padding: 10,
   },
-  spiner:{
-fontSize:30
-  }
+  spiner: {
+    fontSize: 30,
+  },
 });
 
-export default Loading;
\ No newline at end of file
+export default Loading;
diff --git a/assets/images/OnBoardingImages/firstDarkImg.png b/assets/images/OnBoardingImages/firstDarkImg.png
new file mode 100644
index 00000000..f0884465
Binary files /dev/null and b/assets/images/OnBoardingImages/firstDarkImg.png differ
diff --git a/assets/images/OnBoardingImages/firstLightImg.png b/assets/images/OnBoardingImages/firstLightImg.png
new file mode 100644
index 00000000..9a9c8961
Binary files /dev/null and b/assets/images/OnBoardingImages/firstLightImg.png differ
diff --git a/assets/images/OnBoardingImages/secondDarkImg.png b/assets/images/OnBoardingImages/secondDarkImg.png
new file mode 100644
index 00000000..e7e54177
Binary files /dev/null and b/assets/images/OnBoardingImages/secondDarkImg.png differ
diff --git a/assets/images/OnBoardingImages/secondLightImg.png b/assets/images/OnBoardingImages/secondLightImg.png
new file mode 100644
index 00000000..89129527
Binary files /dev/null and b/assets/images/OnBoardingImages/secondLightImg.png differ
diff --git a/assets/images/OnBoardingImages/thirdDarkImg.png b/assets/images/OnBoardingImages/thirdDarkImg.png
new file mode 100644
index 00000000..4b8c81fa
Binary files /dev/null and b/assets/images/OnBoardingImages/thirdDarkImg.png differ
diff --git a/assets/images/OnBoardingImages/thirdLightImg.png b/assets/images/OnBoardingImages/thirdLightImg.png
new file mode 100644
index 00000000..d28f1112
Binary files /dev/null and b/assets/images/OnBoardingImages/thirdLightImg.png differ
diff --git a/assets/images/SetYourFingerPrintModalAccountImage.png b/assets/images/SetYourFingerPrintModalAccountImage.png
new file mode 100644
index 00000000..02ce131c
Binary files /dev/null and b/assets/images/SetYourFingerPrintModalAccountImage.png differ
diff --git a/assets/images/fingerprint.png b/assets/images/fingerprint.png
new file mode 100644
index 00000000..9da1de9f
Binary files /dev/null and b/assets/images/fingerprint.png differ
diff --git a/babel.config.js b/babel.config.js
index 33acf985..08b7fe9e 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,6 +1,8 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo']
+    presets: ['babel-preset-expo'],
+    plugins: [
+      'react-native-reanimated/plugin']
   };
 };
diff --git a/components/UI/Button.tsx b/components/UI/Button.tsx
new file mode 100644
index 00000000..fffef83b
--- /dev/null
+++ b/components/UI/Button.tsx
@@ -0,0 +1,61 @@
+import { Colors } from "@/constants/Colors";
+import {
+  Pressable,
+  StyleProp,
+  StyleSheetProperties,
+  TextStyle,
+  ViewStyle,
+} from "react-native";
+import { Text } from "../Themed";
+import Typography from "@/constants/Typography";
+
+interface Props {
+  backgroundColor: string;
+  title: string;
+  style?: StyleProp<ViewStyle>;
+  textColor?: StyleProp<TextStyle>;
+  onPress: () => void;
+  shadowColor?: string;
+}
+
+export default function Button({
+  backgroundColor,
+  title,
+  style,
+  textColor,
+  shadowColor,
+  onPress,
+}: Props) {
+  return (
+    <Pressable
+      style={[
+        {
+          backgroundColor: backgroundColor,
+          borderRadius: 100,
+          width: "100%",
+          shadowColor: shadowColor ? shadowColor : "none",
+          elevation: shadowColor ? 8 : 0,
+        },
+        style,
+      ]}
+      onPress={() => {
+        onPress();
+      }}
+    >
+      <Text
+        style={[
+          Typography.bold.large,
+          {
+            textAlign: "center",
+            color: Colors.others.white,
+            paddingHorizontal: 16,
+            paddingVertical: 18,
+          },
+          textColor,
+        ]}
+      >
+        {title}
+      </Text>
+    </Pressable>
+  );
+}
diff --git a/components/UI/Header.tsx b/components/UI/Header.tsx
index bedff34a..6713cffa 100644
--- a/components/UI/Header.tsx
+++ b/components/UI/Header.tsx
@@ -1,5 +1,53 @@
-import { View } from "../Themed";
+import { StatusBar } from "expo-status-bar";
+// import { Text, View } from "react-native";
+import { Text, View } from "../Themed";
+import { Colors } from "@/constants/Colors";
+import { LeftArrow } from "./Icons";
+import { Pressable, useColorScheme } from "react-native";
+import Typography from "@/constants/Typography";
+import { useContext } from "react";
+import { ThemeContext } from "@/ctx/ThemeContext";
 
-export default function Header() {
-  return <View style={{}}></View>;
+interface Props {
+  title: string;
 }
+
+export default function Header({ title }: Props) {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <>
+      <StatusBar style={theme === "light" ? "dark" : "light"} />
+      <View
+        style={{
+          paddingVertical: 40,
+          paddingHorizontal: 20,
+          gap: 10,
+          flexDirection: "row",
+          alignItems: "center",
+          backgroundColor:
+            theme === "light" ? Colors.others.white : Colors.others.black,
+        }}
+      >
+        <Pressable>
+          <LeftArrow
+            fillColor={
+              theme === "light" ? Colors.grayScale._900 : Colors.others.white
+            }
+          />
+        </Pressable>
+        <Text
+          style={[
+            Typography.heading._4,
+            {
+              color:
+                theme === "light" ? Colors.grayScale._900 : Colors.others.white,
+            },
+          ]}
+        >
+          {title}
+        </Text>
+      </View>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/components/UI/Modal.tsx b/components/UI/Modal.tsx
new file mode 100644
index 00000000..876e5d8d
--- /dev/null
+++ b/components/UI/Modal.tsx
@@ -0,0 +1,105 @@
+import { Image, useColorScheme } from "react-native";
+import { Text, View } from "../Themed";
+import { Svg } from "react-native-svg";
+import { Colors } from "@/constants/Colors";
+import Typography from "@/constants/Typography";
+import React, { useContext, useEffect, useState } from "react";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { AnimatedView } from "react-native-reanimated/lib/typescript/reanimated2/component/View";
+import { ThemeContext } from "@/ctx/ThemeContext";
+import { useModal } from "@/ctx/ModalContext";
+import { LoadingIcon } from "./Icons";
+
+export default function ModalContainer() {
+  const { visible, content } = useModal();
+  const [modalVisible, setModalVisible] = useState(false);
+  const { theme, changeTheme } = useContext(ThemeContext);
+
+  const slideDownValue = useSharedValue(400);
+  const fadeInValue = useSharedValue(0);
+
+  const duration = 2000;
+  const easing = Easing.bezier(0.25, -0.5, 0.25, 1);
+
+  React.useEffect(() => {
+    if (visible) {
+      rotationValue.value = withRepeat(withTiming(1, { duration }), -1);
+      slideDownValue.value = withTiming(0, { duration: 250 });
+      fadeInValue.value = withTiming(1, { duration: 250 });
+      setModalVisible(true);
+    } else {
+      rotationValue.value = withRepeat(withTiming(0, { duration }), -1);
+      slideDownValue.value = withTiming(400, { duration: 250 });
+      fadeInValue.value = withTiming(0, { duration: 250 });
+      setTimeout(() => {
+        setModalVisible(false);
+      }, 3000);
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    rotationValue.value = withRepeat(withTiming(1, { duration: 2000 }), -1);
+  }, []);
+
+  const rotationValue = useSharedValue(0);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotationValue.value * 360}deg` }],
+  }));
+
+  const ModalStyle = useAnimatedStyle(() => ({
+    marginBottom: slideDownValue.value,
+    opacity: fadeInValue.value,
+  }));
+
+  const backdropFadeIn = useAnimatedStyle(() => ({
+    opacity: fadeInValue.value,
+  }));
+
+  return (
+    <>
+      {modalVisible && (
+        <Animated.View
+          style={[
+            {
+              position: "absolute",
+              backgroundColor: "rgba(9, 16, 29, 0.5)",
+              top: 0,
+              left: 0,
+              height: "100%",
+              width: "100%",
+              zIndex: 1,
+              justifyContent: "center",
+              alignItems: "center",
+              paddingHorizontal: 20,
+            },
+            backdropFadeIn,
+          ]}
+        >
+          <Animated.View
+            style={[
+              {
+                backgroundColor:
+                  theme === "light"
+                    ? Colors.others.white
+                    : Colors.grayScale._900,
+                zIndex: 10,
+                opacity: 1,
+                borderRadius: 48,
+              },
+              ModalStyle,
+            ]}
+          >
+            {content.children}
+          </Animated.View>
+        </Animated.View>
+      )}
+    </>
+  );
+}
diff --git a/components/UI/icons.tsx b/components/UI/icons.tsx
index ac3f1cb0..5d71d62b 100644
--- a/components/UI/icons.tsx
+++ b/components/UI/icons.tsx
@@ -1,4 +1,13 @@
-import { Path, Svg } from "react-native-svg";
+import {
+  ClipPath,
+  Defs,
+  G,
+  LinearGradient,
+  Path,
+  Rect,
+  Stop,
+  Svg,
+} from "react-native-svg";
 
 export function LeftArrow({ fillColor }: { fillColor: string }) {
   return (
@@ -14,3 +23,34 @@ export function LeftArrow({ fillColor }: { fillColor: string }) {
     </Svg>
   );
 }
+
+export function LoadingIcon({ fillColor }: { fillColor: string }) {
+  return (
+    <Svg width="60" height="60" viewBox="0 0 60 60" fill="none">
+      <G clip-path="url(#clip0_5811_9579)">
+        <Path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M33 48C34.5913 48 36.1174 48.6321 37.2426 49.7574C38.3679 50.8826 39 52.4087 39 54C39 55.5913 38.3679 57.1174 37.2426 58.2426C36.1174 59.3679 34.5913 60 33 60C31.4087 60 29.8826 59.3679 28.7574 58.2426C27.6321 57.1174 27 55.5913 27 54C27 52.4087 27.6321 50.8826 28.7574 49.7574C29.8826 48.6321 31.4087 48 33 48ZM14.223 39C16.2121 39 18.1198 39.7902 19.5263 41.1967C20.9328 42.6032 21.723 44.5109 21.723 46.5C21.723 48.4891 20.9328 50.3968 19.5263 51.8033C18.1198 53.2098 16.2121 54 14.223 54C12.2339 54 10.3262 53.2098 8.9197 51.8033C7.51318 50.3968 6.723 48.4891 6.723 46.5C6.723 44.5109 7.51318 42.6032 8.9197 41.1967C10.3262 39.7902 12.2339 39 14.223 39V39ZM48.957 40.5C50.5483 40.5 52.0744 41.1321 53.1996 42.2574C54.3249 43.3826 54.957 44.9087 54.957 46.5C54.957 48.0913 54.3249 49.6174 53.1996 50.7426C52.0744 51.8679 50.5483 52.5 48.957 52.5C47.3657 52.5 45.8396 51.8679 44.7144 50.7426C43.5891 49.6174 42.957 48.0913 42.957 46.5C42.957 44.9087 43.5891 43.3826 44.7144 42.2574C45.8396 41.1321 47.3657 40.5 48.957 40.5V40.5ZM55.5 27.957C56.6935 27.957 57.8381 28.4311 58.682 29.275C59.5259 30.1189 60 31.2635 60 32.457C60 33.6505 59.5259 34.7951 58.682 35.639C57.8381 36.4829 56.6935 36.957 55.5 36.957C54.3065 36.957 53.1619 36.4829 52.318 35.639C51.4741 34.7951 51 33.6505 51 32.457C51 31.2635 51.4741 30.1189 52.318 29.275C53.1619 28.4311 54.3065 27.957 55.5 27.957ZM7.5 18C9.48912 18 11.3968 18.7902 12.8033 20.1967C14.2098 21.6032 15 23.5109 15 25.5C15 27.4891 14.2098 29.3968 12.8033 30.8033C11.3968 32.2098 9.48912 33 7.5 33C5.51088 33 3.60322 32.2098 2.1967 30.8033C0.790176 29.3968 0 27.4891 0 25.5C0 23.5109 0.790176 21.6032 2.1967 20.1967C3.60322 18.7902 5.51088 18 7.5 18V18ZM53.358 15.621C54.1536 15.621 54.9167 15.9371 55.4793 16.4997C56.0419 17.0623 56.358 17.8253 56.358 18.621C56.358 19.4166 56.0419 20.1797 55.4793 20.7423C54.9167 21.3049 54.1536 21.621 53.358 21.621C52.5623 21.621 51.7993 21.3049 51.2367 20.7423C50.6741 20.1797 50.358 19.4166 50.358 18.621C50.358 17.8253 50.6741 17.0623 51.2367 16.4997C51.7993 15.9371 52.5623 15.621 53.358 15.621ZM24 0C26.3869 0 28.6761 0.948211 30.364 2.63604C32.0518 4.32387 33 6.61305 33 9C33 11.3869 32.0518 13.6761 30.364 15.364C28.6761 17.0518 26.3869 18 24 18C21.6131 18 19.3239 17.0518 17.636 15.364C15.9482 13.6761 15 11.3869 15 9C15 6.61305 15.9482 4.32387 17.636 2.63604C19.3239 0.948211 21.6131 0 24 0V0ZM46.5 9C46.8978 9 47.2794 9.15804 47.5607 9.43934C47.842 9.72064 48 10.1022 48 10.5C48 10.8978 47.842 11.2794 47.5607 11.5607C47.2794 11.842 46.8978 12 46.5 12C46.1022 12 45.7206 11.842 45.4393 11.5607C45.158 11.2794 45 10.8978 45 10.5C45 10.1022 45.158 9.72064 45.4393 9.43934C45.7206 9.15804 46.1022 9 46.5 9V9Z"
+          fill={fillColor}
+        />
+      </G>
+      <Defs>
+        <LinearGradient
+          id="paint0_linear_5811_9579"
+          x1="60"
+          y1="60"
+          x2="-11.3946"
+          y2="39.2998"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stop-color="#246BFD" />
+          <Stop offset="1" stop-color="#5089FF" />
+        </LinearGradient>
+        <ClipPath id="clip0_5811_9579">
+          <Rect width="60" height="60" fill="white" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+}
diff --git a/constants/Types.ts b/constants/Types.ts
index b1d4baea..1ce9efe0 100644
--- a/constants/Types.ts
+++ b/constants/Types.ts
@@ -1 +1,10 @@
-export type ThemeType = "light" | "dark" | null
+import React from "react";
+
+export type ThemeType = "light" | "dark" | null;
+
+export interface ModalType {
+  visible: boolean;
+  show: ({ children }: { children: React.JSX.Element }) => void;
+  hide: () => void;
+  content: { children: React.JSX.Element | React.JSX.Element[] | null };
+}
diff --git a/ctx/ModalContext.tsx b/ctx/ModalContext.tsx
new file mode 100644
index 00000000..405a9882
--- /dev/null
+++ b/ctx/ModalContext.tsx
@@ -0,0 +1,51 @@
+import { View } from "@/components/Themed";
+import { ModalType } from "@/constants/Types";
+import React, { createContext, useContext, useState } from "react";
+import { Text } from "react-native";
+
+const ModalContext = createContext<ModalType>({
+  visible: false,
+  show: ({ children }) => {},
+  hide: () => {},
+  content: { children: null },
+});
+
+interface Props {
+  children: React.JSX.Element | React.JSX.Element[];
+}
+
+export default function ModalProvider({ children }: Props) {
+  const [visible, setVisible] = useState(false);
+  const [content, setContent] = useState<{
+    children: React.JSX.Element | React.JSX.Element[] | null;
+  }>({ children: null });
+
+  async function show({
+    children,
+  }: {
+    children: React.JSX.Element | React.JSX.Element[];
+  }) {
+    if (children !== null) {
+      setContent({ children });
+      setVisible(true);
+    }
+  }
+
+  async function hide() {
+    setVisible(false);
+    setContent({ children: null });
+  }
+
+  const value = {
+    visible,
+    show,
+    hide,
+    content,
+  };
+
+  return (
+    <ModalContext.Provider value={value}>{children}</ModalContext.Provider>
+  );
+}
+
+export const useModal = () => useContext(ModalContext);
diff --git a/package-lock.json b/package-lock.json
index 2607f5df..aa83f31f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,8 @@
         "expo-font": "~11.10.3",
         "expo-linear-gradient": "~12.7.2",
         "expo-linking": "~6.2.2",
+        "expo-local-authentication": "~13.8.0",
+        "expo-navigation-bar": "^2.8.1",
         "expo-router": "~3.4.10",
         "expo-secure-store": "~12.8.1",
         "expo-splash-screen": "~0.26.5",
@@ -28,10 +30,12 @@
         "react-native": "0.73.6",
         "react-native-elements": "^3.4.3",
         "react-native-indicators": "^0.17.0",
+        "react-native-reanimated": "~3.6.2",
         "react-native-safe-area-context": "4.8.2",
         "react-native-screens": "~3.29.0",
-        "react-native-svg": "^14.1.0",
-        "react-native-web": "~0.19.6"
+        "react-native-svg": "14.1.0",
+        "react-native-web": "~0.19.6",
+        "vector-icons": "^0.1.0"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
@@ -56,6 +60,8 @@
         "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"
       },
       "peerDependenciesMeta": {
+        "typescript": "^5.1.3",
+        "typescript-eslint": "^7.8.0",
         "graphql": {
           "optional": true
         }
@@ -73,6 +79,133 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@angular/animations": {
+      "version": "13.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.2.7.tgz",
+      "integrity": "sha512-FthGqRPQ1AOcOx/NIW65xeFYkQZJ7PpXcX59Kt+qkoUzngAQEY+UUpOteG52tmL0iZSVwOCjtxRFi9w4heVgEg==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.15.0 || >=16.10.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "13.2.7"
+      }
+    },
+    "node_modules/@angular/common": {
+      "version": "13.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-13.2.7.tgz",
+      "integrity": "sha512-gSkv9aMz5q2ynIqSwgp5HEVVwlmpMYGVZFNZnEnezGY96Hza0eXlb/AYdqO7S3VQVvx+FXpvXP/eq/SsCw7rFA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.15.0 || >=16.10.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "13.2.7",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/compiler": {
+      "version": "13.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-13.2.7.tgz",
+      "integrity": "sha512-auRMo+k+xCQmIBkZ5UgkAAmhbpcoOUWQrJN2PQnPl88DPquui3tXC4R6RANpWCu59oT8m29FQMviHcN3ZTFl6Q==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.15.0 || >=16.10.0"
+      }
+    },
+    "node_modules/@angular/core": {
+      "version": "13.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-13.2.7.tgz",
+      "integrity": "sha512-6J6C2ymIy+cZudock25BLEZFckhqFfXOSZw5YBIoAJuntV4hckLNfRTn/dxn5qmWF/Vw60NKdhV367YYejz6Gg==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.15.0 || >=16.10.0"
+      },
+      "peerDependencies": {
+        "rxjs": "^6.5.3 || ^7.4.0",
+        "zone.js": "~0.11.4"
+      }
+    },
+    "node_modules/@angular/forms": {
+      "version": "13.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-13.2.7.tgz",
+      "integrity": "sha512-Did5ShmHTu52cljmNtMxUBUGEYHJ/FV5ZpKhbI7sd/VSFhXp9KWYUbfma0m7+CUJMGmpt6bmDaN0G2WS8Es1LQ==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.15.0 || >=16.10.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "13.2.7",
+        "@angular/core": "13.2.7",
+        "@angular/platform-browser": "13.2.7",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/platform-browser": {
+      "version": "13.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.2.7.tgz",
+      "integrity": "sha512-3rpeS2n+mfey9FqJg/NQKPiyHC47vgldWXmuz5FmOCHrOY54AaFfoiwQcdxzh6Lxx/CUVm0TlOS8S/xI9iEqXw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.15.0 || >=16.10.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "13.2.7",
+        "@angular/common": "13.2.7",
+        "@angular/core": "13.2.7"
+      },
+      "peerDependenciesMeta": {
+        "@angular/animations": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/platform-browser-dynamic": {
+      "version": "13.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-13.2.7.tgz",
+      "integrity": "sha512-3tKiUohQ8wl4hp1zYLKvMJ7GVYpg2K5dRrihtUKkJk8xUv3iuTUI0wbNCrUDZkrWc0GMhnQNXwE22gd+hKjfKg==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.15.0 || >=16.10.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "13.2.7",
+        "@angular/compiler": "13.2.7",
+        "@angular/core": "13.2.7",
+        "@angular/platform-browser": "13.2.7"
+      }
+    },
+    "node_modules/@angular/router": {
+      "version": "13.2.7",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-13.2.7.tgz",
+      "integrity": "sha512-VzEFKyUE8CR23IbmAjmcSFY6pa4NsjaaTqT4mDYhzFeYc7R0s58Ow9d4Fy+0sWX6rzys01rcVNCg+ifJAnwYZA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.15.0 || >=16.10.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "13.2.7",
+        "@angular/core": "13.2.7",
+        "@angular/platform-browser": "13.2.7",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
@@ -1456,6 +1589,20 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-object-assign": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.24.1.tgz",
+      "integrity": "sha512-I1kctor9iKtupb7jv7FyjApHCuKLBKCblVAeHVK9PB6FW7GI0ac6RtobC3MwwJy8CZ1JxuhQmnbrsqI5G8hAIg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.1.tgz",
@@ -13317,6 +13464,17 @@
         "invariant": "^2.2.4"
       }
     },
+    "node_modules/expo-local-authentication": {
+      "version": "13.8.0",
+      "resolved": "https://registry.npmjs.org/expo-local-authentication/-/expo-local-authentication-13.8.0.tgz",
+      "integrity": "sha512-h0YA7grVdo3834AS70EUCsalaXrrEnoq+yTvIhRTxiPmzWxUv7rNo5ff+XsIEYNElKPmT/wh/xPV1yo3l3fhGg==",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-manifests": {
       "version": "0.13.2",
       "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.13.2.tgz",
@@ -13450,6 +13608,18 @@
         "invariant": "^2.2.4"
       }
     },
+    "node_modules/expo-navigation-bar": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/expo-navigation-bar/-/expo-navigation-bar-2.8.1.tgz",
+      "integrity": "sha512-aT5G+7SUsXDVPsRwp8fF940ycka1ABb4g3QKvTZN3YP6kMWvsiYEmRqMIJVy0zUr/i6bxBG1ZergkXimWrFt3w==",
+      "dependencies": {
+        "@react-native/normalize-color": "^2.0.0",
+        "debug": "^4.3.2"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-router": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/expo-router/-/expo-router-3.4.10.tgz",
@@ -18333,6 +18503,11 @@
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -20690,6 +20865,27 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-reanimated": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.3.tgz",
+      "integrity": "sha512-2KkkPozoIvDbJcHuf8qeyoLROXQxizSi+2CTCkuNVkVZOxxY4B0Omvgq61aOQhSZUh/649x1YHoAaTyGMGDJUw==",
+      "dependencies": {
+        "@babel/plugin-transform-object-assign": "^7.16.7",
+        "@babel/preset-typescript": "^7.16.7",
+        "convert-source-map": "^2.0.0",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0-0",
+        "@babel/plugin-proposal-optional-chaining": "^7.0.0-0",
+        "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
+        "@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
+        "@babel/plugin-transform-template-literals": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.8.2",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.8.2.tgz",
@@ -21329,6 +21525,14 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz",
+      "integrity": "sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safe-array-concat": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
@@ -23024,6 +23228,24 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vector-icons": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vector-icons/-/vector-icons-0.1.0.tgz",
+      "integrity": "sha512-Ng7y5hnYs+gN7vrMrE64tmxHOdUispHM2Hx3vm4WJo1G9M530C8J8Hcfh/UnXwPIsD181GIwzX2abq8ylMsmOQ==",
+      "dependencies": {
+        "@angular/animations": "~13.2.0",
+        "@angular/common": "~13.2.0",
+        "@angular/compiler": "~13.2.0",
+        "@angular/core": "~13.2.0",
+        "@angular/forms": "~13.2.0",
+        "@angular/platform-browser": "~13.2.0",
+        "@angular/platform-browser-dynamic": "~13.2.0",
+        "@angular/router": "~13.2.0",
+        "rxjs": "~7.5.0",
+        "tslib": "^2.3.0",
+        "zone.js": "~0.11.4"
+      }
+    },
     "node_modules/vlq": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
@@ -23506,6 +23728,14 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zone.js": {
+      "version": "0.11.8",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.11.8.tgz",
+      "integrity": "sha512-82bctBg2hKcEJ21humWIkXRlLBBmrc3nN7DFh5LGGhcyycO2S7FN8NmdvlcKaGFDNVL4/9kFLmwmInTavdJERA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 39de28e5..9ef076fc 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "expo-font": "~11.10.3",
     "expo-linear-gradient": "~12.7.2",
     "expo-linking": "~6.2.2",
+    "expo-local-authentication": "~13.8.0",
+    "expo-navigation-bar": "^2.8.1",
     "expo-router": "~3.4.10",
     "expo-secure-store": "~12.8.1",
     "expo-splash-screen": "~0.26.5",
@@ -37,10 +39,12 @@
     "react-native": "0.73.6",
     "react-native-elements": "^3.4.3",
     "react-native-indicators": "^0.17.0",
+    "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
-    "react-native-svg": "^15.2.0",
-    "react-native-web": "~0.19.6"
+    "react-native-svg": "14.1.0",
+    "react-native-web": "~0.19.6",
+    "vector-icons": "^0.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",