diff --git a/changelog/_8766.md b/changelog/_8766.md
new file mode 100644
index 0000000000..1642b56440
--- /dev/null
+++ b/changelog/_8766.md
@@ -0,0 +1,10 @@
+### Added
+- create project information page
+- hero component
+- contact snippets
+
+### Removed
+- image with aside (replaced with hero)
+
+### Changed
+- plan and project detail pages
\ No newline at end of file
diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/components/hero.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/components/hero.html
new file mode 100644
index 0000000000..38e19b7cdd
--- /dev/null
+++ b/meinberlin/apps/contrib/templates/meinberlin_contrib/components/hero.html
@@ -0,0 +1,48 @@
+{% load i18n thumbnail %}
+
+<article class="hero {{ extra_class|default:'' }}">
+  <div class="hero__container">
+    <div class="hero__content">
+        <h1 class="hero__title">
+          {% if show_buttons %}
+              <a href="{{ hero_link }}" class="hero__title-link">{{ content.name }}</a>
+          {% else %}
+              {{ content.name }}
+          {% endif %}
+        </h1>
+        <div class="hero__description">
+          <p>{{ content.description|safe }}</p>
+          {% if content.image_copyright %}
+            <p class="hero__image-copyright">{% translate "Image" %}: {{ content.image_copyright }}</p>
+          {% endif %}
+        </div>
+
+        {% if show_buttons %}
+            <div class="hero__buttons">
+              <a href="{{ hero_link }}" class="button button--light">
+                {% translate "More information" %}
+              </a>
+              {% load react_follows %}
+              {% react_follows project %}
+            </div>
+        {% endif %}
+    </div>
+
+    <div class="hero__media">
+      <figure class="hero__figure">
+        {% if show_buttons %}
+            <a href="{{ hero_link }}">
+        {% endif %}
+        <img
+          class="hero__image"
+          src="{{ content.image|thumbnail_url:'heroimage' }}"
+          alt="{{ content.image_alt_text|default:_('Here you can find a decorative picture.') }}"
+          loading="lazy"
+        />
+      </figure>
+      {% if show_buttons %}
+          </a>
+      {% endif %}
+    </div>
+  </div>
+</article>
\ No newline at end of file
diff --git a/meinberlin/apps/plans/models.py b/meinberlin/apps/plans/models.py
index 51b0b27531..f4ef853521 100644
--- a/meinberlin/apps/plans/models.py
+++ b/meinberlin/apps/plans/models.py
@@ -43,6 +43,11 @@ class Plan(ProjectContactDetailMixin, UserGeneratedContentModel):
         max_length=120,
         verbose_name=_("Title of your plan"),
     )
+
+    @property
+    def name(self):
+        return self.title
+
     organisation = models.ForeignKey(
         settings.A4_ORGANISATIONS_MODEL,
         on_delete=models.CASCADE,
diff --git a/meinberlin/apps/plans/templates/meinberlin_plans/plan_detail.html b/meinberlin/apps/plans/templates/meinberlin_plans/plan_detail.html
index 89aed204d5..2c6d3c7a19 100644
--- a/meinberlin/apps/plans/templates/meinberlin_plans/plan_detail.html
+++ b/meinberlin/apps/plans/templates/meinberlin_plans/plan_detail.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n static rules wagtailcore_tags maps_tags thumbnail ckeditor_tags contrib_tags %}
+{% load i18n static rules wagtailcore_tags maps_tags thumbnail ckeditor_tags contrib_tags plan_tags %}
 
 {% block title %}{{ object.title }} – {{ block.super }}{% endblock title %}
 
@@ -42,42 +42,9 @@
 
 {% block content %}
 <div id="layout-grid__area--maincontent">
-    <section class="herounit-image-with-aside fullwidth">
-        <div class="mainbar">
-            <div class="mainbar__left">
-                {% if object.image %}
-                    <div class="image">
-                        <div class="image__image">
-                            <img src="{{ object.image | thumbnail_url:"heroimage" }}" alt="{% if object.image_alt_text %}{{ object.image_alt_text }}{% else %}{% translate "Here you can find a decorative picture." %}{% endif %}" width="100%" height="auto" loading="lazy"/>
-                        </div>
-                    </div>
-                {% endif %}
-            </div>
-            <div class="mainbar__right">
-                <div class="panel--heavy panel--remove-inner-panels flex--stretch-inner __py-0__">
-                    <ul class="pill__list pill__list--inline herounit-image-with-aside__pills">
-                        <li class="pill pill--label">{% translate "Plan" %}</li>
-                        {% for topic in object.topic_names %}
-                            <li class="pill pill--topic">{{ topic }}</li>
-                        {% endfor %}
-                    </ul>
-
-                    <h1 class="title herounit-image-with-aside__title">{{ object.title }}</h1>
-                    <div class="herounit-image-with-aside__description">
-                        <p>{{ object.point_label }}</p>
-                        
-                        <p class="herounit-image-with-aside__copyright">
-                            {% if object.image_copyright %}
-                                {% translate "Image" %}: {{ object.image_copyright }}
-                            {% else %}
-                                {% translate "Image: copyright missing" %}
-                            {% endif %}
-                        </p>   
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
+    {% modify_hero_content object as modified_content %}
+    {% include 'meinberlin_contrib/components/hero.html' with content=modified_content show_buttons=False extra_class="hero--plan" %}
+
     <article class="item-detail">
         {% has_perm 'meinberlin_plans.change_plan' request.user object as user_may_change %}
         {% if user_may_change %}
@@ -157,58 +124,12 @@ <h1 class="title herounit-image-with-aside__title">{{ object.title }}</h1>
             </div>
         {% endif %}
 
-        {% if object.contact_name or object.contact_address_text or object.contact_email or object.contact_phone or object.contact_url or object.organisation.address or object.organisation.url %}
-            <div class="item-detail__contacts">
-            {% if object.contact_name or object.contact_address_text or object.contact_email or object.contact_phone or object.contact_url %}
-                <div class="item-detail__contact">
-                    <h2 class="item-detail__contact-title">{% translate 'Contact for questions' %}</h2>
-                    <address>
-                        {% if object.contact_name %}
-                        <p>{{ object.contact_name }}</p>
-                        {% endif %}
-                        {% if object.contact_address_text %}
-                            <p>{{ object.contact_address_text|linebreaks }}</p>
-                        {% endif %}
-                        {% if object.contact_phone %}
-                            <p><strong>{% translate 'Telephone' %}: </strong>{{ object.contact_phone }}</p>
-                        {% endif %}
-                        {% if object.contact_email %}
-                            <p>
-                                <a href="mailto:{{ object.contact_email }}">
-                                    {% translate 'Email' %}
-                                </a>
-                            </p>
-                        {% endif %}
-                        {% if object.contact_url %}
-                            <p>
-                                <a target="_blank" href="{{ object.contact_url }}">
-                                    {% translate 'Website' %}
-                                </a>
-                            </p>
-                        {% endif %}
-                    </address>
-                </div>
-            {% endif %}
-
-            {% if object.organisation.address or object.organisation.url %}
-                <div class="item-detail__contact">
-                    <h2 class="item-detail__contact-title">{% translate 'Responsible body' %}</h2>
-                    <address>
-                        {% if object.organisation.address %}
-                        <p>{{ object.organisation.name }}</p>
-                        <p>{{ object.organisation.address|linebreaks }}</p>
-                        {% endif %}
-                        {% if object.organisation.url %}
-                            <p>
-                                <a target="_blank" href="{{ object.organisation.url }}">
-                                    {% translate 'Website' %}
-                                </a>
-                            </p>
-                        {% endif %}
-                    </address>
-                </div>
-            {% endif %}
-            </div>
+        {% if object.has_any_contact_info %}
+            <section class="flexgrid grid--2 mb-3" aria-labelledby="contact-title">
+            <h2>{% trans 'Contact Information' %}</h2>
+            {% include 'meinberlin_projects/includes/contact_person.html' with contact=object only %}
+            {% include 'meinberlin_projects/includes/contact_organization.html' with organization=object.organisation only %}
+            </section>
         {% endif %}
     </article>
 
diff --git a/meinberlin/apps/plans/templatetags/plan_tags.py b/meinberlin/apps/plans/templatetags/plan_tags.py
new file mode 100644
index 0000000000..203c520d9b
--- /dev/null
+++ b/meinberlin/apps/plans/templatetags/plan_tags.py
@@ -0,0 +1,13 @@
+from django import template
+
+register = template.Library()
+
+@register.simple_tag
+def modify_hero_content(content):
+    """Creates a modified copy of the content object with point_label as description"""
+    # Create a copy of the object to avoid modifying the original
+    from copy import copy
+    modified_content = copy(content)
+    # Override the description with point_label
+    modified_content.description = content.point_label
+    return modified_content
\ No newline at end of file
diff --git a/meinberlin/apps/projects/templates/meinberlin_projects/includes/contact_organization.html b/meinberlin/apps/projects/templates/meinberlin_projects/includes/contact_organization.html
new file mode 100644
index 0000000000..6331535ff8
--- /dev/null
+++ b/meinberlin/apps/projects/templates/meinberlin_projects/includes/contact_organization.html
@@ -0,0 +1,20 @@
+{% load i18n %}
+
+{% if organization %}
+  <div class="modul-contact">
+    <h3 id="responsible-body">{% trans 'Responsible body' %}</h3>
+    <address aria-labelledby="responsible-body" class="mt-2">
+      <p>{{ organization.name }}</p>
+
+      {% if organization.address %}
+        <p>{{ organization.address|linebreaksbr }}</p>
+      {% endif %}
+      
+      {% if organization.url %}
+      <p>{% trans "Website" %}: 
+         <a href="{{ organization.url }}" target="_blank" rel="noopener noreferrer">{{ organization.url }}</a>
+      </p>
+    {% endif %}
+    </address>
+  </div>
+{% endif %}
\ No newline at end of file
diff --git a/meinberlin/apps/projects/templates/meinberlin_projects/includes/contact_person.html b/meinberlin/apps/projects/templates/meinberlin_projects/includes/contact_person.html
new file mode 100644
index 0000000000..a97e5da1b2
--- /dev/null
+++ b/meinberlin/apps/projects/templates/meinberlin_projects/includes/contact_person.html
@@ -0,0 +1,22 @@
+{% load i18n %}
+
+{% if contact.has_contact_details %}
+<div class="modul-contact">
+    <h3 id="contact-questions">{% trans "Contact for questions" %}</h3>
+    <address aria-labelledby="contact-questions" class="mt-2">
+      <p>{{ contact.contact_name }}</p>
+      
+      {% if contact.contact_email %}
+        <p>{% trans "Email" %}: 
+           <a href="mailto:{{ contact.contact_email }}" aria-label="{% trans 'Email' %} {{ contact.contact_name }}">{{ contact.contact_email }}</a>
+        </p>
+      {% endif %}
+      
+      {% if contact.contact_phone %}
+        <p>{% trans "Phone" %}: 
+           <a href="tel:{{ contact.contact_phone }}" aria-label="{% trans 'Call' %} {{ contact.contact_name }}">{{ contact.contact_phone }}</a>
+        </p>
+      {% endif %}
+    </address>
+  </div>
+{% endif %}
diff --git a/meinberlin/apps/projects/templates/meinberlin_projects/project_detail.html b/meinberlin/apps/projects/templates/meinberlin_projects/project_detail.html
index c3b432fe92..e37fb074f6 100644
--- a/meinberlin/apps/projects/templates/meinberlin_projects/project_detail.html
+++ b/meinberlin/apps/projects/templates/meinberlin_projects/project_detail.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n rules react_follows thumbnail wagtailcore_tags meinberlin_project_tags offlineevent_tags contrib_tags ckeditor_tags static %}
+{% load i18n rules thumbnail wagtailcore_tags meinberlin_project_tags offlineevent_tags contrib_tags ckeditor_tags static %}
 
 {% block extra_js %}
   {{ block.super }}
@@ -29,152 +29,10 @@
 {% endblock breadcrumbs %}
 
 {% block content %}
-  <!-- FIXME according to the marketing verticle the herounit should be before the maincontent however the styling for this here is nested within maincontent
-  assume this will may be updated at somepoint  -->
-  <div id="layout-grid__area--maincontent">
-    <section class="herounit-image-with-aside fullwidth">
-      <div class="mainbar">
-        <div class="mainbar__left">
-          <div class="image">
-            <div class="image__image">
-                        <img src="{{ project.image | thumbnail_url:"heroimage" }}" alt="{% if project.image_alt_text %}{{ project.image_alt_text }}{% else %}{% translate "Here you can find a decorative picture." %}{% endif %}" width="100%" height="auto" loading="lazy"/>
-            </div>
-          </div>
-        </div>
-        <div class="mainbar__right">
-          <div class="panel--heavy panel--remove-inner-panels flex--stretch-inner __py-0__">
-            <h1 class="title herounit-image-with-aside__title">{{ project.name }}</h1>
-            <div class="herounit-image-with-aside__description">
-              <p>{{ project.description }}</p>
-              {% if project.image_copyright %}
-                <p class="herounit-image-with-aside__copyright">
-                  {% translate "Image" %}: {{ project.image_copyright }}
-                </p>
-              {% else %}
-                <p class="herounit-image-with-aside__copyright">
-                  {% translate "Image: copyright missing" %}
-                </p>
-              {% endif %}
-            </div>
-            <!-- Follow btn -->
-            <div class="follow__container">
-              {% react_follows project %}
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    <div class="tabnavigation js-tabs">
-      <div class="row row--reverse-palm">
-        {% has_perm 'a4projects.change_project' request.user view.project as user_may_change %}
-        {% if user_may_change %}
-          <div class="tabnavigation--right">
-            <a class="tabnavigation__link" href="{% url 'a4dashboard:project-edit' project_slug=project.slug %}">
-              {% translate "Edit" %}
-            </a>
-          </div>
-        {% endif %}
-        <ul
-          class="tabnavigation--left"
-          role="tablist"
-          aria-label='{% translate "Project Details Navigation" %}'
-        >
-          <li>
-            <button
-              id="tab-project-{{ project.pk }}-information"
-              class="tabnavigation__button"
-              type="button"
-              role="tab"
-              aria-selected="false"
-              aria-controls="tabpanel-project-{{ project.pk }}-information"
-              tabindex="-1">
-              {% translate "Information" %}
-            </button>
-          </li>
-
-          <li>
-            <button
-              id="tab-project-{{ project.pk }}-participation"
-              class="tabnavigation__button"
-              type="button"
-              role="tab"
-              aria-selected="true"
-              aria-controls="tabpanel-project-{{ project.pk }}-participation">
-              {% translate "Participation" %}
-            </button>
-          </li>
-          <li>
-            <button
-              id="tab-project-{{ project.pk }}-result"
-              class="tabnavigation__button"
-              type="button"
-              role="tab"
-              aria-selected="false"
-              aria-controls="tabpanel-project-{{ project.pk }}-result"
-              tabindex="-1">
-              {% translate "Results" %}
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <section
-      id="tabpanel-project-{{ project.pk }}-information"
-      class="tabpanel"
-      role="tabpanel"
-      aria-expanded="false"
-      aria-hidden="true"
-      aria-labelledby="tab-project-{{ project.pk }}-information">
-      <h2 class="mt-0">{% translate "Information" %}</h2>
-      <div class="ck-content">
-        {{ project.information | transform_collapsibles | disable_iframes | richtext }}
-      </div>
-      {% if project.contact_name or project.contact_address_text or project.contact_email or project.contact_phone or project.contact_url or project.organisation.address or project.organisation.url %}
-        {% if project.contact_name or project.contact_address_text or project.contact_email or project.contact_phone or project.contact_url %}
-          <div>
-            <h3>{% translate "Contact for questions" %}</h3>
-            <address>
-              {% if project.contact_name %}
-                <p>{{ project.contact_name }}</p>
-              {% endif %}
-              {% if project.contact_address_text %}
-                <p>{{ project.contact_address_text|linebreaks }}</p>
-              {% endif %}
-              {% if project.contact_phone %}
-                        <p><strong>{% translate "Telephone" %}: </strong>{{ project.contact_phone }}</p>
-              {% endif %}
-              {% if project.contact_email %}
-                <a class="btn btn--secondary" href="mailto:{{ project.contact_email }}">
-                  {% translate "Email" %}
-                </a>
-              {% endif %}
-              {% if project.contact_url %}
-                <a class="btn btn--secondary" target="_blank" href="{{ project.contact_url }}">
-                  {% translate "Website" %}
-                </a>
-              {% endif %}
-            </address>
-          </div>
-        {% endif %}
+<div class="layout-grid__area--maincontent">
+    {% url 'project-information' slug=project.slug as info_page %}
+    {% include 'meinberlin_contrib/components/hero.html' with content=project show_buttons=True hero_link=info_page %}
 
-        {% if project.organisation.address or project.organisation.url %}
-          <div>
-            <h3>{% translate "Responsible body" %}</h3>
-            <address>
-              {% if project.organisation.address %}
-                <p>{{ project.organisation.name }}</p>
-                <p>{{ project.organisation.address|linebreaks }}</p>
-              {% endif %}
-              {% if project.organisation.url %}
-                <a class="btn btn--secondary" target="_blank" href="{{ project.organisation.url }}">
-                  {% translate "Website" %}
-                </a>
-              {% endif %}
-            </address>
-          </div>
-        {% endif %}
-      {% endif %}
-    </section>
     <section
       id="tabpanel-project-{{ project.pk }}-participation"
       class="tabpanel"
diff --git a/meinberlin/apps/projects/templates/meinberlin_projects/project_information.html b/meinberlin/apps/projects/templates/meinberlin_projects/project_information.html
new file mode 100644
index 0000000000..0c96e0ee73
--- /dev/null
+++ b/meinberlin/apps/projects/templates/meinberlin_projects/project_information.html
@@ -0,0 +1,59 @@
+{% extends 'base.html' %}
+{% load i18n %}
+
+{% block title %}
+  {{ project.name }} -{% trans 'Information' %}
+{% endblock title %}
+
+{% block extra_messages %}
+  {{ block.super }}
+
+  {% if project.is_draft %}
+    {% include 'meinberlin_contrib/components/info-box.html' with info_message='This project has not yet been published.' %}
+  {% endif %}
+{% endblock extra_messages %}
+
+{% block breadcrumbs %}
+  <div id="content-header">
+    <nav class="breadcrumb" aria-label="{% trans 'Breadcrumb' %}">
+      <ol>
+        {% for crumb in breadcrumbs %}
+          {% if not forloop.last %}
+            <li>
+              <a href="{{ crumb.url }}">{{ crumb.title }}</a>
+            </li>
+          {% else %}
+            <li aria-current="page">{{ crumb.title }}</li>
+          {% endif %}
+        {% endfor %}
+      </ol>
+    </nav>
+  </div>
+{% endblock breadcrumbs %}
+
+{% block content %}
+  <div class="layout-grid__area--maincontent">
+    <article>
+      <header>
+        <h1>{% trans 'Project Information' %}</h1>
+      </header>
+
+      <section aria-labelledby="description-title">
+        <h2 id="description-title">
+          <span class="aural">{% trans 'Project Description' %}</span>
+          {{ project.name }}
+        </h2>
+        <div>{{ project.information|safe }}</div>
+      </section>
+
+      {% if project.has_any_contact_info %}
+        <hr aria-hidden="true" />
+        <section class="flexgrid grid--2 mb-3" aria-labelledby="contact-title">
+          <h2>{% trans 'Contact Information' %}</h2>
+          {% include 'meinberlin_projects/includes/contact_person.html' with contact=project only %}
+          {% include 'meinberlin_projects/includes/contact_organization.html' with organization=project.organisation only %}
+        </section>
+      {% endif %}
+    </article>
+  </div>
+{% endblock content %}
diff --git a/meinberlin/apps/projects/urls.py b/meinberlin/apps/projects/urls.py
index 9e3fc79bfd..f8a4fab642 100644
--- a/meinberlin/apps/projects/urls.py
+++ b/meinberlin/apps/projects/urls.py
@@ -33,4 +33,9 @@
         views.ModuleDetailview.as_view(),
         name="module-detail",
     ),
+    re_path(
+        r"^(?P<slug>[-\w_]+)/information/$",
+        views.ProjectInformationView.as_view(),
+        name="project-information",
+    ),
 ]
diff --git a/meinberlin/apps/projects/views.py b/meinberlin/apps/projects/views.py
index cc276f6b9d..190d12dd6b 100644
--- a/meinberlin/apps/projects/views.py
+++ b/meinberlin/apps/projects/views.py
@@ -384,3 +384,29 @@ def get_context_data(self, **kwargs):
         if "module" not in kwargs:
             kwargs["module"] = self.module
         return super().get_context_data(**kwargs)
+
+
+class ProjectInformationView(PermissionRequiredMixin, generic.DetailView):
+    model = models.Project
+    template_name = 'meinberlin_projects/project_information.html'
+    permission_required = 'a4projects.view_project'
+    
+    def get_permission_object(self):
+        return self.get_object()
+        
+    @cached_property
+    def project(self):
+        return self.get_object()
+        
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context['project'] = self.project
+        # TODO: Refactor breadcrumbs to use a global dynamic system to avoid redundancy 
+        # and ensure better maintainability. Consider moving to a context processor or view mixin.
+        context['breadcrumbs'] = [
+            {'title': _('meinBerlin'), 'url': '/'},
+            {'title': _('Kiezradar'), 'url': '/kiezradar/'},
+            {'title': self.project.name, 'url': self.project.get_absolute_url()},
+            {'title': _('Project Information'), 'url': '#'}
+        ]
+        return context
\ No newline at end of file
diff --git a/meinberlin/assets/scss/components_user_facing/_hero.scss b/meinberlin/assets/scss/components_user_facing/_hero.scss
new file mode 100644
index 0000000000..449cc2174b
--- /dev/null
+++ b/meinberlin/assets/scss/components_user_facing/_hero.scss
@@ -0,0 +1,104 @@
+.hero {
+  width: 100%;
+  background-color: $gray-lightest;
+}
+
+.hero__container {
+  max-width: 980px;
+  min-height: 352px;
+  margin: 0 auto;
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.hero__content {
+  width: 100%;
+  padding: 1rem;
+}
+
+.hero__title {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.hero__title-link {
+  color: $text-base!important;
+}
+
+.hero__image-copyright {
+  font-size: 0.8em;
+  color: $text-light;
+}
+
+.hero__media {
+  width: 100%;
+  aspect-ratio: 3/2;
+}
+
+.hero__figure {
+  margin: 0;
+  height: 100%;
+}
+
+.hero__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero__buttons {
+  display: flex;
+
+  .button {
+    margin-right: 0.5em;
+    text-decoration: none!important;
+  }
+}
+
+// Adjust margin to prevent content from touching the edge at specific screen sizes
+@media (min-width: $breakpoint-tablet) and (max-width: $breakpoint-desktop) {
+  .hero__content {
+    margin-left: 2em;
+  }
+}
+
+@media (min-width: $breakpoint-tablet) {
+  .hero {
+    width: 100vw;
+    height: 352px;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    border-top: 1px solid $gray-lighter;
+  }
+
+  .hero--plan {
+    margin-top: -40px!important; // used to make up for parent container top margin which creates a gap
+  }
+
+  .hero__container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .hero__content {
+    width: 50%;
+    padding: 2em 0;
+  }
+
+  .hero__description {
+    max-width: 400px;
+  }
+
+  .hero__media {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    width: 50vw;
+    aspect-ratio: auto;
+  }
+}
\ No newline at end of file
diff --git a/meinberlin/assets/scss/components_user_facing/_herounit_image_with_aside.scss b/meinberlin/assets/scss/components_user_facing/_herounit_image_with_aside.scss
deleted file mode 100644
index 40d84e1382..0000000000
--- a/meinberlin/assets/scss/components_user_facing/_herounit_image_with_aside.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.herounit-image-with-aside {
-  margin-top: -40px!important;
-}
-
-.herounit-image-with-aside__title {
-  margin-bottom: 0.4em;
-  max-width: 300px;
-
-  @media (min-width: $breakpoint-tablet) {
-      margin-top: 0.6em !important;
-  }
-}
-
-.herounit-image-with-aside__description {
-  max-width: 300px;
-  margin-bottom: 2em;
-
-  p {
-      margin-bottom: 0.7em;
-  }
-
-  @media (min-width: $breakpoint-tablet) {
-      margin-bottom: 0;
-  }
-}
-
-.herounit-image-with-aside__copyright {
-  font-size: 0.8em;
-  color: $text-light;
-}
-
-.herounit-image-with-aside__pills.pill__list {
-  margin-bottom: 0.5rem;
-
-  @media screen and (min-width: $breakpoint-tablet) {
-    margin-bottom: -0.5rem;
-  }
-}
diff --git a/meinberlin/assets/scss/components_user_facing/adhocracy4/_a4-follow.scss b/meinberlin/assets/scss/components_user_facing/adhocracy4/_a4-follow.scss
index 809c7d018a..ec3129e2d6 100644
--- a/meinberlin/assets/scss/components_user_facing/adhocracy4/_a4-follow.scss
+++ b/meinberlin/assets/scss/components_user_facing/adhocracy4/_a4-follow.scss
@@ -1,20 +1,10 @@
-.follow__container > span {
-    width: 100%;
-}
-
-// BO overwrites
 .a4-btn--follow,
 .a4-btn--following {
     @extend .button;
     @extend .button--fullwidth-palm;
-}
-
-.a4-btn--follow:after {
-    content: "\f067"; // plus sign
-}
-
-.a4-btn--following:after {
-    content: "\f00c"; // check mark
+    @extend .button--light;
+    @extend .button--fulltone;
+    color: $text-inverted !important;
 }
 
 // we do not display alert in mB
@@ -22,8 +12,16 @@
     display: none;
 }
 
-.follow__container {
-    display: flex;
-    align-items: end;
-    margin-bottom: 2 * $spacer;
+.a4-follow__btn--content::after {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    margin-left: 8px;
+}
+
+.a4-btn--follow .a4-follow__btn--content::after {
+    content: "\f067"; // fa-plus icon
 }
+
+.a4-btn--following .a4-follow__btn--content::after {
+    content: "\f00c"; // fa-check icon
+}
\ No newline at end of file
diff --git a/meinberlin/assets/scss/style_user_facing.scss b/meinberlin/assets/scss/style_user_facing.scss
index 6780f39646..ebd93f565d 100644
--- a/meinberlin/assets/scss/style_user_facing.scss
+++ b/meinberlin/assets/scss/style_user_facing.scss
@@ -32,7 +32,7 @@
 @import "components_user_facing/details";
 @import "components_user_facing/dropdown";
 @import "components_user_facing/form-submit-flex-end";
-@import "components_user_facing/herounit_image_with_aside";
+@import "components_user_facing/hero";
 @import "components_user_facing/info-box";
 @import "components_user_facing/infographic_footer";
 @import "components_user_facing/input";
diff --git a/meinberlin/assets/scss/styles_user_facing/_utility.scss b/meinberlin/assets/scss/styles_user_facing/_utility.scss
index 1c5fba6678..fd8c563bac 100644
--- a/meinberlin/assets/scss/styles_user_facing/_utility.scss
+++ b/meinberlin/assets/scss/styles_user_facing/_utility.scss
@@ -42,6 +42,10 @@
     margin-top: 0.5em;
 }
 
+.mt-2 {
+    margin-top: 1em;
+}
+
 .mb-1 {
     margin-bottom: .5em;
 }
diff --git a/meinberlin/templates/base.html b/meinberlin/templates/base.html
index e3729136e4..9225fe919b 100644
--- a/meinberlin/templates/base.html
+++ b/meinberlin/templates/base.html
@@ -51,7 +51,7 @@
       {% include "header.html" %}
     {% endblock header %}
     <!-- FIXME we don't currently want their grid in dashboard however this does not work if someone names wagtail, project or plan page 'dashboard' -->
-    <main role="main" tabindex="-1" {% if '/dashboard' not in request.path or '/components' not in request.path %} id="layout-grid" {% endif %}>
+    <main tabindex="-1" {% if '/dashboard' not in request.path or '/components' not in request.path %} id="layout-grid" {% endif %}>
         <div id="layout-grid__area--contentheader">
             {% block breadcrumbs %}{% endblock breadcrumbs %}
         </div>
@@ -60,7 +60,6 @@
             {% for message in messages %}
                 {% include 'meinberlin_contrib/components/alert.html' with alert_message=message|stringformat:"s" alert_headline=message.level_headline alert_type=message.level_tag %}
             {% endfor %}
-
         {% endif %}
 
         {% block extra_messages %}{% endblock extra_messages %}
@@ -70,8 +69,8 @@
         {% endblock super_content %}
 
         {% wagtailuserbar %}
-
     </main>
+
     {% block footer %}
       {% include "footer.html" %}
     {% endblock footer %}