diff --git a/src/pages/home/report/FloatingMessageCounter/index.tsx b/src/pages/home/report/FloatingMessageCounter.tsx
similarity index 76%
rename from src/pages/home/report/FloatingMessageCounter/index.tsx
rename to src/pages/home/report/FloatingMessageCounter.tsx
index d3048848936d..0d92946e3d66 100644
--- a/src/pages/home/report/FloatingMessageCounter/index.tsx
+++ b/src/pages/home/report/FloatingMessageCounter.tsx
@@ -1,5 +1,6 @@
-import React, {useCallback, useEffect, useMemo} from 'react';
-import {Animated, View} from 'react-native';
+import React, {useCallback, useEffect} from 'react';
+import {View} from 'react-native';
+import Animated, {useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -7,9 +8,7 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useNativeDriver from '@libs/useNativeDriver';
 import CONST from '@src/CONST';
-import FloatingMessageCounterContainer from './FloatingMessageCounterContainer';
 
 type FloatingMessageCounterProps = {
     /** Whether the New Messages indicator is active */
@@ -26,20 +25,18 @@ function FloatingMessageCounter({isActive = false, onClick = () => {}}: Floating
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const translateY = useMemo(() => new Animated.Value(MARKER_INACTIVE_TRANSLATE_Y), []);
+    const translateY = useSharedValue(MARKER_INACTIVE_TRANSLATE_Y);
 
     const show = useCallback(() => {
-        Animated.spring(translateY, {
-            toValue: MARKER_ACTIVE_TRANSLATE_Y,
-            useNativeDriver,
-        }).start();
+        'worklet';
+
+        translateY.value = withSpring(MARKER_ACTIVE_TRANSLATE_Y);
     }, [translateY]);
 
     const hide = useCallback(() => {
-        Animated.spring(translateY, {
-            toValue: MARKER_INACTIVE_TRANSLATE_Y,
-            useNativeDriver,
-        }).start();
+        'worklet';
+
+        translateY.value = withSpring(MARKER_INACTIVE_TRANSLATE_Y);
     }, [translateY]);
 
     useEffect(() => {
@@ -50,10 +47,15 @@ function FloatingMessageCounter({isActive = false, onClick = () => {}}: Floating
         }
     }, [isActive, show, hide]);
 
+    const wrapperStyle = useAnimatedStyle(() => ({
+        ...styles.floatingMessageCounterWrapper,
+        transform: [{translateY: translateY.value}],
+    }));
+
     return (
-        <FloatingMessageCounterContainer
+        <Animated.View
             accessibilityHint={translate('accessibilityHints.scrollToNewestMessages')}
-            containerStyles={styles.floatingMessageCounterTransformation(translateY)}
+            style={wrapperStyle}
         >
             <View style={styles.floatingMessageCounter}>
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
@@ -79,7 +81,7 @@ function FloatingMessageCounter({isActive = false, onClick = () => {}}: Floating
                     </Button>
                 </View>
             </View>
-        </FloatingMessageCounterContainer>
+        </Animated.View>
     );
 }
 
diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.tsx b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.tsx
deleted file mode 100644
index 64391909b197..000000000000
--- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import {Animated, View} from 'react-native';
-import useThemeStyles from '@hooks/useThemeStyles';
-import type FloatingMessageCounterContainerProps from './types';
-
-function FloatingMessageCounterContainer({containerStyles, children}: FloatingMessageCounterContainerProps) {
-    const styles = useThemeStyles();
-
-    return (
-        <Animated.View style={[styles.floatingMessageCounterWrapperAndroid, containerStyles]}>
-            <View style={styles.floatingMessageCounterSubWrapperAndroid}>{children}</View>
-        </Animated.View>
-    );
-}
-
-FloatingMessageCounterContainer.displayName = 'FloatingMessageCounterContainer';
-
-export default FloatingMessageCounterContainer;
diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.tsx b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.tsx
deleted file mode 100644
index 8757d66160c4..000000000000
--- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import {Animated} from 'react-native';
-import useThemeStyles from '@hooks/useThemeStyles';
-import type FloatingMessageCounterContainerProps from './types';
-
-function FloatingMessageCounterContainer({accessibilityHint, containerStyles, children}: FloatingMessageCounterContainerProps) {
-    const styles = useThemeStyles();
-
-    return (
-        <Animated.View
-            accessibilityHint={accessibilityHint}
-            style={[styles.floatingMessageCounterWrapper, containerStyles]}
-        >
-            {children}
-        </Animated.View>
-    );
-}
-
-FloatingMessageCounterContainer.displayName = 'FloatingMessageCounterContainer';
-
-export default FloatingMessageCounterContainer;
diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/types.ts b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/types.ts
deleted file mode 100644
index cfe791eed79c..000000000000
--- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type {StyleProp, ViewStyle} from 'react-native';
-import type ChildrenProps from '@src/types/utils/ChildrenProps';
-
-type FloatingMessageCounterContainerProps = ChildrenProps & {
-    /** Styles to be assigned to Container */
-    containerStyles?: StyleProp<ViewStyle>;
-
-    /** Specifies the accessibility hint for the component */
-    accessibilityHint?: string;
-};
-
-export default FloatingMessageCounterContainerProps;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 376305f0a31e..e22322d26d95 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3410,31 +3410,11 @@ const styles = (theme: ThemeColors) =>
             ...visibility.hidden,
         },
 
-        floatingMessageCounterWrapperAndroid: {
-            left: 0,
-            width: '100%',
-            alignItems: 'center',
-            position: 'absolute',
-            top: 0,
-            zIndex: 100,
-            ...visibility.hidden,
-        },
-
-        floatingMessageCounterSubWrapperAndroid: {
-            left: '50%',
-            width: 'auto',
-        },
-
         floatingMessageCounter: {
             left: '-50%',
             ...visibility.visible,
         },
 
-        floatingMessageCounterTransformation: (translateY: AnimatableNumericValue) =>
-            ({
-                transform: [{translateY}],
-            } satisfies ViewStyle),
-
         confirmationAnimation: {
             height: 180,
             width: 180,