diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index dbfa6bd..cd7a74e 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -4,17 +4,27 @@ import { MainpageComponent } from './components/pages/mainpage/mainpage.componen
 import { AuthenticationpageComponent } from './components/pages/authenticationpage/authenticationpage.component';
 import { LoginformComponent } from './components/organisms/loginform/loginform.component';
 import { SignupformComponent } from './components/organisms/signupform/signupform.component';
+import { LandingpageComponent } from './components/pages/landingpage/landingpage.component';
+import { FriendpageComponent } from './components/pages/friendpage/friendpage.component';
 
 const routes: Routes = [
-  {path:"main", component: MainpageComponent},
-  {path:"auth", component : AuthenticationpageComponent, children : [
-    {path: "signup", component: SignupformComponent},
-    {path: "login", component: LoginformComponent}
-  ]}
-];
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', component: LandingpageComponent },
+  { path: 'main', component: MainpageComponent },
+  {
+    path: 'auth',
+    component: AuthenticationpageComponent,
+    children: [
+      { path: 'signup', component: SignupformComponent },
+      { path: 'login', component: LoginformComponent },
+    ],
+  },
+  {path: 'friends', component: FriendpageComponent},
+  { path: '**', redirectTo: '/home' },
+
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index b1aee0a..ad89891 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,3 +1,3 @@
 <router-outlet></router-outlet>
 
-<app-toast></app-toast>
+<app-toast></app-toast>
\ No newline at end of file
diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts
index 4b69620..a1d7283 100644
--- a/frontend/src/app/app.component.spec.ts
+++ b/frontend/src/app/app.component.spec.ts
@@ -5,12 +5,8 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
     }).compileComponents();
   });
 
@@ -30,6 +26,8 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, frontend');
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      'Hello, frontend'
+    );
   });
 });
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 88596c6..eb2f79a 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -19,6 +19,9 @@ import { LoginformComponent } from './components/organisms/loginform/loginform.c
 import { InputfieldComponent } from './components/atoms/inputfield/inputfield.component';
 import { SignupformComponent } from './components/organisms/signupform/signupform.component';
 import { LoaderComponent } from './components/atoms/loader/loader.component';
+import { LandingpageComponent } from './components/pages/landingpage/landingpage.component';
+import { FriendpageComponent } from './components/pages/friendpage/friendpage.component';
+
 
 @NgModule({
   declarations: [
@@ -37,6 +40,9 @@ import { LoaderComponent } from './components/atoms/loader/loader.component';
     InputfieldComponent,
     SignupformComponent,
     LoaderComponent,
+    LandingpageComponent,
+    FriendpageComponent,
+
   ],
   imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule],
   providers: [provideAnimations()],
diff --git a/frontend/src/app/components/atoms/challenge-button/challenge-button.component.html b/frontend/src/app/components/atoms/challenge-button/challenge-button.component.html
index d6cbbdf..b1fa316 100644
--- a/frontend/src/app/components/atoms/challenge-button/challenge-button.component.html
+++ b/frontend/src/app/components/atoms/challenge-button/challenge-button.component.html
@@ -8,7 +8,7 @@
 </button>
 
 <app-challenge-dialog
-  [trigger] = "buttonIsclicked"
+  [trigger]="buttonIsclicked"
   [num]="num"
   [steps]="steps"
   [time]="time"
diff --git a/frontend/src/app/components/atoms/challenge-button/challenge-button.component.ts b/frontend/src/app/components/atoms/challenge-button/challenge-button.component.ts
index f98e05c..bf5b101 100644
--- a/frontend/src/app/components/atoms/challenge-button/challenge-button.component.ts
+++ b/frontend/src/app/components/atoms/challenge-button/challenge-button.component.ts
@@ -1,12 +1,10 @@
-import { Component, Input, Output, EventEmitter} from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { EventService } from 'app/services/event.service';
 
-
 @Component({
   selector: 'app-challenge-button',
   templateUrl: './challenge-button.component.html',
   styleUrl: './challenge-button.component.scss',
-  
 })
 export class ChallengeButtonComponent {
   @Input() num: number = 1;
@@ -14,11 +12,9 @@ export class ChallengeButtonComponent {
   @Input() time: number = 0;
   @Output() toggleStopButton = new EventEmitter<void>();
   buttonIsclicked: boolean = false;
-  
-  
-  constructor(public eventService:EventService)
-  {
-      this.eventService = eventService;
+
+  constructor(public eventService: EventService) {
+    this.eventService = eventService;
   }
 
   challengeButtonIsClicked() {
diff --git a/frontend/src/app/components/atoms/inputfield/inputfield.component.html b/frontend/src/app/components/atoms/inputfield/inputfield.component.html
index ac5eb98..370a696 100644
--- a/frontend/src/app/components/atoms/inputfield/inputfield.component.html
+++ b/frontend/src/app/components/atoms/inputfield/inputfield.component.html
@@ -1,2 +1,3 @@
 
-    <input class="input" type="{{typetext}}" placeholder="{{ placeholder }}" >
\ No newline at end of file
+<input class="input" type="{{ typetext }}" placeholder="{{ placeholder }}" />
+
diff --git a/frontend/src/app/components/atoms/inputfield/inputfield.component.scss b/frontend/src/app/components/atoms/inputfield/inputfield.component.scss
index 1772d31..68fa0af 100644
--- a/frontend/src/app/components/atoms/inputfield/inputfield.component.scss
+++ b/frontend/src/app/components/atoms/inputfield/inputfield.component.scss
@@ -1,19 +1,20 @@
 .input {
-    border: 0;
-    outline: none;
-    box-shadow: none;
-    display: block;
-    height: 30px;
-    line-height: 30px;
-    padding: 8px 15px;
-    border-bottom: 1px solid #eee;
-    width: 80%;
-    font-size: 12px;
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  display: block;
+  height: 30px;
+  line-height: 30px;
+  padding: 8px 15px;
+  border-bottom: 1px solid #eee;
+  width: 80%;
+  font-size: 12px;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+  &::-webkit-input-placeholder {
+    color: rgba(0, 0, 0, 0.4);
+  }
+}
 
-    &:last-child {
-        border-bottom: 0;
-    }
-    &::-webkit-input-placeholder {
-        color: rgba(0,0,0,0.4);
-    }
-}
\ No newline at end of file
diff --git a/frontend/src/app/components/atoms/inputfield/inputfield.component.spec.ts b/frontend/src/app/components/atoms/inputfield/inputfield.component.spec.ts
index 511e088..7f61758 100644
--- a/frontend/src/app/components/atoms/inputfield/inputfield.component.spec.ts
+++ b/frontend/src/app/components/atoms/inputfield/inputfield.component.spec.ts
@@ -8,10 +8,9 @@ describe('InputfieldComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [InputfieldComponent]
-    })
-    .compileComponents();
-    
+      declarations: [InputfieldComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(InputfieldComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/frontend/src/app/components/atoms/inputfield/inputfield.component.ts b/frontend/src/app/components/atoms/inputfield/inputfield.component.ts
index 5246b24..ee25eca 100644
--- a/frontend/src/app/components/atoms/inputfield/inputfield.component.ts
+++ b/frontend/src/app/components/atoms/inputfield/inputfield.component.ts
@@ -3,12 +3,10 @@ import { Component, Input } from '@angular/core';
 @Component({
   selector: 'app-inputfield',
   templateUrl: './inputfield.component.html',
-  styleUrl: './inputfield.component.scss'
+  styleUrl: './inputfield.component.scss',
 })
 export class InputfieldComponent {
-  @Input() typetext: string = "Hallo";
-  @Input() placeholder: string = ""; 
-  @Input() labeltext:  string = ""; 
-
-
+  @Input() typetext: string = 'Hallo';
+  @Input() placeholder: string = '';
+  @Input() labeltext: string = '';
 }
diff --git a/frontend/src/app/components/atoms/loader/loader.component.html b/frontend/src/app/components/atoms/loader/loader.component.html
index ab61891..f2394e5 100644
--- a/frontend/src/app/components/atoms/loader/loader.component.html
+++ b/frontend/src/app/components/atoms/loader/loader.component.html
@@ -1 +1,2 @@
-<span class="loader"></span>
\ No newline at end of file
+
+<span class="loader"></span>
diff --git a/frontend/src/app/components/atoms/loader/loader.component.scss b/frontend/src/app/components/atoms/loader/loader.component.scss
index 3097992..4211f51 100644
--- a/frontend/src/app/components/atoms/loader/loader.component.scss
+++ b/frontend/src/app/components/atoms/loader/loader.component.scss
@@ -1,42 +1,51 @@
 .loader {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    display: block;
-    margin:15px auto;
-    position: relative;
-    color: #FFF;
-    left: -100px;
-    box-sizing: border-box;
-    animation: shadowRolling 2s linear infinite;
-  }
-  
-  @keyframes shadowRolling {
-    0% {
-      box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
-    }
-    12% {
-      box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
-    }
-    25% {
-      box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
-    }
-    36% {
-      box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
-    }
-    50% {
-      box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
-    }
-    62% {
-      box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
-    }
-    75% {
-      box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
-    }
-    87% {
-      box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
-    }
-    100% {
-      box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
-    }
-  }
\ No newline at end of file
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: #fff;
+  left: -100px;
+  box-sizing: border-box;
+  animation: shadowRolling 2s linear infinite;
+}
+
+@keyframes shadowRolling {
+  0% {
+    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  12% {
+    box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  25% {
+    box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0);
+  }
+  36% {
+    box-shadow: 120px 0 white, 110px 0 white, 100px 0 white,
+      0px 0 rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
+  }
+  62% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white,
+      110px 0 white;
+  }
+  75% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
+      130px 0 white, 120px 0 white;
+  }
+  87% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
+      200px 0 rgba(255, 255, 255, 0), 130px 0 white;
+  }
+  100% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
+      200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
+  }
+}
+
diff --git a/frontend/src/app/components/atoms/loader/loader.component.ts b/frontend/src/app/components/atoms/loader/loader.component.ts
index 27e2fcf..8cb81dc 100644
--- a/frontend/src/app/components/atoms/loader/loader.component.ts
+++ b/frontend/src/app/components/atoms/loader/loader.component.ts
@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-loader',
   templateUrl: './loader.component.html',
-  styleUrl: './loader.component.scss'
+  styleUrl: './loader.component.scss',
 })
-export class LoaderComponent {
-
-}
+export class LoaderComponent {}
diff --git a/frontend/src/app/components/atoms/stopbutton/stopbutton.component.scss b/frontend/src/app/components/atoms/stopbutton/stopbutton.component.scss
index c31b3d9..19b44ac 100644
--- a/frontend/src/app/components/atoms/stopbutton/stopbutton.component.scss
+++ b/frontend/src/app/components/atoms/stopbutton/stopbutton.component.scss
@@ -1,75 +1,74 @@
-
 .stopbutton {
-    appearance: button;
-    background-color: #f55959e5;
-    border: solid transparent;
-    border-radius: 16px;
-    border-width: 0 0 5px;
-    box-sizing: border-box;
-    color: var(--white);
-    cursor: pointer;
-    display: inline-block;
-    font-size: 12px;
-    font-weight: 700;
-    letter-spacing: 0.8px;
-    line-height: 20px;
-    margin: 0;
-    outline: none;
-    padding: 13px 13px;
-    text-align: center;
-    text-transform: uppercase;
-    touch-action: manipulation;
-    transform: translateZ(0);
-    transition: filter 0.2s;
-    user-select: none;
-    -webkit-user-select: none;
-    vertical-align: middle;
-    white-space: nowrap;
-    width: 20vw;
-    height: 5vh;
-    margin-top: 15px;
-    position: fixed;
-    top: 20vh; 
-    right: 0;
-    margin-right: 3vw;
-    padding: 2vw;
-  }
-  
-  .stopbutton:after {
-    background-clip: padding-box;
-    background-color: #ff4646;
-    border: solid transparent;
-    border-radius: 16px;
-    border-width: 0 0 4px;
-    bottom: -4px;
-    content: "";
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: -1;
-  }
-  
-  .stopbutton:main,
-  .stopbutton:focus {
-    user-select: auto;
-  }
-  
-  .stopbutton:hover:not(:disabled) {
-    filter: brightness(1.1);
-    -webkit-filter: brightness(1.1);
-  }
-  
-  .stopbutton:disabled {
-    cursor: auto;
-  }
-  
-  .stopbutton:active {
-    border-width: 4px 0 0;
-    background: none;
-  }
-  
-  #button-top {
-    font-weight: 100;
-    font-size: 10px;
-  }
\ No newline at end of file
+  appearance: button;
+  background-color: #f55959e5;
+  border: solid transparent;
+  border-radius: 16px;
+  border-width: 0 0 5px;
+  box-sizing: border-box;
+  color: var(--white);
+  cursor: pointer;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  line-height: 20px;
+  margin: 0;
+  outline: none;
+  padding: 13px 13px;
+  text-align: center;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  transform: translateZ(0);
+  transition: filter 0.2s;
+  user-select: none;
+  -webkit-user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 20vw;
+  height: 5vh;
+  margin-top: 15px;
+  position: fixed;
+  top: 20vh;
+  right: 0;
+  margin-right: 3vw;
+  padding: 2vw;
+}
+
+.stopbutton:after {
+  background-clip: padding-box;
+  background-color: #ff4646;
+  border: solid transparent;
+  border-radius: 16px;
+  border-width: 0 0 4px;
+  bottom: -4px;
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+}
+
+.stopbutton:main,
+.stopbutton:focus {
+  user-select: auto;
+}
+
+.stopbutton:hover:not(:disabled) {
+  filter: brightness(1.1);
+  -webkit-filter: brightness(1.1);
+}
+
+.stopbutton:disabled {
+  cursor: auto;
+}
+
+.stopbutton:active {
+  border-width: 4px 0 0;
+  background: none;
+}
+
+#button-top {
+  font-weight: 100;
+  font-size: 10px;
+}
diff --git a/frontend/src/app/components/atoms/timer/timer.component.html b/frontend/src/app/components/atoms/timer/timer.component.html
index 105d6e3..cd0a465 100644
--- a/frontend/src/app/components/atoms/timer/timer.component.html
+++ b/frontend/src/app/components/atoms/timer/timer.component.html
@@ -1 +1 @@
-<h2>{{ eventService.time |timer}}</h2>
\ No newline at end of file
+<h2>{{ eventService.time | timer }}</h2>
diff --git a/frontend/src/app/components/atoms/timer/timer.component.scss b/frontend/src/app/components/atoms/timer/timer.component.scss
index 2502705..5fce922 100644
--- a/frontend/src/app/components/atoms/timer/timer.component.scss
+++ b/frontend/src/app/components/atoms/timer/timer.component.scss
@@ -1,5 +1,5 @@
-h2{
-    margin: 0;
-    margin-top: 10px;
-    font-size: 5vw;
-}
\ No newline at end of file
+h2 {
+  margin: 0;
+  margin-top: 10px;
+  font-size: 5vw;
+}
diff --git a/frontend/src/app/components/atoms/timer/timer.component.spec.ts b/frontend/src/app/components/atoms/timer/timer.component.spec.ts
index 590f05b..12cce71 100644
--- a/frontend/src/app/components/atoms/timer/timer.component.spec.ts
+++ b/frontend/src/app/components/atoms/timer/timer.component.spec.ts
@@ -8,10 +8,9 @@ describe('TimerComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [TimerComponent]
-    })
-    .compileComponents();
-    
+      declarations: [TimerComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(TimerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/frontend/src/app/components/atoms/timer/timer.component.ts b/frontend/src/app/components/atoms/timer/timer.component.ts
index 8269f0a..b61a84c 100644
--- a/frontend/src/app/components/atoms/timer/timer.component.ts
+++ b/frontend/src/app/components/atoms/timer/timer.component.ts
@@ -4,15 +4,10 @@ import { EventService } from 'app/services/event.service';
 @Component({
   selector: 'app-timer',
   templateUrl: './timer.component.html',
-  styleUrl: './timer.component.scss'
+  styleUrl: './timer.component.scss',
 })
 export class TimerComponent {
-
-  constructor(public eventService:EventService)
-  {
-      this.eventService = eventService; 
+  constructor(public eventService: EventService) {
+    this.eventService = eventService;
   }
-
-  
-
 }
diff --git a/frontend/src/app/components/atoms/toast/toast.component.html b/frontend/src/app/components/atoms/toast/toast.component.html
index b3f9654..e11ea85 100644
--- a/frontend/src/app/components/atoms/toast/toast.component.html
+++ b/frontend/src/app/components/atoms/toast/toast.component.html
@@ -1,2 +1,7 @@
-
-<div id="snackbar" [ngStyle]="{ 'background': eventservice.snackbarBackgroundColor}" class="{{eventservice.classNameToast}}">{{eventservice.snackbarText}}</div>
\ No newline at end of file
+<div
+  id="snackbar"
+  [ngStyle]="{ background: eventservice.snackbarBackgroundColor }"
+  class="{{ eventservice.classNameToast }}"
+>
+  {{ eventservice.snackbarText }}
+</div>
diff --git a/frontend/src/app/components/atoms/toast/toast.component.scss b/frontend/src/app/components/atoms/toast/toast.component.scss
index a7c506c..faaf38c 100644
--- a/frontend/src/app/components/atoms/toast/toast.component.scss
+++ b/frontend/src/app/components/atoms/toast/toast.component.scss
@@ -1,47 +1,68 @@
-
-  
 #snackbar {
-    visibility: hidden; /* Hidden by default. Visible on click */
-    min-width: 250px; /* Set a default minimum width */
-    margin-left: -140px; /* Divide value of min-width by 2 */
-    background-color: #67b402; /* Black background color */
-    color: #fff; /* White text color */
-    text-align: center; /* Centered text */
-    border-radius: 2px; /* Rounded borders */
-    padding: 16px; /* Padding */
-    position: fixed; /* Sit on top of the screen */
-    z-index: 1; /* Add a z-index if needed */
-    left: 50%; /* Center the snackbar */
-    bottom: 30px; /* 30px from the bottom */
+  visibility: hidden;
+  min-width: 250px;
+  margin-left: -140px;
+  background-color: #67b402;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+  padding: 16px;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  bottom: 30px;
 }
 
-/* Show the snackbar when clicking on a button (class added with JavaScript) */
 .show {
-    visibility: visible !important; /* Show the snackbar */
+  visibility: visible !important; /* Show the snackbar */
 
-/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
 However, delay the fade out process for 2.5 seconds */
-    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
-    animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
 }
 
 /* Animations to fade the snackbar in and out */
 @-webkit-keyframes fadein {
-    from {bottom: 0; opacity: 0;}
-    to {bottom: 30px; opacity: 1;}
+  from {
+    bottom: 0;
+    opacity: 0;
+  }
+  to {
+    bottom: 30px;
+    opacity: 1;
+  }
 }
 
 @keyframes fadein {
-    from {bottom: 0; opacity: 0;}
-    to {bottom: 30px; opacity: 1;}
+  from {
+    bottom: 0;
+    opacity: 0;
+  }
+  to {
+    bottom: 30px;
+    opacity: 1;
+  }
 }
 
 @-webkit-keyframes fadeout {
-    from {bottom: 30px; opacity: 1;}
-    to {bottom: 0; opacity: 0;}
+  from {
+    bottom: 30px;
+    opacity: 1;
+  }
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
 }
 
 @keyframes fadeout {
-    from {bottom: 30px; opacity: 1;}
-    to {bottom: 0; opacity: 0;}
-}
\ No newline at end of file
+  from {
+    bottom: 30px;
+    opacity: 1;
+  }
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
+}
diff --git a/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.html b/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.html
index 83a353c..a21c622 100644
--- a/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.html
+++ b/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.html
@@ -1,5 +1,5 @@
-<div class="main"     >
-  <div class="window"  [@openClose]=" trigger ? 'open' : 'closed'"   >
+<div class="main">
+  <div class="window" [@openClose]="trigger ? 'open' : 'closed'">
     <div class="square">&nbsp;</div>
     <div class="dialog-header">
       <h3>Training {{ num }}</h3>
@@ -17,10 +17,6 @@ <h3>Training {{ num }}</h3>
         <li>{{ points }}</li>
       </ul>
     </div>
-    <button class="start-button" (click)="startEvent()">
-      Start Training
-    </button>
+    <button class="start-button" (click)="startEvent()">Start Training</button>
   </div>
 </div>
-
-
diff --git a/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.scss b/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.scss
index 090dbea..1e9345d 100644
--- a/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.scss
+++ b/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.scss
@@ -5,7 +5,7 @@
   background-color: inherit;
   z-index: 2;
   left: 0;
-  height: auto; 
+  height: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/frontend/src/app/components/organisms/loginform/loginform.component.html b/frontend/src/app/components/organisms/loginform/loginform.component.html
index 22e4266..57a8f5d 100644
--- a/frontend/src/app/components/organisms/loginform/loginform.component.html
+++ b/frontend/src/app/components/organisms/loginform/loginform.component.html
@@ -1,20 +1,30 @@
 
-    <div class="login">
-     
-		<div class="center">
-			<h2 class="form-title" id="login">Login</h2>
-			<div class="form-holder">
-			    <app-inputfield [labeltext]="'Username'" [typetext]="'text'" [placeholder]="'Enter Username'"></app-inputfield>
-                <div class="password">
-                    <app-inputfield [labeltext]="'Password'" [typetext]=" passwordFieldType" [placeholder]="'Enter Password'"> </app-inputfield>
-                    <span class="eyeimg" (click)="toggleType()" ><img class="img" [src]="img"></span>
-                </div>
-			</div>
-          
-            <button (click)="login()" class="button">Login</button>
-            <p class="create-account">Don´t have an account? <a href="../auth/signup/">Sign on for free?</a></p>
-		</div>
-      
-       
-	</div>
+<div class="login">
+  <div class="center">
+    <h2 class="form-title" id="login">Login</h2>
+    <div class="form-holder">
+      <app-inputfield
+        [labeltext]="'Username'"
+        [typetext]="'text'"
+        [placeholder]="'Enter Username'"
+      ></app-inputfield>
+      <div class="password">
+        <app-inputfield
+          [labeltext]="'Password'"
+          [typetext]="passwordFieldType"
+          [placeholder]="'Enter Password'"
+        >
+        </app-inputfield>
+        <span class="eyeimg" (click)="toggleType()"
+          ><img class="img" [src]="img"
+        /></span>
+      </div>
+    </div>
+
+    <button (click)="login()" class="button">Login</button>
+    <p class="create-account">
+      Don´t have an account? <a href="../auth/signup/">Sign on for free?</a>
+    </p>
+  </div>
+</div>
 
diff --git a/frontend/src/app/components/organisms/loginform/loginform.component.scss b/frontend/src/app/components/organisms/loginform/loginform.component.scss
index 02764c2..630476a 100644
--- a/frontend/src/app/components/organisms/loginform/loginform.component.scss
+++ b/frontend/src/app/components/organisms/loginform/loginform.component.scss
@@ -35,7 +35,7 @@ p.create-account {
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     width: 65%;
-    z-index: 5;
+    z-index: 1;
     -webkit-transition: all 0.3s ease;
     background-color: var(--background-black);
     padding: 15px;
diff --git a/frontend/src/app/components/organisms/signupform/signupform.component.html b/frontend/src/app/components/organisms/signupform/signupform.component.html
index 0d342bd..c7158f5 100644
--- a/frontend/src/app/components/organisms/signupform/signupform.component.html
+++ b/frontend/src/app/components/organisms/signupform/signupform.component.html
@@ -13,11 +13,18 @@ <h2 class="form-title" id="login">Sign up</h2>
         [placeholder]="'Enter Email'"
       ></app-inputfield>
       <div class="password">
-		<app-inputfield [labeltext]="'Password'" [typetext]=" passwordFieldType" [placeholder]="'Enter Password'"> </app-inputfield>
-		<span class="eyeimg" (click)="toggleType()" ><img class="img" [src]="img"></span>
-	</div>
+        <app-inputfield
+          [labeltext]="'Password'"
+          [typetext]="passwordFieldType"
+          [placeholder]="'Enter Password'"
+        >
+        </app-inputfield>
+        <span class="eyeimg" (click)="toggleType()"
+          ><img class="img" [src]="img"
+        /></span>
+      </div>
     </div>
-    <button class="button">Login</button>
+    <button class="button">Sign up</button>
     <p class="create-account">
       Already an account? <a href="../auth/login/">Sign in</a>
     </p>
diff --git a/frontend/src/app/components/organisms/signupform/signupform.component.scss b/frontend/src/app/components/organisms/signupform/signupform.component.scss
index 7c3dc27..2632ff8 100644
--- a/frontend/src/app/components/organisms/signupform/signupform.component.scss
+++ b/frontend/src/app/components/organisms/signupform/signupform.component.scss
@@ -1,4 +1,100 @@
 
+p.create-account {
+  font-size: 0.8rem;
+  text-align: center;
+  margin-top: 20px;
+
+  a {
+    font-weight: bold;
+    color: var(--white);
+    text-decoration: none;
+    margin-top: 20px;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
+.eyeimg {
+  justify-content: center;
+  align-self: center;
+  margin-right: 8px;
+
+  .img {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .center {
+    position: absolute;
+    top: calc(50% - 10%);
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    width: 65%;
+    z-index: 1;
+    -webkit-transition: all 0.3s ease;
+    background-color: var(--background-black);
+    padding: 15px;
+    border-radius: 16px;
+    margin-top: 14%;
+
+    .form-title {
+      color: var(--white);
+      font-size: 1.7em;
+      text-align: center;
+      margin-top: 30px;
+    }
+
+    .form-holder {
+      border-radius: 15px;
+      background-color: #fff;
+      border: 1px solid #eee;
+      overflow: hidden;
+      margin-top: 50px;
+      opacity: 1;
+      visibility: visible;
+      -webkit-transition: all 0.3s ease;
+    }
+
+    .button {
+      background-color: var(--green);
+      color: var(--font);
+      border: 0;
+      font-weight: bolder;
+      border-radius: 15px;
+      display: block;
+      margin: 15px auto;
+      margin-top: 10px;
+      padding: 15px 45px;
+      width: 100%;
+      font-size: 13px;
+      cursor: pointer;
+      opacity: 1;
+      visibility: visible;
+      -webkit-transition: all 0.3s ease;
+
+      &:hover {
+        transition: all 0.1s ease;
+        background-color: var(--white);
+        color: var(--font);
+      }
+    }
+  }
+
+  .password {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+=======
+
 
 p.create-account {
     font-size: 0.8rem;
diff --git a/frontend/src/app/components/organisms/statistic-header/statistic-header.component.html b/frontend/src/app/components/organisms/statistic-header/statistic-header.component.html
index a7dc212..e311da7 100644
--- a/frontend/src/app/components/organisms/statistic-header/statistic-header.component.html
+++ b/frontend/src/app/components/organisms/statistic-header/statistic-header.component.html
@@ -14,7 +14,7 @@
         Remaining<br />
         <span>Steps</span>
       </p>
-      <h2>{{ eventservice.steps}}</h2>
+      <h2>{{ eventservice.steps }}</h2>
     </div>
 
     <div class="streak">
@@ -23,4 +23,3 @@ <h2>0000</h2>
     </div>
   </div>
 </div>
-
diff --git a/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.html b/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.html
index dc45e7a..5fe24ef 100644
--- a/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.html
+++ b/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.html
@@ -1,4 +1,7 @@
-<div class="main" id="main">
-	<app-loader></app-loader>
-	<router-outlet></router-outlet>
-</div>
\ No newline at end of file
+
+<div class="main">
+  <img class="img" src="../../../../assets/logo/logo_1_white.svg" />
+  <router-outlet></router-outlet>
+</div>
+
+
diff --git a/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.scss b/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.scss
index c5b5ca5..307aabc 100644
--- a/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.scss
+++ b/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.scss
@@ -1,25 +1,48 @@
 
+.main {
+  width: 100%;
+  height: 100vh;
+  background-color: var(--background-black);
 
-.main{
+  background-repeat: no-repeat;
+  background-position: left top; /* Horizontale und vertikale Zentrierung */
+  background-size: auto;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  display: flex;
+  align-items: start;
+  flex-direction: column;
+
+  .logo-contaier {
+    width: 100%;
+  }
+
+  p.welcome {
+    color: var(--primary-color);
+    font-size: 16px;
+    text-align: center;
+    height: 20px;
     width: 100%;
-    height: 100vh;
-	background-color: var(--black-2);
-	background-image: url(../../../../assets/logo/Logo_2_black.svg);
-	background-repeat: repeat;
-	background-position: center top; /* Horizontale und vertikale Zentrierung */
-	background-size: auto;
-    margin: 0;
+    margin-top: 20px;
+    font-weight: bold;
+    font-style: normal;
+    font-size: 20px;
     padding: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-	
-
-    .logo-contaier
-    {
-        width: 100%;
-    }
+    margin-bottom: 0;
+  }
+
+
+  .logo {
+    filter: invert(100%);
+    margin-top: 50px;
+  }
+
+
+  .img {
+    z-index: 2;
+  }
+}
 
     p.welcome {
         color: var(--primary-color);
@@ -40,4 +63,5 @@
         filter: invert(100%);
         margin-top: 50px;
       }
-}
\ No newline at end of file
+}
+
diff --git a/frontend/src/app/components/pages/friendpage/friendpage.component.html b/frontend/src/app/components/pages/friendpage/friendpage.component.html
new file mode 100644
index 0000000..73dbe4e
--- /dev/null
+++ b/frontend/src/app/components/pages/friendpage/friendpage.component.html
@@ -0,0 +1,4 @@
+<div class="main">
+
+
+</div>
diff --git a/frontend/src/app/components/pages/friendpage/friendpage.component.scss b/frontend/src/app/components/pages/friendpage/friendpage.component.scss
new file mode 100644
index 0000000..3c31331
--- /dev/null
+++ b/frontend/src/app/components/pages/friendpage/friendpage.component.scss
@@ -0,0 +1,6 @@
+.main {
+  width: 100%;
+  height: 100vh;
+  background-color: var(--background-black);
+  display: flex;
+}
diff --git a/frontend/src/app/components/pages/friendpage/friendpage.component.spec.ts b/frontend/src/app/components/pages/friendpage/friendpage.component.spec.ts
new file mode 100644
index 0000000..c473607
--- /dev/null
+++ b/frontend/src/app/components/pages/friendpage/friendpage.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FriendpageComponent } from './friendpage.component';
+
+describe('FriendpageComponent', () => {
+  let component: FriendpageComponent;
+  let fixture: ComponentFixture<FriendpageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FriendpageComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(FriendpageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/components/pages/friendpage/friendpage.component.ts b/frontend/src/app/components/pages/friendpage/friendpage.component.ts
new file mode 100644
index 0000000..03d0544
--- /dev/null
+++ b/frontend/src/app/components/pages/friendpage/friendpage.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-friendpage',
+  templateUrl: './friendpage.component.html',
+  styleUrl: './friendpage.component.scss'
+})
+export class FriendpageComponent {
+
+}
diff --git a/frontend/src/app/components/pages/landingpage/landingpage.component.html b/frontend/src/app/components/pages/landingpage/landingpage.component.html
new file mode 100644
index 0000000..947b8b0
--- /dev/null
+++ b/frontend/src/app/components/pages/landingpage/landingpage.component.html
@@ -0,0 +1,9 @@
+<div class="main">
+  <h1 class="h1-1">Welcome to</h1>
+  <img class="img" src="../../../../assets/logo/logo_1_white.svg" />
+  <h1 class="h1-2">Lets Start</h1>
+  <div class="auth">
+    <button class="button" (click)="login()">Login</button>
+    <button class="button" (click)="signup()">Sign up</button>
+  </div>
+</div>
diff --git a/frontend/src/app/components/pages/landingpage/landingpage.component.scss b/frontend/src/app/components/pages/landingpage/landingpage.component.scss
new file mode 100644
index 0000000..9e8a7ce
--- /dev/null
+++ b/frontend/src/app/components/pages/landingpage/landingpage.component.scss
@@ -0,0 +1,48 @@
+.main {
+  width: 100%;
+  height: 100vh;
+  background-color: var(--background-black);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  .h1-1 {
+    margin: 0;
+    text-align: center;
+    margin-top: 15%;
+  }
+
+  .h1-2 {
+    margin: 0;
+    text-align: center;
+    font-size: 20px;
+  }
+
+  .img {
+    width: 300px;
+    height: 300px;
+  }
+
+  .auth {
+    display: flex;
+    width: 50%;
+    justify-content: space-between;
+    margin-top: 10%;
+    gap: 2em;
+  }
+
+  .button {
+    background-color: var(--green);
+    color: var(--font);
+    border: 0;
+    font-weight: bolder;
+    border-radius: 15px;
+    margin: 15px auto;
+    margin-top: 10px;
+    padding: 10px;
+    width: 100%;
+    font-size: 13px;
+    cursor: pointer;
+    opacity: 1;
+  }
+}
diff --git a/frontend/src/app/components/pages/landingpage/landingpage.component.spec.ts b/frontend/src/app/components/pages/landingpage/landingpage.component.spec.ts
new file mode 100644
index 0000000..77fa177
--- /dev/null
+++ b/frontend/src/app/components/pages/landingpage/landingpage.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingpageComponent } from './landingpage.component';
+
+describe('LandingpageComponent', () => {
+  let component: LandingpageComponent;
+  let fixture: ComponentFixture<LandingpageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LandingpageComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(LandingpageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/components/pages/landingpage/landingpage.component.ts b/frontend/src/app/components/pages/landingpage/landingpage.component.ts
new file mode 100644
index 0000000..eb2c695
--- /dev/null
+++ b/frontend/src/app/components/pages/landingpage/landingpage.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-landingpage',
+  templateUrl: './landingpage.component.html',
+  styleUrl: './landingpage.component.scss'
+})
+export class LandingpageComponent {
+
+  constructor( private router: Router) {
+    
+    this.router = router;
+  }
+
+  login()
+  {
+    this.router.navigate(['/auth/login']);
+  }
+
+  signup()
+  {
+    this.router.navigate(['/auth/signup']);
+  }
+}
diff --git a/frontend/src/app/components/pages/mainpage/mainpage.component.html b/frontend/src/app/components/pages/mainpage/mainpage.component.html
index 326421d..1d756c8 100644
--- a/frontend/src/app/components/pages/mainpage/mainpage.component.html
+++ b/frontend/src/app/components/pages/mainpage/mainpage.component.html
@@ -1,7 +1,5 @@
 <div class="main">
-    <app-loader></app-loader>
-    <app-statistic-header></app-statistic-header>
-    <app-roadmap></app-roadmap>
-   
+  <app-loader></app-loader>
+  <app-statistic-header></app-statistic-header>
+  <app-roadmap></app-roadmap>
 </div>
-
diff --git a/frontend/src/app/components/pages/mainpage/mainpage.component.scss b/frontend/src/app/components/pages/mainpage/mainpage.component.scss
index e4ccdde..7ae5fbc 100644
--- a/frontend/src/app/components/pages/mainpage/mainpage.component.scss
+++ b/frontend/src/app/components/pages/mainpage/mainpage.component.scss
@@ -1,13 +1,13 @@
-.main{
-    width: 100%;
-    height: 100%;
-    background-color: var(--background-black);
+.main {
+  width: 100%;
+  height: 100%;
+  background-color: var(--background-black);
+  margin: 0;
+  padding: 0;
+  top: 0;
+
+  p {
     margin: 0;
     padding: 0;
-    top: 0;
-
-    p{
-        margin: 0;
-        padding: 0;
-    }
-}
\ No newline at end of file
+  }
+}
diff --git a/frontend/src/app/pipes/timer.pipe.ts b/frontend/src/app/pipes/timer.pipe.ts
index 8e0e433..3fd2204 100644
--- a/frontend/src/app/pipes/timer.pipe.ts
+++ b/frontend/src/app/pipes/timer.pipe.ts
@@ -1,7 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'timer'
+  name: 'timer',
 })
 export class TimerPipe implements PipeTransform {
   transform(value: number): string {
@@ -20,4 +20,3 @@ export class TimerPipe implements PipeTransform {
     return hoursString + ':' + minutesString + ':' + secondsString;
   }
 }
-
diff --git a/frontend/src/app/services/event.service.ts b/frontend/src/app/services/event.service.ts
index 105591a..9a8928d 100644
--- a/frontend/src/app/services/event.service.ts
+++ b/frontend/src/app/services/event.service.ts
@@ -1,39 +1,31 @@
 import { Injectable } from '@angular/core';
 
-
 @Injectable({
   providedIn: 'root',
 })
 export class EventService {
   disabled: boolean = false;
-  toggleStopButton: boolean = false; 
-  time: number = 0; 
-  steps: number = 0; 
-  interval: any; 
-  classNameToast: string = ""; 
-  snackbarBackgroundColor: string = "";
-  snackbarText: string = ""
-  
-  reduceTimer()
-  {
+  toggleStopButton: boolean = false;
+  time: number = 0;
+  steps: number = 0;
+  interval: any;
+  classNameToast: string = '';
+  snackbarBackgroundColor: string = '';
+  snackbarText: string = '';
+
+  reduceTimer() {
     this.interval = setInterval(() => {
       this.time--;
-      if (this.time ==  0) {
-          clearInterval(this.interval);
-          console.log("Zeit abgelaufen!");
+      if (this.time == 0) {
+        clearInterval(this.interval);
+        console.log('Zeit abgelaufen!');
       }
-  }, 1000);
+    }, 1000);
   }
 
-  stopTraining()
-  {
+  stopTraining() {
     clearInterval(this.interval);
-    this.steps = 0; 
-    this.time = 0; 
+    this.steps = 0;
+    this.time = 0;
   }
-
-  
-
-
-
 }
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 6bb0d2c..3cdbbd3 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>duogradus. - Sammle Schritte, Tritt gegen Freunde an und steig in der Liga auf </title>
+  <title>duogradus. | Sammle Schritte, Tritt gegen Freunde an und steig in der Liga auf </title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" href="frontend\src\Logo_1_black.ico" type="image/x-icon">