diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index b764983..0fb2905 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -113,6 +113,7 @@ class Dashboard extends React.Component {
       return (<div>
         <Viewport
           locations={this.props.domain.locations}
+          narratives={this.props.domain.narratives}
           sites={this.props.domain.sites}
           categoryGroups={this.props.domain.categoryGroups}
 
@@ -164,6 +165,7 @@ class Dashboard extends React.Component {
         />
         <Timeline
           events={this.props.domain.events.filter(item => item)}
+          narratives={this.props.domain.narratives}
           categoryGroups={this.props.domain.categoryGroups}
 
           range={this.props.app.filters.range}
@@ -214,6 +216,7 @@ function mapStateToProps(state) {
       categoryGroups: selectors.getCategoryGroups(state),
       sites: selectors.getSites(state),
       tags: selectors.getAllTags(state),
+      narratives: selectors.getFilteredNarratives(state),
 
       notifications: state.domain.notifications,
     }),
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 48471b5..a7e3157 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -12,6 +12,7 @@ class Timeline extends React.Component {
   componentDidMount() {
       const domain = {
         events: this.props.events,
+        narratives: this.props.narratives,
         categoryGroups: this.props.categoryGroups
       }
       const app = {
@@ -37,6 +38,7 @@ class Timeline extends React.Component {
   componentWillReceiveProps(nextProps) {
     const domain = {
       events: nextProps.events,
+      narratives: nextProps.narratives,
       categoryGroups: nextProps.categoryGroups
     }
 
diff --git a/src/components/View2D.jsx b/src/components/View2D.jsx
index da35994..c617f74 100644
--- a/src/components/View2D.jsx
+++ b/src/components/View2D.jsx
@@ -11,6 +11,7 @@ class View2D extends React.Component {
   componentDidMount() {
     const domain = {
       locations: this.props.locations,
+      narratives: this.props.narratives,
       sites: this.props.sites,
       categoryGroups: this.props.categoryGroups
     }
@@ -34,6 +35,7 @@ class View2D extends React.Component {
   componentWillReceiveProps(nextProps) {
     const domain = {
       locations: nextProps.locations,
+      narratives: nextProps.narratives,
       sites: nextProps.sites,
       categoryGroups: nextProps.categoryGroups
     }
diff --git a/src/components/Viewport.jsx b/src/components/Viewport.jsx
index 78e17d6..e3620bb 100644
--- a/src/components/Viewport.jsx
+++ b/src/components/Viewport.jsx
@@ -12,6 +12,7 @@ class Viewport extends React.Component {
       return (
         <View2D
           locations={this.props.locations}
+          narratives={this.props.narratives}
           sites={this.props.sites}
           categoryGroups={this.props.categoryGroups}
 
diff --git a/src/js/map/map.js b/src/js/map/map.js
index c9344d4..4195c3c 100644
--- a/src/js/map/map.js
+++ b/src/js/map/map.js
@@ -12,6 +12,7 @@ export default function(newApp, ui, select) {
 
   const domain = {
     locations: [],
+    narratives: [],
     categoryGroups: [],
     sites: []
   }
@@ -148,6 +149,9 @@ Stop and start the development process in terminal after you have added your tok
       return `translate(${newPoint.x},${newPoint.y})`;
     });
 
+    g.selectAll('.narrative')
+      .attr('d', sequenceLine);
+
     const busLine = d3.line()
       .x(d => lMap.latLngToLayerPoint(d).x)
       .y(d => lMap.latLngToLayerPoint(d).y)
@@ -268,6 +272,7 @@ Stop and start the development process in terminal after you have added your tok
       .attr('class', 'location')
       .attr('transform', (d) => {
         d.LatLng = new L.LatLng(+d.latitude, +d.longitude);
+        console.log(lMap.latLngToLayerPoint(d.LatLng))
         return `translate(${lMap.latLngToLayerPoint(d.LatLng).x},
                   ${lMap.latLngToLayerPoint(d.LatLng).y})`;
       })
@@ -324,37 +329,40 @@ Stop and start the development process in terminal after you have added your tok
     }
   }
 
-  // NB: is this a function to be removed for future features?
-  /**
-   * Creats a marker for an eventPoint along a path
-   * @param {Object} eventPoint: data for an evenPoint - time, loc, tags, etc
-   * @param {number} step: the portion of the entire path this event corresponds to
-   */
-  function createPathEventMarker(eventPoint, step) {
-    const {
-      latitude,
-      longitude
-    } = getEventLocation(eventPoint);
-    const pathEventMarker = L.circleMarker(
-      [latitude, longitude], {
-        color: ui.colors.DARKGREY,
-        fill: ui.colors.DARKGREY,
-        weight: 2,
-        fillOpacity: 0.6,
-        radius: 10 * step,
-      },
-    );
 
-    // Add marker event handlers
-    pathEventMarker.bindPopup('');
-    pathEventMarker.on('popupopen', () => {
-      select([eventPoint]);
-    });
-    pathEventMarker.on('popupclose', () => {
-      select();
-    });
+   const getCoords = (d) => {
+     d.LatLng = new L.LatLng(+d.latitude, +d.longitude);
+     return {
+       x: lMap.latLngToLayerPoint(d.LatLng).x,
+       y: lMap.latLngToLayerPoint(d.LatLng).y
+     }
+   }
 
-    return pathEventMarker;
+   const sequenceLine = d3.line()
+     .x(d => getCoords(d).x)
+     .y(d => getCoords(d).y)
+
+   /**
+    * Clears existing narrative layer
+    * Renders all narrativ as paths
+    * Adds eventlayer to map
+    */
+
+  function renderNarratives() {
+    const narrativesDom = g.selectAll('.narrative')
+      .data(domain.narratives.map(d => d.steps))
+
+    narrativesDom
+      .exit()
+      .remove();
+
+    narrativesDom
+      .enter().append('path')
+      .attr('class', 'narrative')
+      .attr('d', sequenceLine)
+      .style('stroke-width', 3)
+      .style('stroke', '#fff')
+      .style('fill', 'none');
   }
 
   /**
@@ -366,6 +374,7 @@ Stop and start the development process in terminal after you have added your tok
 
     if (hash(domain) !== hash(newDomain)) {
       domain.locations = newDomain.locations;
+      domain.narratives = newDomain.narratives;
       domain.categoryGroups = newDomain.categoryGroups;
       domain.sites = newDomain.sites;
       renderDomain();
@@ -386,6 +395,7 @@ Stop and start the development process in terminal after you have added your tok
    function renderDomain () {
      renderSites();
      renderEvents();
+     renderNarratives();
    }
   function renderSelectedAndHighlight () {
     renderSelected();