diff --git a/src/app/deck-list.component.html b/src/app/deck-list.component.html
index f1dc878..cb4cf06 100644
--- a/src/app/deck-list.component.html
+++ b/src/app/deck-list.component.html
@@ -16,18 +16,18 @@
           <h2 class="text-xl font-semibold">{{ deck.name }}</h2>
           <span class="text-gray-600">({{ deck.images.length }} Bilder)</span>
         </div>
-        <button (click)="toggleDeckExpansion(deck.id)" class="text-gray-500 hover:text-gray-700 focus:outline-none" title="Deck ein-/ausklappen">
-          <svg *ngIf="!isDeckExpanded(deck.id)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <button (click)="toggleDeckExpansion(deck.name)" class="text-gray-500 hover:text-gray-700 focus:outline-none" title="Deck ein-/ausklappen">
+          <svg *ngIf="!isDeckExpanded(deck.name)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
           </svg>
-          <svg *ngIf="isDeckExpanded(deck.id)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-180 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg *ngIf="isDeckExpanded(deck.name)" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-180 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
           </svg>
         </button>
       </div>
 
       <!-- Bildliste und Action-Buttons nur anzeigen, wenn das Deck erweitert ist und kein Training aktiv ist -->
-      <ng-container *ngIf="isDeckExpanded(deck.id) && !selectedDeck">
+      <ng-container *ngIf="isDeckExpanded(deck.name) && !selectedDeck">
         <!-- Liste der Bilder mit Anzahl der Boxen und Icons -->
         <ul class="mb-4">
           <li *ngFor="let image of deck.images" class="flex justify-between items-center py-2 border-b last:border-b-0">
diff --git a/src/app/deck-list.component.ts b/src/app/deck-list.component.ts
index cdbc3c4..89a7d0a 100644
--- a/src/app/deck-list.component.ts
+++ b/src/app/deck-list.component.ts
@@ -37,7 +37,7 @@ export class DeckListComponent implements OnInit {
   currentUploadDeckName: string = '';
 
   // Set zur Verfolgung erweiterter Decks
-  expandedDecks: Set<number> = new Set<number>();
+  expandedDecks: Set<string> = new Set<string>();
 
   // State für das Verschieben von Bildern
   imageToMove: { image: DeckImage, sourceDeck: Deck } | null = null;
@@ -122,18 +122,18 @@ export class DeckListComponent implements OnInit {
   }
 
   // Methode zum Umschalten der Deck-Erweiterung
-  toggleDeckExpansion(deckId: number): void {
-    if (this.expandedDecks.has(deckId)) {
-      this.expandedDecks.delete(deckId);
+  toggleDeckExpansion(deckName: string): void {
+    if (this.expandedDecks.has(deckName)) {
+      this.expandedDecks.delete(deckName);
     } else {
-      this.expandedDecks.add(deckId);
+      this.expandedDecks.add(deckName);
     }
     this.saveExpandedDecks();
   }
 
   // Methode zur Überprüfung, ob ein Deck erweitert ist
-  isDeckExpanded(deckId: number): boolean {
-    return this.expandedDecks.has(deckId);
+  isDeckExpanded(deckName: string): boolean {
+    return this.expandedDecks.has(deckName);
   }
 
   // Laden der erweiterten Decks aus dem sessionStorage
@@ -141,14 +141,14 @@ export class DeckListComponent implements OnInit {
     const stored = sessionStorage.getItem('expandedDecks');
     if (stored) {
       try {
-        const parsed: number[] = JSON.parse(stored);
-        this.expandedDecks = new Set<number>(parsed);
+        const parsed: string[] = JSON.parse(stored);
+        this.expandedDecks = new Set<string>(parsed);
       } catch (e) {
         console.error('Fehler beim Parsen der erweiterten Decks aus sessionStorage', e);
       }
     } else {
       // Wenn keine Daten gespeichert sind, alle Decks standardmäßig nicht erweitern
-      this.expandedDecks = new Set<number>();
+      this.expandedDecks = new Set<string>();
     }
   }
 
diff --git a/src/app/deck.service.ts b/src/app/deck.service.ts
index fdd4fa0..86beee1 100644
--- a/src/app/deck.service.ts
+++ b/src/app/deck.service.ts
@@ -4,7 +4,6 @@ import { HttpClient } from '@angular/common/http';
 import { map, Observable, switchMap } from 'rxjs';
 
 export interface Deck {
-  id?:number;
   name: string;
   images: DeckImage[];
 }
@@ -26,6 +25,7 @@ export interface Box {
   factor?: number;
   reps?: number;
   lapses?: number;
+  isGraduated?:boolean;
 }
 
 export interface BackendBox {
@@ -90,7 +90,8 @@ export class DeckService {
         ivl:image.ivl,
         factor:image.factor,
         reps:image.reps,
-        lapses:image.lapses
+        lapses:image.lapses,
+        isGraduated:image.isGraduated?true:false
       });
     });
 
diff --git a/src/app/training/training.component.ts b/src/app/training/training.component.ts
index af7566f..341c3c6 100644
--- a/src/app/training/training.component.ts
+++ b/src/app/training/training.component.ts
@@ -4,6 +4,19 @@ import { Deck, DeckImage, DeckService, Box } from '../deck.service';
 import { CommonModule } from '@angular/common';
 import { lastValueFrom } from 'rxjs';
 
+const LEARNING_STEPS = {
+  AGAIN: 1,      // 1 minute
+  GOOD: 10,      // 10 minutes
+  GRADUATION: 1440 // 1 day (in minutes)
+};
+
+const FACTOR_CHANGES = {
+  AGAIN: 0.85,   // Reduce factor by 15%
+  EASY: 1.15,    // Increase factor by 15%
+  MIN: 1.3,      // Minimum factor allowed
+  MAX: 2.9       // Maximum factor allowed
+};
+const EASY_INTERVAL = 4 * 1440; // 4 days in minutes
 @Component({
   selector: 'app-training',
   templateUrl: './training.component.html',
@@ -123,7 +136,7 @@ export class TrainingComponent implements OnInit {
       this.boxesToReview.forEach((box, index) => {
         ctx.beginPath();
         ctx.rect(box.x1, box.y1, box.x2 - box.x1, box.y2 - box.y1);
-        if (this.currentBoxIndex === index && this.isShowingBox) {
+        if (this.currentBoxIndex === index && this.isShowingBox || (box.due && box.due-this.getTodayInDays()>0)) {
           // Box ist aktuell enthüllt, keine Überlagerung
           return;
         } else if (this.currentBoxIndex === index && !this.isShowingBox) {
@@ -226,39 +239,11 @@ export class TrainingComponent implements OnInit {
     const box = this.boxesToReview[this.currentBoxIndex];
     const today = this.getTodayInDays();
 
-    let newIvl = box.ivl || 0;
-    let newFactor = box.factor || 2.5;
-    let newReps = box.reps || 0;
-    let newLapses = box.lapses || 0;
-
-    switch(action) {
-      case 'again':
-        newIvl = 1 / 1440; // 1 Minute in Tagen
-        newReps = 0;
-        newLapses += 1;
-        break;
-      case 'good':
-        if (newReps === 0) {
-          newIvl = 10 / 1440; // 10 Minuten in Tagen
-          // newIvl = 1; // nächste Wiederholung am nächsten Tag
-        } else {
-          newIvl = newIvl * newFactor;
-        }
-        newReps += 1;
-        break;
-      case 'easy':
-        if (newReps === 0) {
-          newIvl = 4; // nächste Wiederholung in 4 Tagen
-        } else {
-          newIvl = newIvl * newFactor * 1.3; // leicht erhöhtes Intervall
-        }
-        newReps += 1;
-        newFactor = newFactor * 1.15; // optional: Faktor leicht erhöhen
-        break;
-    }
+    // Berechne das neue Intervall und eventuell den neuen Faktor
+    const { newIvl, newFactor, newReps, newLapses, newIsGraduated } = this.calculateNewInterval(box, action);
 
     // Aktualisiere das Fälligkeitsdatum
-    const nextDue = today + Math.floor(newIvl);
+    const nextDue = today + Math.floor(newIvl/1440);
 
     // Aktualisiere das Box-Objekt
     box.ivl = newIvl;
@@ -266,6 +251,7 @@ export class TrainingComponent implements OnInit {
     box.reps = newReps;
     box.lapses = newLapses;
     box.due = nextDue;
+    box.isGraduated = newIsGraduated
 
     // Sende das Update an das Backend
     try {
@@ -276,6 +262,94 @@ export class TrainingComponent implements OnInit {
     }
   }
 
+  /**
+   * Berechnet das neue Intervall, den Faktor, die Wiederholungen und die Lapses basierend auf der Aktion.
+   * @param box Die aktuelle Box
+   * @param action Die Aktion ('again', 'good', 'easy')
+   * @returns Ein Objekt mit den neuen Werten für ivl, factor, reps und lapses
+   */
+  calculateNewInterval(box: Box, action: 'again' | 'good' | 'easy'): { newIvl: number, newFactor: number, newReps: number, newLapses: number, newIsGraduated: boolean } {
+    let newIvl = box.ivl || 0;
+    let newFactor = box.factor || 2.5;
+    let newReps = box.reps || 0;
+    let newLapses = box.lapses || 0;
+    let newIsGraduated = box.isGraduated || false
+
+      if (action === 'again') {
+        newLapses++;
+        newReps = 0;
+        newIvl = LEARNING_STEPS.AGAIN;
+        newIsGraduated = false;
+        
+        // Reduce factor but not below minimum
+        newFactor = Math.max(
+            FACTOR_CHANGES.MIN,
+            newFactor * FACTOR_CHANGES.AGAIN
+        );
+        
+        return { newIvl, newFactor, newReps, newLapses, newIsGraduated };
+    }
+
+    if (action === 'easy') {
+        newReps++;
+        newIsGraduated = true;
+        newIvl = EASY_INTERVAL;
+        
+        // Increase factor but not above maximum
+        newFactor = Math.min(
+            FACTOR_CHANGES.MAX,
+            newFactor * FACTOR_CHANGES.EASY
+        );
+        
+        return { newIvl, newFactor, newReps, newLapses, newIsGraduated };;
+    }
+
+    // Handle 'good' action
+    newReps++;
+
+    if (!newIsGraduated) {
+        // Card is in learning phase
+        if (newReps === 1) {
+          newIvl = LEARNING_STEPS.GOOD;
+        } else {
+            // Graduate the card
+            newIsGraduated = true;
+            newIvl = LEARNING_STEPS.GRADUATION;
+        }
+    } else {
+        // Card is in review phase, apply space repetition
+        newIvl = Math.round(newIvl * newFactor);
+    }
+
+    return { newIvl, newFactor, newReps, newLapses, newIsGraduated };;
+  }
+
+  /**
+   * Berechnet das nächste Intervall basierend auf der Aktion und gibt es als String zurück.
+   * @param box Die aktuelle Box
+   * @param action Die Aktion ('again', 'good', 'easy')
+   * @returns Das nächste Intervall als String (z.B. "10 min", "2 d")
+   */
+  getNextInterval(box: Box | null, action: 'again' | 'good' | 'easy'): string {
+    if (!box)
+      return '';
+
+    const { newIvl } = this.calculateNewInterval(box, action);
+
+    return this.formatInterval(newIvl);
+  }
+
+  /**
+   * Formatiert das Intervall als String, entweder in Minuten oder Tagen.
+   * @param ivl Das Intervall in Tagen
+   * @returns Das formatierte Intervall als String
+   */
+  formatInterval(minutes: number): string {
+    if (minutes < 60) return `${minutes}min`;
+    if (minutes < 1440) return `${Math.round(minutes/60)}h`;
+    return `${Math.round(minutes/1440)}d`;
+  }
+
   /**
    * Deckt die aktuelle Box wieder auf (verdeckt sie erneut).
    */
@@ -339,58 +413,6 @@ export class TrainingComponent implements OnInit {
     }
   }
 
-  /**
-   * Berechnet das nächste Intervall basierend auf der Aktion und gibt es als String zurück.
-   * @param box Die aktuelle Box
-   * @param action Die Aktion ('again', 'good', 'easy')
-   * @returns Das nächste Intervall als String (z.B. "10 min", "2 d")
-   */
-  getNextInterval(box: Box | null, action: 'again' | 'good' | 'easy'): string {
-    if (!box)
-      return '';
-
-    let ivl = box.ivl || 0;
-    let factor = box.factor || 2.5;
-    let reps = box.reps || 0;
-
-    switch(action) {
-      case 'again':
-        ivl = 1 / 1440; // 1 Minuten in Tagen
-        break;
-      case 'good':
-        if (reps === 0) {
-          ivl = 10 / 1440; // 10 Minuten in Tagen
-        } else {
-          ivl = ivl * factor;
-        }
-        break;
-      case 'easy':
-        if (reps === 0) {
-          ivl = 4; // 4 Tage
-        } else {
-          ivl = ivl * factor * 1.3;
-        }
-        break;
-    }
-
-    return this.formatInterval(ivl);
-  }
-
-  /**
-   * Formatiert das Intervall als String, entweder in Minuten oder Tagen.
-   * @param ivl Das Intervall in Tagen
-   * @returns Das formatierte Intervall als String
-   */
-  formatInterval(ivl: number): string {
-    if (ivl < 1) {
-      const minutes = Math.round(ivl * 1440);
-      return `${minutes} min`;
-    } else {
-      const days = Math.floor(ivl);
-      return `${days} d`;
-    }
-  }
-
   /**
    * Gibt den Fortschritt des Trainings an, z.B. "Bild 2 von 5".
    */