diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.scss
index 2924af12cfc..243506a447b 100644
--- a/res/css/views/elements/_GenericEventListSummary.scss
+++ b/res/css/views/elements/_GenericEventListSummary.scss
@@ -67,14 +67,16 @@ limitations under the License.
         }
 
         .mx_GenericEventListSummary_toggle {
-            margin: 0 55px 0 5px;
+            margin-block: 0;
+            margin-inline-end: 55px;
 
             &[aria-expanded=false] {
                 order: 9;
+                margin-inline-start: 5px;
             }
 
             &[aria-expanded=true] {
-                text-align: right;
+                margin-inline-start: auto; // reduce clickable area
             }
         }
 
@@ -109,11 +111,6 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_GenericEventListSummary_toggle {
-    color: $accent;
-    cursor: pointer;
-}
-
 .mx_GenericEventListSummary_line {
     border-bottom: 1px solid $primary-hairline-color;
     margin-left: 63px;
diff --git a/src/components/views/elements/GenericEventListSummary.tsx b/src/components/views/elements/GenericEventListSummary.tsx
index 5a61cb04009..ddd6bdb9ec5 100644
--- a/src/components/views/elements/GenericEventListSummary.tsx
+++ b/src/components/views/elements/GenericEventListSummary.tsx
@@ -119,7 +119,12 @@ const GenericEventListSummary: React.FC<IProps> = ({
             data-layout={layout}
             data-testid={testId}
         >
-            <AccessibleButton className="mx_GenericEventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
+            <AccessibleButton
+                kind="link_inline"
+                className="mx_GenericEventListSummary_toggle"
+                onClick={toggleExpanded}
+                aria-expanded={expanded}
+            >
                 { expanded ? _t('collapse') : _t('expand') }
             </AccessibleButton>
             { body }