diff --git a/Frontend/src/app/app-routing.module.ts b/Frontend/src/app/app-routing.module.ts
new file mode 100644
index 0000000..4978f7c
--- /dev/null
+++ b/Frontend/src/app/app-routing.module.ts
@@ -0,0 +1,24 @@
+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';
+
+const routes: Routes = [
+    {path: '', component: AppComponent},
+    {path: 'helloworld', component: HelloWorldComponent},
+    {path: 'pdp', component: ProductListComponent}
+];
+
+@NgModule({
+    declarations: [],
+    imports: [
+        RouterModule.forRoot(routes)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+export class AppRoutingModule {
+}
diff --git a/Frontend/src/app/app.component.html b/Frontend/src/app/app.component.html
index 7939207..0680b43 100644
--- a/Frontend/src/app/app.component.html
+++ b/Frontend/src/app/app.component.html
@@ -1,2 +1 @@
-<app-hello-world></app-hello-world>
-<app-product-list-component></app-product-list-component>
+<router-outlet></router-outlet>
diff --git a/Frontend/src/app/app.module.ts b/Frontend/src/app/app.module.ts
index 3519c4d..79fa7bb 100644
--- a/Frontend/src/app/app.module.ts
+++ b/Frontend/src/app/app.module.ts
@@ -3,16 +3,18 @@ import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { HelloWorldComponent } from './hello-world/hello-world.component';
-import { ProductListComponentComponent } from './product-list-component/product-list-component.component';
+import { AppRoutingModule } from './app-routing.module';
+import { ProductListComponent } from './product-list/product-list.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HelloWorldComponent,
-    ProductListComponentComponent
+    ProductListComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/Frontend/src/app/product-list-component/product-list-component.component.spec.ts b/Frontend/src/app/product-list-component/product-list-component.component.spec.ts
deleted file mode 100644
index 444a138..0000000
--- a/Frontend/src/app/product-list-component/product-list-component.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProductListComponentComponent } from './product-list-component.component';
-
-describe('ProductListComponentComponent', () => {
-  let component: ProductListComponentComponent;
-  let fixture: ComponentFixture<ProductListComponentComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ProductListComponentComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ProductListComponentComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/Frontend/src/app/product-list-component/product-list-component.component.ts b/Frontend/src/app/product-list-component/product-list-component.component.ts
deleted file mode 100644
index f65242c..0000000
--- a/Frontend/src/app/product-list-component/product-list-component.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-
-@Component({
-    selector: 'app-product-list-component',
-    templateUrl: './product-list-component.component.html',
-    styleUrls: ['./product-list-component.component.css']
-})
-export class ProductListComponentComponent implements OnInit {
-    testList: string[];
-
-    constructor() {
-    }
-
-    ngOnInit(): void {
-        this.testList = ['Herbert', 'Sascha', 'Rolf'];
-    }
-
-    // async function getCrypto(query: object): Promise<object> {
-    //     const url = new URL('https://backend.betterzon.xyz');
-    //     const headers = {};
-    //     const response = await fetch(url.toString(), {headers});
-    //     return await response.json();
-    // };
-
-}
diff --git a/Frontend/src/app/product-list-component/product-list-component.component.css b/Frontend/src/app/product-list/product-list.component.css
similarity index 100%
rename from Frontend/src/app/product-list-component/product-list-component.component.css
rename to Frontend/src/app/product-list/product-list.component.css
diff --git a/Frontend/src/app/product-list-component/product-list-component.component.html b/Frontend/src/app/product-list/product-list.component.html
similarity index 100%
rename from Frontend/src/app/product-list-component/product-list-component.component.html
rename to Frontend/src/app/product-list/product-list.component.html
diff --git a/Frontend/src/app/product-list/product-list.component.spec.ts b/Frontend/src/app/product-list/product-list.component.spec.ts
new file mode 100644
index 0000000..8963547
--- /dev/null
+++ b/Frontend/src/app/product-list/product-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductListComponent } from './product-list.component';
+
+describe('ProductListComponent', () => {
+  let component: ProductListComponent;
+  let fixture: ComponentFixture<ProductListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProductListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Frontend/src/app/product-list/product-list.component.ts b/Frontend/src/app/product-list/product-list.component.ts
new file mode 100644
index 0000000..d3cff64
--- /dev/null
+++ b/Frontend/src/app/product-list/product-list.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-product-list',
+  templateUrl: './product-list.component.html',
+  styleUrls: ['./product-list.component.css']
+})
+export class ProductListComponent implements OnInit {
+    testList: string[];
+
+    constructor() {
+    }
+
+    ngOnInit(): void {
+        this.testList = ['Herbert', 'Sascha', 'Rolf'];
+    }
+
+}