diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/media/editor-media.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/media/editor-media.stories.ts
index 62fb15dbf3..03f1fa99a1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/media/editor-media.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/media/editor-media.stories.ts
@@ -16,5 +16,5 @@ export default {
 const mediaNodes = data.filter((node) => node.type === 'media');
 
 export const AAAOverview: Story<UmbEditorMediaElement> = () =>
-	html` <umb-editor-media id="${mediaNodes[0].id}"></umb-editor-media>`;
+	html` <umb-editor-media id="${mediaNodes[0].key}"></umb-editor-media>`;
 AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/editor-node.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/editor-node.stories.ts
index 28ad9cfc76..1a41bc301a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/editor-node.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/editor-node.stories.ts
@@ -14,5 +14,5 @@ export default {
 } as Meta;
 
 export const AAAOverview: Story<UmbEditorNodeElement> = () =>
-	html` <umb-editor-node id="${data[0].id}"></umb-editor-node>`;
+	html` <umb-editor-node id="${data[0].key}"></umb-editor-node>`;
 AAAOverview.storyName = 'Overview';