diff --git a/src/components/button.tsx b/src/components/button.tsx
index 806d8d8d..8c929977 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -17,7 +17,7 @@ export type ButtonProps = MappedOmit< ComponentProps< typeof Button >, 'variant'
 	tooltipText?: string;
 };
 
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'link' | 'icon';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'link' | 'icon';
 
 /**
  * The arbitrary Tailwind variants below (e.g., `[&.is-secondary]`) are used to
diff --git a/src/components/connect-create-buttons.tsx b/src/components/connect-create-buttons.tsx
new file mode 100644
index 00000000..b178fe6e
--- /dev/null
+++ b/src/components/connect-create-buttons.tsx
@@ -0,0 +1,65 @@
+import { __ } from '@wordpress/i18n';
+import { cx } from '../lib/cx';
+import { getIpcApi } from '../lib/get-ipc-api';
+import { ArrowIcon } from './arrow-icon';
+import Button, { ButtonVariant } from './button';
+import offlineIcon from './offline-icon';
+import Tooltip from './tooltip';
+
+interface ConnectCreateButtonsProps {
+	connectSite: () => void;
+	isOffline: boolean;
+	connectButtonVariant: ButtonVariant;
+	createButtonVariant: ButtonVariant;
+	disableConnectButtonStyle?: boolean;
+}
+
+export const ConnectCreateButtons = ( {
+	connectSite,
+	isOffline,
+	createButtonVariant,
+	connectButtonVariant,
+	disableConnectButtonStyle,
+}: ConnectCreateButtonsProps ) => {
+	return (
+		<>
+			<Tooltip
+				disabled={ ! isOffline }
+				text={ __( 'Connecting a site requires an internet connection.' ) }
+				icon={ offlineIcon }
+			>
+				<Button
+					onClick={ connectSite }
+					disabled={ isOffline }
+					aria-disabled={ isOffline }
+					variant={ connectButtonVariant }
+					className={ cx(
+						! disableConnectButtonStyle &&
+							! isOffline &&
+							'!text-a8c-blueberry !shadow-a8c-blueberry'
+					) }
+				>
+					{ __( 'Connect site' ) }
+				</Button>
+			</Tooltip>
+			<Tooltip
+				disabled={ ! isOffline }
+				text={ __( 'Creating a site requires an internet connection.' ) }
+				icon={ offlineIcon }
+			>
+				<Button
+					onClick={ () => {
+						getIpcApi().openURL( 'https://wordpress.com/start/new-site' );
+					} }
+					variant={ createButtonVariant }
+					className={ cx( ! isOffline && '!text-a8c-blueberry !shadow-a8c-blueberry' ) }
+					disabled={ isOffline }
+					aria-disabled={ isOffline }
+				>
+					{ __( 'Create new site' ) }
+					<ArrowIcon />
+				</Button>
+			</Tooltip>
+		</>
+	);
+};
diff --git a/src/components/content-tab-sync.tsx b/src/components/content-tab-sync.tsx
index c4923afd..978cac6b 100644
--- a/src/components/content-tab-sync.tsx
+++ b/src/components/content-tab-sync.tsx
@@ -6,10 +6,10 @@ import { useSyncSites } from '../hooks/sync-sites';
 import { useAuth } from '../hooks/use-auth';
 import { SyncSite } from '../hooks/use-fetch-wpcom-sites';
 import { useOffline } from '../hooks/use-offline';
-import { cx } from '../lib/cx';
 import { getIpcApi } from '../lib/get-ipc-api';
 import { ArrowIcon } from './arrow-icon';
 import Button from './button';
+import { ConnectCreateButtons } from './connect-create-buttons';
 import offlineIcon from './offline-icon';
 import { SyncConnectedSites } from './sync-connected-sites';
 import { SyncSitesModalSelector } from './sync-sites-modal-selector';
@@ -60,42 +60,16 @@ function CreateConnectSite( {
 	const { __ } = useI18n();
 	const isOffline = useOffline();
 
-	const offlineMessageCreate = __( 'Creating new site requires an internet connection.' );
-	const offlineMessageConnect = __( 'Connecting a site requires an internet connection.' );
-
 	return (
 		<div className="mt-8">
 			<div className="flex gap-4">
-				<Tooltip disabled={ ! isOffline } text={ offlineMessageConnect }>
-					<Button
-						aria-disabled={ isOffline }
-						variant="primary"
-						onClick={ () => {
-							if ( isOffline ) {
-								return;
-							}
-							openSitesSyncSelector();
-						} }
-					>
-						{ __( 'Connect site' ) }
-					</Button>
-				</Tooltip>
-				<Tooltip disabled={ ! isOffline } text={ offlineMessageCreate }>
-					<Button
-						aria-disabled={ isOffline }
-						className={ cx( ! isOffline && '!text-a8c-blueberry !shadow-a8c-blueberry' ) }
-						variant="secondary"
-						onClick={ async () => {
-							if ( isOffline ) {
-								return;
-							}
-							await getIpcApi().openURL( 'https://wordpress.com/start/new-site' );
-						} }
-					>
-						{ __( 'Create new site' ) }
-						<ArrowIcon />
-					</Button>
-				</Tooltip>
+				<ConnectCreateButtons
+					connectSite={ openSitesSyncSelector }
+					isOffline={ isOffline }
+					connectButtonVariant="primary"
+					createButtonVariant="secondary"
+					disableConnectButtonStyle={ true }
+				/>
 			</div>
 		</div>
 	);
diff --git a/src/components/sync-connected-sites.tsx b/src/components/sync-connected-sites.tsx
index ee1a86a8..bfc7bf8f 100644
--- a/src/components/sync-connected-sites.tsx
+++ b/src/components/sync-connected-sites.tsx
@@ -6,11 +6,15 @@ import { useMemo } from 'react';
 import { useSyncSites } from '../hooks/sync-sites';
 import { useConfirmationDialog } from '../hooks/use-confirmation-dialog';
 import { SyncSite } from '../hooks/use-fetch-wpcom-sites';
+import { useOffline } from '../hooks/use-offline';
 import { useSyncStatesProgressInfo } from '../hooks/use-sync-states-progress-info';
+import { cx } from '../lib/cx';
 import { getIpcApi } from '../lib/get-ipc-api';
 import { ArrowIcon } from './arrow-icon';
 import { Badge } from './badge';
 import Button from './button';
+import { ConnectCreateButtons } from './connect-create-buttons';
+import offlineIcon from './offline-icon';
 import ProgressBar from './progress-bar';
 import { SyncPullPushClear } from './sync-pull-push-clear';
 import Tooltip from './tooltip';
@@ -35,6 +39,7 @@ export function SyncConnectedSites( {
 	selectedSite: SiteDetails;
 } ) {
 	const { __ } = useI18n();
+	const isOffline = useOffline();
 	const {
 		pullSite,
 		clearPullState,
@@ -224,7 +229,6 @@ export function SyncConnectedSites( {
 												<ProgressBar value={ pushState.status.progress } maxValue={ 100 } />
 											</div>
 										) }
-
 										{ pushState.status && pushState.hasFinished && (
 											<SyncPullPushClear
 												onClick={ () => clearPushState( selectedSite.id, connectedSite.id ) }
@@ -238,37 +242,55 @@ export function SyncConnectedSites( {
 											! pushState.isInProgress &&
 											! pushState.isError &&
 											! pushState.hasFinished && (
-												<div className="flex gap-2 pl-4 ml-auto shrink-0 h-5">
-													<Button
-														variant="link"
-														className="!text-black hover:!text-a8c-blueberry"
-														onClick={ () => {
-															const detail = connectedSite.isStaging
-																? __(
-																		"Pulling will replace your Studio site's files and database with a copy from your staging site."
-																  )
-																: __(
-																		"Pulling will replace your Studio site's files and database with a copy from your production site."
-																  );
-															showPullConfirmation( () => pullSite( connectedSite, selectedSite ), {
-																detail,
-															} );
-														} }
-														disabled={ isAnySitePulling || isAnySitePushing }
-													>
-														<Icon icon={ cloudDownload } />
-														{ __( 'Pull' ) }
-													</Button>
-													<Button
-														variant="link"
-														className="!text-black hover:!text-a8c-blueberry"
-														onClick={ () => handlePushSite( connectedSite ) }
-														disabled={ isAnySitePulling || isAnySitePushing }
-													>
-														<Icon icon={ cloudUpload } />
-														{ __( 'Push' ) }
-													</Button>
-												</div>
+												<Tooltip
+													disabled={ ! isOffline }
+													text={ __(
+														'Pulling or pushing a site requires an internet connection.'
+													) }
+													icon={ offlineIcon }
+													placement="top-start"
+												>
+													<div className="flex gap-2 pl-4 ml-auto shrink-0 h-5">
+														<Button
+															variant="link"
+															className={ cx(
+																! isOffline && '!text-black hover:!text-a8c-blueberry'
+															) }
+															onClick={ () => {
+																const detail = connectedSite.isStaging
+																	? __(
+																			"Pulling will replace your Studio site's files and database with a copy from your staging site."
+																	  )
+																	: __(
+																			"Pulling will replace your Studio site's files and database with a copy from your production site."
+																	  );
+																showPullConfirmation(
+																	() => pullSite( connectedSite, selectedSite ),
+																	{
+																		detail,
+																	}
+																);
+															} }
+															disabled={ isAnySitePulling || isAnySitePushing || isOffline }
+															aria-disabled={ isOffline }
+														>
+															<Icon icon={ cloudDownload } />
+															{ __( 'Pull' ) }
+														</Button>
+														<Button
+															variant="link"
+															className={ cx(
+																! isOffline && '!text-black hover:!text-a8c-blueberry'
+															) }
+															onClick={ () => handlePushSite( connectedSite ) }
+															disabled={ isAnySitePulling || isAnySitePushing || isOffline }
+															aria-disabled={ isOffline }
+														>
+															<Icon icon={ cloudUpload } />
+															{ __( 'Push' ) }
+														</Button>
+													</div>
+												</Tooltip>
 											) }
 									</div>
 								</div>
@@ -279,23 +301,12 @@ export function SyncConnectedSites( {
 			</div>
 
 			<div className="flex mt-auto gap-4 py-5 px-8 border-t border-a8c-gray-5 flex-shrink-0">
-				<Button
-					onClick={ openSitesSyncSelector }
-					variant="secondary"
-					className="!text-a8c-blueberry !shadow-a8c-blueberry"
-				>
-					{ __( 'Connect site' ) }
-				</Button>
-				<Button
-					onClick={ () => {
-						getIpcApi().openURL( 'https://wordpress.com/start/new-site' );
-					} }
-					variant="secondary"
-					className="!text-a8c-blueberry !shadow-a8c-blueberry"
-				>
-					{ __( 'Create new site' ) }
-					<ArrowIcon />
-				</Button>
+				<ConnectCreateButtons
+					connectSite={ openSitesSyncSelector }
+					isOffline={ isOffline }
+					connectButtonVariant="secondary"
+					createButtonVariant="secondary"
+				/>
 			</div>
 		</div>
 	);
diff --git a/src/components/sync-sites-modal-selector.tsx b/src/components/sync-sites-modal-selector.tsx
index 3993c83f..59ea326e 100644
--- a/src/components/sync-sites-modal-selector.tsx
+++ b/src/components/sync-sites-modal-selector.tsx
@@ -1,13 +1,15 @@
-import { SearchControl as SearchControlWp } from '@wordpress/components';
-import { sprintf } from '@wordpress/i18n';
+import { Icon, SearchControl as SearchControlWp } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import { useState, useEffect } from 'react';
 import { SyncSite } from '../hooks/use-fetch-wpcom-sites';
+import { useOffline } from '../hooks/use-offline';
 import { cx } from '../lib/cx';
 import { getIpcApi } from '../lib/get-ipc-api';
 import { Badge } from './badge';
 import Button from './button';
 import Modal from './modal';
+import offlineIcon from './offline-icon';
 import { WordPressShortLogo } from './wordpress-short-logo';
 
 const SearchControl = process.env.NODE_ENV === 'test' ? () => null : SearchControlWp;
@@ -28,6 +30,7 @@ export function SyncSitesModalSelector( {
 	const { __ } = useI18n();
 	const [ selectedSiteId, setSelectedSiteId ] = useState< number | null >( null );
 	const [ searchQuery, setSearchQuery ] = useState< string >( '' );
+	const isOffline = useOffline();
 	const filteredSites = syncSites.filter( ( site ) => {
 		const searchQueryLower = searchQuery.toLowerCase();
 		return (
@@ -49,39 +52,49 @@ export function SyncSitesModalSelector( {
 			onRequestClose={ onRequestClose }
 			title={ __( 'Connect a WordPress.com site' ) }
 		>
-			<SearchSites searchQuery={ searchQuery } setSearchQuery={ setSearchQuery } />
-			<div className="h-[calc(84vh-232px)]">
-				{ isLoading && (
-					<div className="flex justify-center items-center h-full">{ __( 'Loading sites…' ) }</div>
-				) }
+			<div className="relative">
+				<SearchSites searchQuery={ searchQuery } setSearchQuery={ setSearchQuery } />
+				<div className="h-[calc(84vh-232px)]">
+					{ isLoading && (
+						<div className="flex justify-center items-center h-full">
+							{ __( 'Loading sites…' ) }
+						</div>
+					) }
 
-				{ ! isLoading && isEmpty && (
-					<div className="flex justify-center items-center h-full">
-						{ searchQuery
-							? sprintf( __( 'No sites found for "%s"' ), searchQuery )
-							: __( 'No sites found' ) }
-					</div>
-				) }
+					{ ! isLoading && isEmpty && (
+						<div className="flex justify-center items-center h-full">
+							{ searchQuery
+								? sprintf( __( 'No sites found for "%s"' ), searchQuery )
+								: __( 'No sites found' ) }
+						</div>
+					) }
+
+					{ ! isLoading && ! isEmpty && (
+						<ListSites
+							syncSites={ filteredSites }
+							selectedSiteId={ selectedSiteId }
+							onSelectSite={ setSelectedSiteId }
+						/>
+					) }
+				</div>
+				<Footer
+					onRequestClose={ onRequestClose }
+					onConnect={ () => {
+						if ( ! selectedSiteId ) {
+							return;
+						}
+						onConnect( selectedSiteId );
+						onRequestClose();
+					} }
+					disabled={ ! selectedSiteId }
+				/>
 
-				{ ! isLoading && ! isEmpty && (
-					<ListSites
-						syncSites={ filteredSites }
-						selectedSiteId={ selectedSiteId }
-						onSelectSite={ setSelectedSiteId }
-					/>
+				{ isOffline && (
+					<div className="absolute inset-0 bg-white/80 z-10 flex items-center justify-center">
+						<SyncSitesOfflineView />
+					</div>
 				) }
 			</div>
-			<Footer
-				onRequestClose={ onRequestClose }
-				onConnect={ () => {
-					if ( ! selectedSiteId ) {
-						return;
-					}
-					onConnect( selectedSiteId );
-					onRequestClose();
-				} }
-				disabled={ ! selectedSiteId }
-			/>
 		</Modal>
 	);
 }
@@ -258,3 +271,14 @@ function Footer( {
 		</div>
 	);
 }
+
+const SyncSitesOfflineView = () => {
+	const offlineMessage = __( 'Connecting a site requires an internet connection.' );
+
+	return (
+		<div className="flex items-center justify-center h-12 px-2 pt-4 text-a8c-gray-70 gap-1">
+			<Icon className="m-1 fill-a8c-gray-70" size={ 24 } icon={ offlineIcon } />
+			<span className="text-[13px] leading-[16px]">{ offlineMessage }</span>
+		</div>
+	);
+};