diff --git a/src/packages/block/block-grid/components/block-grid-area/block-grid-area.element.ts b/src/packages/block/block-grid/components/block-grid-area/block-grid-area.element.ts
new file mode 100644
index 0000000000..a12676647e
--- /dev/null
+++ b/src/packages/block/block-grid/components/block-grid-area/block-grid-area.element.ts
@@ -0,0 +1,39 @@
+import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from '../../context/block-grid-entries.context-token.js';
+import { UmbBlockGridEntriesElement } from '../block-grid-entries/index.js';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+
+/**
+ * @description
+ * This element is used to render a single block grid area.
+ */
+@customElement('umb-block-grid-area')
+export class UmbBlockGridAreasContainerElement extends UmbBlockGridEntriesElement {
+	//
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_BLOCK_GRID_ENTRIES_CONTEXT, (context) => {
+			this.observe(
+				context.layoutColumns,
+				(layoutColumns) => {
+					this.layoutColumns = layoutColumns;
+				},
+				'observeParentEntriesLayoutColumns',
+			);
+		}).skipHost();
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		// eslint-disable-next-line wc/no-self-class
+		this.classList.add('umb-block-grid__area');
+	}
+}
+
+export default UmbBlockGridAreasContainerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-block-grid-area': UmbBlockGridAreasContainerElement;
+	}
+}
diff --git a/src/packages/block/block-grid/components/block-grid-area/index.ts b/src/packages/block/block-grid/components/block-grid-area/index.ts
new file mode 100644
index 0000000000..c81f975a43
--- /dev/null
+++ b/src/packages/block/block-grid/components/block-grid-area/index.ts
@@ -0,0 +1 @@
+export * from './block-grid-area.element.js';
diff --git a/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts b/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts
index 5c2d0fed1d..1eb1befcbf 100644
--- a/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts
+++ b/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts
@@ -6,7 +6,6 @@ import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice
 
 import '../block-grid-entries/index.js';
 /**
- * @element umb-block-grid-areas-container
  * @description
  * This element is used to render the block grid areas.
  */
diff --git a/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts b/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
index 06156a1b8f..f57aa3857f 100644
--- a/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
+++ b/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
@@ -25,9 +25,6 @@ const apiArgsCreator: UmbApiConstructorArgumentsMethodType<unknown> = (manifest:
 	return [{ manifest }];
 };
 
-/**
- * @element umb-block-grid-block-inline
- */
 @customElement('umb-block-grid-block-inline')
 export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	//
diff --git a/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts b/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
index 3cf7b091f9..94364384e3 100644
--- a/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
+++ b/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
@@ -7,9 +7,6 @@ import '@umbraco-cms/backoffice/ufm';
 import '../block-grid-areas-container/index.js';
 import '../ref-grid-block/index.js';
 
-/**
- * @element umb-block-grid-block
- */
 @customElement('umb-block-grid-block')
 export class UmbBlockGridBlockElement extends UmbLitElement {
 	//