diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..b58b603
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/MoovieFinderTS.iml b/.idea/MoovieFinderTS.iml
new file mode 100644
index 0000000..0c8867d
--- /dev/null
+++ b/.idea/MoovieFinderTS.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..f15b873
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/MoovieFinderTS.iml" filepath="$PROJECT_DIR$/.idea/MoovieFinderTS.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/App.tsx b/App.tsx
index 20ed07d..9b54a76 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,9 +1,9 @@
 import { StatusBar } from 'expo-status-bar';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-
 import useCachedResources from './hooks/useCachedResources';
 import useColorScheme from './hooks/useColorScheme';
 import Navigation from './navigation';
+import {View} from "react-native";
 
 export default function App() {
   const isLoadingComplete = useCachedResources();
diff --git a/assets/images/Favorite.png b/assets/images/Favorite.png
new file mode 100644
index 0000000..2e363e5
Binary files /dev/null and b/assets/images/Favorite.png differ
diff --git a/assets/images/Generate.png b/assets/images/Generate.png
new file mode 100644
index 0000000..88c7a0f
Binary files /dev/null and b/assets/images/Generate.png differ
diff --git a/assets/images/WatchLater.png b/assets/images/WatchLater.png
new file mode 100644
index 0000000..a09fdae
Binary files /dev/null and b/assets/images/WatchLater.png differ
diff --git a/assets/images/delimiter.png b/assets/images/delimiter.png
new file mode 100644
index 0000000..4cc47aa
Binary files /dev/null and b/assets/images/delimiter.png differ
diff --git a/navigation/LinkingConfiguration.ts b/navigation/LinkingConfiguration.ts
index a6e616d..5965028 100644
--- a/navigation/LinkingConfiguration.ts
+++ b/navigation/LinkingConfiguration.ts
@@ -15,14 +15,19 @@ const linking: LinkingOptions<RootStackParamList> = {
     screens: {
       Root: {
         screens: {
-          TabOne: {
+          WatchLater: {
             screens: {
-              TabOneScreen: 'one',
+              WatchLaterScreen: 'WatchLater',
             },
           },
-          TabTwo: {
+          Home: {
             screens: {
-              TabTwoScreen: 'two',
+              HomeScreen: 'Home',
+            },
+          },
+          Favorite: {
+            screens: {
+              FavoriteScreen: 'Favorite',
             },
           },
         },
diff --git a/navigation/index.tsx b/navigation/index.tsx
index 21cea97..4bd5a6d 100644
--- a/navigation/index.tsx
+++ b/navigation/index.tsx
@@ -4,6 +4,9 @@
  *
  */
 import { FontAwesome } from '@expo/vector-icons';
+import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
+import { faClock, faFilm, faHeart} from "@fortawesome/free-solid-svg-icons";
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -12,10 +15,10 @@ import { ColorSchemeName, Pressable } from 'react-native';
 
 import Colors from '../constants/Colors';
 import useColorScheme from '../hooks/useColorScheme';
-import ModalScreen from '../screens/ModalScreen';
 import NotFoundScreen from '../screens/NotFoundScreen';
-import TabOneScreen from '../screens/TabOneScreen';
-import TabTwoScreen from '../screens/TabTwoScreen';
+import WatchLaterScreen from '../screens/WatchLaterScreen';
+import FavoriteScreen from '../screens/FavoriteScreen';
+import HomeScreen from '../screens/HomeScreen';
 import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
 import LinkingConfiguration from './LinkingConfiguration';
 
@@ -38,11 +41,11 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
 function RootNavigator() {
   return (
     <Stack.Navigator>
-      <Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false }} />
+        <Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false }} />
+        <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
       <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
-      <Stack.Group screenOptions={{ presentation: 'modal' }}>
-        <Stack.Screen name="Modal" component={ModalScreen} />
-      </Stack.Group>
+        <Stack.Screen name="Favorite" component={FavoriteScreen} options={{ headerShown: false }} />
+        <Stack.Screen name="WatchLater" component={WatchLaterScreen} options={{ headerShown: false }} />
     </Stack.Navigator>
   );
 }
@@ -58,38 +61,37 @@ function BottomTabNavigator() {
 
   return (
     <BottomTab.Navigator
-      initialRouteName="TabOne"
+      initialRouteName="WatchLater"
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme].tint,
+        tabBarActiveTintColor: "white",
+
       }}>
       <BottomTab.Screen
-        name="TabOne"
-        component={TabOneScreen}
-        options={({ navigation }: RootTabScreenProps<'TabOne'>) => ({
-          title: 'Tab One',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
-          headerRight: () => (
-            <Pressable
-              onPress={() => navigation.navigate('Modal')}
-              style={({ pressed }) => ({
-                opacity: pressed ? 0.5 : 1,
-              })}>
-              <FontAwesome
-                name="info-circle"
-                size={25}
-                color={Colors[colorScheme].text}
-                style={{ marginRight: 15 }}
-              />
-            </Pressable>
-          ),
+        name="WatchLater"
+
+        component={WatchLaterScreen}
+        options={({ navigation }: RootTabScreenProps<'WatchLater'>) => ({
+          tabBarIcon: ({ color, size}) => <TabBarIcon name={faClock} color={color} size={20}/>,
+            headerShown: false,
+
         })}
       />
+        <BottomTab.Screen
+            name="Home"
+            component={HomeScreen}
+
+            options={{
+                headerShown: false,
+                tabBarIcon: ({ color, size }) => <TabBarIcon name={faFilm} color={color} size={20}/>,
+            }}
+        />
       <BottomTab.Screen
-        name="TabTwo"
-        component={TabTwoScreen}
+        name="Favorite"
+        component={FavoriteScreen}
+
         options={{
-          title: 'Tab Two',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+            headerShown: false,
+          tabBarIcon: ({ color, size }) => <TabBarIcon name={faHeart} color={color} size={20} />,
         }}
       />
     </BottomTab.Navigator>
@@ -100,8 +102,9 @@ function BottomTabNavigator() {
  * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
  */
 function TabBarIcon(props: {
-  name: React.ComponentProps<typeof FontAwesome>['name'];
+  name: any;
   color: string;
+  size: number;
 }) {
-  return <FontAwesome size={30} style={{ marginBottom: -3 }} {...props} />;
+  return <FontAwesomeIcon icon={props.name} style={{marginBottom: -5}} size={props.size} color={props.color} />;
 }
diff --git a/package-lock.json b/package-lock.json
index 6d30d5b..ba86c83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,13 +9,20 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/vector-icons": "^13.0.0",
+        "@fortawesome/fontawesome-svg-core": "^6.2.1",
+        "@fortawesome/free-brands-svg-icons": "^6.2.1",
+        "@fortawesome/free-regular-svg-icons": "^6.2.1",
+        "@fortawesome/free-solid-svg-icons": "^6.2.1",
+        "@fortawesome/react-native-fontawesome": "^0.3.0",
         "@react-navigation/bottom-tabs": "^6.0.5",
         "@react-navigation/native": "^6.0.2",
         "@react-navigation/native-stack": "^6.1.0",
+        "@reacticons/ionicons": "^6.0.4",
         "expo": "~47.0.12",
         "expo-asset": "~8.7.0",
         "expo-constants": "~14.0.2",
         "expo-font": "~11.0.1",
+        "expo-linear-gradient": "~12.0.1",
         "expo-linking": "~3.3.0",
         "expo-splash-screen": "~0.17.5",
         "expo-status-bar": "~1.4.2",
@@ -24,9 +31,13 @@
         "react": "18.1.0",
         "react-dom": "18.1.0",
         "react-native": "0.70.5",
+        "react-native-ionicons": "^4.6.5",
+        "react-native-linear-gradient": "^2.6.2",
         "react-native-safe-area-context": "4.4.1",
         "react-native-screens": "~3.18.0",
-        "react-native-web": "~0.18.9"
+        "react-native-svg": "^13.7.0",
+        "react-native-web": "~0.18.9",
+        "rive-react-native": "^3.0.41"
       },
       "devDependencies": {
         "@babel/core": "^7.12.9",
@@ -3169,6 +3180,77 @@
         "node": ">=8"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
+      "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
+      "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.1.tgz",
+      "integrity": "sha512-L8l4MfdHPmZlJ72PvzdfwOwbwcCAL0vx48tJRnI6u1PJXh+j2f3yDoKyQgO3qjEsgD5Fr2tQV/cPP8F/k6aUig==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz",
+      "integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
+      "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-native-fontawesome": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-native-fontawesome/-/react-native-fontawesome-0.3.0.tgz",
+      "integrity": "sha512-wSfetdK4+b/pvPbM2v+bZ5hfNlwtk9l3QuJo59sbMrxJalfX7BuF2WsSIWMSxfWwSsbOtY4+TUs6uw/rE59NJA==",
+      "dependencies": {
+        "humps": "^2.0.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react-native": ">= 0.67",
+        "react-native-svg": ">= 11.x"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -5334,6 +5416,11 @@
         "nanoid": "^3.1.23"
       }
     },
+    "node_modules/@reacticons/ionicons": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@reacticons/ionicons/-/ionicons-6.0.4.tgz",
+      "integrity": "sha512-FN4/D6a/kS2dEMwVltAGCKiYArDESGW1fgsV2bgz2ZHFAlmBF7o2p7Ckr+clOHzIEg1odWm+gdc+DBtYc80ENQ=="
+    },
     "node_modules/@segment/loosely-validate-event": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz",
@@ -6315,6 +6402,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
     "node_modules/bplist-creator": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.0.tgz",
@@ -7262,6 +7354,44 @@
         "hyphenate-style-name": "^1.0.3"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -7522,6 +7652,30 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
     "node_modules/domexception": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
@@ -7543,6 +7697,33 @@
         "node": ">=8"
       }
     },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7586,6 +7767,17 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/env-editor": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/env-editor/-/env-editor-0.4.2.tgz",
@@ -8049,6 +8241,14 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-linear-gradient": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-12.0.1.tgz",
+      "integrity": "sha512-TMl/wBTVQOliL4S3DS5Aa3UFfVySr0mdJEHLG6kfBdMCLkr+tfLI2rGyJ+scS7xgMsvhTIaurhf1+Z0sL3aLCg==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-linking": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-3.3.0.tgz",
@@ -9065,6 +9265,11 @@
         "node": ">=8.12.0"
       }
     },
+    "node_modules/humps": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
+      "integrity": "sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g=="
+    },
     "node_modules/hyphenate-style-name": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
@@ -12296,6 +12501,11 @@
       "resolved": "https://registry.npmjs.org/md5hex/-/md5hex-1.0.0.tgz",
       "integrity": "sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ=="
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -13520,6 +13730,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -14285,6 +14506,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -14520,6 +14751,24 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",
       "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A=="
     },
+    "node_modules/react-native-ionicons": {
+      "version": "4.6.5",
+      "resolved": "https://registry.npmjs.org/react-native-ionicons/-/react-native-ionicons-4.6.5.tgz",
+      "integrity": "sha512-s2Ia7M5t609LE9LWygMj3ALVPUlKhK7R9XcMb67fP4EYJv0oLcwg5pc+8ftv9XXaUuTW/WgL3zJlBYxAvtvMJg==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-linear-gradient": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.6.2.tgz",
+      "integrity": "sha512-Z8Xxvupsex+9BBFoSYS87bilNPWcRfRsGC0cpJk72Nxb5p2nEkGSBv73xZbEHnW2mUFvP+huYxrVvjZkr/gRjQ==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz",
@@ -14542,6 +14791,19 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-svg": {
+      "version": "13.7.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.7.0.tgz",
+      "integrity": "sha512-WR5CIURvee5cAfvMhmdoeOjh1SC8KdLq5u5eFsz4pbYzCtIFClGSkLnNgkMSDMVV5LV0qQa4jeIk75ieIBzaDA==",
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.18.12",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz",
@@ -15124,6 +15386,15 @@
         "rimraf": "bin.js"
       }
     },
+    "node_modules/rive-react-native": {
+      "version": "3.0.41",
+      "resolved": "https://registry.npmjs.org/rive-react-native/-/rive-react-native-3.0.41.tgz",
+      "integrity": "sha512-N4BQuQwsPK98n8AITrMh/iG/AjCikKm6f1Wt+EMJa6hl987h68mM2z/4vul+CuigkMreiiIH6kUSOAMKMK98KA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@@ -19679,6 +19950,52 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
+      "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
+      "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.1.tgz",
+      "integrity": "sha512-L8l4MfdHPmZlJ72PvzdfwOwbwcCAL0vx48tJRnI6u1PJXh+j2f3yDoKyQgO3qjEsgD5Fr2tQV/cPP8F/k6aUig==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz",
+      "integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
+      "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      }
+    },
+    "@fortawesome/react-native-fontawesome": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-native-fontawesome/-/react-native-fontawesome-0.3.0.tgz",
+      "integrity": "sha512-wSfetdK4+b/pvPbM2v+bZ5hfNlwtk9l3QuJo59sbMrxJalfX7BuF2WsSIWMSxfWwSsbOtY4+TUs6uw/rE59NJA==",
+      "requires": {
+        "humps": "^2.0.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -21319,6 +21636,11 @@
         "nanoid": "^3.1.23"
       }
     },
+    "@reacticons/ionicons": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@reacticons/ionicons/-/ionicons-6.0.4.tgz",
+      "integrity": "sha512-FN4/D6a/kS2dEMwVltAGCKiYArDESGW1fgsV2bgz2ZHFAlmBF7o2p7Ckr+clOHzIEg1odWm+gdc+DBtYc80ENQ=="
+    },
     "@segment/loosely-validate-event": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz",
@@ -22126,6 +22448,11 @@
         }
       }
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
     "bplist-creator": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.0.tgz",
@@ -22858,6 +23185,32 @@
         "hyphenate-style-name": "^1.0.3"
       }
     },
+    "css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      }
+    },
+    "css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "requires": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
+    },
     "cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -23052,6 +23405,21 @@
         "path-type": "^4.0.0"
       }
     },
+    "dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "requires": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+    },
     "domexception": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
@@ -23069,6 +23437,24 @@
         }
       }
     },
+    "domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "requires": {
+        "domelementtype": "^2.3.0"
+      }
+    },
+    "domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "requires": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -23103,6 +23489,11 @@
         "once": "^1.4.0"
       }
     },
+    "entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA=="
+    },
     "env-editor": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/env-editor/-/env-editor-0.4.2.tgz",
@@ -23457,6 +23848,12 @@
       "integrity": "sha512-44ZjgLE4lnce2d40Pv8xsjMVc6R5GvgHOwZfkLYtGmgYG9TYrEJeEj5UfSeweXPL3pBFhXKfFU8xpGYMaHdP0A==",
       "requires": {}
     },
+    "expo-linear-gradient": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-12.0.1.tgz",
+      "integrity": "sha512-TMl/wBTVQOliL4S3DS5Aa3UFfVySr0mdJEHLG6kfBdMCLkr+tfLI2rGyJ+scS7xgMsvhTIaurhf1+Z0sL3aLCg==",
+      "requires": {}
+    },
     "expo-linking": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-3.3.0.tgz",
@@ -24243,6 +24640,11 @@
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
       "dev": true
     },
+    "humps": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
+      "integrity": "sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g=="
+    },
     "hyphenate-style-name": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
@@ -26675,6 +27077,11 @@
       "resolved": "https://registry.npmjs.org/md5hex/-/md5hex-1.0.0.tgz",
       "integrity": "sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ=="
     },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -27684,6 +28091,14 @@
         "path-key": "^2.0.0"
       }
     },
+    "nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
     "nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -28248,6 +28663,16 @@
         "sisteransi": "^1.0.5"
       }
     },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -28517,6 +28942,18 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",
       "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A=="
     },
+    "react-native-ionicons": {
+      "version": "4.6.5",
+      "resolved": "https://registry.npmjs.org/react-native-ionicons/-/react-native-ionicons-4.6.5.tgz",
+      "integrity": "sha512-s2Ia7M5t609LE9LWygMj3ALVPUlKhK7R9XcMb67fP4EYJv0oLcwg5pc+8ftv9XXaUuTW/WgL3zJlBYxAvtvMJg==",
+      "requires": {}
+    },
+    "react-native-linear-gradient": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.6.2.tgz",
+      "integrity": "sha512-Z8Xxvupsex+9BBFoSYS87bilNPWcRfRsGC0cpJk72Nxb5p2nEkGSBv73xZbEHnW2mUFvP+huYxrVvjZkr/gRjQ==",
+      "requires": {}
+    },
     "react-native-safe-area-context": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz",
@@ -28532,6 +28969,15 @@
         "warn-once": "^0.1.0"
       }
     },
+    "react-native-svg": {
+      "version": "13.7.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.7.0.tgz",
+      "integrity": "sha512-WR5CIURvee5cAfvMhmdoeOjh1SC8KdLq5u5eFsz4pbYzCtIFClGSkLnNgkMSDMVV5LV0qQa4jeIk75ieIBzaDA==",
+      "requires": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3"
+      }
+    },
     "react-native-web": {
       "version": "0.18.12",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz",
@@ -28893,6 +29339,12 @@
         "glob": "^7.1.3"
       }
     },
+    "rive-react-native": {
+      "version": "3.0.41",
+      "resolved": "https://registry.npmjs.org/rive-react-native/-/rive-react-native-3.0.41.tgz",
+      "integrity": "sha512-N4BQuQwsPK98n8AITrMh/iG/AjCikKm6f1Wt+EMJa6hl987h68mM2z/4vul+CuigkMreiiIH6kUSOAMKMK98KA==",
+      "requires": {}
+    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
diff --git a/package.json b/package.json
index e9be706..261a135 100644
--- a/package.json
+++ b/package.json
@@ -14,13 +14,20 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-native-fontawesome": "^0.3.0",
     "@react-navigation/bottom-tabs": "^6.0.5",
     "@react-navigation/native": "^6.0.2",
     "@react-navigation/native-stack": "^6.1.0",
+    "@reacticons/ionicons": "^6.0.4",
     "expo": "~47.0.12",
     "expo-asset": "~8.7.0",
     "expo-constants": "~14.0.2",
     "expo-font": "~11.0.1",
+    "expo-linear-gradient": "~12.0.1",
     "expo-linking": "~3.3.0",
     "expo-splash-screen": "~0.17.5",
     "expo-status-bar": "~1.4.2",
@@ -29,9 +36,13 @@
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
+    "react-native-ionicons": "^4.6.5",
+    "react-native-linear-gradient": "^2.6.2",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "~3.18.0",
-    "react-native-web": "~0.18.9"
+    "react-native-svg": "^13.7.0",
+    "react-native-web": "~0.18.9",
+    "rive-react-native": "^3.0.41"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
diff --git a/rating.riv b/rating.riv
new file mode 100644
index 0000000..56a6cd2
Binary files /dev/null and b/rating.riv differ
diff --git a/screens/FavoriteScreen.tsx b/screens/FavoriteScreen.tsx
new file mode 100644
index 0000000..c60ce8f
--- /dev/null
+++ b/screens/FavoriteScreen.tsx
@@ -0,0 +1,88 @@
+import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput} from 'react-native';
+import * as React from "react";
+import {BadgeFilm} from "./HomeScreen";
+import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
+import { faHeart} from "@fortawesome/free-solid-svg-icons";
+
+
+export default function FavoriteScreen({ navigation }: RootTabScreenProps<'Favorite'>) {
+    return (
+        <SafeAreaView style={styles.container}>
+            <View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20,  marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >
+                <FontAwesomeIcon icon={faHeart} style={{marginBottom: -5, marginRight: 20}} size={50} color="white" />
+                <Text style={{color: "white", fontSize:30}}>Favorite</Text>
+            </View>
+            <Image
+                source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode:"fit"}}
+            />
+            <View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
+                <TextInput style={{width:300, height:40, marginHorizontal:20}} ></TextInput>
+            </View>
+            <FlatList
+                data={[
+                    {key: 'Devin'},
+                    {key: 'Dan'},
+                    {key: 'Dominic'},
+                    {key: 'Jackson'},
+                    {key: 'James'},
+                    {key: 'Joel'},
+                    {key: 'John'},
+                    {key: 'Jillian'},
+                    {key: 'Jimmy'},
+                    {key: 'Julie'},
+                ]}
+                renderItem={({item}) => <ListWidget name={item.key} ></ListWidget>}
+            />
+        </SafeAreaView>
+    );
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingTop: 22,
+        backgroundColor: "#232323"
+    },
+    item: {
+        padding: 10,
+        fontSize: 18,
+        height: 44,
+        color: "white"
+    },
+    filmCard: {
+        width: 70,
+        height: 100,
+        borderRadius: 8,
+
+
+    },
+});
+
+type ListWidgetProps = {
+    name : String
+
+}
+
+export function ListWidget(props: ListWidgetProps) {
+    return (
+        <View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'row', paddingHorizontal:20, marginVertical:5}} >
+            <Image
+                style={styles.filmCard}
+                source={{
+                    uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
+                }}
+            />
+            <View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'column', paddingLeft:10}} >
+                <Text style={{color: "white", fontWeight:"bold", fontSize:25}}>{props.name}</Text>
+                <Text style={{color: "grey", fontWeight:"bold", fontSize:17}}>{props.name}</Text>
+                <View style={{marginVertical:10}}>
+                    <BadgeFilm name={"Science-Ficton"}/>
+                </View>
+            </View>
+        </View>
+
+
+    );
+
+
+}
+
diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx
new file mode 100644
index 0000000..669799f
--- /dev/null
+++ b/screens/HomeScreen.tsx
@@ -0,0 +1,172 @@
+import * as React from 'react';
+import {Button,TouchableOpacity,ScrollView,View, Text, StyleSheet, Image, ImageBackground, SafeAreaView} from 'react-native';
+import {RootStackScreenProps} from "../types.js";
+import Rive from 'rive-react-native';
+import {useRef} from "react";
+import {RiveViewManager} from "rive-react-native/lib/typescript/Rive.js";
+const styles = StyleSheet.create({
+    background: {
+        backgroundColor: 'black',
+        height: '100%',
+    },
+
+    container:{
+        flex: 1,
+    },
+    filmCard: {
+        width: 310,
+        height: 450,
+        justifyContent:'center',
+        marginLeft:'auto',
+        marginRight:'auto',
+        borderRadius: 15,
+
+
+    },
+    image: {
+        position: 'absolute',
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 6,
+        },
+        shadowOpacity: 0.39,
+        shadowRadius: 8.30,
+        flex: 1,
+        paddingTop: 230,
+        alignSelf: 'center',
+        elevation: 13,
+    },
+    backgroundImage: {
+        flex: 1,
+        resizeMode: 'cover', // or 'stretch'
+    },
+    child: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+
+});
+
+export default function App({ navigation }: RootStackScreenProps<'Home'>) {
+    const riveRef = useRef();
+    return (
+        <SafeAreaView style={styles.background}>
+
+            <ImageBackground blurRadius={20}
+                             style={{
+                                 position: 'absolute',
+                                 width: "120%",
+                                 height: "120%",
+                                 justifyContent: "center",
+                                 alignItems: "center",
+                                 opacity: 0.28
+                             }}
+                             source={{
+                                 uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
+                             }}
+            ></ImageBackground>
+            <View style={styles.image}>
+                <Image
+                    style={styles.filmCard}
+                    source={{
+                        uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
+                    }}
+                />
+            </View>
+            <View style={{height:35, marginTop: 10, marginBottom: 15}}>
+                <ScrollView
+                    horizontal={true}
+                    showsHorizontalScrollIndicator={false}>
+                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                    <BadgeGenre name={"cc"} isSelected={true}></BadgeGenre>
+                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+                    <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
+
+
+
+                </ScrollView>
+            </View>
+            <View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}>
+
+                <View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
+                    <BadgeFilm name={"Science-fiction"}></BadgeFilm>
+                    <BadgeFilm name={"Science-fiction"}></BadgeFilm>
+                    <BadgeFilm name={"9:11"}></BadgeFilm>
+                </View>
+                    <View>
+                        <Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>SPIDER-MAN No Way Home</Text>
+                    </View>
+                <Text style={{color: "grey", fontSize: 20, fontWeight: "bold"}}>Jean-Marc généreux</Text>
+            </View>
+            <View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: 130}}>
+            <TouchableOpacity>
+                <Image
+                    source={require('../assets/images/WatchLater.png')} style={{height: 70, width: 70, resizeMode:"fit"}}
+                />
+
+            </TouchableOpacity>
+            <TouchableOpacity>
+                <Image
+                    source={require('../assets/images/Generate.png')} style={{height: 90, width: 90, resizeMode:"fit"}}
+                />
+
+            </TouchableOpacity>
+            <TouchableOpacity>
+                <Image
+                    source={require('../assets/images/Favorite.png')} style={{height: 70, width: 70, resizeMode:"fit"}}
+                />
+
+            </TouchableOpacity>
+            </View>
+        </SafeAreaView>
+    );
+}
+
+type BadgeGenreProps = {
+    name : String
+    isSelected: Boolean
+
+}
+
+export function BadgeGenre(props: BadgeGenreProps) {
+    if(props.isSelected==false){
+        return (
+            <View style={{paddingHorizontal: 20,  marginHorizontal: 5,height: 35, backgroundColor: '#2E2E2E', borderRadius: 20, justifyContent: "center"}} >
+                <Text style={{color: "white"}}>{props.name}</Text>
+            </View>
+
+        );
+    }
+    else{
+        return (
+            <View style={{paddingHorizontal: 20,  marginHorizontal: 5,height: 35, backgroundColor: '#5C5C5C', borderRadius: 20, borderWidth: 1, borderColor: "white" ,justifyContent: "center"}} >
+                <Text style={{color: "white"}}>{props.name}</Text>
+            </View>
+
+        );
+    }
+
+
+}
+
+type BadgeFilmProps = {
+    name : String
+
+}
+export function BadgeFilm(props: BadgeFilmProps) {
+
+        return (
+            <View style={{paddingHorizontal: 15,  marginHorizontal: 5,height: 30, backgroundColor: '#8906B8', borderRadius: 15, justifyContent: "center"}} >
+                <Text style={{color: "white", fontSize: 12, fontWeight:"bold"}}>{props.name}</Text>
+            </View>
+
+        );
+
+
+}
diff --git a/screens/ModalScreen.tsx b/screens/ModalScreen.tsx
deleted file mode 100644
index 05889c3..0000000
--- a/screens/ModalScreen.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { StatusBar } from 'expo-status-bar';
-import { Platform, StyleSheet } from 'react-native';
-
-import EditScreenInfo from '../components/EditScreenInfo';
-import { Text, View } from '../components/Themed';
-
-export default function ModalScreen() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Modal</Text>
-      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
-      <EditScreenInfo path="/screens/ModalScreen.tsx" />
-
-      {/* Use a light status bar on iOS to account for the black space above the modal */}
-      <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});
diff --git a/screens/TabOneScreen.tsx b/screens/TabOneScreen.tsx
deleted file mode 100644
index cae37f5..0000000
--- a/screens/TabOneScreen.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-import EditScreenInfo from '../components/EditScreenInfo';
-import { Text, View } from '../components/Themed';
-import { RootTabScreenProps } from '../types';
-
-export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Tab One</Text>
-      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
-      <EditScreenInfo path="/screens/TabOneScreen.tsx" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});
diff --git a/screens/TabTwoScreen.tsx b/screens/TabTwoScreen.tsx
deleted file mode 100644
index 68f726b..0000000
--- a/screens/TabTwoScreen.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-import EditScreenInfo from '../components/EditScreenInfo';
-import { Text, View } from '../components/Themed';
-
-export default function TabTwoScreen() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Tab Two</Text>
-      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
-      <EditScreenInfo path="/screens/TabTwoScreen.tsx" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});
diff --git a/screens/WatchLaterScreen.tsx b/screens/WatchLaterScreen.tsx
new file mode 100644
index 0000000..adc9708
--- /dev/null
+++ b/screens/WatchLaterScreen.tsx
@@ -0,0 +1,95 @@
+import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput} from 'react-native';
+import * as React from "react";
+import {BadgeFilm} from "./HomeScreen";
+import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
+import { faClock} from "@fortawesome/free-solid-svg-icons";
+import LinearGradient from 'react-native-linear-gradient';
+
+export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) {
+  return (
+      <SafeAreaView style={styles.container}>
+          <View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20,  marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >
+              <FontAwesomeIcon icon={faClock} style={{marginBottom: -5, marginRight: 20}} size={50} color="white" />
+
+                <Text style={{color: "white", fontSize:30}}>Watch Later</Text>
+          </View>
+          <Image
+              source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode:"fit"}}
+          />
+          <View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
+              <TextInput style={{width:300, height:40, marginHorizontal:20}} ></TextInput>
+          </View>
+          <FlatList
+              data={[
+                  {key: 'Devin'},
+                  {key: 'Dan'},
+                  {key: 'Dominic'},
+                  {key: 'Jackson'},
+                  {key: 'James'},
+                  {key: 'Joel'},
+                  {key: 'John'},
+                  {key: 'Jillian'},
+                  {key: 'Jimmy'},
+                  {key: 'Julie'},
+              ]}
+              renderItem={({item}) => <ListWidget name={item.key} ></ListWidget>}
+          />
+      </SafeAreaView>
+  );
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingTop: 22,
+        backgroundColor: "#232323"
+    },
+    linearGradient: {
+        flex: 1,
+        paddingLeft: 15,
+        paddingRight: 15,
+        borderRadius: 5
+    },
+    item: {
+        padding: 10,
+        fontSize: 18,
+        height: 44,
+        color: "white"
+    },
+    filmCard: {
+        width: 70,
+        height: 100,
+        borderRadius: 8,
+
+
+    },
+});
+
+type ListWidgetProps = {
+    name : String
+
+}
+
+export function ListWidget(props: ListWidgetProps) {
+return (
+            <View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'row', paddingHorizontal:20, marginVertical:5}} >
+                <Image
+                    style={styles.filmCard}
+                    source={{
+                        uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
+                    }}
+                />
+                <View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'column', paddingLeft:10}} >
+                    <Text style={{color: "white", fontWeight:"bold", fontSize:25}}>{props.name}</Text>
+                    <Text style={{color: "grey", fontWeight:"bold", fontSize:17}}>{props.name}</Text>
+                    <View style={{marginVertical:10}}>
+                        <BadgeFilm name={"Science-Ficton"}/>
+                    </View>
+                </View>
+            </View>
+
+
+        );
+
+
+}
+
diff --git a/types.tsx b/types.tsx
index c43fc86..79b0ddc 100644
--- a/types.tsx
+++ b/types.tsx
@@ -17,6 +17,11 @@ export type RootStackParamList = {
   Root: NavigatorScreenParams<RootTabParamList> | undefined;
   Modal: undefined;
   NotFound: undefined;
+  Home: undefined;
+  WatchLater:  undefined;
+
+  Favorite: undefined;
+
 };
 
 export type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<
@@ -25,8 +30,9 @@ export type RootStackScreenProps<Screen extends keyof RootStackParamList> = Nati
 >;
 
 export type RootTabParamList = {
-  TabOne: undefined;
-  TabTwo: undefined;
+  WatchLater: undefined;
+  Home: undefined;
+  Favorite: undefined;
 };
 
 export type RootTabScreenProps<Screen extends keyof RootTabParamList> = CompositeScreenProps<