diff --git a/front/src/components/list_groups.rs b/front/src/components/list_groups.rs
index 4b15ccf..154a5e2 100644
--- a/front/src/components/list_groups.rs
+++ b/front/src/components/list_groups.rs
@@ -1,6 +1,6 @@
 use gloo_net::http::Request;
 use gloo_net::Error;
-use patternfly_yew::ToastViewer;
+use patternfly_yew::{Button, Flex, FlexModifier, Gallery, ToastViewer, ToFlexItems, Variant, WithBreakpointExt};
 use yew::prelude::*;
 
 use crate::components::{Group, Home, TestMessage, ToastFields, ToastType};
@@ -68,24 +68,39 @@ impl Component for ListGroups {
         }
 
         let onclick = ctx.link().callback(|_| MsgListGroups::More);
+        let groups: Vec<Html> = self.groups[..self.nb_show].iter().map(|group| { html!{
+                        <div>
+                            <h1>{ group.name.clone() }</h1>
+                            <h2>{ group.game.clone() }</h2>
+                        </div>
+                    }}).collect::<Vec<Html>>();
+
+        let mut groups_final: Vec<Html> = Vec::new();
+        for g in groups.chunks(3) {
+            groups_final.push(html!{ <Flex> { g.to_vec().into_flex_items() } </Flex> });
+        }
 
         html! {
             <>
             <ToastViewer />
             if self.groups.len() > 0 {
                 {
-                    self.groups[..self.nb_show].iter().map(|group| { html!{
-                        <p>{ group.name.clone() }</p>
-                    } }).collect::<Html>()
-                }
+                    html!{
 
-                if self.nb_show < self.groups.len() {
-                    <button onclick={onclick}>{ "Plus de groupes" }</button>
+                    <div>
+                        <Flex modifiers={[FlexModifier::Column.all()]}>
+                        { groups_final.into_flex_items() }
+                        </Flex>
+
+                    if self.nb_show < self.groups.len() {
+                        <Button variant={Variant::Primary} onclick={onclick}>{ "Plus de groupes" }</Button>
+                    }
+                    </div>
+                    }
                 }
             } else {
                 <p>{ "Vous n'êtes dans aucun groupe." }</p>
             }
-            //<p>{ "coucou" }</p>
             </>
         }
     }
diff --git a/front/src/main.rs b/front/src/main.rs
index ff603b6..be164ae 100644
--- a/front/src/main.rs
+++ b/front/src/main.rs
@@ -1,6 +1,6 @@
 mod components;
 
-use components::*;
+use components::Home;
 
 use gloo_net::http::Request;
 use gloo_storage::{LocalStorage, Storage};
