diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js
index 2df0d61be3..77bdc611b5 100644
--- a/src/Umbraco.Web.UI.Client/.storybook/preview.js
+++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js
@@ -17,7 +17,7 @@ import { UmbDocumentTypeStore } from '../src/packages/documents/document-types/r
 import { umbExtensionsRegistry } from '../src/packages/core/extension-registry';
 import { UmbIconRegistry } from '../src/shared/icon-registry/icon.registry';
 import { UmbLitElement } from '../src/shared/lit-element';
-import { UmbLocalizationContext, UMB_LOCALIZATION_CONTEXT } from '../src/libs/localization-api';
+import { UmbTranslationRegistry } from '../src/libs/localization-api';
 import customElementManifests from '../dist-cms/custom-elements.json';
 
 import '../src/libs/context-api/provide/context-provider.element';
@@ -40,9 +40,7 @@ class UmbStoryBookElement extends UmbLitElement {
 		this.provideContext(UMB_MODAL_CONTEXT_TOKEN, new UmbModalManagerContext(this));
 
 		this._registerExtensions(translationManifests);
-		const localizationContext = new UmbLocalizationContext(umbExtensionsRegistry);
-		localizationContext.setLanguage('en-US');
-		this.provideContext(UMB_LOCALIZATION_CONTEXT, localizationContext);
+		new UmbTranslationRegistry(umbExtensionsRegistry).loadLanguage('en-us'); // register default language
 	}
 
 	_registerExtensions(manifests) {
diff --git a/src/Umbraco.Web.UI.Client/storybook/stories/extending/localization.mdx b/src/Umbraco.Web.UI.Client/storybook/stories/extending/localization.mdx
index 0b4654b9dd..1fef40fad8 100644
--- a/src/Umbraco.Web.UI.Client/storybook/stories/extending/localization.mdx
+++ b/src/Umbraco.Web.UI.Client/storybook/stories/extending/localization.mdx
@@ -73,25 +73,38 @@ The `umb-localize` component is used to translate text in the UI. It is used lik
 
 Experiment with the component here: [Localize](/story/localization-localize--overview)
 
-### UmbLocalizationContext
+### UmbLocalizeController
 
-The `UmbLocalizationContext` is used to translate text in the UI. It is used like this:
+The `UmbLocalizeController` is used to translate text in the UI. It is used like this:
+
+**UmbElementMixin**
+
+The controller is already initialised if you use the `UmbElementMixin` in your element:
 
 ```ts
-this.consumeContext(UMB_LOCALIZATION_CONTEXT, (instance) => {
-	// Localize one key
-	instance.localize('general_close').subscribe((value) => {
-		console.log(value); // should display "Close" in the console
-	});
-
-	// Localize many keys
-	instance.localizeMany(['general_close', 'general_cancel']).subscribe((values) => {
-		console.log(values); // should display ["Close", "Cancel"] in the console
-	});
-});
+export class MyElement extends UmbElementMixin(LitElement) {
+	render() {
+		return html` <uui-button .label=${this.localize.term('general_close')}></uui-button> `;
+	}
+}
 ```
 
-The values can then be assigned to a stateful property in the component and rendered to the user.
+**Reactive controller**
+
+If you do not use the `UmbElementMixin` in your element, you can use the reactive controller like this:
+
+```ts
+import { UmbLocalizeController } from '@umbraco-cms/backoffice/localization-api';
+
+export class MyElement extends LitElement {
+	// Create a new instance of the controller and attach it to the element
+	private localize = new UmbLocalizeController(this);
+
+	render() {
+		return html` <uui-button .label=${this.localize.localize('general_close')}></uui-button> `;
+	}
+}
+```
 
 ### Fallback