diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 12c7e255986f949e4228d227e1039e1a0f10d232..3f06fc673564c864c824de6f262ac2cabfe62815 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -24,9 +24,10 @@ import { environment } from 'src/environments/environment';
 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';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, DrinksComponent],
   imports: [
 		BrowserModule,
 		BrowserAnimationsModule,
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index c19269af79029ea223475624fa8b5bd95d2058fb..046f1fbef8e44544b9b50dfa012ab7a9dbf9023d 100644
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -1,5 +1,6 @@
 import { Route } from "@angular/router";
 import { BarsComponent } from "./components/bars/bars.component";
+import { DrinksComponent } from "./components/drinks/drinks.component";
 import { SigninComponent } from "./components/signin/signin.component";
 import { SignupComponent } from "./components/signup/signup.component";
 import { WelcomeComponent } from "./components/welcome/welcome.component";
@@ -11,6 +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: '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 01a41e2bd17a8dcab408ab3b5c07a760ab4256d7..0f6bc5a5d6906b707ee4437eb4b4ac55da3c3a3a 100644
--- a/src/app/components/bars/bars.component.html
+++ b/src/app/components/bars/bars.component.html
@@ -13,7 +13,7 @@
 			<div>{{ bar.address }}</div>
 		</div>
 		<div class="card-action">
-			<button mat-raised-button color='accent'>choisir</button>
+			<button mat-raised-button routerLink="/drinks" color='accent'>choisir</button>
 		</div>
 	</div>
 </section>
diff --git a/src/app/components/drinks/drinks.component.css b/src/app/components/drinks/drinks.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/drinks/drinks.component.html b/src/app/components/drinks/drinks.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..74be67f472c0aca37e06543ec3efb97c196c9f0e
--- /dev/null
+++ b/src/app/components/drinks/drinks.component.html
@@ -0,0 +1,7 @@
+<p>drinks works!</p>
+<div class="drink-card">
+	<div class="card-img">
+		
+
+	</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
new file mode 100644
index 0000000000000000000000000000000000000000..8679885ff0c6f380a122f1945349901c2cce7fed
--- /dev/null
+++ b/src/app/components/drinks/drinks.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-drinks',
+  templateUrl: './drinks.component.html',
+  styleUrls: ['./drinks.component.css']
+})
+export class DrinksComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/share/components/topbar/topbar.component.ts b/src/app/share/components/topbar/topbar.component.ts
index 65090091d86c7e9df60b021ee8dbdeac7b0e3299..a18e69e1a2ef39cff811e35401e4701889349d40 100644
--- a/src/app/share/components/topbar/topbar.component.ts
+++ b/src/app/share/components/topbar/topbar.component.ts
@@ -5,7 +5,6 @@ import { Observable } from 'rxjs';
 import { State } from '../../store';
 import { Logout } from '../../store/actions/auth.actions';
 import { isLoggedInAuthSelector } from '../../store/selectors/auth.selectors';
-import { FetchPhotos, SetFilter } from 'src/app/photos/shared/store/photos.actions';
 
 @Component({
   selector: 'app-topbar',