diff --git a/client/src/templates/Challenges/components/challenge-explanation.css b/client/src/templates/Challenges/components/challenge-explanation.css
index c9fd943be59..d81c7e6726e 100644
--- a/client/src/templates/Challenges/components/challenge-explanation.css
+++ b/client/src/templates/Challenges/components/challenge-explanation.css
@@ -1,3 +1,3 @@
-.explanation {
+.challenge-summary {
   cursor: pointer;
 }
diff --git a/client/src/templates/Challenges/components/challenge-explanation.tsx b/client/src/templates/Challenges/components/challenge-explanation.tsx
index 4f5190d8e4d..4470f1c1a8a 100644
--- a/client/src/templates/Challenges/components/challenge-explanation.tsx
+++ b/client/src/templates/Challenges/components/challenge-explanation.tsx
@@ -16,8 +16,10 @@ function ChallengeExplanation({
 
   return (
     <>
-      <details className='explanation'>
-        <summary>{t('learn.explanation')}</summary>
+      <details>
+        <summary className='challenge-summary'>
+          {t('learn.explanation')}
+        </summary>
         <Spacer size='m' />
         <PrismFormatted className={'line-numbers'} text={explanation} />
       </details>