diff --git a/client/src/components/responseMatching/ActiveMatching.vue b/client/src/components/responseMatching/ActiveMatching.vue
index 89a0b5a..b1b9b86 100644
--- a/client/src/components/responseMatching/ActiveMatching.vue
+++ b/client/src/components/responseMatching/ActiveMatching.vue
@@ -1,29 +1,66 @@
+<script setup lang="ts">
+import Prompt from '@/components/gameShared/Prompt.vue';
+import DisputeIcon from '@/components/responseMatching/DisputeIcon.vue';
+import ResponseList from '@/components/gameShared/ResponseList.vue';
+import { AudioWrap } from '@/mixins/audiowrap.js';
+import ClickMp3 from '@/assets/audio/click2.mp3';
+import AlertMp3 from '@/assets/audio/alert.mp3';
+import { onMounted, ref, watch } from 'vue';
+import socket from '@/socket/socket.js';
+import { useGameStore } from '@/stores/game.js';
+import { useI18n } from 'vue-i18n';
+
+const click = new AudioWrap(ClickMp3);
+const alert = new AudioWrap(AlertMp3);
+
+const matchedResponse = ref('');
+
+const gameStore = useGameStore();
+
+onMounted(() => {
+  if (!gameStore.unmatched) {
+    alert.play();
+  }
+});
+
+watch(matchedResponse, (val: string): void => {
+  socket.emit('selectMatch', val);
+});
+
+function noMatch() {
+  click.play();
+  socket.emit('selectMatch', '');
+}
+
+const { t } = useI18n();
+</script>
+
 <template>
   <div class="w-100 d-flex flex-column justify-content-start align-items-center py-3 px-4">
-    <prompt :prompt="prompt" />
+    <prompt :prompt="gameStore.prompt" />
     <i18n-t keypath="activeMatchingMessage" tag="p">
       <template #player>
-        <span class="player">{{ selector?.name }}</span>
+        <span class="player">{{ gameStore.selector?.name }}</span>
       </template>
       <template #response>
-        <span class="responseMessage fs-4">{{ selectedResponse }}</span>
+        <span class="responseMessage fs-4">{{ gameStore.selectedResponse }}</span>
         <dispute-icon
-          v-if="sikeDispute && selectionType === 'sike'"
+          v-if="gameStore.sikeDispute && gameStore.selectionType === 'sike'"
           class="ms-2 me-1"
-          :response="selectedResponse"
+          :response="gameStore.selectedResponse"
           :placement="'top'" />
       </template>
       <template #type>
-        <span v-t="selectionType" :class="selectionType" />
+        <span v-t="gameStore.selectionType" :class="gameStore.selectionType" />
       </template>
     </i18n-t>
 
     <button
-      v-tooltip.left.ds900="$t('tooltip.noMatch', { response: selectedResponse })"
+      v-tooltip.left.ds900="$t('tooltip.noMatch', { response: gameStore.selectedResponse })"
       class="btn btn-primary w-50 fs-4 d-flex justify-content-center align-items-center"
       @click="noMatch">
       <div class="d-flex justify-content-center align-items-center w-75">
-        <img class="my-auto w-75 w-sm-50 w-lg-25" src="@/assets/images/sike.png" :alt="$t('sike')" />
+        <img class="my-auto w-75 w-sm-50 w-lg-25" src="@/assets/images/sike.png" :alt="t('sike')" />
       </div>
     </button>
     or
@@ -31,54 +68,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import ResponseList from '@/components/gameShared/ResponseList.vue';
-import Prompt from '@/components/gameShared/Prompt.vue';
-import ClickMp3 from '@/assets/audio/click2.mp3';
-import AlertMp3 from '@/assets/audio/alert.mp3';
-import DisputeIcon from '@/components/responseMatching/DisputeIcon.vue';
-import { AudioWrap } from '@/mixins/audiowrap.js';
-import socket from '@/socket/socket';
-import { useGameStore } from '@/stores/game.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-
-const click = new AudioWrap(ClickMp3);
-const alert = new AudioWrap(AlertMp3);
-
-export default defineComponent({
-  components: {
-    DisputeIcon,
-    ResponseList,
-    Prompt
-  },
-  data() {
-    return {
-      matchedResponse: ''
-    };
-  },
-  computed: {
-    ...mapState(useGameStore, ['prompt', 'selectionType', 'selectedResponse', 'selector', 'unmatched', 'sikeDispute'])
-  },
-  watch: {
-    matchedResponse: function (val: string) {
-      socket.emit('selectMatch', val);
-    }
-  },
-  mounted() {
-    if (!this.unmatched) {
-      alert.play();
-    }
-  },
-  methods: {
-    noMatch() {
-      click.play();
-      socket.emit('selectMatch', '');
-    }
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 p {
   text-align: center;
diff --git a/client/src/components/responseMatching/MatchingSummary.vue b/client/src/components/responseMatching/MatchingSummary.vue
index b3bdd88..bbfa701 100644
--- a/client/src/components/responseMatching/MatchingSummary.vue
+++ b/client/src/components/responseMatching/MatchingSummary.vue
@@ -1,19 +1,54 @@
+<script setup lang="ts">
+import Prompt from '@/components/gameShared/Prompt.vue';
+import DisputeIcon from '@/components/responseMatching/DisputeIcon.vue';
+import SelectionType from '@/components/gameShared/SelectionType.vue';
+import MatchCard from '@/components/responseMatching/MatchCard.vue';
+import { useI18n } from 'vue-i18n';
+import { computed } from 'vue';
+import type { Player } from ':common/stateTypes.js';
+import socket from '@/socket/socket.js';
+import { type Match, useGameStore } from '@/stores/game.js';
+import { AudioWrap } from '@/mixins/audiowrap.js';
+import ClickMp3 from '@/assets/audio/click2.mp3';
+import { useRoomStore } from '@/stores/room.js';
+
+const click = new AudioWrap(ClickMp3);
+
+const gameStore = useGameStore();
+const roomStore = useRoomStore();
+
+const matchers = computed((): Player[] => {
+  return roomStore.players.filter((player: Player) => player.active && player.id !== gameStore.selector!.id);
+});
+
+function endRound(): void {
+  click.play();
+  socket.emit('selectionComplete');
+}
+
+function match(player: Player): Match {
+  return gameStore.matches.find((match: { player: Player }) => player.id === match.player.id)!;
+}
+
+const { t, n } = useI18n();
+</script>
+
 <template>
   <div class="w-100 d-flex flex-column align-items-center justify-content-between gap-2 py-3 px-4">
     <div class="w-100 d-flex flex-column align-items-center justify-content-start">
-      <prompt :prompt="prompt" />
-      <h3 v-if="isSelector" class="fs-3">
-        {{ $t('selfScoreMessage', { score: $n(roundPoints) }) }}
+      <prompt :prompt="gameStore.prompt" />
+      <h3 v-if="gameStore.isSelector" class="fs-3">
+        {{ t('selfScoreMessage', { score: n(gameStore.roundPoints) }) }}
       </h3>
       <h3 v-else class="fs-3">
-        {{ $t('scoreMessage', { player: selector!.name, score: $n(roundPoints) }) }}
+        {{ t('scoreMessage', { player: gameStore.selector!.name, score: n(gameStore.roundPoints) }) }}
       </h3>
       <span class="d-flex flex-row align-items-center justify-content-center gap-2">
-        <span class="fs-2 fw-bolder text-red my-auto">{{ selectedResponse }}</span>
+        <span class="fs-2 fw-bolder text-red my-auto">{{ gameStore.selectedResponse }}</span>
         <dispute-icon
-          v-if="sikeDisputeCount"
-          :disabled="isSelector"
-          :response="selectedResponse"
+          v-if="gameStore.sikeDisputeCount"
+          :disabled="gameStore.isSelector"
+          :response="gameStore.selectedResponse"
           :placement="'right'" />
       </span>
       <div class="w-75 d-flex justify-content-center align-items-center">
@@ -28,63 +63,11 @@
     <button
       v-t="'cont'"
       class="btn btn-blue w-50 fs-4 mb-3"
-      :class="{ invisible: !canEndRound }"
+      :class="{ invisible: !gameStore.canEndRound }"
       @click="endRound"></button>
   </div>
 </template>
 
-<script lang="ts">
-import Prompt from '@/components/gameShared/Prompt.vue';
-import SelectionType from '@/components/gameShared/SelectionType.vue';
-import MatchCard from '@/components/responseMatching/MatchCard.vue';
-import DisputeIcon from '@/components/responseMatching/DisputeIcon.vue';
-import ClickMp3 from '@/assets/audio/click2.mp3';
-import { AudioWrap } from '@/mixins/audiowrap.js';
-import socket from '@/socket/socket';
-import { useRoomStore } from '@/stores/room.js';
-import { useGameStore } from '@/stores/game.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-import type { Player } from ':common/stateTypes';
-
-const click = new AudioWrap(ClickMp3);
-
-export default defineComponent({
-  components: { MatchCard, Prompt, SelectionType, DisputeIcon },
-  data() {
-    return {
-      matchedResponse: ''
-    };
-  },
-  computed: {
-    ...mapState(useRoomStore, ['players']),
-    ...mapState(useGameStore, [
-      'prompt',
-      'matches',
-      'selectionType',
-      'selectedResponse',
-      'selector',
-      'roundPoints',
-      'canEndRound',
-      'isSelector',
-      'sikeDisputeCount'
-    ]),
-    matchers: function () {
-      return this.players.filter((player: Player) => player.active && player.id !== this.selector!.id);
-    }
-  },
-  methods: {
-    endRound: function () {
-      click.play();
-      socket.emit('selectionComplete');
-    },
-    match(player: Player) {
-      return this.matches.find((match: { player: Player }) => player.id === match.player.id)!;
-    }
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 .matches {
   overflow-x: auto;
diff --git a/client/src/components/responseSelection/Selection.vue b/client/src/components/responseSelection/Selection.vue
index 6214106..1474a28 100644
--- a/client/src/components/responseSelection/Selection.vue
+++ b/client/src/components/responseSelection/Selection.vue
@@ -1,9 +1,36 @@
+<script setup lang="ts">
+import Prompt from '@/components/gameShared/Prompt.vue';
+import SelectionPicker from '@/components/responseSelection/SelectionPicker.vue';
+import ResponseList from '@/components/gameShared/ResponseList.vue';
+import { AudioWrap } from '@/mixins/audiowrap.js';
+import AlertMp3 from '@/assets/audio/alert.mp3';
+import { onMounted, ref, watch } from 'vue';
+import socket from '@/socket/socket.js';
+import { useGameStore } from '@/stores/game.js';
+
+const alert = new AudioWrap(AlertMp3);
+
+const response = ref('');
+
+const gameStore = useGameStore();
+
+onMounted(() => {
+  if (gameStore.isSelector && !gameStore.firstSelection) {
+    alert.play();
+  }
+});
+
+watch(response, (val: string) => {
+  socket.emit('selectResponse', val);
+});
+</script>
+
 <template>
   <div class="w-100 d-flex flex-column justify-content-start align-items-center py-3 px-4">
-    <prompt :prompt="prompt" />
+    <prompt :prompt="gameStore.prompt" />
     <p
-      v-if="!isSelector"
-      v-t="{ path: 'selection.message', args: { player: selector?.name } }"
+      v-if="!gameStore.isSelector"
+      v-t="{ path: 'selection.message', args: { player: gameStore.selector?.name } }"
       class="display-6 passiveMessage mb-0" />
     <i18n-t v-else keypath="selection.selfMessage" tag="p" class="display-6 activeMessage mb-0">
       <template #self>
@@ -11,50 +38,13 @@
       </template>
     </i18n-t>
     <selection-picker />
-    <response-list v-model="response" :selectable="isSelector && selectionType !== 'choice'" :height="40" />
+    <response-list
+      v-model="response"
+      :selectable="gameStore.isSelector && gameStore.selectionType !== 'choice'"
+      :height="40" />
   </div>
 </template>
 
-<script lang="ts">
-import ResponseList from '@/components/gameShared/ResponseList.vue';
-import SelectionPicker from '@/components/responseSelection/SelectionPicker.vue';
-import Prompt from '@/components/gameShared/Prompt.vue';
-import AlertMp3 from '@/assets/audio/alert.mp3';
-import { AudioWrap } from '@/mixins/audiowrap.js';
-import socket from '@/socket/socket';
-import { useGameStore } from '@/stores/game.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-
-const alert = new AudioWrap(AlertMp3);
-
-export default defineComponent({
-  components: {
-    ResponseList,
-    SelectionPicker,
-    Prompt
-  },
-  data() {
-    return {
-      response: ''
-    };
-  },
-  computed: {
-    ...mapState(useGameStore, ['prompt', 'selectionType', 'selector', 'firstSelection', 'isSelector'])
-  },
-  watch: {
-    response: function (val: string) {
-      socket.emit('selectResponse', val);
-    }
-  },
-  mounted() {
-    if (this.isSelector && !this.firstSelection) {
-      alert.play();
-    }
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 .activeMessage {
   font-weight: 500;
diff --git a/client/src/components/responseSelection/SelectionPicker.vue b/client/src/components/responseSelection/SelectionPicker.vue
index bed3913..8b3c199 100644
--- a/client/src/components/responseSelection/SelectionPicker.vue
+++ b/client/src/components/responseSelection/SelectionPicker.vue
@@ -1,18 +1,45 @@
+<script setup lang="ts">
+import SelectionType from '@/components/gameShared/SelectionType.vue';
+import { computed, ref } from 'vue';
+import { AudioWrap } from '@/mixins/audiowrap.js';
+import ClickMp3 from '@/assets/audio/click2.mp3';
+import socket from '@/socket/socket.js';
+import { useGameStore } from '@/stores/game.js';
+import { useI18n } from 'vue-i18n';
+
+const lastPicked = ref(false);
+
+const gameStore = useGameStore();
+
+const isSelectingChoice = computed((): boolean => {
+  return gameStore.selectionTypeChoice && gameStore.isSelector;
+});
+
+function selectSelectionType(strike: boolean) {
+  new AudioWrap(ClickMp3).play();
+  if (gameStore.selectionType === 'choice' || lastPicked.value !== strike) {
+    socket.emit('selectSelectionType', strike);
+    lastPicked.value = strike;
+  }
+}
+
+const { t } = useI18n();
+</script>
 <template>
   <!-- desktop view -->
   <div
     class="d-md-flex d-none flex-row align-items-center justify-content-center w-75"
-    :class="{ 'justify-content-between': choice && isSelector }">
+    :class="{ 'justify-content-between': isSelectingChoice }">
     <button
-      v-if="choice && isSelector"
-      v-tooltip.left.ds750="$t('tooltip.strike')"
+      v-if="isSelectingChoice"
+      v-tooltip.left.ds750="t('tooltip.strike')"
       v-t="'strike'"
       class="btn btn-orange w-25"
       @click="selectSelectionType(true)" />
-    <selection-type :tooltip="!(isSelector && choice)" />
+    <selection-type :tooltip="!isSelectingChoice" />
     <button
-      v-if="choice && isSelector"
-      v-tooltip.right.ds750="$t('tooltip.sike')"
+      v-if="isSelectingChoice"
+      v-tooltip.right.ds750="t('tooltip.sike')"
       v-t="'sike'"
       class="btn btn-blue w-25"
       @click="selectSelectionType(false)" />
@@ -20,15 +47,15 @@
   <!-- mobile view -->
   <div class="d-md-none d-flex flex-column align-items-center w-75">
     <selection-type />
-    <div v-if="choice && isSelector" class="d-flex flex-row align-items-center justify-content-around gap-3 w-100">
+    <div v-if="isSelectingChoice" class="d-flex flex-row align-items-center justify-content-around gap-3 w-100">
       <button
-        v-tooltip.left.ds750="$t('tooltip.strike')"
+        v-tooltip.left.ds750="t('tooltip.strike')"
         v-t="'strike'"
         class="btn btn-orange w-50"
         @click="selectSelectionType(true)" />
       <h3>or</h3>
       <button
-        v-tooltip.right.ds750="$t('tooltip.sike')"
+        v-tooltip.right.ds750="t('tooltip.sike')"
         v-t="'sike'"
         class="btn btn-blue w-50"
         @click="selectSelectionType(false)" />
@@ -36,41 +63,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import SelectionType from '@/components/gameShared/SelectionType.vue';
-import ClickMp3 from '@/assets/audio/click2.mp3';
-import { AudioWrap } from '@/mixins/audiowrap.js';
-import socket from '@/socket/socket';
-import { useGameStore } from '@/stores/game.js';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { SelectionType },
-  data() {
-    return {
-      lastPicked: false
-    };
-  },
-  computed: {
-    ...mapState(useGameStore, {
-      type: 'selectionType',
-      choice: 'selectionTypeChoice',
-      isSelector: 'isSelector'
-    })
-  },
-  methods: {
-    selectSelectionType(strike: boolean) {
-      new AudioWrap(ClickMp3).play();
-      if (this.type === 'choice' || this.lastPicked !== strike) {
-        socket.emit('selectSelectionType', strike);
-        this.lastPicked = strike;
-      }
-    }
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 button {
   font-size: 1.4rem;