diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
index 3beef739f7808..2757ce5a620c5 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
@@ -18,6 +18,7 @@
 .edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
 	color: $gray-600;
 	width: 100px;
+	flex-shrink: 0;
 }
 
 .edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
index 93d249355abe7..5aed89955ba4f 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
@@ -1,10 +1,15 @@
+/**
+ * External dependencies
+ */
+import { sentenceCase } from 'change-case';
+
 /**
  * WordPress dependencies
  */
-import { __, sprintf, _x } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
-import { Icon } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -28,6 +33,11 @@ export default function usePatternDetails( postType, postId ) {
 		postType,
 		postId
 	);
+	const templatePartAreas = useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		[]
+	);
 	const currentTheme = useSelect(
 		( select ) => select( coreStore ).getCurrentTheme(),
 		[]
@@ -36,56 +46,24 @@ export default function usePatternDetails( postType, postId ) {
 	const isAddedByActiveTheme =
 		addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
 	const title = getTitle();
-	let descriptionText = getDescription();
+	let description = getDescription();
 
-	if ( ! descriptionText && addedBy.text ) {
-		descriptionText = sprintf(
+	if ( ! description && addedBy.text ) {
+		description = sprintf(
 			// translators: %s: pattern title e.g: "Header".
 			__( 'This is the %s pattern.' ),
 			getTitle()
 		);
 	}
 
-	if ( ! descriptionText && postType === 'wp_block' && record?.title ) {
-		descriptionText = sprintf(
+	if ( ! description && postType === 'wp_block' && record?.title ) {
+		description = sprintf(
 			// translators: %s: user created pattern title e.g. "Footer".
 			__( 'This is the %s pattern.' ),
 			record.title
 		);
 	}
 
-	const description = (
-		<>
-			{ descriptionText }
-
-			{ addedBy.text && ! isAddedByActiveTheme && (
-				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description">
-					<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author">
-						<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon">
-							{ addedBy.imageUrl ? (
-								<img
-									src={ addedBy.imageUrl }
-									alt=""
-									width="24"
-									height="24"
-								/>
-							) : (
-								<Icon icon={ addedBy.icon } />
-							) }
-						</span>
-						{ addedBy.text }
-					</span>
-
-					{ addedBy.isCustomized && (
-						<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized">
-							{ _x( '(Customized)', 'pattern' ) }
-						</span>
-					) }
-				</span>
-			) }
-		</>
-	);
-
 	const footer = !! record?.modified ? (
 		<SidebarNavigationScreenDetailsFooter
 			lastModifiedDateTime={ record.modified }
@@ -94,7 +72,7 @@ export default function usePatternDetails( postType, postId ) {
 
 	const details = [];
 
-	if ( postType === 'wp_block' ) {
+	if ( postType === 'wp_block' || 'wp_template_part' ) {
 		details.push( {
 			label: __( 'Syncing' ),
 			value:
@@ -104,8 +82,59 @@ export default function usePatternDetails( postType, postId ) {
 		} );
 	}
 
+	if ( postType === 'wp_template_part' ) {
+		const templatePartArea = templatePartAreas.find(
+			( area ) => area.area === record.area
+		);
+
+		let areaDetailValue = templatePartArea?.label;
+
+		if ( ! areaDetailValue ) {
+			areaDetailValue = record.area
+				? sprintf(
+						// translators: %s: Sentenced cased template part area e.g: "My custom area".
+						__( '%s (removed)' ),
+						sentenceCase( record.area )
+				  )
+				: __( 'None' );
+		}
+
+		details.push( { label: __( 'Area' ), value: areaDetailValue } );
+	}
+
+	if (
+		postType === 'wp_template_part' &&
+		addedBy.text &&
+		! isAddedByActiveTheme
+	) {
+		details.push( {
+			label: __( 'Added by' ),
+			value: (
+				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author">
+					{ addedBy.text }
+				</span>
+			),
+		} );
+	}
+
+	if (
+		postType === 'wp_template_part' &&
+		addedBy.text &&
+		( record.origin === 'plugin' || record.has_theme_file === true )
+	) {
+		details.push( {
+			label: __( 'Customized' ),
+			value: (
+				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized">
+					{ addedBy.isCustomized ? __( 'Yes' ) : __( 'No' ) }
+				</span>
+			),
+		} );
+	}
+
 	const content = (
 		<>
+			{ useNavigationMenuContent( postType, postId ) }
 			{ !! details.length && (
 				<SidebarNavigationScreenDetailsPanel
 					spacing={ 5 }
@@ -123,7 +152,6 @@ export default function usePatternDetails( postType, postId ) {
 					) ) }
 				</SidebarNavigationScreenDetailsPanel>
 			) }
-			{ useNavigationMenuContent( postType, postId ) }
 		</>
 	);