diff --git a/assets/animations/Abracadabra.lottie b/assets/animations/Abracadabra.lottie
new file mode 100644
index 000000000000..8805aed1944e
Binary files /dev/null and b/assets/animations/Abracadabra.lottie differ
diff --git a/assets/animations/MagicCode.lottie b/assets/animations/MagicCode.lottie
new file mode 100644
index 000000000000..ea94f1138f97
Binary files /dev/null and b/assets/animations/MagicCode.lottie differ
diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx
index 598819e19361..00089f8094f1 100644
--- a/src/components/LottieAnimations/index.tsx
+++ b/src/components/LottieAnimations/index.tsx
@@ -3,6 +3,11 @@ import variables from '@styles/variables';
 import type DotLottieAnimation from './types';
 
 const DotLottieAnimations = {
+    Abracadabra: {
+        file: require('@assets/animations/Abracadabra.lottie'),
+        w: 375,
+        h: 400,
+    },
     FastMoney: {
         file: require('@assets/animations/FastMoney.lottie'),
         w: 375,
@@ -46,6 +51,11 @@ const DotLottieAnimations = {
         h: 400,
         backgroundColor: colors.ice500,
     },
+    MagicCode: {
+        file: require('@assets/animations/MagicCode.lottie'),
+        w: 200,
+        h: 164,
+    },
     Magician: {
         file: require('@assets/animations/Magician.lottie'),
         w: 853,
diff --git a/src/components/ValidateCode/JustSignedInModal.tsx b/src/components/ValidateCode/JustSignedInModal.tsx
index 19e67b0c56fe..527493c778cb 100644
--- a/src/components/ValidateCode/JustSignedInModal.tsx
+++ b/src/components/ValidateCode/JustSignedInModal.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
+import Lottie from '@components/Lottie';
+import LottieAnimations from '@components/LottieAnimations';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
@@ -22,10 +23,12 @@ function JustSignedInModal({is2FARequired}: JustSignedInModalProps) {
         <View style={styles.deeplinkWrapperContainer}>
             <View style={styles.deeplinkWrapperMessage}>
                 <View style={styles.mb2}>
-                    <Icon
-                        width={variables.modalTopIconWidth}
-                        height={is2FARequired ? variables.modalTopIconHeight : variables.modalTopBigIconHeight}
-                        src={is2FARequired ? Illustrations.SafeBlue : Illustrations.Abracadabra}
+                    <Lottie
+                        source={is2FARequired ? LottieAnimations.Safe : LottieAnimations.Abracadabra}
+                        style={styles.justSignedInModalAnimation(is2FARequired)}
+                        webStyle={styles.justSignedInModalAnimation(is2FARequired)}
+                        autoPlay
+                        loop
                     />
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>
diff --git a/src/components/ValidateCode/ValidateCodeModal.tsx b/src/components/ValidateCode/ValidateCodeModal.tsx
index 1e42773c2dc2..a1d5c4ff3faa 100644
--- a/src/components/ValidateCode/ValidateCodeModal.tsx
+++ b/src/components/ValidateCode/ValidateCodeModal.tsx
@@ -4,7 +4,8 @@ import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
+import Lottie from '@components/Lottie';
+import LottieAnimations from '@components/LottieAnimations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
@@ -37,10 +38,12 @@ function ValidateCodeModal({code, accountID, session = {}}: ValidateCodeModalPro
         <View style={styles.deeplinkWrapperContainer}>
             <View style={styles.deeplinkWrapperMessage}>
                 <View style={styles.mb2}>
-                    <Icon
-                        width={variables.modalTopIconWidth}
-                        height={variables.modalTopIconHeight}
-                        src={Illustrations.MagicCode}
+                    <Lottie
+                        source={LottieAnimations.MagicCode}
+                        style={styles.magicCodeAnimation}
+                        webStyle={styles.magicCodeAnimation}
+                        autoPlay
+                        loop
                     />
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('validateCodeModal.title')}</Text>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 354ed21ac7d6..f2de312bd289 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4439,6 +4439,15 @@ const styles = (theme: ThemeColors) =>
             borderWidth: 2,
             overflow: 'hidden',
         },
+
+        magicCodeAnimation: {
+            width: variables.modalTopIconWidth,
+        },
+
+        justSignedInModalAnimation: (is2FARequired: boolean) => ({
+            height: is2FARequired ? variables.modalTopIconHeight : variables.modalTopBigIconHeight,
+        }),
+
         moneyRequestViewImage: {
             ...spacing.mh5,
             ...spacing.mv3,