diff --git a/src/components/atoms/InstructionsContent.vue b/src/components/atoms/InstructionsContent.vue
new file mode 100644
index 0000000..ab4e963
--- /dev/null
+++ b/src/components/atoms/InstructionsContent.vue
@@ -0,0 +1,115 @@
+<script setup>
+const SINGLE_GAME_INSTRUCTIONS = [
+    "You will be shown descriptions of various games, one game at a time.",
+    "These games were created to be played in a video game environment in the images below.",
+    "In this video game, the player can move and look around the room, pick up objects, put them down, and throw them.",
+    "This video game environment is a room with a bed, a desk, several types of toys (such as balls, blocks, and stuffed animals), and other objects (such as a lamp, a clock, and a book).",
+    "Participants in a previous study played in this video game environment.",
+    "They were then asked to create a game to be played in the room to pass some time, for a single player, with no specific goal, but requiring keeping score.",
+    "You will be provided textual descriptions of these games, created by a computer translator program.",
+    // "Some of these games were created by human participants in a previous study; other games were created by a computer program.",
+    // "Regardless of whether the game was created by a human or a program, all of the textual descriptions you will see were created by a separate computer program.",
+    "This might cause the descriptions to seem artificial; please try to judge the games based on the contents of the game described, not the quality of the description.",
+    "You can also assume that all objects mentioned in a game description exist in the room.",
+    "You will be asked to answer a few multiple choice questions with judgements of each game description, such as how creative the game is, or how fun it might be to play.",
+    "You will also be asked to provide short (1-2 sentence) explanations of particularly low and high multiple choice answers for each game.",
+    // "Your task is to judge whether each game was created by a human or a computer program.",
+    // "You will be asked to make these judgments for each game description.",
+    // "You will use a slider to indicate your judgment, between 0 and 100.",
+    // "0 means you are certain the game was created by a computer program, and 100 means you are certain the game was created by a human.",
+    // "With each judgment, you will be able to provide a short explanation for your judgment.",
+    // "You will also be asked to highlight the parts of the game description that you think are most important for your judgment.",
+];
+
+const PAIRED_GAME_INSTRUCTIONS = [
+    "You will be shown descriptions of various games, two games at a time.",
+    "These games were created to be played in a video game environment in the images below.",
+    "In this video game, the player can move and look around the room, pick up objects, put them down, and throw them.",
+    "This video game environment is a room with a bed, a desk, several types of toys (such as balls, blocks, and stuffed animals), and other objects (such as a lamp, a clock, and a book).",
+    "Participants in a previous study played in this video game environment.",
+    "They were then asked to create a game to be played in the room to pass some time, for a single player, with no specific goal, but requiring keeping score.",
+    "You will be provided textual descriptions of these games, created by a computer translator program.",
+
+    "This might cause the descriptions to seem artificial; please try to judge the games based on the contents of the games described, not the quality of the descriptions.",
+    "You can also assume that all objects mentioned in a game description exist in the room.",
+    "You will be asked to answer a few multiple choice questions with judgements of each game description, such as which game seems more creative, or which might be more fun to play.",
+    "You will also be asked to provide short (1-2 sentence) explanations of particularly low and high multiple choice answers for each pair of games.",
+    // "Regardless of whether the game was created by a human or a program, all of the textual descriptions you will see were created by a separate computer program.",
+    // "This might cause the descriptions to seem artificial; please try to judge the games based on the contents of the game described, not the quality of the description.",
+    // "Your task is to judge which of the two games is more likely to have been created by a human (as opposed to a computer program).",
+    // "You will be asked to make these judgments for each game description.",
+    // "You will use a slider to indicate your judgment, between 0 and 100.",
+    // "0 means you are certain the game presented on the left-hand side was created by a human, and 100 means you are certain the game presented on the right-hand side was created by a human.",
+    // "With each judgment, you will be able to provide a short explanation for your judgment.", 
+    // "You will also be asked to highlight the parts of either of the game descriptions that you think are most important for your judgment.",
+];
+
+
+// computed property based on condition in data
+const instText = SINGLE_GAME_INSTRUCTIONS;
+// const instText = computed(() => {
+//     const {task} = smilestore.getConditions;
+//     if (task === 'single') {
+//         return SINGLE_GAME_INSTRUCTIONS;
+
+//     } if (task === 'paired') {
+//         return PAIRED_GAME_INSTRUCTIONS;
+//     }
+
+//     console.error(`Found unexpected task: ${task}, defaulting to 'single'`);
+//     return SINGLE_GAME_INSTRUCTIONS;
+// })
+
+</script>
+
+<template>
+    <div class="column has-text-left instructions">
+        <h1 class="title is-3">Instructions</h1>
+        <div class="is-size-5">
+            Please read the following instructions for the task you will be asked to perform:
+        </div>
+        <hr>
+        <div class="is-size-6">
+            <ul>
+                <template v-for="(line, index) in instText" :key="index">
+                    <li>{{ line }}</li>
+                </template>
+            </ul>
+        </div>
+        <hr>
+        <div class="columns">
+            <div class="column">
+                <img src="@/assets/room/many_objects_left.jpeg"/>
+                <img src="@/assets/room/many_objects_middle.jpeg"/>
+            </div>
+
+            <div class="column">
+                <img src="@/assets/room/many_objects_right.jpeg"/>
+                <img src="@/assets/room/many_objects_bed.jpeg"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+.instructions {
+    padding: 10px;
+    padding-top: 30px;
+    text-align: left;
+    font-size: 0.95em;
+}
+
+.instructions hr {
+    background-color: rgb(210, 210, 210);
+    margin-top: 7px;
+    margin-bottom: 10px;
+    height: 1px;
+}
+.instructions ul {
+    padding-left: 30px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    list-style-type: square;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/molecules/SingleGameExtendedJudgment.vue b/src/components/molecules/SingleGameExtendedJudgment.vue
index 15527a6..13e9510 100644
--- a/src/components/molecules/SingleGameExtendedJudgment.vue
+++ b/src/components/molecules/SingleGameExtendedJudgment.vue
@@ -2,7 +2,6 @@
 import { useRouter, useRoute, stringifyQuery } from 'vue-router'
 import useTimelineStepper from '@/composables/timelinestepper'
 import useSmileStore from '@/stores/smiledata' // get access to the global store
-import GameTextDisplay from '@/components/atoms/GameTextDisplay.vue';
 
 import { ref, reactive, computed, watch } from 'vue';
 import { reset } from '@formkit/core';
@@ -80,12 +79,16 @@ const answers = reactive(Object.fromEntries(JUDGEMENT_QUESTIONS.map((question) =
 answers['reasoning-low'] = '';
 answers['reasoning-high'] = '';
 
-
 const complete = computed(() => Object.keys(answers).every((key) => answers[key] !== '' && answers[key] !== 0));
 
+function resetForm() {
+    reset('single-game-extended-judgement-form');
+}
+
 defineExpose({
     complete,
-    answers
+    answers,
+    resetForm
 })
 
 const gameTextDisplayRef = ref(null);
@@ -94,6 +97,7 @@ const props = defineProps({
     game: String
 })
 
+
 // When the game changes, reset the answers
 watch(() => props.game, (prevGame, nextGame) => {
     if (prevGame !== nextGame) {
@@ -145,122 +149,56 @@ function specifyOptions(spec) {
 </script>
 
 <template>
-    <div class="my-2">
-        <div class="one-game my-4">
+    <div>
+        <FormKit 
+            type="form"
+            id="single-game-extended-judgement-form"
+            :actions="false"
+        >
+            <p class="field has-text-left">
+                Please answer the following questions about the game above in the context of the video game environment described earlier:
+            </p>
+
+            <template v-for="question in JUDGEMENT_QUESTIONS" :key="question.id">
+                <FormKit
+                    :name="question.id"
+                    :label="question.label"
+                    v-model="answers[question.id]"
+                    :type="'type' in question ? question.type : QUESTION_TYPE"
+                    :options="specifyOptions(question.options)"
+                    :validation="'validation' in question ? question.validation : VALIDATION_TYPE"
+                />
+            </template>
+
             <div class="columns">
-                <div class="column is-2"></div>
-                <div class="column is-8">
-                    <div class="has-text-left pb-4">
-                        Please read the following game description, and answer the questions below:
-                    </div>
-                    <GameTextDisplay :game="props.game" ref="gameTextDisplayRef"></GameTextDisplay>
+                <div class="field column">
+                    <FormKit 
+                        v-model="answers['reasoning-low']"
+                        type="textarea"
+                        label="Explain your low ratings"
+                        help="For questions you answered lowly (1, 2, or 3), what about the game contributed to your judgement?"
+                        placeholder="What contributed to your judgement?"
+                        rows="5"
+                        validation-visibility="live"
+                        validation="length:30"
+                    />
                 </div>
-                <div class="column is-2"></div>
-            </div>
-        </div>    
 
-        <div class="">
-            <div class="game-questions columns">
-                <div class="column is-3"></div>
-                <div class="column is-6">
+                <div class="field column">
                     <FormKit 
-                        type="form"
-                        id="single-game-extended-judgement-form"
-                        :actions="false"
-                    >
-                        <p class="field has-text-left">
-                            Please answer the following questions about the game above in the context of the video game environment described earlier:
-                        </p>
-
-                        <template v-for="question in JUDGEMENT_QUESTIONS" :key="question.id">
-                            <FormKit
-                                :name="question.id"
-                                :label="question.label"
-                                v-model="answers[question.id]"
-                                :type="'type' in question ? question.type : QUESTION_TYPE"
-                                :options="specifyOptions(question.options)"
-                                :validation="'validation' in question ? question.validation : VALIDATION_TYPE"
-                            />
-                        </template>
-
-                        <div class="columns">
-                            <div class="field column">
-                                <FormKit 
-                                    v-model="answers['reasoning-low']"
-                                    type="textarea"
-                                    label="Explain your low ratings"
-                                    help="For questions you answered lowly (1, 2, or 3), what about the game contributed to your judgement?"
-                                    placeholder="What contributed to your judgement?"
-                                    rows="5"
-                                    validation-visibility="live"
-                                    validation="length:30"
-                                />
-                            </div>
-
-                            <div class="field column">
-                                <FormKit 
-                                    v-model="answers['reasoning-high']"
-                                    type="textarea"
-                                    label="Explain your high ratings"
-                                    help="For questions you answered highly (5, 6, or 7), what about the game contributed to your judgement?"
-                                    placeholder="What contributed to your judgement?"
-                                    rows="5"
-                                    validation-visibility="live"
-                                    validation="length:30"
-                                />
-                            </div>
-                        </div>
-                    </FormKit>
-
-                    <!-- <form>
-                        
-
-                        <LikertRadioInput ref="funRef" name="rating-fun" :n="7" question="How fun do you think this game would be to play?" 
-                            :labels="{1: 'Not fun at all', 4: 'Medium', 7: 'Very fun'}"
-                        />
-
-                        <LikertRadioInput ref="capableRef" name="rating-capable" :n="7" question="Do you think playing this game help you become more capable in this video game environment?" 
-                            :labels="{1: 'Not at all', 4: 'Somewhat', 7: 'Very much so'}"
-                        />
-
-                        <LikertRadioInput ref="achievableRef" name="rating-achievable" :n="7" question="How achievable are the goals described by this game?" 
-                            :labels="{1: 'Not at all', 4: 'Somewhat', 7: 'Very much so'}"
-                        />
-
-                        <LikertRadioInput ref="difficultRef" name="rating-difficult" :n="7" question="How difficult do you think this game would be to play?" 
-                            :labels="{1: 'Very easy', 4: 'Medium', 7: 'Very difficult'}"
-                        />
-
-                        <LikertRadioInput ref="creativeRef" name="rating-creative" :n="7" question="How creative is this game?" 
-                            :labels="{1: 'Not creative at all', 4: 'Somewhat creative', 7: 'Very creative'}"
-                        />
-
-                        <LikertRadioInput ref="humanLikeRef" name="rating-human-like" :n="7" question="How human-like do you think this game is?" 
-                            :labels="{1: 'Not at all', 4: 'Somewhat human-like', 7: 'Very human-like'}"
-                        />
-
-                        <div class="columns">
-                            <div class="field column">
-                                <label for="reasoning-low" class="label has-text-left">For questions you answered lowly (1, 2, or 3), what about the game contributed to your judgement?</label>
-                                <div class="control">
-                                    <textarea id="reasoning-low" class="textarea" placeholder="What contributed to your judgement?" v-model="lowJudgementReasoning"></textarea>
-                                </div>
-                            </div>
-
-                            <div class="field column">
-                                <label for="reasoning-high" class="label has-text-left">For questions you answered highly (5, 6, or 7), what about the game contributed to your judgement?</label>
-                                <div class="control">
-                                    <textarea id="reasoning-high" class="textarea" placeholder="What contributed to your judgement?" v-model="highJudgementReasoning"></textarea>
-                                </div>
-                            </div>
-                        </div>
-
-                    </form> -->
+                        v-model="answers['reasoning-high']"
+                        type="textarea"
+                        label="Explain your high ratings"
+                        help="For questions you answered highly (5, 6, or 7), what about the game contributed to your judgement?"
+                        placeholder="What contributed to your judgement?"
+                        rows="5"
+                        validation-visibility="live"
+                        validation="length:30"
+                    />
                 </div>
-                <div class="column is-3"></div>
             </div>
+        </FormKit>
 
-        </div>
     </div>
 </template>
 
diff --git a/src/components/pages/InstructionsPage.vue b/src/components/pages/InstructionsPage.vue
index 2e49582..3340c77 100644
--- a/src/components/pages/InstructionsPage.vue
+++ b/src/components/pages/InstructionsPage.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import useTimelineStepper from '@/composables/timelinestepper'
 import useSmileStore from '@/stores/smiledata'
+import InstructionsContent from '@/components/atoms/InstructionsContent.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -13,67 +14,6 @@ const { next, prev } = useTimelineStepper()
 if (route.meta.progress) smilestore.global.progress = route.meta.progress
 
 
-const SINGLE_GAME_INSTRUCTIONS = [
-    "You will be shown descriptions of various games, one game at a time.",
-    "These games were created to be played in a video game environment in the images below.",
-    "In this video game, the player can move and look around the room, pick up objects, put them down, and throw them.",
-    "This video game environment is a room with a bed, a desk, several types of toys (such as balls, blocks, and stuffed animals), and other objects (such as a lamp, a clock, and a book).",
-    "Participants in a previous study played in this video game environment.",
-    "They were then asked to create a game to be played in the room to pass some time, for a single player, with no specific goal, but requiring keeping score.",
-    "You will be provided textual descriptions of these games, created by a computer translator program.",
-    // "Some of these games were created by human participants in a previous study; other games were created by a computer program.",
-    // "Regardless of whether the game was created by a human or a program, all of the textual descriptions you will see were created by a separate computer program.",
-    "This might cause the descriptions to seem artificial; please try to judge the games based on the contents of the game described, not the quality of the description.",
-    "You can also assume that all objects mentioned in a game description exist in the room.",
-    "You will be asked to answer a few multiple choice questions with judgements of each game description, such as how creative the game is, or how fun it might be to play.",
-    "You will also be asked to provide short (1-2 sentence) explanations of particularly low and high multiple choice answers for each game.",
-    // "Your task is to judge whether each game was created by a human or a computer program.",
-    // "You will be asked to make these judgments for each game description.",
-    // "You will use a slider to indicate your judgment, between 0 and 100.",
-    // "0 means you are certain the game was created by a computer program, and 100 means you are certain the game was created by a human.",
-    // "With each judgment, you will be able to provide a short explanation for your judgment.",
-    // "You will also be asked to highlight the parts of the game description that you think are most important for your judgment.",
-];
-
-const PAIRED_GAME_INSTRUCTIONS = [
-    "You will be shown descriptions of various games, two games at a time.",
-    "These games were created to be played in a video game environment in the images below.",
-    "In this video game, the player can move and look around the room, pick up objects, put them down, and throw them.",
-    "This video game environment is a room with a bed, a desk, several types of toys (such as balls, blocks, and stuffed animals), and other objects (such as a lamp, a clock, and a book).",
-    "Participants in a previous study played in this video game environment.",
-    "They were then asked to create a game to be played in the room to pass some time, for a single player, with no specific goal, but requiring keeping score.",
-    "You will be provided textual descriptions of these games, created by a computer translator program.",
-
-    "This might cause the descriptions to seem artificial; please try to judge the games based on the contents of the games described, not the quality of the descriptions.",
-    "You can also assume that all objects mentioned in a game description exist in the room.",
-    "You will be asked to answer a few multiple choice questions with judgements of each game description, such as which game seems more creative, or which might be more fun to play.",
-    "You will also be asked to provide short (1-2 sentence) explanations of particularly low and high multiple choice answers for each pair of games.",
-    // "Regardless of whether the game was created by a human or a program, all of the textual descriptions you will see were created by a separate computer program.",
-    // "This might cause the descriptions to seem artificial; please try to judge the games based on the contents of the game described, not the quality of the description.",
-    // "Your task is to judge which of the two games is more likely to have been created by a human (as opposed to a computer program).",
-    // "You will be asked to make these judgments for each game description.",
-    // "You will use a slider to indicate your judgment, between 0 and 100.",
-    // "0 means you are certain the game presented on the left-hand side was created by a human, and 100 means you are certain the game presented on the right-hand side was created by a human.",
-    // "With each judgment, you will be able to provide a short explanation for your judgment.", 
-    // "You will also be asked to highlight the parts of either of the game descriptions that you think are most important for your judgment.",
-];
-
-
-// computed property based on condition in data
-const instText = SINGLE_GAME_INSTRUCTIONS;
-// const instText = computed(() => {
-//     const {task} = smilestore.getConditions;
-//     if (task === 'single') {
-//         return SINGLE_GAME_INSTRUCTIONS;
-
-//     } if (task === 'paired') {
-//         return PAIRED_GAME_INSTRUCTIONS;
-//     }
-
-//     console.error(`Found unexpected task: ${task}, defaulting to 'single'`);
-//     return SINGLE_GAME_INSTRUCTIONS;
-// })
-
 function finish(goto) { 
     // smilestore.saveData()
     if(goto) router.push(goto)
@@ -84,57 +24,13 @@ function finish(goto) {
     <div class="page">
         <div class="columns">
             <div class="column is-2"></div>
-            <div class="column has-text-left instructions">
-                <h1 class="title is-3">Instructions</h1>
-                <div class="is-size-5">
-                    Please read the following instructions for the task you will be asked to perform:
-                </div>
-                <hr>
-                <div class="is-size-6">
-                    <ul>
-                        <template v-for="(line, index) in instText" :key="index">
-                            <li>{{ line }}</li>
-                        </template>
-                    </ul>
-                </div>
-                <hr>
-                <div class="columns">
-                    <div class="column">
-                        <img src="@/assets/room/many_objects_left.jpeg"/>
-                        <img src="@/assets/room/many_objects_middle.jpeg"/>
-                    </div>
-
-                    <div class="column">
-                        <img src="@/assets/room/many_objects_right.jpeg"/>
-                        <img src="@/assets/room/many_objects_bed.jpeg"/>
-                    </div>
-                </div>
-                <hr>
-                <button class="button is-success is-light" id='finish' @click="finish(next())">next &nbsp;<FAIcon icon="fa-solid fa-arrow-right" /></button>
+            <div>
+                <InstructionsContent />
+            <hr>
+            <button class="button is-success is-light" id='finish' @click="finish(next())">next &nbsp;<FAIcon icon="fa-solid fa-arrow-right" /></button>
             </div>
             <div class="column is-2"></div>
         </div>
     </div>
 </template>
 
-<style scoped>
-.instructions {
-    padding: 10px;
-    padding-top: 30px;
-    text-align: left;
-    font-size: 0.95em;
-}
-
-.instructions hr {
-    background-color: rgb(210, 210, 210);
-    margin-top: 7px;
-    margin-bottom: 10px;
-    height: 1px;
-}
-.instructions ul {
-    padding-left: 30px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    list-style-type: square;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/pages/Task1Page.vue b/src/components/pages/Task1Page.vue
index 741688a..afee50a 100644
--- a/src/components/pages/Task1Page.vue
+++ b/src/components/pages/Task1Page.vue
@@ -6,7 +6,8 @@ import * as random from '@/randomization';
 
 import { reactive, onMounted, ref, watchEffect, watch } from 'vue';
 import SingleGameExtendedJudgment from '@/components/molecules/SingleGameExtendedJudgment.vue';
-
+import InstructionsContent from '@/components/atoms/InstructionsContent.vue';
+import GameTextDisplay from '@/components/atoms/GameTextDisplay.vue';
 
 const router = useRouter()
 const route = useRoute()
@@ -44,6 +45,7 @@ function finish(goto) {
 
     if (gameIndex.value < participantGames.length - 1) {
         gameIndex.value += 1;
+        judgementRef.value.resetForm();
     } else {
         smilestore.saveData();
         if (goto) router.push(goto);
@@ -58,6 +60,11 @@ watchEffect(() => {
     }
 });
 
+const modalVisible = ref(false);
+function flipModalVisibility() {
+    modalVisible.value = !modalVisible.value;
+}
+
 </script>
 
 <template>
@@ -65,9 +72,43 @@ watchEffect(() => {
         <!-- TODO: change title to something more helpful (e.g. game X/N?) -->
         <h1 class="title is-3">Task 1</h1>
         
-        <SingleGameExtendedJudgment :game="participantGames[gameIndex].text" ref="judgementRef"></SingleGameExtendedJudgment>
-
-        <button class="button is-success is-light" id='finish' :disabled="isDisabled" @click="finish(next())">next &nbsp;<FAIcon icon="fa-solid fa-arrow-right" /></button>
+        <div class="modal" :class="{'is-active': modalVisible}" id="modal-holder" @click="flipModalVisibility()">
+            <div class="modal-background"></div>
+            <div class="modal-content has-background-white-bis" >
+                <InstructionsContent />
+            </div>
+        </div>
+
+        <div class="my-2">
+            <div class="one-game my-4">
+                <div class="columns">
+                    <div class="column is-2"></div>
+                    <div class="column is-8">
+                        <div class="has-text-left pb-4">
+                            Please read the following game description, and answer the questions below:
+                        </div>
+                        <GameTextDisplay :game="participantGames[gameIndex].text" ref="gameTextDisplayRef"></GameTextDisplay>
+                    </div>
+                    <div class="column is-2"></div>
+                </div>
+            </div>    
+
+            <div class="">
+                <div class="game-questions columns">
+                    <div class="column is-3"></div>
+                    <div class="column is-6">
+                        <SingleGameExtendedJudgment ref="judgementRef"></SingleGameExtendedJudgment>            
+
+                        <div class="is-flex is-justify-content-space-between">
+                            <button class="button is-light is-info" id='instructions-modal-button' @click="flipModalVisibility()">Review Instructions and Room Images</button>
+                            <button class="button is-success is-light" id='finish' :disabled="isDisabled" @click="finish(next())">next &nbsp;<FAIcon icon="fa-solid fa-arrow-right" /></button>
+                        </div>
+                    </div>
+                    <div class="column is-3"></div>
+                </div>
+
+            </div>
+        </div>
     </div>
 </template>