diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c83f75a32869c..8552b9506d76c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -888,6 +888,9 @@ importers:
       '@automattic/jetpack-shared-extension-utils':
         specifier: workspace:*
         version: link:../shared-extension-utils
+      '@automattic/popup-monitor':
+        specifier: 1.0.2
+        version: 1.0.2
       '@automattic/social-previews':
         specifier: 2.0.1-beta.13
         version: 2.0.1-beta.13(@babel/runtime@7.24.0)(@types/react@18.3.1)(react-dom@18.2.0)(react@18.2.0)
diff --git a/projects/js-packages/components/changelog/add-social-connect-button b/projects/js-packages/components/changelog/add-social-connect-button
new file mode 100644
index 0000000000000..979138de2705f
--- /dev/null
+++ b/projects/js-packages/components/changelog/add-social-connect-button
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed notices z-index for global notices when modal is open
diff --git a/projects/js-packages/components/components/global-notices/styles.module.scss b/projects/js-packages/components/components/global-notices/styles.module.scss
index 730d1391d3229..98c297670d5d8 100644
--- a/projects/js-packages/components/components/global-notices/styles.module.scss
+++ b/projects/js-packages/components/components/global-notices/styles.module.scss
@@ -6,6 +6,8 @@
 		inset-block-start: auto; // top
 		inset-block-end: 0; // bottom
 		inset-inline: 0; // left and right
+		// Modals have 100000, so this needs to be above them
+		z-index: 100001;
 
 		@include break-small {
 			width: auto;
diff --git a/projects/js-packages/publicize-components/changelog/add-social-connect-button b/projects/js-packages/publicize-components/changelog/add-social-connect-button
new file mode 100644
index 0000000000000..766e0ff8c9e9d
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/add-social-connect-button
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add connect form/button for connection management
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
index ba5e622ec4be4..3f876c970245d 100644
--- a/projects/js-packages/publicize-components/package.json
+++ b/projects/js-packages/publicize-components/package.json
@@ -22,6 +22,7 @@
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
+		"@automattic/popup-monitor": "1.0.2",
 		"@automattic/social-previews": "2.0.1-beta.13",
 		"@wordpress/annotations": "2.56.0",
 		"@wordpress/api-fetch": "6.53.0",
diff --git a/projects/js-packages/publicize-components/src/components/add-connection-modal/connect-form.tsx b/projects/js-packages/publicize-components/src/components/add-connection-modal/connect-form.tsx
new file mode 100644
index 0000000000000..51f699a14d396
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/components/add-connection-modal/connect-form.tsx
@@ -0,0 +1,109 @@
+import { Button, useGlobalNotices } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+import { useCallback } from 'react';
+import { requestExternalAccess } from '../../utils';
+import styles from './style.module.scss';
+import type { SupportedService } from './use-supported-services';
+
+type ConnectFormProps = {
+	service: SupportedService;
+	isSmall?: boolean;
+	onConfirm: ( data: unknown ) => void;
+	onSubmit?: VoidFunction;
+	displayInputs?: boolean;
+	isMastodonAlreadyConnected?: ( username: string ) => boolean;
+};
+
+const isValidMastodonUsername = ( username: string ) =>
+	/^@?\b([A-Z0-9_]+)@([A-Z0-9.-]+\.[A-Z]{2,})$/gi.test( username );
+
+/**
+ * Connect form component
+ *
+ * @param {ConnectFormProps} props - Component props
+ *
+ * @returns {import('react').ReactNode} Connect form component
+ */
+export function ConnectForm( {
+	service,
+	isSmall,
+	onConfirm,
+	onSubmit,
+	displayInputs,
+	isMastodonAlreadyConnected,
+}: ConnectFormProps ) {
+	const { createErrorNotice } = useGlobalNotices();
+
+	const onSubmitForm = useCallback(
+		( event: React.FormEvent ) => {
+			event.preventDefault();
+			// Prevent Jetpack settings from being submitted
+			event.stopPropagation();
+
+			if ( onSubmit ) {
+				return onSubmit();
+			}
+			const formData = new FormData( event.target as HTMLFormElement );
+			const url = new URL( service.connect_URL );
+
+			switch ( service.ID ) {
+				case 'mastodon': {
+					const instance = formData.get( 'instance' ).toString().trim();
+
+					if ( ! isValidMastodonUsername( instance ) ) {
+						createErrorNotice( __( 'Invalid Mastodon username', 'jetpack' ) );
+
+						return;
+					}
+
+					if ( isMastodonAlreadyConnected?.( instance ) ) {
+						createErrorNotice( __( 'This Mastodon account is already connected', 'jetpack' ) );
+
+						return;
+					}
+
+					url.searchParams.set( 'instance', formData.get( 'instance' ) as string );
+					break;
+				}
+
+				default:
+					break;
+			}
+
+			requestExternalAccess( url.toString(), onConfirm );
+		},
+		[
+			createErrorNotice,
+			isMastodonAlreadyConnected,
+			onConfirm,
+			onSubmit,
+			service.ID,
+			service.connect_URL,
+		]
+	);
+
+	return (
+		<form
+			className={ classNames( styles[ 'connect-form' ], { [ styles.small ]: isSmall } ) }
+			onSubmit={ onSubmitForm }
+		>
+			{ displayInputs ? (
+				<>
+					{ 'mastodon' === service.ID ? (
+						<input
+							required
+							type="text"
+							name="instance"
+							aria-label={ __( 'Mastodon username', 'jetpack' ) }
+							placeholder={ '@mastodon@mastodon.social' }
+						/>
+					) : null }
+				</>
+			) : null }
+			<Button variant="primary" type="submit" size={ isSmall ? 'small' : 'normal' }>
+				{ __( 'Connect', 'jetpack' ) }
+			</Button>
+		</form>
+	);
+}
diff --git a/projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/connect-page.tsx b/projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/connect-page.tsx
index 4b2423d91e25c..45d7d3de8f64a 100644
--- a/projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/connect-page.tsx
+++ b/projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/connect-page.tsx
@@ -1,17 +1,39 @@
 import { Button, useBreakpointMatch } from '@automattic/jetpack-components';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
-import { SupportedService } from '../constants';
+import { useCallback } from 'react';
+import { store as socialStore } from '../../../social-store';
+import { ConnectForm } from '../connect-form';
 import styles from './style.module.scss';
+import type { SupportedService } from '../use-supported-services';
 
 type ConnectPageProps = {
 	service: SupportedService;
 	onBackClicked: VoidFunction;
+	onConfirm: ( data: unknown ) => void;
 };
 
-export const ConnectPage: React.FC< ConnectPageProps > = ( { service, onBackClicked } ) => {
+export const ConnectPage: React.FC< ConnectPageProps > = ( {
+	service,
+	onBackClicked,
+	onConfirm,
+} ) => {
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 
+	const connections = useSelect( select => {
+		return select( socialStore ).getConnections();
+	}, [] );
+
+	const isMastodonAlreadyConnected = useCallback(
+		( username: string ) => {
+			return connections.some( connection => {
+				return connection.service_name === 'mastodon' && connection.external_display === username;
+			} );
+		},
+		[ connections ]
+	);
+
 	return (
 		<>
 			<div
@@ -20,7 +42,7 @@ export const ConnectPage: React.FC< ConnectPageProps > = ( { service, onBackClic
 				} ) }
 			>
 				{ service.examples.map( ( Example, idx ) => (
-					<div key={ service.name + idx } className={ styles.example }>
+					<div key={ service.ID + idx } className={ styles.example }>
 						<Example />
 					</div>
 				) ) }
@@ -33,19 +55,13 @@ export const ConnectPage: React.FC< ConnectPageProps > = ( { service, onBackClic
 				>
 					{ __( 'Back', 'jetpack' ) }
 				</Button>
-				<form className={ classNames( styles[ 'connect-form' ], { [ styles.small ]: isSmall } ) }>
-					{ 'mastodon' === service.name ? (
-						<input
-							required
-							type="text"
-							aria-label={ __( 'Mastodon username', 'jetpack' ) }
-							placeholder={ '@mastodon@mastodon.social' }
-						/>
-					) : null }
-					<Button type="submit" variant="primary">
-						{ __( 'Connect', 'jetpack' ) }
-					</Button>
-				</form>
+				<ConnectForm
+					service={ service }
+					isSmall={ isSmall }
+					onConfirm={ onConfirm }
+					displayInputs
+					isMastodonAlreadyConnected={ isMastodonAlreadyConnected }
+				/>
 			</div>
 		</>
 	);
diff --git a/projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/style.module.scss b/projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/style.module.scss
index b07292d0e8970..3596ccfb140e5 100644
--- a/projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/style.module.scss
+++ b/projects/js-packages/publicize-components/src/components/add-connection-modal/connect-page/style.module.scss
@@ -37,17 +37,3 @@
 .chevron-back {
 	display: block;
 }
-
-.connect-form {
-	display: grid;
-	gap: 0.5rem;
-
-	& > input {
-		height: 100%;
-		width: 18rem;
-	}
-
-	&:not(.small) {
-		grid-auto-flow: column;
-	}
-}
\ No newline at end of file
diff --git a/projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx b/projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx
index 965d8d007dc6d..43ec87163a9c3 100644
--- a/projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/add-connection-modal/index.tsx
@@ -1,12 +1,13 @@
 import { Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { Modal } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, chevronDown } from '@wordpress/icons';
 import classNames from 'classnames';
-import { useCallback } from 'react';
+import { ConnectForm } from './connect-form';
 import { ConnectPage } from './connect-page/connect-page';
-import { SupportedService, getSupportedServices } from './constants';
 import styles from './style.module.scss';
+import { SupportedService, useSupportedServices } from './use-supported-services';
 
 type AddConnectionModalProps = {
 	onCloseModal: VoidFunction;
@@ -19,6 +20,8 @@ const AddConnectionModal = ( {
 	currentService,
 	setCurrentService,
 }: AddConnectionModalProps ) => {
+	const supportedServices = useSupportedServices();
+
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 
 	const onServiceSelected = useCallback(
@@ -32,6 +35,11 @@ const AddConnectionModal = ( {
 		setCurrentService( null );
 	}, [ setCurrentService ] );
 
+	const onConfirm = useCallback( ( data: unknown ) => {
+		// eslint-disable-next-line no-console
+		console.log( data );
+	}, [] );
+
 	return (
 		<Modal
 			className={ classNames( styles.modal, {
@@ -44,13 +52,17 @@ const AddConnectionModal = ( {
 					? sprintf(
 							// translators: %s: Name of the service the user connects to.
 							__( 'Connecting a new %s account', 'jetpack' ),
-							currentService.title
+							currentService.label
 					  )
 					: __( 'Add a new connection to Jetpack Social', 'jetpack' )
 			}
 		>
 			{ currentService ? (
-				<ConnectPage service={ currentService } onBackClicked={ onBackClicked } />
+				<ConnectPage
+					service={ currentService }
+					onBackClicked={ onBackClicked }
+					onConfirm={ onConfirm }
+				/>
 			) : (
 				<table>
 					<thead>
@@ -61,8 +73,8 @@ const AddConnectionModal = ( {
 						</tr>
 					</thead>
 					<tbody>
-						{ getSupportedServices().map( service => (
-							<tr key={ service.name }>
+						{ supportedServices.map( service => (
+							<tr key={ service.ID }>
 								<td>
 									<service.icon iconSize={ isSmall ? 36 : 48 } />
 								</td>
@@ -71,16 +83,21 @@ const AddConnectionModal = ( {
 										[ styles.small ]: ! isSmall,
 									} ) }
 								>
-									<h2 className={ styles.title }>{ service.title }</h2>
+									<h2 className={ styles.title }>{ service.label }</h2>
 									{ ! isSmall ? (
 										<p className={ styles.description }>{ service.description }</p>
 									) : null }
 								</td>
 								<td>
 									<div className={ styles[ 'column-actions' ] }>
-										<Button type="submit" variant="primary" size={ isSmall ? 'small' : 'normal' }>
-											{ __( 'Connect', 'jetpack' ) }
-										</Button>
+										<ConnectForm
+											service={ service }
+											isSmall={ isSmall }
+											onConfirm={ onConfirm }
+											onSubmit={
+												service.needsCustomInputs ? onServiceSelected( service ) : undefined
+											}
+										/>
 										<Button
 											size={ isSmall ? 'small' : 'normal' }
 											className={ styles[ 'chevron-button' ] }
diff --git a/projects/js-packages/publicize-components/src/components/add-connection-modal/style.module.scss b/projects/js-packages/publicize-components/src/components/add-connection-modal/style.module.scss
index 9df83df34f8b8..8f91fb19f9dae 100644
--- a/projects/js-packages/publicize-components/src/components/add-connection-modal/style.module.scss
+++ b/projects/js-packages/publicize-components/src/components/add-connection-modal/style.module.scss
@@ -64,3 +64,17 @@ tr:not(:last-child) > td {
 	padding-inline-end: 0.5rem;
 	margin-inline-start: 0.4rem;
 }
+
+.connect-form {
+	display: grid;
+	gap: 0.5rem;
+
+	& > input {
+		height: 100%;
+		width: 18rem;
+	}
+
+	&:not(.small) {
+		grid-auto-flow: column;
+	}
+}
diff --git a/projects/js-packages/publicize-components/src/components/add-connection-modal/constants.tsx b/projects/js-packages/publicize-components/src/components/add-connection-modal/use-supported-services.tsx
similarity index 87%
rename from projects/js-packages/publicize-components/src/components/add-connection-modal/constants.tsx
rename to projects/js-packages/publicize-components/src/components/add-connection-modal/use-supported-services.tsx
index ed763877a9ba1..3ebee993a0ab9 100644
--- a/projects/js-packages/publicize-components/src/components/add-connection-modal/constants.tsx
+++ b/projects/js-packages/publicize-components/src/components/add-connection-modal/use-supported-services.tsx
@@ -1,5 +1,6 @@
 import { SocialServiceIcon } from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import connectionsButtonFacebook from '../../assets/connections-button-facebook.png';
@@ -10,27 +11,43 @@ import connectionsInstagramBusiness from '../../assets/connections-instagram-bus
 import connectionsLinkedin from '../../assets/connections-linkedin.png';
 import connectionsNextdoor from '../../assets/connections-nextdoor.png';
 import connectionsTumblr from '../../assets/connections-tumblr.png';
+import { store } from '../../social-store';
+import { ConnectionService } from '../../social-store/types';
 
 const sharingButtonLink = 'https://wordpress.com/support/sharing/';
 
-export interface SupportedService {
-	title: string;
+export interface SupportedService extends ConnectionService {
 	icon: React.ComponentType< { iconSize: number } >;
-	description: string;
-	name: string;
 	examples?: Array< React.ComponentType >;
+	needsCustomInputs?: boolean;
 }
 
-export const getSupportedServices = (): SupportedService[] => {
+/**
+ * Get the list of supported services.
+ *
+ * @returns {Array< SupportedService >} The list of supported services
+ */
+export function useSupportedServices(): Array< SupportedService > {
+	const availableServices = useSelect( select => {
+		return select( store )
+			.getServices()
+			.reduce< Record< string, ConnectionService > >(
+				( serviceData, service ) => ( {
+					...serviceData,
+					[ service.ID ]: service,
+				} ),
+				{}
+			);
+	}, [] );
+
 	return [
 		{
-			title: __( 'Facebook', 'jetpack' ),
+			...availableServices.facebook,
 			icon: props => <SocialServiceIcon serviceName="facebook" { ...props } />,
 			description: __(
 				"Facebook's massive active user base makes for a great place to share your posts and connect with your followers.",
 				'jetpack'
 			),
-			name: 'facebook',
 			examples: [
 				() => (
 					<>
@@ -73,13 +90,12 @@ export const getSupportedServices = (): SupportedService[] => {
 			],
 		},
 		{
-			title: __( 'Instagram Business', 'jetpack' ),
+			...availableServices[ 'instagram-business' ],
 			icon: props => <SocialServiceIcon serviceName="instagram" { ...props } />,
 			description: __(
 				'Share photos from your site to your Instagram Business account.',
 				'jetpack'
 			),
-			name: 'instagram',
 			examples: [
 				() => (
 					<>
@@ -125,13 +141,12 @@ export const getSupportedServices = (): SupportedService[] => {
 			],
 		},
 		{
-			title: __( 'LinkedIn', 'jetpack' ),
+			...availableServices.linkedin,
 			icon: props => <SocialServiceIcon serviceName="linkedin" { ...props } />,
 			description: __(
 				'Reach a professional audience and contribute valuable content by sharing your posts with the LinkedIn community.',
 				'jetpack'
 			),
-			name: 'linkedin',
 			examples: [
 				() => (
 					<>
@@ -174,13 +189,12 @@ export const getSupportedServices = (): SupportedService[] => {
 			],
 		},
 		{
-			title: __( 'Nextdoor', 'jetpack' ),
+			...availableServices.nextdoor,
 			icon: props => <SocialServiceIcon serviceName="nextdoor" { ...props } />,
 			description: __(
 				'Share your posts with your local community on Nextdoor, facilitating meaningful interactions and fostering a sense of belonging among neighbors.',
 				'jetpack'
 			),
-			name: 'nextdoor',
 			examples: [
 				() => (
 					<>
@@ -197,13 +211,12 @@ export const getSupportedServices = (): SupportedService[] => {
 			],
 		},
 		{
-			title: __( 'Tumblr', 'jetpack' ),
+			...availableServices.tumblr,
 			icon: props => <SocialServiceIcon serviceName="tumblr-alt" { ...props } />,
 			description: __(
 				'Share posts on your Tumblr blog to expand your reach to a diverse younger audience in a fun and creative community.',
 				'jetpack'
 			),
-			name: 'tumblr',
 			examples: [
 				() => (
 					<>
@@ -243,13 +256,13 @@ export const getSupportedServices = (): SupportedService[] => {
 			],
 		},
 		{
-			title: __( 'Mastodon', 'jetpack' ),
+			...availableServices.mastodon,
+			needsCustomInputs: true,
 			icon: props => <SocialServiceIcon serviceName="mastodon" { ...props } />,
 			description: __(
 				'Share your posts to an open-source social network with a community that values privacy and freedom.',
 				'jetpack'
 			),
-			name: 'mastodon',
 			examples: [
 				() => (
 					<>
@@ -261,5 +274,8 @@ export const getSupportedServices = (): SupportedService[] => {
 				),
 			],
 		},
-	];
-};
+	].filter(
+		// Return only the ones that are present in the available services.
+		service => Boolean( service.ID )
+	);
+}
diff --git a/projects/js-packages/publicize-components/src/components/connection-management/index.tsx b/projects/js-packages/publicize-components/src/components/connection-management/index.tsx
index 9c4389a40446d..adfa66a42901a 100644
--- a/projects/js-packages/publicize-components/src/components/connection-management/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/connection-management/index.tsx
@@ -6,7 +6,10 @@ import classNames from 'classnames';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { store } from '../../social-store';
 import AddConnectionModal from '../add-connection-modal';
-import { SupportedService, getSupportedServices } from '../add-connection-modal/constants';
+import {
+	SupportedService,
+	useSupportedServices,
+} from '../add-connection-modal/use-supported-services';
 import ConnectionIcon from '../connection-icon';
 import { ConnectionInfo } from './connection-info';
 import { Disconnect } from './disconnect';
@@ -34,14 +37,16 @@ const ConnectionManagement = ( { className = null } ) => {
 		refresh();
 	}, [ refresh ] );
 
+	const supportedServices = useSupportedServices();
+
 	const onReconnect = useCallback(
 		( serviceName: string ) => () => {
-			const service = getSupportedServices().find( _service => _service.name === serviceName );
+			const service = supportedServices.find( _service => _service.ID === serviceName );
 
 			setCurrentService( service );
 			toggleModal();
 		},
-		[]
+		[ supportedServices ]
 	);
 
 	const onCloseModal = useCallback( () => {
diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js b/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js
index 81569dfb4afa8..43bea09498835 100644
--- a/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js
+++ b/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js
@@ -116,3 +116,14 @@ export function getConnectionProfileDetails( state, service, { forceDefaults = f
 export function getDeletingConnections( state ) {
 	return state.connectionData?.deletingConnections ?? [];
 }
+
+/**
+ * Returns the services list from the store.
+ *
+ * @param {import("../types").SocialStoreState} state - State object.
+ *
+ * @returns {Array<import("../types").ConnectionService>} The services list
+ */
+export function getServices( state ) {
+	return state.connectionData?.services ?? [];
+}
diff --git a/projects/js-packages/publicize-components/src/social-store/types.ts b/projects/js-packages/publicize-components/src/social-store/types.ts
index 779639f8d7cf4..eb43e3ea8e686 100644
--- a/projects/js-packages/publicize-components/src/social-store/types.ts
+++ b/projects/js-packages/publicize-components/src/social-store/types.ts
@@ -13,6 +13,7 @@ export type Connection = {
 	id: string;
 	service_name: string;
 	display_name: string;
+	external_display?: string;
 	username: string;
 	enabled: boolean;
 	done: boolean;
@@ -26,6 +27,14 @@ export type Connection = {
 	status: ConnectionStatus;
 };
 
+export type ConnectionService = {
+	ID: string;
+	label: string;
+	type: 'publicize' | 'other';
+	description: string;
+	connect_URL: string;
+};
+
 export type ConnectionData = {
 	connections: Connection[];
 	deletingConnections?: Array< number | string >;
diff --git a/projects/js-packages/publicize-components/src/types/types.ts b/projects/js-packages/publicize-components/src/types/types.ts
index 078364817fa14..d69ddd79903ba 100644
--- a/projects/js-packages/publicize-components/src/types/types.ts
+++ b/projects/js-packages/publicize-components/src/types/types.ts
@@ -12,6 +12,7 @@ type JetpackSettingsSelectors = {
 
 type ConnectionDataSelectors = {
 	getConnections: () => Array< object >;
+	getServices: () => Array< object >;
 	getConnectionsAdminUrl: () => string;
 	hasConnections: () => boolean;
 };
diff --git a/projects/js-packages/publicize-components/src/utils/index.js b/projects/js-packages/publicize-components/src/utils/index.js
index 490673ea42d3d..65f2dd163c5c5 100644
--- a/projects/js-packages/publicize-components/src/utils/index.js
+++ b/projects/js-packages/publicize-components/src/utils/index.js
@@ -1,3 +1,4 @@
 export * from './get-share-message-max-length';
 export * from './get-supported-additional-connections';
+export * from './request-external-access';
 export * from './types';
diff --git a/projects/js-packages/publicize-components/src/utils/request-external-access.js b/projects/js-packages/publicize-components/src/utils/request-external-access.js
new file mode 100644
index 0000000000000..e1ed72812d21c
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/utils/request-external-access.js
@@ -0,0 +1,34 @@
+import PopupMonitor from '@automattic/popup-monitor';
+
+/**
+ * The callback function of the requestExternalAccess utility.
+ * @callback requestCallback
+ * @param {object} result - Received authentication data.
+ * @param {number} result.keyring_id
+ * @param {string} result.id_token
+ * @param {object} result.user
+ */
+
+/**
+ * Utility for requesting authorization of sharing services.
+ * @param {string} url - The URL to be loaded in the newly opened window.
+ * @param {requestCallback} cb - The callback that handles the response.
+ */
+export const requestExternalAccess = ( url, cb ) => {
+	const popupMonitor = new PopupMonitor();
+	let lastMessage;
+
+	popupMonitor.open(
+		url,
+		null,
+		'toolbar=0,location=0,status=0,menubar=0,' + popupMonitor.getScreenCenterSpecs( 780, 700 )
+	);
+
+	popupMonitor.once( 'close', () => {
+		cb( lastMessage?.ID ? lastMessage : {} );
+	} );
+
+	popupMonitor.on( 'message', message => {
+		lastMessage = message?.data;
+	} );
+};
diff --git a/projects/packages/publicize/changelog/add-social-connect-button b/projects/packages/publicize/changelog/add-social-connect-button
new file mode 100644
index 0000000000000..766e0ff8c9e9d
--- /dev/null
+++ b/projects/packages/publicize/changelog/add-social-connect-button
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add connect form/button for connection management
diff --git a/projects/packages/publicize/src/class-publicize.php b/projects/packages/publicize/src/class-publicize.php
index a7d0666dea6ac..e33d29a3f648c 100644
--- a/projects/packages/publicize/src/class-publicize.php
+++ b/projects/packages/publicize/src/class-publicize.php
@@ -241,7 +241,7 @@ public function get_connections( $service_name, $_blog_id = false, $_user_id = f
 	/**
 	 * Get all connections for a specific user.
 	 *
-	 * @return array|false
+	 * @return array
 	 */
 	public function get_all_connections_for_user() {
 		$connections = $this->get_all_connections();
@@ -269,11 +269,8 @@ public function get_all_connections_for_user() {
 					}
 				}
 			}
-
-			return $connections_to_return;
 		}
-
-		return false;
+		return $connections_to_return;
 	}
 
 	/**
diff --git a/projects/packages/publicize/src/jetpack-social-settings/class-settings.php b/projects/packages/publicize/src/jetpack-social-settings/class-settings.php
index 08f952c94a172..fb7ee8588e4fe 100644
--- a/projects/packages/publicize/src/jetpack-social-settings/class-settings.php
+++ b/projects/packages/publicize/src/jetpack-social-settings/class-settings.php
@@ -7,6 +7,7 @@
 
 namespace Automattic\Jetpack\Publicize\Jetpack_Social_Settings;
 
+use Automattic\Jetpack\Connection\Client;
 use Automattic\Jetpack\Connection\Manager;
 use Automattic\Jetpack\Modules;
 use Automattic\Jetpack\Publicize\Publicize;
@@ -192,6 +193,7 @@ public function get_initial_state() {
 			$settings['connectionData'] = array(
 				'connections' => $publicize->get_all_connections_for_user(),
 				'adminUrl'    => esc_url_raw( $publicize->publicize_connections_url( 'jetpack-social-connections-admin-page' ) ),
+				'services'    => $this->get_services(),
 			);
 
 			$settings['is_publicize_enabled'] = true;
@@ -206,6 +208,35 @@ public function get_initial_state() {
 		return $settings;
 	}
 
+	/**
+	 * Get the list of supported Publicize services.
+	 *
+	 * @return array List of external services and their settings.
+	 */
+	public function get_services() {
+		$site_id = Manager::get_site_id();
+		if ( is_wp_error( $site_id ) ) {
+			return array();
+		}
+		$path     = sprintf( '/sites/%d/external-services', $site_id );
+		$response = Client::wpcom_json_api_request_as_user( $path );
+		if ( is_wp_error( $response ) ) {
+			return array();
+		}
+		$body = json_decode( wp_remote_retrieve_body( $response ) );
+
+		$services = $body->services ?? array();
+
+		return array_values(
+			array_filter(
+				(array) $services,
+				function ( $service ) {
+					return isset( $service->type ) && 'publicize' === $service->type;
+				}
+			)
+		);
+	}
+
 	/**
 	 * Update the settings.
 	 *
diff --git a/projects/plugins/social/changelog/add-social-connect-button b/projects/plugins/social/changelog/add-social-connect-button
new file mode 100644
index 0000000000000..766e0ff8c9e9d
--- /dev/null
+++ b/projects/plugins/social/changelog/add-social-connect-button
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add connect form/button for connection management
diff --git a/projects/plugins/social/src/class-jetpack-social.php b/projects/plugins/social/src/class-jetpack-social.php
index 21bd2579696db..5017ac2d3c2af 100644
--- a/projects/plugins/social/src/class-jetpack-social.php
+++ b/projects/plugins/social/src/class-jetpack-social.php
@@ -253,10 +253,6 @@ public function initial_state() {
 						'social_notes_enabled'           => $note->enabled(),
 						'social_notes_config'            => $note->get_config(),
 					),
-					'connectionData'  => array(
-						'connections' => $publicize->get_all_connections_for_user(), // TODO: Sanitize the array
-						'adminUrl'    => esc_url_raw( $publicize->publicize_connections_url( 'jetpack-social-connections-admin-page' ) ),
-					),
 					'sharesData'      => $publicize->get_publicize_shares_info( Jetpack_Options::get_option( 'id' ) ),
 				),
 				$initial_state