diff --git a/cypress.json b/cypress.json
index 07e06d861..d9660f94c 100644
--- a/cypress.json
+++ b/cypress.json
@@ -1,5 +1,5 @@
 {
    "baseUrl": "http://localhost:3000",
-   "defaultCommandTimeout": 45000,
+   "defaultCommandTimeout": 60000,
    "video": false
 }
diff --git a/cypress/integration/tutorial-redirect-modal.spec.js b/cypress/integration/tutorial-redirect-modal.spec.js
new file mode 100644
index 000000000..197a37906
--- /dev/null
+++ b/cypress/integration/tutorial-redirect-modal.spec.js
@@ -0,0 +1,154 @@
+import tutorialsList, { getTutorialType } from '../../src/utils/tutorials'
+
+function visit (url, { referrer, clearStorage = true } = {}) {
+  cy.visit(url, {
+    onBeforeLoad (window) {
+      referrer &&
+        Object.defineProperty(window.document, 'referrer', { get () { return referrer } })
+
+      clearStorage &&
+        window.localStorage.clear()
+    }
+  })
+}
+
+// Asserts
+
+function assertModalShows () {
+  cy.get('.modal-overlay', { timeout: 5e3 }).should('exist')
+  cy.get('[data-cy="tutorial-redirect-modal"', { timeout: 5e3 }).should('be.visible')
+  cy.get('.home', { timeout: 5e3 }).should('be.visible') // still visible behind the overlay
+}
+
+function assertModalContent ({ tutorial, lessonId, context = 'start' }) {
+  const lesson = tutorial && tutorial.lessons.find(lesson => lesson.id === lessonId)
+
+  cy.get('.modal-content')
+    .should('contain.text', tutorial.title)
+    .should('contain.text', lesson.title)
+
+  if (context === 'start') {
+    // check content matches the start context
+    cy.get('.modal-content', { timeout: 5e3 }).should('contain', 'start this tutorial')
+  } else if (context === 'resume') {
+    cy.get('.modal-content', { timeout: 5e3 }).should('contain', 'resume the tutorial')
+  }
+}
+
+function assertModalActions ({ action = 'start' } = {}) {
+  if (action === 'start') {
+    cy.get('[data-cy="tutorial-redirect-modal-action-start"]', { timeout: 5e3 }).should('exist')
+  } else if (action === 'resume') {
+    cy.get('[data-cy="tutorial-redirect-modal-action-resume"]', { timeout: 5e3 }).should('exist')
+  }
+}
+
+function assertModalDoesNotShow () {
+  cy.get('[data-cy="tutorial-redirect-modal"', { timeout: 5e3 }).should('not.exist')
+  cy.get('.modal-overlay', { timeout: 5e3 }).should('not.exist')
+  cy.get('.home', { timeout: 5e3 }).should('be.visible')
+}
+
+describe('TUTORIAL REDIRECT MODAL', () => {
+  let tutorial
+
+  before(() => {
+    // get first text based tutorial
+    tutorial = tutorialsList[Object.keys(tutorialsList).find(tutorialFormattedId => getTutorialType(tutorialFormattedId) === 'text')]
+  })
+
+  it('should show when landing in the middle of a tutorial from a search engine', () => {
+    visit(`/${tutorial.url}/03`, { referrer: 'https://google.com/' })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 3 })
+
+    visit(`/${tutorial.url}/04/`, { referrer: 'https://bing.com/' })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 4 })
+  })
+
+  it('should show when landing in the middle of a tutorial from a search engine and show the resume option when some past lessons have been passed', () => {
+    visit(`/${tutorial.url}/01`, { referrer: '' })
+    cy.get('button[data-cy="next-lesson-text"]').click()
+    cy.get('button[data-cy="next-lesson-text"]').click()
+    visit(`/${tutorial.url}/05`, { referrer: 'https://google.com', clearStorage: false })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 5, context: 'resume' })
+    assertModalActions({ action: 'resume' })
+  })
+
+  it('should close when using close button', () => {
+    visit(`/${tutorial.url}/02`, { referrer: 'https://google.com' })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 2 })
+    cy.get('button.close').click()
+    assertModalDoesNotShow()
+  })
+
+  it('should close when using view lesson button', () => {
+    visit(`/${tutorial.url}/02`, { referrer: 'https://google.com' })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 2 })
+    cy.get('button[data-cy="tutorial-redirect-modal-view-lesson"').click()
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when referrer is empty', () => {
+    visit(`/${tutorial.url}/02`, { referrer: '' })
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when opening lesson and the referrer is not one of the configured search engines', () => {
+    visit(`/${tutorial.url}/03`, { referrer: 'https://searchengine.com/' })
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when opening lesson from app link', () => {
+    visit(`/${tutorial.url}`, { referrer: 'http://localhost:3000/' })
+    cy.get(`a[href="/${tutorial.url}/02"][data-cy="lesson-link-standard"]`).click()
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when opening the first lesson', () => {
+    visit(`/${tutorial.url}/01`, { referrer: 'https://google.com/' })
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when opening resources lesson', () => {
+    visit(`/${tutorial.url}/resources`, { referrer: 'https://google.com/' })
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when opening a lesson the user already passed', () => {
+    visit(`/${tutorial.url}/02`, { referrer: 'https://google.com' })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 2 })
+    cy.get('button.close').click()
+    cy.get('button[data-cy="next-lesson-text"]').click()
+    visit(`/${tutorial.url}/02`, { referrer: 'https://google.com', clearStorage: false })
+    assertModalDoesNotShow()
+  })
+
+  it('should not show a second time after starting a tutorial and passing the lesson', () => {
+    visit(`/${tutorial.url}/01`, { referrer: 'https://google.com' })
+    assertModalDoesNotShow()
+    cy.get('button[data-cy="next-lesson-text"]').click()
+    visit(`/${tutorial.url}/03`, { referrer: 'https://google.com', clearStorage: false })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 3, context: 'resume' })
+    assertModalActions({ action: 'resume' })
+    cy.get(`[data-cy="tutorial-redirect-modal-action-resume"]`).click()
+    cy.location('pathname').should('eq', `/${tutorial.url}/02`)
+    assertModalDoesNotShow()
+    cy.get('button[data-cy="next-lesson-text"]').click()
+    cy.location('pathname').should('eq', `/${tutorial.url}/03`)
+    assertModalDoesNotShow()
+  })
+
+  it('should always show when using the query parameter _forceShowRedirectModal=true', () => {
+    visit(`/${tutorial.url}/01?_forceShowRedirectModal=true`)
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 1, context: 'start' })
+    assertModalActions({ action: 'start' })
+  })
+})
diff --git a/package-lock.json b/package-lock.json
index 2a6e0b7f8..1dd58da3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20277,6 +20277,11 @@
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
       "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
     },
+    "portal-vue": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
+    },
     "portfinder": {
       "version": "1.0.26",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
diff --git a/package.json b/package.json
index 2e93a26ee..1ec0f08e6 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "monaco-editor-webpack-plugin": "^1.9.0",
     "new-github-issue-url": "^0.2.1",
     "p-timeout": "^3.2.0",
+    "portal-vue": "^2.1.7",
     "prerender-spa-plugin": "^3.4.0",
     "querystringify": "^2.1.1",
     "raw-loader": "^0.5.1",
diff --git a/src/App.vue b/src/App.vue
index d59b23a41..13701dac1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="app">
     <router-view :key="$route.path"></router-view>
+    <portal-target name="modal"></portal-target>
   </div>
 </template>
 
diff --git a/src/api/debug.js b/src/api/debug.js
new file mode 100644
index 000000000..5e590cfc3
--- /dev/null
+++ b/src/api/debug.js
@@ -0,0 +1 @@
+module.exports = (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && process.env.DEBUG
diff --git a/src/api/modules/lessons.js b/src/api/modules/lessons.js
index d618edc4c..c3ed09f0e 100644
--- a/src/api/modules/lessons.js
+++ b/src/api/modules/lessons.js
@@ -4,7 +4,7 @@ const errorCode = require('err-code')
 const marked = require('meta-marked')
 
 const log = require('../logger')
-const debug = require('../../utils/debug')
+const debug = require('../debug')
 const config = require('../config')
 
 const logGroup = log.createLogGroup('lessons')
diff --git a/src/api/modules/resources.js b/src/api/modules/resources.js
index 76ce408c6..a5a7bd0d2 100644
--- a/src/api/modules/resources.js
+++ b/src/api/modules/resources.js
@@ -1,5 +1,5 @@
 const log = require('../logger')
-const debug = require('../../utils/debug')
+const debug = require('../debug')
 const tutorialsApi = require('./tutorials')
 const utils = require('../utils')
 
diff --git a/src/api/modules/tutorials.js b/src/api/modules/tutorials.js
index eb7618081..344c17a9a 100644
--- a/src/api/modules/tutorials.js
+++ b/src/api/modules/tutorials.js
@@ -12,7 +12,7 @@ const _ = require('lodash')
 const del = require('del')
 
 const log = require('../logger')
-const debug = require('../../utils/debug')
+const debug = require('../debug')
 const config = require('../config')
 const utils = require('../utils')
 const lessonsApi = require('./lessons')
diff --git a/src/components/Lesson.vue b/src/components/Lesson.vue
index abd440b78..f6b2a760a 100644
--- a/src/components/Lesson.vue
+++ b/src/components/Lesson.vue
@@ -1,5 +1,6 @@
 <template>
   <div :class="{'overflow-hidden': expandChallenge}">
+    <TutorialRedirectModal :tutorial="tutorial" :lesson="lesson" />
     <Header/>
     <div class="container center-l mw7-l ph3">
       <section class="mw7 center mt3 pt2">
@@ -11,7 +12,7 @@
               :lessonsInTutorial="lessonsInTutorial"
               :lessonPassed="lessonPassed" />
             <TypeIcon
-              :lessonId="isResources? 'resources' : lessonId"
+              :lessonId="isResources ? 'resources' : lessonId"
               :tutorialId="tutorial.formattedId"
               class="h2 ml3" />
         </div>
@@ -153,6 +154,7 @@ import Output from './Output.vue'
 import Info from './Info.vue'
 import Validator from './Validator.vue'
 import TutorialCompletionCallout from './callouts/TutorialCompletion.vue'
+import TutorialRedirectModal from './modals/TutorialRedirectModal.vue'
 import TypeIcon from './TypeIcon.vue'
 
 const MAX_EXEC_TIMEOUT = isProduction ? 10000 : 60000
@@ -221,6 +223,7 @@ export default {
     Info,
     Validator,
     TutorialCompletionCallout,
+    TutorialRedirectModal,
     TypeIcon
   },
   props: {
diff --git a/src/components/buttons/Button.vue b/src/components/buttons/Button.vue
index d41c8ff0e..fc314fd55 100644
--- a/src/components/buttons/Button.vue
+++ b/src/components/buttons/Button.vue
@@ -7,6 +7,7 @@
     :data-loading="loading"
     :type="type"
     :disabled="loading || disabled"
+    :data-cy="dataCy"
   >
     <span class="loader"></span>
     <span class="text">{{text}}</span>
@@ -39,7 +40,8 @@ export default {
     blur: {
       type: Function,
       default: () => {}
-    }
+    },
+    dataCy: String
   }
 }
 </script>
@@ -48,7 +50,8 @@ export default {
 button {
   position: relative;
   opacity: 0.9;
-  min-width: 120px;
+  min-width: 7.5rem;
+  min-height: 2.5rem;
   box-shadow: inset 0 0 8px rgb(0 0 0 / 0%);
   outline: none;
 
diff --git a/src/components/buttons/ButtonClose.vue b/src/components/buttons/ButtonClose.vue
index 4e9c44867..1ea5a0269 100644
--- a/src/components/buttons/ButtonClose.vue
+++ b/src/components/buttons/ButtonClose.vue
@@ -30,9 +30,11 @@ export default {
   Parent needs to have position != static
  */
 button.close {
+  --position: 0.4rem;
+
   position: absolute;
-  top: 1rem;
-  right: 1rem;
+  top: var(--position);
+  right: var(--position);
   transform: scale(0.95);
 
   padding: 0.5rem;
@@ -65,8 +67,7 @@ button.close {
 
 @media screen and (max-width: 30rem) {
   button.close {
-    top: 0.3rem;
-    right: 0.3rem;
+    --position: 0.3rem;
 
     opacity: 0.8;
     transform: scale(0.8);
diff --git a/src/components/buttons/ButtonLink.vue b/src/components/buttons/ButtonLink.vue
index 13350bce9..9f8e78411 100644
--- a/src/components/buttons/ButtonLink.vue
+++ b/src/components/buttons/ButtonLink.vue
@@ -4,7 +4,8 @@
     :to="link ? { name: link } : to"
     class="inline-flex justify-center avenir dib v-mid fw7 nowrap lh-copy bn br1 pointer bg-navy white outline-focus pv2 ph3"
     :disabled="disabled"
-    @click="onClick"
+    @click.native="onClick"
+    :data-cy="dataCy"
   >
     <slot>{{text}}</slot>
   </router-link>
@@ -14,6 +15,7 @@
     target="__blank"
     @click="onClick"
     class="inline-flex justify-center avenir dib v-mid fw7 nowrap lh-copy bn br1 pointer bg-navy white outline-focus pv2 ph3"
+    :data-cy="dataCy"
   >
     <slot>{{text}}</slot>
   </a>
@@ -38,7 +40,8 @@ export default {
     onClick: {
       type: Function,
       default: () => {}
-    }
+    },
+    dataCy: String
   }
 }
 </script>
@@ -47,7 +50,8 @@ export default {
 a {
   position: relative;
   opacity: 0.9;
-  min-width: 120px;
+  min-width: 7.5rem;
+  min-height: 2.5rem;
   box-shadow: inset 0 0 8px rgb(0 0 0 / 0%);
   outline: none;
   user-select: none;
diff --git a/src/components/modals/BaseModal.vue b/src/components/modals/BaseModal.vue
new file mode 100644
index 000000000..562db5ac8
--- /dev/null
+++ b/src/components/modals/BaseModal.vue
@@ -0,0 +1,85 @@
+<template>
+  <portal to="modal" v-if="show">
+    <div class="modal-overlay"></div>
+    <div class="modal" :data-cy="dataCy">
+      <div class="modal-content pa4">
+        <div v-if="title" class="modal-title f2 measure-narrow b mb4 lh-title">{{title}}</div>
+        <slot></slot>
+        <ButtonClose
+          title="Close modal"
+          :onDismiss="close"
+        />
+      </div>
+    </div>
+  </portal>
+</template>
+
+<script>
+import ButtonClose from '../buttons/ButtonClose'
+
+export default {
+  name: 'BaseModal',
+  components: {
+    ButtonClose
+  },
+  props: {
+    show: Boolean,
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    // Content
+    title: String,
+    dataCy: String
+  },
+  methods: {
+    close () {
+      this.show = false
+      this.onClose()
+    }
+  }
+}
+</script>
+
+<style>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  background: var(--color-navy);
+  opacity: 0.9;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  position: relative;
+
+  /* Force dimensions to trigger scroll */
+  max-width: calc(100vw - 1.5rem);
+  max-height: calc(100vh - 1.5rem);
+  overflow: auto;
+
+  background: var(--color-snow-muted);
+  border-radius: var(--border-radius-default);
+}
+
+@media only screen and (max-width: 26rem) {
+  .modal {
+    padding: 5rem 0;
+  }
+}
+</style>
diff --git a/src/components/modals/TutorialRedirectModal.vue b/src/components/modals/TutorialRedirectModal.vue
new file mode 100644
index 000000000..50334918f
--- /dev/null
+++ b/src/components/modals/TutorialRedirectModal.vue
@@ -0,0 +1,174 @@
+<template>
+  <BaseModal
+    :show="show"
+    :onClose="onStay"
+    :title="translations.title"
+    data-cy="tutorial-redirect-modal"
+  >
+    <p class="f4 measure lh-copy">{{body._1}}<span class="fw7">{{tutorial.title}}</span>{{body._2}}<span class="fw7">{{lesson.title}}</span>{{body._3}}</p>
+    <div class="buttons mt4">
+      <ButtonLink
+        class="mr3"
+        :onClick="this.resume ? onStay : onResume"
+        :text="suggestedAction"
+        :to="suggestedPath"
+        :data-cy="`tutorial-redirect-modal-action-${this.resume ? 'resume' : 'start'}`"
+      />
+      <Button
+        :click="onStay"
+        :text="translations.actions.stay"
+        data-cy="tutorial-redirect-modal-view-lesson"
+      />
+    </div>
+  </BaseModal>
+</template>
+
+<script>
+import { tutorialRedirectModal } from '../../config'
+import { isLessonPassed, getTutorialType } from '../../utils/tutorials'
+import { debugLog } from '../../utils/debug'
+import countly from '../../utils/countly'
+import translations from '../../static/translations'
+import Button from '../buttons/Button'
+import ButtonLink from '../buttons/ButtonLink'
+import BaseModal from './BaseModal'
+
+const debugGroup = '[modals/TutorialRedirectModal]'
+
+export default {
+  name: 'TutorialRedirectModal',
+  components: {
+    Button,
+    ButtonLink,
+    BaseModal
+  },
+  props: {
+    tutorial: Object,
+    lesson: Object
+  },
+  computed: {
+    resume: function () {
+      return (
+        this.show &&
+        this.lesson.id > 1 && // is not first lesson
+        isLessonPassed(this.tutorial, this.tutorial.lessons[0]) && // first lesson passed
+        !isLessonPassed(this.tutorial, this.tutorial.lessons[this.lesson.id - 2])) // lesson prior to this one not passed
+    },
+    translations: function () {
+      return translations.modals.tutorialRedirect
+    },
+    body: function () {
+      return this.resume ? this.translations.body.resume : this.translations.body.start
+    },
+    suggestedAction: function () {
+      return this.resume ? this.translations.actions.resume : this.translations.actions.start
+    },
+    suggestedPath: function () {
+      let nextLessonIndex = this.tutorial.lessons.findIndex((lesson) => !isLessonPassed(this.tutorial, lesson))
+
+      return this.resume ? this.tutorial.lessons[nextLessonIndex].url : `/${this.tutorial.url}/01`
+    },
+    trackingData: function () {
+      return {
+        tutorial: this.tutorial.shortTitle,
+        path: this.$route.path,
+        lessonType: this.lesson.type,
+        tutorialType: getTutorialType(this.tutorial.formattedId),
+        project: this.tutorial.project.name,
+        referrer: typeof document !== 'undefined' && document.referrer
+      }
+    }
+  },
+  data: function () {
+    // For debug only
+    const _forceShowRedirectModal = this.$route.query._forceShowRedirectModal === 'true'
+
+    const conditionstoShow = [
+      {
+        show: typeof document !== 'undefined' && !!document.referrer,
+        log: `referrer is not defined: document.referrer=${document.referrer}` },
+      {
+        show: tutorialRedirectModal.referrer.SEARCH_ENGINES.some(searchEngine => document.referrer.includes(searchEngine.url)),
+        log: 'referrer isn\'t one of the configured search engines'
+      },
+      {
+        show: this.lesson.id !== 1,
+        log: `lesson is the first: lesson.id=${this.lesson.id}`
+      },
+      {
+        show: this.lesson.type !== 'resources',
+        log: 'lesson is resources'
+      },
+      {
+        show: !isLessonPassed(this.tutorial, this.lesson),
+        log: 'lesson has been passed'
+      },
+      {
+        show: !this.$root.$data.state.modals.tutorialRedirect.shown,
+        log: 'modal has been shown already'
+      }
+    ]
+
+    if (this.lesson.id > 1) {
+      conditionstoShow.push({
+        show: !isLessonPassed(this.tutorial, this.tutorial.lessons[this.lesson.id - 2]),
+        log: 'previous lesson has been passed'
+      })
+    }
+
+    if (!conditionstoShow.some(reason => !reason.show)) {
+      this.$root.$data.state.modals.tutorialRedirect.shown = true
+    } else {
+      debugLog(debugGroup, '## reasons for not showing modal:')
+      conditionstoShow.forEach(reason => {
+        !reason.show &&
+          debugLog(debugGroup, `## ${reason.log}`)
+      })
+    }
+
+    return {
+      show: _forceShowRedirectModal ||
+        !conditionstoShow.some(reason => !reason.show)
+    }
+  },
+  methods: {
+    trackEvent (action) {
+      countly.trackEvent(countly.events.TUTORIAL_MODAL_REDIRECT_ACTION, {
+        ...this.trackingData,
+        action
+      })
+    },
+    onStay () {
+      this.trackEvent('stay')
+      this.show = false
+    },
+    onStart () {
+      this.trackEvent('start')
+      this.show = false
+    },
+    onResume () {
+      this.trackEvent('resume')
+      this.show = false
+    }
+  },
+  mounted () {
+    !this.$route.query._forceShowRedirectModal &&
+      debugLog(
+        debugGroup,
+        'to force redirect modal to show, add _forceShowRedirectModal=true query parameter to the URL.'
+      )
+  }
+}
+</script>
+<style scoped>
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media only screen and (max-width: 24rem) {
+  .buttons {
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/config.js b/src/config.js
index 59b4dc356..875d79118 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,3 +1,19 @@
+export const tutorialRedirectModal = {
+  referrer: {
+    SEARCH_ENGINES: [
+      { id: 'google', url: 'google.com' },
+      { id: 'bing', url: 'bing.com' },
+      { id: 'yahoo', url: 'yahoo.com' },
+      { id: 'baidu', url: 'baidu.com' },
+      { id: 'aol', url: 'aol.com' },
+      { id: 'yandex', url: 'yandex.com' },
+      { id: 'duckduckgo', url: 'duckduckgo.com' },
+      { id: 'ecosia', url: 'ecosia.org' },
+      { id: 'qwant', url: 'qwant.com' }
+    ]
+  }
+}
+
 export const MAILCHIMP_API_URL = process.env.VUE_APP_MAILCHIMP_API_URL
 export const MAILCHIMP_USER_ID = process.env.VUE_APP_MAILCHIMP_USER_ID
 export const MAILCHIMP_LIST_ID = process.env.VUE_APP_MAILCHIMP_LIST_ID
@@ -5,5 +21,6 @@ export const MAILCHIMP_LIST_ID = process.env.VUE_APP_MAILCHIMP_LIST_ID
 export default {
   MAILCHIMP_API_URL,
   MAILCHIMP_USER_ID,
-  MAILCHIMP_LIST_ID
+  MAILCHIMP_LIST_ID,
+  tutorialRedirectModal
 }
diff --git a/src/main.js b/src/main.js
index a4f4ee14f..fe383220c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,19 +5,23 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import VueMeta from 'vue-meta'
 import VueTooltip from 'v-tooltip'
+import PortalVue from 'portal-vue'
 import VueHighlightJS from 'vue-highlight.js'
 import VueSelect from 'vue-select'
+
 import 'vue-select/dist/vue-select.css'
 import 'highlight.js/styles/github.css'
 
 import App from './App.vue'
 import router from './router'
+import stateInit from './state/init'
 
 Vue
   .use(VueRouter)
   .use(VueMeta, { keyName: 'head', refreshOnceOnNavigation: true })
   .use(VueHighlightJS)
   .use(VueTooltip)
+  .use(PortalVue)
 
 Vue.component('v-select', VueSelect)
 
@@ -36,7 +40,10 @@ const root = new Vue({
       this.$router.replace({ path: window.location.hash.replace('#', '') })
     }
   },
-  render: h => h(App)
+  render: h => h(App),
+  data: {
+    state: stateInit()
+  }
 })
 
 document.addEventListener('DOMContentLoaded', function () {
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index ab77b470a..b2be93e27 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -56,6 +56,7 @@
           />
         </div>
       </div>
+
       <div class="mv3">
         <ButtonLink class="mb2 mr3" link="Events">
           View All Events
diff --git a/src/pages/Lesson.vue b/src/pages/Lesson.vue
index 71b86697a..528a5eebb 100644
--- a/src/pages/Lesson.vue
+++ b/src/pages/Lesson.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import debug from '../utils/debug'
+import { debug } from '../utils/debug'
 import head from '../utils/head'
 import { getTutorialByUrl } from '../utils/tutorials'
 import marked from '../utils/marked'
diff --git a/src/routes.js b/src/routes.js
index 03d56fa3c..c58b1d431 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -140,7 +140,8 @@ function tutorials () {
 
     return routes.concat(tutorial.lessons.map(lesson => ({
       type: TYPES.LESSON,
-      path: `/${lesson.url}/`
+      path: `/${lesson.url}/`,
+      sitemap: { priority: 1, changefreq: 'monthly', lastmod }
     })))
   }, []).map(addSitemapLoc)
 }
diff --git a/src/state/init.js b/src/state/init.js
new file mode 100644
index 000000000..031f4a965
--- /dev/null
+++ b/src/state/init.js
@@ -0,0 +1,5 @@
+import modals from './modals'
+
+export default () => ({
+  modals: modals()
+})
diff --git a/src/state/modals.js b/src/state/modals.js
new file mode 100644
index 000000000..fdd2e7a35
--- /dev/null
+++ b/src/state/modals.js
@@ -0,0 +1,5 @@
+export default () => ({
+  tutorialRedirect: {
+    shown: false
+  }
+})
diff --git a/src/static/translations/en.json b/src/static/translations/en.json
index dd6ab5b83..b6ae6d241 100644
--- a/src/static/translations/en.json
+++ b/src/static/translations/en.json
@@ -45,5 +45,27 @@
       "description": "[IPLD](https://ipld.io) (InterPlanetary Linked Data) is an ecosystem of standardized formats and data structures that are universally addressable and linkable, enabling fully decentralized applications. In this course, we'll dive into the basics of cryptographic hashing and content addressing on the decentralized web, explore the properties and versatility of the Merkle DAG, take a look at how Content Identifiers (CIDs) are constructed in IPFS, and get hands on with the IPFS DAG API. Through JavaScript coding challenges, we'll learn to store and share files with peers and create links between Merkle DAGs to express complex data structures. As we go, we'll learn more about other protocol layers of the Web3 stack that support or rely on IPLD, including IPFS, libp2p, Filecoin, and Multiformats.",
       "seoDescription": "Interactive tutorials on IPLD, an ecosystem of standardized formats and data structures that are universally addressable and linkable, enabling fully decentralized applications."
     }
+  },
+  "modals": {
+    "tutorialRedirect": {
+      "title": "Are you in the right place?",
+      "body": {
+        "start": {
+          "_1": "You seem to have landed in the middle of our ",
+          "_2": " tutorial. Because each lesson in a ProtoSchool tutorial builds on the previous one, we recommend starting each tutorial from its first lesson. Would you like to start this tutorial from the beginning or view the requested lesson, ",
+          "_3": ", out of context?"
+        },
+        "resume": {
+          "_1": "You seem to have landed on a lesson in our ",
+          "_2": " tutorial that you haven't yet reached in your previous visits. Because each lesson in a ProtoSchool tutorial builds on the previous one, we recommend progressing through them in order. Would you like to resume the tutorial where you left off or view the requested lesson, ",
+          "_3": ", out of context?"
+        }
+      },
+      "actions": {
+        "start": "Start tutorial",
+        "resume": "Resume tutorial",
+        "stay": "View lesson"
+      }
+    }
   }
 }
diff --git a/src/styles/media-queries.css b/src/styles/media-queries.css
new file mode 100644
index 000000000..0e3501c89
--- /dev/null
+++ b/src/styles/media-queries.css
@@ -0,0 +1,13 @@
+:root {
+  /*
+    Viewport widths for reference
+    Cannot be used directly in media queries
+  */
+  --vw-mobile-small: 20rem; /* 320px */
+  --vw-mobile-medium: 24rem; /* 375px */
+  --vw-mobile-large: 26rem; /* 425px */
+  --vw-tablet: 48rem; /* 768px */
+  --vw-laptop: 64rem; /* 1024px */
+  --vw-laptop-large: 90rem; /* 1440px */
+  --vw-laptop-huge: 160rem; /* 2560px */
+}
diff --git a/src/utils/countly.js b/src/utils/countly.js
index da3ad34fb..24af509c1 100644
--- a/src/utils/countly.js
+++ b/src/utils/countly.js
@@ -1,22 +1,24 @@
 import settings from './settings'
+import { debugLog } from './debug'
 
 export const events = {
+  CHOICE_SUBMIT_WRONG: 'submitWrongChoice',
   CODE_RESET: 'resetCode',
-  CODE_VIEW_SOLUTION: 'viewSolutionCode',
-  LINK_CLICK_IPLD_EXPLORER: 'linkClickIpldExplorer',
-  LINK_CLICK_CID_INSPECTOR: 'linkClickCidInspector',
   CODE_SUBMIT_WRONG: 'submitWrongCode',
-  CHOICE_SUBMIT_WRONG: 'submitWrongChoice',
-  LESSON_PASSED: 'lessonPassed',
-  TUTORIAL_PASSED: 'tutorialPassed',
+  CODE_VIEW_SOLUTION: 'viewSolutionCode',
   FILTER: 'filter',
+  LESSON_PASSED: 'lessonPassed',
+  LINK_CLICK_CID_INSPECTOR: 'linkClickCidInspector',
+  LINK_CLICK_IPLD_EXPLORER: 'linkClickIpldExplorer',
+  NEWSLETTER_REFERRAL: 'newsletterReferral',
   NEWSLETTER: 'newsletterSubscribed',
+  PROFILE_SURVEY_CLICK: 'profileSurveyClick',
+  TUTORIAL_FEEDBACK_SURVEY_AB_TESTING: 'tutorialFeedbackSurveyABTesting',
   TUTORIAL_FEEDBACK_SURVEY_ANSWER: 'tutorialFeedbackSurveyAnswer',
   TUTORIAL_FEEDBACK_SURVEY_COMPLETED: 'tutorialFeedbackSurveyCompleted',
   TUTORIAL_FEEDBACK_SURVEY_DISMISSED: 'tutorialFeedbackSurveyDismissed',
-  TUTORIAL_FEEDBACK_SURVEY_AB_TESTING: 'tutorialFeedbackSurveyABTesting',
-  PROFILE_SURVEY_CLICK: 'profileSurveyClick',
-  NEWSLETTER_REFERRAL: 'newsletterReferral',
+  TUTORIAL_MODAL_REDIRECT_ACTION: 'tutorialModalRedirectAction',
+  TUTORIAL_PASSED: 'tutorialPassed',
   TWITTER_SHARE_TUTORIAL_PASSED: 'twitterShareTutorialPassed'
 }
 
@@ -24,6 +26,8 @@ export const events = {
   Track an event to countly with the provided data
 */
 export function trackEvent (event, data = {}) {
+  debugLog('[countly]', 'trackEvent()', event, data)
+
   window.Countly.q.push(['add_event', {
     key: event,
     segmentation: data
@@ -47,9 +51,11 @@ export function trackEvent (event, data = {}) {
 */
 export function trackEventOnce (event, data) {
   if (settings.countly.hasEventBeenTracked(event, data)) {
+    debugLog('[countly]', 'trackEventOnce()', 'skipped tracking because event was already tracked.', event, data)
     return
   }
 
+  debugLog('[countly]', 'trackEventOnce()', event, data)
   trackEvent(event, data)
   settings.countly.markEventAsTracked(event, data)
 }
diff --git a/src/utils/debug.js b/src/utils/debug.js
index 5e590cfc3..0c4a525c3 100644
--- a/src/utils/debug.js
+++ b/src/utils/debug.js
@@ -1 +1,5 @@
-module.exports = (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && process.env.DEBUG
+import { isProduction } from './env'
+
+export const debugLog = (...log) => !isProduction && console.info('[DEBUG]', ...log)
+
+export const debug = !isProduction && process.env.DEBUG
diff --git a/src/utils/env.js b/src/utils/env.js
index 59f5375d2..817e97330 100644
--- a/src/utils/env.js
+++ b/src/utils/env.js
@@ -1,3 +1,2 @@
-export const isProduction =
-  typeof window !== 'undefined' && window &&
+export const isProduction = typeof window !== 'undefined' && window &&
   window.location.hostname === 'proto.school'
diff --git a/src/utils/tutorials.js b/src/utils/tutorials.js
index 842e96b1b..2949a8f29 100644
--- a/src/utils/tutorials.js
+++ b/src/utils/tutorials.js
@@ -238,7 +238,7 @@ export function setLessonPassed (tutorial, lesson) {
 }
 
 export function isLessonPassed (tutorial, lesson) {
-  return !!localStorage[`passed/${tutorial.url}/${lesson.formattedId}`]
+  return !!localStorage[`passed/${tutorial.url}/${lesson.type === 'resources' ? 'resources' : lesson.formattedId}`]
 }
 
 export default tutorials