diff --git a/src/js/map/map.js b/src/js/map/map.js
index 8d84554..4f5727a 100644
--- a/src/js/map/map.js
+++ b/src/js/map/map.js
@@ -342,6 +342,13 @@ Stop and start the development process in terminal after you have added your tok
     * Adds eventlayer to map
     */
 
+  function getNarrativeStyle(narrativeId) {
+    const styleName = narrativeId && narrativeId in narrativeProps
+      ? narrativeId
+      : 'default';
+    return narrativeProps[styleName];
+  }
+
   function renderNarratives() {
     const narrativesDom = g.selectAll('.narrative')
       .data(domain.narratives.map(d => d.steps))
@@ -356,20 +363,19 @@ Stop and start the development process in terminal after you have added your tok
       .attr('class', 'narrative')
       .attr('d', sequenceLine)
       .style('stroke-width', d => {
-        styleName = d[0].narrative && d[0].narrative in narrativeProps
-          ? d[0].narrative
-          : 'default'
-        const n = d[0].narrative;
-        return (n) ? narrativeProps[styleName].strokeWidth : 3;
+        // Note: [0] is a non-elegant way to get the narrative id out of the first
+        // event in the narrative sequence
+        const styleProps = getNarrativeStyle(d[0].narrative);
+        return styleProps.strokeWidth;
       })
       .style('stroke-dasharray', d => {
-        const n = d[0].narrative;
-        if (narrativeProps[styleName].style === 'dotted') return "2px 5px";
-        return 'none';
+        const styleProps = getNarrativeStyle(d[0].narrative);
+        console.log(styleProps)
+        return (styleProps.style === 'dotted') ? "2px 5px" : 'none';
       })
       .style('stroke', d => {
-        const n = d[0].narrative;
-        return (n) ? narrativeProps[styleName].stroke : '#fff';
+        const styleProps = getNarrativeStyle(d[0].narrative);
+        return styleProps.stroke;
       })
       .style('fill', 'none');
   }
diff --git a/src/js/timeline/timeline.js b/src/js/timeline/timeline.js
index 27e01dc..ae5f245 100644
--- a/src/js/timeline/timeline.js
+++ b/src/js/timeline/timeline.js
@@ -25,7 +25,7 @@ export default function(app, ui, methods) {
   let transitionDuration = 500;
 
   // Dimension of the client
-  const WIDTH_CONTROLS = 180;
+  const WIDTH_CONTROLS = 100;
   const boundingClient = d3.select(`#${ui.dom.timeline}`).node().getBoundingClientRect();
   let WIDTH = boundingClient.width - WIDTH_CONTROLS;
   const HEIGHT = 140;
@@ -121,16 +121,6 @@ export default function(app, ui, methods) {
   dom.backwards.append('circle');
   dom.backwards.append('path');
 
-  dom.playGroup = dom.controls.append('g');
-  dom.playGroup.append('circle');
-
-  dom.play = dom.playGroup.append('g');
-  dom.play.append('path');
-
-  dom.pause = dom.playGroup.append('g').style('opacity', 0);
-  dom.pause.append('rect');
-  dom.pause.append('rect');
-
   dom.zooms = dom.controls.append('g');
 
   dom.zooms.selectAll('.zoom-level-button')
@@ -219,28 +209,6 @@ export default function(app, ui, methods) {
   }
   addResizeListener();
 
-  /**
-   * PLAY FUNCTIONALITY
-   */
-  function stopBrushTransition() {
-    clearInterval(window.playInterval);
-    isPlaying = false;
-    dom.play.style('opacity', 1);
-    dom.pause.style('opacity', 0);
-  }
-
-  /**
-   * START PLAY SERIES OF TRANSITIONS
-   */
-  function playBrushTransition() {
-    isPlaying = true;
-    dom.play.style('opacity', 0);
-    dom.pause.style('opacity', 1);
-    window.playInterval = setInterval(() => {
-      moveTime('forward');
-    }, playDuration);
-  }
-
   /**
    * Return which color event circle should be based on incident type
    * @param {object} eventPoint data object
@@ -510,20 +478,6 @@ export default function(app, ui, methods) {
       .attr('d', d3.symbol().type(d3.symbolTriangle).size(80))
       .attr('transform', `translate(${scale.x.range()[1] - 20}, 62)rotate(90)`);
 
-    // These controls on separate svg
-    dom.playGroup.select('circle')
-      .attr('transform', 'translate(135, 60)rotate(90)')
-      .attr('r', 25);
-
-    dom.play.select('path')
-      .attr('d', d3.symbol().type(d3.symbolTriangle).size(260))
-      .attr('transform', 'translate(135, 60)rotate(90)');
-
-    dom.pause.selectAll('rect')
-      .attr('transform', (d, i) => `translate(${125 + (i * 15)}, 47)`)
-      .attr('height', 25)
-      .attr('width', 5);
-
     dom.zooms.selectAll('text')
       .text(d => d.label)
       .attr('x', 60)
@@ -536,11 +490,6 @@ export default function(app, ui, methods) {
     dom.backwards
       .on('click', () => moveTime('backwards'));
 
-    dom.playGroup
-      .on('click', () => {
-        return (isPlaying) ? stopBrushTransition() : playBrushTransition();
-      });
-
     dom.zooms.selectAll('text')
       .on('click', zoom => applyZoom(zoom));
   }
diff --git a/src/store/initial.js b/src/store/initial.js
index b675188..abdf16c 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -127,7 +127,7 @@ const initial = {
         narrative_1: {
           style: 'solid',                  // ['dotted', 'solid']
           opacity: 0.4,                     // range between 0 and 1
-          stroke: 'red',               // Any hex or rgb code
+          stroke: 'yellow',               // Any hex or rgb code
           strokeWidth: 2
         }
       }