diff --git a/src/app/pages/championship/championship/championship.page.ts b/src/app/pages/championship/championship/championship.page.ts
index a53dd9ad..49356d1d 100644
--- a/src/app/pages/championship/championship/championship.page.ts
+++ b/src/app/pages/championship/championship/championship.page.ts
@@ -10,7 +10,25 @@ import {
   ToastController,
 } from "@ionic/angular";
 import { User } from "@angular/fire/auth";
-import { Observable, Subscription, catchError, combineLatest, concatMap, defaultIfEmpty, finalize, forkJoin, from, lastValueFrom, map, mergeMap, of, switchMap, take, tap, timeout } from "rxjs";
+import {
+  Observable,
+  Subscription,
+  catchError,
+  combineLatest,
+  concatMap,
+  defaultIfEmpty,
+  finalize,
+  forkJoin,
+  from,
+  lastValueFrom,
+  map,
+  mergeMap,
+  of,
+  switchMap,
+  take,
+  tap,
+  timeout,
+} from "rxjs";
 import { Game } from "src/app/models/game";
 import { AuthService } from "src/app/services/auth.service";
 import { FirebaseService } from "src/app/services/firebase.service";
@@ -43,7 +61,7 @@ export class ChampionshipPage implements OnInit {
   filterList: any[] = [];
   filterValue: string = "";
 
-  teamRankings$: Observable<any[]>;;
+  teamRankings$: Observable<any[]>;
 
   constructor(
     public toastController: ToastController,
@@ -56,14 +74,12 @@ export class ChampionshipPage implements OnInit {
     private readonly menuCtrl: MenuController,
     private cdr: ChangeDetectorRef,
     private navCtrl: NavController,
-    private router: Router,
-    private translate: TranslateService,
+    private translate: TranslateService
   ) {
     this.menuCtrl.enable(true, "menu");
   }
 
   ngOnInit() {
-
     this.teamRankings$ = this.getTeamsWithRankingsForYear("2023");
     this.teamRankings$.subscribe({
       next: () => {
@@ -71,7 +87,7 @@ export class ChampionshipPage implements OnInit {
         this.cdr.detectChanges();
       },
       error: (err) => console.error("RANKING Error in subscription:", err),
-      complete: () => console.log("RANKING Observable completed")
+      complete: () => console.log("RANKING Observable completed"),
     });
 
     this.gameList$ = this.getTeamGamesUpcoming();
@@ -81,10 +97,9 @@ export class ChampionshipPage implements OnInit {
         this.cdr.detectChanges();
       },
       error: (err) => console.error("GAMES Error in subscription:", err),
-      complete: () => console.log("GAMES Observable completed")
+      complete: () => console.log("GAMES Observable completed"),
     });
 
-
     this.gameListPast$ = this.getTeamGamesPast();
     this.gameListPast$.subscribe({
       next: () => {
@@ -92,14 +107,12 @@ export class ChampionshipPage implements OnInit {
         this.cdr.detectChanges();
       },
       error: (err) => console.error("GAMES PAST Error in subscription:", err),
-      complete: () => console.log("GAMES PAST Observable completed")
+      complete: () => console.log("GAMES PAST Observable completed"),
     });
-
-
   }
 
   ngOnDestroy(): void {
-   /* if (this.subscription) {
+    /* if (this.subscription) {
         this.subscription.unsubscribe();
     }
     if (this.subscriptionPast) {
@@ -107,157 +120,218 @@ export class ChampionshipPage implements OnInit {
     }*/
   }
 
-  getTeamsWithRankingsForYear(year: string = '2023') {
+  getTeamsWithRankingsForYear(year: string = "2023") {
     return this.authService.getUser$().pipe(
       take(1),
-      tap(user => console.log("User:", user)),
-      switchMap(user => {
+      tap((user) => console.log("User:", user)),
+      switchMap((user) => {
         if (!user) return of([]); // If no user, return an empty array
         return this.fbService.getUserTeamRefs(user);
       }),
-      tap(teams => console.log("Teams:", teams)),
-      mergeMap(teams => {
+      tap((teams) => console.log("Teams:", teams)),
+      mergeMap((teams) => {
         if (teams.length === 0) return of([]);
         return combineLatest(
-          teams.map(team =>
+          teams.map((team) =>
             combineLatest({
               teamDetails: of(team),
-              rankingsTable: this.championshipService.getTeamRankingTable(team.id, year),
-              rankingDetails: this.championshipService.getTeamRanking(team.id, year)
+              rankingsTable: this.championshipService.getTeamRankingTable(
+                team.id,
+                year
+              ),
+              rankingDetails: this.championshipService.getTeamRanking(
+                team.id,
+                year
+              ),
             }).pipe(
               map(({ teamDetails, rankingsTable, rankingDetails }) => ({
                 ...teamDetails,
                 rankings: rankingsTable,
-                details: rankingDetails
+                details: rankingDetails,
               })),
-              tap(result => console.log("Team with rankings and details:", result))
+              tap((result) =>
+                console.log("Team with rankings and details:", result)
+              )
             )
           )
         );
       }),
-      tap(results => console.log("Final results:", results)),
-      catchError(err => {
+      tap((results) => console.log("Final results:", results)),
+      catchError((err) => {
         console.error("Error in getTeamsWithRankingsForYear:", err);
         return of([]); // Return an empty array on error
       })
     );
   }
 
-
   getTeamGamesUpcoming() {
     return this.authService.getUser$().pipe(
       take(1),
-      tap(user => {
+      tap((user) => {
         this.user = user;
       }),
-      switchMap(user => {
+      switchMap((user) => {
         if (!user) return of([]);
         return this.fbService.getUserTeamRefs(user);
       }),
-      tap(teams => console.log("Teams:", teams)),
-      mergeMap(teams => {
+      tap((teams) => console.log("Teams:", teams)),
+      mergeMap((teams) => {
         if (teams.length === 0) return of([]);
         return combineLatest(
-          teams.map(team =>
+          teams.map((team) =>
             this.championshipService.getTeamGamesRefs(team.id).pipe(
-              switchMap(teamGames => {
+              switchMap((teamGames) => {
                 if (teamGames.length === 0) return of([]);
                 return combineLatest(
-                  teamGames.map(game =>
-                    this.championshipService.getTeamGameAttendeesRef(team.id, game.id).pipe(
-                      map(attendees => {
-                        const userAttendee = attendees.find(att => att.id == this.user.uid);
-                        const status = userAttendee ? userAttendee.status : null; // default to false if user is not found in attendees list
-                        return ({ ...game, attendees, status: status, countAttendees: attendees.filter(att => att.status == true).length, teamId: team.id, })
-                      }),
-                      catchError(() => of({ ...game, attendees: [], status: null, countAttendees: 0, teamId: team.id, })) // If error, return game with empty attendees
-                    )
+                  teamGames.map((game) =>
+                    this.championshipService
+                      .getTeamGameAttendeesRef(team.id, game.id)
+                      .pipe(
+                        map((attendees) => {
+                          const userAttendee = attendees.find(
+                            (att) => att.id == this.user.uid
+                          );
+                          const status = userAttendee
+                            ? userAttendee.status
+                            : null; // default to false if user is not found in attendees list
+                          return {
+                            ...game,
+                            attendees,
+                            status: status,
+                            countAttendees: attendees.filter(
+                              (att) => att.status == true
+                            ).length,
+                            teamId: team.id,
+                          };
+                        }),
+                        catchError(() =>
+                          of({
+                            ...game,
+                            attendees: [],
+                            status: null,
+                            countAttendees: 0,
+                            teamId: team.id,
+                          })
+                        ) // If error, return game with empty attendees
+                      )
                   )
                 );
               }),
-              map(gamesWithAttendees => gamesWithAttendees), // Flatten games array for each team
+              map((gamesWithAttendees) => gamesWithAttendees), // Flatten games array for each team
               catchError(() => of([])) // If error in fetching games, return empty array
             )
           )
         ).pipe(
-          map(teamsGames => teamsGames.flat()), // Flatten to get all games across all teams
-          map(allGames =>
-            allGames.sort((a, b) => Timestamp.fromMillis(a.dateTime).seconds - Timestamp.fromMillis(b.dateTime).seconds) // Sort games by date
+          map((teamsGames) => teamsGames.flat()), // Flatten to get all games across all teams
+          map(
+            (allGames) =>
+              allGames.sort(
+                (a, b) =>
+                  Timestamp.fromMillis(a.dateTime).seconds -
+                  Timestamp.fromMillis(b.dateTime).seconds
+              ) // Sort games by date
           )
         );
       }),
-      tap(results => console.log("Final results with all games:", results)),
-      catchError(err => {
+      tap((results) => console.log("Final results with all games:", results)),
+      catchError((err) => {
         console.error("Error in getTeamGamesUpcoming:", err);
         return of([]); // Return an empty array on error
       })
     );
   }
 
-
-    getTeamGamesPast() {
-      return this.authService.getUser$().pipe(
-        take(1),
-        tap(user=>{
-          this.user = user;
-        }),
-        switchMap(user => {
-          if (!user) return of([]);
-          return this.fbService.getUserTeamRefs(user);
-        }),
-        tap(teams => console.log("Teams:", teams)),
-        mergeMap(teams => {
-          if (teams.length === 0) return of([]);
-          return combineLatest(
-            teams.map(team => 
-              this.championshipService.getTeamGamesPastRefs(team.id).pipe(
-                switchMap(teamGames => {
-                  if (teamGames.length === 0) return of([]);
-                  return combineLatest(
-                    teamGames.map(game => 
-                      this.championshipService.getTeamGameAttendeesRef(team.id, game.id).pipe(
-                        map(attendees => {
-                          const userAttendee = attendees.find(att => att.id == this.user.uid);
-                          const status = userAttendee ? userAttendee.status : null; // default to false if user is not found in attendees list
-                          return ({...game, attendees, status: status, countAttendees: attendees.filter(att => att.status == true).length, teamId: team.id,})
+  getTeamGamesPast() {
+    return this.authService.getUser$().pipe(
+      take(1),
+      tap((user) => {
+        this.user = user;
+      }),
+      switchMap((user) => {
+        if (!user) return of([]);
+        return this.fbService.getUserTeamRefs(user);
+      }),
+      tap((teams) => console.log("Teams:", teams)),
+      mergeMap((teams) => {
+        if (teams.length === 0) return of([]);
+        return combineLatest(
+          teams.map((team) =>
+            this.championshipService.getTeamGamesPastRefs(team.id).pipe(
+              switchMap((teamGames) => {
+                if (teamGames.length === 0) return of([]);
+                return combineLatest(
+                  teamGames.map((game) =>
+                    this.championshipService
+                      .getTeamGameAttendeesRef(team.id, game.id)
+                      .pipe(
+                        map((attendees) => {
+                          const userAttendee = attendees.find(
+                            (att) => att.id == this.user.uid
+                          );
+                          const status = userAttendee
+                            ? userAttendee.status
+                            : null; // default to false if user is not found in attendees list
+                          return {
+                            ...game,
+                            attendees,
+                            status: status,
+                            countAttendees: attendees.filter(
+                              (att) => att.status == true
+                            ).length,
+                            teamId: team.id,
+                          };
                         }),
-                        catchError(() => of({ ...game, attendees: [], status: null, countAttendees: 0, teamId: team.id,})) // If error, return game with empty attendees
+                        catchError(() =>
+                          of({
+                            ...game,
+                            attendees: [],
+                            status: null,
+                            countAttendees: 0,
+                            teamId: team.id,
+                          })
+                        ) // If error, return game with empty attendees
                       )
-                    )
-                  );
-                }),
-                map(gamesWithAttendees => gamesWithAttendees), // Flatten games array for each team
-                catchError(() => of([])) // If error in fetching games, return empty array
-              )
-            )
-          ).pipe(
-            map(teamsGames => teamsGames.flat()), // Flatten to get all games across all teams
-            map(allGames => 
-              allGames.sort((b, a) => Timestamp.fromMillis(a.dateTime).seconds - Timestamp.fromMillis(b.dateTime).seconds) // Sort games by date
+                  )
+                );
+              }),
+              map((gamesWithAttendees) => gamesWithAttendees), // Flatten games array for each team
+              catchError(() => of([])) // If error in fetching games, return empty array
             )
-          );
-        }),
-        tap(results => console.log("Final results with all games:", results)),
-        catchError(err => {
-          console.error("Error in getTeamGamesUpcoming:", err);
-          return of([]); // Return an empty array on error
-        })
-      );
-    }
-    
-    
+          )
+        ).pipe(
+          map((teamsGames) => teamsGames.flat()), // Flatten to get all games across all teams
+          map(
+            (allGames) =>
+              allGames.sort(
+                (b, a) =>
+                  Timestamp.fromMillis(a.dateTime).seconds -
+                  Timestamp.fromMillis(b.dateTime).seconds
+              ) // Sort games by date
+          )
+        );
+      }),
+      tap((results) => console.log("Final results with all games:", results)),
+      catchError((err) => {
+        console.error("Error in getTeamGamesUpcoming:", err);
+        return of([]); // Return an empty array on error
+      })
+    );
+  }
+
   async openChampionshipDetailModal(game: Game) {
     // const presentingElement = await this.modalCtrl.getTop();
-    game['abc'] = new Date().toISOString();
-    let extras :  NavigationExtras = {
+    game["abc"] = new Date().toISOString();
+    let extras: NavigationExtras = {
       queryParams: {
-        data: JSON.stringify(game)
-      }
-    }
-    console.log(extras)
-    this.navCtrl.navigateForward(['championship-details'],extras).catch(e=>{
-      console.log(e);
-    })
+        data: JSON.stringify(game),
+      },
+    };
+    console.log(extras);
+    this.navCtrl
+      .navigateForward(["championship-details"], extras)
+      .catch((e) => {
+        console.log(e);
+      });
     // const modal = await this.modalCtrl.create({
     //   component: ChampionshipDetailPage,
     //   presentingElement: this.routerOutlet.nativeEl,
@@ -278,7 +352,9 @@ export class ChampionshipPage implements OnInit {
 
   // List item
   async toggle(status: boolean, game: Game) {
-    console.log(`Set Status ${status} for user ${this.user.uid} and team ${game.teamId} and game ${game.id}`);
+    console.log(
+      `Set Status ${status} for user ${this.user.uid} and team ${game.teamId} and game ${game.id}`
+    );
     await this.championshipService.setTeamGameAttendeeStatus(
       this.user.uid,
       status,
@@ -313,8 +389,6 @@ export class ChampionshipPage implements OnInit {
     toast.present();
   }
 
-
-
   async openFilter(ev: Event) {
     /*
   let filterList = [];
@@ -384,6 +458,4 @@ this.subscription = forkJoin([teams$]).subscribe({
 });
 */
   }
-
 }
-
diff --git a/src/app/pages/event/event-detail/event-detail.page.html b/src/app/pages/event/event-detail/event-detail.page.html
index 0e1da7e3..b3a0d60c 100644
--- a/src/app/pages/event/event-detail/event-detail.page.html
+++ b/src/app/pages/event/event-detail/event-detail.page.html
@@ -52,7 +52,7 @@ <h2>{{event.description}}</h2>
       </ion-item>
     </ion-list>
 
-    <ion-list [inset]="true" lines="none">
+    <ion-list [inset]="true" lines="none" *ngIf="isFuture">
       <ion-list-header>
         {{"attendances__absences" | translate}}
       </ion-list-header>
diff --git a/src/app/pages/event/event-detail/event-detail.page.ts b/src/app/pages/event/event-detail/event-detail.page.ts
index be6025a8..ecb05390 100644
--- a/src/app/pages/event/event-detail/event-detail.page.ts
+++ b/src/app/pages/event/event-detail/event-detail.page.ts
@@ -26,6 +26,7 @@ import { UserProfileService } from "src/app/services/firebase/user-profile.servi
 })
 export class EventDetailPage implements OnInit {
   @Input("data") event: Veranstaltung;
+  @Input("isFuture") isFuture: boolean;
 
   event$: Observable<any>;
 
diff --git a/src/app/pages/event/events/events.page.html b/src/app/pages/event/events/events.page.html
index 72b29047..a651acd9 100644
--- a/src/app/pages/event/events/events.page.html
+++ b/src/app/pages/event/events/events.page.html
@@ -39,40 +39,60 @@
 
       <ion-item-sliding #item *ngFor="let event of eventsList">
         <ion-item type="button" detail="true">
-          <ion-icon *ngIf="event.status === null" slot="icon-only" color="warning" slot="start" name="help-circle"
-            (click)="toggle(true, event)"></ion-icon>
-          <ion-icon *ngIf="event.status === false" slot="icon-only" color="danger" slot="start" name="close-circle"
-            (click)="toggle( true, event)"></ion-icon>
-          <ion-icon *ngIf="event.status === true" slot="icon-only" color="success" slot="start" name="checkmark-circle"
-            (click)="toggle(false, event)"></ion-icon>
-            <ion-label (click)="openEventDetailModal(event)">
-              <h2>
-                {{event.name}}
-              </h2>
-              <h3>
-                <ion-icon slot="icon-only" name="calendar-outline"></ion-icon>
-                {{event.date.toDate() | date:'dd.MM.YYYY '}} {{event.timeFrom | date:'HH:mm'}} Uhr -
-                {{event.timeTo | date:'HH:mm'}} Uhr
-              </h3>
-              <h3>
-                <ion-icon slot="icon-only" name="location-outline"></ion-icon>
-                {{event.location}} {{event.streetAndNumber}} {{event.city}}
-              </h3>
-  
-  
-            </ion-label>
-          <ion-note slot="end" (click)="openEventDetailModal(event)">
+          <ion-icon
+            *ngIf="event.status === null"
+            slot="icon-only"
+            color="warning"
+            slot="start"
+            name="help-circle"
+            (click)="toggle(true, event)"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="event.status === false"
+            slot="icon-only"
+            color="danger"
+            slot="start"
+            name="close-circle"
+            (click)="toggle( true, event)"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="event.status === true"
+            slot="icon-only"
+            color="success"
+            slot="start"
+            name="checkmark-circle"
+            (click)="toggle(false, event)"
+          ></ion-icon>
+          <ion-label (click)="openEventDetailModal(event, true)">
+            <h2>{{event.name}}</h2>
+            <h3>
+              <ion-icon slot="icon-only" name="calendar-outline"></ion-icon>
+              {{event.date.toDate() | date:'dd.MM.YYYY '}} {{event.timeFrom |
+              date:'HH:mm'}} Uhr - {{event.timeTo | date:'HH:mm'}} Uhr
+            </h3>
+            <h3>
+              <ion-icon slot="icon-only" name="location-outline"></ion-icon>
+              {{event.location}} {{event.streetAndNumber}} {{event.city}}
+            </h3>
+          </ion-label>
+          <ion-note slot="end" (click)="openEventDetailModal(event, true)">
             <ion-badge color="primary">{{event.countAttendees}}</ion-badge>
           </ion-note>
         </ion-item>
 
         <ion-item-options side="start">
-          <ion-item-option color="success" *ngIf="event.status === false || event.status === null"
-            (click)="toggleItem(item, true, event)">
+          <ion-item-option
+            color="success"
+            *ngIf="event.status === false || event.status === null"
+            (click)="toggleItem(item, true, event)"
+          >
             <ion-icon slot="icon-only" name="checkmark-circle"></ion-icon>
           </ion-item-option>
-          <ion-item-option color="danger" *ngIf="event.status === true || event.status === null"
-            (click)="toggleItem(item, false, event)">
+          <ion-item-option
+            color="danger"
+            *ngIf="event.status === true || event.status === null"
+            (click)="toggleItem(item, false, event)"
+          >
             <ion-icon slot="icon-only" name="close-circle"></ion-icon>
           </ion-item-option>
         </ion-item-options>
@@ -85,16 +105,13 @@ <h3>
             <ion-icon slot="icon-only" name="trash"></ion-icon>
           </ion-item-option>
         </ion-item-options>
-
       </ion-item-sliding>
     </ion-list>
     <ion-list class="ion-padding" *ngIf="eventsList.length==0">
       <ion-list-header>
         <ion-label>{{"upcomming__events" | translate}}</ion-label>
       </ion-list-header>
-      <ion-note>
-        {{"no_event__found" | translate}}
-      </ion-note>
+      <ion-note> {{"no_event__found" | translate}} </ion-note>
     </ion-list>
   </ng-container>
 
@@ -113,43 +130,50 @@ <h3>
       </ion-item>
       <ion-item-sliding #item *ngFor="let event of eventsListPast">
         <ion-item type="button" detail="true">
-          <ion-icon *ngIf="event.status === null" slot="icon-only" color="warning" slot="start"
-            name="help-circle"></ion-icon>
-          <ion-icon *ngIf="event.status === false" slot="icon-only" color="danger" slot="start"
-            name="close-circle"></ion-icon>
-          <ion-icon *ngIf="event.status === true" slot="icon-only" color="success" slot="start"
-            name="checkmark-circle"></ion-icon>
-            <ion-label (click)="openEventDetailModal(event)">
-              <h2>
-                {{event.name}}
-              </h2>
-              <h3>
-                <ion-icon slot="icon-only" name="calendar-outline"></ion-icon>
-                {{event.date.toDate() | date:'dd.MM.YYYY '}} {{event.timeFrom | date:'HH:mm'}} Uhr -
-                {{event.timeTo | date:'HH:mm'}} Uhr
-              </h3>
-              <h3>
-                <ion-icon slot="icon-only" name="location-outline"></ion-icon>
-                {{event.location}} {{event.streetAndNumber}} {{event.city}}
-              </h3>
-  
-  
-            </ion-label>
-          <ion-note slot="end">
+          <ion-icon
+            *ngIf="event.status === null"
+            slot="icon-only"
+            color="warning"
+            slot="start"
+            name="help-circle"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="event.status === false"
+            slot="icon-only"
+            color="danger"
+            slot="start"
+            name="close-circle"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="event.status === true"
+            slot="icon-only"
+            color="success"
+            slot="start"
+            name="checkmark-circle"
+          ></ion-icon>
+          <ion-label (click)="openEventDetailModal(event, false)">
+            <h2>{{event.name}}</h2>
+            <h3>
+              <ion-icon slot="icon-only" name="calendar-outline"></ion-icon>
+              {{event.date.toDate() | date:'dd.MM.YYYY '}} {{event.timeFrom |
+              date:'HH:mm'}} Uhr - {{event.timeTo | date:'HH:mm'}} Uhr
+            </h3>
+            <h3>
+              <ion-icon slot="icon-only" name="location-outline"></ion-icon>
+              {{event.location}} {{event.streetAndNumber}} {{event.city}}
+            </h3>
+          </ion-label>
+          <ion-note slot="end" (click)="openEventDetailModal(event, false)">
             <ion-badge color="primary">{{event.countAttendees}}</ion-badge>
           </ion-note>
         </ion-item>
-
-
       </ion-item-sliding>
     </ion-list>
     <ion-list class="ion-padding" *ngIf="eventsListPast.length==0">
       <ion-list-header>
         <ion-label>{{"past__events" | translate}}</ion-label>
       </ion-list-header>
-      <ion-note>
-        {{"no_event__found" | translate}}
-      </ion-note>
+      <ion-note> {{"no_event__found" | translate}} </ion-note>
     </ion-list>
   </ng-container>
 
@@ -164,27 +188,54 @@ <h3>
   <ion-list *ngIf="loading">
     <ion-grid>
       <ion-row>
-        <ion-col size-lg="4" size-md="6" size-sm="6" size="12" *ngFor="let item of skeleton">
+        <ion-col
+          size-lg="4"
+          size-md="6"
+          size-sm="6"
+          size="12"
+          *ngFor="let item of skeleton"
+        >
           <ion-card>
             <ion-card-header>
               <ion-card-subtitle>
-                <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+                <ion-skeleton-text
+                  animated
+                  style="width: 60%"
+                ></ion-skeleton-text>
               </ion-card-subtitle>
               <ion-card-title>
-                <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+                <ion-skeleton-text
+                  animated
+                  style="width: 80%"
+                ></ion-skeleton-text>
               </ion-card-title>
             </ion-card-header>
 
             <ion-card-content>
-              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 60%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 60%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
             </ion-card-content>
           </ion-card>
         </ion-col>
       </ion-row>
     </ion-grid>
   </ion-list>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/app/pages/event/events/events.page.ts b/src/app/pages/event/events/events.page.ts
index b4bc80e8..583fb228 100644
--- a/src/app/pages/event/events/events.page.ts
+++ b/src/app/pages/event/events/events.page.ts
@@ -8,7 +8,25 @@ import {
   AlertController,
 } from "@ionic/angular";
 import { User } from "@angular/fire/auth";
-import { Observable, Subscription, catchError, combineLatest, concatMap, defaultIfEmpty, finalize, forkJoin, from,  lastValueFrom,  map,  mergeMap,  of, switchMap, take, tap, timeout} from "rxjs";
+import {
+  Observable,
+  Subscription,
+  catchError,
+  combineLatest,
+  concatMap,
+  defaultIfEmpty,
+  finalize,
+  forkJoin,
+  from,
+  lastValueFrom,
+  map,
+  mergeMap,
+  of,
+  switchMap,
+  take,
+  tap,
+  timeout,
+} from "rxjs";
 import { Veranstaltung } from "src/app/models/event";
 import { AuthService } from "src/app/services/auth.service";
 import { FirebaseService } from "src/app/services/firebase.service";
@@ -50,7 +68,6 @@ export class EventsPage implements OnInit {
   }
 
   ngOnInit() {
-  
     this.eventList$ = this.getClubEvent();
     this.eventList$.subscribe({
       next: (data) => {
@@ -58,10 +75,9 @@ export class EventsPage implements OnInit {
         this.cdr.detectChanges();
       },
       error: (err) => console.error("EVENT Error in subscription:", err),
-      complete: () => console.log("EVENT Observable completed")
+      complete: () => console.log("EVENT Observable completed"),
     });
 
-
     this.eventListPast$ = this.getClubEventPast();
     this.eventListPast$.subscribe({
       next: () => {
@@ -69,104 +85,157 @@ export class EventsPage implements OnInit {
         this.cdr.detectChanges();
       },
       error: (err) => console.error("EVENT PAST Error in subscription:", err),
-      complete: () => console.log("EVENT PAST Observable completed")
+      complete: () => console.log("EVENT PAST Observable completed"),
     });
-
   }
   getClubEvent() {
     return this.authService.getUser$().pipe(
       take(1),
-      tap(user=>{
+      tap((user) => {
         this.user = user;
       }),
-      switchMap(user => {
+      switchMap((user) => {
         if (!user) return of([]);
         return this.fbService.getUserClubRefs(user);
       }),
-      tap(clubs => console.log("Teams:", clubs)),
-      mergeMap(teams => {
+      tap((clubs) => console.log("Teams:", clubs)),
+      mergeMap((teams) => {
         if (teams.length === 0) return of([]);
         return combineLatest(
-          teams.map(team => 
+          teams.map((team) =>
             this.eventService.getClubEventsRef(team.id).pipe(
-              switchMap(clubEvents => {
+              switchMap((clubEvents) => {
                 if (clubEvents.length === 0) return of([]);
                 return combineLatest(
-                  clubEvents.map(game => 
-                    this.eventService.getClubEventAttendeesRef(team.id, game.id).pipe(
-                      map(attendees => {
-                        const userAttendee = attendees.find(att => att.id == this.user.uid);
-                        const status = userAttendee ? userAttendee.status : null; // default to false if user is not found in attendees list
-                        return ({...game, attendees, status: status, countAttendees: attendees.filter(att => att.status == true).length, teamId: team.id,})
-                      }),
-                      catchError(() => of({ ...game, attendees: [], status: null, countAttendees: 0, teamId: team.id,})) // If error, return game with empty attendees
-                    )
+                  clubEvents.map((game) =>
+                    this.eventService
+                      .getClubEventAttendeesRef(team.id, game.id)
+                      .pipe(
+                        map((attendees) => {
+                          const userAttendee = attendees.find(
+                            (att) => att.id == this.user.uid
+                          );
+                          const status = userAttendee
+                            ? userAttendee.status
+                            : null; // default to false if user is not found in attendees list
+                          return {
+                            ...game,
+                            attendees,
+                            status: status,
+                            countAttendees: attendees.filter(
+                              (att) => att.status == true
+                            ).length,
+                            teamId: team.id,
+                          };
+                        }),
+                        catchError(() =>
+                          of({
+                            ...game,
+                            attendees: [],
+                            status: null,
+                            countAttendees: 0,
+                            teamId: team.id,
+                          })
+                        ) // If error, return game with empty attendees
+                      )
                   )
                 );
               }),
-              map(gamesWithAttendees => gamesWithAttendees), // Flatten games array for each team
+              map((gamesWithAttendees) => gamesWithAttendees), // Flatten games array for each team
               catchError(() => of([])) // If error in fetching games, return empty array
             )
           )
         ).pipe(
-          map(teamsGames => teamsGames.flat()), // Flatten to get all games across all teams
-          map(allGames => 
-            allGames.sort((a, b) => Timestamp.fromMillis(a.dateTime).seconds - Timestamp.fromMillis(b.dateTime).seconds) // Sort games by date
+          map((teamsGames) => teamsGames.flat()), // Flatten to get all games across all teams
+          map(
+            (allGames) =>
+              allGames.sort(
+                (a, b) =>
+                  Timestamp.fromMillis(a.dateTime).seconds -
+                  Timestamp.fromMillis(b.dateTime).seconds
+              ) // Sort games by date
           )
         );
       }),
-      tap(results => console.log("Final results with all games:", results)),
-      catchError(err => {
+      tap((results) => console.log("Final results with all games:", results)),
+      catchError((err) => {
         console.error("Error in getClubEvent:", err);
         return of([]); // Return an empty array on error
       })
     );
   }
-  
+
   getClubEventPast() {
     return this.authService.getUser$().pipe(
       take(1),
-      tap(user=>{
+      tap((user) => {
         this.user = user;
       }),
-      switchMap(user => {
+      switchMap((user) => {
         if (!user) return of([]);
         return this.fbService.getUserClubRefs(user);
       }),
-      tap(clubs => console.log("Teams:", clubs)),
-      mergeMap(teams => {
+      tap((clubs) => console.log("Teams:", clubs)),
+      mergeMap((teams) => {
         if (teams.length === 0) return of([]);
         return combineLatest(
-          teams.map(team => 
+          teams.map((team) =>
             this.eventService.getClubEventsPastRef(team.id).pipe(
-              switchMap(teamGames => {
+              switchMap((teamGames) => {
                 if (teamGames.length === 0) return of([]);
                 return combineLatest(
-                  teamGames.map(game => 
-                    this.eventService.getClubEventAttendeesRef(team.id, game.id).pipe(
-                      map(attendees => {
-                        const userAttendee = attendees.find(att => att.id == this.user.uid);
-                        const status = userAttendee ? userAttendee.status : null; // default to false if user is not found in attendees list
-                        return ({...game, attendees, status: status, countAttendees: attendees.filter(att => att.status == true).length, teamId: team.id,})
-                      }),
-                      catchError(() => of({ ...game, attendees: [], status: null, countAttendees: 0, teamId: team.id,})) // If error, return game with empty attendees
-                    )
+                  teamGames.map((game) =>
+                    this.eventService
+                      .getClubEventAttendeesRef(team.id, game.id)
+                      .pipe(
+                        map((attendees) => {
+                          const userAttendee = attendees.find(
+                            (att) => att.id == this.user.uid
+                          );
+                          const status = userAttendee
+                            ? userAttendee.status
+                            : null; // default to false if user is not found in attendees list
+                          return {
+                            ...game,
+                            attendees,
+                            status: status,
+                            countAttendees: attendees.filter(
+                              (att) => att.status == true
+                            ).length,
+                            teamId: team.id,
+                          };
+                        }),
+                        catchError(() =>
+                          of({
+                            ...game,
+                            attendees: [],
+                            status: null,
+                            countAttendees: 0,
+                            teamId: team.id,
+                          })
+                        ) // If error, return game with empty attendees
+                      )
                   )
                 );
               }),
-              map(gamesWithAttendees => gamesWithAttendees), // Flatten games array for each team
+              map((gamesWithAttendees) => gamesWithAttendees), // Flatten games array for each team
               catchError(() => of([])) // If error in fetching games, return empty array
             )
           )
         ).pipe(
-          map(teamsGames => teamsGames.flat()), // Flatten to get all games across all teams
-          map(allGames => 
-            allGames.sort((a, b) => Timestamp.fromMillis(a.dateTime).seconds - Timestamp.fromMillis(b.dateTime).seconds) // Sort games by date
+          map((teamsGames) => teamsGames.flat()), // Flatten to get all games across all teams
+          map(
+            (allGames) =>
+              allGames.sort(
+                (a, b) =>
+                  Timestamp.fromMillis(a.dateTime).seconds -
+                  Timestamp.fromMillis(b.dateTime).seconds
+              ) // Sort games by date
           )
         );
       }),
-      tap(results => console.log("Final results with all games:", results)),
-      catchError(err => {
+      tap((results) => console.log("Final results with all games:", results)),
+      catchError((err) => {
         console.error("Error in getClubEventPast:", err);
         return of([]); // Return an empty array on error
       })
@@ -186,7 +255,11 @@ export class EventsPage implements OnInit {
     this.presentToast();
   }
 
-  async toggleItem(slidingItem: IonItemSliding, status: boolean, event: Veranstaltung) {
+  async toggleItem(
+    slidingItem: IonItemSliding,
+    status: boolean,
+    event: Veranstaltung
+  ) {
     slidingItem.closeOpened();
 
     console.log(
@@ -230,10 +303,8 @@ export class EventsPage implements OnInit {
 
     if (role === "confirm") {
     }
-
   }
 
-
   async deleteEvent(slidingItem: IonItemSliding, event) {
     slidingItem.closeOpened();
     const toast = await this.toastController.create({
@@ -245,7 +316,7 @@ export class EventsPage implements OnInit {
     toast.present();
   }
 
-  async openFilter(ev: Event){
+  async openFilter(ev: Event) {
     /*
     let filterList = [];
 
@@ -315,7 +386,7 @@ export class EventsPage implements OnInit {
     error: err => console.error('Error in the observable chain:', err)
   });
    */
-}
+  }
 
   async openEventCreateModal() {
     // const presentingElement = await this.modalCtrl.getTop();
@@ -336,7 +407,7 @@ export class EventsPage implements OnInit {
     }
   }
 
-  async openEventDetailModal(event: Veranstaltung) {
+  async openEventDetailModal(event: Veranstaltung, isFuture: boolean) {
     // const presentingElement = await this.modalCtrl.getTop();
     const modal = await this.modalCtrl.create({
       component: EventDetailPage,
@@ -345,6 +416,7 @@ export class EventsPage implements OnInit {
       showBackdrop: true,
       componentProps: {
         data: event,
+        isFuture: isFuture,
       },
     });
     modal.present();
@@ -354,5 +426,4 @@ export class EventsPage implements OnInit {
     if (role === "confirm") {
     }
   }
- 
 }
diff --git a/src/app/pages/helfer/helfer-detail/helfer-detail.page.html b/src/app/pages/helfer/helfer-detail/helfer-detail.page.html
index 185a91e8..0c85fea3 100644
--- a/src/app/pages/helfer/helfer-detail/helfer-detail.page.html
+++ b/src/app/pages/helfer/helfer-detail/helfer-detail.page.html
@@ -52,7 +52,7 @@ <h2>{{event.description}}</h2>
       </ion-item>
     </ion-list>
 
-    <ion-list [inset]="true" lines="none">
+    <ion-list [inset]="true" lines="none" *ngIf="isFuture">
       <ion-list-header>
         {{"attendances__absences" | translate}}
       </ion-list-header>
diff --git a/src/app/pages/helfer/helfer-detail/helfer-detail.page.ts b/src/app/pages/helfer/helfer-detail/helfer-detail.page.ts
index e211347c..2d86a2e9 100644
--- a/src/app/pages/helfer/helfer-detail/helfer-detail.page.ts
+++ b/src/app/pages/helfer/helfer-detail/helfer-detail.page.ts
@@ -25,6 +25,7 @@ import { UserProfileService } from "src/app/services/firebase/user-profile.servi
 })
 export class HelferDetailPage implements OnInit {
   @Input("data") event: HelferEvent;
+  @Input("isFuture") isFuture: boolean;
 
   event$: Observable<any>;
 
diff --git a/src/app/pages/helfer/helfer/helfer.page.html b/src/app/pages/helfer/helfer/helfer.page.html
index 8df154bc..79530bcd 100644
--- a/src/app/pages/helfer/helfer/helfer.page.html
+++ b/src/app/pages/helfer/helfer/helfer.page.html
@@ -36,45 +36,64 @@
 
       <ion-item-sliding #item *ngFor="let event of eventsList">
         <ion-item type="button" detail="true">
-          <ion-icon *ngIf="event.status === null" slot="icon-only" color="warning" slot="start" name="help-circle"
-            (click)="toggle(true, event)"></ion-icon>
-          <ion-icon *ngIf="event.status === false" slot="icon-only" color="danger" slot="start" name="close-circle"
-            (click)="toggle( true, event)"></ion-icon>
-          <ion-icon *ngIf="event.status === true" slot="icon-only" color="success" slot="start" name="checkmark-circle"
-            (click)="toggle(false, event)"></ion-icon>
-          <ion-label (click)="openEventDetailModal(event)">
-            <h2>
-              {{event.name}}
-            </h2>
+          <ion-icon
+            *ngIf="event.status === null"
+            slot="icon-only"
+            color="warning"
+            slot="start"
+            name="help-circle"
+            (click)="toggle(true, event)"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="event.status === false"
+            slot="icon-only"
+            color="danger"
+            slot="start"
+            name="close-circle"
+            (click)="toggle( true, event)"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="event.status === true"
+            slot="icon-only"
+            color="success"
+            slot="start"
+            name="checkmark-circle"
+            (click)="toggle(false, event)"
+          ></ion-icon>
+          <ion-label (click)="openEventDetailModal(event, true)">
+            <h2>{{event.name}}</h2>
             <h3>
               <ion-icon slot="icon-only" name="calendar-outline"></ion-icon>
-              {{event.date.toDate() | date:'dd.MM.YYYY '}} {{event.timeFrom | date:'HH:mm'}} Uhr -
-              {{event.timeTo | date:'HH:mm'}} Uhr
+              {{event.date.toDate() | date:'dd.MM.YYYY '}} {{event.timeFrom |
+              date:'HH:mm'}} Uhr - {{event.timeTo | date:'HH:mm'}} Uhr
             </h3>
             <h3>
               <ion-icon slot="icon-only" name="location-outline"></ion-icon>
               {{event.location}} {{event.streetAndNumber}} {{event.city}}
             </h3>
-
-
           </ion-label>
-          <ion-note slot="end" (click)="openEventDetailModal(event)">
+          <ion-note slot="end" (click)="openEventDetailModal(event, true)">
             <ion-badge color="primary">{{event.countAttendees}}</ion-badge>
           </ion-note>
         </ion-item>
 
         <ion-item-options side="start">
-          <ion-item-option color="success" *ngIf="event.status === false || event.status === null"
-            (click)="toggleItem(item, true, event)">
+          <ion-item-option
+            color="success"
+            *ngIf="event.status === false || event.status === null"
+            (click)="toggleItem(item, true, event)"
+          >
             <ion-icon slot="icon-only" name="checkmark-circle"></ion-icon>
           </ion-item-option>
-          <ion-item-option color="danger" *ngIf="event.status === true || event.status === null"
-            (click)="toggleItem(item, false, event)">
+          <ion-item-option
+            color="danger"
+            *ngIf="event.status === true || event.status === null"
+            (click)="toggleItem(item, false, event)"
+          >
             <ion-icon slot="icon-only" name="close-circle"></ion-icon>
           </ion-item-option>
         </ion-item-options>
 
-
         <ion-item-options side="end">
           <ion-item-option color="medium" (click)="copyEvent(item, event)">
             <ion-icon slot="icon-only" name="copy-outline"></ion-icon>
@@ -83,7 +102,6 @@ <h3>
             <ion-icon slot="icon-only" name="trash"></ion-icon>
           </ion-item-option>
         </ion-item-options>
-
       </ion-item-sliding>
     </ion-list>
 
@@ -91,9 +109,7 @@ <h3>
       <ion-list-header>
         <ion-label>{{"upcomming__helper_event" | translate}}</ion-label>
       </ion-list-header>
-      <ion-note>
-        {{"no_event__found" | translate}}
-      </ion-note>
+      <ion-note> {{"no_event__found" | translate}} </ion-note>
     </ion-list>
   </ng-container>
 
@@ -112,44 +128,50 @@ <h3>
       </ion-item>
       <ion-item-sliding #item *ngFor="let event of eventsListPast">
         <ion-item type="button" detail="true">
-          <ion-icon *ngIf="event.status === null" slot="icon-only" color="warning" slot="start"
-            name="help-circle"></ion-icon>
-          <ion-icon *ngIf="event.status === false" slot="icon-only" color="danger" slot="start"
-            name="close-circle"></ion-icon>
-          <ion-icon *ngIf="event.status === true" slot="icon-only" color="success" slot="start"
-            name="checkmark-circle"></ion-icon>
-            <ion-label (click)="openEventDetailModal(event)">
-              <h2>
-                {{event.name}}
-              </h2>
-              <h3>
-                <ion-icon slot="icon-only" name="calendar-outline"></ion-icon>
-                {{event.date.toDate() | date:'dd.MM.YYYY '}} {{event.timeFrom | date:'HH:mm'}} Uhr -
-                {{event.timeTo | date:'HH:mm'}} Uhr
-              </h3>
-              <h3>
-                <ion-icon slot="icon-only" name="location-outline"></ion-icon>
-                {{event.location}} {{event.streetAndNumber}} {{event.city}}
-              </h3>
-  
-  
-            </ion-label>
-          <ion-note slot="end">
+          <ion-icon
+            *ngIf="event.status === null"
+            slot="icon-only"
+            color="warning"
+            slot="start"
+            name="help-circle"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="event.status === false"
+            slot="icon-only"
+            color="danger"
+            slot="start"
+            name="close-circle"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="event.status === true"
+            slot="icon-only"
+            color="success"
+            slot="start"
+            name="checkmark-circle"
+          ></ion-icon>
+          <ion-label (click)="openEventDetailModal(event, false)">
+            <h2>{{event.name}}</h2>
+            <h3>
+              <ion-icon slot="icon-only" name="calendar-outline"></ion-icon>
+              {{event.date.toDate() | date:'dd.MM.YYYY '}} {{event.timeFrom |
+              date:'HH:mm'}} Uhr - {{event.timeTo | date:'HH:mm'}} Uhr
+            </h3>
+            <h3>
+              <ion-icon slot="icon-only" name="location-outline"></ion-icon>
+              {{event.location}} {{event.streetAndNumber}} {{event.city}}
+            </h3>
+          </ion-label>
+          <ion-note slot="end" (click)="openEventDetailModal(event, false)">
             <ion-badge color="primary">{{event.countAttendees}}</ion-badge>
           </ion-note>
         </ion-item>
-
-
-
       </ion-item-sliding>
     </ion-list>
     <ion-list class="ion-padding" *ngIf="eventsListPast.length==0">
       <ion-list-header>
         <ion-label>{{"past__helper_events" | translate}}</ion-label>
       </ion-list-header>
-      <ion-note>
-        {{"no_event__found" | translate}}
-      </ion-note>
+      <ion-note> {{"no_event__found" | translate}} </ion-note>
     </ion-list>
   </ng-container>
 
@@ -164,27 +186,54 @@ <h3>
   <ion-list *ngIf="loading">
     <ion-grid>
       <ion-row>
-        <ion-col size-lg="4" size-md="6" size-sm="6" size="12" *ngFor="let item of skeleton">
+        <ion-col
+          size-lg="4"
+          size-md="6"
+          size-sm="6"
+          size="12"
+          *ngFor="let item of skeleton"
+        >
           <ion-card>
             <ion-card-header>
               <ion-card-subtitle>
-                <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+                <ion-skeleton-text
+                  animated
+                  style="width: 60%"
+                ></ion-skeleton-text>
               </ion-card-subtitle>
               <ion-card-title>
-                <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+                <ion-skeleton-text
+                  animated
+                  style="width: 80%"
+                ></ion-skeleton-text>
               </ion-card-title>
             </ion-card-header>
 
             <ion-card-content>
-              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 60%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 60%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
             </ion-card-content>
           </ion-card>
         </ion-col>
       </ion-row>
     </ion-grid>
   </ion-list>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/app/pages/helfer/helfer/helfer.page.ts b/src/app/pages/helfer/helfer/helfer.page.ts
index 18186974..efab0709 100644
--- a/src/app/pages/helfer/helfer/helfer.page.ts
+++ b/src/app/pages/helfer/helfer/helfer.page.ts
@@ -400,7 +400,7 @@ export class HelferPage implements OnInit {
     }
   }
 
-  async openEventDetailModal(event: HelferEvent) {
+  async openEventDetailModal(event: HelferEvent, isFuture: boolean) {
     // const presentingElement = await this.modalCtrl.getTop();
     const modal = await this.modalCtrl.create({
       component: HelferDetailPage,
@@ -409,6 +409,7 @@ export class HelferPage implements OnInit {
       showBackdrop: true,
       componentProps: {
         data: event,
+        isFuture: isFuture,
       },
     });
     modal.present();
diff --git a/src/app/pages/training/training-detail/training-detail.page.html b/src/app/pages/training/training-detail/training-detail.page.html
index adafa363..217c9a66 100644
--- a/src/app/pages/training/training-detail/training-detail.page.html
+++ b/src/app/pages/training/training-detail/training-detail.page.html
@@ -52,7 +52,7 @@ <h2>{{training.description}}</h2>
       </ion-item>
     </ion-list>
 
-    <ion-list [inset]="true" lines="none">
+    <ion-list [inset]="true" lines="none" *ngIf="isFuture">
       <ion-list-header>
         {{"attendances__absences" | translate}}
       </ion-list-header>
@@ -93,6 +93,7 @@ <h2>{{training.description}}</h2>
         </ng-container>
       </ion-item>
     </ion-list>
+
     <ion-list [inset]="true">
       <ion-accordion-group [multiple]="true" [value]="['yes']">
         <ion-accordion value="yes">
diff --git a/src/app/pages/training/training-detail/training-detail.page.ts b/src/app/pages/training/training-detail/training-detail.page.ts
index 157d1329..75c6b978 100644
--- a/src/app/pages/training/training-detail/training-detail.page.ts
+++ b/src/app/pages/training/training-detail/training-detail.page.ts
@@ -25,6 +25,7 @@ import { UserProfileService } from "src/app/services/firebase/user-profile.servi
 })
 export class TrainingDetailPage implements OnInit {
   @Input("data") training: Training;
+  @Input("isFuture") isFuture: boolean;
 
   training$: Observable<any>;
 
diff --git a/src/app/pages/training/trainings/trainings.page.html b/src/app/pages/training/trainings/trainings.page.html
index 62188086..24ba26a7 100644
--- a/src/app/pages/training/trainings/trainings.page.html
+++ b/src/app/pages/training/trainings/trainings.page.html
@@ -4,7 +4,7 @@
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
     <ion-title>{{"training" | translate}}</ion-title>
-  <!--  <ion-buttons slot="end">
+    <!--  <ion-buttons slot="end">
       <ion-button *ngIf="!filterValue" (click)="openFilter($event)">
         <ion-icon slot="icon-only" name="filter"></ion-icon>
       </ion-button>
@@ -19,16 +19,14 @@
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">{{"training" | translate}}</ion-title>
-
     </ion-toolbar>
   </ion-header>
 
   <ng-container *ngIf="trainingList$ | async as trainingList; else loading">
-    <ion-list *ngIf="trainingList.length > 0"  lines="full">
+    <ion-list *ngIf="trainingList.length > 0" lines="full">
       <ion-list-header>
         <ion-label>{{"upcomming__training_courses" | translate}}</ion-label>
       </ion-list-header>
-
       <ion-item>
         <ion-label slot="start">
           <p>{{"status" | translate}}</p>
@@ -37,68 +35,86 @@
           <p>{{"participant" | translate}}</p>
         </ion-label>
       </ion-item>
-
-      <ion-item-sliding #item *ngFor="let training of trainingList" >
-        <ion-item type="button" detail="true" >
-          <ion-icon *ngIf="training.status === null" slot="icon-only" color="warning" slot="start" name="help-circle"
-            (click)="toggle(true, training)"></ion-icon>
-          <ion-icon *ngIf="training.status === false" slot="icon-only" color="danger" slot="start" name="close-circle"
-            (click)="toggle( true, training)"></ion-icon>
-          <ion-icon *ngIf="training.status === true" slot="icon-only" color="success" slot="start"
-            name="checkmark-circle" (click)="toggle(false, training)"></ion-icon>
-          <ion-label (click)="openTrainingDetailModal(training)">
-            <h2>
-              {{training.name}}
-            </h2>
+      <ion-item-sliding #item *ngFor="let training of trainingList">
+        <ion-item type="button" detail="true">
+          <ion-icon
+            *ngIf="training.status === null"
+            slot="icon-only"
+            color="warning"
+            slot="start"
+            name="help-circle"
+            (click)="toggle(true, training)"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="training.status === false"
+            slot="icon-only"
+            color="danger"
+            slot="start"
+            name="close-circle"
+            (click)="toggle( true, training)"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="training.status === true"
+            slot="icon-only"
+            color="success"
+            slot="start"
+            name="checkmark-circle"
+            (click)="toggle(false, training)"
+          ></ion-icon>
+          <ion-label (click)="openTrainingDetailModal(training, true)">
+            <h2>{{training.name}}</h2>
             <h3>
               <ion-icon slot="icon-only" name="calendar-outline"></ion-icon>
-              {{training.date.toDate() | date:'dd.MM.YYYY '}} {{training.timeFrom | date:'HH:mm'}} Uhr -
-              {{training.timeTo | date:'HH:mm'}} Uhr
+              {{training.date.toDate() | date:'dd.MM.YYYY '}}
+              {{training.timeFrom | date:'HH:mm'}} Uhr - {{training.timeTo |
+              date:'HH:mm'}} Uhr
             </h3>
             <h3>
               <ion-icon slot="icon-only" name="location-outline"></ion-icon>
               {{training.streetAndNumber}} {{training.city}}
             </h3>
-     
+
             <h3>
               <ion-icon slot="icon-only" name="trophy-outline"></ion-icon>
               {{training.liga}} {{training.teamName}}
             </h3>
           </ion-label>
-          <ion-note slot="end" (click)="openTrainingDetailModal(training)">
+          <ion-note slot="end" (click)="openTrainingDetailModal(training,true)">
             <ion-badge color="primary">{{training.countAttendees}}</ion-badge>
           </ion-note>
         </ion-item>
 
         <ion-item-options side="start">
-          <ion-item-option color="success" *ngIf="training.status === false || training.status === null"
-            (click)="toggleItem(item, true, training)">
+          <ion-item-option
+            color="success"
+            *ngIf="training.status === false || training.status === null"
+            (click)="toggleItem(item, true, training)"
+          >
             <ion-icon slot="icon-only" name="checkmark-circle"></ion-icon>
           </ion-item-option>
-          <ion-item-option color="danger" *ngIf="training.status === true || training.status === null"
-            (click)="toggleItem(item, false, training)">
+          <ion-item-option
+            color="danger"
+            *ngIf="training.status === true || training.status === null"
+            (click)="toggleItem(item, false, training)"
+          >
             <ion-icon slot="icon-only" name="close-circle"></ion-icon>
           </ion-item-option>
         </ion-item-options>
 
-
         <ion-item-options side="end">
-          <ion-item-option color="medium" (click)="copyTraining(item, training)">
+          <ion-item-option
+            color="medium"
+            (click)="copyTraining(item, training)"
+          >
             <ion-icon slot="icon-only" name="copy-outline"></ion-icon>
           </ion-item-option>
-          <ion-item-option color="danger" (click)="deleteTraining(item, training)">
+          <ion-item-option
+            color="danger"
+            (click)="deleteTraining(item, training)"
+          >
             <ion-icon slot="icon-only" name="trash"></ion-icon>
           </ion-item-option>
         </ion-item-options>
-
-        <!--<ion-item-options side="end" *ngIf="user && user.">
-          <ion-item-option>
-            <ion-icon slot="icon-only" name="ellipsis-horizontal-circle"></ion-icon>
-          </ion-item-option>
-          <ion-item-option color="danger">
-            <ion-icon slot="icon-only" name="trash"></ion-icon>
-          </ion-item-option>
-        </ion-item-options>-->
       </ion-item-sliding>
     </ion-list>
 
@@ -106,15 +122,14 @@ <h3>
       <ion-list-header>
         <ion-label>{{"upcomming__training" | translate}}</ion-label>
       </ion-list-header>
-      <ion-note>
-        {{"no_training__found" | translate}}
-      </ion-note>
+      <ion-note> {{"no_training__found" | translate}} </ion-note>
     </ion-list>
   </ng-container>
 
-  <ng-container *ngIf="trainingListPast$ | async as trainingListPast; else loading">
+  <ng-container
+    *ngIf="trainingListPast$ | async as trainingListPast; else loading"
+  >
     <ion-list *ngIf="trainingListPast.length > 0" lines="full">
-
       <ion-list-header>
         <ion-label>{{"past__training" | translate}}</ion-label>
       </ion-list-header>
@@ -128,62 +143,57 @@ <h3>
       </ion-item>
       <ion-item-sliding #item *ngFor="let training of trainingListPast">
         <ion-item type="button" detail="true">
-          <ion-icon *ngIf="training.status === null" slot="icon-only" color="warning" slot="start"
-            name="help-circle"></ion-icon>
-          <ion-icon *ngIf="training.status === false" slot="icon-only" color="danger" slot="start"
-            name="close-circle"></ion-icon>
-          <ion-icon *ngIf="training.status === true" slot="icon-only" color="success" slot="start"
-            name="checkmark-circle"></ion-icon>
-          <ion-label>
-            <h2>
-              {{training.name}}
-            </h2>
+          <ion-icon
+            *ngIf="training.status === null"
+            slot="icon-only"
+            color="warning"
+            slot="start"
+            name="help-circle"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="training.status === false"
+            slot="icon-only"
+            color="danger"
+            slot="start"
+            name="close-circle"
+          ></ion-icon>
+          <ion-icon
+            *ngIf="training.status === true"
+            slot="icon-only"
+            color="success"
+            slot="start"
+            name="checkmark-circle"
+          ></ion-icon>
+          <ion-label (click)="openTrainingDetailModal(training, false)">
+            <h2>{{training.name}}</h2>
             <h3>
               <ion-icon slot="icon-only" name="location-outline"></ion-icon>
               {{training.streetAndNumber}} {{training.city}}
             </h3>
             <h3>
               <ion-icon slot="icon-only" name="calendar-outline"></ion-icon>
-              {{training.date.toDate() | date:'dd.MM.YYYY '}} {{training.timeFrom | date:'HH:mm'}} Uhr -
-              {{training.timeTo | date:'HH:mm'}} Uhr
+              {{training.date.toDate() | date:'dd.MM.YYYY '}}
+              {{training.timeFrom | date:'HH:mm'}} Uhr - {{training.timeTo |
+              date:'HH:mm'}} Uhr
             </h3>
             <h3>
               <ion-icon slot="icon-only" name="trophy-outline"></ion-icon>
               {{training.liga}} {{training.teamName}}
             </h3>
           </ion-label>
-          <ion-note slot="end">
+          <ion-note
+            slot="end"
+            (click)="openTrainingDetailModal(training,false)"
+          >
             <ion-badge color="primary">{{training.countAttendees}}</ion-badge>
           </ion-note>
         </ion-item>
 
-        <!--<ion-item-options side="start">
-          <ion-item-option
-            color="success"
-            *ngIf="training.status === false || training.status === null"
-            (click)="toggleItem(item, true, training)"
-          >
-            <ion-icon slot="icon-only" name="checkmark-circle"></ion-icon>
-          </ion-item-option>
+        <ion-item-options side="end">
           <ion-item-option
-            color="danger"
-            *ngIf="training.status === true || training.status === null"
-            (click)="toggleItem(item, false, training)"
+            color="medium"
+            (click)="copyTraining(item, training)"
           >
-            <ion-icon slot="icon-only" name="close-circle"></ion-icon>
-          </ion-item-option>
-        </ion-item-options>-->
-
-        <!--<ion-item-options side="end" *ngIf="user && user.isAdmin">
-        <ion-item-option>
-          <ion-icon slot="icon-only" name="ellipsis-horizontal-circle"></ion-icon>
-        </ion-item-option>
-        <ion-item-option color="danger">
-          <ion-icon slot="icon-only" name="trash"></ion-icon>
-        </ion-item-option>-->
-
-        <ion-item-options side="end">
-          <ion-item-option color="medium" (click)="copyTraining(item, training)">
             <ion-icon slot="icon-only" name="copy-outline"></ion-icon>
           </ion-item-option>
         </ion-item-options>
@@ -194,9 +204,7 @@ <h3>
       <ion-list-header>
         <ion-label>{{"past__training" | translate}}</ion-label>
       </ion-list-header>
-      <ion-note>
-        {{"no_training__found" | translate}}
-      </ion-note>
+      <ion-note> {{"no_training__found" | translate}} </ion-note>
     </ion-list>
   </ng-container>
 
@@ -208,32 +216,58 @@ <h3>
   </ion-fab>
 </ion-content>
 
-
 <ng-template #loading>
   <ion-list>
     <ion-grid>
       <ion-row>
-        <ion-col size-lg="4" size-md="6" size-sm="6" size="12" *ngFor="let item of skeleton">
+        <ion-col
+          size-lg="4"
+          size-md="6"
+          size-sm="6"
+          size="12"
+          *ngFor="let item of skeleton"
+        >
           <ion-card>
             <ion-card-header>
               <ion-card-subtitle>
-                <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+                <ion-skeleton-text
+                  animated
+                  style="width: 60%"
+                ></ion-skeleton-text>
               </ion-card-subtitle>
               <ion-card-title>
-                <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+                <ion-skeleton-text
+                  animated
+                  style="width: 80%"
+                ></ion-skeleton-text>
               </ion-card-title>
             </ion-card-header>
 
             <ion-card-content>
-              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 60%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 60%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
             </ion-card-content>
           </ion-card>
         </ion-col>
       </ion-row>
     </ion-grid>
   </ion-list>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/app/pages/training/trainings/trainings.page.ts b/src/app/pages/training/trainings/trainings.page.ts
index b620143a..3360b98e 100644
--- a/src/app/pages/training/trainings/trainings.page.ts
+++ b/src/app/pages/training/trainings/trainings.page.ts
@@ -8,7 +8,18 @@ import {
   ToastController,
 } from "@ionic/angular";
 import { User } from "@angular/fire/auth";
-import { Observable, catchError, combineLatest, lastValueFrom, map, mergeMap, of, switchMap, take, tap } from "rxjs";
+import {
+  Observable,
+  catchError,
+  combineLatest,
+  lastValueFrom,
+  map,
+  mergeMap,
+  of,
+  switchMap,
+  take,
+  tap,
+} from "rxjs";
 import { Training } from "src/app/models/training";
 import { AuthService } from "src/app/services/auth.service";
 import { FirebaseService } from "src/app/services/firebase.service";
@@ -50,7 +61,6 @@ export class TrainingsPage implements OnInit {
   }
 
   ngOnInit() {
-
     this.trainingList$ = this.getTeamTraining();
     this.trainingList$.subscribe({
       next: (data) => {
@@ -58,128 +68,182 @@ export class TrainingsPage implements OnInit {
         this.cdr.detectChanges();
       },
       error: (err) => console.error("Training Error in subscription:", err),
-      complete: () => console.log("Training Observable completed")
+      complete: () => console.log("Training Observable completed"),
     });
 
-
     this.trainingListPast$ = this.getTeamTrainingPast();
     this.trainingListPast$.subscribe({
       next: () => {
         console.log("Training PAST Data received");
         this.cdr.detectChanges();
       },
-      error: (err) => console.error("Training PAST Error in subscription:", err),
-      complete: () => console.log("Training PAST Observable completed")
+      error: (err) =>
+        console.error("Training PAST Error in subscription:", err),
+      complete: () => console.log("Training PAST Observable completed"),
     });
-
   }
 
-  ngOnDestroy(): void {
-
-  }
+  ngOnDestroy(): void {}
 
   getTeamTraining() {
     return this.authService.getUser$().pipe(
       take(1),
-      tap(user=>{
+      tap((user) => {
         this.user = user;
       }),
-      switchMap(user => {
+      switchMap((user) => {
         if (!user) return of([]);
         return this.fbService.getUserTeamRefs(user);
       }),
-      tap(teams => console.log("Teams:", teams)),
-      mergeMap(teams => {
+      tap((teams) => console.log("Teams:", teams)),
+      mergeMap((teams) => {
         if (teams.length === 0) return of([]);
         return combineLatest(
-          teams.map(team => 
+          teams.map((team) =>
             this.trainingService.getTeamTrainingsRefs(team.id).pipe(
-              switchMap(teamTrainings => {
+              switchMap((teamTrainings) => {
                 if (teamTrainings.length === 0) return of([]);
                 return combineLatest(
-                  teamTrainings.map(training => 
-                    this.trainingService.getTeamTrainingsAttendeesRef(team.id, training.id).pipe(
-                      map(attendees => {
-                        const userAttendee = attendees.find(att => att.id == this.user.uid);
-                        const status = userAttendee ? userAttendee.status : null; // default to false if user is not found in attendees list
-                        return ({...training, attendees, status: status, countAttendees: attendees.filter(att => att.status == true).length, teamId: team.id,})
-                      }),
-                      catchError(() => of({ ...training, attendees: [], status: null, countAttendees: 0, teamId: team.id,})) // If error, return training with empty attendees
-                    )
+                  teamTrainings.map((training) =>
+                    this.trainingService
+                      .getTeamTrainingsAttendeesRef(team.id, training.id)
+                      .pipe(
+                        map((attendees) => {
+                          const userAttendee = attendees.find(
+                            (att) => att.id == this.user.uid
+                          );
+                          const status = userAttendee
+                            ? userAttendee.status
+                            : null; // default to false if user is not found in attendees list
+                          return {
+                            ...training,
+                            attendees,
+                            status: status,
+                            countAttendees: attendees.filter(
+                              (att) => att.status == true
+                            ).length,
+                            teamId: team.id,
+                          };
+                        }),
+                        catchError(() =>
+                          of({
+                            ...training,
+                            attendees: [],
+                            status: null,
+                            countAttendees: 0,
+                            teamId: team.id,
+                          })
+                        ) // If error, return training with empty attendees
+                      )
                   )
                 );
               }),
-              map(trainingsWithAttendees => trainingsWithAttendees), // Flatten trainings array for each team
+              map((trainingsWithAttendees) => trainingsWithAttendees), // Flatten trainings array for each team
               catchError(() => of([])) // If error in fetching trainings, return empty array
             )
           )
         ).pipe(
-          map(teamsTrainings => teamsTrainings.flat()), // Flatten to get all trainings across all teams
-          map(allTrainings => 
-            allTrainings.sort((a, b) => Timestamp.fromMillis(a.dateTime).seconds - Timestamp.fromMillis(b.dateTime).seconds) // Sort trainings by date
+          map((teamsTrainings) => teamsTrainings.flat()), // Flatten to get all trainings across all teams
+          map(
+            (allTrainings) =>
+              allTrainings.sort(
+                (a, b) =>
+                  Timestamp.fromMillis(a.dateTime).seconds -
+                  Timestamp.fromMillis(b.dateTime).seconds
+              ) // Sort trainings by date
           )
         );
       }),
-      tap(results => console.log("Final results with all trainings:", results)),
-      catchError(err => {
+      tap((results) =>
+        console.log("Final results with all trainings:", results)
+      ),
+      catchError((err) => {
         console.error("Error in getTeamTrainingsUpcoming:", err);
         return of([]); // Return an empty array on error
       })
     );
   }
-  
 
   getTeamTrainingPast() {
     return this.authService.getUser$().pipe(
       take(1),
-      tap(user=>{
+      tap((user) => {
         this.user = user;
       }),
-      switchMap(user => {
+      switchMap((user) => {
         if (!user) return of([]);
         return this.fbService.getUserTeamRefs(user);
       }),
-      tap(teams => console.log("Teams:", teams)),
-      mergeMap(teams => {
+      tap((teams) => console.log("Teams:", teams)),
+      mergeMap((teams) => {
         if (teams.length === 0) return of([]);
         return combineLatest(
-          teams.map(team => 
+          teams.map((team) =>
             this.trainingService.getTeamTrainingsPastRefs(team.id).pipe(
-              switchMap(teamTrainings => {
+              switchMap((teamTrainings) => {
                 if (teamTrainings.length === 0) return of([]);
                 return combineLatest(
-                  teamTrainings.map(training => 
-                    this.trainingService.getTeamTrainingsAttendeesRef(team.id, training.id).pipe(
-                      map(attendees => {
-                        const userAttendee = attendees.find(att => att.id == this.user.uid);
-                        const status = userAttendee ? userAttendee.status : null; // default to false if user is not found in attendees list
-                        return ({...training, attendees, status: status, countAttendees: attendees.filter(att => att.status == true).length, teamId: team.id,})
-                      }),
-                      catchError(() => of({ ...training, attendees: [], status: null, countAttendees: 0, teamId: team.id,})) // If error, return training with empty attendees
-                    )
+                  teamTrainings.map((training) =>
+                    this.trainingService
+                      .getTeamTrainingsAttendeesRef(team.id, training.id)
+                      .pipe(
+                        map((attendees) => {
+                          const userAttendee = attendees.find(
+                            (att) => att.id == this.user.uid
+                          );
+                          const status = userAttendee
+                            ? userAttendee.status
+                            : null; // default to false if user is not found in attendees list
+                          return {
+                            ...training,
+                            attendees,
+                            status: status,
+                            countAttendees: attendees.filter(
+                              (att) => att.status == true
+                            ).length,
+                            teamId: team.id,
+                          };
+                        }),
+                        catchError(() =>
+                          of({
+                            ...training,
+                            attendees: [],
+                            status: null,
+                            countAttendees: 0,
+                            teamId: team.id,
+                          })
+                        ) // If error, return training with empty attendees
+                      )
                   )
                 );
               }),
-              map(trainingsWithAttendees => trainingsWithAttendees), // Flatten trainings array for each team
+              map((trainingsWithAttendees) => trainingsWithAttendees), // Flatten trainings array for each team
               catchError(() => of([])) // If error in fetching trainings, return empty array
             )
           )
         ).pipe(
-          map(teamsTrainings => teamsTrainings.flat()), // Flatten to get all trainings across all teams
-          map(allTrainings => 
-            allTrainings.sort((b, a) => Timestamp.fromMillis(a.dateTime).seconds - Timestamp.fromMillis(b.dateTime).seconds) // Sort trainings by date
+          map((teamsTrainings) => teamsTrainings.flat()), // Flatten to get all trainings across all teams
+          map(
+            (allTrainings) =>
+              allTrainings.sort(
+                (b, a) =>
+                  Timestamp.fromMillis(a.dateTime).seconds -
+                  Timestamp.fromMillis(b.dateTime).seconds
+              ) // Sort trainings by date
           )
         );
       }),
-      tap(results => console.log("Final results with all trainings:", results)),
-      catchError(err => {
+      tap((results) =>
+        console.log("Final results with all trainings:", results)
+      ),
+      catchError((err) => {
         console.error("Error in getTeamTrainingsUpcoming:", err);
         return of([]); // Return an empty array on error
       })
     );
   }
-  
-  async openTrainingDetailModal(training: Training) {
+
+  async openTrainingDetailModal(training: Training, isFuture: boolean) {
     // const presentingElement = await this.modalCtrl.getTop();
     const modal = await this.modalController.create({
       component: TrainingDetailPage,
@@ -188,6 +252,7 @@ export class TrainingsPage implements OnInit {
       showBackdrop: true,
       componentProps: {
         data: training,
+        isFuture: isFuture,
       },
     });
     modal.present();
@@ -198,7 +263,6 @@ export class TrainingsPage implements OnInit {
     }
   }
 
-
   async openTrainingCreateModal() {
     // const presentingElement = await this.modalCtrl.getTop();
     const modal = await this.modalController.create({
@@ -218,7 +282,6 @@ export class TrainingsPage implements OnInit {
     }
   }
 
-
   async copyTraining(slidingItem: IonItemSliding, training) {
     slidingItem.closeOpened();
 
@@ -238,10 +301,8 @@ export class TrainingsPage implements OnInit {
 
     if (role === "confirm") {
     }
-
   }
 
-
   async deleteTraining(slidingItem: IonItemSliding, training) {
     slidingItem.closeOpened();
     const toast = await this.toastController.create({
@@ -253,7 +314,6 @@ export class TrainingsPage implements OnInit {
     toast.present();
   }
 
-
   async toggle(status: boolean, training: Training) {
     console.log(
       `Set Status ${status} for user ${this.user.uid} and team ${training.teamId} and training ${training.id}`
@@ -296,10 +356,8 @@ export class TrainingsPage implements OnInit {
     toast.present();
   }
 
-
   async openFilter(ev: Event) {
-   
-   /*
+    /*
     let filterList = [];
 
 
@@ -369,5 +427,4 @@ export class TrainingsPage implements OnInit {
     });
 */
   }
-
 }