diff --git a/core/templates/bootstrap5_base.html b/core/templates/bootstrap5_base.html
index 3e679ac..d281de4 100644
--- a/core/templates/bootstrap5_base.html
+++ b/core/templates/bootstrap5_base.html
@@ -38,7 +38,7 @@
 
         <!-- Breadcrumbs -->
         {% if not self.url == site_root.url %}
-            <div class="breadcrumb-section py-4">
+            <div class="breadcrumb-section pt-2">
                 <div class="container">
                     <h1 class="h2">{{ self.title }}</h1>
                     <nav aria-label="breadcrumb">
diff --git a/core/templates/core/about_us_page.html b/core/templates/core/about_us_page.html
index d646bbf..284ddac 100644
--- a/core/templates/core/about_us_page.html
+++ b/core/templates/core/about_us_page.html
@@ -1,11 +1,180 @@
 {% extends "core/base.html" %}
 {% load core_tags menu_tags static wagtailuserbar wagtailcore_tags wagtailimages_tags %}
 
+{% block extra_css %}
+<style>
+    /* About us page specific styles */
+    .about-section {
+        padding: 3rem 0;
+    }
+
+    .section-title {
+        position: relative;
+        margin-bottom: 2rem;
+        font-weight: var(--font-weight-light);
+    }
+
+    .section-title:after {
+        content: '';
+        position: absolute;
+        bottom: -10px;
+        left: 0;
+        width: 60px;
+        height: 3px;
+        background-color: var(--bs-primary);
+        border-radius: 3px;
+    }
+
+    .section-title.text-center:after {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .team-card {
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: var(--box-shadow-light);
+        transition: all 0.3s ease;
+        height: 100%;
+        border: none;
+    }
+
+    .team-card:hover {
+        transform: translateY(-5px);
+        box-shadow: var(--box-shadow-medium);
+    }
+
+    .team-card .card-img-top {
+        height: 400px;
+        object-fit: cover;
+        transition: transform 0.5s ease;
+    }
+
+    .team-card:hover .card-img-top {
+        transform: scale(1.05);
+    }
+
+    .team-card .card-body {
+        padding: 1.5rem;
+    }
+
+    .team-card .card-title {
+        font-weight: var(--font-weight-medium);
+        margin-bottom: 0.5rem;
+    }
+
+    .team-card .card-subtitle {
+        color: var(--bs-primary);
+        font-weight: var(--font-weight-light);
+        margin-bottom: 1rem;
+    }
+
+    .team-card .card-footer {
+        background-color: transparent;
+        border-top: 1px solid rgba(0, 0, 0, 0.05);
+        padding: 1rem 1.5rem;
+    }
+
+    .team-social-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 0.5rem 1rem;
+        border-radius: 50px;
+        background-color: rgba(var(--bs-primary-rgb), 0.1);
+        color: var(--bs-primary);
+        transition: all 0.3s ease;
+        margin-right: 0.5rem;
+        margin-bottom: 0.5rem;
+        font-size: 0.9rem;
+        font-weight: var(--font-weight-medium);
+        text-decoration: none;
+    }
+
+    .team-social-link i {
+        margin-right: 0.5rem;
+    }
+
+    .team-social-link:hover {
+        background-color: var(--bs-primary);
+        color: white;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.3);
+    }
+
+    .mission-vision-card {
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: var(--box-shadow-light);
+        transition: all 0.3s ease;
+        height: 100%;
+        border: none;
+        padding: 2rem;
+    }
+
+    .mission-vision-card:hover {
+        transform: translateY(-3px);
+        box-shadow: var(--box-shadow-medium);
+    }
+
+    .quote-card {
+        border-left: 4px solid var(--bs-primary);
+        padding: 1.5rem;
+        background-color: rgba(var(--bs-primary-rgb), 0.05);
+        border-radius: 0 12px 12px 0;
+        margin: 2rem 0;
+    }
+
+    .about-image {
+        border-radius: 12px;
+        box-shadow: var(--box-shadow-medium);
+        transition: all 0.3s ease;
+        overflow: hidden;
+    }
+
+    .about-image img {
+        transition: transform 0.5s ease;
+    }
+
+    .about-image:hover img {
+        transform: scale(1.05);
+    }
+
+    @media (max-width: 767.98px) {
+        .section-title {
+            font-size: 1.8rem;
+        }
+
+        .team-card .card-img-top {
+            height: 300px;
+        }
+
+        .team-social-link {
+            width: 100%;
+            margin-right: 0;
+            justify-content: center;
+        }
+    }
+</style>
+{% endblock %}
+
 {% block content %}
+<div class="container py-5 animate-fade-in-up">
+    <!-- Page Title -->
+    <div class="row mb-5">
+        <div class="col-12 text-center">
+            <h1 class="display-4 fw-bold mb-3">{{ page.title }}</h1>
+            {% if page.subtitle %}<p class="lead text-muted">{{ page.subtitle }}</p>{% endif %}
+            <div class="divider mx-auto my-4" style="width: 80px; height: 4px; background-color: var(--bs-primary);"></div>
+        </div>
+    </div>
+
     <!-- Company Introduction -->
     <div class="row mb-5">
         <div class="col-12">
-            {{ self.company_intro|richtext }}
+            <div class="animate-fade-in-up">
+                {{ self.company_intro|richtext }}
+            </div>
         </div>
     </div>
 
@@ -14,15 +183,19 @@
     <div class="row mb-5">
         {% if self.mission_title %}
         <div class="col-md-6 mb-4 mb-md-0">
-            <h2 class="border-bottom pb-2 mb-3">{{ self.mission_title }}</h2>
-            {{ self.mission_text|richtext }}
+            <div class="mission-vision-card animate-fade-in-up" style="animation-delay: 0.1s;">
+                <h2 class="section-title">{{ self.mission_title }}</h2>
+                {{ self.mission_text|richtext }}
+            </div>
         </div>
         {% endif %}
 
         {% if self.vision_title %}
         <div class="col-md-6">
-            <h2 class="border-bottom pb-2 mb-3">{{ self.vision_title }}</h2>
-            {{ self.vision_text|richtext }}
+            <div class="mission-vision-card animate-fade-in-up" style="animation-delay: 0.2s;">
+                <h2 class="section-title">{{ self.vision_title }}</h2>
+                {{ self.vision_text|richtext }}
+            </div>
         </div>
         {% endif %}
     </div>
@@ -30,91 +203,110 @@
 
     <!-- Company History -->
     {% if self.history_title %}
-    <div class="row mb-5">
-        <div class="col-12">
-            <h2 class="border-bottom pb-2 mb-3">{{ self.history_title }}</h2>
-            {{ self.history_text|richtext }}
+    <div class="about-section">
+        <div class="row mb-5">
+            <div class="col-12">
+                <h2 class="section-title">{{ self.history_title }}</h2>
+                <div class="animate-fade-in-up">
+                    {{ self.history_text|richtext }}
+                </div>
+            </div>
         </div>
     </div>
     {% endif %}
 
     <!-- Team Members -->
     {% if self.team_title %}
-    <div class="row mb-5">
-        <div class="col-12">
-            <h2 class="border-bottom pb-2 mb-3">{{ self.team_title }}</h2>
-            {{ self.team_intro|richtext }}
+    <div class="about-section">
+        <div class="row mb-5">
+            <div class="col-12 text-center">
+                <h2 class="section-title text-center">{{ self.team_title }}</h2>
+                <div class="mb-5 animate-fade-in-up">
+                    {{ self.team_intro|richtext }}
+                </div>
+            </div>
         </div>
-    </div>
 
-    <div class="row mb-5">
-        {% for block in self.team_members %}
-            {% if block.block_type == 'team_member' %}
-            <div class="col-md-4 mb-4">
-                <div class="card h-100">
-                    {% if block.value.photo %}
-                        {% image block.value.photo width-400 as team_photo %}
-                        <img class="card-img-top img-fluid" src="{{ team_photo.url }}" alt="{{ block.value.name }}">
-                    {% endif %}
-                    <div class="card-body">
-                        <h3 class="card-title h5">{{ block.value.name }}</h3>
-                        <h4 class="card-subtitle mb-3 text-muted h6">{{ block.value.position }}</h4>
-                        {% if block.value.bio %}
-                        <div class="card-text">{{ block.value.bio|richtext }}</div>
+        <div class="row mb-5">
+            {% for block in self.team_members %}
+                {% if block.block_type == 'team_member' %}
+                <div class="col-md-4 mb-4 animate-fade-in-up" style="animation-delay: {% if forloop.counter0 == 1 %}0.1{% elif forloop.counter0 == 2 %}0.2{% elif forloop.counter0 == 3 %}0.3{% elif forloop.counter0 == 4 %}0.4{% elif forloop.counter0 == 5 %}0.5{% else %}0{% endif %}s;">
+                    <div class="team-card h-100">
+                        {% if block.value.photo %}
+                            {% image block.value.photo fill-400x400-c100 as team_photo %}
+                            <img class="card-img-top" src="{{ team_photo.url }}" alt="{{ block.value.name }}">
                         {% endif %}
-                    </div>
-                    <div class="card-footer bg-transparent">
-                        <div class="d-flex gap-2">
-                            {% if block.value.email %}
-                            <a href="mailto:{{ block.value.email }}" class="btn btn-outline-secondary btn-sm">
-                                <i class="bi bi-envelope"></i>
-                            </a>
-                            {% endif %}
-                            {% if block.value.linkedin %}
-                            <a href="{{ block.value.linkedin }}" target="_blank" class="btn btn-outline-secondary btn-sm">
-                                <i class="bi bi-linkedin"></i>
-                            </a>
-                            {% endif %}
-                            {% if block.value.xing %}
-                            <a href="{{ block.value.xing }}" target="_blank" class="btn btn-outline-secondary btn-sm">
-                                <i class="bi bi-x"></i>
-                            </a>
+                        <div class="card-body">
+                            <h3 class="card-title h4">{{ block.value.name }}</h3>
+                            <h4 class="card-subtitle h6">{{ block.value.position }}</h4>
+                            {% if block.value.bio %}
+                            <div class="card-text mt-3">{{ block.value.bio|richtext }}</div>
                             {% endif %}
                         </div>
+                        <div class="card-footer bg-transparent">
+                            <h5 class="text-muted mb-3 small">Kontaktmöglichkeiten:</h5>
+                            <div class="d-flex flex-wrap">
+                                {% if block.value.email %}
+                                <a href="mailto:{{ block.value.email }}" class="team-social-link" title="Send an email">
+                                    <i class="bi bi-envelope"></i>
+                                    <span>Email</span>
+                                </a>
+                                {% endif %}
+                                {% if block.value.linkedin %}
+                                <a href="{{ block.value.linkedin }}" target="_blank" class="team-social-link" title="View LinkedIn profile">
+                                    <i class="bi bi-linkedin"></i>
+                                    <span>LinkedIn</span>
+                                </a>
+                                {% endif %}
+                                {% if block.value.xing %}
+                                <a href="{{ block.value.xing }}" target="_blank" class="team-social-link" title="View Xing profile">
+                                    <i class="bi bi-x"></i>
+                                    <span>Xing</span>
+                                </a>
+                                {% endif %}
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            {% endif %}
-        {% endfor %}
+                {% endif %}
+            {% endfor %}
+        </div>
     </div>
     {% endif %}
 
     <!-- Additional Content -->
     {% if self.additional_content %}
-    <div class="row mb-5">
-        <div class="col-12">
-            {% for block in self.additional_content %}
-                {% if block.block_type == 'heading' %}
-                    <h2 class="border-bottom pb-2 mb-3">{{ block.value }}</h2>
-                {% elif block.block_type == 'paragraph' %}
-                    {{ block.value|richtext }}
-                {% elif block.block_type == 'image' %}
-                    {% image block.value width-800 as content_image %}
-                    <img class="img-fluid mb-4" src="{{ content_image.url }}" alt="">
-                {% elif block.block_type == 'quote' %}
-                    <figure class="border-start border-4 ps-4 my-4">
-                        <blockquote class="blockquote">
-                            <p>{{ block.value.quote }}</p>
-                        </blockquote>
-                        {% if block.value.attribution %}
-                        <figcaption class="blockquote-footer">
-                            {{ block.value.attribution }}
-                        </figcaption>
-                        {% endif %}
-                    </figure>
-                {% endif %}
-            {% endfor %}
+    <div class="about-section">
+        <div class="row mb-5">
+            <div class="col-12">
+                {% for block in self.additional_content %}
+                    {% if block.block_type == 'heading' %}
+                        <h2 class="section-title animate-fade-in-up">{{ block.value }}</h2>
+                    {% elif block.block_type == 'paragraph' %}
+                        <div class="animate-fade-in-up">
+                            {{ block.value|richtext }}
+                        </div>
+                    {% elif block.block_type == 'image' %}
+                        {% image block.value width-800 as content_image %}
+                        <div class="about-image mb-4 animate-fade-in-up">
+                            <img class="img-fluid w-100" src="{{ content_image.url }}" alt="">
+                        </div>
+                    {% elif block.block_type == 'quote' %}
+                        <div class="quote-card animate-fade-in-up">
+                            <blockquote class="blockquote mb-0">
+                                <p class="mb-3 fst-italic">{{ block.value.quote }}</p>
+                                {% if block.value.attribution %}
+                                <footer class="blockquote-footer">
+                                    {{ block.value.attribution }}
+                                </footer>
+                                {% endif %}
+                            </blockquote>
+                        </div>
+                    {% endif %}
+                {% endfor %}
+            </div>
         </div>
     </div>
     {% endif %}
+</div>
 {% endblock content %}