diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index b8559c208fe9..f35c620d2521 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -343,7 +343,6 @@ function FeatureTrainingModal({
 
     return (
         <Modal
-            id="FeatureTrainingModal"
             avoidKeyboard={avoidKeyboard}
             isVisible={isModalVisible}
             type={onboardingIsMediumOrLargerScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index e2d939403f4f..49d8957b50a4 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -34,7 +34,7 @@ type ModalComponentProps = (ReactNativeModalProps | ModalProps) & {
 };
 
 function ModalComponent({type, ...props}: ModalComponentProps) {
-    if (type === CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED && props.id !== 'FeatureTrainingModal') {
+    if (type === CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED) {
         // eslint-disable-next-line react/jsx-props-no-spreading
         return <BottomDockedModal {...(props as ModalProps)} />;
     }
@@ -82,7 +82,6 @@ function BaseModal(
         shouldPreventScrollOnFocus = false,
         enableEdgeToEdgeBottomSafeAreaPadding,
         shouldApplySidePanelOffset = type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED,
-        id,
     }: BaseModalProps,
     ref: React.ForwardedRef<View>,
 ) {
@@ -308,7 +307,6 @@ function BaseModal(
                         avoidKeyboard={avoidKeyboard}
                         customBackdrop={shouldUseCustomBackdrop ? <Overlay onPress={handleBackdropPress} /> : undefined}
                         type={type}
-                        id={id}
                     >
                         <ModalContent
                             onModalWillShow={saveFocusState}
diff --git a/src/components/Modal/BottomDockedModal/Container/index.web.tsx b/src/components/Modal/BottomDockedModal/Container/index.web.tsx
index c847a1acb05f..6a04310d3275 100644
--- a/src/components/Modal/BottomDockedModal/Container/index.web.tsx
+++ b/src/components/Modal/BottomDockedModal/Container/index.web.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useRef} from 'react';
-import Animated, {Easing, Keyframe} from 'react-native-reanimated';
+import Animated, {Easing, Keyframe, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import type ModalProps from '@components/Modal/BottomDockedModal/types';
 import type {ContainerProps} from '@components/Modal/BottomDockedModal/types';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -9,22 +9,22 @@ const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory();
 function Container({style, animationInTiming = 300, animationOutTiming = 300, onOpenCallBack, onCloseCallBack, ...props}: ModalProps & ContainerProps) {
     const styles = useThemeStyles();
     const onCloseCallbackRef = useRef(onCloseCallBack);
+    const opacity = useSharedValue(0);
+    const isInitiated = useSharedValue(false);
 
     useEffect(() => {
         onCloseCallbackRef.current = onCloseCallBack;
     }, [onCloseCallBack]);
 
-    const Entering = useMemo(() => {
-        const FadeIn = new Keyframe({
-            from: {opacity: 0},
-            to: {
-                opacity: 1,
-                easing,
-            },
-        });
+    useEffect(() => {
+        if (isInitiated.get()) {
+            return;
+        }
+        isInitiated.set(true);
+        opacity.set(withTiming(1, {duration: animationInTiming, easing}, onOpenCallBack));
+    }, [animationInTiming, onOpenCallBack, opacity, isInitiated]);
 
-        return FadeIn.duration(animationInTiming).withCallback(onOpenCallBack);
-    }, [animationInTiming, onOpenCallBack]);
+    const animatedStyles = useAnimatedStyle(() => ({opacity: opacity.get()}), [opacity]);
 
     const Exiting = useMemo(() => {
         const FadeOut = new Keyframe({
@@ -41,9 +41,8 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on
 
     return (
         <Animated.View
-            style={[style, styles.modalContainer, styles.modalAnimatedContainer]}
+            style={[style, styles.modalContainer, styles.modalAnimatedContainer, animatedStyles]}
             exiting={Exiting}
-            entering={Entering}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >
diff --git a/src/components/Modal/BottomDockedModal/index.tsx b/src/components/Modal/BottomDockedModal/index.tsx
index 1968a10ca53e..27d16d12abc6 100644
--- a/src/components/Modal/BottomDockedModal/index.tsx
+++ b/src/components/Modal/BottomDockedModal/index.tsx
@@ -1,8 +1,9 @@
 import noop from 'lodash/noop';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {NativeEventSubscription, ViewStyle} from 'react-native';
-import {BackHandler, Dimensions, InteractionManager, KeyboardAvoidingView, Modal, View} from 'react-native';
+import {BackHandler, Dimensions, InteractionManager, Modal, View} from 'react-native';
 import {LayoutAnimationConfig} from 'react-native-reanimated';
+import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getPlatform from '@libs/getPlatform';
 import CONST from '@src/CONST';