diff --git a/src/Umbraco.Web.UI.Client/src/stories/context-api.stories.mdx b/src/Umbraco.Web.UI.Client/src/stories/context-api.mdx
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/stories/context-api.stories.mdx
rename to src/Umbraco.Web.UI.Client/src/stories/context-api.mdx
diff --git a/src/Umbraco.Web.UI.Client/src/stories/contextapi.mdx b/src/Umbraco.Web.UI.Client/src/stories/contextapi.mdx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/Umbraco.Web.UI.Client/src/stories/getting-started.mdx b/src/Umbraco.Web.UI.Client/src/stories/getting-started.mdx
new file mode 100644
index 0000000000..b8b3e78376
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/stories/getting-started.mdx
@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Guides/Getting Started" />
+
+# Getting started
+This section contains a set of guide which will ease the learning of the Umbraco CMS (Backoffice).
+In this document you will get a overview of the articles — Enabling you to get started with the parts that makes sense for you.
+
+# Terminology
+There is a few words that covers certain concepts, which is good to learn to easilier decode the purpose of code.
+
+
+[Go to Resource Guide](/?path=/story/guides-resource--page)
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/stories/gettingstarted.mdx b/src/Umbraco.Web.UI.Client/src/stories/gettingstarted.mdx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/Umbraco.Web.UI.Client/src/stories/umb-element.mdx b/src/Umbraco.Web.UI.Client/src/stories/umb-element.mdx
new file mode 100644
index 0000000000..be0ac5d44e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/stories/umb-element.mdx
@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Guides/Umbraco Element" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
+
+# Umbraco Element
+
+This element can be used as the base of any Element.
+Do this if you need to Observe Data, Consume or Provide a Context API or use a Resource.
+The Element implements the Controller Host and provides a few shortcut methods for initializing some Controllers.
+
+The methods are (_note this can be out of date, we need to look into how we can ensure this Doc originates from code._)
+
+```
+observe<T>(source: Observable<T>, callback: (_value: T) => void, unique?: string): UmbObserverController<T>
+
+provideContext<R = unknown>(alias: string | UmbContextToken<R>, instance: R): UmbContextProviderController<R>
+
+consumeContext<R = unknown>(alias: string | UmbContextToken<R>, callback: UmbContextCallback<R>): UmbContextConsumerController<R>
+```
+
+Use these for an smooth consumption, like this request for a Context API using a simple string context, where the callback value is unknown
+
+```
+this.consumeContext('requestThisContextAlias', (context) => {
+	// Notice this is a subscription, as context might change or a new one appears.
+	console.log("I've got the context", context);
+});
+```
+
+Or use the UmbContextToken type to define the type of the context, like this
+
+```
+const contextAlias = new UmbContextToken<SomeType>('description of context for debugging purposes');
+
+this.consumeContext(contextAlias, (context) => {
+	// Notice this is a subscription, as context might change or a new one appears, but the value is strongly typed
+	console.log("I've got the context", context);
+});
+```
diff --git a/src/Umbraco.Web.UI.Client/src/stories/umbelement.mdx b/src/Umbraco.Web.UI.Client/src/stories/umbelement.mdx
deleted file mode 100644
index e69de29bb2..0000000000