diff --git a/core/templates/core/contact_form_page.html b/core/templates/core/contact_form_page.html
index 2868da1..a2e0743 100644
--- a/core/templates/core/contact_form_page.html
+++ b/core/templates/core/contact_form_page.html
@@ -1,77 +1,194 @@
 {% extends "core/base.html" %}
 {% load core_tags menu_tags static wagtailcore_tags wagtailimages_tags crispy_forms_tags %}
 
-{% block content %}
-<div class="row">
-    <!-- Contact Form (Desktop) -->
-    <div class="col-md-6 d-none d-md-block">
-        <div class="border-bottom pb-2 mb-3">
-            <h2>{{ self.form_title }}</h2>
-        </div>
-        <form action="{% pageurl self %}" method="POST" class="mb-4">
-            {% csrf_token %}
-            {{ form|crispy }}
-            <div class="text-end">
-                <button type="submit" class="btn btn-primary">Senden</button>
-            </div>
-        </form>
-    </div>
+{% block extra_css %}
+<style>
+    /* Contact page specific styles */
+    .contact-section {
+        padding: 2rem 0;
+    }
 
-    <!-- Contact Person -->
-    <div class="col-md-6 col-12">
-        <div class="border-bottom pb-2 mb-3">
-            <h2>Ihr Ansprechpartner</h2>
-        </div>
-        <div class="row">
-            {% if self.person_img %}
-            <!-- Desktop Image -->
-            <div class="col-md-6 d-none d-md-block text-center">
-                <div class="card mb-4">
-                    {% image self.person_img fill-240x320 class="img-fluid card-img-top" %}
-                    <div class="card-body">
-                        <h4 class="card-title">{{ self.person_name }}</h4>
-                        <p class="card-text">{{ self.person_position }}</p>
+    .section-title {
+        position: relative;
+        margin-bottom: 2rem;
+    }
+
+    .section-title:after {
+        content: '';
+        position: absolute;
+        bottom: -10px;
+        left: 0;
+        width: 60px;
+        height: 3px;
+        background-color: var(--bs-primary);
+        border-radius: 3px;
+    }
+
+    .contact-card {
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: var(--box-shadow-medium);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        height: 100%;
+        border: none;
+    }
+
+    .contact-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    }
+
+    .contact-info-list li {
+        padding: 0.75rem 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        transition: transform 0.2s ease;
+    }
+
+    .contact-info-list li:last-child {
+        border-bottom: none;
+    }
+
+    .contact-info-list li:hover {
+        transform: translateX(5px);
+    }
+
+    .contact-info-list i {
+        color: var(--bs-primary);
+        font-size: 1.2rem;
+        width: 30px;
+        text-align: center;
+    }
+
+    .person-img-container {
+        overflow: hidden;
+        border-radius: 12px;
+        box-shadow: var(--box-shadow-light);
+        width: 100%;
+        height: 300px;
+    }
+
+    .person-img-container img {
+        transition: transform 0.5s ease;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .person-img-container:hover img {
+        transform: scale(1.05);
+    }
+
+    .contact-form-card {
+        padding: 2rem;
+    }
+
+    .animate-fade-in-up {
+        animation: fadeInUp 0.8s ease-out;
+    }
+
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="contact-section">
+    <div class="row">
+        <!-- Contact Form (Desktop) -->
+        <div class="col-md-6 d-none d-md-block animate-fade-in-up" style="animation-delay: 0.1s;">
+            <h2 class="section-title">{{ self.form_title }}</h2>
+            <div class="card contact-card contact-form-card mb-4">
+                <form action="{% pageurl self %}" method="POST">
+                    {% csrf_token %}
+                    {{ form|crispy }}
+                    <div class="text-end mt-4">
+                        <button type="submit" class="btn btn-primary">
+                            <i class="bi bi-send me-2"></i>Senden
+                        </button>
                     </div>
-                </div>
+                </form>
             </div>
-            <!-- Mobile Image -->
-            <div class="col-sm-6 col-12 d-md-none">
-                <div class="card mb-4">
-                    {% image self.person_img fill-240x320 class="img-fluid card-img-top" %}
-                    <div class="card-body">
-                        <h4 class="card-title">{{ self.person_name }}</h4>
-                        <p class="card-text">{{ self.person_position }}</p>
+        </div>
+
+        <!-- Contact Person -->
+        <div class="col-md-6 col-12 animate-fade-in-up" style="animation-delay: 0.2s;">
+            <h2 class="section-title">Ihr Ansprechpartner</h2>
+            <div class="card contact-card mb-4">
+                <div class="card-body p-4">
+                    <div class="row">
+                        {% if self.person_img %}
+                        <!-- Person Image -->
+                        <div class="col-md-5 col-sm-6 mb-4 mb-md-0">
+                            <div class="person-img-container">
+                                {% image self.person_img fill-300x400 class="img-fluid rounded" %}
+                            </div>
+                            <div class="text-center mt-3">
+                                <h4 class="mb-1">{{ self.person_name }}</h4>
+                                <p class="text-muted">{{ self.person_position }}</p>
+                            </div>
+                        </div>
+                        {% endif %}
+
+                        <!-- Contact Information -->
+                        {% if self.address or self.mail_address or self.phone or self.web_address %}
+                        <div class="col-md-7 col-sm-6">
+                            <h5 class="mb-3">Kontaktdaten</h5>
+                            <ul class="list-unstyled contact-info-list">
+                                {% if self.address %}
+                                <li><i class="bi bi-geo-alt"></i> {{ self.address }}</li>
+                                {% endif %}
+                                {% if self.mail_address %}
+                                <li>
+                                    <a href="mailto:{{ self.mail_address }}" class="text-decoration-none text-dark">
+                                        <i class="bi bi-envelope"></i> {{ self.mail_address }}
+                                    </a>
+                                </li>
+                                {% endif %}
+                                {% if self.phone %}
+                                <li>
+                                    <a href="tel:{{ self.phone }}" class="text-decoration-none text-dark">
+                                        <i class="bi bi-telephone"></i> {{ self.phone }}
+                                    </a>
+                                </li>
+                                {% endif %}
+                                {% if self.web_address %}
+                                <li>
+                                    <a href="{{ self.web_address }}" class="text-decoration-none text-dark">
+                                        <i class="bi bi-globe"></i> {{ self.web_address }}
+                                    </a>
+                                </li>
+                                {% endif %}
+                            </ul>
+                        </div>
+                        {% endif %}
                     </div>
                 </div>
             </div>
-            {% endif %}
-
-            <!-- Contact Information -->
-            {% if self.address or self.mail_address or self.phone or self.web_address %}
-            <div class="col-sm-6 col-12">
-                <ul class="list-unstyled mb-4">
-                    {% if self.address %}<li class="mb-2"><i class="bi bi-house me-2"></i>{{ self.address }}</li>{% endif %}
-                    {% if self.mail_address %}<li class="mb-2"><a href="mailto:{{ self.mail_address }}" class="text-decoration-none"><i class="bi bi-envelope me-2"></i>{{ self.mail_address }}</a></li>{% endif %}
-                    {% if self.phone %}<li class="mb-2"><a href="tel:{{ self.phone }}" class="text-decoration-none"><i class="bi bi-telephone me-2"></i>{{ self.phone }}</a></li>{% endif %}
-                    {% if self.web_address %}<li class="mb-2"><a href="{{ self.web_address }}" class="text-decoration-none"><i class="bi bi-globe me-2"></i>{{ self.web_address }}</a></li>{% endif %}
-                </ul>
-            </div>
-            {% endif %}
         </div>
-    </div>
 
-    <!-- Contact Form (Mobile) -->
-    <div class="col-12 d-md-none">
-        <div class="border-bottom pb-2 mb-3">
-            <h2>{{ self.form_title }}</h2>
-        </div>
-        <form action="{% pageurl self %}" method="POST" class="mb-4">
-            {% csrf_token %}
-            {{ form|crispy }}
-            <div class="text-end">
-                <button type="submit" class="btn btn-primary">Senden</button>
+        <!-- Contact Form (Mobile) -->
+        <div class="col-12 d-md-none animate-fade-in-up" style="animation-delay: 0.3s;">
+            <h2 class="section-title">{{ self.form_title }}</h2>
+            <div class="card contact-card contact-form-card mb-4">
+                <form action="{% pageurl self %}" method="POST">
+                    {% csrf_token %}
+                    {{ form|crispy }}
+                    <div class="text-end mt-4">
+                        <button type="submit" class="btn btn-primary">
+                            <i class="bi bi-send me-2"></i>Senden
+                        </button>
+                    </div>
+                </form>
             </div>
-        </form>
+        </div>
     </div>
 </div>
 {% endblock content %}
diff --git a/feo_homepage/settings/dev.py b/feo_homepage/settings/dev.py
index 0430df7..a887fb5 100644
--- a/feo_homepage/settings/dev.py
+++ b/feo_homepage/settings/dev.py
@@ -5,6 +5,7 @@ DEBUG = True
 TEMPLATE_DEBUG = True
 
 EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+ALLOWED_HOSTS = ['*']
 
 
 try: