diff --git a/src/common/global.js b/src/common/global.js
index a0165ce..e6da865 100644
--- a/src/common/global.js
+++ b/src/common/global.js
@@ -1,4 +1,4 @@
-const colors = {
+export const colors = {
   fa_red: '#eb443e',
   yellow: '#ffd800',
   black: '#000',
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 2fe01a7..a6b3b9a 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -316,6 +316,7 @@ class Timeline extends React.Component {
                 onApplyZoom={this.onApplyZoom}
               />
               <Markers
+                dims={dims}
                 selected={this.props.app.selected}
                 getEventX={this.getDatetimeX}
                 getCategoryY={this.state.scaleY}
@@ -331,6 +332,7 @@ class Timeline extends React.Component {
                 getCategoryColor={this.props.methods.getCategoryColor}
                 transitionDuration={this.state.transitionDuration}
                 onSelect={this.props.methods.onSelect}
+                dims={dims}
               />
             </svg>
           </div>
diff --git a/src/components/TimelineCategories.jsx b/src/components/TimelineCategories.jsx
index 7d41383..acac286 100644
--- a/src/components/TimelineCategories.jsx
+++ b/src/components/TimelineCategories.jsx
@@ -26,11 +26,17 @@ class TimelineCategories extends React.Component {
 
   renderCategory (category, idx) {
     const dims = this.props.dims
+    const strokeWidth = dims.trackHeight / (this.props.categories.length + 1)
+
     return (
-      <g class='tick' opacity='1' transform={`translate(0,${this.props.getCategoryY(category.category)})`}>
+      <React.Fragment>
+      <g class='tick' style={{strokeWidth}} opacity='0.5' transform={`translate(0,${this.props.getCategoryY(category.category)})`}>
         <line x1={dims.margin_left} x2={dims.width - dims.width_controls} />
+      </g>
+      <g class='tick' opacity='1' transform={`translate(0,${this.props.getCategoryY(category.category)})`}>
         <text x={dims.margin_left - 5} dy='0.32em'>{category.category}</text>
       </g>
+      </React.Fragment>
     )
   }
 
diff --git a/src/components/presentational/Timeline/DatetimeBar.js b/src/components/presentational/Timeline/DatetimeBar.js
index 7703f3a..9660baf 100644
--- a/src/components/presentational/Timeline/DatetimeBar.js
+++ b/src/components/presentational/Timeline/DatetimeBar.js
@@ -5,6 +5,8 @@ export default ({
   events,
   x,
   y,
+  width,
+  height,
   onSelect,
   styleProps,
   extraRender
@@ -15,7 +17,7 @@ export default ({
     x={x}
     y={y}
     style={styleProps}
-    width={4}
-    height={55}
+    width={width}
+    height={height}
   />
 )
diff --git a/src/components/presentational/Timeline/DatetimeDot.js b/src/components/presentational/Timeline/DatetimeDot.js
index 505701e..1eff3e5 100644
--- a/src/components/presentational/Timeline/DatetimeDot.js
+++ b/src/components/presentational/Timeline/DatetimeDot.js
@@ -5,6 +5,7 @@ export default ({
   events,
   x,
   y,
+  r,
   onSelect,
   styleProps,
   extraRender
@@ -15,6 +16,6 @@ export default ({
     cx={x}
     cy={y}
     style={styleProps}
-    r={5}
+    r={r}
   />
 )
diff --git a/src/components/presentational/Timeline/Events.js b/src/components/presentational/Timeline/Events.js
index b6c6e34..ce56c3b 100644
--- a/src/components/presentational/Timeline/Events.js
+++ b/src/components/presentational/Timeline/Events.js
@@ -32,7 +32,8 @@ const TimelineEvents = ({
   getCategoryColor,
   onSelect,
   transitionDuration,
-  styleDatetime
+  styleDatetime,
+  dims
 }) => {
   function renderDatetime (datetime) {
     if (narrative) {
@@ -78,6 +79,7 @@ const TimelineEvents = ({
       }
 
       const extraRender = customStyles[1]
+      const eventWidth = 5
 
       return (
         <g className='datetime'>
@@ -87,6 +89,7 @@ const TimelineEvents = ({
             events={locatedEvents}
             x={getDatetimeX(datetime)}
             y={getCategoryY(dot.category)}
+            r={eventWidth}
             styleProps={locatedProps}
             extraRender={extraRender}
           />}
@@ -95,7 +98,9 @@ const TimelineEvents = ({
             category={dot.category}
             events={unlocatedEvents}
             x={getDatetimeX(datetime)}
-            y={40}
+            y={dims.margin_top}
+            width={eventWidth}
+            height={dims.trackHeight}
             styleProps={unlocatedProps}
           />}
           {extraRender ? extraRender() : null}
diff --git a/src/components/presentational/Timeline/Markers.js b/src/components/presentational/Timeline/Markers.js
index 80b628b..d3a0932 100644
--- a/src/components/presentational/Timeline/Markers.js
+++ b/src/components/presentational/Timeline/Markers.js
@@ -1,7 +1,14 @@
 import React from 'react'
 import colors from '../../../common/global.js'
 
-const TimelineMarkers = ({ styles, getEventX, getCategoryY, transitionDuration, selected }) => {
+const TimelineMarkers = ({
+  styles,
+  getEventX,
+  getCategoryY,
+  transitionDuration,
+  selected,
+  dims
+}) => {
   function renderMarker (event) {
     const isLocated = !!event.latitude && !!event.longitude
     return isLocated ? (
@@ -27,13 +34,14 @@ const TimelineMarkers = ({ styles, getEventX, getCategoryY, transitionDuration,
       <rect
         className='timeline-marker'
         x={0}
-        y={0}
+        y={-dims.margin_top}
         width={4}
-        height={55}
+        height={dims.trackHeight}
         stroke={styles ? styles.stroke : colors.primaryHighlight}
         stroke-opacity='1'
         stroke-width={styles ? styles['stroke-width'] : 2}
         stroke-linecap=''
+        stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
         style={{
           'transform': `translate(${getEventX(event)}px, 40px)`,
           '-webkit-transition': `transform ${transitionDuration / 1000}s ease`,
diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss
index 7789b7e..1809680 100644
--- a/src/scss/timeline.scss
+++ b/src/scss/timeline.scss
@@ -174,8 +174,7 @@ $timeline-height: 170px;
 
       .yAxis {
         .tick line {
-          stroke: $midwhite;
-          stroke-width: 15px;
+          stroke: white; // $midwhite;
           cursor: -webkit-grab;
           cursor: -moz-grab;
         }
diff --git a/src/store/initial.js b/src/store/initial.js
index 1d1cbc6..a0690b8 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -64,7 +64,7 @@ const initial = {
         width: 0,
         width_controls: 100,
         height_controls: 115,
-        margin_left: 200,
+        margin_left: 100,
         margin_top: 20,
         trackHeight: 80
       },