diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 84e72af58..7c166a293 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import SettingsIcon from '@mui/icons-material/Settings';
-import { Box, Button } from '@mui/material';
+import { Box } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
@@ -19,6 +19,9 @@ export const Header = () => {
   const { user, logout } = React.useContext(UserContext);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
+  const hasAccessToOldAdmin = user?.type === UserType.ADMIN || user?.type === UserType.SUPER_ADMIN || user?.type === UserType.MEDIATOR;
+  const hasAccessToNewAdmin = hasAccessToOldAdmin || user?.type === UserType.MEDIATOR;
+
   const open = Boolean(anchorEl);
 
   const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
@@ -39,8 +42,43 @@ export const Header = () => {
   };
 
   return (
-    <header>
-      <div className="header__container with-shadow">
+    <Box
+      component="header"
+      sx={{
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: '100%',
+        backgroundColor: 'background.default',
+        zIndex: '100',
+      }}
+    >
+      <Box
+        sx={(theme) => ({
+          position: 'relative',
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexDirection: 'row',
+          alignItems: 'center',
+          height: '60px',
+          margin: {
+            xs: '10px 20px 0',
+            md: '10px 20px',
+          },
+          padding: '0 1rem',
+          backgroundColor: 'white',
+          borderRadius: {
+            sx: '0',
+            md: '10px',
+          },
+          overflow: 'hidden',
+          [theme.breakpoints.down('md')]: {
+            boxShadow: 'none',
+            borderBottom: '1px solid lightgray',
+          },
+        })}
+        className="with-shadow"
+      >
         <Link href="/">
           <a style={{ display: 'flex', alignItems: 'center' }}>
             <Logo style={{ width: '40px', height: 'auto' }} />
@@ -59,13 +97,6 @@ export const Header = () => {
             >
               <VillageSelect />
             </Box>
-            {user.type === UserType.ADMIN || user.type === UserType.SUPER_ADMIN || user.type === UserType.MEDIATOR ? (
-              <Link href="/admin/villages" passHref>
-                <Button component="a" href="/admin/villages" variant="contained" color="primary" size="small" style={{ marginLeft: '1rem' }}>
-                  {"Aller à l'interface Admin"}
-                </Button>
-              </Link>
-            ) : null}
             <div>
               <IconButton
                 style={{ width: '40px', height: '40px', margin: '0 1rem' }}
@@ -91,6 +122,9 @@ export const Header = () => {
                 open={open}
                 onClose={handleClose}
               >
+                {hasAccessToOldAdmin && <MenuItem onClick={() => goToPage('/admin/newportal/create')}>Portail admin</MenuItem>}
+                {hasAccessToNewAdmin && <MenuItem onClick={() => goToPage('/admin/villages')}>Admin (old)</MenuItem>}
+
                 <MenuItem onClick={() => goToPage('/mon-compte')}>Mon compte</MenuItem>
                 {user.type !== UserType.FAMILY && <MenuItem onClick={() => goToPage('/mes-videos')}>Mes vidéos</MenuItem>}
                 <AccessControl featureName="id-family" key={user?.id || 'default'}>
@@ -103,21 +137,7 @@ export const Header = () => {
             </div>
           </div>
         )}
-        {user && (
-          <div className="header__user">
-            {user.type === UserType.ADMIN ||
-            user.type === UserType.SUPER_ADMIN ||
-            user.type === UserType.MEDIATOR ||
-            user.type === UserType.OBSERVATOR ? (
-              <Link href="/admin/newportal/create" passHref>
-                <Button component="a" href="/admin/newportal/create" variant="contained" color="primary" size="small">
-                  {'Aller à la nouvelle interface admin'}
-                </Button>
-              </Link>
-            ) : null}
-          </div>
-        )}
-      </div>
-    </header>
+      </Box>
+    </Box>
   );
 };
diff --git a/src/components/NavigationWrapper.tsx b/src/components/NavigationWrapper.tsx
index 2714d1fbc..c2cd52d2e 100644
--- a/src/components/NavigationWrapper.tsx
+++ b/src/components/NavigationWrapper.tsx
@@ -51,7 +51,7 @@ export const NavigationWrapper = (): JSX.Element => {
       </Grid>
       {/* Mobile view */}
       <Grid
-        className="with-shadow sticky"
+        className="sticky"
         item
         xs={12}
         sx={{
@@ -62,10 +62,12 @@ export const NavigationWrapper = (): JSX.Element => {
           top: '70px',
           zIndex: '99',
           width: '100%',
+          height: '50px',
           backgroundColor: 'white',
           padding: '0.5rem',
           alignItems: 'center',
           justifyContent: 'flex-end',
+          borderBottom: '1px solid lightgray',
         }}
       >
         <IconButton edge="start" color="inherit" aria-label="Ouvrir le menu" onClick={toggleDrawer(true)}>
diff --git a/src/components/VillageMonde.tsx b/src/components/VillageMonde.tsx
index 675bacb16..d2c606b3a 100644
--- a/src/components/VillageMonde.tsx
+++ b/src/components/VillageMonde.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { Typography } from '@mui/material';
+
 import { Flag } from 'src/components/Flag';
 import { ClassroomContext } from 'src/contexts/classroomContext';
 import { UserContext } from 'src/contexts/userContext';
@@ -34,7 +36,9 @@ export const VillageMonde = (): JSX.Element => {
         padding: '6px',
       }}
     >
-      <h2 style={{ margin: '0 0.55rem 0 0.8rem' }}>Village-monde </h2>
+      <Typography variant="body" fontWeight="bold" sx={{ margin: '0 0.55rem 0 0.8rem' }}>
+        Village-monde
+      </Typography>
       {village &&
         village.countries.map((country: Country) => {
           if (user.type === UserType.FAMILY) {
diff --git a/src/styles/base.scss b/src/styles/base.scss
index e901c0bb9..16875774b 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -15,30 +15,6 @@ $horizontalSpacing: 25px;
 }
 
 // ---- HEADER ----
-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background: $bg-page;
-  z-index: 100;
-}
-.header__container {
-  background-color: white;
-  height: $headerHeight;
-  margin: 10px 20px;
-  border-radius: 10px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 1rem;
-  position: relative;
-  justify-content: space-between;
-  & a:first-child {
-    flex-grow: 1;
-  }
-}
 .header__user {
   margin: auto 0;
   display: flex;
@@ -142,10 +118,6 @@ main {
 }
 
 @include for-small-screen {
-  .header__container {
-    //margin: math.div($verticalSpacing, 2) math.div($horizontalSpacing, 2) 0 math.div($horizontalSpacing, 2);
-  }
-
   .navigation {
     top: $headerHeight + $verticalSpacing;
     height: calc(100vh - #{$headerHeight + math.div(3, 2) * $verticalSpacing});