diff --git a/frontend/src/stories/TemplateCard.docs.mdx b/frontend/src/stories/TemplateCard.docs.mdx
new file mode 100644
index 0000000..b22dcd5
--- /dev/null
+++ b/frontend/src/stories/TemplateCard.docs.mdx
@@ -0,0 +1,28 @@
+{/*
+    SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+    SPDX-License-Identifier: Apache-2.0
+*/}
+
+import * as Component from './TemplateCard.stories.js'
+import { Meta, Title, Story, Canvas, Unstyled } from '@storybook/blocks'
+
+<Meta of={Component} />
+
+<Title />
+
+TemplateCard shall introduce the template to the user and provide some basic insights:
+<ul>
+<li>is this a template of a model element or a document</li>
+<li>is it a stable template or an experimental thing / not for production</li>
+<li>how many object / document instances this template applies to</li>
+<li>indicate if the template is broken / cant enumerate objects / other issues </li>
+<li>maybe indicate modeling rules compliance score</li>
+</ul>
+
+Normal users can see a few buttons:
+
+<Story of={Component.Demo} />
+
+Administrators can see more buttons:
+
+<Story of={Component.Demo} />
diff --git a/frontend/src/stories/TemplateCard.stories.js b/frontend/src/stories/TemplateCard.stories.js
index 169d92b..466a560 100644
--- a/frontend/src/stories/TemplateCard.stories.js
+++ b/frontend/src/stories/TemplateCard.stories.js
@@ -10,7 +10,6 @@ export default {
   component: TemplateCard,
   // This component will have an automatically generated Autodocs entry:
   //  https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at:
     //  https://storybook.js.org/docs/configure/story-layout
@@ -18,7 +17,31 @@ export default {
   }
 };
 
-export const Demo = {
+export const Normal = {
+  args: {
+    template: {
+      name: 'System Capability',
+      description: `Specifies what the system should be capable of
+      and how it needs to interact with external actors.`,
+      idx: 'THE IDENTIFIER'
+    },
+    onClickCallback: (idx) => alert(idx)
+  }
+};
+
+export const Draft = {
+  args: {
+    template: {
+      name: 'System Capability',
+      description: `Specifies what the system should be capable of
+      and how it needs to interact with external actors.`,
+      idx: 'THE IDENTIFIER'
+    },
+    onClickCallback: (idx) => alert(idx)
+  }
+};
+
+export const Broken = {
   args: {
     template: {
       name: 'System Capability',