diff --git a/client/src/app/core/section-header/section-header.component.html b/client/src/app/core/section-header/section-header.component.html
index 18e9c1f..e1ca757 100644
--- a/client/src/app/core/section-header/section-header.component.html
+++ b/client/src/app/core/section-header/section-header.component.html
@@ -1,12 +1,14 @@
-<section class="py-5" style="margin-top: 105px; background-color:#f5f5f5;">
-  <div class="container">
-    <div class="row d-flex align-item-center">
-      <div class="col-9">
-        <h1>Title Goes Here</h1>
-      </div>
-      <div class="col-3">
-          <xng-breadcrumb></xng-breadcrumb>
+<ng-container *ngIf="(breadcrumb$ | async) as breadcrumbs">
+  <section *ngIf="breadcrumbs.length > 0 && breadcrumbs[breadcrumbs.length-1].label !== 'Home'" class="py-5" style="margin-top: 105px; background-color:#f5f5f5;">
+    <div class="container">
+      <div class="row d-flex align-item-center">
+        <div class="col-9">
+          <h1>{{breadcrumbs.length > 0 && breadcrumbs[breadcrumbs.length-1].label | titlecase}}</h1>
+        </div>
+        <div class="col-3">
+            <xng-breadcrumb></xng-breadcrumb>
+        </div>
       </div>
     </div>
-  </div>
-</section>
+  </section>
+</ng-container>
diff --git a/client/src/app/core/section-header/section-header.component.ts b/client/src/app/core/section-header/section-header.component.ts
index 738118a..7c769d0 100644
--- a/client/src/app/core/section-header/section-header.component.ts
+++ b/client/src/app/core/section-header/section-header.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
 import { BreadcrumbService } from 'xng-breadcrumb';
 
 @Component({
@@ -7,11 +8,12 @@ import { BreadcrumbService } from 'xng-breadcrumb';
   styleUrls: ['./section-header.component.scss']
 })
 export class SectionHeaderComponent implements OnInit {
+  breadcrumb$: Observable<any[]>;
 
   constructor(private bcService: BreadcrumbService) { }
 
   ngOnInit(): void {
-    //this.bcService.breadcrumbs$.
+    this.breadcrumb$ = this.bcService.breadcrumbs$;
   }
 
 }
diff --git a/client/src/app/shop/product-item/product-item.component.html b/client/src/app/shop/product-item/product-item.component.html
index b1391b3..bf05c27 100644
--- a/client/src/app/shop/product-item/product-item.component.html
+++ b/client/src/app/shop/product-item/product-item.component.html
@@ -1,13 +1,13 @@
 <div class="card h-100 shadow-sm">
   <img src="{{product.pictureUrl}}" alt="{{product.name}}" class="img-fluid bg-light">
+  <div class="d-flex align-items-center justify-content-center hover-overlay">
+    <button type="button" class="btn btn-sm btn-primary fa fa-shopping-cart me-2"></button>
+    <button routerLink="/shop/{{product.id}}" type="button" class="btn btn-sm btn-primary">View</button>
+  </div>
   <div class="card-body d-flex flex-column">
     <a routerLink="/shop/{{product.id}}">
       <h6 class="text-uppercase">{{product.name}}</h6>
     </a>
     <span class="mb-2">{{product.price | currency}}</span>
-      <div class="btn-group mt-auto">
-        <button type="button" class="btn btn-sm btn-outline-secondary fa fa-shopping-cart me-2"></button>
-        <button routerLink="/shop/{{product.id}}" type="button" class="btn btn-sm btn-outline-secondary">View</button>
-      </div>
   </div>
 </div>
diff --git a/client/src/app/shop/product-item/product-item.component.scss b/client/src/app/shop/product-item/product-item.component.scss
index e69de29..6839850 100644
--- a/client/src/app/shop/product-item/product-item.component.scss
+++ b/client/src/app/shop/product-item/product-item.component.scss
@@ -0,0 +1,4 @@
+.btn {
+  width: 30%;
+  height: 40px;
+}