diff --git a/src/components/ConnectToNetSuiteButton/index.tsx b/src/components/ConnectToNetSuiteButton/index.tsx
index bf314860a061..e69de29bb2d1 100644
--- a/src/components/ConnectToNetSuiteButton/index.tsx
+++ b/src/components/ConnectToNetSuiteButton/index.tsx
@@ -1,135 +0,0 @@
-import React, {useRef, useState} from 'react';
-import type {View} from 'react-native';
-import AccountingConnectionConfirmationModal from '@components/AccountingConnectionConfirmationModal';
-import Button from '@components/Button';
-import * as Expensicons from '@components/Icon/Expensicons';
-import PopoverMenu from '@components/PopoverMenu';
-import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
-import usePolicy from '@hooks/usePolicy';
-import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
-import {removePolicyConnection} from '@libs/actions/connections';
-import {getAdminPoliciesConnectedToNetSuite} from '@libs/actions/Policy/Policy';
-import Navigation from '@libs/Navigation/Navigation';
-import {isControlPolicy} from '@libs/PolicyUtils';
-import type {AnchorPosition} from '@styles/index';
-import CONST from '@src/CONST';
-import ROUTES from '@src/ROUTES';
-import type {ConnectToNetSuiteButtonProps} from './types';
-
-function ConnectToNetSuiteButton({policyID, shouldDisconnectIntegrationBeforeConnecting, integrationToDisconnect}: ConnectToNetSuiteButtonProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const {isOffline} = useNetwork();
-    const policy = usePolicy(policyID);
-
-    const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
-
-    const hasPoliciesConnectedToNetSuite = !!getAdminPoliciesConnectedToNetSuite()?.length;
-    const {isSmallScreenWidth} = useWindowDimensions();
-    const [isReuseConnectionsPopoverOpen, setIsReuseConnectionsPopoverOpen] = useState(false);
-    const [reuseConnectionPopoverPosition, setReuseConnectionPopoverPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
-    const threeDotsMenuContainerRef = useRef<View>(null);
-    const connectionOptions = [
-        {
-            icon: Expensicons.LinkCopy,
-            text: translate('workspace.common.createNewConnection'),
-            onSelected: () => {
-                Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_TOKEN_INPUT.getRoute(policyID));
-                setIsReuseConnectionsPopoverOpen(false);
-            },
-        },
-        {
-            icon: Expensicons.Copy,
-            text: translate('workspace.common.reuseExistingConnection'),
-            onSelected: () => {
-                Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_EXISTING_CONNECTIONS.getRoute(policyID));
-                setIsReuseConnectionsPopoverOpen(false);
-            },
-        },
-    ];
-
-    return (
-        <>
-            <Button
-                onPress={() => {
-                    if (!isControlPolicy(policy)) {
-                        Navigation.navigate(
-                            ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.netsuite.alias, ROUTES.POLICY_ACCOUNTING_NETSUITE_TOKEN_INPUT.getRoute(policyID)),
-                        );
-                        return;
-                    }
-
-                    if (shouldDisconnectIntegrationBeforeConnecting && integrationToDisconnect) {
-                        setIsDisconnectModalOpen(true);
-                        return;
-                    }
-
-                    if (!hasPoliciesConnectedToNetSuite) {
-                        Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_TOKEN_INPUT.getRoute(policyID));
-                        return;
-                    }
-
-                    if (!isSmallScreenWidth) {
-                        threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
-                            setReuseConnectionPopoverPosition({
-                                horizontal: x + width,
-                                vertical: y + height,
-                            });
-                        });
-                    }
-                    setIsReuseConnectionsPopoverOpen(true);
-                }}
-                text={translate('workspace.accounting.setup')}
-                style={styles.justifyContentCenter}
-                small
-                isDisabled={isOffline}
-                ref={threeDotsMenuContainerRef}
-            />
-            <PopoverMenu
-                isVisible={isReuseConnectionsPopoverOpen}
-                onClose={() => {
-                    setIsReuseConnectionsPopoverOpen(false);
-                }}
-                withoutOverlay
-                menuItems={connectionOptions}
-                onItemSelected={(item) => {
-                    if (!item?.onSelected) {
-                        return;
-                    }
-                    item.onSelected();
-                }}
-                anchorPosition={reuseConnectionPopoverPosition}
-                anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
-                anchorRef={threeDotsMenuContainerRef}
-            />
-            {shouldDisconnectIntegrationBeforeConnecting && isDisconnectModalOpen && integrationToDisconnect && (
-                <AccountingConnectionConfirmationModal
-                    onConfirm={() => {
-                        removePolicyConnection(policyID, integrationToDisconnect);
-                        setIsDisconnectModalOpen(false);
-
-                        if (!hasPoliciesConnectedToNetSuite) {
-                            Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_TOKEN_INPUT.getRoute(policyID));
-                            return;
-                        }
-                        if (!isSmallScreenWidth) {
-                            threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
-                                setReuseConnectionPopoverPosition({
-                                    horizontal: x + width,
-                                    vertical: y + height,
-                                });
-                            });
-                        }
-                        setIsReuseConnectionsPopoverOpen(true);
-                    }}
-                    integrationToConnect={CONST.POLICY.CONNECTIONS.NAME.NETSUITE}
-                    onCancel={() => setIsDisconnectModalOpen(false)}
-                />
-            )}
-        </>
-    );
-}
-
-export default ConnectToNetSuiteButton;
diff --git a/src/components/ConnectToNetSuiteFlow/index.tsx b/src/components/ConnectToNetSuiteFlow/index.tsx
new file mode 100644
index 000000000000..ec38da13bef0
--- /dev/null
+++ b/src/components/ConnectToNetSuiteFlow/index.tsx
@@ -0,0 +1,86 @@
+import React, {useEffect, useState} from 'react';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PopoverMenu from '@components/PopoverMenu';
+import useLocalize from '@hooks/useLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import {getAdminPoliciesConnectedToNetSuite} from '@libs/actions/Policy/Policy';
+import Navigation from '@libs/Navigation/Navigation';
+import {useAccountingContext} from '@pages/workspace/accounting/AccountingContext';
+import type {AnchorPosition} from '@styles/index';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import type {ConnectToNetSuiteFlowProps} from './types';
+
+function ConnectToNetSuiteFlow({policyID}: ConnectToNetSuiteFlowProps) {
+    const {translate} = useLocalize();
+
+    const hasPoliciesConnectedToNetSuite = !!getAdminPoliciesConnectedToNetSuite()?.length;
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const [isReuseConnectionsPopoverOpen, setIsReuseConnectionsPopoverOpen] = useState(false);
+    const [reuseConnectionPopoverPosition, setReuseConnectionPopoverPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
+    const {popoverAnchorRefs} = useAccountingContext();
+
+    const threeDotsMenuContainerRef = popoverAnchorRefs?.current?.[CONST.POLICY.CONNECTIONS.NAME.NETSUITE];
+
+    const connectionOptions = [
+        {
+            icon: Expensicons.LinkCopy,
+            text: translate('workspace.common.createNewConnection'),
+            onSelected: () => {
+                Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_TOKEN_INPUT.getRoute(policyID));
+                setIsReuseConnectionsPopoverOpen(false);
+            },
+        },
+        {
+            icon: Expensicons.Copy,
+            text: translate('workspace.common.reuseExistingConnection'),
+            onSelected: () => {
+                Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_EXISTING_CONNECTIONS.getRoute(policyID));
+                setIsReuseConnectionsPopoverOpen(false);
+            },
+        },
+    ];
+
+    useEffect(() => {
+        if (!hasPoliciesConnectedToNetSuite) {
+            Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_TOKEN_INPUT.getRoute(policyID));
+            return;
+        }
+        setIsReuseConnectionsPopoverOpen(true);
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (threeDotsMenuContainerRef) {
+        if (!isSmallScreenWidth) {
+            threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
+                setReuseConnectionPopoverPosition({
+                    horizontal: x + width,
+                    vertical: y + height,
+                });
+            });
+        }
+
+        return (
+            <PopoverMenu
+                isVisible={isReuseConnectionsPopoverOpen}
+                onClose={() => {
+                    setIsReuseConnectionsPopoverOpen(false);
+                }}
+                withoutOverlay
+                menuItems={connectionOptions}
+                onItemSelected={(item) => {
+                    if (!item?.onSelected) {
+                        return;
+                    }
+                    item.onSelected();
+                }}
+                anchorPosition={reuseConnectionPopoverPosition}
+                anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
+                anchorRef={threeDotsMenuContainerRef}
+            />
+        );
+    }
+}
+
+export default ConnectToNetSuiteFlow;
diff --git a/src/components/ConnectToNetSuiteButton/types.ts b/src/components/ConnectToNetSuiteFlow/types.ts
similarity index 76%
rename from src/components/ConnectToNetSuiteButton/types.ts
rename to src/components/ConnectToNetSuiteFlow/types.ts
index 0e66b7b15eb6..f45191d43f87 100644
--- a/src/components/ConnectToNetSuiteButton/types.ts
+++ b/src/components/ConnectToNetSuiteFlow/types.ts
@@ -1,10 +1,10 @@
 import type {PolicyConnectionName} from '@src/types/onyx/Policy';
 
-type ConnectToNetSuiteButtonProps = {
+type ConnectToNetSuiteFlowProps = {
     policyID: string;
     shouldDisconnectIntegrationBeforeConnecting?: boolean;
     integrationToDisconnect?: PolicyConnectionName;
 };
 
 // eslint-disable-next-line import/prefer-default-export
-export type {ConnectToNetSuiteButtonProps};
+export type {ConnectToNetSuiteFlowProps};
diff --git a/src/components/ConnectToQuickbooksOnlineButton/index.native.tsx b/src/components/ConnectToQuickbooksOnlineButton/index.native.tsx
index 033a66d9fa53..e69de29bb2d1 100644
--- a/src/components/ConnectToQuickbooksOnlineButton/index.native.tsx
+++ b/src/components/ConnectToQuickbooksOnlineButton/index.native.tsx
@@ -1,112 +0,0 @@
-import React, {useRef, useState} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-import {WebView} from 'react-native-webview';
-import AccountingConnectionConfirmationModal from '@components/AccountingConnectionConfirmationModal';
-import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
-import Button from '@components/Button';
-import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import Modal from '@components/Modal';
-import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from '@hooks/useThemeStyles';
-import {removePolicyConnection} from '@libs/actions/connections';
-import {getQuickbooksOnlineSetupLink} from '@libs/actions/connections/QuickbooksOnline';
-import * as PolicyAction from '@userActions/Policy/Policy';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import type {Session} from '@src/types/onyx';
-import type {ConnectToQuickbooksOnlineButtonProps} from './types';
-
-type ConnectToQuickbooksOnlineButtonOnyxProps = {
-    /** Session info for the currently logged in user. */
-    session: OnyxEntry<Session>;
-};
-
-const renderLoading = () => <FullScreenLoadingIndicator />;
-
-function ConnectToQuickbooksOnlineButton({
-    policyID,
-    session,
-    shouldDisconnectIntegrationBeforeConnecting,
-    integrationToDisconnect,
-}: ConnectToQuickbooksOnlineButtonProps & ConnectToQuickbooksOnlineButtonOnyxProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const webViewRef = useRef<WebView>(null);
-    const [isWebViewOpen, setWebViewOpen] = useState(false);
-    const {isOffline} = useNetwork();
-
-    const authToken = session?.authToken ?? null;
-
-    const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
-
-    return (
-        <>
-            <Button
-                onPress={() => {
-                    if (shouldDisconnectIntegrationBeforeConnecting && integrationToDisconnect) {
-                        setIsDisconnectModalOpen(true);
-                        return;
-                    }
-                    // Since QBO doesn't support Taxes, we should disable them from the LHN when connecting to QBO
-                    PolicyAction.enablePolicyTaxes(policyID, false);
-                    setWebViewOpen(true);
-                }}
-                text={translate('workspace.accounting.setup')}
-                style={styles.justifyContentCenter}
-                small
-                isDisabled={isOffline}
-            />
-            {shouldDisconnectIntegrationBeforeConnecting && integrationToDisconnect && isDisconnectModalOpen && (
-                <AccountingConnectionConfirmationModal
-                    onConfirm={() => {
-                        // Since QBO doesn't support Taxes, we should disable them from the LHN when connecting to QBO
-                        PolicyAction.enablePolicyTaxes(policyID, false);
-                        removePolicyConnection(policyID, integrationToDisconnect);
-                        setIsDisconnectModalOpen(false);
-                        setWebViewOpen(true);
-                    }}
-                    integrationToConnect={CONST.POLICY.CONNECTIONS.NAME.QBO}
-                    onCancel={() => setIsDisconnectModalOpen(false)}
-                />
-            )}
-            {isWebViewOpen && (
-                <Modal
-                    onClose={() => setWebViewOpen(false)}
-                    fullscreen
-                    isVisible
-                    type={CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE}
-                >
-                    <HeaderWithBackButton
-                        title={translate('workspace.accounting.title')}
-                        onBackButtonPress={() => setWebViewOpen(false)}
-                    />
-                    <FullPageOfflineBlockingView>
-                        <WebView
-                            ref={webViewRef}
-                            source={{
-                                uri: getQuickbooksOnlineSetupLink(policyID),
-                                headers: {
-                                    Cookie: `authToken=${authToken}`,
-                                },
-                            }}
-                            incognito // 'incognito' prop required for Android, issue here https://github.com/react-native-webview/react-native-webview/issues/1352
-                            startInLoadingState
-                            renderLoading={renderLoading}
-                        />
-                    </FullPageOfflineBlockingView>
-                </Modal>
-            )}
-        </>
-    );
-}
-
-ConnectToQuickbooksOnlineButton.displayName = 'ConnectToQuickbooksOnlineButton';
-
-export default withOnyx<ConnectToQuickbooksOnlineButtonProps & ConnectToQuickbooksOnlineButtonOnyxProps, ConnectToQuickbooksOnlineButtonOnyxProps>({
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-})(ConnectToQuickbooksOnlineButton);
diff --git a/src/components/ConnectToQuickbooksOnlineButton/index.tsx b/src/components/ConnectToQuickbooksOnlineButton/index.tsx
index ffe2c78288e1..e69de29bb2d1 100644
--- a/src/components/ConnectToQuickbooksOnlineButton/index.tsx
+++ b/src/components/ConnectToQuickbooksOnlineButton/index.tsx
@@ -1,59 +0,0 @@
-import React, {useState} from 'react';
-import AccountingConnectionConfirmationModal from '@components/AccountingConnectionConfirmationModal';
-import Button from '@components/Button';
-import useEnvironment from '@hooks/useEnvironment';
-import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from '@hooks/useThemeStyles';
-import {removePolicyConnection} from '@libs/actions/connections';
-import {getQuickbooksOnlineSetupLink} from '@libs/actions/connections/QuickbooksOnline';
-import * as Link from '@userActions/Link';
-import * as PolicyAction from '@userActions/Policy/Policy';
-import CONST from '@src/CONST';
-import type {ConnectToQuickbooksOnlineButtonProps} from './types';
-
-function ConnectToQuickbooksOnlineButton({policyID, shouldDisconnectIntegrationBeforeConnecting, integrationToDisconnect}: ConnectToQuickbooksOnlineButtonProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const {environmentURL} = useEnvironment();
-    const {isOffline} = useNetwork();
-
-    const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
-
-    return (
-        <>
-            <Button
-                onPress={() => {
-                    if (shouldDisconnectIntegrationBeforeConnecting && integrationToDisconnect) {
-                        setIsDisconnectModalOpen(true);
-                        return;
-                    }
-                    // Since QBO doesn't support Taxes, we should disable them from the LHN when connecting to QBO
-                    PolicyAction.enablePolicyTaxes(policyID, false);
-                    Link.openLink(getQuickbooksOnlineSetupLink(policyID), environmentURL);
-                }}
-                isDisabled={isOffline}
-                text={translate('workspace.accounting.setup')}
-                style={styles.justifyContentCenter}
-                small
-            />
-            {shouldDisconnectIntegrationBeforeConnecting && integrationToDisconnect && isDisconnectModalOpen && (
-                <AccountingConnectionConfirmationModal
-                    onConfirm={() => {
-                        // Since QBO doesn't support Taxes, we should disable them from the LHN when connecting to QBO
-                        PolicyAction.enablePolicyTaxes(policyID, false);
-                        removePolicyConnection(policyID, integrationToDisconnect);
-                        Link.openLink(getQuickbooksOnlineSetupLink(policyID), environmentURL);
-                        setIsDisconnectModalOpen(false);
-                    }}
-                    integrationToConnect={CONST.POLICY.CONNECTIONS.NAME.QBO}
-                    onCancel={() => setIsDisconnectModalOpen(false)}
-                />
-            )}
-        </>
-    );
-}
-
-ConnectToQuickbooksOnlineButton.displayName = 'ConnectToQuickbooksOnlineButton';
-
-export default ConnectToQuickbooksOnlineButton;
diff --git a/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx b/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx
new file mode 100644
index 000000000000..a6659338451e
--- /dev/null
+++ b/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx
@@ -0,0 +1,76 @@
+import React, {useEffect, useRef, useState} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
+import {WebView} from 'react-native-webview';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import useLocalize from '@hooks/useLocalize';
+import {getQuickbooksOnlineSetupLink} from '@libs/actions/connections/QuickbooksOnline';
+import * as PolicyAction from '@userActions/Policy/Policy';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Session} from '@src/types/onyx';
+import type {ConnectToQuickbooksOnlineFlowProps} from './types';
+
+type ConnectToQuickbooksOnlineFlowOnyxProps = {
+    /** Session info for the currently logged in user. */
+    session: OnyxEntry<Session>;
+};
+
+const renderLoading = () => <FullScreenLoadingIndicator />;
+
+function ConnectToQuickbooksOnlineFlow({policyID, session}: ConnectToQuickbooksOnlineFlowProps & ConnectToQuickbooksOnlineFlowOnyxProps) {
+    const {translate} = useLocalize();
+    const webViewRef = useRef<WebView>(null);
+    const [isWebViewOpen, setWebViewOpen] = useState(false);
+
+    const authToken = session?.authToken ?? null;
+
+    useEffect(() => {
+        // Since QBO doesn't support Taxes, we should disable them from the LHN when connecting to QBO
+        PolicyAction.enablePolicyTaxes(policyID, false);
+        setWebViewOpen(true);
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (isWebViewOpen) {
+        return (
+            <Modal
+                onClose={() => setWebViewOpen(false)}
+                fullscreen
+                isVisible
+                type={CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE}
+            >
+                <HeaderWithBackButton
+                    title={translate('workspace.accounting.title')}
+                    onBackButtonPress={() => setWebViewOpen(false)}
+                />
+                <FullPageOfflineBlockingView>
+                    <WebView
+                        ref={webViewRef}
+                        source={{
+                            uri: getQuickbooksOnlineSetupLink(policyID),
+                            headers: {
+                                Cookie: `authToken=${authToken}`,
+                            },
+                        }}
+                        incognito // 'incognito' prop required for Android, issue here https://github.com/react-native-webview/react-native-webview/issues/1352
+                        startInLoadingState
+                        renderLoading={renderLoading}
+                    />
+                </FullPageOfflineBlockingView>
+            </Modal>
+        );
+    }
+}
+
+ConnectToQuickbooksOnlineFlow.displayName = 'ConnectToQuickbooksOnlineFlow';
+
+export default withOnyx<ConnectToQuickbooksOnlineFlowProps & ConnectToQuickbooksOnlineFlowOnyxProps, ConnectToQuickbooksOnlineFlowOnyxProps>({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(ConnectToQuickbooksOnlineFlow);
diff --git a/src/components/ConnectToQuickbooksOnlineFlow/index.tsx b/src/components/ConnectToQuickbooksOnlineFlow/index.tsx
new file mode 100644
index 000000000000..6b825240ba6d
--- /dev/null
+++ b/src/components/ConnectToQuickbooksOnlineFlow/index.tsx
@@ -0,0 +1,24 @@
+import {useEffect} from 'react';
+import useEnvironment from '@hooks/useEnvironment';
+import {getQuickbooksOnlineSetupLink} from '@libs/actions/connections/QuickbooksOnline';
+import * as Link from '@userActions/Link';
+import * as PolicyAction from '@userActions/Policy/Policy';
+import type {ConnectToQuickbooksOnlineFlowProps} from './types';
+
+function ConnectToQuickbooksOnlineFlow({policyID}: ConnectToQuickbooksOnlineFlowProps) {
+    const {environmentURL} = useEnvironment();
+
+    useEffect(() => {
+        // Since QBO doesn't support Taxes, we should disable them from the LHN when connecting to QBO
+        PolicyAction.enablePolicyTaxes(policyID, false);
+        Link.openLink(getQuickbooksOnlineSetupLink(policyID), environmentURL);
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return null;
+}
+
+ConnectToQuickbooksOnlineFlow.displayName = 'ConnectToQuickbooksOnlineFlow';
+
+export default ConnectToQuickbooksOnlineFlow;
diff --git a/src/components/ConnectToQuickbooksOnlineButton/types.ts b/src/components/ConnectToQuickbooksOnlineFlow/types.ts
similarity index 72%
rename from src/components/ConnectToQuickbooksOnlineButton/types.ts
rename to src/components/ConnectToQuickbooksOnlineFlow/types.ts
index 418db90701ef..0705a3501ed0 100644
--- a/src/components/ConnectToQuickbooksOnlineButton/types.ts
+++ b/src/components/ConnectToQuickbooksOnlineFlow/types.ts
@@ -1,10 +1,10 @@
 import type {PolicyConnectionName} from '@src/types/onyx/Policy';
 
-type ConnectToQuickbooksOnlineButtonProps = {
+type ConnectToQuickbooksOnlineFlowProps = {
     policyID: string;
     shouldDisconnectIntegrationBeforeConnecting?: boolean;
     integrationToDisconnect?: PolicyConnectionName;
 };
 
 // eslint-disable-next-line import/prefer-default-export
-export type {ConnectToQuickbooksOnlineButtonProps};
+export type {ConnectToQuickbooksOnlineFlowProps};
diff --git a/src/components/ConnectToSageIntacctButton/index.tsx b/src/components/ConnectToSageIntacctButton/index.tsx
index 71a2139caa2d..e69de29bb2d1 100644
--- a/src/components/ConnectToSageIntacctButton/index.tsx
+++ b/src/components/ConnectToSageIntacctButton/index.tsx
@@ -1,143 +0,0 @@
-import React, {useRef, useState} from 'react';
-import type {View} from 'react-native';
-import AccountingConnectionConfirmationModal from '@components/AccountingConnectionConfirmationModal';
-import Button from '@components/Button';
-import * as Expensicons from '@components/Icon/Expensicons';
-import PopoverMenu from '@components/PopoverMenu';
-import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
-import usePolicy from '@hooks/usePolicy';
-import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
-import {removePolicyConnection} from '@libs/actions/connections';
-import {getAdminPoliciesConnectedToSageIntacct} from '@libs/actions/Policy/Policy';
-import Navigation from '@libs/Navigation/Navigation';
-import {isControlPolicy} from '@libs/PolicyUtils';
-import type {AnchorPosition} from '@styles/index';
-import CONST from '@src/CONST';
-import ROUTES from '@src/ROUTES';
-import type {PolicyConnectionName} from '@src/types/onyx/Policy';
-
-type ConnectToSageIntacctButtonProps = {
-    policyID: string;
-    shouldDisconnectIntegrationBeforeConnecting?: boolean;
-    integrationToDisconnect?: PolicyConnectionName;
-};
-
-function ConnectToSageIntacctButton({policyID, shouldDisconnectIntegrationBeforeConnecting, integrationToDisconnect}: ConnectToSageIntacctButtonProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const {isOffline} = useNetwork();
-
-    const policy = usePolicy(policyID);
-
-    const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
-
-    const hasPoliciesConnectedToSageIntacct = !!getAdminPoliciesConnectedToSageIntacct().length;
-    const {isSmallScreenWidth} = useWindowDimensions();
-    const [isReuseConnectionsPopoverOpen, setIsReuseConnectionsPopoverOpen] = useState(false);
-    const [reuseConnectionPopoverPosition, setReuseConnectionPopoverPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
-    const threeDotsMenuContainerRef = useRef<View>(null);
-    const connectionOptions = [
-        {
-            icon: Expensicons.LinkCopy,
-            text: translate('workspace.common.createNewConnection'),
-            onSelected: () => {
-                Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PREREQUISITES.getRoute(policyID));
-                setIsReuseConnectionsPopoverOpen(false);
-            },
-        },
-        {
-            icon: Expensicons.Copy,
-            text: translate('workspace.common.reuseExistingConnection'),
-            onSelected: () => {
-                Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_EXISTING_CONNECTIONS.getRoute(policyID));
-                setIsReuseConnectionsPopoverOpen(false);
-            },
-        },
-    ];
-
-    return (
-        <>
-            <Button
-                onPress={() => {
-                    if (!isControlPolicy(policy)) {
-                        Navigation.navigate(
-                            ROUTES.WORKSPACE_UPGRADE.getRoute(
-                                policyID,
-                                CONST.UPGRADE_FEATURE_INTRO_MAPPING.intacct.alias,
-                                ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PREREQUISITES.getRoute(policyID),
-                            ),
-                        );
-                        return;
-                    }
-
-                    if (shouldDisconnectIntegrationBeforeConnecting && integrationToDisconnect) {
-                        setIsDisconnectModalOpen(true);
-                        return;
-                    }
-                    if (!hasPoliciesConnectedToSageIntacct) {
-                        Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PREREQUISITES.getRoute(policyID));
-                        return;
-                    }
-                    if (!isSmallScreenWidth) {
-                        threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
-                            setReuseConnectionPopoverPosition({
-                                horizontal: x + width,
-                                vertical: y + height,
-                            });
-                        });
-                    }
-                    setIsReuseConnectionsPopoverOpen(true);
-                }}
-                text={translate('workspace.accounting.setup')}
-                style={styles.justifyContentCenter}
-                small
-                isDisabled={isOffline}
-                ref={threeDotsMenuContainerRef}
-            />
-            <PopoverMenu
-                isVisible={isReuseConnectionsPopoverOpen}
-                onClose={() => {
-                    setIsReuseConnectionsPopoverOpen(false);
-                }}
-                withoutOverlay
-                menuItems={connectionOptions}
-                onItemSelected={(item) => {
-                    if (!item?.onSelected) {
-                        return;
-                    }
-                    item.onSelected();
-                }}
-                anchorPosition={reuseConnectionPopoverPosition}
-                anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
-                anchorRef={threeDotsMenuContainerRef}
-            />
-            {shouldDisconnectIntegrationBeforeConnecting && isDisconnectModalOpen && integrationToDisconnect && (
-                <AccountingConnectionConfirmationModal
-                    onConfirm={() => {
-                        removePolicyConnection(policyID, integrationToDisconnect);
-                        setIsDisconnectModalOpen(false);
-                        if (!hasPoliciesConnectedToSageIntacct) {
-                            Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PREREQUISITES.getRoute(policyID));
-                            return;
-                        }
-                        if (!isSmallScreenWidth) {
-                            threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
-                                setReuseConnectionPopoverPosition({
-                                    horizontal: x + width,
-                                    vertical: y + height,
-                                });
-                            });
-                        }
-                        setIsReuseConnectionsPopoverOpen(true);
-                    }}
-                    integrationToConnect={CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT}
-                    onCancel={() => setIsDisconnectModalOpen(false)}
-                />
-            )}
-        </>
-    );
-}
-
-export default ConnectToSageIntacctButton;
diff --git a/src/components/ConnectToSageIntacctFlow/index.tsx b/src/components/ConnectToSageIntacctFlow/index.tsx
new file mode 100644
index 000000000000..5d7b36eb0bbb
--- /dev/null
+++ b/src/components/ConnectToSageIntacctFlow/index.tsx
@@ -0,0 +1,88 @@
+import React, {useEffect, useState} from 'react';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PopoverMenu from '@components/PopoverMenu';
+import useLocalize from '@hooks/useLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import {getAdminPoliciesConnectedToSageIntacct} from '@libs/actions/Policy/Policy';
+import Navigation from '@libs/Navigation/Navigation';
+import {useAccountingContext} from '@pages/workspace/accounting/AccountingContext';
+import type {AnchorPosition} from '@styles/index';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+
+type ConnectToSageIntacctFlowProps = {
+    policyID: string;
+};
+
+function ConnectToSageIntacctFlow({policyID}: ConnectToSageIntacctFlowProps) {
+    const {translate} = useLocalize();
+
+    const hasPoliciesConnectedToSageIntacct = !!getAdminPoliciesConnectedToSageIntacct().length;
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const [isReuseConnectionsPopoverOpen, setIsReuseConnectionsPopoverOpen] = useState(false);
+    const [reuseConnectionPopoverPosition, setReuseConnectionPopoverPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
+    const {popoverAnchorRefs} = useAccountingContext();
+    const threeDotsMenuContainerRef = popoverAnchorRefs?.current?.[CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT];
+
+    const connectionOptions = [
+        {
+            icon: Expensicons.LinkCopy,
+            text: translate('workspace.common.createNewConnection'),
+            onSelected: () => {
+                Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PREREQUISITES.getRoute(policyID));
+                setIsReuseConnectionsPopoverOpen(false);
+            },
+        },
+        {
+            icon: Expensicons.Copy,
+            text: translate('workspace.common.reuseExistingConnection'),
+            onSelected: () => {
+                Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_EXISTING_CONNECTIONS.getRoute(policyID));
+                setIsReuseConnectionsPopoverOpen(false);
+            },
+        },
+    ];
+
+    useEffect(() => {
+        if (!hasPoliciesConnectedToSageIntacct) {
+            Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PREREQUISITES.getRoute(policyID));
+            return;
+        }
+        setIsReuseConnectionsPopoverOpen(true);
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (threeDotsMenuContainerRef) {
+        if (!isSmallScreenWidth) {
+            threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
+                setReuseConnectionPopoverPosition({
+                    horizontal: x + width,
+                    vertical: y + height,
+                });
+            });
+        }
+
+        return (
+            <PopoverMenu
+                isVisible={isReuseConnectionsPopoverOpen}
+                onClose={() => {
+                    setIsReuseConnectionsPopoverOpen(false);
+                }}
+                withoutOverlay
+                menuItems={connectionOptions}
+                onItemSelected={(item) => {
+                    if (!item?.onSelected) {
+                        return;
+                    }
+                    item.onSelected();
+                }}
+                anchorPosition={reuseConnectionPopoverPosition}
+                anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
+                anchorRef={threeDotsMenuContainerRef}
+            />
+        );
+    }
+}
+
+export default ConnectToSageIntacctFlow;
diff --git a/src/components/ConnectToXeroButton/index.tsx b/src/components/ConnectToXeroButton/index.tsx
deleted file mode 100644
index 9d398060fe00..000000000000
--- a/src/components/ConnectToXeroButton/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, {useState} from 'react';
-import {useOnyx} from 'react-native-onyx';
-import AccountingConnectionConfirmationModal from '@components/AccountingConnectionConfirmationModal';
-import Button from '@components/Button';
-import RequireTwoFactorAuthenticationModal from '@components/RequireTwoFactorAuthenticationModal';
-import useEnvironment from '@hooks/useEnvironment';
-import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from '@hooks/useThemeStyles';
-import {removePolicyConnection} from '@libs/actions/connections';
-import {getXeroSetupLink} from '@libs/actions/connections/ConnectToXero';
-import Navigation from '@libs/Navigation/Navigation';
-import * as Link from '@userActions/Link';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import type {ConnectToXeroButtonProps} from './types';
-
-function ConnectToXeroButton({policyID, shouldDisconnectIntegrationBeforeConnecting, integrationToDisconnect}: ConnectToXeroButtonProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const {environmentURL} = useEnvironment();
-    const {isOffline} = useNetwork();
-
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
-    const is2FAEnabled = account?.requiresTwoFactorAuth;
-
-    const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
-    const [isRequire2FAModalOpen, setIsRequire2FAModalOpen] = useState(false);
-
-    return (
-        <>
-            <Button
-                onPress={() => {
-                    if (!is2FAEnabled) {
-                        setIsRequire2FAModalOpen(true);
-                        return;
-                    }
-
-                    if (shouldDisconnectIntegrationBeforeConnecting && integrationToDisconnect) {
-                        setIsDisconnectModalOpen(true);
-                        return;
-                    }
-                    Link.openLink(getXeroSetupLink(policyID), environmentURL);
-                }}
-                text={translate('workspace.accounting.setup')}
-                style={styles.justifyContentCenter}
-                small
-                isDisabled={isOffline}
-            />
-            {shouldDisconnectIntegrationBeforeConnecting && isDisconnectModalOpen && integrationToDisconnect && (
-                <AccountingConnectionConfirmationModal
-                    onConfirm={() => {
-                        removePolicyConnection(policyID, integrationToDisconnect);
-                        Link.openLink(getXeroSetupLink(policyID), environmentURL);
-                        setIsDisconnectModalOpen(false);
-                    }}
-                    integrationToConnect={CONST.POLICY.CONNECTIONS.NAME.XERO}
-                    onCancel={() => setIsDisconnectModalOpen(false)}
-                />
-            )}
-            {isRequire2FAModalOpen && (
-                <RequireTwoFactorAuthenticationModal
-                    onSubmit={() => {
-                        setIsRequire2FAModalOpen(false);
-                        Navigation.dismissModal();
-                        Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute(ROUTES.POLICY_ACCOUNTING.getRoute(policyID), getXeroSetupLink(policyID)));
-                    }}
-                    onCancel={() => setIsRequire2FAModalOpen(false)}
-                    isVisible
-                    description={translate('twoFactorAuth.twoFactorAuthIsRequiredDescription')}
-                />
-            )}
-        </>
-    );
-}
-
-export default ConnectToXeroButton;
diff --git a/src/components/ConnectToXeroButton/index.native.tsx b/src/components/ConnectToXeroFlow/index.native.tsx
similarity index 59%
rename from src/components/ConnectToXeroButton/index.native.tsx
rename to src/components/ConnectToXeroFlow/index.native.tsx
index 04b5f8722ea5..e603fece6bd0 100644
--- a/src/components/ConnectToXeroButton/index.native.tsx
+++ b/src/components/ConnectToXeroFlow/index.native.tsx
@@ -1,18 +1,13 @@
-import React, {useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx, withOnyx} from 'react-native-onyx';
 import {WebView} from 'react-native-webview';
-import AccountingConnectionConfirmationModal from '@components/AccountingConnectionConfirmationModal';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
-import Button from '@components/Button';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import RequireTwoFactorAuthenticationModal from '@components/RequireTwoFactorAuthenticationModal';
 import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from '@hooks/useThemeStyles';
-import {removePolicyConnection} from '@libs/actions/connections';
 import {getXeroSetupLink} from '@libs/actions/connections/ConnectToXero';
 import getUAForWebView from '@libs/getUAForWebView';
 import Navigation from '@libs/Navigation/Navigation';
@@ -20,60 +15,38 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Session} from '@src/types/onyx';
-import type {ConnectToXeroButtonProps} from './types';
+import type {ConnectToXeroFlowProps} from './types';
 
-type ConnectToXeroButtonOnyxProps = {
+type ConnectToXeroFlowOnyxProps = {
     /** Session info for the currently logged in user. */
     session: OnyxEntry<Session>;
 };
 
-function ConnectToXeroButton({policyID, session, shouldDisconnectIntegrationBeforeConnecting, integrationToDisconnect}: ConnectToXeroButtonProps & ConnectToXeroButtonOnyxProps) {
-    const styles = useThemeStyles();
+function ConnectToXeroFlow({policyID, session}: ConnectToXeroFlowProps & ConnectToXeroFlowOnyxProps) {
     const {translate} = useLocalize();
     const webViewRef = useRef<WebView>(null);
     const [isWebViewOpen, setWebViewOpen] = useState(false);
 
     const authToken = session?.authToken ?? null;
-    const {isOffline} = useNetwork();
 
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const is2FAEnabled = account?.requiresTwoFactorAuth ?? false;
 
     const renderLoading = () => <FullScreenLoadingIndicator />;
-    const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
     const [isRequire2FAModalOpen, setIsRequire2FAModalOpen] = useState(false);
 
+    useEffect(() => {
+        if (!is2FAEnabled) {
+            setIsRequire2FAModalOpen(true);
+            return;
+        }
+        setWebViewOpen(true);
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     return (
         <>
-            <Button
-                onPress={() => {
-                    if (!is2FAEnabled) {
-                        setIsRequire2FAModalOpen(true);
-                        return;
-                    }
-
-                    if (shouldDisconnectIntegrationBeforeConnecting && integrationToDisconnect) {
-                        setIsDisconnectModalOpen(true);
-                        return;
-                    }
-                    setWebViewOpen(true);
-                }}
-                text={translate('workspace.accounting.setup')}
-                style={styles.justifyContentCenter}
-                small
-                isDisabled={isOffline}
-            />
-            {shouldDisconnectIntegrationBeforeConnecting && isDisconnectModalOpen && integrationToDisconnect && (
-                <AccountingConnectionConfirmationModal
-                    onConfirm={() => {
-                        removePolicyConnection(policyID, integrationToDisconnect);
-                        setIsDisconnectModalOpen(false);
-                        setWebViewOpen(true);
-                    }}
-                    integrationToConnect={CONST.POLICY.CONNECTIONS.NAME.XERO}
-                    onCancel={() => setIsDisconnectModalOpen(false)}
-                />
-            )}
             {isRequire2FAModalOpen && (
                 <RequireTwoFactorAuthenticationModal
                     onSubmit={() => {
@@ -116,10 +89,10 @@ function ConnectToXeroButton({policyID, session, shouldDisconnectIntegrationBefo
     );
 }
 
-ConnectToXeroButton.displayName = 'ConnectToXeroButton';
+ConnectToXeroFlow.displayName = 'ConnectToXeroFlow';
 
-export default withOnyx<ConnectToXeroButtonProps & ConnectToXeroButtonOnyxProps, ConnectToXeroButtonOnyxProps>({
+export default withOnyx<ConnectToXeroFlowProps & ConnectToXeroFlowOnyxProps, ConnectToXeroFlowOnyxProps>({
     session: {
         key: ONYXKEYS.SESSION,
     },
-})(ConnectToXeroButton);
+})(ConnectToXeroFlow);
diff --git a/src/components/ConnectToXeroFlow/index.tsx b/src/components/ConnectToXeroFlow/index.tsx
new file mode 100644
index 000000000000..ade4c1191bb0
--- /dev/null
+++ b/src/components/ConnectToXeroFlow/index.tsx
@@ -0,0 +1,50 @@
+import React, {useEffect, useState} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import RequireTwoFactorAuthenticationModal from '@components/RequireTwoFactorAuthenticationModal';
+import useEnvironment from '@hooks/useEnvironment';
+import useLocalize from '@hooks/useLocalize';
+import {getXeroSetupLink} from '@libs/actions/connections/ConnectToXero';
+import Navigation from '@libs/Navigation/Navigation';
+import * as Link from '@userActions/Link';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {ConnectToXeroFlowProps} from './types';
+
+function ConnectToXeroFlow({policyID}: ConnectToXeroFlowProps) {
+    const {translate} = useLocalize();
+    const {environmentURL} = useEnvironment();
+
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const is2FAEnabled = account?.requiresTwoFactorAuth;
+
+    const [isRequire2FAModalOpen, setIsRequire2FAModalOpen] = useState(false);
+
+    useEffect(() => {
+        if (!is2FAEnabled) {
+            setIsRequire2FAModalOpen(true);
+            return;
+        }
+        Link.openLink(getXeroSetupLink(policyID), environmentURL);
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (isRequire2FAModalOpen) {
+        return (
+            <RequireTwoFactorAuthenticationModal
+                onSubmit={() => {
+                    setIsRequire2FAModalOpen(false);
+                    Navigation.dismissModal();
+                    Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute(ROUTES.POLICY_ACCOUNTING.getRoute(policyID), getXeroSetupLink(policyID)));
+                }}
+                onCancel={() => {
+                    setIsRequire2FAModalOpen(false);
+                }}
+                isVisible
+                description={translate('twoFactorAuth.twoFactorAuthIsRequiredDescription')}
+            />
+        );
+    }
+}
+
+export default ConnectToXeroFlow;
diff --git a/src/components/ConnectToXeroButton/types.ts b/src/components/ConnectToXeroFlow/types.ts
similarity index 77%
rename from src/components/ConnectToXeroButton/types.ts
rename to src/components/ConnectToXeroFlow/types.ts
index e3ed629536cf..01f4bca61551 100644
--- a/src/components/ConnectToXeroButton/types.ts
+++ b/src/components/ConnectToXeroFlow/types.ts
@@ -1,10 +1,10 @@
 import type {PolicyConnectionName} from '@src/types/onyx/Policy';
 
-type ConnectToXeroButtonProps = {
+type ConnectToXeroFlowProps = {
     policyID: string;
     shouldDisconnectIntegrationBeforeConnecting?: boolean;
     integrationToDisconnect?: PolicyConnectionName;
 };
 
 // eslint-disable-next-line import/prefer-default-export
-export type {ConnectToXeroButtonProps};
+export type {ConnectToXeroFlowProps};
diff --git a/src/libs/actions/connections/index.ts b/src/libs/actions/connections/index.ts
index 70a66c709718..80c90ed1e1ce 100644
--- a/src/libs/actions/connections/index.ts
+++ b/src/libs/actions/connections/index.ts
@@ -388,6 +388,14 @@ function getSynchronizationErrorMessage(policy: OnyxEntry<Policy>, connectionNam
     return `${syncError} ("${connection?.lastSync?.errorMessage}")`;
 }
 
+function isAuthenticationError(policy: OnyxEntry<Policy>, connectionName: PolicyConnectionName) {
+    if (connectionName === CONST.POLICY.CONNECTIONS.NAME.NETSUITE) {
+        return false;
+    }
+    const connection = policy?.connections?.[connectionName];
+    return connection?.lastSync?.isAuthenticationError === true;
+}
+
 function isConnectionUnverified(policy: OnyxEntry<Policy>, connectionName: PolicyConnectionName): boolean {
     // A verified connection is one that has been successfully synced at least once
     // We'll always err on the side of considering a connection as verified connected even if we can't find a lastSync property saying as such
@@ -439,6 +447,7 @@ export {
     updatePolicyXeroConnectionConfig,
     updateManyPolicyConnectionConfigs,
     getSynchronizationErrorMessage,
+    isAuthenticationError,
     syncConnection,
     copyExistingPolicyConnection,
     isConnectionUnverified,
diff --git a/src/pages/workspace/accounting/AccountingContext.tsx b/src/pages/workspace/accounting/AccountingContext.tsx
new file mode 100644
index 000000000000..ce5ac90fd2f1
--- /dev/null
+++ b/src/pages/workspace/accounting/AccountingContext.tsx
@@ -0,0 +1,138 @@
+import type {MutableRefObject, RefObject} from 'react';
+import React, {useContext, useMemo, useRef, useState} from 'react';
+import type {View} from 'react-native';
+import AccountingConnectionConfirmationModal from '@components/AccountingConnectionConfirmationModal';
+import useLocalize from '@hooks/useLocalize';
+import {removePolicyConnection} from '@libs/actions/connections';
+import Navigation from '@libs/Navigation/Navigation';
+import {isControlPolicy} from '@libs/PolicyUtils';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import type {ConnectionName} from '@src/types/onyx/Policy';
+import type Policy from '@src/types/onyx/Policy';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import {getAccountingIntegrationData} from './utils';
+
+type ActiveIntegration = {
+    name: ConnectionName;
+    shouldDisconnectIntegrationBeforeConnecting?: boolean;
+    integrationToDisconnect?: ConnectionName;
+};
+
+type ActiveIntegrationState = ActiveIntegration & {key: number};
+
+type AccountingContextType = {
+    activeIntegration?: ActiveIntegration;
+    startIntegrationFlow: (activeIntegration: ActiveIntegration) => void;
+
+    /*
+     * This stores refs to integration buttons, so the PopoverMenu can be positioned correctly
+     */
+    popoverAnchorRefs: RefObject<Record<string, MutableRefObject<View | null>>>;
+};
+
+const popoverAnchorRefsInitialValue = Object.values(CONST.POLICY.CONNECTIONS.NAME).reduce((acc, key) => {
+    acc[key] = {current: null};
+    return acc;
+}, {} as Record<ConnectionName, MutableRefObject<View | null>>);
+
+const defaultAccountingContext = {
+    activeIntegration: undefined,
+    startIntegrationFlow: () => {},
+    popoverAnchorRefs: {
+        current: popoverAnchorRefsInitialValue,
+    },
+};
+
+const AccountingContext = React.createContext<AccountingContextType>(defaultAccountingContext);
+
+type AccountingContextProviderProps = ChildrenProps & {
+    policy: Policy;
+};
+
+function AccountingContextProvider({children, policy}: AccountingContextProviderProps) {
+    const popoverAnchorRefs = useRef<Record<string, MutableRefObject<View | null>>>(defaultAccountingContext.popoverAnchorRefs.current);
+    const [activeIntegration, setActiveIntegration] = useState<ActiveIntegrationState>();
+    const {translate} = useLocalize();
+    const policyID = policy.id;
+
+    const startIntegrationFlow = React.useCallback(
+        (newActiveIntegration: ActiveIntegration) => {
+            const accountingIntegrationData = getAccountingIntegrationData(newActiveIntegration.name, policyID, translate);
+            const workspaceUpgradeNavigationDetails = accountingIntegrationData?.workspaceUpgradeNavigationDetails;
+            if (workspaceUpgradeNavigationDetails && !isControlPolicy(policy)) {
+                Navigation.navigate(
+                    ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, workspaceUpgradeNavigationDetails.integrationAlias, workspaceUpgradeNavigationDetails.backToAfterWorkspaceUpgradeRoute),
+                );
+                return;
+            }
+            setActiveIntegration({
+                ...newActiveIntegration,
+                key: Math.random(),
+            });
+        },
+        [policy, policyID, translate],
+    );
+
+    const closeConfirmationModal = () => {
+        setActiveIntegration((prev) => {
+            if (prev) {
+                return {
+                    ...prev,
+                    shouldDisconnectIntegrationBeforeConnecting: false,
+                    integrationToDisconnect: undefined,
+                };
+            }
+            return undefined;
+        });
+    };
+
+    const accountingContext = useMemo(
+        () => ({
+            activeIntegration,
+            startIntegrationFlow,
+            popoverAnchorRefs,
+        }),
+        [activeIntegration, startIntegrationFlow],
+    );
+
+    const renderActiveIntegration = () => {
+        if (!activeIntegration) {
+            return null;
+        }
+
+        return getAccountingIntegrationData(activeIntegration.name, policyID, translate, policy, activeIntegration.key)?.setupConnectionFlow;
+    };
+
+    const shouldShowConfirmationModal = activeIntegration?.shouldDisconnectIntegrationBeforeConnecting && activeIntegration?.integrationToDisconnect;
+
+    return (
+        <AccountingContext.Provider value={accountingContext}>
+            {children}
+            {!shouldShowConfirmationModal && renderActiveIntegration()}
+            {shouldShowConfirmationModal && activeIntegration?.integrationToDisconnect && (
+                <AccountingConnectionConfirmationModal
+                    onConfirm={() => {
+                        if (!activeIntegration?.integrationToDisconnect) {
+                            return;
+                        }
+                        removePolicyConnection(policyID, activeIntegration?.integrationToDisconnect);
+                        closeConfirmationModal();
+                    }}
+                    integrationToConnect={activeIntegration?.integrationToDisconnect}
+                    onCancel={() => {
+                        setActiveIntegration(undefined);
+                    }}
+                />
+            )}
+        </AccountingContext.Provider>
+    );
+}
+
+function useAccountingContext() {
+    return useContext(AccountingContext);
+}
+
+export default AccountingContext;
+export {AccountingContextProvider, useAccountingContext};
+export type {ActiveIntegrationState};
diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx
index 9daec587d104..11c47a21f2e1 100644
--- a/src/pages/workspace/accounting/PolicyAccountingPage.tsx
+++ b/src/pages/workspace/accounting/PolicyAccountingPage.tsx
@@ -2,21 +2,14 @@ import {differenceInMinutes, isValid, parseISO} from 'date-fns';
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
+import Button from '@components/Button';
 import CollapsibleSection from '@components/CollapsibleSection';
 import ConfirmModal from '@components/ConfirmModal';
-import ConnectToNetSuiteButton from '@components/ConnectToNetSuiteButton';
-import ConnectToQuickbooksOnlineButton from '@components/ConnectToQuickbooksOnlineButton';
-import ConnectToSageIntacctButton from '@components/ConnectToSageIntacctButton';
-import ConnectToXeroButton from '@components/ConnectToXeroButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
-import type {LocaleContextProps} from '@components/LocaleContextProvider';
-import type {MenuItemProps} from '@components/MenuItem';
 import MenuItem from '@components/MenuItem';
 import MenuItemList from '@components/MenuItemList';
-import type {OfflineWithFeedbackProps} from '@components/OfflineWithFeedback';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
@@ -30,7 +23,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import {getSynchronizationErrorMessage, isConnectionUnverified, removePolicyConnection, syncConnection} from '@libs/actions/connections';
+import {getSynchronizationErrorMessage, isAuthenticationError, isConnectionUnverified, removePolicyConnection, syncConnection} from '@libs/actions/connections';
 import {
     areSettingsInErrorFields,
     findCurrentXeroOrganization,
@@ -43,166 +36,16 @@ import {
 } from '@libs/PolicyUtils';
 import Navigation from '@navigation/Navigation';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
-import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import type {AnchorPosition} from '@styles/index';
-import {getTrackingCategories} from '@userActions/connections/ConnectToXero';
 import * as Modal from '@userActions/Modal';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Policy, PolicyConnectionSyncProgress} from '@src/types/onyx';
-import type {ErrorFields, PendingFields} from '@src/types/onyx/OnyxCommon';
-import type {PolicyConnectionName} from '@src/types/onyx/Policy';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import type IconAsset from '@src/types/utils/IconAsset';
-
-type MenuItemData = MenuItemProps & {pendingAction?: OfflineWithFeedbackProps['pendingAction']; errors?: OfflineWithFeedbackProps['errors']};
-
-type PolicyAccountingPageOnyxProps = {
-    connectionSyncProgress: OnyxEntry<PolicyConnectionSyncProgress>;
-};
-
-type PolicyAccountingPageProps = WithPolicyConnectionsProps &
-    PolicyAccountingPageOnyxProps & {
-        // This is not using OnyxEntry<OnyxTypes.Policy> because the HOC withPolicyConnections will only render this component if there is a policy
-        policy: Policy;
-    };
-
-type AccountingIntegration = {
-    title: string;
-    icon: IconAsset;
-    setupConnectionButton: React.ReactNode;
-    onImportPagePress: () => void;
-    subscribedImportSettings?: string[];
-    onExportPagePress: () => void;
-    subscribedExportSettings?: string[];
-    onAdvancedPagePress: () => void;
-    subscribedAdvancedSettings?: string[];
-    onCardReconciliationPagePress: () => void;
-    pendingFields?: PendingFields<string>;
-    errorFields?: ErrorFields;
-};
-
-function accountingIntegrationData(
-    connectionName: PolicyConnectionName,
-    policyID: string,
-    translate: LocaleContextProps['translate'],
-    isConnectedToIntegration?: boolean,
-    integrationToDisconnect?: PolicyConnectionName,
-    policy?: Policy,
-): AccountingIntegration | undefined {
-    switch (connectionName) {
-        case CONST.POLICY.CONNECTIONS.NAME.QBO:
-            return {
-                title: translate('workspace.accounting.qbo'),
-                icon: Expensicons.QBOSquare,
-                setupConnectionButton: (
-                    <ConnectToQuickbooksOnlineButton
-                        policyID={policyID}
-                        shouldDisconnectIntegrationBeforeConnecting={isConnectedToIntegration}
-                        integrationToDisconnect={integrationToDisconnect}
-                    />
-                ),
-                onImportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_IMPORT.getRoute(policyID)),
-                onExportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT.getRoute(policyID)),
-                onCardReconciliationPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_CARD_RECONCILIATION.getRoute(policyID, CONST.POLICY.CONNECTIONS.ROUTE.QBO)),
-                onAdvancedPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_ADVANCED.getRoute(policyID)),
-            };
-        case CONST.POLICY.CONNECTIONS.NAME.XERO:
-            return {
-                title: translate('workspace.accounting.xero'),
-                icon: Expensicons.XeroSquare,
-                setupConnectionButton: (
-                    <ConnectToXeroButton
-                        policyID={policyID}
-                        shouldDisconnectIntegrationBeforeConnecting={isConnectedToIntegration}
-                        integrationToDisconnect={integrationToDisconnect}
-                    />
-                ),
-                onImportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_IMPORT.getRoute(policyID)),
-                subscribedImportSettings: [
-                    CONST.XERO_CONFIG.ENABLE_NEW_CATEGORIES,
-                    CONST.XERO_CONFIG.IMPORT_TRACKING_CATEGORIES,
-                    CONST.XERO_CONFIG.IMPORT_CUSTOMERS,
-                    CONST.XERO_CONFIG.IMPORT_TAX_RATES,
-                    ...getTrackingCategories(policy).map((category) => `${CONST.XERO_CONFIG.TRACKING_CATEGORY_PREFIX}${category.id}`),
-                ],
-                onExportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_EXPORT.getRoute(policyID)),
-                subscribedExportSettings: [CONST.XERO_CONFIG.EXPORTER, CONST.XERO_CONFIG.BILL_DATE, CONST.XERO_CONFIG.BILL_STATUS, CONST.XERO_CONFIG.NON_REIMBURSABLE_ACCOUNT],
-                onCardReconciliationPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_CARD_RECONCILIATION.getRoute(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO)),
-                onAdvancedPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_ADVANCED.getRoute(policyID)),
-                subscribedAdvancedSettings: [
-                    CONST.XERO_CONFIG.ENABLED,
-                    CONST.XERO_CONFIG.SYNC_REIMBURSED_REPORTS,
-                    CONST.XERO_CONFIG.REIMBURSEMENT_ACCOUNT_ID,
-                    CONST.XERO_CONFIG.INVOICE_COLLECTIONS_ACCOUNT_ID,
-                ],
-                pendingFields: policy?.connections?.xero?.config?.pendingFields,
-                errorFields: policy?.connections?.xero?.config?.errorFields,
-            };
-        case CONST.POLICY.CONNECTIONS.NAME.NETSUITE:
-            return {
-                title: translate('workspace.accounting.netsuite'),
-                icon: Expensicons.NetSuiteSquare,
-                setupConnectionButton: (
-                    <ConnectToNetSuiteButton
-                        policyID={policyID}
-                        shouldDisconnectIntegrationBeforeConnecting={isConnectedToIntegration}
-                        integrationToDisconnect={integrationToDisconnect}
-                    />
-                ),
-                onImportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_IMPORT.getRoute(policyID)),
-                onExportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_EXPORT.getRoute(policyID)),
-                onCardReconciliationPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_CARD_RECONCILIATION.getRoute(policyID, CONST.POLICY.CONNECTIONS.NAME.NETSUITE)),
-                onAdvancedPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_ADVANCED.getRoute(policyID)),
-            };
-        case CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT:
-            return {
-                title: translate('workspace.accounting.intacct'),
-                icon: Expensicons.IntacctSquare,
-                setupConnectionButton: (
-                    <ConnectToSageIntacctButton
-                        policyID={policyID}
-                        shouldDisconnectIntegrationBeforeConnecting={isConnectedToIntegration}
-                        integrationToDisconnect={integrationToDisconnect}
-                    />
-                ),
-                onImportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_IMPORT.getRoute(policyID)),
-                subscribedImportSettings: [
-                    CONST.SAGE_INTACCT_CONFIG.SYNC_ITEMS,
-                    ...Object.values(CONST.SAGE_INTACCT_CONFIG.MAPPINGS),
-                    CONST.SAGE_INTACCT_CONFIG.TAX,
-                    ...(policy?.connections?.intacct?.config?.mappings?.dimensions ?? []).map((dimension) => `${CONST.SAGE_INTACCT_CONFIG.DIMENSION_PREFIX}${dimension.dimension}`),
-                ],
-                onExportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_EXPORT.getRoute(policyID)),
-                subscribedExportSettings: [
-                    CONST.SAGE_INTACCT_CONFIG.EXPORTER,
-                    CONST.SAGE_INTACCT_CONFIG.EXPORT_DATE,
-                    CONST.SAGE_INTACCT_CONFIG.REIMBURSABLE,
-                    CONST.SAGE_INTACCT_CONFIG.REIMBURSABLE_VENDOR,
-                    CONST.SAGE_INTACCT_CONFIG.NON_REIMBURSABLE,
-                    CONST.SAGE_INTACCT_CONFIG.NON_REIMBURSABLE_ACCOUNT,
-                    policy?.connections?.intacct?.config?.export?.nonReimbursable === CONST.SAGE_INTACCT_NON_REIMBURSABLE_EXPENSE_TYPE.VENDOR_BILL
-                        ? CONST.SAGE_INTACCT_CONFIG.NON_REIMBURSABLE_VENDOR
-                        : CONST.SAGE_INTACCT_CONFIG.NON_REIMBURSABLE_CREDIT_CARD_VENDOR,
-                ],
-                onCardReconciliationPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_CARD_RECONCILIATION.getRoute(policyID, CONST.POLICY.CONNECTIONS.ROUTE.SAGE_INTACCT)),
-                onAdvancedPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_ADVANCED.getRoute(policyID)),
-                subscribedAdvancedSettings: [
-                    CONST.SAGE_INTACCT_CONFIG.AUTO_SYNC_ENABLED,
-                    CONST.SAGE_INTACCT_CONFIG.IMPORT_EMPLOYEES,
-                    CONST.SAGE_INTACCT_CONFIG.APPROVAL_MODE,
-                    CONST.SAGE_INTACCT_CONFIG.SYNC_REIMBURSED_REPORTS,
-                    CONST.SAGE_INTACCT_CONFIG.REIMBURSEMENT_ACCOUNT_ID,
-                ],
-                pendingFields: policy?.connections?.intacct?.config?.pendingFields,
-                errorFields: policy?.connections?.intacct?.config?.errorFields,
-            };
-        default:
-            return undefined;
-    }
-}
+import {AccountingContextProvider, useAccountingContext} from './AccountingContext';
+import type {MenuItemData, PolicyAccountingPageProps} from './types';
+import {getAccountingIntegrationData} from './utils';
 
 function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
     const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy.id}`);
@@ -217,6 +60,7 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
     const [datetimeToRelative, setDateTimeToRelative] = useState('');
     const threeDotsMenuContainerRef = useRef<View>(null);
     const {canUseWorkspaceFeeds} = usePermissions();
+    const {startIntegrationFlow, popoverAnchorRefs} = useAccountingContext();
 
     const lastSyncProgressDate = parseISO(connectionSyncProgress?.timestamp ?? '');
     const isSyncInProgress =
@@ -227,6 +71,15 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
 
     const accountingIntegrations = Object.values(CONST.POLICY.CONNECTIONS.NAME);
     const connectedIntegration = getConnectedIntegration(policy, accountingIntegrations) ?? connectionSyncProgress?.connectionName;
+    const synchronizationError = connectedIntegration && getSynchronizationErrorMessage(policy, connectedIntegration, isSyncInProgress);
+
+    // Enter credentials item shouldn't be shown for SageIntacct and NetSuite integrations
+    const shouldShowEnterCredentials =
+        connectedIntegration &&
+        !!synchronizationError &&
+        isAuthenticationError(policy, connectedIntegration) &&
+        connectedIntegration !== CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT &&
+        connectedIntegration !== CONST.POLICY.CONNECTIONS.NAME.NETSUITE;
 
     const policyID = policy?.id ?? '-1';
     // Get the last successful date of the integration. Then, if `connectionSyncProgress` is the same integration displayed and the state is 'jobDone', get the more recent update time of the two.
@@ -240,19 +93,32 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
 
     const overflowMenu: ThreeDotsMenuProps['menuItems'] = useMemo(
         () => [
-            {
-                icon: Expensicons.Sync,
-                text: translate('workspace.accounting.syncNow'),
-                onSelected: () => syncConnection(policyID, connectedIntegration),
-                disabled: isOffline,
-            },
+            ...(shouldShowEnterCredentials
+                ? [
+                      {
+                          icon: Expensicons.Key,
+                          text: translate('workspace.accounting.enterCredentials'),
+                          onSelected: () => Modal.close(() => startIntegrationFlow({name: connectedIntegration})),
+                          disabled: isOffline,
+                          iconRight: Expensicons.NewWindow,
+                          shouldShowRightIcon: true,
+                      },
+                  ]
+                : [
+                      {
+                          icon: Expensicons.Sync,
+                          text: translate('workspace.accounting.syncNow'),
+                          onSelected: () => syncConnection(policyID, connectedIntegration),
+                          disabled: isOffline,
+                      },
+                  ]),
             {
                 icon: Expensicons.Trashcan,
                 text: translate('workspace.accounting.disconnect'),
                 onSelected: () => Modal.close(() => setIsDisconnectModalOpen(true)),
             },
         ],
-        [translate, policyID, isOffline, connectedIntegration],
+        [shouldShowEnterCredentials, translate, isOffline, policyID, connectedIntegration, startIntegrationFlow],
     );
 
     useEffect(() => {
@@ -333,7 +199,7 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
     const connectionsMenuItems: MenuItemData[] = useMemo(() => {
         if (isEmptyObject(policy?.connections) && !isSyncInProgress) {
             return accountingIntegrations.map((integration) => {
-                const integrationData = accountingIntegrationData(integration, policyID, translate);
+                const integrationData = getAccountingIntegrationData(integration, policyID, translate);
                 const iconProps = integrationData?.icon ? {icon: integrationData.icon, iconType: CONST.ICON_TYPE_AVATAR} : {};
                 return {
                     ...iconProps,
@@ -341,7 +207,22 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
                     wrapperStyle: [styles.sectionMenuItemTopDescription],
                     shouldShowRightComponent: true,
                     title: integrationData?.title,
-                    rightComponent: integrationData?.setupConnectionButton,
+                    rightComponent: (
+                        <Button
+                            onPress={() => startIntegrationFlow({name: integration})}
+                            text={translate('workspace.accounting.setup')}
+                            style={styles.justifyContentCenter}
+                            small
+                            isDisabled={isOffline}
+                            ref={(ref) => {
+                                if (!popoverAnchorRefs?.current) {
+                                    return;
+                                }
+                                // eslint-disable-next-line react-compiler/react-compiler
+                                popoverAnchorRefs.current[integration].current = ref;
+                            }}
+                        />
+                    ),
                 };
             });
         }
@@ -349,10 +230,9 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
         if (!connectedIntegration) {
             return [];
         }
-        const synchronizationError = getSynchronizationErrorMessage(policy, connectedIntegration, isSyncInProgress);
         const shouldShowSynchronizationError = !!synchronizationError;
         const shouldHideConfigurationOptions = isConnectionUnverified(policy, connectedIntegration);
-        const integrationData = accountingIntegrationData(connectedIntegration, policyID, translate, undefined, undefined, policy);
+        const integrationData = getAccountingIntegrationData(connectedIntegration, policyID, translate, policy);
         const iconProps = integrationData?.icon ? {icon: integrationData.icon, iconType: CONST.ICON_TYPE_AVATAR} : {};
 
         const configurationOptions = [
@@ -443,6 +323,7 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
         policy,
         isSyncInProgress,
         connectedIntegration,
+        synchronizationError,
         policyID,
         translate,
         styles.sectionMenuItemTopDescription,
@@ -450,6 +331,7 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
         styles.mt5,
         styles.popoverMenuIcon,
         canUseWorkspaceFeeds,
+        styles.justifyContentCenter,
         connectionSyncProgress?.stageInProgress,
         datetimeToRelative,
         theme.spinner,
@@ -457,6 +339,9 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
         threeDotsMenuPosition,
         integrationSpecificMenuItems,
         accountingIntegrations,
+        isOffline,
+        startIntegrationFlow,
+        popoverAnchorRefs,
     ]);
 
     const otherIntegrationsItems = useMemo(() => {
@@ -467,26 +352,50 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
             (integration) => (isSyncInProgress && integration !== connectionSyncProgress?.connectionName) || integration !== connectedIntegration,
         );
         return otherIntegrations.map((integration) => {
-            const integrationData = accountingIntegrationData(integration, policyID, translate, true, connectedIntegration);
+            const integrationData = getAccountingIntegrationData(integration, policyID, translate);
             const iconProps = integrationData?.icon ? {icon: integrationData.icon, iconType: CONST.ICON_TYPE_AVATAR} : {};
             return {
                 ...iconProps,
                 title: integrationData?.title,
-                rightComponent: integrationData?.setupConnectionButton,
+                rightComponent: (
+                    <Button
+                        onPress={() =>
+                            startIntegrationFlow({
+                                name: integration,
+                                integrationToDisconnect: connectedIntegration,
+                                shouldDisconnectIntegrationBeforeConnecting: true,
+                            })
+                        }
+                        text={translate('workspace.accounting.setup')}
+                        style={styles.justifyContentCenter}
+                        small
+                        isDisabled={isOffline}
+                        ref={(r) => {
+                            if (!popoverAnchorRefs?.current) {
+                                return;
+                            }
+                            popoverAnchorRefs.current[integration].current = r;
+                        }}
+                    />
+                ),
                 interactive: false,
                 shouldShowRightComponent: true,
                 wrapperStyle: styles.sectionMenuItemTopDescription,
             };
         });
     }, [
-        connectedIntegration,
-        connectionSyncProgress?.connectionName,
-        isSyncInProgress,
         policy?.connections,
+        isSyncInProgress,
+        accountingIntegrations,
+        connectionSyncProgress?.connectionName,
+        connectedIntegration,
         policyID,
-        styles.sectionMenuItemTopDescription,
         translate,
-        accountingIntegrations,
+        styles.justifyContentCenter,
+        styles.sectionMenuItemTopDescription,
+        isOffline,
+        startIntegrationFlow,
+        popoverAnchorRefs,
     ]);
 
     return (
@@ -565,6 +474,17 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
     );
 }
 
+function PolicyAccountingPageWrapper(props: PolicyAccountingPageProps) {
+    return (
+        <AccountingContextProvider policy={props.policy}>
+            <PolicyAccountingPage
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            />
+        </AccountingContextProvider>
+    );
+}
+
 PolicyAccountingPage.displayName = 'PolicyAccountingPage';
 
-export default withPolicyConnections(PolicyAccountingPage);
+export default withPolicyConnections(PolicyAccountingPageWrapper);
diff --git a/src/pages/workspace/accounting/types.ts b/src/pages/workspace/accounting/types.ts
new file mode 100644
index 000000000000..ed4f11312f2a
--- /dev/null
+++ b/src/pages/workspace/accounting/types.ts
@@ -0,0 +1,44 @@
+import type {OnyxEntry} from 'react-native-onyx';
+import type {MenuItemProps} from '@components/MenuItem';
+import type {OfflineWithFeedbackProps} from '@components/OfflineWithFeedback';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
+import type {Policy, PolicyConnectionSyncProgress} from '@src/types/onyx';
+import type {ErrorFields, PendingFields} from '@src/types/onyx/OnyxCommon';
+import type IconAsset from '@src/types/utils/IconAsset';
+
+type MenuItemData = MenuItemProps & {pendingAction?: OfflineWithFeedbackProps['pendingAction']; errors?: OfflineWithFeedbackProps['errors']};
+
+type PolicyAccountingPageOnyxProps = {
+    connectionSyncProgress: OnyxEntry<PolicyConnectionSyncProgress>;
+};
+
+type PolicyAccountingPageProps = WithPolicyConnectionsProps &
+    PolicyAccountingPageOnyxProps & {
+        // This is not using OnyxEntry<OnyxTypes.Policy> because the HOC withPolicyConnections will only render this component if there is a policy
+        policy: Policy;
+    };
+
+type WorkspaceUpgradeNavigationDetails = {
+    /** Integration alias for workspace upgrade navigation. If passed, and the user doesn't have control policy, they will be redirected to the upgrade page */
+    integrationAlias: string;
+    /** Route to redirect to after upgrading the workspace */
+    backToAfterWorkspaceUpgradeRoute: string;
+};
+
+type AccountingIntegration = {
+    title: string;
+    icon: IconAsset;
+    setupConnectionFlow: React.ReactNode;
+    onImportPagePress: () => void;
+    subscribedImportSettings?: string[];
+    onExportPagePress: () => void;
+    subscribedExportSettings?: string[];
+    onAdvancedPagePress: () => void;
+    subscribedAdvancedSettings?: string[];
+    onCardReconciliationPagePress: () => void;
+    pendingFields?: PendingFields<string>;
+    errorFields?: ErrorFields;
+    workspaceUpgradeNavigationDetails?: WorkspaceUpgradeNavigationDetails;
+};
+
+export type {MenuItemData, PolicyAccountingPageOnyxProps, PolicyAccountingPageProps, AccountingIntegration};
diff --git a/src/pages/workspace/accounting/utils.tsx b/src/pages/workspace/accounting/utils.tsx
new file mode 100644
index 000000000000..22bc97236b70
--- /dev/null
+++ b/src/pages/workspace/accounting/utils.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import ConnectToNetSuiteFlow from '@components/ConnectToNetSuiteFlow';
+import ConnectToQuickbooksOnlineFlow from '@components/ConnectToQuickbooksOnlineFlow';
+import ConnectToSageIntacctFlow from '@components/ConnectToSageIntacctFlow';
+import ConnectToXeroFlow from '@components/ConnectToXeroFlow';
+import * as Expensicons from '@components/Icon/Expensicons';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
+import Navigation from '@navigation/Navigation';
+import {getTrackingCategories} from '@userActions/connections/ConnectToXero';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import type {Policy} from '@src/types/onyx';
+import type {PolicyConnectionName} from '@src/types/onyx/Policy';
+import type {AccountingIntegration} from './types';
+
+function getAccountingIntegrationData(
+    connectionName: PolicyConnectionName,
+    policyID: string,
+    translate: LocaleContextProps['translate'],
+    policy?: Policy,
+    key?: number,
+): AccountingIntegration | undefined {
+    switch (connectionName) {
+        case CONST.POLICY.CONNECTIONS.NAME.QBO:
+            return {
+                title: translate('workspace.accounting.qbo'),
+                icon: Expensicons.QBOSquare,
+                setupConnectionFlow: (
+                    <ConnectToQuickbooksOnlineFlow
+                        policyID={policyID}
+                        key={key}
+                    />
+                ),
+                onImportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_IMPORT.getRoute(policyID)),
+                onExportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT.getRoute(policyID)),
+                onCardReconciliationPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_CARD_RECONCILIATION.getRoute(policyID, CONST.POLICY.CONNECTIONS.ROUTE.QBO)),
+                onAdvancedPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_ADVANCED.getRoute(policyID)),
+            };
+        case CONST.POLICY.CONNECTIONS.NAME.XERO:
+            return {
+                title: translate('workspace.accounting.xero'),
+                icon: Expensicons.XeroSquare,
+                setupConnectionFlow: (
+                    <ConnectToXeroFlow
+                        policyID={policyID}
+                        key={key}
+                    />
+                ),
+                onImportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_IMPORT.getRoute(policyID)),
+                subscribedImportSettings: [
+                    CONST.XERO_CONFIG.ENABLE_NEW_CATEGORIES,
+                    CONST.XERO_CONFIG.IMPORT_TRACKING_CATEGORIES,
+                    CONST.XERO_CONFIG.IMPORT_CUSTOMERS,
+                    CONST.XERO_CONFIG.IMPORT_TAX_RATES,
+                    ...getTrackingCategories(policy).map((category) => `${CONST.XERO_CONFIG.TRACKING_CATEGORY_PREFIX}${category.id}`),
+                ],
+                onExportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_EXPORT.getRoute(policyID)),
+                subscribedExportSettings: [CONST.XERO_CONFIG.EXPORTER, CONST.XERO_CONFIG.BILL_DATE, CONST.XERO_CONFIG.BILL_STATUS, CONST.XERO_CONFIG.NON_REIMBURSABLE_ACCOUNT],
+                onCardReconciliationPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_CARD_RECONCILIATION.getRoute(policyID, CONST.POLICY.CONNECTIONS.ROUTE.XERO)),
+                onAdvancedPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_ADVANCED.getRoute(policyID)),
+                subscribedAdvancedSettings: [
+                    CONST.XERO_CONFIG.ENABLED,
+                    CONST.XERO_CONFIG.SYNC_REIMBURSED_REPORTS,
+                    CONST.XERO_CONFIG.REIMBURSEMENT_ACCOUNT_ID,
+                    CONST.XERO_CONFIG.INVOICE_COLLECTIONS_ACCOUNT_ID,
+                ],
+                pendingFields: policy?.connections?.xero?.config?.pendingFields,
+                errorFields: policy?.connections?.xero?.config?.errorFields,
+            };
+        case CONST.POLICY.CONNECTIONS.NAME.NETSUITE:
+            return {
+                title: translate('workspace.accounting.netsuite'),
+                icon: Expensicons.NetSuiteSquare,
+                setupConnectionFlow: (
+                    <ConnectToNetSuiteFlow
+                        policyID={policyID}
+                        key={key}
+                    />
+                ),
+                onImportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_IMPORT.getRoute(policyID)),
+                onExportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_EXPORT.getRoute(policyID)),
+                onCardReconciliationPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_CARD_RECONCILIATION.getRoute(policyID, CONST.POLICY.CONNECTIONS.ROUTE.NETSUITE)),
+                onAdvancedPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_ADVANCED.getRoute(policyID)),
+                workspaceUpgradeNavigationDetails: {
+                    integrationAlias: CONST.UPGRADE_FEATURE_INTRO_MAPPING.netsuite.alias,
+                    backToAfterWorkspaceUpgradeRoute: ROUTES.POLICY_ACCOUNTING_NETSUITE_TOKEN_INPUT.getRoute(policyID),
+                },
+            };
+        case CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT:
+            return {
+                title: translate('workspace.accounting.intacct'),
+                icon: Expensicons.IntacctSquare,
+                setupConnectionFlow: (
+                    <ConnectToSageIntacctFlow
+                        policyID={policyID}
+                        key={key}
+                    />
+                ),
+                onImportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_IMPORT.getRoute(policyID)),
+                subscribedImportSettings: [
+                    CONST.SAGE_INTACCT_CONFIG.SYNC_ITEMS,
+                    ...Object.values(CONST.SAGE_INTACCT_CONFIG.MAPPINGS),
+                    CONST.SAGE_INTACCT_CONFIG.TAX,
+                    ...(policy?.connections?.intacct?.config?.mappings?.dimensions ?? []).map((dimension) => `${CONST.SAGE_INTACCT_CONFIG.DIMENSION_PREFIX}${dimension.dimension}`),
+                ],
+                onExportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_EXPORT.getRoute(policyID)),
+                subscribedExportSettings: [
+                    CONST.SAGE_INTACCT_CONFIG.EXPORTER,
+                    CONST.SAGE_INTACCT_CONFIG.EXPORT_DATE,
+                    CONST.SAGE_INTACCT_CONFIG.REIMBURSABLE,
+                    CONST.SAGE_INTACCT_CONFIG.REIMBURSABLE_VENDOR,
+                    CONST.SAGE_INTACCT_CONFIG.NON_REIMBURSABLE,
+                    CONST.SAGE_INTACCT_CONFIG.NON_REIMBURSABLE_ACCOUNT,
+                    policy?.connections?.intacct?.config?.export?.nonReimbursable === CONST.SAGE_INTACCT_NON_REIMBURSABLE_EXPENSE_TYPE.VENDOR_BILL
+                        ? CONST.SAGE_INTACCT_CONFIG.NON_REIMBURSABLE_VENDOR
+                        : CONST.SAGE_INTACCT_CONFIG.NON_REIMBURSABLE_CREDIT_CARD_VENDOR,
+                ],
+                onCardReconciliationPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_CARD_RECONCILIATION.getRoute(policyID, CONST.POLICY.CONNECTIONS.ROUTE.SAGE_INTACCT)),
+                onAdvancedPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_ADVANCED.getRoute(policyID)),
+                subscribedAdvancedSettings: [
+                    CONST.SAGE_INTACCT_CONFIG.AUTO_SYNC_ENABLED,
+                    CONST.SAGE_INTACCT_CONFIG.IMPORT_EMPLOYEES,
+                    CONST.SAGE_INTACCT_CONFIG.APPROVAL_MODE,
+                    CONST.SAGE_INTACCT_CONFIG.SYNC_REIMBURSED_REPORTS,
+                    CONST.SAGE_INTACCT_CONFIG.REIMBURSEMENT_ACCOUNT_ID,
+                ],
+                workspaceUpgradeNavigationDetails: {
+                    integrationAlias: CONST.UPGRADE_FEATURE_INTRO_MAPPING.intacct.alias,
+                    backToAfterWorkspaceUpgradeRoute: ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PREREQUISITES.getRoute(policyID),
+                },
+                pendingFields: policy?.connections?.intacct?.config?.pendingFields,
+                errorFields: policy?.connections?.intacct?.config?.errorFields,
+            };
+        default:
+            return undefined;
+    }
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export {getAccountingIntegrationData};