diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 63ece9fcb3e..309a66421f8 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -7,6 +7,7 @@ import _ from 'underscore';
 import Checkbox from '@components/Checkbox';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import RenderHTML from '@components/RenderHTML';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
@@ -17,7 +18,6 @@ import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import * as Session from '@userActions/Session';
@@ -27,9 +27,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
-    /** All personal details asssociated with user */
-    personalDetailsList: PropTypes.objectOf(personalDetailsPropType),
-
     /** The ID of the associated taskReport */
     taskReportID: PropTypes.string.isRequired,
 
@@ -59,12 +56,12 @@ const propTypes = {
 
 const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
-    personalDetailsList: {},
     taskReport: {},
     isHovered: false,
 };
 
 function TaskPreview(props) {
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     // The reportAction might not contain details regarding the taskReport
     // Only the direct parent reportAction will contain details about the taskReport
     // Other linked reportActions will only contain the taskReportID and we will grab the details from there
@@ -73,8 +70,8 @@ function TaskPreview(props) {
         : props.action.childStateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.action.childStatusNum === CONST.REPORT.STATUS.APPROVED;
     const taskTitle = props.taskReport.reportName || props.action.childReportName;
     const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(props.taskReport) || props.action.childManagerAccountID;
-    const assigneeLogin = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'login'], '');
-    const assigneeDisplayName = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'displayName'], '');
+    const assigneeLogin = lodashGet(personalDetails, [taskAssigneeAccountID, 'login'], '');
+    const assigneeDisplayName = lodashGet(personalDetails, [taskAssigneeAccountID, 'displayName'], '');
     const taskAssignee = assigneeDisplayName || LocalePhoneNumber.formatPhoneNumber(assigneeLogin);
     const htmlForTaskPreview =
         taskAssignee && taskAssigneeAccountID !== 0
@@ -132,9 +129,5 @@ export default compose(
             key: ({taskReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`,
             initialValue: {},
         },
-        personalDetailsList: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-            initialValue: {},
-        },
     }),
 )(TaskPreview);
diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js
index 794ab130ed9..9d89ccaa888 100644
--- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js
+++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js
@@ -2,9 +2,9 @@ import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import React, {useCallback} from 'react';
 import {Text, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Avatar from '@components/Avatar';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
@@ -12,13 +12,13 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import styles from '@styles/styles';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './userDetailsTooltipPropTypes';
 
 function BaseUserDetailsTooltip(props) {
     const {translate} = useLocalize();
+    const personalDetails = usePersonalDetails();
 
-    const userDetails = lodashGet(props.personalDetailsList, props.accountID, props.fallbackUserDetails);
+    const userDetails = lodashGet(personalDetails, props.accountID, props.fallbackUserDetails);
     let userDisplayName = ReportUtils.getDisplayNameForParticipant(props.accountID);
     let userLogin = (userDetails.login || '').trim() && !_.isEqual(userDetails.login, userDetails.displayName) ? Str.removeSMSDomain(userDetails.login) : '';
     let userAvatar = userDetails.avatar;
@@ -27,7 +27,7 @@ function BaseUserDetailsTooltip(props) {
     // We replace the actor's email, name, and avatar with the Copilot manually for now. This will be improved upon when
     // the Copilot feature is implemented.
     if (props.delegateAccountID) {
-        const delegateUserDetails = lodashGet(props.personalDetailsList, props.delegateAccountID, {});
+        const delegateUserDetails = lodashGet(personalDetails, props.delegateAccountID, {});
         const delegateUserDisplayName = ReportUtils.getDisplayNameForParticipant(props.delegateAccountID);
         userDisplayName = `${delegateUserDisplayName} (${translate('reportAction.asCopilot')} ${userDisplayName})`;
         userLogin = delegateUserDetails.login;
@@ -79,8 +79,4 @@ BaseUserDetailsTooltip.propTypes = propTypes;
 BaseUserDetailsTooltip.defaultProps = defaultProps;
 BaseUserDetailsTooltip.displayName = 'BaseUserDetailsTooltip';
 
-export default withOnyx({
-    personalDetailsList: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-})(BaseUserDetailsTooltip);
+export default BaseUserDetailsTooltip;
diff --git a/src/components/withCurrentUserPersonalDetails.tsx b/src/components/withCurrentUserPersonalDetails.tsx
index ed580b4dbe4..20e536d9d73 100644
--- a/src/components/withCurrentUserPersonalDetails.tsx
+++ b/src/components/withCurrentUserPersonalDetails.tsx
@@ -2,15 +2,14 @@ import React, {ComponentType, ForwardedRef, RefAttributes, useMemo} from 'react'
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetails, Session} from '@src/types/onyx';
+import {usePersonalDetails} from './OnyxProvider';
 
 type CurrentUserPersonalDetails = PersonalDetails | Record<string, never>;
 
 type OnyxProps = {
-    /** Personal details of all the users, including current user */
-    personalDetails: OnyxEntry<Record<string, PersonalDetails>>;
-
     /** Session of the current user */
     session: OnyxEntry<Session>;
 };
@@ -34,8 +33,9 @@ export default function <TProps extends ComponentProps, TRef>(
     WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
 ): ComponentType<Omit<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>, keyof OnyxProps>> {
     function WithCurrentUserPersonalDetails(props: Omit<TProps, keyof HOCProps>, ref: ForwardedRef<TRef>) {
+        const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT;
         const accountID = props.session?.accountID ?? 0;
-        const accountPersonalDetails = props.personalDetails?.[accountID];
+        const accountPersonalDetails = personalDetails?.[accountID];
         const currentUserPersonalDetails: CurrentUserPersonalDetails = useMemo(
             () => (accountPersonalDetails ? {...accountPersonalDetails, accountID} : {}),
             [accountPersonalDetails, accountID],
@@ -55,9 +55,6 @@ export default function <TProps extends ComponentProps, TRef>(
     const withCurrentUserPersonalDetails = React.forwardRef(WithCurrentUserPersonalDetails);
 
     return withOnyx<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>, OnyxProps>({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         session: {
             key: ONYXKEYS.SESSION,
         },
diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js
index 54808d2b618..b8f920954a3 100644
--- a/tests/ui/UnreadIndicatorsTest.js
+++ b/tests/ui/UnreadIndicatorsTest.js
@@ -130,7 +130,8 @@ function signInAndGetAppWithUnreadChat() {
     // Render the App and sign in as a test user.
     render(<App />);
     return waitForBatchedUpdatesWithAct()
-        .then(() => {
+        .then(async () => {
+            await waitForBatchedUpdatesWithAct();
             const hintText = Localize.translateLocal('loginForm.loginForm');
             const loginForm = screen.queryAllByLabelText(hintText);
             expect(loginForm).toHaveLength(1);