diff --git a/src/components/InfoPopup.jsx b/src/components/InfoPopup.jsx
index 445c83e..844bac2 100644
--- a/src/components/InfoPopup.jsx
+++ b/src/components/InfoPopup.jsx
@@ -1,75 +1,38 @@
 import React from 'react'
 import copy from '../js/data/copy.json'
 
-export default ({ app, methods }) => {
+export default ({ ui, app, methods }) => {
   function renderIntro () {
     return copy[app.language].legend.default.intro.map(txt => <p>{txt}</p>)
   }
 
   function renderCategoryColors () {
-    const colors = copy[app.language].legend.view2d.colors.slice(0)
-    colors.reverse()
-    return (
-      <div className='legend-labels' style={{ 'margin-left': '-10px' }}>
-        {colors.map((color, idx) => {
-          return (
-            <div className='label' style={{ 'margin-left': `${idx * 5}` }}>
-              <div className={`color-category ${color.class}`} />
-              {color.label}
-            </div>
-          )
-        })}
+    const categories = Object.keys(ui.style.categories).filter(label => label !== 'default')
+
+    return categories.map(category => (
+      <div className='legend-section'>
+        <svg x='0px' y='0px' width='50px' height='20px' viewBox='0 0 100 30' enableBackground='new 0 0 100 30'>
+          <circle opacity='1' fill={ui.style.categories[category]} cx='50' cy='15' r='15' />
+        </svg>
+        <div className='legend-labels'>
+          <div className='label'>{category}</div>
+        </div>
       </div>
-    )
+    ))
   }
 
   function renderView2DLegend () {
     return (
       <div className={`infopopup ${(app.flags.isInfopopup) ? '' : 'hidden'}`}>
-        <button onClick={methods.onClose} className='side-menu-burg over-white is-active'><span /></button>
+        <div className='legend-header'>
+          <button onClick={methods.onClose} className='side-menu-burg over-white is-active'><span /></button>
+          <h2>{copy[app.language].legend.default.header}</h2>
+        </div>
         {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'>
-              <circle fill='#D2CD28' cx='50' cy='50' r='50' />
-              <circle fill='#662770' cx='50' cy='50' r='40' />
-              <circle fill='#2F409A' cx='50' cy='50' r='30' />
-              <circle fill='#256C36' cx='50' cy='50' r='20' />
-              <circle fill='#FF0000' cx='50' cy='50' r='10' />
-            </svg>
+          <div className='legend-container'>
             {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'>
-              <line fill='none' stroke='#2F409A' strokeDasharray='4,4' x1='30' y1='15' x2='70' y2='15' />
-              <circle fill='2F409A' fillOpacity='0.2' stroke='#2F409A' strokeDasharray='4,4' cx='80' cy='15' r='10' />
-              <circle fill='2F409A' fillOpacity='0.2' stroke='#2F409A' strokeDasharray='4,4' cx='20' cy='15' r='10' />
-            </svg>
-            <div className='legend-labels'>
-              <div className='label'>Comunicaciones</div>
-            </div>
-          </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'>
-              <circle opacity='0.3' fill='#FF0000' cx='50' cy='15' r='15' />
-            </svg>
-            <div className='legend-labels'>
-              <div className='label'>Ataques</div>
-            </div>
-          </div>
-          <div className='legend-section'>
-            <svg x='0px' y='0px' width='100px' height='30px' viewBox='0 40 100 30' enableBackground='new 0 0 100 70'>
-              <polyline fill='none' stroke='#000000' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' stroke-miterlimit='10' points='
-                8.376,63.723 47.287,63.723 60,46 106,46 ' />
-              <line stroke='#000000' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='33.723' y1='59.663' x2='39.069' y2='63.723' />
-              <line stroke='#000000' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='33.723' y1='67.782' x2='39.069' y2='63.723' />
-              <line stroke='#000000' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='41.94' x2='84.195' y2='46' />
-              <line stroke='#000000' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='50.06' x2='84.195' y2='46' />
-            </svg>
-            <div className='legend-labels'>
-              <div className='label'>Rutas de bus</div>
-            </div>
-          </div>
         </div>
       </div>
     )
diff --git a/src/js/data/copy.json b/src/js/data/copy.json
index 2722482..3e7f245 100644
--- a/src/js/data/copy.json
+++ b/src/js/data/copy.json
@@ -92,8 +92,11 @@
         ]
       },
       "default": {
+        "header": "Navigating the Platform",
         "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."
+          "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.",
+          "Select an event to reveal its content and sources. You can filter events by category or other specified filters in the top left toolbar.",
+          "Narratives compose events to reveal logical threads that emerge from them. Transition to narrative mode by selecting a narrative from the top left dashboard icon."
         ]
       }
     },
diff --git a/src/scss/infopopup.scss b/src/scss/infopopup.scss
index 5b75683..0552664 100644
--- a/src/scss/infopopup.scss
+++ b/src/scss/infopopup.scss
@@ -24,87 +24,108 @@
     opacity: 0;
   }
 
-  .legend-section {
-    width: 300px;
-    padding-left: 60px;
-    height: 40px;
-    display: inline-block;
-
-    svg {
-      width: 100px;
-      float: left;
-      display: inline-block;
-    }
-
-    .legend-labels {
-      float: left;
-      display: inline-block;
-      width: calc(100% - 100px);
-
-      .label {
-        display: block;
-        font-size: $xsmall;
-        margin-top: 10px;
-        margin-left: 10px;
-
-        .color-category {
-          width: 8px;
-          height: 8px;
-          border-radius: 10px;
-          display: inline-block;
-          margin: 0px 5px 0 0;
-        }
-      }
-    }
-
-    &:first-child {
-      .legend-labels .label {
-        margin-top: 0;
-      }
-    }
+  .legend {
+    display: flex;
+    flex-direction: column;
   }
 
+  .legend-header {
+    display: flex;
+    flex-direction: row;
+    h2 {
+      display: flex;
+      font-size: 12pt;
+      letter-spacing: 2px;
+      margin: 0;
+    }
+  }
   .side-menu-burg {
     position: absolute;
     right: 8px;
     top: 10px;
   }
 
-  .legend-item {
-    display: block;
-    width: 100%;
-    display: inline-block;
-    margin-bottom: 3px;
-    padding-left: 80px;
-
-    .item-label {
-      line-height: 15px;
-      height: 15px;
-      font-size: $normal;
-    }
-
-    .color-marker {
-      display: inline-block;
-      width: 15px;
-      height: 15px;
-      float: left;
-      margin: 0 10px 0 0;
-      border-radius: 15px;
-
-      &.victims { background-color: #C90500; }
-      &.military { background-color: #319C31; }
-      &.nonstate { background-color: #AC28AC; }
-      &.state-police { background-color: #0000BF; }
-      &.iguala-municipal-police { background-color: #00558D; }
-      &.federal-police { background-color: #5756A2; }
-      &.huitzuco-municipal-police { background-color: #4ECAC1; }
-      &.cocula-municipal-police { background-color: #095959; }
-      &.ambulance { background-color: #ffffff; }
-      &.other { background-color: #D3CE2A; }
-      &.drivers { background-color: #822519; }
-      &.communications { background-color: #a6a6a6; }
-      &.GIEI { background-color: #ffffff; }
-      &.PGR { background-color: #000000; }
-    }
+  .legend-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
   }
+
+  .legend-section {
+    width: 300px;
+    // padding-left: 60px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+
+    svg {
+      width: 60px;
+      float: left;
+      display: inline-block;
+    }
+
+    .legend-labels {
+      // float: lef;
+      display: flex;
+
+      .label {
+        // display: block;
+        font-size: $xsmall;
+        // margin-top: 10px;
+        // margin-left: 10px;
+
+        // .color-category {
+        //   width: 8px;
+        //   height: 8px;
+        //   border-radius: 10px;
+        //   display: inline-block;
+        //   margin: 0px 5px 0 0;
+        // }
+      }
+    }
+
+    // &:first-child {
+    //   .legend-labels .label {
+    //     margin-top: 0;
+    //   }
+    // }
+  }
+
+  // .legend-item {
+  //   display: block;
+  //   width: 100%;
+  //   display: inline-block;
+  //   margin-bottom: 3px;
+  //   padding-left: 80px;
+
+  //   .item-label {
+  //     line-height: 15px;
+  //     height: 15px;
+  //     font-size: $normal;
+  //   }
+
+  //   .color-marker {
+  //     display: inline-block;
+  //     width: 15px;
+  //     height: 15px;
+  //     float: left;
+  //     margin: 0 10px 0 0;
+  //     border-radius: 15px;
+
+  //     &.victims { background-color: #C90500; }
+  //     &.military { background-color: #319C31; }
+  //     &.nonstate { background-color: #AC28AC; }
+  //     &.state-police { background-color: #0000BF; }
+  //     &.iguala-municipal-police { background-color: #00558D; }
+  //     &.federal-police { background-color: #5756A2; }
+  //     &.huitzuco-municipal-police { background-color: #4ECAC1; }
+  //     &.cocula-municipal-police { background-color: #095959; }
+  //     &.ambulance { background-color: #ffffff; }
+  //     &.other { background-color: #D3CE2A; }
+  //     &.drivers { background-color: #822519; }
+  //     &.communications { background-color: #a6a6a6; }
+  //     &.GIEI { background-color: #ffffff; }
+  //     &.PGR { background-color: #000000; }
+  //   }
+  // }
 }