diff --git a/core/static/css/theme.css b/core/static/css/theme.css
new file mode 100644
index 0000000..734c714
--- /dev/null
+++ b/core/static/css/theme.css
@@ -0,0 +1,133 @@
+/* FEO GmbH Custom Bootstrap Theme
+ * An elegant, lightweight, and modern design
+ */
+
+:root {
+  --bs-primary: #72c02c;
+  --bs-primary-rgb: 114, 192, 44;
+}
+
+/* Override Bootstrap primary color */
+.btn-primary {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+  background-color: #65ab27;
+  border-color: #65ab27;
+}
+
+.btn-outline-primary {
+  color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.text-primary {
+  color: var(--bs-primary) !important;
+}
+
+.bg-primary {
+  background-color: var(--bs-primary) !important;
+}
+
+.border-primary {
+  border-color: var(--bs-primary) !important;
+}
+
+/* Navigation styling */
+.navbar {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.navbar-light .navbar-nav .nav-link {
+  color: #333;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  transition: color 0.3s ease;
+}
+
+.navbar-light .navbar-nav .nav-link:hover,
+.navbar-light .navbar-nav .nav-link:focus,
+.navbar-light .navbar-nav .active > .nav-link {
+  color: var(--bs-primary);
+}
+
+/* Card styling */
+.card {
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Button styling */
+.btn {
+  border-radius: 4px;
+  padding: 0.5rem 1.5rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+/* Footer styling */
+.footer {
+  background-color: #f8f9fa;
+  padding: 4rem 0;
+  border-top: 1px solid #eee;
+}
+
+.copyright {
+  background-color: #333;
+  color: white;
+  padding: 1.5rem 0;
+}
+
+.copyright a {
+  color: #ccc;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.copyright a:hover {
+  color: white;
+}
+
+/* Typography improvements */
+body {
+  font-family: 'Roboto', 'Segoe UI', sans-serif;
+  color: #333;
+  line-height: 1.6;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+/* Link styling */
+a {
+  color: var(--bs-primary);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+a:hover {
+  color: #65ab27;
+  text-decoration: underline;
+}
+
+/* Form controls */
+.form-control:focus {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+}
diff --git a/core/templates/bootstrap5_base.html b/core/templates/bootstrap5_base.html
index 3d54e6f..8c6c300 100644
--- a/core/templates/bootstrap5_base.html
+++ b/core/templates/bootstrap5_base.html
@@ -11,31 +11,19 @@
     <!-- Favicon -->
     <link rel="shortcut icon" href="{% static 'favicon.png' %}">
 
+    <!-- Google Fonts - Roboto -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+
     <!-- Bootstrap 5 CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Bootstrap Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
 
-    <!-- Custom CSS -->
-    <style>
-        .footer {
-            background-color: #f8f9fa;
-            padding: 3rem 0;
-        }
-        .copyright {
-            background-color: #212529;
-            color: white;
-            padding: 1rem 0;
-        }
-        .copyright a {
-            color: #adb5bd;
-            text-decoration: none;
-        }
-        .copyright a:hover {
-            color: white;
-        }
-    </style>
+    <!-- Custom Theme CSS -->
+    <link rel="stylesheet" href="{% static 'css/theme.css' %}">
 
     {% block extra_css %}
     {% endblock %}
@@ -65,9 +53,9 @@
 
         <!-- Breadcrumbs -->
         {% if not self.url == site_root.url %}
-            <div class="bg-light py-3">
+            <div class="bg-light py-4">
                 <div class="container">
-                    <h1 class="h2">{{ self.title }}</h1>
+                    <h1 class="h2 mb-3">{{ self.title }}</h1>
                     <nav aria-label="breadcrumb">
                         {% bootstrap5_breadcrumbs %}
                     </nav>
@@ -106,10 +94,10 @@
             <div class="container">
                 <div class="row">
                     <div class="col-md-4 mb-4 mb-md-0">
-                        <h2 class="h4 mb-3">FEO GmbH</h2>
+                        <h2 class="h4 mb-3 text-primary">FEO GmbH</h2>
                         <p class="mb-4">{% footer_about %}</p>
 
-                        <h2 class="h4 mb-3">Newsletter</h2>
+                        <h2 class="h4 mb-3 text-primary">Newsletter</h2>
                         {% footer_newsletter %}
                     </div>
 
@@ -118,7 +106,7 @@
                     </div>
 
                     <div class="col-md-4">
-                        <h2 class="h4 mb-3">Kontakt</h2>
+                        <h2 class="h4 mb-3 text-primary">Kontakt</h2>
                         <address>
                             <p>
                                 FEO Gesellschaft für Fortbildungs-<br>
@@ -131,12 +119,12 @@
                             </p>
                         </address>
 
-                        <h2 class="h4 mb-3">Stay Connected</h2>
+                        <h2 class="h4 mb-3 text-primary">Stay Connected</h2>
                         <div class="d-flex gap-2">
-                            <a href="https://www.linkedin.com/in/marion-s-a2b81152/" target="_blank" class="btn btn-outline-secondary">
+                            <a href="https://www.linkedin.com/in/marion-s-a2b81152/" target="_blank" class="btn btn-outline-primary">
                                 <i class="bi bi-linkedin"></i>
                             </a>
-                            <a href="https://www.xing.com/companies/feogesellschaftf%C3%BCrfortbildungs-undeventorganisationmbh" target="_blank" class="btn btn-outline-secondary">
+                            <a href="https://www.xing.com/companies/feogesellschaftf%C3%BCrfortbildungs-undeventorganisationmbh" target="_blank" class="btn btn-outline-primary">
                                 <i class="bi bi-x"></i>
                             </a>
                         </div>
diff --git a/core/templates/core/event_index_page.html b/core/templates/core/event_index_page.html
index 609ed38..92bd162 100644
--- a/core/templates/core/event_index_page.html
+++ b/core/templates/core/event_index_page.html
@@ -1,59 +1,174 @@
 {% extends "core/base.html" %}
 {% load core_tags menu_tags static wagtailuserbar wagtailcore_tags wagtailimages_tags %}
 
+{% block extra_css %}
+<style>
+    /* Timeline styling */
+    .timeline {
+        position: relative;
+        padding: 0;
+        list-style: none;
+    }
+
+    .timeline:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 40px;
+        width: 4px;
+        background-color: var(--bs-primary);
+    }
+
+    .timeline-item {
+        position: relative;
+        margin-bottom: 50px;
+    }
+
+    .timeline-badge {
+        position: absolute;
+        top: 0;
+        left: 40px;
+        width: 60px;
+        height: 60px;
+        margin-left: -30px;
+        border-radius: 50%;
+        text-align: center;
+        background-color: var(--bs-primary);
+        color: white;
+        z-index: 100;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        padding: 5px;
+    }
+
+    .timeline-badge-day {
+        font-size: 1.25rem;
+        font-weight: bold;
+        line-height: 1;
+    }
+
+    .timeline-badge-month {
+        font-size: 0.8rem;
+        text-transform: uppercase;
+        line-height: 1;
+    }
+
+    .timeline-month-header {
+        position: relative;
+        margin-bottom: 30px;
+        list-style: none;
+    }
+
+    .timeline-month-header h3 {
+        position: relative;
+        padding-left: 60px;
+        border-bottom: 2px solid var(--bs-primary);
+        padding-bottom: 10px;
+    }
+
+    .timeline-panel {
+        position: relative;
+        width: calc(100% - 90px);
+        float: right;
+        border-radius: 8px;
+    }
+
+    .timeline-panel:before {
+        content: '';
+        position: absolute;
+        top: 26px;
+        left: -15px;
+        border-top: 15px solid transparent;
+        border-right: 15px solid #fff;
+        border-bottom: 15px solid transparent;
+    }
+
+    .timeline-date {
+        display: block;
+        margin-bottom: 10px;
+        font-weight: bold;
+        color: var(--bs-primary);
+    }
+
+    @media (max-width: 767px) {
+        .timeline-badge {
+            margin-left: 0;
+        }
+    }
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="container">
-{% for event in self.get_events %}
-    <div class="card mb-4 border-0 shadow-sm">
-        <div class="card-header bg-light">
-            <div class="d-flex justify-content-between align-items-center">
-                <div>
-                    <span class="fs-5">{{ event.start_date|date:"SHORT_DATE_FORMAT" }}{% if event.end_date %} - {{ event.end_date|date:"SHORT_DATE_FORMAT" }}{% endif %}</span>
-                </div>
-                <div>
-                    <span class="text-muted">{{ event.start_date|date:"F Y" }}</span>
-                </div>
+    <ul class="timeline">
+        {% regroup self.get_events by start_date|date:"F Y" as events_by_month %}
+        {% for month_group in events_by_month %}
+        <li class="timeline-month-header">
+            <h3 class="text-primary mb-4">{{ month_group.grouper }}</h3>
+        </li>
+        {% for event in month_group.list %}
+        <li class="timeline-item clearfix">
+            <div class="timeline-badge">
+                <span class="timeline-badge-day">{{ event.start_date|date:"d" }}</span>
+                <span class="timeline-badge-month">{{ event.start_date|date:"b" }}</span>
             </div>
-        </div>
-        <div class="card-body">
-            <h3 class="card-title mb-3"><a href="{{ event.url }}" class="text-decoration-none">{{ event.title }}</a>
-                {% if event.subtitle %}<br><small class="text-muted">{{ event.subtitle }}</small>{% endif %}</h3>
-            <div class="row">
-                <div class="col-md-4 mb-3 mb-md-0">
-                    {% if event.img1_img %}
-                        {% image event.img1_img max-250x250 class="img-fluid rounded" %}
-                    {% endif %}
+            <div class="timeline-panel card border-0 shadow-sm">
+                <div class="card-header bg-light">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <span class="fs-5">{{ event.start_date|date:"SHORT_DATE_FORMAT" }}{% if event.end_date %} - {{ event.end_date|date:"SHORT_DATE_FORMAT" }}{% endif %}</span>
+                        </div>
+                        <div>
+                            <span class="text-muted">{{ event.start_date|date:"F Y" }}</span>
+                        </div>
+                    </div>
                 </div>
-                <div class="col-md-4 mb-3 mb-md-0">    
-                    <h5 class="mb-3">
-                    {{ event.start_date }}{% if event.end_date %} - {{ event.end_date }}{% endif %}
-                    </h5>
-                    {% if event.location_name %}
-                    <p>
-                    <strong>{{ event.location_name }}</strong><br>
-                    {% if event.location_street %}{{ event.location_street }}<br>{% endif %}
-                    {% if event.location_city %}{{ event.location_city }}{% endif %}
-                    </p>
-                    {% endif %}
+                <div class="card-body">
+                    <h3 class="card-title mb-3"><a href="{{ event.url }}" class="text-decoration-none">{{ event.title }}</a>
+                        {% if event.subtitle %}<br><small class="text-muted">{{ event.subtitle }}</small>{% endif %}</h3>
+                    <div class="row">
+                        <div class="col-md-4 mb-3 mb-md-0">
+                            {% if event.img1_img %}
+                                {% image event.img1_img max-250x250 class="img-fluid rounded" %}
+                            {% endif %}
+                        </div>
+                        <div class="col-md-4 mb-3 mb-md-0">    
+                            <h5 class="mb-3">
+                            {{ event.start_date }}{% if event.end_date %} - {{ event.end_date }}{% endif %}
+                            </h5>
+                            {% if event.location_name %}
+                            <p>
+                            <strong>{{ event.location_name }}</strong><br>
+                            {% if event.location_street %}{{ event.location_street }}<br>{% endif %}
+                            {% if event.location_city %}{{ event.location_city }}{% endif %}
+                            </p>
+                            {% endif %}
+                        </div>
+                        <div class="col-md-4"> 
+                            {% if event.is_registration_active %}
+                            <p> 
+                            <a class="btn btn-outline-primary w-100 mb-2" href="{{ event.url }}"><i class="bi bi-people"></i> Zur Anmeldung</a>
+                            </p>
+                            {% endif %}
+                            {% if event.flyer.url %}
+                            <p>
+                            <a class="btn btn-outline-primary w-100 mb-2" href="{{ event.flyer.url }}" target="_blank"><i class="bi bi-cloud-download"></i> Programm herunterladen</a>
+                            </p>
+                            {% endif %}
+                            <p> 
+                            <a class="btn btn-outline-primary w-100 mb-2" href="{{ event.url }}"><i class="bi bi-search"></i> Mehr Informationen</a>
+                            </p>
+                        </div>
+                    </div>        
                 </div>
-                <div class="col-md-4"> 
-                    {% if event.is_registration_active %}
-                    <p> 
-                    <a class="btn btn-outline-primary w-100 mb-2" href="{{ event.url }}"><i class="bi bi-people"></i> Zur Anmeldung</a>
-                    </p>
-                    {% endif %}
-                    {% if event.flyer.url %}
-                    <p>
-                    <a class="btn btn-outline-primary w-100 mb-2" href="{{ event.flyer.url }}" target="_blank"><i class="bi bi-cloud-download"></i> Programm herunterladen</a>
-                    </p>
-                    {% endif %}
-                    <p> 
-                    <a class="btn btn-outline-primary w-100 mb-2" href="{{ event.url }}"><i class="bi bi-search"></i> Mehr Informationen</a>
-                    </p>
-                </div>
-            </div>        
-        </div>
-    </div>
-    {% endfor %}
+            </div>
+        </li>
+        {% endfor %}
+        {% endfor %}
+    </ul>
 </div>
 {% endblock content %}
diff --git a/core/templates/core/includes/revolution_slider_slide.html b/core/templates/core/includes/revolution_slider_slide.html
deleted file mode 100644
index 93e4c81..0000000
--- a/core/templates/core/includes/revolution_slider_slide.html
+++ /dev/null
@@ -1,56 +0,0 @@
-{% load wagtailimages_tags %}
-<!-- SLIDE -->
-<li class="revolution-mch-1" data-transition="fade" data-slotamount="5" data-masterspeed="1000">
-<!-- MAIN IMAGE -->
-{% image img fill-2000x500 data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" %}
-
-{% if headline %}
-<div class="tp-caption revolution-ch1 sft start"
-    data-x="center"
-    data-hoffset="0"
-    data-y="100"
-    data-speed="1500"
-    data-start="500"
-    data-easing="Back.easeInOut"
-    data-endeasing="Power1.easeIn"                        
-    data-endspeed="300">
-    {{ headline }}
-</div>
-{% endif %}
-
-{% if subline %}
-<!-- LAYER -->
-<div class="tp-caption revolution-ch2 sft"
-    data-x="center"
-    data-hoffset="0"
-    data-y="190"
-    data-speed="1400"
-    data-start="2000"
-    data-easing="Power4.easeOut"
-    data-endspeed="300"
-    data-endeasing="Power1.easeIn"
-    data-captionhidden="off"
-    style="z-index: 6">
-    {{ subline }}
-</div>
-{% endif %}
-
-{% if link_url and link_text %}
-<!-- LAYER -->
-<div class="tp-caption sft"
-    data-x="center"
-    data-hoffset="0"
-    data-y="310"
-    data-speed="1600"
-    data-start="2800"
-    data-easing="Power4.easeOut"
-    data-endspeed="300"
-    data-endeasing="Power1.easeIn"
-    data-captionhidden="off"
-    style="z-index: 6">
-    <a href="{{ link_url }}" class="btn-u btn-brd btn-brd-hover btn-u-light">{{ link_text }}</a>
-</div>
-{% endif %}
-</li>
-<!-- END SLIDE -->
-
diff --git a/core/templates/core/tags/bootstrap5_breadcrumbs.html b/core/templates/core/tags/bootstrap5_breadcrumbs.html
index c029061..a89da28 100644
--- a/core/templates/core/tags/bootstrap5_breadcrumbs.html
+++ b/core/templates/core/tags/bootstrap5_breadcrumbs.html
@@ -1,12 +1,12 @@
 {% load wagtailcore_tags %}
 
 {% if ancestors %}
-  <ol class="breadcrumb mb-0">
+  <ol class="breadcrumb mb-0 py-2">
     {% for ancestor in ancestors %}
       {% if forloop.last %}
         <li class="breadcrumb-item active" aria-current="page">{{ ancestor }}</li>
       {% else %}
-        <li class="breadcrumb-item"><a href="{% pageurl ancestor %}">{{ ancestor }}</a></li>
+        <li class="breadcrumb-item"><a href="{% pageurl ancestor %}" class="text-decoration-none">{{ ancestor }}</a></li>
       {% endif %}
     {% endfor %}
   </ol>
diff --git a/core/templates/core/tags/bootstrap5_top_menu.html b/core/templates/core/tags/bootstrap5_top_menu.html
index a31a9ea..6b709f2 100644
--- a/core/templates/core/tags/bootstrap5_top_menu.html
+++ b/core/templates/core/tags/bootstrap5_top_menu.html
@@ -1,7 +1,7 @@
 {% load menu_tags wagtailcore_tags static %}
 {% get_site_root as site_root %}
 
-<nav class="navbar navbar-expand-lg navbar-light bg-white">
+<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
     <div class="container">
         <a class="navbar-brand" href="{{ site_root.url }}">
             <img src="{% static 'img/logo_feo.png' %}" alt="Logo FEO GmbH" height="60">
@@ -14,14 +14,14 @@
                 {% for menuitem in menuitems %}
                     {% if menuitem.show_dropdown %}
                         <li class="nav-item dropdown{% if menuitem.active %} active{% endif %}">
-                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown{{ forloop.counter }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            <a class="nav-link dropdown-toggle{% if menuitem.active %} text-primary{% endif %}" href="#" id="navbarDropdown{{ forloop.counter }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                 {{ menuitem.title }}
                             </a>
                             {% bootstrap5_top_menu_children parent=menuitem %}
                         </li>
                     {% else %}
                         <li class="nav-item{% if menuitem.active %} active{% endif %}">
-                            <a class="nav-link" href="{% pageurl menuitem %}">{{ menuitem.title }}</a>
+                            <a class="nav-link{% if menuitem.active %} text-primary{% endif %}" href="{% pageurl menuitem %}">{{ menuitem.title }}</a>
                         </li>
                     {% endif %}
                 {% endfor %}
diff --git a/core/templates/core/tags/bootstrap5_top_menu_children.html b/core/templates/core/tags/bootstrap5_top_menu_children.html
index 8910725..cb76aea 100644
--- a/core/templates/core/tags/bootstrap5_top_menu_children.html
+++ b/core/templates/core/tags/bootstrap5_top_menu_children.html
@@ -1,9 +1,9 @@
 {% load menu_tags wagtailcore_tags %}
 
-<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+<ul class="dropdown-menu shadow-sm border-0" aria-labelledby="navbarDropdown">
     {# Include link to parent because the parent link is a drop down #}
     <li><a class="dropdown-item" href="{% pageurl parent %}">{{ parent.title }}</a></li>
     {% for child in menuitems_children %}
-        <li><a class="dropdown-item{% if child.active %} active{% endif %}" href="{% pageurl child %}">{{ child.title }}</a></li>
+        <li><a class="dropdown-item{% if child.active %} active text-primary{% endif %}" href="{% pageurl child %}">{{ child.title }}</a></li>
     {% endfor %}
 </ul>