diff --git a/itenium-socks/package-lock.json b/itenium-socks/package-lock.json
index 295c374..98a0b86 100644
--- a/itenium-socks/package-lock.json
+++ b/itenium-socks/package-lock.json
@@ -26,6 +26,7 @@
         "@angular-devkit/build-angular": "^18.0.1",
         "@angular/cli": "^18.0.1",
         "@angular/compiler-cli": "^18.0.0",
+        "@angular/localize": "^18.0.0",
         "@types/jasmine": "~5.1.0",
         "jasmine-core": "~5.1.0",
         "karma": "~6.4.0",
@@ -512,6 +513,79 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/localize": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-18.0.0.tgz",
+      "integrity": "sha512-DW3wB5Cj0a+Ph5SppddRcXTH6igX+W5x7wK+VDsLefiAC2cHRG4DjEL2mpoVYrkDUPNQRaf+X4GTEKHtTzjvNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "7.24.4",
+        "@types/babel__core": "7.20.5",
+        "fast-glob": "3.3.2",
+        "yargs": "^17.2.1"
+      },
+      "bin": {
+        "localize-extract": "tools/bundles/src/extract/cli.js",
+        "localize-migrate": "tools/bundles/src/migrate/cli.js",
+        "localize-translate": "tools/bundles/src/translate/cli.js"
+      },
+      "engines": {
+        "node": "^18.13.0 || >=20.9.0"
+      },
+      "peerDependencies": {
+        "@angular/compiler": "18.0.0",
+        "@angular/compiler-cli": "18.0.0"
+      }
+    },
+    "node_modules/@angular/localize/node_modules/@babel/core": {
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.4.tgz",
+      "integrity": "sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.24.2",
+        "@babel/generator": "^7.24.4",
+        "@babel/helper-compilation-targets": "^7.23.6",
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helpers": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.1",
+        "@babel/types": "^7.24.0",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@angular/localize/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@angular/localize/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "18.0.0",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.0.0.tgz",
@@ -3959,6 +4033,51 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
+      "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.5",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
diff --git a/itenium-socks/package.json b/itenium-socks/package.json
index 6b3a9d6..b020135 100644
--- a/itenium-socks/package.json
+++ b/itenium-socks/package.json
@@ -28,6 +28,7 @@
     "@angular-devkit/build-angular": "^18.0.1",
     "@angular/cli": "^18.0.1",
     "@angular/compiler-cli": "^18.0.0",
+    "@angular/localize": "^18.0.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
diff --git a/itenium-socks/src/app/admin/socks-admin.component.html b/itenium-socks/src/app/admin/socks-admin.component.html
index 53e0d8b..f674364 100644
--- a/itenium-socks/src/app/admin/socks-admin.component.html
+++ b/itenium-socks/src/app/admin/socks-admin.component.html
@@ -22,7 +22,7 @@ <h2>
         <th scope="row">{{ sock.name }}</th>
         <td>{{ sock.variant | titlecase }}</td>
         <td [style.color]="sock.color">{{ sock.color }}</td>
-        <td style="text-align: right;">{{ sock.price | currency }}</td>
+        <td style="text-align: right;">{{ sock.price | currency:'EUR':'symbol':'.2':'nl-BE' }}</td>
         <td>{{ sock.inventory }}</td>
         <td>
           <i class="fa fa-trash" (click)="deleteSock(sock.id)"></i>
diff --git a/itenium-socks/src/app/home/latest-socks.component.html b/itenium-socks/src/app/home/latest-socks.component.html
index 9cd2eb7..c2458bc 100644
--- a/itenium-socks/src/app/home/latest-socks.component.html
+++ b/itenium-socks/src/app/home/latest-socks.component.html
@@ -6,22 +6,11 @@ <h2>
       </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>
+      @for (sock of socks$ | async; track sock.id) {
+      <div class="col-sm-6 col-md-4 col-lg-3">
+        <app-sock-card [sock]="sock"></app-sock-card>
       </div>
+      }
     </div>
     <div class="btn-box">
       <a routerLink="/socks">
@@ -29,4 +18,4 @@ <h6><span>{{ sock.price }}</span></h6>
       </a>
     </div>
   </div>
-</section>
+</section>
\ No newline at end of file
diff --git a/itenium-socks/src/app/home/latest-socks.component.ts b/itenium-socks/src/app/home/latest-socks.component.ts
index 9b03950..6297b4d 100644
--- a/itenium-socks/src/app/home/latest-socks.component.ts
+++ b/itenium-socks/src/app/home/latest-socks.component.ts
@@ -2,14 +2,15 @@ import { Component, OnInit } from '@angular/core';
 import { SocksService } from '../socks/socks.service';
 import { Observable } from 'rxjs';
 import { Sock } from '../socks/sock.model';
-import { AsyncPipe, NgFor } from '@angular/common';
+import { AsyncPipe } 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],
-  templateUrl: './latest-socks.component.html'
+    selector: 'app-latest-socks',
+    standalone: true,
+    imports: [AsyncPipe, RouterLink, SockCardComponent],
+    templateUrl: './latest-socks.component.html'
 })
 export class LatestSocksComponent implements OnInit {
   socks$!: Observable<Sock[]>;
diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html
index a0139e2..d78b310 100644
--- a/itenium-socks/src/app/socks/shop.component.html
+++ b/itenium-socks/src/app/socks/shop.component.html
@@ -6,22 +6,11 @@ <h2>
       </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>
+      @for (sock of socks$ | async; track sock.id) {
+      <div class="col-sm-6 col-md-4 col-lg-3">
+        <app-sock-card [sock]="sock"></app-sock-card>
       </div>
+      }
     </div>
   </div>
-</section>
+</section>
\ No newline at end of file
diff --git a/itenium-socks/src/app/socks/shop.component.ts b/itenium-socks/src/app/socks/shop.component.ts
index 33c897b..aad31d2 100644
--- a/itenium-socks/src/app/socks/shop.component.ts
+++ b/itenium-socks/src/app/socks/shop.component.ts
@@ -2,13 +2,14 @@ import { Component } from '@angular/core';
 import { SocksService } from './socks.service';
 import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
-import { AsyncPipe, NgFor } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
+import { SockCardComponent } from "./sock-card/sock-card.component";
 
 @Component({
-  selector: 'app-shop',
-  standalone: true,
-  imports: [NgFor, AsyncPipe],
-  templateUrl: './shop.component.html'
+    selector: 'app-shop',
+    standalone: true,
+    imports: [AsyncPipe, SockCardComponent],
+    templateUrl: './shop.component.html'
 })
 export class ShopComponent {
   socks$!: Observable<Sock[]>;
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..cb6e2f4
--- /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 | currency:'EUR':'symbol':'.2':'nl-BE' }}</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..42710cd
--- /dev/null
+++ b/itenium-socks/src/app/socks/sock-card/sock-card.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input} from '@angular/core';
+import {Sock} from '../sock.model';
+import {CurrencyPipe} from '@angular/common';
+
+@Component({
+  selector: 'app-sock-card',
+  standalone: true,
+  imports: [CurrencyPipe],
+  templateUrl: './sock-card.component.html'
+})
+export class SockCardComponent {
+  @Input({required:true}) 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..0d2ffde 100644
--- a/itenium-socks/src/app/socks/sock.component.ts
+++ b/itenium-socks/src/app/socks/sock.component.ts
@@ -3,12 +3,13 @@ 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],
-  templateUrl: './sock.component.html'
+    selector: 'app-sock',
+    standalone: true,
+    imports: [NgIf, AsyncPipe, TitleCasePipe, SockCardComponent],
+    templateUrl: './sock.component.html'
 })
 export class SockComponent {
   sock$!: Observable<Sock>;
diff --git a/itenium-socks/src/main.ts b/itenium-socks/src/main.ts
index 35b00f3..7d8d45a 100644
--- a/itenium-socks/src/main.ts
+++ b/itenium-socks/src/main.ts
@@ -1,6 +1,9 @@
+/// <reference types="@angular/localize" />
+
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import '@angular/common/locales/global/nl';
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));
diff --git a/itenium-socks/tsconfig.app.json b/itenium-socks/tsconfig.app.json
index 374cc9d..ec26f70 100644
--- a/itenium-socks/tsconfig.app.json
+++ b/itenium-socks/tsconfig.app.json
@@ -3,7 +3,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "@angular/localize"
+    ]
   },
   "files": [
     "src/main.ts"
diff --git a/itenium-socks/tsconfig.spec.json b/itenium-socks/tsconfig.spec.json
index be7e9da..c63b698 100644
--- a/itenium-socks/tsconfig.spec.json
+++ b/itenium-socks/tsconfig.spec.json
@@ -4,7 +4,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "jasmine",
+      "@angular/localize"
     ]
   },
   "include": [