diff --git a/front/public/index.html b/front/public/index.html
index 517bf4038afbd953cb732835d6eb71998e723960..a2796638cd11c3ab79995ef885f789e808effda1 100644
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -13,6 +13,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/front/public/manifest.json b/front/public/manifest.json
index f9051fe711f47c36e1881c088d8bc880cf16b52e..a179b2a331335e4c60e0dc8f5ef3368e8b8902eb 100644
--- a/front/public/manifest.json
+++ b/front/public/manifest.json
@@ -4,5 +4,11 @@
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#ffffff",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "48x48"
+    }
+  ]
 }
diff --git a/front/src/App.css b/front/src/App.css
index ef47db1412850eba86b2ed5d16729c6cb3e21888..6375f4097d1a0af6ae1e49cab2442c69624d26c8 100644
--- a/front/src/App.css
+++ b/front/src/App.css
@@ -10,3 +10,16 @@
   justify-content: center;
   font-size: calc(10px + 2vmin);
 }
+
+@media (max-aspect-ratio:1/1) {
+  .desktopItem {
+    display: none !important
+  }
+}
+
+
+@media (min-aspect-ratio:1/1) {
+  .phoneItem {
+    display: none !important
+  }
+}
\ No newline at end of file
diff --git a/front/src/App.js b/front/src/App.js
index 35618d88b2a08fc7c64e749f05380dc82c0f31e4..080821a19cd4d21ae382470d0a0eb0cdbc31feb2 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -1,31 +1,21 @@
 import React from 'react';
-import {Image, Button} from 'semantic-ui-react'
-import { BrowserRouter as Router, Route,Link } from 'react-router-dom';
+import { BrowserRouter as Router, Route} from 'react-router-dom';
 import './App.css';
 import AdminPage from './view/AdminPage/AdminPage';
 import AllToucanPage from './view/AllToucanPage/AllToucanPage';
+import PageHeader from './view/PageHeader'
 import Login from './view/Login';
 import env from './.env';
 import isLogged from './utils/Oauth';
-import logo from './image/logo.png'
 
 function App() {
   return (
-      <div >
-        <div style={{textAlign:"center"}}>
-      <Image src={logo} alt="Logo" href="/" style={{ width:'40%'}} />
-      </div>
-      <Router >
-        <div style={{textAlign:"right"}}>
-        <Link to="/admin" style={{position:"absolute",top:'2em' ,right:"2em"}} >
-          <Button icon="male" content="Espace admin"/>
-        </Link>
-        </div>
-        <Route exact path='/' component={AllToucanPage} />
-        <Route exact path='/admin' render={()=>isLogged() ? <AdminPage/> : window.location=`${env.backURL}/oauth/login`}/>
-        <Route exact path='/login/:token' component={Login} />
-      </Router>
-      </div>
+    <Router >
+      <PageHeader />
+      <Route exact path='/' component={AllToucanPage} />
+      <Route exact path='/admin' render={()=>isLogged() ? <AdminPage/> : window.location=`${env.backURL}/oauth/login`}/>
+      <Route exact path='/login/:token' component={Login} />
+    </Router>
   );
 }
 
diff --git a/front/src/view/PageHeader.js b/front/src/view/PageHeader.js
new file mode 100644
index 0000000000000000000000000000000000000000..6e5c4d0705cbf0174750f7ec4ba5bee9c57576e1
--- /dev/null
+++ b/front/src/view/PageHeader.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import {Image, Button} from 'semantic-ui-react'
+import {Link} from 'react-router-dom'
+import logo from '../image/logo.png'
+
+
+
+const PageHeader = () => {
+    return (
+        [
+            // Si le format est celui d'un Pc
+            <div class="desktopItem" style={{textAlign:"center"}}>
+                <Image src={logo} alt="Logo" href="/" style={{ width:'40%'}} />
+                <Link to="/admin" style={{position:"absolute",top:'2em' ,right:"2em"}} >
+                    <Button icon="male" content="Espace admin"/>
+                </Link>
+            </div>,
+            // Si le format est celui d'un téléphone
+            <div class="phoneItem" style={{textAlign:"center"}}>
+                <Image src={logo} alt="Logo" href="/" style={{ margin: "2em"}} />
+                <br/>
+                <Link to="/admin"  >
+                    <Button icon="male" content="Espace admin" style={{margin:"1em"}}/>
+                </Link>
+            </div>
+        ]
+    )
+}
+
+export default PageHeader;