diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 333cf680..10b40da9 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -2,10 +2,8 @@ import React from 'react';
 
 import { DarkTheme, NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import * as Application from 'expo-application';
-import { parse, SemVer } from 'semver';
+import { SemVer } from 'semver';
 
-import { useAppSelector } from '../redux/hooks';
 import AppInfoHeader from '../src/components/Headers/AppInfoHeader';
 import GameHeader from '../src/components/Headers/GameHeader';
 import HomeHeader from '../src/components/Headers/HomeHeader';
@@ -18,13 +16,12 @@ import SettingsScreen from '../src/screens/SettingsScreen';
 
 import EditPlayerHeader from './components/Headers/EditPlayerHeader';
 import ShareHeader from './components/Headers/ShareHeader';
-import { getOnboardingSemVer } from './components/Onboarding/Onboarding';
-import logger from './Logger';
 import EditPlayerScreen from './screens/EditPlayerScreen';
 import ShareScreen from './screens/ShareScreen';
 
 export type OnboardingScreenParamList = {
     onboarding: boolean;
+    version: SemVer;
 };
 
 export type RootStackParamList = {
@@ -54,28 +51,9 @@ const MyTheme = {
 };
 
 export const Navigation = () => {
-    const onboardedStr = useAppSelector(state => state.settings.onboarded);
-    const onboardedSemVer = parse(onboardedStr);
-    const appVersion = new SemVer(Application.nativeApplicationVersion || '0.0.0');
-
-    logger.info(`App Version: ${appVersion}`);
-    logger.info(`Onboarded Version: ${onboardedSemVer}`);
-
-    const onboarded = getOnboardingSemVer(onboardedSemVer) === undefined;
-
     return (
         <NavigationContainer theme={MyTheme}>
-            <Stack.Navigator>
-                {!onboarded &&
-                    <Stack.Screen name="Onboarding" component={OnboardingScreen}
-                        initialParams={{ onboarding: true }}
-                        options={{
-                            orientation: 'portrait',
-                            title: 'Onboarding',
-                            headerShown: false,
-                        }}
-                    />
-                }
+            <Stack.Navigator initialRouteName='List' >
                 <Stack.Screen name="List" component={ListScreen}
                     options={{
                         orientation: 'portrait',
@@ -86,15 +64,6 @@ export const Navigation = () => {
                         },
                     }}
                 />
-                <Stack.Screen name="AppInfo" component={AppInfoScreen}
-                    options={{
-                        orientation: 'portrait',
-                        title: 'Info',
-                        header: ({ navigation }) => {
-                            return <AppInfoHeader navigation={navigation} />;
-                        },
-                    }}
-                />
                 <Stack.Screen name="Game" component={GameScreen}
                     options={{
                         orientation: 'all',
@@ -132,11 +101,22 @@ export const Navigation = () => {
                         },
                     })}
                 />
-                <Stack.Screen name="Tutorial" component={OnboardingScreen}
-                    initialParams={{ onboarding: false }}
+                <Stack.Screen name="Onboarding" component={OnboardingScreen}
+                    options={{
+                        presentation: 'modal',
+                        orientation: 'portrait',
+                        title: 'Onboarding',
+                        headerShown: false,
+                    }}
+                />
+                <Stack.Screen name="AppInfo" component={AppInfoScreen}
                     options={{
+                        presentation: 'modal',
                         orientation: 'portrait',
-                        title: 'Tutorial',
+                        title: 'Info',
+                        header: ({ navigation }) => {
+                            return <AppInfoHeader navigation={navigation} />;
+                        },
                     }}
                 />
             </Stack.Navigator>
diff --git a/src/components/AppInfo/RotatingIcon.tsx b/src/components/AppInfo/RotatingIcon.tsx
index fcda61af..06768a0a 100644
--- a/src/components/AppInfo/RotatingIcon.tsx
+++ b/src/components/AppInfo/RotatingIcon.tsx
@@ -5,7 +5,6 @@ import { Image } from 'expo-image';
 import { TouchableWithoutFeedback } from 'react-native';
 import Animated, {
     Easing,
-    PinwheelIn,
     useAnimatedStyle,
     useSharedValue,
     withTiming
@@ -28,7 +27,7 @@ const RotatingIcon: React.FunctionComponent = ({ }) => {
 
         await analytics().logEvent('app_icon');
     }}>
-        <Animated.View style={[animatedStyles]} entering={PinwheelIn.delay(0).duration(2000).easing(Easing.elastic(1))}>
+        <Animated.View style={[animatedStyles]}>
             <Image source={require('../../../assets/icon.png')}
                 contentFit='contain'
                 style={{
diff --git a/src/components/Headers/AppInfoHeader.tsx b/src/components/Headers/AppInfoHeader.tsx
index 9eba2f7b..ff401304 100644
--- a/src/components/Headers/AppInfoHeader.tsx
+++ b/src/components/Headers/AppInfoHeader.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 
 import { ParamListBase } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { Text, StyleSheet } from 'react-native';
+import { Text, View } from 'react-native';
 
-import HomeButton from '../Buttons/HomeButton';
+import { systemBlue } from '../../constants';
+import HeaderButton from '../Buttons/HeaderButton';
 
-import CustomHeader from './CustomHeader';
 
 interface Props {
     navigation: NativeStackNavigationProp<ParamListBase, string, undefined>;
@@ -15,19 +15,21 @@ interface Props {
 const AppInfoHeader: React.FunctionComponent<Props> = ({ navigation }: Props) => {
 
     return (
-        <CustomHeader navigation={navigation}
-            headerLeft={<HomeButton navigation={navigation} />}
-            headerCenter={<Text style={styles.title}>Settings</Text>}
-        />
+        <View style={{
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            flexDirection: 'row',
+            backgroundColor: '#F2F2F7',
+        }}>
+            <HeaderButton
+                accessibilityLabel='Save Game'
+                onPress={async () => {
+                    navigation.goBack();
+                }}>
+                <Text style={{ color: systemBlue, fontSize: 20 }}>Done</Text>
+            </HeaderButton>
+        </View>
     );
 };
 
-const styles = StyleSheet.create({
-    title: {
-        color: 'white',
-        fontSize: 20,
-        fontVariant: ['tabular-nums'],
-    },
-});
-
 export default AppInfoHeader;
diff --git a/src/components/Headers/CustomHeader.tsx b/src/components/Headers/CustomHeader.tsx
index 50da4f4c..a4453967 100644
--- a/src/components/Headers/CustomHeader.tsx
+++ b/src/components/Headers/CustomHeader.tsx
@@ -8,7 +8,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 interface Props {
     navigation: NativeStackNavigationProp<ParamListBase, string, undefined>;
-    headerLeft: React.ReactNode;
+    headerLeft?: React.ReactNode;
     headerCenter: React.ReactNode;
     headerRight?: React.ReactNode;
     animated?: boolean;
diff --git a/src/components/Onboarding/Onboarding.test.ts b/src/components/Onboarding/Onboarding.test.ts
index a1ac768b..df4fd7ff 100644
--- a/src/components/Onboarding/Onboarding.test.ts
+++ b/src/components/Onboarding/Onboarding.test.ts
@@ -1,28 +1,28 @@
 import { SemVer } from 'semver';
 
-import { getOnboardingSemVer } from './Onboarding';
+import { getPendingOnboardingSemVer } from './Onboarding';
 
 describe('onboarding', () => {
     it('should return the default if onboarded to 0.0.0', () => {
-        const applicableVersion = getOnboardingSemVer(new SemVer('0.0.0'));
+        const applicableVersion = getPendingOnboardingSemVer(new SemVer('0.0.0'));
 
         expect(applicableVersion).toBe('2.2.2');
     });
 
     it('should return the default if null', () => {
-        const applicableVersion = getOnboardingSemVer(null);
+        const applicableVersion = getPendingOnboardingSemVer(null);
 
         expect(applicableVersion).toBe('2.2.2');
     });
 
     it('should return the latest applicable screens', () => {
-        const applicableVersion = getOnboardingSemVer(new SemVer('2.4.0'));
+        const applicableVersion = getPendingOnboardingSemVer(new SemVer('2.4.0'));
 
         expect(applicableVersion).toBe('2.5.0');
     });
 
     it('should not return if caught up', () => {
-        const applicableVersion = getOnboardingSemVer(new SemVer('2.6.0'));
+        const applicableVersion = getPendingOnboardingSemVer(new SemVer('2.6.0'));
 
         expect(applicableVersion).toBeUndefined();
     });
diff --git a/src/components/Onboarding/Onboarding.ts b/src/components/Onboarding/Onboarding.ts
index 75e09f02..167963e5 100644
--- a/src/components/Onboarding/Onboarding.ts
+++ b/src/components/Onboarding/Onboarding.ts
@@ -116,7 +116,7 @@ const finalScreen: OnboardingScreenItem[] = [{
     backgroundColor: '#8ca2b8',
 }];
 
-export const getOnboardingSemVer = (onboardedSemVer: SemVer | null): string | undefined => {
+export const getPendingOnboardingSemVer = (onboardedSemVer: SemVer | null): string | undefined => {
     const keys = Object.keys(onboardingScreens)
         .sort((a, b) => compare(new SemVer(a), new SemVer(b)));
 
@@ -134,7 +134,7 @@ export const getOnboardingSemVer = (onboardedSemVer: SemVer | null): string | un
 };
 
 export const getOnboardingScreens = (onboardedSemVer: SemVer): OnboardingScreenItem[] => {
-    const applicableVersion = getOnboardingSemVer(onboardedSemVer);
+    const applicableVersion = getPendingOnboardingSemVer(onboardedSemVer);
 
     if (!applicableVersion) {
         return finalScreen;
diff --git a/src/components/Onboarding/OnboardingPage.tsx b/src/components/Onboarding/OnboardingPage.tsx
new file mode 100644
index 00000000..b0d91e22
--- /dev/null
+++ b/src/components/Onboarding/OnboardingPage.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+
+import {
+    ImageURISource,
+    Animated as RNAnimated,
+    StyleSheet,
+    Text,
+    View
+} from 'react-native';
+import { Button } from 'react-native-elements';
+import Animated from 'react-native-reanimated';
+import Video from 'react-native-video';
+
+import { OnboardingScreenItem } from './Onboarding';
+
+interface Props {
+    active?: boolean;
+    closeOnboarding: () => void;
+    index: number;
+    isLast: boolean;
+    item: OnboardingScreenItem;
+    width: number;
+}
+
+const OnboardingPage: React.FC<Props> = React.memo(({
+    active = false,
+    closeOnboarding,
+    isLast,
+    item,
+    width,
+}) => {
+    let media;
+    switch (item.media.type) {
+        case 'image':
+            media = (
+                <RNAnimated.Image source={item.media.source as ImageURISource}
+                    style={{
+                        width: item.media.width || '100%',
+                        height: item.media.height || '100%',
+                        borderRadius: item.media.borderRadius || 0,
+                        resizeMode: 'contain',
+                    }} />
+            );
+            break;
+        case 'video':
+            media = (
+                <View style={{
+                    backgroundColor: 'black',
+                    padding: 5,
+                    width: item.media.width || '100%',
+                    height: item.media.height || '100%',
+                    borderRadius: 10,
+                }}>
+                    <Video
+                        source={item.media.source as number}
+                        paused={!active}
+                        repeat={true}
+                        resizeMode='contain'
+                        style={{
+                            width: '100%',
+                            height: '100%',
+                        }}
+                    />
+                </View>
+            );
+            break;
+    }
+
+    return (
+        <View style={[styles.itemContainer, { width: width }]} >
+            <Animated.View style={[styles.titleContainer]}>
+                <Text style={[styles.title]}>{item.title}</Text>
+            </Animated.View>
+
+            <Animated.View style={[styles.imageContainer]}>
+                {media}
+            </Animated.View>
+
+            <Animated.View style={[styles.descriptionContainer]}>
+                <Text style={[styles.description, { color: item.color }]}>
+                    {item.description}
+                </Text>
+                <View style={{ alignContent: 'center' }}>
+                    {isLast &&
+                        <Button
+                            title="Get Started"
+                            titleStyle={{ color: 'black' }}
+                            onPress={closeOnboarding}
+                            buttonStyle={[styles.finishButton]}
+                            type='outline'
+                        />
+                    }
+                </View>
+            </Animated.View>
+        </View>
+    );
+});
+
+export default OnboardingPage;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+    },
+    itemContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'space-around',
+    },
+    titleContainer: {
+        height: '15%',
+        justifyContent: 'flex-end',
+    },
+    title: {
+        fontSize: 30,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    imageContainer: {
+        height: '40%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '80%',
+        padding: 20,
+    },
+    descriptionContainer: {
+        height: '25%',
+        justifyContent: 'flex-start',
+        padding: 20,
+    },
+    description: {
+        fontSize: 25,
+        textAlign: 'center',
+    },
+    finishButton: {
+        borderColor: 'black',
+        borderRadius: 20,
+        padding: 10,
+        margin: 15,
+    },
+});
diff --git a/src/components/Onboarding/SkipButton.tsx b/src/components/Onboarding/SkipButton.tsx
index 2ca2d001..0d4cc0ac 100644
--- a/src/components/Onboarding/SkipButton.tsx
+++ b/src/components/Onboarding/SkipButton.tsx
@@ -1,16 +1,16 @@
 import React, { useEffect } from 'react';
 
 import {
-    View, StyleSheet,
+    StyleSheet,
     Text,
     TouchableOpacity,
+    View,
 } from 'react-native';
 import Animated, {
     useAnimatedStyle,
     useSharedValue,
     withTiming
 } from 'react-native-reanimated';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 type Props = {
     visible: boolean;
@@ -31,9 +31,7 @@ const SkipButton: React.FunctionComponent<Props> = ({ visible, onPress }) => {
     });
 
     return (
-        <SafeAreaView pointerEvents='box-none' edges={['top', 'bottom']}
-            style={[StyleSheet.absoluteFill]}
-        >
+        <View pointerEvents='box-none' style={[StyleSheet.absoluteFill]}>
             <Animated.View pointerEvents='box-none'
                 style={[{ alignItems: 'flex-end' }, skipButtonStyles]}
             >
@@ -45,7 +43,7 @@ const SkipButton: React.FunctionComponent<Props> = ({ visible, onPress }) => {
                     </View>
                 </TouchableOpacity>
             </Animated.View>
-        </SafeAreaView>
+        </View>
     );
 };
 
diff --git a/src/screens/AppInfoScreen.tsx b/src/screens/AppInfoScreen.tsx
index 4d0cf8a5..c3011c1d 100644
--- a/src/screens/AppInfoScreen.tsx
+++ b/src/screens/AppInfoScreen.tsx
@@ -59,7 +59,7 @@ const AppInfoScreen: React.FunctionComponent<Props> = ({ navigation }) => {
 
     return (
         <ScrollView style={{ backgroundColor: '#F2F2F7', flex: 1 }}>
-            <View style={[styles.paragraph, { alignItems: 'center' }]}>
+            <View style={[styles.iconWrapper, { alignItems: 'center' }]}>
                 <RotatingIcon />
                 <Text style={{ color: '#999' }} onPress={alertWithVersion}>
                     ScorePad with Rounds v{appVersion}
@@ -88,7 +88,7 @@ const AppInfoScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                 <SectionItem>
                     <SectionItemText text="Instructions" />
                     <Button title="View Tutorial" type="clear" onPress={() => {
-                        navigation.navigate('Tutorial');
+                        navigation.navigate('Onboarding', { onboarding: false });
                     }} />
                 </SectionItem>
             </Section>
@@ -110,10 +110,9 @@ const AppInfoScreen: React.FunctionComponent<Props> = ({ navigation }) => {
 };
 
 const styles = StyleSheet.create({
-    paragraph: {
+    iconWrapper: {
         flex: 1,
-        margin: 20,
-        padding: 20,
+        margin: 10,
         alignContent: 'center',
         justifyContent: 'center',
     },
diff --git a/src/screens/ListScreen.tsx b/src/screens/ListScreen.tsx
index 996064ab..2dc44c1e 100644
--- a/src/screens/ListScreen.tsx
+++ b/src/screens/ListScreen.tsx
@@ -2,15 +2,19 @@ import React, { memo, useEffect } from 'react';
 
 import { ParamListBase } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import * as Application from 'expo-application';
 import { BlurView } from 'expo-blur';
 import { StyleSheet, Text, View } from 'react-native';
 import Animated, { Easing, LinearTransition } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { SemVer, parse } from 'semver';
 
 import { selectGameIds } from '../../redux/GamesSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { setOnboardedVersion } from '../../redux/SettingsSlice';
 import GameListItem from '../components/GameListItem';
+import { getPendingOnboardingSemVer } from '../components/Onboarding/Onboarding';
+import logger from '../Logger';
 
 interface Props {
     navigation: NativeStackNavigationProp<ParamListBase, string, undefined>;
@@ -20,9 +24,26 @@ const ListScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     const gameIds = useAppSelector(state => selectGameIds(state));
     const dispatch = useAppDispatch();
 
+    const onboardedStr = useAppSelector(state => state.settings.onboarded);
+    const onboardedSemVer = parse(onboardedStr);
+    const appVersion = new SemVer(Application.nativeApplicationVersion || '0.0.0');
+
+    logger.info(`App Version: ${appVersion}`);
+    logger.info(`Onboarded Version: ${onboardedSemVer}`);
+
+    const pendingOnboardingVer = getPendingOnboardingSemVer(onboardedSemVer);
+    const onboarded = pendingOnboardingVer === undefined;
+
+    logger.info(`Pending onboard: ${pendingOnboardingVer}`);
+    logger.info(`Onboarded: ${onboarded}`);
+
     useEffect(() => {
-        dispatch(setOnboardedVersion());
-    }, [gameIds.length]);
+        if (!onboarded) {
+            logger.info('Show onboarding!');
+            navigation.navigate('Onboarding', { onboarding: true, version: onboardedSemVer });
+            dispatch(setOnboardedVersion());
+        }
+    }, [onboarded, dispatch, navigation]);
 
     return (
         <SafeAreaView edges={['bottom', 'left', 'right']} style={{ backgroundColor: 'white', flex: 1 }}>
diff --git a/src/screens/OnboardingScreen.tsx b/src/screens/OnboardingScreen.tsx
index 207c6e82..ebae95e9 100644
--- a/src/screens/OnboardingScreen.tsx
+++ b/src/screens/OnboardingScreen.tsx
@@ -3,55 +3,40 @@ import React from 'react';
 import { RouteProp } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import {
-    Dimensions,
-    ImageURISource,
     Animated as RNAnimated,
     StyleSheet,
-    Text,
     View,
-    ViewToken,
+    ViewToken
 } from 'react-native';
 import { ExpandingDot } from 'react-native-animated-pagination-dots';
-import { Button } from 'react-native-elements';
 import Animated, { FadeIn } from 'react-native-reanimated';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import Video from 'react-native-video';
-import { parse, SemVer } from 'semver';
+import { SemVer } from 'semver';
 
-import { useAppSelector } from '../../redux/hooks';
 import { getOnboardingScreens, OnboardingScreenItem } from '../components/Onboarding/Onboarding';
+import OnboardingPage from '../components/Onboarding/OnboardingPage';
 import SkipButton from '../components/Onboarding/SkipButton';
-import logger from '../Logger';
 import { RootStackParamList } from '../Navigation';
 
-const { width } = Dimensions.get('screen');
-
-type OnboardingScreenItemProps = {
-    item: OnboardingScreenItem;
-    index: number;
-};
-
 export interface Props {
     navigation: NativeStackNavigationProp<RootStackParamList, 'Onboarding' | 'Tutorial'>;
     route: RouteProp<RootStackParamList, 'Onboarding' | 'Tutorial'>;
 }
 
 const OnboardingScreen: React.FunctionComponent<Props> = ({ navigation, route }) => {
-    const { onboarding = false } = route.params;
-
-    const onboardedStr = useAppSelector(state => state.settings.onboarded);
-    const onboardedSemVer = parse(onboardedStr);
+    const [width, setWidth] = React.useState(0);
 
-    logger.info(onboardedSemVer);
+    const {
+        onboarding = false,
+        version = new SemVer('0.0.0')
+    } = route.params;
 
-    const onboardingScreens: OnboardingScreenItem[] = getOnboardingScreens(onboarding ? onboardedSemVer || new SemVer('0.0.0') : new SemVer('0.0.0'));
+    const onboardingScreens: OnboardingScreenItem[] = getOnboardingScreens(onboarding ? version || new SemVer('0.0.0') : new SemVer('0.0.0'));
 
     const scrollX = React.useRef(new RNAnimated.Value(0)).current;
     const keyExtractor = React.useCallback((_: OnboardingScreenItem, index: number) => index.toString(), []);
 
     // Current item index of flatlist
     const [activeIndex, setActiveIndex] = React.useState<number>(0);
-    const flatListRef = React.useRef<RNAnimated.FlatList>(null);
 
     const closeOnboarding = React.useCallback(() => {
         if (onboarding) navigation.navigate('List');
@@ -70,198 +55,95 @@ const OnboardingScreen: React.FunctionComponent<Props> = ({ navigation, route })
 
     const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 50 });
 
-    const renderItem = React.useCallback(({ item, index }: OnboardingScreenItemProps) => {
-
-        let media;
-        switch (item.media.type) {
-            case 'image':
-                media = (
-                    <RNAnimated.Image source={item.media.source as ImageURISource}
-                        style={{
-                            width: item.media.width || '100%',
-                            height: item.media.height || '100%',
-                            borderRadius: item.media.borderRadius || 0,
-                            resizeMode: 'contain',
-                        }} />
-                );
-                break;
-            case 'video':
-                media = (
-                    <View style={{
-                        backgroundColor: 'black',
-                        padding: 5,
-                        width: item.media.width || '100%',
-                        height: item.media.height || '100%',
-                        borderRadius: 10,
-                    }}>
-                        <Video
-                            source={item.media.source as number}
-                            paused={index != activeIndex}
-                            repeat={true}
-                            resizeMode='contain'
-                            style={{
-                                width: '100%',
-                                height: '100%',
-                            }}
+    return (
+        <Animated.View style={[styles.container]} entering={FadeIn}
+            onLayout={event => {
+                const { width } = event.nativeEvent.layout;
+                setWidth(width);
+            }}>
+            <View style={[StyleSheet.absoluteFillObject]}>
+                {onboardingScreens.map((item, index) => {
+                    const inputRange = [
+                        (index - 1) * width,
+                        index * width,
+                        (index + 1) * width,
+                    ];
+                    const colorFade = scrollX.interpolate({
+                        inputRange,
+                        outputRange: [0, 1, 0],
+                    });
+                    return (
+                        <RNAnimated.View key={index}
+                            style={[
+                                StyleSheet.absoluteFillObject,
+                                {
+                                    backgroundColor: item.backgroundColor,
+                                    opacity: colorFade
+                                },
+                            ]}
                         />
-                    </View>
-                );
-                break;
-        }
-
-        return (
-            <View style={[styles.itemContainer]}>
-                <Animated.View style={[styles.titleContainer]}>
-                    <Text style={[styles.title]}>{item.title}</Text>
-                </Animated.View>
-
-                <Animated.View style={[styles.imageContainer]}>
-                    {media}
-                </Animated.View>
-
-                <Animated.View style={[styles.descriptionContainer]}>
-                    <Text style={[styles.description, { color: item.color }]}>
-                        {item.description}
-                    </Text>
-                    <View style={{ alignContent: 'center' }}>
-                        {index === onboardingScreens.length - 1 &&
-                            <Button
-                                title="Get Started"
-                                titleStyle={{ color: 'black' }}
-                                onPress={closeOnboarding}
-                                buttonStyle={[styles.finishButton]}
-                                type='outline'
-                            />
-                        }
-                    </View>
-                </Animated.View>
+                    );
+                })}
             </View>
-        );
-    }, [activeIndex]);
-
-    return (
-        <Animated.View style={[styles.container]} entering={FadeIn}>
-            <SafeAreaView edges={(['top', 'bottom'])} style={onboarding ? { paddingTop: 40 } : {}}>
-                <View style={[StyleSheet.absoluteFillObject]}>
-                    {onboardingScreens.map((item, index) => {
-                        const inputRange = [
-                            (index - 1) * width,
-                            index * width,
-                            (index + 1) * width,
-                        ];
-                        const colorFade = scrollX.interpolate({
-                            inputRange,
-                            outputRange: [0, 1, 0],
-                        });
-                        return (
-                            <RNAnimated.View key={index}
-                                style={[
-                                    StyleSheet.absoluteFillObject,
-                                    {
-                                        backgroundColor: item.backgroundColor,
-                                        opacity: colorFade
-                                    },
-                                ]}
-                            />
-                        );
-                    })}
-                </View>
-
-                <RNAnimated.FlatList
-                    ref={flatListRef}
-                    onViewableItemsChanged={onViewRef.current}
-                    viewabilityConfig={viewConfigRef.current}
-                    data={onboardingScreens}
-                    renderItem={renderItem}
-                    keyExtractor={keyExtractor}
-                    showsHorizontalScrollIndicator={false}
-                    pagingEnabled
-                    horizontal
-                    decelerationRate={'normal'}
-                    scrollEventThrottle={16}
-                    onScroll={RNAnimated.event(
-                        [{ nativeEvent: { contentOffset: { x: scrollX } } }],
-                        {
-                            useNativeDriver: false,
-                        }
-                    )}
-                />
-
-                <ExpandingDot
-                    data={onboardingScreens}
-                    scrollX={scrollX}
-                    expandingDotWidth={30}
-                    dotStyle={{
-                        width: 10,
-                        height: 10,
-                        backgroundColor: '#347af0',
-                        borderRadius: 5,
-                        marginHorizontal: 5
-                    }}
-                    inActiveDotOpacity={0.2}
-                    activeDotColor={'#fff'}
-                    containerStyle={{ flex: 1 }}
-                />
 
-            </SafeAreaView>
-
-            {onboarding &&
-                <SkipButton
-                    visible={activeIndex !== onboardingScreens.length - 1}
-                    onPress={closeOnboarding}
-                />
-            }
+            <RNAnimated.FlatList
+                onViewableItemsChanged={onViewRef.current}
+                viewabilityConfig={viewConfigRef.current}
+                data={onboardingScreens}
+                renderItem={({ item, index }) =>
+                    <OnboardingPage
+                        closeOnboarding={closeOnboarding}
+                        index={index}
+                        item={item}
+                        width={width}
+                        active={index === activeIndex}
+                        isLast={index === onboardingScreens.length - 1}
+                    />
+                }
+                keyExtractor={keyExtractor}
+                showsHorizontalScrollIndicator={false}
+                pagingEnabled
+                horizontal
+                decelerationRate={'normal'}
+                scrollEventThrottle={16}
+                onScroll={RNAnimated.event(
+                    [{ nativeEvent: { contentOffset: { x: scrollX } } }],
+                    {
+                        useNativeDriver: false,
+                    }
+                )}
+            />
+
+            <ExpandingDot
+                data={onboardingScreens}
+                scrollX={scrollX}
+                expandingDotWidth={30}
+                dotStyle={{
+                    width: 10,
+                    height: 10,
+                    backgroundColor: '#347af0',
+                    borderRadius: 5,
+                    marginHorizontal: 5
+                }}
+                inActiveDotOpacity={0.2}
+                activeDotColor={'#fff'}
+                containerStyle={{ flex: 1 }}
+            />
+
+            <SkipButton
+                visible={activeIndex !== onboardingScreens.length - 1}
+                onPress={closeOnboarding}
+            />
         </Animated.View >
     );
 };
 
-const borders = false;
-
 const styles = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-    },
-    itemContainer: {
-        flex: 1,
-        width: width,
-        alignItems: 'center',
-        justifyContent: 'space-around',
-    },
-    titleContainer: {
-        height: '15%',
-        justifyContent: 'flex-end',
-        borderWidth: borders ? 1 : 0,
-    },
-    title: {
-        fontSize: 30,
-        fontWeight: 'bold',
-        textAlign: 'center',
-    },
-    imageContainer: {
-        height: '40%',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '80%',
-        padding: 20,
-        borderWidth: borders ? 1 : 0,
-    },
-    descriptionContainer: {
-        height: '25%',
-        justifyContent: 'flex-start',
-        padding: 20,
-        borderWidth: borders ? 1 : 0,
-    },
-    description: {
-        fontSize: 25,
-        textAlign: 'center',
-    },
-    finishButton: {
-        borderColor: 'black',
-        borderRadius: 20,
-        padding: 10,
-        margin: 15,
+        width: '100%',
     },
 });