diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.service.ts b/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.service.ts
index 851fe1ee6d..d56b4d57a7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.service.ts
@@ -1,6 +1,6 @@
-import { BehaviorSubject } from 'rxjs';
 import { dark, highContrast } from './themes';
 import { UmbContextToken } from '@umbraco-cms/context-api';
+import { ArrayState, StringState } from '@umbraco-cms/observable-api';
 
 export interface UmbTheme {
 	name: string;
@@ -8,7 +8,9 @@ export interface UmbTheme {
 }
 
 export class UmbThemeService {
-	#themes = new BehaviorSubject(<Array<UmbTheme>>[
+
+	// TODO: Turn this into a extension type, get rid of the #themes subject and #themes observable
+	#themes = new ArrayState(<Array<UmbTheme>>[
 		{
 			name: 'Light',
 			css: '',
@@ -16,7 +18,7 @@ export class UmbThemeService {
 	]);
 	public readonly themes = this.#themes.asObservable();
 
-	#theme = new BehaviorSubject('Light');
+	#theme = new StringState('Light');
 	public readonly theme = this.#theme.asObservable();
 
 	#styleElement: HTMLStyleElement;
@@ -37,6 +39,7 @@ export class UmbThemeService {
 		this.#theme.next(theme);
 		localStorage.setItem('umb-theme', theme);
 
+		// TODO: This should come from the extension API:
 		const themeCss = this.#themes.value.find((t) => t.name === theme)?.css;
 
 		if (themeCss !== undefined) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-dashboard-themes.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-dashboard-themes.element.ts
index f036ce0456..ffe608c698 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-dashboard-themes.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-dashboard-themes.element.ts
@@ -38,6 +38,7 @@ export class UmbUserDashboardTestElement extends UmbLitElement {
 			instance.theme.subscribe((theme) => {
 				this._theme = theme;
 			});
+			// TODO: We should get rid of the #themes state and instead use an extension point:
 			instance.themes.subscribe((themes) => {
 				this._themes = themes.map((t) => t.name);
 			});