diff --git a/apps/mobile/src/components/SplashScreen/index.js b/apps/mobile/src/components/SplashScreen/index.js
index d9b26db3b..fc1c4787e 100644
--- a/apps/mobile/src/components/SplashScreen/index.js
+++ b/apps/mobile/src/components/SplashScreen/index.js
@@ -24,6 +24,7 @@ import Paragraph from '../Typography/Paragraph';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {DDS} from '../../services/DeviceDetection';
 import {openLinkInBrowser} from '../../utils/functions';
+import {Modal} from 'react-native';
 
 const features = [
   {
@@ -70,11 +71,9 @@ const SplashScreen = () => {
   const [isNext, setIsNext] = useState(true);
 
   const opacity = useValue(0);
-  const translateY = useValue(20);
-  const translateY2 = useValue(0);
 
   useEffect(() => {
-    Storage.read('introCompleted').then(async (r) => {
+    Storage.read('introCompleted').then(async r => {
       requestAnimationFrame(() => {
         if (!r) {
           setVisible(true);
@@ -83,185 +82,175 @@ const SplashScreen = () => {
             duration: 500,
             easing: Easing.in(Easing.ease),
           }).start();
-          timing(translateY, {
-            toValue: 0,
-            duration: 500,
-            easing: Easing.in(Easing.ease),
-          }).start();
         }
       });
     });
   }, []);
 
   const hide = async () => {
-    timing(translateY2, {
-      toValue: dHeight * 2,
-      duration: 500,
-      easing: Easing.in(Easing.ease),
-    }).start();
-    await sleep(500);
     setVisible(false);
   };
 
   return (
     visible && (
-      <Animated.View
-        style={{
-          zIndex: 999,
-          ...getElevation(10),
-          width: '100%',
-          height: '100%',
-          position: 'absolute',
-          backgroundColor: colors.bg,
-          transform: [
-            {
-              translateY: translateY2,
-            },
-          ],
-        }}>
+      <Modal animationType="slide" statusBarTranslucent visible>
         <Animated.View
           style={{
             width: '100%',
             height: '100%',
-            justifyContent: 'center',
-            alignItems: 'center',
-            padding: 12,
-            opacity: opacity,
-            transform: [
-              {
-                translateY: translateY,
-              },
-            ],
+            backgroundColor: colors.bg,
           }}>
-          <View>
-            <Carousel
-              ref={carouselRef}
-              data={features}
-              itemWidth={dWidth}
-              sliderWidth={dWidth}
-              loop={false}
-              shouldOptimizeUpdates
-              renderItem={({item, index}) => (
-                <View
-                  style={{
-                    height: '100%',
-                    justifyContent: 'center',
-                  }}>
+          <Animated.View
+            style={{
+              width: '100%',
+              height: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+              padding: 12,
+              opacity: opacity,
+            }}>
+            <View>
+              <Carousel
+                ref={carouselRef}
+                data={features}
+                itemWidth={dWidth}
+                sliderWidth={dWidth}
+                loop={false}
+                onSnapToItem={i => {
+                  currentIndex = i;
+                }}
+                activeAnimationType="timing"
+                shouldOptimizeUpdates
+                renderItem={({item, index}) => (
                   <View
-                    key={item.description}
                     style={{
-                      paddingVertical: 5,
-                      marginBottom: 10,
-                      alignSelf: 'center',
+                      height: '100%',
+                      justifyContent: 'center',
                     }}>
                     <View
+                      key={item.description}
                       style={{
-                        flexWrap: 'wrap',
-                        width: '100%',
-                        alignItems: 'center',
+                        paddingVertical: 5,
+                        marginBottom: 10,
+                        alignSelf: 'center',
                       }}>
-                      {item.type === 'image' ? (
-                        <Image
-                          source={item.icon}
-                          style={{
-                            width: 170,
-                            height: 170,
-                          }}
-                        />
-                      ) : item.type === 'icon' ? (
-                        <Icon color={item.color} name={item.icon} size={170} />
-                      ) : (
-                        <SvgXml
-                          xml={
-                            item.icon
-                              ? item.icon(colors.accent)
-                              : NOTE_SVG(colors.accent)
-                          }
-                          width={250}
-                          height={250}
-                        />
-                      )}
-
-                      {item.title && (
-                        <Heading
-                          size={SIZE.xl}
-                          style={{
-                            textAlign: 'center',
-                            alignSelf: 'center',
-                            marginTop: 10,
-                          }}>
-                          {item.title}
-                        </Heading>
-                      )}
-
-                      {item.description && (
-                        <Paragraph
-                          size={SIZE.md}
-                          color={colors.icon}
-                          textBreakStrategy="balanced"
-                          style={{
-                            fontWeight: 'normal',
-                            textAlign: 'center',
-                            alignSelf: 'center',
-                            maxWidth: DDS.isTab ? 350 : '80%',
-                          }}>
-                          {item.description}
-                        </Paragraph>
-                      )}
-
-                      {item.link && (
-                        <Button
-                          title="Learn more"
-                          fontSize={SIZE.md}
-                          onPress={() => {
-                            try {
-                              openLinkInBrowser(item.link, colors);
-                            } catch (e) {
-                              console.log(e, 'ERROR');
+                      <View
+                        style={{
+                          flexWrap: 'wrap',
+                          width: '100%',
+                          alignItems: 'center',
+                        }}>
+                        {item.type === 'image' ? (
+                          <Image
+                            source={item.icon}
+                            style={{
+                              width: 170,
+                              height: 170,
+                            }}
+                          />
+                        ) : item.type === 'icon' ? (
+                          <Icon
+                            color={item.color}
+                            name={item.icon}
+                            size={170}
+                          />
+                        ) : (
+                          <SvgXml
+                            xml={
+                              item.icon
+                                ? item.icon(colors.accent)
+                                : NOTE_SVG(colors.accent)
                             }
-                          }}
-                        />
-                      )}
+                            width={250}
+                            height={250}
+                          />
+                        )}
+
+                        {item.title && (
+                          <Heading
+                            size={SIZE.xl}
+                            style={{
+                              textAlign: 'center',
+                              alignSelf: 'center',
+                              marginTop: 10,
+                            }}>
+                            {item.title}
+                          </Heading>
+                        )}
+
+                        {item.description && (
+                          <Paragraph
+                            size={SIZE.md}
+                            color={colors.icon}
+                            textBreakStrategy="balanced"
+                            style={{
+                              fontWeight: 'normal',
+                              textAlign: 'center',
+                              alignSelf: 'center',
+                              maxWidth: DDS.isTab ? 350 : '80%',
+                            }}>
+                            {item.description}
+                          </Paragraph>
+                        )}
+
+                        {item.link && (
+                          <Button
+                            title="Learn more"
+                            fontSize={SIZE.md}
+                            onPress={() => {
+                              try {
+                                openLinkInBrowser(item.link, colors);
+                              } catch (e) {
+                                console.log(e, 'ERROR');
+                              }
+                            }}
+                          />
+                        )}
+                      </View>
                     </View>
                   </View>
-                </View>
-              )}
-            />
-          </View>
+                )}
+              />
+            </View>
 
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              width: '100%',
-              position: 'absolute',
-              bottom: 25,
-            }}>
-            <View />
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                width: '100%',
+                position: 'absolute',
+                bottom: 25,
+              }}>
+              <View />
 
-            <Button
-              fontSize={SIZE.md}
-              height={50}
-              width={isNext ? null : '100%'}
-              onPress={async () => {
-                if (isNext) {
-                  carouselRef.current?.snapToItem(currentIndex + 1,true,true);
-                  currentIndex++;
-                  if (currentIndex === 4) {
-                    setIsNext(false);
+              <Button
+                fontSize={SIZE.md}
+                height={50}
+                width={isNext ? null : '100%'}
+                onPress={async () => {
+                  if (isNext) {
+                    carouselRef.current?.snapToItem(
+                      currentIndex + 1,
+                      true,
+                      true,
+                    );
+                    currentIndex++;
+                    if (currentIndex === 4) {
+                      setIsNext(false);
+                    }
+                  } else {
+                    await hide();
+                    await Storage.write('introCompleted', 'true');
                   }
-                } else {
-                  await hide();
-                  await Storage.write('introCompleted', 'true');
-                }
-              }}
-              style={{paddingHorizontal: 24}}
-              type="accent"
-              title={isNext ? 'Next' : 'Start taking notes'}
-            />
-          </View>
+                }}
+                style={{paddingHorizontal: 24}}
+                type="accent"
+                title={isNext ? 'Next' : 'Start taking notes'}
+              />
+            </View>
+          </Animated.View>
         </Animated.View>
-      </Animated.View>
+      </Modal>
     )
   );
 };