diff --git a/src/app/models/structure.model.ts b/src/app/models/structure.model.ts
index 67f63ef0882bbbdb67b01f52a12609a299a21c82..35d8222e53a67976ed033774c91d893bf51d994d 100644
--- a/src/app/models/structure.model.ts
+++ b/src/app/models/structure.model.ts
@@ -35,6 +35,8 @@ export class Structure {
   public hours: Week;
   public isOpen: boolean;
   public openedOn: OpeningDay;
+  public lesCompetencesDeBase: string[];
+  public accesAuxDroits: string[];
   public distance?: number;
   public address?: string;
 
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 07edb5fa544a05be1d3f1b13522e4e792251ffe4..c54f7829f53b240346f612ea20e6d73dc48f64ac 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -65,11 +65,13 @@
       <h2>Services</h2>
     </div>
     <div fxLayout="row" class="w-100">
-      <div fxFlex="50%">
+      <div fxFlex="50%" *ngIf="baseSkills && baseSkills[0] !== undefined">
         <h3 class="subtitle">Compétences de base</h3>
+        <p *ngFor="let skill of baseSkills">{{ skill.text }}</p>
       </div>
-      <div fxFlex="50%">
+      <div fxFlex="50%" *ngIf="accessRights && accessRights[0] !== undefined">
         <h3 class="subtitle">Accès au droits</h3>
+        <p *ngFor="let rights of accessRights">{{ rights.text }}</p>
       </div>
     </div>
   </div>
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index 16a1dc68389a117c2263f0030a8e0a35cb18f80b..5ece631a00393a2eae3ed865451a148398e3447b 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/src/app/structure-list/components/structure-details/structure-details.component.scss
@@ -55,7 +55,6 @@ h4 {
 p,
 a {
   @include cn-regular-16;
-  // margin-left: 30px;
   margin-top: 9px;
   margin-bottom: 9px;
 }
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index e4dd41aa449dd14e2526a4a299403d11828b5eca..a067d43183502e1121f047c91df97a42930364c6 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/src/app/structure-list/components/structure-details/structure-details.component.ts
@@ -1,6 +1,10 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Structure } from '../../../models/structure.model';
+import { Module } from '../../models/module.model';
+import { Category } from '../../models/category.model';
 import { AccessModality } from '../../enum/access-modality.enum';
+import { SearchService } from '../../services/search.service';
+import * as _ from 'lodash';
 @Component({
   selector: 'app-structure-details',
   templateUrl: './structure-details.component.html',
@@ -11,9 +15,25 @@ export class StructureDetailsComponent implements OnInit {
   @Output() public closeDetails: EventEmitter<boolean> = new EventEmitter<boolean>();
   public accessModality = AccessModality;
 
-  constructor() {}
+  public baseSkillssReferentiel: Category;
+  public accessRightsReferentiel: Category;
+  public baseSkills: Module[];
+  public accessRights: Module[];
 
-  ngOnInit(): void {}
+  constructor(private searchService: SearchService) {}
+
+  ngOnInit(): void {
+    this.searchService.getCategoriesTraining().subscribe((referentiels) => {
+      referentiels.forEach((referentiel) => {
+        if (referentiel.isBaseSkills()) {
+          this.baseSkillssReferentiel = referentiel;
+        } else if (referentiel.isRigthtsAccess()) {
+          this.accessRightsReferentiel = referentiel;
+        }
+      });
+      this.setServiceCategories();
+    });
+  }
 
   public close(): void {
     this.closeDetails.emit(true);
@@ -28,9 +48,23 @@ export class StructureDetailsComponent implements OnInit {
       case AccessModality.numeric:
         return 'tel';
       default:
-        throw new Error(`${accessModality} is not handled by getAccessIcon`);
+        return null;
     }
   }
 
+  public setServiceCategories(): void {
+    this.baseSkills = this.toNumbers(this.structure.lesCompetencesDeBase).map((skill) =>
+      _.find(this.baseSkillssReferentiel.modules, { id: skill })
+    );
+    this.accessRights = this.toNumbers(this.structure.accesAuxDroits).map((rights) =>
+      _.find(this.accessRightsReferentiel.modules, { id: rights })
+    );
+
+    console.log(this.baseSkills);
+    console.log(this.accessRights);
+  }
+
   public keepOriginalOrder = (a, b) => a.key;
+
+  public toNumbers = (arr) => arr.map(Number);
 }
diff --git a/src/app/structure-list/models/category.model.ts b/src/app/structure-list/models/category.model.ts
index 0ffaec8dc7926d5db7fba0e622f189e82b49351b..030f7fe827c535a481d2e8ff5eb6963edaf7e136 100644
--- a/src/app/structure-list/models/category.model.ts
+++ b/src/app/structure-list/models/category.model.ts
@@ -9,4 +9,12 @@ export class Category {
       modules: obj && obj.modules ? obj.modules.map((module) => new Module(module.id, module.text)) : null,
     });
   }
+
+  public isBaseSkills(): boolean {
+    return this.name === 'Les compétences de base';
+  }
+
+  public isRigthtsAccess(): boolean {
+    return this.name === 'Accès aux droits';
+  }
 }