diff --git a/package-lock.json b/package-lock.json
index 8b8d6b5..4880ac2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@types/katex": "^0.16.0",
         "@vue/test-utils": "^2.2.7",
         "axios": "^1.7.4",
+        "buffer": "^6.0.3",
         "highlight.js": "^11.7.0",
         "katex": "^0.16.10",
         "marked": "^4.3.0",
@@ -4003,7 +4004,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4054,6 +4054,30 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/bl/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -4210,10 +4234,9 @@
       }
     },
     "node_modules/buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
       "funding": [
         {
           "type": "github",
@@ -4230,7 +4253,7 @@
       ],
       "dependencies": {
         "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
+        "ieee754": "^1.2.1"
       }
     },
     "node_modules/buffer-from": {
@@ -7795,7 +7818,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -20396,8 +20418,7 @@
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
     "batch": {
       "version": "0.6.1",
@@ -20426,6 +20447,18 @@
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
         "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+          "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+          "dev": true,
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.1.13"
+          }
+        }
       }
     },
     "bluebird": {
@@ -20553,13 +20586,12 @@
       }
     },
     "buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
       "requires": {
         "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
+        "ieee754": "^1.2.1"
       }
     },
     "buffer-from": {
@@ -23208,8 +23240,7 @@
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
     "ignore": {
       "version": "5.2.1",
diff --git a/package.json b/package.json
index b3f79b8..89a542e 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@types/katex": "^0.16.0",
     "@vue/test-utils": "^2.2.7",
     "axios": "^1.7.4",
+    "buffer": "^6.0.3",
     "highlight.js": "^11.7.0",
     "katex": "^0.16.10",
     "marked": "^4.3.0",
diff --git a/src/App.vue b/src/App.vue
index 4022143..e480d55 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted } from "vue";
 import backgroundMusicSource from "@/assets/music/background_music.mp3";
 import { MemoryController } from "@/types/memory-controller";
 
@@ -15,8 +15,9 @@ let backgroundMusic: HTMLAudioElement;
  * Lifecycle hook that runs when the component is mounted
  */
 onMounted(async () => {
-  await memoryController.fetchData();
-  backgroundMusic = memoryController.createAudioWithVolume(backgroundMusicSource);
+  backgroundMusic = memoryController.createAudioWithVolume(
+    backgroundMusicSource
+  );
 
   backgroundMusic.loop = true;
   backgroundMusic.play();
diff --git a/src/components/ContentModal.vue b/src/components/ContentModal.vue
index 79fec0c..8ef20f7 100644
--- a/src/components/ContentModal.vue
+++ b/src/components/ContentModal.vue
@@ -10,9 +10,10 @@
       <img
         alt="image"
         id="modal-image"
-        :src="cardData.content"
+        :src="cardData.imageURL"
         class="img-responsive"
         v-else-if="isImage"
+        loading="eager"
       />
       <!-- Markdown content is displayed if the card type is MARKDOWN -->
       <div id="markdown" v-else-if="isMarkdown" v-html="markdownContent"></div>
@@ -52,7 +53,6 @@ const isMarkdown = ref(props.cardData.type == CardType.MARKDOWN);
  */
 const markdownContent = computed(() => marked(props.cardData.content));
 
-
 /**
  * Run onMounted hook to initialize syntax highlighting when the component is mounted
  */
diff --git a/src/components/GamePanel.vue b/src/components/GamePanel.vue
index 84d758d..976662a 100644
--- a/src/components/GamePanel.vue
+++ b/src/components/GamePanel.vue
@@ -1,5 +1,5 @@
 <template>
-    <!-- Button to navigate back to the start page -->
+  <!-- Button to navigate back to the start page -->
   <button class="goback-button" @click="redirectToStartPage()">
     <span>Go Back</span>
   </button>
@@ -11,6 +11,7 @@
     transmitted.
   </div>
   <!-- Game panel with memory game cards and summary -->
+  <div style="display: contents" v-if="showGame">
   <div id="game-panel">
     <!-- Memory panel with the grid of cards -->
     <div id="memory-panel" class="shadowed-panel" @click="manualReset">
@@ -44,26 +45,30 @@
       </div>
     </div>
     <!-- Modal for displaying detailed content of a card -->
-    <ContentModal v-if="showModal" :cardData="modalContent">
+    <ContentModal v-if="showModal" :cardData="modalContent" @click.self="closeModal()">
       <button id="close-button" @click="closeModal">Close</button>
     </ContentModal>
   </div>
+  </div>
+  <div class="container">
+    <b>loading ...</b>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { computed, onMounted, ref, watch } from "vue";
+import {computed, nextTick, onMounted, ref, watch} from "vue";
 import MemoryCard from "./MemoryCard.vue";
 import ContentModal from "./ContentModal.vue";
 import PairItem from "./PairItem.vue";
 import { CardData, CardPair, CardSelection } from "@/types/data-models";
 import { MemoryController } from "@/types/memory-controller";
 import store from "@/store/index";
-import triumphSound from '@/assets/music/trumpets.mp3';
-import swipeSoundSource from '@/assets/music/swipe_sound.mp3';
-import successSoundSource from '@/assets/music/success_sound.mp3';
-import clickSoundSource from '@/assets/music/click_sound.mp3';
-import wrongAnswerSoundSource from '@/assets/music/wrong_answer_sound.mp3';
+import triumphSound from "@/assets/music/trumpets.mp3";
+import swipeSoundSource from "@/assets/music/swipe_sound.mp3";
+import successSoundSource from "@/assets/music/success_sound.mp3";
+import clickSoundSource from "@/assets/music/click_sound.mp3";
+import wrongAnswerSoundSource from "@/assets/music/wrong_answer_sound.mp3";
 
 const router = useRouter();
 const cards = ref([] as CardData[]);
@@ -75,11 +80,11 @@ const hasPostError = ref();
 const hasConfigError = ref();
 let memoryController: MemoryController;
 let gameStarted = ref();
+let showGame = ref(false);
 const isFinished = computed(
-  () => foundPairs.value.length == cards.value.length / 2
+  () => ((foundPairs.value.length == cards.value.length / 2) && showGame.value)
 );
 
-
 /**
  * Watches for game state change to handle configuration error
  */
@@ -112,6 +117,9 @@ onMounted(async () => {
   memoryController = new MemoryController();
   cards.value = (await memoryController.fetchData()).cards;
   gameStarted.value = true;
+  setTimeout(() => {
+    showGame.value = true;
+  }, 2000)
 });
 
 /**
@@ -235,11 +243,10 @@ function redirectToStartPage() {
  * Function to play sounds
  * @param pathToAudioFile
  */
-function playSound(pathToAudioFile: string){
+function playSound(pathToAudioFile: string) {
   const sound = memoryController.createAudioWithVolume(pathToAudioFile);
   sound.play();
 }
-
 </script>
 
 <style scoped>
@@ -390,4 +397,10 @@ function playSound(pathToAudioFile: string){
   font-size: 500%;
   z-index: 999;
 }
+.container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>
diff --git a/src/components/MemoryCard.vue b/src/components/MemoryCard.vue
index dee63cf..3a988e8 100644
--- a/src/components/MemoryCard.vue
+++ b/src/components/MemoryCard.vue
@@ -24,7 +24,7 @@
         <img
           alt="image not available"
           id="image"
-          :src="cardContent.content"
+          :src="cardContent.imageURL"
           v-else-if="isImage"
           draggable="false"
         />
@@ -53,7 +53,6 @@ import "katex/dist/katex.min.css";
 import clickSoundSource from "@/assets/music/click_sound.mp3";
 import { MemoryController } from "@/types/memory-controller";
 
-
 const memoryController = new MemoryController();
 let clickSound: HTMLAudioElement;
 
@@ -61,7 +60,6 @@ let clickSound: HTMLAudioElement;
  * onMounted lifecycle hook to fetch data and initialize audio
  */
 onMounted(async () => {
-  await memoryController.fetchData();
   clickSound = memoryController.createAudioWithVolume(clickSoundSource);
 });
 const props = defineProps({
@@ -128,7 +126,7 @@ watch(
 /**
  * Function to play the click sound
  */
-function playClickSound(){
+function playClickSound() {
   clickSound.play();
 }
 </script>
@@ -236,4 +234,3 @@ function playClickSound(){
   display: block;
 }
 </style>
-
diff --git a/src/components/PairItem.vue b/src/components/PairItem.vue
index 7e49b64..42c7fb7 100644
--- a/src/components/PairItem.vue
+++ b/src/components/PairItem.vue
@@ -19,7 +19,6 @@
         :canFlip="false"
         :initiallyRevealed="true"
         @openModal="$emit('openModal', pair.card2)"
-
       />
     </div>
   </div>
@@ -41,7 +40,6 @@ defineProps({
 });
 </script>
 
-
 <style scoped>
 /* Style for the container holding both card containers */
 #container {
diff --git a/src/components/StartGameScene.vue b/src/components/StartGameScene.vue
index 8dfb328..16dda30 100644
--- a/src/components/StartGameScene.vue
+++ b/src/components/StartGameScene.vue
@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
 import { useRoute, useRouter } from "vue-router";
-import clickSoundSource from '@/assets/music/click_sound.mp3';
+import clickSoundSource from "@/assets/music/click_sound.mp3";
 import { MemoryController } from "@/types/memory-controller";
 import { onMounted } from "vue";
 
@@ -32,7 +32,6 @@ const memoryController = new MemoryController();
 let clickSound: HTMLAudioElement;
 
 onMounted(async () => {
-  await memoryController.fetchData();
   clickSound = memoryController.createAudioWithVolume(clickSoundSource);
 });
 
@@ -62,7 +61,7 @@ function closeGame() {
 /**
  * Plays the click sound
  */
-function playClickSound(){
+function playClickSound() {
   clickSound.play();
 }
 
@@ -71,9 +70,9 @@ function playClickSound(){
  */
 async function handleCloseGame() {
   await playClickSound();
-    setTimeout(() => {
-      closeGame();
-    }, 500);
+  setTimeout(() => {
+    closeGame();
+  }, 500);
 }
 </script>
 
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index dbbe4e4..7b99d60 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -4,4 +4,4 @@ declare module "*.vue" {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
-declare module '*.mp3';
\ No newline at end of file
+declare module "*.mp3";
diff --git a/src/store/index.ts b/src/store/index.ts
index 012e3e0..ad3fee1 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,4 +1,4 @@
-import { createStore } from 'vuex';
+import { createStore } from "vuex";
 
 export default createStore({
   state: {
@@ -15,10 +15,10 @@ export default createStore({
   },
   actions: {
     updateScore({ commit }, score) {
-      commit('setScore', score);
+      commit("setScore", score);
     },
     updateRewards({ commit }, rewards) {
-      commit('setRewards', rewards);
+      commit("setRewards", rewards);
     },
   },
   modules: {},
diff --git a/src/types/custom.d.ts b/src/types/custom.d.ts
index 3341980..ecce487 100644
--- a/src/types/custom.d.ts
+++ b/src/types/custom.d.ts
@@ -1 +1 @@
-declare module "marked-katex-extension";
\ No newline at end of file
+declare module "marked-katex-extension";
diff --git a/src/types/data-models.ts b/src/types/data-models.ts
index 2da14e8..154cb95 100644
--- a/src/types/data-models.ts
+++ b/src/types/data-models.ts
@@ -10,7 +10,9 @@ export class CardData {
   constructor(
     public content: string,
     public type: CardType,
-    public pairid: number
+    public pairid: number,
+    public image?: Blob,
+    public imageURL?: string
   ) {}
 }
 export enum CardSelection {
diff --git a/src/types/dtos.ts b/src/types/dtos.ts
index e7b9cb4..2c0f7a1 100644
--- a/src/types/dtos.ts
+++ b/src/types/dtos.ts
@@ -20,6 +20,13 @@ export interface GameDataDTO {
 }
 
 export class GameResultDTO {
-  constructor(public configurationAsUUID: string, public playerId: string, public rewards: number) {}
+  constructor(
+    public configurationAsUUID: string,
+    public playerId: string,
+    public rewards: number
+  ) {}
   public isFinished = "true";
 }
+export class ImageDTO {
+  constructor(public uuid: string, public image: string) {}
+}
diff --git a/src/types/empty-data.ts b/src/types/empty-data.ts
index 71b2b38..92675e8 100644
--- a/src/types/empty-data.ts
+++ b/src/types/empty-data.ts
@@ -2,5 +2,5 @@ import { GameDataDTO } from "./dtos";
 
 export const emptyData: GameDataDTO = {
   pairs: [],
-  volumeLevel: 1
+  volumeLevel: 1,
 };
diff --git a/src/types/memory-controller.ts b/src/types/memory-controller.ts
index 3fa1ae0..870100d 100644
--- a/src/types/memory-controller.ts
+++ b/src/types/memory-controller.ts
@@ -2,14 +2,15 @@
  * Manages the game's data, including fetching game configurations, shuffling cards,
  * posting game results, and handling volume settings.
  */
-
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import axios, { AxiosResponse } from "axios";
-import { CardData, GameData } from "./data-models";
-import { GameDataDTO, GameResultDTO } from "./dtos";
+import { CardData, CardType, GameData } from "./data-models";
+import { GameDataDTO, GameResultDTO, ImageDTO } from "./dtos";
 import { emptyData } from "./empty-data";
 import config from "@/config";
 import store from "@/store/index";
-
+import { Buffer } from "buffer";
 
 const configurationId = window.location.pathname.split("/").pop();
 const rewards = 0;
@@ -27,7 +28,6 @@ export class MemoryController {
       configurationId!,
       window.localStorage.getItem("userId")!,
       rewards!
-
     );
     console.log(result);
     let hasError = false;
@@ -41,7 +41,7 @@ export class MemoryController {
     if (!hasError && response) {
       const returnedResult = this.fromDTO(response.data);
       console.log(returnedResult);
-      store.commit('setRewards', returnedResult.rewards)
+      store.commit("setRewards", returnedResult.rewards);
     }
 
     return hasError;
@@ -56,12 +56,60 @@ export class MemoryController {
    * @param {GameDataDTO} gameDataDto - The DTO to convert.
    * @returns {GameData} The converted game data.
    */
-  private convertDTOToData(gameDataDto: GameDataDTO) {
+  private async convertDTOToData(gameDataDto: GameDataDTO) {
     const cards: CardData[] = [];
-    gameDataDto.pairs.forEach((pair, index) => {
-      cards.push(new CardData(pair.card1.content, pair.card1.type, index));
-      cards.push(new CardData(pair.card2.content, pair.card2.type, index));
-    });
+    for(let index = 0; index < gameDataDto.pairs.length; index++) {
+      const pair = gameDataDto.pairs.at(index);
+      let card1: CardData;
+      let card2: CardData;
+
+      if (pair.card1.type === CardType.IMAGE) {
+        const id1 = pair.card1.content;
+        try {
+          const result = await axios.get<ImageDTO>(`${config.apiBaseUrl}/configurations/images/${id1}`);
+          const imageBase64 = result.data.image;
+          const imageBinary = Uint8Array.from(Buffer.from(imageBase64,"base64"));
+          const imageData1 = new Blob([imageBinary], {type: 'image/png'});
+          card1 = new CardData(
+              pair.card1.content,
+              pair.card1.type,
+              index,
+              imageData1,
+              URL.createObjectURL(imageData1))
+          cards.push(card1);
+        }
+        catch(error) {
+          console.error("Error while fetching image1: " + error);
+        }
+      } else {
+        card1 = new CardData(pair.card1.content, pair.card1.type, index);
+        cards.push(card1);
+      }
+
+      if (pair.card2.type === CardType.IMAGE) {
+        const id2 = pair.card2.content;
+        try {
+          const result = await axios.get<ImageDTO>(`${config.apiBaseUrl}/configurations/images/${id2}`);
+          const imageBase64 = result.data.image;
+          const imageBinary = Uint8Array.from(Buffer.from(imageBase64,"base64"));
+          const imageData2 = new Blob([imageBinary], {type: 'image/png'});
+          card2 = new CardData(
+              pair.card2.content,
+              pair.card2.type,
+              index,
+              imageData2,
+              URL.createObjectURL(imageData2))
+          cards.push(card2);
+        }
+        catch(error) {
+          console.error("Error while fetching image1: " + error);
+        }
+
+      } else {
+        card2 = new CardData(pair.card2.content, pair.card2.type, index);
+        cards.push(card2);
+      }
+    }
     return new GameData(cards);
   }
 
@@ -75,25 +123,29 @@ export class MemoryController {
       const result = await axios.get<GameDataDTO>(
         `${config.apiBaseUrl}/configurations/${configurationId}/volume`
       );
-      const gameData = this.convertDTOToData(result.data);
+      console.log(result)
+      const gameData = await this.convertDTOToData(result.data);
       this.gameData = gameData;
       this.volumeLevel = result.data.volumeLevel;
       this.shuffleCards();
       return gameData;
     } catch (error) {
       this.hasConfigError = true;
-      const gameData = this.convertDTOToData(emptyData);
+      const gameData = await this.convertDTOToData(emptyData);
       this.gameData = gameData;
       return gameData;
     }
   }
 
+
   /**
    * Shuffles the cards in the game.
    * Randomly rearranges the cards array in the game data.
    */
   private shuffleCards() {
     const cards = this.gameData.cards;
+    console.log("before shuffle")
+    console.log(cards)
     for (let i = cards.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
       const temp = cards[i];
@@ -122,11 +174,9 @@ export class MemoryController {
    */
   createAudioWithVolume(pathToAudioFile: string): HTMLAudioElement {
     const audio = new Audio(pathToAudioFile);
-    if (this.volumeLevel == 2 || this.volumeLevel == 3)
-    {
+    if (this.volumeLevel == 2 || this.volumeLevel == 3) {
       this.volumeLevel = 1;
-    } else if (this.volumeLevel == 1)
-    {
+    } else if (this.volumeLevel == 1) {
       this.volumeLevel = 0.5;
     }
     audio.volume = this.volumeLevel !== null ? this.volumeLevel : 1;