diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 60bfcd2..fdb7eca 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,8 +1,12 @@
 import type { Preview } from "@storybook/react";
 import "./preview.scss";
+import DocsLinks from "./preview/DocsLinks";
 
 const preview: Preview = {
 	parameters: {
+		docs: {
+			container: DocsLinks,
+		},
 		layout: "padded",
 	},
 	tags: ["autodocs"],
diff --git a/.storybook/preview/DocsLinks.scss b/.storybook/preview/DocsLinks.scss
new file mode 100644
index 0000000..d5b8a20
--- /dev/null
+++ b/.storybook/preview/DocsLinks.scss
@@ -0,0 +1,15 @@
+@use "@/index.module.scss" as *;
+
+.docs-links {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: $grey-1;
+
+  a {
+    padding: $space-4 $space-8;
+    color: $white;
+  }
+}
diff --git a/.storybook/preview/DocsLinks.tsx b/.storybook/preview/DocsLinks.tsx
new file mode 100644
index 0000000..50ff7bc
--- /dev/null
+++ b/.storybook/preview/DocsLinks.tsx
@@ -0,0 +1,40 @@
+import type { DocsContainerProps } from "@storybook/blocks";
+import type { StoryMetaParameters } from "../../src/types";
+
+import { DocsContainer } from "@storybook/blocks";
+import type { PropsWithChildren } from "react";
+import "./DocsLinks.scss";
+
+type Props = PropsWithChildren<DocsContainerProps> & {
+	context: { primaryStory: { parameters: StoryMetaParameters } };
+};
+
+const DocsLinks = ({ children, ...props }: Props) => {
+	const links = props.context.primaryStory.parameters.links;
+
+	return (
+		<DocsContainer {...props}>
+			{links && (
+				<div className="docs-links">
+					<a
+						href={`https://blue-tomato.atlassian.net/wiki/x/${links.confluence}`}
+						target="_blank"
+						rel="noreferrer"
+					>
+						Confluence
+					</a>
+					<a
+						href={`https://www.figma.com/design/${links.figma}`}
+						target="_blank"
+						rel="noreferrer"
+					>
+						Figma
+					</a>
+				</div>
+			)}
+			{children}
+		</DocsContainer>
+	);
+};
+
+export default DocsLinks;
diff --git a/README.md b/README.md
index 9d212cf..52f1999 100644
--- a/README.md
+++ b/README.md
@@ -3,3 +3,9 @@
 > the design system of Blue Tomato
 
 ![Logo](logo.png)
+
+## Development
+
+1. Clone the repository via `git clone git@github.com:blue-tomato/blueto.git`
+2. Run `npm install` inside of the repository
+3. Run `npm run dev`
diff --git a/biome.json b/biome.json
index 355c81f..a002ecf 100644
--- a/biome.json
+++ b/biome.json
@@ -4,7 +4,7 @@
 		"enabled": true
 	},
 	"javascript": {
-		"globals": ["React"]
+		"globals": ["React", "StoryMeta"]
 	},
 	"linter": {
 		"enabled": true,
diff --git a/package-lock.json b/package-lock.json
index a57d72d..95bdb00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "@blue-tomato/blueto",
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@blue-tomato/blueto",
-			"version": "0.2.4",
+			"version": "0.2.5",
 			"license": "EUPL-1.2",
 			"dependencies": {
 				"classnames": "^2.5.1",
diff --git a/package.json b/package.json
index 9e3e31e..01ae08d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@blue-tomato/blueto",
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"license": "EUPL-1.2",
 	"description": "🪐 BLUETO - the design system of Blue Tomato",
 	"homepage": "https://blueto.blue-tomato.com",
diff --git a/src/components/Icon.module.scss b/src/components/Icon.module.scss
index 60998e3..96058b0 100644
--- a/src/components/Icon.module.scss
+++ b/src/components/Icon.module.scss
@@ -1,5 +1,5 @@
 @use "@/index.module.scss" as *;
 
 .icon {
-  display: flex;
+  display: block;
 }
diff --git a/src/stories/components/Button.stories.module.scss b/src/stories/components/Button.stories.module.scss
new file mode 100644
index 0000000..332f22c
--- /dev/null
+++ b/src/stories/components/Button.stories.module.scss
@@ -0,0 +1,5 @@
+@use "@/index.module.scss" as *;
+
+.long-text {
+  max-width: 128px;
+}
diff --git a/src/stories/components/Button.stories.ts b/src/stories/components/Button.stories.ts
deleted file mode 100644
index b60b27c..0000000
--- a/src/stories/components/Button.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Button } from "@/components";
-import type { Meta } from "@storybook/react";
-
-export default {
-	title: "components/Button",
-	component: Button,
-	args: {
-		children: "Button",
-		disabled: false,
-		icon: undefined,
-		loading: false,
-		variant: "primary",
-	},
-	argTypes: {
-		icon: { control: "text" },
-	},
-};
-
-export const Default: Meta<typeof Button> = {};
-
-export const WithIcon: Meta<typeof Button> = {
-	args: {
-		icon: "flag.at",
-	},
-};
diff --git a/src/stories/components/Button.stories.tsx b/src/stories/components/Button.stories.tsx
new file mode 100644
index 0000000..b185988
--- /dev/null
+++ b/src/stories/components/Button.stories.tsx
@@ -0,0 +1,46 @@
+import { Button } from "@/components";
+import type { StoryMeta } from "@/types";
+import styles from "./Button.stories.module.scss";
+
+const Docs: StoryMeta<typeof Button> = {
+	title: "BLUETO/components/Button",
+	component: Button,
+	args: {
+		children: "Button",
+		disabled: false,
+		icon: undefined,
+		loading: false,
+		variant: "primary",
+	},
+	argTypes: {
+		icon: { control: "text" },
+	},
+	parameters: {
+		links: {
+			confluence: "3ArPKQ",
+			figma: "rUIq4O2W7nCzofq3nFoURP/BLUETO-Components?node-id=19-2",
+		},
+	},
+};
+
+const Default: StoryMeta<typeof Button> = {};
+
+const WithIcon: StoryMeta<typeof Button> = {
+	args: {
+		icon: "flag.at",
+	},
+};
+
+const WithLongText: StoryMeta<typeof Button> = {
+	render: (props) => (
+		<div className={styles.longText}>
+			<Button {...props} />
+		</div>
+	),
+	args: {
+		children: "Button long text",
+	},
+};
+
+export default Docs;
+export { Default, WithIcon, WithLongText };
diff --git a/src/stories/components/Buttongroup/CategoryButton.stories.module.scss b/src/stories/components/Buttongroup/CategoryButton.stories.module.scss
new file mode 100644
index 0000000..edae2a2
--- /dev/null
+++ b/src/stories/components/Buttongroup/CategoryButton.stories.module.scss
@@ -0,0 +1,6 @@
+@use "@/index.module.scss" as *;
+
+.wrapper {
+  display: flex;
+  gap: $space-16;
+}
diff --git a/src/stories/components/Buttongroup/CategoryButton.stories.tsx b/src/stories/components/Buttongroup/CategoryButton.stories.tsx
new file mode 100644
index 0000000..eecc049
--- /dev/null
+++ b/src/stories/components/Buttongroup/CategoryButton.stories.tsx
@@ -0,0 +1,30 @@
+import { CategoryButton } from "@/components";
+import type { Meta } from "@storybook/react";
+import styles from "./CategoryButton.stories.module.scss";
+
+const Docs: Meta<typeof CategoryButton> = {
+	title: "BLUETO/components/Buttongroup/CategoryButton",
+	render: (props) => (
+		<div className={styles.wrapper}>
+			<CategoryButton {...props} />
+			<CategoryButton {...props} />
+		</div>
+	),
+	args: {
+		active: false,
+		children: "CategoryButton",
+		color: "white",
+		size: "large",
+	},
+	parameters: {
+		links: {
+			confluence: "B4B6L",
+			figma: "rUIq4O2W7nCzofq3nFoURP/BLUETO-Components?node-id=420-52",
+		},
+	},
+};
+
+const Default: Meta<typeof CategoryButton> = {};
+
+export default Docs;
+export { Default };
diff --git a/src/stories/components/Buttongroup/SizeButton.stories.module.scss b/src/stories/components/Buttongroup/SizeButton.stories.module.scss
new file mode 100644
index 0000000..edae2a2
--- /dev/null
+++ b/src/stories/components/Buttongroup/SizeButton.stories.module.scss
@@ -0,0 +1,6 @@
+@use "@/index.module.scss" as *;
+
+.wrapper {
+  display: flex;
+  gap: $space-16;
+}
diff --git a/src/stories/components/Buttongroup/SizeButton.stories.tsx b/src/stories/components/Buttongroup/SizeButton.stories.tsx
new file mode 100644
index 0000000..a9cbb96
--- /dev/null
+++ b/src/stories/components/Buttongroup/SizeButton.stories.tsx
@@ -0,0 +1,29 @@
+import { SizeButton } from "@/components";
+import type { Meta } from "@storybook/react";
+import styles from "./SizeButton.stories.module.scss";
+
+const Docs: Meta<typeof SizeButton> = {
+	title: "BLUETO/components/Buttongroup/SizeButton",
+	render: (props) => (
+		<div className={styles.wrapper}>
+			<SizeButton {...props} />
+			<SizeButton {...props} />
+		</div>
+	),
+	args: {
+		active: false,
+		children: "46",
+		disabled: false,
+	},
+	parameters: {
+		links: {
+			confluence: "CACDL",
+			figma: "rUIq4O2W7nCzofq3nFoURP/BLUETO-Components?node-id=420-52",
+		},
+	},
+};
+
+const Default: Meta<typeof SizeButton> = {};
+
+export default Docs;
+export { Default };
diff --git a/src/stories/components/CategoryButton.stories.ts b/src/stories/components/CategoryButton.stories.ts
deleted file mode 100644
index dd53c56..0000000
--- a/src/stories/components/CategoryButton.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { CategoryButton } from "@/components";
-import type { Meta } from "@storybook/react";
-
-export default {
-	title: "components/CategoryButton",
-	component: CategoryButton,
-	args: {
-		active: false,
-		children: "CategoryButton",
-		color: "white",
-		size: "large",
-	},
-};
-
-export const Default: Meta<typeof CategoryButton> = {};
diff --git a/src/stories/components/Checkbox.stories.ts b/src/stories/components/Checkbox.stories.ts
index 8aa926f..bc75dbc 100644
--- a/src/stories/components/Checkbox.stories.ts
+++ b/src/stories/components/Checkbox.stories.ts
@@ -1,8 +1,8 @@
 import { Checkbox } from "@/components";
 import type { Meta } from "@storybook/react";
 
-export default {
-	title: "components/Checkbox",
+const Docs: Meta<typeof Checkbox> = {
+	title: "BLUETO/components/Checkbox",
 	component: Checkbox,
 	args: {
 		children: "Checkbox",
@@ -11,12 +11,21 @@ export default {
 	argTypes: {
 		error: { control: "text" },
 	},
+	parameters: {
+		links: {
+			confluence: "NwA0L",
+			figma: "rUIq4O2W7nCzofq3nFoURP/BLUETO-Components?node-id=167-125",
+		},
+	},
 };
 
-export const Default: Meta<typeof Checkbox> = {};
+const Default: Meta<typeof Checkbox> = {};
 
-export const WithError: Meta<typeof Checkbox> = {
+const WithError: Meta<typeof Checkbox> = {
 	args: {
 		error: "Error",
 	},
 };
+
+export default Docs;
+export { Default, WithError };
diff --git a/src/stories/components/Icon.stories.ts b/src/stories/components/Icon.stories.ts
index b587fc3..1e8285f 100644
--- a/src/stories/components/Icon.stories.ts
+++ b/src/stories/components/Icon.stories.ts
@@ -1,8 +1,8 @@
 import { Icon } from "@/components";
 import type { Meta } from "@storybook/react";
 
-export default {
-	title: "components/Icon",
+const Docs: Meta<typeof Icon> = {
+	title: "BLUETO/components/Icon",
 	component: Icon,
 	args: {
 		icon: "flag.at",
@@ -10,6 +10,15 @@ export default {
 	argTypes: {
 		icon: { control: "text" },
 	},
+	parameters: {
+		links: {
+			confluence: "AQBCHg",
+			figma: "4BjT8a6YN5icL5bpEfsszx/Foundation?node-id=3-6",
+		},
+	},
 };
 
-export const Default: Meta<typeof Icon> = {};
+const Default: Meta<typeof Icon> = {};
+
+export default Docs;
+export { Default };
diff --git a/src/stories/components/RadioButton.stories.module.scss b/src/stories/components/RadioButton.stories.module.scss
new file mode 100644
index 0000000..1f1df81
--- /dev/null
+++ b/src/stories/components/RadioButton.stories.module.scss
@@ -0,0 +1,7 @@
+@use "@/index.module.scss" as *;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $space-16;
+}
diff --git a/src/stories/components/RadioButton.stories.tsx b/src/stories/components/RadioButton.stories.tsx
new file mode 100644
index 0000000..8d8deff
--- /dev/null
+++ b/src/stories/components/RadioButton.stories.tsx
@@ -0,0 +1,43 @@
+import { RadioButton } from "@/components";
+import type { Meta } from "@storybook/react";
+import styles from "./RadioButton.stories.module.scss";
+
+const Docs: Meta<typeof RadioButton> = {
+	title: "BLUETO/components/RadioButton",
+	render: (props: React.ComponentProps<typeof RadioButton>) => (
+		<form className={styles.wrapper}>
+			<RadioButton
+				inputProps={{ name: "radio-button", value: "1" }}
+				{...props}
+			/>
+			<RadioButton
+				inputProps={{ name: "radio-button", value: "2" }}
+				{...props}
+			/>
+		</form>
+	),
+	args: {
+		children: "RadioButton",
+		error: undefined,
+	},
+	argTypes: {
+		error: { control: "text" },
+	},
+	parameters: {
+		links: {
+			confluence: "sAAnL",
+			figma: "rUIq4O2W7nCzofq3nFoURP/Components?node-id=167-126",
+		},
+	},
+};
+
+const Default: Meta<typeof RadioButton> = {};
+
+const WithError: Meta<typeof RadioButton> = {
+	args: {
+		error: "Error",
+	},
+};
+
+export default Docs;
+export { Default, WithError };
diff --git a/src/stories/components/Radiobutton.stories.tsx b/src/stories/components/Radiobutton.stories.tsx
deleted file mode 100644
index d183dea..0000000
--- a/src/stories/components/Radiobutton.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { RadioButton } from "@/components";
-import type { Meta } from "@storybook/react";
-
-export default {
-	title: "components/RadioButton",
-	component: (props: React.ComponentProps<typeof RadioButton>) => (
-		<form>
-			<RadioButton
-				inputProps={{ name: "radio-button", value: "1" }}
-				{...props}
-			/>
-			<RadioButton
-				inputProps={{ name: "radio-button", value: "2" }}
-				{...props}
-			/>
-		</form>
-	),
-	args: {
-		children: "RadioButton",
-		error: undefined,
-	},
-	argTypes: {
-		error: { control: "text" },
-	},
-};
-
-export const Default: Meta<typeof RadioButton> = {};
-
-export const WithError: Meta<typeof RadioButton> = {
-	args: {
-		error: "Error",
-	},
-};
diff --git a/src/stories/components/SizeButton.stories.ts b/src/stories/components/SizeButton.stories.ts
deleted file mode 100644
index be4d738..0000000
--- a/src/stories/components/SizeButton.stories.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { SizeButton } from "@/components";
-import type { Meta } from "@storybook/react";
-
-export default {
-	title: "components/SizeButton",
-	component: SizeButton,
-	args: {
-		active: false,
-		children: "46",
-		disabled: false,
-	},
-};
-
-export const Default: Meta<typeof SizeButton> = {};
diff --git a/src/stories/foundations/index.stories.tsx b/src/stories/foundations/index.stories.tsx
index 46412a4..fdafa1d 100644
--- a/src/stories/foundations/index.stories.tsx
+++ b/src/stories/foundations/index.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import BrandlogosStory from "./BrandlogosStory";
 import BreakpointsStory from "./BreakpointsStory";
 import ColorsStory from "./ColorsStory";
@@ -7,21 +7,36 @@ import ResponsiveExampleStory from "./ResponsiveExampleStory";
 import SpacingStory from "./SpacingStory";
 import TypographyStory from "./TypographyStory";
 
-const BrandLogo: StoryObj = { render: BrandlogosStory };
-const Breakpoints: StoryObj = { render: BreakpointsStory };
-const Colors: StoryObj = { render: ColorsStory };
-const Icons: StoryObj = { render: IconsStory };
-const ResponsiveExample: StoryObj = { render: ResponsiveExampleStory };
-const Spacing: StoryObj = { render: SpacingStory };
-const Typography: StoryObj = { render: TypographyStory };
+const Docs: Meta<typeof BrandlogosStory> = {
+	title: "BLUETO/foundations",
+	tags: ["!autodocs"],
+};
+
+const Brandlogos: Meta<typeof BrandlogosStory> = {
+	render: BrandlogosStory,
+};
+
+const Breakpoints: Meta<typeof BreakpointsStory> = {
+	render: BreakpointsStory,
+};
+
+const Colors: Meta<typeof ColorsStory> = { render: ColorsStory };
+
+const Icons: Meta<typeof IconsStory> = { render: IconsStory };
+
+const ResponsiveExample: Meta<typeof ResponsiveExampleStory> = {
+	render: ResponsiveExampleStory,
+};
+
+const Spacing: Meta<typeof SpacingStory> = { render: SpacingStory };
 
-const meta: Meta = {
-	title: "Foundations",
+const Typography: Meta<typeof TypographyStory> = {
+	render: TypographyStory,
 };
 
-export default meta;
+export default Docs;
 export {
-	BrandLogo,
+	Brandlogos,
 	Breakpoints,
 	Colors,
 	Icons,
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..55d1a1c
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,14 @@
+import type { Meta } from "@storybook/react";
+
+type StoryMetaParameters = {
+	links?: {
+		confluence: string;
+		figma: string;
+	};
+};
+
+type StoryMeta<T> = Meta<T> & {
+	parameters?: StoryMetaParameters;
+};
+
+export type { StoryMeta, StoryMetaParameters };
diff --git a/todo.txt b/todo.txt
index 6a8dc7f..02517b1 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,5 +1,3 @@
-add figma plugin https://storybook.js.org/blog/figma-plugin-for-storybook/
-link confluence and figma
 confirmation on copy
 storybook branden
 logos increase gap 48px