diff --git a/la_chariotte/order/templates/order/grouped_order_detail.html b/la_chariotte/order/templates/order/grouped_order_detail.html
index 6797abf..4656e42 100644
--- a/la_chariotte/order/templates/order/grouped_order_detail.html
+++ b/la_chariotte/order/templates/order/grouped_order_detail.html
@@ -23,10 +23,10 @@
           <p><i class="fa fa-map-pin mr-3" aria-label="Lieu" title="Lieu" aria-hidden="true"></i>{{ grouped_order.place }}</p>
         {% endif %}
         <p><i class="fa fa-clock-o mr-3" aria-label="Date limite de commande" title="Date limite de commande" aria-hidden="true"></i>
-          {{ grouped_order.deadline }}
+          Commandes avant le {{ grouped_order.deadline }}
         </p>
         <p><i class="fa fa-calendar-check-o mr-3" aria-label="Date de livraison" title="Date de livraison" aria-hidden="true"></i>
-          {{ grouped_order.delivery_date }}
+          Livraison le {{ grouped_order.delivery_date }}
         </p>
         
         {% if user == grouped_order.orga %}
@@ -56,7 +56,9 @@
     {% else %}
     <p class="title">Commander</p>
     <form method="post" action="{% url 'order:order' grouped_order.id %}">
-    <table class="table">
+    
+      <!-- Tableau de commandes - sur ordi -->
+    <table class="table is-hidden-mobile">
       <thead>
         <tr>
           <th>Produit</th>
@@ -81,6 +83,28 @@
         {% endfor %}
       </tbody>
     </table>
+
+    <!-- Tableau de commandes - sur mobile et tablette -->
+    <div class="is-hidden-desktop">
+      {% for item in grouped_order.item_set.all %}
+      <div class="card mb-4 is-info">
+        <div class="card-header has-background-info">
+          <p class="card-header-title">{{ item.name }}</p>
+        </div>
+        <div class="card-footer">
+          <div class="card-footer-item">
+            <p class="mini-title">Prix unitaire</p>
+            <p>{{ item.price }} €</p>
+          </div>
+          <div class="card-footer-item">
+            <input name="quantity_{{ item.id }}" size="2" type="number" value="0" min="0"></input>
+          {% if item.get_remaining_nb %}<span class="is-italic mini-title"> {{ item.get_remaining_nb }} disponibles</span>{% endif %}
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+
     {% if error_message %}<p class="has-text-danger">{{ error_message }}</p>{% endif %}
     <br>
     <p class="subtitle">Vos informations</p>
diff --git a/la_chariotte/order/templates/order/grouped_order_overview.html b/la_chariotte/order/templates/order/grouped_order_overview.html
index 09fdbd9..824b368 100644
--- a/la_chariotte/order/templates/order/grouped_order_overview.html
+++ b/la_chariotte/order/templates/order/grouped_order_overview.html
@@ -25,10 +25,10 @@
         <p><i class="fa fa-map-pin mr-3" aria-label="Lieu" title="Lieu" aria-hidden="true"></i>{{ grouped_order.place }}</p>
         {% endif %}
         <p><i class="fa fa-clock-o mr-3" aria-label="Date limite de commande" title="Date limite de commande" aria-hidden="true"></i>
-          {{ grouped_order.deadline }}
+          Commandes avant le {{ grouped_order.deadline }}
         </p>
         <p><i class="fa fa-calendar-check-o mr-3" aria-label="Date de livraison" title="Date de livraison" aria-hidden="true"></i>
-          {{ grouped_order.delivery_date }}
+          Livraison le {{ grouped_order.delivery_date }}
         </p>
         <div class="buttons">
           <a class="button is-light" href={% url 'order:grouped_order_detail' grouped_order.id %}>
diff --git a/la_chariotte/static/css/app.css b/la_chariotte/static/css/app.css
index 17828f5..ceee25d 100644
--- a/la_chariotte/static/css/app.css
+++ b/la_chariotte/static/css/app.css
@@ -10290,18 +10290,7 @@ a {
   color: #A52951;
 }
 
-p.title {
-  font-weight: 300;
-  color: #A52951;
-}
-
-p.mobile-content-title {
-  font-weight: 600;
-  text-align: center;
-  font-size: 1.5rem;
-}
-
-.box.is-info {
+.box.is-info, .card.is-info {
   border-bottom: 2px solid #e9b049;
   border-right: 1px solid #e9b049;
 }
@@ -10400,3 +10389,23 @@ a.navbar-item:hover {
     white-space: nowrap;
   }
 }
+.card-footer-item {
+  display: grid;
+}
+
+p.title {
+  font-weight: 300;
+  color: #A52951;
+}
+
+p.mobile-content-title {
+  font-weight: 600;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+.mini-title {
+  color: #7a7a7a;
+  font-size: 0.8rem;
+  margin-bottom: 0px !important;
+}
diff --git a/la_chariotte/static/sass/base/_global.sass b/la_chariotte/static/sass/base/_global.sass
index ac5ecd7..a10b439 100644
--- a/la_chariotte/static/sass/base/_global.sass
+++ b/la_chariotte/static/sass/base/_global.sass
@@ -5,16 +5,7 @@ body
 a
 	color: $betterave
 
-p.title
-	font-weight: 300
-	color: $primary
-
-p.mobile-content-title
-	font-weight: 600
-	text-align: center
-	font-size: 1.5rem
-
-.box.is-info
+.box.is-info, .card.is-info
 	border-bottom: 2px solid $beige
 	border-right: 1px solid $beige
 
diff --git a/la_chariotte/static/sass/base/_table.sass b/la_chariotte/static/sass/base/_table.sass
index e61d083..36dbe2f 100644
--- a/la_chariotte/static/sass/base/_table.sass
+++ b/la_chariotte/static/sass/base/_table.sass
@@ -3,4 +3,8 @@
 	table
 		display: block
 		overflow-x: auto
-		white-space: nowrap
\ No newline at end of file
+		white-space: nowrap
+
+// Table with cards
+.card-footer-item
+	display: grid
diff --git a/la_chariotte/static/sass/base/_titles.sass b/la_chariotte/static/sass/base/_titles.sass
new file mode 100644
index 0000000..c82d803
--- /dev/null
+++ b/la_chariotte/static/sass/base/_titles.sass
@@ -0,0 +1,13 @@
+p.title
+	font-weight: 300
+	color: $primary
+
+p.mobile-content-title
+	font-weight: 600
+	text-align: center
+	font-size: 1.5rem
+
+.mini-title
+	color: $grey-text
+	font-size: 0.8rem
+	margin-bottom: 0px !important
diff --git a/la_chariotte/static/sass/base/_variables.sass b/la_chariotte/static/sass/base/_variables.sass
index 537cc9b..755ff1e 100644
--- a/la_chariotte/static/sass/base/_variables.sass
+++ b/la_chariotte/static/sass/base/_variables.sass
@@ -2,6 +2,7 @@
 $betterave: #A52951
 $beige: #e9b049
 $bright-black: #280a13
+$grey-text: #7a7a7a
 
 $primary: $betterave
 $info: $beige
diff --git a/la_chariotte/static/sass/style.sass b/la_chariotte/static/sass/style.sass
index 433e870..f2f47e2 100644
--- a/la_chariotte/static/sass/style.sass
+++ b/la_chariotte/static/sass/style.sass
@@ -14,3 +14,4 @@
 @import "./base/content"
 @import "./base/form"
 @import "./base/table"
+@import "./base/titles"