diff --git a/assets/styles/_root.scss b/assets/styles/_root.scss
index dbeafd53b6..c51239d9b6 100644
--- a/assets/styles/_root.scss
+++ b/assets/styles/_root.scss
@@ -154,7 +154,7 @@
         --#{$prefix}#{$color}-border-subtle: #{$value};
     }
 
-    //--#{$prefix}heading-color: #{$headings-color-dark};
+    --#{$prefix}heading-color: #{$headings-color-dark};
 
     --#{$prefix}code-color: #{$code-color-dark};
     //--#{$prefix}highlight-color: #{$mark-color-dark};
diff --git a/assets/styles/_variables.scss b/assets/styles/_variables.scss
index 0a3bc2c897..a7d79985f5 100644
--- a/assets/styles/_variables.scss
+++ b/assets/styles/_variables.scss
@@ -24,6 +24,10 @@ $background-gray-dark: #131315;
 $title-size-small: 1.125rem;
 
 // Overrides
+// Badges: fully pill-shaped and a slightly lighter weight, site-wide.
+$badge-border-radius: $border-radius-pill;
+$badge-font-weight: 600;
+
 $body-bg-dark: #0E0E11;
 $body-color: $gewis-gray-dark;
 $body-color-dark: $gewis-gray-light;
@@ -39,6 +43,10 @@ $border-color-translucent: rgba($gray-500, .175);
 $display-font-family: "Raleway", sans-serif;
 
 $headings-margin-bottom: 0;
+// Headings are heavier and higher-contrast than body text: full black in light mode, white in gewis-night.
+$headings-font-weight: 600;
+$headings-color: $black;
+$headings-color-dark: $white;
 
 $link-color: $gewis-red;
 $link-decoration: none;
diff --git a/assets/styles/components/_activity.scss b/assets/styles/components/_activity.scss
index 880b8d72c1..d28ba46253 100644
--- a/assets/styles/components/_activity.scss
+++ b/assets/styles/components/_activity.scss
@@ -53,3 +53,91 @@
         margin-bottom: 0;
     }
 }
+
+// Activity overview list items reuse the shared .panel, but with a calmer, flatter surface than the default panel: the
+// body background plus a border, so a long dense list reads as separated rows rather than a stack of filled cards. The
+// selector is `.panel.panel-surface` (specificity 0,2,0) on purpose: _activity.scss is imported before _panel.scss, so
+// a single-class modifier would lose the source-order tie to `.panel { --bs-panel-bg }`.
+.panel.panel-surface {
+    --#{$prefix}panel-bg: var(--#{$prefix}body-bg);
+
+    transition: background-color $transition-duration ease;
+
+    // The whole panel is clickable (see activity_item_controller.ts); a subtle background lift signals that on hover.
+    &:hover {
+        --#{$prefix}panel-bg: var(--#{$prefix}tertiary-bg);
+    }
+}
+
+@include color-mode(gewis-night) {
+    .panel.panel-surface {
+        --#{$prefix}panel-bg: var(--#{$prefix}body-bg);
+
+        &:hover {
+            --#{$prefix}panel-bg: var(--#{$prefix}secondary-bg);
+        }
+    }
+}
+
+// Stacked date on the left of each activity list item: red uppercase month on top, bold body-coloured day, small
+// weekday underneath. No background box — it sits directly on the panel surface and is top-aligned with the title.
+.activity-date-badge {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    align-items: center;
+    width: 3.5rem;
+    line-height: 1.2;
+    text-align: center;
+
+    .activity-date-badge-month {
+        font-size: 0.75rem;
+        font-weight: 700;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        color: $gewis-red;
+    }
+
+    .activity-date-badge-day {
+        font-size: 1.25rem;
+        font-weight: 700;
+        white-space: nowrap;
+        color: var(--#{$prefix}body-color);
+    }
+
+    .activity-date-badge-weekday {
+        font-size: 0.75rem;
+        white-space: nowrap;
+        color: var(--#{$prefix}secondary-color);
+    }
+
+    // Multi-day / cross-month ranges carry more text ("31–02", "Jul–Aug"), so shrink the day figure to fit.
+    &.activity-date-badge-range .activity-date-badge-day {
+        font-size: 0.95rem;
+        letter-spacing: -0.02em;
+    }
+}
+
+// Uppercase month divider ("JULY 2026") with a trailing rule, used in both the upcoming and archive overviews.
+.activity-month-divider {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin: 1.5rem 0 0.75rem;
+    color: var(--#{$prefix}secondary-color);
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+
+    &:first-child {
+        margin-top: 0;
+    }
+
+    &::after {
+        content: "";
+        flex: 1 1 auto;
+        border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    }
+}
diff --git a/assets/styles/components/_badge.scss b/assets/styles/components/_badge.scss
index 28ae030d16..c5f5aa8048 100644
--- a/assets/styles/components/_badge.scss
+++ b/assets/styles/components/_badge.scss
@@ -1,27 +1,49 @@
-// Badges are like alerts, they use the same CSS custom properties (`--bs-{state}-bg-subtle`,
-// `--bs-{state}-text-emphasis`, `--bs-{state}-border-subtle`).
+// Filled, subtle badge variants (one per theme colour). They use the same CSS custom properties as alerts
+// (`--bs-{state}-bg-subtle`, `--bs-{state}-text-emphasis`). No border: the (default) pill shape carries the visual
+// weight, and a border on a subtle fill just muddies it.
 @each $state, $value in $theme-colors {
     .badge-#{$state} {
         --#{$prefix}badge-color: var(--#{$prefix}#{$state}-text-emphasis);
         background-color: var(--#{$prefix}#{$state}-bg-subtle);
-        border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
-                var(--#{$prefix}#{$state}-border-subtle);
     }
 }
 
-// Neutral badge variant. Built from the surface colours instead of the state colours, so it is subtle in both
-// `gewis-day` and `gewis-night`.
+// GEWIS-red brand badge, keyed to the brand colour (which is not one of Bootstrap's theme colours). Same subtle,
+// borderless treatment as `.badge-{state}`; named `-primary` to match the brand's primary/secondary naming.
+.badge-gewis-primary {
+    --#{$prefix}badge-color: #{shade-color($gewis-red, 20%)};
+
+    background-color: #{tint-color($gewis-red, 80%)};
+}
+
+@include color-mode(gewis-night) {
+    .badge-gewis-primary {
+        --#{$prefix}badge-color: #{tint-color($gewis-red, 40%)};
+
+        background-color: rgba($gewis-red, 0.2);
+    }
+}
+
+// Neutral "tag" variant: transparent fill with a visible border and muted text. Reads as a quiet, secondary chip — use
+// it for labels and similar tags. Subtle in both `gewis-day` and `gewis-night` because it is built from surface tokens.
 .badge-tag {
-    --#{$prefix}badge-color: var(--#{$prefix}body-color);
-    background-color: var(--#{$prefix}secondary-bg);
-    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
-            var(--#{$prefix}border-color);
+    --#{$prefix}badge-color: var(--#{$prefix}secondary-color);
+
+    background-color: transparent;
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 }
 
-// Outlined: transparent fill, coloured border + text from the paired `.badge-{state}` variant. Use as
-// `class="badge badge-secondary badge-outlined"`.
+// Outlined: transparent fill with a border and text taken from `currentColor`. Pair with a `.badge-{state}` to colour
+// it, e.g. `class="badge badge-secondary badge-outlined"`.
 .badge-outlined {
     background-color: transparent;
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) currentcolor;
+}
+
+// Less-rounded corners: overrides the app-wide pill radius with the standard border-radius for a calmer, boxier badge
+// (e.g. the sign-up deadline).
+.badge-squared {
+    --#{$prefix}badge-border-radius: var(--#{$prefix}border-radius);
 }
 
 // Selectable: hidden input + label.badge pattern, mirroring Bootstrap's `btn-check`.
diff --git a/src/Twig/Extensions/ActivityDateRangeExtension.php b/src/Twig/Extensions/ActivityDateRangeExtension.php
index a531f80b9d..71567529ea 100644
--- a/src/Twig/Extensions/ActivityDateRangeExtension.php
+++ b/src/Twig/Extensions/ActivityDateRangeExtension.php
@@ -34,6 +34,96 @@ public function getFunctions(): array
                 'activity_date_range',
                 $this->activityDateRange(...),
             ),
+            new TwigFunction(
+                'activity_date_badge',
+                $this->activityDateBadge(...),
+            ),
+        ];
+    }
+
+    /**
+     * Locale-aware split date parts for the left-hand stacked badge on the activity overview. Uppercasing is left to
+     * CSS (text-transform) to stay locale-correct for weekday/month abbreviations. The year is deliberately omitted to
+     * keep the badge compact; activity_date_range() beside the title already shows the year when it differs from today.
+     *
+     * @return array{weekday: string, day: string, month: string, range: bool}
+     */
+    public function activityDateBadge(
+        DateTimeInterface $begin,
+        DateTimeInterface $end,
+    ): array {
+        $locale = Locale::getDefault();
+        $sameDay = $begin->format('Y-m-d') === $end->format('Y-m-d');
+        $sameMonth = $begin->format('Y-m') === $end->format('Y-m');
+
+        if ($sameDay) {
+            return [
+                'weekday' => $this->format(
+                    $begin,
+                    'EEE',
+                    $locale,
+                ),
+                'day' => $this->format(
+                    $begin,
+                    'd',
+                    $locale,
+                ),
+                'month' => $this->format(
+                    $begin,
+                    'MMM',
+                    $locale,
+                ),
+                'range' => false,
+            ];
+        }
+
+        return [
+            'weekday' => sprintf(
+                '%s - %s',
+                $this->format(
+                    $begin,
+                    'EEE',
+                    $locale,
+                ),
+                $this->format(
+                    $end,
+                    'EEE',
+                    $locale,
+                ),
+            ),
+            'day' => sprintf(
+                '%s - %s',
+                $this->format(
+                    $begin,
+                    'dd',
+                    $locale,
+                ),
+                $this->format(
+                    $end,
+                    'dd',
+                    $locale,
+                ),
+            ),
+            'month' => $sameMonth
+                ? $this->format(
+                    $begin,
+                    'MMM',
+                    $locale,
+                )
+                : sprintf(
+                    '%s - %s',
+                    $this->format(
+                        $begin,
+                        'MMM',
+                        $locale,
+                    ),
+                    $this->format(
+                        $end,
+                        'MMM',
+                        $locale,
+                    ),
+                ),
+            'range' => true,
         ];
     }
 
diff --git a/templates/activity/admin/approvals/review.html.twig b/templates/activity/admin/approvals/review.html.twig
index 77c233a5cb..687763c93a 100644
--- a/templates/activity/admin/approvals/review.html.twig
+++ b/templates/activity/admin/approvals/review.html.twig
@@ -1,8 +1,5 @@
 {% extends 'layout-admin.html.twig' %}
 
-{# A localised text (a sign-up list's name) shown the same way as the Details panel: two flag-headed columns
-   (Dutch | English), each with the inline diff of that language's value. A null `old` shows just the new value (a new
-   or removed list, which has nothing to compare against); `struck` strikes both values through (a removed list). #}
 {% macro localised_flag_diff(old, new, renderer, struck) %}
     <div class="row mb-2">
         <div class="col-md-6">
@@ -16,8 +13,6 @@
     </div>
 {% endmacro %}
 
-{# One labelled field of a localised text block: a small label with the inline diff of a single language's value
-   below it. Renders nothing when the field is empty on both sides, so an unused language collapses to one note. #}
 {% macro field_diff(label, old, new, renderer) %}
     {% set rendered = diff(old, new, renderer|default('Combined')) %}
     {% if rendered|trim is not empty %}
@@ -28,9 +23,6 @@
     {% endif %}
 {% endmacro %}
 
-{# A single boolean list setting. With a `previous` counterpart a newly-enabled flag is green, a newly-disabled one
-   is shown struck-through in red, and an unchanged-but-on flag stays neutral; without one (a new/removed list) an
-   enabled flag is just shown neutral. An unchanged-off flag renders nothing. #}
 {% macro flag(label, old, new) %}
     {% if old is not null and new and not old %}
         <span class="badge badge-success">{{ label }}</span>
@@ -41,9 +33,6 @@
     {% endif %}
 {% endmacro %}
 
-{# The window, settings and custom fields of one sign-up list. With a lineage-matched `previous` counterpart every
-   part is shown as a diff (current value, with the old one struck/annotated when it changed, mirroring the main
-   body above); without one (a new or removed list) it just shows the list's own values. #}
 {% macro signup_list_body(list, previous) %}
     {% import _self as diffmacro %}
     <div class="small mb-1">
@@ -67,8 +56,6 @@
         <div class="mb-1">{{ flags }}</div>
     {% endif %}
 
-    {# Custom fields, matched to the previous list's fields by position (mirroring the change detection in the
-       controller); trailing previous-only fields were removed. #}
     {% set previousFields = previous is not null ? previous.fields.values : [] %}
     {% if list.fields|length > 0 or previousFields|length > 0 %}
         <ul class="list-unstyled small mb-0">
@@ -184,9 +171,9 @@
                     <div class="mb-2">
                         <h6 class="text-muted small mb-1">{{ 'Category'|trans }}</h6>
                         <div>
-                            <span class="badge badge-info">{{ revision.category|trans }}</span>
+                            <span class="badge badge-gewis-primary">{{ revision.category|trans }}</span>
                             {% if previous is not null and previous.category != revision.category %}
-                                <span class="text-muted small">({{ 'was'|trans }} <span class="badge badge-info">{{ previous.category|trans }}</span>)</span>
+                                <span class="text-muted small">({{ 'was'|trans }} <span class="badge badge-gewis-primary">{{ previous.category|trans }}</span>)</span>
                             {% endif %}
                         </div>
                     </div>
@@ -329,13 +316,10 @@
                     </div>
                 {% endif %}
                 {{ form_start(decisionForm, {'action': path('admin/activities/approvals/decide', {'revision': revision.getId})}) }}
-                    {# The message field is only present for a decision (reviewer feedback) or a resubmission
-                       (the organiser's required response); a fresh submit / start review / close gets no field. #}
+                    {# The message field is only present for a decision (feedback) or a resubmission (required response); a fresh submit / start review / close has none. #}
                     {% if decisionForm.message is defined %}
                         {{ form_row(decisionForm.message) }}
                     {% endif %}
-                    {# The progressing action is prominent (full-width, solid); the negative actions are smaller
-                       outline buttons inline below it. Each tier self-sizes to whatever the workflow enabled. #}
                     <div class="d-grid gap-2">
                         {% if decisionForm.submit is defined %}
                             {{ form_widget(decisionForm.submit, {'attr': {'class': 'btn btn-success'}}) }}
diff --git a/templates/activity/admin/edit.html.twig b/templates/activity/admin/edit.html.twig
index b8d5e7e772..417200b294 100644
--- a/templates/activity/admin/edit.html.twig
+++ b/templates/activity/admin/edit.html.twig
@@ -45,7 +45,6 @@
             </div>
         </div>
         {% if hasFeedback %}
-            {# A sidebar so the reviewer's feedback stays visible no matter which step the editor is on. #}
             <div class="col-md-3">
                 <div class="panel position-sticky mt-0">
                     <div class="panel-heading">
diff --git a/templates/activity/admin/signups.html.twig b/templates/activity/admin/signups.html.twig
index 46f4807563..e345fc6100 100644
--- a/templates/activity/admin/signups.html.twig
+++ b/templates/activity/admin/signups.html.twig
@@ -43,6 +43,5 @@
         </div>
     </div>
 
-    {# Shared confirmation modal for the draw, kept outside the live component so its re-render can't orphan it. #}
     {% include 'partials/application/confirm-modal.html.twig' %}
 {% endblock %}
diff --git a/templates/activity/archive-my.html.twig b/templates/activity/archive-my.html.twig
index d67a4a55ff..5fcf551030 100644
--- a/templates/activity/archive-my.html.twig
+++ b/templates/activity/archive-my.html.twig
@@ -7,6 +7,8 @@
         <h1 class="mb-0">{{ 'My past activities'|trans }}</h1>
 
         <div class="btn-toolbar gap-2" role="toolbar">
+            {% include 'partials/activity/filter-toggle.html.twig' %}
+
             <a class="btn btn-outline-secondary" href="{{ path('activity/my') }}">
                 <i class="fas fa-chevron-left"></i> {{ 'My upcoming activities'|trans }}
             </a>
diff --git a/templates/activity/archive.html.twig b/templates/activity/archive.html.twig
index 61e9b31ce7..08d94b7cdb 100644
--- a/templates/activity/archive.html.twig
+++ b/templates/activity/archive.html.twig
@@ -6,11 +6,15 @@
     <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
         <h1 class="mb-0">{{ 'Activity Archive'|trans }}</h1>
 
-        {% include 'partials/activity/year-switcher.html.twig' with {
-            route: 'activity/archive',
-            year: year,
-            years: years,
-        } only %}
+        <div class="d-flex flex-wrap align-items-center gap-2">
+            {% include 'partials/activity/filter-toggle.html.twig' %}
+
+            {% include 'partials/activity/year-switcher.html.twig' with {
+                route: 'activity/archive',
+                year: year,
+                years: years,
+            } only %}
+        </div>
     </div>
 
     {{ component('Activity:ActivityOverview', {
diff --git a/templates/activity/external-signup-manage.html.twig b/templates/activity/external-signup-manage.html.twig
index 388652b4e6..d13e632e80 100644
--- a/templates/activity/external-signup-manage.html.twig
+++ b/templates/activity/external-signup-manage.html.twig
@@ -18,6 +18,5 @@
         </div>
     </div>
 
-    {# Shared confirm-modal driving the component's unsubscribe live action; rendered once, OUTSIDE the live component. #}
     {% include 'partials/application/confirm-modal.html.twig' %}
 {% endblock %}
diff --git a/templates/activity/index.html.twig b/templates/activity/index.html.twig
index e49a0cbd08..7907cc5599 100644
--- a/templates/activity/index.html.twig
+++ b/templates/activity/index.html.twig
@@ -3,7 +3,11 @@
 {% block page_title %}{{ 'Activities'|trans|page_title }}{{ parent() }}{% endblock %}
 
 {% block contents %}
-    <h1>{{ 'Activities'|trans }}</h1>
+    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
+        <h1 class="mb-0">{{ 'Activities'|trans }}</h1>
+
+        {% include 'partials/activity/filter-toggle.html.twig' %}
+    </div>
 
     {{ component('Activity:ActivityOverview') }}
 {% endblock %}
diff --git a/templates/activity/my.html.twig b/templates/activity/my.html.twig
index 35231b6fdc..65e67ff6bc 100644
--- a/templates/activity/my.html.twig
+++ b/templates/activity/my.html.twig
@@ -6,9 +6,13 @@
     <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
         <h1 class="mb-0">{{ 'My upcoming activities'|trans }}</h1>
 
-        <a class="btn btn-outline-secondary" href="{{ path('activity/archive/my') }}">
-            {{ 'My past activities'|trans }} <i class="fas fa-chevron-right"></i>
-        </a>
+        <div class="d-flex flex-wrap gap-2">
+            {% include 'partials/activity/filter-toggle.html.twig' %}
+
+            <a class="btn btn-outline-secondary" href="{{ path('activity/archive/my') }}">
+                {{ 'My past activities'|trans }} <i class="fas fa-chevron-right"></i>
+            </a>
+        </div>
     </div>
 
     {{ component('Activity:ActivityOverview', { subscribed: true }) }}
diff --git a/templates/activity/view.html.twig b/templates/activity/view.html.twig
index 7b72cdae64..f1d19c1782 100644
--- a/templates/activity/view.html.twig
+++ b/templates/activity/view.html.twig
@@ -41,7 +41,7 @@
             <h1 class="mb-2">{{ activity_title(activity) }}</h1>
             <div class="d-flex flex-wrap gap-1 mb-3">
                 {% if activity.getCategory.value not in ['other', 'uncategorised'] %}
-                    <span class="badge badge-info">{{ activity.getCategory|trans }}</span>
+                    <span class="badge badge-gewis-primary">{{ activity.getCategory|trans }}</span>
                 {% endif %}
                 {% for label in activity.getLabels %}
                     <span class="badge badge-tag">{{ label.getName|localise_text }}</span>
@@ -126,7 +126,6 @@
 
         {% if activeLists is not empty %}
             <h2 class="h4 mt-4">{{ 'Sign-up lists'|trans }}</h2>
-            {# Auto-open the first list that is still open for sign-up; leave the rest collapsed. #}
             {% set openedFirst = false %}
             {% for list in activeLists %}
                 {% set autoOpen = not openedFirst and list.isOpen %}
@@ -151,8 +150,6 @@
         {% endif %}
 
         {% if is_granted('ROLE_USER') %}
-            {# Shared confirm-modal driving each list component's unsubscribe live action; rendered once per page,
-               OUTSIDE the live components. #}
             {% include 'partials/application/confirm-modal.html.twig' %}
         {% endif %}
     {% endif %}
diff --git a/templates/components/Activity/ActivityOverview.html.twig b/templates/components/Activity/ActivityOverview.html.twig
index d5e093d9c0..9e571d8ea9 100644
--- a/templates/components/Activity/ActivityOverview.html.twig
+++ b/templates/components/Activity/ActivityOverview.html.twig
@@ -1,13 +1,7 @@
 <div {{ attributes }}>
-    <div class="panel mb-3" data-live-ignore>
-        <button type="button"
-                class="panel-heading d-flex justify-content-between align-items-center w-100 border-0 bg-transparent text-start collapsed"
-                data-bs-toggle="collapse" data-bs-target="#activity-filters"
-                aria-expanded="false" aria-controls="activity-filters">
-            <span class="h6 mb-0">{{ 'Filters'|trans }}</span>
-            <i class="fas fa-sliders"></i>
-        </button>
-        <div class="collapse" id="activity-filters">
+    {# data-live-ignore: keeps the injected label chips intact across re-renders. #}
+    <div class="collapse mb-3" id="activity-filters" data-live-ignore>
+        <div class="panel my-0">
             <div class="panel-body">
                 <div class="row g-3 align-items-end">
                 <div class="col-md-4">
@@ -58,10 +52,6 @@
                 </div>
                 {% if this.labels is not empty %}
                     <div class="col-12">
-                        {# Same removable-chip control as the activity form. It only hides and toggles the checkboxes, so
-                           the data-model="labelFilters" binding keeps driving the LiveProp; it sits inside the
-                           data-live-ignore panel above, so a re-render never clobbers the injected chips. The field
-                           label stays outside the controller element so it is not displaced by the injected chips. #}
                         <label class="form-label">{{ 'Labels'|trans }}</label>
                         <div data-controller="label-chips"
                              data-label-chips-placeholder-value="{{ 'Search labels…'|trans }}"
@@ -86,19 +76,30 @@
     </div>
 
     {% if this.past %}
-        {% for year, activities in this.activitiesByAssociationYear %}
-            <h2 class="h4 {{ loop.first ? 'mt-2' : 'mt-5' }} mb-3 pb-2 border-bottom">{{ year }}</h2>
-            <div class="mb-2">
+        <div class="mb-2">
+            {% for activities in this.activitiesByAssociationYear %}
+                {% set currentMonth = null %}
                 {% for activity in activities %}
+                    {% set month = activity.getBeginTime|format_datetime(pattern: 'MMMM yyyy', locale: app.request.locale) %}
+                    {% if month != currentMonth %}
+                        <div class="activity-month-divider">{{ month }}</div>
+                        {% set currentMonth = month %}
+                    {% endif %}
                     {% include 'partials/activity/list-item.html.twig' with {'activity': activity} only %}
                 {% endfor %}
-            </div>
-        {% else %}
-            <p class="text-muted text-center py-4">{{ 'No activities match the current filters.'|trans }}</p>
-        {% endfor %}
+            {% else %}
+                <p class="text-muted text-center py-4">{{ 'No activities match the current filters.'|trans }}</p>
+            {% endfor %}
+        </div>
     {% else %}
         <div class="mb-2">
+            {% set currentMonth = null %}
             {% for activity in this.activities %}
+                {% set month = activity.getBeginTime|format_datetime(pattern: 'MMMM yyyy', locale: app.request.locale) %}
+                {% if month != currentMonth %}
+                    <div class="activity-month-divider">{{ month }}</div>
+                    {% set currentMonth = month %}
+                {% endif %}
                 {% include 'partials/activity/list-item.html.twig' with {'activity': activity} only %}
             {% else %}
                 <p class="text-muted text-center py-4">{{ 'No activities match the current filters.'|trans }}</p>
diff --git a/templates/components/Activity/Admin/ActivityOverview.html.twig b/templates/components/Activity/Admin/ActivityOverview.html.twig
index 4e8f48cf5f..476a00bcf2 100644
--- a/templates/components/Activity/Admin/ActivityOverview.html.twig
+++ b/templates/components/Activity/Admin/ActivityOverview.html.twig
@@ -105,7 +105,6 @@
                                                 {{ 'Submit for review'|trans }}
                                             </a>
                                         {% elseif row.status.value == 'rejected' %}
-                                            {# A closed revision is final (the board ended it), so it offers no reopen. #}
                                             <form method="post" class="d-inline"
                                                   action="{{ path('admin/activities/reopen', {'activity': row.id}) }}">
                                                 <input type="hidden" name="_csrf_token"
@@ -125,8 +124,7 @@
         </div>
     </div>
 
-    {# Potentially thousands of rows: collapsed by default and paginated. Collapse is driven by the `expanded` live
-       prop (not Bootstrap's client-side collapse) so it survives the Ajax re-render that pagination triggers. #}
+    {# Collapse is driven by the `expanded` live prop, not Bootstrap, so it survives the Ajax re-render pagination triggers. #}
     <div class="panel">
         <button type="button"
                 class="panel-heading signup-list-heading d-flex justify-content-between align-items-center w-100 border-0 bg-transparent text-start{{ expanded ? '' : ' collapsed' }}"
@@ -171,18 +169,14 @@
                                                class="btn btn-sm btn-outline-secondary">
                                                 {{ 'Sign-ups'|trans }}
                                             </a>
-                                            {# A cancelled activity is not revised (un-cancel first); an unpublished one
-                                               stays revisable so it can be fixed up before re-publishing. #}
                                             {% if not row.passed and not row.cancelled %}
                                                 <a href="{{ path('admin/activities/edit', {'activity': row.id}) }}"
                                                    class="btn btn-sm btn-outline-gewis-primary">
                                                     {{ 'Revise'|trans }}
                                                 </a>
                                             {% endif %}
+                                            {# Board lifecycle controls use their own Bootstrap modal; the shared confirm-modal drives live actions only. #}
                                             {% if this.isBoard %}
-                                                {# Board-only lifecycle controls. Each opens a plain Bootstrap modal with
-                                                   the POST form + a Cancel button in the footer (the shared confirm-modal
-                                                   drives live actions only, so these use their own modal). #}
                                                 {% if row.cancelled %}
                                                     {{ _self.confirm_form_modal(
                                                         'uncancel-' ~ row.id,
diff --git a/templates/components/Activity/Admin/SignupOverview.html.twig b/templates/components/Activity/Admin/SignupOverview.html.twig
index 02ec0448a2..5e457c72ab 100644
--- a/templates/components/Activity/Admin/SignupOverview.html.twig
+++ b/templates/components/Activity/Admin/SignupOverview.html.twig
@@ -9,8 +9,6 @@
     {% set admissionOpen = this.admissionOpen %}
 
     {% if attendanceListId is not null %}
-        {# Attendance mode: a focused, mobile-first view for marking presence on a phone: a big search box and
-           full-width tappable rows (the whole row toggles present), instead of the cramped table toggle. #}
         {% set list = listViews|filter(l => l.listId == attendanceListId)|first %}
         {% if list %}
             <div class="panel mb-3">
@@ -32,7 +30,6 @@
                            placeholder="{{ 'Search for a name or email'|trans }}"
                            data-model="debounce(200)|filter" value="{{ filter }}">
                     <div class="list-group">
-                        {# On a limited-capacity list you take attendance only of the admittees (drawn). #}
                         {% set attendanceRows = list.limitedCapacity ? list.rows|filter(r => r.drawn) : list.rows %}
                         {% for row in attendanceRows %}
                             <button type="button"
@@ -77,15 +74,10 @@
         </div>
 
         {% for list in listViews %}
-            {# External-party/custom lists are admitted by hand (no draw, no lock). #}
             {% set isManual = list.allocationMethod.isManual %}
             {% set collapseId = 'signup-list-' ~ list.listId %}
             <div class="panel mb-3">
-                {# Client-side Bootstrap collapse, matching the public activity view
-                   (templates/partials/activity/signup-list.html.twig): the rotating chevron and the smooth toggle are
-                   pure Bootstrap with no live round-trip. An open list survives the live re-renders triggered by the
-                   actions below because the component's ExternalMutationTracker re-applies the client-added
-                   `show`/`collapsed` classes across each DOM morph. #}
+                {# Client-side Bootstrap collapse; the open state survives live re-renders because ExternalMutationTracker re-applies the show/collapsed classes across the DOM morph. #}
                 <button type="button"
                         class="panel-heading signup-list-heading d-flex justify-content-between align-items-start gap-2 w-100 border-0 bg-transparent text-start collapsed"
                         data-bs-toggle="collapse" data-bs-target="#{{ collapseId }}"
@@ -150,11 +142,6 @@
                     </div>
 
                 {% if list.limitedCapacity %}
-                    {# Admission is driven by the allocation method: first-come and conditional-draw are drawn
-                       automatically at the list's own draw moment (close, or the configured cutoff), with a board
-                       fallback button that enables once that moment (or close) has passed (up to a day after the
-                       activity ends); external-party and custom are admitted by hand. After a draw (or for a manual
-                       method) board and organisers adjust individuals over the same window. #}
                     {% set isFcfs = list.allocationMethod.value == 'first-come-first-served' %}
                     {% set drawAction = isFcfs ? 'drawFirstCome' : 'drawLottery' %}
                     {% set drawIcon = isFcfs ? 'fa-list-ol' : 'fa-dice' %}
@@ -258,18 +245,13 @@
                             <i class="fas fa-envelope"></i> {{ 'Email sign-ups'|trans }}
                         </button>
                         {% if list.isOpen and not list.frozen %}
-                            {# Manual external add is a normal page (it carries the dynamic sign-up form); a redirect back
-                               here refreshes this component. Hidden while frozen: the controller refuses it anyway. #}
                             <a class="btn btn-sm btn-outline-success"
                                href="{{ path('admin/activities/add_external_signup', {'activity': this.activity.getId, 'signupList': list.listId}) }}">
                                 <i class="fas fa-user-plus"></i> {{ 'Add external subscriber'|trans }}
                             </a>
                         {% endif %}
                         {% if list.fieldColumns is not empty %}
-                            {# Per-list column chooser: hide custom-field columns that clutter a wide table. Toggling
-                               re-renders the component; the dropdown stays open thanks to data-bs-auto-close="outside"
-                               plus the live component's ExternalMutationTracker preserving Bootstrap's `show` across
-                               the DOM morph. #}
+                            {# data-bs-auto-close="outside" plus ExternalMutationTracker keep this dropdown open across the re-render a toggle triggers. #}
                             <div class="dropdown ms-auto">
                                 <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"
                                         data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
@@ -316,10 +298,9 @@
                                 </div>
                             </div>
                             <div class="col-md-12">
-                                {# data-live-ignore: the markdown-editor controller injects its own DOM here; keep the
-                                   component's re-render/morph from destroying or duplicating it. #}
+                                {# data-live-ignore: the markdown-editor injects its own DOM here; keep the re-render from destroying it. #}
                                 <div class="form-floating" data-live-ignore>
-                                    {# Floating-label textareas need an explicit height (rows is ignored once floating). #}
+                                    {# Floating-label textareas need an explicit height (rows is ignored). #}
                                     <textarea class="form-control" id="email-body-{{ list.listId }}" required
                                               placeholder="{{ 'Message'|trans }}" style="height: 160px;"
                                               data-controller="markdown-editor"
@@ -402,7 +383,6 @@
                                         {% if list.limitedCapacity %}
                                             <td class="text-center">
                                                 <div class="form-check form-switch d-inline-block mb-0">
-                                                    {# Manual admit/un-admit once the draw is locked (or for a manual method), until shortly after the activity. #}
                                                     <input class="form-check-input" type="checkbox"
                                                            {{ row.drawn ? 'checked' }} {{ ((list.drawLocked or isManual) and admissionOpen) ? '' : 'disabled' }}
                                                            aria-label="{{ 'Admitted'|trans }}"
@@ -414,7 +394,6 @@
                                         {% endif %}
                                         <td class="text-center">
                                             <div class="form-check form-switch d-inline-block mb-0">
-                                                {# Present requires admission on a limited list; disabled until drawn. #}
                                                 <input class="form-check-input" type="checkbox"
                                                        {{ row.present ? 'checked' }} {{ (canMark and (not list.limitedCapacity or row.drawn)) ? '' : 'disabled' }}
                                                        aria-label="{{ 'Present'|trans }}"
diff --git a/templates/components/Activity/ExternalSignupForm.html.twig b/templates/components/Activity/ExternalSignupForm.html.twig
index b9840f6df0..0e3213e19c 100644
--- a/templates/components/Activity/ExternalSignupForm.html.twig
+++ b/templates/components/Activity/ExternalSignupForm.html.twig
@@ -1,7 +1,4 @@
 <div{{ attributes }}>
-    {# Just the form: it lives inside a Bootstrap modal whose chrome (header, open/close, backdrop) is rendered around
-       this component in the activity partial. An invalid submit re-renders this form in place (modal stays open); a
-       successful submit redirects, so the reload closes the modal and shows the "check your email" flash. #}
     {{ form_start(form, {
         attr: form.vars.attr|merge({
             'data-action': 'live#action:prevent',
diff --git a/templates/components/Activity/ExternalSignupManage.html.twig b/templates/components/Activity/ExternalSignupManage.html.twig
index e1f780c768..6ab7dcafbe 100644
--- a/templates/components/Activity/ExternalSignupManage.html.twig
+++ b/templates/components/Activity/ExternalSignupManage.html.twig
@@ -8,8 +8,6 @@
             {{ 'This sign-up list is closed, so your sign-up can no longer be changed.'|trans }}
         </div>
     {% else %}
-        {# Editing is a live action: submitting re-renders this component in place (inline validation, no reload).
-           Unsubscribing is a separate live action confirmed via the shared #confirm-modal, which redirects. #}
         {{ form_start(form, {
             attr: form.vars.attr|merge({
                 'data-action': 'live#action:prevent',
@@ -18,8 +16,7 @@
         }) }}
             {{ form_errors(form) }}
             {{ form_row(form.fullName) }}
-            {# Disabled by SignupType in manage mode: the email is the verified identity and changing it would bypass
-               verification (to use another address, unsubscribe and sign up again). #}
+            {# Email is disabled in manage mode: it is the verified identity, and changing it would bypass verification. #}
             {{ form_row(form.email) }}
             {% include 'partials/activity/signup-fields.html.twig' with { form: form } only %}
 
diff --git a/templates/components/Activity/ExternalSignupResendForm.html.twig b/templates/components/Activity/ExternalSignupResendForm.html.twig
index 50664554e9..fd9821b3d7 100644
--- a/templates/components/Activity/ExternalSignupResendForm.html.twig
+++ b/templates/components/Activity/ExternalSignupResendForm.html.twig
@@ -1,6 +1,4 @@
 <div{{ attributes }}>
-    {# Just the form: the Bootstrap modal chrome is rendered around this component in the activity partial. An invalid
-       submit (incl. captcha) re-renders inline; a successful submit redirects with the neutral flash. #}
     {{ form_start(form, {
         attr: form.vars.attr|merge({
             'data-action': 'live#action:prevent',
diff --git a/templates/components/Activity/SignupList.html.twig b/templates/components/Activity/SignupList.html.twig
index 99ac277e07..cb25f2b91a 100644
--- a/templates/components/Activity/SignupList.html.twig
+++ b/templates/components/Activity/SignupList.html.twig
@@ -44,9 +44,7 @@
             {% endif %}
         </div>
 
-        {# The modal lives inside the component; on a successful submit the panel re-renders and the `modal-close`
-           controller hides this modal on the scoped `signup:success` event (the id keeps idiomorph from replacing it,
-           so the controller stays connected across the re-render). #}
+        {# The id keeps idiomorph from replacing the modal, so modal-close stays connected and can hide it on the scoped signup:success event after a re-render. #}
         <div class="modal fade" id="{{ signupModalId }}" tabindex="-1" aria-hidden="true"
              data-controller="modal-close" data-modal-close-list-id-value="{{ listId }}"
              data-action="signup:success@window->modal-close#hide">
@@ -108,7 +106,6 @@
         </p>
     {% endif %}
 
-    {# Members always see the subscriber list (own row included, others' sensitive fields hidden). #}
     <div class="table-responsive">
         <table class="table table-hover align-middle mb-0">
             <thead>
diff --git a/templates/partials/activity/admin/form.html.twig b/templates/partials/activity/admin/form.html.twig
index 8b05fe2f57..1feca6bcf2 100644
--- a/templates/partials/activity/admin/form.html.twig
+++ b/templates/partials/activity/admin/form.html.twig
@@ -1,11 +1,8 @@
-{# novalidate: required fields can sit on a hidden step, where native HTML5 validation would refuse to submit and log
-   "invalid form control is not focusable" with no visible reason. Server-side validation is authoritative and the
-   form-stepper jumps to the first errored step instead. #}
+{# novalidate: required fields can sit on a hidden step, where native validation blocks the submit invisibly. Server-side validation is authoritative and the stepper jumps to the first errored step. #}
 {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
 {{ form_errors(form) }}
 
-{# localised-fields toggles the NL/EN inputs (step 2); form-stepper pages the steps below. Both span the whole form on
-   purpose: every step stays in the DOM (hidden, never disabled) so the single POST still carries everything. #}
+{# Every step stays in the DOM (hidden, never disabled) so the single POST carries all fields. #}
 <div data-controller="localised-fields form-stepper">
     <ol class="form-stepper" role="tablist">
         <li class="form-stepper__step" role="presentation">
@@ -34,7 +31,6 @@
         </li>
     </ol>
 
-    {# Step 1: General information (the what/when/who + facilities) #}
     <div data-form-stepper-target="step">
         <div class="row">
             <div class="col-md-6">
@@ -75,9 +71,6 @@
                         <div class="row">
                             <div class="col-md-4">{{ form_row(form.currentRevision.category) }}</div>
                             <div class="col-md-8">
-                                {# Renders the labels as removable chips with a typeahead; the EntityType checkboxes stay as the
-                                   bound source of truth (label-chips just hides and drives them). The field label stays outside
-                                   the controller element so it is not displaced by the injected chips/typeahead. #}
                                 {{ form_label(form.currentRevision.labels) }}
                                 <div data-controller="label-chips"
                                      data-label-chips-placeholder-value="{{ 'Search labels…'|trans }}"
@@ -108,7 +101,6 @@
         </div>
     </div>
 
-    {# Step 2: Details (the bilingual texts a potential subscriber reads) #}
     <div data-form-stepper-target="step">
         <div class="row">
             <div class="col-md-12">
@@ -158,7 +150,6 @@
         </div>
     </div>
 
-    {# Step 3: Sign-up lists #}
     <div data-form-stepper-target="step">
         <div class="row">
             <div class="col-md-12">
@@ -177,8 +168,6 @@
         </div>
     </div>
 
-    {# The footer lives inside the form-stepper element so its targets/actions bind (Stimulus only scans the
-       controller's own subtree). It stays inside the <form>, so the single POST is unchanged. #}
     <div class="mt-3 d-flex justify-content-end gap-2">
         <a href="{{ path('admin/activities/index') }}" class="btn btn-link">{{ 'Cancel'|trans }}</a>
         <button type="button" class="btn btn-outline-secondary"
diff --git a/templates/partials/activity/admin/overview-header-cells.html.twig b/templates/partials/activity/admin/overview-header-cells.html.twig
index 329bf75f36..f953183562 100644
--- a/templates/partials/activity/admin/overview-header-cells.html.twig
+++ b/templates/partials/activity/admin/overview-header-cells.html.twig
@@ -1,4 +1,3 @@
-{# The six leading column headers shared by the pending and approved activity-overview tables. #}
 <th>{{ 'Name (Dutch)'|trans }}</th>
 <th>{{ 'Name (English)'|trans }}</th>
 <th>{{ 'Organ'|trans }}</th>
diff --git a/templates/partials/activity/admin/overview-row-cells.html.twig b/templates/partials/activity/admin/overview-row-cells.html.twig
index 98bff6f608..deea28d634 100644
--- a/templates/partials/activity/admin/overview-row-cells.html.twig
+++ b/templates/partials/activity/admin/overview-row-cells.html.twig
@@ -1,4 +1,3 @@
-{# The six leading cells shared by the pending and approved activity-overview rows. Pass `{ row: row } only`. #}
 <td>{{ row.nameNL }}</td>
 <td>{{ row.nameEN }}</td>
 <td>{{ row.organAbbr ?? '-' }}</td>
diff --git a/templates/partials/activity/filter-toggle.html.twig b/templates/partials/activity/filter-toggle.html.twig
new file mode 100644
index 0000000000..812d810e91
--- /dev/null
+++ b/templates/partials/activity/filter-toggle.html.twig
@@ -0,0 +1,5 @@
+<button type="button" class="btn btn-outline-secondary"
+        data-bs-toggle="collapse" data-bs-target="#activity-filters"
+        aria-expanded="false" aria-controls="activity-filters">
+    <i class="fas fa-sliders"></i> {{ 'Filters'|trans }}
+</button>
diff --git a/templates/partials/activity/list-item.html.twig b/templates/partials/activity/list-item.html.twig
index c9e108c62c..acf125a89c 100644
--- a/templates/partials/activity/list-item.html.twig
+++ b/templates/partials/activity/list-item.html.twig
@@ -1,80 +1,94 @@
 {% set now = date() %}
-<div class="activity-list-item mb-4" data-controller="activity-item"
+{% set dateBadge = activity_date_badge(activity.getBeginTime, activity.getEndTime) %}
+{% set dateMeta %}
+    <span class="text-muted small">{{ activity_date_range(activity.getBeginTime, activity.getEndTime) }}</span>
+    {% if now.timestamp >= activity.getBeginTime.timestamp and now.timestamp <= activity.getEndTime.timestamp %}
+        <span class="badge badge-success">{{ 'ongoing for %duration%'|trans({'%duration%': human_time_diff(now, activity.getEndTime)}) }}</span>
+    {% elseif now.timestamp < activity.getBeginTime.timestamp %}
+        <span class="badge badge-tag">{{ 'in %duration%'|trans({'%duration%': human_time_diff(now, activity.getBeginTime)}) }}</span>
+    {% endif %}
+{% endset %}
+<div class="panel panel-surface activity-list-item mb-3" data-controller="activity-item"
      data-activity-item-url-value="{{ path('activity/view', {'activity': activity.getId}) }}"
      data-action="click->activity-item#open">
-    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-start gap-1 mb-2">
-        <div>
-            <h3 class="h5 mb-2">
-                <a href="{{ path('activity/view', {'activity': activity.getId}) }}">{{ activity_title(activity) }}</a>
-            </h3>
-            <div class="d-flex flex-wrap gap-1">
-                {% if activity.isCancelled %}
-                    <span class="badge badge-danger">{{ 'Cancelled'|trans }}</span>
-                {% endif %}
-                {% if activity.getCategory.value not in ['other', 'uncategorised'] %}
-                    <span class="badge badge-info">{{ activity.getCategory|trans }}</span>
-                {% endif %}
-                {% for label in activity.getLabels %}
-                    <span class="badge badge-tag">{{ label.getName|localise_text }}</span>
-                {% endfor %}
-            </div>
-        </div>
-        <span class="text-muted small text-md-end">
-            {{ activity_date_range(activity.getBeginTime, activity.getEndTime) }}
-            {% if now.timestamp >= activity.getBeginTime.timestamp and now.timestamp <= activity.getEndTime.timestamp %}
-                <br><span class="text-success">{{ 'ongoing for %duration%'|trans({'%duration%': human_time_diff(now, activity.getEndTime)}) }}</span>
-            {% elseif now.timestamp < activity.getBeginTime.timestamp %}
-                <br><span>{{ 'in %duration%'|trans({'%duration%': human_time_diff(now, activity.getBeginTime)}) }}</span>
-            {% endif %}
-        </span>
-    </div>
+    <div class="panel-body d-flex gap-3">
 
-    <div class="activity-description mb-2" data-controller="description-toggle"
-         data-description-toggle-more-value="{{ 'Show more'|trans }}"
-         data-description-toggle-less-value="{{ 'Show less'|trans }}">
-        <div class="activity-description-content" data-description-toggle-target="content">
-            {{ activity.getDescription|localise_text|markdown(['p', 'br', 'strong', 'em', 'del', 'a', 'ul', 'ol', 'li']) }}
+        {# aria-hidden: activity_date_range() below already announces the full date to assistive tech. #}
+        <div class="activity-date-badge{{ dateBadge.range ? ' activity-date-badge-range' : '' }}" aria-hidden="true">
+            <span class="activity-date-badge-month">{{ dateBadge.month }}</span>
+            <span class="activity-date-badge-day">{{ dateBadge.day }}</span>
+            <span class="activity-date-badge-weekday">{{ dateBadge.weekday }}</span>
         </div>
-        <button type="button" class="btn btn-link btn-sm p-0 d-none"
-                data-description-toggle-target="button"
-                data-action="description-toggle#toggle">
-            {{ 'Show more'|trans }}
-        </button>
-    </div>
-
-    <hr class="my-1">
 
-    <div class="text-muted small">
-        <span class="me-3"><i class="fas fa-location-dot"></i> {{ activity.getLocation|localise_text }}</span>
-        <span class="me-3"><i class="fas fa-tag"></i> {{ activity.getCosts|localise_text }}</span>
-        {% set signupList = activity.getRelevantSignupList %}
-        {# A cancelled activity has its sign-ups frozen, so a "sign-up closes/opens" deadline would be misleading; the
-           [CANCELLED] title and badge already convey the state. #}
-        {% if not activity.isCancelled and null !== signupList %}
-            {% if signupList.isOpen %}
-                {% set secondsLeft = signupList.getCloseDate.timestamp - now.timestamp %}
-                {% set urgency = secondsLeft < 86400 ? 'text-danger' : (secondsLeft < 604800 ? 'text-warning' : '') %}
-                <span>
-                    <i class="fas fa-ticket"></i>
-                    {{ 'Sign-up closes:'|trans }}
-                    <span class="{{ urgency }}">
-                        {{ signupList.getCloseDate|format_datetime(pattern: 'EEE d MMM. HH:mm', locale: app.request.locale) }} ({{ 'in %duration%'|trans({'%duration%': human_time_diff(now, signupList.getCloseDate)}) }})
-                    </span>
-                    {% if activity.countPendingSignupLists > 1 %}
-                        <span class="text-muted">({{ 'more deadlines'|trans }})</span>
+        <div class="flex-grow-1 overflow-hidden d-flex flex-column flex-md-row justify-content-between gap-3">
+            <div class="flex-grow-1 overflow-hidden">
+                <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
+                    <h3 class="h5 mb-0">
+                        {% if activity.isCancelled %}
+                            <span class="text-danger">{{ '[CANCELLED]'|trans }}</span>
+                            <a class="text-muted text-decoration-line-through"
+                               href="{{ path('activity/view', {'activity': activity.getId}) }}">{{ activity.getName|localise_text }}</a>
+                        {% else %}
+                            <a class="text-body"
+                               href="{{ path('activity/view', {'activity': activity.getId}) }}">{{ activity_title(activity) }}</a>
+                        {% endif %}
+                    </h3>
+                    {% if activity.getCategory.value not in ['other', 'uncategorised'] %}
+                        <span class="badge badge-gewis-primary">{{ activity.getCategory|trans }}</span>
                     {% endif %}
-                </span>
-            {% else %}
-                <span>
-                    <i class="fas fa-ticket"></i>
-                    {{ 'Sign-up opens:'|trans }}
-                    {{ signupList.getOpenDate|format_datetime(pattern: 'EEE d MMM. HH:mm', locale: app.request.locale) }}
-                    ({{ 'in %duration%'|trans({'%duration%': human_time_diff(now, signupList.getOpenDate)}) }})
-                    {% if activity.countPendingSignupLists > 1 %}
-                        <span>({{ 'more deadlines'|trans }})</span>
+                    {% for label in activity.getLabels %}
+                        <span class="badge badge-tag">{{ label.getName|localise_text }}</span>
+                    {% endfor %}
+                </div>
+
+                <div class="d-flex d-md-none flex-wrap align-items-center gap-2 mb-3">{{ dateMeta }}</div>
+
+                <div class="activity-description mb-3" data-controller="description-toggle"
+                     data-description-toggle-more-value="{{ 'Show more'|trans }}"
+                     data-description-toggle-less-value="{{ 'Show less'|trans }}">
+                    <div class="activity-description-content" data-description-toggle-target="content">
+                        {{ activity.getDescription|localise_text|markdown(['p', 'br', 'strong', 'em', 'del', 'a', 'ul', 'ol', 'li']) }}
+                    </div>
+                    <button type="button" class="btn btn-link btn-sm p-0 d-none"
+                            data-description-toggle-target="button"
+                            data-action="description-toggle#toggle">
+                        {{ 'Show more'|trans }}
+                    </button>
+                </div>
+
+                <div class="d-flex flex-wrap align-items-center gap-2 text-muted">
+                    <span class="small"><i class="fas fa-location-dot"></i> {{ activity.getLocation|localise_text }}</span>
+                    <span class="small"><i class="fas fa-tag"></i> {{ activity.getCosts|localise_text }}</span>
+                    {% set signupList = activity.getRelevantSignupList %}
+                    {% if not activity.isCancelled and null !== signupList %}
+                        {% if signupList.isOpen %}
+                            {% set secondsLeft = signupList.getCloseDate.timestamp - now.timestamp %}
+                            {% set tone = secondsLeft < 86400 ? 'badge-danger' : (secondsLeft < 604800 ? 'badge-warning' : 'badge-tag') %}
+                            <span class="badge badge-squared text-wrap {{ tone }}">
+                                <i class="fas fa-ticket"></i>
+                                {{ 'Sign-up closes:'|trans }}
+                                {{ signupList.getCloseDate|format_datetime(pattern: 'EEE d MMM. HH:mm', locale: app.request.locale) }} ({{ 'in %duration%'|trans({'%duration%': human_time_diff(now, signupList.getCloseDate)}) }})
+                                {% if activity.countPendingSignupLists > 1 %}
+                                    ({{ 'more deadlines'|trans }})
+                                {% endif %}
+                            </span>
+                        {% else %}
+                            <span class="badge badge-squared text-wrap badge-tag">
+                                <i class="fas fa-ticket"></i>
+                                {{ 'Sign-up opens:'|trans }}
+                                {{ signupList.getOpenDate|format_datetime(pattern: 'EEE d MMM. HH:mm', locale: app.request.locale) }} ({{ 'in %duration%'|trans({'%duration%': human_time_diff(now, signupList.getOpenDate)}) }})
+                                {% if activity.countPendingSignupLists > 1 %}
+                                    ({{ 'more deadlines'|trans }})
+                                {% endif %}
+                            </span>
+                        {% endif %}
                     {% endif %}
-                </span>
-            {% endif %}
-        {% endif %}
+                </div>
+            </div>
+
+            <div class="d-none d-md-flex flex-column align-items-end text-end flex-shrink-0 gap-2">
+                {{ dateMeta }}
+            </div>
+        </div>
     </div>
 </div>
diff --git a/templates/partials/activity/signup-fields.html.twig b/templates/partials/activity/signup-fields.html.twig
index 66ad04a215..fc5127632d 100644
--- a/templates/partials/activity/signup-fields.html.twig
+++ b/templates/partials/activity/signup-fields.html.twig
@@ -1,5 +1,3 @@
-{# The sign-up form's custom fields (those prefixed `field_`), rendered in order. Shared by the member, external-guest,
-   manage and organiser-added sign-up forms. Pass the form with `{ form: form } only`. #}
 {% for child in form %}
     {% if child.vars.name starts with 'field_' %}
         {{ form_row(child) }}
diff --git a/templates/partials/activity/signup-list.html.twig b/templates/partials/activity/signup-list.html.twig
index bc2f7b0a50..82fc429139 100644
--- a/templates/partials/activity/signup-list.html.twig
+++ b/templates/partials/activity/signup-list.html.twig
@@ -1,6 +1,3 @@
-{# Accordion panel for one sign-up list. Params: `list` (SignupListView), `collapseId` (string), `open` (bool). The
-   member body is the Activity:SignupList live component; the guest external sign-up is the Activity:ExternalSignupForm
-   live component (both inside Bootstrap modals whose chrome is server-rendered here). #}
 <div class="panel mb-3">
     <button type="button"
             class="panel-heading signup-list-heading d-flex justify-content-between align-items-start gap-2 w-100 border-0 bg-transparent text-start {% if not open %}collapsed{% endif %}"
@@ -15,7 +12,6 @@
             </span>
             <span class="d-flex flex-wrap align-items-center gap-1 mb-1">
                 {% if list.cancelled %}
-                    {# A cancelled activity freezes its sign-ups, so surface that rather than an Open/Closed window. #}
                     <span class="badge badge-danger">{{ 'Cancelled'|trans }}</span>
                 {% elseif list.isOpen %}
                     <span class="badge badge-success">{{ 'Open'|trans }}</span>
@@ -37,7 +33,6 @@
                     <span class="badge badge-tag">{{ 'GEWIS members only'|trans }}</span>
                 {% endif %}
             </span>
-            {# The configured window and upcoming-draw notice are meaningless once the activity is cancelled. #}
             {% if not list.cancelled %}
                 <small class="text-muted d-block">
                     {{ 'Open from %open% until %close%.'|trans({
@@ -57,17 +52,11 @@
         <i class="fas fa-chevron-down signup-list-chevron"></i>
     </button>
     <div class="collapse {% if open %}show{% endif %}" id="{{ collapseId }}">
-        {# `pt-0`: the heading already supplies bottom padding, and the `.collapse` wrapper defeats the panel's
-           `.panel-heading + .panel-body { padding-top: 0 }` rule, so without this the body's top padding doubles it. #}
+        {# pt-0: the .collapse wrapper defeats the panel's `.panel-heading + .panel-body` zero-top-padding rule, so the body's top padding would otherwise double. #}
         <div class="panel-body pt-0">
             {% if is_granted('ROLE_USER') %}
-                {# The member-facing body (buttons, sign-up modal and subscriber table) is a live component, so signing
-                   up, editing and unsubscribing all update inline. Unsubscribe is driven by the page-level
-                   #confirm-modal (included once in the activity view). #}
                 <twig:Activity:SignupList :signupList="list.listId" />
             {% else %}
-                {# Guests: the external sign-up uses a plain Bootstrap modal + form (its Altcha captcha cannot live in a
-                   live component); an invalid submit re-renders the page and re-opens this modal with the errors. #}
                 {% if list.cancelled %}
                     <p class="text-danger mb-3">
                         <i class="fas fa-ban"></i>
@@ -111,10 +100,7 @@
                             </div>
                         </div>
 
-                        {# Recovery path for a lost/undelivered confirmation email: a plain rate-limited form (no
-                           captcha: it creates no data, only remails an address that already has a pending sign-up)
-                           that always reports the same neutral result, so it never reveals whether an address is
-                           signed up. #}
+                        {# No captcha: this creates no data (only remails a pending sign-up) and always reports the same neutral result, so it never reveals whether an address is signed up. #}
                         <div class="modal fade" id="{{ resendModalId }}" tabindex="-1" aria-hidden="true">
                             <div class="modal-dialog modal-dialog-centered">
                                 <div class="modal-content">
diff --git a/templates/partials/activity/year-switcher.html.twig b/templates/partials/activity/year-switcher.html.twig
index 8f17736a60..60b1ea4262 100644
--- a/templates/partials/activity/year-switcher.html.twig
+++ b/templates/partials/activity/year-switcher.html.twig
@@ -1,7 +1,5 @@
-{# Association-year switcher (previous/next + dropdown). Params: route (route name), year (?int), years (int[]). Preserves the current query string so the active filters survive a year change. #}
 {% if years is not empty %}
     {% set query = app.request.query.all %}
-    {# Jump to the nearest year actually present in the list, so gaps in a sparse list don't land on an empty year. #}
     {% set newer_years = year is not null ? years|filter(y => y > year) : [] %}
     {% set older_years = year is not null ? years|filter(y => y < year) : [] %}
     {% set newer_url = newer_years is not empty ? path(route, query|merge({ year: min(newer_years) })) : null %}
diff --git a/templates/partials/application/confirm-modal.html.twig b/templates/partials/application/confirm-modal.html.twig
index c6a184afa5..e481ddf326 100644
--- a/templates/partials/application/confirm-modal.html.twig
+++ b/templates/partials/application/confirm-modal.html.twig
@@ -1,7 +1,4 @@
-{# A shared confirmation modal for live-component actions, driven by the `confirm-modal` Stimulus controller. Render it
-   once per page, OUTSIDE any live component, so a component's re-render after the confirmed action never touches it.
-   A trigger button opens it with `data-bs-toggle="modal" data-bs-target="#confirm-modal"` and supplies the title,
-   message, confirm label and the live action to run via `data-confirm-*` attributes (see the controller). #}
+{# Render once per page, outside any live component, so a component re-render after the confirmed action can't orphan it. #}
 <div class="modal fade" id="confirm-modal" data-controller="confirm-modal" tabindex="-1"
      aria-labelledby="confirm-modal-label" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">