diff --git a/web/src/components/events/DateList.tsx b/web/src/components/events/DateList.tsx
index 19e7cf5..21e9d1b 100644
--- a/web/src/components/events/DateList.tsx
+++ b/web/src/components/events/DateList.tsx
@@ -16,7 +16,11 @@ const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
   const wholeCastle = occurrence.venue?.slug === "hele-huset";
 
   return (
-    <li className={styles.date}>
+    <li
+      className={`${styles.date} ${
+        isTodayOrFuture(occurrence.start) ? styles.future : styles.past
+      }`}
+    >
       <div className={styles.time}>
         <span className={styles.day}>
           {formatExtendedDateTime(occurrence.start, true)}
diff --git a/web/src/components/events/dateList.module.scss b/web/src/components/events/dateList.module.scss
index 2c0b6c0..e0db33a 100644
--- a/web/src/components/events/dateList.module.scss
+++ b/web/src/components/events/dateList.module.scss
@@ -4,12 +4,6 @@
 
 .dateList {
   list-style: none;
-
-  &[data-showall=true] {
-    .date {
-      display: block;
-    }
-  }
 }
 
 .date {
@@ -21,12 +15,6 @@
   line-height: 1.4;
   padding: var(--spacing-s) 0;
   border-bottom: var(--border);
-
-  display: none;
-
-  &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4) {
-    display: block;
-  }
 }
 
 .header {