diff --git a/src/languages/en.ts b/src/languages/en.ts
index e63c8f2d21f1..6fdd5bbf3ab1 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1286,6 +1286,7 @@ export default {
     },
     workflowsExpensesFromPage: {
         title: 'Expenses from',
+        header: 'When the following members submit expenses:',
     },
     workflowsApprovalPage: {
         genericErrorMessage: "The approver couldn't be changed. Please try again or contact support.",
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 61515e1bbaf7..f918da0b140f 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1295,6 +1295,7 @@ export default {
     },
     workflowsExpensesFromPage: {
         title: 'Gastos de',
+        header: 'Cuando los siguientes miembros presenten gastos:',
     },
     workflowsApprovalPage: {
         genericErrorMessage: 'El aprobador no pudo ser cambiado. Por favor, inténtelo de nuevo o contacte al soporte.',
diff --git a/src/libs/WorkflowUtils.ts b/src/libs/WorkflowUtils.ts
index 6e8fc3322da0..c01fbbea7b57 100644
--- a/src/libs/WorkflowUtils.ts
+++ b/src/libs/WorkflowUtils.ts
@@ -4,6 +4,14 @@ import type ApprovalWorkflow from '@src/types/onyx/ApprovalWorkflow';
 import type {PersonalDetailsList} from '@src/types/onyx/PersonalDetails';
 import type {PolicyEmployeeList} from '@src/types/onyx/PolicyEmployee';
 
+const EMPTY_APPROVAL_WORKFLOW: ApprovalWorkflow = {
+    members: [],
+    approvers: [],
+    isDefault: false,
+    isBeingEdited: false,
+    isLoading: false,
+};
+
 type GetApproversParams = {
     /**
      * List of employees in the policy
@@ -170,4 +178,4 @@ function convertApprovalWorkflowToPolicyEmployees({approvalWorkflow, employeeLis
     return updatedEmployeeList;
 }
 
-export {getApprovalWorkflowApprovers, convertPolicyEmployeesToApprovalWorkflows, convertApprovalWorkflowToPolicyEmployees};
+export {getApprovalWorkflowApprovers, convertPolicyEmployeesToApprovalWorkflows, convertApprovalWorkflowToPolicyEmployees, EMPTY_APPROVAL_WORKFLOW};
diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
index 5726ee71b353..ef265fae193a 100644
--- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
+++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
@@ -3,7 +3,7 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useMemo, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx, withOnyx} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
 import getBankIcon from '@components/Icon/BankIcons';
 import type {BankName} from '@components/Icon/BankIconsUtils';
@@ -25,6 +25,7 @@ import {getPaymentMethodDescription} from '@libs/PaymentUtils';
 import Permissions from '@libs/Permissions';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
+import {convertPolicyEmployeesToApprovalWorkflows, EMPTY_APPROVAL_WORKFLOW} from '@libs/WorkflowUtils';
 import type {FullScreenNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
@@ -32,6 +33,7 @@ import withPolicy from '@pages/workspace/withPolicy';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import * as Policy from '@userActions/Policy/Policy';
 import {navigateToBankAccountRoute} from '@userActions/ReimbursementAccount';
+import * as Workflow from '@userActions/Workflow';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -58,6 +60,17 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
     const policyApproverName = useMemo(() => PersonalDetailsUtils.getPersonalDetailByEmail(policyApproverEmail ?? '')?.displayName ?? policyApproverEmail, [policyApproverEmail]);
     const canUseAdvancedApproval = Permissions.canUseWorkflowsAdvancedApproval(betas);
     const [isCurrencyModalOpen, setIsCurrencyModalOpen] = useState(false);
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+
+    const approvalWorkflows = useMemo(
+        () =>
+            convertPolicyEmployeesToApprovalWorkflows({
+                personalDetails: personalDetails ?? {},
+                employees: policy?.employeeList ?? {},
+                defaultApprover: policyApproverEmail ?? '',
+            }),
+        [personalDetails, policy?.employeeList, policyApproverEmail],
+    );
 
     const displayNameForAuthorizedPayer = useMemo(
         () => PersonalDetailsUtils.getPersonalDetailByEmail(policy?.achAccount?.reimburser ?? '')?.displayName ?? policy?.achAccount?.reimburser,
@@ -88,6 +101,15 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
         }, [fetchData]),
     );
 
+    const createNewApprovalWorkflow = useCallback(() => {
+        Workflow.setApprovalWorkflow({
+            ...EMPTY_APPROVAL_WORKFLOW,
+            availableMembers: approvalWorkflows.at(0)?.members ?? [],
+        });
+
+        Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EXPENSES_FROM.getRoute(route.params.policyID));
+    }, [approvalWorkflows, route.params.policyID]);
+
     const optionItems: ToggleSettingOptionRowProps[] = useMemo(() => {
         const {accountNumber, addressName, bankName, bankAccountID} = policy?.achAccount ?? {};
         const shouldShowBankAccount = !!bankAccountID && policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_YES;
@@ -153,7 +175,6 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
                             wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3, styles.mbn3]}
                             brickRoadIndicator={hasApprovalError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                         />
-                        {/* TODO: Functionality for this button will be added in a future PR (https://github.com/Expensify/App/issues/45954) */}
                         {canUseAdvancedApproval && (
                             <MenuItem
                                 title={translate('workflowsPage.addApprovalButton')}
@@ -162,8 +183,8 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
                                 iconHeight={20}
                                 iconWidth={20}
                                 iconFill={theme.success}
-                                style={[styles.ph2, styles.ml11, styles.widthAuto]}
-                                hoverAndPressStyle={[styles.mr0, styles.br2]}
+                                wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3, styles.mbn3]}
+                                onPress={createNewApprovalWorkflow}
                             />
                         )}
                     </>
@@ -264,6 +285,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
         policyApproverName,
         canUseAdvancedApproval,
         theme,
+        createNewApprovalWorkflow,
         isOffline,
         isPolicyAdmin,
         displayNameForAuthorizedPayer,
diff --git a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx
index f96831f5a34a..d46ea7de47ce 100644
--- a/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx
+++ b/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx
@@ -1,28 +1,169 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import type {SectionListData} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import Badge from '@components/Badge';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {FallbackAvatar} from '@components/Icon/Expensicons';
 import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import InviteMemberListItem from '@components/SelectionList/InviteMemberListItem';
+import type {Section} from '@components/SelectionList/types';
+import Text from '@components/Text';
+import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
 import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
+import * as Workflow from '@userActions/Workflow';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
+import type {Member} from '@src/types/onyx/ApprovalWorkflow';
+import type {Icon} from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
+type SelectionListMember = {
+    text: string;
+    alternateText: string;
+    keyForList: string;
+    isSelected: boolean;
+    login: string;
+    rightElement?: React.ReactNode;
+    icons?: Icon[];
+};
+
+type MembersSection = SectionListData<SelectionListMember, Section<SelectionListMember>>;
+
 type WorkspaceWorkflowsApprovalsExpensesFromPageProps = WithPolicyAndFullscreenLoadingProps &
     StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.WORKFLOWS_APPROVALS_EXPENSES_FROM>;
 
 function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsExpensesFromPageProps) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
+    const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
+    const [approvalWorkflow, approvalWorkflowMetadata] = useOnyx(ONYXKEYS.APPROVAL_WORKFLOW);
+    const [selectedMembers, setSelectedMembers] = useState<SelectionListMember[]>([]);
 
     // eslint-disable-next-line rulesdir/no-negated-variables
     const shouldShowNotFoundView = (isEmptyObject(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy);
 
+    useEffect(() => {
+        if (!approvalWorkflow?.members) {
+            return;
+        }
+
+        setSelectedMembers(
+            approvalWorkflow.members.map((member) => {
+                const policyMemberEmailsToAccountIDs = PolicyUtils.getMemberAccountIDsForWorkspace(policy?.employeeList);
+                const accountID = Number(policyMemberEmailsToAccountIDs[member.email] ?? '');
+                const isAdmin = policy?.employeeList?.[member.email].role === CONST.REPORT.ROLE.ADMIN;
+
+                return {
+                    text: member.displayName,
+                    alternateText: member.email,
+                    keyForList: member.email,
+                    isSelected: true,
+                    login: member.email,
+                    icons: [{source: member.avatar ?? FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: member.displayName, id: accountID}],
+                    rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : undefined,
+                };
+            }),
+        );
+    }, [approvalWorkflow?.members, policy?.employeeList, translate]);
+
+    const sections: MembersSection[] = useMemo(() => {
+        const members: SelectionListMember[] = [...selectedMembers];
+
+        if (approvalWorkflow?.availableMembers) {
+            const availableMembers = approvalWorkflow.availableMembers
+                .map((member) => {
+                    const isAdmin = policy?.employeeList?.[member.email].role === CONST.REPORT.ROLE.ADMIN;
+                    const policyMemberEmailsToAccountIDs = PolicyUtils.getMemberAccountIDsForWorkspace(policy?.employeeList);
+                    const accountID = Number(policyMemberEmailsToAccountIDs[member.email] ?? '');
+
+                    return {
+                        text: member.displayName,
+                        alternateText: member.email,
+                        keyForList: member.email,
+                        isSelected: false,
+                        login: member.email,
+                        icons: [{source: member.avatar ?? FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: member.displayName, id: accountID}],
+                        rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : undefined,
+                    };
+                })
+                .filter((member) => !selectedMembers.some((selectedOption) => selectedOption.login === member.login));
+
+            members.push(...availableMembers);
+        }
+
+        const filteredMembers =
+            debouncedSearchTerm !== ''
+                ? members.filter((option) => {
+                      const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(debouncedSearchTerm);
+                      const isPartOfSearchTerm = !!option.text?.toLowerCase().includes(searchValue) || !!option.login?.toLowerCase().includes(searchValue);
+                      return isPartOfSearchTerm;
+                  })
+                : members;
+
+        return [
+            {
+                title: undefined,
+                data: filteredMembers,
+                shouldShow: true,
+            },
+        ];
+    }, [approvalWorkflow?.availableMembers, debouncedSearchTerm, policy?.employeeList, selectedMembers, translate]);
+
+    const nextStep = useCallback(() => {
+        const members: Member[] = selectedMembers.map((member) => ({displayName: member.text, avatar: member.icons?.[0]?.source, email: member.login}));
+        Workflow.setApprovalWorkflowMembers(members);
+
+        const firstApprover = approvalWorkflow?.approvers?.[0]?.email;
+        if (approvalWorkflow?.isBeingEdited && firstApprover) {
+            Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EDIT.getRoute(route.params.policyID, firstApprover));
+        } else {
+            Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_APPROVER.getRoute(route.params.policyID));
+        }
+    }, [approvalWorkflow?.approvers, approvalWorkflow?.isBeingEdited, route.params.policyID, selectedMembers]);
+
+    const goBack = useCallback(() => {
+        if (!approvalWorkflow?.isBeingEdited) {
+            Workflow.clearApprovalWorkflow();
+        }
+        Navigation.goBack();
+    }, [approvalWorkflow?.isBeingEdited]);
+
+    const nextButton = useMemo(
+        () => (
+            <FormAlertWithSubmitButton
+                isDisabled={!selectedMembers.length}
+                buttonText={translate('common.next')}
+                onSubmit={nextStep}
+                containerStyles={[styles.flexReset, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
+                enabledWhenOffline
+            />
+        ),
+        [nextStep, selectedMembers.length, styles.flexBasisAuto, styles.flexGrow0, styles.flexReset, styles.flexShrink0, translate],
+    );
+
+    const toggleMember = (member: SelectionListMember) => {
+        const isAlreadySelected = selectedMembers.some((selectedOption) => selectedOption.login === member.login);
+        setSelectedMembers(isAlreadySelected ? selectedMembers.filter((selectedOption) => selectedOption.login !== member.login) : [...selectedMembers, {...member, isSelected: true}]);
+    };
+
+    const headerMessage = useMemo(() => (searchTerm && !sections[0].data.length ? translate('common.noResultsFound') : ''), [searchTerm, sections, translate]);
+
     return (
         <AccessOrNotFoundWrapper
             policyID={route.params.policyID}
@@ -31,6 +172,7 @@ function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportDat
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
                 testID={WorkspaceWorkflowsApprovalsExpensesFromPage.displayName}
+                onEntryTransitionEnd={() => setDidScreenTransitionEnd(true)}
             >
                 <FullPageNotFoundView
                     shouldShow={shouldShowNotFoundView}
@@ -40,7 +182,22 @@ function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportDat
                 >
                     <HeaderWithBackButton
                         title={translate('workflowsExpensesFromPage.title')}
-                        onBackButtonPress={Navigation.goBack}
+                        onBackButtonPress={goBack}
+                    />
+                    <Text style={[styles.textHeadlineH1, styles.mh5, styles.mv3]}>{translate('workflowsExpensesFromPage.header')}</Text>
+                    <SelectionList
+                        canSelectMultiple
+                        sections={sections}
+                        ListItem={InviteMemberListItem}
+                        textInputLabel={translate('selectionList.findMember')}
+                        textInputValue={searchTerm}
+                        onChangeText={setSearchTerm}
+                        headerMessage={headerMessage}
+                        onSelectRow={toggleMember}
+                        showScrollIndicator
+                        showLoadingPlaceholder={!didScreenTransitionEnd || approvalWorkflowMetadata.status === 'loading'}
+                        shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
+                        footerContent={nextButton}
                     />
                 </FullPageNotFoundView>
             </ScreenWrapper>
diff --git a/src/types/onyx/ApprovalWorkflow.ts b/src/types/onyx/ApprovalWorkflow.ts
index e1d0dd9b302a..70919ada9ddb 100644
--- a/src/types/onyx/ApprovalWorkflow.ts
+++ b/src/types/onyx/ApprovalWorkflow.ts
@@ -48,14 +48,14 @@ type Member = {
     email: string;
 
     /**
-     * Avatar URL of the current user from their personal details
+     * Display name of the current user from their personal details
      */
-    avatar?: AvatarSource;
+    displayName: string;
 
     /**
-     * Display name of the current user from their personal details
+     * Avatar URL of the current user from their personal details
      */
-    displayName?: string;
+    avatar?: AvatarSource;
 };
 
 /**
@@ -84,8 +84,15 @@ type ApprovalWorkflow = {
      */
     isBeingEdited: boolean;
 
-    /** Whether we are waiting for the API action to complete */
+    /**
+     * Whether we are waiting for the API action to complete
+     */
     isLoading?: boolean;
+
+    /**
+     * List of available members that can be selected in the workflow
+     */
+    availableMembers?: Member[];
 };
 
 export default ApprovalWorkflow;
