diff --git a/Frontend/src/app/app.module.ts b/Frontend/src/app/app.module.ts
index ba1c06c..f1302d9 100644
--- a/Frontend/src/app/app.module.ts
+++ b/Frontend/src/app/app.module.ts
@@ -3,19 +3,19 @@ import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
-import {HelloWorldComponent} from './hello-world/hello-world.component';
-import {AppRoutingModule} from './app-routing.module';
+import {AppRouting} from './app.routing';
 import {ProductListComponent} from './product-list/product-list.component';
+import { LandingpageComponent } from './landingpage/landingpage.component';
 
 @NgModule({
     declarations: [
         AppComponent,
-        HelloWorldComponent,
-        ProductListComponent
+        ProductListComponent,
+        LandingpageComponent
     ],
     imports: [
         BrowserModule,
-        AppRoutingModule,
+        AppRouting,
         HttpClientModule
     ],
     providers: [],
diff --git a/Frontend/src/app/app-routing.module.ts b/Frontend/src/app/app.routing.ts
similarity index 70%
rename from Frontend/src/app/app-routing.module.ts
rename to Frontend/src/app/app.routing.ts
index 4978f7c..7b4312a 100644
--- a/Frontend/src/app/app-routing.module.ts
+++ b/Frontend/src/app/app.routing.ts
@@ -1,13 +1,12 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule, Routes} from '@angular/router';
-import {HelloWorldComponent} from './hello-world/hello-world.component';
 import {AppComponent} from './app.component';
 import {ProductListComponent} from './product-list/product-list.component';
+import {LandingpageComponent} from './landingpage/landingpage.component';
 
 const routes: Routes = [
-    {path: '', component: AppComponent},
-    {path: 'helloworld', component: HelloWorldComponent},
+    {path: '', component: LandingpageComponent},
     {path: 'pdp', component: ProductListComponent}
 ];
 
@@ -20,5 +19,5 @@ const routes: Routes = [
         RouterModule
     ]
 })
-export class AppRoutingModule {
+export class AppRouting {
 }
diff --git a/Frontend/src/app/hello-world/hello-world.component.html b/Frontend/src/app/hello-world/hello-world.component.html
deleted file mode 100644
index c18b9ab..0000000
--- a/Frontend/src/app/hello-world/hello-world.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<p>hello-world works! Title: </p>
-<a href="https://blog.betterzon.xyz">Blog</a>
diff --git a/Frontend/src/app/hello-world/hello-world.component.ts b/Frontend/src/app/hello-world/hello-world.component.ts
deleted file mode 100644
index e3dd2e1..0000000
--- a/Frontend/src/app/hello-world/hello-world.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-hello-world',
-  templateUrl: './hello-world.component.html',
-  styleUrls: ['./hello-world.component.css']
-})
-export class HelloWorldComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/Frontend/src/app/hello-world/hello-world.component.css b/Frontend/src/app/landingpage/landingpage.component.css
similarity index 100%
rename from Frontend/src/app/hello-world/hello-world.component.css
rename to Frontend/src/app/landingpage/landingpage.component.css
diff --git a/Frontend/src/app/landingpage/landingpage.component.html b/Frontend/src/app/landingpage/landingpage.component.html
new file mode 100644
index 0000000..8a7dfd1
--- /dev/null
+++ b/Frontend/src/app/landingpage/landingpage.component.html
@@ -0,0 +1 @@
+<app-product-list numberOfProducts="20" showProductPicture="true"></app-product-list>
diff --git a/Frontend/src/app/hello-world/hello-world.component.spec.ts b/Frontend/src/app/landingpage/landingpage.component.spec.ts
similarity index 53%
rename from Frontend/src/app/hello-world/hello-world.component.spec.ts
rename to Frontend/src/app/landingpage/landingpage.component.spec.ts
index 4eb044c..ca3c2a8 100644
--- a/Frontend/src/app/hello-world/hello-world.component.spec.ts
+++ b/Frontend/src/app/landingpage/landingpage.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HelloWorldComponent } from './hello-world.component';
+import { LandingpageComponent } from './landingpage.component';
 
-describe('HelloWorldComponent', () => {
-  let component: HelloWorldComponent;
-  let fixture: ComponentFixture<HelloWorldComponent>;
+describe('LandingpageComponent', () => {
+  let component: LandingpageComponent;
+  let fixture: ComponentFixture<LandingpageComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ HelloWorldComponent ]
+      declarations: [ LandingpageComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HelloWorldComponent);
+    fixture = TestBed.createComponent(LandingpageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/Frontend/src/app/landingpage/landingpage.component.ts b/Frontend/src/app/landingpage/landingpage.component.ts
new file mode 100644
index 0000000..ad70dcb
--- /dev/null
+++ b/Frontend/src/app/landingpage/landingpage.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-landingpage',
+  templateUrl: './landingpage.component.html',
+  styleUrls: ['./landingpage.component.css']
+})
+export class LandingpageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/Frontend/src/app/product-list/product-list.component.html b/Frontend/src/app/product-list/product-list.component.html
index 88971c8..13fef09 100644
--- a/Frontend/src/app/product-list/product-list.component.html
+++ b/Frontend/src/app/product-list/product-list.component.html
@@ -2,3 +2,6 @@
 <p class="productItem"  *ngFor="let product of products" (click)="clickedProduct(product)">
     {{product.name}}
 </p>
+<div *ngIf="showProductPicture">
+    Test
+</div>
diff --git a/Frontend/src/app/product-list/product-list.component.ts b/Frontend/src/app/product-list/product-list.component.ts
index a6c10ee..58e9100 100644
--- a/Frontend/src/app/product-list/product-list.component.ts
+++ b/Frontend/src/app/product-list/product-list.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {ApiService} from '../api.service';
 import {Product} from '../models/product';
-import { Router } from '@angular/router';
+import {Router} from '@angular/router';
 
 @Component({
     selector: 'app-product-list',
@@ -10,6 +10,8 @@ import { Router } from '@angular/router';
 })
 export class ProductListComponent implements OnInit {
     products: Product[];
+    @Input() numberOfProducts: number;
+    @Input() showProductPicture: boolean;
 
     constructor(
         private apiService: ApiService,
@@ -19,6 +21,13 @@ export class ProductListComponent implements OnInit {
 
     ngOnInit(): void {
         this.getProducts();
+
+        if (!this.numberOfProducts) {
+            this.numberOfProducts = 10;
+        }
+        if (!this.showProductPicture) {
+            this.showProductPicture = false;
+        }
     }
 
     getProducts(): void {