diff --git a/src/components/Quiz/QuizBegin.tsx b/src/components/Quiz/QuizBegin.tsx
index 82aa61d06e86639708def7bb99797f406888d9f9..683a6b85ad3a2fb10442f4d2d683f5b69f560229 100644
--- a/src/components/Quiz/QuizBegin.tsx
+++ b/src/components/Quiz/QuizBegin.tsx
@@ -32,16 +32,18 @@ const QuizBegin: React.FC<QuizBeginProps> = ({
   }
 
   return (
-    <div className="quiz-begin-container">
-      <StyledIcon className="quiz-icon" icon={quizIcon} size={180} />
-      <StyledIcon className="quiz-icon-stars" icon={quizStars} size={150} />
-      <div className="quiz-explanation text-18-bold">
-        {t('quiz.explanation')}
-      </div>
-      <div className="button-start">
-        <StyledStopButton color="secondary" onClick={launchQuiz}>
-          {t('duel.start_button')}
-        </StyledStopButton>
+    <div className="quiz-container">
+      <div className="quiz-begin-container">
+        <StyledIcon className="quiz-icon" icon={quizIcon} size={180} />
+        <StyledIcon className="quiz-icon-stars" icon={quizStars} size={150} />
+        <div className="quiz-explanation text-18-bold">
+          {t('quiz.explanation')}
+        </div>
+        <div className="button-start">
+          <StyledStopButton color="secondary" onClick={launchQuiz}>
+            {t('duel.start_button')}
+          </StyledStopButton>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/Quiz/QuizCustomQuestionContent.tsx b/src/components/Quiz/QuizCustomQuestionContent.tsx
index 62c1165ef4e143fd2aee55245b975d8103cd0204..609785c30553d7f421c718a50e00d2b69c255988 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
 import './quizQuestion.scss'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
 import QuizExplanationModal from 'components/Quiz/QuizExplanationModal'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -72,12 +74,17 @@ const QuizCustomQuestionContent: React.FC<QuizCustomQuestionContent> = ({
   return (
     <div className="quiz-container">
       <div className="question-container">
-        <button className="btn-back" onClick={goBack}>
+        <StyledIconButton
+          className="btn-back"
+          icon={CloseIcon}
+          onClick={goBack}
+        />
+        {/* <button className="btn-back" onClick={goBack}>
           X
-        </button>
+        </button> */}
         <p className="index-question">5/5</p>
         <p className="question-title text-18-bold">
-          Question sur votre consommation
+          {t('quiz.consumption_question')}
         </p>
         {question && (
           <>
diff --git a/src/components/Quiz/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal.tsx
index 791d49a33650f52ba8dd43a5d8f50f7d6af2a29f..9c8ed9156593502ed596bda0a647d1b304e97eb6 100644
--- a/src/components/Quiz/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import './quizExplanationModal.scss'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { QuestionEntity, UserChallenge } from 'models'
@@ -21,6 +21,13 @@ const QuizExplanationModal: React.FC<QuizExplanationModalProps> = ({
   handleCloseClick,
 }: QuizExplanationModalProps) => {
   const { t } = useI18n()
+  const [validAnswer, setValidAnswer] = useState<number>(0)
+  useEffect(() => {
+    if (open && question) {
+      const resultIndex = question.answers.findIndex(answer => answer.isTrue)
+      setValidAnswer(resultIndex)
+    }
+  }, [open, question])
   return (
     <Modal open={open} border={true} handleCloseClick={handleCloseClick}>
       <div className="em-root modal-congrats">
@@ -35,7 +42,7 @@ const QuizExplanationModal: React.FC<QuizExplanationModalProps> = ({
                 }
               ></div>
               <div className="text-22-bold answer-label">
-                {question.answers[answerIndex].answerLabel}
+                {question.answers[validAnswer].answerLabel}
               </div>
               <div className="text-16-bold">{question.explanation}</div>
             </>
diff --git a/src/components/Quiz/QuizFinish.tsx b/src/components/Quiz/QuizFinish.tsx
index 41dd9ea42359df8712816b5068a4f14e08a29622..cc199db2626e1f02070de5913fc08a0418403767 100644
--- a/src/components/Quiz/QuizFinish.tsx
+++ b/src/components/Quiz/QuizFinish.tsx
@@ -35,26 +35,28 @@ const QuizFinish: React.FC<QuizFinishProps> = ({
     history.push('/challenges')
   }
   return (
-    <div className="quiz-finish-container">
-      <div>
-        <div className="score-final-title">{t('quiz.score_final')}</div>
-        <div className="score-final">
-          <span>{userChallenge.quiz.result}</span> / 5
+    <div className="quiz-container">
+      <div className="quiz-finish-container">
+        <div>
+          <div className="score-final-title">{t('quiz.score_final')}</div>
+          <div className="score-final">
+            <span>{userChallenge.quiz.result}</span> / 5
+          </div>
+          <div className="score-label">{t('quiz.earn')}</div>
+          <div className="score-stars">
+            {userChallenge.quiz.result}
+            <StyledIcon className="quiz-icon" icon={starResult} size={30} />
+          </div>
         </div>
-        <div className="score-label">{t('quiz.earn')}</div>
-        <div className="score-stars">
-          {userChallenge.quiz.result}
-          <StyledIcon className="quiz-icon" icon={starResult} size={30} />
+        <div className="button-start">
+          <StyledStopButton color="secondary" onClick={goBack}>
+            {t('quiz.go_back')}
+          </StyledStopButton>
+          <StyledStopButton color="secondary" onClick={retryQuiz}>
+            {t('quiz.try_again')}
+          </StyledStopButton>
         </div>
       </div>
-      <div className="button-start">
-        <StyledStopButton color="secondary" onClick={goBack}>
-          {t('quiz.go_back')}
-        </StyledStopButton>
-        <StyledStopButton color="secondary" onClick={retryQuiz}>
-          {t('quiz.try_again')}
-        </StyledStopButton>
-      </div>
     </div>
   )
 }
diff --git a/src/components/Quiz/QuizQuestion.scss b/src/components/Quiz/QuizQuestion.scss
index 4f43f09417058285cb4b532f471e9cd8d87c3d26..a5f25f8134ba09ca9e6703b9434f00b74b3e58fa 100644
--- a/src/components/Quiz/QuizQuestion.scss
+++ b/src/components/Quiz/QuizQuestion.scss
@@ -17,10 +17,21 @@
     background: linear-gradient(180deg, #323339 0%, #25262b 100%);
     height: 100%;
     position: relative;
+    @media (min-width: $width-large-phone){
+      width: 60%;
+    }
+    @media (min-width: $width-large-desktop){
+      width: 45%;
+      padding: 0.5rem 1rem 2rem;
+
+    }
     .question{
       color: $grey-bright;
       text-align: center;
       margin-bottom: 2rem;
+      @media (min-width: $width-large-phone){
+        padding: 0 1rem;
+      }
     }
     .question-title{
       color: $blue-light;
@@ -40,6 +51,9 @@
   .answer{
     text-align: center;
     width: 100%;
+    @media (min-width: $width-large-phone){
+      max-width: 80%;
+    }
     input[type="radio"]{
       display: none;
     }
diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx
index 74c5f5afa793e5a5c0b2cda68f7ce3a14e401433..a20de748b3b61106fb928e42412d70f49e750b33 100644
--- a/src/components/Quiz/QuizQuestion.tsx
+++ b/src/components/Quiz/QuizQuestion.tsx
@@ -47,7 +47,7 @@ const QuizQuestion: React.FC<QuizQuestion> = ({
     if (isCustomQuest) {
       loadCustomQuestion()
     }
-  }, [isCustomQuest])
+  }, [isCustomQuest, client])
 
   return (
     <>
diff --git a/src/components/Quiz/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestionContent.tsx
index cacc3c31aa7ecdc94c26e7ef0e045668d467e132..50ad90d6d3804e43fd8b7187bd903dbae8d93251 100644
--- a/src/components/Quiz/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestionContent.tsx
@@ -1,5 +1,7 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import './quizQuestion.scss'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
 import QuizExplanationModal from 'components/Quiz/QuizExplanationModal'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -79,14 +81,17 @@ const QuizQuestionContent: React.FC<QuizQuestionContent> = ({
         setQuestionIndex(questionIndex + 1)
       }
       setEnableNextQuest(false)
+      setUserChoice('')
     }
-  }, [enableNextQuest, questionIndex, userChallenge])
+  }, [enableNextQuest, questionIndex, userChallenge, userChoice])
   return (
     <div className="quiz-container">
       <div className="question-container">
-        <button className="btn-back" onClick={goBack}>
-          X
-        </button>
+        <StyledIconButton
+          className="btn-back"
+          icon={CloseIcon}
+          onClick={goBack}
+        />
         <p className="index-question">{questionIndex + 1}/5</p>
         <p className="question text-18-bold">
           {userChallenge.quiz.questions[questionIndex].questionLabel}
diff --git a/src/components/Quiz/quizBegin.scss b/src/components/Quiz/quizBegin.scss
index 70a0a149eac46ac7d95c33d16c46aa9a1e7462e2..b85c9d0b1e48225f192fa4668b617fb10a1a93a6 100644
--- a/src/components/Quiz/quizBegin.scss
+++ b/src/components/Quiz/quizBegin.scss
@@ -1,5 +1,12 @@
 @import '../../styles/base/color';
+@import '../../styles/base/breakpoint';
 
+.quiz-container{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
 .quiz-begin-container {
   display: flex;
   flex-direction: column;
@@ -13,6 +20,14 @@
   background: linear-gradient(180deg, #323339 0%, #25262b 100%);
   height: 70vh;
   text-align: center;
+  @media (min-width: $width-large-phone){
+    max-width: 60%;
+    height: 100%;
+  }
+  @media (min-width: $width-large-desktop){
+    max-width: 40%;
+    padding: 0.5rem 1rem 2rem;
+  }
   .btn-start{
     margin-top: auto;
     border-color: $grey-bright;
@@ -23,5 +38,9 @@
 .quiz-explanation{
   margin-bottom: 2rem;
   line-height: 24px;
+  padding: 0 1rem;
+  @media (min-width: $width-large-desktop){
+    padding: 0rem 2rem;
+  }
 }
 }
diff --git a/src/components/Quiz/quizExplanationModal.scss b/src/components/Quiz/quizExplanationModal.scss
index 574e665dd4b9244f33f33aceeb7a3d6ff46255ca..fb212d4ce67b8deb1ed8b13f0f08a3c7625757dc 100644
--- a/src/components/Quiz/quizExplanationModal.scss
+++ b/src/components/Quiz/quizExplanationModal.scss
@@ -8,6 +8,7 @@
   .modal-overlay{
     .modal-box{
       text-align: center;
+      padding: 1rem 0;
       &.modal-box-bordered{
         border: none;
       }
diff --git a/src/components/Quiz/quizFinish.scss b/src/components/Quiz/quizFinish.scss
index aba2c1250e249dc19b52f97a830c0222fa918221..f1a7a01be3a17455c06e276f0f8933732a364948 100644
--- a/src/components/Quiz/quizFinish.scss
+++ b/src/components/Quiz/quizFinish.scss
@@ -1,4 +1,5 @@
 @import '../../styles/base/color';
+@import '../../styles/base/breakpoint';
 
 .quiz-finish-container {
   display: flex;
@@ -14,6 +15,14 @@
   background: linear-gradient(180deg, #323339 0%, #25262b 100%);
   height: 100%;
   text-align: center;
+  @media (min-width: $width-large-phone){
+    width: 60%;
+    height: 100%;
+  }
+  @media (min-width: $width-large-desktop){
+    width: 40%;
+    padding: 0.5rem 1rem 2rem;
+  }
   button{
     border-color: $grey-bright;
   }
diff --git a/src/components/Quiz/quizQuestion.scss b/src/components/Quiz/quizQuestion.scss
index 4f43f09417058285cb4b532f471e9cd8d87c3d26..a5f25f8134ba09ca9e6703b9434f00b74b3e58fa 100644
--- a/src/components/Quiz/quizQuestion.scss
+++ b/src/components/Quiz/quizQuestion.scss
@@ -17,10 +17,21 @@
     background: linear-gradient(180deg, #323339 0%, #25262b 100%);
     height: 100%;
     position: relative;
+    @media (min-width: $width-large-phone){
+      width: 60%;
+    }
+    @media (min-width: $width-large-desktop){
+      width: 45%;
+      padding: 0.5rem 1rem 2rem;
+
+    }
     .question{
       color: $grey-bright;
       text-align: center;
       margin-bottom: 2rem;
+      @media (min-width: $width-large-phone){
+        padding: 0 1rem;
+      }
     }
     .question-title{
       color: $blue-light;
@@ -40,6 +51,9 @@
   .answer{
     text-align: center;
     width: 100%;
+    @media (min-width: $width-large-phone){
+      max-width: 80%;
+    }
     input[type="radio"]{
       display: none;
     }
diff --git a/src/db/quizEntity.json b/src/db/quizEntity.json
index 002de94dca48db47feacfeac3d42683f6e93c030..2fdd991ff089896485c8abb6be8a6e3965498793 100644
--- a/src/db/quizEntity.json
+++ b/src/db/quizEntity.json
@@ -19,59 +19,59 @@
         "source": "string"
       },
       {
-        "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
+        "questionLabel": "Quelle type de pompes étaient utilisées à l'usine des eaux de Caluire jusqu'en 1910 ?",
         "answers": [
           {
-            "answerLabel": "1 point d’eau public pour 800 habitants.",
+            "answerLabel": "Pompe à cordes",
             "isTrue": true
           },
           {
-            "answerLabel": "1 point d’eau public pour 400 habitants.",
+            "answerLabel": "Pompe de Cornouailles",
             "isTrue": false
           },
           {
-            "answerLabel": "1 point d’eau public pour 200 habitants.",
+            "answerLabel": "Pompe à air",
             "isTrue": false
           }
         ],
-        "explanation": "string",
+        "explanation": "Mise en fonctionnement en 1856, 3 pompes à vapeur dites de Cornouailles produisent quelque 20 000 m3 d'eau par jour. Ces pompes mesurent 20 m de haut et 13 m de large pour un poids de 200 tonnes. Leur balancier de 35 tonnes s'actionne toutes les 6 secondes, permettant ainsi l'envoi de 600 m3 d'eau par heure.",
         "source": "string"
       },
       {
-        "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
+        "questionLabel": "Quelle est le nom du principal champ de captage d’eau potable de la Métropole ?",
         "answers": [
-          { "answerLabel": "François Mitterrand", "isTrue": false },
+          { "answerLabel": "Crémieux", "isTrue": false },
           {
-            "answerLabel": "Napoléon Ier",
+            "answerLabel": "Crépieux-Charmy",
             "isTrue": true
           },
           {
-            "answerLabel": "Napoléon III",
+            "answerLabel": "Charly",
             "isTrue": false
           }
         ],
-        "explanation": "string",
+        "explanation": "Crépieux-Charmy est le principal champ captant de la Métropole de Lyon",
         "source": "string"
       },
       {
-        "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
+        "questionLabel": "De quoi les nuages sont-ils constitués ?",
         "answers": [
-          { "answerLabel": "string", "isTrue": false },
+          { "answerLabel": "Vapeur d'eau", "isTrue": false },
           {
-            "answerLabel": "string",
+            "answerLabel": "Fumée",
             "isTrue": false
           },
           {
-            "answerLabel": "Aristide Dumont",
+            "answerLabel": "Gouttelettes d'eau et cristaux de glace",
             "isTrue": true
           }
         ],
-        "explanation": "string",
+        "explanation": "Les nuages sont constitués de gouttelettes d'eau et parfois aussi de cristaux de glace",
         "source": "string"
       }
     ],
     "customQuestion": {
-      "questionLabel": "CustomMaxLoadDate",
+      "questionLabel": "Quel jour ai-je le plus consommé la semaine dernière ?",
       "type": 0,
       "timeStep": 20,
       "interval": 30,
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 2a7bc483a2426381adff0dc438b9e4ed2a71548b..6daa53944582188bf889f5065503fada1a842577 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -399,6 +399,7 @@
     "go_back" : "Retour",
     "try_again" : "Rééssayer",
     "confirm": "Valider",
-    "next": "Suivant"
+    "next": "Suivant",
+    "consumption_question": "Question sur votre consommation"
   }
 }
diff --git a/src/services/quiz.service.ts b/src/services/quiz.service.ts
index 28add5e2efb6e240da07c232173b1c6489217c6b..995f29556741394a68be20c86cd5919b9101ae17 100644
--- a/src/services/quiz.service.ts
+++ b/src/services/quiz.service.ts
@@ -432,13 +432,24 @@ export default class QuizService {
       wrongAnswer = [-1, -2]
     }
     return [
-      { answerLabel: rightDate.toLocaleString(), isTrue: true },
       {
-        answerLabel: rightDate.plus({ day: wrongAnswer[0] }).toLocaleString(),
+        answerLabel: rightDate.toLocaleString({
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        }),
+        isTrue: true,
+      },
+      {
+        answerLabel: rightDate
+          .plus({ day: wrongAnswer[0] })
+          .toLocaleString({ year: 'numeric', month: 'long', day: 'numeric' }),
         isTrue: false,
       },
       {
-        answerLabel: rightDate.plus({ day: wrongAnswer[1] }).toLocaleString(),
+        answerLabel: rightDate
+          .plus({ day: wrongAnswer[1] })
+          .toLocaleString({ year: 'numeric', month: 'long', day: 'numeric' }),
         isTrue: false,
       },
     ]