diff --git a/frontend/app/components/modules/modules.component.html b/frontend/app/components/modules/modules.component.html
index 611c18166..72863fc15 100644
--- a/frontend/app/components/modules/modules.component.html
+++ b/frontend/app/components/modules/modules.component.html
@@ -14,7 +14,7 @@ <h2 class="title-module mb-4">{{titleModule}}</h2>
     <div class="col-md-4 col-sm-12 des-module"> {{description}}</div>
     <!-- <div class="w-100 d-none d-sm-block"></div> -->
     <div class="btn-module col-md-8 col-sm-12 text-center">
-      <button class="btn btn-success mr-2" (click)="onAccessSitesClick(modules)" *ngIf="currentUser">
+      <button class="btn btn-success mr-2" [routerLink]="'sites_groups'" *ngIf="currentUser">
         Accès aux sites
       </button>
       <div class="container py-5 border rounded m-2">
diff --git a/frontend/app/components/modules/modules.component.ts b/frontend/app/components/modules/modules.component.ts
index 9a45f8f00..b538c7afe 100644
--- a/frontend/app/components/modules/modules.component.ts
+++ b/frontend/app/components/modules/modules.component.ts
@@ -68,9 +68,9 @@ export class ModulesComponent implements OnInit {
     this.currentUser["cruved_objects"] = {};
   }
 
-  onAccessSitesClick(modules) {
-    console.log("accès aux sites avec droits ")
-    console.log(modules)
-  }
+  // onAccessSitesClick(modules) {
+  //   console.log("accès aux sites avec droits ")
+  //   console.log(modules)
+  // }
 
 }
diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.css b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html
new file mode 100644
index 000000000..85afaac99
--- /dev/null
+++ b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.html
@@ -0,0 +1,9 @@
+<div id="geometry" class="monitoring-map-container">
+  <pnx-map height="80vh">
+    <pnx-geojson
+      [geojson]="sitesGroups"
+      [zoomOnLayer]="true"
+      [zoomOnFirstTime]="true"
+    ></pnx-geojson>
+  </pnx-map>
+</div>
diff --git a/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts
new file mode 100644
index 000000000..00e3634be
--- /dev/null
+++ b/frontend/app/components/monitoring-sitesgroups/monitoring-sitesgroups.component.ts
@@ -0,0 +1,49 @@
+import { Component, OnInit } from "@angular/core";
+import { SitesService } from "../../services/sites.service";
+import { GeoJSON } from "leaflet";
+
+interface SitesGroups {
+  comments?: string;
+  data?: any;
+  geom_geojson: any;
+  id_sites_group: number;
+  nb_sites: number;
+  nb_visits: number;
+  sites_group_code: string;
+  sites_group_description?: string;
+  sites_group_name: string;
+  uuid_sites_group: string;
+}
+
+interface PaginatedSitesGroup {
+  count: number;
+  limit: number;
+  offset: number;
+  items: SitesGroups[];
+}
+
+@Component({
+  selector: "monitoring-sitesgroups",
+  templateUrl: "./monitoring-sitesgroups.component.html",
+  styleUrls: ["./monitoring-sitesgroups.component.css"],
+})
+export class MonitoringSitesGroupsComponent implements OnInit {
+  sitesGroups: GeoJSON;
+  constructor(private _sites_service: SitesService) {}
+  ngOnInit() {
+    console.log("yolo");
+    this._sites_service
+      .getSitesGroups()
+      .subscribe((data: PaginatedSitesGroup) => {
+        this.sitesGroups = {
+          features: data.items.map((group) => {
+            group["id"] = group.id_sites_group;
+            group["type"] = "Feature";
+            return group;
+          }),
+          type: "FeatureCollection",
+        };
+        console.log(this.sitesGroups);
+      });
+  }
+}
diff --git a/frontend/app/gnModule.module.ts b/frontend/app/gnModule.module.ts
index 64fecadc7..6e0253846 100644
--- a/frontend/app/gnModule.module.ts
+++ b/frontend/app/gnModule.module.ts
@@ -27,13 +27,12 @@ import { MonitoringPropertiesComponent } from "./components/monitoring-propertie
 import { MonitoringDatatableComponent } from "./components/monitoring-datatable/monitoring-datatable.component";
 
 import { MatSlideToggleModule } from "@angular/material/slide-toggle";
-import  { MatFormFieldModule} from "@angular/material/form-field";
-import { MatAutocompleteModule} from "@angular/material/autocomplete";
-import { MatSelectModule} from "@angular/material/select";
-import { MatInputModule} from "@angular/material/input";
-
-
-
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import { MatSelectModule } from "@angular/material/select";
+import { MatInputModule } from "@angular/material/input";
+import { MonitoringSitesGroupsComponent } from "./components/monitoring-sitesgroups/monitoring-sitesgroups.component";
+import { SitesService } from "./services/sites.service";
 
 // my module routing
 const routes: Routes = [
@@ -41,9 +40,9 @@ const routes: Routes = [
   { path: "", component: ModulesComponent },
 
   /** module  */
-  { path: 'module/:moduleCode', component: MonitoringObjectComponent },
+  { path: "module/:moduleCode", component: MonitoringObjectComponent },
   /** create module */
-  { path: 'module', component: MonitoringObjectComponent },
+  { path: "module", component: MonitoringObjectComponent },
 
   /** object */
   {
@@ -55,6 +54,10 @@ const routes: Routes = [
     path: "create_object/:moduleCode/:objectType",
     component: MonitoringObjectComponent,
   },
+  {
+    path: "sites_groups",
+    component: MonitoringSitesGroupsComponent,
+  },
 ];
 
 @NgModule({
@@ -69,6 +72,7 @@ const routes: Routes = [
     MonitoringListComponent,
     MonitoringPropertiesComponent,
     MonitoringDatatableComponent,
+    MonitoringSitesGroupsComponent,
   ],
   imports: [
     GN2CommonModule,
@@ -92,6 +96,7 @@ const routes: Routes = [
     DataUtilsService,
     ConfigService,
     MonitoringObjectService,
+    SitesService,
   ],
   bootstrap: [ModulesComponent],
   schemas: [
diff --git a/frontend/app/services/sites.service.ts b/frontend/app/services/sites.service.ts
new file mode 100644
index 000000000..f34ffeb00
--- /dev/null
+++ b/frontend/app/services/sites.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from "@angular/core";
+
+import { CacheService } from "./cache.service";
+import { ConfigService } from "./config.service";
+import { HttpClient } from "@angular/common/http";
+
+
+@Injectable()
+export class SitesService {
+  constructor(
+    private _cacheService: CacheService
+  ) {}
+
+  getSitesGroups() {
+    return this._cacheService.request("get", `sites_groups`);
+  }
+}