diff --git a/readme.md b/readme.md
index 68136be..896888e 100755
--- a/readme.md
+++ b/readme.md
@@ -1,4 +1,4 @@
-# Verua.CH Website
+# VeruA.ch Website
 
  <a href="https://github.com/gohugoio/hugo/releases/tag/v0.124.1" alt="Contributors">
     <img src="https://img.shields.io/static/v1?label=min-HUGO-version&message=0.121.2&color=f00&logo=hugo" />
@@ -20,7 +20,7 @@ Production site: <a target="_blank" href="https://verua.info/" rel="nofollow">ve
 
 ## Usage / Update Content
 
-To use the theme, and to update your content, you need to clone the repository, update your content in the content folder and push your changes to the main branch which will trigger a deployment.
+To use the theme, and to update your content, you need to clone the repository, update your content in the `content` folder and push your changes to the main branch which will trigger a deployment.
 
 ```bash
 # Clone the repository
@@ -32,7 +32,32 @@ git remote add origin https://code.verua.online/rabeweb/verua.ch_src.git
 git push -u origin main
 ```
 
-### Deployment
+### Editing Content
+
+The content is written in the [markdown](https://www.markdownguide.org/getting-started/) format. You also use html tags to format your content but the ending still stays .md for markdown. These files are found in the `content` folder. For linking german and french content, you use the translation key syntax. This means that you put a key in the frontmatter of both files you want to link to.
+
+```yaml
+---
+title: 'VeruA ** Verwaltung und Abrechnung'
+translationKey: 'a-page-about-cats'
+---
+```
+
+For example, the german version of the VeruA.ch website is located in the `content/german` folder. The french version is located in the `content/french` folder. Both are linked by the translation key `a-page-about-cats`.
+
+### Images
+
+Images are stored in the `static/images` folder. You can use the `![]()` syntax to insert images into your markdown files.
+
+Everything that is in the `static/images` folder will be copied to the `public/images` folder during the build process. This means that you can use relative paths to your images in your markdown files like this: `![](images/my-image.png)`.
+
+### Shortcodes
+
+You can use shortcodes to add custom functionality to your markdown files. You can find a list of available shortcodes in the [Hugoplate documentation](https://github.com/zeon-studio/hugoplate/blob/main/README.md#shortcodes).
+
+There are some shortcodes that are specific to the VeruA.ch website. These Shortcodes are defined in the `layouts/shortcodes` folder. You can find a list of available exclusive shortcodes like columns and sections further down in this document.
+
+## Deployment
 
 Deployment is done via Gitea Runners. The deployment is triggered by a push to the `main` branch. The deployment will automatically build the site and deploy it to the production or preview environment.
 
@@ -65,16 +90,112 @@ npm run dev
 
 The site will be available at `http://localhost:8080`.
 
-## Features
-
-### Custom Shortcodes exclusively for Verua.CH
+## Custom Shortcodes exclusively for Verua.CH
 
 <small>/themes/hugoplate/layouts/shortcodes/</small>
 
 - **Alerts**: Create alerts with custom text and styles.
 - **Aligncenter**: Center content horizontally.
-- **Buttons**: Create buttons with custom text and styles.
 - **Cards**: Create beautiful cards with custom content and images.
 - **Columns**: Create responsive columns with custom content and images.
 - **Icons**: Use icons from the Font Awesome library to add icons to your website.
 - **Sections**: Create sections with custom content and images.
+
+### Alert
+
+The alert shortcode is used to create alerts with custom text and styles.
+
+**Pfad:** themes/hugoplate/layouts/shortcodes/alert.html
+
+`{{% alert background-color="slate-800" %}}`
+
+Content
+
+`{{% /alert %}}`
+
+### Aligncenter
+
+The aligncenter shortcode is used to center content horizontally.
+
+**Pfad:** themes/hugoplate/layouts/shortcodes/aligncenter.html
+
+`{{% aligncenter %}}`
+
+Content
+
+`{{% /aligncenter %}}`
+
+### Card
+
+The card shortcode is used to create beautiful cards with custom content and images.
+
+**Pfad:** themes/hugoplate/layouts/shortcodes/card.html
+
+`{{% card %}}`
+
+Content
+
+`{{% /card %}}`
+
+Kann ein `Background` - Attribut haben:
+
+`{{% card background="images/startseite-slide.jpg" %}}`
+
+Kann ein `Light-Text` - Attribut haben:
+
+`{{% card light-text="true" %}}`
+
+Kann ein `Title` - Attribut haben:
+
+`{{% card title="Card Title" %}}`
+
+`
+
+### Columns
+
+**Pfad:** themes/hugoplate/layouts/shortcodes/columns.html
+
+Columns are seperated by the '..column..' shortcode.
+
+`{{% columns %}}`
+
+Content
+
+`..column..`
+
+Content
+
+`..column..`
+
+Content
+
+`{{% /columns %}}`
+
+## Font-Awesome Icon
+
+`{{% icon name="user" color="black" size="5xl" %}}`
+
+Für "size" und "color" werden Tailwind CSS Klassen benutzt.
+
+E.g. https://tailwindcss.com/docs/text-color
+
+die Klassennamen jeweils OHNE "text-" einfügen:
+text-gray-50 -> color="gray-50"
+
+text-5xl -> size="5xl"
+
+### Section
+
+It is a good idea to use the section shortcode to separate your content into sections and keep consistent margins and page widths.
+
+**Pfad:** themes/hugoplate/layouts/shortcodes/section.html
+
+`{{% section %}}`
+
+Content
+
+`{{% /section %}}`
+
+Kann ein `Background` - Attribut haben:
+
+`{{% section background="images/startseite-slide.jpg" %}}`