diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts
index be73b4b7c2..c98d38b9dd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts
@@ -1,4 +1,4 @@
 import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
-import { manifests as workspaceManifests } from './workspace/views/manifests.js';
+import { manifests as workspaceManifests } from './workspace/manifests.js';
 
 export const manifests = [...workspaceManifests, ...propertyEditorManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
index 867060ca32..94be84645b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
@@ -1,4 +1,5 @@
 import type { UmbBlockTypeBase, UmbInputBlockTypeElement } from '../../../block-type/index.js';
+import '../../../block-type/components/input-block-type/index.js';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/manifests.ts
new file mode 100644
index 0000000000..7293e3d26e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/manifests.ts
@@ -0,0 +1,18 @@
+import { manifests as workspaceViewManifests } from './views/manifests.js';
+import { UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS } from './index.js';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestTypes> = [
+	...workspaceViewManifests,
+	{
+		type: 'workspace',
+		name: 'Block Grid Type Workspace',
+		alias: UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS,
+		element: () => import('../../block-type/workspace/block-type-workspace.element.js'),
+		api: () => import('../../block-type/workspace/block-type-workspace.context.js'),
+		weight: 900,
+		meta: {
+			entityType: 'block-grid-type',
+		},
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
new file mode 100644
index 0000000000..b33b0934c6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
@@ -0,0 +1,109 @@
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
+
+@customElement('umb-block-grid-type-workspace-view-advanced')
+export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement implements UmbWorkspaceViewElement {
+	render() {
+		return html`
+			<h5>GRID BLOCK ADVANCED View</h5>
+			<uui-box headline="Editor Appearance">
+				<umb-property
+					label="Label"
+					alias="label"
+					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+				<umb-property
+					label="Custom view"
+					alias="view"
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+				<umb-property
+					label="Custom stylesheet"
+					alias="stylesheet"
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+				<umb-property
+					label="Overlay size"
+					alias="editorSize"
+					property-editor-ui-alias="Umb.PropertyEditorUi.OverlaySize"></umb-property>
+			</uui-box>
+			<uui-box headline="Data models">
+				<!-- TODO: implement readonly mode for umb-property -->
+				<umb-property
+					label="Content Model"
+					alias="contentElementTypeKey"
+					property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
+					readonly
+					.config=${[
+						{
+							alias: 'validationLimit',
+							value: { min: 0, max: 1 },
+						},
+						{
+							alias: 'onlyPickElementTypes',
+							value: true,
+						},
+					]}></umb-property>
+				<umb-property
+					label="Settings Model"
+					alias="settingsElementTypeKey"
+					property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
+					.config=${[
+						{
+							alias: 'validationLimit',
+							value: { min: 0, max: 1 },
+						},
+						{
+							alias: 'onlyPickElementTypes',
+							value: true,
+						},
+					]}></umb-property>
+			</uui-box>
+			<uui-box headline="Catalogue appearance">
+				<umb-property
+					label="Background color"
+					alias="backgroundColor"
+					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+				<umb-property
+					label="Icon color"
+					alias="iconColor"
+					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+				<umb-property
+					label="Custom stylesheet"
+					alias="stylesheet"
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+			</uui-box>
+		`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
+			}
+			uui-box {
+				margin-top: var(--uui-size-layout-1);
+			}
+
+			uui-label,
+			umb-property-editor-ui-number {
+				display: block;
+			}
+
+			// TODO: is this necessary?
+			uui-toggle {
+				display: flex;
+			}
+		`,
+	];
+}
+
+export default UmbBlockTypeGridWorkspaceViewAdvancedElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-block-grid-type-workspace-view-advanced': UmbBlockTypeGridWorkspaceViewAdvancedElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts
new file mode 100644
index 0000000000..a3d522f937
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts
@@ -0,0 +1,109 @@
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
+
+@customElement('umb-block-grid-type-workspace-view-areas')
+export class UmbBlockTypeGridWorkspaceViewAreasElement extends UmbLitElement implements UmbWorkspaceViewElement {
+	render() {
+		return html`
+			<h5>GRID BLOCK AREAS View</h5>
+			<uui-box headline="Editor Appearance">
+				<umb-property
+					label="Label"
+					alias="label"
+					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+				<umb-property
+					label="Custom view"
+					alias="view"
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+				<umb-property
+					label="Custom stylesheet"
+					alias="stylesheet"
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+				<umb-property
+					label="Overlay size"
+					alias="editorSize"
+					property-editor-ui-alias="Umb.PropertyEditorUi.OverlaySize"></umb-property>
+			</uui-box>
+			<uui-box headline="Data models">
+				<!-- TODO: implement readonly mode for umb-property -->
+				<umb-property
+					label="Content Model"
+					alias="contentElementTypeKey"
+					property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
+					readonly
+					.config=${[
+						{
+							alias: 'validationLimit',
+							value: { min: 0, max: 1 },
+						},
+						{
+							alias: 'onlyPickElementTypes',
+							value: true,
+						},
+					]}></umb-property>
+				<umb-property
+					label="Settings Model"
+					alias="settingsElementTypeKey"
+					property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
+					.config=${[
+						{
+							alias: 'validationLimit',
+							value: { min: 0, max: 1 },
+						},
+						{
+							alias: 'onlyPickElementTypes',
+							value: true,
+						},
+					]}></umb-property>
+			</uui-box>
+			<uui-box headline="Catalogue appearance">
+				<umb-property
+					label="Background color"
+					alias="backgroundColor"
+					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+				<umb-property
+					label="Icon color"
+					alias="iconColor"
+					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+				<umb-property
+					label="Custom stylesheet"
+					alias="stylesheet"
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+			</uui-box>
+		`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
+			}
+			uui-box {
+				margin-top: var(--uui-size-layout-1);
+			}
+
+			uui-label,
+			umb-property-editor-ui-number {
+				display: block;
+			}
+
+			// TODO: is this necessary?
+			uui-toggle {
+				display: flex;
+			}
+		`,
+	];
+}
+
+export default UmbBlockTypeGridWorkspaceViewAreasElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-block-grid-type-workspace-view-areas': UmbBlockTypeGridWorkspaceViewAreasElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
similarity index 90%
rename from src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
index c27973ff5c..b8c116b232 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
@@ -3,10 +3,11 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
 
-@customElement('umb-block-grid-type-workspace-view-settings')
-export class UmbBlockTypeListWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
+@customElement('umb-block-grid-type-workspace-view')
+export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
 	render() {
 		return html`
+			<h5>GRID BLOCK SETTINGS View</h5>
 			<uui-box headline="Editor Appearance">
 				<umb-property
 					label="Label"
@@ -99,10 +100,10 @@ export class UmbBlockTypeListWorkspaceViewSettingsElement extends UmbLitElement
 	];
 }
 
-export default UmbBlockTypeListWorkspaceViewSettingsElement;
+export default UmbBlockTypeGridWorkspaceViewSettingsElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-block-grid-type-workspace-view-settings': UmbBlockTypeListWorkspaceViewSettingsElement;
+		'umb-block-grid-type-workspace-view-settings': UmbBlockTypeGridWorkspaceViewSettingsElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/manifests.ts
index 2d723e2866..57f890ed14 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/manifests.ts
@@ -6,7 +6,7 @@ export const workspaceViews: Array<ManifestWorkspaceView> = [
 		type: 'workspaceView',
 		alias: 'Umb.WorkspaceView.BlockType.Grid.Settings',
 		name: 'Block Grid Type Workspace Settings View',
-		js: () => import('./block-grid-type-workspace-view.element.js'),
+		js: () => import('./block-grid-type-workspace-view-settings.element.js'),
 		weight: 1000,
 		meta: {
 			label: 'Settings',
@@ -20,6 +20,42 @@ export const workspaceViews: Array<ManifestWorkspaceView> = [
 			},
 		],
 	},
+	{
+		type: 'workspaceView',
+		alias: 'Umb.WorkspaceView.BlockType.Grid.Areas',
+		name: 'Block Grid Type Workspace Areas View',
+		js: () => import('./block-grid-type-workspace-view-areas.element.js'),
+		weight: 1000,
+		meta: {
+			label: 'Areas',
+			pathname: 'areas',
+			icon: 'icon-grid',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				match: UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS,
+			},
+		],
+	},
+	{
+		type: 'workspaceView',
+		alias: 'Umb.WorkspaceView.BlockType.Grid.Advance',
+		name: 'Block Grid Type Workspace Advance View',
+		js: () => import('./block-grid-type-workspace-view-advanced.element.js'),
+		weight: 1000,
+		meta: {
+			label: 'Advanced',
+			pathname: 'advanced',
+			icon: 'icon-wrench',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				match: UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS,
+			},
+		],
+	},
 ];
 
 export const manifests = [...workspaceViews];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/manifests.ts
index be73b4b7c2..c98d38b9dd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/manifests.ts
@@ -1,4 +1,4 @@
 import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
-import { manifests as workspaceManifests } from './workspace/views/manifests.js';
+import { manifests as workspaceManifests } from './workspace/manifests.js';
 
 export const manifests = [...workspaceManifests, ...propertyEditorManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/manifests.ts
index 469fe908c7..18e532ebf8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/manifests.ts
@@ -1,3 +1,3 @@
-import { manifests as workspaceManifests } from './workspace/views/manifests.js';
+import { manifests as workspaceManifests } from './workspace/manifests.js';
 
 export const manifests = [...workspaceManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts
index 3a00b683d1..fcdafe77a5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts
@@ -1 +1,2 @@
 export * from './input-block-type/index.js';
+export * from './block-type-card/index.js';