diff --git a/assets/styles/_components.css b/assets/styles/_components.css
index e1324f9..f35b6ba 100644
--- a/assets/styles/_components.css
+++ b/assets/styles/_components.css
@@ -1,3 +1,4 @@
+@import "components/typography.css";
 @import "components/forms.css";
 @import "components/button.css";
 @import "components/menu.css";
diff --git a/assets/styles/components/button.css b/assets/styles/components/button.css
index 426332a..02b8672 100644
--- a/assets/styles/components/button.css
+++ b/assets/styles/components/button.css
@@ -1,16 +1,44 @@
-.btn {
-    @apply inline-flex space-x-1 justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4;
-    @apply bg-primary text-white hover:bg-primary/80 shadow-md;
+.button {
+    @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
+    @apply uppercase leading-none text-center;
+    @apply transition-colors outline-none focus:outline-none;
 }
 
-.btn--small {
-    @apply text-xs py-1 px-2 rounded-md;
+.button--small {
+    @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
 }
 
-.btn--secondary {
-    @apply bg-secondary text-gray-800 hover:bg-secondary/80;
+.button--full {
+    @apply block w-full;
 }
 
-.btn--active {
-    @apply shadow-none;
+.bg-button {
+    @apply bg-primary-light text-white;
+    @apply hover:bg-secondary;
+}
+
+
+.bg-button--active,
+.bg-button--secondary {
+    @apply bg-secondary;
+}
+
+.bg-button--muted {
+    @apply bg-zinc-300 hover:bg-zinc-300;
+}
+
+.bg-button--dark {
+    @apply bg-primary-dark;
+}
+
+.bg-button--light {
+    @apply bg-white border-2;
+    @apply font-bold;
+    @apply border-primary-light text-primary;
+}
+
+.bg-button--light:hover,
+.bg-button--light.button--active {
+    @apply bg-white;
+    @apply border-secondary text-secondary;
 }
diff --git a/assets/styles/components/forms.css b/assets/styles/components/forms.css
index a9c95c5..9d53970 100644
--- a/assets/styles/components/forms.css
+++ b/assets/styles/components/forms.css
@@ -2,3 +2,25 @@ label.required:after {
     @apply inline-block text-sm;
     content: '*';
 }
+
+.form-field {
+    @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 block w-full;
+}
+
+.form-field--has-error {
+    @apply border-red-500;
+}
+
+.form-checkbox,
+.form-radio {
+    @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-secondary h-4 w-4;
+}
+
+.form-checkbox--has-error,
+.form-radio--has-error {
+    @apply border-red-500;
+}
+
+input[disabled] {
+    @apply cursor-not-allowed;
+}
diff --git a/assets/styles/components/menu.css b/assets/styles/components/menu.css
index e6c9c53..66fe089 100644
--- a/assets/styles/components/menu.css
+++ b/assets/styles/components/menu.css
@@ -1,12 +1,11 @@
 .menu--main {
-    @apply flex items-center space-x-2;
+    @apply lg:flex lg:items-center m-0;
 }
 
 .menu--main a {
-    @apply uppercase text-lg font-semibold pb-1 px-2 border-b-2 border-white;
-    @apply hover:border-primary;
+    @apply block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800;
 }
 
 .menu--main .current a {
-    @apply border-primary;
+    @apply bg-zinc-400 text-zinc-800;
 }
\ No newline at end of file
diff --git a/assets/styles/components/typography.css b/assets/styles/components/typography.css
new file mode 100644
index 0000000..422e22a
--- /dev/null
+++ b/assets/styles/components/typography.css
@@ -0,0 +1,28 @@
+h1,
+.headline--primary {
+    @apply block text-3xl md:text-4xl font-bold mb-2;
+}
+
+h2,
+.headline--secondary {
+    @apply block text-2xl md:text-3xl font-bold mb-2;
+}
+
+h3,
+.headline--3 {
+    @apply block text-xl md:text-2xl font-bold leading-6 mb-2;
+}
+
+h4,
+.headline--4 {
+    @apply block md:text-lg font-bold;
+}
+
+.headline--underlined:after {
+    @apply block border-b-4 border-primary-light pb-4 mb-4 -mt-2 w-20;
+    content: '';
+}
+
+.subline {
+    @apply block text-xs md:text-sm font-normal leading-6 opacity-60;
+}
diff --git a/src/Controller/Booking/EditController.php b/src/Controller/Booking/EditController.php
index 2416763..dc7bd28 100644
--- a/src/Controller/Booking/EditController.php
+++ b/src/Controller/Booking/EditController.php
@@ -78,7 +78,7 @@ class EditController extends AbstractController
         $form = $this->createForm(BookingType::class, $formData, [
             'attr' => ['novalidate' => 'novalidate'],
             'hx_post' => $this->generateUrl('app_booking_edit', ['id' => $id]),
-            'hx_target' => '#app',
+            'hx_target' => '#myep',
         ]);
 
         $form->handleRequest($request);
diff --git a/src/Controller/PersonalDataController.php b/src/Controller/PersonalDataController.php
index 40894ae..d7adc7a 100644
--- a/src/Controller/PersonalDataController.php
+++ b/src/Controller/PersonalDataController.php
@@ -35,7 +35,7 @@ class PersonalDataController extends AbstractController
         $personalDataForm = $this->createForm(PersonalDataType::class, $personalData, [
             'attr' => ['novalidate' => 'novalidate'],
             'hx_post' => $this->generateUrl('app_personal_data'),
-            'hx_target' => '#app',
+            'hx_target' => '#myep',
         ]);
         $personalDataForm->handleRequest($request);
 
diff --git a/tailwind.config.js b/tailwind.config.js
index e5bd523..6cd4c85 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,19 +15,19 @@ module.exports = {
       fontFamily: {
         sans: ['Lato', 'sans-serif'],
       },
-      fontWeight: {
-        semibold: '700',
-        bold: '900',
-      },
       colors: {
         primary: '#3d8ccb',
         secondary: '#f9c700',
+        'primary-bg': '#ebf3fa',
+        'primary-light': '#0080ff',
+        'primary-medium': '#165883',
+        'primary-dark': '#18527b',
+        pink: '#fa1a8c',
       }
     },
   },
   plugins: [
     require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
   ],
 }
 
diff --git a/templates/base.html.twig b/templates/base.html.twig
index b9a727f..38c6a88 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -10,7 +10,7 @@
             {{ encore_entry_script_tags('app') }}
         {% endblock %}
     </head>
-    <body class="bg-white text-gray-700 font-sans antialiased text-sm">
+    <body class="bg-white text-gray-700 font-sans antialiased">
         {% block body %}{% endblock %}
     </body>
 </html>
diff --git a/templates/booking/edit.html.twig b/templates/booking/edit.html.twig
index 14f5522..735539a 100644
--- a/templates/booking/edit.html.twig
+++ b/templates/booking/edit.html.twig
@@ -232,10 +232,11 @@
     </div>
     <div class="flex justify-between">
         <a href="{{ path('app_bookings') }}"
-           class="btn">
+           class="button bg-button">
             zurück
         </a>
-        <button type="submit" class="btn btn--secondary">
+        <button type="submit"
+                class="button bg-button bg-button--secondary">
             Aktualisieren
         </button>
     </div>
diff --git a/templates/booking/index.html.twig b/templates/booking/index.html.twig
index 26670b2..f8dbc39 100644
--- a/templates/booking/index.html.twig
+++ b/templates/booking/index.html.twig
@@ -49,17 +49,17 @@
                     <div class="flex sm:flex-col space-x-2 sm:space-x-0 sm:space-y-1">
                         {% if booking.editable %}
                             <a href="{{ path('app_booking_edit', { 'id': booking.id }) }}"
-                               class="btn btn--small btn--secondary">
+                               class="button bg-button bg-button--secondary button--small">
                                 bearbeiten
                             </a>
                         {% endif %}
                         <a href="{{ path('app_booking_confirmation', { 'id': booking.id }) }}"
-                           class="btn btn--small"
+                           class="button bg-button button--small"
                            target="_blank">
                             Bestätigung
                         </a>
                         <a href="{{ path('app_booking_documents', { 'id': booking.id }) }}"
-                           class="btn btn--small"
+                           class="button bg-button button--small"
                            target="_blank">
                             Reisedokumente
                         </a>
diff --git a/templates/forms.html.twig b/templates/forms.html.twig
index 5e2580e..f04a19e 100644
--- a/templates/forms.html.twig
+++ b/templates/forms.html.twig
@@ -1,6 +1,7 @@
 {% use 'form_div_layout.html.twig' %}
 
 {%- block form_row -%}
+    {%- set row_attr = row_attr|merge({ 'class': (row_attr.class|default('') ~ ' mb-1')|trim }) -%}
     {%- set widget_attr = {} -%}
     {%- if help is not empty -%}
         {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
@@ -14,7 +15,7 @@
 {%- endblock form_row -%}
 
 {%- block form_label -%}
-    {% set class = 'block font-semibold pb-2' %}
+    {% set class = '' %}
     {% if errors|length %}
         {% set class = class ~ ' text-red-500' %}
     {% endif %}
@@ -35,11 +36,9 @@
 {%- block form_widget_simple -%}
     {%- set type = type|default('text') -%}
     {%- if type != 'hidden' -%}
-        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
         {%- if errors|length -%}
-            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
-        {% else %}
-            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-gray-400 focus:ring-primary' }) -%}
+            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
         {%- endif -%}
         {%- if disabled is defined and disabled == true -%}
             {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -52,11 +51,9 @@
 {%- endblock form_widget_simple -%}
 
 {%- block textarea_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
     {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-gray-400 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
     {%- endif -%}
     {%- if disabled is defined and disabled == true -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -68,11 +65,9 @@
 {%- endblock textarea_widget -%}
 
 {%- block checkbox_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' h-4 w-4 rounded text-primary')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-checkbox')|trim }) -%}
     {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 text-red-500 ring-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-gray-300 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-checkbox--has-error' }) -%}
     {%- endif -%}
     {%- if attr.disabled is defined and attr.disabled == true -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -81,11 +76,9 @@
 {%- endblock checkbox_widget -%}
 
 {%- block radio_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' h-4 w-4 rounded-full text-primary')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-radio')|trim }) -%}
     {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 text-red-500 ring-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-gray-300 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-radio--has-error' }) -%}
     {%- endif -%}
     {%- if attr.disabled is defined and attr.disabled == true -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -108,11 +101,9 @@
 {% endblock %}
 
 {%- block choice_widget_collapsed -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
     {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-gray-400 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
     {%- endif -%}
     {%- if disabled is defined and disabled == true -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
diff --git a/templates/layout.html.twig b/templates/layout.html.twig
index f238ddb..62b6e9d 100644
--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -1,15 +1,17 @@
-<div class="container py-8"
-     id="app"
+<div class="container mb-16"
+     id="myep"
      hx-boost="true"
      hx-indicator="#loading-indicator">
     <div class="relative z-20 flex items-center justify-between pb-4">
-        <div class="text-3xl font-medium">
-            MyE&amp;P
-        </div>
         {% if is_granted('ROLE_USER') %}
-            <div class="hidden lg:block">
-                {{ knp_menu_render(knp_menu_get('main')) }}
-            </div>
+            <nav class="w-full bg-zinc-100 flex items-center mb-8 relative">
+                <div class="flex-1 block text-2xl px-4">My E&amp;P</div>
+                <div class="bg-zinc-50 shadow w-full lg:w-auto absolute lg:relative z-10 lg:z-auto top-full lg:top-auto left-0 lg:shadow-none lg:flex lg:space-x-4">
+                    <div class="lg:flex lg:items-center m-0">
+                        {{ knp_menu_render(knp_menu_get('main')) }}
+                    </div>
+                </div>
+            </nav>
         {% endif %}
     </div>
     <div id="content">
diff --git a/templates/personal_data/index.html.twig b/templates/personal_data/index.html.twig
index cb7b2a0..48f7880 100644
--- a/templates/personal_data/index.html.twig
+++ b/templates/personal_data/index.html.twig
@@ -34,7 +34,7 @@
                 {{ form_row(personalDataForm.phone) }}
                 {{ form_row(personalDataForm.mobile) }}
             </div>
-            <button type="submit" class="btn">
+            <button type="submit" class="button bg-button">
                 Speichern
             </button>
             {{ form_rest(personalDataForm) }}
@@ -49,11 +49,15 @@
                     Du bist aktuell {% if not personalData.communication.newsletter %}<strong>nicht</strong> {% endif%} zum Newsletter
                     angemeldet.
                 </p>
-                <button type="button" class="btn" hx-post="{{ path('app_personal_data_newsletter') }}" hx-target="#app" hx-swap="outerHTML">
+                <button type="button"
+                        class="button bg-button bg-button--secondary"
+                        hx-post="{{ path('app_personal_data_newsletter') }}"
+                        hx-target="#myep"
+                        hx-swap="outerHTML">
                     {% if personalData.communication.newsletter %}
-                        vom Newsletter abmelden
+                        jetzt abmelden
                     {% else %}
-                        zum Newsletter anmelden
+                        jetzt anmelden
                     {% endif %}
                 </button>
             </div>
diff --git a/templates/registration/index.html.twig b/templates/registration/index.html.twig
index 6ef756c..925c63d 100644
--- a/templates/registration/index.html.twig
+++ b/templates/registration/index.html.twig
@@ -1,26 +1,28 @@
 {% extends 'layout.html.twig' %}
 
 {% block content %}
-    <div class="p-8 max-w-screen-sm border border-gray-300 rounded-md mx-auto">
-        <h2 class="text-2xl font-semibold pb-4">
-            Registrierung MyE&amp;P
-        </h2>
-        {{ form_start(form) }}
-        <div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
-            {{ form_row(form.firstName) }}
-            {{ form_row(form.name) }}
-            {{ form_row(form.gender) }}
-            {{ form_row(form.email) }}
-        </div>
-        <button type="submit" class="btn">
-            Absenden
-        </button>
-        <div class="pt-4">
-            <a href="{{ path('app_login') }}" class="underline">
-                zurück
-            </a>
-        </div>
-        {{ form_rest(form) }}
-        {{ form_end(form) }}
+    <h1 class="mb-4">
+        Registrierung MyE&amp;P
+    </h1>
+    {{ form_start(form) }}
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 mb-4">
+        {{ form_row(form.firstName) }}
+        {{ form_row(form.name) }}
+        {{ form_row(form.email) }}
+        {{ form_row(form.gender) }}
     </div>
+    <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2">
+        <button type="submit" class="button bg-button">
+            registrieren
+        </button>
+        <button type="button"
+                hx-get="{{ path('app_login') }}"
+                hx-target="#myep"
+                hx-swap="outerHTML"
+                class="button bg-button bg-button--secondary">
+            zum Login
+        </button>
+    </div>
+    {{ form_rest(form) }}
+    {{ form_end(form) }}
 {% endblock %}
\ No newline at end of file
diff --git a/templates/reset_password/index.html.twig b/templates/reset_password/index.html.twig
index 46cfd44..aec8637 100644
--- a/templates/reset_password/index.html.twig
+++ b/templates/reset_password/index.html.twig
@@ -1,23 +1,24 @@
-{% extends 'layout.html.twig' %}
-
-{% block content %}
-    <div class="p-8 max-w-screen-sm border border-gray-300 rounded-md mx-auto">
-        <h2 class="text-2xl font-semibold pb-4">
-            Passwort zurücksetzen
-        </h2>
-        {{ form_start(form) }}
-        <div class="pb-4">
-            {{ form_row(form.email) }}
-        </div>
-        <button type="submit" class="btn">
-            Absenden
-        </button>
-        <div class="pt-4">
-            <a href="{{ path('app_login') }}" class="underline">
-                zurück
-            </a>
-        </div>
-        {{ form_rest(form) }}
-        {{ form_end(form) }}
-    </div>
-{% endblock %}
\ No newline at end of file
+{{ form_start(form) }}
+{{ form_row(form.email) }}
+<div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 mt-4">
+    <button type="submit" class="button bg-button bg-button--secondary">
+        Passwort erneuern
+    </button>
+    <button type="button"
+            hx-get="{{ path('app_login') }}"
+            hx-target="#login-form"
+            hx-select="#login-form"
+            hx-swap="outerHTML"
+            class="button bg-button">
+        zum Login
+    </button>
+    <button type="button"
+            hx-get="{{ path('app_registration') }}"
+            hx-target="#myep"
+            hx-swap="outerHTML"
+            class="button bg-button">
+        registrieren
+    </button>
+</div>
+{{ form_rest(form) }}
+{{ form_end(form) }}
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index e1d7009..2064103 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -1,61 +1,97 @@
 {% extends 'layout.html.twig' %}
 
 {% block content %}
-    <div class="p-8 max-w-screen-sm border border-gray-300 rounded-md mx-auto">
-        {% if error %}
-            <div class="flex items-center space-x-1 bg-red-500 text-white p-2 rounded-md mb-6">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                </svg>
-                <span class="flex-1 text-sm">{{ error.messageKey|trans(error.messageData, 'security') }}</span>
-            </div>
-        {% endif %}
-        <h2 class="text-2xl font-semibold pb-4">
-            Login
-        </h2>
-        <form action="{{ path('app_login') }}" method="post">
-            <div class="mb-6">
-                <label for="username" class="block leading-6 text-gray-900">
-                    E-Mail:
-                </label>
-                <input type="email"
-                       id="username"
-                       name="_username"
-                       value="{{ last_username }}"
-                       class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
-                       required
-                       autofocus
-                       autocomplete="username">
-            </div>
-            <div class="mb-6">
-                <label for="password" class="block leading-6 text-gray-900">
-                    Passwort:
-                </label>
-                <input type="password"
-                       id="password"
-                       name="_password"
-                       class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
-                       required
-                       autocomplete="current-password">
-            </div>
-            <div class="flex items-start mb-6">
-                <label for="rememberme" class="flex h-6 items-center">
-                    <input type="checkbox" id="rememberme" name="_remember_me" class="h-4 w-4 rounded text-primary">
-                    <span class="block ml-3 leading-6">angemeldet bleiben</span>
-                </label>
-            </div>
-            <button type="submit" class="btn w-full">
-                Login
-            </button>
-            <div class="flex items-center space-x-2 pt-4">
-                <a href="{{ path('app_reset_password') }}" class="underline">
-                    Passwort vergessen?
-                </a>
-                <a href="{{ path('app_registration') }}" class="underline">
-                    Registrierung
-                </a>
-            </div>
-            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
-        </form>
+    <h1 class="mb-4">
+        Login MyE&amp;P
+    </h1>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div id="login-form">
+            {% if error %}
+                <div class="flex items-center space-x-1 bg-red-500 text-white p-2 rounded-md mb-6">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                    </svg>
+                    <span class="flex-1 text-sm">{{ error.messageKey|trans(error.messageData, 'security') }}</span>
+                </div>
+            {% endif %}
+            <form action="{{ path('app_login') }}" method="post">
+                <div class="mb-4">
+                    <label for="username" class="block mb-1">
+                        E-Mail:
+                    </label>
+                    <input type="email"
+                           id="username"
+                           name="_username"
+                           value="{{ last_username }}"
+                           class="form-field"
+                           required
+                           autofocus
+                           autocomplete="username">
+                </div>
+                <div class="mb-4">
+                    <label for="password" class="block mb-1 text-gray-900">
+                        Passwort:
+                    </label>
+                    <input type="password"
+                           id="password"
+                           name="_password"
+                           class="form-field"
+                           required
+                           autocomplete="current-password">
+                </div>
+                <div class="relative flex items-start">
+                    <div class="flex h-6 items-center">
+                        <input type="checkbox" id="rememberme" name="_remember_me" class="form-checkbox">
+                    </div>
+                    <div class="ml-1 leading-6">
+                        <label for="rememberme">
+                            angemeldet bleiben
+                        </label>
+                    </div>
+                </div>
+                <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 mt-4">
+                    <button type="submit" class="button bg-button">
+                        Login
+                    </button>
+                    <button type="button"
+                            hx-get="{{ path('app_reset_password') }}"
+                            hx-target="#login-form"
+                            class="button bg-button bg-button--secondary">
+                        Passwort vergessen?
+                    </button>
+                    <button type="button"
+                            hx-get="{{ path('app_registration') }}"
+                            hx-target="#myep"
+                            hx-swap="outerHTML"
+                            class="button bg-button bg-button--secondary">
+                        registrieren
+                    </button>
+                </div>
+                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
+            </form>
+        </div>
+        <div>
+            <h3 class="mb-2">
+                Neu!
+            </h3>
+            <p class="mb-4">
+                Melde dich jetzt bei MyEP an und du kannst jederzeit auf deine aktuellen Buchungen zugreifen und
+                diese abändern. Egal ob du einen Kurs oder eine Skipasserweiterung hinzufügen/entfernen möchtest,
+                oder das vegetarische Essen auswählen willst. Im neuen Portal ist das nun kostenlos bis 7 Tage vor
+                Reisebeginn möglich!
+            </p>
+            <h3 class="mb-2">
+                Noch keine Zugangsdaten?
+            </h3>
+            <p class="mb-2">
+                Dann gib deine E-Mail ein, mit der Du gebucht hast und klicke auf "Passwort vergessen"! Und wir
+                senden dir ein E-Mail mit einem Passwort-Link!
+            </p>
+            <p>
+                Ein LogIn ist nur möglich wenn Eure Daten schon durch eine Buchung oder Anfrage bei uns
+                angelegt wurden. Wenn Ihr auch Kunde werden möchtet, dann schickt uns Eure Interessen über unser
+                <a href="https://www.ep-reisen.de/skireisen/unternehmen/kontakt/kontaktformular/" title="Kontaktformular">Kontaktformular</a>.
+            </p>
+        </div>
     </div>
 {% endblock %}
\ No newline at end of file