diff --git a/src/App.css b/src/App.css
index fa1a2f7..4bf7260 100644
--- a/src/App.css
+++ b/src/App.css
@@ -12,4 +12,5 @@ html, body, #root {
   display: inline-block;
   color: #fff;
   text-shadow: 0 0 4px #000, 0 0 8px #000 ;
+  cursor: crosshair;
 }
diff --git a/src/App.js b/src/App.js
index 1e864b2..e94d21c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,7 @@ class App extends React.Component {
     super(props);
     this.state = {
       data: null,
+      binary: {},
       isFetching: false,
       isFrozen: false,
       isZoomed: false,
@@ -28,10 +29,32 @@ class App extends React.Component {
     this.setState({...this.state, isFetching: true})
     fetch(DATA_URL)
       .then(response => response.json())
-      .then(result => this.setState({data: result, isFetching: false}))
+      .then(result => {
+        let {data} = this.state;
+        if ((data === null) ||
+          (data.timestamp !== result.timestamp)) {
+          this.setState({data: result, isFetching: false});
+          result.image_metadatum.forEach((md) => {
+            let binary_url = ROOT + md.binary;
+            fetch(binary_url)
+              .then(response => response.json())
+              .then(result => {
+                let cur_binary = this.state.binary;
+                this.setState({binary: {
+                  [md.name]: result,
+                  ...cur_binary
+                }});
+              })
+              .catch(e => console.log(e));
+          });
+        } else {
+          this.setState({isFetching: false});
+        }
+      })
       .catch(e => console.log(e));
   }
   render() {
+                console.log(this.state.binary);
     let imgs = [];
     let {
       data,
@@ -43,9 +66,7 @@ class App extends React.Component {
     } = this.state;
     let appContent = <h1>Loading</h1>;
     if (data !== null) {
-      let {ratio, timestamp, images, size} = data;
-      let width = 512;
-      let height = (ratio * width).toFixed();
+      let {timestamp, image_metadatum} = data;
       const mouseClick = (e) => {
         console.log('isFrozen', isFrozen, 'this.state.isFrozen', this.state.isFrozen);
         this.setState({isFrozen: !this.state.isFrozen});
@@ -72,24 +93,27 @@ class App extends React.Component {
         }
         this.setState({isZoomed: false});
       };
-      const mouseMove = (e) => {
-        if (isFrozen) {
-          return;
-        }
-        let rect = e.currentTarget.getBoundingClientRect();
-        let x = e.clientX - rect.left;
-        let y = e.clientY - rect.top;
-        this.setState({x: x/width, y: y/height});
-      };
-      let style = {
-        width: width + 'px',
-        height: height + 'px',
-        imageRendering: isZoomed ? 'pixelated' : 'auto',
-        backgroundSize: isZoomed ? zoomFactor * size[0] + 'px ' + zoomFactor * size[1] + 'px' : 'contain',
-        backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center',
-      };
-      imgs = images.map((name) => {
-        let url = ROOT + name + '?t=' + timestamp;
+      imgs = image_metadatum.map((metadata) => {
+        let {name, size, ratio, image} = metadata;
+        let width = 512;
+        let height = (ratio * width).toFixed();
+        let url = ROOT + image + '?t=' + timestamp;
+        const mouseMove = (e) => {
+          if (isFrozen) {
+            return;
+          }
+          let rect = e.currentTarget.getBoundingClientRect();
+          let x = e.clientX - rect.left;
+          let y = e.clientY - rect.top;
+          this.setState({x: x/width, y: y/height});
+        };
+        let style = {
+          width: width + 'px',
+          height: height + 'px',
+          imageRendering: isZoomed ? 'pixelated' : 'auto',
+          backgroundSize: isZoomed ? zoomFactor * size[0] + 'px ' + zoomFactor * size[1] + 'px' : 'contain',
+          backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center',
+        };
         return (
           <div key={name}
             onClick={mouseClick}