diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts
index 24fc5641cf..e332fc9186 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dictionary/dashboard-localization-dictionary.element.ts
@@ -4,13 +4,6 @@ import { css, html, customElement, state, when } from '@umbraco-cms/backoffice/e
 import { UmbTableConfig, UmbTableColumn, UmbTableItem } from '@umbraco-cms/backoffice/components';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { DictionaryOverviewResponseModel, LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import {
-	UmbModalManagerContext,
-	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
-	UMB_CREATE_DICTIONARY_MODAL,
-	UmbModalRouteRegistrationController,
-} from '@umbraco-cms/backoffice/modal';
-import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 
 @customElement('umb-dashboard-translation-dictionary')
 export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
@@ -26,8 +19,6 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
 
 	#repo!: UmbDictionaryRepository;
 
-	#modalContext!: UmbModalManagerContext;
-
 	#tableItems: Array<UmbTableItem> = [];
 
 	#tableColumns: Array<UmbTableColumn> = [];
@@ -39,10 +30,6 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
 
 	constructor() {
 		super();
-
-		new UmbContextConsumerController(this, UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
-			this.#modalContext = instance;
-		});
 	}
 
 	async connectedCallback() {
@@ -132,29 +119,15 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
 			: this.#tableItems;
 	}
 
-	async #create() {
-		// TODO: what to do if modal service is not available?
-		if (!this.#modalContext) return;
-		if (!this.#repo) return;
-
-		const modalContext = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL, { parentId: null });
-
-		const { name, parentId } = await modalContext.onSubmit();
-
-		if (!name || parentId === undefined) return;
-
-		const { data } = await this.#repo.createScaffold(null, { name });
-		const { error } = await this.#repo.create(data);
-
-		if (error) return;
-		history.pushState({}, '', `/section/dictionary/workspace/dictionary-item/edit/${data.id}`);
-	}
-
 	render() {
 		return html`
 			<umb-body-layout header-transparent>
 				<div id="header" slot="header">
-					<uui-button type="button" look="outline" label="Create dictionary item" @click=${this.#create}>
+					<uui-button
+						type="button"
+						look="outline"
+						label="Create dictionary item"
+						href="/section/dictionary/workspace/dictionary-item/create/null">
 						Create dictionary item
 					</uui-button>
 					<uui-input
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/dictionary-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/dictionary-workspace-editor.element.ts
index 59eeb34c70..37b7180bd0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/dictionary-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/dictionary-workspace-editor.element.ts
@@ -1,6 +1,6 @@
 import { UMB_DICTIONARY_WORKSPACE_CONTEXT } from './dictionary-workspace.context.js';
 import { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, customElement, state, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 @customElement('umb-dictionary-workspace-editor')
 export class UmbDictionaryWorkspaceEditorElement extends UmbLitElement {
@@ -41,7 +41,7 @@ export class UmbDictionaryWorkspaceEditorElement extends UmbLitElement {
 					<uui-button href="/section/dictionary/dashboard" label="Back to list" compact>
 						<uui-icon name="umb:arrow-left"></uui-icon>
 					</uui-button>
-					<uui-input .value=${this._name} @input="${this.#handleInput}" label="Dictionary name"></uui-input>
+					<uui-input .value=${this._name ?? ''} @input="${this.#handleInput}" label="Dictionary name"></uui-input>
 				</div>
 			</umb-workspace-editor>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/dictionary-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/dictionary-workspace.element.ts
index 0e5a4b77a2..99b9099679 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/dictionary-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/dictionary-workspace.element.ts
@@ -20,6 +20,14 @@ export class UmbWorkspaceDictionaryElement extends UmbLitElement {
 				this.#workspaceContext.load(id);
 			},
 		},
+		{
+			path: 'create/:parentId',
+			component: () => this.#element,
+			setup: (_component, info) => {
+				const parentId = info.match.params.parentId === 'null' ? null : info.match.params.parentId;
+				this.#workspaceContext.create(parentId);
+			},
+		},
 	];
 
 	render() {