diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 6e6bbd9..04de222 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,5 +1,5 @@
 import { Routes } from '@angular/router';
-import { Home } from '../view/pages/home/home';
+import { Home } from '../view/pages/home/home.component';
 
 export const routes: Routes = [
   {path:'',component:Home}
diff --git a/src/model/Group.ts b/src/model/Group.ts
new file mode 100644
index 0000000..1c5566d
--- /dev/null
+++ b/src/model/Group.ts
@@ -0,0 +1,5 @@
+export interface Group{
+  id_group: number;
+  id_project: number;
+  name_group: string;
+}
diff --git a/src/services/base-service.ts b/src/services/base.service.ts
similarity index 100%
rename from src/services/base-service.ts
rename to src/services/base.service.ts
diff --git a/src/services/group.service.spec.ts b/src/services/group.service.spec.ts
new file mode 100644
index 0000000..83828c9
--- /dev/null
+++ b/src/services/group.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed } from '@angular/core/testing';
+import { GroupService } from './group-service';
+
+describe('GroupService', () => {
+  let service: GroupService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GroupService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/services/group.service.ts b/src/services/group.service.ts
new file mode 100644
index 0000000..df125cc
--- /dev/null
+++ b/src/services/group.service.ts
@@ -0,0 +1,10 @@
+import { Service } from '@angular/core';
+import { BaseService } from './base.service';
+import { Observable } from 'rxjs';
+import { Group } from '../model/Group';
+@Service()
+export class GroupService extends BaseService{
+  public getGroups():Observable<Group[]>{
+    return this.get<Group[]>("http://127.0.0.1:8080/group");
+  }
+}
diff --git a/src/services/task-service.spec.ts b/src/services/task.service.spec.ts
similarity index 100%
rename from src/services/task-service.spec.ts
rename to src/services/task.service.spec.ts
diff --git a/src/services/task-service.ts b/src/services/task.service.ts
similarity index 85%
rename from src/services/task-service.ts
rename to src/services/task.service.ts
index 3b83e91..2aaad94 100644
--- a/src/services/task-service.ts
+++ b/src/services/task.service.ts
@@ -1,7 +1,7 @@
 import { Service } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Task } from '../model/Task';
-import { BaseService } from './base-service';
+import { BaseService } from './base.service';
 
 @Service()
 export class TaskService extends BaseService{
diff --git a/src/view/pages/home/home.css b/src/view/pages/home/home.component.css
similarity index 100%
rename from src/view/pages/home/home.css
rename to src/view/pages/home/home.component.css
diff --git a/src/view/pages/home/home.component.html b/src/view/pages/home/home.component.html
new file mode 100644
index 0000000..fd71866
--- /dev/null
+++ b/src/view/pages/home/home.component.html
@@ -0,0 +1,30 @@
+<h1>
+  Page d'accueil
+</h1>
+
+<h2>
+  Section tâches
+</h2>
+<div>
+  @for (task of tasks(); track task.id_task) {
+    <p>
+      {{ task.name_task }}
+    </p>
+  }
+</div>
+
+<h2>
+  Section groupes de tâches
+</h2>
+<div>
+  @for (group of groups(); track group.id_group) {
+    <p>
+      {{ group.name_group }}
+    </p>
+  }
+</div>
+<h2>
+  Section projets
+</h2>
+
+<router-outlet />
diff --git a/src/view/pages/home/home.spec.ts b/src/view/pages/home/home.component.spec.ts
similarity index 100%
rename from src/view/pages/home/home.spec.ts
rename to src/view/pages/home/home.component.spec.ts
diff --git a/src/view/pages/home/home.ts b/src/view/pages/home/home.component.ts
similarity index 51%
rename from src/view/pages/home/home.ts
rename to src/view/pages/home/home.component.ts
index 3550086..08dada7 100644
--- a/src/view/pages/home/home.ts
+++ b/src/view/pages/home/home.component.ts
@@ -1,21 +1,30 @@
 import { Component, inject, signal, WritableSignal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { TaskService } from '../../../services/task-service';
+import { TaskService } from '../../../services/task.service';
 import { Task } from '../../../model/Task';
+import { GroupService} from '../../../services/group.service';
+import { Group } from '../../../model/Group';
 
 @Component({
   imports: [RouterOutlet],
   selector: 'app-root',
-  styleUrl: './home.css',
-  templateUrl: './home.html',
+  styleUrl: './home.component.css',
+  templateUrl: './home.component.html',
 })
 export class Home {
   private taskService: TaskService = inject(TaskService);
+  private groupService: GroupService = inject(GroupService);
 
   tasks: WritableSignal<Task[]> = signal<Task[]>([]);
+  groups: WritableSignal<Group[]> = signal<Group[]>([]);
+
   public ngOnInit(): void {
     this.taskService.getTasks().subscribe((response: Task[]): void => {
       this.tasks.set(response);
     });
+
+    this.groupService.getGroups().subscribe((response:Group[]): void => {
+      this.groups.set(response);
+    })
   }
 }
diff --git a/src/view/pages/home/home.html b/src/view/pages/home/home.html
deleted file mode 100644
index 15a4dac..0000000
--- a/src/view/pages/home/home.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div>
-  @for (task of tasks(); track task.id_task) {
-    <p>
-      {{ task.name_task }}
-    </p>
-  }
-</div>
-<router-outlet />