diff --git a/package.json b/package.json
index 454db94..5593708 100644
--- a/package.json
+++ b/package.json
@@ -39,8 +39,10 @@
     "@playwright/test": "^1.38.0",
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node18": "^18.2.2",
+    "@types/base-64": "^1.0.2",
     "@types/jsdom": "^21.1.2",
     "@types/node": "^18.17.15",
+    "@types/pako": "^2.0.3",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/eslint-config-prettier": "^8.0.0",
diff --git a/src/components/CompareProject.vue b/src/components/CompareProject.vue
index 9ed5397..76a7b3b 100644
--- a/src/components/CompareProject.vue
+++ b/src/components/CompareProject.vue
@@ -1,25 +1,83 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } 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'
 import CompareProjectInstructions from '@/components/CompareProjectInstructions.vue'
+import CompareProjectTutorial, { type Tutorial } from '@/components/CompareProjectTutorial.vue'
+import CompareProjectTask, { type Task } from '@/components/CompareProjectTask.vue'
+import { type Option } from '@/components/OptionButtons.vue'
+import { isDefined } from '@/utils/common'
+
+// NOTE: is only for compare project
+interface ProjectCompareType {
+  projectType: string
+  projectTopic: string
+  name: string
+  zoomLevel: number
+  manualUrl?: string
+  tileServer: {
+    credits: string
+  }
+  tileServerB: {
+    credits: string
+  }
+  credits: string
+  lookFor: string
+}
+
+const defaultOptions: Option[] = [
+  {
+    description: "I don't see any change between the two images.",
+    iconColor: '',
+    title: 'No change',
+    mdiIcon: 'mdi-equal',
+    shortkey: 1,
+    value: 0,
+  },
+  {
+    description: 'There is change between the two images.',
+    iconColor: 'green',
+    title: 'Change',
+    mdiIcon: 'mdi-not-equal-variant',
+    shortkey: 2,
+    value: 1,
+  },
+  {
+    description: 'I am not sure.',
+    iconColor: 'orange',
+    title: 'Not sure',
+    mdiIcon: 'mdi-head-question',
+    shortkey: 3,
+    value: 2,
+  },
+  {
+    description: 'The imagery is bad or clouded.',
+    iconColor: 'red',
+    title: 'Bad imagery',
+    mdiIcon: 'mdi-weather-cloudy',
+    shortkey: 4,
+    value: 3,
+  },
+]
 
 export default defineComponent({
   components: {
     compareProjectInstructions: CompareProjectInstructions,
+    compareProjectTutorial: CompareProjectTutorial,
+    compareProjectTask: CompareProjectTask,
     taskProgress: TaskProgress,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
     projectInfo: ProjectInfo,
-    imageTile: ImageTile,
     tileMap: TileMap,
   },
   props: {
+    // FIXME: this prop is not used
     group: {
       type: Object,
       required: true,
@@ -29,58 +87,35 @@ export default defineComponent({
       default: false,
     },
     options: {
-      type: Array,
+      type: Array as PropType<Option[]>,
       default() {
-        return [
-          {
-            description: "I don't see any change between the two images.",
-            iconColor: '',
-            title: 'No change',
-            mdiIcon: 'mdi-equal',
-            shortkey: 1,
-            value: 0,
-          },
-          {
-            description: 'There is change between the two images.',
-            iconColor: 'green',
-            title: 'Change',
-            mdiIcon: 'mdi-not-equal-variant',
-            shortkey: 2,
-            value: 1,
-          },
-          {
-            description: 'I am not sure.',
-            iconColor: 'orange',
-            title: 'Not sure',
-            mdiIcon: 'mdi-head-question',
-            shortkey: 3,
-            value: 2,
-          },
-          {
-            description: 'The imagery is bad or clouded.',
-            iconColor: 'red',
-            title: 'Bad imagery',
-            mdiIcon: 'mdi-weather-cloudy',
-            shortkey: 4,
-            value: 3,
-          },
-        ]
+        return defaultOptions
       },
     },
     project: {
-      type: Object,
+      type: Object as PropType<ProjectCompareType>,
       required: true,
     },
     tasks: {
-      type: Array,
+      type: Array as PropType<Task[]>,
       required: true,
     },
     tutorial: {
-      type: Object,
-      require: false,
+      type: Object as PropType<Tutorial>,
+      required: false,
     },
   },
-  data() {
+  data(): {
+    allAnswered: boolean
+    arrowKeys: boolean
+    overlay: boolean
+    results: Record<string, number | undefined>
+    startTime: string | null
+    task: object
+    taskId: string | undefined
+    taskIndex: number
+    transparent: boolean
+  } {
     return {
       allAnswered: false,
       arrowKeys: true,
@@ -93,6 +128,8 @@ export default defineComponent({
       transparent: false,
     }
   },
+  // NOTE: These are not typesafe.
+  // We can use the inject method on setup and add explicity type
   inject: {
     logMappingStarted: 'logMappingStarted',
     saveResults: 'saveResults',
@@ -110,11 +147,13 @@ export default defineComponent({
     },
   },
   methods: {
-    addResult(value) {
-      this.results[this.taskId] = value
+    addResult(value: number | undefined) {
+      if (isDefined(this.taskId)) {
+        this.results[this.taskId] = value
+      }
     },
     back() {
-      if (!this.taskIndex <= 0) {
+      if (this.taskIndex > 0) {
         this.taskIndex--
         this.taskId = this.tasks[this.taskIndex].taskId
       }
@@ -131,11 +170,15 @@ export default defineComponent({
       }
     },
     isAnswered() {
+      if (!this.taskId) {
+        return false
+      }
       const result = this.results[this.taskId]
       const defined = result !== undefined
       return defined
     },
   },
+  emits: ['created'],
   created() {
     this.startTime = new Date().toISOString()
     this.taskId = this.tasks[this.taskIndex].taskId
@@ -149,6 +192,7 @@ export default defineComponent({
   <project-header :instructionMessage="instructionMessage" :title="project.projectTopic">
     <tile-map :page="[tasks[taskIndex]]" :zoomLevel="project.zoomLevel" />
     <project-info
+      ref="projectInfo"
       :first="first"
       :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
@@ -159,67 +203,21 @@ export default defineComponent({
           :attribution="attribution"
           :instructionMessage="instructionMessage"
           :options="options"
+          :verificationNumber="project.verificationNumber"
+        />
+      </template>
+      <template #tutorial>
+        <compare-project-tutorial
+          :tutorial="tutorial"
+          :options="options"
+          @tutorialComplete="$refs.projectInfo?.toggleDialog"
         />
       </template>
     </project-info>
   </project-header>
-  <v-container class="pa-0" v-touch="{ left: () => forward(), right: () => back() }">
-    <v-row>
-      <v-col cols="12" md="6" align="center">
-        <v-hover v-slot="{ isHovering, props }">
-          <v-card
-            :max-width="$vuetify.display.smAndDown ? '35vh' : '80vh'"
-            v-bind="props"
-            color="white"
-            variant="outlined"
-            rounded="0"
-          >
-            <v-overlay
-              v-model="overlay"
-              @update:modelValue="overlay = true"
-              opacity="0"
-              class="justify-center align-center"
-              contained
-            >
-              <h2 v-show="isHovering">{{ $t('compareProject.before') }}</h2>
-            </v-overlay>
-            <image-tile
-              :url="tasks[taskIndex].url"
-              :spinner="true"
-              :maxSize="$vuetify.display.smAndDown ? '35vh' : '65vh'"
-            />
-          </v-card>
-        </v-hover>
-      </v-col>
-      <v-col cols="12" md="6" align="center">
-        <v-hover v-slot="{ isHovering, props }">
-          <v-card
-            :max-width="$vuetify.display.smAndDown ? '35vh' : '65vh'"
-            v-bind="props"
-            color="white"
-            variant="outlined"
-            rounded="0"
-          >
-            <v-overlay
-              v-model="overlay"
-              @update:modelValue="overlay = true"
-              opacity="0"
-              class="justify-center align-center"
-              contained
-            >
-              <h2 v-show="isHovering">{{ $t('compareProject.after') }}</h2>
-            </v-overlay>
-            <image-tile
-              :url="tasks[taskIndex].urlB"
-              :spinner="true"
-              :maxSize="$vuetify.display.smAndDown ? '35vh' : '80vh'"
-            />
-          </v-card>
-        </v-hover>
-      </v-col>
-    </v-row>
+  <v-container v-touch="{ left: () => forward(), right: () => back() }">
+    <compare-project-task :task="tasks?.[taskIndex]" />
   </v-container>
-
   <option-buttons
     v-if="taskId"
     :options="options"
@@ -256,7 +254,7 @@ export default defineComponent({
     />
     <v-spacer />
     <template #extension>
-      <task-progress :progress="taskIndex + isAnswered()" :total="tasks.length" />
+      <task-progress :progress="taskIndex + (isAnswered() ? 1 : 0)" :total="tasks.length" />
     </template>
   </v-toolbar>
 </template>
diff --git a/src/components/CompareProjectInstructions.vue b/src/components/CompareProjectInstructions.vue
index de622d5..5ed8c6a 100644
--- a/src/components/CompareProjectInstructions.vue
+++ b/src/components/CompareProjectInstructions.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { type PropType, defineComponent } from 'vue'
+import { type Option } from '@/components/OptionButtons.vue'
 
 export default defineComponent({
   props: {
@@ -12,7 +13,11 @@ export default defineComponent({
       require: false,
     },
     options: {
-      type: Array,
+      type: Array as PropType<Option[]>,
+      required: true,
+    },
+    verificationNumber: {
+      type: Number,
       required: true,
     },
   },
@@ -71,6 +76,14 @@ export default defineComponent({
         <v-col>{{ $t('projectInstructions.seenAll') }}</v-col>
       </v-row>
     </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.dontWorry') }}</div>
+    <div class="text-p">
+      {{
+        $t('projectInstructions.everyTaskIsViewedBy', {
+          verificationNumber: this.verificationNumber,
+        })
+      }}.
+    </div>
     <div class="text-h6 mt-10">{{ $t('projectInstructions.imageCredits') }}</div>
     <div class="text-p">{{ attribution }}</div>
   </v-card-text>
diff --git a/src/components/CompareProjectTask.vue b/src/components/CompareProjectTask.vue
new file mode 100644
index 0000000..5340250
--- /dev/null
+++ b/src/components/CompareProjectTask.vue
@@ -0,0 +1,87 @@
+<script lang="ts">
+import { type PropType, defineComponent } from 'vue'
+import ImageTile from '@/components/ImageTile.vue'
+
+export interface Task {
+  taskId: string
+  // Are we sure that urls are optional?
+  url?: string
+  urlB?: string
+  referenceAnswer: number
+}
+
+export default defineComponent({
+  components: {
+    imageTile: ImageTile,
+  },
+  props: {
+    task: {
+      type: Object as PropType<Task>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      overlay: true,
+    }
+  },
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col cols="12" md="6" align="center">
+      <v-hover v-slot="{ isHovering, props }">
+        <v-card
+          :max-width="$vuetify.display.smAndDown ? '35vh' : '80vh'"
+          v-bind="props"
+          color="white"
+          variant="outlined"
+          rounded="0"
+        >
+          <v-overlay
+            v-model="overlay"
+            @update:modelValue="overlay = true"
+            opacity="0"
+            class="justify-center align-center"
+            contained
+          >
+            <h2 v-show="isHovering">{{ $t('compareProject.before') }}</h2>
+          </v-overlay>
+          <image-tile
+            v-if="task.url"
+            :url="task.url"
+            :spinner="true"
+            :maxSize="$vuetify.display.smAndDown ? '35vh' : '65vh'"
+          />
+        </v-card>
+      </v-hover>
+    </v-col>
+    <v-col cols="12" md="6" align="center">
+      <v-hover v-slot="{ isHovering, props }">
+        <v-card
+          :max-width="$vuetify.display.smAndDown ? '35vh' : '65vh'"
+          v-bind="props"
+          color="white"
+          variant="outlined"
+          rounded="0"
+        >
+          <v-overlay
+            v-model="overlay"
+            @update:modelValue="overlay = true"
+            opacity="0"
+            class="justify-center align-center"
+            contained
+          >
+            <h2 v-show="isHovering">{{ $t('compareProject.after') }}</h2>
+          </v-overlay>
+          <image-tile
+            :url="task.urlB"
+            :spinner="true"
+            :maxSize="$vuetify.display.smAndDown ? '35vh' : '80vh'"
+          />
+        </v-card>
+      </v-hover>
+    </v-col>
+  </v-row>
+</template>
diff --git a/src/components/CompareProjectTutorial.vue b/src/components/CompareProjectTutorial.vue
new file mode 100644
index 0000000..938a95b
--- /dev/null
+++ b/src/components/CompareProjectTutorial.vue
@@ -0,0 +1,265 @@
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import { goOnline, onValue } from 'firebase/database'
+import { db, getTasksRef, getGroupsRef } from '@/firebase'
+import matchIcon from '@/utils/matchIcon'
+import OptionButtons from '@/components/OptionButtons.vue'
+import { type Option } from '@/components/OptionButtons.vue'
+import CompareProjectTask, { type Task } from '@/components/CompareProjectTask.vue'
+import TutorialCompletionCard from './TutorialCompletionCard.vue'
+import TaskProgress from '@/components/TaskProgress.vue'
+import { decompressTasks } from '@/utils/tasks'
+import { isDefined } from '@/utils/common'
+
+interface Screen {
+  title: string
+  icon: string
+  description: string
+}
+
+export interface Tutorial {
+  projectId: string
+  name: string
+  lookFor?: string
+  screens: {
+    hint: Screen
+    instructions: Screen
+    success: Screen
+  }[]
+}
+
+export default defineComponent({
+  components: {
+    compareProjectTask: CompareProjectTask,
+    optionButtons: OptionButtons,
+    taskProgress: TaskProgress,
+    tutorialCompletionCard: TutorialCompletionCard,
+  },
+  props: {
+    tutorial: Object as PropType<Tutorial>,
+    options: {
+      type: Array as PropType<Option[]>,
+      required: true,
+    },
+  },
+  data(): {
+    tasks: Task[]
+    currentTaskIndex: number
+    results: Record<string, number>
+    userAttempts: number
+    answersRevealed: boolean
+  } {
+    return {
+      tasks: [],
+      currentTaskIndex: 0,
+      results: {},
+      userAttempts: 0,
+      answersRevealed: false,
+    }
+  },
+  computed: {
+    instructionMessage() {
+      const message = this.$t('compareProject.lookForChange', { lookFor: this.tutorial?.lookFor })
+      return message
+    },
+    currentScreen() {
+      // NOTE: this should be extracted from the `screen` property of current task
+      return this.tutorial?.screens[this.currentTaskIndex]
+    },
+    currentTask() {
+      return this.tasks?.[this.currentTaskIndex]
+    },
+    hasTasks() {
+      return this.tasks.length !== 0
+    },
+    hasCompletedAllTasks() {
+      if (!this.hasTasks) {
+        return false
+      }
+
+      const maxIndex = this.tasks.length
+      return this.currentTaskIndex === maxIndex
+    },
+    answeredCorrectly() {
+      if (!this.hasTasks) {
+        return false
+      }
+
+      if (this.hasCompletedAllTasks) {
+        return true
+      }
+
+      const result = this.results[this.currentTask?.taskId]
+      return isDefined(result) && result === this.currentTask?.referenceAnswer
+    },
+    alertContent() {
+      if (!this.currentScreen) {
+        return undefined
+      }
+
+      const { instructions, success, hint } = this.currentScreen
+
+      if (this.answeredCorrectly && success) {
+        const icon = success.icon
+
+        return {
+          type: 'success' as const,
+          title: success.title,
+          text: success.description,
+          icon: icon ? matchIcon(icon) : undefined,
+        }
+      }
+
+      if (this.userAttempts > 0 && hint) {
+        const icon = hint.icon
+
+        return {
+          type: undefined,
+          title: hint.title,
+          text: hint.description,
+          icon: icon ? matchIcon(icon) : undefined,
+        }
+      }
+
+      if (!instructions) {
+        return undefined
+      }
+
+      const icon = instructions.icon
+
+      return {
+        type: 'info' as const,
+        title: instructions.title,
+        text: instructions.description,
+        icon: icon ? matchIcon(icon) : undefined,
+      }
+    },
+  },
+  methods: {
+    fetchTutorialGroups() {
+      if (this.tutorial?.projectId) {
+        onValue(
+          getGroupsRef(this.tutorial.projectId),
+          (snapshot) => {
+            const data = snapshot.val()
+            const groupKeys = Object.keys(data)
+            this.fetchTutorialProject(groupKeys[0])
+          },
+          (error) => {
+            console.error('Error fetching tasks for the tutorial', error)
+          },
+          { onlyOnce: true },
+        )
+      }
+    },
+    fetchTutorialProject(groupId: string | undefined) {
+      if (this.tutorial?.projectId && groupId) {
+        onValue(
+          getTasksRef(this.tutorial.projectId, groupId),
+          (snapshot) => {
+            const data = snapshot.val()
+            this.tasks = decompressTasks(data)
+          },
+          (error) => {
+            console.error('Error fetching tasks for the tutorial', error)
+          },
+          { onlyOnce: true },
+        )
+      }
+    },
+    nextTask() {
+      if (!this.hasCompletedAllTasks) {
+        this.currentTaskIndex += 1
+        this.userAttempts = 0
+        this.answersRevealed = false
+      }
+    },
+    addResult(value: number) {
+      if (!this.answersRevealed) {
+        this.userAttempts += 1
+        this.results[this.currentTask.taskId] = value
+      }
+    },
+    showAnswer() {
+      this.answersRevealed = true
+      this.results[this.currentTask.taskId] = this.currentTask.referenceAnswer
+    },
+  },
+  emits: ['tutorialComplete'],
+  mounted() {
+    goOnline(db)
+    this.fetchTutorialGroups()
+  },
+})
+</script>
+
+<template>
+  <v-container>
+    <v-row v-if="!hasCompletedAllTasks">
+      <v-col>
+        <div>
+          {{ instructionMessage }}
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="alertContent">
+      <v-col>
+        <v-alert
+          prominent
+          density="compact"
+          border="start"
+          variant="tonal"
+          :type="alertContent.type"
+          :title="alertContent.title"
+          :text="alertContent.text"
+          :icon="alertContent.icon"
+        >
+          <template #append>
+            <v-btn
+              v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
+              @click="showAnswer"
+            >
+              {{ $t('projectTutorial.showAnswer') }}
+            </v-btn>
+            <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
+              {{ $t('projectTutorial.nextTask') }}
+            </v-btn>
+          </template>
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <compare-project-task v-if="tasks[currentTaskIndex]" :task="tasks[currentTaskIndex]" />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <option-buttons
+          v-if="currentTask?.taskId"
+          :options="options"
+          :result="results[currentTask.taskId]"
+          :taskId="currentTask.taskId"
+          @addResult="addResult"
+        />
+      </v-col>
+    </v-row>
+    <v-row v-if="!hasTasks" justify="center">
+      <v-col cols="auto">
+        <v-progress-circular indeterminate />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasTasks && !hasCompletedAllTasks">
+      <v-col>
+        <task-progress :progress="currentTaskIndex" :total="tasks?.length ?? 0" />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasCompletedAllTasks">
+      <v-col>
+        <tutorial-completion-card @on-start-mapping-click="$emit('tutorialComplete')" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped></style>
diff --git a/src/components/FindProject.vue b/src/components/FindProject.vue
index 1fa5a90..ff904d5 100644
--- a/src/components/FindProject.vue
+++ b/src/components/FindProject.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } 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 FindProjectTutorial from '@/components/FindProjectTutorial.vue'
+import FindProjectTask, { type Option } from '@/components/FindProjectTask.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
 import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
@@ -13,8 +13,8 @@ import TileMap from '@/components/TileMap.vue'
 export default defineComponent({
   components: {
     findProjectInstructions: FindProjectInstructions,
-    imageTile: ImageTile,
-    magnifyImageTile: MagnifyImageTile,
+    findProjectTutorial: FindProjectTutorial,
+    findProjectTask: FindProjectTask,
     projectHeader: ProjectHeader,
     projectInfo: ProjectInfo,
     tileMap: TileMap,
@@ -31,7 +31,7 @@ export default defineComponent({
       default: false,
     },
     options: {
-      type: Array,
+      type: Array as PropType<Option[]>,
       default() {
         return [
           { color: '', label: 'no', value: 0 },
@@ -61,11 +61,9 @@ export default defineComponent({
       containerWidth: 1,
       endReached: false,
       maxTileSize: 1,
-      overlay: true,
       page: [],
       results: {},
       selectedTaskIds: [],
-      selectOverlay: true,
       startTime: null,
       taskIndex: 0,
       transparent: false,
@@ -86,6 +84,16 @@ export default defineComponent({
     },
   },
   computed: {
+    optionMap() {
+      return this.options.reduce(
+        (acc, val) => {
+          acc[val.value] = val
+
+          return acc
+        },
+        {} as Record<number, Option>,
+      )
+    },
     allTilesSelected() {
       return this.selectedTaskIds.length === this.page.flat().length
     },
@@ -167,7 +175,7 @@ export default defineComponent({
         this.updatePage()
       }
     },
-    bumpResult(taskId, currentOptionIndex) {
+    bumpResult(taskId: string, currentOptionIndex: number) {
       if (currentOptionIndex < this.options.length - 1) {
         this.results[taskId] = this.options[currentOptionIndex + 1].value
       } else {
@@ -232,7 +240,7 @@ export default defineComponent({
     handleSelectAll() {
       this.selectedTaskIds = this.allTilesSelected ? [] : this.page.flat().map((t) => t.taskId)
     },
-    handleTileClicked(taskId) {
+    handleTileClicked(taskId: string) {
       const currentResult = this.results[taskId]
       const currentOptionIndex = this.options.findIndex((option) => option.value == currentResult)
 
@@ -243,12 +251,11 @@ export default defineComponent({
       }
       this.updatePage()
     },
-    handleTileSelected(e, taskId) {
-      e.preventDefault()
-      if (this.selectedTaskIds.includes(taskId)) {
-        this.selectedTaskIds = this.selectedTaskIds.filter((t) => t != taskId)
-      } else {
+    handleTileSelected(newValue: boolean, taskId: string) {
+      if (newValue) {
         this.selectedTaskIds.push(taskId)
+      } else {
+        this.selectedTaskIds = this.selectedTaskIds.filter((t) => t != taskId)
       }
     },
     fastBack() {
@@ -321,6 +328,7 @@ export default defineComponent({
           .sort((a, b) => parseInt(a.taskX) > parseInt(b.taskX))
         this.page.push(row)
       }
+
       if (this.processedTasks.length <= this.tasksPerPage) {
         this.endReached = true
         this.taskIndex = this.processedTasks.length
@@ -331,6 +339,7 @@ export default defineComponent({
   mounted() {
     this.onResize()
   },
+  emits: ['created'],
   created() {
     this.$emit('created')
     this.logMappingStarted(this.project.projectType)
@@ -360,6 +369,7 @@ export default defineComponent({
     />
     <tile-map :page="page" :zoomLevel="project.zoomLevel" :key="columnsPerPage" />
     <project-info
+      ref="projectInfo"
       :first="first"
       :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
@@ -371,6 +381,14 @@ export default defineComponent({
           :exampleTileUrls="[page.flat()[0]?.url, page.flat()[0]?.urlB]"
           :instructionMessage="instructionMessage"
           :options="options"
+          :verificationNumber="project.verificationNumber"
+        />
+      </template>
+      <template #tutorial>
+        <find-project-tutorial
+          :tutorial="tutorial"
+          :options="options"
+          @tutorialComplete="$refs.projectInfo?.toggleDialog"
         />
       </template>
     </project-info>
@@ -385,61 +403,17 @@ export default defineComponent({
   >
     <v-row v-for="(row, index) in page" :key="index" justify="center" no-gutters>
       <div v-for="task in row" :key="task.taskId" :width="tileSize" class="mx-0 px-0">
-        <v-hover v-slot="{ isHovering, props }">
-          <v-card
-            v-bind="props"
-            color="white"
-            :disabled="tilesInSelection && !selectedTaskIds.includes(task.taskId)"
-            @click.stop="handleTileClicked(task.taskId)"
-            @contextmenu="($event) => handleTileSelected($event, task.taskId)"
-            variant="outlined"
-            rounded="0"
-            :height="tileSize"
-            :width="tileSize"
-          >
-            <v-overlay
-              v-model="overlay"
-              @update:modelValue="overlay = true"
-              :opacity="task.index == 0 ? 0 : 0.5"
-              :style="getOverlayBorder(task.taskId)"
-              :scrim="task.color"
-              class="justify-center align-center"
-              contained
-            >
-              <h2 v-show="isHovering">{{ task.label }}</h2>
-            </v-overlay>
-            <v-overlay
-              v-model="overlay"
-              @update:modelValue="overlay = true"
-              opacity="0"
-              class="justify-end align-start"
-              contained
-            >
-              <magnify-image-tile
-                :iconSize="iconSize"
-                :isHovering="isHovering"
-                :task="task"
-                :transparent="transparent"
-                @tileClicked="handleTileClicked(task.taskId)"
-              />
-              <v-btn
-                v-show="isHovering"
-                color="neutral"
-                style="opacity: 0.6"
-                @click.stop="handleTileSelected($event, task.taskId)"
-                class="mr-2 mt-2"
-                :icon="getCheckboxIcon(task.taskId)"
-                :size="iconSize"
-              />
-            </v-overlay>
-            <image-tile
-              :url="task.url"
-              :urlB="task.urlB"
-              :spinner="true"
-              :opacityB="transparent ? 0.3 : 1"
-            />
-          </v-card>
-        </v-hover>
+        <find-project-task
+          :task="task"
+          :tilesInSelection="tilesInSelection"
+          :selected="selectedTaskIds.includes(task.taskId)"
+          :transparent="transparent"
+          :optionMap="optionMap"
+          :tileSize="tileSize"
+          :value="results[task.taskId]"
+          @updateValue="handleTileClicked"
+          @updateSelected="handleTileSelected"
+        />
       </div>
     </v-row>
   </v-container>
diff --git a/src/components/FindProjectInstructions.vue b/src/components/FindProjectInstructions.vue
index 05266e9..53b06e6 100644
--- a/src/components/FindProjectInstructions.vue
+++ b/src/components/FindProjectInstructions.vue
@@ -23,6 +23,10 @@ export default defineComponent({
       type: Array,
       required: true,
     },
+    verificationNumber: {
+      type: Number,
+      required: true,
+    },
   },
   data: () => ({
     allSelected: false,
@@ -158,6 +162,14 @@ export default defineComponent({
         <v-col>{{ $t('projectInstructions.seenAll') }}</v-col>
       </v-row>
     </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.dontWorry') }}</div>
+    <div class="text-p">
+      {{
+        $t('projectInstructions.everyTaskIsViewedBy', {
+          verificationNumber: this.verificationNumber,
+        })
+      }}.
+    </div>
     <div class="text-h6 mt-10">{{ $t('projectInstructions.imageCredits') }}</div>
     <div class="text-p">{{ attribution }}</div>
   </v-card-text>
diff --git a/src/components/FindProjectTask.vue b/src/components/FindProjectTask.vue
new file mode 100644
index 0000000..9f9b927
--- /dev/null
+++ b/src/components/FindProjectTask.vue
@@ -0,0 +1,168 @@
+<script lang="ts">
+import { isDefined } from '@/utils/common'
+import { type PropType, defineComponent, type CSSProperties } from 'vue'
+import ImageTile from '@/components/ImageTile.vue'
+import ImageTileOverlay from '@/components/ImageTileOverlay.vue'
+import MagnifyImageTile from '@/components/MagnifyImageTile.vue'
+
+interface Task {
+  taskId: string
+  url: string
+  urlB?: string
+}
+
+export interface Option {
+  color: string
+  label: string
+  value: number
+}
+
+export default defineComponent({
+  components: {
+    imageTile: ImageTile,
+    imageTileOverlay: ImageTileOverlay,
+    magnifyImageTile: MagnifyImageTile,
+  },
+  props: {
+    task: {
+      type: Object as PropType<Task>,
+      required: true,
+    },
+    tilesInSelection: {
+      type: Boolean,
+    },
+    selected: {
+      type: Boolean,
+    },
+    transparent: {
+      type: Boolean,
+    },
+    tileSize: {
+      type: Number,
+    },
+    value: {
+      type: Number,
+    },
+    optionMap: {
+      type: Object as PropType<Record<number, Option>>,
+      required: true,
+    },
+    withoutActions: {
+      type: Boolean,
+    },
+  },
+  computed: {
+    overlayStyle() {
+      const style: CSSProperties = {}
+
+      if (this.selected) {
+        style.border = `20px solid #fff`
+      } else {
+        style.border = 'unset'
+      }
+
+      if (isDefined(this.value)) {
+        style.backgroundColor = this.optionMap[this.value]?.color
+      }
+
+      return style
+    },
+    overlayLabel() {
+      if (!isDefined(this.value)) {
+        return undefined
+      }
+
+      return this.optionMap[this.value].label
+    },
+    iconSize() {
+      const size = (this.tileSize ?? 0) < 256 ? 'x-small' : 'small'
+      return size
+    },
+    checkboxIcon() {
+      if (this.selected) {
+        return 'mdi-checkbox-marked-circle'
+      }
+
+      return 'mdi-checkbox-blank-circle-outline'
+    },
+  },
+  methods: {
+    handleContextMenu(event: MouseEvent) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      this.$emit('updateSelected', !this.selected, this.task.taskId)
+    },
+    handleSelectClick(event: MouseEvent) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      this.$emit('updateSelected', !this.selected, this.task.taskId)
+    },
+    handleClick(event: MouseEvent) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      this.$emit('updateValue', this.task.taskId)
+    },
+  },
+  emits: ['updateValue', 'updateSelected'],
+})
+</script>
+
+<template>
+  <v-hover v-slot="{ isHovering, props: hoverProps }">
+    <v-card
+      class="task-card"
+      v-bind="hoverProps"
+      color="white"
+      @click.stop="handleClick"
+      @contextmenu="handleContextMenu"
+      variant="outlined"
+      rounded="0"
+      :height="tileSize"
+      :width="tileSize"
+    >
+      <image-tile
+        :url="task.url"
+        :urlB="task.urlB"
+        :spinner="true"
+        :opacityB="transparent ? 0.3 : 1"
+      />
+      <image-tile-overlay
+        :isHovering="!!isHovering"
+        :overlayStyle="overlayStyle"
+        :overlayLabel="overlayLabel"
+      />
+      <div v-if="!withoutActions" class="tile-actions" v-show="isHovering">
+        <magnify-image-tile
+          :iconSize="iconSize"
+          :task="task"
+          :transparent="transparent"
+          :overlayStyle="overlayStyle"
+          :overlayLabel="overlayLabel"
+          @tileClicked="$emit('updateValue', task.taskId)"
+        />
+        <v-btn
+          color="neutral"
+          style="opacity: 0.6"
+          @click="handleSelectClick"
+          class="mr-2 mt-2"
+          :icon="checkboxIcon"
+          :size="iconSize"
+        />
+      </div>
+    </v-card>
+  </v-hover>
+</template>
+<style scoped>
+.task-card {
+  position: relative;
+}
+
+.tile-actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+</style>
diff --git a/src/components/FindProjectTutorial.vue b/src/components/FindProjectTutorial.vue
new file mode 100644
index 0000000..b7ba3b9
--- /dev/null
+++ b/src/components/FindProjectTutorial.vue
@@ -0,0 +1,369 @@
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import { goOnline, onValue } from 'firebase/database'
+import { db, getTasksRef, getGroupsRef } from '@/firebase'
+
+import { decompressTasks } from '@/utils/tasks'
+import matchIcon from '@/utils/matchIcon'
+
+import TaskProgress from '@/components/TaskProgress.vue'
+import FindProjectTask, { type Option } from '@/components/FindProjectTask.vue'
+import TutorialCompletionCard from './TutorialCompletionCard.vue'
+import { isDefined } from '@/utils/common'
+
+interface MappedOption extends Option {
+  nextOptionKey: number
+}
+
+interface Task {
+  taskId: string
+  url: string
+  screen: number
+  referenceAnswer: number
+}
+
+interface Screen {
+  title: string
+  icon: string
+  description: string
+}
+
+export interface Tutorial {
+  projectId: string
+  name: string
+  lookFor?: string
+  screens: {
+    hint: Screen
+    instructions: Screen
+    success: Screen
+  }[]
+}
+
+export default defineComponent({
+  components: {
+    taskProgress: TaskProgress,
+    findProjectTask: FindProjectTask,
+    tutorialCompletionCard: TutorialCompletionCard,
+  },
+  props: {
+    tutorial: Object as PropType<Tutorial>,
+    options: {
+      type: Array as PropType<Option[]>,
+      required: true,
+    },
+  },
+  data(): {
+    tasks: Task[]
+    currentTaskIndex: number
+    results: Record<string, number>
+    selectedTasks: Record<string, boolean>
+    userAttempts: number
+    answersRevealed: boolean
+  } {
+    return {
+      tasks: [],
+      currentTaskIndex: 0,
+      results: {},
+      selectedTasks: {},
+      userAttempts: 0,
+      answersRevealed: false,
+    }
+  },
+  computed: {
+    optionMap() {
+      const maxOptionIndex = this.options.length - 1
+
+      return this.options
+        .map((option, index) => ({
+          ...option,
+          nextOptionKey:
+            index === maxOptionIndex ? this.options[0].value : this.options[index + 1].value,
+        }))
+        .reduce(
+          (acc, val) => {
+            acc[val.value] = val
+
+            return acc
+          },
+          {} as Record<number, MappedOption>,
+        )
+    },
+    instructionMessage() {
+      const message = this.$t('compareProject.lookForChange', { lookFor: this.tutorial?.lookFor })
+      return message
+    },
+    currentScreen() {
+      // NOTE: this should be extracted from the `screen` property of current task
+      return this.tutorial?.screens[this.currentTaskIndex]
+    },
+    taskList() {
+      if (!this.tasks) {
+        return []
+      }
+
+      return this.tasks.filter(({ screen }) => screen === this.currentTaskIndex + 1)
+    },
+    hasTasks() {
+      return this.tasks.length !== 0
+    },
+    hasCompletedAllTasks() {
+      if (!this.hasTasks) {
+        return false
+      }
+
+      const maxIndex = this.tutorial?.screens.length ?? 1
+      return this.currentTaskIndex === maxIndex
+    },
+    answeredCorrectly() {
+      if (this.tasks.length === 0) {
+        return false
+      }
+
+      if (this.hasCompletedAllTasks) {
+        return true
+      }
+
+      if (!this.taskList || this.taskList.length === 0) {
+        return false
+      }
+
+      const hasWrongAnswer = this.taskList.some(
+        ({ taskId, referenceAnswer }) => referenceAnswer !== this.results[taskId],
+      )
+
+      return !hasWrongAnswer
+    },
+    alertContent() {
+      if (!this.currentScreen) {
+        return undefined
+      }
+
+      const { instructions, success, hint } = this.currentScreen
+
+      if (!this.answersRevealed && this.answeredCorrectly && success) {
+        const icon = success.icon
+
+        return {
+          type: 'success' as const,
+          title: success.title,
+          text: success.description,
+          icon: icon ? matchIcon(icon) : undefined,
+        }
+      }
+
+      if (this.answersRevealed && hint) {
+        const icon = hint.icon
+
+        return {
+          type: undefined,
+          title: hint.title,
+          text: hint.description,
+          icon: icon ? matchIcon(icon) : undefined,
+        }
+      }
+
+      if (!instructions) {
+        return undefined
+      }
+
+      const icon = instructions.icon
+
+      return {
+        type: 'info' as const,
+        title: instructions.title,
+        text: instructions.description,
+        icon: icon ? matchIcon(icon) : undefined,
+      }
+    },
+  },
+  methods: {
+    fetchTutorialGroups() {
+      if (this.tutorial?.projectId) {
+        onValue(
+          // FIXME: verify group id
+          getGroupsRef(this.tutorial.projectId),
+          (snapshot) => {
+            const data = snapshot.val()
+            const groupKeys = Object.keys(data)
+            this.fetchTutorialProject(groupKeys[0])
+          },
+          (error) => {
+            console.error('Error fetching tasks for the tutorial', error)
+          },
+          { onlyOnce: true },
+        )
+      }
+    },
+    fetchTutorialProject(groupId: string | undefined) {
+      if (this.tutorial?.projectId && groupId) {
+        onValue(
+          getTasksRef(this.tutorial.projectId, groupId),
+          (snapshot) => {
+            const data = snapshot.val()
+            this.tasks = decompressTasks(data)
+            this.results = this.tasks.reduce(
+              (acc, val) => {
+                // Fill all the result with initial value
+                acc[val.taskId] = this.options[0].value
+
+                return acc
+              },
+              {} as Record<string, number>,
+            )
+          },
+          (error) => {
+            console.error('Error fetching tasks for the tutorial', error)
+          },
+          { onlyOnce: true },
+        )
+      }
+    },
+    nextTask() {
+      if (!this.hasCompletedAllTasks) {
+        if (this.hasCompletedAllTasks) {
+          return
+        }
+
+        this.selectedTasks = {}
+        this.currentTaskIndex += 1
+        this.userAttempts = 0
+        this.answersRevealed = false
+      }
+    },
+    getNextValueForTask(taskId: string) {
+      const currentResult = this.results[taskId]
+
+      if (!isDefined(currentResult)) {
+        return this.options[0].value
+      }
+
+      const newValue = this.optionMap[this.optionMap[currentResult].nextOptionKey].value
+
+      return newValue
+    },
+    setResult(taskId: string, newValue: number) {
+      this.results[taskId] = newValue
+    },
+    updateResult(taskId: string) {
+      if (!this.answersRevealed) {
+        this.userAttempts += 1
+        const newValue = this.getNextValueForTask(taskId)
+        this.results[taskId] = newValue
+      }
+    },
+    handleTileClicked(taskId: string) {
+      const selectedTaskKeys = Object.keys(this.selectedTasks).filter(
+        (taskKey) => !!this.selectedTasks[taskKey],
+      )
+
+      const hasSomeSelectedItem = selectedTaskKeys.length > 0
+      const isTaskFromSelectedItem =
+        selectedTaskKeys.findIndex((taskKey) => taskKey === taskId) !== -1
+
+      if (hasSomeSelectedItem) {
+        if (isTaskFromSelectedItem) {
+          const newValue = this.getNextValueForTask(taskId)
+          selectedTaskKeys.forEach((taskKey) => {
+            this.setResult(taskKey, newValue)
+          })
+        }
+      } else {
+        this.updateResult(taskId)
+      }
+    },
+    handleTileSelected(newValue: boolean, taskId: string) {
+      this.selectedTasks[taskId] = newValue
+    },
+    showAnswer() {
+      this.answersRevealed = true
+      this.taskList.forEach((task) => {
+        this.results[task.taskId] = task.referenceAnswer
+      })
+    },
+  },
+  emits: ['tutorialComplete'],
+  mounted() {
+    goOnline(db)
+    this.fetchTutorialGroups()
+    // this.fetchTutorialProject();
+  },
+})
+</script>
+
+<template>
+  <v-container>
+    <v-row v-if="!hasCompletedAllTasks">
+      <v-col>
+        <div>
+          {{ instructionMessage }}
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="alertContent">
+      <v-col>
+        <v-alert
+          prominent
+          density="compact"
+          border="start"
+          variant="tonal"
+          :type="alertContent.type"
+          :title="alertContent.title"
+          :text="alertContent.text"
+          :icon="alertContent.icon"
+        >
+          <template #append>
+            <v-btn
+              v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
+              @click="showAnswer"
+            >
+              {{ $t('projectTutorial.showAnswer') }}
+            </v-btn>
+            <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
+              {{ $t('projectTutorial.nextTask') }}
+            </v-btn>
+          </template>
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-row justify="center">
+      <v-col cols="auto">
+        <div class="image-grid">
+          <find-project-task
+            v-for="task in taskList"
+            :key="task.taskId"
+            :task="task"
+            :optionMap="optionMap"
+            :selected="selectedTasks[task.taskId]"
+            :value="results[task.taskId]"
+            @updateValue="handleTileClicked"
+            @updateSelected="handleTileSelected"
+          />
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="!hasTasks" justify="center">
+      <v-col cols="auto">
+        <v-progress-circular indeterminate />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasTasks && !hasCompletedAllTasks">
+      <v-col>
+        <task-progress :progress="currentTaskIndex" :total="tutorial?.screens.length ?? 0" />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasCompletedAllTasks">
+      <v-col>
+        <tutorial-completion-card @on-start-mapping-click="$emit('tutorialComplete')" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(2, max(8rem, calc(30vh - 6rem)));
+  grid-template-rows: repeat(3, 1fr);
+  grid-auto-flow: column;
+}
+</style>
diff --git a/src/components/ImageTile.vue b/src/components/ImageTile.vue
index bd24d7a..f4f0f96 100644
--- a/src/components/ImageTile.vue
+++ b/src/components/ImageTile.vue
@@ -5,11 +5,9 @@ export default defineComponent({
   props: {
     url: {
       type: String,
-      required: true,
     },
     urlB: {
       type: String,
-      require: false,
     },
     spinner: {
       type: Boolean,
@@ -25,7 +23,6 @@ export default defineComponent({
     },
     maxSize: {
       type: String,
-      require: false,
     },
   },
 })
@@ -33,6 +30,7 @@ export default defineComponent({
 
 <template>
   <v-img
+    v-if="url"
     :src="url"
     aspect-ratio="1"
     :style="'opacity: ' + opacity"
@@ -44,8 +42,30 @@ export default defineComponent({
         <v-progress-circular color="primary" indeterminate />
       </v-row>
     </template>
-    <image-tile v-if="urlB" :url="urlB" :spinner="spinner" :opacity="opacityB" />
+    <template v-slot:error>
+      <v-row class="fill-height ma-0 image-failed" align="center" justify="center">
+        {{ $t('imageTile.failureMessage') }}
+      </v-row>
+    </template>
+    <image-tile v-if="!!urlB" :url="urlB" :spinner="spinner" :opacity="opacityB" />
   </v-img>
+  <div class="image-not-available" v-if="!url">
+    {{ $t('imageTile.notAvailableMessage') }}
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.image-not-available {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  aspect-ratio: 1;
+  background-color: #a1a1a1;
+  color: rgba(255, 255, 255, 0.6);
+}
+.image-failed {
+  color: rgba(255, 255, 255, 0.6);
+  background-color: #a1a1a1;
+}
+</style>
diff --git a/src/components/ImageTileOverlay.vue b/src/components/ImageTileOverlay.vue
new file mode 100644
index 0000000..a2ceb87
--- /dev/null
+++ b/src/components/ImageTileOverlay.vue
@@ -0,0 +1,49 @@
+<script lang="ts">
+import { type PropType, defineComponent, type CSSProperties } from 'vue'
+
+export default defineComponent({
+  props: {
+    overlayStyle: {
+      type: Object as PropType<CSSProperties>,
+    },
+    isHovering: {
+      type: Boolean,
+    },
+    overlayLabel: {
+      type: String,
+    },
+  },
+})
+</script>
+<template>
+  <div class="overlay" :style="overlayStyle" />
+  <div class="overlay-label" v-if="isHovering">
+    {{ overlayLabel }}
+  </div>
+</template>
+
+<style scoped>
+.overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.4;
+  width: 100%;
+  height: 100%;
+}
+
+.overlay-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.6rem;
+  font-weight: bold;
+  text-align: center;
+  color: white;
+  text-shadow: 0 0 10px #000;
+}
+</style>
diff --git a/src/components/MagnifyImageTile.vue b/src/components/MagnifyImageTile.vue
index 0877683..e48db63 100644
--- a/src/components/MagnifyImageTile.vue
+++ b/src/components/MagnifyImageTile.vue
@@ -1,24 +1,18 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type CSSProperties, type PropType } from 'vue'
 import ImageTile from '@/components/ImageTile.vue'
+import ImageTileOverlay from '@/components/ImageTileOverlay.vue'
 
 export default defineComponent({
   components: {
     imageTile: ImageTile,
+    imageTileOverlay: ImageTileOverlay,
   },
   props: {
-    handleTileClickedFun: {
-      type: String,
-      required: true,
-    },
     iconSize: {
       type: String,
       default: 'small',
     },
-    isHovering: {
-      type: Boolean,
-      default: false,
-    },
     task: {
       type: Object,
       required: true,
@@ -27,6 +21,12 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    overlayLabel: {
+      type: String,
+    },
+    overlayStyle: {
+      type: Object as PropType<CSSProperties>,
+    },
   },
   data() {
     return {
@@ -39,12 +39,12 @@ export default defineComponent({
       this.dialog = false
     },
   },
+  emits: ['tileClicked'],
 })
 </script>
 
 <template>
   <v-btn
-    v-show="isHovering"
     @click.stop="dialog = true"
     color="neutral"
     style="opacity: 0.6"
@@ -53,9 +53,9 @@ export default defineComponent({
     :size="iconSize"
   />
   <v-dialog v-model="dialog" max-width="80vh">
-    <v-hover v-slot="{ isHovering, props }">
+    <v-hover v-slot="{ isHovering, props: hoverProps }">
       <v-card
-        v-bind="props"
+        v-bind="hoverProps"
         v-click-outside="closeDialog"
         v-touch="{ left: closeDialog, right: closeDialog }"
         @click="$emit('tileClicked')"
@@ -63,22 +63,17 @@ export default defineComponent({
         color="white"
         rounded="0"
       >
-        <v-overlay
-          v-model="overlay"
-          @update:modelValue="overlay = true"
-          :opacity="task.index == 0 ? 0 : 0.5"
-          :scrim="task.color"
-          class="justify-center align-center"
-          contained
-        >
-          <h1 v-show="isHovering" style="color: white">{{ task.label }}</h1>
-        </v-overlay>
         <image-tile
           :url="task.url"
           :urlB="task.urlB"
           :spinner="true"
           :opacityB="transparent ? 0.3 : 1"
         />
+        <image-tile-overlay
+          :overlayStyle="overlayStyle"
+          :isHovering="!!isHovering"
+          :overlayLabel="overlayLabel"
+        />
       </v-card>
     </v-hover>
   </v-dialog>
diff --git a/src/components/OptionButtons.vue b/src/components/OptionButtons.vue
index 6d3e410..dc3ddff 100644
--- a/src/components/OptionButtons.vue
+++ b/src/components/OptionButtons.vue
@@ -1,10 +1,26 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import { isDefined } from '@/utils/common'
+
+export interface Option {
+  shortkey?: number
+  title: string
+  description: string
+  iconColor: string
+  mdiIcon: string
+
+  value: number
+  subOptions?: {
+    value: number
+    description: string
+  }[]
+  subOptionValues?: number[]
+}
 
 export default defineComponent({
   props: {
     options: {
-      type: Array,
+      type: Array as PropType<Option[]>,
       required: true,
     },
     taskId: {
@@ -16,7 +32,11 @@ export default defineComponent({
       default: undefined,
     },
   },
-  data() {
+  data(): {
+    selectedOption: Option | undefined
+    selectedSubOptionValue: number | undefined
+    subOptionsDialog: boolean
+  } {
     return {
       selectedOption: undefined,
       selectedSubOptionValue: undefined,
@@ -34,7 +54,7 @@ export default defineComponent({
       this.$emit('addResult', value)
       this.subOptionsDialog = false
     },
-    handleOptionButtonClicked(option) {
+    handleOptionButtonClicked(option: Option) {
       if (!option.subOptions) {
         const value = option.value
         this.$emit('addResult', value)
@@ -43,15 +63,15 @@ export default defineComponent({
         this.subOptionsDialog = true
       }
     },
-    isOptionSelected(option) {
+    isOptionSelected(option: Option) {
       const values = option.subOptionValues || [option.value]
-      const isOptionSelected = values.includes(this.result)
+      const isOptionSelected = isDefined(this.result) && values.includes(this.result)
       return isOptionSelected
     },
     resetSelectedSubOption() {
-      const hasResult = this.result !== undefined
-      const resultIsSubOption = !this.options.map((o) => o.value).includes(this.result)
-      this.selectedSubOptionValue = hasResult && resultIsSubOption ? this.result : undefined
+      const resultIsSubOption =
+        isDefined(this.result) && !this.options.map((o) => o.value).includes(this.result)
+      this.selectedSubOptionValue = resultIsSubOption ? this.result : undefined
     },
   },
 })
@@ -77,11 +97,7 @@ export default defineComponent({
       stacked
     />
     <v-spacer />
-    <v-dialog
-      v-model="subOptionsDialog"
-      :persistent="selectedSubOptionValue === undefined"
-      width="unset"
-    >
+    <v-dialog v-model="subOptionsDialog" width="unset">
       <v-card>
         <v-card-title class="text-h5">
           {{ selectedOption?.title }}
diff --git a/src/components/ProjectInfo.vue b/src/components/ProjectInfo.vue
index e9a3ec9..0d9bf92 100644
--- a/src/components/ProjectInfo.vue
+++ b/src/components/ProjectInfo.vue
@@ -2,13 +2,25 @@
 import { defineComponent } from 'vue'
 import VueMarkdown from 'vue-markdown-render'
 
+type TabType = number | string
+
 export default defineComponent({
   components: {
     VueMarkdown,
   },
   props: {
     informationPages: {
-      type: Array,
+      // FIXME: move type to common types
+      type: Array<{
+        pageNumber: number
+        title: string
+        blocks: {
+          blockNumber: number
+          blockType: 'text' | 'image'
+          textDescription?: string
+          image?: string
+        }[]
+      }>,
       required: false,
     },
     manualUrl: {
@@ -20,15 +32,25 @@ export default defineComponent({
       default: false,
     },
   },
-  data: () => ({
+  data: (): {
+    activeTab: TabType | null
+    dialog: boolean
+  } => ({
     activeTab: null,
     dialog: false,
   }),
   computed: {
+    hasTutorialSlot() {
+      return !!this.$slots.tutorial
+    },
     tabs() {
-      const tabs = this.informationPages
-        ? Array.from({ length: this.informationPages.length }, (v, i) => i).concat(['instructions'])
-        : ['instructions']
+      const tabs: TabType[] = ['instructions']
+      if (this.informationPages && this.informationPages.length > 0) {
+        tabs.push(...Array.from(new Array(this.informationPages?.length ?? 0).keys()))
+      }
+      if (this.hasTutorialSlot) {
+        tabs.push('tutorial')
+      }
       return tabs
     },
   },
@@ -38,14 +60,23 @@ export default defineComponent({
       this.dialog = !this.dialog
     },
     back() {
+      if (this.activeTab === null) {
+        return
+      }
+
       const currentTabIndex = this.tabs.indexOf(this.activeTab)
       if (currentTabIndex > 0) this.activeTab = this.tabs[currentTabIndex - 1]
     },
     forward() {
+      if (this.activeTab === null) {
+        return
+      }
+
       const currentTabIndex = this.tabs.indexOf(this.activeTab)
       if (currentTabIndex < this.tabs.length - 1) this.activeTab = this.tabs[currentTabIndex + 1]
     },
   },
+  emits: ['toggleDialog'],
   created() {
     if (this.first) this.toggleDialog()
   },
@@ -59,20 +90,31 @@ export default defineComponent({
     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-dialog
+    v-model="dialog"
+    height="calc(100% - 32px)"
+    max-height="100vh"
+    width="calc(100% - 32px)"
+    max-width="1024"
+    persistent
+  >
+    <v-card class="pa-2" height="100%">
+      <v-tabs v-model="activeTab" style="flex-shrink: 0">
+        <v-tab :text="$t('projectInstructions.howToContribute')" value="instructions" />
         <v-tab
           v-for="(page, index) in informationPages"
           :text="page.title"
           :value="index"
           :key="page.pageNumber"
-        ></v-tab>
-        <v-tab :text="$t('projectInstructions.howToContribute')" value="instructions"></v-tab>
+        />
+        <v-tab v-if="hasTutorialSlot" value="tutorial" :text="$t('projectInstructions.tutorial')" />
       </v-tabs>
-
-      <v-window v-model="activeTab" style="height: 70vh; overflow-y: auto">
-        <v-window-item
+      <v-divider />
+      <v-tabs-window v-model="activeTab" style="flex-grow: 1; overflow-y: auto">
+        <v-tabs-window-item value="instructions">
+          <slot name="instructions"></slot>
+        </v-tabs-window-item>
+        <v-tabs-window-item
           v-for="(page, index) in informationPages"
           :value="index"
           :key="page.pageNumber"
@@ -83,7 +125,7 @@ export default defineComponent({
           >
             <v-card-text v-if="block.blockType === 'text'" class="text-justify">
               <vue-markdown
-                :source="block.textDescription.replaceAll('\\n', '\n')"
+                :source="block.textDescription?.replaceAll('\\n', '\n')"
                 :options="{ typographer: true }"
               />
             </v-card-text>
@@ -94,12 +136,13 @@ export default defineComponent({
               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-tabs-window-item>
+        <v-tabs-window-item value="tutorial">
+          <slot name="tutorial"></slot>
+        </v-tabs-window-item>
+      </v-tabs-window>
+      <v-divider />
+      <v-card-actions>
         <v-btn
           :title="$t('findProjectInstructions.moveLeft')"
           icon="mdi-chevron-left"
@@ -127,7 +170,7 @@ export default defineComponent({
           prepend-icon="mdi-help-circle"
           >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
         >
-        <v-btn v-if="activeTab == 'instructions'" color="primary" @click="toggleDialog()">{{
+        <v-btn color="primary" @click="toggleDialog()">{{
           $t('findProjectInstructions.close')
         }}</v-btn>
       </v-card-actions>
diff --git a/src/components/TutorialCompletionCard.vue b/src/components/TutorialCompletionCard.vue
new file mode 100644
index 0000000..2ebe89d
--- /dev/null
+++ b/src/components/TutorialCompletionCard.vue
@@ -0,0 +1,35 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  emits: ['onStartMappingClick'],
+})
+</script>
+<template>
+  <v-card class="tutorial-completion-card" flat>
+    <v-icon color="green" size="72"> mdi-check-circle </v-icon>
+    <v-card-title>
+      {{ $t('projectTutorial.completionTitle') }}
+    </v-card-title>
+    <v-card-text class="tutorial-completion-description">
+      {{ $t('projectTutorial.completionDescription') }}
+    </v-card-text>
+    <v-btn @click="$emit('onStartMappingClick')">
+      {{ $t('projectTutorial.startMapping') }}
+    </v-btn>
+  </v-card>
+</template>
+<style scoped>
+.tutorial-completion-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: max(calc(70vh - 375px), 300px);
+}
+
+.tutorial-completion-description {
+  text-align: center;
+  max-width: 24rem;
+  flex-grow: unset;
+}
+</style>
diff --git a/src/components/ValidateProject.vue b/src/components/ValidateProject.vue
index a8c0585..a724769 100644
--- a/src/components/ValidateProject.vue
+++ b/src/components/ValidateProject.vue
@@ -1,20 +1,21 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { Collection } from 'ol'
 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'
-import { Collection } from 'ol'
+import ValidateProjectTutorial from '@/components/ValidateProjectTutorial.vue'
+import ValidateProjectTask from './ValidateProjectTask.vue'
 
 export default defineComponent({
   components: {
     validateProjectInstructions: ValidateProjectInstructions,
+    validateProjectTutorial: ValidateProjectTutorial,
+    validateProjectTask: ValidateProjectTask,
     taskProgress: TaskProgress,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
@@ -110,7 +111,6 @@ export default defineComponent({
       if (!this.taskIndex <= 0) {
         this.taskIndex--
         this.taskId = this.tasks[this.taskIndex].taskId
-        this.updateTaskFeature()
       }
     },
     createInformationPages,
@@ -148,56 +148,22 @@ export default defineComponent({
         return undefined
       }
     },
-    fitView(duration = 600, delay = 100) {
-      const map = this.$refs.map.map
-      const mapView = this.$refs.mapView
-      const extent = this.$refs.taskSource.source.getExtent()
-      if (!extent.some((coordinate) => coordinate == Infinity)) {
-        setTimeout(() => {
-          mapView.fit(extent, {
-            size: map.getSize(),
-            padding: [20, 20, 20, 20],
-            maxZoom: this.project.tileServer.maxZoom | 19,
-            duration: duration,
-          })
-        }, delay)
-      }
-    },
     forward() {
       if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.taskIndex++
         this.taskId = this.tasks[this.taskIndex].taskId
-        this.updateTaskFeature()
       }
     },
-    handleToggleOpacity() {
-      this.transparent = !this.transparent
-      this.updateTaskFeature()
-    },
-    hex2rgb,
     isAnswered() {
       const result = this.results[this.taskId]
       const defined = result !== undefined
       return defined
     },
-    updateTaskFeature() {
-      const geoJson = new GeoJSON()
-      const geom = this.tasks[this.taskIndex].geojson
-      const feature = { geometry: geom, type: 'Feature' }
-      const options = {
-        dataProjection: 'EPSG:4326',
-        featureProjection: 'EPSG:3857',
-      }
-      const newFeature = geoJson.readFeature(feature, options)
-      this.taskFeatures.clear()
-      this.taskFeatures.push(newFeature)
-    },
-    makeXyzUrl,
   },
+  emits: ['created'],
   created() {
     this.startTime = new Date().toISOString()
     this.taskId = this.tasks[this.taskIndex].taskId
-    this.updateTaskFeature()
     this.$emit('created')
     this.logMappingStarted(this.project.projectType)
   },
@@ -209,16 +175,17 @@ export default defineComponent({
     <v-btn
       :title="$t('findProject.toggleOpacity')"
       :icon="'mdi-eye'.concat(transparent ? '-off' : '')"
-      @click="handleToggleOpacity()"
+      @click="transparent = !transparent"
       color="primary"
     />
     <v-btn
       :title="$t('tileMap.resetView')"
       icon="mdi-fit-to-screen-outline"
-      @click="fitView()"
+      @click="$refs['validate-project-task']?.fitView()"
       color="primary"
     />
     <project-info
+      ref="projectInfo"
       :first="first"
       :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
@@ -228,62 +195,25 @@ export default defineComponent({
         <validate-project-instructions
           :instructionMessage="instructionMessage"
           :options="options"
+          :verificationNumber="project.verificationNumber"
+        />
+      </template>
+      <template #tutorial>
+        <validate-project-tutorial
+          :tutorial="tutorial"
+          :options="options"
+          @tutorialComplete="$refs.projectInfo?.toggleDialog"
         />
       </template>
     </project-info>
   </project-header>
   <v-container class="ma-0 pa-0">
-    <ol-map
-      ref="map"
-      :load-tiles-while-animating="true"
-      :load-tiles-while-interacting="true"
-      style="height: calc(100vh - 375px)"
-      @rendercomplete.once="fitView(1200, 300)"
-    >
-      <ol-view
-        ref="mapView"
-        :zoom="zoom"
-        :center="center"
-        :maxZoom="project?.tileServer?.maxZoom"
-      />
-      <ol-tile-layer
-        v-if="project?.tileServer?.name != 'bing'"
-        id="osmLayer"
-        ref="osmLayer"
-        :zIndex="1"
-      >
-        <ol-source-osm />
-      </ol-tile-layer>
-      <ol-tile-layer id="basemapLayer" ref="basemapLayer" :zIndex="2">
-        <ol-source-bingmaps
-          v-if="project?.tileServer?.name === 'bing'"
-          :api-key="project?.tileServer?.apiKey"
-          :imagery-set="project?.tileServer?.imagerySet || 'Aerial'"
-        />
-        <ol-source-xyz
-          v-else
-          :url="makeXyzUrl(project.tileServer)"
-          :attributions="project.tileServer.credits"
-        />
-      </ol-tile-layer>
-
-      <ol-vector-layer id="taskLayer" ref="taskLayer" :zIndex="3">
-        <ol-source-vector
-          v-model:features="taskFeatures"
-          @change="fitView()"
-          ref="taskSource"
-          ident="taskSource"
-        />
-        <ol-style>
-          <ol-style-stroke
-            :color="hex2rgb(colors.light.accent, transparent ? 0.4 : 1)"
-            :width="5"
-          />
-          <ol-style-fill color="#0000" />
-        </ol-style>
-      </ol-vector-layer>
-      <ol-scaleline-control />
-    </ol-map>
+    <validate-project-task
+      ref="validate-project-task"
+      :task="tasks?.[taskIndex]"
+      :project="project"
+      :transparent="transparent"
+    />
   </v-container>
   <option-buttons
     v-if="taskId"
diff --git a/src/components/ValidateProjectInstructions.vue b/src/components/ValidateProjectInstructions.vue
index ea122ed..29ff8cc 100644
--- a/src/components/ValidateProjectInstructions.vue
+++ b/src/components/ValidateProjectInstructions.vue
@@ -11,6 +11,10 @@ export default defineComponent({
       type: Array,
       required: true,
     },
+    verificationNumber: {
+      type: Number,
+      required: true,
+    },
   },
 })
 </script>
@@ -84,6 +88,14 @@ export default defineComponent({
         <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
       </v-row>
     </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.dontWorry') }}</div>
+    <div class="text-p">
+      {{
+        $t('projectInstructions.everyTaskIsViewedBy', {
+          verificationNumber: this.verificationNumber,
+        })
+      }}.
+    </div>
   </v-card-text>
 </template>
 
diff --git a/src/components/ValidateProjectTask.vue b/src/components/ValidateProjectTask.vue
new file mode 100644
index 0000000..1172b4e
--- /dev/null
+++ b/src/components/ValidateProjectTask.vue
@@ -0,0 +1,157 @@
+<script lang="ts">
+import { theme } from '@/plugins/vuetify'
+import hex2rgb from '@/utils/hex2rgb'
+import makeXyzUrl from '@/utils/makeXyzUrl'
+import type { OlMap, OlView } from 'node_modules/vue3-openlayers/dist/components/map'
+import type { OlSourceVector } from 'node_modules/vue3-openlayers/dist/components/sources'
+import { Collection } from 'ol'
+import { GeoJSON } from 'ol/format'
+import { type PropType, defineComponent } from 'vue'
+
+interface Task {
+  taskId: string
+  geojson: object
+}
+
+export interface Project {
+  tileServer: {
+    apiKey: string
+    credits: string
+    name: string
+    url: string
+    maxZoom?: number
+    imagerySet?: string
+  }
+}
+
+export default defineComponent({
+  props: {
+    task: {
+      type: Object as PropType<Task>,
+      required: true,
+    },
+    project: {
+      type: Object as PropType<Project>,
+      required: true,
+    },
+    transparent: {
+      type: Boolean,
+    },
+    compact: {
+      type: Boolean,
+    },
+  },
+  data(): {
+    center: [number, number]
+    results: Record<string, number>
+    startTime: string | null
+    currentTaskIndex: number
+    zoom: number
+  } {
+    return {
+      center: [0, 0],
+      results: {},
+      startTime: null,
+      currentTaskIndex: 0,
+      zoom: 3,
+    }
+  },
+  updated() {
+    this.fitView()
+  },
+  computed: {
+    mapStyle() {
+      if (this.compact) {
+        return { height: 'max(calc(70vh - 375px), 300px)' }
+      }
+
+      return {
+        height: 'max(calc(100vh - 375px), 600px)',
+      }
+    },
+    xyzUrl() {
+      return makeXyzUrl(this.project.tileServer)
+    },
+    strokeColor() {
+      const color = hex2rgb(theme.light.accent, this.transparent ? 0.4 : 1)
+      return color
+    },
+    maxZoom() {
+      // return this.project.tileServer.maxZoom ?? 19;
+      return this.project.tileServer.maxZoom ?? 20
+    },
+    taskFeatures() {
+      const features = new Collection()
+      const geoJson = new GeoJSON()
+
+      const geom = this.task.geojson
+      const feature = { geometry: geom, type: 'Feature' }
+      const options = {
+        dataProjection: 'EPSG:4326',
+        featureProjection: 'EPSG:3857',
+      }
+
+      const newFeature = geoJson.readFeature(feature, options)
+      features.push(newFeature)
+
+      return features
+    },
+  },
+  methods: {
+    fitView(duration = 600, delay = 100) {
+      const map = (this.$refs.map as InstanceType<typeof OlMap>).map
+      const mapView = this.$refs.mapView as InstanceType<typeof OlView>
+      const extent = (
+        this.$refs.taskSource as InstanceType<typeof OlSourceVector>
+      ).source.getExtent()
+
+      if (!extent.some((coordinate) => coordinate == Infinity)) {
+        setTimeout(() => {
+          mapView.fit(extent, {
+            size: map.getSize(),
+            padding: this.compact ? [10, 10, 10, 10] : [20, 20, 20, 20],
+            maxZoom: this.maxZoom,
+            duration: duration,
+          })
+        }, delay)
+      }
+    },
+  },
+})
+</script>
+
+<template>
+  <ol-map
+    ref="map"
+    :load-tiles-while-animating="true"
+    :load-tiles-while-interacting="true"
+    :style="mapStyle"
+    @rendercomplete.once="fitView(1200, 300)"
+  >
+    <ol-view ref="mapView" :zoom="zoom" :center="center" :maxZoom="project?.tileServer?.maxZoom" />
+    <ol-tile-layer
+      v-if="project?.tileServer?.name != 'bing'"
+      id="osmLayer"
+      ref="osmLayer"
+      :zIndex="1"
+    >
+      <ol-source-osm />
+    </ol-tile-layer>
+    <ol-tile-layer id="basemapLayer" ref="basemapLayer" :zIndex="2">
+      <ol-source-bingmaps
+        v-if="project?.tileServer?.name === 'bing'"
+        :api-key="project?.tileServer?.apiKey"
+        :imagery-set="project?.tileServer?.imagerySet || 'Aerial'"
+      />
+      <ol-source-xyz v-else :url="xyzUrl" :attributions="project.tileServer.credits" />
+    </ol-tile-layer>
+    <ol-vector-layer id="taskLayer" ref="taskLayer" :zIndex="3" :key="task.taskId">
+      <ol-source-vector :features="taskFeatures" ref="taskSource" ident="taskSource" />
+      <ol-style :key="strokeColor">
+        <ol-style-stroke :color="strokeColor" :width="5" />
+        <ol-style-fill color="#0000" />
+      </ol-style>
+    </ol-vector-layer>
+    <ol-scaleline-control />
+  </ol-map>
+</template>
diff --git a/src/components/ValidateProjectTutorial.vue b/src/components/ValidateProjectTutorial.vue
new file mode 100644
index 0000000..4b3aced
--- /dev/null
+++ b/src/components/ValidateProjectTutorial.vue
@@ -0,0 +1,285 @@
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import { goOnline, onValue } from 'firebase/database'
+import { db, getTasksRef, getGroupsRef } from '@/firebase'
+import matchIcon from '@/utils/matchIcon'
+import OptionButtons from '@/components/OptionButtons.vue'
+import TaskProgress from '@/components/TaskProgress.vue'
+import { decompressTasks } from '@/utils/tasks'
+import ValidateProjectTask, { type Project } from './ValidateProjectTask.vue'
+import TutorialCompletionCard from './TutorialCompletionCard.vue'
+import { isDefined } from '@/utils/common'
+
+interface Option {
+  title: string
+  description: string
+  iconColor: string
+  mdiIcon: string
+  shortKey: number
+  value: number
+}
+
+interface Task {
+  geojson: object
+  geometry: string
+  properties: {
+    reference: number
+    screen: number
+  }
+  screen: number
+  taskId: string
+}
+
+interface Screen {
+  title: string
+  icon: string
+  description: string
+}
+
+interface Tutorial extends Project {
+  projectId: string
+  name: string
+  lookFor?: string
+  screens: {
+    hint: Screen
+    instructions: Screen
+    success: Screen
+  }[]
+}
+
+export default defineComponent({
+  components: {
+    validateProjectTask: ValidateProjectTask,
+    optionButtons: OptionButtons,
+    taskProgress: TaskProgress,
+    tutorialCompletionCard: TutorialCompletionCard,
+  },
+  props: {
+    tutorial: Object as PropType<Tutorial>,
+    options: Array as PropType<Option[]>,
+  },
+  data(): {
+    tasks: Task[]
+    currentTaskIndex: number
+    results: Record<string, number>
+    userAttempts: number
+    answersRevealed: boolean
+  } {
+    return {
+      tasks: [],
+      currentTaskIndex: 0,
+      results: {},
+      userAttempts: 0,
+      answersRevealed: false,
+    }
+  },
+  computed: {
+    instructionMessage() {
+      const message = this.$t('compareProject.lookForChange', { lookFor: this.tutorial?.lookFor })
+      return message
+    },
+    currentScreen() {
+      return this.tutorial?.screens[this.currentTaskIndex]
+    },
+    task() {
+      return this.tasks?.[this.currentTaskIndex]
+    },
+    hasTasks() {
+      return this.tasks.length !== 0
+    },
+    hasCompletedAllTasks() {
+      if (!this.hasTasks) {
+        return false
+      }
+
+      const maxIndex = this.tasks.length
+      return this.currentTaskIndex === maxIndex
+    },
+    answeredCorrectly() {
+      if (!this.hasTasks) {
+        return false
+      }
+
+      if (this.hasCompletedAllTasks) {
+        return true
+      }
+
+      const result = this.results[this.task?.taskId]
+      return isDefined(result) && result === this.task?.properties.reference
+    },
+    alertContent() {
+      if (!this.currentScreen) {
+        return undefined
+      }
+
+      const { instructions, success, hint } = this.currentScreen
+
+      if (this.answeredCorrectly && success) {
+        const icon = success.icon
+
+        return {
+          type: 'success' as const,
+          title: success.title,
+          text: success.description,
+          icon: icon ? matchIcon(icon) : undefined,
+        }
+      }
+
+      if (this.userAttempts > 0 && hint) {
+        const icon = hint.icon
+
+        return {
+          type: undefined,
+          title: hint.title,
+          text: hint.description,
+          icon: icon ? matchIcon(icon) : undefined,
+        }
+      }
+
+      if (!instructions) {
+        return undefined
+      }
+
+      const icon = instructions.icon
+
+      return {
+        type: 'info' as const,
+        title: instructions.title,
+        text: instructions.description,
+        icon: icon ? matchIcon(icon) : undefined,
+      }
+    },
+  },
+  methods: {
+    fetchTutorialGroups() {
+      if (this.tutorial?.projectId) {
+        onValue(
+          getGroupsRef(this.tutorial.projectId),
+          (snapshot) => {
+            const data = snapshot.val()
+            const groupKeys = Object.keys(data)
+            this.fetchTutorialProject(groupKeys[0])
+          },
+          (error) => {
+            console.error('Error fetching tasks for the tutorial', error)
+          },
+          { onlyOnce: true },
+        )
+      }
+    },
+    fetchTutorialProject(groupId: string | undefined) {
+      if (this.tutorial?.projectId && groupId) {
+        onValue(
+          getTasksRef(this.tutorial.projectId, groupId),
+          (snapshot) => {
+            const data = snapshot.val()
+            this.tasks = decompressTasks(data)
+          },
+          (error) => {
+            console.error('Error fetching tasks for the tutorial', error)
+          },
+          { onlyOnce: true },
+        )
+      }
+    },
+    nextTask() {
+      if (!this.hasCompletedAllTasks) {
+        this.currentTaskIndex += 1
+        this.userAttempts = 0
+        this.answersRevealed = false
+      }
+    },
+    addResult(value: number) {
+      if (!this.answersRevealed) {
+        this.userAttempts += 1
+        this.results[this.task.taskId] = value
+      }
+    },
+    showAnswer() {
+      this.answersRevealed = true
+      this.results[this.task.taskId] = this.task.properties?.reference
+    },
+  },
+  emits: ['tutorialComplete'],
+  mounted() {
+    goOnline(db)
+    this.fetchTutorialGroups()
+  },
+})
+</script>
+
+<template>
+  <v-container>
+    <v-row v-if="!hasCompletedAllTasks">
+      <v-col>
+        <div>
+          {{ instructionMessage }}
+        </div>
+      </v-col>
+    </v-row>
+    <v-row v-if="alertContent">
+      <v-col>
+        <v-alert
+          prominent
+          density="compact"
+          border="start"
+          variant="tonal"
+          :type="alertContent.type"
+          :title="alertContent.title"
+          :text="alertContent.text"
+          :icon="alertContent.icon"
+        >
+          <template #append>
+            <v-btn
+              v-if="userAttempts > 1 && !answeredCorrectly && !answersRevealed"
+              @click="showAnswer"
+            >
+              {{ $t('projectTutorial.showAnswer') }}
+            </v-btn>
+            <v-btn v-if="!hasCompletedAllTasks && answeredCorrectly" @click="nextTask">
+              {{ $t('projectTutorial.nextTask') }}
+            </v-btn>
+          </template>
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <validate-project-task
+          v-if="tasks[currentTaskIndex] && tutorial"
+          :task="tasks[currentTaskIndex]"
+          :project="tutorial"
+          compact
+        />
+      </v-col>
+    </v-row>
+    <v-row v-if="options">
+      <v-col>
+        <option-buttons
+          v-if="task?.taskId"
+          :options="options"
+          :result="results[task.taskId]"
+          :taskId="task.taskId"
+          @addResult="addResult"
+        />
+      </v-col>
+    </v-row>
+    <v-row v-if="!hasTasks" justify="center">
+      <v-col cols="auto">
+        <v-progress-circular indeterminate />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasTasks && !hasCompletedAllTasks">
+      <v-col>
+        <task-progress :progress="currentTaskIndex" :total="tasks?.length ?? 0" />
+      </v-col>
+    </v-row>
+    <v-row v-if="hasCompletedAllTasks">
+      <v-col>
+        <tutorial-completion-card @on-start-mapping-click="$emit('tutorialComplete')" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped></style>
diff --git a/src/firebase/index.ts b/src/firebase/index.ts
index 34a0af5..5888e3a 100644
--- a/src/firebase/index.ts
+++ b/src/firebase/index.ts
@@ -42,8 +42,9 @@ export const projectsRef = ref(db, 'v2/projects')
 export const userGroupsRef = ref(db, 'v2/userGroups')
 export const userGroupMembershipLogsRef = ref(db, '/v2/userGroupMembershipLogs/')
 
+export const getGroupsRef = (projectId: string) => ref(db, `v2/groups/${projectId}`)
 // export reusable database queries
 export const getGroupsQuery = (projectId: string) => {
-  return query(ref(db, `v2/groups/${projectId}`), orderByChild('requiredCount'), startAfter(0))
+  return query(getGroupsRef(projectId), orderByChild('requiredCount'), startAfter(0))
 }
 export const activeProjectsQuery = query(projectsRef, orderByChild('status'), equalTo('active'))
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 4d398a1..015903a 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -144,6 +144,8 @@
   "projectInstructions": {
     "classifyTitle": "Gib deine Antwort",
     "classifyInstruction": "Benutze Buttons, um deine Antwort zu geben",
+    "dontWorry": "Keine Sorge, wenn du unsicher bist",
+    "everyTaskIsViewedBy": "Jede Aufgabe wird von mindestens {verificationNumber} MapSwipern gesehen. Es ist daher OK, wenn du mal etwas übersiehst",
     "howToContribute": "Wie kann ich beitragen?",
     "imageCredits": "Bildnachweis",
     "move": "Zurück und weiter bewegen",
@@ -203,5 +205,16 @@
     "drawNewFeature": "Neue Objekte einzeichnen",
     "modifyFeature": "Objekte bearbeiten",
     "deleteFeature": "Objekte löschen"
+  },
+  "projectTutorial": {
+    "showAnswer": "Antwort zeigen",
+    "nextTask": "Nächste Aufgabe",
+    "completionTitle": "Du bist bereit zum MapSwipen!",
+    "completionDescription": "Du hast jetzt alles was du brauchst, um mit der App einen Beitrag zur humanitären Kartierung zu leisten. Du kannst jederzeit für eine Auffrischung zurückkommen.",
+    "startMapping": "Beginnen"
+  },
+  "imageTile": {
+    "failureMessage": "Bild konnte nicht geladen werden!",
+    "notAvailableMessage": "Bild nicht verfügbar!"
   }
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index ab96ba5..469eac2 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -144,6 +144,8 @@
   "projectInstructions": {
     "classifyTitle": "Provide your answer",
     "classifyInstruction": "Use buttons to provide your answers",
+    "dontWorry": "Don't worry if you are not sure",
+    "everyTaskIsViewedBy": "Every tasks is viewed by at least {verificationNumber} MapSwipers, so it's ok if you think you missed something",
     "howToContribute": "How to Contribute?",
     "imageCredits": "Image credits",
     "move": "Move back and forward",
@@ -155,7 +157,8 @@
     "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"
+    "whereIamInstruction": "Open a map of where you are currently contributing",
+    "tutorial": "Tutorial"
   },
   "findProjectInstructions": {
     "classifyTitle": "Click or tap to classify",
@@ -202,5 +205,16 @@
     "drawNewFeature": "Draw new features",
     "modifyFeature": "Modify features",
     "deleteFeature": "Delete features"
+  },
+  "projectTutorial": {
+    "showAnswer": "Show answer",
+    "nextTask": "Next task",
+    "completionTitle": "You're ready to start MapSwiping!",
+    "completionDescription": "You're now equipped with all you need to contribute to humanitarian mapping using the app. You can come back anytime for refresher.",
+    "startMapping": "Start mapping"
+  },
+  "imageTile": {
+    "failureMessage": "Failed to load image!",
+    "notAvailableMessage": "Image not available!"
   }
 }
diff --git a/src/utils/common.ts b/src/utils/common.ts
new file mode 100644
index 0000000..1bdc070
--- /dev/null
+++ b/src/utils/common.ts
@@ -0,0 +1,3 @@
+export function isDefined<T>(item: T | null | undefined): item is T {
+  return item !== null && item !== undefined
+}
diff --git a/src/utils/matchIcon.ts b/src/utils/matchIcon.ts
index f148992..12301f2 100644
--- a/src/utils/matchIcon.ts
+++ b/src/utils/matchIcon.ts
@@ -1,4 +1,4 @@
-const iconLookup = {
+const iconLookup: Record<string, string> = {
   'add-outline': 'mdi-plus',
   'alert-outline': 'mdi-exclamation',
   'ban-outline': 'mdi-cancel',
@@ -27,7 +27,7 @@ const iconLookup = {
   'warning-outline': 'mdi-alert-outline',
 }
 
-const matchIcon = (icon) => {
+const matchIcon = (icon: string) => {
   const mdiIcon = iconLookup[icon]
   return mdiIcon
 }
diff --git a/src/utils/tasks.ts b/src/utils/tasks.ts
new file mode 100644
index 0000000..f6d59b4
--- /dev/null
+++ b/src/utils/tasks.ts
@@ -0,0 +1,22 @@
+import { inflate } from 'pako'
+import { decode } from 'base-64'
+
+export function decompressTasks(tasks: unknown) {
+  if (Array.isArray(tasks)) {
+    return tasks
+  }
+
+  if (typeof tasks !== 'string') {
+    // NOTE: invalid tasks
+    return []
+  }
+
+  const strTasks = decode(tasks)
+  const charTasks = strTasks.split('').map((x) => {
+    return x.charCodeAt(0)
+  })
+  const binaryTasks = new Uint8Array(charTasks)
+  const expandedTasks = inflate(binaryTasks, { to: 'string' })
+
+  return JSON.parse(expandedTasks) as unknown[]
+}
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 8938156..195891e 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -10,8 +10,6 @@ import {
   getTasksRef,
   logAnalyticsEvent,
 } from '@/firebase'
-import { inflate } from 'pako'
-import { decode } from 'base-64'
 import { mapStores } from 'pinia'
 import { i18nRoute } from '@/i18n/translation'
 import { useCurrentUserStore } from '@/stores/currentUser'
@@ -24,6 +22,7 @@ import MediaProject from '@/components/MediaProject.vue'
 import ValidateProject from '@/components/ValidateProject.vue'
 import DigitizeProject from '@/components/DigitizeProject.vue'
 import projectTypes from '@/config/projectTypes'
+import { decompressTasks } from '@/utils/tasks'
 
 export default defineComponent({
   components: {
@@ -162,9 +161,8 @@ export default defineComponent({
     },
     bindTasks() {
       onValue(getTasksRef(this.projectId, this.group?.groupId), (snapshot) => {
-        const data = snapshot.val() || []
-        const tasks = typeof data == 'string' ? this.decompressTasks(data) : data
-        this.tasks = tasks
+        const data = snapshot.val()
+        this.tasks = decompressTasks(data)
       })
     },
     bindTutorial() {
@@ -188,15 +186,6 @@ export default defineComponent({
       this.nextDialog = false
       this.mode = 'contribute'
     },
-    decompressTasks(tasks) {
-      const strTasks = decode(tasks)
-      const charTasks = strTasks.split('').map(function (x) {
-        return x.charCodeAt(0)
-      })
-      const binaryTasks = new Uint8Array(charTasks)
-      const expandedTasks = inflate(binaryTasks, { to: 'string' })
-      return JSON.parse(expandedTasks)
-    },
     i18nRoute,
     leaveProject() {
       this.hideDialog()
diff --git a/yarn.lock b/yarn.lock
index 199ef8d..f9c53e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1346,6 +1346,11 @@
     "@turf/helpers" "^6.5.0"
     "@turf/meta" "^6.5.0"
 
+"@types/base-64@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/base-64/-/base-64-1.0.2.tgz#f7bc80d242306f20c57f076d79d1efe2d31032ca"
+  integrity sha512-uPgKMmM9fmn7I+Zi6YBqctOye4SlJsHKcisjHIMWpb2YKZRc36GpKyNuQ03JcT+oNXg1m7Uv4wU94EVltn8/cw==
+
 "@types/chai-subset@^1.3.3":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/chai-subset/-/chai-subset-1.3.5.tgz#3fc044451f26985f45625230a7f22284808b0a9a"
@@ -1391,6 +1396,11 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/pako@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/pako/-/pako-2.0.3.tgz#b6993334f3af27c158f3fe0dfeeba987c578afb1"
+  integrity sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==
+
 "@types/raf@^3.4.0":
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/@types/raf/-/raf-3.4.3.tgz#85f1d1d17569b28b8db45e16e996407a56b0ab04"
@@ -4378,16 +4388,7 @@ std-env@^3.3.3:
   resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.7.0.tgz#c9f7386ced6ecf13360b6c6c55b8aaa4ef7481d2"
   integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4443,14 +4444,7 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -5048,16 +5042,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==