diff --git a/src/app/modules/colors/pages/list/list.component.html b/src/app/modules/colors/pages/list/list.component.html
index 84493bf..7b938d7 100644
--- a/src/app/modules/colors/pages/list/list.component.html
+++ b/src/app/modules/colors/pages/list/list.component.html
@@ -5,7 +5,7 @@
       matInput
       type="text"
       [(ngModel)]="searchQuery"
-    (keyup)="searchRecipes()"/>
+      (keyup)="searchRecipes()"/>
     <button
       mat-button
       *ngIf="searchQuery"
@@ -20,18 +20,23 @@
   </div>
 </div>
 
+<div *ngIf="recipes.size === 0" class="alert alert-warning w-50 m-auto text-center">
+  <p>Il n'y a actuellement aucune recette enregistrée dans le système.</p>
+  <p *ngIf="hasEditPermission">Vous pouvez en créer une <b><a routerLink="/color/add">ici</a></b>.</p>
+</div>
+
 <mat-expansion-panel
   class="table-title"
-  *ngFor="let companyRecipes of recipes"
-  [hidden]="isCompanyHidden(companyRecipes.recipes)"
+  *ngFor="let company of companies"
+  [hidden]="isCompanyHidden(company)"
   [expanded]="panelForcedExpanded">
   <mat-expansion-panel-header>
     <mat-panel-title>
-      {{companyRecipes.company}}
+      {{company.name}}
     </mat-panel-title>
   </mat-expansion-panel-header>
 
-  <ng-container *ngTemplateOutlet="recipeTableTemplate; context: {recipes: companyRecipes.recipes}"></ng-container>
+  <ng-container *ngTemplateOutlet="recipeTableTemplate; context: {recipes: recipes.get(company.id)}"></ng-container>
 </mat-expansion-panel>
 
 <ng-template
diff --git a/src/app/modules/colors/pages/list/list.component.ts b/src/app/modules/colors/pages/list/list.component.ts
index 637061b..3fbf60b 100644
--- a/src/app/modules/colors/pages/list/list.component.ts
+++ b/src/app/modules/colors/pages/list/list.component.ts
@@ -8,7 +8,9 @@ import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorService} from '../../../shared/service/error.service'
 import {AppState} from '../../../shared/app-state'
 import {ConfigService} from '../../../shared/service/config.service'
-import {Config} from '../../../shared/model/config.model'
+import {Company} from '../../../shared/model/company.model';
+import {CompanyService} from '../../../company/service/company.service';
+import {Config} from '../../../shared/model/config.model';
 
 @Component({
   selector: 'cre-list',
@@ -16,13 +18,15 @@ import {Config} from '../../../shared/model/config.model'
   styleUrls: ['./list.component.sass']
 })
 export class ListComponent extends ErrorHandlingComponent {
-  recipes: { company: string, recipes: Recipe[] }[] = []
+  companies: Company[] = []
+  recipes: Map<number, Recipe[]> = new Map<number, Recipe[]>()
   tableCols = ['name', 'description', 'color', 'sample', 'iconNotApproved', 'buttonView', 'buttonEdit']
   searchQuery = ''
   panelForcedExpanded = false
   hiddenRecipes = []
 
   constructor(
+    private companyService: CompanyService,
     private recipeService: RecipeService,
     private accountService: AccountService,
     private configService: ConfigService,
@@ -37,21 +41,35 @@ export class ListComponent extends ErrorHandlingComponent {
 
   ngOnInit() {
     super.ngOnInit()
-    this.appState.title = "Explorateur"
+    this.appState.title = 'Explorateur'
 
+    // Navigate to configs if server is in emergency mode
     this.subscribe(
       this.configService.get(Config.EMERGENCY_MODE),
       config => {
-        if (config.content === "false") {
-          this.subscribe(
-            this.recipeService.allSortedByCompany,
-            recipes => this.recipes = recipes
-          )
-        } else {
-          this.urlUtils.navigateTo("/admin/config")
+        if (config.content == "true") {
+          this.urlUtils.navigateTo('/admin/config/')
         }
       }
     )
+
+    this.fetchCompanies()
+    // this.fetchRecipes()
+  }
+
+  private fetchCompanies() {
+    this.subscribe(
+      this.companyService.all,
+      companies => this.companies = companies
+    )
+  }
+
+  private fetchRecipes() {
+    this.subscribe(
+      this.recipeService.allByCompany,
+      recipes => this.recipes = recipes,
+      true
+    )
   }
 
   searchRecipes() {
@@ -60,13 +78,16 @@ export class ListComponent extends ErrorHandlingComponent {
       this.cdRef.detectChanges()
     }
 
-    this.recipes
-      .flatMap(r => r.recipes)
-      .forEach(r => this.recipeMatchesSearchQuery(r))
+    for (let recipeArray of this.recipes.values()) {
+      recipeArray.forEach(recipe => this.recipeMatchesSearchQuery(recipe))
+    }
   }
 
-  isCompanyHidden(companyRecipes: Recipe[]): boolean {
-    return (this.searchQuery && this.searchQuery.length > 0) && companyRecipes.map(r => this.hiddenRecipes[r.id]).filter(r => !r).length <= 0
+  isCompanyHidden(company: Company): boolean {
+    const companyRecipes = this.recipes.get(company.id);
+    return !(companyRecipes && companyRecipes.length >= 0) ||
+      this.searchQuery && this.searchQuery.length > 0 &&
+      companyRecipes.map(r => this.hiddenRecipes[r.id]).filter(r => !r).length <= 0
   }
 
   isLight(recipe: Recipe): boolean {
diff --git a/src/app/modules/colors/services/recipe.service.ts b/src/app/modules/colors/services/recipe.service.ts
index 1cda0ce..d110d1a 100644
--- a/src/app/modules/colors/services/recipe.service.ts
+++ b/src/app/modules/colors/services/recipe.service.ts
@@ -3,86 +3,87 @@ import {ApiService} from '../../shared/service/api.service'
 import {Observable} from 'rxjs'
 import {Recipe, RecipeStep} from '../../shared/model/recipe.model'
 import {map} from 'rxjs/operators'
+import {Company} from '../../shared/model/company.model';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root'
 })
 export class RecipeService {
-  constructor(
-    private api: ApiService
-  ) {
-  }
+    constructor(
+        private api: ApiService
+    ) {
+    }
 
-  get all(): Observable<Recipe[]> {
-    return this.api.get<Recipe[]>('/recipe')
-  }
+    get all(): Observable<Recipe[]> {
+        return this.api.get<Recipe[]>('/recipe')
+    }
 
-  getAllByName(name: string): Observable<Recipe[]> {
-    return this.api.get<Recipe[]>(`/recipe?name=${name}`)
-  }
+    getAllByName(name: string): Observable<Recipe[]> {
+        return this.api.get<Recipe[]>(`/recipe?name=${name}`)
+    }
 
-  get allSortedByCompany(): Observable<{ company: string, recipes: Recipe[] }[]> {
-    return this.all.pipe(map(recipes => {
-      const mapped = []
-      recipes.forEach(r => {
-        if (!mapped[r.company.id]) {
-          mapped[r.company.id] = {company: r.company.name, recipes: []}
+    get allByCompany(): Observable<Map<number, Recipe[]>> {
+        return this.all.pipe(map(recipes => {
+            const map = new Map<number, Recipe[]>()
+            recipes.forEach(r => {
+                if (!map.has(r.company.id)) {
+                    map.set(r.company.id, [])
+                }
+                map.get(r.company.id).push(r)
+            })
+            return map
+        }))
+    }
+
+    getById(id: number): Observable<Recipe> {
+        return this.api.get<Recipe>(`/recipe/${id}`)
+    }
+
+    save(name: string, description: string, color: string, gloss: number, sample: number, approbationDate: string, remark: string, companyId: number): Observable<Recipe> {
+        const body = {name, description, color, gloss, sample, remark, companyId}
+        if (approbationDate) {
+            // @ts-ignore
+            body.approbationDate = approbationDate
         }
-        mapped[r.company.id].recipes.push(r)
-      })
-      return mapped.filter(e => e != null)  // Filter to remove empty elements in the array that appears for some reason
-    }))
-  }
-
-  getById(id: number): Observable<Recipe> {
-    return this.api.get<Recipe>(`/recipe/${id}`)
-  }
-
-  save(name: string, description: string, color: string, gloss: number, sample: number, approbationDate: string, remark: string, companyId: number): Observable<Recipe> {
-    const body = {name, description, color, gloss, sample, remark, companyId}
-    if (approbationDate) {
-      // @ts-ignore
-      body.approbationDate = approbationDate
-    }
-    return this.api.post<Recipe>('/recipe', body)
-  }
-
-  update(id: number, name: string, description: string, color: string, gloss: number, sample: number, approbationDate: string, remark: string, steps: Map<number, RecipeStep[]>) {
-    const body = {id, name, description, color, gloss, sample, remark, steps: []}
-    if (approbationDate) {
-      // @ts-ignore
-      body.approbationDate = approbationDate
+        return this.api.post<Recipe>('/recipe', body)
     }
 
-    steps.forEach((groupSteps, groupId) => {
-      const mappedGroupSteps = groupSteps.map(s => {
-        return {message: s.message, position: s.position}
-      })
-      body.steps.push({groupId, steps: mappedGroupSteps})
-    })
+    update(id: number, name: string, description: string, color: string, gloss: number, sample: number, approbationDate: string, remark: string, steps: Map<number, RecipeStep[]>) {
+        const body = {id, name, description, color, gloss, sample, remark, steps: []}
+        if (approbationDate) {
+            // @ts-ignore
+            body.approbationDate = approbationDate
+        }
 
-    return this.api.put<Recipe>('/recipe', body)
-  }
+        steps.forEach((groupSteps, groupId) => {
+            const mappedGroupSteps = groupSteps.map(s => {
+                return {message: s.message, position: s.position}
+            })
+            body.steps.push({groupId, steps: mappedGroupSteps})
+        })
 
-  updateExplorerModifications(id: number, notes: Map<number, string>, mixesLocationChange: Map<number, string>): Observable<void> {
-    const body = {
-      recipeId: id,
-      notes: [],
-      mixesLocation: []
+        return this.api.put<Recipe>('/recipe', body)
     }
 
-    notes.forEach((content, groupId) => {
-      body.notes.push({groupId, content})
-    })
+    updateExplorerModifications(id: number, notes: Map<number, string>, mixesLocationChange: Map<number, string>): Observable<void> {
+        const body = {
+            recipeId: id,
+            notes: [],
+            mixesLocation: []
+        }
 
-    mixesLocationChange.forEach((location, mixId) => {
-      body.mixesLocation.push({mixId, location})
-    })
+        notes.forEach((content, groupId) => {
+            body.notes.push({groupId, content})
+        })
 
-    return this.api.put<void>('/recipe/public', body)
-  }
+        mixesLocationChange.forEach((location, mixId) => {
+            body.mixesLocation.push({mixId, location})
+        })
 
-  delete(id: number): Observable<void> {
-    return this.api.delete<void>(`/recipe/${id}`)
-  }
+        return this.api.put<void>('/recipe/public', body)
+    }
+
+    delete(id: number): Observable<void> {
+        return this.api.delete<void>(`/recipe/${id}`)
+    }
 }