diff --git a/css/index.css b/css/index.css
index 4e6e951..0fd09b5 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,4 +1,6 @@
 #news {
   overflow: auto;
   height: 150px;
+  border: solid black;
+  padding-left: 1em;
 }
diff --git a/css/style.css b/css/style.css
index a77c56e..478a619 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,11 +1,10 @@
 body {
   margin: 0;
-  /*display: flex;
-  flex-direction: column;*/
   display: grid;
-  min-height: 100vh;
-  /*grid-template-rows: auto 1fr auto;*/
-  grid-template-columns: 0.2fr 1fr;
+  grid-template-areas:
+    "header header"
+    "menu main"
+    "footer footer";
 }
 
 header {
@@ -14,7 +13,7 @@ header {
   margin-top: 2em;
   margin-left: 3em;
   margin-right: 3em;
-  grid-column: 1 / 3;
+  grid-area: header;
 }
 
 header a {
@@ -59,7 +58,7 @@ header h2 {
   margin: 2em 0 2em 3em;
   display: flex;
   flex-direction: column;
-  grid-column: 1;
+  grid-area: menu;
 }
 
 #header-links a {
@@ -74,13 +73,14 @@ header h2 {
 
 #main {
   margin: 2em 3em 5em 1em;
+  grid-area: main;
 }
 
 footer {
   background-color: #304B99;
   padding: 1em;
   padding-bottom: 0;
-  grid-column: 1/4;
+  grid-area: footer;
 }
 
 #buttons {
@@ -130,3 +130,46 @@ footer {
 #buttons div {
   margin-bottom: 1em;
 }
+
+@media only screen and (max-width: 641px) {
+  body {
+    grid-template-areas:
+      "header header"
+      "main main"
+      "menu menu"
+      "footer footer";
+  }
+
+  #header-links {
+    position: sticky;
+    bottom: 0;
+    margin-left: 0;
+    margin-top: 0;
+    flex-direction: row;
+    background-color: white;
+    border-top: solid black;
+    flex-wrap: wrap;
+  }
+
+  header {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #lang {
+    justify-items: center;
+  }
+
+  #main {
+    margin: 2em 1em 2em 1em;
+  }
+
+  #footer-main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pred-buttons {
+    align-self: center;
+  }
+}
diff --git a/header.html b/header.html
index 51a68f2..d4dbdc5 100644
--- a/header.html
+++ b/header.html
@@ -2,6 +2,7 @@
 <html lang="%lang%">
     <head>
         <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta http-equiv="Content-Security-Policy" content="default-src 'self';">
         <link rel="icon" href="/img/favicon.gif" type="image/gif" />
         <link rel="stylesheet" href="/css/style.css" />
diff --git a/lang/en/index.html b/lang/en/index.html
index 54e03ea..270f411 100644
--- a/lang/en/index.html
+++ b/lang/en/index.html
@@ -37,7 +37,9 @@ rel="stylesheet" href="/css/index.css"
                 <p><code>13-04-2022:</code> add this section.</p>
             </div>
 
-            <hr />
+            <!--
+                <hr />
+            -->
 
             <!--
             <h3>A propos de l'annuaire</h3>
diff --git a/lang/fr/index.html b/lang/fr/index.html
index 50fbb4c..39d65e6 100644
--- a/lang/fr/index.html
+++ b/lang/fr/index.html
@@ -37,7 +37,9 @@ rel="stylesheet" href="/css/index.css"
                 <p><code>13-04-2022:</code> ajout de cette section.</p>
             </div>
 
-            <hr />
+            <!--
+                <hr />
+            -->
 
             <!--
             <h2>L'annuaire est temporairement supprimé.</h2>