diff --git a/js/src/components/account-card/index.js b/js/src/components/account-card/index.js
index bebf7df103..7b2433366a 100644
--- a/js/src/components/account-card/index.js
+++ b/js/src/components/account-card/index.js
@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import GridiconPhone from 'gridicons/dist/phone';
 import { Icon, store as storeIcon } from '@wordpress/icons';
 
@@ -125,6 +124,11 @@ const alignStyleName = {
 	top: `gla-account-card__styled--align-top`,
 };
 
+const indicatorAlignStyleName = {
+	...alignStyleName,
+	toDetail: 'gla-account-card__indicator--align-to-detail',
+};
+
 /**
  * Renders a Card component with account info and status.
  *
@@ -142,6 +146,9 @@ const alignStyleName = {
  * @param {JSX.Element} [props.indicator] Indicator of actions or status on the right side of the card.
  * @param {'center'|'top'} [props.alignIcon='center'] Specify the vertical alignment of leading icon.
  * @param {'center'|'top'} [props.alignIndicator='center'] Specify the vertical alignment of `indicator`.
+ * @param {JSX.Element} [props.detail] Detail content below the card description.
+ * @param {boolean} [props.expandedDetail=false] Whether to expand the detail content.
+ * @param {JSX.Element} [props.actions] Actions content below the card detail.
  * @param {Array<JSX.Element>} [props.children] Children to be rendered if needs more content within the card.
  * @param {Object} [props.restProps] Props to be forwarded to Section.Card.
  */
@@ -156,12 +163,16 @@ export default function AccountCard( {
 	alignIcon = 'center',
 	indicator,
 	alignIndicator = 'center',
+	detail,
+	expandedDetail = false,
+	actions,
 	children,
 	...restProps
 } ) {
 	const cardClassName = classnames(
 		'gla-account-card',
 		disabled ? 'gla-account-card--is-disabled' : false,
+		expandedDetail ? 'gla-account-card--is-expanded-detail' : false,
 		className
 	);
 
@@ -172,19 +183,15 @@ export default function AccountCard( {
 
 	const indicatorClassName = classnames(
 		'gla-account-card__indicator',
-		alignStyleName[ alignIndicator ]
+		indicatorAlignStyleName[ alignIndicator ]
 	);
 
 	return (
 		<Section.Card className={ cardClassName } { ...restProps }>
 			<Section.Card.Body>
-				<Flex gap={ 4 }>
-					{ icon && (
-						<FlexItem className={ iconClassName }>
-							{ icon }
-						</FlexItem>
-					) }
-					<FlexBlock>
+				<div className="gla-account-card__body-layout">
+					{ icon && <div className={ iconClassName }>{ icon }</div> }
+					<div className="gla-account-card__subject">
 						{ title && (
 							<Subsection.Title className="gla-account-card__title">
 								{ title }
@@ -200,13 +207,23 @@ export default function AccountCard( {
 								{ helper }
 							</div>
 						) }
-					</FlexBlock>
+					</div>
+					{ detail && (
+						<div className="gla-account-card__detail">
+							{ detail }
+						</div>
+					) }
 					{ indicator && (
-						<FlexItem className={ indicatorClassName }>
+						<div className={ indicatorClassName }>
 							{ indicator }
-						</FlexItem>
+						</div>
+					) }
+					{ actions && (
+						<div className="gla-account-card__actions">
+							{ actions }
+						</div>
 					) }
-				</Flex>
+				</div>
 			</Section.Card.Body>
 			{ children }
 		</Section.Card>
diff --git a/js/src/components/account-card/index.scss b/js/src/components/account-card/index.scss
index e33e2b5fd1..4a0b96ffa9 100644
--- a/js/src/components/account-card/index.scss
+++ b/js/src/components/account-card/index.scss
@@ -5,18 +5,60 @@
 		opacity: 0.5;
 	}
 
+	&--is-expanded-detail {
+		.gla-account-card__indicator {
+			grid-area: 1/3;
+		}
+
+		.gla-account-card__detail {
+			grid-area: 2/2/auto/span 2;
+		}
+	}
+
 	&__styled {
 		&--align-top {
 			align-self: flex-start;
 		}
 	}
 
+	&__body-layout {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+	}
+
 	&__icon {
+		grid-area: 1/1/span 2;
+		margin-right: $grid-unit-20;
 		line-height: 0;
 	}
 
+	&__subject {
+		grid-area: 1/2;
+	}
+
+	&__indicator {
+		grid-area: 1/3/span 2;
+		margin-left: $grid-unit-20;
+
+		&--align-to-detail {
+			grid-area: 2/3;
+			margin-top: $grid-unit-15;
+		}
+	}
+
+	&__detail {
+		grid-area: 2/2;
+		margin-top: $grid-unit-15;
+	}
+
+	&__actions {
+		grid-area: 3/2/auto/span 2;
+		margin-top: $grid-unit-15;
+	}
+
 	&__title {
-		margin-bottom: $grid-unit-05;
+		margin: 0;
 		color: $black;
 	}
 
@@ -25,6 +67,7 @@
 		flex-direction: column;
 		align-items: flex-start;
 		gap: 1em;
+		margin-top: $grid-unit-05;
 		color: $gray-900;
 
 		> p {
@@ -65,11 +108,12 @@
 	}
 
 	@media (max-width: $break-small) {
-		.components-card__body > .components-flex {
+		&__body-layout {
+			display: flex;
 			flex-direction: column;
 			align-items: flex-start;
-			> .components-flex-block,
-			> .components-flex-item {
+
+			> div {
 				margin: $grid-unit-10;
 			}
 		}
diff --git a/js/src/components/app-select-control/index.js b/js/src/components/app-select-control/index.js
index 351bedd844..d6015cfea4 100644
--- a/js/src/components/app-select-control/index.js
+++ b/js/src/components/app-select-control/index.js
@@ -20,6 +20,7 @@ import './index.scss';
  * @param {Function} [props.onChange=noop] Callback function triggered when the selected value changes. Receives the new value as an argument.
  * @param {string} [props.value] The currently selected value. This component should be used as a controlled component. A special case is that after mounting, when `autoSelectFirstOption` is true and `value` is undefined, it tries to call back `onChange` once to select the first option so that the `value` can be consistent with the `<select>` element's own value.
  * @param {boolean} [props.autoSelectFirstOption=false] If true, automatically triggers the onChange callback with the first option as value when no value is provided. If only one option is available, the select control is also changed to non-interactive.
+ * @param {boolean} [props.nonInteractive=false] If true, the select control is changed to non-interactive.
  * @param {*} [props.rest] Additional props passed to the `SelectControl` component.
  */
 const AppSelectControl = ( props ) => {
@@ -29,6 +30,7 @@ const AppSelectControl = ( props ) => {
 		onChange = noop,
 		value,
 		autoSelectFirstOption = false,
+		nonInteractive = false,
 		...rest
 	} = props;
 	const shouldAutoSelectOnceRef = useRef( autoSelectFirstOption === true );
@@ -51,20 +53,21 @@ const AppSelectControl = ( props ) => {
 		...rest,
 	};
 
-	const hasSingleValueStyle = autoSelectFirstOption && options?.length === 1;
-	if ( hasSingleValueStyle ) {
+	const isNonInteractive =
+		( autoSelectFirstOption && options?.length === 1 ) || nonInteractive;
+	if ( isNonInteractive ) {
 		selectProps = {
 			...selectProps,
+			readOnly: true,
 			suffix: ' ',
 			tabIndex: '-1',
-			readOnly: true,
 		};
 	}
 
 	return (
 		<div
 			className={ classNames( 'app-select-control', className, {
-				'app-select-control--has-single-value': hasSingleValueStyle,
+				'app-select-control--is-non-interactive': isNonInteractive,
 			} ) }
 		>
 			<SelectControl { ...selectProps } />
diff --git a/js/src/components/app-select-control/index.scss b/js/src/components/app-select-control/index.scss
index c50f101414..3edc183aa4 100644
--- a/js/src/components/app-select-control/index.scss
+++ b/js/src/components/app-select-control/index.scss
@@ -2,8 +2,8 @@
 	.components-base-control__field {
 		margin-bottom: 0;
 	}
-}
 
-.app-select-control--has-single-value {
-	pointer-events: none;
+	&.app-select-control--is-non-interactive {
+		pointer-events: none;
+	}
 }
diff --git a/js/src/components/google-ads-account-card/connect-ads/connect-button.js b/js/src/components/google-ads-account-card/connect-ads/connect-button.js
new file mode 100644
index 0000000000..992abfdb89
--- /dev/null
+++ b/js/src/components/google-ads-account-card/connect-ads/connect-button.js
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '.~/components/app-button';
+import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
+import { FILTER_ONBOARDING } from '.~/utils/tracks';
+
+/**
+ * Clicking on the button to connect an existing Google Ads account.
+ *
+ * @event gla_ads_account_connect_button_click
+ * @property {number} id The account ID to be connected.
+ * @property {string} [context] Indicates the place where the button is located.
+ * @property {string} [step] Indicates the step in the onboarding process.
+ */
+
+/**
+ * Google Ads account connection button.
+ *
+ * @param {Object} props Props.
+ * @param {number} props.accountID The Google Ads account ID to be connected.
+ * @param {Object} props.restProps Rest props. Forwarded to AppButton.
+ * @fires gla_ads_account_connect_button_click when "Connect" button is clicked.
+ * @return {JSX.Element} Google Ads connect button component.
+ */
+const ConnectButton = ( { accountID, ...restProps } ) => {
+	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
+
+	return (
+		<AppButton
+			isSecondary
+			disabled={ ! accountID }
+			eventName="gla_ads_account_connect_button_click"
+			eventProps={ getEventProps( {
+				id: Number( accountID ),
+			} ) }
+			{ ...restProps }
+		>
+			{ __( 'Connect', 'google-listings-and-ads' ) }
+		</AppButton>
+	);
+};
+
+export default ConnectButton;
diff --git a/js/src/components/google-ads-account-card/connect-ads/index.js b/js/src/components/google-ads-account-card/connect-ads/index.js
index e6d407c51d..9bced8caf5 100644
--- a/js/src/components/google-ads-account-card/connect-ads/index.js
+++ b/js/src/components/google-ads-account-card/connect-ads/index.js
@@ -11,6 +11,7 @@ import { CardDivider } from '@wordpress/components';
 import AccountCard, { APPEARANCE } from '.~/components/account-card';
 import AppButton from '.~/components/app-button';
 import AppDocumentationLink from '.~/components/app-documentation-link';
+import ConnectButton from './connect-button';
 import ContentButtonLayout from '.~/components/content-button-layout';
 import LoadingLabel from '.~/components/loading-label';
 import Section from '.~/wcdl/section';
@@ -18,23 +19,12 @@ import Subsection from '.~/wcdl/subsection';
 import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
 import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
-import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
 import AdsAccountSelectControl from '.~/components/ads-account-select-control';
 import { useAppDispatch } from '.~/data';
-import { FILTER_ONBOARDING } from '.~/utils/tracks';
 import './index.scss';
 
 /**
- * Clicking on the button to connect an existing Google Ads account.
- *
- * @event gla_ads_account_connect_button_click
- * @property {number} id The account ID to be connected.
- * @property {string} [context] Indicates the place where the button is located.
- * @property {string} [step] Indicates the step in the onboarding process.
- */
-
-/**
- * @fires gla_ads_account_connect_button_click when "Connect" button is clicked.
+ * Connect to an existing Google Ads account.
  * @fires gla_documentation_link_click with `{ context: 'setup-ads-connect-account', link_id: 'connect-sub-account', href: 'https://support.google.com/google-ads/answer/6139186' }`
  * @param {Object} props React props
  * @return {JSX.Element} {@link AccountCard} filled with content.
@@ -49,7 +39,6 @@ const ConnectAds = ( props ) => {
 		data: { id: value },
 	} );
 	const { refetchGoogleAdsAccount } = useGoogleAdsAccount();
-	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
 	const { createNotice } = useDispatchCoreNotices();
 	const { fetchGoogleAdsAccountStatus } = useAppDispatch();
 
@@ -131,17 +120,10 @@ const ConnectAds = ( props ) => {
 							) }
 						/>
 					) : (
-						<AppButton
-							isSecondary
-							disabled={ ! value }
-							eventName="gla_ads_account_connect_button_click"
-							eventProps={ getEventProps( {
-								id: Number( value ),
-							} ) }
+						<ConnectButton
+							accountID={ value }
 							onClick={ handleConnectClick }
-						>
-							{ __( 'Connect', 'google-listings-and-ads' ) }
-						</AppButton>
+						/>
 					) }
 				</ContentButtonLayout>
 			</Section.Card.Body>
diff --git a/js/src/components/google-combo-account-card/account-details.js b/js/src/components/google-combo-account-card/account-details.js
index 40f81bcf74..6f3618b836 100644
--- a/js/src/components/google-combo-account-card/account-details.js
+++ b/js/src/components/google-combo-account-card/account-details.js
@@ -23,7 +23,7 @@ const AccountDetails = () => {
 		<>
 			<p>{ google.email }</p>
 			<p>
-				{ googleMCAccount.id > 0 &&
+				{ googleMCAccount?.id > 0 &&
 					sprintf(
 						// Translators: %s is the Merchant Center ID
 						__(
@@ -34,7 +34,7 @@ const AccountDetails = () => {
 					) }
 			</p>
 			<p>
-				{ googleAdsAccount.id > 0 &&
+				{ googleAdsAccount?.id > 0 &&
 					sprintf(
 						// Translators: %s is the Google Ads ID
 						__( 'Google Ads ID: %s', 'google-listings-and-ads' ),
diff --git a/js/src/components/google-combo-account-card/connect-ads/connect-ads-footer.js b/js/src/components/google-combo-account-card/connect-ads/connect-ads-footer.js
new file mode 100644
index 0000000000..9405e43857
--- /dev/null
+++ b/js/src/components/google-combo-account-card/connect-ads/connect-ads-footer.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '.~/components/app-button';
+import DisconnectAccount from '.~/components/google-ads-account-card/disconnect-account';
+
+/**
+ * Footer component.
+ *
+ * @param {Object} props Props.
+ * @param {boolean} props.isConnected Whether the account is connected.
+ * @param {Object} props.restProps Rest props. Passed to AppButton.
+ * @return {JSX.Element} Footer component.
+ */
+const ConnectAdsFooter = ( { isConnected, ...restProps } ) => {
+	// If the account is connected, show the disconnect button.
+	if ( isConnected ) {
+		return <DisconnectAccount />;
+	}
+
+	return (
+		<AppButton isTertiary { ...restProps }>
+			{ __(
+				'Or, create a new Google Ads account',
+				'google-listings-and-ads'
+			) }
+		</AppButton>
+	);
+};
+
+export default ConnectAdsFooter;
diff --git a/js/src/components/google-combo-account-card/connect-ads/connect-ads.js b/js/src/components/google-combo-account-card/connect-ads/connect-ads.js
new file mode 100644
index 0000000000..5c538c9751
--- /dev/null
+++ b/js/src/components/google-combo-account-card/connect-ads/connect-ads.js
@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
+import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import { useAppDispatch } from '.~/data';
+import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
+import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady';
+import AccountCard from '.~/components/account-card';
+import AdsAccountSelectControl from '.~/components/ads-account-select-control';
+import ConnectedIconLabel from '.~/components/connected-icon-label';
+import ConnectAdsFooter from './connect-ads-footer';
+import LoadingLabel from '.~/components/loading-label';
+import ConnectButton from '.~/components/google-ads-account-card/connect-ads/connect-button';
+
+/**
+ * ConnectAds component renders an account card to connect to an existing Google Ads account.
+ *
+ * @return {JSX.Element} {@link AccountCard} filled with content.
+ */
+const ConnectAds = () => {
+	const [ value, setValue ] = useState();
+	const [ isLoading, setLoading ] = useState( false );
+	const { refetchGoogleAdsAccount } = useGoogleAdsAccount();
+	const { createNotice } = useDispatchCoreNotices();
+	const { fetchGoogleAdsAccountStatus } = useAppDispatch();
+	const isConnected = useGoogleAdsAccountReady();
+	const {
+		existingAccounts: accounts,
+		hasFinishedResolution: hasFinishedResolutionForExistingAdsAccount,
+	} = useExistingGoogleAdsAccounts();
+	const {
+		googleAdsAccount,
+		hasFinishedResolution: hasFinishedResolutionForCurrentAccount,
+	} = useGoogleAdsAccount();
+	const [ connectGoogleAdsAccount ] = useApiFetchCallback( {
+		path: '/wc/gla/ads/accounts',
+		method: 'POST',
+		data: { id: value },
+	} );
+
+	useEffect( () => {
+		if ( isConnected ) {
+			setValue( googleAdsAccount.id );
+		}
+	}, [ googleAdsAccount, isConnected ] );
+
+	const handleConnectClick = async () => {
+		if ( ! value ) {
+			return;
+		}
+
+		setLoading( true );
+		try {
+			await connectGoogleAdsAccount();
+			await fetchGoogleAdsAccountStatus();
+			await refetchGoogleAdsAccount();
+			setLoading( false );
+		} catch ( error ) {
+			setLoading( false );
+			createNotice(
+				'error',
+				__(
+					'Unable to connect your Google Ads account. Please try again later.',
+					'google-listings-and-ads'
+				)
+			);
+		}
+	};
+
+	// If the accounts are still being fetched, we don't want to show the card.
+	if (
+		! hasFinishedResolutionForExistingAdsAccount ||
+		! hasFinishedResolutionForCurrentAccount ||
+		! accounts?.length
+	) {
+		return null;
+	}
+
+	const getIndicator = () => {
+		if ( isLoading ) {
+			return (
+				<LoadingLabel
+					text={ __( 'Connecting…', 'google-listings-and-ads' ) }
+				/>
+			);
+		}
+
+		if ( isConnected ) {
+			return <ConnectedIconLabel />;
+		}
+
+		return (
+			<ConnectButton accountID={ value } onClick={ handleConnectClick } />
+		);
+	};
+
+	return (
+		<AccountCard
+			className="gla-google-combo-account-card gla-google-combo-service-account-card--ads"
+			title={ __(
+				'Connect to existing Google Ads account',
+				'google-listings-and-ads'
+			) }
+			helper={ __(
+				'Required to set up conversion measurement for your store.',
+				'google-listings-and-ads'
+			) }
+			alignIndicator="toDetail"
+			indicator={ getIndicator() }
+			detail={
+				<AdsAccountSelectControl
+					value={ value }
+					onChange={ setValue }
+					autoSelectFirstOption
+					nonInteractive={ isConnected }
+				/>
+			}
+			actions={
+				<ConnectAdsFooter
+					isConnected={ isConnected }
+					disabled={ isLoading }
+				/>
+			}
+		/>
+	);
+};
+
+export default ConnectAds;
diff --git a/js/src/components/google-combo-account-card/connect-ads/index.js b/js/src/components/google-combo-account-card/connect-ads/index.js
new file mode 100644
index 0000000000..5701879424
--- /dev/null
+++ b/js/src/components/google-combo-account-card/connect-ads/index.js
@@ -0,0 +1 @@
+export { default } from './connect-ads';
diff --git a/js/src/components/google-combo-account-card/connected-google-combo-account-card.js b/js/src/components/google-combo-account-card/connected-google-combo-account-card.js
index 5d981edf80..fd33eca09d 100644
--- a/js/src/components/google-combo-account-card/connected-google-combo-account-card.js
+++ b/js/src/components/google-combo-account-card/connected-google-combo-account-card.js
@@ -2,11 +2,14 @@
  * Internal dependencies
  */
 import AccountCard, { APPEARANCE } from '../account-card';
+import ConnectAds from './connect-ads';
 import AccountDetails from './account-details';
 import Indicator from './indicator';
 import getAccountCreationTexts from './getAccountCreationTexts';
 import SpinnerCard from '.~/components/spinner-card';
 import useAutoCreateAdsMCAccounts from '.~/hooks/useAutoCreateAdsMCAccounts';
+import useGoogleAdsAccountReady from '.~/hooks/useGoogleAdsAccountReady';
+import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
 import './connected-google-combo-account-card.scss';
 
 /**
@@ -16,20 +19,36 @@ import './connected-google-combo-account-card.scss';
 const ConnectedGoogleComboAccountCard = () => {
 	const { hasDetermined, creatingWhich } = useAutoCreateAdsMCAccounts();
 	const { text, subText } = getAccountCreationTexts( creatingWhich );
+	const { existingAccounts: existingGoogleAdsAccounts } =
+		useExistingGoogleAdsAccounts();
+	const isConnected = useGoogleAdsAccountReady();
 
 	if ( ! hasDetermined ) {
 		return <SpinnerCard />;
 	}
 
+	// @TODO: edit mode implementation in 2605
+	const editMode = false;
+	const hasExistingGoogleAdsAccounts = existingGoogleAdsAccounts?.length > 0;
+	const showConnectAds =
+		( editMode && hasExistingGoogleAdsAccounts ) ||
+		( ! isConnected && hasExistingGoogleAdsAccounts );
+
 	return (
-		<AccountCard
-			appearance={ APPEARANCE.GOOGLE }
-			alignIcon="top"
-			className="gla-google-combo-account-card--connected"
-			description={ text || <AccountDetails /> }
-			helper={ subText }
-			indicator={ <Indicator showSpinner={ Boolean( creatingWhich ) } /> }
-		/>
+		<div>
+			<AccountCard
+				appearance={ APPEARANCE.GOOGLE }
+				alignIcon="top"
+				className="gla-google-combo-account-card--connected"
+				description={ text || <AccountDetails /> }
+				helper={ subText }
+				indicator={
+					<Indicator showSpinner={ Boolean( creatingWhich ) } />
+				}
+			/>
+
+			{ showConnectAds && <ConnectAds /> }
+		</div>
 	);
 };
 
diff --git a/js/src/components/google-combo-account-card/index.js b/js/src/components/google-combo-account-card/index.js
index c1db3e5391..fdcfb2a525 100644
--- a/js/src/components/google-combo-account-card/index.js
+++ b/js/src/components/google-combo-account-card/index.js
@@ -7,6 +7,7 @@ import AccountCard from '.~/components/account-card';
 import RequestFullAccessGoogleAccountCard from '../google-account-card/request-full-access-google-account-card';
 import ConnectGoogleComboAccountCard from './connect-google-combo-account-card';
 import ConnectedGoogleComboAccountCard from './connected-google-combo-account-card';
+import './index.scss';
 
 export default function GoogleComboAccountCard( { disabled = false } ) {
 	const { google, scope, hasFinishedResolution } = useGoogleAccount();
diff --git a/js/src/components/google-combo-account-card/index.scss b/js/src/components/google-combo-account-card/index.scss
new file mode 100644
index 0000000000..0f59a5c384
--- /dev/null
+++ b/js/src/components/google-combo-account-card/index.scss
@@ -0,0 +1,5 @@
+.gla-google-combo-account-card {
+	.gla-account-card__actions .app-button {
+		margin-left: calc(var(--main-gap) / -2);
+	}
+}
diff --git a/tests/e2e/specs/setup-mc/step-1-accounts.test.js b/tests/e2e/specs/setup-mc/step-1-accounts.test.js
index 04b3f1cc1a..3c84923884 100644
--- a/tests/e2e/specs/setup-mc/step-1-accounts.test.js
+++ b/tests/e2e/specs/setup-mc/step-1-accounts.test.js
@@ -256,6 +256,7 @@ test.describe( 'Set up accounts', () => {
 
 				const googleAccountCard =
 					setUpAccountsPage.getGoogleAccountCard();
+
 				await expect(
 					googleAccountCard.getByText( 'Merchant Center ID: 1234', {
 						exact: true,
@@ -275,6 +276,88 @@ test.describe( 'Set up accounts', () => {
 		} );
 	} );
 
+	test.describe( 'Google Ads card', () => {
+		test.beforeAll( async () => {
+			await setUpAccountsPage.mockJetpackConnected();
+			await setUpAccountsPage.mockGoogleConnected();
+			await setUpAccountsPage.mockMCHasAccounts();
+			await setUpAccountsPage.mockMCConnected();
+			await setUpAccountsPage.mockAdsAccountDisconnected();
+			await setUpAccountsPage.fulfillAdsAccounts( [
+				{
+					id: 111111,
+					name: 'gla',
+				},
+				{
+					id: 222222,
+					name: 'gla',
+				},
+				{
+					id: 333333,
+					name: 'gla',
+				},
+			] );
+
+			await setUpAccountsPage.goto();
+		} );
+
+		test.describe( 'When existing Google Ads accounts are available, but not connected', () => {
+			test( 'should see the Google Ads card with the correct title and body', async () => {
+				const googleAdsAccountCard =
+					setUpAccountsPage.getGoogleAdsAccountCard();
+
+				await expect(
+					googleAdsAccountCard.getByText(
+						'Connect to existing Google Ads account',
+						{ exact: true }
+					)
+				).toBeVisible();
+
+				await expect(
+					googleAdsAccountCard.getByText(
+						'Required to set up conversion measurement for your store.',
+						{ exact: true }
+					)
+				).toBeVisible();
+			} );
+
+			test( 'should see the button as enabled when selects the account from dropdown', async () => {
+				const googleAdsAccountCard =
+					setUpAccountsPage.getGoogleAdsAccountCard();
+
+				const adsAccountDropdown =
+					googleAdsAccountCard.locator( 'select' );
+				await adsAccountDropdown.selectOption( '222222' );
+
+				await expect(
+					googleAdsAccountCard.getByRole( 'button', {
+						name: 'Connect',
+					} )
+				).toBeEnabled();
+			} );
+
+			test( 'should display the correct Google Ads ID when connected', async () => {
+				const googleAccountCard =
+					setUpAccountsPage.getGoogleAccountCard();
+				const googleAdsAccountCard =
+					setUpAccountsPage.getGoogleAdsAccountCard();
+
+				const once = setUpAccountsPage.fulfillTimes( 1 );
+				await once.fulfillAdsAccounts( { id: 12345 } );
+				await once.mockAdsAccountConnected();
+				await once.mockAdsStatusClaimed();
+
+				await googleAdsAccountCard
+					.getByRole( 'button', { name: 'Connect' } )
+					.click();
+
+				await expect( googleAccountCard ).toContainText(
+					'Google Ads ID: 12345'
+				);
+			} );
+		} );
+	} );
+
 	test.describe( 'Continue button', () => {
 		test.beforeAll( async () => {
 			// Mock Jetpack as connected
@@ -322,6 +405,7 @@ test.describe( 'Set up accounts', () => {
 				await setUpAccountsPage.mockAdsAccountConnected();
 				await setUpAccountsPage.mockMCConnected();
 				await setUpAccountsPage.mockAdsAccountConnected();
+				await setUpAccountsPage.mockAdsStatusClaimed();
 
 				await setUpAccountsPage.goto();
 			} );
diff --git a/tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js b/tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js
index 1876de366c..cf50408e4a 100644
--- a/tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js
+++ b/tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js
@@ -257,11 +257,9 @@ export default class SetUpAccountsPage extends MockRequests {
 	 * @return {import('@playwright/test').Locator} Get Google Ads account card.
 	 */
 	getGoogleAdsAccountCard() {
-		return this.getAccountCards( {
-			has: this.page.locator( '.gla-account-card__title', {
-				hasText: 'Google Ads',
-			} ),
-		} ).first();
+		return this.page.locator(
+			'.gla-google-combo-service-account-card--ads'
+		);
 	}
 
 	/**