diff --git a/src/components/CompareProject.vue b/src/components/CompareProject.vue
index 6aa64a2..59aa847 100644
--- a/src/components/CompareProject.vue
+++ b/src/components/CompareProject.vue
@@ -1,7 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import createInformationPages from '@/utils/createInformationPages'
 import OptionButtons from '@/components/OptionButtons.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import TileMap from '@/components/TileMap.vue'
 import ImageTile from '@/components/ImageTile.vue'
@@ -13,6 +15,7 @@ export default defineComponent({
     taskProgress: TaskProgress,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
     imageTile: ImageTile,
     tileMap: TileMap,
   },
@@ -72,10 +75,15 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
       allAnswered: false,
+      arrowKeys: true,
       overlay: true,
       results: {},
       startTime: null,
@@ -111,6 +119,11 @@ export default defineComponent({
         this.taskId = this.tasks[this.taskIndex].taskId
       }
     },
+    createInformationPages,
+    // currently no fallback information pages defined in mobile map, same here
+    createFallbackInformationPages() {
+      return undefined
+    },
     forward() {
       if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.taskIndex++
@@ -135,13 +148,20 @@ export default defineComponent({
 <template>
   <project-header :instructionMessage="instructionMessage" :title="project.projectTopic">
     <tile-map :page="[tasks[taskIndex]]" :zoomLevel="project.zoomLevel" />
-    <compare-project-instructions
-      :attribution="attribution"
+    <project-info
       :first="first"
-      :instructionMessage="instructionMessage"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
-      :options="options"
-    />
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <compare-project-instructions
+          :attribution="attribution"
+          :instructionMessage="instructionMessage"
+          :options="options"
+        />
+      </template>
+    </project-info>
   </project-header>
   <v-container class="pa-0" v-touch="{ left: () => forward(), right: () => back() }">
     <v-row>
@@ -215,7 +235,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -231,7 +251,7 @@ export default defineComponent({
       color="secondary"
       :disabled="!isAnswered() || taskIndex + 1 === tasks.length"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-spacer />
diff --git a/src/components/CompareProjectInstructions.vue b/src/components/CompareProjectInstructions.vue
index fcf9030..de622d5 100644
--- a/src/components/CompareProjectInstructions.vue
+++ b/src/components/CompareProjectInstructions.vue
@@ -11,118 +11,69 @@ export default defineComponent({
       type: String,
       require: false,
     },
-    first: {
-      type: Boolean,
-      default: false,
-    },
-    manualUrl: {
-      type: String,
-      require: false,
-    },
     options: {
       type: Array,
       required: true,
     },
   },
-  data: () => ({
-    results: {},
-    dialog: false,
-  }),
-  created() {
-    this.dialog = this.first
-  },
 })
 </script>
 
 <template>
-  <v-btn
-    :title="$t('findProjectInstructions.howToContribute')"
-    icon="mdi-information"
-    color="primary"
-    @click="dialog = true"
-  />
-  <v-dialog v-model="dialog" max-width="800" eager scrollable>
-    <v-card>
-      <v-card-title class="text-h5">{{
-        $t('findProjectInstructions.howToContribute')
-      }}</v-card-title>
-      <v-card-text>
-        <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
-        <div class="text-p">
-          {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
-        </div>
+  <v-card-text>
+    <div class="text-h6">{{ $t('projectInstructions.classifyTitle') }}</div>
+    <div class="text-p">
+      {{ instructionMessage }}. {{ $t('projectInstructions.classifyInstruction') }}.
+    </div>
 
-        <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
-          <v-col cols="auto" class="mr-4">
-            <v-btn
-              class="mx-2 text-caption"
-              width="6rem"
-              :text="'(' + option.shortkey + ') ' + option.title"
-              :color="option.iconColor"
-              :prepend-icon="option.mdiIcon"
-              variant="plain"
-              stacked
-            />
-          </v-col>
-          <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
-        </v-row>
+    <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
+      <v-col cols="auto" class="mr-4">
+        <v-btn
+          class="mx-2 text-caption"
+          width="6rem"
+          :text="'(' + option.shortkey + ') ' + option.title"
+          :color="option.iconColor"
+          :prepend-icon="option.mdiIcon"
+          variant="plain"
+          stacked
+        />
+      </v-col>
+      <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
+    </v-row>
 
-        <div class="text-h6 mt-10">{{ $t('compareProjectInstructions.whereIamTitle') }}</div>
-        <div class="text-p mt-2">
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
-            </v-col>
-            <v-col>{{ $t('compareProjectInstructions.whereIamInstruction') }}</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.whereIamTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
+        </v-col>
+        <v-col>{{ $t('projectInstructions.whereIamInstruction') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.moveColumn') }}</v-col>
-          </v-row>
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-double-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-double-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.movePage') }}</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-content-save" color="primary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
-          </v-row>
-        </div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
-        <div class="text-p">{{ attribution }}</div>
-      </v-card-text>
-      <v-card-actions class="justify-end">
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
-          color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.imageCredits') }}</div>
+    <div class="text-p">{{ attribution }}</div>
+  </v-card-text>
 </template>
 
 <style scoped></style>
diff --git a/src/components/DigitizeProject.vue b/src/components/DigitizeProject.vue
index f1b790e..38a4fee 100644
--- a/src/components/DigitizeProject.vue
+++ b/src/components/DigitizeProject.vue
@@ -1,10 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import createInformationPages from '@/utils/createInformationPages'
 import hex2rgb from '@/utils/hex2rgb'
 import makeXyzUrl from '@/utils/makeXyzUrl'
 import { theme } from '@/plugins/vuetify'
 import DigitizeProjectInstructions from '@/components/DigitizeProjectInstructions.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import { GeoJSON } from 'ol/format'
 import { createBox } from 'ol/interaction/Draw'
@@ -15,6 +17,7 @@ export default defineComponent({
     digitizeProjectInstructions: DigitizeProjectInstructions,
     taskProgress: TaskProgress,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
   },
   props: {
     group: {
@@ -33,9 +36,14 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
+      arrowKeys: true,
       endReached: false,
       center: [0, 0],
       drawing: false,
@@ -86,6 +94,11 @@ export default defineComponent({
         this.updateTaskFeature()
       }
     },
+    createInformationPages,
+    // fallback information pages for digitize projects tbd
+    createFallbackInformationPages() {
+      return undefined
+    },
     drawCondition() {
       return this.withinTaskGeom || this.drawing
     },
@@ -234,12 +247,19 @@ export default defineComponent({
       @click="fitView()"
       color="primary"
     />
-    <digitize-project-instructions
+    <project-info
       :first="first"
-      :drawType="drawType"
-      :instructionMessage="instructionMessage"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
-    />
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <digitize-project-instructions
+          :drawType="drawType"
+          :instructionMessage="instructionMessage"
+        />
+      </template>
+    </project-info>
   </project-header>
   <v-container class="ma-0 pa-0">
     <ol-map
@@ -375,7 +395,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -391,7 +411,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex + 1 === tasks.length"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-spacer />
diff --git a/src/components/DigitizeProjectInstructions.vue b/src/components/DigitizeProjectInstructions.vue
index 796158a..902c675 100644
--- a/src/components/DigitizeProjectInstructions.vue
+++ b/src/components/DigitizeProjectInstructions.vue
@@ -7,126 +7,85 @@ export default defineComponent({
       type: String,
       required: false,
     },
-    first: {
-      type: Boolean,
-      default: false,
-    },
     instructionMessage: {
       type: String,
       required: true,
     },
-    manualUrl: {
-      type: String,
-      required: false,
-    },
-  },
-  data: () => ({
-    dialog: false,
-  }),
-  created() {
-    this.dialog = this.first
   },
 })
 </script>
 
 <template>
-  <v-btn
-    :title="$t('findProjectInstructions.howToContribute')"
-    icon="mdi-information"
-    color="primary"
-    @click="dialog = true"
-  />
-  <v-dialog v-model="dialog" max-width="800" eager scrollable>
-    <v-card>
-      <v-card-title class="text-h5">{{
-        $t('findProjectInstructions.howToContribute')
-      }}</v-card-title>
-      <v-card-text>
-        <div class="text-p">{{ instructionMessage }}.</div>
-        <div class="text-h6 mt-10">{{ $t('digitizeProjectInstructions.switchMode') }}</div>
-        <div class="text-p mt-2">
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-draw" color="primary" variant="tonal" rounded="0" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.drawNewFeature') }}</v-col>
-          </v-row>
-          <v-row align="center" v-if="drawType != 'Box'" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-vector-polyline-edit" color="primary" variant="tonal" rounded="0" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.modifyFeature') }}</v-col>
-          </v-row>
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-delete" color="warning" variant="tonal" rounded="0" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.deleteFeature') }}</v-col>
-          </v-row>
-        </div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
-          </v-row>
-          <div class="text-h6 mt-10">{{ $t('findProjectInstructions.toggleOpacityTitle') }}</div>
-          <div class="text-p mt-2">
-            <v-row align="center" dense>
-              <v-col cols="auto" class="mr-4">
-                <v-btn color="primary" icon="mdi-eye" size="small" variant="text"> </v-btn>
-              </v-col>
-              <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
-            </v-row>
-          </div>
+  <v-card-text>
+    <div class="text-p">{{ instructionMessage }}.</div>
+    <div class="text-h6 mt-10">{{ $t('digitizeProjectInstructions.switchMode') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-draw" color="primary" variant="tonal" rounded="0" />
+        </v-col>
+        <v-col>{{ $t('digitizeProjectInstructions.drawNewFeature') }}</v-col>
+      </v-row>
+      <v-row align="center" v-if="drawType != 'Box'" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-vector-polyline-edit" color="primary" variant="tonal" rounded="0" />
+        </v-col>
+        <v-col>{{ $t('digitizeProjectInstructions.modifyFeature') }}</v-col>
+      </v-row>
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-delete" color="warning" variant="tonal" rounded="0" />
+        </v-col>
+        <v-col>{{ $t('digitizeProjectInstructions.deleteFeature') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
+      </v-row>
+      <div class="text-h6 mt-10">{{ $t('projectInstructions.toggleOpacityTitle') }}</div>
+      <div class="text-p mt-2">
+        <v-row align="center" dense>
+          <v-col cols="auto" class="mr-4">
+            <v-btn color="primary" icon="mdi-eye" size="small" variant="text"> </v-btn>
+          </v-col>
+          <v-col>{{ $t('projectInstructions.toggleOpacityInstruction') }}.</v-col>
+        </v-row>
+      </div>
 
-          <div class="text-h6 mt-10">{{ $t('validateProjectInstructions.resetTitle') }}</div>
-          <div class="text-p mt-2">
-            <v-row align="center" dense>
-              <v-col cols="auto" class="mr-4">
-                <v-btn
-                  :title="$t('tileMap.resetView')"
-                  color="primary"
-                  icon="mdi-fit-to-screen-outline"
-                  size="small"
-                  variant="text"
-                >
-                </v-btn>
-              </v-col>
-              <v-col>{{ $t('validateProjectInstructions.resetInstruction') }}</v-col>
-            </v-row>
-          </div>
+      <div class="text-h6 mt-10">{{ $t('projectInstructions.resetTitle') }}</div>
+      <div class="text-p mt-2">
+        <v-row align="center" dense>
+          <v-col cols="auto" class="mr-4">
+            <v-btn
+              :title="$t('tileMap.resetView')"
+              color="primary"
+              icon="mdi-fit-to-screen-outline"
+              size="small"
+              variant="text"
+            >
+            </v-btn>
+          </v-col>
+          <v-col>{{ $t('projectInstructions.resetInstruction') }}</v-col>
+        </v-row>
+      </div>
 
-          <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
-          <div class="text-p mt-2">
-            <v-row class="align-center" dense>
-              <v-col cols="auto" class="mr-4">
-                <v-btn icon="mdi-content-save" color="primary" variant="text" />
-              </v-col>
-              <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
-            </v-row>
-          </div>
-        </div>
-      </v-card-text>
-      <v-card-actions class="justify-end">
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
-          color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+      <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
+      <div class="text-p mt-2">
+        <v-row class="align-center" dense>
+          <v-col cols="auto" class="mr-4">
+            <v-btn icon="mdi-content-save" color="primary" variant="text" />
+          </v-col>
+          <v-col>{{ $t('projectInstructions.seenAll') }}</v-col>
+        </v-row>
+      </div>
+    </div>
+  </v-card-text>
 </template>
 
 <style scoped></style>
diff --git a/src/components/FindProject.vue b/src/components/FindProject.vue
index 8bcd938..53140f0 100644
--- a/src/components/FindProject.vue
+++ b/src/components/FindProject.vue
@@ -1,10 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import buildTasks from '@/utils/buildTasks'
+import createInformationPages from '@/utils/createInformationPages'
 import FindProjectInstructions from '@/components/FindProjectInstructions.vue'
 import ImageTile from '@/components/ImageTile.vue'
 import MagnifyImageTile from '@/components/MagnifyImageTile.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import TileMap from '@/components/TileMap.vue'
 
@@ -14,6 +16,7 @@ export default defineComponent({
     imageTile: ImageTile,
     magnifyImageTile: MagnifyImageTile,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
     tileMap: TileMap,
     taskProgress: TaskProgress,
   },
@@ -22,6 +25,7 @@ export default defineComponent({
       type: Object,
       require: true,
     },
+    // TODO: On implementation of interactive tutorials, change this so that instructions dialog is opened with tutorial, but not with project
     first: {
       type: Boolean,
       default: false,
@@ -45,9 +49,14 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
+      arrowKeys: true,
       columnIndex: 0,
       containerWidth: 1,
       endReached: false,
@@ -169,6 +178,47 @@ export default defineComponent({
       const clamp = Math.min(Math.max(value, min), max)
       return clamp
     },
+    createInformationPages,
+    createFallbackInformationPages(tutorial) {
+      if (tutorial.exampleImage1 && tutorial.exampleImage2 && tutorial.lookFor) {
+        return [
+          {
+            blocks: [
+              {
+                blockNumber: 1,
+                blockType: 'text',
+                textDescription: `You are looking for ${tutorial.lookFor}.`,
+              },
+              {
+                blockNumber: 2,
+                blockType: 'text',
+                textDescription: 'From the ground, it looks like this:',
+              },
+              {
+                blockNumber: 3,
+                blockType: 'image',
+                image: tutorial.exampleImage1,
+              },
+              {
+                blockNumber: 4,
+                blockType: 'text',
+                textDescription:
+                  'But the images you will see will show it from above, and it looks like this:',
+              },
+              {
+                blockNumber: 5,
+                blockType: 'image',
+                image: tutorial.exampleImage2,
+              },
+            ],
+            pageNumber: 1,
+            title: 'What to look for',
+          },
+        ]
+      } else {
+        return undefined
+      }
+    },
     getCheckboxIcon(taskId) {
       const selected = this.isTaskSelected(taskId)
       const icon = selected ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'
@@ -309,14 +359,21 @@ export default defineComponent({
       color="primary"
     />
     <tile-map :page="page" :zoomLevel="project.zoomLevel" :key="columnsPerPage" />
-    <find-project-instructions
-      :attribution="attribution"
-      :exampleTileUrls="[page.flat()[0]?.url, page.flat()[0]?.urlB]"
+    <project-info
       :first="first"
-      :instructionMessage="instructionMessage"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
-      :options="options"
-    />
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <find-project-instructions
+          :attribution="attribution"
+          :exampleTileUrls="[page.flat()[0]?.url, page.flat()[0]?.urlB]"
+          :instructionMessage="instructionMessage"
+          :options="options"
+        />
+      </template>
+    </project-info>
   </project-header>
 
   <v-container
@@ -394,7 +451,7 @@ export default defineComponent({
       color="secondary"
       :disabled="columnIndex <= 0"
       @click="fastBack"
-      v-shortkey.once="['arrowdown']"
+      v-shortkey.once="[arrowKeys ? 'arrowdown' : '']"
       @shortkey="fastBack"
     />
     <v-btn
@@ -403,7 +460,7 @@ export default defineComponent({
       color="secondary"
       :disabled="columnIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -419,7 +476,7 @@ export default defineComponent({
       color="secondary"
       :disabled="isLastPage"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-btn
@@ -428,7 +485,7 @@ export default defineComponent({
       color="secondary"
       :disabled="isLastPage"
       @click="fastForward"
-      v-shortkey.once="['arrowup']"
+      v-shortkey.once="[arrowKeys ? 'arrowup' : '']"
       @shortkey="fastForward"
     />
     <v-spacer />
diff --git a/src/components/FindProjectInstructions.vue b/src/components/FindProjectInstructions.vue
index 4f3413c..1132682 100644
--- a/src/components/FindProjectInstructions.vue
+++ b/src/components/FindProjectInstructions.vue
@@ -23,184 +23,144 @@ export default defineComponent({
       type: Array,
       require: true,
     },
-    manualUrl: {
-      type: String,
-      require: false,
-    },
-    first: {
-      type: Boolean,
-      default: false,
-    },
   },
   data: () => ({
     allSelected: false,
-    dialog: false,
     eyeOff: false,
     overlay: true,
     selected: false,
   }),
-  methods: {
-    closeDialog() {
-      this.dialog = false
-    },
-  },
-  created() {
-    this.dialog = this.first
-  },
 })
 </script>
 
 <template>
-  <v-btn
-    :title="$t('findProjectInstructions.howToContribute')"
-    icon="mdi-information"
-    color="primary"
-    @click="dialog = true"
-  />
-  <v-dialog v-model="dialog" max-width="800" scrollable>
-    <v-card v-click-outside="closeDialog">
-      <v-card-title class="text-h5">{{
-        $t('findProjectInstructions.howToContribute')
-      }}</v-card-title>
-      <v-card-text>
-        <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
-        <div class="text-p">
-          {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
-        </div>
-        <v-row class="mt-2" dense>
-          <v-col sm="auto" lg="auto" v-for="(option, index) in options" :key="index">
-            <v-card color="white" height="7em" width="7em" variant="outlined" rounded="0">
-              <v-overlay
-                v-model="overlay"
-                @update:modelValue="overlay = true"
-                :opacity="index == 0 ? 0 : 0.5"
-                :scrim="option.color"
-                class="justify-center align-center"
-                contained
-              >
-                <h4>{{ option.label }}</h4>
-              </v-overlay>
-              <image-tile
-                :url="exampleTileUrls[0]"
-                :urlB="exampleTileUrls[1]"
-                :opacityB="eyeOff ? 0.3 : 1"
-                :spinner="false"
-              />
-            </v-card>
-          </v-col>
-        </v-row>
-        <div class="text-h6 mt-5">{{ $t('findProjectInstructions.selectionTitle') }}</div>
-        <v-row class="align-center" dense>
-          <v-col cols="auto" class="mr-4">
-            <v-btn
-              color="neutral"
-              style="opacity: 0.6"
-              @click.stop="selected = !selected"
-              :icon="selected ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'"
-              size="small"
-              variant="text"
-            />
-          </v-col>
-          <v-col>{{ $t('findProjectInstructions.selectTile') }}.</v-col>
-        </v-row>
+  <v-card-text>
+    <div class="text-h6">{{ $t('projectInstructions.classifyTitle') }}</div>
+    <div class="text-p">
+      {{ instructionMessage }}. {{ $t('projectInstructions.classifyInstruction') }}.
+    </div>
+    <v-row class="mt-2" dense>
+      <v-col sm="auto" lg="auto" v-for="(option, index) in options" :key="index">
+        <v-card color="white" height="7em" width="7em" variant="outlined" rounded="0">
+          <v-overlay
+            v-model="overlay"
+            @update:modelValue="overlay = true"
+            :opacity="index == 0 ? 0 : 0.5"
+            :scrim="option.color"
+            class="justify-center align-center"
+            contained
+          >
+            <h4>{{ option.label }}</h4>
+          </v-overlay>
+          <image-tile
+            :url="exampleTileUrls[0]"
+            :urlB="exampleTileUrls[1]"
+            :opacityB="eyeOff ? 0.3 : 1"
+            :spinner="false"
+          />
+        </v-card>
+      </v-col>
+    </v-row>
+    <div class="text-h6 mt-5">{{ $t('findProjectInstructions.selectionTitle') }}</div>
+    <v-row class="align-center" dense>
+      <v-col cols="auto" class="mr-4">
+        <v-btn
+          color="neutral"
+          style="opacity: 0.6"
+          @click.stop="selected = !selected"
+          :icon="selected ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'"
+          size="small"
+          variant="text"
+        />
+      </v-col>
+      <v-col>{{ $t('findProjectInstructions.selectTile') }}.</v-col>
+    </v-row>
+    <v-row class="align-center" dense>
+      <v-col cols="auto" class="mr-4">
+        <v-btn
+          :icon="'mdi-select-'.concat(allSelected ? 'off' : 'all')"
+          @click="allSelected = !allSelected"
+          color="primary"
+          variant="text"
+        />
+      </v-col>
+      <v-col>{{ $t('findProjectInstructions.selectAll') }}.</v-col>
+    </v-row>
+    <div class="text-p mt-2">{{ $t('findProjectInstructions.selectionInstruction') }}.</div>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.haveCloserLook') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn
+            color="neutral"
+            style="opacity: 0.6"
+            icon="mdi-magnify"
+            size="small"
+            variant="text"
+          />
+        </v-col>
+        <v-col>{{ $t('findProjectInstructions.magnifyInstruction') }}.</v-col>
+      </v-row>
+    </div>
+    <span v-if="exampleTileUrls[1]">
+      <div class="text-h6 mt-10">
+        {{ $t('projectInstructions.toggleOpacityTitle') }}
+      </div>
+      <div class="text-p mt-2">
         <v-row class="align-center" dense>
           <v-col cols="auto" class="mr-4">
             <v-btn
-              :icon="'mdi-select-'.concat(allSelected ? 'off' : 'all')"
-              @click="allSelected = !allSelected"
+              :icon="'mdi-eye'.concat(eyeoff ? '-off' : '')"
+              @click="eyeoff = !eyeoff"
               color="primary"
               variant="text"
             />
           </v-col>
-          <v-col>{{ $t('findProjectInstructions.selectAll') }}.</v-col>
+          <v-col>{{ $t('projectInstructions.toggleOpacityInstruction') }}.</v-col>
         </v-row>
-        <div class="text-p mt-2">{{ $t('findProjectInstructions.selectionInstruction') }}.</div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.haveCloserLook') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn
-                color="neutral"
-                style="opacity: 0.6"
-                icon="mdi-magnify"
-                size="small"
-                variant="text"
-              />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.magnifyInstruction') }}.</v-col>
-          </v-row>
-        </div>
-        <span v-if="exampleTileUrls[1]">
-          <div class="text-h6 mt-10">{{ $t('findProjectInstructions.toggleOpacityTitle') }}</div>
-          <div class="text-p mt-2">
-            <v-row class="align-center" dense>
-              <v-col cols="auto" class="mr-4">
-                <v-btn
-                  :icon="'mdi-eye'.concat(eyeoff ? '-off' : '')"
-                  @click="eyeoff = !eyeoff"
-                  color="primary"
-                  variant="text"
-                />
-              </v-col>
-              <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
-            </v-row>
-          </div>
-        </span>
-        <div class="text-h6 mt-10">{{ $t('compareProjectInstructions.whereIamTitle') }}</div>
-        <div class="text-p mt-2">
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
-            </v-col>
-            <v-col>{{ $t('compareProjectInstructions.whereIamInstruction') }}</v-col>
-          </v-row>
-        </div>
+      </div>
+    </span>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.whereIamTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
+        </v-col>
+        <v-col>{{ $t('projectInstructions.whereIamInstruction') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.moveColumn') }}</v-col>
-          </v-row>
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-double-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-double-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.movePage') }}</v-col>
-          </v-row>
-        </div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-content-save" color="primary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
-          </v-row>
-        </div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
-        <div class="text-p">{{ attribution }}</div>
-      </v-card-text>
-      <v-card-actions class="justify-end">
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
-          color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+    <div class="text-h6 mt-10">
+      {{ $t('projectInstructions.useButtonsToNavigate') }}
+    </div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('findProjectInstructions.moveColumn') }}</v-col>
+      </v-row>
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-double-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-double-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('findProjectInstructions.movePage') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.imageCredits') }}</div>
+    <div class="text-p">{{ attribution }}</div>
+  </v-card-text>
 </template>
 
 <style scoped></style>
diff --git a/src/components/MediaProject.vue b/src/components/MediaProject.vue
index 2e25fee..ba78897 100644
--- a/src/components/MediaProject.vue
+++ b/src/components/MediaProject.vue
@@ -1,7 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import createInformationPages from '@/utils/createInformationPages'
 import OptionButtons from './OptionButtons.vue'
 import ProjectHeader from './ProjectHeader.vue'
+import ProjectInfo from './ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import MediaProjectInstructions from './MediaProjectInstructions.vue'
 
@@ -10,6 +12,7 @@ export default defineComponent({
     mediaProjectInstructions: MediaProjectInstructions,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
     taskProgress: TaskProgress,
   },
   props: {
@@ -39,9 +42,14 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
+      arrowKeys: true,
       isImageLoaded: false,
       results: {},
       startTime: null,
@@ -90,6 +98,11 @@ export default defineComponent({
         this.taskId = this.tasks[this.taskIndex].taskId
       }
     },
+    createInformationPages,
+    // fallback information pages for media projects tbd (could be similar to find projects)
+    createFallbackInformationPages() {
+      return undefined
+    },
     forward() {
       if (this.isImageLoaded && this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.imageLoaded = false
@@ -117,16 +130,20 @@ export default defineComponent({
 
 <template>
   <project-header :instructionMessage="instructionMessage" :title="project?.projectTopic">
-    <media-project-instructions
-      :attribution="attribution"
+    <project-info
       :first="first"
-      :instructionMessage="instructionMessage"
-      :question="questions"
-      :mediaType="isImageTask ? 'image' : 'video'"
-      :textColor="contrastingTextColor"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
-      :options="options"
-    />
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <media-project-instructions
+          :attribution="attribution"
+          :instructionMessage="instructionMessage"
+          :options="options"
+        />
+      </template>
+    </project-info>
   </project-header>
   <v-container
     class="ma-0 pa-0"
@@ -166,7 +183,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -182,7 +199,7 @@ export default defineComponent({
       color="secondary"
       :disabled="!isImageLoaded || !isAnswered() || taskIndex + 1 === tasks.length"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-spacer />
diff --git a/src/components/MediaProjectInstructions.vue b/src/components/MediaProjectInstructions.vue
index f47188d..5090c27 100644
--- a/src/components/MediaProjectInstructions.vue
+++ b/src/components/MediaProjectInstructions.vue
@@ -11,101 +11,59 @@ export default defineComponent({
       type: String,
       require: false,
     },
-    first: {
-      type: Boolean,
-      default: false,
-    },
-    manualUrl: {
-      type: String,
-      require: false,
-    },
     options: {
       type: Array,
       required: true,
     },
   },
-  data: () => ({
-    results: {},
-    dialog: false,
-  }),
-  created() {
-    this.dialog = this.first
-  },
 })
 </script>
 
 <template>
-  <v-btn
-    :title="$t('findProjectInstructions.howToContribute')"
-    icon="mdi-information"
-    color="primary"
-    @click="dialog = true"
-  />
-  <v-dialog v-model="dialog" max-width="800" eager scrollable>
-    <v-card>
-      <v-card-title class="text-h5">{{
-        $t('findProjectInstructions.howToContribute')
-      }}</v-card-title>
-      <v-card-text>
-        <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
-        <div class="text-p">
-          {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
-        </div>
+  <v-card-text>
+    <div class="text-h6">{{ $t('projectInstructions.classifyTitle') }}</div>
+    <div class="text-p">
+      {{ instructionMessage }} {{ $t('projectInstructions.classifyInstruction') }}.
+    </div>
 
-        <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
-          <v-col cols="auto" class="mr-4">
-            <v-btn
-              class="mx-2 text-caption"
-              width="6rem"
-              :text="'(' + option.shortkey + ') ' + option.title"
-              :color="option.iconColor"
-              :prepend-icon="option.mdiIcon"
-              variant="plain"
-              stacked
-            />
-          </v-col>
-          <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
-        </v-row>
+    <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
+      <v-col cols="auto" class="mr-4">
+        <v-btn
+          class="mx-2 text-caption"
+          width="6rem"
+          :text="'(' + option.shortkey + ') ' + option.title"
+          :color="option.iconColor"
+          :prepend-icon="option.mdiIcon"
+          variant="plain"
+          stacked
+        />
+      </v-col>
+      <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
+    </v-row>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-content-save" color="primary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
-          </v-row>
-        </div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
-        <div class="text-p">{{ attribution }}</div>
-      </v-card-text>
-      <v-card-actions class="justify-end">
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
-          color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.imageCredits') }}</div>
+    <div class="text-p">{{ attribution }}</div>
+  </v-card-text>
 </template>
 
 <style scoped></style>
diff --git a/src/components/ProjectInfo.vue b/src/components/ProjectInfo.vue
new file mode 100644
index 0000000..55b1f64
--- /dev/null
+++ b/src/components/ProjectInfo.vue
@@ -0,0 +1,138 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import VueMarkdown from 'vue-markdown-render'
+
+export default defineComponent({
+  components: {
+    VueMarkdown,
+  },
+  props: {
+    informationPages: {
+      type: Array,
+      required: false,
+    },
+    manualUrl: {
+      type: String,
+      require: false,
+    },
+    first: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    activeTab: null,
+    dialog: false,
+  }),
+  computed: {
+    tabs() {
+      const tabs = this.informationPages
+        ? Array.from({ length: this.informationPages.length }, (v, i) => i).concat(['instructions'])
+        : ['instructions']
+      return tabs
+    },
+  },
+  methods: {
+    toggleDialog() {
+      this.$emit('toggleDialog')
+      this.dialog = !this.dialog
+    },
+    back() {
+      const currentTabIndex = this.tabs.indexOf(this.activeTab)
+      if (currentTabIndex > 0) this.activeTab = this.tabs[currentTabIndex - 1]
+    },
+    forward() {
+      const currentTabIndex = this.tabs.indexOf(this.activeTab)
+      if (currentTabIndex < this.tabs.length - 1) this.activeTab = this.tabs[currentTabIndex + 1]
+    },
+  },
+  created() {
+    if (this.first) this.toggleDialog()
+  },
+})
+</script>
+
+<template>
+  <v-btn
+    :title="$t('findProjectInstructions.howToContribute')"
+    icon="mdi-information"
+    color="primary"
+    @click="toggleDialog()"
+  />
+  <v-dialog v-model="dialog" width="80vw" max-width="1024">
+    <v-card v-click-outside="toggleDialog" class="pa-3">
+      <v-tabs v-model="activeTab">
+        <v-tab
+          v-for="(page, index) in informationPages"
+          :text="page.title"
+          :value="index"
+          :key="page.pageNumber"
+        ></v-tab>
+        <v-tab :text="$t('findProjectInstructions.howToContribute')" value="instructions"></v-tab>
+      </v-tabs>
+
+      <v-window v-model="activeTab" style="height: 70vh; overflow-y: auto">
+        <v-window-item
+          v-for="(page, index) in informationPages"
+          :value="index"
+          :key="page.pageNumber"
+        >
+          <span
+            v-for="block in page.blocks?.sort((a, b) => a.blockNumber - b.blockNumber)"
+            :key="block.blockNumber"
+          >
+            <v-card-text v-if="block.blockType === 'text'" class="text-justify">
+              <vue-markdown
+                :source="block.textDescription.replaceAll('\\n', '\n')"
+                :options="{ typographer: true }"
+              />
+            </v-card-text>
+            <v-img
+              v-if="block.blockType === 'image'"
+              :src="block.image"
+              max-width="400"
+              class="mx-auto"
+            />
+          </span>
+        </v-window-item>
+        <v-window-item value="instructions">
+          <slot name="instructions"></slot>
+        </v-window-item>
+      </v-window>
+      <v-card-actions class="justify-end">
+        <v-btn
+          :title="$t('findProjectInstructions.moveLeft')"
+          icon="mdi-chevron-left"
+          color="secondary"
+          :disabled="tabs.indexOf(activeTab) <= 0"
+          @click="back"
+          v-shortkey.native="['arrowleft']"
+          @shortkey="back"
+        />
+        <v-btn
+          :title="$t('findProjectInstructions.moveRight')"
+          icon="mdi-chevron-right"
+          color="secondary"
+          :disabled="tabs.indexOf(activeTab) >= tabs.length - 1"
+          @click="forward"
+          v-shortkey.native="['arrowright']"
+          @shortkey="forward"
+        />
+        <v-spacer />
+        <v-btn
+          v-if="manualUrl"
+          color="primary"
+          :href="manualUrl"
+          target="_blank"
+          prepend-icon="mdi-help-circle"
+          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
+        >
+        <v-btn v-if="activeTab == 'instructions'" color="primary" @click="toggleDialog()">{{
+          $t('findProjectInstructions.close')
+        }}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/components/ValidateProject.vue b/src/components/ValidateProject.vue
index f5e5640..87768cc 100644
--- a/src/components/ValidateProject.vue
+++ b/src/components/ValidateProject.vue
@@ -1,10 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import createInformationPages from '@/utils/createInformationPages'
 import hex2rgb from '@/utils/hex2rgb'
 import makeXyzUrl from '@/utils/makeXyzUrl'
 import { theme } from '@/plugins/vuetify'
 import OptionButtons from '@/components/OptionButtons.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import ValidateProjectInstructions from '@/components/ValidateProjectInstructions.vue'
 import { GeoJSON } from 'ol/format'
@@ -16,6 +18,7 @@ export default defineComponent({
     taskProgress: TaskProgress,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
   },
   props: {
     group: {
@@ -73,9 +76,14 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
+      arrowKeys: true,
       center: [0, 0],
       results: {},
       startTime: null,
@@ -113,6 +121,41 @@ export default defineComponent({
         this.updateTaskFeature()
       }
     },
+    createInformationPages,
+    // fallback information pages of mobile app adapted to web app:
+    createFallbackInformationPages(tutorial) {
+      if (tutorial.lookFor) {
+        return [
+          {
+            blocks: [
+              {
+                blockNumber: 1,
+                blockType: 'text',
+                // web app displays shapes on a web map rather than on a single image
+                textDescription:
+                  "You'll see a shape on an interactive imagery map. Use the buttons to answer.",
+              },
+              {
+                blockNumber: 2,
+                blockType: 'text',
+                // instead of 'buildings', we get the feature of interest from Firebase (similar as in Find projects)
+                textDescription: 'Does the shape outline a ${tutorial.lookFor}?',
+              },
+              {
+                blockNumber: 3,
+                blockType: 'text',
+                textDescription:
+                  "Every time you select an option, you'll be shown a new shape and image.",
+              },
+            ],
+            pageNumber: 1,
+            title: 'What to look for',
+          },
+        ]
+      } else {
+        return undefined
+      }
+    },
     fitView(duration = 600, delay = 100) {
       const map = this.$refs.map.map
       const mapView = this.$refs.mapView
@@ -183,12 +226,19 @@ export default defineComponent({
       @click="fitView()"
       color="primary"
     />
-    <validate-project-instructions
+    <project-info
       :first="first"
-      :instructionMessage="instructionMessage"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
-      :options="options"
-    />
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <validate-project-instructions
+          :instructionMessage="instructionMessage"
+          :options="options"
+        />
+      </template>
+    </project-info>
   </project-header>
   <v-container class="ma-0 pa-0">
     <ol-map
@@ -258,7 +308,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -274,7 +324,7 @@ export default defineComponent({
       color="secondary"
       :disabled="!isAnswered() || taskIndex + 1 === tasks.length"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-spacer />
diff --git a/src/components/ValidateProjectInstructions.vue b/src/components/ValidateProjectInstructions.vue
index 7edbe53..ea122ed 100644
--- a/src/components/ValidateProjectInstructions.vue
+++ b/src/components/ValidateProjectInstructions.vue
@@ -7,125 +7,84 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    first: {
-      type: Boolean,
-      default: false,
-    },
-    manualUrl: {
-      type: String,
-      require: false,
-    },
     options: {
       type: Array,
       required: true,
     },
   },
-  data: () => ({
-    dialog: false,
-  }),
-  created() {
-    this.dialog = this.first
-  },
 })
 </script>
 
 <template>
-  <v-btn
-    :title="$t('findProjectInstructions.howToContribute')"
-    icon="mdi-information"
-    color="primary"
-    @click="dialog = true"
-  />
-  <v-dialog v-model="dialog" max-width="800" eager scrollable>
-    <v-card>
-      <v-card-title class="text-h5">{{
-        $t('findProjectInstructions.howToContribute')
-      }}</v-card-title>
-      <v-card-text>
-        <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
-        <div class="text-p">
-          {{ instructionMessage }} {{ $t('validateProjectInstructions.classifyInstruction') }}.
-        </div>
+  <v-card-text>
+    <div class="text-h6">{{ $t('projectInstructions.classifyTitle') }}</div>
+    <div class="text-p">
+      {{ instructionMessage }} {{ $t('projectInstructions.classifyInstruction') }}.
+    </div>
 
-        <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
-          <v-col cols="auto" class="mr-4">
-            <v-btn
-              class="mx-2 text-caption"
-              width="6rem"
-              :text="'(' + option.shortkey + ') ' + option.title"
-              :color="option.iconColor"
-              :prepend-icon="option.mdiIcon"
-              variant="plain"
-              stacked
-            />
-          </v-col>
-          <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
-        </v-row>
+    <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
+      <v-col cols="auto" class="mr-4">
+        <v-btn
+          class="mx-2 text-caption"
+          width="6rem"
+          :text="'(' + option.shortkey + ') ' + option.title"
+          :color="option.iconColor"
+          :prepend-icon="option.mdiIcon"
+          variant="plain"
+          stacked
+        />
+      </v-col>
+      <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
+    </v-row>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.toggleOpacityTitle') }}</div>
-        <div class="text-p mt-2">
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn color="primary" icon="mdi-eye" size="small" variant="text"> </v-btn>
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.toggleOpacityTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn color="primary" icon="mdi-eye" size="small" variant="text"> </v-btn>
+        </v-col>
+        <v-col>{{ $t('projectInstructions.toggleOpacityInstruction') }}.</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('validateProjectInstructions.resetTitle') }}</div>
-        <div class="text-p mt-2">
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn
-                :title="$t('tileMap.resetView')"
-                color="primary"
-                icon="mdi-fit-to-screen-outline"
-                size="small"
-                variant="text"
-              >
-              </v-btn>
-            </v-col>
-            <v-col>{{ $t('validateProjectInstructions.resetInstruction') }}</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.resetTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn
+            :title="$t('tileMap.resetView')"
+            color="primary"
+            icon="mdi-fit-to-screen-outline"
+            size="small"
+            variant="text"
+          >
+          </v-btn>
+        </v-col>
+        <v-col>{{ $t('projectInstructions.resetInstruction') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-content-save" color="primary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
-          </v-row>
-        </div>
-      </v-card-text>
-      <v-card-actions class="justify-end">
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
-          color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+  </v-card-text>
 </template>
 
 <style scoped></style>
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 9e47122..a993c8d 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -141,26 +141,35 @@
     "resetView": "Ansicht zurücksetzen",
     "close": "Schließen"
   },
+  "projectInstructions": {
+    "classifyTitle": "Klicke oder tippe, um zu klassifizieren",
+    "classifyInstruction": "Klicke oder tippe auf jede Bildkachel, bis die passende Antwort erscheint",
+    "imageCredits": "Bildnachweis",
+    "move": "Zurück und weiter bewegen",
+    "resetTitle": "Ansicht zurücksetzen",
+    "resetInstruction": "Zoom auf die aktuelle Geometrie",
+    "saveYourAnswers": "Speichere deine Antworten",
+    "seenAll": "sobald du alle Bildkacheln gesehen und klassifiziert hast",
+    "toggleOpacityTitle": "Transparenz umschalten",
+    "toggleOpacityInstruction": "Schalte die Transparenz der oberen Schicht für eine bessere Sicht auf die Bildkacheln um",
+    "useButtonsToNavigate": "Navigationstasten",
+    "whereIamTitle": "Wo bin ich?",
+    "whereIamInstruction": "Öffne eine Karte, um zu sehen wo du gerade beiträgst"
+  },
   "findProjectInstructions": {
     "howToContribute": "Wie kann ich beitragen?",
-    "classifyInstruction": "Klicke oder tippe auf jede Bildkachel, bis die passende Antwort erscheint",
-    "classifyTitle": "Klicke oder tippe, um zu klassifizieren",
     "close": "Schließen",
     "moreInfo": "Mehr Info",
+    "moveLeft": "Vorherige Seite",
+    "moveRight": "Nächste Seite",
     "selectionTitle": "Mehrere Bildkacheln auswählen",
     "selectTile": "... oder Rechtsklick/Halten, um die Bildkachel der Auswahl hinzuzufügen. Wiederholen, um sie von der Auswahl zu entfernen",
     "selectAll": "Alle Bildkacheln der aktuellen Ansicht auswählen. Wiederholen, um die Auswahl zu leeren",
     "selectionInstruction": "Jeder Klick zur Klassifizierung wird auf alle Bildkacheln in der Auswahl angewandt",
-    "useButtonsToNavigate": "Navigationstasten",
     "moveColumn": "Spaltenweise links/rechts bewegen",
     "movePage": "Seitenweise links/rechts bewegen",
-    "toggleOpacityTitle": "Transparenz umschalten",
-    "toggleOpacityInstruction": "Schalte die Transparenz der oberen Schicht für eine bessere Sicht auf die Bildkacheln um",
     "haveCloserLook": "Schau genauer hin",
-    "magnifyInstruction": "Klicke das Symbol in der oberen rechten Ecke der Bildkachel, um das Bild zu vergrößern",
-    "saveYourAnswers": "Speichere deine Antworten",
-    "seenAll": ", sobald du alle Bildkacheln gesehen und klassifiziert hast",
-    "imageCredits": "Bildnachweis"
+    "magnifyInstruction": "Klicke das Symbol in der oberen rechten Ecke der Bildkachel, um das Bild zu vergrößern"
   },
   "validateProject": {
     "doesTheShapeOutline": "Ist der Umriss ein {feature}?",
@@ -168,14 +177,13 @@
     "moveRight": "Weiter zum nächsten Umriss"
   },
   "validateProjectInstructions": {
-    "resetTitle": "Ansicht zurücksetzen",
-    "resetInstruction": "Zoom auf die aktuelle Geometrie",
     "seenAll": "sobald du alle Umrisse gesehen und klassifiziert hast.",
     "classifyInstruction": "Benutze die Buttons, um deine Antwort zu geben"
   },
   "compareProject": {
     "before": "Vorher",
-    "after": "Nachher"
+    "after": "Nachher",
+    "lookForChange": "Vergleiche {lookFor}"
   },
   "digitizeProject": {
     "moveLeft": "Zurück",
@@ -184,10 +192,6 @@
     "modify": "Bearbeiten",
     "delete": "Löschen"
   },
-  "compareProjectInstructions": {
-    "whereIamTitle": "Wollen Sie wissen, wo Sie kartieren?",
-    "whereIamInstruction": "Öffne eine Karte wo du gerade beiträgst"
-  },
   "mediaProject": {
     "moveLeft": "Zurück",
     "moveRight": "Weiter"
@@ -196,7 +200,6 @@
     "switchMode": "Editiermodus umschalten",
     "drawNewFeature": "Neue Objekte einzeichnen",
     "modifyFeature": "Objekte bearbeiten",
-    "deleteFeature": "Objekte löschen",
-    "move": "Zurück und weiter bewegen"
+    "deleteFeature": "Objekte löschen"
   }
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 2c16633..df70037 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -141,26 +141,36 @@
     "resetView": "Reset view",
     "close": "Close"
   },
+  "projectInstructions": {
+    "classifyTitle": "Click or tap to classify",
+    "classifyInstruction": "Use buttons to provide your answers",
+    "imageCredits": "Image credits",
+    "move": "Move back and forward",
+    "resetInstruction": "Zoom to the current shape",
+    "resetTitle": "Reset the view",
+    "saveYourAnswers": "Save your answers",
+    "seenAll": "as soon as you have seen and classified all images",
+    "toggleOpacityTitle": "Toggle the overlay opacity",
+    "toggleOpacityInstruction": "For a clearer view of the underlying imagery, toggle the opacity of the overlay",
+    "useButtonsToNavigate": "Use buttons to navigate",
+    "whereIamTitle": "Where am I mapping?",
+    "whereIamInstruction": "Open a map of where you are currently contributing"
+  },
   "findProjectInstructions": {
     "howToContribute": "How to Contribute?",
-    "classifyTitle": "Click or tap to classify",
     "classifyInstruction": "Click or tap each image tile, until the appropriate answer appears",
     "close": "Close",
     "moreInfo": "More Info",
+    "moveLeft": "Back to previous page",
+    "moveRight": "Go to next page",
     "selectionTitle": "Select multiple tiles",
     "selectTile": "... or right click/hold touch to add a tile to the selection. Repeat to remove the tile from the selection",
     "selectAll": "Select all tiles in view. Repeat to clear selection",
     "selectionInstruction": "Any click to classify applies to all selected tiles",
-    "useButtonsToNavigate": "Use buttons to navigate",
     "moveColumn": "Move left/right by column",
     "movePage": "Move left/right by page",
-    "toggleOpacityTitle": "Toggle the overlay opacity",
-    "toggleOpacityInstruction": "For a clearer view of the underlying imagery, toggle the opacity of the overlay",
     "haveCloserLook": "Have a closer look",
-    "magnifyInstruction": "Click this icon in the upper right corner of a tile to magnify the image",
-    "saveYourAnswers": "Save your answers",
-    "seenAll": "as soon as you have seen and classified all images",
-    "imageCredits": "Image credits"
+    "magnifyInstruction": "Click this icon in the upper right corner of a tile to magnify the image"
   },
   "validateProject": {
     "doesTheShapeOutline": "Does the shape outline a {feature}?",
@@ -168,10 +178,7 @@
     "moveRight": "Forward to next feature"
   },
   "validateProjectInstructions": {
-    "resetTitle": "Reset the view",
-    "resetInstruction": "Zoom to the current shape",
-    "seenAll": "as soon as you have seen and classified all the features.",
-    "classifyInstruction": "Use buttons to provide your answers"
+    "seenAll": "as soon as you have seen and classified all the features."
   },
   "compareProject": {
     "before": "Before",
@@ -185,10 +192,6 @@
     "modify": "Modify",
     "delete": "Delete"
   },
-  "compareProjectInstructions": {
-    "whereIamTitle": "Where am I mapping?",
-    "whereIamInstruction": "Open a map of where you are currently contributing"
-  },
   "mediaProject": {
     "moveLeft": "Back",
     "moveRight": "Forward"
@@ -197,7 +200,6 @@
     "switchMode": "Switch editing mode",
     "drawNewFeature": "Draw new features",
     "modifyFeature": "Modify features",
-    "deleteFeature": "Delete features",
-    "move": "Move back and forward"
+    "deleteFeature": "Delete features"
   }
 }
diff --git a/src/utils/createInformationPages.ts b/src/utils/createInformationPages.ts
new file mode 100644
index 0000000..e858400
--- /dev/null
+++ b/src/utils/createInformationPages.ts
@@ -0,0 +1,14 @@
+const createInformationPages = (tutorial, project, fallbackFn) => {
+  let informationPages = []
+  if (tutorial) {
+    // We want to show the information pages for a project
+    informationPages = tutorial.informationPages || fallbackFn(tutorial)
+  } else {
+    // We want to show the information pages for a tutorial.
+    informationPages = project.informationPages || fallbackFn(project)
+  }
+  informationPages?.sort((a, b) => a.pageNumber - b.pageNumber)
+  return informationPages
+}
+
+export default createInformationPages
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 81ca8ca..1392524 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -43,6 +43,7 @@ export default defineComponent({
       project: null,
       projectContributions: [],
       tasks: null,
+      tutorial: null,
       to: null,
     }
   },
@@ -116,6 +117,9 @@ export default defineComponent({
       onValue(getProjectRef(this.projectId), (snapshot) => {
         const data = snapshot.val() || {}
         this.project = data
+        if (this.project?.tutorialId) {
+          this.bindTutorial()
+        }
       })
     },
     bindProjectContributions() {
@@ -157,6 +161,12 @@ export default defineComponent({
         this.tasks = tasks
       })
     },
+    bindTutorial() {
+      onValue(getProjectRef(this.project?.tutorialId), (snapshot) => {
+        const data = snapshot.val() || {}
+        this.tutorial = data
+      })
+    },
     completeOptions(option, index) {
       option.title ??= option.label
       option.iconColor ??= option.color || '#d1dad1'
@@ -243,6 +253,7 @@ export default defineComponent({
       :options="options"
       :project="project"
       :tasks="tasks"
+      :tutorial="tutorial"
       @created="handleTaskComponentCreated"
     />