diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 10e1485..4dbba51 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -139,7 +139,9 @@ class Dashboard extends React.Component {
         <InfoPopUp
           ui={ui}
           app={app}
-          toggle={() => actions.toggleInfoPopup()}
+          methods={{
+            onClose: actions.toggleInfoPopup
+          }}
         />
         <Notification
           isNotification={app.flags.isNotification}
diff --git a/src/components/InfoPopup.jsx b/src/components/InfoPopup.jsx
index df14cb8..445c83e 100644
--- a/src/components/InfoPopup.jsx
+++ b/src/components/InfoPopup.jsx
@@ -1,14 +1,13 @@
 import React from 'react'
 import copy from '../js/data/copy.json'
-// NB: should we make this componetn part of a future feature?
 
-export default class InfoPopUp extends React.Component {
-  renderView2DCopy () {
-    return copy[this.props.app.language].legend.view2d.paragraphs.map(paragraph => <p>{paragraph}</p>)
+export default ({ app, methods }) => {
+  function renderIntro () {
+    return copy[app.language].legend.default.intro.map(txt => <p>{txt}</p>)
   }
 
-  renderCategoryColors () {
-    const colors = copy[this.props.app.language].legend.view2d.colors.slice(0)
+  function renderCategoryColors () {
+    const colors = copy[app.language].legend.view2d.colors.slice(0)
     colors.reverse()
     return (
       <div className='legend-labels' style={{ 'margin-left': '-10px' }}>
@@ -24,11 +23,11 @@ export default class InfoPopUp extends React.Component {
     )
   }
 
-  renderView2DLegend () {
+  function renderView2DLegend () {
     return (
-      <div className={`infopopup ${(this.props.app.flags.isInfopopup) ? '' : 'hidden'}`}>
-        <button onClick={() => this.props.toggle()} className='side-menu-burg over-white is-active'><span /></button>
-        {this.renderView2DCopy()}
+      <div className={`infopopup ${(app.flags.isInfopopup) ? '' : 'hidden'}`}>
+        <button onClick={methods.onClose} className='side-menu-burg over-white is-active'><span /></button>
+        {renderIntro()}
         <div className='legend'>
           <div className='legend-section' style={{ 'height': '100px' }}>
             <svg x='0px' y='0px' width='100px' height='100px' viewBox='0 0 100 100' enableBackground='new 0 0 100 100'>
@@ -38,7 +37,7 @@ export default class InfoPopUp extends React.Component {
               <circle fill='#256C36' cx='50' cy='50' r='20' />
               <circle fill='#FF0000' cx='50' cy='50' r='10' />
             </svg>
-            {this.renderCategoryColors()}
+            {renderCategoryColors()}
           </div>
           <div className='legend-section'>
             <svg x='0px' y='0px' width='100px' height='30px' viewBox='0 0 100 30' enableBackground='new 0 0 100 30'>
@@ -76,9 +75,7 @@ export default class InfoPopUp extends React.Component {
     )
   }
 
-  render () {
-    return (
-      <div>{this.renderView2DLegend()}</div>
-    )
-  }
+  return (
+    <div>{renderView2DLegend()}</div>
+  )
 }
diff --git a/src/js/data/copy.json b/src/js/data/copy.json
index 47e642b..2722482 100644
--- a/src/js/data/copy.json
+++ b/src/js/data/copy.json
@@ -90,6 +90,11 @@
           { "class": "category_group03", "label": "Category Group 03" },
           { "class": "other", "label": "Other categories" }
         ]
+      },
+      "default": {
+        "intro": [
+          "Each event represents an occurence that is distinct in either time, space, or both. An event is represented by a coloured circle on both the map and the timeline."
+        ]
       }
     },
     "toolbar": {
diff --git a/src/store/initial.js b/src/store/initial.js
index f3fa4cc..7398541 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -86,7 +86,7 @@ const initial = {
       isFetchingSources: false,
 
       isCardstack: true,
-      isInfopopup: false,
+      isInfopopup: true,
       isShowingSites: true
     }
   },