diff --git a/frontend/src/styles/Comments.css b/frontend/src/styles/Comments.css
index 4b61c0165397e2c01bfd124167002852ea12fe9b..90706f7cd874e9c02b021766b08690a8c7800b6c 100644
--- a/frontend/src/styles/Comments.css
+++ b/frontend/src/styles/Comments.css
@@ -99,7 +99,7 @@
     direction: ltr;
 }
 
-@media only screen and (max-device-width: 600px) {
+@media only screen and (max-width: 600px) {
     .comments-side-bar {
         width: 0px;
         overflow: hidden;
diff --git a/frontend/src/styles/Header.css b/frontend/src/styles/Header.css
index 5985278035f7b3a8b6ca3b12779ede360b10ff59..f968bcb6d2942c4f08de6e53d101ae175dd36b0f 100644
--- a/frontend/src/styles/Header.css
+++ b/frontend/src/styles/Header.css
@@ -22,4 +22,21 @@
     flex: 1;
     text-align: right;
     font-weight: lighter;
+}
+
+@media only screen and (max-width: 600px) {
+    #header-restaurant-status {
+        display: none;
+    }
+
+    #header-container {
+        flex-direction: column;
+        align-items: center;
+        padding-top: .5rem;
+        padding-bottom: .5rem;
+    }
+
+    #header-home-link > h2 {
+        font-size: 2rem;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/styles/Home.css b/frontend/src/styles/Home.css
index 4e57c62e1d3ceb4b101d546ce98e2a78cdf7171b..e01661b4bab2260449459c857442b8d578559463 100644
--- a/frontend/src/styles/Home.css
+++ b/frontend/src/styles/Home.css
@@ -1,27 +1,32 @@
 #home-container {
-    margin-top: 2rem;
+    padding-top: 2%;
+    padding-bottom: 10%;
     display: flex;
     flex-direction: column;
     align-content: center;
+    height: 100%;
+}
+
+#home-selection-title {
+    margin-bottom: 0;
+    padding-bottom: 2%;
 }
 
 #home-table {
-    margin-top: 2rem;
     width: fit-content;
     align-self: center;
+    min-height: 100%;
 }
 
-.home-table-row {
-    height: 3rem;
+.home-restaurant-name {
+    align-items: center;
+    padding-right: 5rem;
 }
 
-.home-restaurant-name {
+.home-arrow-reverse {
     display: flex;
     flex-direction: row-reverse;
     justify-content: left;
-    height: 3rem;
-    align-items: center;
-    padding-right: 5rem;
 }
 
 .home-link-item {
@@ -52,4 +57,24 @@
 .home-waiting-time {
     white-space: nowrap;
     text-align: left;
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: 600px) {
+    #home-selection-title {
+        padding-top: 10%;
+        margin-bottom: 0;
+        padding-bottom: 8%;
+    }
+
+    #home-table {
+        min-height: 70%;
+    }
+
+    .home-restaurant-status {
+        display: none;
+    }
+
+    .home-restaurant-name {
+        padding-right: 2rem;
+    }
+}
diff --git a/frontend/src/styles/restaurant.css b/frontend/src/styles/restaurant.css
index 0d50500d898ae963372bceb7df9fac3c7e203f78..9c7ca761fd72167758e37cf8ff23a7f3d14f6fdf 100644
--- a/frontend/src/styles/restaurant.css
+++ b/frontend/src/styles/restaurant.css
@@ -10,7 +10,7 @@
     align-content: center;
 }
 
-@media only screen and (max-device-width: 600px) {
+@media only screen and (max-width: 600px) {
     #restaurant-main-page {
         width: 100%;
     }
diff --git a/frontend/src/views/Details.js b/frontend/src/views/Details.js
index 40a986be615055d25bdd7380f56629ef15454903..fe564b8827e7c68c69c4733330a3766d30989454 100644
--- a/frontend/src/views/Details.js
+++ b/frontend/src/views/Details.js
@@ -1,7 +1,5 @@
 import React from "react";
 
 export default function Details() {
-    return(
-        <div>details page</div>
-    )
-}
\ No newline at end of file
+  return <div>details page</div>;
+}
diff --git a/frontend/src/views/HomePage.js b/frontend/src/views/HomePage.js
index a6e921eafb2f2da51fe909c0d1ccf1b1933d2674..39da0d04efe898c698e3004f3aca93306fc4b867 100644
--- a/frontend/src/views/HomePage.js
+++ b/frontend/src/views/HomePage.js
@@ -1,12 +1,34 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 import "../styles/Home.css";
 
 export default function HomePage({ restaurantsList, setSelection, loading }) {
+  const [message, setMessage] = useState(() => () => "");
+
+  useEffect(() => {
+    let width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+    width = width > 600;
+    if (width) {
+      setMessage(() => (restaurant) => {
+        if (restaurant.waiting_time) {
+          return `Temps d'attente estimé à ${restaurant.waiting_time} minutes`;
+        } else {
+          return "Pas de données";
+        }
+      });
+    } else {
+      setMessage(() => (restaurant) => {
+        if (restaurant.waiting_time) {
+          return `${restaurant.waiting_time} min d'attente`;
+        }
+      });
+    }
+  }, [loading]);
+
   return (
     <div id="home-container">
-      <h1>Sélectionnez votre restaurant</h1>
+      <h1 id="home-selection-title">Sélectionnez votre restaurant</h1>
       {loading ? (
         <span>Chargement...</span>
       ) : (
@@ -14,26 +36,24 @@ export default function HomePage({ restaurantsList, setSelection, loading }) {
           <tbody>
             {restaurantsList.map((restaurant, index) => {
               return (
-                <tr className="home-table-row" key={index}>
+                <tr key={index}>
                   <td className="home-restaurant-name">
-                    <Link
-                      to={encodeURIComponent(restaurant.name)}
-                      onClick={() => setSelection(restaurant)}
-                      className="home-link-item"
-                    >
-                      {restaurant.name}
-                    </Link>
-                    <span className="home-arrow">&#10132;</span>
+                    <span className="home-arrow-reverse">
+                      <Link
+                        to={encodeURIComponent(restaurant.name)}
+                        onClick={() => setSelection(restaurant)}
+                        className="home-link-item"
+                      >
+                        {restaurant.name}
+                      </Link>
+                      <span className="home-arrow">&#10132;</span>
+                    </span>
                   </td>
                   <td className="home-restaurant-status">
                     Actuellement {restaurant.status ? "ouvert" : "fermé"}
                   </td>
                   {restaurant.status && (
-                    <td className="home-waiting-time">
-                      {restaurant.waiting_time
-                        ? `Temps d'attente estimé à ${restaurant.waiting_time} minutes`
-                        : "Pas de données"}
-                    </td>
+                    <td className="home-waiting-time">{message(restaurant)}</td>
                   )}
                 </tr>
               );