diff --git a/src/app/components/group-chat/group-chat.component.html b/src/app/components/group-chat/group-chat.component.html
new file mode 100644
index 0000000..eea1547
--- /dev/null
+++ b/src/app/components/group-chat/group-chat.component.html
@@ -0,0 +1,3 @@
+<p>
+  group-chat works!
+</p>
diff --git a/src/app/components/group-chat/group-chat.component.scss b/src/app/components/group-chat/group-chat.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/group-chat/group-chat.component.ts b/src/app/components/group-chat/group-chat.component.ts
new file mode 100644
index 0000000..76b514c
--- /dev/null
+++ b/src/app/components/group-chat/group-chat.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-group-chat',
+  templateUrl: './group-chat.component.html',
+  styleUrls: ['./group-chat.component.scss'],
+})
+export class GroupChatComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}
diff --git a/src/app/components/group-info/group-info.component.html b/src/app/components/group-info/group-info.component.html
new file mode 100644
index 0000000..f6815d7
--- /dev/null
+++ b/src/app/components/group-info/group-info.component.html
@@ -0,0 +1,75 @@
+<div class="rounded-lg m-3 bg-white border border-gray-200 p-4 flex flex-col items-center text-center gap-2">
+    <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center">
+        <ion-icon name="people-outline" class="text-3xl text-gray-600"></ion-icon>
+    </div>
+
+    <ion-label class="text-lg font-mono">{{ group().label }}</ion-label>
+    <ion-label class="text-[13px] font-mono text-gray-400">{{ date() }}</ion-label>
+</div>
+
+<app-title-part textInfo="Participants"></app-title-part>
+<div class="rounded-lg px-5 m-3 bg-white border border-gray-200 items-center">
+    @for (user of group().users; track user.id; let i = $index) {
+        @if (group().users.length - 1 == i) {
+            <ion-item lines="none">
+                <p class="text-sm text-gray-600 mr-2">{{ user.username }}</p>
+                @if (user.grade === 'Admin') {
+                    <i class="fa-solid fa-crown text-xs text-yellow-600"></i>
+                }
+                <div class="flex items-center justify-end gap-1 w-full">
+                    <ion-icon class="text-2xl text-green-800 cursor-pointer" name="arrow-up-circle-outline"
+                              (click)="promoteUser(user.id)"></ion-icon>
+                    <app-pipe></app-pipe>
+                    <ion-icon class="text-xl text-red-800 cursor-pointer" name="ban"
+                              (click)="deleteUser(user.id)"></ion-icon>
+                </div>
+            </ion-item>
+        } @else {
+            <ion-item lines="full">
+                <p class="text-sm text-gray-600 mr-2">{{ user.username }}</p>
+                @if (user.grade === 'Admin') {
+                    <i class="fa-solid fa-crown text-xs text-yellow-600"></i>
+                }
+                <div class="flex items-center justify-end gap-1 w-full">
+                    <ion-icon class="text-2xl text-green-800 cursor-pointer" name="arrow-up-circle-outline"
+                              (click)="promoteUser(user.id)"></ion-icon>
+                    <app-pipe></app-pipe>
+                    <ion-icon class="text-xl text-red-800 cursor-pointer" name="ban"
+                              (click)="deleteUser(user.id)"></ion-icon>
+                </div>
+            </ion-item>
+        }
+    }
+</div>
+
+<app-title-part textInfo="Paramètres"></app-title-part>
+<div class="rounded-lg px-5 m-3 bg-white border border-gray-200 items-center">
+    <ion-list>
+        @for (n of options; track n) {
+            @if (n == options.length) {
+                <ion-item lines="none" class="transition-all duration-200 active:[--background:#DBD8D7]"
+                          (click)="leaveGroup()">
+                    <p class="text-sm text-red-800">Quitter le groupe</p>
+                    <ion-icon slot="end" class="text-xl text-red-800" name="logout"></ion-icon>
+                </ion-item>
+            } @else {
+                @switch (n) {
+                    @case (1) {
+                        <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]"
+                                  (click)="addToGroup()">
+                            <p class="text-sm text-gray-600">Ajouter un membre</p>
+                            <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
+                        </ion-item>
+                    }
+                    @case (2) {
+                        <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]"
+                                  (click)="deleteGroup()">
+                            <p class="text-sm text-red-800">Supprimer le groupe</p>
+                            <ion-icon slot="end" class="text-xl text-red-800" name="chevron"></ion-icon>
+                        </ion-item>
+                    }
+                }
+            }
+        }
+    </ion-list>
+</div>
diff --git a/src/app/components/group-info/group-info.component.scss b/src/app/components/group-info/group-info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/group-info/group-info.component.ts b/src/app/components/group-info/group-info.component.ts
new file mode 100644
index 0000000..f6863bf
--- /dev/null
+++ b/src/app/components/group-info/group-info.component.ts
@@ -0,0 +1,152 @@
+import {Component, computed, inject, input, OnInit, signal} from '@angular/core';
+import {GetGroupDetailsDto, GroupsService} from "../../services/api";
+import {addIcons} from "ionicons";
+import {peopleOutline, banOutline, arrowUpCircleOutline} from "ionicons/icons";
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import moment from 'moment';
+import {TitlePartComponent} from "../title-part/title-part.component";
+import {firstValueFrom} from "rxjs";
+import {PipeComponent} from "../pipe/pipe.component";
+
+addIcons({
+    'avatars': peopleOutline,
+    'ban': banOutline,
+    'arrow-up-circle-outline': arrowUpCircleOutline,
+})
+
+@Component({
+    selector: 'app-group-info',
+    templateUrl: './group-info.component.html',
+    styleUrls: ['./group-info.component.scss'],
+    imports: [
+        IonicModule,
+        TitlePartComponent,
+        PipeComponent
+    ]
+})
+export class GroupInfoComponent implements OnInit {
+    private groupsService = inject(GroupsService);
+    private toastCtrl = inject(ToastController);
+    private loadCtrl = inject(LoadingController);
+    groupSelected = input.required<GetGroupDetailsDto>();
+    group = signal<GetGroupDetailsDto>({});
+
+    date = computed<string>(() => moment(this.group().creationDate).format('DD/MM/YYYY'));
+
+    options = [1, 2, 3];
+
+    ngOnInit() {
+        this.group.set(this.groupSelected());
+    }
+
+    async deleteUser(id: number) {
+        const loading = await this.loadCtrl.create({
+            message: 'Suppression...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            await firstValueFrom(this.groupsService.deleteUserFromGroupEndpoint(this.group().id, id));
+            this.group.update(x => ({
+                ...x,
+                users: x.users.filter(u => u.id != id)
+            }));
+            const toast = await this.toastCtrl.create({
+                message: 'Utilisateur retiré du groupe',
+                duration: 2000,
+                color: 'success'
+            });
+            await toast.present();
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Vous devez être administrateur pour faire cela',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
+    }
+
+    async leaveGroup(){
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            await firstValueFrom(this.groupsService.leaveGroupEndpoint(this.group().id));
+            const toast = await this.toastCtrl.create({
+                message: 'Vous avez quitter ce groupe',
+                duration: 2000,
+                color: 'success'
+            });
+            await toast.present();
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible de quitter le groupe',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
+    }
+
+    addToGroup(){}
+
+    async deleteGroup(){
+        const loading = await this.loadCtrl.create({
+            message: 'Suppression...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            await firstValueFrom(this.groupsService.deleteGroupEndpoint(this.group().id));
+            const toast = await this.toastCtrl.create({
+                message: 'Groupe supprimé',
+                duration: 2000,
+                color: 'success'
+            });
+            await toast.present();
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Vous devez être administrateur pour faire cela',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
+    }
+
+    async promoteUser(id: number){
+        const loading = await this.loadCtrl.create({
+            message: 'Promotion...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            const group = await firstValueFrom(this.groupsService.patchGroupUserRoleEndpoint(this.group().id, id));
+            this.group.set(group);
+            const toast = await this.toastCtrl.create({
+                message: 'Utilisateur promu avec succès',
+                duration: 2000,
+                color: 'success'
+            });
+            await toast.present();
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Vous devez être administrateur pour faire cela',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
+    }
+}
\ No newline at end of file
diff --git a/src/app/components/message-form/message-form.component.html b/src/app/components/message-form/message-form.component.html
new file mode 100644
index 0000000..0939229
--- /dev/null
+++ b/src/app/components/message-form/message-form.component.html
@@ -0,0 +1,3 @@
+<p>
+  message-form works!
+</p>
diff --git a/src/app/components/message-form/message-form.component.scss b/src/app/components/message-form/message-form.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/message-form/message-form.component.ts b/src/app/components/message-form/message-form.component.ts
new file mode 100644
index 0000000..6fc3bcb
--- /dev/null
+++ b/src/app/components/message-form/message-form.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-message-form',
+  templateUrl: './message-form.component.html',
+  styleUrls: ['./message-form.component.scss'],
+})
+export class MessageFormComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}
diff --git a/src/app/components/message/message.component.html b/src/app/components/message/message.component.html
new file mode 100644
index 0000000..9bee74c
--- /dev/null
+++ b/src/app/components/message/message.component.html
@@ -0,0 +1,3 @@
+<p>
+  message works!
+</p>
diff --git a/src/app/components/message/message.component.scss b/src/app/components/message/message.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/message/message.component.ts b/src/app/components/message/message.component.ts
new file mode 100644
index 0000000..7b435fd
--- /dev/null
+++ b/src/app/components/message/message.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-message',
+  templateUrl: './message.component.html',
+  styleUrls: ['./message.component.scss'],
+})
+export class MessageComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}