From 3028e0242170d56922820a582c0eae0dfd221122 Mon Sep 17 00:00:00 2001
From: Elhoucine Azayou <houcineparade@gmail.com>
Date: Wed, 3 Jul 2024 15:37:28 +0200
Subject: [PATCH] feat(#vil-489): responsive vrac
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inclus les pages suivantes:
* creer reportage
* lancer un defi
* jeu mimic
* creer enigme
* reagir une activité
* poser une auestion
* parametrer hymne
* creer une histoire
* re-inventer histoire
* chanter un couplet
---
 src/components/Steps.tsx                      | 20 ++++-
 src/components/StepsButtons.tsx               | 22 ++++--
 src/components/activities/ActivitySelect.tsx  |  6 +-
 src/components/activities/List.tsx            |  6 +-
 .../anthem/AnthemTrack/AnthemTrack.module.css | 10 ---
 .../anthem/AnthemTrack/AnthemTrack.tsx        | 76 +++++++++++++------
 src/components/buttons/ThemeChoiceButton.tsx  | 14 +++-
 src/components/selectors/MimicSelector.tsx    | 51 +++++++++++--
 src/pages/chanter-un-couplet/1.tsx            |  5 +-
 src/pages/chanter-un-couplet/2.tsx            |  5 +-
 src/pages/chanter-un-couplet/3.tsx            |  5 +-
 src/pages/chanter-un-couplet/4.tsx            |  5 +-
 src/pages/chanter-un-couplet/5.tsx            |  5 +-
 src/pages/chanter-un-couplet/index.tsx        |  5 +-
 src/pages/chanter-un-couplet/success.tsx      |  5 +-
 src/pages/creer-un-jeu/index.tsx              |  5 +-
 src/pages/creer-un-jeu/mimique/1.tsx          |  5 +-
 src/pages/creer-un-jeu/mimique/2.tsx          |  5 +-
 src/pages/creer-un-jeu/mimique/3.tsx          |  5 +-
 src/pages/creer-un-jeu/mimique/4.tsx          |  5 +-
 src/pages/creer-un-jeu/mimique/index.tsx      | 41 +++++-----
 src/pages/creer-un-jeu/mimique/jouer.tsx      |  5 +-
 src/pages/creer-un-jeu/mimique/success.tsx    |  5 +-
 src/pages/creer-une-enigme/1.tsx              |  5 +-
 src/pages/creer-une-enigme/2.tsx              |  5 +-
 src/pages/creer-une-enigme/3.tsx              |  5 +-
 src/pages/creer-une-enigme/4.tsx              |  5 +-
 src/pages/creer-une-enigme/index.tsx          |  5 +-
 src/pages/creer-une-enigme/success.tsx        |  5 +-
 src/pages/creer-une-histoire/1.tsx            |  9 ++-
 src/pages/creer-une-histoire/2.tsx            |  9 ++-
 src/pages/creer-une-histoire/3.tsx            |  9 ++-
 src/pages/creer-une-histoire/4.tsx            |  9 ++-
 src/pages/creer-une-histoire/5.tsx            |  5 +-
 src/pages/creer-une-histoire/index.tsx        | 28 +++----
 src/pages/creer-une-histoire/success.tsx      |  5 +-
 src/pages/lancer-un-defi/1.tsx                |  5 +-
 src/pages/lancer-un-defi/2.tsx                |  5 +-
 src/pages/lancer-un-defi/3.tsx                |  5 +-
 src/pages/lancer-un-defi/4.tsx                |  5 +-
 src/pages/lancer-un-defi/culinaire/1.tsx      |  8 +-
 src/pages/lancer-un-defi/culinaire/2.tsx      |  5 +-
 src/pages/lancer-un-defi/culinaire/3.tsx      |  5 +-
 src/pages/lancer-un-defi/culinaire/4.tsx      |  5 +-
 src/pages/lancer-un-defi/ecologique/1.tsx     |  5 +-
 src/pages/lancer-un-defi/ecologique/2.tsx     |  5 +-
 src/pages/lancer-un-defi/ecologique/3.tsx     |  5 +-
 src/pages/lancer-un-defi/ecologique/4.tsx     |  5 +-
 src/pages/lancer-un-defi/index.tsx            |  5 +-
 src/pages/lancer-un-defi/linguistique/1.tsx   |  5 +-
 src/pages/lancer-un-defi/linguistique/2.tsx   |  5 +-
 src/pages/lancer-un-defi/linguistique/3.tsx   |  5 +-
 src/pages/lancer-un-defi/linguistique/4.tsx   |  5 +-
 src/pages/lancer-un-defi/linguistique/5.tsx   |  5 +-
 src/pages/lancer-un-defi/success.tsx          |  5 +-
 src/pages/parametrer-hymne/1.tsx              | 10 ++-
 src/pages/parametrer-hymne/2.tsx              |  5 +-
 src/pages/parametrer-hymne/3.tsx              |  5 +-
 src/pages/parametrer-hymne/4.tsx              |  5 +-
 src/pages/parametrer-hymne/5.tsx              |  5 +-
 src/pages/parametrer-hymne/success.tsx        |  5 +-
 src/pages/poser-une-question/1.tsx            |  5 +-
 src/pages/poser-une-question/2.tsx            |  5 +-
 src/pages/poser-une-question/3.tsx            |  5 +-
 src/pages/poser-une-question/success.tsx      |  5 +-
 src/pages/re-inventer-une-histoire/1.tsx      |  9 ++-
 src/pages/re-inventer-une-histoire/2.tsx      |  9 ++-
 src/pages/re-inventer-une-histoire/3.tsx      |  9 ++-
 src/pages/re-inventer-une-histoire/4.tsx      |  9 ++-
 src/pages/re-inventer-une-histoire/5.tsx      |  7 +-
 src/pages/re-inventer-une-histoire/index.tsx  |  5 +-
 .../re-inventer-une-histoire/success.tsx      |  5 +-
 src/pages/reagir-a-une-activite/1.tsx         |  5 +-
 src/pages/reagir-a-une-activite/2.tsx         |  5 +-
 src/pages/reagir-a-une-activite/3.tsx         |  5 +-
 src/pages/reagir-a-une-activite/success.tsx   |  5 +-
 src/pages/realiser-un-reportage/1.tsx         |  5 +-
 src/pages/realiser-un-reportage/2.tsx         |  5 +-
 src/pages/realiser-un-reportage/3.tsx         |  5 +-
 src/pages/realiser-un-reportage/index.tsx     |  5 +-
 src/pages/realiser-un-reportage/success.tsx   |  5 +-
 81 files changed, 416 insertions(+), 255 deletions(-)

diff --git a/src/components/Steps.tsx b/src/components/Steps.tsx
index 3e1a74799..6463dc49f 100644
--- a/src/components/Steps.tsx
+++ b/src/components/Steps.tsx
@@ -58,10 +58,26 @@ export const Steps = ({ steps, urls, activeStep = 0, errorSteps = [], onBeforeLe
             }}
           />
         }
-        sx={{ zIndex: 1, position: 'relative', background: 'none', p: 3 }}
+        sx={{
+          zIndex: 1,
+          position: 'relative',
+          background: 'none',
+          p: {
+            xs: '24px 0',
+            md: 3,
+          },
+        }}
       >
         {steps.map((label, index) => (
-          <Step key={label}>
+          <Step
+            sx={{
+              px: {
+                xs: 0,
+                md: 1,
+              },
+            }}
+            key={label}
+          >
             <StepLabel
               StepIconComponent={StepIcon}
               StepIconProps={{
diff --git a/src/components/StepsButtons.tsx b/src/components/StepsButtons.tsx
index 100614768..7cc6decea 100644
--- a/src/components/StepsButtons.tsx
+++ b/src/components/StepsButtons.tsx
@@ -22,20 +22,26 @@ export const StepsButton = ({ prev, next }: StepsButtonProps) => {
           xs: '0.2rem',
           sm: '1rem',
         },
-        margin: '3rem 0',
+        margin: '1rem 0',
         minHeight: '2rem',
       }}
     >
       {prev !== undefined &&
         (typeof prev === 'string' ? (
           <Link href={prev} passHref>
-            <Button component="a" style={{ maxWidth: '200px', flexBasis: '50%' }} href={prev} variant="outlined" color="primary">
+            <Button
+              component="a"
+              style={{ maxWidth: '200px', flexBasis: '50%', alignItems: 'center' }}
+              href={prev}
+              variant="outlined"
+              color="primary"
+            >
               <ChevronLeftIcon />
               Étape précédente
             </Button>
           </Link>
         ) : (
-          <Button style={{ maxWidth: '200px', flexBasis: '50%' }} onClick={prev} variant="outlined" color="primary">
+          <Button style={{ maxWidth: '200px', flexBasis: '50%', alignItems: 'center' }} onClick={prev} variant="outlined" color="primary">
             <ChevronLeftIcon />
             Étape précédente
           </Button>
@@ -43,13 +49,19 @@ export const StepsButton = ({ prev, next }: StepsButtonProps) => {
       {next !== undefined &&
         (typeof next === 'string' ? (
           <Link href={next} passHref>
-            <Button component="a" href={next} variant="outlined" style={{ maxWidth: '200px', flexBasis: '50%' }} color="primary">
+            <Button
+              component="a"
+              href={next}
+              variant="outlined"
+              style={{ maxWidth: '200px', flexBasis: '50%', alignItems: 'center' }}
+              color="primary"
+            >
               Étape suivante
               <ChevronRightIcon />
             </Button>
           </Link>
         ) : (
-          <Button onClick={next} variant="outlined" style={{ maxWidth: '200px', flexBasis: '50%' }} color="primary">
+          <Button onClick={next} variant="outlined" style={{ maxWidth: '200px', flexBasis: '50%', alignItems: 'center' }} color="primary">
             Étape suivante
             <ChevronRightIcon />
           </Button>
diff --git a/src/components/activities/ActivitySelect.tsx b/src/components/activities/ActivitySelect.tsx
index 20dfb7efc..0f34598b4 100644
--- a/src/components/activities/ActivitySelect.tsx
+++ b/src/components/activities/ActivitySelect.tsx
@@ -79,9 +79,9 @@ export const ActivitySelect = ({ value, onChange, onSelect, style, label = 'Sél
         }}
         additionalContent={
           selectedActivity !== null ? (
-            <div style={{ height: '50vh', overflow: 'auto' }}>
+            <div style={{ minHeight: '50px', overflow: 'auto', overflowX: 'hidden' }}>
               <Activities activities={[selectedActivity]} noButtons />
-              <div style={{ width: '100%', margin: '3rem 0', minHeight: '2rem' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', width: '100%', minHeight: '2rem' }}>
                 <Button
                   variant="outlined"
                   color="primary"
@@ -98,7 +98,7 @@ export const ActivitySelect = ({ value, onChange, onSelect, style, label = 'Sél
               </div>
             </div>
           ) : (
-            <div style={{ height: '50vh', overflow: 'auto' }}>
+            <div style={{ minHeight: '50px', overflow: 'auto', overflowX: 'hidden' }}>
               <Activities
                 activities={activities}
                 noButtons
diff --git a/src/components/activities/List.tsx b/src/components/activities/List.tsx
index a1331c4fd..6111477cb 100644
--- a/src/components/activities/List.tsx
+++ b/src/components/activities/List.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import type { SelectChangeEvent } from '@mui/material';
-import { Button } from '@mui/material';
+import { Typography, Button } from '@mui/material';
 
 import PaginationNav from '../PaginationNav/PaginationNav';
 import { ActivityCard } from './ActivityCard';
@@ -60,6 +60,10 @@ export const Activities = ({ activities, noButtons = false, withLinks = false, w
   const startIdx = (page - 1) * activitiesPerPage;
   const endIdx = startIdx + activitiesPerPage;
 
+  if (activities.length === 0) {
+    return <Typography>Aucune activité existante.</Typography>;
+  }
+
   return (
     <div>
       {activities
diff --git a/src/components/activities/anthem/AnthemTrack/AnthemTrack.module.css b/src/components/activities/anthem/AnthemTrack/AnthemTrack.module.css
index 474895171..df301572c 100644
--- a/src/components/activities/anthem/AnthemTrack/AnthemTrack.module.css
+++ b/src/components/activities/anthem/AnthemTrack/AnthemTrack.module.css
@@ -1,9 +1,3 @@
-.trackContainer {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    gap: 2rem;
-}
 .trackLabel input, .trackLabel > span {
     box-sizing: border-box;
     width: 180px;
@@ -16,14 +10,10 @@
 }
 
 .sampleControlsContainer {
-    display: flex;
 }
 
 .sampleAudioControl {
-    width: 250px;
-    height: 30px;
 }
 
 .sampleControlsContainer button {
-    margin-left: 6px;
 }
\ No newline at end of file
diff --git a/src/components/activities/anthem/AnthemTrack/AnthemTrack.tsx b/src/components/activities/anthem/AnthemTrack/AnthemTrack.tsx
index e3bce50c0..b4ff23e55 100644
--- a/src/components/activities/anthem/AnthemTrack/AnthemTrack.tsx
+++ b/src/components/activities/anthem/AnthemTrack/AnthemTrack.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 
-import { Alert, TextField } from '@mui/material';
+import { Alert, Box, TextField } from '@mui/material';
 
 import type { DisplayableInstrumentsType } from '../../../../utils/instruments';
 import AudioEditor from '../../content/editors/AudioEditor/AudioEditor';
 import AnthemTrackIcon from '../AnthemTrackIcon/AnthemTrackIcon';
-import styles from './AnthemTrack.module.css';
 import AddAudioButton from 'src/components/buttons/AddAudioButton';
 import { DeleteButton } from 'src/components/buttons/DeleteButton';
 import { EditButton } from 'src/components/buttons/EditButton';
@@ -30,40 +29,67 @@ const AnthemTrack = ({ track, instruments, handleTrackUpdate }: AnthemTrackProps
   };
 
   return (
-    <div className={styles.trackContainer}>
-      <div className={styles.trackContainer}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: {
+          xs: track.sampleUrl ? 'column' : 'row',
+          sm: 'row',
+        },
+        alignItems: {
+          xs: track.sampleUrl ? 'start' : 'center',
+          sm: 'center',
+        },
+        justifyContent: 'space-between',
+        marginBottom: '10px',
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          marginBottom: {
+            xs: track.sampleUrl && '10px',
+            sm: '0',
+          },
+        }}
+      >
         <AnthemTrackIcon track={track} handleIconUpdate={handleIconUpdate} instruments={instruments} />
-      </div>
-
-      <div className={styles.trackLabel}>
-        {isEditingLabel ? (
-          <TextField
-            defaultValue={track.label}
-            onBlur={(e) => {
-              setIsEditingLabel(false);
-              if (e.target.value.length > 0) handleTrackUpdate({ ...track, label: e.target.value });
-            }}
-            autoFocus
-          ></TextField>
-        ) : (
-          <span onClick={() => setIsEditingLabel(true)}>{track.label}</span>
-        )}
-      </div>
+        <div style={{ marginLeft: '10px' }}>
+          {isEditingLabel ? (
+            <TextField
+              defaultValue={track.label}
+              onBlur={(e) => {
+                setIsEditingLabel(false);
+                if (e.target.value.length > 0) handleTrackUpdate({ ...track, label: e.target.value });
+              }}
+              autoFocus
+            ></TextField>
+          ) : (
+            <span onClick={() => setIsEditingLabel(true)}>{track.label}</span>
+          )}
+        </div>
+      </Box>
 
       {!track.sampleUrl ? (
         <AddAudioButton onClick={() => setIsAudioEditorOpen(true)} />
       ) : (
-        <div className={styles.sampleControlsContainer}>
-          <audio controls src={track.sampleUrl} className={styles.sampleAudioControl}>
-            <Alert severity="error">{'Erreur: impossible de charger le son.'}</Alert>
-          </audio>
+        <div style={{ display: 'flex' }}>
+          <Box component="audio" controls src={'track.sampleUrl'} sx={{ width: { xs: '220px', sm: '250px', md: '300px' }, height: '30px' }}>
+            <Alert sx={{ padding: '0 16px' }} severity="error">
+              {'Erreur: impossible de charger le son.'}
+            </Alert>
+          </Box>
           <EditButton //add edit condition ??
+            style={{ marginLeft: '6px' }}
             size="small"
             onClick={() => {
               setIsAudioEditorOpen(true);
             }}
           />
           <DeleteButton
+            style={{ marginLeft: '6px' }}
             color="red"
             confirmTitle="Supprimer ce son ?"
             confirmLabel="Voulez-vous vraiment supprimer ce son ?"
@@ -82,7 +108,7 @@ const AnthemTrack = ({ track, instruments, handleTrackUpdate }: AnthemTrackProps
           setIsAudioEditorOpen={setIsAudioEditorOpen}
         />
       )}
-    </div>
+    </Box>
   );
 };
 
diff --git a/src/components/buttons/ThemeChoiceButton.tsx b/src/components/buttons/ThemeChoiceButton.tsx
index 057265326..d179e55cf 100644
--- a/src/components/buttons/ThemeChoiceButton.tsx
+++ b/src/components/buttons/ThemeChoiceButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ButtonBase } from '@mui/material';
+import { Box, ButtonBase } from '@mui/material';
 
 import ArrowRight from 'src/svg/arrow-right.svg';
 
@@ -41,9 +41,17 @@ export const ThemeChoiceButton = ({ label, isOpen, description, additionalConten
         </div>
       </ButtonBase>
       {showAdd && additionalContent && (
-        <div className="bg-grey" style={{ padding: '0.8rem 1.4rem' }}>
+        <Box
+          className="bg-grey"
+          sx={{
+            padding: {
+              sx: '5px',
+              sm: '0.8rem 1.4rem',
+            },
+          }}
+        >
           {additionalContent}
-        </div>
+        </Box>
       )}
     </div>
   );
diff --git a/src/components/selectors/MimicSelector.tsx b/src/components/selectors/MimicSelector.tsx
index 9b2ca0128..0bb0e867a 100644
--- a/src/components/selectors/MimicSelector.tsx
+++ b/src/components/selectors/MimicSelector.tsx
@@ -76,7 +76,13 @@ const MimicSelector = ({ MimicData, mimicNumber, onDataChange, onVideoChange, on
             {isFieldValid(MimicData.video as string | null) && (
               <div style={{ width: '100%', height: '100%', marginTop: '0.2rem' }}>
                 <ReactPlayer width="100%" height="70%" light url={MimicData.video || ''} controls />
-                <Button name="video" style={{ width: '100%', marginTop: '0.4rem' }} onClick={toggleModal} variant="outlined" color="primary">
+                <Button
+                  name="video"
+                  style={{ width: '100%', maxWidth: '320px', marginTop: '0.4rem' }}
+                  onClick={toggleModal}
+                  variant="outlined"
+                  color="primary"
+                >
                   Changer de vidéo
                 </Button>
               </div>
@@ -84,13 +90,19 @@ const MimicSelector = ({ MimicData, mimicNumber, onDataChange, onVideoChange, on
             {!isFieldValid(MimicData.video as string | null) && (
               <div>
                 {!showError && (
-                  <Button name="video" style={{ width: '100%' }} onClick={toggleModal} variant="outlined" color="primary">
+                  <Button name="video" style={{ width: '100%', maxWidth: '320px' }} onClick={toggleModal} variant="outlined" color="primary">
                     {<UploadIcon style={{ fill: 'currentcolor', width: '3rem', height: '3rem', margin: '30px' }} />}
                   </Button>
                 )}
                 {showError && (
                   <div style={{ marginTop: '1.5rem' }}>
-                    <Button name="video" style={{ width: '100%', borderColor: '#d93939' }} onClick={toggleModal} variant="outlined" color="primary">
+                    <Button
+                      name="video"
+                      style={{ width: '100%', maxWidth: '320px', borderColor: '#d93939' }}
+                      onClick={toggleModal}
+                      variant="outlined"
+                      color="primary"
+                    >
                       {<UploadIcon style={{ color: '#d93939', width: '3rem', height: '3rem', margin: '30px' }} />}
                     </Button>
                     <span style={{ fontSize: '0.7rem', marginLeft: '1rem', color: '#d93939' }}>Ce champ est obligatoire</span>
@@ -114,7 +126,13 @@ const MimicSelector = ({ MimicData, mimicNumber, onDataChange, onVideoChange, on
               value={MimicData.signification || ''}
               label="Signification réelle"
               onChange={onDataChange('signification')}
-              style={{ width: '100%', margin: '10px' }}
+              sx={{
+                width: '100%',
+                margin: {
+                  xs: 0,
+                  md: '10px',
+                },
+              }}
               error={showError && !isFieldValid(MimicData.signification)}
               helperText={showError && !isFieldValid(MimicData.signification) ? 'Ce champ est obligatoire' : ''}
               inputProps={{
@@ -133,7 +151,14 @@ const MimicSelector = ({ MimicData, mimicNumber, onDataChange, onVideoChange, on
               label="Origine"
               value={MimicData.origine || ''}
               onChange={onDataChange('origine')}
-              style={{ width: '100%', margin: '10px', fontStyle: 'italic' }}
+              sx={{
+                width: '100%',
+                margin: {
+                  xs: 0,
+                  md: '10px',
+                },
+                fontStyle: 'italic',
+              }}
               helperText={'Ce champ est optionnel'}
               inputProps={{
                 maxLength: 800,
@@ -155,7 +180,13 @@ const MimicSelector = ({ MimicData, mimicNumber, onDataChange, onVideoChange, on
           label="Signification inventée 1"
           value={MimicData.fakeSignification1 || ''}
           onChange={onDataChange('fakeSignification1')}
-          style={{ width: '100%', margin: '10px' }}
+          sx={{
+            width: '100%',
+            margin: {
+              xs: 0,
+              md: '10px',
+            },
+          }}
           error={showError && !isFieldValid(MimicData.fakeSignification1)}
           helperText={showError && !isFieldValid(MimicData.fakeSignification1) ? 'Ce champ est obligatoire' : ''}
           inputProps={{
@@ -173,7 +204,13 @@ const MimicSelector = ({ MimicData, mimicNumber, onDataChange, onVideoChange, on
           label="Signification inventée 2"
           value={MimicData.fakeSignification2 || ''}
           onChange={onDataChange('fakeSignification2')}
-          style={{ width: '100%', margin: '10px' }}
+          sx={{
+            width: '100%',
+            margin: {
+              xs: 0,
+              md: '10px',
+            },
+          }}
           error={showError && !isFieldValid(MimicData.fakeSignification2)}
           helperText={showError && !isFieldValid(MimicData.fakeSignification2) ? 'Ce champ est obligatoire' : ''}
           inputProps={{
diff --git a/src/pages/chanter-un-couplet/1.tsx b/src/pages/chanter-un-couplet/1.tsx
index d412033ed..8f6856f0e 100644
--- a/src/pages/chanter-un-couplet/1.tsx
+++ b/src/pages/chanter-un-couplet/1.tsx
@@ -8,6 +8,7 @@ import styles from '../../styles/chanter-un-couplet.module.css';
 import { postMixAudio } from 'src/api/audio/audio-mix.post';
 import { deleteAudio } from 'src/api/audio/audio.delete';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import type { AudioMixerTrack } from 'src/components/audio/AudioMixer/AudioMixer';
@@ -143,7 +144,7 @@ const SongStep1 = () => {
   }
   return (
     <Base>
-      <div className={styles.mainContainer}>
+      <PageLayout>
         <Steps
           steps={['Mixer', 'Écrire', 'Enregistrer', 'Synchroniser', 'Prévisualiser']}
           activeStep={0}
@@ -169,7 +170,7 @@ const SongStep1 = () => {
             />
           )}
         </div>
-      </div>
+      </PageLayout>
       <StepsButton next={onNext} />
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
diff --git a/src/pages/chanter-un-couplet/2.tsx b/src/pages/chanter-un-couplet/2.tsx
index 2b7ad5c76..f75e1affd 100644
--- a/src/pages/chanter-un-couplet/2.tsx
+++ b/src/pages/chanter-un-couplet/2.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import styles from '../../styles/chanter-un-couplet.module.css';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { SyllableEditor } from 'src/components/activities/content/editors/SyllableEditor';
@@ -35,7 +36,7 @@ const SongStep2 = () => {
 
   return (
     <Base>
-      <div className={styles.mainContainer}>
+      <PageLayout>
         <Steps
           steps={['Mixer', 'Écrire', 'Enregistrer', 'Synchroniser', 'Prévisualiser']}
           activeStep={1}
@@ -66,7 +67,7 @@ const SongStep2 = () => {
             <StepsButton prev="/chanter-un-couplet/1" next={onNext} />
           </div>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/chanter-un-couplet/3.tsx b/src/pages/chanter-un-couplet/3.tsx
index e766ccb0c..d38e8b14c 100644
--- a/src/pages/chanter-un-couplet/3.tsx
+++ b/src/pages/chanter-un-couplet/3.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import styles from '../../styles/chanter-un-couplet.module.css';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { SyllableEditor } from 'src/components/activities/content/editors/SyllableEditor';
@@ -35,7 +36,7 @@ const SongStep3 = () => {
   const introChorus = data?.anthemTracks?.find((track) => track.type === TrackType.INTRO_CHORUS);
   return (
     <Base>
-      <div className={styles.mainContainer}>
+      <PageLayout>
         <Steps
           steps={['Mixer', 'Écrire', 'Enregistrer', 'Synchroniser', 'Prévisualiser']}
           activeStep={2}
@@ -75,7 +76,7 @@ const SongStep3 = () => {
           </div>
           <StepsButton prev="/chanter-un-couplet/2" next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/chanter-un-couplet/4.tsx b/src/pages/chanter-un-couplet/4.tsx
index a452eeba2..d3af47d69 100644
--- a/src/pages/chanter-un-couplet/4.tsx
+++ b/src/pages/chanter-un-couplet/4.tsx
@@ -10,6 +10,7 @@ import styles from '../../styles/chanter-un-couplet.module.css';
 import { postMixAudio } from 'src/api/audio/audio-mix.post';
 import { deleteAudio } from 'src/api/audio/audio.delete';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import AudioEditor from 'src/components/activities/content/editors/AudioEditor/AudioEditor';
@@ -215,7 +216,7 @@ const SongStep4 = () => {
 
   return (
     <Base>
-      <div className={styles.mainContainer}>
+      <PageLayout>
         <Steps
           steps={['Mixer', 'Écrire', 'Enregistrer', 'Synchroniser', 'Prévisualiser']}
           activeStep={3}
@@ -344,7 +345,7 @@ const SongStep4 = () => {
             <CircularProgress color="inherit" />
           </Backdrop>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/chanter-un-couplet/5.tsx b/src/pages/chanter-un-couplet/5.tsx
index a6a18d06f..f97e67ae8 100644
--- a/src/pages/chanter-un-couplet/5.tsx
+++ b/src/pages/chanter-un-couplet/5.tsx
@@ -8,6 +8,7 @@ import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { AudioPlayer } from 'src/components/audio/AudioPlayer';
@@ -49,7 +50,7 @@ const SongStep5 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Mixer', 'Écrire', 'Enregistrer', 'Synchroniser', 'Prévisualiser']}
           activeStep={4}
@@ -145,7 +146,7 @@ const SongStep5 = () => {
 
           <StepsButton prev="/chanter-un-couplet/4" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/chanter-un-couplet/index.tsx b/src/pages/chanter-un-couplet/index.tsx
index ab8c306e5..b26b195e3 100644
--- a/src/pages/chanter-un-couplet/index.tsx
+++ b/src/pages/chanter-un-couplet/index.tsx
@@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { StepsButton } from 'src/components/StepsButtons';
 import { AudioPlayer } from 'src/components/audio/AudioPlayer';
 import { ActivityContext } from 'src/contexts/activityContext';
@@ -85,7 +86,7 @@ const Anthem = () => {
   }
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div className="width-900">
           <h1>Découvrez l&apos;hymne de votre village idéal</h1>
           <div style={{ height: '100%', width: '100%', objectFit: 'contain' }}>
@@ -110,7 +111,7 @@ const Anthem = () => {
             <p>À la fin de l&apos;année, vous pourrez écouter l&apos;hymne composé des couplets de tous les pélicopains !</p>
           </div>
         </div>
-      </div>
+      </PageLayout>
       <StepsButton next={onNext} />
     </Base>
   );
diff --git a/src/pages/chanter-un-couplet/success.tsx b/src/pages/chanter-un-couplet/success.tsx
index e5dc6effa..b243eb836 100644
--- a/src/pages/chanter-un-couplet/success.tsx
+++ b/src/pages/chanter-un-couplet/success.tsx
@@ -4,13 +4,14 @@ import React from 'react';
 import { Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
 
 const SongSuccess = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}>
           <p className="text">Votre couplet a bien été publié !</p>
           <PelicoSouriant style={{ width: '60%', height: 'auto', margin: '0 20%' }} />
@@ -22,7 +23,7 @@ const SongSuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-un-jeu/index.tsx b/src/pages/creer-un-jeu/index.tsx
index 100bf5e15..37d141028 100644
--- a/src/pages/creer-un-jeu/index.tsx
+++ b/src/pages/creer-un-jeu/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { ActivityChoice } from 'src/components/activities/ActivityChoice';
 import MimiqueIcon from 'src/svg/jeu/mimique.svg';
 import MonnaieIcon from 'src/svg/jeu/monnaie.svg';
@@ -25,7 +26,7 @@ const activities = [
 const Jeu = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div className="width-900">
           <h1>Choisissez le jeu auquel vous souhaitez jouer</h1>
           <p className="text" style={{ fontSize: '1rem' }}>
@@ -33,7 +34,7 @@ const Jeu = () => {
           </p>
           <ActivityChoice activities={activities} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-un-jeu/mimique/1.tsx b/src/pages/creer-un-jeu/mimique/1.tsx
index d5e736113..73c0125e0 100644
--- a/src/pages/creer-un-jeu/mimique/1.tsx
+++ b/src/pages/creer-un-jeu/mimique/1.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { isGame } from 'src/activity-types/anyActivity';
 import { DEFAULT_MIMIC_DATA, isMimic } from 'src/activity-types/game.constants';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { BackButton } from 'src/components/buttons/BackButton';
 import MimicSelector from 'src/components/selectors/MimicSelector';
@@ -77,7 +78,7 @@ const MimiqueStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         {!isEdit && <BackButton href="/creer-un-jeu/mimique" />}
         <Steps
           steps={['1ère mimique', '2ème mimique', '3ème mimique', 'Prévisualiser']}
@@ -93,7 +94,7 @@ const MimiqueStep1 = () => {
           onPrev={null}
           onVideoChange={videoChange}
         />
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-un-jeu/mimique/2.tsx b/src/pages/creer-un-jeu/mimique/2.tsx
index 476f83f3c..62221c2a4 100644
--- a/src/pages/creer-un-jeu/mimique/2.tsx
+++ b/src/pages/creer-un-jeu/mimique/2.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { isGame } from 'src/activity-types/anyActivity';
 import { isMimic, isMimicValid } from 'src/activity-types/game.constants';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import MimicSelector from 'src/components/selectors/MimicSelector';
 import { ActivityContext } from 'src/contexts/activityContext';
@@ -60,7 +61,7 @@ const MimiqueStep2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['1ère mimique', '2ème mimique', '3ème mimique', 'Prévisualiser']}
           urls={['/creer-un-jeu/mimique/1?edit', '/creer-un-jeu/mimique/2', '/creer-un-jeu/mimique/3', '/creer-un-jeu/mimique/4']}
@@ -76,7 +77,7 @@ const MimiqueStep2 = () => {
           onPrev={onPrev}
           onVideoChange={videoChange}
         />
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-un-jeu/mimique/3.tsx b/src/pages/creer-un-jeu/mimique/3.tsx
index fa5fe96fd..185d4620e 100644
--- a/src/pages/creer-un-jeu/mimique/3.tsx
+++ b/src/pages/creer-un-jeu/mimique/3.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { isGame } from 'src/activity-types/anyActivity';
 import { isMimic, isMimicValid } from 'src/activity-types/game.constants';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import MimicSelector from 'src/components/selectors/MimicSelector';
 import { ActivityContext } from 'src/contexts/activityContext';
@@ -61,7 +62,7 @@ const MimiqueStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['1ère mimique', '2ème mimique', '3ème mimique', 'Prévisualiser']}
           urls={['/creer-un-jeu/mimique/1?edit', '/creer-un-jeu/mimique/2', '/creer-un-jeu/mimique/3', '/creer-un-jeu/mimique/4']}
@@ -77,7 +78,7 @@ const MimiqueStep3 = () => {
           onPrev={onPrev}
           onVideoChange={videoChange}
         />
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-un-jeu/mimique/4.tsx b/src/pages/creer-un-jeu/mimique/4.tsx
index 579ef745c..d9c6bfa3c 100644
--- a/src/pages/creer-un-jeu/mimique/4.tsx
+++ b/src/pages/creer-un-jeu/mimique/4.tsx
@@ -9,6 +9,7 @@ import { Grid, Button, Radio, RadioGroup, FormControlLabel, Backdrop, CircularPr
 import { isGame } from 'src/activity-types/anyActivity';
 import { isMimic, isMimicValid } from 'src/activity-types/game.constants';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { CustomRadio } from 'src/components/buttons/CustomRadio';
 import { EditButton } from 'src/components/buttons/EditButton';
@@ -67,7 +68,7 @@ const MimiqueStep4 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['1ère mimique', '2ème mimique', '3ème mimique', 'Prévisualiser']}
           urls={['/creer-un-jeu/mimique/1?edit', '/creer-un-jeu/mimique/2', '/creer-un-jeu/mimique/3', '/creer-un-jeu/mimique/4']}
@@ -233,7 +234,7 @@ const MimiqueStep4 = () => {
             <p style={{ width: '100%', textAlign: 'left', margin: '0.3rem 1rem' }}>{data.game3.origine} </p>
           </div>
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/creer-un-jeu/mimique/index.tsx b/src/pages/creer-un-jeu/mimique/index.tsx
index f6f4a2290..405a84d57 100644
--- a/src/pages/creer-un-jeu/mimique/index.tsx
+++ b/src/pages/creer-un-jeu/mimique/index.tsx
@@ -3,15 +3,17 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import Button from '@mui/material/Button';
+import { Box } from '@mui/system';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 
 const Mimique = () => {
   const router = useRouter();
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem', marginTop: '2rem' }}>
+      <PageLayout>
         <h1>Qu’est-ce qu’une mimique ?</h1>
         <p style={{ marginBottom: '2rem' }}>
           Une mimique est un geste du corps qui exprime une émotion ou une pensée, et que l’on fait dans certaine situation. Par exemple, un signe des
@@ -25,25 +27,24 @@ const Mimique = () => {
           illustrant la mimique, une explication de sa signification et de son origine. Pour pimenter le jeu, à chaque étape vous devrez également
           inventer deux significations fausses … à vos Pélicopains de deviner ce qui signifie réellement vos mimiques !
         </p>
-        <Link href="/creer-un-jeu/mimique/1" passHref>
-          <Button
-            component="a"
-            onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-              event.preventDefault();
-              router.push('/creer-un-jeu/mimique/1');
-            }}
-            href="/creer-un-jeu/mimique/1"
-            color="primary"
-            variant="outlined"
-            style={{
-              float: 'right',
-            }}
-            disableElevation
-          >
-            Faire découvrir 3 mimiques
-          </Button>
-        </Link>
-      </div>
+        <Box display="flex" justifyContent="end">
+          <Link href="/creer-un-jeu/mimique/1" passHref>
+            <Button
+              component="a"
+              onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+                event.preventDefault();
+                router.push('/creer-un-jeu/mimique/1');
+              }}
+              href="/creer-un-jeu/mimique/1"
+              color="primary"
+              variant="outlined"
+              disableElevation
+            >
+              Faire découvrir 3 mimiques
+            </Button>
+          </Link>
+        </Box>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-un-jeu/mimique/jouer.tsx b/src/pages/creer-un-jeu/mimique/jouer.tsx
index 0a417f035..33bd90d26 100644
--- a/src/pages/creer-un-jeu/mimique/jouer.tsx
+++ b/src/pages/creer-un-jeu/mimique/jouer.tsx
@@ -12,6 +12,7 @@ import { AvatarImg } from 'src/components/Avatar';
 import { Base } from 'src/components/Base';
 import { Flag } from 'src/components/Flag';
 import { Modal } from 'src/components/Modal';
+import { PageLayout } from 'src/components/PageLayout';
 import { UserDisplayName } from 'src/components/UserDisplayName';
 import { RightNavigation } from 'src/components/accueil/RightNavigation';
 import GameStats from 'src/components/activities/GameStats';
@@ -287,7 +288,7 @@ const PlayMimic = () => {
 
   return (
     <Base rightNav={<RightNavigation activityUser={gameCreator} displayAsUser={false} />} hideLeftNav showSubHeader>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem', marginBottom: '3rem' }}>
+      <PageLayout>
         <Box display="flex" flexDirection="column">
           <Box alignItems="flex-start">
             <h1>Jouer au jeu des mimiques !</h1>
@@ -442,7 +443,7 @@ const PlayMimic = () => {
             </Button>
           </Grid>
         </Grid>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-un-jeu/mimique/success.tsx b/src/pages/creer-un-jeu/mimique/success.tsx
index d629ffa5b..a538d4121 100644
--- a/src/pages/creer-un-jeu/mimique/success.tsx
+++ b/src/pages/creer-un-jeu/mimique/success.tsx
@@ -6,6 +6,7 @@ import Button from '@mui/material/Button';
 
 import { isGame } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { ActivityContext } from 'src/contexts/activityContext';
 import { useGameRequests } from 'src/services/useGames';
 import { bgPage } from 'src/styles/variables.const';
@@ -30,7 +31,7 @@ const PresentationSuccess = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}>
           <p className="text">{'Vos mimiques ont bien été publiées !'}</p>
           <PelicoSouriant style={{ width: '60%', height: 'auto', margin: '0 20%' }} />
@@ -59,7 +60,7 @@ const PresentationSuccess = () => {
             </Link>
           )}
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-une-enigme/1.tsx b/src/pages/creer-une-enigme/1.tsx
index fb6959f44..15d20681e 100644
--- a/src/pages/creer-une-enigme/1.tsx
+++ b/src/pages/creer-une-enigme/1.tsx
@@ -7,6 +7,7 @@ import { isEnigme } from 'src/activity-types/anyActivity';
 import { ENIGME_TYPES, getCategoryName } from 'src/activity-types/enigme.constants';
 import type { EnigmeData } from 'src/activity-types/enigme.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { BackButton } from 'src/components/buttons/BackButton';
@@ -111,7 +112,7 @@ const EnigmeStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         {!isEdit && <BackButton href="/creer-une-enigme" />}
         <Steps
           steps={[getCategoryName(activity.subType, data) || 'Thème', 'Énigme', 'Réponse', 'Prévisualisation']}
@@ -199,7 +200,7 @@ const EnigmeStep1 = () => {
             </>
           )}
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-une-enigme/2.tsx b/src/pages/creer-une-enigme/2.tsx
index eb9b7366a..5cb1d24d9 100644
--- a/src/pages/creer-une-enigme/2.tsx
+++ b/src/pages/creer-une-enigme/2.tsx
@@ -5,6 +5,7 @@ import { isEnigme } from 'src/activity-types/anyActivity';
 import { ENIGME_TYPES, getSubcategoryName } from 'src/activity-types/enigme.constants';
 import type { EnigmeData } from 'src/activity-types/enigme.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentEditor } from 'src/components/activities/content';
@@ -61,7 +62,7 @@ const EnigmeStep2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[getSubcategoryName(activity.data.theme, data, activity.subType), 'Énigme', 'Réponse', 'Prévisualisation']}
           urls={['/creer-une-enigme/1?edit', '/creer-une-enigme/2', '/creer-une-enigme/3', '/creer-une-enigme/4']}
@@ -82,7 +83,7 @@ const EnigmeStep2 = () => {
           />
           <StepsButton prev={`/creer-une-enigme/1?edit=${activity.id}`} next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-une-enigme/3.tsx b/src/pages/creer-une-enigme/3.tsx
index 6d3542107..9a9f931bb 100644
--- a/src/pages/creer-une-enigme/3.tsx
+++ b/src/pages/creer-une-enigme/3.tsx
@@ -5,6 +5,7 @@ import { isEnigme } from 'src/activity-types/anyActivity';
 import { getSubcategoryName } from 'src/activity-types/enigme.constants';
 import type { EnigmeData } from 'src/activity-types/enigme.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentEditor } from 'src/components/activities/content';
@@ -61,7 +62,7 @@ const EnigmeStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[getSubcategoryName(activity.data.theme, data, activity.subType), 'Énigme', 'Réponse', 'Prévisualisation']}
           urls={['/creer-une-enigme/1?edit', '/creer-une-enigme/2', '/creer-une-enigme/3', '/creer-une-enigme/4']}
@@ -83,7 +84,7 @@ const EnigmeStep3 = () => {
           />
           <StepsButton prev={`/creer-une-enigme/2`} next="/creer-une-enigme/4" />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-une-enigme/4.tsx b/src/pages/creer-une-enigme/4.tsx
index e24bc711b..b4d1110ed 100644
--- a/src/pages/creer-une-enigme/4.tsx
+++ b/src/pages/creer-une-enigme/4.tsx
@@ -12,6 +12,7 @@ import { isEnigme } from 'src/activity-types/anyActivity';
 import { ENIGME_TYPES, getCategoryName, getSubcategoryName } from 'src/activity-types/enigme.constants';
 import type { EnigmeData } from 'src/activity-types/enigme.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentView } from 'src/components/activities/content/ContentView';
@@ -74,7 +75,7 @@ const EnigmeStep4 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[getSubcategoryName(activity.data.theme, data, activity.subType), 'Énigme', 'Réponse', 'Prévisualisation']}
           urls={['/creer-une-enigme/1?edit', '/creer-une-enigme/2', '/creer-une-enigme/3', '/creer-une-enigme/4']}
@@ -176,7 +177,7 @@ const EnigmeStep4 = () => {
           </div>
           <StepsButton prev="/creer-une-enigme/3" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/creer-une-enigme/index.tsx b/src/pages/creer-une-enigme/index.tsx
index afa257054..73e4aa9d2 100644
--- a/src/pages/creer-une-enigme/index.tsx
+++ b/src/pages/creer-une-enigme/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { ActivityChoice } from 'src/components/activities/ActivityChoice';
 import EvenementIcon from 'src/svg/enigme/evenement-mystere.svg';
 import LocationIcon from 'src/svg/enigme/location.svg';
@@ -48,7 +49,7 @@ const activities = [
 const Enigme = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div className="width-900">
           <h1>Qu&apos;allez vous faire deviner à vos Pélicopains ?</h1>
           <div className="width-900" style={{ margin: '2rem 0' }}>
@@ -57,7 +58,7 @@ const Enigme = () => {
 
           <ActivityChoice activities={activities} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-une-enigme/success.tsx b/src/pages/creer-une-enigme/success.tsx
index 688ce8e98..20292a32b 100644
--- a/src/pages/creer-une-enigme/success.tsx
+++ b/src/pages/creer-une-enigme/success.tsx
@@ -4,13 +4,14 @@ import React from 'react';
 import { Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
 
 const PresentationSuccess = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}>
           <p className="text">Votre énigme a bien été publiée !</p>
           <PelicoSouriant style={{ width: '60%', height: 'auto', margin: '0 20%' }} />
@@ -22,7 +23,7 @@ const PresentationSuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-une-histoire/1.tsx b/src/pages/creer-une-histoire/1.tsx
index d90da9376..bc9be1629 100644
--- a/src/pages/creer-une-histoire/1.tsx
+++ b/src/pages/creer-une-histoire/1.tsx
@@ -9,6 +9,7 @@ import { isStory } from 'src/activity-types/anyActivity';
 import { DEFAULT_STORY_DATA, ODD_CHOICE } from 'src/activity-types/story.constants';
 import { Base } from 'src/components/Base';
 import { KeepRatio } from 'src/components/KeepRatio';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ImageModal } from 'src/components/activities/content/editors/ImageEditor/ImageModal';
@@ -76,7 +77,7 @@ const StoryStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         {!isEdit && <BackButton href="/creer-une-histoire" />}
         <Steps
           steps={['ODD', 'Objet', 'Lieu', 'Histoire', 'Prévisualisation']}
@@ -87,10 +88,10 @@ const StoryStep1 = () => {
           <h1>Choisissez et dessinez l’objectif du développement durable à atteindre</h1>
           <p className="text">Pour atteindre votre objectif de développement durable, vous choisirez un objet et un lieu aux étapes suivantes.</p>
           <p className="text">Choisissez votre objectif et dessinez-le.</p>
-          <Grid container spacing={3}>
+          <Grid container>
             <Grid item xs={12} md={6}>
               <div style={{ marginTop: '1.5rem' }}>
-                <div style={{ width: '100%', marginTop: '1rem', position: 'relative' }}>
+                <div style={{ width: '100%', maxWidth: '320px', marginTop: '1rem', position: 'relative' }}>
                   <ButtonBase onClick={() => setIsImageModalOpen(true)} style={{ width: '100%', color: `${isError ? errorColor : primaryColor}` }}>
                     <KeepRatio ratio={2 / 3} width="100%">
                       <div
@@ -166,7 +167,7 @@ const StoryStep1 = () => {
           </Grid>
         </div>
         <StepsButton next={onNext} />
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-une-histoire/2.tsx b/src/pages/creer-une-histoire/2.tsx
index a1c6ece68..560a1add2 100644
--- a/src/pages/creer-une-histoire/2.tsx
+++ b/src/pages/creer-une-histoire/2.tsx
@@ -8,6 +8,7 @@ import { TextField, Grid, ButtonBase } from '@mui/material';
 import { isStory } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
 import { KeepRatio } from 'src/components/KeepRatio';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ImageModal } from 'src/components/activities/content/editors/ImageEditor/ImageModal';
@@ -64,7 +65,7 @@ const StoryStep2 = () => {
   }
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['ODD', 'Objet', 'Lieu', 'Histoire', 'Prévisualisation']}
           urls={['/creer-une-histoire/1?edit', '/creer-une-histoire/2', '/creer-une-histoire/3', '/creer-une-histoire/4', '/creer-une-histoire/5']}
@@ -77,10 +78,10 @@ const StoryStep2 = () => {
             Cet objet, tout comme le lieu que vous choisirez à l’étape suivante, est magique ! Grâce à leurs pouvoirs, le village idéal va atteindre
             l’objectif du développement durable que vous avez choisi à l’étape précédente.
           </p>
-          <Grid container spacing={3}>
+          <Grid container>
             <Grid item xs={12} md={6}>
               <div style={{ marginTop: '1.5rem' }}>
-                <div style={{ width: '100%', marginTop: '1rem', position: 'relative' }}>
+                <div style={{ width: '100%', maxWidth: '320px', marginTop: '1rem', position: 'relative' }}>
                   <ButtonBase onClick={() => setIsImageModalOpen(true)} style={{ width: '100%', color: `${primaryColor}` }}>
                     <KeepRatio ratio={2 / 3} width="100%">
                       <div
@@ -151,7 +152,7 @@ const StoryStep2 = () => {
           </Grid>
         </div>
         <StepsButton prev={`/creer-une-histoire/1?edit=${activity.id}`} next={onNext} />
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-une-histoire/3.tsx b/src/pages/creer-une-histoire/3.tsx
index dff02cb9f..c797dfb52 100644
--- a/src/pages/creer-une-histoire/3.tsx
+++ b/src/pages/creer-une-histoire/3.tsx
@@ -8,6 +8,7 @@ import { TextField, Grid, ButtonBase } from '@mui/material';
 import { isStory } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
 import { KeepRatio } from 'src/components/KeepRatio';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ImageModal } from 'src/components/activities/content/editors/ImageEditor/ImageModal';
@@ -79,7 +80,7 @@ const StoryStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['ODD', 'Objet', 'Lieu', 'Histoire', 'Prévisualisation']}
           urls={['/creer-une-histoire/1?edit', '/creer-une-histoire/2', '/creer-une-histoire/3', '/creer-une-histoire/4', '/creer-une-histoire/5']}
@@ -92,10 +93,10 @@ const StoryStep3 = () => {
             Ce lieu, tout comme l’objet que vous avez choisi à l’étape précédente, est extraodinaire ! Grâce à leurs pouvoirs, le village idéal va
             atteindre l’objectif de développement durable que vous avez choisi.
           </p>
-          <Grid container spacing={3}>
+          <Grid container>
             <Grid item xs={12} md={6}>
               <div style={{ marginTop: '1.5rem' }}>
-                <div style={{ width: '100%', marginTop: '1rem', position: 'relative' }}>
+                <div style={{ width: '100%', maxWidth: '320px', marginTop: '1rem', position: 'relative' }}>
                   <ButtonBase onClick={() => setIsImageModalOpen(true)} style={{ width: '100%', color: `${primaryColor}` }}>
                     <KeepRatio ratio={2 / 3} width="100%">
                       <div
@@ -165,7 +166,7 @@ const StoryStep3 = () => {
           </Grid>
         </div>
         <StepsButton prev={`/creer-une-histoire/2`} next={onNext} />
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-une-histoire/4.tsx b/src/pages/creer-une-histoire/4.tsx
index 083094080..cf7227884 100644
--- a/src/pages/creer-une-histoire/4.tsx
+++ b/src/pages/creer-une-histoire/4.tsx
@@ -8,6 +8,7 @@ import { TextField, Grid, ButtonBase } from '@mui/material';
 import { isStory } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
 import { KeepRatio } from 'src/components/KeepRatio';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ImageModal } from 'src/components/activities/content/editors/ImageEditor/ImageModal';
@@ -72,7 +73,7 @@ const StoryStep4 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['ODD', 'Objet', 'Lieu', 'Histoire', 'Prévisualisation']}
           urls={['/creer-une-histoire/1?edit', '/creer-une-histoire/2', '/creer-une-histoire/3', '/creer-une-histoire/4', '/creer-une-histoire/5']}
@@ -85,9 +86,9 @@ const StoryStep4 = () => {
             Racontez à vos pélicopains comment le village-idéal et l’objet magique nous permettent d’atteindre l’objectif du développement durable que
             vous avez choisi ! Illustrez votre histoire avec un dessin de votre visite dans le village-idéal.
           </p>
-          <Grid container spacing={3}>
+          <Grid container>
             <Grid item xs={12} md={6}>
-              <div style={{ width: '100%', marginTop: '1rem', position: 'relative' }}>
+              <div style={{ width: '100%', maxWidth: '320px', marginTop: '1rem', position: 'relative' }}>
                 <ButtonBase onClick={() => setIsImageModalOpen(true)} style={{ width: '100%', color: `${primaryColor}` }}>
                   <KeepRatio ratio={2 / 3} width="100%">
                     <div
@@ -143,7 +144,7 @@ const StoryStep4 = () => {
           </Grid>
         </div>
         <StepsButton prev="/creer-une-histoire/3" next={onNext} />
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/creer-une-histoire/5.tsx b/src/pages/creer-une-histoire/5.tsx
index 7dc8d84e7..514defc94 100644
--- a/src/pages/creer-une-histoire/5.tsx
+++ b/src/pages/creer-une-histoire/5.tsx
@@ -7,6 +7,7 @@ import { Tooltip, Button, Backdrop, CircularProgress } from '@mui/material';
 import { isStory } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
 import { ImageStepContainer } from 'src/components/FinalStep/ImageStepContainer';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { getErrorSteps } from 'src/components/activities/storyChecks';
@@ -85,7 +86,7 @@ const StoryStep5 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['ODD', 'Objet', 'Lieu', 'Histoire', 'Prévisualisation']}
           urls={['/creer-une-histoire/1?edit', '/creer-une-histoire/2', '/creer-une-histoire/3', '/creer-une-histoire/4', '/creer-une-histoire/5']}
@@ -173,7 +174,7 @@ const StoryStep5 = () => {
           />
           <StepsButton prev="/creer-une-histoire/4" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/creer-une-histoire/index.tsx b/src/pages/creer-une-histoire/index.tsx
index d622a0d07..1b58e9d22 100644
--- a/src/pages/creer-une-histoire/index.tsx
+++ b/src/pages/creer-une-histoire/index.tsx
@@ -1,14 +1,15 @@
 import Link from 'next/link';
 import React from 'react';
 
-import { Button } from '@mui/material';
+import { Box, Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 
 const Story = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <h1>Inventer l’histoire du village-idéal</h1>
         <p className="text">
           Comme vous le savez déjà, les Olympiades de Pélico ont commencé et elles ont lieu dans le village-idéal, l’endroit où tout est possible…
@@ -35,21 +36,14 @@ const Story = () => {
           Laissez libre court à votre imagination ! Souvenez-vous que si l’objectif du développement durable est bien réel, l’objet et lieu que vous
           choisissez pour l’atteindre sont magiques 🙂
         </p>
-      </div>
-      <Link href="/creer-une-histoire/1" passHref>
-        <Button
-          component="a"
-          href="/creer-une-histoire/1"
-          variant="outlined"
-          color="primary"
-          style={{
-            float: 'right',
-            marginBottom: '3rem',
-          }}
-        >
-          Commencer
-        </Button>
-      </Link>
+      </PageLayout>
+      <Box sx={{ display: 'flex', justifyContent: 'end', pr: '1rem', mb: '1rem' }}>
+        <Link href="/creer-une-histoire/1" passHref>
+          <Button component="a" href="/creer-une-histoire/1" variant="outlined" color="primary">
+            Commencer
+          </Button>
+        </Link>
+      </Box>
     </Base>
   );
 };
diff --git a/src/pages/creer-une-histoire/success.tsx b/src/pages/creer-une-histoire/success.tsx
index 280071c07..cb74e9199 100644
--- a/src/pages/creer-une-histoire/success.tsx
+++ b/src/pages/creer-une-histoire/success.tsx
@@ -4,13 +4,14 @@ import React from 'react';
 import { Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
 
 const StorySuccess = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}>
           <p className="text" style={{ margin: '1rem 1.5rem' }}>
             Votre histoire a bien été publiée !
@@ -24,7 +25,7 @@ const StorySuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/1.tsx b/src/pages/lancer-un-defi/1.tsx
index f278a0fa2..5d575b9e5 100644
--- a/src/pages/lancer-un-defi/1.tsx
+++ b/src/pages/lancer-un-defi/1.tsx
@@ -7,6 +7,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { DEFI, isFree } from 'src/activity-types/defi.constants';
 import type { FreeDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { BackButton } from 'src/components/buttons/BackButton';
@@ -67,7 +68,7 @@ const FreeDefiStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         {!isEdit && <BackButton href="/lancer-un-defi" />}
         <Steps
           steps={[theme, 'Action', 'Le défi', 'Prévisualisation']}
@@ -97,7 +98,7 @@ const FreeDefiStep1 = () => {
           />
           {<StepsButton next={onNext} />}
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/2.tsx b/src/pages/lancer-un-defi/2.tsx
index 18f9e5bbf..8391e558c 100644
--- a/src/pages/lancer-un-defi/2.tsx
+++ b/src/pages/lancer-un-defi/2.tsx
@@ -5,6 +5,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isFree } from 'src/activity-types/defi.constants';
 import type { FreeDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentEditor } from 'src/components/activities/content';
@@ -48,7 +49,7 @@ const FreeDefiStep2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[data.themeName || 'Théme', 'Action', 'Le défi', 'Prévisualisation']}
           urls={['/lancer-un-defi/1?edit', '/lancer-un-defi/2', '/lancer-un-defi/3', '/lancer-un-defi/4']}
@@ -64,7 +65,7 @@ const FreeDefiStep2 = () => {
           <ContentEditor content={activity.content} updateContent={updateContent} addContent={addContent} deleteContent={deleteContent} />
           <StepsButton prev={`/lancer-un-defi/1?edit=${activity.id}`} next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/3.tsx b/src/pages/lancer-un-defi/3.tsx
index 50251decc..f04cd1ae0 100644
--- a/src/pages/lancer-un-defi/3.tsx
+++ b/src/pages/lancer-un-defi/3.tsx
@@ -7,6 +7,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { FREE_DEFIS, isFree } from 'src/activity-types/defi.constants';
 import type { FreeDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { getErrorSteps } from 'src/components/activities/defiChecksFree';
@@ -68,7 +69,7 @@ const FreeDefiStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[data.themeName || 'Théme', 'Action', 'Le défi', 'Prévisualisation']}
           urls={['/lancer-un-defi/1?edit', '/lancer-un-defi/2', '/lancer-un-defi/3', '/lancer-un-defi/4']}
@@ -119,7 +120,7 @@ const FreeDefiStep3 = () => {
           </div>
           <StepsButton prev="/lancer-un-defi/2" />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/4.tsx b/src/pages/lancer-un-defi/4.tsx
index 89e5c0fc1..8b67de604 100644
--- a/src/pages/lancer-un-defi/4.tsx
+++ b/src/pages/lancer-un-defi/4.tsx
@@ -12,6 +12,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isFree, getDefi, DEFI } from 'src/activity-types/defi.constants';
 import type { FreeDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentView } from 'src/components/activities/content/ContentView';
@@ -67,7 +68,7 @@ const FreeDefiStep4 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[data.themeName || 'Théme', 'Action', 'Le défi', 'Prévisualisation']}
           urls={['/lancer-un-defi/1?edit', '/lancer-un-defi/2', '/lancer-un-defi/3', '/lancer-un-defi/4']}
@@ -162,7 +163,7 @@ const FreeDefiStep4 = () => {
 
           <StepsButton prev="/lancer-un-defi/3" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/lancer-un-defi/culinaire/1.tsx b/src/pages/lancer-un-defi/culinaire/1.tsx
index 9bc5b3aa7..cd719ac7b 100644
--- a/src/pages/lancer-un-defi/culinaire/1.tsx
+++ b/src/pages/lancer-un-defi/culinaire/1.tsx
@@ -10,6 +10,7 @@ import { DEFI, isCooking } from 'src/activity-types/defi.constants';
 import type { CookingDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
 import { KeepRatio } from 'src/components/KeepRatio';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ImageModal } from 'src/components/activities/content/editors/ImageEditor/ImageModal';
@@ -84,7 +85,7 @@ const DefiStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         {!isEdit && <BackButton href="/lancer-un-defi" />}
         <Steps
           steps={['Votre plat', 'La recette', 'Le défi', 'Prévisualisation']}
@@ -96,7 +97,7 @@ const DefiStep1 = () => {
           <div>
             <Grid container spacing={2}>
               <Grid item xs={12} md={4}>
-                <div style={{ width: '100%', marginTop: '1rem', position: 'relative' }}>
+                <div style={{ width: '100%', maxWidth: '320px', margin: '1rem auto', position: 'relative' }}>
                   <ButtonBase onClick={() => setIsImageModalOpen(true)} style={{ width: '100%' }}>
                     <KeepRatio ratio={2 / 3} width="100%">
                       <div
@@ -104,6 +105,7 @@ const DefiStep1 = () => {
                           backgroundColor: bgPage,
                           height: '100%',
                           width: '100%',
+                          maxWidth: '320px',
                           display: 'flex',
                           alignItems: 'center',
                           justifyContent: 'center',
@@ -201,7 +203,7 @@ const DefiStep1 = () => {
           </div>
           {<StepsButton next={onNext} />}
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/culinaire/2.tsx b/src/pages/lancer-un-defi/culinaire/2.tsx
index ae598d05c..ff7d830fd 100644
--- a/src/pages/lancer-un-defi/culinaire/2.tsx
+++ b/src/pages/lancer-un-defi/culinaire/2.tsx
@@ -5,6 +5,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isCooking } from 'src/activity-types/defi.constants';
 import type { CookingDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentEditor } from 'src/components/activities/content';
@@ -48,7 +49,7 @@ const DefiStep2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Votre plat', 'La recette', 'Le défi', 'Prévisualisation']}
           urls={['/lancer-un-defi/culinaire/1?edit', '/lancer-un-defi/culinaire/2', '/lancer-un-defi/culinaire/3', '/lancer-un-defi/culinaire/4']}
@@ -64,7 +65,7 @@ const DefiStep2 = () => {
           <ContentEditor content={activity.content} updateContent={updateContent} addContent={addContent} deleteContent={deleteContent} />
           <StepsButton prev={`/lancer-un-defi/culinaire/1?edit=${activity.id}`} next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/culinaire/3.tsx b/src/pages/lancer-un-defi/culinaire/3.tsx
index 96c515382..424817b06 100644
--- a/src/pages/lancer-un-defi/culinaire/3.tsx
+++ b/src/pages/lancer-un-defi/culinaire/3.tsx
@@ -7,6 +7,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isCooking, COOKING_DEFIS } from 'src/activity-types/defi.constants';
 import type { CookingDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { getErrorSteps } from 'src/components/activities/defiChecksCooking';
@@ -67,7 +68,7 @@ const DefiStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Votre plat', 'La recette', 'Le défi', 'Prévisualisation']}
           urls={['/lancer-un-defi/culinaire/1?edit', '/lancer-un-defi/culinaire/2', '/lancer-un-defi/culinaire/3', '/lancer-un-defi/culinaire/4']}
@@ -113,7 +114,7 @@ const DefiStep3 = () => {
           </div>
           <StepsButton prev="/lancer-un-defi/culinaire/2" />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/culinaire/4.tsx b/src/pages/lancer-un-defi/culinaire/4.tsx
index 5b88fcade..c1f4c3c5e 100644
--- a/src/pages/lancer-un-defi/culinaire/4.tsx
+++ b/src/pages/lancer-un-defi/culinaire/4.tsx
@@ -14,6 +14,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isCooking, getDefi, DEFI } from 'src/activity-types/defi.constants';
 import type { CookingDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentView } from 'src/components/activities/content/ContentView';
@@ -69,7 +70,7 @@ const DefiStep4 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Votre plat', 'La recette', 'Le défi', 'Prévisualisation']}
           urls={['/lancer-un-defi/culinaire/1?edit', '/lancer-un-defi/culinaire/2', '/lancer-un-defi/culinaire/3', '/lancer-un-defi/culinaire/4']}
@@ -179,7 +180,7 @@ const DefiStep4 = () => {
 
           <StepsButton prev="/lancer-un-defi/culinaire/3" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/lancer-un-defi/ecologique/1.tsx b/src/pages/lancer-un-defi/ecologique/1.tsx
index b592ce36f..b42b7f7ff 100644
--- a/src/pages/lancer-un-defi/ecologique/1.tsx
+++ b/src/pages/lancer-un-defi/ecologique/1.tsx
@@ -5,6 +5,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isEco, DEFI, ECO_ACTIONS } from 'src/activity-types/defi.constants';
 import type { EcoDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { BackButton } from 'src/components/buttons/BackButton';
 import { ThemeChoiceButton } from 'src/components/buttons/ThemeChoiceButton';
@@ -49,7 +50,7 @@ const DefiEcoStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         {!isEdit && <BackButton href="/lancer-un-defi" />}
         <Steps
           steps={['Votre geste pour la planète', "Description de l'action", 'Le défi', 'Prévisualisation']}
@@ -64,7 +65,7 @@ const DefiEcoStep1 = () => {
             ))}
           </div>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/ecologique/2.tsx b/src/pages/lancer-un-defi/ecologique/2.tsx
index 24710471a..61d53c9c2 100644
--- a/src/pages/lancer-un-defi/ecologique/2.tsx
+++ b/src/pages/lancer-un-defi/ecologique/2.tsx
@@ -5,6 +5,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isEco } from 'src/activity-types/defi.constants';
 import type { EcoDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentEditor } from 'src/components/activities/content/';
@@ -48,7 +49,7 @@ const DefiEcoStep2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Votre geste pour la planète', "Description de l'action", 'Le défi', 'Prévisualisation']}
           urls={['/lancer-un-defi/ecologique/1?edit', '/lancer-un-defi/ecologique/2', '/lancer-un-defi/ecologique/3', '/lancer-un-defi/ecologique/4']}
@@ -63,7 +64,7 @@ const DefiEcoStep2 = () => {
           <ContentEditor content={activity.content} updateContent={updateContent} addContent={addContent} deleteContent={deleteContent} />
           <StepsButton prev={`/lancer-un-defi/ecologique/1?edit=${activity.id}`} next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/ecologique/3.tsx b/src/pages/lancer-un-defi/ecologique/3.tsx
index 614b13c6c..a57aa8b76 100644
--- a/src/pages/lancer-un-defi/ecologique/3.tsx
+++ b/src/pages/lancer-un-defi/ecologique/3.tsx
@@ -7,6 +7,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isEco, ECO_DEFIS } from 'src/activity-types/defi.constants';
 import type { EcoDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { getErrorSteps } from 'src/components/activities/defiEcologieChecks';
@@ -68,7 +69,7 @@ const DefiEcoStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Votre geste pour la planète', "Description de l'action", 'Le défi', 'Prévisualisation']}
           urls={['/lancer-un-defi/ecologique/1?edit', '/lancer-un-defi/ecologique/2', '/lancer-un-defi/ecologique/3', '/lancer-un-defi/ecologique/4']}
@@ -114,7 +115,7 @@ const DefiEcoStep3 = () => {
           </div>
           <StepsButton prev="/lancer-un-defi/ecologique/2" />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/ecologique/4.tsx b/src/pages/lancer-un-defi/ecologique/4.tsx
index 898acf422..b1f8fcca3 100644
--- a/src/pages/lancer-un-defi/ecologique/4.tsx
+++ b/src/pages/lancer-un-defi/ecologique/4.tsx
@@ -12,6 +12,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isEco, getDefi, ECO_ACTIONS, DEFI } from 'src/activity-types/defi.constants';
 import type { EcoDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentView } from 'src/components/activities/content/ContentView';
@@ -67,7 +68,7 @@ const DefiEcoStep4 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Votre geste pour la planète', "Description de l'action", 'Le défi', 'Prévisualisation']}
           urls={['/lancer-un-defi/ecologique/1?edit', '/lancer-un-defi/ecologique/2', '/lancer-un-defi/ecologique/3', '/lancer-un-defi/ecologique/4']}
@@ -162,7 +163,7 @@ const DefiEcoStep4 = () => {
 
           <StepsButton prev="/lancer-un-defi/ecologique/3" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/lancer-un-defi/index.tsx b/src/pages/lancer-un-defi/index.tsx
index 2569b4a15..ee4139b4d 100644
--- a/src/pages/lancer-un-defi/index.tsx
+++ b/src/pages/lancer-un-defi/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { ActivityChoice } from 'src/components/activities/ActivityChoice';
 import CulinaireIcon from 'src/svg/defi/culinaire.svg';
 import EcologiqueIcon from 'src/svg/defi/ecologique.svg';
@@ -39,7 +40,7 @@ const activities = [
 const Defi = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div className="width-900">
           <h1>Choisissez le défi que vous souhaitez réaliser</h1>
           <p className="text" style={{ fontSize: '1rem' }}>
@@ -49,7 +50,7 @@ const Defi = () => {
           </p>
           <ActivityChoice activities={activities} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/linguistique/1.tsx b/src/pages/lancer-un-defi/linguistique/1.tsx
index 923e7ee8b..a05720202 100644
--- a/src/pages/lancer-un-defi/linguistique/1.tsx
+++ b/src/pages/lancer-un-defi/linguistique/1.tsx
@@ -9,6 +9,7 @@ import { DEFI, isLanguage, LANGUAGE_SCHOOL } from 'src/activity-types/defi.const
 import type { LanguageDefiData } from 'src/activity-types/defi.types';
 import type { MascotteData } from 'src/activity-types/mascotte.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { BackButton } from 'src/components/buttons/BackButton';
@@ -127,7 +128,7 @@ const DefiStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         {!isEdit && <BackButton href="/lancer-un-defi" />}
         <Steps
           steps={[capitalize(data.language) || 'Langue', 'Thème', 'Présentation', 'Défi', 'Prévisualisation']}
@@ -196,7 +197,7 @@ const DefiStep1 = () => {
           </div>
           {<StepsButton next={onNext} />}
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/linguistique/2.tsx b/src/pages/lancer-un-defi/linguistique/2.tsx
index 3004b6c93..42b0c2962 100644
--- a/src/pages/lancer-un-defi/linguistique/2.tsx
+++ b/src/pages/lancer-un-defi/linguistique/2.tsx
@@ -7,6 +7,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isLanguage, LANGUAGE_THEMES } from 'src/activity-types/defi.constants';
 import type { LanguageDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { getErrorSteps } from 'src/components/activities/defiLanguageChecks';
 import { ThemeChoiceButton } from 'src/components/buttons/ThemeChoiceButton';
@@ -51,7 +52,7 @@ const DefiStep2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[capitalize(data.language) || 'Langue', 'Thème', 'Présentation', 'Défi', 'Prévisualisation']}
           urls={[
@@ -111,7 +112,7 @@ const DefiStep2 = () => {
             />
           </div>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/linguistique/3.tsx b/src/pages/lancer-un-defi/linguistique/3.tsx
index 9944e1e51..b82c5138d 100644
--- a/src/pages/lancer-un-defi/linguistique/3.tsx
+++ b/src/pages/lancer-un-defi/linguistique/3.tsx
@@ -5,6 +5,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isLanguage, LANGUAGE_THEMES } from 'src/activity-types/defi.constants';
 import type { LanguageDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentEditor } from 'src/components/activities/content';
@@ -74,7 +75,7 @@ const DefiStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[
             capitalize(data.language) || 'Langue',
@@ -110,7 +111,7 @@ const DefiStep3 = () => {
 
           <StepsButton prev="/lancer-un-defi/linguistique/2" next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/linguistique/4.tsx b/src/pages/lancer-un-defi/linguistique/4.tsx
index cff4786aa..81bc82099 100644
--- a/src/pages/lancer-un-defi/linguistique/4.tsx
+++ b/src/pages/lancer-un-defi/linguistique/4.tsx
@@ -7,6 +7,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isLanguage, LANGUAGE_DEFIS, LANGUAGE_THEMES } from 'src/activity-types/defi.constants';
 import type { LanguageDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { getErrorSteps } from 'src/components/activities/defiLanguageChecks';
@@ -66,7 +67,7 @@ const DefiStep4 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[
             capitalize(data.language) || 'Langue',
@@ -134,7 +135,7 @@ const DefiStep4 = () => {
           </div>
           <StepsButton prev="/lancer-un-defi/linguistique/3" />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/lancer-un-defi/linguistique/5.tsx b/src/pages/lancer-un-defi/linguistique/5.tsx
index d2ad4905b..2fba4173c 100644
--- a/src/pages/lancer-un-defi/linguistique/5.tsx
+++ b/src/pages/lancer-un-defi/linguistique/5.tsx
@@ -12,6 +12,7 @@ import { isDefi } from 'src/activity-types/anyActivity';
 import { isLanguage, getDefi, getLanguageTheme, DEFI, LANGUAGE_THEMES } from 'src/activity-types/defi.constants';
 import type { LanguageDefiData } from 'src/activity-types/defi.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentView } from 'src/components/activities/content/ContentView';
@@ -70,7 +71,7 @@ const DefiStep5 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[
             capitalize(data.language) || 'Langue',
@@ -188,7 +189,7 @@ const DefiStep5 = () => {
 
           <StepsButton prev="/lancer-un-defi/linguistique/4" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/lancer-un-defi/success.tsx b/src/pages/lancer-un-defi/success.tsx
index be76904b7..77d29af96 100644
--- a/src/pages/lancer-un-defi/success.tsx
+++ b/src/pages/lancer-un-defi/success.tsx
@@ -4,13 +4,14 @@ import React from 'react';
 import { Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
 
 const DefiSuccess = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div
           className="text-center"
           style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}
@@ -25,7 +26,7 @@ const DefiSuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/parametrer-hymne/1.tsx b/src/pages/parametrer-hymne/1.tsx
index 2828da3a8..5deee374b 100644
--- a/src/pages/parametrer-hymne/1.tsx
+++ b/src/pages/parametrer-hymne/1.tsx
@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import { Box } from '@mui/material';
 import Backdrop from '@mui/material/Backdrop';
 import CircularProgress from '@mui/material/CircularProgress';
 
@@ -10,6 +11,7 @@ import { isAnthem } from 'src/activity-types/anyActivity';
 import { postMixAudio } from 'src/api/audio/audio-mix.post';
 import { deleteAudio } from 'src/api/audio/audio.delete';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import AnthemTrack from 'src/components/activities/anthem/AnthemTrack/AnthemTrack';
@@ -113,14 +115,14 @@ const AnthemStep1 = () => {
     </Base>
   ) : (
     <Base>
-      <div className={styles.mainContainer}>
+      <PageLayout>
         <Steps
           steps={['Mix Couplet', 'Intro Outro', 'Couplet', 'Refrain', 'Prévisualiser']}
           activeStep={0}
           urls={['/parametrer-hymne/1?edit', '/parametrer-hymne/2', '/parametrer-hymne/3', '/parametrer-hymne/4', '/parametrer-hymne/5']}
           onBeforeLeavePage={buildVerseUrl}
         />
-        <div className={styles.contentContainer}>
+        <Box className={styles.contentContainer}>
           <h1>Mettre en ligne les pistes sonores du couplet</h1>
           <p> Commencez le paramétrage en mettant en ligne les différentes pistes sonores du couplet : </p>
           <div>
@@ -139,8 +141,8 @@ const AnthemStep1 = () => {
                   ),
                 )}
           </div>
-        </div>
-      </div>
+        </Box>
+      </PageLayout>
       <StepsButton next={onNext} />
       <Backdrop className={styles.trackSelectionBackdrop} open={isLoading}>
         <CircularProgress color="inherit" />
diff --git a/src/pages/parametrer-hymne/2.tsx b/src/pages/parametrer-hymne/2.tsx
index 6e45f5364..d5410a2f9 100644
--- a/src/pages/parametrer-hymne/2.tsx
+++ b/src/pages/parametrer-hymne/2.tsx
@@ -8,6 +8,7 @@ import styles from '../../styles/parametrer-hymne.module.css';
 import { postMixAudio } from 'src/api/audio/audio-mix.post';
 import { deleteAudio } from 'src/api/audio/audio.delete';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import AnthemTrack from 'src/components/activities/anthem/AnthemTrack/AnthemTrack';
@@ -96,7 +97,7 @@ const AnthemStep2 = () => {
 
   return (
     <Base>
-      <div className={styles.mainContainer}>
+      <PageLayout>
         <Steps
           steps={['Mix Couplet', 'Intro Outro', 'Couplet', 'Refrain', 'Prévisualiser']}
           errorSteps={errorSteps}
@@ -157,7 +158,7 @@ const AnthemStep2 = () => {
             ></AnthemTrack>
           </div>
         </div>
-      </div>
+      </PageLayout>
       <StepsButton prev="/parametrer-hymne/1?edit" next={onNext} />
       <Backdrop className={styles.trackSelectionBackdrop} open={isLoading}>
         <CircularProgress color="inherit" />
diff --git a/src/pages/parametrer-hymne/3.tsx b/src/pages/parametrer-hymne/3.tsx
index be7c1c24a..ca10c35b7 100644
--- a/src/pages/parametrer-hymne/3.tsx
+++ b/src/pages/parametrer-hymne/3.tsx
@@ -6,6 +6,7 @@ import { ButtonBase, Card } from '@mui/material';
 import styles from '../../styles/parametrer-hymne.module.css';
 import { isAnthem } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { getErrorSteps } from 'src/components/activities/anthemChecks';
@@ -46,7 +47,7 @@ const AnthemStep3 = () => {
 
   return (
     <Base>
-      <div className={styles.mainContainer}>
+      <PageLayout>
         <Steps
           steps={['Mix Couplet', 'Intro Outro', 'Couplet', 'Refrain', 'Prévisualiser']}
           errorSteps={errorSteps}
@@ -117,7 +118,7 @@ const AnthemStep3 = () => {
             <StepsButton prev="/parametrer-hymne/2" next={onNext} />
           </div>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/parametrer-hymne/4.tsx b/src/pages/parametrer-hymne/4.tsx
index 645ba2a7c..ceb13c238 100644
--- a/src/pages/parametrer-hymne/4.tsx
+++ b/src/pages/parametrer-hymne/4.tsx
@@ -6,6 +6,7 @@ import { ButtonBase, Card } from '@mui/material';
 import styles from '../../styles/parametrer-hymne.module.css';
 import { isAnthem } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { getErrorSteps } from 'src/components/activities/anthemChecks';
@@ -54,7 +55,7 @@ const AnthemStep4 = () => {
 
   return (
     <Base>
-      <div className={styles.mainContainer}>
+      <PageLayout>
         <Steps
           steps={['Mix Couplet', 'Intro Outro', 'Couplet', 'Refrain', 'Prévisualiser']}
           errorSteps={errorSteps}
@@ -131,7 +132,7 @@ const AnthemStep4 = () => {
             <StepsButton prev="/parametrer-hymne/3" next={onNext} />
           </div>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/parametrer-hymne/5.tsx b/src/pages/parametrer-hymne/5.tsx
index c7ac8446e..8acd6eb77 100644
--- a/src/pages/parametrer-hymne/5.tsx
+++ b/src/pages/parametrer-hymne/5.tsx
@@ -9,6 +9,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 
 import { isAnthem } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { getErrorSteps } from 'src/components/activities/anthemChecks';
@@ -63,7 +64,7 @@ const AnthemStep5 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Mix Couplet', 'Intro Outro', 'Couplet', 'Refrain', 'Prévisualiser']}
           errorSteps={errorSteps}
@@ -168,7 +169,7 @@ const AnthemStep5 = () => {
 
           <StepsButton prev="/parametrer-hymne/4" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/parametrer-hymne/success.tsx b/src/pages/parametrer-hymne/success.tsx
index 55656ed89..a6fa212a0 100644
--- a/src/pages/parametrer-hymne/success.tsx
+++ b/src/pages/parametrer-hymne/success.tsx
@@ -4,13 +4,14 @@ import React from 'react';
 import { Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
 
 const AnthemSuccess = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}>
           <p className="text">Votre hymne a bien été paramétré !</p>
           <PelicoSouriant style={{ width: '60%', height: 'auto', margin: '0 20%' }} />
@@ -22,7 +23,7 @@ const AnthemSuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/poser-une-question/1.tsx b/src/pages/poser-une-question/1.tsx
index 0acad5115..53ac3861e 100644
--- a/src/pages/poser-une-question/1.tsx
+++ b/src/pages/poser-une-question/1.tsx
@@ -6,6 +6,7 @@ import { Button } from '@mui/material';
 import { isQuestion } from 'src/activity-types/anyActivity';
 import { AvatarImg } from 'src/components/Avatar';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { UserDisplayName } from 'src/components/UserDisplayName';
@@ -86,7 +87,7 @@ const Question1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <BackButton href="/" />
         <Steps
           steps={['Les questions', 'Poser ses questions', 'Prévisualiser']}
@@ -156,7 +157,7 @@ const Question1 = () => {
 
           <StepsButton next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/poser-une-question/2.tsx b/src/pages/poser-une-question/2.tsx
index 410dc6b45..686206acf 100644
--- a/src/pages/poser-une-question/2.tsx
+++ b/src/pages/poser-une-question/2.tsx
@@ -6,6 +6,7 @@ import { ButtonBase, TextField, Card } from '@mui/material';
 
 import { isQuestion } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { DeleteButton } from 'src/components/buttons/DeleteButton';
@@ -62,7 +63,7 @@ const Question2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Les questions', 'Poser ses questions', 'Prévisualiser']}
           urls={['/poser-une-question/1?edit', '/poser-une-question/2', '/poser-une-question/3']}
@@ -120,7 +121,7 @@ const Question2 = () => {
 
           <StepsButton prev={activity.id === 0 ? '/poser-une-question/1?edit=true' : undefined} next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/poser-une-question/3.tsx b/src/pages/poser-une-question/3.tsx
index 4df746587..c2f9e6ed0 100644
--- a/src/pages/poser-une-question/3.tsx
+++ b/src/pages/poser-une-question/3.tsx
@@ -12,6 +12,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import { isQuestion } from 'src/activity-types/anyActivity';
 import type { QuestionActivity } from 'src/activity-types/question.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { getActivityPhase } from 'src/components/activities/utils';
@@ -108,7 +109,7 @@ const Question3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Les questions', 'Poser ses questions', 'Prévisualiser']}
           urls={['/poser-une-question/1?edit', '/poser-une-question/2', '/poser-une-question/3']}
@@ -191,7 +192,7 @@ const Question3 = () => {
 
           <StepsButton prev="/poser-une-question/2" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/poser-une-question/success.tsx b/src/pages/poser-une-question/success.tsx
index 7c829876d..be143e51d 100644
--- a/src/pages/poser-une-question/success.tsx
+++ b/src/pages/poser-une-question/success.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import { Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { ActivityContext } from 'src/contexts/activityContext';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
@@ -24,7 +25,7 @@ const QuestionSuccess = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}>
           <p className="text">{questionsCount > 1 ? 'Vos questions ont bien été enregistrées !' : 'Votre question a bien été enregistrée !'}</p>
           <PelicoSouriant style={{ width: '60%', height: 'auto', margin: '0 20%' }} />
@@ -36,7 +37,7 @@ const QuestionSuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/re-inventer-une-histoire/1.tsx b/src/pages/re-inventer-une-histoire/1.tsx
index 5518ddbb5..49c41d4ee 100644
--- a/src/pages/re-inventer-une-histoire/1.tsx
+++ b/src/pages/re-inventer-une-histoire/1.tsx
@@ -9,6 +9,7 @@ import { isStory } from 'src/activity-types/anyActivity';
 import { ODD_CHOICE } from 'src/activity-types/story.constants';
 import { Base } from 'src/components/Base';
 import { KeepRatio } from 'src/components/KeepRatio';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ImageModal } from 'src/components/activities/content/editors/ImageEditor/ImageModal';
@@ -61,7 +62,7 @@ const ReInventStoryStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         {!isEdit && <BackButton href="/re-inventer-une-histoire" />}
         <Steps
           steps={['ODD', 'Objet', 'Lieu', 'Histoire', 'Prévisualisation']}
@@ -78,10 +79,10 @@ const ReInventStoryStep1 = () => {
           <h1>Choisissez et dessinez l’objectif du développement durable à atteindre</h1>
           <p className="text">Pour atteindre votre objectif de développement durable, vous choisirez un objet et un lieu aux étapes précédentes.</p>
           <p className="text">Choisissez votre objectif et dessinez-le.</p>
-          <Grid container spacing={3}>
+          <Grid container>
             <Grid item xs={12} md={6}>
               <div style={{ marginTop: '1.5rem' }}>
-                <div style={{ width: '100%', marginTop: '1rem', position: 'relative' }}>
+                <div style={{ width: '100%', maxWidth: '320px', marginTop: '1rem', position: 'relative' }}>
                   <ButtonBase onClick={() => setIsImageModalOpen(true)} style={{ width: '100%', color: `${isError ? errorColor : primaryColor}` }}>
                     <KeepRatio ratio={2 / 3} width="100%">
                       <div
@@ -156,7 +157,7 @@ const ReInventStoryStep1 = () => {
           </Grid>
         </div>
         <StepsButton next={onNext} />
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/re-inventer-une-histoire/2.tsx b/src/pages/re-inventer-une-histoire/2.tsx
index 7f51d15cc..184def91f 100644
--- a/src/pages/re-inventer-une-histoire/2.tsx
+++ b/src/pages/re-inventer-une-histoire/2.tsx
@@ -8,6 +8,7 @@ import { TextField, Grid, ButtonBase } from '@mui/material';
 import { isStory } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
 import { KeepRatio } from 'src/components/KeepRatio';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ImageModal } from 'src/components/activities/content/editors/ImageEditor/ImageModal';
@@ -62,7 +63,7 @@ const ReInventStoryStep2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['ODD', 'Objet', 'Lieu', 'Histoire', 'Prévisualisation']}
           urls={[
@@ -81,10 +82,10 @@ const ReInventStoryStep2 = () => {
             Cet objet, tout comme le lieu que vous choisirez à l’étape suivante, est magique ! Grâce à leurs pouvoirs, le village idéal va atteindre
             l’objectif du développement durable que vous avez choisi à l’étape précédente.
           </p>
-          <Grid container spacing={3}>
+          <Grid container>
             <Grid item xs={12} md={6}>
               <div style={{ marginTop: '1.5rem' }}>
-                <div style={{ width: '100%', marginTop: '1rem', position: 'relative' }}>
+                <div style={{ width: '100%', maxWidth: '320px', marginTop: '1rem', position: 'relative' }}>
                   <ButtonBase onClick={() => setIsImageModalOpen(true)} style={{ width: '100%', color: `${primaryColor}` }}>
                     <KeepRatio ratio={2 / 3} width="100%">
                       <div
@@ -153,7 +154,7 @@ const ReInventStoryStep2 = () => {
           </Grid>
         </div>
         <StepsButton prev={`/re-inventer-une-histoire/1?edit=${activity.id}`} next={onNext} />
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/re-inventer-une-histoire/3.tsx b/src/pages/re-inventer-une-histoire/3.tsx
index 931adc0e2..fb6cba2df 100644
--- a/src/pages/re-inventer-une-histoire/3.tsx
+++ b/src/pages/re-inventer-une-histoire/3.tsx
@@ -8,6 +8,7 @@ import { TextField, Grid, ButtonBase } from '@mui/material';
 import { isStory } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
 import { KeepRatio } from 'src/components/KeepRatio';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ImageModal } from 'src/components/activities/content/editors/ImageEditor/ImageModal';
@@ -69,7 +70,7 @@ const ReInventStoryStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['ODD', 'Objet', 'Lieu', 'Histoire', 'Prévisualisation']}
           urls={[
@@ -88,10 +89,10 @@ const ReInventStoryStep3 = () => {
             Ce lieu, tout comme l’objet que vous avez choisi à l’étape précédente, est extraodinaire ! Grâce à leurs pouvoirs, le village idéal va
             atteindre l’objectif de développement durable que vous avez choisi.
           </p>
-          <Grid container spacing={3}>
+          <Grid container>
             <Grid item xs={12} md={6}>
               <div style={{ marginTop: '1.5rem' }}>
-                <div style={{ width: '100%', marginTop: '1rem', position: 'relative' }}>
+                <div style={{ width: '100%', maxWidth: '320px', marginTop: '1rem', position: 'relative' }}>
                   <ButtonBase onClick={() => setIsImageModalOpen(true)} style={{ width: '100%', color: `${primaryColor}` }}>
                     <KeepRatio ratio={2 / 3} width="100%">
                       <div
@@ -160,7 +161,7 @@ const ReInventStoryStep3 = () => {
           </Grid>
         </div>
         <StepsButton prev="/re-inventer-une-histoire/2" next={onNext} />
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/re-inventer-une-histoire/4.tsx b/src/pages/re-inventer-une-histoire/4.tsx
index 91784dd7c..12f2391d7 100644
--- a/src/pages/re-inventer-une-histoire/4.tsx
+++ b/src/pages/re-inventer-une-histoire/4.tsx
@@ -8,6 +8,7 @@ import { TextField, Grid, ButtonBase } from '@mui/material';
 import { isStory } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
 import { KeepRatio } from 'src/components/KeepRatio';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ImageModal } from 'src/components/activities/content/editors/ImageEditor/ImageModal';
@@ -72,7 +73,7 @@ const ReInventStoryStep4 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['ODD', 'Objet', 'Lieu', 'Histoire', 'Prévisualisation']}
           urls={[
@@ -91,9 +92,9 @@ const ReInventStoryStep4 = () => {
             Racontez à vos pélicopains comment le village-idéal et l’objet magique nous permettent d’atteindre l’objectif du développement durable que
             vous avez choisi ! Illustrez votre histoire avec un dessin de votre visite dans le village-idéal.
           </p>
-          <Grid container spacing={3}>
+          <Grid container>
             <Grid item xs={12} md={6}>
-              <div style={{ width: '100%', marginTop: '1rem', position: 'relative' }}>
+              <div style={{ width: '100%', maxWidth: '320px', marginTop: '1rem', position: 'relative' }}>
                 <ButtonBase onClick={() => setIsImageModalOpen(true)} style={{ width: '100%', color: `${primaryColor}` }}>
                   <KeepRatio ratio={2 / 3} width="100%">
                     <div
@@ -149,7 +150,7 @@ const ReInventStoryStep4 = () => {
           </Grid>
         </div>
         <StepsButton prev="/re-inventer-une-histoire/3" next={onNext} />
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/re-inventer-une-histoire/5.tsx b/src/pages/re-inventer-une-histoire/5.tsx
index e69121268..9ef60b516 100644
--- a/src/pages/re-inventer-une-histoire/5.tsx
+++ b/src/pages/re-inventer-une-histoire/5.tsx
@@ -7,6 +7,7 @@ import { Tooltip, Button, Backdrop, CircularProgress } from '@mui/material';
 import { isStory } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
 import { ImageStepContainer } from 'src/components/FinalStep/ImageStepContainer';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { getErrorSteps } from 'src/components/activities/storyChecks';
@@ -102,7 +103,7 @@ const ReInventStoryStep5 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['ODD', 'Objet', 'Lieu', 'Histoire', 'Prévisualisation']}
           urls={[
@@ -125,7 +126,7 @@ const ReInventStoryStep5 = () => {
           </p>
 
           {isEdit ? (
-            <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', margin: '1rem 0' }}>
+            <div style={{ width: '100%', maxWidth: '320px', display: 'flex', justifyContent: 'space-between', margin: '1rem 0' }}>
               <Link href="/re-inventer-une-histoire/2" passHref>
                 <Button component="a" color="secondary" variant="contained" href="/re-inventer-une-histoire/2">
                   {"Modifier à l'étape précédente"}
@@ -197,7 +198,7 @@ const ReInventStoryStep5 = () => {
           />
         </div>
         <StepsButton prev="/re-inventer-une-histoire/4" />
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/re-inventer-une-histoire/index.tsx b/src/pages/re-inventer-une-histoire/index.tsx
index 77067a20a..6db85ec73 100644
--- a/src/pages/re-inventer-une-histoire/index.tsx
+++ b/src/pages/re-inventer-une-histoire/index.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { DEFAULT_STORY_DATA } from 'src/activity-types/story.constants';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { StepsButton } from 'src/components/StepsButtons';
 import StoryPictureWheel from 'src/components/storyPictureWheel/storyPictureWheel';
 import { ActivityContext } from 'src/contexts/activityContext';
@@ -60,7 +61,7 @@ const InspiredStory = () => {
   return (
     <>
       <Base>
-        <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+        <PageLayout>
           <h1>Ré-inventer l’histoire du village-idéal</h1>
           <p className="text">
             Comme vous le savez déjà, les Olympiades de Pélico ont commencé et elles ont lieu dans le village-idéal, l’endroit où tout est possible…
@@ -87,7 +88,7 @@ const InspiredStory = () => {
             Inspirez-vous de ce qu’ils ont dessiné et laissez libre court à votre imagination ! Souvenez-vous que si l’objectif du développement
             durable est bien réel, l’objet et lieu que vous choisissez pour l’atteindre sont magiques 🙂
           </p>
-        </div>
+        </PageLayout>
         {/* Roulette images */}
         <StoryPictureWheel
           initialOddImage={inspiredImages ? inspiredImages.odd : null}
diff --git a/src/pages/re-inventer-une-histoire/success.tsx b/src/pages/re-inventer-une-histoire/success.tsx
index b602c3cf8..036d12888 100644
--- a/src/pages/re-inventer-une-histoire/success.tsx
+++ b/src/pages/re-inventer-une-histoire/success.tsx
@@ -4,13 +4,14 @@ import React from 'react';
 import { Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
 
 const InspiredStorySuccess = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}>
           <p className="text" style={{ margin: '1rem 1.5rem' }}>
             Votre histoire a bien été publiée !
@@ -24,7 +25,7 @@ const InspiredStorySuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/reagir-a-une-activite/1.tsx b/src/pages/reagir-a-une-activite/1.tsx
index a8a646d13..9b4cb0c1a 100644
--- a/src/pages/reagir-a-une-activite/1.tsx
+++ b/src/pages/reagir-a-une-activite/1.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { isReaction } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { ActivitySelect } from 'src/components/activities/ActivitySelect';
 import { DESC } from 'src/components/activities/utils';
@@ -71,7 +72,7 @@ const ReactionStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Activité', 'Réaction', 'Prévisualisation']}
           urls={['/reagir-a-une-activite/1?edit', '/reagir-a-une-activite/2?edit', '/reagir-a-une-activite/3']}
@@ -94,7 +95,7 @@ const ReactionStep1 = () => {
             ))}
           </div>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/reagir-a-une-activite/2.tsx b/src/pages/reagir-a-une-activite/2.tsx
index 2890b9bce..6f13b2b56 100644
--- a/src/pages/reagir-a-une-activite/2.tsx
+++ b/src/pages/reagir-a-une-activite/2.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { isReaction } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentEditor } from 'src/components/activities/content';
@@ -48,7 +49,7 @@ const ReactionStep2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Activité', 'Réaction', 'Prévisualisation']}
           urls={['/reagir-a-une-activite/1?edit', '/reagir-a-une-activite/2', '/reagir-a-une-activite/3']}
@@ -60,7 +61,7 @@ const ReactionStep2 = () => {
           <ContentEditor content={activity.content} updateContent={updateContent} addContent={addContent} deleteContent={deleteContent} />
           <StepsButton prev={url} next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/reagir-a-une-activite/3.tsx b/src/pages/reagir-a-une-activite/3.tsx
index aba75f391..731eb8283 100644
--- a/src/pages/reagir-a-une-activite/3.tsx
+++ b/src/pages/reagir-a-une-activite/3.tsx
@@ -10,6 +10,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 
 import { isReaction } from 'src/activity-types/anyActivity';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import ActivityLink from 'src/components/activities/Link';
@@ -71,7 +72,7 @@ const ReactionStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={['Activité', 'Réaction', 'Prévisualisation']}
           urls={['/reagir-a-une-activite/1?edit', '/reagir-a-une-activite/2?edit', '/reagir-a-une-activite/3']}
@@ -155,7 +156,7 @@ const ReactionStep3 = () => {
 
           <StepsButton prev="/reagir-a-une-activite/2" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/reagir-a-une-activite/success.tsx b/src/pages/reagir-a-une-activite/success.tsx
index b7aee8c2c..2de1adc84 100644
--- a/src/pages/reagir-a-une-activite/success.tsx
+++ b/src/pages/reagir-a-une-activite/success.tsx
@@ -4,13 +4,14 @@ import React from 'react';
 import { Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
 
 const ReactionSuccess = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div
           className="text-center"
           style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}
@@ -25,7 +26,7 @@ const ReactionSuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/realiser-un-reportage/1.tsx b/src/pages/realiser-un-reportage/1.tsx
index 9e5263624..12e5e1508 100644
--- a/src/pages/realiser-un-reportage/1.tsx
+++ b/src/pages/realiser-un-reportage/1.tsx
@@ -6,6 +6,7 @@ import { TextField } from '@mui/material';
 import { getReportage } from 'src/activity-types/reportage.constants';
 import type { ReportageData } from 'src/activity-types/reportage.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { Activities } from 'src/components/activities/List';
@@ -71,7 +72,7 @@ const ReportageStep1 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         {!isEdit && <BackButton href="/realiser-un-reportage" />}
         <Steps
           steps={[getReportage(activity.subType, data).step1 || 'Choix du thème', 'Le reportage', 'Prévisualiser']}
@@ -120,7 +121,7 @@ const ReportageStep1 = () => {
             </div>
           )}
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/realiser-un-reportage/2.tsx b/src/pages/realiser-un-reportage/2.tsx
index 8d84ce0ef..9815b8859 100644
--- a/src/pages/realiser-un-reportage/2.tsx
+++ b/src/pages/realiser-un-reportage/2.tsx
@@ -5,6 +5,7 @@ import { isReportage } from 'src/activity-types/anyActivity';
 import { getReportage } from 'src/activity-types/reportage.constants';
 import type { ReportageData } from 'src/activity-types/reportage.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentEditor } from 'src/components/activities/content';
@@ -50,7 +51,7 @@ const ReportageStep2 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[getReportage(activity.subType, data).step1, 'Le reportage', 'Prévisualiser']}
           urls={['/realiser-un-reportage/1?edit', '/realiser-un-reportage/2', '/realiser-un-reportage/3']}
@@ -69,7 +70,7 @@ const ReportageStep2 = () => {
           <ContentEditor content={activity.content} updateContent={updateContent} addContent={addContent} deleteContent={deleteContent} />
           <StepsButton prev="/realiser-un-reportage/1?edit" next={onNext} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/realiser-un-reportage/3.tsx b/src/pages/realiser-un-reportage/3.tsx
index 1346a8b6d..da607ce5e 100644
--- a/src/pages/realiser-un-reportage/3.tsx
+++ b/src/pages/realiser-un-reportage/3.tsx
@@ -12,6 +12,7 @@ import { isReportage } from 'src/activity-types/anyActivity';
 import { getReportage } from 'src/activity-types/reportage.constants';
 import type { ReportageData } from 'src/activity-types/reportage.types';
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { Steps } from 'src/components/Steps';
 import { StepsButton } from 'src/components/StepsButtons';
 import { ContentView } from 'src/components/activities/content/ContentView';
@@ -72,7 +73,7 @@ const ReportageStep3 = () => {
 
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <Steps
           steps={[getReportage(activity.subType, data).step1, 'Le reportage', 'Prévisualiser']}
           urls={['/realiser-un-reportage/1?edit', '/realiser-un-reportage/2', '/realiser-un-reportage/3']}
@@ -149,7 +150,7 @@ const ReportageStep3 = () => {
 
           <StepsButton prev="/realiser-un-reportage/2" />
         </div>
-      </div>
+      </PageLayout>
       <Backdrop style={{ zIndex: 2000, color: 'white' }} open={isLoading}>
         <CircularProgress color="inherit" />
       </Backdrop>
diff --git a/src/pages/realiser-un-reportage/index.tsx b/src/pages/realiser-un-reportage/index.tsx
index d014d9689..4cbceee99 100644
--- a/src/pages/realiser-un-reportage/index.tsx
+++ b/src/pages/realiser-un-reportage/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { ActivityChoice } from 'src/components/activities/ActivityChoice';
 import ArtIcon from 'src/svg/indice-culturel/art.svg';
 import CuisineIcon from 'src/svg/indice-culturel/cuisine.svg';
@@ -80,7 +81,7 @@ const reportages = [
 const Reportage = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div className="width-900">
           <h1 style={{ marginTop: '0.5rem' }}>Sur quel thème souhaitez-vous réaliser votre reportage ?</h1>
           <p className="text">
@@ -90,7 +91,7 @@ const Reportage = () => {
           <p className="text">Commencez par choisir le thème de votre reportage.</p>
           <ActivityChoice activities={reportages} />
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };
diff --git a/src/pages/realiser-un-reportage/success.tsx b/src/pages/realiser-un-reportage/success.tsx
index 1a9855c2f..e3e4c11d5 100644
--- a/src/pages/realiser-un-reportage/success.tsx
+++ b/src/pages/realiser-un-reportage/success.tsx
@@ -4,13 +4,14 @@ import React from 'react';
 import { Button } from '@mui/material';
 
 import { Base } from 'src/components/Base';
+import { PageLayout } from 'src/components/PageLayout';
 import { bgPage } from 'src/styles/variables.const';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
 
 const ReportageSuccess = () => {
   return (
     <Base>
-      <div style={{ width: '100%', padding: '1rem 1rem 1rem 1rem' }}>
+      <PageLayout>
         <div style={{ width: '100%', maxWidth: '20rem', margin: '4rem auto', backgroundColor: bgPage, padding: '1rem', borderRadius: '10px' }}>
           <p className="text" style={{ margin: '1rem 1.5rem' }}>
             Votre reportage a bien été publié !
@@ -24,7 +25,7 @@ const ReportageSuccess = () => {
             </Button>
           </Link>
         </div>
-      </div>
+      </PageLayout>
     </Base>
   );
 };