diff --git a/itenium-socks/src/app/sock-card/sock-card.component.html b/itenium-socks/src/app/sock-card/sock-card.component.html
new file mode 100644
index 0000000..51c5908
--- /dev/null
+++ b/itenium-socks/src/app/sock-card/sock-card.component.html
@@ -0,0 +1,14 @@
+<div class="box">
+  <a [routerLink]="['/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/sock-card/sock-card.component.ts b/itenium-socks/src/app/sock-card/sock-card.component.ts
new file mode 100644
index 0000000..7b79ebf
--- /dev/null
+++ b/itenium-socks/src/app/sock-card/sock-card.component.ts
@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+import { Sock } from '../socks/sock.model'; // adjust the import path to your Sock model
+import {RouterLink} from '@angular/router'; // new import
+
+@Component({
+  selector: 'app-sock-card',
+  standalone: true,
+  imports: [
+    RouterLink
+  ],
+  templateUrl: './sock-card.component.html',
+  styleUrl: './sock-card.component.scss'
+})
+export class SockCardComponent {
+  @Input() sock!: Sock;
+}
diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html
index a0139e2..aef0839 100644
--- a/itenium-socks/src/app/socks/shop.component.html
+++ b/itenium-socks/src/app/socks/shop.component.html
@@ -5,22 +5,9 @@ <h2>
         Our Socks
       </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>
+      <div class="row">
+        <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let sock of socks$ | async">
+          <app-sock-card [sock]="sock"></app-sock-card>
       </div>
     </div>
   </div>
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>