diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts
index f924c9c90e..ac83466e2f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts
@@ -2,6 +2,7 @@ import { getPropertyValueByAlias } from '../index.js';
 import type { UmbCollectionColumnConfiguration } from '../../../../../core/collection/types.js';
 import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from '../../types.js';
 import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { fromCamelCase } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
@@ -137,10 +138,7 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
 					>${this.localize.term('content_notCreated')}</uui-tag
 				>`;
 			default:
-				// TODO: [LK] Check if we have a `SplitPascalCase`-esque utility function that could be used here.
-				return html`<uui-tag slot="tag" color="danger" look="secondary"
-					>${item.state.replace(/([A-Z])/g, ' $1')}</uui-tag
-				>`;
+				return html`<uui-tag slot="tag" color="danger" look="secondary">${fromCamelCase(item.state)}</uui-tag>`;
 		}
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts
index b060f53e49..1a44194e82 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts
@@ -1,5 +1,6 @@
 import type { UmbDocumentCollectionItemModel } from '../../../types.js';
 import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { fromCamelCase } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components';
 
@@ -25,8 +26,7 @@ export class UmbDocumentTableColumnStateElement extends UmbLitElement implements
 			case 'NotCreated':
 				return html`<uui-tag color="danger" look="secondary">${this.localize.term('content_notCreated')}</uui-tag>`;
 			default:
-				// TODO: [LK] Check if we have a `SplitPascalCase`-esque utility function that could be used here.
-				return html`<uui-tag color="danger" look="secondary">${this.value.state.replace(/([A-Z])/g, ' $1')}</uui-tag>`;
+				return html`<uui-tag color="danger" look="secondary">${fromCamelCase(this.value.state)}</uui-tag>`;
 		}
 	}
 }