diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..1348ba4
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:4200",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 19928aa..23d871d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -18,10 +18,12 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { HomeComponent } from './home/home.component';
 import { ProductComponent } from './product/product.component';
+import { ProductDetailComponent } from './product/product-detail.component';
 
 const appRoutes: Routes = [
   { path: 'home', component: HomeComponent },
   { path: 'product', component: ProductComponent },
+  { path: 'product/:id', component: ProductDetailComponent },
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];
diff --git a/src/app/product/product-detail.component.css b/src/app/product/product-detail.component.css
index e69de29..d0f30f7 100644
--- a/src/app/product/product-detail.component.css
+++ b/src/app/product/product-detail.component.css
@@ -0,0 +1,4 @@
+section {
+  width: 60%;
+  margin: 10px auto 0 auto;
+}
diff --git a/src/app/product/product-detail.component.html b/src/app/product/product-detail.component.html
index 1bbc2d4..ddff924 100644
--- a/src/app/product/product-detail.component.html
+++ b/src/app/product/product-detail.component.html
@@ -1,3 +1,3 @@
-<p>
-  product-detail works!
-</p>
+<section>
+  <h3>{{currentProduct.productName}}</h3>
+</section>
diff --git a/src/app/product/product-detail.component.ts b/src/app/product/product-detail.component.ts
index a5944a8..6ad398b 100644
--- a/src/app/product/product-detail.component.ts
+++ b/src/app/product/product-detail.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { ProductService } from '../product/product.service';
 
 @Component({
   selector: 'app-product-detail',
@@ -7,9 +10,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProductDetailComponent implements OnInit {
 
-  constructor() { }
+  currentProduct = {};
+
+  constructor(private productService: ProductService, private route: ActivatedRoute) { }
 
   ngOnInit() {
+    this.getProductDetails();
   }
 
+  getProductDetails(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    // console.log(id);
+    this.productService.getProduct(id).subscribe((res) => {
+      this.currentProduct = res;
+      console.log(this.currentProduct);
+    });
+  }
 }
diff --git a/src/app/product/product.component.html b/src/app/product/product.component.html
index 33f18c6..4c8a47c 100644
--- a/src/app/product/product.component.html
+++ b/src/app/product/product.component.html
@@ -1,4 +1,5 @@
 <section fxFlex=50 class="aligner">
-  <mat-card *ngFor="let product of products" (click)="getProductById(product._id)">
+  <mat-card *ngFor="let product of products" [routerLink]="['/product', product._id]" routerLinkActive="router-link-active">
     {{product.productName}}</mat-card>
 </section>
+
diff --git a/src/app/product/product.component.ts b/src/app/product/product.component.ts
index 07d55dc..6f56973 100644
--- a/src/app/product/product.component.ts
+++ b/src/app/product/product.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { RouterModule, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { ProductService } from '../product/product.service';
 import { Product } from './product';
 
@@ -24,8 +24,4 @@ export class ProductComponent implements OnInit {
     });
   }
 
-  getProductById(id: string): void {
-    this.productService.getProduct(id).subscribe(res => console.log(res));
-  }
-
 }
diff --git a/src/app/product/product.module.ts b/src/app/product/product.module.ts
index ac81e81..ac28fe3 100644
--- a/src/app/product/product.module.ts
+++ b/src/app/product/product.module.ts
@@ -5,8 +5,10 @@ import { RouterModule } from '@angular/router';
 import { MatTableModule } from '@angular/material/table';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatGridListModule } from '@angular/material/grid-list';
 
-import {ProductComponent} from '../product/product.component';
+import { ProductComponent } from '../product/product.component';
 import { ProductDetailComponent } from './product-detail.component';
 
 @NgModule({
@@ -15,7 +17,9 @@ import { ProductDetailComponent } from './product-detail.component';
     RouterModule,
     MatTableModule,
     MatCardModule,
-    MatButtonModule
+    MatButtonModule,
+    MatDividerModule,
+    MatGridListModule
   ],
   declarations: [
     ProductComponent,
diff --git a/src/app/product/product.service.ts b/src/app/product/product.service.ts
index 33a2747..8babff8 100644
--- a/src/app/product/product.service.ts
+++ b/src/app/product/product.service.ts
@@ -20,7 +20,7 @@ export class ProductService {
 
   getProduct(id: string): Observable<Product> {
     const url = `${this.__url}/products/${id}`;
-    console.log(url);
+    // console.log(url);
     return this.http.get<Product>(url);
   }
 }