diff --git a/public/Kuh_isst_Burger_auf_dem_Mond.mp4 b/public/Kuh_isst_Burger_auf_dem_Mond.mp4
new file mode 100644
index 0000000..f32f3f7
Binary files /dev/null and b/public/Kuh_isst_Burger_auf_dem_Mond.mp4 differ
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index cb1270e..e75614a 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -4,8 +4,5 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideRouter(routes)
-  ]
+  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
 };
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 13ae707..4efb782 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,4 +1,8 @@
 import { Routes } from '@angular/router';
 import { Productspage } from './productspage/productspage';
+import { Productconfigpage } from './productconfigpage/productconfigpage';
 
-export const routes: Routes = [{ path: '', component: Productspage }];
+export const routes: Routes = [
+  { path: '', component: Productspage },
+  { path: 'product/:id', component: Productconfigpage },
+];
diff --git a/src/app/productconfigpage/productconfigpage.html b/src/app/productconfigpage/productconfigpage.html
index 45b5058..4548414 100644
--- a/src/app/productconfigpage/productconfigpage.html
+++ b/src/app/productconfigpage/productconfigpage.html
@@ -1 +1,6 @@
-<p>productconfigpage works!</p>
+<div class="main">
+    <img [src]="product?.img" alt="" srcset="">
+    <sdx-numeric-stepper [label]="product?.name" sr-hint="Number of products" max="10"
+        oninput="console.log('Value:', arguments[0].target.value)">
+    </sdx-numeric-stepper>
+</div>
\ No newline at end of file
diff --git a/src/app/productconfigpage/productconfigpage.ts b/src/app/productconfigpage/productconfigpage.ts
index 07ca136..bc6e6d9 100644
--- a/src/app/productconfigpage/productconfigpage.ts
+++ b/src/app/productconfigpage/productconfigpage.ts
@@ -1,11 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Products } from '../products.service';
 
 @Component({
   selector: 'app-productconfigpage',
   imports: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: './productconfigpage.html',
   styleUrl: './productconfigpage.scss',
 })
 export class Productconfigpage {
+  private selectedProduct = inject(ActivatedRoute);
+  productService = inject(Products);
 
+  productId = this.selectedProduct.snapshot.paramMap.get('id');
+  product = this.productService.getProductList().find((p) => p.id === Number(this.productId));
 }