diff --git a/content/contents/leistungen.blade.php b/content/contents/leistungen.blade.php
index 7d08e95..93558d3 100644
--- a/content/contents/leistungen.blade.php
+++ b/content/contents/leistungen.blade.php
@@ -122,11 +122,11 @@
                     <h2 class="mb-4 mt-5 h3">Weitere Leistungen</h2>
                 </div>
 
-                @foreach($otherContents->take(3) as $otherContent)
+                @foreach($otherContents->take(3) as $index => $otherContent)
 
                     <div class="col-12 col-md-6 col-lg-4 mb-3">
                         <a href="{{$otherContent->path}}" class="text-decoration-none">
-                            <div class="card shadow-sm h-100">
+                            <div class="card shadow-sm h-100" data-aos="fade-up" data-aos-delay="{{$index * 250}}">
                                 <x-img src="{{$otherContent->image()}}" class="img-fluid card-img-top"/>
                                 <div class="card-body">
                                     <h3 class="h5 mb-3">{{$otherContent->title}}</h3>
diff --git a/content/contents/news.blade.php b/content/contents/news.blade.php
index b18b2a0..9c78b96 100644
--- a/content/contents/news.blade.php
+++ b/content/contents/news.blade.php
@@ -71,10 +71,10 @@
                 <h2 class="mb-4 mt-5 h3">Weitere Nachrichten</h2>
             </div>
 
-            @foreach($otherContents->take(3) as $otherContent)
+            @foreach($otherContents->take(3) as $index => $otherContent)
 
                 <div class="col-12 col-sm-6 col-md-4 mb-3">
-                    <div class="card shadow-sm h-100">
+                    <div class="card shadow-sm h-100" data-aos="fade-up" data-aos="fade-up" data-aos-delay="{{$index * 250}}">
                         <a href="{{$otherContent->path}}" class="text-decoration-none">
                             <x-img src="{{$otherContent->image()}}" class="img-fluid card-img-top"/>
                         </a>
diff --git a/content/contents/produkt.blade.php b/content/contents/produkt.blade.php
index 5fd773e..4aa4fe5 100644
--- a/content/contents/produkt.blade.php
+++ b/content/contents/produkt.blade.php
@@ -178,10 +178,10 @@
                     <h2 class="mb-4 mt-5 h3">Weitere Produkte</h2>
                 </div>
 
-                @foreach($otherContents->take(3) as $otherContent)
+                @foreach($otherContents->take(3) as $index => $otherContent)
 
-                    <div class="col-12 col-md-6 col-sm-4 mb-3">
-                        <a href="{{$otherContent->path}}" class="text-decoration-none">
+                    <div class="col-12 col-md-6 col-lg-4 mb-3">
+                        <a href="{{$otherContent->path}}" class="text-decoration-none" data-aos="fade-up" data-aos-delay="{{$index * 250}}">
                             <div class="card shadow-sm">
                                 <x-img src="{{$otherContent->image()}}" class="img-fluid card-img-top"/>
                                 <div class="card-body">
diff --git a/content/index.blade.php b/content/index.blade.php
index 786c194..106fb05 100644
--- a/content/index.blade.php
+++ b/content/index.blade.php
@@ -37,10 +37,10 @@
                             <div class="col-12">
                                 @isset($content->link)
                                     <a href="{{ $content->link }}" class="text-decoration-none" data-aos="fade-up">
-                                        <div class="alert alert-success my-2" role="alert">
+                                        <div class="alert alert-{{ $content->type }} my-2" role="alert">
                                             <h5 class="alert-heading">
                                                 <svg width="25" height="25" class="me-2" style="fill: currentColor;">
-                                                    <image id="type-icon" xlink:href="{{asset('fonts/icons/font-awesome/light/code-branch.svg')}}" width="25" height="25"/>
+                                                    <image id="type-icon" xlink:href="{{asset('fonts/icons/font-awesome/light/')}}/{{ $content->icon }}.svg" width="25" height="25"/>
                                                 </svg>
 
                                                 {{ $content->title }}</h5>
@@ -54,10 +54,10 @@
                                     </a>
                                 @else
 
-                                    <div class="alert alert-success my-2" role="alert">
+                                    <div class="alert alert-{{ $content->color }} my-2" role="alert">
                                         <h5 class="alert-heading">
-                                            <svg fill="currentColor;" width="25" height="25" class="me-1">
-                                                <image xlink:href="{{asset('fonts/icons/font-awesome/light/user.svg')}}" width="25" height="25"/>
+                                            <svg width="25" height="25" class="me-2" style="fill: currentColor;">
+                                                <image id="type-icon" xlink:href="{{asset('fonts/icons/font-awesome/light')}}/{{ $content->icon }}.svg" width="25" height="25"/>
                                             </svg>
                                             {{ $content->title }}
                                         </h5>
@@ -159,8 +159,8 @@
                             <h2 id="aktuelles" class="mb-4">Aktuelles</h2>
                         </div>
                     
-                        @foreach($news->take(3) as $content)
-                            <div class="col-12 col-md-6 col-lg-4 mb-4" data-aos="fade-up">
+                        @foreach($news->take(3) as $index => $content)
+                            <div class="col-12 col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="{{$index * 250}}">
                                 <div class="card shadow-sm h-100">
                                     <a href="{{ $content->path }}" class="text-decoration-none">
                                         <x-img src="{{$content->image()}}" alt="{{$content->title}}" style="aspect-ratio:9/5; object-fit:cover;" sizes="(max-width: 330px) 330px,(max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 992px) 993px, 500" class="img-fluid card-img-top"/>
@@ -348,6 +348,7 @@
 
             </div>
 
+        </div>
 
         </div>
 
diff --git a/content/lists/aktuelles.blade.php b/content/lists/aktuelles.blade.php
index 46cd9b6..0842e7a 100644
--- a/content/lists/aktuelles.blade.php
+++ b/content/lists/aktuelles.blade.php
@@ -15,9 +15,9 @@
                 </p>
             </div>
 
-            @foreach($contents as $content)
+            @foreach($contents as $index => $content)
 
-                <div class="col-12 col-md-6 col-lg-4 mb-4">
+                <div class="col-12 col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="{{$index * 250}}">
                     <div class="card shadow-sm h-100">
                         <a href="{{ $content->path }}" class="text-decoration-none">
                             <x-img src="{{ $content->image() }}" sizes="(max-width: 330px) 330px,(max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 992px) 993px, 500" class="img-fluid card-img-top"/>
diff --git a/variables.json b/variables.json
index 15a76b1..09c670f 100644
--- a/variables.json
+++ b/variables.json
@@ -1,40 +1,320 @@
 [
+  {
+    "icon": "/font-awesome/light/building.svg",
+    "group_name": "Allgemein",
+    "description": "Allgemeine Einstellungen",
+    "variables": [
+      {
+        "name": "Telefonnummer",
+        "placeholder": "096545529550",
+        "type": "string",
+        "value": "0123 456789",
+        "required": true
+      },
+      {
+        "name": "Legal Name",
+        "value": "Musterfirma GmbH",
+        "placeholder": "Musterfirma GmbH",
+        "type": "string",
+        "required": true
+      },
+      {
+        "name": "Legal Address",
+        "value": "Musterstr 33",
+        "placeholder": "Musterstr 33",
+        "type": "string",
+        "required": true
+      },
+      {
+        "name": "Legal City",
+        "value": "Musterhausen",
+        "placeholder": "Musterhausen",
+        "type": "string",
+        "required": true
+      },
+      {
+        "name": "Legal ZIP Code",
+        "value": "12345",
+        "placeholder": "12345",
+        "type": "string",
+        "required": true
+      },
+      {
+        "name": "ceo",
+        "value": "Max Mustermann",
+        "placeholder": "Max Mustermann",
+        "type": "string",
+        "required": true
+      }
+    ]
+  },
   {
     "icon": "/font-awesome/light/bag-shopping.svg",
     "group_name": "Warenkorb",
     "description": "Here you can configure the shopping cart.",
     "variables": [
       {
-        "name": "zeige team",
+        "name": "Warenkorb aktiv",
         "type": "boolean",
         "description": "Soll die Funktion Warenkorb aktiviert werden?"
-      },
-      {
-        "name": "about image",
-        "type": "boolean",
-        "description": "Soll die Funktion Warenkorb aktiviert werden?"
-      },
-      {
-        "name": "about image1",
-        "type": "image",
-        "description": "Soll die Funktion Warenkorb aktiviert werden?"
-      },
-      {
-        "name": "about image2",
-        "type": "image",
-        "description": "Soll die Funktion Warenkorb aktiviert werden?"
-      },
-      {
-        "name": "about image3",
-        "type": "image",
-        "description": "Soll die Funktion Warenkorb aktiviert werden?"
-      },
-      {
-        "name": "about image4",
-        "type": "image",
-        "description": "Soll die Funktion Warenkorb aktiviert werden?"
       }
     ]
-  }
+  },
+  {
+    "icon": "/font-awesome/light/users.svg",
+    "group_name": "Über uns",
+    "description": "Here you can configure the shopping cart.",
+    "variables": [
+      {
+        "name": "Zeige Team",
+        "type": "boolean",
+        "description": "Soll das Team gezeigt werden?"
+      }
+    ]
+  },
+  {
+    "icon": "/font-awesome/light/map-pin.svg",
+    "group_name": "Kontankt",
+    "description": "Einstellungen für die Karte",
+    "variables": [
+      {
+        "name": "Type",
+        "value": "Place",
+        "type": "string",
+        "required": true
+      },
+      {
+        "name": "Location Field",
+        "value": "Address",
+        "type": "string",
+        "required": true
+      },
+      {
+        "name": "Filter Fields",
+        "type": "array",
+        "required": true
+      }
+    ]
+  },
+  {
+    "icon": "/font-awesome/light/palette.svg",
+    "group_name": "Layout & Design",
+    "description": "Here you can configure some Design and Layout settings.",
+    "variables": [
+      {
+        "name": "Primary CI Color",
+        "type": "color",
+        "value": "#1a5fb4",
+        "required": true
+      },
+      {
+        "name": "Secondary CI Color",
+        "type": "color",
+        "value": "#1c71d8",
+        "required": true
+      },
+      {
+        "name": "Primary Background Color",
+        "type": "color",
+        "value": "#ffffff",
+        "required": true
+      },
+      {
+        "name": "Secondary Background Color",
+        "type": "color",
+        "value": "#f6f5f4",
+        "required": true
+      },
+      {
+        "name": "Primary Link Color",
+        "type": "color",
+        "value": "#1a5fb4",
+        "required": true
+      },
+      {
+        "name": "Secondary Link Color",
+        "type": "color",
+        "value": "#1862a8",
+        "required": true
+      },
+      {
+        "name": "Footer Color",
+        "type": "color",
+        "value": "#f6f5f4",
+        "required": true
+      },
+      {
+        "name": "Footer Link Color",
+        "type": "color",
+        "value": "#ffffff",
+        "required": true
+      },
+      {
+        "name": "Footer Secondary Link Color",
+        "type": "color",
+        "value": "#deddda",
+        "required": true
+      },
+      {
+        "name": "Menue Background Color",
+        "type": "color",
+        "value": "#f6f5f4",
+        "required": true
+      },
+      {
+        "name": "Footer Background Color",
+        "type": "color",
+        "value": "#1a5fb4",
+        "required": true
+      },
+      {
+        "name": "Title Color",
+        "type": "color",
+        "value": "#1a5fb4",
+        "description": "Farbe für Überschriften",
+        "required": true
+      },
+      {
+        "name": "Contact Bar",
+        "type": "boolean",
+        "description": "Eine Infobar am oberen Rand der Homepage, welche Standort und Telefonnummer anzeigt.",
+        "required": true
+      },
 
+      {
+        "id": "Background Pattern",
+        "name": "Hintergrund Pattern",
+        "type": "string",
+        "value": "",
+        "required": false
+      },
+      {
+        "name": "Schriftart",
+        "type": "select",
+        "value": "15px/25px 'Noto Sans', Arial, sans-serif",
+        "options": [
+          "15px/25px 'Noto Sans', Arial, sans-serif",
+          "Playfair Display",
+          "Dosis",
+          "Times New Roman",
+          "Helvetica",
+          "Montserrat",
+          "Verdana",
+          "Trebuchet MS"
+        ],
+        "required": true
+      }
+    ]
+  },
+  {
+    "icon": "/font-awesome/light/palette.svg",
+    "group_name": "Hauptmenü",
+    "description": "Here you can configure some Design and Layout settings.",
+    "variables": [
+      {
+        "id": "menue_button",
+        "name": "Schaltfäche Menü",
+        "type": "boolean",
+        "required": true
+      },
+      {
+        "id": "menue_button_link",
+        "name": "Schatfläche Link",
+        "type": "string",
+        "required": true
+      },
+      {
+        "id": "menue_button_text",
+        "name": "Schatfläche Text",
+        "type": "string",
+        "required": true
+      },
+      {
+        "id": "menue_button_external",
+        "name": "Ist der Link external?",
+        "type": "boolean",
+        "required": true
+      }
+    ]
+  },
+
+  {
+    "icon": "/font-awesome/light/memo.svg",
+    "group_name": "Über uns",
+    "description": "Texte und Bildder der Seite Über uns",
+    "variables": [
+      {
+        "id": "about_introduction",
+        "name": "Introduco Sobre nos",
+        "value": "Muito obrigado pelo seu interesse, por favor, preencha o formulário preliminar e entraremos em contato o mais rápido possível",
+        "type": "string"
+      },
+
+      {
+        "id": "about_image",
+        "name": "Imagem Sobre nos Principal",
+        "type": "image"
+      },
+      {
+        "id": "about_image1",
+        "name": "Imagem Sobre nos 1",
+        "type": "image"
+      },
+
+      {
+        "id": "about_image2",
+        "name": "Imagem Sobre nos 2",
+        "type": "image"
+      },
+      {
+        "id": "about_image3",
+        "name": "Imagem Sobre nos 3",
+        "type": "image"
+      },
+      {
+        "id": "about_text",
+        "name": "Texto Sobre nos",
+        "value": "Muito obrigado pelo seu interesse, por favor, preencha o formulário preliminar e entraremos em contato o mais rápido possível",
+        "type": "string"
+      }
+    ]
+  },
+
+  {
+    "icon": "/font-awesome/light/map-pin.svg",
+    "group_name": "Statische Seiten",
+    "description": "Vielen Dank für Ihre Unterstützung!",
+    "variables": [
+      {
+        "name": "Checkout Page Text",
+        "value": "Vielen Dank für Ihr Interesse, füllen Sie bitte die Vorabangrage aus und wir werden uns schnellstmöglichst bei Ihnen melden",
+        "type": "string"
+      }
+    ]
+  },
+  {
+    "icon": "/font-awesome/light/map-pin.svg",
+    "group_name": "Kontakt",
+    "description": "Kontakt Seite",
+    "variables": [
+      {
+        "id": "show_contactform",
+        "name": "Zeige Kontaktformular",
+        "value": "true",
+        "type": "boolean"
+      }
+    ]
+  },
+  {
+    "icon": "/font-awesome/light/map-pin.svg",
+    "group_name": "Lumino Branding",
+    "description": "Vielen Dank für Ihre Unterstützung!",
+    "variables": [
+      {
+        "name": "Lumino Branding",
+        "value": "true",
+        "type": "boolean"
+      }
+    ]
+  }
 ]
\ No newline at end of file