diff --git a/packages/web/src/scss/components/Footer/README.md b/packages/web/src/scss/components/Footer/README.md
new file mode 100644
index 0000000000..ff6c7fb500
--- /dev/null
+++ b/packages/web/src/scss/components/Footer/README.md
@@ -0,0 +1,256 @@
+# Footer
+
+The Footer is a highly variable composition. It comes in several ready-to-use design variants, but can be customized to
+achieve your specific design goals.
+
+## Composition
+
+The Footer supports several ready-to-use building blocks:
+
+- [Navigation Links](#navigation-links)
+- [Product Logo](#product-logo)
+- [Social Media Links](#social-media-links)
+- [Language Switch](#language-switch)
+- [Secondary Links](#secondary-links)
+
+This is how all supported building blocks of the Footer build up the complete composition:
+
+```html
+
+```
+
+👉 Good to know:
+
+- To achieve the desired design, you can use the provided building blocks in any order you need.
+- All building blocks are optional, so you can use only the ones you need.
+- You are not limited just to the provided building blocks. You can add your own content or building blocks (such as a
+ newsletter subscription form) as needed.
+- Use [Grid][grid] and [Flex][flex] components to create the desired layout.
+- Use [Stack][stack] or [Divider][divider] components to organize individual sections.
+- Use spacing utility classes like `mb-*` or `pt-*` to achieve desired spacings between components.
+
+## Navigation Links
+
+Navigation links are structured in sections with a headline and a [Stack][stack] of links.
+
+👉 Please note how the `