diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 15fe88de46811d08d59753714f94ab8d41b94e14..6ff88d19869478a72145ef9647d2516e431d6601 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -25,9 +25,10 @@ import { reducersMap } from './share/store';
 import { AuthEffects } from './share/store/effects/auth.effects';
 import { BarEffects } from './share/store/effects/bar.effects';
 import { DrinksComponent } from './components/drinks/drinks.component';
+import { ToDegreePipe } from './share/pipes/to-degree.pipe';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, ToDegreePipe],
   imports: [
 		BrowserModule,
 		BrowserAnimationsModule,
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index 046f1fbef8e44544b9b50dfa012ab7a9dbf9023d..39f04cba899ef14ddc43157f4352891aa81610d3 100644
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -12,7 +12,7 @@ export const APP_ROUTING: Route[] = [
 	{ path: 'photos', canActivate: [AuthGuard], loadChildren: () => import('./photos/photos.module').then(m => m.PhotosModule) },
 	{ path: 'profile', canActivate: [AuthGuard], loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) },
 	{ path: 'bars', canActivate: [AuthGuard], component: BarsComponent },
-	{ path: 'drinks', canActivate: [AuthGuard], component: DrinksComponent },
+	{ path: 'menu/:id', canActivate: [AuthGuard], component: DrinksComponent },
 	{ path: 'signup', canActivate: [AlreadyLoggedInGuard], component: SignupComponent },
 	{ path: 'signin', canActivate: [AlreadyLoggedInGuard], component: SigninComponent },
 	{ path: '', redirectTo: '', pathMatch: 'full' },
diff --git a/src/app/components/bars/bars.component.html b/src/app/components/bars/bars.component.html
index 753b1426da5faee347ce9402ce5eae7254b58c0c..c662c94e66c87bf635e4081da1cc2e8c6743207a 100644
--- a/src/app/components/bars/bars.component.html
+++ b/src/app/components/bars/bars.component.html
@@ -3,7 +3,7 @@
 	<p>Choisis ton lieu de beuverie.
 		Tu pourras ensuite accéder à la carte des boissons.</p>
 	</div>
-<!-- <section>
+<section>
 	<div *ngFor="let bar of (bars$ | async)" class=" card row-container center">
 		<div class="card-header">
 			<img class="logo-img" src="https://fakeimg.pl/300/" alt="fake-img">
@@ -13,21 +13,7 @@
 			<div>{{ bar.address }}</div>
 		</div>
 		<div class="card-action">
-			<button mat-raised-button routerLink="/drinks" color='accent'>choisir</button>
-		</div>
-	</div>
-</section> -->
-<section>
-	<div class=" card row-container center">
-		<div class="card-header">
-			<img class="logo-img" src="https://fakeimg.pl/300/" alt="fake-img">
-		</div>
-		<div class="card-content">
-			<p>Déliriuem Café clermont-ferrand</p>
-			<div>Delidelideli</div>
-		</div>
-		<div class="card-action">
-			<button mat-raised-button routerLink="/drinks" color='accent'>choisir</button>
+			<button mat-raised-button routerLink="/menu/{{bar._id}}" color='accent'>choisir</button>
 		</div>
 	</div>
-</section>
+</section>
\ No newline at end of file
diff --git a/src/app/components/drinks/drinks.component.html b/src/app/components/drinks/drinks.component.html
index 4caab9b3773b6c36aaf53bd678e18555b5941841..543fc7d1627ed6c586198320f00d5e91106721b5 100644
--- a/src/app/components/drinks/drinks.component.html
+++ b/src/app/components/drinks/drinks.component.html
@@ -1,13 +1,13 @@
 <div class="band">
-	<div *ngFor="let nb of tests" class="drink-card">
-		<h3 class="title">Délirium Tremens</h3>
+	<div *ngFor="let drink of (menu$ | async).drinks" class="drink-card">
+		<h3 class="title">{{ drink.shortname }}</h3>
 		<div class="thumb" style="background-image: url(https://fakeimg.pl/250x250/);"></div>
 		<hr>
 		<article>
-			<p>degrée : <strong>7,5°</strong> / Prix : <strong>7.5€</strong></p>
+			<p>degrée : <strong>{{ drink.abv }}°</strong> / Prix : <strong>7.5€</strong></p>
 			<span class="xp-number">1200</span><span class="xp">xp</span>
-			<p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis ea minus nostrum vel fuga.</p>
+			<p class="description">{{ drink.description }}</p>
 		</article>
-		<button mat-raised-button routerLink="/drinks" color='accent'>commander</button>
+		<button mat-raised-button routerLink="/menu" color='accent'>commander</button>
 	</div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/drinks/drinks.component.ts b/src/app/components/drinks/drinks.component.ts
index 0c641ff001330211de20341a940f895e4f6ca02f..e42be5030e4c2f45d60565e984b7418b222bb8ee 100644
--- a/src/app/components/drinks/drinks.component.ts
+++ b/src/app/components/drinks/drinks.component.ts
@@ -1,4 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+
+import { currentMenuSelector } from '../../share/store/selectors/bar.selectors';
+import { FetchBarMenu } from '../../share/store/actions/bar.actions';
+import { Menu } from '../../share/models/menu.model';
+import { State } from '../../share/store';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-drinks',
@@ -6,11 +14,22 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./drinks.component.css']
 })
 export class DrinksComponent implements OnInit {
+	public menu$: Observable<Menu> = this.store.select(currentMenuSelector);
 	public tests: number[] = [0, 1, 2, 3, 4];
 
-  constructor() { }
+  constructor(
+		private activatedRoute: ActivatedRoute,
+		private store: Store<State>,
+	) {}
 
   ngOnInit(): void {
-  }
+		this.activatedRoute.params.subscribe(params => {
+			const barId = params['id'];
+
+			if (barId) {
+				this.store.dispatch(new FetchBarMenu(barId));
+			}
+		});
 
+	}
 }
diff --git a/src/app/share/components/topbar/topbar.component.html b/src/app/share/components/topbar/topbar.component.html
index 8ab70b509498c7790a2c7a9dca3f1f90fb88956c..2c18d149ac639d951831e044723da938406cd6f9 100644
--- a/src/app/share/components/topbar/topbar.component.html
+++ b/src/app/share/components/topbar/topbar.component.html
@@ -3,9 +3,9 @@
 	<!-- <span *ngIf="!(isLoggedIn$ | async)" fxLayoutGap="15px" fxLayout="row" fxLayoutAlign="center center">
 		<mat-icon class="link" routerLink="/signin">login</mat-icon>
 		<mat-icon class="link" routerLink="/signup">launch</mat-icon>
-	</span>
+	</span> -->
 	<span *ngIf="isLoggedIn$ | async" fxLayoutGap="15px" fxLayout="row" fxLayoutAlign="center center">
-		<mat-icon class="link" routerLink="/profile">account_circle</mat-icon>
+		<!-- <mat-icon class="link" routerLink="/profile">account_circle</mat-icon>	 -->
 		<mat-icon class="link" routerLink="/" (click)="onLogout()">power_settings_new</mat-icon>
-	</span> -->
+	</span>
 </mat-toolbar>
\ No newline at end of file
diff --git a/src/app/share/models/bar.model.ts b/src/app/share/models/bar.model.ts
index b4d59963b72d777f81de243368982aee613cfb0b..e760487bd2011306ecc5e750c16d643259012cf1 100644
--- a/src/app/share/models/bar.model.ts
+++ b/src/app/share/models/bar.model.ts
@@ -1,4 +1,5 @@
 export interface Bar {
+	_id: string;
 	shortname: string;
 	longname: string;
 	description: string;
diff --git a/src/app/share/models/drink.model.ts b/src/app/share/models/drink.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..97419d94c75df77e0da129573f303ebf8a19577c
--- /dev/null
+++ b/src/app/share/models/drink.model.ts
@@ -0,0 +1,10 @@
+export interface Drink {
+	id: number,
+	shortname: string,
+	longname: string,
+	description: string,
+	idFamilyDrink: number,
+	abv: string,
+	img: string,
+	sizes: number[],
+}
\ No newline at end of file
diff --git a/src/app/share/models/menu.model.ts b/src/app/share/models/menu.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4833831b5dd35d1cfdcd897657e2a7823672c254
--- /dev/null
+++ b/src/app/share/models/menu.model.ts
@@ -0,0 +1,7 @@
+import { Bar } from "./bar.model";
+import { Drink } from "./drink.model";
+
+export interface Menu {
+	bar: Bar;
+	drinks: Drink[];
+}
\ No newline at end of file
diff --git a/src/app/share/pipes/to-degree.pipe.ts b/src/app/share/pipes/to-degree.pipe.ts
new file mode 100644
index 0000000000000000000000000000000000000000..adaaf69752bd614774677d7918ed853fe9f816a5
--- /dev/null
+++ b/src/app/share/pipes/to-degree.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'toDegree'
+})
+export class ToDegreePipe implements PipeTransform {
+
+  transform(value: string, ...args: unknown[]): number {
+
+    return (+value) * 100;
+  }
+
+}
diff --git a/src/app/share/services/bar.service.ts b/src/app/share/services/bar.service.ts
index 59a0c0a9c27f9f1a9b05b34213009ec0e99d592c..1812bd12910e8667a7b4561d8bdffb1ec7887e89 100644
--- a/src/app/share/services/bar.service.ts
+++ b/src/app/share/services/bar.service.ts
@@ -1,6 +1,8 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+
+import { Menu } from '../models/menu.model';
 import { Bar } from '../models/bar.model';
 
 @Injectable({
@@ -13,5 +15,9 @@ export class BarService {
 	// authInterceptor add the token in the HTTP request
 	public getAll(): Observable<Bar[]> {
 		return this.http.get<Bar[]>('/api/v1/bars');
-	} 
+	}
+
+	public getMenu(barId: string): Observable<Menu> {
+		return this.http.get<Menu>(`/api/v1/menu/${barId}`)
+	}
 }
diff --git a/src/app/share/store/actions/bar.actions.ts b/src/app/share/store/actions/bar.actions.ts
index 91ac24d702a973b0dbc2bf77c406964849366ab4..1c4863cbdbc0df6d5d019588696a45fc49a9adb0 100644
--- a/src/app/share/store/actions/bar.actions.ts
+++ b/src/app/share/store/actions/bar.actions.ts
@@ -1,10 +1,14 @@
 import { Action } from "@ngrx/store";
 import { Bar } from "../../models/bar.model";
+import { Menu } from "../../models/menu.model";
 
 export enum BarActionsTypes {
 	FETCH_BARS = '[bars/api] fetch all bars',
 	FETCH_BARS_SUCCESS = '[bars/api] fetch bars success',
-	FETCH_BARS_FAILED = '[bars/api] fetch bars failed'
+	FETCH_BARS_FAILED = '[bars/api] fetch bars failed',
+	FETCH_BAR_MENU = '[bars/menu/api] fetch bar menu',
+	FETCH_BAR_MENU_SUCCESS = '[bar/menu/api] fetch bar menu success',
+	FETCH_BAR_MENU_FAILED = '[bars/menu/api] fetch bar menu failed',
 }
 
 export class FetchBars implements Action {
@@ -21,4 +25,24 @@ export class FetchBarsFailed implements Action {
 	constructor(public payload: string) {}
 }
 
-export type BarsActions = FetchBars | FetchBarsSuccess | FetchBarsFailed;
\ No newline at end of file
+export class FetchBarMenu implements Action {
+	readonly type = BarActionsTypes.FETCH_BAR_MENU;
+	constructor(public payload: string) {}
+}
+
+export class FetchBarMenuSuccess implements Action {
+	readonly type = BarActionsTypes.FETCH_BAR_MENU_SUCCESS;
+	constructor(public payload: Menu) {}
+}
+
+export class FetchBarMenuFailed implements Action {
+	readonly type = BarActionsTypes.FETCH_BAR_MENU_FAILED;
+	constructor(public payload: string) {}
+}
+
+export type BarsActions = FetchBars |
+ 	FetchBarsSuccess |
+ 	FetchBarsFailed |
+	FetchBarMenu | 
+	FetchBarMenuSuccess | 
+	FetchBarMenuFailed;
\ No newline at end of file
diff --git a/src/app/share/store/effects/bar.effects.ts b/src/app/share/store/effects/bar.effects.ts
index 634e67047b5e7892e0c78418ec3f48777e9e1dfd..0bb5c0ffc34b29739d8175332fc7b0fa38066c5e 100644
--- a/src/app/share/store/effects/bar.effects.ts
+++ b/src/app/share/store/effects/bar.effects.ts
@@ -1,17 +1,22 @@
 import { Actions, createEffect, ofType } from "@ngrx/effects";
 import { Injectable } from "@angular/core";
-import { catchError, map, mergeMap } from "rxjs/operators";
+import { catchError, map, mergeMap, withLatestFrom } from "rxjs/operators";
 import { EMPTY, of } from "rxjs";
 
-import { BarActionsTypes, FetchBarsFailed, FetchBarsSuccess } from "../actions/bar.actions";
+import { BarActionsTypes, FetchBarMenuFailed, FetchBarMenuSuccess, FetchBarsFailed, FetchBarsSuccess } from "../actions/bar.actions";
 import { BarService } from "../../services/bar.service";
 import { Bar } from "../../models/bar.model";
+import { Menu } from "../../models/menu.model";
+import { Store } from "@ngrx/store";
+import { State } from "..";
+import { currentBarIdSelector } from "../selectors/bar.selectors";
 
 @Injectable()
 export class BarEffects {
 	constructor(
 		private actions$: Actions,
-		private barService: BarService
+		private barService: BarService,
+		private store: Store<State>
 	) {}
 
 	loadBars$ = createEffect(() => this.actions$.pipe(
@@ -22,4 +27,14 @@ export class BarEffects {
 				catchError(() => of(new FetchBarsFailed('failed fetching all bars')))
 			))
 	));
+
+	loadMenu$ = createEffect(() => this.actions$.pipe(
+		ofType(BarActionsTypes.FETCH_BAR_MENU),
+		withLatestFrom(this.store.select(currentBarIdSelector)),
+		mergeMap(([_, barId]) => this.barService.getMenu(barId)
+			.pipe(
+				map((menu: Menu) => (new FetchBarMenuSuccess(menu))),
+				catchError(() => of(new FetchBarMenuFailed(`failed fetch bar's menu`)))
+			))
+	));
 }
\ No newline at end of file
diff --git a/src/app/share/store/reducers/bar.reducers.ts b/src/app/share/store/reducers/bar.reducers.ts
index fe643afdb904aea43c5ec93f08767afd1dba5f49..1d399dfb5423e46625e328aa02921470e87637e1 100644
--- a/src/app/share/store/reducers/bar.reducers.ts
+++ b/src/app/share/store/reducers/bar.reducers.ts
@@ -1,21 +1,31 @@
 import { Bar } from "../../models/bar.model";
+import { Menu } from "../../models/menu.model";
 import { BarsActions, BarActionsTypes } from "../actions/bar.actions";
 
 export interface BarState {
 	bars: Bar[];
-	currentBar: Bar;
+	currentMenu: Menu;
+	currentBarId: string;
 	error: string;
 }
 
 const defaultBarState = {
 	bars: [],
-	currentBar: null,
+	currentMenu: null,
+	currentBarId: '',
 	error: '',
 }
 
 export function barReducer(state: BarState = defaultBarState, action: BarsActions): BarState {
 	switch (action.type) {
 
+		case BarActionsTypes.FETCH_BAR_MENU: {
+			return {
+				...state,
+				currentBarId: action.payload
+			};
+		}
+
 		case BarActionsTypes.FETCH_BARS_SUCCESS: {
 			return {
 				...state,
@@ -23,6 +33,14 @@ export function barReducer(state: BarState = defaultBarState, action: BarsAction
 			};
 		}
 
+		case BarActionsTypes.FETCH_BAR_MENU_SUCCESS: {
+			return {
+				...state,
+				currentMenu: action.payload
+			};
+		}
+
+		case BarActionsTypes.FETCH_BAR_MENU_FAILED:
 		case BarActionsTypes.FETCH_BARS_FAILED: {
 			return {
 				...state,
diff --git a/src/app/share/store/selectors/bar.selectors.ts b/src/app/share/store/selectors/bar.selectors.ts
index e4f7a626459aa476ee0cb4c7795cf161f87f20f9..be1d0a1d69f8cba4c2230d2d23a06cf1b455bba1 100644
--- a/src/app/share/store/selectors/bar.selectors.ts
+++ b/src/app/share/store/selectors/bar.selectors.ts
@@ -5,4 +5,6 @@ export const baseSelector = createFeatureSelector('bars');
 
 export const allBarsSelector = createSelector(baseSelector, (barState: BarState) => barState?.bars);
 
-export const currentBarSelector = createSelector(baseSelector, (barState: BarState) => barState?.currentBar);
\ No newline at end of file
+export const currentMenuSelector = createSelector(baseSelector, (barState: BarState) => barState?.currentMenu);
+
+export const currentBarIdSelector = createSelector(baseSelector, (barState: BarState) => barState?.currentBarId);
\ No newline at end of file