diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
index 6c58a707ca874..626e82cc5ec7a 100644
--- a/packages/editor/src/components/post-url/index.js
+++ b/packages/editor/src/components/post-url/index.js
@@ -6,122 +6,146 @@ import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
 import { useState } from '@wordpress/element';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { TextControl, ExternalLink } from '@wordpress/components';
+import {
+	ExternalLink,
+	Button,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as noticesStore } from '@wordpress/notices';
+import { copySmall } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { useCopyToClipboard } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import { usePostURLLabel } from './label';
 import { store as editorStore } from '../../store';
 
 export default function PostURL( { onClose } ) {
-	const {
-		isEditable,
-		postSlug,
-		viewPostLabel,
-		postLink,
-		permalinkPrefix,
-		permalinkSuffix,
-	} = useSelect( ( select ) => {
-		const post = select( editorStore ).getCurrentPost();
-		const postTypeSlug = select( editorStore ).getCurrentPostType();
-		const postType = select( coreStore ).getPostType( postTypeSlug );
-		const permalinkParts = select( editorStore ).getPermalinkParts();
-		const hasPublishAction = post?._links?.[ 'wp:action-publish' ] ?? false;
-
-		return {
-			isEditable:
-				select( editorStore ).isPermalinkEditable() && hasPublishAction,
-			postSlug: safeDecodeURIComponent(
-				select( editorStore ).getEditedPostSlug()
-			),
-			viewPostLabel: postType?.labels.view_item,
-			postLink: post.link,
-			permalinkPrefix: permalinkParts?.prefix,
-			permalinkSuffix: permalinkParts?.suffix,
-		};
-	}, [] );
+	const { isEditable, postSlug, postLink, permalinkPrefix, permalinkSuffix } =
+		useSelect( ( select ) => {
+			const post = select( editorStore ).getCurrentPost();
+			const postTypeSlug = select( editorStore ).getCurrentPostType();
+			const postType = select( coreStore ).getPostType( postTypeSlug );
+			const permalinkParts = select( editorStore ).getPermalinkParts();
+			const hasPublishAction =
+				post?._links?.[ 'wp:action-publish' ] ?? false;
 
+			return {
+				isEditable:
+					select( editorStore ).isPermalinkEditable() &&
+					hasPublishAction,
+				postSlug: safeDecodeURIComponent(
+					select( editorStore ).getEditedPostSlug()
+				),
+				viewPostLabel: postType?.labels.view_item,
+				postLink: post.link,
+				permalinkPrefix: permalinkParts?.prefix,
+				permalinkSuffix: permalinkParts?.suffix,
+			};
+		}, [] );
 	const { editPost } = useDispatch( editorStore );
-
+	const { createNotice } = useDispatch( noticesStore );
 	const [ forceEmptyField, setForceEmptyField ] = useState( false );
-
+	const postUrlLabel = usePostURLLabel();
+	const copyButtonRef = useCopyToClipboard( postUrlLabel, () => {
+		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	} );
 	return (
 		<div className="editor-post-url">
-			<InspectorPopoverHeader title={ __( 'URL' ) } onClose={ onClose } />
-			{ isEditable && (
-				<TextControl
-					__nextHasNoMarginBottom
-					label={ __( 'Permalink' ) }
-					value={ forceEmptyField ? '' : postSlug }
-					autoComplete="off"
-					spellCheck="false"
-					help={
-						<>
-							{ __( 'The last part of the URL.' ) }{ ' ' }
-							<ExternalLink
-								href={ __(
-									'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
-								) }
-							>
-								{ __( 'Learn more.' ) }
-							</ExternalLink>
-						</>
-					}
-					onChange={ ( newValue ) => {
-						editPost( { slug: newValue } );
-						// When we delete the field the permalink gets
-						// reverted to the original value.
-						// The forceEmptyField logic allows the user to have
-						// the field temporarily empty while typing.
-						if ( ! newValue ) {
-							if ( ! forceEmptyField ) {
-								setForceEmptyField( true );
+			<InspectorPopoverHeader
+				title={ __( 'Slug' ) }
+				onClose={ onClose }
+			/>
+			<VStack spacing={ 3 }>
+				<div>
+					{ __(
+						'The slug forms the last part of the URL for a page. '
+					) }
+					<ExternalLink
+						href={ __(
+							'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
+						) }
+					>
+						{ __( 'Learn more.' ) }
+					</ExternalLink>
+				</div>
+				<div>
+					{ isEditable && (
+						<InputControl
+							__next40pxDefaultSize
+							prefix={
+								<InputControlPrefixWrapper>
+									/
+								</InputControlPrefixWrapper>
+							}
+							suffix={
+								<Button
+									icon={ copySmall }
+									ref={ copyButtonRef }
+								/>
 							}
-							return;
-						}
-						if ( forceEmptyField ) {
-							setForceEmptyField( false );
-						}
-					} }
-					onBlur={ ( event ) => {
-						editPost( {
-							slug: cleanForSlug( event.target.value ),
-						} );
-						if ( forceEmptyField ) {
-							setForceEmptyField( false );
-						}
-					} }
-				/>
-			) }
-			{ isEditable && (
-				<h3 className="editor-post-url__link-label">
-					{ viewPostLabel ?? __( 'View post' ) }
-				</h3>
-			) }
-			<p>
-				<ExternalLink
-					className="editor-post-url__link"
-					href={ postLink }
-					target="_blank"
-				>
-					{ isEditable ? (
-						<>
-							<span className="editor-post-url__link-prefix">
-								{ permalinkPrefix }
-							</span>
-							<span className="editor-post-url__link-slug">
-								{ postSlug }
-							</span>
-							<span className="editor-post-url__link-suffix">
-								{ permalinkSuffix }
-							</span>
-						</>
-					) : (
-						postLink
+							label={ __( 'Slug' ) }
+							hideLabelFromVision
+							value={ forceEmptyField ? '' : postSlug }
+							autoComplete="off"
+							spellCheck="false"
+							type="text"
+							onChange={ ( newValue ) => {
+								editPost( { slug: newValue } );
+								// When we delete the field the permalink gets
+								// reverted to the original value.
+								// The forceEmptyField logic allows the user to have
+								// the field temporarily empty while typing.
+								if ( ! newValue ) {
+									if ( ! forceEmptyField ) {
+										setForceEmptyField( true );
+									}
+									return;
+								}
+								if ( forceEmptyField ) {
+									setForceEmptyField( false );
+								}
+							} }
+							onBlur={ ( event ) => {
+								editPost( {
+									slug: cleanForSlug( event.target.value ),
+								} );
+								if ( forceEmptyField ) {
+									setForceEmptyField( false );
+								}
+							} }
+						/>
 					) }
-				</ExternalLink>
-			</p>
+					<ExternalLink
+						className="editor-post-url__link"
+						href={ postLink }
+						target="_blank"
+					>
+						{ isEditable ? (
+							<>
+								<span className="editor-post-url__link-prefix">
+									{ permalinkPrefix }
+								</span>
+								<span className="editor-post-url__link-slug">
+									{ postSlug }
+								</span>
+								<span className="editor-post-url__link-suffix">
+									{ permalinkSuffix }
+								</span>
+							</>
+						) : (
+							postLink
+						) }
+					</ExternalLink>
+				</div>
+			</VStack>
 		</div>
 	);
 }
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index 1a64ae7096df7..540fe009ffae4 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -2,16 +2,18 @@
  * WordPress dependencies
  */
 import { useMemo, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import { safeDecodeURIComponent } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import PostURLCheck from './check';
 import PostURL from './index';
-import { usePostURLLabel } from './label';
 import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
 
 export default function PostURLPanel() {
 	// Use internal state instead of a ref to make sure that the component
@@ -25,7 +27,7 @@ export default function PostURLPanel() {
 
 	return (
 		<PostURLCheck>
-			<PostPanelRow label={ __( 'URL' ) } ref={ setPopoverAnchor }>
+			<PostPanelRow label={ __( 'Slug' ) } ref={ setPopoverAnchor }>
 				<Dropdown
 					popoverProps={ popoverProps }
 					className="editor-post-url__panel-dropdown"
@@ -44,18 +46,22 @@ export default function PostURLPanel() {
 }
 
 function PostURLToggle( { isOpen, onClick } ) {
-	const label = usePostURLLabel();
+	const slug = useSelect(
+		( select ) =>
+			safeDecodeURIComponent( select( editorStore ).getEditedPostSlug() ),
+		[]
+	);
 	return (
 		<Button
 			__next40pxDefaultSize
 			className="editor-post-url__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
-			// translators: %s: Current post URL.
-			aria-label={ sprintf( __( 'Change URL: %s' ), label ) }
+			// translators: %s: Current post slug.
+			aria-label={ sprintf( __( 'Change slug: %s' ), slug ) }
 			onClick={ onClick }
 		>
-			{ label }
+			{ slug }
 		</Button>
 	);
 }
diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index 4a3e8e1b39c9f..a4a19cfd58fb5 100644
--- a/packages/editor/src/components/post-url/style.scss
+++ b/packages/editor/src/components/post-url/style.scss
@@ -17,16 +17,11 @@
 	margin: $grid-unit-10;
 }
 
-.editor-post-url__link-label {
-	font-size: $default-font-size;
-	font-weight: 400;
-	margin: 0;
-}
-
 /* rtl:begin:ignore */
 .editor-post-url__link {
 	direction: ltr;
 	word-break: break-word;
+	margin-top: $grid-unit-05;
 }
 /* rtl:end:ignore */