diff --git a/extension/app/components/Action.jsx b/extension/app/components/Action.jsx
index 9627b48ed..a66f14442 100644
--- a/extension/app/components/Action.jsx
+++ b/extension/app/components/Action.jsx
@@ -2,8 +2,20 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 const Action = (props) => {
-  const { snapshot } = props;
-  return <div className="action-component">{snapshot.state}</div>;
+  const {
+    snapshot, selected, handleChangeSnapshot, index,
+  } = props;
+  return (
+    <div
+      className={selected ? 'action-component selected' : 'action-component'}
+      onClick={() => {
+        handleChangeSnapshot(index);
+      }}
+    >
+      {snapshot.state}
+      {selected.toString()}
+    </div>
+  );
 };
 
 Action.propTypes = {
diff --git a/extension/app/containers/ActionContainer.jsx b/extension/app/containers/ActionContainer.jsx
index 4aebe5ce7..be0c6b7ab 100644
--- a/extension/app/containers/ActionContainer.jsx
+++ b/extension/app/containers/ActionContainer.jsx
@@ -7,12 +7,21 @@ class ActionContainer extends Component {
   }
 
   render() {
-    const { snapshots } = this.props;
+    const { snapshots, snapshotIndex, handleChangeSnapshot } = this.props;
     let actionsArr = [];
     if (snapshots) {
-      actionsArr = snapshots.map((snapshot, index) => (
-        <Action key={`action${index}`} snapshot={snapshot} />
-      ));
+      actionsArr = snapshots.map((snapshot, index) => {
+        const selected = index === snapshotIndex;
+        return (
+          <Action
+            key={`action${index}`}
+            index={index}
+            snapshot={snapshot}
+            selected={selected}
+            handleChangeSnapshot={handleChangeSnapshot}
+          />
+        );
+      });
     }
     return <div className="action-container">{actionsArr}</div>;
   }
diff --git a/extension/app/containers/MainContainer.jsx b/extension/app/containers/MainContainer.jsx
index 9f4397c9b..0b8bc5f8b 100644
--- a/extension/app/containers/MainContainer.jsx
+++ b/extension/app/containers/MainContainer.jsx
@@ -7,7 +7,12 @@ import TravelContainer from './TravelContainer';
 class MainContainer extends Component {
   constructor() {
     super();
-    this.state = { snapshots: [] };
+    this.state = {
+      snapshots: [{ state: 'snapshot1' }, { state: 'snapshot2' }, { state: 'snapshot3' }],
+      snapshotIndex: 0,
+    };
+
+    this.handleChangeSnapshot = this.handleChangeSnapshot.bind(this);
   }
 
   componentDidMount() {
@@ -22,22 +27,28 @@ class MainContainer extends Component {
     //   },
     //   false,
     // );
+  }
 
-    // MOCK DATA -- FOR TESTING PURPOSES ONLY
-    this.setState({
-      snapshots: [{ state: 'snapshot1' }, { state: 'snapshot2' }, { state: 'snapshot3' }],
-    });
+  handleChangeSnapshot(snapshotIndex) {
+    console.log('handleChangeSnapshot', snapshotIndex);
+    // change snapshotIndex
+    // snapshotIndex could be changed from either the ActionContainer or the TravelContainer
+    this.setState({ snapshotIndex });
   }
 
   render() {
-    const { snapshots } = this.state;
+    const { snapshots, snapshotIndex } = this.state;
 
     return (
       <div className="main-container">
         <HeadContainer />
         <div className="body-container">
-          <ActionContainer snapshots={snapshots} />
-          <StateContainer />
+          <ActionContainer
+            snapshots={snapshots}
+            snapshotIndex={snapshotIndex}
+            handleChangeSnapshot={this.handleChangeSnapshot}
+          />
+          <StateContainer snapshot={snapshots[snapshotIndex]} />
         </div>
         <TravelContainer />
       </div>
diff --git a/extension/app/containers/StateContainer.jsx b/extension/app/containers/StateContainer.jsx
index 80c7a2dbd..70e30a115 100644
--- a/extension/app/containers/StateContainer.jsx
+++ b/extension/app/containers/StateContainer.jsx
@@ -1,12 +1,23 @@
 import React, { Component } from 'react';
+import ReactJson from 'react-json-view';
 
 class StateContainer extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
   }
 
   render() {
-    return <div className="state-container">StateContainer</div>;
+    const { snapshot } = this.props;
+    return (
+      <div className="state-container">
+        <ReactJson
+          enableClipboard={false}
+          theme="solarized"
+          groupArraysAfterLength={50}
+          src={snapshot}
+        />
+      </div>
+    );
   }
 }
 
diff --git a/extension/app/styles/styles.css b/extension/app/styles/styles.css
index 5986ea549..0c725ec43 100644
--- a/extension/app/styles/styles.css
+++ b/extension/app/styles/styles.css
@@ -21,7 +21,9 @@
 }
 
 .state-container {
+  font-size: 15px;
   flex: 7 auto;
+  background-color: rgb(0, 43, 54);
 }
 
 /* if extension width is less than 500px, stack the body containers */
@@ -54,4 +56,9 @@
   background-color: rgb(170, 170, 170);
   border-style: solid;
   border-width: thin;
+  cursor: pointer;
+}
+
+.action-component.selected {
+  background-color: rgb(134, 134, 134);
 }
diff --git a/package-lock.json b/package-lock.json
index 642ad9f5a..ffcead6bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1264,6 +1264,11 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
     "asn1.js": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
@@ -1429,6 +1434,11 @@
         }
       }
     },
+    "base16": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
+      "integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA="
+    },
     "base64-js": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
@@ -1919,6 +1929,11 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+    },
     "core-js-compat": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.1.4.tgz",
@@ -2239,6 +2254,14 @@
       "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
       "dev": true
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "0.4.24"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -2819,6 +2842,28 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "fbemitter": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-2.1.1.tgz",
+      "integrity": "sha1-Uj4U/a9SSIBbsC9i78M75wP1GGU=",
+      "requires": {
+        "fbjs": "0.8.17"
+      }
+    },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "1.2.7",
+        "isomorphic-fetch": "2.2.1",
+        "loose-envify": "1.4.0",
+        "object-assign": "4.1.1",
+        "promise": "7.3.1",
+        "setimmediate": "1.0.5",
+        "ua-parser-js": "0.7.20"
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -2925,6 +2970,15 @@
         "readable-stream": "2.3.6"
       }
     },
+    "flux": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/flux/-/flux-3.1.3.tgz",
+      "integrity": "sha1-0jvtUVp5oi2TOrU6tK2hnQWy8Io=",
+      "requires": {
+        "fbemitter": "2.1.1",
+        "fbjs": "0.8.17"
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -3787,7 +3841,6 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
       "requires": {
         "safer-buffer": "2.1.2"
       }
@@ -4081,8 +4134,7 @@
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
     "is-symbol": {
       "version": "1.0.2",
@@ -4123,6 +4175,15 @@
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
       "dev": true
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "1.7.3",
+        "whatwg-fetch": "3.0.0"
+      }
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -4265,6 +4326,16 @@
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
       "dev": true
     },
+    "lodash.curry": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
+      "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA="
+    },
+    "lodash.flow": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
+      "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
+    },
     "lodash.unescape": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.unescape/-/lodash.unescape-4.0.1.tgz",
@@ -4558,6 +4629,15 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "0.1.12",
+        "is-stream": "1.1.0"
+      }
+    },
     "node-libs-browser": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
@@ -5108,6 +5188,14 @@
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
       "dev": true
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "2.0.6"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -5183,6 +5271,11 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "pure-color": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
+      "integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4="
+    },
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -5225,6 +5318,17 @@
         "scheduler": "0.13.6"
       }
     },
+    "react-base16-styling": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz",
+      "integrity": "sha1-7yFW1mz0E5aVyKFniGy2nqZgeSw=",
+      "requires": {
+        "base16": "1.0.0",
+        "lodash.curry": "4.1.1",
+        "lodash.flow": "3.5.0",
+        "pure-color": "1.3.0"
+      }
+    },
     "react-dom": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
@@ -5241,6 +5345,30 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
+    "react-json-view": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.19.1.tgz",
+      "integrity": "sha512-u5e0XDLIs9Rj43vWkKvwL8G3JzvXSl6etuS5G42a8klMohZuYFQzSN6ri+/GiBptDqlrXPTdExJVU7x9rrlXhg==",
+      "requires": {
+        "flux": "3.1.3",
+        "react-base16-styling": "0.6.0",
+        "react-lifecycles-compat": "3.0.4",
+        "react-textarea-autosize": "6.1.0"
+      }
+    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-textarea-autosize": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz",
+      "integrity": "sha512-F6bI1dgib6fSvG8so1HuArPUv+iVEfPliuLWusLF+gAKz0FbB4jLrWUrTAeq1afnPT2c9toEZYUdz/y1uKMy4A==",
+      "requires": {
+        "prop-types": "15.7.2"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -5593,8 +5721,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "scheduler": {
       "version": "0.13.6",
@@ -5660,8 +5787,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
-      "dev": true
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "sha.js": {
       "version": "2.4.11",
@@ -6264,6 +6390,11 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "ua-parser-js": {
+      "version": "0.7.20",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
+      "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -6561,6 +6692,11 @@
         }
       }
     },
+    "whatwg-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/package.json b/package.json
index 3de494092..40a1e54d2 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
   "dependencies": {
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "react-json-view": "^1.19.1"
   }
 }