diff --git a/backend/src/main/java/ropold/backend/controller/MemoryController.java b/backend/src/main/java/ropold/backend/controller/MemoryController.java
index 184cb47..d66686c 100644
--- a/backend/src/main/java/ropold/backend/controller/MemoryController.java
+++ b/backend/src/main/java/ropold/backend/controller/MemoryController.java
@@ -27,11 +27,17 @@ public class MemoryController {
     private final CloudinaryService cloudinaryService;
     private final AppUserService appUserService;
 
-    @GetMapping("active/match-id/{numberOfMatchId}")
+    @GetMapping("/active/match-id/{numberOfMatchId}")
     public List<MemoryModel> getActiveMemoriesFilterByMatchId(@PathVariable int numberOfMatchId) {
         return memoryService.getActiveMemoriesFilterByMatchId(numberOfMatchId);
     }
 
+    @GetMapping("/active/match-ids")
+    public List<Integer> getActiveMemoriesMatchIds() {
+        return memoryService.getActiveMemoriesMatchIds();
+    }
+
+
     @GetMapping("/favorites")
     public List<MemoryModel> getUserFavorites(@AuthenticationPrincipal OAuth2User authentication) {
         List<String> favoriteMemoryIds = appUserService.getUserFavorites(authentication.getName());
diff --git a/backend/src/main/java/ropold/backend/service/MemoryService.java b/backend/src/main/java/ropold/backend/service/MemoryService.java
index 86b668d..866ebde 100644
--- a/backend/src/main/java/ropold/backend/service/MemoryService.java
+++ b/backend/src/main/java/ropold/backend/service/MemoryService.java
@@ -162,4 +162,13 @@ public List<MemoryModel> getMemoriesForGithubUser(String githubId) {
                 .toList();
     }
 
+    public List<Integer> getActiveMemoriesMatchIds() {
+        return memoryRepository.findAll().stream()  // Alle MemoryModel-Objekte laden
+                .filter(MemoryModel::isActive)  // Nur aktive Einträge filtern
+                .map(MemoryModel::matchId)  // matchId extrahieren
+                .distinct()  // Duplikate entfernen
+                .sorted()  // Sortieren
+                .toList();  // Mit Stream.toList() die Liste zurückgeben
+    }
+
 }
diff --git a/backend/src/test/java/ropold/backend/controller/MemoryControllerIntegrationTest.java b/backend/src/test/java/ropold/backend/controller/MemoryControllerIntegrationTest.java
index b592c7f..6562c95 100644
--- a/backend/src/test/java/ropold/backend/controller/MemoryControllerIntegrationTest.java
+++ b/backend/src/test/java/ropold/backend/controller/MemoryControllerIntegrationTest.java
@@ -203,6 +203,15 @@ void getAllMemories_shouldReturnAllMemories() throws Exception {
              """));
     }
 
+    @Test
+    void getActiveMatchIds_shouldReturnListOfIntWithMatchIds() throws Exception {
+        mockMvc.perform(MockMvcRequestBuilders.get("/api/memory-hub/active/match-ids")
+                        .with(oidcLogin().idToken(i -> i.claim("sub", "user")))
+                )
+                .andExpect(status().isOk())
+                .andExpect(content().json("[101]"));
+    }
+
     @Test
     void getActiveMemoriesFilterByMatchId_shouldReturnFilteredMemories() throws Exception {
         // Beispiel für eine 'matchId' (z.B. 101)
diff --git a/backend/src/test/java/ropold/backend/service/MemoryServiceTest.java b/backend/src/test/java/ropold/backend/service/MemoryServiceTest.java
index 11c8029..d4d3d29 100644
--- a/backend/src/test/java/ropold/backend/service/MemoryServiceTest.java
+++ b/backend/src/test/java/ropold/backend/service/MemoryServiceTest.java
@@ -579,7 +579,74 @@ void getMemoriesForGithubUser_NoMemoriesForGithubId() {
         verify(memoryRepository, times(1)).findAll(); // Verify all memories were fetched
     }
 
+    @Test
+    void getActiveMemoriesMatchIds_Success() {
+        // Given
+        List<Integer> expectedMatchIds = List.of(101); // Erwartete sortierte matchId-Liste
+        when(memoryRepository.findAll()).thenReturn(memories);
+
+        // When
+        List<Integer> actualMatchIds = memoryService.getActiveMemoriesMatchIds();
+
+        // Then
+        assertEquals(expectedMatchIds, actualMatchIds); // Verifizieren, dass die zurückgegebene Liste korrekt ist
+    }
+
+    @Test
+    void getActiveMemoriesMatchIds_MultipleMatches() {
+        // Given
+        MemoryModel avatarMemory = new MemoryModel(
+                "1",
+                "Avatar Erinnerung",
+                101,
+                Category.GITHUB_AVATAR,
+                "Eine Erinnerung, die mit einem GitHub-Avatar verknüpft ist",
+                true,
+                "github123",
+                "user1",
+                "https://avatars.example.com/user1.png",
+                "https://github.com/user1",
+                "https://example.com/image1.jpg"
+        );
+
+        MemoryModel cloudinaryMemory = new MemoryModel(
+                "2",
+                "Cloudinary Erinnerung",
+                102,
+                Category.CLOUDINARY_IMAGE,
+                "Eine Erinnerung, die mit einem Cloudinary-Bild gespeichert ist",
+                false,
+                "github456",
+                "user2",
+                "https://avatars.example.com/user2.png",
+                "https://github.com/user2",
+                "https://example.com/image2.jpg"
+        );
+
+        MemoryModel additionalMemory = new MemoryModel(
+                "3",
+                "Neue Erinnerung",
+                103,
+                Category.GITHUB_AVATAR,
+                "Eine weitere Erinnerung",
+                true,
+                "github789",
+                "user3",
+                "https://avatars.example.com/user3.png",
+                "https://github.com/user3",
+                "https://example.com/image3.jpg"
+        );
+
+        // Speichern der Erinnerungen
+        when(memoryRepository.findAll()).thenReturn(List.of(avatarMemory, cloudinaryMemory, additionalMemory));
+
+        // When
+        List<Integer> actualMatchIds = memoryService.getActiveMemoriesMatchIds();
 
+        // Then
+        List<Integer> expectedMatchIds = List.of(101, 103);  // Erwartete Liste mit matchIds der aktiven Erinnerungen
+        assertEquals(expectedMatchIds, actualMatchIds);  // Verifizieren, dass die Liste korrekt ist
+    }
 
 }
 
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 433659a..20cb728 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -161,11 +161,6 @@ export default function App() {
 
     useEffect(() => {
         getUser();
-        getActiveMemories();
-        getAllMemories();
-        getHighScoresFor10Cards();
-        getHighScoresFor20Cards();
-        getHighScoresFor32Cards();
     }, []);
 
     useEffect(() => {
@@ -181,20 +176,20 @@ export default function App() {
 
   return (
     <>
-      <Navbar user={user} getUser={getUser} getActiveMemories={getActiveMemories} getAllMemories={getAllMemories} toggleSearchBar={toggleSearchBar} showSearch={showSearch} resetCurrentPage={resetCurrentPage} resetEditingState={resetEditingState} getHighScoresFor10Cards={getHighScoresFor10Cards} getHighScoresFor20Cards={getHighScoresFor20Cards} getHighScoresFor32Cards={getHighScoresFor32Cards}/>
+      <Navbar userDetails={userDetails} getUserDetails={getUserDetails} user={user} getUser={getUser} getActiveMemories={getActiveMemories} toggleSearchBar={toggleSearchBar} showSearch={showSearch} resetCurrentPage={resetCurrentPage} resetEditingState={resetEditingState} getHighScoresFor10Cards={getHighScoresFor10Cards} getHighScoresFor20Cards={getHighScoresFor20Cards} getHighScoresFor32Cards={getHighScoresFor32Cards}/>
       <Routes>
         <Route path="*" element={<NotFound />} />
-        <Route path="/" element={<Welcome />} />
+        <Route path="/" element={<Welcome userDetails={userDetails}/>} />
         <Route path="/list-of-all-cards" element={<ListOfAllCards activeMemories={activeMemories} toggleFavorite={toggleFavorite} favorites={favorites} user={user} showSearch={showSearch} currentPage={currentPage} paginate={setCurrentPage}/>} />
-        <Route path="/play" element={<Play activeMemories={activeMemories} highScores10={highScores10} highScores20={highScores20} highScores32={highScores32} user={user}/>} />
+        <Route path="/play" element={<Play highScores10={highScores10} highScores20={highScores20} highScores32={highScores32} user={user}/>} />
         <Route path="/memory/:id" element={<Details allMemories={allMemories} favorites={favorites} user={user} toggleFavorite={toggleFavorite}/>} />
-        <Route path="/high-score" element={<HighScore highScores10={highScores10} highScores20={highScores20} highScores32={highScores32}/>} />
+        <Route path="/high-score" element={<HighScore highScores10={highScores10} highScores20={highScores20} highScores32={highScores32} getHighScoresFor10Cards={getHighScoresFor10Cards} getHighScoresFor20Cards={getHighScoresFor20Cards} getHighScoresFor32Cards={getHighScoresFor32Cards}/>} />
 
         <Route element={<ProtectedRoute user={user} />}>
             <Route path="/favorites" element={<Favorites favorites={favorites} user={user} toggleFavorite={toggleFavorite}/>} />
-            <Route path="/my-memories" element={<MyMemories userDetails={userDetails} user={user} favorites={favorites} toggleFavorite={toggleFavorite} allMemories={allMemories} setAllMemories={setAllMemories} isEditing={isEditing} setIsEditing={setIsEditing}/>} />
+            <Route path="/my-memories" element={<MyMemories userDetails={userDetails} user={user} favorites={favorites} toggleFavorite={toggleFavorite} allMemories={allMemories} setAllMemories={setAllMemories} isEditing={isEditing} setIsEditing={setIsEditing} getAllMemories={getAllMemories}/>} />
             <Route path="/add" element={<AddMemoryCard userDetails={userDetails} handleSubmit={handleNewMemorySubmit} />} />
-            <Route path="/profile" element={<Profile userDetails={userDetails} />} />
+            <Route path="/profile" element={<Profile user={user} userDetails={userDetails} highScores10={highScores10} highScores20={highScores20} highScores32={highScores32} getHighScoresFor10Cards={getHighScoresFor10Cards} getHighScoresFor20Cards={getHighScoresFor20Cards} getHighScoresFor32Cards={getHighScoresFor32Cards}/>} />
         </Route>
       </Routes>
       <Footer />
diff --git a/frontend/src/components/AddMemoryCard.tsx b/frontend/src/components/AddMemoryCard.tsx
index 74d36ac..676fa00 100644
--- a/frontend/src/components/AddMemoryCard.tsx
+++ b/frontend/src/components/AddMemoryCard.tsx
@@ -19,7 +19,7 @@ export default function AddMemoryCard(props: Readonly<MemoryCardProps>) {
     const [description, setDescription] = useState<string>("");
     const [image, setImage] = useState<File | null>(null);
     const [imageUrl, setImageUrl] = useState<string>(""); // Setzt den Image-URL State
-    const [matchId, setMatchId] = useState<number>(1); // Defaultwert als Zahl (1)
+    const [matchId, setMatchId] = useState<number>(0); // Defaultwert als Zahl (1)
     const [errorMessages, setErrorMessages] = useState<string[]>([]);
     const [showPopup, setShowPopup] = useState(false);
 
@@ -37,6 +37,12 @@ export default function AddMemoryCard(props: Readonly<MemoryCardProps>) {
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
 
+        if (matchId === 0) {
+            setErrorMessages(["Please choose a valid Match ID!"]); // Fehlermeldung hinzufügen
+            setShowPopup(true); // Popup anzeigen
+            return; // Verhindert das Absenden des Formulars
+        }
+
         const memoryData = {
             name,
             matchId,
@@ -142,7 +148,7 @@ export default function AddMemoryCard(props: Readonly<MemoryCardProps>) {
                 </label>
 
                 <label>
-                    Bildquelle:
+                    Image Source:
                     <select
                         className="input-small"
                         value={category}
@@ -164,13 +170,14 @@ export default function AddMemoryCard(props: Readonly<MemoryCardProps>) {
                 </label>
 
                 <label>
-                    Game Deck ID:
+                    Game Deck:
                     <select
                         className="input-small"
                         value={matchId}
                         onChange={(e) => setMatchId(Number(e.target.value))}
                         required
                     >
+                        <option value={0}>Please select a Game-Deck Number</option> {/* Pflichtfeld als Platzhalter */}
                         {[...Array(20).keys()].map((n) => n + 1).map((n) => (
                             <option key={n} value={n}>
                                 {n}
@@ -179,7 +186,6 @@ export default function AddMemoryCard(props: Readonly<MemoryCardProps>) {
                     </select>
                 </label>
 
-
                 <label>
                     Image:
                     <input
diff --git a/frontend/src/components/HighScore.tsx b/frontend/src/components/HighScore.tsx
index a6bf753..2901455 100644
--- a/frontend/src/components/HighScore.tsx
+++ b/frontend/src/components/HighScore.tsx
@@ -1,111 +1,160 @@
 import { HighScoreModel } from "./model/HighScoreModel.ts";
 import "./styles/HighScore.css";
+import { useEffect, useState } from "react";
+import axios from "axios";
 
 type HighScoreProps = {
     highScores10: HighScoreModel[];
     highScores20: HighScoreModel[];
     highScores32: HighScoreModel[];
-}
+    getHighScoresFor10Cards: () => void;
+    getHighScoresFor20Cards: () => void;
+    getHighScoresFor32Cards: () => void;
+};
 
 const formatDate = (date: string) => {
     const options: Intl.DateTimeFormatOptions = {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
     };
-    return new Date(date).toLocaleDateString('de-DE', options);
+    return new Date(date).toLocaleDateString("de-DE", options);
 };
 
 export default function HighScore(props: Readonly<HighScoreProps>) {
-    return (
-        <div className="high-score">
-            {/* High Scores Table Container */}
-            <div className="high-score-item-container">
+    const [selectedTable, setSelectedTable] = useState<string | null>(null); // Track which table is selected
+    const [githubUsernames, setGithubUsernames] = useState<Map<string, string>>(new Map());
 
-                {/* Top 10 High Scores Table */}
-                <div className="high-score-table">
-                    <h3>10 Cards High-Score</h3>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Rank</th>
-                            <th>Player</th>
-                            <th>Date</th>
-                            <th>Game-Deck</th>
-                            <th>Time</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {props.highScores10.map((highScore, index) => (
-                            <tr key={highScore.id}>
-                                <td>{index + 1}</td>
-                                <td>{highScore.playerName}</td>
-                                <td>{formatDate(highScore.date)}</td>
-                                <td>{highScore.matchId}</td>
-                                <td>{highScore.scoreTime}</td>
-                            </tr>
-                        ))}
-                        </tbody>
-                    </table>
-                </div>
+    function fetchGithubUsernames(highScores: HighScoreModel[]) {
+        const uniqueIds = new Set(
+            highScores
+                .filter(score => score.appUserGithubId !== "anonymousUser")
+                .map(score => score.appUserGithubId)
+        );
 
-                {/* Top 20 High Scores Table */}
-                <div className="high-score-table">
-                    <h3>20 Cards High-Score</h3>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Rank</th>
-                            <th>Player</th>
-                            <th>Date</th>
-                            <th>Game-Deck</th>
-                            <th>Time</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {props.highScores20.map((highScore, index) => (
-                            <tr key={highScore.id}>
-                                <td>{index + 1}</td>
-                                <td>{highScore.playerName}</td>
-                                <td>{formatDate(highScore.date)}</td>
-                                <td>{highScore.matchId}</td>
-                                <td>{highScore.scoreTime}</td>
-                            </tr>
-                        ))}
-                        </tbody>
-                    </table>
-                </div>
+        const newUsernames = new Map(githubUsernames);
+
+        uniqueIds.forEach(async (id) => {
+            if (!newUsernames.has(id)) {
+                axios.get(`https://api.github.com/user/${id}`)
+                    .then((response) => {
+                        newUsernames.set(id, response.data.login);
+                        setGithubUsernames(new Map(newUsernames)); // State aktualisieren
+                    })
+                    .catch((error) => {
+                        console.error(`Error fetching GitHub user ${id}:`, error);
+                    });
+            }
+        });
+    }
+
+    useEffect(() => {
+        fetchGithubUsernames([...props.highScores10, ...props.highScores20, ...props.highScores32]);
+    }, [props.highScores10, props.highScores20, props.highScores32]);
+
+    useEffect(() => {
+        props.getHighScoresFor10Cards();
+        props.getHighScoresFor20Cards();
+        props.getHighScoresFor32Cards();
+    }, []);
+
+    // Function to select the table
+    const handleTableSelect = (tableId: string) => {
+        setSelectedTable(tableId);
+    };
 
-                {/* Top 32 High Scores Table */}
-                <div className="high-score-table">
-                    <h3>32 Cards High-Score</h3>
-                    <table>
-                        <thead>
-                        <tr>
-                            <th>Rank</th>
-                            <th>Player</th>
-                            <th>Date</th>
-                            <th>Game-Deck</th>
-                            <th>Time</th>
+    // Function to go back to the compressed view
+    const handleBack = () => {
+        setSelectedTable(null);
+    };
+
+    const renderCompressedTable = (highScores: HighScoreModel[], cardType: string) => (
+        <div className="high-score-table-compressed" onClick={() => handleTableSelect(cardType)}>
+            <h3 className="high-score-table-compressed-h3">{cardType} Cards High-Score</h3>
+            <table>
+                <thead>
+                <tr>
+                    <th>Rank</th>
+                    <th>Player</th>
+                    <th>Time</th>
+                </tr>
+                </thead>
+                <tbody>
+                {highScores.map((highScore, index) => (
+                    <tr key={highScore.id}>
+                        <td>{index + 1}</td>
+                        <td>{highScore.playerName}</td>
+                        <td>{highScore.scoreTime}</td>
+                    </tr>
+                ))}
+                </tbody>
+            </table>
+        </div>
+    );
+
+    const renderDetailedTable = (highScores: HighScoreModel[], cardType: string, isSelected: boolean) => {
+        if (!isSelected) return null; // Only render the selected table
+
+        return (
+            <div className="high-score-table">
+                <h3 className="high-score-table-h3">{cardType} Cards High-Score</h3>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>Rank</th>
+                        <th>Player-Name</th>
+                        <th>Date</th>
+                        <th>Game Deck</th>
+                        <th>Authentication</th>
+                        <th>Time</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {highScores.map((highScore, index) => (
+                        <tr key={highScore.id}>
+                            <td>{index + 1}</td>
+                            <td>{highScore.playerName}</td>
+                            <td>{formatDate(highScore.date)}</td>
+                            <td>{highScore.matchId}</td>
+                            <td>
+                                {highScore.appUserGithubId === "anonymousUser"
+                                    ? "Anonymous"
+                                    : `Github-User (${githubUsernames.get(highScore.appUserGithubId) || "Loading..."})`}
+                            </td>
+                            <td>{highScore.scoreTime}</td>
                         </tr>
-                        </thead>
-                        <tbody>
-                        {props.highScores32.map((highScore, index) => (
-                            <tr key={highScore.id}>
-                                <td>{index + 1}</td>
-                                <td>{highScore.playerName}</td>
-                                <td>{formatDate(highScore.date)}</td>
-                                <td>{highScore.matchId}</td>
-                                <td>{highScore.scoreTime}</td>
-                            </tr>
-                        ))}
-                        </tbody>
-                    </table>
-                </div>
+                    ))}
+                    </tbody>
+                </table>
+            </div>
+        );
+    };
+
+    return (
+        <div className="high-score">
 
+            {/* Highscore Tables */}
+            <div className={selectedTable === null ? 'high-score-item-container-compressed' : 'high-score-item-container-detailed'}>
+                {selectedTable === null ? (
+                    <>
+                        {renderCompressedTable(props.highScores10, "10")}
+                        {renderCompressedTable(props.highScores20, "20")}
+                        {renderCompressedTable(props.highScores32, "32")}
+                    </>
+                ) : (
+                    <>
+                        {renderDetailedTable(props.highScores10, "10", selectedTable === "10")}
+                        {renderDetailedTable(props.highScores20, "20", selectedTable === "20")}
+                        {renderDetailedTable(props.highScores32, "32", selectedTable === "32")}
+                    </>
+                )}
             </div>
+            {/* Show detailed view or compressed view */}
+            {selectedTable !== null && (
+                <button onClick={handleBack} className="button-group-button">Back to Overview</button>
+            )}
         </div>
     );
 }
diff --git a/frontend/src/components/MyMemories.tsx b/frontend/src/components/MyMemories.tsx
index ddff1e0..9686416 100644
--- a/frontend/src/components/MyMemories.tsx
+++ b/frontend/src/components/MyMemories.tsx
@@ -18,6 +18,7 @@ type MyMemoriesProps = {
     setAllMemories: React.Dispatch<React.SetStateAction<MemoryModel[]>>;
     isEditing: boolean;
     setIsEditing: (value: boolean) => void;
+    getAllMemories: () => void;
 };
 
 export default function MyMemories(props: Readonly<MyMemoriesProps>) {
@@ -29,6 +30,11 @@ export default function MyMemories(props: Readonly<MyMemoriesProps>) {
     const [showPopup, setShowPopup] = useState(false);
     const [memoryToDelete, setMemoryToDelete] = useState<string | null>(null);
 
+    useEffect(() => {
+        props.getAllMemories();
+    }, []);
+
+
     // Filtere die Erinnerungen, die zum Benutzer gehören
     useEffect(() => {
         setUserMemories(props.allMemories.filter(memory => memory.appUserGithubId === props.user));
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index a8ff4a9..8a582ae 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -2,12 +2,14 @@ import axios from "axios";
 import {useNavigate} from "react-router-dom";
 import "./styles/Navbar.css";
 import headerLogo from "../assets/MemoryHub-logo-single.jpg";
+import {UserDetails} from "./model/UserDetailsModel.ts";
 
 type NavbarProps = {
+    userDetails: UserDetails | null;
+    getUserDetails: () => void;
     user: string
     getUser: () => void
     getActiveMemories: () => void
-    getAllMemories: () => void
     toggleSearchBar: () => void
     showSearch: boolean
     resetCurrentPage: () => void
@@ -30,6 +32,7 @@ export default function Navbar(props: Readonly<NavbarProps>) {
             .post("/api/users/logout")
             .then(() => {
                 props.getUser();
+                props.getUserDetails();
                 navigate("/");
             })
             .catch((error) => {
@@ -51,7 +54,6 @@ export default function Navbar(props: Readonly<NavbarProps>) {
                 className="clickable-header"
                 onClick={() => {
                     props.getActiveMemories();
-                    props.getAllMemories();
                     props.resetCurrentPage();
                     navigate("/list-of-all-cards");
                 }}
@@ -89,7 +91,7 @@ export default function Navbar(props: Readonly<NavbarProps>) {
                     <button className="button-group-button" onClick={() => navigate(`/favorites`)}>Favorites</button>
                     <button className="button-group-button" onClick={() => navigate("/add")}>Add Memory</button>
                     <button className="button-group-button" onClick={() => {props.resetEditingState(); navigate("/my-memories")}}>My Memories</button>
-                    <button className="button-group-button" onClick={() => navigate("/profile")}>Profile</button>
+                    <button id="button-profile" onClick={() => navigate("/profile")}>Profile</button>
                     <button className="button-group-button" onClick={logoutFromGithub}>Logout</button>
                 </>
             ) : (
diff --git a/frontend/src/components/Play.tsx b/frontend/src/components/Play.tsx
index d342895..d54291f 100644
--- a/frontend/src/components/Play.tsx
+++ b/frontend/src/components/Play.tsx
@@ -6,7 +6,6 @@ import axios from "axios";
 
 
 type PlayProps = {
-    activeMemories: MemoryModel[];
     highScores10: HighScoreModel[];
     highScores20: HighScoreModel[];
     highScores32: HighScoreModel[];
@@ -41,11 +40,29 @@ export default function Play(props: Readonly<PlayProps>) {
     const [showNameInput, setShowNameInput] = useState<boolean>(false);
     const [showPopup, setShowPopup] = useState(false);
     const [popupMessage, setPopupMessage] = useState("");
+    const [activeMatchIds, setActiveMatchIds] = useState<number[]>([]);
+    const [activeMemories, setActiveMemories] = useState<MemoryModel[]>([]);
+    const [isLoadingMemories, setIsLoadingMemories] = useState(false);
+
+
+    const getMissingCardsMessage = (): string | null => {
+        // Berechne die benötigte Kartenanzahl
+        const requiredCardCount = cardCount; // Hier bleibt die Kartenanzahl wie sie ist (10, 20 oder 32)
+
+        // Überprüfen, ob genügend Karten vorhanden sind
+        if (activeMemories.length < requiredCardCount / 2) {
+            const missingCards = (requiredCardCount / 2) - activeMemories.length;
+            return `There must be added ${missingCards} more Memory-Card${missingCards > 1 ? 's' : ''} in this game-deck to play with "${requiredCardCount} cards".`;
+        }
+
+        return null; // Wenn genügend Karten vorhanden sind
+    };
+
 
 
     const handleSaveHighScore = () => {
         if (playerName.trim().length < 3) {
-            setPopupMessage("Dein Name muss mindestens 3 Zeichen lang sein!");
+            setPopupMessage("Your name must be at least 3 characters long!");
             setShowPopup(true);
             return;
         }
@@ -53,6 +70,46 @@ export default function Play(props: Readonly<PlayProps>) {
         postHighScore();
     };
 
+    const getActiveMemoriesMatchIds = () => {
+        axios
+            .get("api/memory-hub/active/match-ids")
+            .then((response) => {
+                const matchIds = response.data;
+                setActiveMatchIds(matchIds);
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    }
+
+    useEffect(() => {
+        getActiveMemoriesMatchIds();
+    }, []);
+
+    const getActiveMemoriesByMatchId = (matchId: number) => {
+        setIsLoadingMemories(true);
+        axios
+            .get(`api/memory-hub/active/match-id/${matchId}`)
+            .then((response) => {
+                setActiveMemories(response.data); // Speichert die abgerufenen Erinnerungen
+            })
+            .catch((error) => {
+                console.error("Error retrieving memories:", error);
+            })
+            .finally(() => {
+                setIsLoadingMemories(false); // Ladezustand deaktivieren, wenn Request abgeschlossen ist
+            });
+    };
+
+// useEffect, um die Erinnerungen zu laden, wenn die `selectedMatchId` geändert wird
+    useEffect(() => {
+        if (selectedMatchId !== null) {
+            getActiveMemoriesByMatchId(selectedMatchId);
+        }
+    }, [selectedMatchId]);
+
+
+
     // Timer starten, wenn das Spiel beginnt
     useEffect(() => {
         if (isGameStarted) {
@@ -78,7 +135,7 @@ export default function Play(props: Readonly<PlayProps>) {
     // Vorschau der Karten (neu laden, wenn MatchId oder Anzahl sich ändert)
     useEffect(() => {
         if (selectedMatchId !== null) {
-            let filteredCards = props.activeMemories.filter(memory => memory.matchId === selectedMatchId);
+            let filteredCards = activeMemories.filter(memory => memory.matchId === selectedMatchId);
 
             // Zufällig mischen, bevor die Vorschau angezeigt wird
             filteredCards = shuffleArray(filteredCards);
@@ -98,7 +155,7 @@ export default function Play(props: Readonly<PlayProps>) {
             setShowAnimation(false); // Win-Animation zurücksetzen
             setHasStarted(false); // Spielstatus zurücksetzen
         }
-    }, [selectedMatchId, cardCount, props.activeMemories]);
+    }, [selectedMatchId, cardCount, activeMemories]);
 
     // Win-Animation auslösen
     useEffect(() => {
@@ -117,7 +174,7 @@ export default function Play(props: Readonly<PlayProps>) {
 
         setHasStarted(true);
 
-        let filteredCards = props.activeMemories.filter(memory => memory.matchId === selectedMatchId);
+        let filteredCards = activeMemories.filter(memory => memory.matchId === selectedMatchId);
 
         // Karten vorher mischen, damit nicht immer dieselben zuerst genommen werden
         filteredCards = shuffleArray(filteredCards);
@@ -136,7 +193,7 @@ export default function Play(props: Readonly<PlayProps>) {
         setCards([...allCards]);
         setFlippedCards([]);
         setMatchedCards([]);
-    }, [selectedMatchId, cardCount, isGameStarted, props.activeMemories]);
+    }, [selectedMatchId, cardCount, isGameStarted, activeMemories]);
 
     // Karte umdrehen
     const flipCard = (uniqueId: string) => {
@@ -201,7 +258,7 @@ export default function Play(props: Readonly<PlayProps>) {
                 setShowNameInput(false); // Eingabefeld nach dem Speichern ausblenden
             })
             .catch((error) => {
-                console.error("Fehler beim Speichern des Highscores:", error);
+                console.error("Error saving the high score:", error);
             });
     };
 
@@ -213,7 +270,6 @@ export default function Play(props: Readonly<PlayProps>) {
     }, [matchedCards, cards]);
 
 
-
     return (
         <div>
             <div className="space-between">
@@ -222,9 +278,11 @@ export default function Play(props: Readonly<PlayProps>) {
                     onClick={() => {
                         setIsGameStarted(true);
                         setShowControls(false);
+                        setIsNewHighScore(false);
+                        setShowNameInput(false);
                     }}
-                    disabled={isGameStarted || selectedMatchId === null}
-                    id={selectedMatchId ? "play-button-enabled" : "play-button-disabled"}
+                    disabled={isGameStarted || selectedMatchId === null || activeMemories.length < cardCount/2}
+                    id={selectedMatchId && activeMemories.length >= cardCount/2 ? "play-button-enabled" : "play-button-disabled"}
                 >
                     Start Game
                 </button>
@@ -259,6 +317,7 @@ export default function Play(props: Readonly<PlayProps>) {
                 <div className="timer">⏱️ Time: {time.toFixed(1)} sec</div>
             </div>
 
+
             {showControls && (
                 <div className="game-controls">
                     <label htmlFor="matchIdFilter">Select Game-Deck:</label>
@@ -267,28 +326,35 @@ export default function Play(props: Readonly<PlayProps>) {
                         value={selectedMatchId ?? ""}
                         onChange={(e) => setSelectedMatchId(Number(e.target.value))}
                     >
-                        <option value="">Please choose</option>
-                        {[...new Set(props.activeMemories.map(m => m.matchId))].sort((a, b) => a - b).map(matchId => (
+                        <option value="">Please choose a deck</option>
+                        {activeMatchIds.sort((a, b) => a - b).map(matchId => (
                             <option key={matchId} value={matchId}>
                                 {matchId}
                             </option>
                         ))}
-
                     </select>
 
-                    <label htmlFor="cardCount">Number of cards:</label>
+                    <label htmlFor="cardCount">Select Number of cards:</label>
                     <select
                         id="cardCount"
                         value={cardCount}
                         onChange={(e) => setCardCount(Number(e.target.value))}
                     >
-                        <option value={10}>10 Karten</option>
-                        <option value={20}>20 Karten</option>
-                        <option value={32}>32 Karten</option>
+                        <option value={10}>10 Cards</option>
+                        <option value={20}>20 Cards</option>
+                        <option value={32}>32 Cards</option>
                     </select>
                 </div>
             )}
 
+            {/* Anzeige der fehlenden Karten */}
+            {selectedMatchId !== null && !isLoadingMemories && (
+                <div className="missing-cards-message">
+                    {getMissingCardsMessage()}
+                </div>
+            )}
+
+
             {/* Spielername Eingabefeld, wenn ein neuer Highscore erreicht wurde */}
             {isNewHighScore && showNameInput && (
                 <div className="high-score-input">
diff --git a/frontend/src/components/Profile.tsx b/frontend/src/components/Profile.tsx
index 7b1dfda..1882a73 100644
--- a/frontend/src/components/Profile.tsx
+++ b/frontend/src/components/Profile.tsx
@@ -1,14 +1,112 @@
 import { UserDetails } from "./model/UserDetailsModel.ts";
 import "./styles/Profile.css";
+import { HighScoreModel } from "./model/HighScoreModel.ts";
+import { useEffect, useState } from "react";
 
 type ProfileProps = {
+    user: string;
     userDetails: UserDetails | null;
+    highScores10: HighScoreModel[];
+    highScores20: HighScoreModel[];
+    highScores32: HighScoreModel[];
+    getHighScoresFor10Cards: () => void;
+    getHighScoresFor20Cards: () => void;
+    getHighScoresFor32Cards: () => void;
+};
+
+const formatDate = (date: string) => {
+    const options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    };
+    return new Date(date).toLocaleDateString('de-DE', options);
+};
+
+// Funktion zur Berechnung der Ränge
+const calculateRanks = (scores: HighScoreModel[], userId: string) => {
+    const sortedScores = [...scores].sort((a, b) => a.scoreTime - b.scoreTime);
+    return sortedScores
+        .map((score, index) => ({ id: score.id, rank: index + 1 }))
+        .filter((ranked) => scores.find((s) => s.id === ranked.id)?.appUserGithubId === userId);
 };
 
 export default function Profile(props: Readonly<ProfileProps>) {
+    const [userHighScores, setUserHighScores] = useState<HighScoreModel[]>([]);
+    const [userRanks, setUserRanks] = useState<{ [key: string]: number }>({});
+
+    useEffect(() => {
+        props.getHighScoresFor10Cards();
+        props.getHighScoresFor20Cards();
+        props.getHighScoresFor32Cards();
+    }, []);
+
+    useEffect(() => {
+        if (props.userDetails) {
+            // Alle Highscores des Users filtern
+            const filteredHighScores = [
+                ...props.highScores10,
+                ...props.highScores20,
+                ...props.highScores32,
+            ].filter((score) => score.appUserGithubId === props.user);
+
+            setUserHighScores(filteredHighScores);
+
+            // Ränge für jede Kartenanzahl berechnen
+            const ranks10 = calculateRanks(props.highScores10, props.user);
+            const ranks20 = calculateRanks(props.highScores20, props.user);
+            const ranks32 = calculateRanks(props.highScores32, props.user);
+
+            // In ein Objekt speichern (id -> rank)
+            const rankMap: { [key: string]: number } = {};
+            [...ranks10, ...ranks20, ...ranks32].forEach((rank) => {
+                rankMap[rank.id] = rank.rank;
+            });
+
+            setUserRanks(rankMap);
+        }
+    }, [props.highScores10, props.highScores20, props.highScores32, props.userDetails]);
 
     return (
         <div className="profile-container">
+            {/* Highscore-Tabelle */}
+            <div className="high-score-table">
+                <h3>Highscores by {props.userDetails?.login}</h3>
+                {userHighScores.length > 0 ? (
+                    <div>
+                        <table>
+                            <thead>
+                            <tr>
+                                <th>Rank</th>
+                                <th>Number of Cards</th>
+                                <th>My HighScore Names</th>
+                                <th>Date</th>
+                                <th>Game-Deck</th>
+                                <th>Time</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {userHighScores.map((highScore) => (
+                                <tr key={highScore.id}>
+                                    <td>{userRanks[highScore.id] ?? "-"}</td>
+                                    <td>{highScore.numberOfCards} Cards</td>
+                                    <td>{highScore.playerName}</td>
+                                    <td>{formatDate(highScore.date)}</td>
+                                    <td>{highScore.matchId}</td>
+                                    <td>{highScore.scoreTime}s</td>
+                                </tr>
+                            ))}
+                            </tbody>
+                        </table>
+                    </div>
+                ) : (
+                    <p>No high scores available for this user.</p>
+                )}
+            </div>
+
+            {/* GitHub-Profil */}
             <h2>GitHub Profile</h2>
             {props.userDetails ? (
                 <div>
@@ -19,7 +117,12 @@ export default function Profile(props: Readonly<ProfileProps>) {
                     <p>Followers: {props.userDetails.followers}</p>
                     <p>Following: {props.userDetails.following}</p>
                     <p>Public Repositories: {props.userDetails.public_repos}</p>
-                    <p>GitHub Profile: <a href={props.userDetails.html_url} target="_blank" rel="noopener noreferrer">Visit Profile</a></p>
+                    <p>
+                        GitHub Profile:{" "}
+                        <a href={props.userDetails.html_url} target="_blank" rel="noopener noreferrer">
+                            Visit Profile
+                        </a>
+                    </p>
                     <img src={props.userDetails.avatar_url} alt={`${props.userDetails.login}'s avatar`} />
                     <p>Account Created: {new Date(props.userDetails.created_at).toLocaleDateString()}</p>
                     <p>Last Updated: {new Date(props.userDetails.updated_at).toLocaleDateString()}</p>
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
index 549b772..45e0ad1 100644
--- a/frontend/src/components/SearchBar.tsx
+++ b/frontend/src/components/SearchBar.tsx
@@ -22,7 +22,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
                                                  setSelectedMatchId,
                                                  memories,
                                              }) => {
-    const matchIds = Array.from(new Set(memories.map((memory) => memory.matchId.toString())));
+    const matchIds = Array.from(new Set(memories.map((memory) => memory.matchId.toString()))).sort();
+
 
     const handleReset = () => {
         setSearchQuery("");
diff --git a/frontend/src/components/Welcome.tsx b/frontend/src/components/Welcome.tsx
index e8f2d81..0f4b1bf 100644
--- a/frontend/src/components/Welcome.tsx
+++ b/frontend/src/components/Welcome.tsx
@@ -1,21 +1,25 @@
 import welcomePic from "../assets/memory-pixa.png"
 import "./styles/Welcome.css"
 import {useNavigate} from "react-router-dom";
+import {UserDetails} from "./model/UserDetailsModel.ts";
 
+type WelcomeProps = {
+    userDetails: UserDetails | null;
+}
 
-export default function Welcome(){
+export default function Welcome(props: Readonly<WelcomeProps>) {
     const navigate = useNavigate();
 
     return (
-        <div className="welcome">
-            <h2>Welcome to the MemoryHub!</h2>
-            <p>Click on the Picture or the green button to start playing!</p>
-            <img
-                src={welcomePic}
-                alt="Welcome to MemoryHub"
-                className="logo-welcome"
-                onClick={() => navigate("/play")}
-            />
-        </div>
+            <div className="welcome">
+                <h2>Welcome {props.userDetails !== null && props.userDetails.login} to MemoryHub!</h2>
+                <p>Click on the Picture or the green button to start playing!</p>
+                <img
+                    src={welcomePic}
+                    alt="Welcome to MemoryHub"
+                    className="logo-welcome"
+                    onClick={() => navigate("/play")}
+                />
+            </div>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/components/styles/Buttons.css b/frontend/src/components/styles/Buttons.css
index 0c9b2b2..18b8fa5 100644
--- a/frontend/src/components/styles/Buttons.css
+++ b/frontend/src/components/styles/Buttons.css
@@ -107,4 +107,12 @@
 
 .reset-button-not-possible:hover {
    background-color: #555 !important;
-}
\ No newline at end of file
+}
+
+#button-profile {
+    background-color: #9c27b0; /* Violett */
+}
+
+#button-profile:hover {
+    background-color: #7b1fa2; /* Dunkleres Violett beim Hover */
+}
diff --git a/frontend/src/components/styles/HighScore.css b/frontend/src/components/styles/HighScore.css
index 68482dc..afe3eb2 100644
--- a/frontend/src/components/styles/HighScore.css
+++ b/frontend/src/components/styles/HighScore.css
@@ -1,34 +1,64 @@
 .high-score {
-    font-family: Arial, sans-serif;
-    max-width: 1000px;
     margin: 0 auto;
     text-align: center;
 }
 
-.high-score-item-container {
+.high-score-item-container-compressed {
+    display: flex;
     gap: 20px;
-    margin-bottom: 40px;
-    width: 100%; /* Stellt sicher, dass die Container die gesamte Breite des Containers nutzen */
+    margin-bottom: 20px;
+    width: 100%;
+}
+
+.high-score-item-container-detailed {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 20px;
+    width: 100%;
 }
 
 .high-score-table {
     width: 100%;  /* Jetzt auf 100%, sodass die Tabellen untereinander passen */
     max-width: 800px; /* Optional: Limitiert die maximale Breite für bessere Darstellung */
     background-color: #f9f9f9;
-    padding: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
     border-radius: 8px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     margin-bottom: 20px; /* Fügt Abstand zwischen den Tabellen hinzu */
 }
 
-.high-score-table h3 {
+.high-score-table-compressed{
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Hover-Effekt nur für komprimierte Tabellen */
+.high-score-table-compressed:hover {
+    transform: scale(1.03);
+    cursor: pointer; /* Zeigt den Hand-Cursor an */
+}
+
+
+.high-score-table-compressed-h3 {
     font-size: 1.3rem;
     color: #444;
+    padding: 5px;
     margin-bottom: 15px;
     border: 4px solid #66b3ff;
     border-radius: 10px;
 }
 
+
+.high-score-table-h3 {
+    font-size: 1.3rem;
+    color: #444;
+    border: 4px solid #66b3ff;
+    border-radius: 10px;
+    width:40%;
+    margin: 0 auto 15px;
+}
+
 table {
     width: 100%;  /* Stellt sicher, dass die Tabelle die gesamte Breite des Containers nutzt */
     border-collapse: collapse;
@@ -60,6 +90,47 @@ tbody tr:last-child td {
     border-bottom: 2px solid #ff9e00; /* Dickerer Abschluss für die letzte Zeile */
 }
 
+/* Light Mode Hover-Effekt */
+tbody tr:hover {
+    background-color: #f1f1f1; /* Hellerer Hover-Effekt im Light Mode */
+}
+
+
+/* Dark Mode Anpassungen */
+@media (prefers-color-scheme: dark) {
+    .high-score-table {
+        background-color: #333; /* Dunkler Hintergrund für die Tabelle */
+        color: #fff; /* Weißer Text für die gesamte Tabelle */
+    }
+
+    .high-score-table h3 {
+        color: #fff;
+        border: 4px solid #66b3ff; /* Behalte die blaue Randfarbe für den Header */
+    }
+
+    th {
+        background-color: #ff9e00; /* Behalte das orange für die Kopfzeilen */
+        color: #fff; /* Weißer Text für die Kopfzeilen */
+    }
+
+    td {
+        color: #ccc; /* Helle Farbe für Text in den Zellen */
+    }
+
+    tbody tr td {
+        border-bottom: 1px solid #555; /* Dunklerer Rand für Tabellenzeilen im Dark Mode */
+    }
+
+    tbody tr:last-child td {
+        border-bottom: 2px solid #555; /* Dickerer Rand für die letzte Zeile */
+    }
+
+    /* Hover-Effekt für Dark Mode */
+    tbody tr:hover {
+        background-color: #444; /* Dunklerer Hover-Effekt */
+    }
+}
+
 
 @media (max-width: 768px) {
     .high-score-item-container {
@@ -79,7 +150,6 @@ tbody tr:last-child td {
     align-items: center;
     gap: 10px;
     padding: 20px;
-    background-color: #f8f9fa;
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     width: 300px;
@@ -102,5 +172,12 @@ tbody tr:last-child td {
     text-overflow: ellipsis; /* Gibt an, dass Text bei Überlauf abgeschnitten wird */
 }
 
+@media (prefers-color-scheme: dark) {
+    .playerName {
+        color: #fff; /* Weißer Text im Dark Mode */
+        background-color: #333; /* Dunkler Hintergrund im Dark Mode */
+        border: 1px solid #555; /* Etwas dunklerer Rand im Dark Mode */
+    }}
+
 
 
diff --git a/frontend/src/components/styles/PlayMemoryCard.css b/frontend/src/components/styles/PlayMemoryCard.css
index 3e4387c..cd59a9c 100644
--- a/frontend/src/components/styles/PlayMemoryCard.css
+++ b/frontend/src/components/styles/PlayMemoryCard.css
@@ -97,3 +97,15 @@
         opacity: 1;
     }
 }
+
+.missing-cards-message {
+    font-size: 1.5rem;
+    color: #ff9999;
+    padding: 10px 20px; /* Etwas Abstand für besseren Look */
+    border-radius: 5px; /* Abgerundete Ecken */
+    font-weight: bold; /* Text hervorheben */
+    text-align: center; /* Text zentrieren */
+    width: 50%; /* Breite auf 50% des Elternelements setzen */
+    margin: 0 auto 15px; /* Zentrieren des Elements */
+}
+
diff --git a/frontend/src/components/styles/Welcome.css b/frontend/src/components/styles/Welcome.css
index c57304d..b861c31 100644
--- a/frontend/src/components/styles/Welcome.css
+++ b/frontend/src/components/styles/Welcome.css
@@ -20,3 +20,8 @@
     box-shadow: 1px 4px 20px rgba(0, 0, 0, 0.8); /* Leichter Schatten bei Hover */
     cursor: pointer;
 }
+
+.welcome-user{
+    width: 50%;
+    margin: 0 auto 15px;
+}
\ No newline at end of file