diff --git a/client/src/game/container.js b/client/src/game/container.js
index 501640467..d55acc176 100644
--- a/client/src/game/container.js
+++ b/client/src/game/container.js
@@ -2,6 +2,7 @@ import * as PIXI from 'pixi.js-legacy'
 import { Viewport } from 'pixi-viewport'
 import Map from './map'
 import gameHelper from '../services/gameHelper'
+import LearningHelper from '../services/learningHelper'
 import textureService from './texture'
 
 class GameContainer {
@@ -134,10 +135,12 @@ class GameContainer {
 
   zoomIn () {
     this.viewport.zoomPercent(0.5, true)
+    LearningHelper.conceptUsed(LearningHelper.concept.CAMERA_ZOOM)
   }
 
   zoomOut () {
     this.viewport.zoomPercent(-0.3, true)
+    LearningHelper.conceptUsed(LearningHelper.concept.CAMERA_ZOOM)
   }
 
   setupViewport (game) {
@@ -176,6 +179,7 @@ class GameContainer {
         maxHeight,
       })
 
+    this.viewport.on('drag-end', this.onViewportDragged.bind(this))
     this.viewport.on('zoomed-end', this.onViewportZoomed.bind(this))
     this.viewport.on('pointerdown', this.map.onViewportPointerDown.bind(this.map))
   }
@@ -263,10 +267,15 @@ class GameContainer {
     this.map.onTick(deltaTime)
   }
 
+  onViewportDragged (e) {
+    LearningHelper.conceptUsed(LearningHelper.concept.CAMERA_PAN)
+  }
+
   onViewportZoomed (e) {
     let zoomPercent = this.getViewportZoomPercentage()
 
     this.map.refreshZoom(zoomPercent)
+    LearningHelper.conceptUsed(LearningHelper.concept.CAMERA_ZOOM)
   }
 
   setMode (mode, args) {
diff --git a/client/src/game/map.js b/client/src/game/map.js
index e841681cd..82e89f96b 100644
--- a/client/src/game/map.js
+++ b/client/src/game/map.js
@@ -8,6 +8,7 @@ import Territories from './territories'
 import PlayerNames from './playerNames'
 import EventEmitter from 'events'
 import gameHelper from '../services/gameHelper'
+import LearningHelper from '../services/learningHelper'
 import AnimationService from './animation'
 import PathManager from './PathManager'
 import OrbitalLocationLayer from './orbital'
@@ -605,6 +606,7 @@ class Map extends EventEmitter {
     }
 
     this.panToPlayer(game, player)
+    LearningHelper.conceptUsed(LearningHelper.concept.CAMERA_PAN)
   }
 
   panToStar (star) {
diff --git a/client/src/services/data/concepts.js b/client/src/services/data/concepts.js
new file mode 100644
index 000000000..ce86076fd
--- /dev/null
+++ b/client/src/services/data/concepts.js
@@ -0,0 +1,78 @@
+import GameHelper from '../gameHelper'
+import LearningHelper from '../learningHelper'
+import MENU_STATES from './menuStates'
+
+export default [
+    {
+        id: LearningHelper.concept.CAMERA_PAN,
+        title: "Camera pan",
+        text: "Move across the map by clicking and dragging with any MOUSE BUTTON.\nPress the <code>h</code> or <code>space</code> keyboard shortcut to return to your Home star.",
+        priority: 10,
+        onConceptUsed: function (self) {
+            this.markProgress(self, 30)
+        }
+    },
+    {
+        id: LearningHelper.concept.CAMERA_ZOOM,
+        title: "Camera zoom",
+        text: "Zoom in and out with the MOUSE WHEEL or <code>+</code> and <code>-</code> keys.",
+        priority: 10,
+        onConceptUsed: function (self) {
+            this.markProgress(self, 20)
+        }
+    },
+    {
+        id: LearningHelper.concept.CARRIERS,
+        title: "Carriers",
+        text: "Carriers are used to transport Ships through hyperspace to reach other Stars. They can only be built at Stars and must hold a minimum of 1 Ship.\nCarriers are displayed as small ship icons <i class='fas fa-rocket'></i> with a circular coloured halo, much like stars. The number of ships that a carrier has will be displayed when zoomed in.\nClick on the carrier to view it in detail.",
+        priority: 20,
+        pre: [LearningHelper.concept.CAMERA_ZOOM],
+        onMenuRequested: function (self, menuState) {
+            if (menuState.state === MENU_STATES.CARRIER_DETAIL) {
+                this.markLearned(self)
+            }
+        }
+    },
+    {
+        id: LearningHelper.concept.CAPITAL_STAR,
+        title: "Capital Star",
+        text: "The Capital Star is your home world. You can recognize as it has 9 points.\nSelect your Capital Star and view its details.",
+        priority: 20,
+        pre: [LearningHelper.concept.CAMERA_ZOOM],
+        onMenuRequested: function (self, menuState) {
+            if (menuState.state === MENU_STATES.STAR_DETAIL) {
+                const starId = menuState.args
+                const star = GameHelper.getStarById(this.$store.state.game, starId)
+                if (star.homeStar) {
+                    this.markLearned(self)
+                }
+            }
+        }
+    },
+    {
+        id: LearningHelper.concept.BULK_UPGRADE,
+        title: "Bulk Upgrade",
+        text: "Improve your infrastructure by spending your budget on the cheapest expansions first.\nAccess Bulk Upgrade <i class='fas fa-money-bill'></i> from the menu / sidebar or using the <code>b</code> keyboard shortcut.",
+        priority: 100,
+        pre: [],
+        isAvailable: function (self) {
+            return this.isGameInProgress
+        },
+        onConceptUsed: function (self) {
+            this.markLearned(self)
+        }
+    },
+    {
+        id: LearningHelper.concept.COMBAT_CALCULATOR,
+        title: "Combat Calculator",
+        text: "Use this handy tool to predict the outcome of combat based on the weapon levels and numbers of the Attacker and Defender.\nAccess the Combat Calculator <i class='fas fa-calculator'></i> from the menu / sidebar, using the <code>c</code> keyboard shortcut or from the Carrier detail window.",
+        priority: 100,
+        pre: [LearningHelper.concept.CARRIERS],
+        isAvailable: function (self) {
+            return this.isGameInProgress
+        },
+        onConceptUsed: function (self) {
+            this.markLearned(self)
+        }
+    },
+]
diff --git a/client/src/services/learningHelper.js b/client/src/services/learningHelper.js
new file mode 100644
index 000000000..ec747042e
--- /dev/null
+++ b/client/src/services/learningHelper.js
@@ -0,0 +1,20 @@
+import eventBus from '../eventBus'
+
+const CONCEPT_IDS = {
+  BULK_UPGRADE: 'bulk-upgrade',
+  CAMERA_PAN: 'camera-pan',
+  CAMERA_ZOOM: 'camera-zoom',
+  CAPITAL_STAR: 'capital-star',
+  CARRIERS: 'carriers',
+  COMBAT_CALCULATOR: 'combat-calculator',
+}
+
+class LearningHelper {
+  concept = CONCEPT_IDS
+
+  conceptUsed(conceptId) {
+    eventBus.$emit('onConceptUsed', conceptId)
+  }
+}
+
+export default new LearningHelper()
diff --git a/client/src/store.js b/client/src/store.js
index 9fa671708..2f73fdbdb 100644
--- a/client/src/store.js
+++ b/client/src/store.js
@@ -24,7 +24,8 @@ export default new Vuex.Store({
     starSpecialists: null,
     carrierSpecialists: null,
     settings: null,
-    confirmationDialog: {}
+    confirmationDialog: {},
+    learnedConcepts: null
   },
   mutations: {
     // Menu
@@ -143,6 +144,15 @@ export default new Vuex.Store({
       state.confirmationDialog = settings
     },
 
+    setLearnedConcept (state, conceptId) {
+      if (!state.learnedConcepts)
+        state.learnedConcepts = {}
+      state.learnedConcepts[conceptId] = true
+    },
+    clearLearnedConcepts (state) {
+      state.learnedConcepts = null
+    },
+
     setUnreadMessages (state, count) {
       state.unreadMessages = count
     },
diff --git a/client/src/views/game/Game.vue b/client/src/views/game/Game.vue
index d4a460cdc..9d9da0f64 100644
--- a/client/src/views/game/Game.vue
+++ b/client/src/views/game/Game.vue
@@ -16,6 +16,7 @@
         <main-bar @onPlayerSelected="onPlayerSelected"
                   @onReloadGameRequested="reloadGame"/>
 
+        <adaptive-tutor/>
         <chat @onOpenPlayerDetailRequested="onPlayerSelected"/>
     </div>
   </div>
@@ -28,6 +29,7 @@ import GameContainer from './components/GameContainer.vue'
 import MENU_STATES from '../../services/data/menuStates'
 import MainBar from './components/menu/MainBar.vue'
 import Chat from './components/inbox/Chat.vue'
+import AdaptiveTutor from './components/tutor/AdaptiveTutor.vue'
 import GameApiService from '../../services/api/game'
 import UserApiService from '../../services/api/user'
 import GameHelper from '../../services/gameHelper'
@@ -42,7 +44,8 @@ export default {
     'loading-spinner': LoadingSpinnerVue,
     'game-container': GameContainer,
     'main-bar': MainBar,
-    'chat': Chat
+    'adaptive-tutor': AdaptiveTutor,
+    'chat': Chat,
   },
   data () {
     return {
diff --git a/client/src/views/game/components/carrier/CombatCalculator.vue b/client/src/views/game/components/carrier/CombatCalculator.vue
index 348d2dd53..732ff1ac0 100644
--- a/client/src/views/game/components/carrier/CombatCalculator.vue
+++ b/client/src/views/game/components/carrier/CombatCalculator.vue
@@ -100,6 +100,7 @@ import LoadingSpinnerVue from '../../../components/LoadingSpinner'
 import MenuTitle from '../MenuTitle'
 import FormErrorList from '../../../components/FormErrorList'
 import GameHelper from '../../../../services/gameHelper'
+import LearningHelper from '../../../../services/learningHelper'
 import CarrierApiService from '../../../../services/api/carrier'
 import GameContainer from '../../../../game/container'
 
@@ -232,6 +233,7 @@ export default {
         console.error(err)
       }
 
+      LearningHelper.conceptUsed(LearningHelper.concept.COMBAT_CALCULATOR)
       this.isLoading = false
     }
   }
diff --git a/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue b/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue
index d7389558f..c8ec225d1 100644
--- a/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue
+++ b/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue
@@ -119,6 +119,7 @@ import MenuTitle from '../MenuTitle'
 import FormErrorList from '../../../components/FormErrorList'
 import starService from '../../../../services/api/star'
 import GameHelper from '../../../../services/gameHelper'
+import LearningHelper from '../../../../services/learningHelper'
 import AudioService from '../../../../game/audio'
 import GameContainer from '../../../../game/container'
 import BulkInfrastructureUpgradeStarTableVue from './BulkInfrastructureUpgradeStarTable'
@@ -275,6 +276,7 @@ export default {
         this.errors = err.response.data.errors || []
       }
 
+      LearningHelper.conceptUsed(LearningHelper.concept.BULK_UPGRADE)
       this.hasChecked = false
       this.isUpgrading = false
     },
diff --git a/client/src/views/game/components/tutor/AdaptiveTutor.vue b/client/src/views/game/components/tutor/AdaptiveTutor.vue
new file mode 100644
index 000000000..d57d585f1
--- /dev/null
+++ b/client/src/views/game/components/tutor/AdaptiveTutor.vue
@@ -0,0 +1,283 @@
+<template>
+  <div v-if="isVisible">
+    <concept-list id="conceptList" :activeConcept="activeConcept" :filter="filter" :filteredConcepts="filteredConcepts"
+      :isExpanded="isExpanded" :isSelectedConcept="isSelectedConcept" :relaxDesire="relaxDesire"
+      @selectConcept="selectConcept" @focusConcept="focusConcept" @unfocusConcept="unfocusConcept"
+      @clearFilter="clearFilter" @updateFilter="updateFilter" @resetKnowledge="resetKnowledge" @toggle="toggle" />
+    <concept-detail id="conceptDetail" v-if="activeConcept" :concept="activeConcept"
+      :isSelectedConcept="isSelectedConcept" @onMarkLearned="onMarkLearned" @onCloseRequested="onCloseDetail" />
+  </div>
+</template>
+
+<script>
+import eventBus from '../../../../eventBus'
+import AudioService from '../../../../game/audio'
+import GameHelper from '../../../../services/gameHelper'
+import MENU_STATES from '../../../../services/data/menuStates'
+import CONCEPTS from '../../../../services/data/concepts'
+import ConceptDetail from './ConceptDetail.vue'
+import ConceptList from './ConceptList.vue'
+
+const MAX_VISIBLE_CONCEPTS = 5
+const DEFAULT_RELAX_DESIRE = 5
+const OVERLAY_WIDTH = 992
+
+export default {
+  components: {
+    'concept-detail': ConceptDetail,
+    'concept-list': ConceptList,
+  },
+  data() {
+    return {
+      CONCEPTS: CONCEPTS.sort((a, b) => a.title.localeCompare(b.title)),
+      activeConcept: null,
+      filter: "",
+      isExpanded: false,
+      isVisible: false,
+      isSelectedConcept: false,
+      interval: null,
+      relaxDesire: 0,
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.updateVisible)
+
+    // TODO: These event names should be global constants
+    eventBus.$on('onConceptUsed', this.onConceptUsed)
+    eventBus.$on('onMenuRequested', this.onMenuRequested)
+    if (this.isUserInGame && !this.isTutorialGame) {
+      this.updateVisible()
+      this.interval = setInterval(this.updateVisibleConcepts, 1000)
+      this.clearVisible()
+    }
+    this.loadKnowledge()
+  },
+  destroyed() {
+    eventBus.$off('onConceptUsed', this.onConceptUsed)
+    eventBus.$off('onMenuRequested', this.onMenuRequested)
+    window.removeEventListener('resize', this.updateVisible)
+    clearInterval(this.interval)
+  },
+  methods: {
+    toggle() {
+      this.isExpanded = !this.isExpanded
+      this.trackDistraction()
+    },
+    clearFilter() {
+      this.filter = ""
+    },
+    updateFilter(value) {
+      this.filter = value
+    },
+    clearVisible() {
+      for (const c of this.CONCEPTS) {
+        this.$delete(c, 'visible')
+      }
+    },
+    loadKnowledge() {
+      for (const c of this.CONCEPTS) {
+        this.$set(c, 'learned', c.id in this.learnedConcepts)
+      }
+    },
+    async resetKnowledge() {
+      if (await this.$confirm('Reset Learned Concepts', 'Are you sure you want to reset all learned concepts?')) {
+        for (const c of this.CONCEPTS) {
+          this.$set(c, 'learned', false)
+          this.$delete(c, 'progress')
+          this.$delete(c, 'visible')
+        }
+        this.$store.commit('clearLearnedConcepts')
+        this.relaxDesire = DEFAULT_RELAX_DESIRE
+      }
+    },
+    selectConcept(concept) {
+      this.activeConcept = concept
+      this.isSelectedConcept = true
+      this.trackDistraction()
+    },
+    focusConcept(concept) {
+      if (!this.isSelectedConcept) {
+        this.activeConcept = concept
+      }
+    },
+    unfocusConcept() {
+      if (!this.isSelectedConcept) {
+        this.activeConcept = null
+      }
+    },
+    updateVisibleConcepts() {
+      if (this.visibleConcepts.length >= MAX_VISIBLE_CONCEPTS)
+        return
+
+      if (this.isExpanded)
+        return
+
+      this.relaxDesire = Math.max(this.relaxDesire - 1, 0)
+
+      if (this.relaxDesire <= 0) {
+        const concept = this.findNextConcept()
+        if (concept === null) {
+          return
+        }
+        this.$set(concept, 'visible', Date.now())
+        this.trackDistraction(DEFAULT_RELAX_DESIRE + this.visibleConcepts.length * DEFAULT_RELAX_DESIRE)
+        AudioService.click()
+      }
+    },
+    findNextConcept() {
+      let bestPriority = -1
+      let candidates = []
+      for (const c of this.CONCEPTS) {
+        if (this.isCandidate(c)) {
+          if (c.priority < bestPriority || bestPriority === -1) {
+            bestPriority = c.priority
+            candidates = [c]
+          } else if (c.priority === bestPriority) {
+            candidates.push(c)
+          }
+        }
+      }
+      if (candidates.length) {
+        return candidates[candidates.length * Math.random() | 0]
+      }
+      return null
+    },
+    isCandidate(concept) {
+      if (concept.learned)
+        return false
+      if (concept.visible)
+        return false
+      if (concept.pre) {
+        for (const id of concept.pre) {
+          if (!(id in this.learnedConcepts))
+            return false
+        }
+      }
+      if (concept.isAvailable && !concept.isAvailable.call(this, concept))
+        return false
+      return true
+    },
+    markLearned(concept) {
+      this.$set(concept, 'learned', true)
+      this.$store.commit('setLearnedConcept', concept.id)
+      if (concept.visible) {
+        AudioService.backspace()
+        this.trackDistraction()
+        this.$set(concept, 'visible', false)
+      }
+      this.$delete(concept, 'progress')
+      if (this.isSelectedConcept) {
+        this.onCloseDetail()
+      }
+    },
+    markProgress(concept, progress = 10) {
+      this.$set(concept, 'progress', Math.min((concept.progress || 0) + progress, 100))
+      if (concept.progress >= 100) {
+        this.markLearned(concept)
+      }
+    },
+    trackDistraction(weight = DEFAULT_RELAX_DESIRE) {
+      this.relaxDesire = Math.max(this.relaxDesire, weight)
+    },
+    onCloseDetail() {
+      this.activeConcept = null
+      this.isSelectedConcept = false
+      this.trackDistraction()
+    },
+    onMarkLearned(concept) {
+      this.markLearned(concept)
+    },
+    onConceptUsed(conceptId) {
+      for (const concept of this.CONCEPTS) {
+        if (concept.id === conceptId && !concept.learned && concept.onConceptUsed) {
+          concept.onConceptUsed.call(this, concept)
+          this.trackDistraction()
+        }
+      }
+    },
+    onMenuRequested(menuState) {
+      this.updateVisible()
+      for (const concept of this.CONCEPTS) {
+        if (!concept.learned && concept.onMenuRequested) {
+          concept.onMenuRequested.call(this, concept, menuState)
+        }
+      }
+      this.trackDistraction()
+    },
+    updateVisible () {
+      this.isVisible = this.isUserInGame && !this.isTutorialGame && (this.isOverlay() || this.$store.state.menuState == MENU_STATES.NONE)
+    },
+    isOverlay (e) {
+      return window.innerWidth >= OVERLAY_WIDTH
+    },
+  },
+  computed: {
+    visibleConcepts() {
+      return this.CONCEPTS.filter(c => c.visible).sort(function (a, b) { return a.visible - b.visible })
+    },
+    filteredConcepts() {
+      if (this.isExpanded) {
+        if (this.filter) {
+          return this.CONCEPTS.filter(c => c.title.toLowerCase().includes(this.filter.toLowerCase()))
+        } else {
+          return this.CONCEPTS
+        }
+      } else {
+        return this.visibleConcepts
+      }
+    },
+    learnedConcepts() {
+      return this.$store.state.learnedConcepts || {}
+    },
+    isGameInProgress() {
+      return GameHelper.isGameInProgress(this.$store.state.game)
+    },
+    isUserInGame() {
+      return GameHelper.getUserPlayer(this.$store.state.game) != null
+    },
+    isTutorialGame() {
+      return GameHelper.isTutorialGame(this.$store.state.game)
+    },
+  }
+}
+</script>
+
+<style scoped>
+#conceptDetail {
+  position: absolute;
+  right: 180px;
+  width: 290px;
+  top: 45px;
+  overflow: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+
+#conceptList {
+  position: absolute;
+  right: 0px;
+  width: 180px;
+  top: 45px;
+  overflow: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+
+@media screen and (max-width: 992px) {
+  #conceptDetail {
+    top: 130px;
+  }
+}
+
+@media screen and (max-width: 654px) {
+  #conceptDetail, #conceptList {
+    top: 130px;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  #conceptDetail, #conceptList {
+    top: 100px;
+  }
+}
+</style>
diff --git a/client/src/views/game/components/tutor/ConceptDetail.vue b/client/src/views/game/components/tutor/ConceptDetail.vue
new file mode 100644
index 000000000..238b6437b
--- /dev/null
+++ b/client/src/views/game/components/tutor/ConceptDetail.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="header-bar-bg container">
+    <menu-title v-if="isSelectedConcept" :title="concept.title" @onCloseRequested="onCloseRequested" />
+    <h4 v-if="!isSelectedConcept" class="pt-2">{{ concept.title }}</h4>
+    <div>
+      <p v-for="para in concept.text.split('\n')" v-html="para">
+      </p>
+      <p v-if="!concept.learned">
+      <div class="progress" v-if="concept.progress">
+        <div class="progress-bar" role="progressbar" :style="progressStyle" :aria-valuenow="concept.progress"
+          aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+      </p>
+      <div v-if="isSelectedConcept">
+        <p class="text-center"><button class="btn btn-sm btn-success" v-if="!concept.learned"
+            @click="onMarkLearned(concept)">Mark as Learned</button></p>
+        <p v-if="concept.learned" class="text-center text-muted">Already Learned</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuTitle from '../MenuTitle'
+
+export default {
+  components: {
+    'menu-title': MenuTitle,
+  },
+  props: {
+    concept: Object,
+    isSelectedConcept: Boolean
+  },
+  methods: {
+    onCloseRequested() {
+      this.$emit('onCloseRequested')
+    },
+    onMarkLearned(concept) {
+      this.$emit('onMarkLearned', concept)
+    },
+  },
+  computed: {
+    progressStyle() {
+      return {
+        width: this.concept.progress + "%",
+      };
+    },
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/client/src/views/game/components/tutor/ConceptList.vue b/client/src/views/game/components/tutor/ConceptList.vue
new file mode 100644
index 000000000..3d12749b1
--- /dev/null
+++ b/client/src/views/game/components/tutor/ConceptList.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="header-bar-bg container pt-1">
+    <div class="row">
+      <div class="col pt-2">
+        <h6>Learning Helper</h6>
+        <code v-if="isDevelopment">DEBUG R={{ relaxDesire }}</code>
+      </div>
+      <div class="col-auto">
+        <slot></slot>
+        <button v-if="isExpanded" @click="toggle" class="btn btn-outline-warning btn-sm"><i
+            class="fas fa-minus"></i></button>
+        <button v-if="!isExpanded" @click="toggle" class="btn btn-outline-warning btn-sm"><i
+            class="fas fa-plus"></i></button>
+      </div>
+    </div>
+    <div v-if="isExpanded" class="input-group">
+      <input :value="filter" @input="updateFilter" class="form-control form-control-sm" placeholder="Filter..." />
+      <div class="input-group-append">
+        <button @click="clearFilter" class="btn btn-outline-secondary btn-sm" type="button"><i
+            class="fas fa-times"></i></button>
+        <button @click="resetKnowledge" class="btn btn-outline-danger btn-sm" type="button"><i
+            class="fas fa-eraser"></i></button>
+      </div>
+    </div>
+    <div>
+      <ul class="list-unstyled">
+        <concept-list-item v-for="concept in filteredConcepts" v-bind:key="concept.id" :concept="concept"
+          :isSelected="concept === activeConcept && isSelectedConcept" @selectConcept="selectConcept"
+          @focusConcept="focusConcept" @unfocusConcept="unfocusConcept" />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import ConceptListItem from './ConceptListItem.vue'
+
+export default {
+  components: {
+    'concept-list-item': ConceptListItem,
+  },
+  data() {
+    return {
+      isDevelopment: process.env.NODE_ENV == 'development'
+    }
+  },
+  props: {
+    activeConcept: Object,
+    filter: String,
+    filteredConcepts: Array,
+    isExpanded: Boolean,
+    isSelectedConcept: Boolean,
+    relaxDesire: Number
+  },
+  methods: {
+    selectConcept(concept) {
+      this.$emit('selectConcept', concept)
+    },
+    focusConcept(concept) {
+      this.$emit('focusConcept', concept)
+    },
+    unfocusConcept() {
+      this.$emit('unfocusConcept')
+    },
+    clearFilter() {
+      this.$emit('clearFilter')
+    },
+    updateFilter(e) {
+      this.$emit('updateFilter', e.target.value)
+    },
+    resetKnowledge() {
+      this.$emit('resetKnowledge')
+    },
+    toggle() {
+      this.$emit('toggle')
+    },
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/client/src/views/game/components/tutor/ConceptListItem.vue b/client/src/views/game/components/tutor/ConceptListItem.vue
new file mode 100644
index 000000000..7abf883ac
--- /dev/null
+++ b/client/src/views/game/components/tutor/ConceptListItem.vue
@@ -0,0 +1,71 @@
+<template>
+  <li role="button" class="concept-item" :class="{ 'selected': isSelected, 'learned': concept.learned, 'blink': isNew }"
+    @click="selectConcept(concept);" @mouseenter="focusConcept(concept);" @mouseleave="unfocusConcept();">
+    <p class="small lh-sm m-0 p-1">
+      {{ concept.title }}<span class="text-muted" v-if="!concept.learned && concept.progress"> ({{ concept.progress
+        }}%)</span>
+    </p>
+  </li>
+</template>
+
+<script>
+
+export default {
+  props: {
+    concept: Object,
+    isSelected: Boolean,
+  },
+  methods: {
+    selectConcept(concept) {
+      this.$emit('selectConcept', concept)
+    },
+    focusConcept(concept) {
+      this.$emit('focusConcept', concept)
+    },
+    unfocusConcept() {
+      this.$emit('unfocusConcept')
+    },
+  },
+  computed: {
+    isNew() {
+      return this.concept.visible && ((Date.now() - this.concept.visible) < 1000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.concept-item.selected {
+  background-color: gray;
+}
+
+.concept-item.learned {
+  background-color: black;
+}
+
+.concept-item.selected.learned {
+  background-color: lightslategray;
+}
+
+.concept-item:hover {
+  background-color: darkslategray;
+}
+
+.concept-item.blink {
+  animation: blinker 500ms linear;
+}
+
+@keyframes blinker {
+  0% {
+    background-color: transparent;
+  }
+
+  50% {
+    background-color: #F2A33C;
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+</style>