diff --git a/itenium-socks/src/app/socks/sock-reviews.component.html b/itenium-socks/src/app/socks/sock-reviews.component.html
index 696aab3..40de199 100644
--- a/itenium-socks/src/app/socks/sock-reviews.component.html
+++ b/itenium-socks/src/app/socks/sock-reviews.component.html
@@ -1,3 +1,12 @@
+@if ((reviews$ | async)?.length === 0){
+  <div class="container">
+    <div class="heading_container heading_center">
+      <h3>
+        Be the first to review these fantastic socks!
+      </h3>
+    </div>
+  </div>
+} @else {
 <section class="client_section layout_padding" style="padding-top: 0">
   <div class="container">
     <div class="heading_container heading_center">
@@ -40,3 +49,4 @@ <h6>On {{ review.added }} by {{ review.email }}</h6>
     </div>
   </div>
 </section>
+}
diff --git a/itenium-socks/src/app/socks/sock-reviews.component.ts b/itenium-socks/src/app/socks/sock-reviews.component.ts
index fe89cb9..5380823 100644
--- a/itenium-socks/src/app/socks/sock-reviews.component.ts
+++ b/itenium-socks/src/app/socks/sock-reviews.component.ts
@@ -1,5 +1,5 @@
 import { AsyncPipe, NgFor } from '@angular/common';
-import { Component } from '@angular/core';
+import {Component, Input} from '@angular/core';
 import { Observable } from 'rxjs';
 import { SocksService } from './socks.service';
 import { Review } from './sock.model';
@@ -11,11 +11,16 @@ import { Review } from './sock.model';
   templateUrl: './sock-reviews.component.html'
 })
 export class SockReviewsComponent {
+  @Input() sockId!: number | undefined;
   reviews$!: Observable<Review[]>;
 
   constructor(private socksService: SocksService) {}
 
   ngOnInit(): void {
-    this.reviews$ = this.socksService.getLatestReviews();
+    if(this.sockId){
+      this.reviews$ = this.socksService.getSockReviews(this.sockId);
+    } else {
+      this.reviews$ = this.socksService.getLatestReviews();
+    }
   }
 }
diff --git a/itenium-socks/src/app/socks/sock.component.html b/itenium-socks/src/app/socks/sock.component.html
index b40f9d2..aaf704d 100644
--- a/itenium-socks/src/app/socks/sock.component.html
+++ b/itenium-socks/src/app/socks/sock.component.html
@@ -47,7 +47,7 @@ <h1 style="margin-top: 25px;">{{ sock.name }}</h1>
   </div>
 </section>
 
-
+<app-sock-reviews [sockId]="this.sockId"></app-sock-reviews>
 
 <section class="contact_section" style="margin-bottom: 36px">
   <div class="container px-0">
diff --git a/itenium-socks/src/app/socks/sock.component.ts b/itenium-socks/src/app/socks/sock.component.ts
index 1618e41..5b63714 100644
--- a/itenium-socks/src/app/socks/sock.component.ts
+++ b/itenium-socks/src/app/socks/sock.component.ts
@@ -3,22 +3,24 @@ import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
 import { SocksService } from './socks.service';
 import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
+import { SockReviewsComponent } from "./sock-reviews.component";
 
 @Component({
   selector: 'app-sock',
   standalone: true,
-  imports: [NgIf, AsyncPipe, TitleCasePipe],
+  imports: [NgIf, AsyncPipe, TitleCasePipe, SockReviewsComponent],
   templateUrl: './sock.component.html'
 })
 export class SockComponent {
   sock$!: Observable<Sock>;
+  sockId: number | undefined;
 
   constructor(private socksService: SocksService) {}
 
   ngOnInit(): void {
     // HACK: This is not the way to get the sockId!!
-    const sockId = +window.location.pathname.split('/')[2];
-    this.sock$ = this.socksService.getById(sockId);
+    this.sockId = +window.location.pathname.split('/')[2];
+    this.sock$ = this.socksService.getById(this.sockId);
   }
 
   buy(): void {