diff --git a/itenium-socks/src/app/home/latest-socks.component.html b/itenium-socks/src/app/home/latest-socks.component.html
index 9cd2eb7..84fbd83 100644
--- a/itenium-socks/src/app/home/latest-socks.component.html
+++ b/itenium-socks/src/app/home/latest-socks.component.html
@@ -7,20 +7,7 @@ <h2>
     </div>
     <div class="row">
       <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let sock of socks$ | async">
-        <div class="box">
-          <a href="/socks/{{ sock.id }}">
-            <div class="img-box">
-              <img src="sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" />
-            </div>
-            <div class="detail-box">
-              <h6>{{ sock.name }}</h6>
-              <h6><span>{{ sock.price }}</span></h6>
-            </div>
-            <div class="new">
-              <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>
-            </div>
-          </a>
-        </div>
+        <app-sock-card [sock]="sock"></app-sock-card>
       </div>
     </div>
     <div class="btn-box">
diff --git a/itenium-socks/src/app/home/latest-socks.component.ts b/itenium-socks/src/app/home/latest-socks.component.ts
index 9b03950..feddd53 100644
--- a/itenium-socks/src/app/home/latest-socks.component.ts
+++ b/itenium-socks/src/app/home/latest-socks.component.ts
@@ -4,11 +4,12 @@ import { Observable } from 'rxjs';
 import { Sock } from '../socks/sock.model';
 import { AsyncPipe, NgFor } from '@angular/common';
 import { RouterLink } from '@angular/router';
+import { SockCardComponent } from '../socks/sock-card/sock-card.component';
 
 @Component({
   selector: 'app-latest-socks',
   standalone: true,
-  imports: [NgFor, AsyncPipe, RouterLink],
+  imports: [NgFor, AsyncPipe, RouterLink, SockCardComponent],
   templateUrl: './latest-socks.component.html'
 })
 export class LatestSocksComponent implements OnInit {
diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html
index a0139e2..0e11d93 100644
--- a/itenium-socks/src/app/socks/shop.component.html
+++ b/itenium-socks/src/app/socks/shop.component.html
@@ -7,20 +7,7 @@ <h2>
     </div>
     <div class="row">
       <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let sock of socks$ | async">
-        <div class="box">
-          <a href="/socks/{{ sock.id }}">
-            <div class="img-box">
-              <img src="sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" />
-            </div>
-            <div class="detail-box">
-              <h6>{{ sock.name }}</h6>
-              <h6><span>{{ sock.price }}</span></h6>
-            </div>
-            <div class="new">
-              <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>
-            </div>
-          </a>
-        </div>
+        <app-sock-card [sock]="sock"></app-sock-card>
       </div>
     </div>
   </div>
diff --git a/itenium-socks/src/app/socks/shop.component.ts b/itenium-socks/src/app/socks/shop.component.ts
index 33c897b..342d8fa 100644
--- a/itenium-socks/src/app/socks/shop.component.ts
+++ b/itenium-socks/src/app/socks/shop.component.ts
@@ -3,11 +3,12 @@ import { SocksService } from './socks.service';
 import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
 import { AsyncPipe, NgFor } from '@angular/common';
+import { SockCardComponent } from './sock-card/sock-card.component';
 
 @Component({
   selector: 'app-shop',
   standalone: true,
-  imports: [NgFor, AsyncPipe],
+  imports: [NgFor, AsyncPipe, SockCardComponent],
   templateUrl: './shop.component.html'
 })
 export class ShopComponent {
diff --git a/itenium-socks/src/app/socks/sock-card/sock-card.component.html b/itenium-socks/src/app/socks/sock-card/sock-card.component.html
new file mode 100644
index 0000000..6fecf85
--- /dev/null
+++ b/itenium-socks/src/app/socks/sock-card/sock-card.component.html
@@ -0,0 +1,14 @@
+<div class="box">
+  <a href="/socks/{{ sock.id }}">
+    <div class="img-box">
+      <img src="sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" />
+    </div>
+    <div class="detail-box">
+      <h6>{{ sock.name }}</h6>
+      <h6><span>{{ sock.price }}</span></h6>
+    </div>
+    <div class="new">
+      <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>
+    </div>
+  </a>
+</div>
diff --git a/itenium-socks/src/app/socks/sock-card/sock-card.component.ts b/itenium-socks/src/app/socks/sock-card/sock-card.component.ts
new file mode 100644
index 0000000..3abe19a
--- /dev/null
+++ b/itenium-socks/src/app/socks/sock-card/sock-card.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { Sock } from '../sock.model';
+
+@Component({
+  selector: 'app-sock-card',
+  standalone: true,
+  imports: [],
+  templateUrl: './sock-card.component.html'
+})
+export class SockCardComponent {
+  @Input() sock!: Sock;
+}
diff --git a/itenium-socks/src/app/socks/sock.component.html b/itenium-socks/src/app/socks/sock.component.html
index b40f9d2..3b638c0 100644
--- a/itenium-socks/src/app/socks/sock.component.html
+++ b/itenium-socks/src/app/socks/sock.component.html
@@ -17,18 +17,7 @@
   <div class="container">
     <div class="row">
       <div class="col-sm-6 col-md-6 col-lg-6">
-        <div class="box">
-          <div class="img-box">
-            <img src="/sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" />
-          </div>
-          <div class="detail-box">
-            <h6>{{ sock.name }}</h6>
-            <h6><span>€</span><span>{{ sock.price }}</span></h6>
-          </div>
-          <div class="new">
-            <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>
-          </div>
-        </div>
+        <app-sock-card [sock]="sock"></app-sock-card>
       </div>
       <div class="col-sm-6 col-md-6 col-lg-6">
         <h1 style="margin-top: 25px;">{{ sock.name }}</h1>
diff --git a/itenium-socks/src/app/socks/sock.component.ts b/itenium-socks/src/app/socks/sock.component.ts
index 1618e41..88fd01d 100644
--- a/itenium-socks/src/app/socks/sock.component.ts
+++ b/itenium-socks/src/app/socks/sock.component.ts
@@ -3,11 +3,12 @@ import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
 import { SocksService } from './socks.service';
 import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
+import { SockCardComponent } from './sock-card/sock-card.component';
 
 @Component({
   selector: 'app-sock',
   standalone: true,
-  imports: [NgIf, AsyncPipe, TitleCasePipe],
+  imports: [NgIf, AsyncPipe, TitleCasePipe, SockCardComponent],
   templateUrl: './sock.component.html'
 })
 export class SockComponent {