diff --git a/resources/css/individual.css b/resources/css/individual.css
index 30ea28f..fc8949a 100644
--- a/resources/css/individual.css
+++ b/resources/css/individual.css
@@ -259,8 +259,9 @@
     opacity: 0.4;
 }
 
-/* ---------- iOS-style toggle for "Events of close relatives" ---------- */
+/* ---------- iOS-style toggle for "Associated events" & "Events of close relatives" ---------- */
 
+.wt-route-IndividualPage #show-associate-facts,
 .wt-route-IndividualPage #show-relatives-facts {
     appearance: none;
     -webkit-appearance: none;
@@ -278,6 +279,7 @@
     vertical-align: middle;
 }
 
+.wt-route-IndividualPage #show-associate-facts::before,
 .wt-route-IndividualPage #show-relatives-facts::before {
     content: '';
     position: absolute;
@@ -291,10 +293,12 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
+.wt-route-IndividualPage #show-associate-facts:checked,
 .wt-route-IndividualPage #show-relatives-facts:checked {
     background: var(--color-primary, #5E81AC);
 }
 
+.wt-route-IndividualPage #show-associate-facts:checked::before,
 .wt-route-IndividualPage #show-relatives-facts:checked::before {
     transform: translateX(20px);
 }
@@ -409,14 +413,16 @@
     cursor: pointer;
 }
 
-/* Relation fact rows: fix collapse visibility.
+/* Relation/associate fact rows: fix collapse visibility.
    Our display:flex on tr overrides Bootstrap's collapse display:none.
    Must restore collapse behavior explicitly. */
-.wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-relation-fact.collapse:not(.show) {
+.wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-relation-fact.collapse:not(.show),
+.wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-associate-fact.collapse:not(.show) {
     display: none !important;
 }
 
-.wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-relation-fact.collapse.show {
+.wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-relation-fact.collapse.show,
+.wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-associate-fact.collapse.show {
     display: flex !important;
 }
 
@@ -626,10 +632,12 @@
     background: var(--color-surface, #1a1a1a);
 }
 
+:root[data-theme=dark] .wt-route-IndividualPage #show-associate-facts,
 :root[data-theme=dark] .wt-route-IndividualPage #show-relatives-facts {
     background: #4C566A;
 }
 
+:root[data-theme=dark] .wt-route-IndividualPage #show-associate-facts:checked,
 :root[data-theme=dark] .wt-route-IndividualPage #show-relatives-facts:checked {
     background: var(--color-primary, #5E81AC);
 }
@@ -704,10 +712,12 @@
         background: var(--color-surface, #1a1a1a);
     }
 
+    :root:not([data-theme=light]) .wt-route-IndividualPage #show-associate-facts,
     :root:not([data-theme=light]) .wt-route-IndividualPage #show-relatives-facts {
         background: #4C566A;
     }
 
+    :root:not([data-theme=light]) .wt-route-IndividualPage #show-associate-facts:checked,
     :root:not([data-theme=light]) .wt-route-IndividualPage #show-relatives-facts:checked {
         background: var(--color-primary, #5E81AC);
     }
@@ -776,10 +786,12 @@
 
 /* --- Light mode explicit overrides (toggle track) --- */
 
+:root[data-theme=light] .wt-route-IndividualPage #show-associate-facts,
 :root[data-theme=light] .wt-route-IndividualPage #show-relatives-facts {
     background: #D8DEE9;
 }
 
+:root[data-theme=light] .wt-route-IndividualPage #show-associate-facts:checked,
 :root[data-theme=light] .wt-route-IndividualPage #show-relatives-facts:checked {
     background: var(--color-primary, #5E81AC);
 }