diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 4757d05dc..d93705b5c 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -13,7 +13,7 @@ jobs:
 
       # [2] get node.
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: '16.15.1'
 
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 8c0c93b85..b9dff9e97 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -15,7 +15,7 @@ jobs:
 
       # [2] get node.
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: '16.15.1'
 
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 4a510c680..064f55f2c 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -13,7 +13,7 @@ jobs:
 
       # [2] get node.
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: '16.15.1'
 
@@ -33,7 +33,7 @@ jobs:
 
       # [2] get node.
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: '16.15.1'
 
@@ -53,7 +53,7 @@ jobs:
 
       # [2] get node.
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: '16.15.1'
 
diff --git a/src/components/KeepRatio.tsx b/src/components/KeepRatio.tsx
index 30a14042c..236440930 100644
--- a/src/components/KeepRatio.tsx
+++ b/src/components/KeepRatio.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 interface KeepRatioProps {
   ratio: number;
   width?: string | number;
+  height?: string | number;
   maxWidth?: string | number;
   minHeight?: string | number;
   className?: string;
@@ -10,6 +11,7 @@ interface KeepRatioProps {
 
 export const KeepRatio = ({
   width = '100%',
+  height = '100%',
   maxWidth = '100%',
   minHeight = 0,
   ratio,
@@ -20,7 +22,7 @@ export const KeepRatio = ({
     <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
       <div style={{ width, maxWidth }}>
         <div style={{ width: '100%', paddingBottom: `${ratio * 100}%`, minHeight, position: 'relative' }}>
-          <div className={className} style={{ position: 'absolute', top: '0', left: '0', width: '100%', height: '100%' }}>
+          <div className={className} style={{ position: 'absolute', top: '0', left: '0', width: '100%', height }}>
             {children}
           </div>
         </div>
diff --git a/src/components/WelcomeModal/FirstPhase.tsx b/src/components/WelcomeModal/FirstPhase.tsx
index cfa3caa50..cb520e86e 100644
--- a/src/components/WelcomeModal/FirstPhase.tsx
+++ b/src/components/WelcomeModal/FirstPhase.tsx
@@ -272,9 +272,11 @@ export const FirstPhase = () => {
                 <PanelInput
                   value={newUser.school || ''}
                   defaultValue={'non renseignée'}
-                  label="École :"
-                  placeholder="Nom de votre école"
+                  label="École : "
+                  placeholder="Nom de votre école : "
+                  hasError={!newUser.school}
                   isEditMode
+                  isRequired
                   onChange={(school) => {
                     setNewUser((u) => ({ ...u, school }));
                   }}
@@ -282,9 +284,11 @@ export const FirstPhase = () => {
                 <PanelInput
                   value={newUser.level || ''}
                   defaultValue={'non renseigné'}
-                  label="Niveau de la classe :"
+                  label="Niveau de la classe : "
                   placeholder="Niveau de votre classe"
+                  hasError={!newUser.level}
                   isEditMode
+                  isRequired
                   onChange={(level) => {
                     setNewUser((u) => ({ ...u, level }));
                   }}
@@ -292,10 +296,11 @@ export const FirstPhase = () => {
                 <PanelInput
                   value={newUser.address || ''}
                   defaultValue={'non renseigné'}
-                  label="Adresse de l'école :"
+                  label="Adresse de l'école : "
                   placeholder="Adresse"
                   hasError={!newUser.address}
                   isEditMode
+                  isRequired
                   onChange={(address) => {
                     setNewUser((u) => ({ ...u, address }));
                   }}
@@ -303,10 +308,11 @@ export const FirstPhase = () => {
                 <PanelInput
                   value={newUser.city || ''}
                   defaultValue={'non renseigné'}
-                  label="Ville :"
+                  label="Ville : "
                   placeholder="Ville"
                   hasError={!newUser.city}
                   isEditMode
+                  isRequired
                   onChange={(city) => {
                     setNewUser((u) => ({ ...u, city }));
                   }}
@@ -314,10 +320,11 @@ export const FirstPhase = () => {
                 <PanelInput
                   value={newUser.postalCode || ''}
                   defaultValue={'non renseigné'}
-                  label="Code postal :"
+                  label="Code postal : "
                   placeholder="Code postal"
                   hasError={!newUser.postalCode}
                   isEditMode
+                  isRequired
                   onChange={(postalCode) => {
                     setNewUser((u) => ({ ...u, postalCode }));
                   }}
@@ -329,7 +336,7 @@ export const FirstPhase = () => {
                   style={{ marginTop: '2rem' }}
                   value={newUser.displayName || ''}
                   defaultValue={'non renseigné'}
-                  label="Nom affiché :"
+                  label="Nom affiché : "
                   placeholder={getUserDisplayName({ ...user, ...newUser, type: user?.type }, false)}
                   isEditMode
                   onChange={(displayName) => {
diff --git a/src/components/accueil/NewHome.tsx b/src/components/accueil/NewHome.tsx
index 0bfa829ea..a68f3fd46 100644
--- a/src/components/accueil/NewHome.tsx
+++ b/src/components/accueil/NewHome.tsx
@@ -26,24 +26,12 @@ export const NewHome = () => {
   return (
     <div className="bg-gradiant" style={{ display: 'flex', flexDirection: 'column' }}>
       <>
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
-            gap: '10px',
-            background: 'white',
-            width: '95%',
-            height: '50px',
-            maxWidth: '1200px',
-            borderRadius: '10px',
-            marginBottom: '2rem',
-          }}
-        >
+        <div className="login__header">
           <Logo style={{ width: '25%', height: 'auto', margin: '0 10px', alignSelf: 'center' }} />
           <h1 style={{ placeSelf: 'center' }}>Vous êtes...</h1>
         </div>
-        <KeepRatio ratio={0.45} width="95%" maxWidth="1200px" minHeight="400px" className="login__container">
-          <div className="text-center" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '2rem', placeItems: 'center' }}>
+        <KeepRatio ratio={0.45} width="95%" maxWidth="1200px" height="fit-content" minHeight="400px" className="login__container">
+          <div className="flex-responsive text-center">
             {/* Block Teacher */}
             <div style={{ display: 'flex', flexDirection: 'column', height: '300px' }}>
               <h2>Professeur des écoles</h2>
diff --git a/src/components/mon-compte/PanelInput.tsx b/src/components/mon-compte/PanelInput.tsx
index 954c4a290..e9be8eaa6 100644
--- a/src/components/mon-compte/PanelInput.tsx
+++ b/src/components/mon-compte/PanelInput.tsx
@@ -8,6 +8,7 @@ interface PanelInputProps {
   defaultValue?: string;
   label: string;
   placeholder?: string;
+  isRequired?: boolean;
   isEditMode?: boolean;
   errorMsg?: string;
   helperText?: string;
@@ -23,6 +24,7 @@ export const PanelInput = ({
   defaultValue = '',
   label,
   placeholder = '',
+  isRequired = false,
   isEditMode = true,
   errorMsg,
   helperText,
@@ -36,6 +38,7 @@ export const PanelInput = ({
     <div style={{ margin: '0.5rem', display: 'inline-flex', alignItems: 'flex-start', ...style }}>
       <label className="text text--bold" style={{ flexShrink: 0 }}>
         {label}
+        {isRequired && <span style={{ color: 'red' }}>*</span>}
       </label>
       {isEditMode ? (
         <TextField
diff --git a/src/pages/admin/users/index.tsx b/src/pages/admin/users/index.tsx
index 1af16c3f8..74736b6a3 100644
--- a/src/pages/admin/users/index.tsx
+++ b/src/pages/admin/users/index.tsx
@@ -4,6 +4,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 import DeleteIcon from '@mui/icons-material/Delete';
+import DownloadIcon from '@mui/icons-material/Download';
 import EditIcon from '@mui/icons-material/Edit';
 import type { SelectChangeEvent } from '@mui/material';
 import { FormControl, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
@@ -22,6 +23,7 @@ import { useUsers, useUserRequests } from 'src/services/useUsers';
 import { useVillages } from 'src/services/useVillages';
 import { defaultContainedButtonStyle } from 'src/styles/variables.const';
 import { countryToFlag } from 'src/utils';
+import { exportJsonToCsv } from 'src/utils/csv-export';
 import { userTypeNames } from 'types/user.type';
 import type { Village } from 'types/village.type';
 
@@ -64,6 +66,35 @@ const Users = () => {
     setUserTypeFilter(e.target.value);
   }, []);
 
+  const handleExportToCSV = () => {
+    if (filteredUsers.length < 1) return;
+
+    const datasToExport = filteredUsers.map((user) => {
+      return {
+        firstname: user.firstname,
+        lastname: user.lastname,
+        email: user.email,
+        school: user.school ? user.school : 'Non renseignee',
+        village: user.villageId ? villageMap[user.villageId]?.name : 'Non renseigne',
+        country: user.country ? user.country.name : 'Non renseigne',
+      };
+    });
+
+    const headers = ['Prenom', 'Nom', 'Email', 'Ecole', 'Village', 'Pays'];
+
+    let userLabel = 'liste-utilisateurs-';
+
+    for (const [key, value] of Object.entries(userTypeNames)) {
+      if (key === userTypeFilter) {
+        userLabel = 'liste-' + value.toLowerCase().replaceAll(' ', '-') + 's-';
+      }
+    }
+    const todayDate = new Date().toLocaleDateString('fr-FR').replaceAll('/', '-');
+    const fileName = userLabel + todayDate;
+
+    exportJsonToCsv(fileName, headers, datasToExport);
+  };
+
   const actions = (id: number) => (
     <>
       <Tooltip title="Modifier">
@@ -157,6 +188,18 @@ const Users = () => {
               ))}
             </Select>
           </FormControl>
+          <Button
+            color="inherit"
+            sx={defaultContainedButtonStyle}
+            component="a"
+            onClick={handleExportToCSV}
+            variant="contained"
+            style={{ flexShrink: 0, marginLeft: '1rem' }}
+            startIcon={<DownloadIcon />}
+            disabled={filteredUsers.length === 0}
+          >
+            Exporter en CSV
+          </Button>
         </div>
         <AdminTable
           emptyPlaceholder="Vous n'avez pas encore d'utilisateur !"
@@ -164,7 +207,8 @@ const Users = () => {
             u.country
               ? {
                   id: u.id,
-                  pseudo: u.pseudo,
+                  firstname: u.firstname,
+                  lastname: u.lastname,
                   email: u.email,
                   school: u.school || <span style={{ color: 'grey' }}>Non renseignée</span>,
                   country: `${countryToFlag(u.country?.isoCode)} ${u.country?.name}`,
@@ -177,7 +221,8 @@ const Users = () => {
                 }
               : {
                   id: u.id,
-                  pseudo: u.pseudo,
+                  firstname: u.firstname,
+                  lastname: u.lastname,
                   email: u.email,
                   school: u.school || <span style={{ color: 'grey' }}>Non renseignée</span>,
                   village: u.villageId ? (
@@ -189,7 +234,8 @@ const Users = () => {
                 },
           )}
           columns={[
-            { key: 'pseudo', label: 'Pseudo', sortable: true },
+            { key: 'firstname', label: 'Prénom', sortable: true },
+            { key: 'lastname', label: 'Nom', sortable: true },
             { key: 'email', label: 'Email', sortable: true },
             { key: 'school', label: 'École', sortable: true },
             { key: 'village', label: 'Village', sortable: true },
diff --git a/src/pages/lancer-un-defi/linguistique/1.tsx b/src/pages/lancer-un-defi/linguistique/1.tsx
index a50cce0a8..8c1ced25e 100644
--- a/src/pages/lancer-un-defi/linguistique/1.tsx
+++ b/src/pages/lancer-un-defi/linguistique/1.tsx
@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router';
+import type { SyntheticEvent } from 'react';
 import React from 'react';
 
-import type { SelectChangeEvent } from '@mui/material';
-import { ListSubheader, FormControlLabel, Grid, Radio, RadioGroup, Select, MenuItem, InputLabel, FormControl, Divider } from '@mui/material';
+import { TextField, Autocomplete, FormControlLabel, Grid, Radio, RadioGroup, FormControl } from '@mui/material';
 
 import { isDefi } from 'src/activity-types/anyActivity';
 import { DEFI, isLanguage, LANGUAGE_SCHOOL } from 'src/activity-types/defi.constants';
@@ -18,6 +18,7 @@ import { useActivity } from 'src/services/useActivity';
 import { useLanguages } from 'src/services/useLanguages';
 import { capitalize } from 'src/utils';
 import { axiosRequest } from 'src/utils/axiosRequest';
+import { normalizeString } from 'src/utils/isNormalizedStringEqual';
 import { ActivityStatus, ActivityType } from 'types/activity.type';
 
 const getArticle = (language: string) => {
@@ -135,11 +136,14 @@ const DefiStep1 = () => {
     router.push('/lancer-un-defi/linguistique/2');
   };
 
-  const handleLanguage = (event: SelectChangeEvent<string>) => {
-    const languageCode = (event.target as HTMLSelectElement).value;
-    const language = languages.find((l) => l.alpha3_b.toLowerCase() === languageCode.slice(0, 2))?.french ?? '';
+  const handleLanguage = (_event: SyntheticEvent, languageCode: string) => {
+    const language =
+      languageCode.length === 2
+        ? languages.find((language) => languageCode === language.alpha2.toLowerCase())?.french
+        : languages.find((language) => languageCode === language.alpha3_b.toLowerCase())?.french;
     updateActivity({ data: { ...data, languageCode, language } });
   };
+
   const setLanguageIndex = (event: React.ChangeEvent<HTMLInputElement>) => {
     updateActivity({ data: { ...data, languageIndex: parseInt((event.target as HTMLInputElement).value, 10) } });
   };
@@ -152,11 +156,6 @@ const DefiStep1 = () => {
     );
   }
 
-  const LanguagesToRemove = mascotteLanguages.reduce((list, currentValue) => {
-    list.push(currentValue.value);
-    return list;
-  }, new Array<string>());
-
   return (
     <Base>
       <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
@@ -182,28 +181,46 @@ const DefiStep1 = () => {
                   Vous pourrez ensuite choisir le thème de votre défi.
                 </p>
                 <FormControl variant="outlined" className="full-width" style={{ width: '100%', marginTop: '3.5rem', marginBottom: '0.5rem' }}>
-                  <InputLabel id="demo-simple-select">Langues</InputLabel>
-                  <Select style={{ width: '100%', marginBottom: '1rem' }} value={data.languageCode} onChange={handleLanguage} label="Langues">
-                    <ListSubheader>
-                      <h1>Langues parlées par votre mascotte</h1>
-                    </ListSubheader>
-                    {mascotteLanguages.map((language) => (
-                      <MenuItem value={language.label.toLowerCase()} key={language.label.toLowerCase()} style={{ cursor: 'pointer' }}>
-                        {language.label.toLowerCase()}
-                      </MenuItem>
-                    ))}
-                    <Divider />
-                    <ListSubheader>
-                      <h1>Autres langues</h1>
-                    </ListSubheader>
-                    {languages
-                      .filter((language) => !LanguagesToRemove.includes(language.alpha3_b))
-                      .map((language) => (
-                        <MenuItem key={language.french} value={language.french} style={{ cursor: 'pointer' }}>
-                          {language.french}
-                        </MenuItem>
-                      ))}
-                  </Select>
+                  <Autocomplete
+                    id="grouped-demo"
+                    onChange={(e, value) => {
+                      if (!value) return;
+                      const formatedValue = value.alpha2.length > 0 ? value.alpha2 : value.alpha3_b;
+                      handleLanguage(e, formatedValue);
+                    }}
+                    options={languages.sort((a, b) => {
+                      const aFormated = a.alpha2.length === 2 ? a.alpha2.toLowerCase() : a.alpha3_b.toLowerCase();
+                      const bFormated = b.alpha2.length === 2 ? b.alpha2.toLowerCase() : b.alpha3_b.toLowerCase();
+
+                      if (
+                        mascotteLanguages.some((language) => aFormated === language.value.toLowerCase()) &&
+                        !mascotteLanguages.some((language) => bFormated === language.value.toLowerCase())
+                      )
+                        return -1;
+                      if (
+                        !mascotteLanguages.some((language) => aFormated === language.value.toLowerCase()) &&
+                        mascotteLanguages.some((language) => bFormated === language.value.toLowerCase())
+                      )
+                        return 1;
+
+                      return aFormated.toLowerCase().localeCompare(bFormated.toLowerCase());
+                    })}
+                    filterOptions={(options, state) => {
+                      return options.filter((option) =>
+                        normalizeString(option.french).toLowerCase().startsWith(normalizeString(state.inputValue).toLowerCase()),
+                      );
+                    }}
+                    groupBy={(option) => {
+                      const optionFormated = option.alpha2.length === 2 ? option.alpha2 : option.alpha3_b;
+
+                      return mascotteLanguages.find((language) => optionFormated === language.value.toLowerCase())
+                        ? 'Langues parlées par votre mascotte'
+                        : 'Autres langues';
+                    }}
+                    getOptionLabel={(option) => option.french}
+                    sx={{ width: 300 }}
+                    renderInput={(params) => <TextField {...params} label="Langues" />}
+                  />
                 </FormControl>
               </Grid>
             </Grid>
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 31d198599..38165cbd8 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -110,7 +110,7 @@ const SignInTeacher = () => {
         <KeepRatio ratio={0.45} width="95%" maxWidth="1200px" minHeight="400px" className="login__container">
           <div className="text-center" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '2rem' }}>
             <iframe
-              src="https://player.vimeo.com/video/754287113?h=181d44f047"
+              src="https://player.vimeo.com/video/868665438"
               width="640"
               height="360"
               frameBorder="0"
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 61bb1f492..53e923813 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -135,6 +135,10 @@ main {
   padding-bottom: $verticalSpacing;
 }
 
+.flex-responsive{
+  flex-direction: row;
+}
+
 @include for-small-screen {
   .header__container {
     margin: math.div($verticalSpacing, 2) math.div($horizontalSpacing, 2) 0 math.div($horizontalSpacing, 2);
@@ -178,6 +182,10 @@ main {
   .vertical-bottom-margin {
     margin-bottom: math.div($verticalSpacing, 2);
   }
+
+  .flex-responsive{
+    flex-direction: column;
+  }
 }
 
 @include for-laptop-screen-up {
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 4e3546a55..2599867dd 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -150,10 +150,12 @@ a.text--success:hover {
 // misc
 .bg-gradiant {
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
   background: rgb(224, 195, 252);
   background: -o-linear-gradient(315deg, rgba(224, 195, 252, 1) 0%, rgba(142, 197, 252, 1) 100%);
   background: linear-gradient(135deg, rgba(224, 195, 252, 1) 0%, rgba(142, 197, 252, 1) 100%);
+  background-attachment: fixed;
+  overflow: auto;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/styles/login.scss b/src/styles/login.scss
index 911e10128..85bd0dd31 100644
--- a/src/styles/login.scss
+++ b/src/styles/login.scss
@@ -1,12 +1,34 @@
 @import 'variables';
 
+.login__header{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  background: white;
+  width: 95%;
+  height: 50px;
+  max-width: 1200px;
+  border-radius: 10px;
+  margin-bottom: 2rem;
+}
+
 .login__container {
   background-color: white;
   border-radius: 10px;
-  overflow: hidden;
   display: flex;
+  min-height: 100%;
+
+  .flex-responsive{
+    display: flex; 
+    justify-content: space-around;
+    align-items: center; 
+    gap: 4rem; 
+    padding: 2rem 0;
+  }
 }
 
+
+
 .login__panel {
   display: inline-flex;
   width: 50%;
diff --git a/src/utils/csv-export.ts b/src/utils/csv-export.ts
new file mode 100644
index 000000000..65d1e1728
--- /dev/null
+++ b/src/utils/csv-export.ts
@@ -0,0 +1,36 @@
+export const exportJsonToCsv = (filename: string, headers: string[], datas: Record<string, string | number>[]) => {
+  const escapedHeaders = headers.map((header) => {
+    return `"${header}"`;
+  });
+
+  const headersToString = escapedHeaders.toString();
+
+  const datasToString = datas.map((data) => {
+    const escapedData = Object.values(data).map((value) => {
+      return typeof value === 'string' ? `"${value}"` : value;
+    });
+
+    return escapedData.toString();
+  });
+
+  const datasToCsvFormat = [headersToString, ...datasToString].join('\n');
+
+  downloadToCsv(filename, datasToCsvFormat);
+};
+
+const downloadToCsv = (fileName: string, datas: string) => {
+  const blob = new Blob([datas], { type: 'application/csv' });
+  const url = URL.createObjectURL(blob);
+
+  const a = document.createElement('a');
+  a.download = fileName + '.csv';
+  a.href = url;
+  a.style.display = 'none';
+
+  document.body.appendChild(a);
+
+  a.click();
+
+  a.remove();
+  URL.revokeObjectURL(url);
+};
diff --git a/src/utils/isNormalizedStringEqual.ts b/src/utils/isNormalizedStringEqual.ts
index cd63e4b0f..10063aac9 100644
--- a/src/utils/isNormalizedStringEqual.ts
+++ b/src/utils/isNormalizedStringEqual.ts
@@ -1,8 +1,16 @@
 // Normalise les chaînes de caractères et les compare pour retourner un boolean
 
+export const normalizeString = (data: string): string => {
+  return data.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+};
+
 export const isNormalizedStringEqual = (str1: string, str2: string): boolean => {
   const strNorm1 = str1.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
   const strNorm2 = str2.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 
   return strNorm1.toLocaleLowerCase() === strNorm2.toLocaleLowerCase();
 };
+
+// export const isNormalizedStringEqual = (str1: string, str2: string): boolean => {
+//   return normalizeString(str1).toLocaleLowerCase() === normalizeString(str2).toLocaleLowerCase();
+// };