From 8654d7368467c3019f73cbcd5dae9479f392009c Mon Sep 17 00:00:00 2001
From: Jstn2004 <hubertjustin01@gmail.com>
Date: Tue, 18 Jun 2024 16:10:22 +0200
Subject: [PATCH] add missing comments

---
 frontend/src/app/app.component.html           |   5 +-
 frontend/src/app/app.component.ts             |  41 ++--
 .../challenge-button.component.scss           |  43 +++++
 .../challenge-button.component.ts             |  10 +-
 .../friend-card/friend-card.component.scss    | 113 ++++++-----
 .../friend-card/friend-card.component.ts      |  21 +--
 .../atoms/header/header.component.scss        |  52 ++---
 .../atoms/header/header.component.ts          |   6 +-
 .../inputfield/inputfield.component.scss      |   8 +-
 .../atoms/loader/loader.component.scss        |  37 +++-
 .../atoms/searchbar/searchbar.component.scss  |  27 +--
 .../atoms/searchbar/searchbar.component.ts    |   7 +-
 .../settingsentry.component.scss              |  67 ++++---
 .../statistic-entry.component.scss            |  47 +++--
 .../stopbutton/stopbutton.component.scss      |  23 ++-
 .../atoms/stopbutton/stopbutton.component.ts  |   9 +-
 .../atoms/toast/toast.component.scss          |  14 +-
 .../atoms/user-card/user-card.component.scss  |  35 +++-
 .../challenge-dialog.component.scss           |  24 ++-
 .../challenge-dialog.component.ts             |  91 +++++----
 .../delete-dialog.component.scss              |  84 ++++-----
 .../delete-dialog/delete-dialog.component.ts  |   9 +-
 .../organisms/footer/footer.component.scss    |  97 +++++-----
 .../organisms/footer/footer.component.ts      |  25 ++-
 .../loginform/loginform.component.scss        |  58 ++++++
 .../loginform/loginform.component.ts          |  17 +-
 .../ranking-table.component.scss              |   5 -
 .../organisms/roadmap/roadmap.component.scss  |  15 ++
 .../organisms/roadmap/roadmap.component.ts    |  18 +-
 .../signupform/signupform.component.scss      | 178 +++++++++---------
 .../signupform/signupform.component.ts        |  17 +-
 .../statistic-header.component.scss           |  50 ++++-
 .../statistic-header.component.ts             |  17 +-
 .../addfriendpage.component.scss              | 150 +++++++++------
 .../addfriendpage/addfriendpage.component.ts  |  11 +-
 .../authenticationpage.component.scss         |  61 +++---
 .../friendpage/friendpage.component.scss      |  50 +++--
 .../pages/friendpage/friendpage.component.ts  |  15 +-
 .../landingpage/landingpage.component.scss    |  37 +++-
 .../landingpage/landingpage.component.ts      |  21 ++-
 .../pages/mainpage/mainpage.component.scss    |  15 +-
 .../pages/mainpage/mainpage.component.ts      |  13 +-
 .../profilepage/profilepage.component.scss    | 107 ++++++-----
 .../profilepage/profilepage.component.ts      |  40 ++--
 .../ranking-page/ranking-page.component.scss  |  40 ++--
 .../ranking-page/ranking-page.component.ts    |   6 +-
 .../settingspage/settingspage.component.scss  | 125 ++++++------
 .../settingspage/settingspage.component.ts    |  21 ++-
 frontend/src/app/pipes/timer.pipe.ts          |   7 +
 frontend/src/app/pipes/userfilter.pipe.ts     |  22 ++-
 frontend/src/styles.scss                      |  29 +--
 51 files changed, 1259 insertions(+), 781 deletions(-)

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index eed8d77..d67bd08 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,8 +1,7 @@
 <main [@routeAnimations]="prepareRoute(outlet)">
   <router-outlet #outlet="outlet"></router-outlet>
-</main >
+</main>
 
 <app-footer *ngIf="hasFooter()"></app-footer>
-<!--TODO: set visible for the laoding progress-->
-<app-loader *ngIf="isLoading" ></app-loader>
+<app-loader *ngIf="isLoading"></app-loader>
 <app-toast></app-toast>
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index df44b9e..9ccf3a9 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -2,38 +2,51 @@ import { Component } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { LoaderService } from './services/loader.service';
 import { RouterOutlet } from '@angular/router';
-import { slideInAnimation} from './route-transition-animation';
+import { slideInAnimation } from './route-transition-animation';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
-  animations: [slideInAnimation]
+  animations: [slideInAnimation],
 })
 
-export class AppComponent implements OnInit{
-  title = 'duogradus. | Sammle Schritte, Tritt gegen Freunde an und steig in der Liga auf';
+/**
+ * The root component of the application.
+ * Responsible for displaying the main layout and handling loading state.
+ */
+export class AppComponent implements OnInit {
+  title =
+    'duogradus. | Sammle Schritte, Tritt gegen Freunde an und steig in der Liga auf';
   isLoading: boolean = false;
-  constructor(private loaderService: LoaderService) {
 
-  }
+  constructor(private loaderService: LoaderService) {}
 
+  /**
+   * Prepares the route for animation.
+   * @param outlet - The router outlet.
+   * @returns The animation data for the activated route.
+   */
   prepareRoute(outlet: RouterOutlet) {
-    console
-    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
+    return (
+      outlet &&
+      outlet.activatedRouteData &&
+      outlet.activatedRouteData['animation']
+    );
   }
 
-    hasFooter() {
+  /**
+   * Checks if the current page should have a footer.
+   * @returns True if the current page should have a footer, false otherwise.
+   */
+  hasFooter() {
     const footerPages: string[] = ['/main', '/ranking', '/profile', '/friends'];
     return footerPages.includes(window.location.pathname);
-    }
+  }
 
   ngOnInit(): void {
-     this.loaderService.isLoading.subscribe((value) => {
+    this.loaderService.isLoading.subscribe((value) => {
       this.isLoading = value;
     });
-
   }
-
 }
-
diff --git a/frontend/src/app/components/atoms/challenge-button/challenge-button.component.scss b/frontend/src/app/components/atoms/challenge-button/challenge-button.component.scss
index f92e327..bdeeba3 100644
--- a/frontend/src/app/components/atoms/challenge-button/challenge-button.component.scss
+++ b/frontend/src/app/components/atoms/challenge-button/challenge-button.component.scss
@@ -1,3 +1,6 @@
+/**
+ * Styles for the challenge button component.
+ */
 .button-19 {
   appearance: button;
   background-color: #a0a0a0ef;
@@ -29,6 +32,26 @@
   margin-top: 15px;
 }
 
+/**
+ * Styles for the pseudo-element ":after" of the .button-19 class.
+ *
+ * This pseudo-element is used to create a circular background with a border at the bottom of the button.
+ * It is positioned absolutely and covers the entire button.
+ *
+ * CSS Properties:
+ * - background-clip: Specifies how the background image or color should be clipped.
+ * - background-color: Specifies the background color of the pseudo-element.
+ * - border: Specifies the border style of the pseudo-element.
+ * - border-radius: Specifies the border radius of the pseudo-element, making it circular.
+ * - border-width: Specifies the width of the border at the bottom of the pseudo-element.
+ * - bottom: Specifies the distance between the bottom edge of the pseudo-element and its containing element.
+ * - content: Specifies the content to be displayed in the pseudo-element.
+ * - left: Specifies the distance between the left edge of the pseudo-element and its containing element.
+ * - position: Specifies the positioning method of the pseudo-element.
+ * - right: Specifies the distance between the right edge of the pseudo-element and its containing element.
+ * - top: Specifies the distance between the top edge of the pseudo-element and its containing element.
+ * - z-index: Specifies the stack order of the pseudo-element.
+ */
 .button-19:after {
   background-clip: padding-box;
   background-color: var(--white);
@@ -44,25 +67,45 @@
   z-index: -1;
 }
 
+/**
+ * Styles for the .button-19 class when it is the main element or in focus state.
+ * Allows user selection of the element.
+ */
 .button-19:main,
 .button-19:focus {
   user-select: auto;
 }
 
+/**
+ * Styles for the .button-19 class when it is being hovered, not disabled.
+ * Increases the brightness of the button by 10%.
+ */
 .button-19:hover:not(:disabled) {
   filter: brightness(1.1);
   -webkit-filter: brightness(1.1);
 }
 
+/**
+ * Styles for the .button-19 class when it is disabled.
+ * Sets the cursor to auto.
+ */
 .button-19:disabled {
   cursor: auto;
 }
 
+/**
+ * Styles for the active state of the .button-19 class.
+ * This style removes the background and adds a 4px border at the top.
+ */
 .button-19:active {
   border-width: 4px 0 0;
   background: none;
 }
 
+/**
+ * Styles for the #button-top ID.
+ * This style sets the font weight to 100 and font size to 10px.
+ */
 #button-top {
   font-weight: 100;
   font-size: 10px;
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 b74dd38..f74cb2f 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
@@ -8,9 +8,9 @@ import { EventService } from 'app/services/event.service';
 })
 export class ChallengeButtonComponent {
   @Input() num: number = 1;
-  @Input() id: string = "";
-  @Input() title: string = "";
-  @Input() description: string = "";
+  @Input() id: string = '';
+  @Input() title: string = '';
+  @Input() description: string = '';
   @Output() toggleStopButton = new EventEmitter<void>();
   buttonIsclicked: boolean = false;
 
@@ -18,6 +18,10 @@ export class ChallengeButtonComponent {
     this.eventService = eventService;
   }
 
+  /**
+   * Handles the click event of the challenge button.
+   * Sets the `buttonIsclicked` property to `true` and disables the event service.
+   */
   challengeButtonIsClicked() {
     this.buttonIsclicked = true;
     this.eventService.disabled = true;
diff --git a/frontend/src/app/components/atoms/friend-card/friend-card.component.scss b/frontend/src/app/components/atoms/friend-card/friend-card.component.scss
index 1a4eb3b..c9f35d5 100644
--- a/frontend/src/app/components/atoms/friend-card/friend-card.component.scss
+++ b/frontend/src/app/components/atoms/friend-card/friend-card.component.scss
@@ -1,58 +1,67 @@
-.main-container
-{
-    display: flex;
-    flex-direction: row;
-    background-color: inherit;
-    align-items: center;
-    width: 91vw;
-    border-top: 0.1px solid rgb(85, 85, 85);
-    padding: 5px;
-
-
-    img
-    {
-        width: 50px;
-        border-radius: 50%;
-        height: 50px;
-        margin-left: 1rem;
-        padding: 0;
-        background-color: var(--white);
-        margin-top: 3px;
-
-    }
+/**
+ * Styles for the FriendCardComponent.
+ */
+.main-container {
+  display: flex;
+  flex-direction: row;
+  background-color: inherit;
+  align-items: center;
+  width: 91vw;
+  border-top: 0.1px solid rgb(85, 85, 85);
+  padding: 5px;
 
-    h3
-    {
-        font-size: 1rem;
-        margin-left: 1rem;
-        color: var(--white);
-        margin-top: 0;
-    }
+  /**
+     * Styles for the image element inside the FriendCardComponent.
+     */
+  img {
+    width: 50px;
+    border-radius: 50%;
+    height: 50px;
+    margin-left: 1rem;
+    padding: 0;
+    background-color: var(--white);
+    margin-top: 3px;
+  }
 
-    .remove-button {
-        background-color: var(--green);
-        border: none;
-        cursor: pointer;
-        border-radius: 5px;
-        height: 25px;
-        font-weight: bold;
-        align-items: end;
-        margin-right: 20px;
-        transition: background-color 0.1s ease; /* Übergangseigenschaft für die Hintergrundfarbe */
-    }
+  /**
+     * Styles for the heading element inside the FriendCardComponent.
+     */
+  h3 {
+    font-size: 1rem;
+    margin-left: 1rem;
+    color: var(--white);
+    margin-top: 0;
+  }
 
+  /**
+     * Styles for the remove button inside the FriendCardComponent.
+     */
+  .remove-button {
+    background-color: var(--green);
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+    height: 25px;
+    font-weight: bold;
+    align-items: end;
+    margin-right: 20px;
+    transition: background-color 0.1s ease;
+  }
 
-    .remove-button:active {
-        background-color: lighten(#00ff7f, 30%); /* Die Hintergrundfarbe wird beim Klicken um 20% aufgehellt */
-    }
+  /**
+     * Styles for the remove button when it is active.
+     */
+  .remove-button:active {
+    background-color: lighten(#00ff7f, 30%);
+  }
 
-
-
-    .inner-container
-    {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        width: 100%;
-    }
+  /**
+     * Styles for the inner container inside the FriendCardComponent.
+     */
+  .inner-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+  }
 }
diff --git a/frontend/src/app/components/atoms/friend-card/friend-card.component.ts b/frontend/src/app/components/atoms/friend-card/friend-card.component.ts
index 2fb4f4f..9ab3704 100644
--- a/frontend/src/app/components/atoms/friend-card/friend-card.component.ts
+++ b/frontend/src/app/components/atoms/friend-card/friend-card.component.ts
@@ -1,20 +1,19 @@
-
 import { Component, Input } from '@angular/core';
 
-
 @Component({
   selector: 'app-friend-card',
   templateUrl: './friend-card.component.html',
-  styleUrl: './friend-card.component.scss'
+  styleUrl: './friend-card.component.scss',
 })
-export class FriendCardComponent{
-  @Input() name: string = "";
-  @Input() picture: string = "../../../../assets/icons/001-sportler.png";
+export class FriendCardComponent {
+  @Input() name: string = '';
+  @Input() picture: string = '../../../../assets/icons/001-sportler.png';
   removeIsPressed: boolean = false;
 
-  toggleRemove()
-    {
-      this.removeIsPressed = !this.removeIsPressed;
-
-    }
+  /**
+   * Toggles the state of the `removeIsPressed` property.
+   */
+  toggleRemove() {
+    this.removeIsPressed = !this.removeIsPressed;
+  }
 }
diff --git a/frontend/src/app/components/atoms/header/header.component.scss b/frontend/src/app/components/atoms/header/header.component.scss
index c7523fe..0090acd 100644
--- a/frontend/src/app/components/atoms/header/header.component.scss
+++ b/frontend/src/app/components/atoms/header/header.component.scss
@@ -1,26 +1,32 @@
+/**
+ * Styles for the header component.
+ */
+.header {
+  width: 100vw;
+  height: 30px;
+  background: rgb(0, 0, 0);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 1) 14%,
+    rgba(0, 75, 17, 1) 82%,
+    rgba(0, 75, 17, 1) 100%
+  );
+  margin: 0;
+  padding-top: 8px;
+  padding-bottom: 5px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
 
-.header
-{
-    width: 100vw;
-    height: 30px;
-    background: rgb(0,0,0);
-    background: linear-gradient(90deg, rgba(0,0,0,1) 14%, rgba(0,75,17,1) 82%, rgba(0,75,17,1) 100%);
+  /**
+     * Styles for the heading element within the header component.
+     */
+  h3 {
+    color: var(--white-1);
+    font-size: 2rem;
     margin: 0;
-    padding-top: 8px;
-    padding-bottom: 5px;
-    display: flex;
-    justify-content: start;
-    align-items: center;
-
-
-
-    h3
-    {
-        color: var(--white-1);
-        font-size: 2rem;
-        margin: 0;
-        text-align: start;
-        align-horizontally: center;
-        margin-left: 1rem;
-    }
+    text-align: start;
+    align-horizontally: center;
+    margin-left: 1rem;
+  }
 }
diff --git a/frontend/src/app/components/atoms/header/header.component.ts b/frontend/src/app/components/atoms/header/header.component.ts
index 43d624e..d83bd42 100644
--- a/frontend/src/app/components/atoms/header/header.component.ts
+++ b/frontend/src/app/components/atoms/header/header.component.ts
@@ -3,8 +3,8 @@ import { Component, Input } from '@angular/core';
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styleUrl: './header.component.scss'
+  styleUrl: './header.component.scss',
 })
 export class HeaderComponent {
-@Input() text: string = "";
-}
\ No newline at end of file
+  @Input() text: string = '';
+}
diff --git a/frontend/src/app/components/atoms/inputfield/inputfield.component.scss b/frontend/src/app/components/atoms/inputfield/inputfield.component.scss
index 68fa0af..e805ca9 100644
--- a/frontend/src/app/components/atoms/inputfield/inputfield.component.scss
+++ b/frontend/src/app/components/atoms/inputfield/inputfield.component.scss
@@ -1,4 +1,10 @@
+/**
+ * Styles for the input field component.
+ *
+ * FILEPATH: /c:/Users/huber/Desktop/Semester 4/SE-Progammierung/G5-DuoGradus/frontend/src/app/components/atoms/inputfield/inputfield.component.scss
+ */
 .input {
+  // Styles for the input field
   border: 0;
   outline: none;
   box-shadow: none;
@@ -13,8 +19,8 @@
   &:last-child {
     border-bottom: 0;
   }
+
   &::-webkit-input-placeholder {
     color: rgba(0, 0, 0, 0.4);
   }
 }
-
diff --git a/frontend/src/app/components/atoms/loader/loader.component.scss b/frontend/src/app/components/atoms/loader/loader.component.scss
index d777e59..2f9a5c9 100644
--- a/frontend/src/app/components/atoms/loader/loader.component.scss
+++ b/frontend/src/app/components/atoms/loader/loader.component.scss
@@ -1,5 +1,6 @@
-
-
+/**
+ * Styles for the loader component.
+ */
 .center-container {
   display: flex;
   justify-content: center;
@@ -7,8 +8,10 @@
   flex-direction: column;
   width: 100%;
 
-  .main
-  {
+  /**
+   * Styles for the main container of the loader.
+   */
+  .main {
     position: fixed;
     z-index: 5;
     width: 100%;
@@ -23,27 +26,45 @@
     justify-content: center;
     align-items: center;
 
+    /**
+     * Styles for the loader element.
+     */
     .loader {
       position: relative;
       width: 100px;
       height: 100px;
     }
 
-    .loader:before , .loader:after{
-      content: '';
+    /**
+     * Styles for the before and after pseudo-elements of the loader.
+     */
+    .loader:before,
+    .loader:after {
+      content: "";
       border-radius: 50%;
       position: absolute;
       inset: 0;
       box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
     }
+
+    /**
+     * Styles for the after pseudo-element of the loader.
+     */
     .loader:after {
       box-shadow: 0 2px 0 var(--green) inset;
       animation: rotate 2s linear infinite;
     }
 
+    /**
+     * Keyframes animation for the loader rotation.
+     */
     @keyframes rotate {
-      0% {  transform: rotate(0)}
-      100% { transform: rotate(360deg)}
+      0% {
+        transform: rotate(0);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
     }
   }
 }
diff --git a/frontend/src/app/components/atoms/searchbar/searchbar.component.scss b/frontend/src/app/components/atoms/searchbar/searchbar.component.scss
index 3109a84..055fc3c 100644
--- a/frontend/src/app/components/atoms/searchbar/searchbar.component.scss
+++ b/frontend/src/app/components/atoms/searchbar/searchbar.component.scss
@@ -1,12 +1,17 @@
-.input
-{
-    width: 60vw;
-    height: 40px;
-    border: none;
-    outline: none;
-    box-shadow: none;
-    border-radius: 0 12px 12px 0 ;
-    background-color: var(--white);
-    color: var(--font);
-
+/**
+ * Styles for the input element of the searchbar component.
+ *
+ * @class .input
+ * @memberof atoms/searchbar
+ *
+ */
+.input {
+  width: 60vw;
+  height: 40px;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  border-radius: 0 12px 12px 0;
+  background-color: var(--white);
+  color: var(--font);
 }
diff --git a/frontend/src/app/components/atoms/searchbar/searchbar.component.ts b/frontend/src/app/components/atoms/searchbar/searchbar.component.ts
index 36fd179..e7d92df 100644
--- a/frontend/src/app/components/atoms/searchbar/searchbar.component.ts
+++ b/frontend/src/app/components/atoms/searchbar/searchbar.component.ts
@@ -3,14 +3,13 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { EventService } from 'app/services/event.service';
 
-
 @Component({
   selector: 'app-searchbar',
   templateUrl: './searchbar.component.html',
-  styleUrl: './searchbar.component.scss'
+  styleUrl: './searchbar.component.scss',
 })
 export class SearchbarComponent {
   constructor(public eventService: EventService) {
     this.eventService = eventService;
-   }
-}
\ No newline at end of file
+  }
+}
diff --git a/frontend/src/app/components/atoms/settingsentry/settingsentry.component.scss b/frontend/src/app/components/atoms/settingsentry/settingsentry.component.scss
index eb982e8..0a2568e 100644
--- a/frontend/src/app/components/atoms/settingsentry/settingsentry.component.scss
+++ b/frontend/src/app/components/atoms/settingsentry/settingsentry.component.scss
@@ -1,32 +1,49 @@
-$font-size:1.2em;
-#wrapper{
-    height:14vh;
-    text-align: center;
-    padding-top: 1em;
-    margin: 1em 1em 1em 1em;
-    background-color: var(--black-3);
-    border-radius: 1em;
-    display:flex;
-    flex-direction: column;
+/**
+ * This SCSS file defines the styles for the settingsentry component.
+ */
 
+$font-size: 1.2em;
+
+/**
+ * The wrapper element of the settingsentry component.
+ */
+#wrapper {
+  height: 14vh;
+  text-align: center;
+  padding-top: 1em;
+  margin: 1em 1em 1em 1em;
+  background-color: var(--black-3);
+  border-radius: 1em;
+  display: flex;
+  flex-direction: column;
 }
 
-#value{
-    background-color: var(--white);
-    color: var(--black-2);
-    border-radius: 1em;
-    border-width: 0em;
-    width: 90%;
-    height: 35px;
-    margin:auto;
-    text-align: center;
-    font-size: $font-size;
+/**
+ * The value element of the settingsentry component.
+ */
+#value {
+  background-color: var(--white);
+  color: var(--black-2);
+  border-radius: 1em;
+  border-width: 0em;
+  width: 90%;
+  height: 35px;
+  margin: auto;
+  text-align: center;
+  font-size: $font-size;
 }
 
-#value:focus{
-    border-color: var(--green);
+/**
+ * The focused state of the value element of the settingsentry component.
+ */
+#value:focus {
+  border-color: var(--green);
 }
-#name{
-    font-weight: bold;
-    font-size: $font-size;
+
+/**
+ * The name element of the settingsentry component.
+ */
+#name {
+  font-weight: bold;
+  font-size: $font-size;
 }
diff --git a/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.scss b/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.scss
index 260f6ca..fe4c021 100644
--- a/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.scss
+++ b/frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.scss
@@ -1,20 +1,29 @@
-#wrapper{
-    background-color: var(--white);
-    text-align: center;
-    height: 6em;
-    color: var(--font);
-    text-indent: 0em;
-    border-radius: 1em;
-    display: flex;
-    flex-direction: column;
-    min-width: 8em;
-    padding: 0.5em;
-    div{
-        height: 40%;
-        width: 100%;
-    }
+/**
+ * Styles for the statistic entry component.
+ */
+
+#wrapper {
+  background-color: var(--white);
+  text-align: center;
+  height: 6em;
+  color: var(--font);
+  text-indent: 0em;
+  border-radius: 1em;
+  display: flex;
+  flex-direction: column;
+  min-width: 8em;
+  padding: 0.5em;
+
+  /**
+     * Styles for the inner div element.
+     */
+  div {
+    height: 40%;
+    width: 100%;
+  }
+}
+
+#name {
+  padding-top: 1em;
+  font-weight: bold;
 }
-#name{
-    padding-top: 1em;
-    font-weight: bold;
-}
\ No newline at end of file
diff --git a/frontend/src/app/components/atoms/stopbutton/stopbutton.component.scss b/frontend/src/app/components/atoms/stopbutton/stopbutton.component.scss
index 5c0e32f..de2c93d 100644
--- a/frontend/src/app/components/atoms/stopbutton/stopbutton.component.scss
+++ b/frontend/src/app/components/atoms/stopbutton/stopbutton.component.scss
@@ -1,3 +1,20 @@
+/**
+ * Styles for the stop button component.
+ *
+ * The stop button is a custom button component used to stop a process or action.
+ * It has a red background color and a white text color.
+ * The button has a fixed position on the page and is 90px wide and 40px high.
+ * It has a border radius of 16px and a border width of 5px at the bottom.
+ * The button transitions the filter property with a duration of 0.2s on hover.
+ * It also has a hover effect that increases the brightness by 10%.
+ * The button can be disabled, in which case it has a different style and the cursor is set to auto.
+ * The button has a pseudo-element after it that adds a red border at the bottom.
+ * The button text has uppercase letters and a font size of 12px.
+ * The button is positioned 140px from the top and 3% from the left of its container.
+ *
+ * @class StopButtonComponent
+ */
+
 .stopbutton {
   appearance: button;
   background-color: #f55959e5;
@@ -28,11 +45,8 @@
   margin-top: 15px;
   position: fixed;
   top: 140px;
-  left: 0%; 
+  left: 0%;
   margin-left: 3%;
-
-
- 
 }
 
 .stopbutton:after {
@@ -73,4 +87,3 @@
   font-weight: 100;
   font-size: 10px;
 }
-
diff --git a/frontend/src/app/components/atoms/stopbutton/stopbutton.component.ts b/frontend/src/app/components/atoms/stopbutton/stopbutton.component.ts
index 8f6e09c..a6406a9 100644
--- a/frontend/src/app/components/atoms/stopbutton/stopbutton.component.ts
+++ b/frontend/src/app/components/atoms/stopbutton/stopbutton.component.ts
@@ -11,12 +11,17 @@ export class StopbuttonComponent {
     this.eventservice = eventservice;
   }
 
+  /**
+   * Toggles the stop button functionality.
+   * Sets the necessary properties and triggers the stopTraining method.
+   * Displays a snackbar with a message indicating that the training has stopped.
+   */
   toggleStopButton() {
     this.eventservice.toggleStopButton = false;
     this.eventservice.disabled = false;
     this.eventservice.stopTraining();
-    this.eventservice.snackbarBackgroundColor = "#f72525"
-    this.eventservice.snackbarText = "Training has stoped"
+    this.eventservice.snackbarBackgroundColor = '#f72525';
+    this.eventservice.snackbarText = 'Training has stoped';
     this.eventservice.classNameToast = 'show';
     setTimeout(() => {
       this.eventservice.classNameToast = '';
diff --git a/frontend/src/app/components/atoms/toast/toast.component.scss b/frontend/src/app/components/atoms/toast/toast.component.scss
index dbb3e30..01afbe9 100644
--- a/frontend/src/app/components/atoms/toast/toast.component.scss
+++ b/frontend/src/app/components/atoms/toast/toast.component.scss
@@ -1,3 +1,7 @@
+/**
+ * Styles for the toast component.
+ */
+
 #snackbar {
   visibility: hidden;
   min-width: 250px;
@@ -17,9 +21,13 @@
   visibility: visible !important; /* Show 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;
+  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;
 }
 
 /* Animations to fade the snackbar in and out */
diff --git a/frontend/src/app/components/atoms/user-card/user-card.component.scss b/frontend/src/app/components/atoms/user-card/user-card.component.scss
index e0da2d8..2140fe8 100644
--- a/frontend/src/app/components/atoms/user-card/user-card.component.scss
+++ b/frontend/src/app/components/atoms/user-card/user-card.component.scss
@@ -1,3 +1,6 @@
+/**
+ * Styles for the user card component.
+ */
 .main-container {
   display: flex;
   flex-direction: row;
@@ -9,8 +12,9 @@
   justify-content: space-between;
   gap: 0;
 
-
-
+  /**
+   * Styles for the rank element.
+   */
   .rank {
     background-color: var(--white);
     padding: 5px;
@@ -22,24 +26,33 @@
     color: var(--font);
   }
 
-  .gold
-  {
+  /**
+   * Styles for the gold rank.
+   */
+  .gold {
     background-color: gold;
     color: var(--white);
   }
 
-  .silver
-  {
+  /**
+   * Styles for the silver rank.
+   */
+  .silver {
     background-color: silver;
     color: var(--white);
   }
 
-  .copper
-  {
+  /**
+   * Styles for the copper rank.
+   */
+  .copper {
     background-color: rgb(184, 115, 51);
     color: var(--white);
   }
 
+  /**
+   * Styles for the name element.
+   */
   .name {
     font-size: 1rem;
     margin-left: 5rem;
@@ -47,6 +60,9 @@
     margin-top: 0px;
   }
 
+  /**
+   * Styles for the winstreak element.
+   */
   .winstreak {
     font-size: 1rem;
     margin-left: 1rem;
@@ -54,6 +70,9 @@
     margin-top: 2px;
   }
 
+  /**
+   * Styles for the inner container.
+   */
   .inner-container {
     display: flex;
     flex-direction: row;
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 b26f381..3f183ca 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
@@ -1,3 +1,6 @@
+/**
+ * Styles for the challenge dialog component.
+ */
 .main {
   position: fixed;
   bottom: 0;
@@ -12,7 +15,9 @@
   flex-direction: column;
   align-items: center;
 
-
+  /**
+   * Styles for the dialog window.
+   */
   .window {
     height: 100vh;
     width: 100%;
@@ -22,6 +27,9 @@
     flex-direction: column;
     align-items: center;
 
+    /**
+     * Styles for the dialog header.
+     */
     .dialog-header {
       display: flex;
       flex-direction: row;
@@ -29,6 +37,9 @@
       justify-content: space-between;
       border-bottom: 1px white solid;
 
+      /**
+       * Styles for the done button.
+       */
       .done-button {
         background-color: inherit;
         border: none;
@@ -48,6 +59,9 @@
     }
   }
 
+  /**
+   * Styles for the square element.
+   */
   .square {
     width: 50px;
     height: 5px;
@@ -56,6 +70,9 @@
     margin-top: 10px;
   }
 
+  /**
+   * Styles for the training information section.
+   */
   .training-infos {
     margin-top: 30px;
     margin-bottom: 30px;
@@ -91,6 +108,9 @@
     }
   }
 
+  /**
+   * Styles for the start button.
+   */
   .start-button {
     width: 60%;
     height: 12%;
@@ -98,6 +118,4 @@
     color: var(--font);
     font-weight: bold;
   }
-
 }
-
diff --git a/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.ts b/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.ts
index 6fef6e3..5798fcf 100644
--- a/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.ts
+++ b/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.ts
@@ -15,56 +15,57 @@ import { MainpageService } from 'app/services/mainpage.service';
   styleUrl: './challenge-dialog.component.scss',
   animations: [
     trigger('openClose', [
-      state('open', style({
-        height: '45vh',
-
-      })),
-      state('closed', style({
-        height: '0',
-
-      })),
-      transition('open <=> closed', [
-        animate('0.1s')
-      ])
-    ])
-  ]
+      state(
+        'open',
+        style({
+          height: '45vh',
+        }),
+      ),
+      state(
+        'closed',
+        style({
+          height: '0',
+        }),
+      ),
+      transition('open <=> closed', [animate('0.1s')]),
+    ]),
+  ],
 })
 export class ChallengeDialogComponent {
   @Input() num: number = 1;
-  @Input() id: string = "";
-  @Input() title: string = "";
-  @Input() description: string = "";
+  @Input() id: string = '';
+  @Input() title: string = '';
+  @Input() description: string = '';
   @Output() closeDialog = new EventEmitter<void>();
   @Input() trigger: boolean = false;
 
-
-  constructor(public eventservice:EventService, public mainpageService: MainpageService)
-  {
-      this.eventservice = eventservice;
+  constructor(
+    public eventservice: EventService,
+    public mainpageService: MainpageService,
+  ) {
+    this.eventservice = eventservice;
   }
 
   triggerEvent() {
     this.closeDialog.emit();
   }
 
-  startEvent()
-  {
+  /**
+   * Starts the event and performs necessary actions.
+   */
+  startEvent() {
     this.mainpageService.beginAndStopTask(this.id);
     this.closeDialog.emit();
     this.eventservice.steps = this.extractNumberFromSentence(this.description);
     this.eventservice.disabled = true;
     //this.eventservice.reduceTimer();
     this.eventservice.toggleStopButton = true;
-    this.eventservice.snackbarText = "Training has started"
-    this.eventservice.snackbarBackgroundColor = "#04b02f"
-    this.eventservice.classNameToast = "show"
-    setTimeout(
-      () =>
-        {
-          this.eventservice.classNameToast = "";
-        }
-      , 2900);
-
+    this.eventservice.snackbarText = 'Training has started';
+    this.eventservice.snackbarBackgroundColor = '#04b02f';
+    this.eventservice.classNameToast = 'show';
+    setTimeout(() => {
+      this.eventservice.classNameToast = '';
+    }, 2900);
   }
 
   /**
@@ -73,22 +74,16 @@ export class ChallengeDialogComponent {
    * @returns excracted number from sentence
    */
 
-  extractNumberFromSentence(sentence: string): string  {
+  extractNumberFromSentence(sentence: string): string {
     const regex = /\b\d{1,3}(\.\d{3})*\b/g;
-  const match = sentence.match(regex);
-
-  if (match) {
-    const numberStringWithDots = match[0];
-    const numberString = numberStringWithDots.replace(/\./g, '');
-    return numberString;
-  } else {
-    return "0";
-  }
+    const match = sentence.match(regex);
+
+    if (match) {
+      const numberStringWithDots = match[0];
+      const numberString = numberStringWithDots.replace(/\./g, '');
+      return numberString;
+    } else {
+      return '0';
     }
-
-
-
-
-
-
+  }
 }
diff --git a/frontend/src/app/components/organisms/delete-dialog/delete-dialog.component.scss b/frontend/src/app/components/organisms/delete-dialog/delete-dialog.component.scss
index 793d646..5abbfb4 100644
--- a/frontend/src/app/components/organisms/delete-dialog/delete-dialog.component.scss
+++ b/frontend/src/app/components/organisms/delete-dialog/delete-dialog.component.scss
@@ -1,56 +1,48 @@
-
-.main-container
-{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: rgba(0,0,0,0.7);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-
+.main-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .dialog {
-    width: 70vw;
-    height: 30vh;
-    background-color: var(--black-3);
-    opacity: 1;
-    border-radius: 16px;
-    display: flex ;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  width: 70vw;
+  height: 30vh;
+  background-color: var(--black-3);
+  opacity: 1;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.buttons
-{
-    display: flex;
-    flex-direction: row;
-    gap: 1.5rem;
-    margin-top: 1rem;
-    height: 30px;
-    border: none;
-
+.buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 1.5rem;
+  margin-top: 1rem;
+  height: 30px;
+  border: none;
 }
 
-.delete-button
-{
-    color: var(--font);
-    background-color: red;
-    border: none;
-    font-weight: bold;
-    border-radius: 4px;
+.delete-button {
+  color: var(--font);
+  background-color: red;
+  border: none;
+  font-weight: bold;
+  border-radius: 4px;
 }
 
-.cancel-button
-{
-    color: var(--font);
-    background-color: var(--white);
-    font-weight: bold;
-    border: none;
-    border-radius: 4px;
+.cancel-button {
+  color: var(--font);
+  background-color: var(--white);
+  font-weight: bold;
+  border: none;
+  border-radius: 4px;
 }
diff --git a/frontend/src/app/components/organisms/delete-dialog/delete-dialog.component.ts b/frontend/src/app/components/organisms/delete-dialog/delete-dialog.component.ts
index cb45e95..bc7dd60 100644
--- a/frontend/src/app/components/organisms/delete-dialog/delete-dialog.component.ts
+++ b/frontend/src/app/components/organisms/delete-dialog/delete-dialog.component.ts
@@ -3,14 +3,13 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 @Component({
   selector: 'app-delete-dialog',
   templateUrl: './delete-dialog.component.html',
-  styleUrl: './delete-dialog.component.scss'
+  styleUrl: './delete-dialog.component.scss',
 })
 export class DeleteDialogComponent {
-  @Input() name: string = "";
+  @Input() name: string = '';
   @Output() closeRemoveDialog = new EventEmitter<void>();
-  
-  cancelRemove()
-  {
+
+  cancelRemove() {
     this.closeRemoveDialog.emit();
   }
 }
diff --git a/frontend/src/app/components/organisms/footer/footer.component.scss b/frontend/src/app/components/organisms/footer/footer.component.scss
index 7d68c52..afb4238 100644
--- a/frontend/src/app/components/organisms/footer/footer.component.scss
+++ b/frontend/src/app/components/organisms/footer/footer.component.scss
@@ -1,54 +1,49 @@
-#container{
-    //fix position at the bottom of the page
-    position: fixed;
-    bottom: 0;
-
-    //format + borders
-    display: flex;
-    justify-content: space-evenly;
-    width: 100%;
-    height: 9vh;
-    background-color: var(--background-black);
-    opacity: 0.96;
-    color: var(--white);
-
-    //format navigation elements
-    .nav-element{
-        text-align: center;
-        width: 25%;
-        height: 100%;
-
-
-        .icons{
-            width: 30px;
-            max-width: 4.5rem;
-            filter: brightness(0) invert(1);
-            padding-top: 5%;
-        }
-        .text{
-            font-size: 12px;
-            padding: 0;
-            margin: 0;
-
-        }
+#container {
+  //fix position at the bottom of the page
+  position: fixed;
+  bottom: 0;
+
+  //format + borders
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  height: 9vh;
+  background-color: var(--background-black);
+  opacity: 0.96;
+  color: var(--white);
+
+  //format navigation elements
+  .nav-element {
+    text-align: center;
+    width: 25%;
+    height: 100%;
+
+    .icons {
+      width: 30px;
+      max-width: 4.5rem;
+      filter: brightness(0) invert(1);
+      padding-top: 5%;
     }
-    .highlight{
-        border-radius: 20px;
-        background-color: var(--white)!important;
-        .icons{
-            width: 33px;
-            max-width: 4.5rem;
-            filter:invert(0);
-        }
-        .text{
-          font-size: 14px;
-          font-weight: bold;
-          padding: 0;
-          margin: 0;
-          color: var(--font);
-      }
+    .text {
+      font-size: 12px;
+      padding: 0;
+      margin: 0;
     }
-
-
-
+  }
+  .highlight {
+    border-radius: 20px;
+    background-color: var(--white) !important;
+    .icons {
+      width: 33px;
+      max-width: 4.5rem;
+      filter: invert(0);
+    }
+    .text {
+      font-size: 14px;
+      font-weight: bold;
+      padding: 0;
+      margin: 0;
+      color: var(--font);
+    }
+  }
 }
diff --git a/frontend/src/app/components/organisms/footer/footer.component.ts b/frontend/src/app/components/organisms/footer/footer.component.ts
index ba6f765..2b14306 100644
--- a/frontend/src/app/components/organisms/footer/footer.component.ts
+++ b/frontend/src/app/components/organisms/footer/footer.component.ts
@@ -4,19 +4,32 @@ import { Router } from '@angular/router';
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
-  styleUrl: './footer.component.scss'
+  styleUrl: './footer.component.scss',
 })
+/**
+ * Represents the footer component of the application.
+ */
 export class FooterComponent {
   router: Router;
 
-  constructor(router:Router){
-    this.router=router;
+  constructor(router: Router) {
+    this.router = router;
   }
 
-  navigate(path:string){
+  /**
+   * Navigates to the specified path.
+   * @param path - The path to navigate to.
+   */
+  navigate(path: string): void {
     this.router.navigateByUrl(path);
   }
-  isOnPage(path:string):boolean{
-    return this.router.url==path;
+
+  /**
+   * Checks if the current page is the specified path.
+   * @param path - The path to check against.
+   * @returns A boolean indicating if the current page is the specified path.
+   */
+  isOnPage(path: string): boolean {
+    return this.router.url == path;
   }
 }
diff --git a/frontend/src/app/components/organisms/loginform/loginform.component.scss b/frontend/src/app/components/organisms/loginform/loginform.component.scss
index 7817497..d075186 100644
--- a/frontend/src/app/components/organisms/loginform/loginform.component.scss
+++ b/frontend/src/app/components/organisms/loginform/loginform.component.scss
@@ -1,35 +1,58 @@
+/**
+ * Styles for the login form component.
+ */
 p.create-account {
   font-size: 0.8rem;
   text-align: center;
   margin-top: 20px;
 
+  /**
+   * Styles for the create account link within the login form.
+   */
   a {
     font-weight: bold;
     color: var(--white);
     text-decoration: none;
     margin-top: 20px;
   }
+
+  /**
+   * Styles for the create account link when hovered.
+   */
   a:hover {
     text-decoration: underline;
   }
 }
 
+/**
+ * Styles for the eye image within the login form.
+ */
 .eyeimg {
   justify-content: center;
   align-self: center;
   margin-right: 8px;
   margin-top: 8px;
 
+  /**
+   * Styles for the image within the eye image.
+   */
   .img {
     height: 15px;
     width: 15px;
   }
 }
+
+/**
+ * Styles for the login form.
+ */
 .login {
   display: flex;
   justify-content: center;
   align-items: center;
 
+  /**
+   * Styles for the center container within the login form.
+   */
   .center {
     position: absolute;
     top: calc(50% - 10%);
@@ -44,6 +67,9 @@ p.create-account {
     border-radius: 16px;
     margin-top: 14%;
 
+    /**
+     * Styles for the form title within the center container.
+     */
     .form-title {
       color: var(--white);
       font-size: 1.7em;
@@ -51,6 +77,9 @@ p.create-account {
       margin-top: 30px;
     }
 
+    /**
+     * Styles for the form holder within the center container.
+     */
     .form-holder {
       border-radius: 15px;
       background-color: #fff;
@@ -62,6 +91,9 @@ p.create-account {
       -webkit-transition: all 0.3s ease;
     }
 
+    /**
+     * Styles for the button within the center container.
+     */
     .button {
       background-color: var(--green);
       color: var(--font);
@@ -79,6 +111,9 @@ p.create-account {
       visibility: visible;
       -webkit-transition: all 0.3s ease;
 
+      /**
+       * Styles for the button when hovered.
+       */
       &:hover {
         transition: all 0.1s ease;
         background-color: var(--white);
@@ -87,6 +122,9 @@ p.create-account {
     }
   }
 
+  /**
+   * Styles for the password container within the login form.
+   */
   .password {
     display: flex;
     width: 100%;
@@ -94,11 +132,21 @@ p.create-account {
   }
 }
 
+/**
+ * Media query for screens with a minimum width of 429px.
+ */
 @media screen and (min-width: 429px) {
+  /**
+   * Styles for the login form within the media query.
+   */
   .login {
     display: flex;
     justify-content: center;
     align-items: center;
+
+    /**
+     * Styles for the center container within the login form within the media query.
+     */
     .center {
       width: 65%;
       max-width: 300px;
@@ -111,6 +159,9 @@ p.create-account {
   }
 }
 
+/**
+ * Styles for the input fields within the login form.
+ */
 .input {
   border: 0;
   outline: none;
@@ -121,9 +172,16 @@ p.create-account {
   padding: 8px 15px;
   font-size: 12px;
 
+  /**
+   * Styles for the last input field within the login form.
+   */
   &:last-child {
     border-bottom: 0;
   }
+
+  /**
+   * Styles for the input field placeholder text within the login form.
+   */
   &::-webkit-input-placeholder {
     color: rgba(0, 0, 0, 0.4);
   }
diff --git a/frontend/src/app/components/organisms/loginform/loginform.component.ts b/frontend/src/app/components/organisms/loginform/loginform.component.ts
index 7139156..e0ee2b3 100644
--- a/frontend/src/app/components/organisms/loginform/loginform.component.ts
+++ b/frontend/src/app/components/organisms/loginform/loginform.component.ts
@@ -13,9 +13,11 @@ export class LoginformComponent {
   username: string = '';
   showPassword: boolean = false;
 
-  constructor(public authService: AuthService) {
-  }
+  constructor(public authService: AuthService) {}
 
+  /**
+   * Toggles the visibility of the password field.
+   */
   toggleType() {
     this.showPassword = !this.showPassword;
     this.passwordFieldType = this.showPassword ? 'text' : 'password';
@@ -24,16 +26,7 @@ export class LoginformComponent {
       : '../../../../assets/icons/aussicht.png';
   }
 
-  login()
-  {
+  login() {
     this.authService.loginUser(this.username, this.password);
   }
-
-
-
-
-
-
 }
-
-
diff --git a/frontend/src/app/components/organisms/ranking-table/ranking-table.component.scss b/frontend/src/app/components/organisms/ranking-table/ranking-table.component.scss
index b8fb474..e009e56 100644
--- a/frontend/src/app/components/organisms/ranking-table/ranking-table.component.scss
+++ b/frontend/src/app/components/organisms/ranking-table/ranking-table.component.scss
@@ -14,7 +14,6 @@ $font-weight-bold: bold;
     align-items: left;
     text-align: left;
 
-
     #hd-plce,
     #hd-wins {
       border-radius: 12px;
@@ -43,9 +42,7 @@ $font-weight-bold: bold;
     .uc {
       padding-left: 2%;
 
-
       &:last-child {
-
       }
     }
   }
@@ -57,5 +54,3 @@ $font-weight-bold: bold;
     background-color: var(--white);
   }
 }
-
-
diff --git a/frontend/src/app/components/organisms/roadmap/roadmap.component.scss b/frontend/src/app/components/organisms/roadmap/roadmap.component.scss
index 08f279b..c2eddfb 100644
--- a/frontend/src/app/components/organisms/roadmap/roadmap.component.scss
+++ b/frontend/src/app/components/organisms/roadmap/roadmap.component.scss
@@ -1,3 +1,6 @@
+/**
+ * Styles for the roadmap component.
+ */
 .map {
   margin-top: 130px;
   height: 100vh;
@@ -8,18 +11,30 @@
   margin-bottom: 10vh;
 }
 
+/**
+ * Styles for hiding the scrollbar in the roadmap component.
+ */
 .map::-webkit-scrollbar {
   display: none;
 }
 
+/**
+ * Styles for the buttons in the roadmap component.
+ */
 .button {
   margin-right: 50px;
 }
 
+/**
+ * Styles for the last button in the roadmap component.
+ */
 .button:last-child {
   margin-bottom: 11vh;
 }
 
+/**
+ * Styles for the odd-numbered buttons in the roadmap component.
+ */
 .button:nth-child(odd) {
   margin-left: 100px;
 }
diff --git a/frontend/src/app/components/organisms/roadmap/roadmap.component.ts b/frontend/src/app/components/organisms/roadmap/roadmap.component.ts
index af0aa9b..fbf6765 100644
--- a/frontend/src/app/components/organisms/roadmap/roadmap.component.ts
+++ b/frontend/src/app/components/organisms/roadmap/roadmap.component.ts
@@ -1,19 +1,23 @@
 import { Component, OnInit } from '@angular/core';
 import { EventService } from 'app/services/event.service';
-import {MainpageService} from 'app/services/mainpage.service';
+import { MainpageService } from 'app/services/mainpage.service';
 @Component({
   selector: 'app-roadmap',
   templateUrl: './roadmap.component.html',
   styleUrl: './roadmap.component.scss',
 })
-export class RoadmapComponent implements OnInit{
-
-  constructor(public eventservice:EventService, public mainpageservice: MainpageService)
-  {
-      this.eventservice = eventservice;
+export class RoadmapComponent implements OnInit {
+  constructor(
+    public eventservice: EventService,
+    public mainpageservice: MainpageService,
+  ) {
+    this.eventservice = eventservice;
   }
+  /**
+   * Initializes the component.
+   * This method is called after the component has been created and initialized.
+   */
   ngOnInit(): void {
     this.mainpageservice.getListOfAllTasks();
   }
-
 }
diff --git a/frontend/src/app/components/organisms/signupform/signupform.component.scss b/frontend/src/app/components/organisms/signupform/signupform.component.scss
index 07e3553..10ce3fb 100644
--- a/frontend/src/app/components/organisms/signupform/signupform.component.scss
+++ b/frontend/src/app/components/organisms/signupform/signupform.component.scss
@@ -1,105 +1,102 @@
+/**
+ * Styles for the signup form component.
+ */
 
 p.create-account {
-    font-size: 0.8rem;
-    text-align: center;
+  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;
+  margin-top: 8px;
+
+  .img {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    a {
-      font-weight: bold;
+  .center {
+    position: absolute;
+    top: calc(50% - 10%);
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    width: 65%;
+    max-width: 400px;
+    z-index: 5;
+    -webkit-transition: all 0.3s ease;
+    background-color: var(--background-black);
+    padding: 15px;
+    border-radius: 16px;
+    margin-top: 14%;
+
+    .form-title {
       color: var(--white);
-      text-decoration: none;
-      margin-top: 20px;
-    }
-    a:hover {
-      text-decoration: underline;
+      font-size: 1.7em;
+      text-align: center;
+      margin-top: 30px;
     }
-  }
 
-  .eyeimg {
-    justify-content: center;
-    align-self: center;
-    margin-right: 8px;
-    margin-top: 8px;
-  
-    .img {
-      height: 15px;
-      width: 15px;
+    .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;
     }
-  }
 
-.login
-{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-   
+    .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;
 
-    .center {
-        position: absolute;
-        top: calc(50% - 10%);
-        left: 50%;
-        -webkit-transform: translate(-50%, -50%);
-        width: 65%;
-        max-width: 400px;
-        z-index: 5;
-        -webkit-transition: all .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 .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 .3s ease;
-    
-            &:hover {
-                transition: all .1s ease;
-                background-color: var(--white);
-                color: var(--font);
-            }
-        }
+      &:hover {
+        transition: all 0.1s ease;
+        background-color: var(--white);
+        color: var(--font);
+      }
     }
+  }
 
-    .password {
-        display: flex;
-        width: 100%;
-        justify-content: space-between;
-      }
+  .password {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 }
 
 @media screen and (min-width: 429px) {
@@ -118,4 +115,3 @@ p.create-account {
     }
   }
 }
-
diff --git a/frontend/src/app/components/organisms/signupform/signupform.component.ts b/frontend/src/app/components/organisms/signupform/signupform.component.ts
index 83bf7d0..9d7ead3 100644
--- a/frontend/src/app/components/organisms/signupform/signupform.component.ts
+++ b/frontend/src/app/components/organisms/signupform/signupform.component.ts
@@ -4,14 +4,17 @@ import { EventService } from 'app/services/event.service';
 @Component({
   selector: 'app-signupform',
   templateUrl: './signupform.component.html',
-  styleUrl: './signupform.component.scss'
+  styleUrl: './signupform.component.scss',
 })
 export class SignupformComponent {
-
   passwordFieldType: string = 'password';
   img: string = '../../../assets/ausblenden.png';
   showPassword: boolean = false;
 
+  /**
+   * Toggles the visibility of the password field.
+   * Updates the password field type and the image source accordingly.
+   */
   toggleType() {
     this.showPassword = !this.showPassword;
     this.passwordFieldType = this.showPassword ? 'text' : 'password';
@@ -20,11 +23,5 @@ export class SignupformComponent {
       : '../../../assets/icons/aussicht.png';
   }
 
-  constructor(public event:EventService) {}
-
-
-  }
-
-
-
-
+  constructor(public event: EventService) {}
+}
diff --git a/frontend/src/app/components/organisms/statistic-header/statistic-header.component.scss b/frontend/src/app/components/organisms/statistic-header/statistic-header.component.scss
index dab77b9..6722c08 100644
--- a/frontend/src/app/components/organisms/statistic-header/statistic-header.component.scss
+++ b/frontend/src/app/components/organisms/statistic-header/statistic-header.component.scss
@@ -1,8 +1,16 @@
+/**
+ * Styles for the header component of the statistics section.
+ */
 .header {
   margin: 0;
   padding: 0;
-  background: rgb(0,0,0);
-  background: linear-gradient(90deg, rgba(0,0,0,1) 14%, rgba(0,75,17,1) 82%, rgba(0,75,17,1) 100%);
+  background: rgb(0, 0, 0);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 1) 14%,
+    rgba(0, 75, 17, 1) 82%,
+    rgba(0, 75, 17, 1) 100%
+  );
   width: 100%;
   height: 130px;
   position: fixed;
@@ -10,11 +18,18 @@
   z-index: 1;
 
   box-shadow: 0 0 2px var(--black-2) 2px var(--black-2);
+
+  /**
+   * Styles for the paragraphs within the header component.
+   */
   p {
     margin: 0;
     padding: 0;
   }
 
+  /**
+   * Styles for the image within the header component.
+   */
   img {
     width: 150px;
     height: 50px;
@@ -25,6 +40,9 @@
     margin-left: 18px;
   }
 
+  /**
+   * Styles for the statistic container within the header component.
+   */
   .statistic-container {
     width: calc(100% - 20px); /* 20px für den Rand */
     margin: 0 auto; /* Zentriert den Container horizontal */
@@ -32,14 +50,23 @@
     display: flex;
     justify-content: space-between;
 
+    /**
+     * Styles for the time section within the statistic container.
+     */
     .time {
       width: 30vw;
       margin-left: 10px;
 
+      /**
+       * Styles for the spans within the time section.
+       */
       span {
         color: var(--green);
       }
 
+      /**
+       * Styles for the h2 headings within the time section.
+       */
       h2 {
         margin: 0;
         margin-top: 10px;
@@ -47,14 +74,23 @@
       }
     }
 
+    /**
+     * Styles for the steps section within the statistic container.
+     */
     .steps {
       width: 30vw;
       margin-left: 35px;
 
+      /**
+       * Styles for the spans within the steps section.
+       */
       span {
         color: var(--green);
       }
 
+      /**
+       * Styles for the h2 headings within the steps section.
+       */
       h2 {
         margin: 0;
         margin-top: 10px;
@@ -62,17 +98,27 @@
       }
     }
 
+    /**
+     * Styles for the streak section within the statistic container.
+     */
     .streak {
       width: 30vw;
       display: flex;
       justify-content: center;
       align-items: start;
+
+      /**
+       * Styles for the images within the streak section.
+       */
       img {
         width: 25px;
         height: 25px;
         margin-right: 8px;
       }
 
+      /**
+       * Styles for the h2 headings within the streak section.
+       */
       h2 {
         margin: 0;
         margin-top: 7px;
diff --git a/frontend/src/app/components/organisms/statistic-header/statistic-header.component.ts b/frontend/src/app/components/organisms/statistic-header/statistic-header.component.ts
index f787e51..ad6e44a 100644
--- a/frontend/src/app/components/organisms/statistic-header/statistic-header.component.ts
+++ b/frontend/src/app/components/organisms/statistic-header/statistic-header.component.ts
@@ -5,17 +5,22 @@ import { MainpageService } from 'app/services/mainpage.service';
 @Component({
   selector: 'app-statistic-header',
   templateUrl: './statistic-header.component.html',
-  styleUrl: './statistic-header.component.scss'
+  styleUrl: './statistic-header.component.scss',
 })
 export class StatisticHeaderComponent {
-
-  constructor(public eventservice:EventService, public mainpageservice: MainpageService )
-  {
-      this.eventservice = eventservice;
+  constructor(
+    public eventservice: EventService,
+    public mainpageservice: MainpageService,
+  ) {
+    this.eventservice = eventservice;
   }
 
+  /**
+   * Initializes the component.
+   * This lifecycle hook is called after Angular has initialized all data-bound properties of a directive.
+   *
+   */
   ngOnInit(): void {
     this.mainpageservice.getStreak();
   }
-
 }
diff --git a/frontend/src/app/components/pages/addfriendpage/addfriendpage.component.scss b/frontend/src/app/components/pages/addfriendpage/addfriendpage.component.scss
index d165c79..d5ab8fe 100644
--- a/frontend/src/app/components/pages/addfriendpage/addfriendpage.component.scss
+++ b/frontend/src/app/components/pages/addfriendpage/addfriendpage.component.scss
@@ -1,74 +1,100 @@
+/**
+ * Styles for the add friend page component.
+ */
 .main {
-    width: 100%;
-    height: 100vh;
-    background-color: var(--background-black);
+  width: 100%;
+  height: 100vh;
+  background-color: var(--background-black);
 
-    hr {
-      background-color: var(--white);
+  /**
+     * Styles for the horizontal rule element.
+     */
+  hr {
+    background-color: var(--white);
+    margin-top: 1.5rem;
+    width: 93vw;
+  }
+
+  /**
+     * Styles for the search button container.
+     */
+  .btn-search-container {
+    display: flex;
+    justify-content: space-between;
+    width: 97vw;
+
+    /**
+       * Styles for the search bar container.
+       */
+    .searchbar-container {
+      display: flex;
+      align-items: center;
       margin-top: 1.5rem;
+      background-color: var(--white);
       width: 93vw;
+      border-radius: 12px;
+      gap: 1rem;
+      margin-left: 10px;
     }
 
-    .btn-search-container {
-      display: flex;
-      justify-content: space-between;
-      width: 97vw;
-      .searchbar-container {
-        display: flex;
-        align-items: center;
-        margin-top: 1.5rem;
-        background-color: var(--white);
-        width: 93vw;
-        border-radius: 12px;
-        gap: 1rem;
-        margin-left: 10px;
-      }
-
-      .img-container {
-        margin-top: 5px;
-        margin-left: 0.5rem;
-        filter: invert(100%);
-
-      }
-
-      i.img-container2
-      {
-        margin-top: 20px;
-        margin-right: 1rem;
-        filter: invert(100%);
-      }
-
-      .return-button
-      {
-        background-color: var(--green);
-        color: var(--white);
-        width: 40px;
-        height: auto;
-        border: none;
-        border-radius: 50%;
-        font-size: 1rem;
-        cursor: pointer;
-        transition: 0.3s;
-        margin-left: 0.6rem;
-        margin-top: 1.5rem;
-        transition: background-color 0.1s ease; /* Übergangseigenschaft für die Hintergrundfarbe */
-
-
-      }
-
-      .addfriends-button:active {
-        background-color: lighten(#00ff7f, 30%); /* Die Hintergrundfarbe wird beim Klicken um 20% aufgehellt */
+    /**
+       * Styles for the image container.
+       */
+    .img-container {
+      margin-top: 5px;
+      margin-left: 0.5rem;
+      filter: invert(100%);
     }
+
+    /**
+       * Styles for the second image container.
+       */
+    i.img-container2 {
+      margin-top: 20px;
+      margin-right: 1rem;
+      filter: invert(100%);
     }
 
-    .users-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+    /**
+       * Styles for the return button.
+       */
+    .return-button {
+      background-color: var(--green);
+      color: var(--white);
+      width: 40px;
+      height: auto;
+      border: none;
+      border-radius: 50%;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: 0.3s;
+      margin-left: 0.6rem;
       margin-top: 1.5rem;
-      gap: 1rem;
-      height: 65vh;
-      overflow: hidden;
-      overflow-y: auto;
+      transition: background-color 0.1s ease; /* Transition property for background color */
+    }
+
+    /**
+       * Styles for the active add friends button.
+       */
+    .addfriends-button:active {
+      background-color: lighten(
+        #00ff7f,
+        30%
+      ); /* Lightens the background color by 30% when clicked */
     }
   }
+
+  /**
+     * Styles for the users container.
+     */
+  .users-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 1.5rem;
+    gap: 1rem;
+    height: 65vh;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
diff --git a/frontend/src/app/components/pages/addfriendpage/addfriendpage.component.ts b/frontend/src/app/components/pages/addfriendpage/addfriendpage.component.ts
index 9ad4cea..e2caf8c 100644
--- a/frontend/src/app/components/pages/addfriendpage/addfriendpage.component.ts
+++ b/frontend/src/app/components/pages/addfriendpage/addfriendpage.component.ts
@@ -1,21 +1,20 @@
-
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-addfriendpage',
   templateUrl: './addfriendpage.component.html',
-  styleUrl: './addfriendpage.component.scss'
+  styleUrl: './addfriendpage.component.scss',
 })
 export class AddfriendpageComponent {
-
-  constructor(private router: Router) { 
+  constructor(private router: Router) {
     this.router = router;
   }
 
+  /**
+   * Navigates back to the friends page.
+   */
   returnToFriends() {
     this.router.navigate(['/friends']);
   }
-
-
 }
diff --git a/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.scss b/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.scss
index 367b249..fcb0dc4 100644
--- a/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.scss
+++ b/frontend/src/app/components/pages/authenticationpage/authenticationpage.component.scss
@@ -1,4 +1,6 @@
-
+/**
+ * Styles for the authentication page component.
+ */
 .main {
   width: 100%;
   height: 100vh;
@@ -14,10 +16,16 @@
   align-items: start;
   flex-direction: column;
 
+  /**
+   * Styles for the logo container.
+   */
   .logo-contaier {
     width: 100%;
   }
 
+  /**
+   * Styles for the welcome paragraph.
+   */
   p.welcome {
     color: var(--primary-color);
     font-size: 16px;
@@ -32,36 +40,43 @@
     margin-bottom: 0;
   }
 
-
+  /**
+   * Styles for the logo image.
+   */
   .logo {
     filter: invert(100%);
     margin-top: 50px;
   }
 
-
+  /**
+   * Styles for the image.
+   */
   .img {
     z-index: 20;
   }
 }
 
-    p.welcome {
-        color: var(--primary-color);
-        font-size: 16px;
-        text-align: center;
-        height: 20px;
-        width: 100%;
-        margin-top: 20px;
-        font-weight: bold;
-        font-style: normal;
-        font-size: 20px;
-        padding: 0;
-        margin-bottom: 0;
-      }
- 
-      .logo
-      {
-        filter: invert(100%);
-        margin-top: 50px;
-      }
-
+/**
+ * Styles for the welcome paragraph.
+ */
+p.welcome {
+  color: var(--primary-color);
+  font-size: 16px;
+  text-align: center;
+  height: 20px;
+  width: 100%;
+  margin-top: 20px;
+  font-weight: bold;
+  font-style: normal;
+  font-size: 20px;
+  padding: 0;
+  margin-bottom: 0;
+}
 
+/**
+ * Styles for the logo image.
+ */
+.logo {
+  filter: invert(100%);
+  margin-top: 50px;
+}
diff --git a/frontend/src/app/components/pages/friendpage/friendpage.component.scss b/frontend/src/app/components/pages/friendpage/friendpage.component.scss
index 35511d8..4d08be2 100644
--- a/frontend/src/app/components/pages/friendpage/friendpage.component.scss
+++ b/frontend/src/app/components/pages/friendpage/friendpage.component.scss
@@ -1,17 +1,29 @@
+/**
+ * Styles for the friendpage component.
+ */
 .main {
   width: 100%;
   background-color: var(--background-black);
 
+  /**
+   * Styles for the horizontal rule element.
+   */
   hr {
     background-color: var(--white);
     margin-top: 1.5rem;
     width: 93vw;
   }
 
+  /**
+   * Styles for the search button container.
+   */
   .btn-search-container {
     display: flex;
     justify-content: space-between;
 
+    /**
+     * Styles for the search bar container.
+     */
     .searchbar-container {
       display: flex;
       justify-content: start;
@@ -22,23 +34,29 @@
       border-radius: 12px;
       gap: 0.5rem;
       margin-left: 10px;
-
     }
 
+    /**
+     * Styles for the image container.
+     */
     .img-container {
       margin-top: 2px;
       margin-left: 0.5rem;
       filter: invert(100%);
     }
 
-    i.img-container2
-    {
+    /**
+     * Styles for the second image container.
+     */
+    i.img-container2 {
       margin-top: 2px;
       filter: invert(100%);
     }
 
-    .addfriends-button
-    {
+    /**
+     * Styles for the add friends button.
+     */
+    .addfriends-button {
       background-color: var(--green);
       color: var(--white);
       width: 40px;
@@ -50,16 +68,20 @@
       transition: 0.3s;
       margin-right: 1rem;
       margin-top: 1.5rem;
-      transition: background-color 0.1s ease; /* Übergangseigenschaft für die Hintergrundfarbe */
-
-
+      transition: background-color 0.1s ease;
     }
 
+    /**
+     * Styles for the active state of the add friends button.
+     */
     .addfriends-button:active {
-      background-color: lighten(#00ff7f, 30%); /* Die Hintergrundfarbe wird beim Klicken um 20% aufgehellt */
-  }
+      background-color: lighten(#00ff7f, 30%);
+    }
   }
 
+  /**
+   * Styles for the users container.
+   */
   .users-container {
     display: flex;
     flex-direction: column;
@@ -68,10 +90,10 @@
     height: 100vh;
   }
 
-  .usercard:last-child
-  {
+  /**
+   * Styles for the last user card.
+   */
+  .usercard:last-child {
     margin-bottom: 11vh;
   }
-
-
 }
diff --git a/frontend/src/app/components/pages/friendpage/friendpage.component.ts b/frontend/src/app/components/pages/friendpage/friendpage.component.ts
index 390547d..1f8e9b2 100644
--- a/frontend/src/app/components/pages/friendpage/friendpage.component.ts
+++ b/frontend/src/app/components/pages/friendpage/friendpage.component.ts
@@ -8,11 +8,19 @@ import { Router } from '@angular/router';
   styleUrl: './friendpage.component.scss',
 })
 export class FriendpageComponent {
-  constructor(public eventService: EventService, private router: Router) {
+  constructor(
+    public eventService: EventService,
+    private router: Router,
+  ) {
     this.eventService = eventService;
     this.router = router;
   }
 
+  /**
+   * Mockdatas
+   * Array of user objects.
+   * Each user object has an `id` and a `name` property.
+   */
   users = [
     { id: 3, name: 'Alice Smith' },
     { id: 4, name: 'Bob Johnson' },
@@ -26,8 +34,11 @@ export class FriendpageComponent {
     { id: 12, name: 'Alexander Garcia' },
   ];
 
+  /**
+   * This method logs a message to the console and navigates to the '/addfriend' route.
+   */
   addFriend() {
     console.log('add friend');
     this.router.navigate(['/addfriend']);
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/components/pages/landingpage/landingpage.component.scss b/frontend/src/app/components/pages/landingpage/landingpage.component.scss
index 8ba1e9f..73d892a 100644
--- a/frontend/src/app/components/pages/landingpage/landingpage.component.scss
+++ b/frontend/src/app/components/pages/landingpage/landingpage.component.scss
@@ -1,7 +1,7 @@
-
-
-.center-container
-{
+/**
+ * Styles for the landing page component.
+ */
+.center-container {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -9,6 +9,10 @@
   width: 100%;
   height: 100vh;
   background-color: var(--background-black);
+
+  /**
+   * Styles for the main container.
+   */
   .main {
     width: 100%;
     height: 100vh;
@@ -18,24 +22,36 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
-   
+
+    /**
+     * Styles for the first heading.
+     */
     .h1-1 {
       margin: 0;
       text-align: center;
       margin-top: 15%;
     }
-  
+
+    /**
+     * Styles for the second heading.
+     */
     .h1-2 {
       margin: 0;
       text-align: center;
       font-size: 20px;
     }
-  
+
+    /**
+     * Styles for the image.
+     */
     .img {
       width: 300px;
       height: 300px;
     }
-  
+
+    /**
+     * Styles for the authentication section.
+     */
     .auth {
       display: flex;
       width: 50%;
@@ -43,7 +59,10 @@
       margin-top: 80px;
       gap: 30px;
     }
-  
+
+    /**
+     * Styles for the button.
+     */
     .button {
       background-color: var(--green);
       color: var(--font);
diff --git a/frontend/src/app/components/pages/landingpage/landingpage.component.ts b/frontend/src/app/components/pages/landingpage/landingpage.component.ts
index eb2c695..c0397c8 100644
--- a/frontend/src/app/components/pages/landingpage/landingpage.component.ts
+++ b/frontend/src/app/components/pages/landingpage/landingpage.component.ts
@@ -4,22 +4,27 @@ import { Router } from '@angular/router';
 @Component({
   selector: 'app-landingpage',
   templateUrl: './landingpage.component.html',
-  styleUrl: './landingpage.component.scss'
+  styleUrl: './landingpage.component.scss',
 })
+/**
+ * Represents the landing page component.
+ */
 export class LandingpageComponent {
-
-  constructor( private router: Router) {
-    
+  constructor(private router: Router) {
     this.router = router;
   }
 
-  login()
-  {
+  /**
+   * Navigates to the login page.
+   */
+  login() {
     this.router.navigate(['/auth/login']);
   }
 
-  signup()
-  {
+  /**
+   * Navigates to the signup page.
+   */
+  signup() {
     this.router.navigate(['/auth/signup']);
   }
 }
diff --git a/frontend/src/app/components/pages/mainpage/mainpage.component.scss b/frontend/src/app/components/pages/mainpage/mainpage.component.scss
index 941efaa..1639e6e 100644
--- a/frontend/src/app/components/pages/mainpage/mainpage.component.scss
+++ b/frontend/src/app/components/pages/mainpage/mainpage.component.scss
@@ -1,17 +1,19 @@
-
-.center-container
-{
+/**
+ * Styles for the mainpage component.
+ */
+.center-container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100%;
-
   background-color: var(--background-black);
 
+  /**
+   * Styles for the main container.
+   */
   .main {
     width: 100%;
-
     display: flex;
     flex-direction: column;
     max-width: 428px;
@@ -20,6 +22,9 @@
     padding: 0;
     top: 0;
 
+    /**
+     * Styles for the paragraph elements.
+     */
     p {
       margin: 0;
       padding: 0;
diff --git a/frontend/src/app/components/pages/mainpage/mainpage.component.ts b/frontend/src/app/components/pages/mainpage/mainpage.component.ts
index ed16e4e..5fecd60 100644
--- a/frontend/src/app/components/pages/mainpage/mainpage.component.ts
+++ b/frontend/src/app/components/pages/mainpage/mainpage.component.ts
@@ -5,15 +5,6 @@ import { LoaderService } from 'app/services/loader.service';
 @Component({
   selector: 'app-mainpage',
   templateUrl: './mainpage.component.html',
-  styleUrl: './mainpage.component.scss'
+  styleUrl: './mainpage.component.scss',
 })
-export class MainpageComponent implements OnInit{
-
-  constructor(private LoaderService: LoaderService) { }
-
-  ngOnInit(): void {
-
-
-  }
-
-}
+export class MainpageComponent {}
diff --git a/frontend/src/app/components/pages/profilepage/profilepage.component.scss b/frontend/src/app/components/pages/profilepage/profilepage.component.scss
index 3f60341..51ff2d7 100644
--- a/frontend/src/app/components/pages/profilepage/profilepage.component.scss
+++ b/frontend/src/app/components/pages/profilepage/profilepage.component.scss
@@ -1,55 +1,72 @@
-#wrapper{
-    background-color: var(--background-black);
-    overflow-y: scroll;
-    height: 100vh;
+/**
+ * Styles for the profile page component.
+ */
+
+#wrapper {
+  background-color: var(--background-black);
+  overflow-y: scroll;
+  height: 100vh;
 }
+
 #settings {
-    position: fixed;
-    top: 0.5em;
-    right: 0.5em;
-    width: 1.5em;
-    height: auto;
-    filter: invert(100%);
+  position: fixed;
+  top: 0.5em;
+  right: 0.5em;
+  width: 1.5em;
+  height: auto;
+  filter: invert(100%);
 }
+
 #avatar {
-    width: 100%;
-    height: 10em;
-    background: rgb(0,0,0);
-    background: linear-gradient(90deg, rgba(0,0,0,1) 14%, rgba(0,75,17,1) 82%, rgba(0,75,17,1) 100%);
+  width: 100%;
+  height: 10em;
+  background: rgb(0, 0, 0);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 1) 14%,
+    rgba(0, 75, 17, 1) 82%,
+    rgba(0, 75, 17, 1) 100%
+  );
 }
-#avatar-svg{
-    height: 100%;
-    padding-top: 1.5em;
-    margin-top: auto;
-    margin-left: calc(50% - 80px);
-    clip-path: inset(0px 0px 1.5em 0px);
 
+#avatar-svg {
+  height: 100%;
+  padding-top: 1.5em;
+  margin-top: auto;
+  margin-left: calc(50% - 80px);
+  clip-path: inset(0px 0px 1.5em 0px);
 }
 
 //sections below the avatar
-@mixin section{
-    text-indent: 1em;
-    background-color: var(--black-3);
-    border-radius: 2em;
-    margin: 1em;
-    h2{
-        padding-top: 1em;
-    }
-}
-
-#data{
-    @include section;
-    height: 20vh;
-}
-#statistics{
-    @include section;
-    min-height: 30vh;
-    margin-bottom: 10vh;
-}
-#entrys-wrapper{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 1em;
-    padding-bottom: 1em;
+
+/**
+ * Mixin for styling sections.
+ */
+@mixin section {
+  text-indent: 1em;
+  background-color: var(--black-3);
+  border-radius: 2em;
+  margin: 1em;
+  h2 {
+    padding-top: 1em;
+  }
+}
+
+#data {
+  @include section;
+  height: 20vh;
+}
+
+#statistics {
+  @include section;
+  min-height: 30vh;
+  margin-bottom: 10vh;
+}
+
+#entrys-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1em;
+  padding-bottom: 1em;
 }
diff --git a/frontend/src/app/components/pages/profilepage/profilepage.component.ts b/frontend/src/app/components/pages/profilepage/profilepage.component.ts
index 0d4b619..5265d9f 100644
--- a/frontend/src/app/components/pages/profilepage/profilepage.component.ts
+++ b/frontend/src/app/components/pages/profilepage/profilepage.component.ts
@@ -5,28 +5,44 @@ import { UserService } from 'app/services/user.service';
 @Component({
   selector: 'app-profilepage',
   templateUrl: './profilepage.component.html',
-  styleUrl: './profilepage.component.scss'
+  styleUrl: './profilepage.component.scss',
 })
-export class ProfilepageComponent implements OnInit{
-  name: string = "";
-  email: string = "";
+/**
+ * Represents the profile page component.
+ * This component displays the user's profile information and statistics.
+ */
+export class ProfilepageComponent implements OnInit {
+  name: string = '';
+  email: string = '';
 
-  statistics: {name: string, value: string}[] = [
-    {name: 'Distance run', value: '0 km'},
-    {name: 'Time active', value: '00:00:00'},
-    {name: 'Calories burned', value: '0 kcal'},
-    {name: 'Steps', value: '0'},
+  /**
+   * Represents the statistics for a user's profile.
+   * Each statistic has a name and a corresponding value.
+   */
+  statistics: { name: string; value: string }[] = [
+    { name: 'Distance run', value: '0 km' },
+    { name: 'Time active', value: '00:00:00' },
+    { name: 'Calories burned', value: '0 kcal' },
+    { name: 'Steps', value: '0' },
   ];
 
-  router:Router;
-  constructor(router: Router, public userService: UserService) {
+  router: Router;
+
+  constructor(
+    router: Router,
+    public userService: UserService,
+  ) {
     this.router = router;
   }
+
   ngOnInit(): void {
     this.userService.getUserInformations();
   }
 
-  settings(){
+  /**
+   * Navigates to the settings page.
+   */
+  settings() {
     this.router.navigate(['/settings']);
   }
 }
diff --git a/frontend/src/app/components/pages/ranking-page/ranking-page.component.scss b/frontend/src/app/components/pages/ranking-page/ranking-page.component.scss
index 9df3bed..7c50128 100644
--- a/frontend/src/app/components/pages/ranking-page/ranking-page.component.scss
+++ b/frontend/src/app/components/pages/ranking-page/ranking-page.component.scss
@@ -1,15 +1,27 @@
-#pg-container{
-    min-height: 100vh;
-    background-color: var(--background-black);
-    #pg-ranked-header{
-        text-align: center;
-        padding-top: 1em;
-        padding-bottom: 1em;
-        #headline-wrapper{
-            border: 1px solid var(--white);
-            border-radius: 5em;
-            margin-left:4%;
-            margin-right:4%;
-        }
+/**
+ * Styles for the ranking page component.
+ */
+
+#pg-container {
+  min-height: 100vh;
+  background-color: var(--background-black);
+
+  /**
+     * Styles for the ranked header section.
+     */
+  #pg-ranked-header {
+    text-align: center;
+    padding-top: 1em;
+    padding-bottom: 1em;
+
+    /**
+         * Styles for the headline wrapper.
+         */
+    #headline-wrapper {
+      border: 1px solid var(--white);
+      border-radius: 5em;
+      margin-left: 4%;
+      margin-right: 4%;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/frontend/src/app/components/pages/ranking-page/ranking-page.component.ts b/frontend/src/app/components/pages/ranking-page/ranking-page.component.ts
index 0148f71..f532bcb 100644
--- a/frontend/src/app/components/pages/ranking-page/ranking-page.component.ts
+++ b/frontend/src/app/components/pages/ranking-page/ranking-page.component.ts
@@ -3,10 +3,12 @@ import { Component, Input } from '@angular/core';
 @Component({
   selector: 'app-ranking-page',
   templateUrl: './ranking-page.component.html',
-  styleUrls: ['./ranking-page.component.scss']
+  styleUrls: ['./ranking-page.component.scss'],
 })
 export class RankingPageComponent {
-  //Default values for showcase
+  /**
+   * Mockdatas for the Rankingpage
+   */
   users: any[] = [
     { name: 'Susi', placement: 1, winstreak: 43 },
     { name: 'Max', placement: 2, winstreak: 38 },
diff --git a/frontend/src/app/components/pages/settingspage/settingspage.component.scss b/frontend/src/app/components/pages/settingspage/settingspage.component.scss
index b0eb602..4fad819 100644
--- a/frontend/src/app/components/pages/settingspage/settingspage.component.scss
+++ b/frontend/src/app/components/pages/settingspage/settingspage.component.scss
@@ -1,67 +1,84 @@
-#wrapper{
-    background-color: var(--background-black);
-    height: 100vh;
+/**
+ * Styles for the settings page component.
+ */
+
+#wrapper {
+  background-color: var(--background-black);
+  height: 100vh;
 }
-#header{
-    height: 4em;
-    background: rgb(0,0,0);
-    background: linear-gradient(90deg, rgba(0,0,0,1) 14%, rgba(0,75,17,1) 82%, rgba(0,75,17,1) 100%);
-    display: flex;
-    flex: 1 2 auto;
-    justify-content: space-between;
+
+#header {
+  height: 4em;
+  background: rgb(0, 0, 0);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 1) 14%,
+    rgba(0, 75, 17, 1) 82%,
+    rgba(0, 75, 17, 1) 100%
+  );
+  display: flex;
+  flex: 1 2 auto;
+  justify-content: space-between;
 }
-#close-settings{
-    width: auto;
-    height: 60%;
-    margin: auto;
-    margin-left: 5%;
-    filter: invert(1);
-    padding-bottom: 0.3em;
+
+#close-settings {
+  width: auto;
+  height: 60%;
+  margin: auto;
+  margin-left: 5%;
+  filter: invert(1);
+  padding-bottom: 0.3em;
 }
-#headline{
-    font-size: 2em;
-    color: var(--white);
-    margin: auto;
+
+#headline {
+  font-size: 2em;
+  color: var(--white);
+  margin: auto;
 }
-#save{
-    margin: auto;
-    margin-right: 5%;
-    font-size: 1.2em;
-    color: var(--white);
-    text-align: right;
+
+#save {
+  margin: auto;
+  margin-right: 5%;
+  font-size: 1.2em;
+  color: var(--white);
+  text-align: right;
 }
-#avatar{
-    height: 30vh;
-    text-align: center;
-    padding-top: 1em;
-    margin: 1em 1em 1em 1em;
-    background-color: var(--black-3);
-    border-radius: 1em;
+
+#avatar {
+  height: 30vh;
+  text-align: center;
+  padding-top: 1em;
+  margin: 1em 1em 1em 1em;
+  background-color: var(--black-3);
+  border-radius: 1em;
 }
-#avatar-img{
-    height: 70%;
+
+#avatar-img {
+  height: 70%;
 }
-#change-avatar{
-    margin-top: 0.5em;
-    font-size: 1.5em;
+
+#change-avatar {
+  margin-top: 0.5em;
+  font-size: 1.5em;
 }
+
 @media (height <= 400px) {
-    #change-avatar{
-        font-size: 0.5em;
-    }
+  #change-avatar {
+    font-size: 0.5em;
+  }
 }
-#logout{
-    text-align: center;
-}
-#logout-bt{
-    background-color: var(--green);
-    color: var(--black-2);
-    border-radius: 1em;
-    border-width: 0em;
-    height: 35px;
-    width: 50%;
-    font-size: 1em;
-    font-weight: bold;
 
+#logout {
+  text-align: center;
+}
 
+#logout-bt {
+  background-color: var(--green);
+  color: var(--black-2);
+  border-radius: 1em;
+  border-width: 0em;
+  height: 35px;
+  width: 50%;
+  font-size: 1em;
+  font-weight: bold;
 }
diff --git a/frontend/src/app/components/pages/settingspage/settingspage.component.ts b/frontend/src/app/components/pages/settingspage/settingspage.component.ts
index ef61520..a5f528f 100644
--- a/frontend/src/app/components/pages/settingspage/settingspage.component.ts
+++ b/frontend/src/app/components/pages/settingspage/settingspage.component.ts
@@ -4,20 +4,29 @@ import { Router } from '@angular/router';
 @Component({
   selector: 'app-settingspage',
   templateUrl: './settingspage.component.html',
-  styleUrl: './settingspage.component.scss'
+  styleUrl: './settingspage.component.scss',
 })
+/**
+ * Represents the settings page component.
+ */
 export class SettingspageComponent {
+  @Input() settings = [
+    { name: 'name', value: 'David Hasselhoff' },
+    { name: 'email', value: 'david.hasselhoff@duo-gradus.de' },
+  ];
 
-  @Input() settings =[{name:'name', value:'David Hasselhoff'},
-                      {name:'email',value:'david.hasselhoff@duo-gradus.de'}];
-
-  constructor(private router: Router) {
-  }
+  constructor(private router: Router) {}
 
+  /**
+   * Navigates back to the profile page.
+   */
   goBack() {
     this.router.navigate(['/profile']);
   }
 
+  /**
+   * Logs out the user and navigates to the home page.
+   */
   logout() {
     localStorage.removeItem('credentials');
     this.router.navigate(['/home']);
diff --git a/frontend/src/app/pipes/timer.pipe.ts b/frontend/src/app/pipes/timer.pipe.ts
index 3fd2204..016e8c1 100644
--- a/frontend/src/app/pipes/timer.pipe.ts
+++ b/frontend/src/app/pipes/timer.pipe.ts
@@ -4,6 +4,13 @@ import { Pipe, PipeTransform } from '@angular/core';
   name: 'timer',
 })
 export class TimerPipe implements PipeTransform {
+  /**
+   * Transforms a number value representing seconds into a string formatted as 'HH:MM:SS'.
+   * If the value is not a number or is NaN, it returns '00:00:00'.
+   *
+   * @param value - The number value representing seconds.
+   * @returns The formatted string in the format 'HH:MM:SS'.
+   */
   transform(value: number): string {
     if (!value || isNaN(value)) {
       return '00:00:00';
diff --git a/frontend/src/app/pipes/userfilter.pipe.ts b/frontend/src/app/pipes/userfilter.pipe.ts
index 0016ecd..bb62e8d 100644
--- a/frontend/src/app/pipes/userfilter.pipe.ts
+++ b/frontend/src/app/pipes/userfilter.pipe.ts
@@ -1,16 +1,22 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'userfilter'
+  name: 'userfilter',
 })
 export class UserfilterPipe implements PipeTransform {
-
-  transform(profiles: any[], query: string): any[] {           
-    if (!profiles || !query) {   
-      return profiles;                               
+  /**
+   * Filters an array of profiles based on a query string.
+   * @param profiles - The array of profiles to filter.
+   * @param query - The query string to filter the profiles by.
+   * @returns An array of filtered profiles.
+   */
+  transform(profiles: any[], query: string): any[] {
+    if (!profiles || !query) {
+      return profiles;
     }
-    console.log(profiles); 
-    return profiles.filter(profile => profile.name.toLowerCase().includes(query.toLowerCase()));        
+    console.log(profiles);
+    return profiles.filter((profile) =>
+      profile.name.toLowerCase().includes(query.toLowerCase()),
+    );
   }
-
 }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index ba740b5..ff32110 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,19 +1,22 @@
-@use "app/styles/color.scss";
-@import url('https://fonts.googleapis.com/css2?family=League+Spartan&display=swap');
+/**
+ * This SCSS file defines the styles for the application.
+ * It imports the color variables from "app/styles/color.scss" and the "League Spartan" font from Google Fonts.
+ * The styles defined in this file are applied to the body and main elements of the application.
+ */
 
+@use "app/styles/color.scss";
+@import url("https://fonts.googleapis.com/css2?family=League+Spartan&display=swap");
 
 body {
-    padding: 0;
-    margin: 0;
-    font-family: 'League Spartan', sans-serif;
-    color: var(--white);
-    background-color: var(--background-color);
-  }
+  padding: 0;
+  margin: 0;
+  font-family: "League Spartan", sans-serif;
+  color: var(--white);
+  background-color: var(--background-color);
+}
 
-  main
-  {
-    display: block;
+main {
+  display: block;
   transition: transform 0.5s ease;
   background-color: var(--background-color);
-
-  }
+}