diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
index ea07695..d951017 100644
--- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
@@ -72,91 +72,93 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
     const alpha = Array.from(Array(26)).map((_e, i) => i + 65);
     const alphabet = alpha.map((x) => String.fromCharCode(x));
     return (
-
-        <div className="question-container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div className="question content">
-                <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
-            </div>
-            <div className="choices-wrapper mb-1">
-                
-                {question.choices.map((choice, i) => {
-                    const selected = answer === choice.formattedText.text ? 'selected' : '';
-                    const rateStyle = showCorrectAnswers ? {
-                        backgroundImage: `linear-gradient(to right, ${choice.isCorrect ? 'lightgreen' : 'lightcoral'} ${pickRates.percentages[i]}%, transparent ${pickRates.percentages[i]}%)`,
-                        color: 'black'
-                    } : {};
-                    return (
-                        <div key={choice.formattedText.text + i} className="choice-container">
-                            {/* <Button
-                                variant="text"
-                                className="button-wrapper"
-                                disabled={disableButton}
-                                onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
-                                {showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
-                                :``}
-                                <div className={`circle ${selected}`}>{alphabet[i]}</div>
-                                <div className={`answer-text ${selected}`}>
-                                    <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
+        <div className="container">
+            <div className="row justify-content-center">
+                <div className="col-auto question-container">
+                    <div className="question content">
+                        <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
+                    </div>
+                    <div className="choices-wrapper mb-1">
+                        
+                        {question.choices.map((choice, i) => {
+                            const selected = answer === choice.formattedText.text ? 'selected' : '';
+                            const rateStyle = showCorrectAnswers ? {
+                                backgroundImage: `linear-gradient(to right, ${choice.isCorrect ? 'lightgreen' : 'lightcoral'} ${pickRates.percentages[i]}%, transparent ${pickRates.percentages[i]}%)`,
+                                color: 'black'
+                            } : {};
+                            return (
+                                <div key={choice.formattedText.text + i} className="choice-container">
+                                    {/* <Button
+                                        variant="text"
+                                        className="button-wrapper"
+                                        disabled={disableButton}
+                                        onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
+                                        {showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
+                                        :``}
+                                        <div className={`circle ${selected}`}>{alphabet[i]}</div>
+                                        <div className={`answer-text ${selected}`}>
+                                            <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
+                                        </div>
+                                        {choice.formattedFeedback && showAnswer && (
+                                        <div className="feedback-container mb-1 mt-1/2">
+                                            <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
+                                        </div>
+                                    )}
+                                    </Button> */}
+                                    <Button
+                                        variant="text"
+                                        className={`button-wrapper ${selected}`}
+                                        disabled={disableButton}
+                                        onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
+                                        >
+                                        <div className={`circle ${selected}`}>{alphabet[i]}</div>
+                                        <div className={`answer-text ${selected}`}
+                                        style={rateStyle}>
+                                            <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
+                                        </div>
+                                        {choice.formattedFeedback && showAnswer && (
+                                            <div className="feedback-container mb-1 mt-1/2">
+                                                <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
+                                            </div>
+                                        )}
+                                        {showCorrectAnswers && <div className="pick-rate">{choice.isCorrect ? '✅' : '❌'} {`${pickRates.counts[i]}/${pickRates.totalCount} (${pickRates.percentages[i].toFixed(1)}%)`}</div>}
+                                    </Button>
                                 </div>
-                                {choice.formattedFeedback && showAnswer && (
-                                <div className="feedback-container mb-1 mt-1/2">
-                                    <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
-                                </div>
-                            )}
-                            </Button> */}
-                            <Button
-                                variant="text"
-                                className={`button-wrapper ${selected}`}
-                                disabled={disableButton}
-                                onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
-                                >
-                                <div className={`circle ${selected}`}>{alphabet[i]}</div>
-                                <div className={`answer-text ${selected}`}
-                                style={rateStyle}>
-                                    <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
-                                </div>
-                                {choice.formattedFeedback && showAnswer && (
-                                    <div className="feedback-container mb-1 mt-1/2">
-                                        <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
-                                    </div>
-                                )}
-                                {showCorrectAnswers && <div className="pick-rate">{choice.isCorrect ? '✅' : '❌'} {`${pickRates.counts[i]}/${pickRates.totalCount} (${pickRates.percentages[i].toFixed(1)}%)`}</div>}
-                            </Button>
-                        </div>
-                    );
-                })}
-            </div>
-            {question.formattedGlobalFeedback && showAnswer && (
-                <div className="global-feedback mb-2">
-                                    <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
-                                    </div>
-            )}
-            
-            {!showAnswer && handleOnSubmitAnswer && (
-                
-                <Button
-                    variant="contained"
-                    onClick={() =>
-                        answer !== "" && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)
-                    }
-                    disabled={answer === '' || answer === null}
-                >
-                    Répondre
+                            );
+                        })}
+                    </div>
+                    {question.formattedGlobalFeedback && showAnswer && (
+                        <div className="global-feedback mb-2">
+                                            <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
+                                            </div>
+                    )}
                     
-                </Button>
-            )}
-
-            {isDisplayOnly && (
-                <div>
-                    <Button
-                    variant="outlined"
-                    onClick={toggleShowCorrectAnswers}
-                    color="primary"
-                >
-                    {showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
-                </Button>
+                    {!showAnswer && handleOnSubmitAnswer && (
+                        
+                        <Button
+                            variant="contained"
+                            onClick={() =>
+                                answer !== "" && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)
+                            }
+                            disabled={answer === '' || answer === null}
+                        >
+                            Répondre
+                            
+                        </Button>
+                    )}
                 </div>
-            )}
+                {isDisplayOnly && (
+                        <div className="col-auto d-flex align-items-center justify-content-end">
+                            <Button
+                            variant="outlined"
+                            onClick={toggleShowCorrectAnswers}
+                            color="primary"
+                        >
+                            {showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
+                        </Button>
+                        </div>
+                    )}
+            </div>
         </div>
     );
 };
diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
index 1f77ef7..796614b 100644
--- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
@@ -105,7 +105,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                     </div>
                     {showCorrectAnswers && (
                         <>
-                            <div className="pick-rate">{question.isTrue ? '✅' : '❌'} {pickRates.trueRate}/{pickRates.totalCount} ({pickRates.trueRate.toFixed(1)}%)</div>
+                            <div className="pick-rate">{question.isTrue ? '✅' : '❌'} {pickRates.trueCount}/{pickRates.totalCount} ({pickRates.trueRate.toFixed(1)}%)</div>
                         </>
                     )}