diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb3cb45b..86152692 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+##### Februar 2024
+- Qualix enthält neu ein Namenslernspiel! Auf der TN-Liste hat es einen Link zum Spiel [#332](https://github.com/gloggi/qualix/pull/332)
+
 ##### Januar 2024
 - Aus technischen und praktischen Gründen wurde die Anzahl relevante Anforderungen in einer Rückmeldung auf maximal 40 limitiert. Auslöser war, dass die Übersichtstabelle sonst technisch wie auch visuell nicht mehr sinnvoll angezeigt werden konnte. Auch fachlich gesehen ist das Konzept der Rückmeldungen in Qualix nicht darauf ausgelegt, sehr viele eingebettete Anforderungen zu enthalten, da Übersichtlichkeit, Fördergedanke, Überprüfbarkeit, zweite Chancen, Zweitausbildung etc. alle darunter leiden. Dies sehen wir in folgenden Textstellen der RQF-Broschüre bestätigt, welche klar machen dass mit jeder einzelnen Mindestanforderung der Zeitaufwand für das Kursteam wie auch für die TN markant ansteigt:
   > [Es] muss beachtet werden, dass zu jeder Mindestanforderung auch ein Beobachtungsmoment gehört, bei dem die TN zeigen können, was sie gelernt haben und das Kursteam ebendies wahrnehmen kann.[^1]
diff --git a/app/Http/Controllers/NameGameController.php b/app/Http/Controllers/NameGameController.php
new file mode 100644
index 00000000..db010b6b
--- /dev/null
+++ b/app/Http/Controllers/NameGameController.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Exceptions\Handler;
+use App\Exceptions\MiDataParticipantsListsParsingException;
+use App\Exceptions\UnsupportedFormatException;
+use App\Http\Requests\ParticipantImportRequest;
+use App\Http\Requests\ParticipantRequest;
+use App\Models\Course;
+use App\Models\Participant;
+use App\Util\HtmlString;
+use Exception;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Illuminate\Routing\RouteCollectionInterface;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Redirect;
+use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\URL;
+use Illuminate\Validation\ValidationException;
+use Illuminate\View\View;
+
+class NameGameController extends Controller
+{
+    /**
+     * Play the name game.
+     *
+     * @return Response
+     */
+    public function index()
+    {
+        return view('nameGame.index');
+    }
+}
diff --git a/app/Http/Controllers/ParticipantController.php b/app/Http/Controllers/ParticipantController.php
index 8c41f0b3..b0f121da 100644
--- a/app/Http/Controllers/ParticipantController.php
+++ b/app/Http/Controllers/ParticipantController.php
@@ -64,7 +64,6 @@ public function upload(Request $request, Course $course) {
             $request->session()->now('alert-warning', trans('t.views.admin.participant_import.warning_existing_participants'));
         }
 
-
         $MiDataParticipantListLink = (new HtmlString)
             ->s('<a href="https://db.scout.ch/" target="_blank">')
             ->__('t.views.admin.participant_import.MiData.name')
@@ -81,7 +80,6 @@ public function upload(Request $request, Course $course) {
      * @throws ValidationException if parsing the uploaded file fails
      */
     public function import(ParticipantImportRequest $request, Course $course) {
-
         $request->validated();
         try {
             $imported = $request->getImporter()->import($request->file('file')->getRealPath(), $course);
diff --git a/cypress/e2e/name-game.cy.js b/cypress/e2e/name-game.cy.js
new file mode 100644
index 00000000..14227e70
--- /dev/null
+++ b/cypress/e2e/name-game.cy.js
@@ -0,0 +1,78 @@
+import { useDatabaseResets } from "../support/databaseTransactions"
+
+describe('name game', () => {
+  useDatabaseResets()
+
+  beforeEach(() => {
+    cy.then(() => {
+      cy.login().then(user => {
+        cy.artisan('e2e:scenario', { '--user-id': user.id })
+      })
+    })
+    cy.courseId()
+  })
+
+  it('plays through the easy version of the name game', function () {
+    cy.visit(`/course/${this.courseId}/participants`)
+
+    cy.contains('Namen lernen').click()
+
+    cy.contains('Name Game')
+
+    cy.get('#participants').click()
+    cy.get('#participants .multiselect__option').first().click()
+    cy.get('#participants .multiselect__option').eq(2).click()
+    cy.get('#participants .multiselect__option').eq(3).click()
+
+    // Click outside the multiselect to close the dropdown menu
+    cy.get('.card-body').click('right')
+
+    cy.contains('Los geht\'s').click()
+
+    cy.contains('Zeit:')
+
+    for (let i = 0; i < 3; i++) {
+      // 3 participants with 2 clicks each
+      cy.get('.name-game button[type=submit]').first().click()
+      cy.get('.name-game button[type=submit]').first().click()
+    }
+
+    cy.contains('Nochmals').click()
+
+    cy.contains('Los geht\'s')
+  })
+
+  it('plays through the hard version of the name game', function () {
+    cy.visit(`/course/${this.courseId}/participants`)
+
+    cy.contains('Namen lernen').click()
+
+    cy.contains('Name Game')
+
+    cy.get('#participants').click()
+    cy.get('#participants .multiselect__option').first().click()
+    cy.get('#participants .multiselect__option').eq(2).click()
+    cy.get('#participants .multiselect__option').eq(3).click()
+
+    // Click outside the multiselect to close the dropdown menu
+    cy.get('.card-body').click('right')
+
+    cy.get('#gameMode').click()
+    cy.contains('Schwierig (Namen eintippen)').click()
+
+    cy.contains('Los geht\'s').click()
+
+    cy.contains('Zeit:')
+
+    for (let i = 0; i < 3; i++) {
+      // 3 participants with 2 clicks each
+      cy.get('.name-game button[type=submit]').first().click()
+      cy.get('.name-game button[type=submit]').first().click()
+    }
+
+    cy.contains('Nochmals').click()
+
+    cy.contains('Los geht\'s')
+    cy.contains('Einfach (multiple choice)').should('not.be.visible')
+  })
+})
diff --git a/lang/de/t.php b/lang/de/t.php
index 2c1dfa24..0bbbccac 100644
--- a/lang/de/t.php
+++ b/lang/de/t.php
@@ -551,6 +551,35 @@
 			),
 			"via_midata" => "Via PBS MiData einloggen",
 		),
+		"name_game" => array(
+			"abort" => "Zurück zu den TN",
+			"correct" => "Richtig!",
+			"game_mode" => "Schwierigkeit",
+			"manual_name_input" => "Schwierig (Namen eintippen)",
+			"multiple_choice" => "Einfach (multiple choice)",
+			"name_game" => "Name Game",
+			"next" => "Weiter",
+			"no_image" => "kein Bild",
+			"num_correct_and_incorrect" => ":correct richtig, :incorrect falsch von :total",
+			"page_title" => "Name Game",
+			"participants" => "Namen",
+			"play_again" => "Nochmals",
+			"practice_wrong_names" => "Falsch geratene Namen üben",
+			"scout_name" => "Name",
+			"select_all" => "Alle auswählen",
+			"select_all_equipe_members" => "Equipe auswählen",
+			"select_all_participants" => "Alle TN auswählen",
+			"select_all_participants_with_image" => "Alle TN mit Bild auswählen",
+			"skip" => "Weiss nicht",
+			"start" => "Los geht's",
+			"submit" => "Abschicken",
+			"this_is" => "Das ist:",
+			"too_few_participants" => "Wähle mindestens 3 Personen aus",
+			"well_done" => "Super gemacht!",
+			"who_is_this" => "Wer ist das?",
+			"wrong_guesses" => "Folgende Namen hast du falsch geraten:",
+			"you_guessed" => "Deine Antwort:",
+		),
 		"observations" => array(
 			"add_success" => "Beobachtung erfasst. Mässi!",
 			"go_to_participant" => "Zu :name",
@@ -573,6 +602,7 @@
 		"participants" => array(
 			"here" => "hier",
 			"menu_name" => "TN",
+			"name_game" => "Namen lernen",
 			"no_participants" => "Bisher sind keine Teilnehmende erfasst. Bitte erfasse sie :here.",
 			"page_title" => "TN-Überblick",
 			"title" => "Beobachtung für TN erfassen",
diff --git a/package-lock.json b/package-lock.json
index bf11a534..12878156 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1650,6 +1650,54 @@
             "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
             "dev": true
         },
+        "@formatjs/ecma402-abstract": {
+            "version": "1.18.2",
+            "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz",
+            "integrity": "sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==",
+            "requires": {
+                "@formatjs/intl-localematcher": "0.5.4",
+                "tslib": "^2.4.0"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.6.2",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+                    "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+                }
+            }
+        },
+        "@formatjs/intl-durationformat": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/@formatjs/intl-durationformat/-/intl-durationformat-0.2.2.tgz",
+            "integrity": "sha512-8cBgB9ejg9a2pmGVmcVoF0OlK4XifRtm7Se5F9kMj+Ex+5x8QVBLEuqnTHEyV584VMNR2ngUP1dNR36MeTWG3A==",
+            "requires": {
+                "@formatjs/ecma402-abstract": "1.18.2",
+                "@formatjs/intl-localematcher": "0.5.4",
+                "tslib": "^2.4.0"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.6.2",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+                    "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+                }
+            }
+        },
+        "@formatjs/intl-localematcher": {
+            "version": "0.5.4",
+            "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
+            "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==",
+            "requires": {
+                "tslib": "^2.4.0"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.6.2",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+                    "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+                }
+            }
+        },
         "@fortawesome/fontawesome-free": {
             "version": "6.1.2",
             "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.2.tgz",
diff --git a/package.json b/package.json
index 5cf4215f..27c79669 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
         "yjs": "^13.5.12"
     },
     "dependencies": {
+        "@formatjs/intl-durationformat": "^0.2.2",
         "jszip": "^3.10.1"
     }
 }
diff --git a/resources/js/components/form/ButtonSubmit.vue b/resources/js/components/form/ButtonSubmit.vue
index 52a0b0af..64ed0296 100644
--- a/resources/js/components/form/ButtonSubmit.vue
+++ b/resources/js/components/form/ButtonSubmit.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="form-group row mb-0">
     <div :class="inputColumnClass">
-      <button type="submit" class="btn btn-primary mr-3 mb-1" :disabled="disabled" v-on="$listeners">
+      <button type="submit" class="btn btn-primary mr-3 mb-1" :disabled="disabled" :value="value" v-on="$listeners">
         {{ label }}
       </button>
 
@@ -15,6 +15,7 @@ export default {
   name: 'ButtonSubmit',
   props: {
     label: { type: String, default: function() { return this.$t('t.global.save') } },
+    value: { default: null },
     disabled: { type: Boolean, default: false },
     narrowForm: { type: Boolean, default: false },
   },
diff --git a/resources/js/components/form/InputText.vue b/resources/js/components/form/InputText.vue
index cfc99017..a8b4ca0e 100644
--- a/resources/js/components/form/InputText.vue
+++ b/resources/js/components/form/InputText.vue
@@ -30,7 +30,8 @@
         v-model="currentValue"
         :required="required"
         :autofocus="autofocus"
-        :v-focus="autofocus">
+        :v-focus="autofocus"
+        ref="input">
 
       <span v-if="errorMessage" class="invalid-feedback" role="alert">
         <strong>{{ errorMessage }}</strong>
@@ -50,6 +51,11 @@ export default {
     label: { type: String, required: true },
     type: { type: String, default: 'text' },
     autofocus: { type: Boolean, default: false },
+  },
+  methods: {
+    focus() {
+      this.$refs.input.focus()
+    }
   }
 }
 </script>
diff --git a/resources/js/components/nameGame/AnswerInput.vue b/resources/js/components/nameGame/AnswerInput.vue
new file mode 100644
index 00000000..17592c8e
--- /dev/null
+++ b/resources/js/components/nameGame/AnswerInput.vue
@@ -0,0 +1,77 @@
+<template>
+  <div v-if="gameMode === 'multipleChoice'">
+    <button
+      v-for="option in multipleChoiceOptions"
+      :key="option.id"
+      type="submit"
+      class="btn btn-primary mr-3 mb-1 w-100 h-25"
+      :value="option.id">
+      {{ option.scout_name }}
+    </button>
+  </div>
+  <div v-else>
+    <input-text v-model="manualInput" :label="$t('t.views.name_game.scout_name')" name="scout_name" ref="scoutName"></input-text>
+    <button
+      type="submit"
+      class="btn btn-primary mr-3 mb-1 w-100 h-25">
+      {{ buttonLabel }}
+    </button>
+  </div>
+</template>
+
+<script>
+
+import InputText from '../form/InputText.vue';
+
+export default {
+  name: 'AnswerInput',
+  components: { InputText },
+  props: {
+    participant: { type: Object, required: true },
+    participants: { type: Array, required: true },
+    gameMode: { type: String, required: true },
+  },
+  data: () => ({
+    manualInput: '',
+  }),
+  computed: {
+    wrongGuess1() {
+      let result = this.participant
+      if (this.participants.length < 2) return result
+      while (result.id === this.participant.id) {
+        result = this.participants[Math.floor(Math.random() * this.participants.length)]
+      }
+      return result
+    },
+    wrongGuess2() {
+      let result = this.participant
+      if (this.participants.length < 3) return result
+      while (result.id === this.participant.id || result.id === this.wrongGuess1.id) {
+        result = this.participants[Math.floor(Math.random() * this.participants.length)]
+      }
+      return result
+    },
+    multipleChoiceOptions() {
+      const options = [this.participant, this.wrongGuess1, this.wrongGuess2]
+      options.sort((a, b) => a.scout_name.localeCompare(b.scout_name))
+      return options
+    },
+    buttonLabel() {
+      if (this.manualInput.length) {
+        return this.$t('t.views.name_game.submit')
+      }
+      return this.$t('t.views.name_game.skip')
+    },
+  },
+  mounted() {
+    if (this.gameMode === 'manualNameInput' && this.$refs.scoutName) {
+      this.manualInput = ''
+      this.$refs.scoutName.focus()
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/nameGame/GuessPrompt.vue b/resources/js/components/nameGame/GuessPrompt.vue
new file mode 100644
index 00000000..0c77b727
--- /dev/null
+++ b/resources/js/components/nameGame/GuessPrompt.vue
@@ -0,0 +1,28 @@
+<template>
+  <row-text v-if="image" :narrow-form="true">
+    <div class="square-container name-game-image">
+      <img class="card-img-top img img-responsive full-width" :src="participant.image_path" :alt="$t('t.views.name_game.who_is_this')">
+    </div>
+  </row-text>
+  <div v-else>{{ participant.scout_name }}</div>
+</template>
+
+<script>
+
+export default {
+  name: 'GuessPrompt',
+  props: {
+    participant: { type: Object, required: true },
+    gameMode: { type: String, required: true },
+  },
+  computed: {
+    image() {
+      return ['multipleChoice', 'manualNameInput'].includes(this.gameMode)
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/nameGame/NameGame.vue b/resources/js/components/nameGame/NameGame.vue
new file mode 100644
index 00000000..5a797cc6
--- /dev/null
+++ b/resources/js/components/nameGame/NameGame.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="name-game">
+    <template v-if="!playing">
+
+      <form @submit.prevent="playing = true">
+
+        <input-multi-select
+          :label="$t('t.views.name_game.participants')"
+          name="selectedParticipants"
+          id="participants"
+          v-model="selectedParticipantIds"
+          multiple
+          :options="candidatesWithImage"
+          :display-field="anyDuplicateMembershipGroups ? 'name_and_group' : 'scout_name'"
+          required
+          :groups="groups"
+        ></input-multi-select>
+
+        <input-multi-select
+          :label="$t('t.views.name_game.game_mode')"
+          name="gameMode"
+          id="gameMode"
+          v-model="gameMode"
+          :options="[ { id: 'multipleChoice', label: $t('t.views.name_game.multiple_choice')}, { id: 'manualNameInput', label: $t('t.views.name_game.manual_name_input') } ]"
+          required
+          :allow-empty="false"
+        ></input-multi-select>
+
+        <button-submit :label="tooFewParticipantsSelected ? $t('t.views.name_game.too_few_participants') : $t('t.views.name_game.start')" :disabled="tooFewParticipantsSelected"></button-submit>
+
+      </form>
+
+    </template>
+    <template v-else>
+      <name-game-round
+        :participants="selectedParticipants"
+        :game-mode="gameMode"
+        @finish="finishRound"
+      ></name-game-round>
+    </template>
+  </div>
+</template>
+
+<script>
+import InputMultiSelect from '../form/InputMultiSelect'
+import ButtonSubmit from '../form/ButtonSubmit'
+import { countBy } from 'lodash'
+
+export default {
+  name: 'NameGame',
+  components: { InputMultiSelect, ButtonSubmit },
+  props: {
+    participants: { type: Array, required: true },
+    teamMembers: { type: Array, default: [] },
+  },
+  data() {
+    return {
+      selectedParticipants: this.participants.filter(participant => participant.image_url),
+      playing: false,
+      gameMode: 'multipleChoice',
+    }
+  },
+  computed: {
+    maxParticipantId() {
+      return Math.max(...this.participants.map(p => p.id))
+    },
+    candidates() {
+      return this.participants.concat(this.teamMembers.map(teamMember => ({
+        ...teamMember,
+        id: this.maxParticipantId + teamMember.id,
+        scout_name: teamMember.name,
+      })))
+    },
+    candidatesWithImage() {
+      return this.candidates.map(candidate => {
+        if (candidate.image_url) {
+          return { ...candidate, id: '' + candidate.id }
+        }
+        return {
+          ...candidate,
+          id: '' + candidate.id,
+          scout_name: candidate.scout_name + ' (' + this.$tc('t.views.name_game.no_image') + ')',
+        }
+      })
+    },
+    selectedParticipantIds: {
+      get () {
+        return this.selectedParticipants.map(participant => participant.id).join(',')
+      },
+      set (newValue) {
+        const ids = newValue.split(',')
+        this.selectedParticipants = this.candidates.filter(p => ids.includes(p.id.toString()))
+      }
+    },
+    anyDuplicateMembershipGroups() {
+      return 1 < Math.max(
+        ...Object.values(countBy(
+          this.selectedParticipants.filter(participant => !!participant.group), 'group')
+        )
+      )
+    },
+    tooFewParticipantsSelected() {
+      return this.selectedParticipants.length < 3
+    },
+    groups() {
+      return {
+        [this.$t('t.views.name_game.select_all_participants')]: this.participants.map(p => p.id).join(),
+        [this.$t('t.views.name_game.select_all_participants_with_image')]: this.participants.filter(p => p.image_url).map(p => p.id).join(),
+        [this.$t('t.views.name_game.select_all_equipe_members')]: this.teamMembers.map(p => this.maxParticipantId + p.id).join(),
+        [this.$t('t.views.name_game.select_all')]: this.candidates.map(p => p.id).join(),
+      }
+    },
+  },
+  methods: {
+    finishRound(selectParticipants = []) {
+      this.playing = false
+      if (selectParticipants && selectParticipants.length) {
+        this.selectedParticipantIds = selectParticipants.join(',')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/nameGame/NameGameGuess.vue b/resources/js/components/nameGame/NameGameGuess.vue
new file mode 100644
index 00000000..1062e236
--- /dev/null
+++ b/resources/js/components/nameGame/NameGameGuess.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <guess-prompt :participant="participant" :game-mode="gameMode"></guess-prompt>
+    <form v-if="guessing" ref="form" @submit.prevent="guess">
+      <answer-input :participant="participant" :participants="participants" :game-mode="gameMode"></answer-input>
+    </form>
+    <form v-else @submit.prevent="next">
+      <div v-if="correct">
+        <div>{{ $t('t.views.name_game.correct') }}</div>
+        <div>{{ $t('t.views.name_game.this_is') }}</div>
+        <div class="d-flex align-items-baseline justify-content-start">
+          <i class="text-green fas fa-check"></i>
+          &nbsp;
+          {{ participant.scout_name }}
+        </div>
+      </div>
+      <div v-else>
+        <div>{{ $t('t.views.name_game.this_is') }}</div>
+        <div class="d-flex align-items-baseline justify-content-start">
+          {{ participant.scout_name }}
+        </div>
+        <div>{{ $t('t.views.name_game.you_guessed') }}</div>
+        <div class="d-flex align-items-baseline justify-content-start">
+          <i class="text-red fas fa-xmark"></i>
+          &nbsp;
+          <span>{{ submittedScoutName }}</span>
+        </div>
+      </div>
+      <button
+        type="submit"
+        class="btn btn-outline-primary mr-3 mb-1 w-100 h-25"
+        ref="nextButton">
+        {{ $t('t.views.name_game.next') }}
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+
+import ButtonSubmit from '../form/ButtonSubmit.vue'
+
+export default {
+  name: 'NameGameGuess',
+  components: { ButtonSubmit },
+  props: {
+    participant: { type: Object, required: true },
+    participants: { type: Array, required: true },
+    gameMode: { type: String, required: true },
+  },
+  data() {
+    return {
+      guessing: true,
+      correct: false,
+      submittedGuess: null,
+      submittedScoutName: '',
+    }
+  },
+  methods: {
+    guess(event) {
+      this.gameMode === 'multipleChoice' ?
+        this.getSelectedParticipant(event) :
+        this.getGuessedParticipant(event)
+      if (this.submittedGuess?.id === this.participant.id) {
+        this.correct = true
+        this.$emit('correct')
+      } else {
+        this.correct = false
+        this.$emit('incorrect')
+      }
+      this.guessing = false
+      this.$nextTick(() => this.$refs.nextButton.focus())
+    },
+    next() {
+      this.$emit('advance')
+      this.guessing = true
+    },
+    getSelectedParticipant(event) {
+      const selectedId = event.submitter.getAttribute('value')
+      this.submittedGuess = this.participants.find(p => selectedId === `${p.id}`)
+      this.submittedScoutName = this.submittedGuess?.scout_name
+    },
+    getGuessedParticipant(event) {
+      const input = (new FormData(event.target)).get('scout_name')
+      this.submittedGuess = this.participants.find(participant => {
+        return this.normalize(participant.scout_name) === this.normalize(input)
+      })
+      this.submittedScoutName = this.submittedGuess ? this.submittedGuess.scout_name : input
+    },
+    normalize(name) {
+      return name.toLocaleLowerCase().replaceAll(/[^a-zA-Z]/g, '')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/nameGame/NameGameRound.vue b/resources/js/components/nameGame/NameGameRound.vue
new file mode 100644
index 00000000..816a0737
--- /dev/null
+++ b/resources/js/components/nameGame/NameGameRound.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="w-100 w-md-50 m-auto">
+    <div class="d-flex justify-content-between">
+      <div class="d-flex">
+        <div class="hc fc-30-90-150-255 s e wc">
+          <div class="s t wf hf">Zeit:&nbsp;</div>
+        </div>
+        <div class="hc s e wc">
+          <div class="s t wf hf">{{ elapsedTime }}</div>
+        </div>
+      </div>
+      <div class="d-flex">
+        <div class="hc fc-30-90-150-255 s e wc">
+          <div class="s t wf hf">Punkte:&nbsp;</div>
+        </div>
+        <div class="hc s e wc">
+          <div class="s t wf hf">{{ score }}</div>
+        </div>
+      </div>
+    </div>
+    <b-progress class="position-relative mb-3 mt-1" :max="participants.length" >
+      <span class="justify-content-center align-self-center d-flex position-absolute w-100"><strong class="ml-1"> {{ $t('t.views.name_game.num_correct_and_incorrect', { correct: numCorrect, incorrect: numIncorrect, total: participants.length }) }}</strong></span>
+      <b-progress-bar :value="numCorrect" variant="info"></b-progress-bar>
+      <b-progress-bar :value="numIncorrect" variant="danger"></b-progress-bar>
+    </b-progress>
+    <name-game-guess
+      v-if="step < shuffledParticipants.length"
+      :participant="shuffledParticipants[step]"
+      :participants="participants"
+      :game-mode="gameMode"
+      @correct="correct"
+      @incorrect="incorrect"
+      @advance="step += 1"
+    ></name-game-guess>
+    <score-screen v-else :participants="shuffledParticipants" @finish="(...args) => this.$emit('finish', ...args)"></score-screen>
+  </div>
+</template>
+
+<script>
+import { cloneDeep, shuffle } from 'lodash';
+import '@formatjs/intl-durationformat/polyfill'
+import ButtonSubmit from '../form/ButtonSubmit.vue'
+import NameGameGuess from './NameGameGuess.vue'
+import ScoreScreen from './ScoreScreen.vue'
+import Vue from 'vue';
+
+export default {
+  name: 'NameGameRound',
+  components: { ButtonSubmit, NameGameGuess, ScoreScreen },
+  props: {
+    participants: { type: Array, required: true },
+    gameMode: { type: String, required: true }
+  },
+  data () {
+    return {
+      shuffledParticipants: shuffle(this.participants),
+      step: 0,
+      startTime: null,
+      elapsedTime: '',
+      score: 0,
+    };
+  },
+  computed: {
+    finished() {
+      return this.step >= this.participants.length
+    },
+    numCorrect() {
+      return this.shuffledParticipants.filter(participant => participant.correct === true).length
+    },
+    numIncorrect() {
+      return this.shuffledParticipants.filter(participant => participant.correct === false).length
+    },
+  },
+  mounted () {
+    this.start()
+    this.updateTimer()
+  },
+  methods: {
+    updateTimer() {
+      const elapsedSeconds = Math.round(((new Date()) - this.startTime) / 100) / 10
+      this.elapsedTime = new Intl.DurationFormat('de-CH', { style: 'digital' }).format({
+        milliseconds: Math.floor((elapsedSeconds * 1000) % 1000),
+        seconds: Math.floor(elapsedSeconds) % 60,
+        minutes: Math.floor(elapsedSeconds / 60)
+      })
+      if (!this.finished) requestAnimationFrame(this.updateTimer)
+    },
+    correct() {
+      Vue.set(this.shuffledParticipants[this.step], 'correct', true)
+      this.score += 10
+    },
+    incorrect() {
+      Vue.set(this.shuffledParticipants[this.step], 'correct', false)
+    },
+    start() {
+      this.shuffledParticipants = shuffle(this.participants.map(cloneDeep))
+      this.step = 0
+      this.startTime = new Date()
+      this.elapsedTime = ''
+      this.score = 0
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/nameGame/ScoreScreen.vue b/resources/js/components/nameGame/ScoreScreen.vue
new file mode 100644
index 00000000..2cf670c4
--- /dev/null
+++ b/resources/js/components/nameGame/ScoreScreen.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <strong v-if="wronglyGuessed.length < participants.length">{{ $t('t.views.name_game.well_done') }}</strong>
+
+    <p v-if="wronglyGuessed.length">{{ $t('t.views.name_game.wrong_guesses') }}</p>
+    <div v-for="participant in wronglyGuessed" :key="participant.id" class="d-flex flex-row align-items-center gap-1rem mb-2">
+      <div class="square-container w-25">
+        <img class="card-img-top img img-responsive full-width" :src="participant.image_path" :alt="participant.scout_name">
+      </div>
+      <div>{{ participant.scout_name }}</div>
+    </div>
+
+    <button
+      v-if="wronglyGuessed.length && wronglyGuessed.length < participants.length"
+      type="submit"
+      class="btn btn-outline-primary mr-3 mb-1 w-100 h-25"
+      @click="$emit('finish', wronglyGuessed.map(p => p.id))">
+      {{ $t('t.views.name_game.practice_wrong_names') }}
+    </button>
+    <button
+      type="submit"
+      class="btn btn-outline-primary mr-3 mb-1 w-100 h-25"
+      @click="$emit('finish')">
+      {{ $t('t.views.name_game.play_again') }}
+    </button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ScoreScreen',
+  props: {
+    participants: { type: Array, default: [] },
+  },
+  computed: {
+    wronglyGuessed() {
+      return this.participants.filter(participant => participant.correct === false)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 7ad4d852..778166dc 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -184,6 +184,10 @@
     min-height: 1em;
 }
 
+.gap-1rem {
+    gap: 1rem !important;
+}
+
 .clear-both {
     clear: both;
 }
@@ -194,3 +198,8 @@
     right: 0.5rem;
     z-index: 1;
 }
+
+.name-game-image {
+    max-width: 15rem;
+    margin: 0 auto;
+}
diff --git a/resources/views/nameGame/index.blade.php b/resources/views/nameGame/index.blade.php
new file mode 100644
index 00000000..8e77f81d
--- /dev/null
+++ b/resources/views/nameGame/index.blade.php
@@ -0,0 +1,23 @@
+@extends('layouts.default')
+
+@section('pagetitle'){{__('t.views.name_game.page_title') }}@endsection
+
+@section('content')
+
+    <b-card>
+        <template #header>
+            <div class="d-flex justify-content-between">
+                {{__('t.views.name_game.name_game')}}
+                <a href="{{ route('participants', [ 'course' => $course->id ]) }}">{{ __('t.views.name_game.abort') }}</a>
+            </div>
+
+        </template>
+
+            <name-game
+                :participants="{{ json_encode($course->participants) }}"
+                :team-members="{{ json_encode($course->users) }}"
+            ></name-game>
+
+    </b-card>
+
+@endsection
diff --git a/resources/views/participants.blade.php b/resources/views/participants.blade.php
index be4dd981..d87dbfce 100644
--- a/resources/views/participants.blade.php
+++ b/resources/views/participants.blade.php
@@ -5,7 +5,12 @@
 @section('content')
 
     <b-card>
-        <template #header>{{__('t.views.participants.title')}}</template>
+        <template #header>
+            <div class="d-flex justify-content-between">
+                {{__('t.views.participants.title')}}
+                <a href="{{ route('nameGame', [ 'course' => $course->id ]) }}">{{__('t.views.participants.name_game')}}</a>
+            </div>
+        </template>
 
         @if (count($course->participants))
 
diff --git a/routes/web.php b/routes/web.php
index 1ccbe9da..9317e44e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -24,6 +24,7 @@
 use App\Http\Controllers\HomeController;
 use App\Http\Controllers\InvitationController;
 use App\Http\Controllers\LocalizationController;
+use App\Http\Controllers\NameGameController;
 use App\Http\Controllers\ObservationAssignmentController;
 use App\Http\Controllers\ObservationController;
 use App\Http\Controllers\ParticipantController;
@@ -64,6 +65,8 @@
         Route::post('/course/{course}/observation/{observation}', [ObservationController::class, 'update'])->name('observation.update');
         Route::delete('/course/{course}/observation/{observation}', [ObservationController::class, 'destroy'])->name('observation.delete');
 
+        Route::get('/course/{course}/names', [NameGameController::class, 'index'])->name('nameGame');
+
         Route::post('/course/{course}/admin/archive', [CourseController::class, 'archive'])->name('admin.course.archive');
     });