diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts
index 4db70b0ef44f..c829c227214a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts
@@ -29,7 +29,8 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 	@state()
 	private _value: Array<UmbBlockGridTypeAreaTypePermission> = [];
 
-	_blockTypes: Array<UmbBlockTypeWithGroupKey> = [];
+	@state()
+	private _blockTypes?: Array<UmbBlockTypeWithGroupKey>;
 
 	@state()
 	private _blockTypesWithElementName: Array<{ type: UmbBlockTypeWithGroupKey; name: string }> = [];
@@ -48,7 +49,7 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 		this.observe(this.#itemsManager.items, (items) => {
 			this._blockTypesWithElementName = items
 				.map((item) => {
-					const blockType = this._blockTypes.find((block) => block.contentElementTypeKey === item.unique);
+					const blockType = this._blockTypes?.find((block) => block.contentElementTypeKey === item.unique);
 					if (blockType) {
 						return { type: blockType, name: item.name };
 					}
@@ -123,9 +124,12 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 	}
 
 	override render() {
-		if (this._blockTypesWithElementName.length === 0) {
+		if (this._blockTypes === undefined) {
 			return nothing;
 		}
+		if (this._blockTypesWithElementName.length === 0) {
+			return 'There must be one Block Type created before permissions can be configured.';
+		}
 		return html`<div id="permissions">
 				${repeat(
 					this._value,