diff --git a/client/agenda/AgendaDetailsModal.vue b/client/agenda/AgendaDetailsModal.vue
index 2582bf2159..69c8ef8b53 100644
--- a/client/agenda/AgendaDetailsModal.vue
+++ b/client/agenda/AgendaDetailsModal.vue
@@ -274,6 +274,7 @@ async function fetchSessionMaterials () {
 <style lang="scss">
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "../shared/breakpoints";
 
 .agenda-eventdetails {
   width: 90vw;
@@ -403,5 +404,29 @@ async function fetchSessionMaterials () {
       font-size: 16px;
     }
   }
+
+  .n-card-header {
+    @media screen and (max-width: $bs5-break-sm) {
+      display: block;
+      padding: 1em;
+    }
+  }
+
+  .n-card__content {
+    @media screen and (max-width: $bs5-break-sm) {
+      padding: 1em;
+
+      .detail-title {
+        display: block;
+      }
+
+      .nav-link,
+      .nav-link.active {
+        display: grid;
+        width: 1em;
+        border-width: 1em;
+      }
+    }
+  }
 }
 </style>