diff --git a/SpashScreen/Splash.tsx b/SpashScreen/Splash.tsx
new file mode 100644
index 00000000..596a3109
--- /dev/null
+++ b/SpashScreen/Splash.tsx
@@ -0,0 +1,56 @@
+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>
+         
+            
+            </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
diff --git a/app/(app)/HomeScreen.tsx b/app/(app)/HomeScreen.tsx
index bc05ccd2..3776b9b8 100644
--- a/app/(app)/HomeScreen.tsx
+++ b/app/(app)/HomeScreen.tsx
@@ -1,5 +1,62 @@
-interface Props {}
+import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
+import Typography from "@/constants/Typography";
+import Colors from "@/constants/Colors";
 
-export default function HomeScreen({}: Props) {
-  return <></>;
+
+export default function HomeScreen(){
+    return (
+        <>
+        <View style={styles.container}>
+            
+              <View style={styles.image}>
+              <Image source={require('../../assets/images/Group.png')} style={styles.imagex}/>
+              </View>
+
+<View>
+<Text style={styles.text}>Welcome to Medica! 👋</Text>
+<Text style={styles.description}>The best online doctor appointment & consultation app of the century for your health and medical needs!</Text>
+</View>
+    
+
+            </View>
+   
+        </>
+    )
 }
+
+const styles = StyleSheet.create({
+    container:{
+flex:1,
+justifyContent:'center',
+alignItems:'center',
+backgroundColor:'#ffff',
+paddingTop:50,
+paddingBottom:70
+    },
+
+    text:{
+        fontSize:40,
+        textAlign:'center',
+        paddingLeft:30,
+paddingRight:30,
+color:'#236bfd',
+fontFamily:'Bold',
+    },
+    description:{
+textAlign:'center',
+lineHeight:25,
+paddingBottom:30,
+paddingTop:20,
+fontFamily:'Regular',
+color:Colors.light.text,
+fontSize:17
+    },
+    image:{
+        // width: '100%',
+        objectFit:'cover',
+      height:'70%' 
+    },
+    imagex:{
+      height:'100%'
+    }
+})
diff --git a/app/(auth)/CreateNewPassword.tsx b/app/(auth)/CreateNewPassword.tsx
new file mode 100644
index 00000000..0a2dac08
--- /dev/null
+++ b/app/(auth)/CreateNewPassword.tsx
@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+import { Image, StyleSheet, Text, TextInput, View, TouchableOpacity, ScrollView, Alert } from 'react-native';
+import { FontAwesome } from '@expo/vector-icons'; // Import FontAwesome icons
+import Colors from '@/constants/Colors';
+
+export default function CreateNewPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [rememberMe, setRememberMe] = useState(false);
+
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const toggleShowConfirmPassword = () => {
+    setShowConfirmPassword(!showConfirmPassword);
+  };
+
+  const handleCreatePassword = () => {
+    if (password !== confirmPassword) {
+      Alert.alert('Error', 'Passwords do not match.');
+      return;
+    }
+
+    // Your password creation logic here
+
+    if (rememberMe) {
+      // Save user's preference to remember password
+    }
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.scrollViewContent}>
+      <View style={styles.container}>
+        <View style={styles.image}>
+          <Image source={require('../../assets/images/create.png')} />
+        </View>
+
+        <Text style={styles.description}>Create new password</Text>
+
+        <View style={styles.inputText}>
+          <View style={styles.inputContainer}>
+            <FontAwesome name={'lock'} size={24} color="black" style={styles.togglelock} />
+            <TextInput
+              style={styles.input}
+              placeholder="Password"
+              secureTextEntry={!showPassword}
+              value={password}
+              onChangeText={setPassword}
+            />
+            <TouchableOpacity onPress={toggleShowPassword} style={styles.toggleButton}>
+              <FontAwesome name={showPassword ? 'eye-slash' : 'eye'} size={24} color="black" />
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.inputContainer}>
+            <FontAwesome name={'lock'} size={24} color="black" style={styles.togglelock} />
+            <TextInput
+              style={styles.input}
+              placeholder="Confirm Password"
+              secureTextEntry={!showConfirmPassword}
+              value={confirmPassword}
+              onChangeText={setConfirmPassword}
+            />
+            <TouchableOpacity onPress={toggleShowConfirmPassword} style={styles.toggleButton}>
+              <FontAwesome name={showConfirmPassword ? 'eye-slash' : 'eye'} size={24} color="black" />
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.checkboxContainer}>
+            <TouchableOpacity onPress={() => setRememberMe(!rememberMe)} style={styles.checkbox}>
+              {rememberMe && <FontAwesome name="check-square" size={24} color="#236bfd" />}
+              {!rememberMe && <FontAwesome name="square-o" size={24} color="#236bfd" />}
+              <Text style={styles.checkboxLabel}>Remember Me</Text>
+            </TouchableOpacity>
+          </View>
+
+          <TouchableOpacity onPress={handleCreatePassword} style={styles.createButton}>
+            <Text style={styles.createButtonText}>Continue</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollViewContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+    paddingBottom: 70,
+  },
+  description: {
+    paddingLeft: 25,
+    paddingTop: 20,
+    fontFamily: 'Regular',
+    color: Colors.light.text,
+    fontSize: 17,
+  },
+  image: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  input: {
+    flex: 1,
+    borderRadius: 15,
+    borderWidth: 0,
+    backgroundColor: '#EEEEEE',
+    padding: 12,
+    paddingLeft: 40, 
+  },
+  toggleButton: {
+    position: 'absolute',
+    right: 10,
+    padding: 10,
+  },
+  togglelock: {
+    position: 'absolute',
+    left: 10, 
+    zIndex: 1, 
+    padding: 10,
+  },
+  checkboxContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 20,
+  },
+  checkbox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkboxLabel: {
+    marginLeft: 10,
+    fontSize: 16,
+  },
+  createButton: {
+    backgroundColor: '#236bfd',
+    paddingVertical: 15,
+    paddingHorizontal: 30,
+    borderRadius: 50,
+    width: '100%',
+    alignSelf: 'center',
+  },
+  createButtonText: {
+    color: 'white',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  inputText: {
+    padding: 20,
+  },
+});
diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index e259d043..275a76d0 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -13,5 +13,6 @@ export default function AuthLayout() {
         }}
       />
     </Stack>
+    
   );
 }
diff --git a/app/Onboading/OnboardingScreen.tsx b/app/Onboading/OnboardingScreen.tsx
new file mode 100644
index 00000000..df64dcab
--- /dev/null
+++ b/app/Onboading/OnboardingScreen.tsx
@@ -0,0 +1,61 @@
+import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
+import Typography from "@/constants/Typography";
+import Colors from "@/constants/Colors";
+
+
+export default function OnboardingScreen(){
+    return (
+        <>
+        <View style={styles.container}>
+            <Text>OnboardingScreen</Text>
+        </View>
+        </>
+    )
+}
+
+const styles = StyleSheet.create({
+    container:{
+flex:1,
+justifyContent:'center',
+alignItems:'center',
+backgroundColor:'#ffff',
+// paddingTop:80
+    },
+    splash:{
+        flex:1,
+      
+        justifyContent:'center',
+        alignItems:'center',
+backgroundColor:'white',
+gap:20,
+width:'100%',
+resizeMode:'cover',
+
+
+    },
+    text:{
+        fontSize:40,
+        textAlign:'center',
+        paddingLeft:30,
+paddingRight:30,
+color:'#236bfd',
+fontFamily:'Bold',
+    },
+    textx:{
+textAlign:'center',
+lineHeight:25,
+paddingBottom:30,
+paddingTop:20,
+fontFamily:'Regular',
+color:Colors.light.text,
+fontSize:17
+    },
+    image:{
+        // width: '100%',
+        objectFit:'cover',
+      height:'70%' 
+    },
+    imagex:{
+      height:'100%'
+    }
+})
diff --git a/app/_layout.tsx b/app/_layout.tsx
index c9f2bd5d..ae6f559d 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -12,16 +12,15 @@ import { ThemeType } from "@/constants/Types";
 import { Text } from "@/components/Themed";
 
 export {
-  // Catch any errors thrown by the Layout component.
+
   ErrorBoundary,
 } from "expo-router";
 
 export const unstable_settings = {
-  // Ensure that reloading on `/modal` keeps a back button present.
+
   initialRouteName: "(auth)",
 };
 
-// Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
@@ -84,6 +83,7 @@ function RootLayoutNav() {
     <>
       <Stack initialRouteName="(auth)">
         <Stack.Screen name="(auth)" options={{ headerShown: false }} />
+        <Stack.Screen name="index" options={{ headerShown: false }} />
         <Stack.Screen name="modal" options={{ presentation: "modal" }} />
       </Stack>
     </>
diff --git a/app/index.tsx b/app/index.tsx
index 7143950c..cade8ec1 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,17 +1,45 @@
-import { Text } from "@/components/Themed";
-import { router } from "expo-router";
-import { useEffect } from "react";
+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';
+
+export default function App() {
+  const [showSplash, setShowSplash] = useState(true);
+  const [showHome, setShowHome] = useState(false);
+  const [showOnboarding, setShowOnboarding] = useState(false);
+
+  useEffect(() => {
+   
+    const splashTimeout = setTimeout(() => {
+      setShowSplash(false);
+      setShowHome(true);
+    }, 3000);
+
+
+    return () => clearTimeout(splashTimeout);
+  }, []);
 
-export default function Index() {
   useEffect(() => {
-    setTimeout(() => {
-      router.push("/(auth)/SignIn&SignOut/SetYourFingerPrint");
-    }, 2000);
-  });
+    if (showHome) {
+ 
+      const homeTimeout = setTimeout(() => {
+        setShowHome(false);
+        setShowOnboarding(true);
+      }, 5000); 
+
+      
+      return () => clearTimeout(homeTimeout);
+    }
+  }, [showHome]);
 
   return (
     <>
-      <Text>Onboarding Screen</Text>
+      {showSplash && <SplashScreen />}
+      {showHome && <HomeScreen />}
+      {showOnboarding && <CreateNewPassword />} 
     </>
   );
 }
diff --git a/app/spinner/Loading.tsx b/app/spinner/Loading.tsx
new file mode 100644
index 00000000..86d96ce3
--- /dev/null
+++ b/app/spinner/Loading.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet, View} from 'react-native';
+// import { ActivityIndicator,MD2Colors } from 'react-native-paper';
+
+import {
+  BallIndicator,
+  BarIndicator,
+  DotIndicator,
+  MaterialIndicator,
+  PacmanIndicator,
+  PulseIndicator,
+  SkypeIndicator,
+  UIActivityIndicator,
+  WaveIndicator,
+} from 'react-native-indicators';
+
+const Loading = () => (
+  <View style={[styles.container, styles.horizontal]}>
+
+<BallIndicator animating={true} color={'#236bfd'}/>
+    
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  horizontal: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 10,
+  },
+  spiner:{
+fontSize:30
+  }
+});
+
+export default Loading;
\ No newline at end of file
diff --git a/assets/icons/Exclude.png b/assets/icons/Exclude.png
new file mode 100644
index 00000000..28ed612f
Binary files /dev/null and b/assets/icons/Exclude.png differ
diff --git a/assets/images/Group.png b/assets/images/Group.png
new file mode 100644
index 00000000..99fb8a3a
Binary files /dev/null and b/assets/images/Group.png differ
diff --git a/assets/images/create.png b/assets/images/create.png
new file mode 100644
index 00000000..46bba8b6
Binary files /dev/null and b/assets/images/create.png differ
diff --git a/assets/images/icon.png b/assets/images/icon.png
index a0b1526f..3497038b 100644
Binary files a/assets/images/icon.png and b/assets/images/icon.png differ
diff --git a/package-lock.json b/package-lock.json
index 3b5e8e95..c2c245ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,8 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.73.6",
+        "react-native-elements": "^3.4.3",
+        "react-native-indicators": "^0.17.0",
         "react-native-safe-area-context": "4.8.2",
         "react-native-screens": "~3.29.0",
         "react-native-svg": "^15.2.0",
@@ -32,13 +34,15 @@
         "@babel/core": "^7.20.0",
         "@eslint/js": "^9.1.1",
         "@types/react": "~18.2.45",
+        "@types/react-native-indicators": "^0.16.6",
         "eslint": "^8.57.0",
         "eslint-plugin-react": "^7.34.1",
         "globals": "^15.1.0",
         "jest": "^29.2.1",
         "jest-expo": "~50.0.4",
         "react-test-renderer": "18.2.0",
-        "typescript": "^5.1.3"
+        "typescript": "^5.1.3",
+        "typescript-eslint": "^7.8.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -7393,19 +7397,44 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/react": {
       "version": "18.2.79",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
       "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-native": {
+      "version": "0.70.19",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz",
+      "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-native-indicators": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@types/react-native-indicators/-/react-native-indicators-0.16.6.tgz",
+      "integrity": "sha512-m3H8cCX67zk7alEEdKdv+kYPzOHSCOiU+Brw04sXFBflw9R2HUM7IJnsM6lu96Lm7b8wyyW016ZsmzIHoQO3iQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/@types/react-native-vector-icons": {
+      "version": "6.4.18",
+      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz",
+      "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==",
+      "dependencies": {
+        "@types/react": "*",
+        "@types/react-native": "^0.70"
+      }
+    },
     "node_modules/@types/semver": {
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
@@ -9672,8 +9701,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/dag-map": {
       "version": "1.0.2",
@@ -11985,6 +12013,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -15539,6 +15575,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "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",
@@ -16920,6 +16961,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
+      "bin": {
+        "opencollective-postinstall": "index.js"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -17762,6 +17811,35 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-elements": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-3.4.3.tgz",
+      "integrity": "sha512-VtZc25EecPZyUBER85zFK9ZbY6kkUdcm1ZwJ9hdoGSCr1R/GFgxor4jngOcSYeMvQ+qimd5No44OVJW3rSJECA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@types/react-native-vector-icons": "^6.4.6",
+        "color": "^3.1.2",
+        "deepmerge": "^4.2.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "lodash.isequal": "^4.5.0",
+        "opencollective-postinstall": "^2.0.3",
+        "react-native-ratings": "8.0.4",
+        "react-native-size-matters": "^0.3.1"
+      },
+      "peerDependencies": {
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-vector-icons": ">7.0.0"
+      }
+    },
+    "node_modules/react-native-elements/node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/react-native-helmet-async": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-native-helmet-async/-/react-native-helmet-async-2.0.4.tgz",
@@ -17775,6 +17853,30 @@
         "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-native-indicators": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-native-indicators/-/react-native-indicators-0.17.0.tgz",
+      "integrity": "sha512-s23em477GHGxWeGczWrixScAZD6tQU4mx1fttlrwhEGKOxhBgp55Kh3RoD9Wj4yna4e5W35xQNoPqoJAT6QW5A==",
+      "dependencies": {
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-ratings": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.0.4.tgz",
+      "integrity": "sha512-Xczu5lskIIRD6BEdz9A0jDRpEck/SFxRqiglkXi0u67yAtI1/pcJC76P4MukCbT8K4BPVl+42w83YqXBoBRl7A==",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      },
+      "peerDependencies": {
+        "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",
@@ -17797,6 +17899,14 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-size-matters": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz",
+      "integrity": "sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw==",
+      "peerDependencies": {
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-svg": {
       "version": "15.2.0",
       "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.2.0.tgz",
@@ -17810,6 +17920,60 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-vector-icons": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.1.0.tgz",
+      "integrity": "sha512-fdQjCHIdoXmRoTZ5gvN1FmT4sGLQ2wmQiNZHKJQUYnE2tkIwjGnxNch+6Nd4lHAACvMWO7LOzBNot2u/zlOmkw==",
+      "peer": true,
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa-upgrade.sh": "bin/fa-upgrade.sh",
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "fa6-upgrade": "bin/fa6-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "peer": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.11",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.11.tgz",
diff --git a/package.json b/package.json
index 9ef05d07..5d8674e6 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "test": "jest",
     "test:watch": "jest --watchAll",
     "test:update": "jest --updateSnapshot",
-     "ci-start": "expo build:web"
+    "ci-start": "expo build:web"
   },
   "jest": {
     "preset": "jest-expo"
@@ -20,8 +20,10 @@
     "@react-navigation/native": "^6.0.2",
     "expo": "~50.0.14",
     "expo-font": "~11.10.3",
+    "expo-linear-gradient": "~12.7.2",
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.10",
+    "expo-secure-store": "~12.8.1",
     "expo-splash-screen": "~0.26.5",
     "expo-status-bar": "~1.11.1",
     "expo-system-ui": "~2.9.3",
@@ -29,17 +31,18 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.6",
+    "react-native-elements": "^3.4.3",
+    "react-native-indicators": "^0.17.0",
     "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",
-    "expo-linear-gradient": "~12.7.2",
-    "expo-secure-store": "~12.8.1"
+    "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@eslint/js": "^9.1.1",
     "@types/react": "~18.2.45",
+    "@types/react-native-indicators": "^0.16.6",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",
     "globals": "^15.1.0",