diff --git a/.eslintrc.json b/.eslintrc.json
index f6412c3242..9217f5c709 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -12,6 +12,9 @@
   "settings": {
     "import/resolver": "webpack"
   },
+  "globals": {
+    "API_HOST": true
+  },
   "extends": "airbnb",
   "rules": {
     "max-len": ["error", 150],
diff --git a/index.html b/index.html
index d2660d51a1..03990ba2b1 100644
--- a/index.html
+++ b/index.html
@@ -43,5 +43,4 @@
     </script>
     <script src="/build/bundle.js"></script>
   </body>
-
 </html>
diff --git a/package.json b/package.json
index 431ba7bf4b..f29dd3b8bb 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "flexboxgrid": "6.3.1",
     "heatmap.js": "2.0.5",
     "isomorphic-fetch": "2.2.1",
+    "lodash": "^4.16.4",
     "material-ui": "0.16.1",
     "node-uuid": "1.4.7",
     "postcss-browser-reporter": "0.5.0",
@@ -38,8 +39,10 @@
     "postcss-loader": "1.1.1",
     "postcss-reporter": "2.0.0",
     "react": "15.3.2",
+    "react-addons-css-transition-group": "^15.3.2",
     "react-dom": "15.3.2",
     "react-flexbox-grid": "0.10.2",
+    "react-measure": "^1.3.1",
     "react-redux": "4.4.5",
     "react-router": "3.0.0",
     "react-router-redux": "4.0.7",
@@ -50,6 +53,7 @@
     "redux-responsive": "3.1.5",
     "redux-thunk": "2.1.0",
     "reselect": "2.5.4",
+    "seamless-immutable": "^6.3.0",
     "webpack": "2.1.0-beta.22",
     "webpack-dashboard": "0.2.0",
     "webpack-dev-server": "1.16.2",
@@ -71,6 +75,8 @@
     "eslint-plugin-react": "6.6.0",
     "file-loader": "0.9.0",
     "json-loader": "0.5.4",
+    "react-addons-perf": "^15.3.2",
+    "react-perf-tool": "^0.1.7",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7"
   },
diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index a7362aa13f..956f0f21f1 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -20,6 +20,8 @@ const muiTheme = {
   palette: {
     textColor: palette.textColorPrimary,
     primary1Color: palette.blue,
+    canvasColor: palette.primarySurfaceColor,
+    borderColor: palette.dividerColor,
   },
   button: { height: 38 },
 };
diff --git a/src/components/Match/Match.css b/src/components/Match/Match.css
index a963dfa609..7210c1ba3e 100644
--- a/src/components/Match/Match.css
+++ b/src/components/Match/Match.css
@@ -1,5 +1,14 @@
 @import "../palette.css";
 
+:root {
+  --ward-log-height: 50px;
+}
+
+:export {
+  wardLogRowOddSurfaceColor: var(--tableRowOddSurfaceColor);
+  wardLogRowEvenSurfaceColor: var(--tableRowEvenSurfaceColor);
+}
+
 .Header {
   text-align: center;
   display: block;
@@ -148,6 +157,117 @@
   vertical-align: middle;
 }
 
+.wardLog {
+  width: 100%;
+  font-size: var(--fontSizeSmall);
+
+  & .wardLogHeader {
+    background-color: var(--tableHeaderSurfaceColor);
+    border-bottom: 1px solid var(--dividerLightColor);
+    text-transform: uppercase;
+    height: 58px;
+  }
+
+  & .wardLogList {
+    padding: 0;
+    margin: 0;
+  }
+
+  & .timespan {
+    text-align: right;
+  }
+}
+
+.wardLogItem {
+  height: var(--ward-log-height);
+  background: rgb(31, 33, 45);
+  border-bottom: 1px solid var(--dividerColor);
+}
+
+.trans-table-row-enter {
+  height: 0;
+  opacity: 0;
+
+  &.trans-table-row-enter-active {
+    height: var(--ward-log-height);
+    opacity: 1;
+    transition: height 300ms ease, opacity 300ms ease;
+  }
+}
+
+.trans-table-row-leave {
+  height:  var(--ward-log-height);
+  opacity: 1;
+
+  &.trans-table-row-leave-active {
+    height: 0px;
+    opacity: 0;
+    transition: height 300ms ease, opacity 300ms ease;
+  }
+}
+
+.ward-pin-enter {
+  opacity: 0;
+  
+  &.ward-pin-enter-active {
+    opacity: 1;
+    transition: opacity 150ms ease;
+  }
+}
+
+.ward-pin-leave {
+  opacity: 1;
+  
+  &.ward-pin-leave-active {
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+}
+
+.sliderTicks {
+  position: relative;
+  height: 30px;
+  margin-top: 33px;
+  margin-bottom: -33px;
+  font-size: var(--fontSizeTiny);
+  border-color: var(--sliderTicksColor);
+  color: var(--sliderTicksColor);
+  
+  & .sliderTick {
+    position: absolute;
+    display: inline-block;
+    height: 100%;
+    padding: 0 0.4em;
+    border-width: 0px;
+    border-color: inherit;
+    border-style: solid;
+    border-left-width: 1px;
+    cursor: pointer;
+
+    transition: color 150ms ease, border-color 150ms ease;
+
+    &.active {
+      border-color: var(--sliderTicksColorActive);
+      color: var(--sliderTicksColorActive);
+    }
+  }
+}
+
+.wardLogPlayerFilter {
+  padding: 0 .5rem;
+  font-size: var(--fontSizeSmall);
+
+  & .filterHeader {
+    padding: .5rem;
+    border-bottom: 1px solid var(--dividerLightColor);
+  }
+
+  & .filterRow {
+    padding: .5em;
+    margin: 0 0;
+  }
+}
+
 .cosmetics {
   display: inline-block;
   margin: 5px;
@@ -222,3 +342,4 @@
     }
   }
 }
+
diff --git a/src/components/Match/Vision/PlayerFilter.jsx b/src/components/Match/Vision/PlayerFilter.jsx
new file mode 100644
index 0000000000..16a4521bf2
--- /dev/null
+++ b/src/components/Match/Vision/PlayerFilter.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  Row,
+  Col,
+} from 'react-flexbox-grid';
+import Avatar from 'material-ui/Avatar';
+import Button from 'material-ui/RaisedButton';
+import {
+  grey800 as filterOff,
+  blueGrey700 as filterOn,
+} from 'material-ui/styles/colors';
+import styles from '../Match.css'; // extract filters from there
+
+import { heroTd } from '../matchColumns';
+
+
+export default class PlayerFilter extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.getObserverCount = () => this.props.player.obs_log.length;
+    this.getSentryCount = () => this.props.player.sen_log.length;
+    this.getMuiThemeProps = () => ({
+      fullWidth: true,
+      disabledBackgroundColor: filterOff,
+    });
+  }
+
+  generateFilterKey(type) {
+    return `${this.props.player.player_slot}-${type}`;
+  }
+
+  render() {
+    const {
+      player,
+      onFilterClick,
+    } = this.props;
+    const obsCount = this.getObserverCount();
+    const senCount = this.getSentryCount();
+    const [opacityOn, opacityOff] = [1, 0.4];
+    return (
+      <Row
+        className={styles.filterRow}
+        middle="xs"
+        between="xs"
+      >
+        <Col xs={12} sm={7}>
+          <Row xs>
+            <Col>{heroTd(player)}</Col>
+          </Row>
+        </Col>
+        <Col xs={12} sm={5}>
+          <Row>
+            <Col xs>
+              <Button
+                {...this.getMuiThemeProps()}
+                label={obsCount}
+                disabled={!obsCount}
+                backgroundColor={this.generateFilterKey('observer') in this.props.activeFilters ? filterOff : filterOn}
+                style={{ opacity: obsCount > 0 ? opacityOn : opacityOff }}
+                onClick={() => onFilterClick(this.generateFilterKey('observer'), player.player_slot, 'observer')}
+                icon={<Avatar size={24} src={`${API_HOST}/apps/dota2/images/items/ward_observer_lg.png`} />}
+              />
+            </Col>
+            <Col xs>
+              <Button
+                {...this.getMuiThemeProps()}
+                label={senCount}
+                disabled={!senCount}
+                backgroundColor={this.generateFilterKey('sentry') in this.props.activeFilters ? filterOff : filterOn}
+                style={{ opacity: senCount > 0 ? opacityOn : opacityOff }}
+                onClick={() => onFilterClick(this.generateFilterKey('sentry'), player.player_slot, 'sentry')}
+                icon={<Avatar size={24} src={`${API_HOST}/apps/dota2/images/items/ward_sentry_lg.png`} />}
+              />
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    );
+  }
+}
diff --git a/src/components/Match/VisionMap.jsx b/src/components/Match/VisionMap.jsx
index 611cfed2cb..ddd4aab804 100644
--- a/src/components/Match/VisionMap.jsx
+++ b/src/components/Match/VisionMap.jsx
@@ -1,137 +1,99 @@
 import React from 'react';
-import Checkbox from 'material-ui/Checkbox';
-import Visibility from 'material-ui/svg-icons/action/visibility';
-import VisibilityOff from 'material-ui/svg-icons/action/visibility-off';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import {
-  isRadiant,
-  // transformations,
-  unpackPositionData,
+  gameCoordToUV,
+  extractTransitionClasses,
 } from 'utility';
-import Table from 'components/Table';
-import {
-  Row,
-  Col,
-} from 'react-flexbox-grid';
-// import heroes from 'dotaconstants/json/heroes.json';
-import strings from 'lang';
-import {
-  heroTdColumn,
-} from './matchColumns';
+import Measure from 'react-measure';
+import styles from './Match.css';
 
-const obsWard = (style, stroke, iconSize) => (<svg style={style} width={iconSize} height={iconSize} xmlns="http://www.w3.org/2000/svg">
-  <g>
-    <title>Observer</title>
-    <circle fill="#ffff00" strokeWidth="5" stroke={stroke} r={iconSize * 0.4} cy={iconSize / 2} cx={iconSize / 2} fillOpacity="0.4" />
-  </g>
-  <defs>
-    <filter id="_blur">
-      <feGaussianBlur stdDeviation="0.1" in="SourceGraphic" />
-    </filter>
-  </defs>
-</svg>);
+// with the actual game size, the width parameters is optional
+const style = (width, iconSize, ward) => {
+  const gamePos = gameCoordToUV(ward.x, ward.y);
+  return {
+    position: 'absolute',
+    top: ((width / 127) * gamePos.y) - (iconSize / 2),
+    left: ((width / 127) * gamePos.x) - (iconSize / 2),
+  };
+};
 
-const senWard = (style, stroke, iconSize) => (<svg style={style} width={iconSize} height={iconSize} xmlns="http://www.w3.org/2000/svg">
-  <g>
-    <title>Sentry</title>
-    <circle fill="#0000ff" strokeWidth="5" stroke={stroke} r={iconSize * 0.4} cy={iconSize / 2} cx={iconSize / 2} fillOpacity="0.4" />
-  </g>
-  <defs>
-    <filter id="_blur">
-      <feGaussianBlur stdDeviation="0.1" in="SourceGraphic" />
-    </filter>
-  </defs>
-</svg>);
+const WardLogPin = ({ width, iconSize, log }) => {
+  const stroke = log.entered.player_slot < 5 ? styles.green : styles.red;
+  const fill = log.type === 'observer' ? styles.yelor : styles.blue;
+  return (
+    <svg
+      style={style(width, iconSize, log.entered)}
+      width={iconSize}
+      height={iconSize}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        <title>Observer</title>
+        <circle
+          fill={fill}
+          strokeWidth="2"
+          stroke={stroke}
+          r={iconSize * 0.4}
+          cy={iconSize / 2}
+          cx={iconSize / 2}
+          fillOpacity="0.4"
+        />
+      </g>
+      <defs>
+        <filter id="_blur">
+          <feGaussianBlur stdDeviation="0.1" in="SourceGraphic" />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
 
 // TODO Hero icon on ward circles?
 class VisionMap extends React.Component {
-  componentWillMount() {
-    this.setState({
-      enabledIndex: {},
-    });
+  componentDidMount() {
+    window.addEventListener('resize', () => this.forceUpdate());
   }
-  super() {
-    this.updateMap = this.updateMap.bind(this);
+
+  shouldComponentUpdate(newProps) {
+    return newProps.wardsLog.length !== this.props.wardsLog.length;
   }
-  updateMap(event, checked, index) {
-    const newEnabledIndex = Object.assign({}, this.state.enabledIndex, {
-      [index]: checked,
-    });
-    this.setState(Object.assign({}, this.state, {
-      enabledIndex: newEnabledIndex,
-    }));
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', () => this.forceUpdate());
   }
-  render() {
-    const match = this.props.match;
-    const width = this.props.width;
-    const enabledIndex = this.state.enabledIndex;
+
+  renderWardPins(width) {
     const iconSize = width / 12;
-    const style = ward => ({
-      position: 'absolute',
-      top: ((width / 127) * ward.y) - (iconSize / 2),
-      left: ((width / 127) * ward.x) - (iconSize / 2),
-    });
-    const obsIcons = [];
-    const senIcons = [];
-    Object.keys(enabledIndex).forEach((index) => {
-      if (enabledIndex[index]) {
-        if (match && match.players && match.players[index]) {
-          const obs = unpackPositionData(match.players[index].obs) || [];
-          const sen = unpackPositionData(match.players[index].sen) || [];
-          const stroke = isRadiant(match.players[index].player_slot) ? 'green' : 'red';
-          obs.forEach(ward => obsIcons.push(obsWard(style(ward), stroke, iconSize)));
-          sen.forEach(ward => senIcons.push(senWard(style(ward), stroke, iconSize)));
-        }
-      }
-    });
-    return (<Row>
-      <Col md={6}>
-        <div
-          style={{
-            position: 'relative',
-            top: 0,
-            left: 0,
-            width: this.props.width,
-          }}
-        >
-          <img width={this.props.width} src="/assets/images/map.png" role="presentation" />
-          {obsIcons}
-          {senIcons}
-        </div>
-      </Col>
-      <Col md={6}>
-        <Table
-          data={this.props.match.players}
-          columns={[
-            { displayFn: row => (<Checkbox
-              checkedIcon={<Visibility />}
-              uncheckedIcon={<VisibilityOff />}
-              checked={this.state.enabledIndex[this.props.match.players.findIndex(player => player.player_slot === row.player_slot)]}
-              onCheck={(event, checked) =>
-              this.updateMap(event, checked, this.props.match.players.findIndex(player => player.player_slot === row.player_slot))}
-              label=""
-            />) },
-            heroTdColumn,
-            {
-              displayName: strings.th_ward_observer,
-              field: 'obs_log',
-              displayFn: (row, col, field) => (field && field.length),
-            },
-            {
-              displayName: strings.th_ward_sentry,
-              field: 'sen_log',
-              displayFn: (row, col, field) => (field && field.length),
-            },
-          ]}
-        />
-      </Col>
-    </Row>);
+    return this.props.wardsLog.map(w => <WardLogPin key={w.key} width={width} iconSize={iconSize} log={w} />);
   }
-}
 
-// TODO use defaultprops and export directly
-export default function ({
-  match,
-  width = 600,
-}) {
-  return <VisionMap match={match} width={width} />;
+  render() {
+    const transition = extractTransitionClasses(styles);
+    return (
+      <Measure>
+        {dimension => (
+          <ReactCSSTransitionGroup
+            component="div"
+            transitionName={transition('ward-pin')}
+            transitionEnterTimeout={150}
+            transitionLeaveTimeout={150}
+            style={{
+              position: 'relative',
+              height: dimension.width,
+              background: 'url("/assets/images/map.png")',
+              backgroundSize: 'contain',
+            }}
+          >
+            {this.renderWardPins(dimension.width)}
+          </ReactCSSTransitionGroup>
+         )}
+      </Measure>
+    );
+  }
 }
+
+VisionMap.defaultProps = {
+  width: 400,
+};
+
+export default VisionMap;
diff --git a/src/components/Match/VisionPage.jsx b/src/components/Match/VisionPage.jsx
new file mode 100644
index 0000000000..5d0b47ea77
--- /dev/null
+++ b/src/components/Match/VisionPage.jsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import {
+  Row,
+  Col,
+} from 'react-flexbox-grid';
+import { formatSeconds } from 'utility';
+import Paper from 'material-ui/Paper';
+import Slider from 'material-ui/Slider';
+import _ from 'lodash/fp';
+import strings from 'lang';
+
+import VisionMap from './VisionMap' ;
+import WardLog from './WardLog';
+import PlayerFilter from './Vision/PlayerFilter';
+import styles from './Match.css';
+
+const SliderTicks = props => (
+  <div {...props}>
+    {props.ticks.map((tick) => {
+      const [t, min, max] = [tick, props.min, props.max];
+      const percent = 100 * ((t - min) / (max - min));
+      const cls = [styles.sliderTick];
+      if (tick <= props.value) { cls.push(styles.active); }
+
+      return (
+        <a key={tick} onClick={() => props.onTickClick(tick)} className={cls.join(' ')} style={{ left: `${percent}%` }}>
+          {formatSeconds(tick)}
+        </a>
+      );
+    })}
+  </div>
+);
+
+// remove this component
+const PlayersFilter = ({ activeFilters, players, onFilterClick }) => (
+  <Paper>
+    {players.map(p => <PlayerFilter player={p} activeFilters={activeFilters} onFilterClick={onFilterClick} />)}
+  </Paper>
+);
+
+const PipelineFilter = (filters, data) => {
+  const filtered = filters.map(f => data.filter(f))
+                          .reduce((o, v) => o.concat(v), []);
+  return _.differenceWith((x, y) => x === y, data, filtered);
+};
+
+const FixedPlayersFilter = PlayersFilter;
+
+class VisionPage extends React.Component {
+  static hideWardLog(playerSlot, type) {
+    return l => l.entered.player_slot === playerSlot && l.type === type;
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentTick: -90,
+      min: -90,
+      max: props.match.duration,
+      from: 0,
+      to: this.props.match.wards_log.length,
+      wardsLog: props.match.wards_log,
+      filters: {},
+    };
+
+    this.ticks = this.computeTick();
+    this.findPivot = value => _.flow(_.map(x => x.entered.time),
+                                     _.sortedIndex(value))(this.state.wardsLog);
+    this.handleViewportChange = _.debounce(50, this.viewportChange);
+  }
+
+  computeTick() {
+    const interval = 10 * 60; // every 10 minutes interval
+    return _.rangeStep(interval, 0, this.props.match.duration);
+  }
+
+  viewportChange(value) {
+    this.setState({ currentTick: value, from: this.findPivot(value) });
+  }
+
+  visibleData() {
+    return PipelineFilter(_.values(this.state.filters),
+                          this.state.wardsLog.slice(this.state.from));
+  }
+
+  togglePlayerFilter(name, filter) {
+    if (name in this.state.filters) {
+      const oldFilters = Object.assign({}, this.state.filters);
+      delete oldFilters[name];
+      this.setState({ filters: oldFilters });
+    } else {
+      const newFilter = {};
+      newFilter[name] = filter;
+      this.setState({ filters: Object.assign({}, this.state.filters, newFilter) });
+    }
+  }
+
+  render() {
+    const visibleWards = this.visibleData();
+    const playerFilterClick = (filterKey, playerSlot, type) => this.togglePlayerFilter(filterKey, VisionPage.hideWardLog(playerSlot, type));
+    return (
+      <div>
+        <Row center="md">
+          <Col xs={12} md={4}>
+            <VisionMap wardsLog={visibleWards} />
+          </Col>
+          <Col xs={12} md={8}>
+            <Row>
+              <Col xs={12} md={6} lg={12} className={styles.wardLogPlayerFilter}>
+                <Col xs className={styles.filterHeader}>
+                  {strings.general_radiant}
+                </Col>
+                {<FixedPlayersFilter
+                  activeFilters={this.state.filters}
+                  onFilterClick={playerFilterClick}
+                  players={this.props.match.players.slice(0, 5)}
+                />
+                }
+              </Col>
+              <Col xs={12} md={6} lg={12} className={styles.wardLogPlayerFilter}>
+                <Col xs className={styles.filterHeader}>
+                  {strings.general_dire}
+                </Col>
+                {<FixedPlayersFilter
+                  activeFilters={this.state.filters}
+                  onFilterClick={playerFilterClick}
+                  players={this.props.match.players.slice(5)}
+                />
+                }
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs>
+            <SliderTicks
+              value={this.state.currentTick}
+              min={this.state.min}
+              max={this.state.max}
+              className={styles.sliderTicks}
+              onTickClick={tick => this.handleViewportChange(tick)}
+              ticks={this.ticks}
+            />
+            <Slider
+              min={this.state.min}
+              max={this.state.max}
+              value={this.state.currentTick}
+              step={5}
+              disableFocusRipple
+              onChange={(e, value) => this.handleViewportChange(value)}
+            />
+          </Col>
+        </Row>
+        <WardLog
+          match={this.props.match}
+          wardsLog={visibleWards}
+        />
+      </div>
+    );
+  }
+}
+
+export default VisionPage;
diff --git a/src/components/Match/WardLog.jsx b/src/components/Match/WardLog.jsx
new file mode 100644
index 0000000000..5df6051fc0
--- /dev/null
+++ b/src/components/Match/WardLog.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { threshold, formatSeconds, extractTransitionClasses } from 'utility';
+import { Row, Col } from 'react-flexbox-grid';
+// import heroes from 'dotaconstants/json/heroes.json';
+import Fixed from 'utility/components/Fixed';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import strings from 'lang';
+
+import { heroTd } from './matchColumns';
+import styles from './Match.css';
+
+
+const durationObserverColor = threshold(0, [121, 241, 500], [styles.red, styles.yelor, styles.green]);
+
+const RowItem = ({ style, row, match }) => {
+  const wardKiller = (row.left && row.left.player1) ? heroTd(match.players[row.left.player1]) : '-';
+  const duration = row.left ? row.left.time - row.entered.time : '-';
+  const durationColor = row.type === 'observer' ? durationObserverColor(duration) : 'inherit';
+  const rowStyle = { ...style,
+    backgroundColor: row.key % 2 === 0
+                   ? styles.wardLogRowEvenSurfaceColor
+                   : styles.wardLogRowOddSurfaceColor,
+  };
+  return (
+    <li>
+      <Row component="li" className={styles.wardLogItem} style={rowStyle} middle="xs">
+        <Col xs={1}>
+          <img height="29" src={`${API_HOST}/apps/dota2/images/items/ward_${row.type}_lg.png`} role="presentation" />
+        </Col>
+        <Col xs={4}>
+          {heroTd(match.players[row.player])}
+        </Col>
+        <Col xs={1} className={styles.timespan}>{formatSeconds(row.entered.time)}</Col>
+        <Col xs={1} className={styles.timespan}>{formatSeconds(row.left && row.left.time) || '-'}</Col>
+        <Col xs={1} className={styles.timespan} style={{ color: durationColor }}>{formatSeconds(duration)}</Col>
+        <Col xs={4}>{wardKiller}</Col>
+      </Row>
+    </li>
+  );
+};
+const PureRowItem = Fixed(RowItem);
+
+// i18n column names
+const columns = ['type', 'owner', 'entered_at', 'left_at', 'duration', 'killed_by'].map(h => `ward_log_${h}`);
+const WardLog = (props) => {
+  const transition = extractTransitionClasses(styles);
+  return (
+    <Col className={styles.wardLog} xs>
+      <Row className={styles.wardLogHeader} middle="xs">
+        <Col xs={1}>{strings[columns[0]]}</Col>
+        <Col xs>{strings[columns[1]]}</Col>
+        <Col className={styles.timespan} xs={1}>{strings[columns[2]]}</Col>
+        <Col className={styles.timespan} xs={1}>{strings[columns[3]]}</Col>
+        <Col className={styles.timespan} xs={1}>{strings[columns[4]]}</Col>
+        <Col xs>{strings[columns[5]]}</Col>
+      </Row>
+      <ReactCSSTransitionGroup
+        className={styles.wardLogList}
+        style={{ width: '100%' }}
+        component="ul"
+        transitionName={transition('trans-table-row')}
+        transitionEnterTimeout={300}
+        transitionLeaveTimeout={300}
+      >
+        {props.wardsLog.map((log, index) =>
+          <PureRowItem key={log.key} row={log} match={props.match} index={index} />,
+         )}
+      </ReactCSSTransitionGroup>
+    </Col>
+  );
+};
+
+
+// TODO use defaultprops and export directly
+export default function ({
+  match,
+  wardsLog,
+  width = 600,
+}) {
+  return <WardLog match={match} wardsLog={wardsLog} width={width} />;
+}
diff --git a/src/components/Match/matchPages.jsx b/src/components/Match/matchPages.jsx
index db1cfc2861..85b6a7ab6e 100644
--- a/src/components/Match/matchPages.jsx
+++ b/src/components/Match/matchPages.jsx
@@ -12,7 +12,7 @@ import Heading from 'components/Heading';
 import Table from 'components/Table';
 import { Row, Col } from 'react-flexbox-grid';
 import { IconRadiant, IconDire } from 'components/Icons';
-import VisionMap from './VisionMap';
+import VisionPage from './VisionPage';
 import CastTable from './CastTable';
 import CrossTable from './CrossTable';
 import MatchGraph from './MatchGraph';
@@ -209,7 +209,7 @@ const matchPages = [{
   parsed: true,
   content: match => (<div>
     <Heading title={strings.heading_vision} />
-    <VisionMap match={match} />
+    <VisionPage match={match} />
   </div>),
 }, {
   name: strings.tab_actions,
diff --git a/src/components/Match/renderMatch.js b/src/components/Match/renderMatch.js
index eecd4e16ae..b1eebaab0d 100644
--- a/src/components/Match/renderMatch.js
+++ b/src/components/Match/renderMatch.js
@@ -7,8 +7,12 @@ import {
 import heroes from 'dotaconstants/json/heroes.json';
 import specific from 'dotaconstants/json/specific.json';
 import laneRole from 'dotaconstants/json/lane_role.json';
+import Immutable from 'seamless-immutable';
+import _ from 'lodash/fp';
+
 import analysis from './analysis';
 
+
 const expanded = {};
 Object.keys(specific).forEach((key) => {
   for (let i = 1; i < 5; i += 1) {
@@ -17,7 +21,7 @@ Object.keys(specific).forEach((key) => {
 });
 
 const getMaxKeyOfObject = field =>
-  (field ? Object.keys(field).sort((a, b) => Number(b) - Number(a))[0] : '');
+ (field ? Object.keys(field).sort((a, b) => Number(b) - Number(a))[0] : '');
 
 /**
  * Generates data for c3 charts in a match
@@ -92,66 +96,109 @@ function generateTeamfights(match) {
   return (match.teamfights || []).map(tf => computeTfData(tf));
 }
 
+// create a detailed history of each wards
+function generateWardLog(match) {
+  const computeWardData = (player, i) => {
+    const sameWard = _.curry((w1, w2) => w1.ehandle === w2.ehandle);
+
+    // let's coerce some value to be sure the structure is what we expect.
+    const safePlayer = {
+      ...player,
+      obs_log: player.obs_log || [],
+      sen_log: player.sen_log || [],
+      obs_left_log: player.obs_left_log || [],
+      sen_left_log: player.sen_left_log || [],
+    };
+
+    // let's zip the *_log and the *_left log in a 2-tuples
+    const extractWardLog = (type, enteredLog, leftLog) =>
+      enteredLog.map((e) => {
+        const wards = [e, leftLog.find(sameWard(e))];
+        return {
+          player: i,
+          key: wards[0].ehandle,
+          type,
+          entered: wards[0],
+          left: wards[1],
+        };
+      })
+    ;
+
+    const observers = extractWardLog('observer', safePlayer.obs_log, safePlayer.obs_left_log);
+    const sentries = extractWardLog('sentry', safePlayer.sen_log, safePlayer.sen_left_log);
+    return _.concat(observers, sentries);
+  };
+
+  const imap = _.map.convert({ cap: false }); // cap: false to keep the index
+  const wardLog = _.flow(
+    imap(computeWardData),
+    _.flatten,
+    _.sortBy(xs => xs.entered.time),
+    imap((x, i) => ({ ...x, key: i })),
+  );
+  return wardLog(match.players || []);
+}
+
 function renderMatch(m) {
   /*
-  // Not using for MVP
-  // originally implemented by @coreymaher
-  m.hero_combat = {
-    damage: {
-      radiant: 0,
-      dire: 0,
-    },
-    kills: {
-      radiant: 0,
-      dire: 0,
-    },
-  };
-  m.players.forEach(pm => {
-    // Compute combat k/d and damage tables
-    pm.hero_combat = {
-      damage: {
-        total: 0,
-      },
-      taken: {
-        total: 0,
-      },
-      kills: {
-        total: 0,
-      },
-      deaths: {
-        total: 0,
-      },
-    };
-    m.players.forEach((other_pm) => {
-      const team = (pm.isRadiant) ? 'radiant' : 'dire';
-      const other_hero = heroes[other_pm.hero_id];
-      let damage = 0;
-      let taken = 0;
-      let kills = 0;
-      let deaths = 0;
-      // Only care about enemy hero combat
-      if (pm.isRadiant !== other_pm.isRadiant && pm.damage) {
-        damage = (pm.damage[other_hero.name]) ? pm.damage[other_hero.name] : 0;
-        taken = (pm.damage_taken[other_hero.name]) ? pm.damage_taken[other_hero.name] : 0;
-      }
-      if (pm.isRadiant !== other_pm.isRadiant && pm.killed) {
-        kills = (pm.killed[other_hero.name]) ? pm.killed[other_hero.name] : 0;
-        deaths = (pm.killed_by[other_hero.name]) ? pm.killed_by[other_hero.name] : 0;
-      }
-      pm.hero_combat.damage[other_hero.name] = damage;
-      pm.hero_combat.taken[other_hero.name] = taken;
-      pm.hero_combat.damage.total += damage;
-      pm.hero_combat.taken.total += taken;
-      pm.hero_combat.kills[other_hero.name] = kills;
-      pm.hero_combat.deaths[other_hero.name] = deaths;
-      pm.hero_combat.kills.total += kills;
-      pm.hero_combat.deaths.total += deaths;
-      m.hero_combat.damage[team] += damage;
-      m.hero_combat.kills[team] += kills;
-    });
-  });
-  });
-  */
+     // Not using for MVP
+     // originally implemented by @coreymaher
+     m.hero_combat = {
+     damage: {
+     radiant: 0,
+     dire: 0,
+     },
+     kills: {
+     radiant: 0,
+     dire: 0,
+     },
+     };
+     m.players.forEach(pm => {
+     // Compute combat k/d and damage tables
+     pm.hero_combat = {
+     damage: {
+     total: 0,
+     },
+     taken: {
+     total: 0,
+     },
+     kills: {
+     total: 0,
+     },
+     deaths: {
+     total: 0,
+     },
+     };
+     m.players.forEach((other_pm) => {
+     const team = (pm.isRadiant) ? 'radiant' : 'dire';
+     const other_hero = heroes[other_pm.hero_id];
+     let damage = 0;
+     let taken = 0;
+     let kills = 0;
+     let deaths = 0;
+     // Only care about enemy hero combat
+     if (pm.isRadiant !== other_pm.isRadiant && pm.damage) {
+     damage = (pm.damage[other_hero.name]) ? pm.damage[other_hero.name] : 0;
+     taken = (pm.damage_taken[other_hero.name]) ? pm.damage_taken[other_hero.name] : 0;
+     }
+     if (pm.isRadiant !== other_pm.isRadiant && pm.killed) {
+     kills = (pm.killed[other_hero.name]) ? pm.killed[other_hero.name] : 0;
+     deaths = (pm.killed_by[other_hero.name]) ? pm.killed_by[other_hero.name] : 0;
+     }
+     pm.hero_combat.damage[other_hero.name] = damage;
+     pm.hero_combat.taken[other_hero.name] = taken;
+     pm.hero_combat.damage.total += damage;
+     pm.hero_combat.taken.total += taken;
+     pm.hero_combat.kills[other_hero.name] = kills;
+     pm.hero_combat.deaths[other_hero.name] = deaths;
+     pm.hero_combat.kills.total += kills;
+     pm.hero_combat.deaths.total += deaths;
+     m.hero_combat.damage[team] += damage;
+     m.hero_combat.kills[team] += kills;
+     });
+     });
+     });
+   */
   const newPlayers = m.players.map((player) => {
     const newPlayer = {
       ...player,
@@ -190,8 +237,8 @@ function renderMatch(m) {
           identifier = 'fort';
         }
         newPlayer.objective_damage[identifier] = newPlayer.objective_damage[identifier] ?
-          newPlayer.objective_damage[identifier] + player.damage[key] :
-          player.damage[key];
+                                                 newPlayer.objective_damage[identifier] + player.damage[key] :
+                                                 player.damage[key];
       });
     }
     if (player.killed) {
@@ -222,6 +269,7 @@ function renderMatch(m) {
     graphData: generateGraphData(m),
     teamfights: generateTeamfights(m),
     players: newPlayers,
+    wards_log: generateWardLog(Immutable(m)),
   };
 }
 
diff --git a/src/components/palette.css b/src/components/palette.css
index 54a1ee0d73..f294f0a188 100644
--- a/src/components/palette.css
+++ b/src/components/palette.css
@@ -19,6 +19,16 @@
   --primaryTextColor:     #F5F5F5;
   --textColorSecondary:   #212020;
   --secondaryTextColor:   #212020;
+
+  --primarySurfaceColor: rgb(46, 47, 64);
+  --secondarySurfaceColor: rgb(39, 39, 58);
+
+  --tableHeaderSurfaceColor: rgba(0, 0, 0, .3);
+  --tableRowOddSurfaceColor: rgba(255, 255, 255, .019);
+  --tableRowEvenSurfaceColor: rgba(0, 0, 0, .019);
+
+  --sliderTicksColor: #757575;
+  --sliderTicksColorActive: #337AB7;
   /* Colors -- */
 
   /* -- Font */
@@ -37,9 +47,11 @@
   --fontSizeCommon: 16px;
   --fontSizeMedium: 14px;
   --fontSizeSmall:  12px;
+  --fontSizeTiny:   10px;
   /* Font -- */
 
-  --dividerColor: color(var(--textSecondaryColor) lightness(20%));
+  --dividerColor: color(var(--textColorSecondary) lightness(20%));
+  --dividerLightColor: color(var(--textColorPrimary) lightness(-20%));
 
   --navDrawerWidth: 256px;
 
@@ -65,11 +77,12 @@
 
   yelor:           var(--colorYelor);
   yellowOrange:    var(--colorYelor);
-
+  
   textColorPrimary:    var(--textColorPrimary);
   primaryTextColor:    var(--textColorPrimary);
   textColorSecondary:  var(--textColorSecondary);
   secondaryTextColor:  var(--textColorSecondary);
+  dividerColor: var(--dividerColor);
   /* Colors -- */
 
   /* -- Font */
@@ -83,6 +96,10 @@
   fontSizeMedium: var(--fontSizeMedium);
   fontSizeSmall: var(--fontSizeSmall);
   /* Font -- */
+
+  /*- Surfaces --*/
+  primarySurfaceColor: var(--primarySurfaceColor);
+  secondarySurfaceColor: var(--secondarySurfaceColor);
 }
 
 .textSuccess  { color: var(--colorSuccess) }
diff --git a/src/lang/en.json b/src/lang/en.json
index 6d18b550a4..00076f1633 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -363,6 +363,13 @@
   "th_party_mmr": "Party MMR",
   "th_estimated_mmr": "Estimated MMR",
 
+  "ward_log_type": "Type",
+  "ward_log_owner": "Owner",
+  "ward_log_entered_at": "Placed",
+  "ward_log_left_at": "Left",
+  "ward_log_duration": "Lifespan",
+  "ward_log_killed_by": "Killed by",
+
   "time_just_now": "just now",
   "time_second": "second",
   "time_minute": "minute",
diff --git a/src/utility/components/Fixed.jsx b/src/utility/components/Fixed.jsx
new file mode 100644
index 0000000000..e863c0ab12
--- /dev/null
+++ b/src/utility/components/Fixed.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default Component => class extends React.Component {
+  shouldComponentUpdate(newProps) {
+    return this.props.style !== newProps.style;
+  }
+  render() {
+    return <Component {...this.props} />;
+  }
+};
diff --git a/src/utility/index.jsx b/src/utility/index.jsx
index 537d0acff5..ab7ed9e2de 100644
--- a/src/utility/index.jsx
+++ b/src/utility/index.jsx
@@ -1,8 +1,6 @@
 /* global API_HOST */
 import React from 'react';
-import {
-  Link,
-} from 'react-router';
+import { Link } from 'react-router';
 import heroes from 'dotaconstants/json/heroes.json';
 import items from 'dotaconstants/json/items.json';
 import patch from 'dotaconstants/json/patch.json';
@@ -14,9 +12,7 @@ import leaverStatus from 'dotaconstants/json/leaver_status.json';
 import laneRole from 'dotaconstants/json/lane_role.json';
 import xpLevel from 'dotaconstants/json/xp_level.json';
 import styles from 'components/palette.css';
-import {
-  TableLink,
-} from 'components/Table';
+import { TableLink } from 'components/Table';
 import {
   KDA,
   TableHeroImage,
@@ -24,6 +20,8 @@ import {
 } from 'components/Visualizations';
 import strings from 'lang';
 import subTextStyle from 'components/Visualizations/Table/subText.css';
+import { findLast } from 'lodash';
+import _ from 'lodash/fp';
 
 // TODO - add in the relevant text invocations of TableHeroImage
 export const isRadiant = playerSlot => playerSlot < 128;
@@ -339,6 +337,21 @@ export const playerColors = {
   132: '#956000',
 };
 
+export const extractTransitionClasses = styles => name => ({
+  enter: styles[`${name}-enter`],
+  enterActive: styles[`${name}-enter-active`],
+  leave: styles[`${name}-leave`],
+  leaveActive: styles[`${name}-leave-active`],
+  appear: styles[`${name}-appear`],
+  appearActive: styles[`${name}-appear-active`],
+});
+
+export const gameCoordToUV = (x, y) => ({
+  x: Number(x) - 64,
+  y: 127 - (Number(y) - 64),
+});
+
+// TODO: refactor this to use gameCoordToUV
 /**
  * Unpacks position data from hash format to array format
  * 64 is the offset of x and y values
@@ -360,3 +373,12 @@ export function unpackPositionData(input) {
   }
   return input;
 }
+
+export const threshold = _.curry((start, limits, values, value) => {
+  if (limits.length !== values.length) throw new Error('Limits must be the same as functions.');
+
+  const limitsWithStart = limits.slice(0);
+  limitsWithStart.unshift(start);
+  return findLast(values, (v, i) => _.inRange(limitsWithStart[i], limitsWithStart[i + 1], value));
+});
+