diff --git a/assets/icon/bronze.png b/assets/icon/bronze.png
new file mode 100644
index 0000000..3011601
Binary files /dev/null and b/assets/icon/bronze.png differ
diff --git a/assets/icon/diamond.png b/assets/icon/diamond.png
new file mode 100644
index 0000000..382d3fe
Binary files /dev/null and b/assets/icon/diamond.png differ
diff --git a/assets/icon/gold.png b/assets/icon/gold.png
new file mode 100644
index 0000000..3efa24c
Binary files /dev/null and b/assets/icon/gold.png differ
diff --git a/assets/icon/profile.png b/assets/icon/profile.png
new file mode 100644
index 0000000..258c3d6
Binary files /dev/null and b/assets/icon/profile.png differ
diff --git a/assets/icon/silver.png b/assets/icon/silver.png
new file mode 100644
index 0000000..40f186e
Binary files /dev/null and b/assets/icon/silver.png differ
diff --git a/assets/onboarding/onboarding1.png b/assets/onboarding/onboarding1.png
new file mode 100644
index 0000000..cfbbcdc
Binary files /dev/null and b/assets/onboarding/onboarding1.png differ
diff --git a/assets/onboarding/onboarding2.png b/assets/onboarding/onboarding2.png
new file mode 100644
index 0000000..82d8b43
Binary files /dev/null and b/assets/onboarding/onboarding2.png differ
diff --git a/assets/onboarding/onboarding3.png b/assets/onboarding/onboarding3.png
new file mode 100644
index 0000000..2bc02c6
Binary files /dev/null and b/assets/onboarding/onboarding3.png differ
diff --git a/assets/onboarding/onboarding4.png b/assets/onboarding/onboarding4.png
new file mode 100644
index 0000000..e19489a
Binary files /dev/null and b/assets/onboarding/onboarding4.png differ
diff --git a/babel.config.js b/babel.config.js
index e0dcf18..f48d170 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -35,6 +35,7 @@ module.exports = function (api) {
           },
         },
       ],
+      "react-native-reanimated/plugin",
     ],
   }
 }
diff --git a/components/flashcard/FlashcardDetails.js b/components/flashcard/FlashcardDetails.js
new file mode 100644
index 0000000..56e30b1
--- /dev/null
+++ b/components/flashcard/FlashcardDetails.js
@@ -0,0 +1,84 @@
+import { StyleSheet, Text, View, TextInput } from "react-native"
+import { useState } from "react"
+import { IntoroButton } from "@components/common"
+const FlashcardDetails = ({ element, page, width }) => {
+  // TODO: add function to save notes dynamically
+  const [note, setNote] = useState("")
+  const [isEdit, setIsEdit] = useState(false)
+  const toggleMode = () => setIsEdit((previousState) => !previousState)
+  if (page === "1") {
+    return (
+      <View
+        style={{
+          width: width - 40,
+          justifyContent: "flex-start",
+          alignItems: "center",
+        }}
+      >
+        <Text style={{ fontSize: 18, fontWeight: "700" }}>
+          {element._character}
+        </Text>
+        <Text style={{ fontSize: 14, fontWeight: "300" }}>
+          {element._reading}
+        </Text>
+        <Text style={{ fontSize: 18, fontWeight: "700", marginTop: 10 }}>
+          Pronounciation
+        </Text>
+        <Text style={{ fontSize: 14, fontWeight: "300" }}>
+          {element._extraNote}
+        </Text>
+        <Text style={{ fontSize: 18, fontWeight: "700", marginTop: 10 }}>
+          Mnemonic
+        </Text>
+        <Text style={{ fontSize: 14, fontWeight: "300" }}>
+          {element._mnemonic}
+        </Text>
+      </View>
+    )
+  } else {
+    return (
+      <View
+        style={{
+          width: width - 40,
+          justifyContent: "flex-start",
+          alignItems: "center",
+        }}
+      >
+        <Text style={{ fontSize: 20, fontWeight: "300" }}>Notes</Text>
+        <View style={{ height: 200, padding: 20 }}>
+          {isEdit ? (
+            <TextInput
+              autoCorrect={false}
+              style={styles.input}
+              onChangeText={setNote}
+              value={note}
+              multiline
+              numberOfLines={10}
+            />
+          ) : (
+            <Text>{note}</Text>
+          )}
+        </View>
+
+        <IntoroButton
+          text={isEdit ? "Save Note" : "Edit Notes"}
+          onPress={toggleMode}
+          buttonStyle={{ width: "80%" }}
+        ></IntoroButton>
+      </View>
+    )
+  }
+}
+
+export default FlashcardDetails
+
+const styles = StyleSheet.create({
+  input: {
+    fontSize: 16,
+    minWidth: 250,
+    borderWidth: 1,
+    backgroundColor: "white",
+    padding: 10,
+    borderRadius: 10,
+  },
+})
diff --git a/components/flashcard/FlashcardIndicator.js b/components/flashcard/FlashcardIndicator.js
new file mode 100644
index 0000000..b92e7e6
--- /dev/null
+++ b/components/flashcard/FlashcardIndicator.js
@@ -0,0 +1,55 @@
+import { Animated, StyleSheet, View, Dimensions } from "react-native"
+const { width } = Dimensions.get("screen")
+
+const FlashcardIndicator = ({ scrollX }) => {
+  return (
+    <View style={{ flexDirection: "row" }}>
+      {Array(2)
+        .fill(true)
+        .map((_, i) => {
+          const inputRange = [(i - 1) * width, i * width, (i + 1) * width]
+          const scale = scrollX.interpolate({
+            inputRange,
+            outputRange: [0.8, 1.4, 0.8],
+            extrapolate: "clamp",
+          })
+          const opacity = scrollX.interpolate({
+            inputRange,
+            outputRange: [0.3, 0.9, 0.3],
+            extrapolate: "clamp",
+          })
+          const backgroundColor = scrollX.interpolate({
+            inputRange,
+            outputRange: ["#333", "rgba(64, 123, 255, 1)", "#333"],
+            extrapolate: "clamp",
+          })
+          return (
+            <Animated.View
+              key={`indicator-${i}`}
+              style={{
+                ...styles.indicator,
+                backgroundColor,
+                opacity,
+                transform: [
+                  {
+                    scale,
+                  },
+                ],
+              }}
+            ></Animated.View>
+          )
+        })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  indicator: {
+    height: 8,
+    width: 8,
+    borderRadius: 5,
+    marginHorizontal: 5,
+  },
+})
+
+export default FlashcardIndicator
diff --git a/components/home/HomeTimetable.js b/components/home/HomeTimetable.js
new file mode 100644
index 0000000..41334f6
--- /dev/null
+++ b/components/home/HomeTimetable.js
@@ -0,0 +1,22 @@
+import { StyleSheet, Text, View } from "react-native"
+
+const HomeTimetable = () => {
+  return (
+    <View style={styles.homeTimetableContainer}>
+      <Text>Hi</Text>
+    </View>
+  )
+}
+
+export default HomeTimetable
+
+const styles = StyleSheet.create({
+  homeTimetableContainer: {
+    borderRadius: 30,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#D9D9D9",
+    width: "90%",
+    height: 260,
+  },
+})
diff --git a/components/home/IntoroProgress.js b/components/home/IntoroProgress.js
new file mode 100644
index 0000000..fded377
--- /dev/null
+++ b/components/home/IntoroProgress.js
@@ -0,0 +1,22 @@
+import CircularProgress from "react-native-circular-progress-indicator"
+
+const IntoroProgress = ({ value, text }) => {
+  return (
+    <CircularProgress
+      value={value}
+      radius={75}
+      progressValueColor={"#D4AD65"}
+      inActiveStrokeColor={"#C6daee"}
+      activeStrokeColor={"#6F8FCE"}
+      title={text}
+      titleColor={"#155698"}
+      titleStyle={{ fontWeight: "bold" }}
+      titleFontSize={16}
+      valueSuffix={"%"}
+      progressValueFontSize={45}
+      clockwise={false}
+    />
+  )
+}
+
+export default IntoroProgress
diff --git a/components/home/TierBadge.js b/components/home/TierBadge.js
new file mode 100644
index 0000000..a0a6750
--- /dev/null
+++ b/components/home/TierBadge.js
@@ -0,0 +1,56 @@
+import { StyleSheet, Text, View, Image } from "react-native"
+import bronzeLogo from "@assets/icon/bronze.png"
+import silverLogo from "@assets/icon/silver.png"
+import goldLogo from "@assets/icon/gold.png"
+import diamondLogo from "@assets/icon/diamond.png"
+
+const TierBadge = () => {
+  return (
+    <View style={styles.tierContainer}>
+      <View style={styles.tierImageWrapper}>
+        <Image source={bronzeLogo} style={styles.tierImage}></Image>
+        <Text style={styles.tierImageContent}>12</Text>
+      </View>
+      <View style={styles.tierImageWrapper}>
+        <Image source={silverLogo} style={styles.tierImage}></Image>
+        <Text style={styles.tierImageContent}>2</Text>
+      </View>
+      <View style={styles.tierImageWrapper}>
+        <Image source={goldLogo} style={styles.tierImage}></Image>
+        <Text style={styles.tierImageContent}>20</Text>
+      </View>
+      <View style={styles.tierImageWrapper}>
+        <Image source={diamondLogo} style={styles.tierImage}></Image>
+        <Text style={styles.tierImageContent}>1</Text>
+      </View>
+    </View>
+  )
+}
+
+export default TierBadge
+
+const styles = StyleSheet.create({
+  tierContainer: {
+    justifyContent: "space-between",
+    flexDirection: "row",
+  },
+  tierImageWrapper: {
+    height: 90,
+    width: 90,
+    overflow: "hidden",
+  },
+  tierImage: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "cover",
+  },
+  tierImageContent: {
+    position: "absolute",
+    color: "#D4AD65",
+    fontSize: 20,
+    fontWeight: "600",
+    textAlign: "center",
+    width: "100%",
+    top: 14,
+  },
+})
diff --git a/components/kanaChart/KanaGrid.js b/components/kanaChart/KanaGrid.js
index ecd76a5..eca3b6e 100644
--- a/components/kanaChart/KanaGrid.js
+++ b/components/kanaChart/KanaGrid.js
@@ -3,11 +3,12 @@ import KanaItem from "./KanaItem"
 
 const { width } = Dimensions.get("screen")
 
-export default function KanaGrid({ kana }) {
+export default function KanaGrid({ navigation, kana }) {
+  console.log(kana)
   return (
     <View style={styles.gridContainer}>
       {kana.map((element, index) => (
-        <KanaItem element={element} key={index} />
+        <KanaItem navigation={navigation} element={element} key={index} />
       ))}
     </View>
   )
@@ -18,10 +19,10 @@ const styles = StyleSheet.create({
   gridContainer: {
     marginLeft: -8,
     marginTop: 20,
+    marginBottom: 30,
     flexDirection: "row",
     flexWrap: "wrap",
     width: chartContainerWidth,
-    marginBottom: 30,
     alignItems: "center",
     justifyContent: "center",
   },
diff --git a/components/kanaChart/KanaItem.js b/components/kanaChart/KanaItem.js
index a066834..3f18fbb 100644
--- a/components/kanaChart/KanaItem.js
+++ b/components/kanaChart/KanaItem.js
@@ -1,10 +1,16 @@
-import { Dimensions, StyleSheet, View, Text } from "react-native"
+import {
+  Dimensions,
+  StyleSheet,
+  View,
+  Text,
+  TouchableOpacity,
+} from "react-native"
 import Colors from "@types/colors.js"
 import Types from "@types/types"
 
 const { width } = Dimensions.get("screen")
 
-export default function KanaItem({ element }) {
+export default function KanaItem({ navigation, element }) {
   let boxShadow = generateBoxShadowStyle(
     -2,
     4,
@@ -14,19 +20,28 @@ export default function KanaItem({ element }) {
     4,
     Colors.SHADOW_COLOR_ANDROID
   )
+
+  const handleClick = () => {
+    navigation.navigate("Flashcard", {
+      element: element,
+    })
+  }
+
   return (
-    <View
-      style={{
-        ...styles.item,
-        backgroundColor:
-          element.type === Types.HIRAGANA ? Colors.HIRAGANA : Colors.KATAKANA,
-        opacity: element.unlocked === true ? 1 : 0.4,
-        ...boxShadow,
-      }}
-    >
-      <Text style={styles.character}>{element.character}</Text>
-      <Text style={styles.reading}>{element.reading}</Text>
-    </View>
+    <TouchableOpacity onPress={handleClick}>
+      <View
+        style={{
+          ...styles.item,
+          backgroundColor:
+            element.type === Types.HIRAGANA ? Colors.HIRAGANA : Colors.KATAKANA,
+          opacity: element.unlocked === true ? 1 : 0.4,
+          ...boxShadow,
+        }}
+      >
+        <Text style={styles.character}>{element.character}</Text>
+        <Text style={styles.reading}>{element.reading}</Text>
+      </View>
+    </TouchableOpacity>
   )
 }
 
@@ -39,8 +54,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     marginLeft: 8,
-    marginTop: 8,
-    paddingVertical: 14,
+    marginTop: 10,
     borderRadius: 12,
   },
   character: {
diff --git a/components/kanaChart/KanaLevel.js b/components/kanaChart/KanaLevel.js
index 98909a3..ea6f37e 100644
--- a/components/kanaChart/KanaLevel.js
+++ b/components/kanaChart/KanaLevel.js
@@ -1,13 +1,13 @@
 import { StyleSheet, Text, View } from "react-native"
 import KanaGrid from "./KanaGrid"
 
-export default function KanaLevel({ type, kana, level }) {
+export default function KanaLevel({ navigation, type, kana, level }) {
   return (
     <View>
       <View style={style.levelContainer}>
         <Text>{`Level ${level}`}</Text>
       </View>
-      <KanaGrid kana={kana} type={type} />
+      <KanaGrid navigation={navigation} kana={kana} type={type} />
     </View>
   )
 }
diff --git a/components/onboarding/OnboardingItem.js b/components/onboarding/OnboardingItem.js
index a6582a9..d6c4498 100644
--- a/components/onboarding/OnboardingItem.js
+++ b/components/onboarding/OnboardingItem.js
@@ -8,7 +8,7 @@ const OnboardingItem = ({ item }) => {
     <View style={{ width, alignItems: "center", padding: 20 }}>
       <View style={{ flex: 0.65, justifyContent: "center" }}>
         <Image
-          source={{ uri: item.image }}
+          source={item.image}
           style={{
             width: width / 2,
             height: height / 2,
@@ -29,13 +29,13 @@ export default OnboardingItem
 const styles = StyleSheet.create({
   onboardingTitle: {
     fontWeight: "800",
-    fontSize: 28,
+    fontSize: 32,
     textAlign: "center",
     marginBottom: 10,
   },
   onboardingSubtitle: {
     fontWeight: "300",
     textAlign: "center",
-    fontSize: 16,
+    fontSize: 26,
   },
 })
diff --git a/package.json b/package.json
index 612b6d8..b126b17 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,12 @@
     "global": "^4.4.0",
     "react": "18.1.0",
     "react-native": "0.70.5",
+    "react-native-circular-progress-indicator": "^4.4.2",
     "react-native-paper": "^5.2.0",
+    "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "~3.18.0",
+    "react-native-svg": "13.4.0",
     "react-native-vector-icons": "^9.2.0"
   },
   "devDependencies": {
diff --git a/screens/Flashcard.js b/screens/Flashcard.js
new file mode 100644
index 0000000..4d5e1d0
--- /dev/null
+++ b/screens/Flashcard.js
@@ -0,0 +1,108 @@
+import { IntoroWrapper } from "@components/common"
+import {
+  Animated,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Dimensions,
+} from "react-native"
+import Ionicons from "react-native-vector-icons/Ionicons"
+import { useRef } from "react"
+import FlashcardDetails from "@components/flashcard/FlashcardDetails"
+import FlashcardIndicator from "@components/flashcard/FlashcardIndicator"
+const { width } = Dimensions.get("screen")
+const CONTAINER_WIDTH = width * 0.85
+
+const Flashcard = ({ route, navigation }) => {
+  const { element } = route.params
+  const DATA = [
+    {
+      page: "1",
+    },
+    {
+      page: "2",
+    },
+  ]
+  const scrollX = useRef(new Animated.Value(0)).current
+  return (
+    <IntoroWrapper>
+      <TouchableOpacity onPress={() => navigation.goBack()}>
+        <Ionicons name="ios-arrow-back" size={30} />
+      </TouchableOpacity>
+
+      <View style={{ alignItems: "center" }}>
+        <View style={styles.topContainer}>
+          <View style={styles.characterContainer}>
+            <Text style={styles.character}>{element._character}</Text>
+          </View>
+          <View style={styles.characterContainer}>
+            <Text style={styles.character}>{element._character}</Text>
+          </View>
+        </View>
+
+        <View style={styles.bottomContainer}>
+          <Animated.FlatList
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            scrollEventThrottle={32}
+            onScroll={Animated.event(
+              [{ nativeEvent: { contentOffset: { x: scrollX } } }],
+              { useNativeDriver: false }
+            )}
+            pagingEnabled
+            data={DATA}
+            keyExtractor={(item) => item.key}
+            renderItem={({ item }) => {
+              return (
+                <FlashcardDetails
+                  page={item.page}
+                  element={element}
+                  width={CONTAINER_WIDTH}
+                />
+              )
+            }}
+          />
+          <FlashcardIndicator scrollX={scrollX} />
+        </View>
+      </View>
+    </IntoroWrapper>
+  )
+}
+
+export default Flashcard
+
+const styles = StyleSheet.create({
+  topContainer: {
+    backgroundColor: "#7B9EE3",
+    width: CONTAINER_WIDTH,
+    height: 190,
+    borderRadius: 15,
+    alignItems: "center",
+    justifyContent: "space-evenly",
+    flexDirection: "row",
+    marginVertical: 20,
+  },
+  characterContainer: {
+    backgroundColor: "#BDCDEC",
+    width: 130,
+    height: 140,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  character: {
+    fontSize: 80,
+    fontWeight: "700",
+  },
+  bottomContainer: {
+    backgroundColor: "#D4AD6573",
+    width: CONTAINER_WIDTH,
+    height: 330,
+    borderRadius: 15,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+  },
+})
diff --git a/screens/Home.js b/screens/Home.js
index 4143f45..d64203f 100644
--- a/screens/Home.js
+++ b/screens/Home.js
@@ -1,14 +1,68 @@
-import { StyleSheet, Text, View } from "react-native"
-import React from "react"
+import { StyleSheet, Text, View, Image } from "react-native"
+import intoroLogo from "@assets/logo/IntoroLogo.png"
+import profile from "@assets/icon/profile.png"
+import IntoroProgress from "@components/home/IntoroProgress"
+import TierBadge from "@components/home/TierBadge"
+import HomeTimetable from "@components/home/HomeTimetable"
+import { IntoroButton } from "@components/common"
 
-const Home = () => {
+const Home = ({ navigation }) => {
   return (
-    <View>
-      <Text>Home</Text>
+    <View style={styles.container}>
+      <View style={styles.logo}>
+        <Image
+          source={intoroLogo}
+          style={{ width: 100, height: 100, resizeMode: "contain" }}
+        />
+        <Image source={profile} style={{ width: 50, resizeMode: "contain" }} />
+      </View>
+
+      <View style={styles.bodyContainer}>
+        <View style={styles.progressBarContainer}>
+          <IntoroProgress text={"Completed"} value={38} />
+          <IntoroProgress text={"Char Unlock"} value={62} />
+        </View>
+
+        <TierBadge />
+
+        <HomeTimetable />
+
+        <View style={{ width: "50%" }}>
+          <IntoroButton
+            onPress={() => navigation.navigate("LearningPad")}
+            text={"Learning Pad"}
+            buttonStyle={{ borderRadius: 20, paddingVertical: 10 }}
+            fontStyle={{ fontSize: 18, fontWeight: "500" }}
+          />
+        </View>
+      </View>
     </View>
   )
 }
 
 export default Home
 
-const styles = StyleSheet.create({})
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    paddingHorizontal: 25,
+    paddingVertical: 18,
+  },
+  logo: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  bodyContainer: {
+    flex: 6,
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  progressBarContainer: {
+    flexDirection: "row",
+    width: "100%",
+    justifyContent: "space-evenly",
+  },
+})
diff --git a/screens/HomeTab.js b/screens/HomeTab.js
new file mode 100644
index 0000000..41949a8
--- /dev/null
+++ b/screens/HomeTab.js
@@ -0,0 +1,28 @@
+import { StyleSheet, Text, View } from "react-native"
+
+import { createNativeStackNavigator } from "@react-navigation/native-stack"
+import Home from "@screens/Home"
+import LearningPad from "@screens/LearningPad"
+
+const Stack = createNativeStackNavigator()
+
+const HomeTab = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Home"
+        component={Home}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="LearningPad"
+        component={LearningPad}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
+  )
+}
+
+export default HomeTab
+
+const styles = StyleSheet.create({})
diff --git a/screens/IntoroTabs.js b/screens/IntoroTabs.js
index a09d391..f0c8007 100644
--- a/screens/IntoroTabs.js
+++ b/screens/IntoroTabs.js
@@ -1,10 +1,9 @@
 import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs"
-import KanaChart from "@screens/KanaChart"
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"
 import Foundation from "react-native-vector-icons/Foundation"
 import Timetable from "@screens/Timetable"
-import Home from "@screens/Home"
-import LearningPad from "./LearningPad"
+import HomeTab from "./HomeTab"
+import KanaTab from "./KanaTab"
 
 const IntoroTabs = () => {
   const Tab = createMaterialBottomTabNavigator()
@@ -26,8 +25,8 @@ const IntoroTabs = () => {
         }}
       />
       <Tab.Screen
-        name="Home"
-        component={Home}
+        name="HomeTab"
+        component={HomeTab}
         options={{
           tabBarLabel: "Home",
           tabBarIcon: ({ color }) => (
@@ -36,18 +35,8 @@ const IntoroTabs = () => {
         }}
       />
       <Tab.Screen
-        name="Learning Pad"
-        component={LearningPad}
-        options={{
-          tabBarLabel: "Learning Pad",
-          tabBarIcon: ({ color }) => (
-            <Foundation name="clipboard-pencil" color={color} size={26} />
-          ),
-        }}
-      />
-      <Tab.Screen
-        name="Kana Chart"
-        component={KanaChart}
+        name="KanaTab"
+        component={KanaTab}
         options={{
           tabBarLabel: "Kana Chart",
           tabBarIcon: ({ color }) => (
diff --git a/screens/KanaChart.js b/screens/KanaChart.js
index 9eae54d..1ccbae1 100644
--- a/screens/KanaChart.js
+++ b/screens/KanaChart.js
@@ -10,7 +10,7 @@ import { getAllKana } from "@api/firestore"
 
 import Kana from "@types/types.js"
 
-export default function KanaChart() {
+export default function KanaChart({ navigation }) {
   const [type, setType] = useState(Kana.HIRAGANA)
   const [currentKana, setCurrentKana] = useState({})
 
@@ -46,6 +46,7 @@ export default function KanaChart() {
               {Object.keys(currentKana).map((element) => {
                 return (
                   <KanaLevel
+                    navigation={navigation}
                     kana={currentKana[element]}
                     type={type}
                     level={element}
@@ -63,6 +64,7 @@ export default function KanaChart() {
             />
           )}
         </View>
+
         {/* Switch Button -> Switch between Hiragana and Katakana */}
         <View style={styles.buttonContainer}>
           <IntoroButton
@@ -87,6 +89,7 @@ const styles = StyleSheet.create({
   chartContainer: {
     flex: 6,
     justifyContent: "center",
+    alignItems: "center",
   },
   chartTitle: {
     fontSize: 26,
@@ -98,6 +101,7 @@ const styles = StyleSheet.create({
     width: "40%",
     marginLeft: "auto",
     marginRight: "auto",
+    marginTop: 5,
   },
   buttonFontStyle: {
     fontSize: 17,
diff --git a/screens/KanaTab.js b/screens/KanaTab.js
new file mode 100644
index 0000000..972cb80
--- /dev/null
+++ b/screens/KanaTab.js
@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native"
+import { createNativeStackNavigator } from "@react-navigation/native-stack"
+import KanaChart from "@screens/KanaChart"
+import Flashcard from "./Flashcard"
+
+const Stack = createNativeStackNavigator()
+
+const KanaTab = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="KanaChart"
+        component={KanaChart}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="Flashcard"
+        component={Flashcard}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
+  )
+}
+
+export default KanaTab
+
+const styles = StyleSheet.create({})
diff --git a/screens/Onboarding.js b/screens/Onboarding.js
index 86c9177..929de6b 100644
--- a/screens/Onboarding.js
+++ b/screens/Onboarding.js
@@ -7,36 +7,38 @@ import OnboardingItem from "@components/onboarding/OnboardingItem"
 import { StatusBar } from "expo-status-bar"
 import { useRef } from "react"
 
+// import image for onboarding screen
+import onboarding1 from "@assets/onboarding/onboarding1.png"
+import onboarding2 from "@assets/onboarding/onboarding2.png"
+import onboarding3 from "@assets/onboarding/onboarding3.png"
+import onboarding4 from "@assets/onboarding/onboarding4.png"
+
 const { width } = Dimensions.get("screen")
 
 const DATA = [
   {
     key: "1",
-    title: "Hiragana & Katakana Made Easy",
-    description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, ipsam.",
-    image: "https://cdn-icons-png.flaticon.com/512/2907/2907979.png",
+    title: "Hiragana & Katakana",
+    description: "On-the go!",
+    image: onboarding1,
   },
   {
     key: "2",
-    title: "Interactive Learning",
-    description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, ipsam.",
-    image: "https://cdn-icons-png.flaticon.com/512/2907/2907979.png",
+    title: "Effective Learning",
+    description: "Spaced Repetitions and Mnemonics",
+    image: onboarding2,
   },
   {
     key: "3",
     title: "Plan Your Learning",
-    description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, ipsam.",
-    image: "https://cdn-icons-png.flaticon.com/512/2907/2907979.png",
+    description: "With daily schedules",
+    image: onboarding3,
   },
   {
     key: "4",
     title: "Track Your Progress",
-    description:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, ipsam.",
-    image: "https://cdn-icons-png.flaticon.com/512/2907/2907979.png",
+    description: "With tracking feature",
+    image: onboarding4,
   },
 ]
 
diff --git a/yarn.lock b/yarn.lock
index 85409f6..1da8579 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -99,6 +99,20 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
     "@babel/helper-split-export-declaration" "^7.18.6"
 
+"@babel/helper-create-class-features-plugin@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.0.tgz#64f49ecb0020532f19b1d014b03bccaa1ab85fb9"
+  integrity sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-member-expression-to-functions" "^7.21.0"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.20.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+
 "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.20.5.tgz#5ea79b59962a09ec2acf20a963a01ab4d076ccca"
@@ -139,6 +153,14 @@
     "@babel/template" "^7.18.10"
     "@babel/types" "^7.19.0"
 
+"@babel/helper-function-name@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
+  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/types" "^7.21.0"
+
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
@@ -153,6 +175,13 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
+"@babel/helper-member-expression-to-functions@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz#319c6a940431a133897148515877d2f3269c3ba5"
+  integrity sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==
+  dependencies:
+    "@babel/types" "^7.21.0"
+
 "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
@@ -244,6 +273,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
   integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
 
+"@babel/helper-validator-option@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
+  integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
+
 "@babel/helper-wrap-function@^7.18.9":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
@@ -752,6 +786,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
+"@babel/plugin-transform-object-assign@^7.16.7":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz#7830b4b6f83e1374a5afb9f6111bcfaea872cdd2"
+  integrity sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
@@ -878,6 +919,15 @@
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-typescript" "^7.20.0"
 
+"@babel/plugin-transform-typescript@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.0.tgz#f0956a153679e3b377ae5b7f0143427151e4c848"
+  integrity sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-typescript" "^7.20.0"
+
 "@babel/plugin-transform-unicode-escapes@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
@@ -1003,6 +1053,15 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-typescript" "^7.18.6"
 
+"@babel/preset-typescript@^7.16.7":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.0.tgz#bcbbca513e8213691fe5d4b23d9251e01f00ebff"
+  integrity sha512-myc9mpoVA5m1rF8K8DgLEatOYFDpwC+RkMkjZ0Du6uI62YvDe8uxIEYVs/VCdSJ097nlALiU/yBC7//3nI+hNg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-validator-option" "^7.21.0"
+    "@babel/plugin-transform-typescript" "^7.21.0"
+
 "@babel/register@^7.13.16":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.18.9.tgz#1888b24bc28d5cc41c412feb015e9ff6b96e439c"
@@ -1055,6 +1114,15 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.21.0":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.2.tgz#92246f6e00f91755893c2876ad653db70c8310d1"
+  integrity sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@callstack/react-theme-provider@^3.0.8":
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz#d0d7ac71e422133c5f7b78f4c4aa1bc57f156f50"
@@ -2275,6 +2343,11 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.21.tgz#763b05a4b472c93a8db29b2c3e359d55b29ce272"
   integrity sha512-gFukHN4t8K4+wVC+ECqeqwzBDeFeTzBXroBTqE6vcWrQGbEUpHO7LYdG0f4xnvYq4VOEwITSlHlp0JBAIFMS/g==
 
+"@types/invariant@^2.2.35":
+  version "2.2.35"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
+  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -2365,6 +2438,11 @@ abort-controller@^3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
+abs-svg-path@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/abs-svg-path/-/abs-svg-path-0.1.1.tgz#df601c8e8d2ba10d4a76d625e236a9a39c2723bf"
+  integrity sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==
+
 absolute-path@^0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/absolute-path/-/absolute-path-0.0.0.tgz#a78762fbdadfb5297be99b15d35a785b2f095bf7"
@@ -2733,6 +2811,11 @@ body-parser@^1.20.1:
     type-is "~1.6.18"
     unpipe "1.0.0"
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
 bplist-creator@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/bplist-creator/-/bplist-creator-0.1.0.tgz#018a2d1b587f769e379ef5519103730f8963ba1e"
@@ -3277,6 +3360,30 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  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"
+
+css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
 dag-map@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/dag-map/-/dag-map-1.0.2.tgz#e8379f041000ed561fc515475c1ed2c85eece8d7"
@@ -3411,11 +3518,41 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
 dom-walk@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
   integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
 
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^5.0.1, domhandler@^5.0.2:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c"
+  integrity sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.1"
+
 dotenv@^16.0.3:
   version "16.0.3"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
@@ -3458,6 +3595,11 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
+entities@^4.2.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
+  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
+
 env-editor@^0.4.1:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/env-editor/-/env-editor-0.4.2.tgz#4e76568d0bd8f5c2b6d314a9412c8fe9aa3ae861"
@@ -4902,6 +5044,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
 lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
@@ -5034,6 +5181,11 @@ md5hex@^1.0.0:
   resolved "https://registry.yarnpkg.com/md5hex/-/md5hex-1.0.0.tgz#ed74b477a2ee9369f75efee2f08d5915e52a42e8"
   integrity sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ==
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -5662,6 +5814,13 @@ normalize-path@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-svg-path@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz#0e614eca23c39f0cffe821d6be6cd17e569a766c"
+  integrity sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==
+  dependencies:
+    svg-arc-to-cubic-bezier "^3.0.0"
+
 npm-package-arg@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-7.0.0.tgz#52cdf08b491c0c59df687c4c925a89102ef794a5"
@@ -5686,6 +5845,13 @@ npm-run-path@^5.1.0:
   dependencies:
     path-key "^4.0.0"
 
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
 nullthrows@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@@ -5904,6 +6070,11 @@ parse-png@^2.1.0:
   dependencies:
     pngjs "^3.3.0"
 
+parse-svg-path@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/parse-svg-path/-/parse-svg-path-0.1.2.tgz#7a7ec0d1eb06fa5325c7d3e009b859a09b5d49eb"
+  integrity sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==
+
 parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -6225,6 +6396,13 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-circular-progress-indicator@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-native-circular-progress-indicator/-/react-native-circular-progress-indicator-4.4.2.tgz#5475d045950e6fcc622e54fb63863b274790fb8e"
+  integrity sha512-BlgshzIIIk0TP/CZY+5oyRsHl2Sb2l6cK5tzfmrVETfn6pN8dhOKrV0i3Z6i0SM8wRgncdUUSRBpCPAexh7JoQ==
+  dependencies:
+    react-native-redash "*"
+
 react-native-codegen@^0.70.6:
   version "0.70.6"
   resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.70.6.tgz#2ce17d1faad02ad4562345f8ee7cbe6397eda5cb"
@@ -6256,6 +6434,28 @@ react-native-paper@^5.2.0:
     color "^3.1.2"
     use-event-callback "^0.1.0"
 
+react-native-reanimated@~2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.12.0.tgz#5821eecfb1769b1617a67a2d4dec12fdeedb2b6e"
+  integrity sha512-nrlPyw+Hx9u4iJhZk9PoTvDo/QmVAd+bo7OK9Tv3hveNEF9++5oig/g3Uv9V93shy9avTYGsUprUvAEt/xdzeQ==
+  dependencies:
+    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/preset-typescript" "^7.16.7"
+    "@types/invariant" "^2.2.35"
+    invariant "^2.2.4"
+    lodash.isequal "^4.5.0"
+    setimmediate "^1.0.5"
+    string-hash-64 "^1.0.3"
+
+react-native-redash@*:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-redash/-/react-native-redash-18.1.0.tgz#ebebace19d0d2ed877cb6836b8c824b49354eb93"
+  integrity sha512-bdCFl/ZB7Rf2raIlU6SLV+Dc/rL6UXsQNjEVwTGBukHMeSKp1zs4zVtWaGimbN8P22N4qYvb9Jmw/K94ZWYG0Q==
+  dependencies:
+    abs-svg-path "^0.1.1"
+    normalize-svg-path "^1.0.1"
+    parse-svg-path "^0.1.2"
+
 react-native-safe-area-context@4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01"
@@ -6269,6 +6469,14 @@ react-native-screens@~3.18.0:
     react-freeze "^1.0.0"
     warn-once "^0.1.0"
 
+react-native-svg@13.4.0:
+  version "13.4.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-13.4.0.tgz#82399ba0956c454144618aa581e2d748dd3f010a"
+  integrity sha512-B3TwK+H0+JuRhYPzF21AgqMt4fjhCwDZ9QUtwNstT5XcslJBXC0FoTkdZo8IEb1Sv4suSqhZwlAY6lwOv3tHag==
+  dependencies:
+    css-select "^5.1.0"
+    css-tree "^1.1.3"
+
 react-native-vector-icons@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz#3c0c82e95defd274d56363cbe8fead8d53167ebd"
@@ -6888,7 +7096,7 @@ source-map@^0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
 
-source-map@^0.6.0, source-map@~0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -6974,6 +7182,11 @@ string-argv@^0.3.1:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
   integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
 
+string-hash-64@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322"
+  integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==
+
 string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
@@ -7108,6 +7321,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-arc-to-cubic-bezier@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz#390c450035ae1c4a0104d90650304c3bc814abe6"
+  integrity sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==
+
 tar@^6.0.2, tar@^6.0.5:
   version "6.1.13"
   resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.13.tgz#46e22529000f612180601a6fe0680e7da508847b"