diff --git a/extension/extend-admin-console-spi/README.md b/extension/extend-admin-console-spi/README.md
new file mode 100644
index 000000000..18ad7304f
--- /dev/null
+++ b/extension/extend-admin-console-spi/README.md
@@ -0,0 +1,32 @@
+## Extending the admin ui with SPI
+
+This example shows how you can extend the admin ui by implementing the SPI.
+You can either add a tab to an existing page or have a complete section in the menu.
+By implementing either:
+
+  * `org.keycloak.services.ui.extend.UiPageProvider` for a complete section
+  * `org.keycloak.services.ui.extend.UiTabProvider` for a tab
+
+For both options you need to describe the fields you want on the page by using the `org.keycloak.provider.ProviderConfigProperty`
+To specify where the tab will appear in the ui, you can add a path valid paths can be found in the `routes.ts` files.
+
+### Running
+
+Run this example by compiling with maven:
+
+```bash
+$ mvn install
+```
+
+Then copy the generated `extend-admin-ui-1.0-SNAPSHOT.jar` into your <keycloak-server>/provider folder
+### Screenshots
+
+Attribute realm tab:
+![attribute ream tab](images/img.png)
+
+Todo section
+![todo section](images/img_1.png)
+
+Todo detail screen
+![todo detail screen](images/img_2.png)
+
diff --git a/extension/extend-admin-console-spi/images/img.png b/extension/extend-admin-console-spi/images/img.png
new file mode 100644
index 000000000..c31ad1dea
Binary files /dev/null and b/extension/extend-admin-console-spi/images/img.png differ
diff --git a/extension/extend-admin-console-spi/images/img_1.png b/extension/extend-admin-console-spi/images/img_1.png
new file mode 100644
index 000000000..034d45c5e
Binary files /dev/null and b/extension/extend-admin-console-spi/images/img_1.png differ
diff --git a/extension/extend-admin-console-spi/images/img_2.png b/extension/extend-admin-console-spi/images/img_2.png
new file mode 100644
index 000000000..de9c8774b
Binary files /dev/null and b/extension/extend-admin-console-spi/images/img_2.png differ
diff --git a/extension/extend-admin-console-spi/pom.xml b/extension/extend-admin-console-spi/pom.xml
new file mode 100644
index 000000000..4aa1e81a7
--- /dev/null
+++ b/extension/extend-admin-console-spi/pom.xml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+  <modelVersion>4.0.0</modelVersion>
+
+  <groupId>org.keycloak.admin.ui</groupId>
+  <artifactId>extend-admin-ui</artifactId>
+  <version>1.0-SNAPSHOT</version>
+
+  <properties>
+    <maven.compiler.source>11</maven.compiler.source>
+    <maven.compiler.target>11</maven.compiler.target>
+    <keycloak.version>999.0.0-SNAPSHOT</keycloak.version>
+  </properties>
+
+  <dependencies>
+    <dependency>
+      <groupId>org.keycloak</groupId>
+      <artifactId>keycloak-server-spi-private</artifactId>
+      <version>${keycloak.version}</version>
+    </dependency>
+    <dependency>
+      <groupId>org.keycloak</groupId>
+      <artifactId>keycloak-model-legacy</artifactId>
+      <version>${keycloak.version}</version>
+    </dependency>
+  </dependencies>
+
+  <build>
+    <plugins>
+      <plugin>
+        <groupId>org.apache.maven.plugins</groupId>
+        <artifactId>maven-compiler-plugin</artifactId>
+        <executions>
+          <execution>
+            <id>compile</id>
+            <phase>compile</phase>
+            <goals>
+              <goal>compile</goal>
+            </goals>
+          </execution>
+          <execution>
+            <id>testCompile</id>
+            <phase>test-compile</phase>
+            <goals>
+              <goal>testCompile</goal>
+            </goals>
+          </execution>
+        </executions>
+      </plugin>
+    </plugins>
+  </build>
+
+</project>
\ No newline at end of file
diff --git a/extension/extend-admin-console-spi/src/main/java/org/keycloak/admin/ui/AdminUiPage.java b/extension/extend-admin-console-spi/src/main/java/org/keycloak/admin/ui/AdminUiPage.java
new file mode 100644
index 000000000..caabfe5e8
--- /dev/null
+++ b/extension/extend-admin-console-spi/src/main/java/org/keycloak/admin/ui/AdminUiPage.java
@@ -0,0 +1,60 @@
+package org.keycloak.admin.ui;
+
+import org.keycloak.Config;
+import org.keycloak.component.ComponentModel;
+import org.keycloak.models.KeycloakSessionFactory;
+import org.keycloak.provider.ProviderConfigProperty;
+import org.keycloak.provider.ProviderConfigurationBuilder;
+import org.keycloak.services.ui.extend.UiPageProvider;
+import org.keycloak.services.ui.extend.UiPageProviderFactory;
+
+import java.util.List;
+
+/**
+ * Implements UiPageProvider so it will be a master detail view in the admin ui of TODO items
+ */
+public class AdminUiPage implements UiPageProvider, UiPageProviderFactory<ComponentModel> {
+
+    @Override
+    public void init(Config.Scope config) {
+    }
+
+    @Override
+    public void postInit(KeycloakSessionFactory factory) {
+    }
+
+    @Override
+    public void close() {
+    }
+
+    @Override
+    public String getId() {
+        return "Todo";
+    }
+
+    @Override
+    public String getHelpText() {
+        return "Here you can store your Todo items";
+    }
+
+    @Override
+    public List<ProviderConfigProperty> getConfigProperties() {
+        return ProviderConfigurationBuilder.create()
+                .property()
+                .name("name")
+                .label("Name")
+                .helpText("Short name of the task")
+                .type(ProviderConfigProperty.STRING_TYPE)
+                .add().property()
+                .name("description")
+                .label("Description")
+                .helpText("Description of what needs to be done")
+                .type(ProviderConfigProperty.TEXT_TYPE)
+                .add().property()
+                .name("prio")
+                .label("Priority")
+                .type(ProviderConfigProperty.LIST_TYPE)
+                .options("critical", "high priority", "neutral", "low priority", "unknown")
+                .add().build();
+    }
+}
diff --git a/extension/extend-admin-console-spi/src/main/java/org/keycloak/admin/ui/ThemeUiTab.java b/extension/extend-admin-console-spi/src/main/java/org/keycloak/admin/ui/ThemeUiTab.java
new file mode 100644
index 000000000..cc15113f8
--- /dev/null
+++ b/extension/extend-admin-console-spi/src/main/java/org/keycloak/admin/ui/ThemeUiTab.java
@@ -0,0 +1,71 @@
+package org.keycloak.admin.ui;
+
+import org.keycloak.Config;
+import org.keycloak.component.ComponentModel;
+import org.keycloak.models.KeycloakSession;
+import org.keycloak.models.KeycloakSessionFactory;
+import org.keycloak.models.RealmModel;
+import org.keycloak.provider.ProviderConfigProperty;
+import org.keycloak.provider.ProviderConfigurationBuilder;
+import org.keycloak.services.ui.extend.UiTabProvider;
+import org.keycloak.services.ui.extend.UiTabProviderFactory;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+public class ThemeUiTab implements UiTabProvider, UiTabProviderFactory<ComponentModel> {
+
+    private KeycloakSession session;
+
+    @Override
+    public String getId() {
+        return "Attributes";
+    }
+
+    @Override
+    public String getHelpText() {
+        return null;
+    }
+
+    @Override
+    public void init(Config.Scope config) {
+    }
+
+    @Override
+    public void postInit(KeycloakSessionFactory factory) {
+    }
+
+    @Override
+    public void close() {
+    }
+
+    @Override
+    public void onCreate(KeycloakSession session, RealmModel realm, ComponentModel model) {
+        realm.setAttribute("logo", model.get("logo"));
+    }
+
+    @Override
+    public List<ProviderConfigProperty> getConfigProperties() {
+        final ProviderConfigurationBuilder builder = ProviderConfigurationBuilder.create();
+        builder.property()
+                .name("logo")
+                .label("Set a logo")
+                .helpText("This logo will be shown on the account ui")
+                .type(ProviderConfigProperty.STRING_TYPE)
+                .add();
+        return builder.build();
+    }
+
+    @Override
+    public String getPath() {
+        return "/:realm/realm-settings/:tab?";
+    }
+
+    @Override
+    public Map<String, String> getParams() {
+        Map<String, String> params = new HashMap<>();
+        params.put("tab", "attributes");
+        return params;
+    }
+}
diff --git a/extension/extend-admin-console-spi/src/main/resources/META-INF/services/org.keycloak.services.ui.extend.UiPageProviderFactory b/extension/extend-admin-console-spi/src/main/resources/META-INF/services/org.keycloak.services.ui.extend.UiPageProviderFactory
new file mode 100644
index 000000000..bbbe0f8f7
--- /dev/null
+++ b/extension/extend-admin-console-spi/src/main/resources/META-INF/services/org.keycloak.services.ui.extend.UiPageProviderFactory
@@ -0,0 +1 @@
+org.keycloak.admin.ui.AdminUiPage
\ No newline at end of file
diff --git a/extension/extend-admin-console-spi/src/main/resources/META-INF/services/org.keycloak.services.ui.extend.UiTabProviderFactory b/extension/extend-admin-console-spi/src/main/resources/META-INF/services/org.keycloak.services.ui.extend.UiTabProviderFactory
new file mode 100644
index 000000000..590dd0c49
--- /dev/null
+++ b/extension/extend-admin-console-spi/src/main/resources/META-INF/services/org.keycloak.services.ui.extend.UiTabProviderFactory
@@ -0,0 +1 @@
+org.keycloak.admin.ui.ThemeUiTab
\ No newline at end of file