diff --git a/public/css/base.css b/public/css/base.css
index 88cc830..dea5100 100644
--- a/public/css/base.css
+++ b/public/css/base.css
@@ -60,6 +60,10 @@ body {
 
 }
 
+.telephoneLi {
+    display: none;
+}
+
 footer {
     background: linear-gradient(315deg, #0f056b, rgb(133, 20, 20));
     display: flex;
@@ -362,3 +366,22 @@ strong {
     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
   }
 }
+
+@media (max-width: 500px) {
+    .telephoneLi {
+        display: block;
+    }
+    .ecranLi {
+        display: none;
+    }
+    .btn {
+        width: 7rem;
+        height: 2rem;
+    }
+    #redhead {
+        height: 4rem;
+    }
+    .button-85 {
+        font-size: 0.7rem;
+    }
+}
\ No newline at end of file
diff --git a/public/css/connexion.css b/public/css/connexion.css
index 442d0db..49af1c2 100644
--- a/public/css/connexion.css
+++ b/public/css/connexion.css
@@ -60,3 +60,17 @@ body {
     border: 0.2rem solid #c23333;
 }
 
+@media (max-width: 500px) {
+    #firstDiv {
+        margin: 5rem 1.5rem 6rem 1.5rem;
+        padding: 1rem 1rem 7.5rem 1rem;
+    }
+    #input_connexion{
+        margin: 0;
+        border: 0 solid rgba(230,173,26,255);
+    }
+    #input_connexion input {
+        width: 100%;
+        margin-bottom: 1rem;
+    }
+}
\ No newline at end of file
diff --git a/public/css/page-daccueil.css b/public/css/page-daccueil.css
index c789555..95e68f5 100644
--- a/public/css/page-daccueil.css
+++ b/public/css/page-daccueil.css
@@ -480,4 +480,19 @@ main {
   user-select: none;
    /* Non-prefixed version, currently
 									supported by Chrome, Edge, Opera and Firefox */
+}
+
+@media (max-width: 500px) {
+    #logoPermBDE {
+        width: 5rem;
+        height: 5rem;
+    }
+    #logoMetzPloreur {
+        width: 5rem;
+        height: 5rem;
+    }
+    #logoliste {
+        width: 5rem;
+        height: 5rem;
+    }
 }
\ No newline at end of file
diff --git a/routes/demo.js b/routes/demo.js
index ae2b5ee..a54cd51 100644
--- a/routes/demo.js
+++ b/routes/demo.js
@@ -54,6 +54,8 @@ router.get('/a-propos', function (req,res) {
   res.render('futur')
 })
 
-
+router.get('/evenement', function (req,res) {
+  res.render('futur')
+})
 
 module.exports = router;
diff --git a/views/includes/header.ejs b/views/includes/header.ejs
index b615f79..1cce1ab 100644
--- a/views/includes/header.ejs
+++ b/views/includes/header.ejs
@@ -3,7 +3,7 @@
     </a>
       <ul>
         <% if (!locals.isAuth) { %>
-            <li>
+            <li class="ecranLi">
                 <a href="/connexion" class="custom-cursor">
                     <button class="button-85" role="button">
                         Se connecter
@@ -12,7 +12,7 @@
             </li>
          <% } %>
         <% if (locals.isAuth) { %>
-          <li>
+          <li class="ecranLi">
             <form action="/logout" method="POST">
                 <button class="button-85" role="button" name="logout">
                     Se déconnecter
@@ -36,6 +36,24 @@
   </header>
   <nav id="nav_id">
       <ul>
+          <% if (!locals.isAuth) { %>
+            <li class="telephoneLi">
+                <a href="/connexion" class="custom-cursor">
+                    <button class="button-85" role="button">
+                        Se connecter
+                    </button>
+                </a>
+            </li>
+         <% } %>
+        <% if (locals.isAuth) { %>
+          <li class="telephoneLi">
+            <form action="/logout" method="POST">
+                <button class="button-85" role="button" name="logout">
+                    Se déconnecter
+                </button>
+            </form>
+          </li>
+        <% } %>
         <li>
 
             <a href="/team" class="custom-cursor">