diff --git a/src/app/product/product-detail.component.css b/src/app/product/product-detail.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/product/product-detail.component.html b/src/app/product/product-detail.component.html
new file mode 100644
index 0000000..1bbc2d4
--- /dev/null
+++ b/src/app/product/product-detail.component.html
@@ -0,0 +1,3 @@
+<p>
+  product-detail works!
+</p>
diff --git a/src/app/product/product-detail.component.ts b/src/app/product/product-detail.component.ts
new file mode 100644
index 0000000..a5944a8
--- /dev/null
+++ b/src/app/product/product-detail.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-product-detail',
+  templateUrl: './product-detail.component.html',
+  styleUrls: ['./product-detail.component.css']
+})
+export class ProductDetailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/product/product.component.css b/src/app/product/product.component.css
index ee1549a..3564b4e 100644
--- a/src/app/product/product.component.css
+++ b/src/app/product/product.component.css
@@ -2,3 +2,15 @@ table {
   width: 75%;
   margin: 20px auto 0 auto;
 }
+
+section>mat-card {
+  margin-top: 10px;
+  width: 50%;
+  margin: 10px auto;
+}
+
+mat-card:hover {
+  /* background: #02b3e4; */
+  border: 2px solid #02b3e4;
+  cursor: pointer;
+}
diff --git a/src/app/product/product.component.html b/src/app/product/product.component.html
index 9023065..33f18c6 100644
--- a/src/app/product/product.component.html
+++ b/src/app/product/product.component.html
@@ -1,3 +1,4 @@
 <section fxFlex=50 class="aligner">
-  <mat-card *ngFor="let product of products">{{product.productName}}</mat-card>
+  <mat-card *ngFor="let product of products" (click)="getProductById(product._id)">
+    {{product.productName}}</mat-card>
 </section>
diff --git a/src/app/product/product.component.ts b/src/app/product/product.component.ts
index 005d9c4..07d55dc 100644
--- a/src/app/product/product.component.ts
+++ b/src/app/product/product.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource, MatSort } from '@angular/material';
-import { DataSource } from '@angular/cdk/table';
+import { RouterModule, Router } from '@angular/router';
 import { ProductService } from '../product/product.service';
+import { Product } from './product';
 
 @Component({
   selector: 'app-product',
@@ -9,20 +9,23 @@ import { ProductService } from '../product/product.service';
   styleUrls: ['./product.component.css']
 })
 export class ProductComponent implements OnInit {
+  products: Product[];
 
-  products = [];
-  displayedColumns = ['productName', 'brand', 'category', 'price'];
-
-  constructor(private productService: ProductService) { }
+  constructor(private productService: ProductService, private router: Router) { }
 
   ngOnInit() {
     this.getAllProducts();
   }
 
   getAllProducts(): void {
-    this.productService.getProducts().subscribe((res: any[]) => {
+    this.productService.getProducts().subscribe((res) => {
       this.products = res;
       console.log(this.products);
     });
   }
+
+  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 dd6bb50..ac81e81 100644
--- a/src/app/product/product.module.ts
+++ b/src/app/product/product.module.ts
@@ -4,20 +4,22 @@ import { RouterModule } from '@angular/router';
 
 import { MatTableModule } from '@angular/material/table';
 import { MatCardModule } from '@angular/material/card';
-
-
+import { MatButtonModule } from '@angular/material/button';
 
 import {ProductComponent} from '../product/product.component';
+import { ProductDetailComponent } from './product-detail.component';
 
 @NgModule({
   imports: [
     CommonModule,
     RouterModule,
     MatTableModule,
-    MatCardModule
+    MatCardModule,
+    MatButtonModule
   ],
   declarations: [
-    ProductComponent
+    ProductComponent,
+    ProductDetailComponent
   ]
 })
 export class ProductModule { }
diff --git a/src/app/product/product.service.ts b/src/app/product/product.service.ts
index 52b4e44..33a2747 100644
--- a/src/app/product/product.service.ts
+++ b/src/app/product/product.service.ts
@@ -2,6 +2,8 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
+import { Product } from './product';
+
 @Injectable({
   providedIn: 'root'
 })
@@ -11,8 +13,14 @@ export class ProductService {
 
   constructor(private http: HttpClient) { }
 
-  getProducts(): Observable<any> {
-    this.__url += '/products';
-    return this.http.get(this.__url);
+  getProducts(): Observable<Product[]> {
+    const url = `${this.__url}/products`;
+    return this.http.get<Product[]>(url);
+  }
+
+  getProduct(id: string): Observable<Product> {
+    const url = `${this.__url}/products/${id}`;
+    console.log(url);
+    return this.http.get<Product>(url);
   }
 }
diff --git a/src/app/product/product.ts b/src/app/product/product.ts
new file mode 100644
index 0000000..b4bacc8
--- /dev/null
+++ b/src/app/product/product.ts
@@ -0,0 +1,16 @@
+export class Product {
+    id: string;
+    productName: string;
+    productCode: string;
+    category: string;
+    brand: string;
+    sku: string;
+    resolution: string;
+    type: string;
+    technology: string;
+    series: string;
+    description: string;
+    price: number;
+    discount: string;
+    imageUrl: string;
+}