diff --git a/packages/edit-site/src/components/template-details/edit-template-title.js b/packages/edit-site/src/components/template-details/edit-template-title.js
index d5a4b3ff192615..5d7e63c7054887 100644
--- a/packages/edit-site/src/components/template-details/edit-template-title.js
+++ b/packages/edit-site/src/components/template-details/edit-template-title.js
@@ -19,9 +19,13 @@ export default function EditTemplateTitle( { template } ) {
 		<TextControl
 			label={ __( 'Title' ) }
 			value={ forceEmpty ? '' : title }
-			help={ __(
-				'Give the template a title that indicates its purpose, e.g. "Full Width".'
-			) }
+			help={
+				template.type !== 'wp_template_part'
+					? __(
+							'Give the template a title that indicates its purpose, e.g. "Full Width".'
+					  )
+					: null
+			}
 			onChange={ ( newTitle ) => {
 				if ( ! newTitle && ! forceEmpty ) {
 					setForceEmpty( true );
diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js
index 7c7704a4580481..7b9326deaab797 100644
--- a/packages/edit-site/src/components/template-details/index.js
+++ b/packages/edit-site/src/components/template-details/index.js
@@ -6,7 +6,7 @@ import {
 	Button,
 	MenuGroup,
 	MenuItem,
-	__experimentalHeading as Heading,
+	__experimentalVStack as VStack,
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -20,6 +20,7 @@ import { store as editSiteStore } from '../../store';
 import TemplateAreas from './template-areas';
 import EditTemplateTitle from './edit-template-title';
 import { useLink } from '../routes/link';
+import TemplatePartAreaSelector from './template-part-area-selector';
 
 export default function TemplateDetails( { template, onClose } ) {
 	const { title, description } = useSelect(
@@ -35,8 +36,13 @@ export default function TemplateDetails( { template, onClose } ) {
 		postId: undefined,
 	} );
 
+	const isTemplatePart = template.type === 'wp_template_part';
+
 	// Only user-created and non-default templates can change the name.
-	const canEditTitle = template.is_custom && ! template.has_theme_file;
+	// But any user-created template part can be renamed.
+	const canEditTitle = isTemplatePart
+		? ! template.has_theme_file
+		: template.is_custom && ! template.has_theme_file;
 
 	if ( ! template ) {
 		return null;
@@ -49,17 +55,18 @@ export default function TemplateDetails( { template, onClose } ) {
 
 	return (
 		<div className="edit-site-template-details">
-			<div className="edit-site-template-details__group">
+			<VStack className="edit-site-template-details__group" spacing={ 3 }>
 				{ canEditTitle ? (
 					<EditTemplateTitle template={ template } />
 				) : (
-					<Heading
-						level={ 4 }
+					<Text
+						size={ 16 }
 						weight={ 600 }
 						className="edit-site-template-details__title"
+						as="p"
 					>
 						{ title }
-					</Heading>
+					</Text>
 				) }
 
 				{ description && (
@@ -71,7 +78,13 @@ export default function TemplateDetails( { template, onClose } ) {
 						{ description }
 					</Text>
 				) }
-			</div>
+			</VStack>
+
+			{ isTemplatePart && (
+				<div className="edit-site-template-details__group">
+					<TemplatePartAreaSelector id={ template.id } />
+				</div>
+			) }
 
 			<TemplateAreas closeTemplateDetailsDropdown={ onClose } />
 
diff --git a/packages/edit-site/src/components/template-details/style.scss b/packages/edit-site/src/components/template-details/style.scss
index 7d8a0261bc6fa5..531d4d2487d126 100644
--- a/packages/edit-site/src/components/template-details/style.scss
+++ b/packages/edit-site/src/components/template-details/style.scss
@@ -8,12 +8,7 @@
 		border-top: $border-width solid $gray-400;
 	}
 
-	.edit-site-template-details__title {
-		margin: 0;
-	}
-
 	.edit-site-template-details__description {
-		margin: $grid-unit-15 0 0;
 		color: $gray-700;
 	}
 
diff --git a/packages/edit-site/src/components/template-details/template-part-area-selector.js b/packages/edit-site/src/components/template-details/template-part-area-selector.js
new file mode 100644
index 00000000000000..1eff28d2d4c976
--- /dev/null
+++ b/packages/edit-site/src/components/template-details/template-part-area-selector.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { SelectControl } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+
+export default function TemplatePartAreaSelector( { id } ) {
+	const [ area, setArea ] = useEntityProp(
+		'postType',
+		'wp_template_part',
+		'area',
+		id
+	);
+
+	const definedAreas = useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		[]
+	);
+
+	const areaOptions = definedAreas.map( ( { label, area: _area } ) => ( {
+		label,
+		value: _area,
+	} ) );
+
+	return (
+		<SelectControl
+			label={ __( 'Area' ) }
+			labelPosition="top"
+			options={ areaOptions }
+			value={ area }
+			onChange={ setArea }
+		/>
+	);
+}