diff --git a/extension/app/__tests__/action.test.jsx b/src/app/__tests__/action.test.jsx
similarity index 100%
rename from extension/app/__tests__/action.test.jsx
rename to src/app/__tests__/action.test.jsx
diff --git a/extension/app/components/Action.jsx b/src/app/components/Action.jsx
similarity index 100%
rename from extension/app/components/Action.jsx
rename to src/app/components/Action.jsx
diff --git a/extension/app/components/App.jsx b/src/app/components/App.jsx
similarity index 100%
rename from extension/app/components/App.jsx
rename to src/app/components/App.jsx
diff --git a/extension/app/components/Slider.jsx b/src/app/components/Slider.jsx
similarity index 100%
rename from extension/app/components/Slider.jsx
rename to src/app/components/Slider.jsx
diff --git a/extension/app/containers/ActionContainer.jsx b/src/app/containers/ActionContainer.jsx
similarity index 100%
rename from extension/app/containers/ActionContainer.jsx
rename to src/app/containers/ActionContainer.jsx
diff --git a/extension/app/containers/HeadContainer.jsx b/src/app/containers/HeadContainer.jsx
similarity index 100%
rename from extension/app/containers/HeadContainer.jsx
rename to src/app/containers/HeadContainer.jsx
diff --git a/extension/app/containers/MainContainer.jsx b/src/app/containers/MainContainer.jsx
similarity index 84%
rename from extension/app/containers/MainContainer.jsx
rename to src/app/containers/MainContainer.jsx
index 53e6881a7..d8bfa26f6 100644
--- a/extension/app/containers/MainContainer.jsx
+++ b/src/app/containers/MainContainer.jsx
@@ -9,6 +9,7 @@ class MainContainer extends Component {
     super();
     this.state = {
       snapshots: [],
+      snapshotsTree: null,
       snapshotIndex: 0,
       currentIndex: null,
       port: null,
@@ -20,13 +21,12 @@ class MainContainer extends Component {
   }
 
   componentDidMount() {
+    console.log('componentDidMount');
     // open connection with background script
     const port = chrome.runtime.connect();
 
     // listen for a message containing snapshots from the background script
     port.onMessage.addListener((snapshots) => {
-      console.log('message from background script', snapshots);
-      console.log('snapshots', this.state.snapshots);
       const snapshotIndex = snapshots.length - 1;
 
       // set state with the information received from the background script
@@ -49,9 +49,11 @@ class MainContainer extends Component {
   }
 
   // change the snapshot index
-  // --> 1. affects the action that is highlighted
-  // --> 2. moves the slider
+  // this will change the state shown in the state container but won't change the DOM
   handleChangeSnapshot(snapshotIndex) {
+    // snapshotIndex
+    // --> 1. affects the action that is highlighted
+    // --> 2. moves the slider
     this.setState({ snapshotIndex });
   }
 
@@ -61,23 +63,27 @@ class MainContainer extends Component {
     let { currentIndex } = this.state;
     const payload = [];
 
+    // currentIndex is initialized to null
+    // currentIndex = null means that the user hasn't jumped yet
     currentIndex = currentIndex === null ? snapshots.length - 1 : currentIndex;
 
+    // if the user wants to jump backward
     if (currentIndex > snapshotIndex) {
       for (let i = currentIndex - 1; i >= snapshotIndex; i -= 1) {
         payload.push(snapshots[i]);
       }
     } else {
+      // if the user wants to jump forward
       for (let i = currentIndex + 1; i <= snapshotIndex; i += 1) {
         payload.push(snapshots[i]);
       }
     }
 
+    // currentIndex should be changed to index the user jumped to
     this.setState({ currentIndex: snapshotIndex });
 
-    console.log('payload', payload);
+    // send the arrays of snapshots to background script
     port.postMessage({ action: 'stepToSnap', payload });
-    // port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
   }
 
   render() {
diff --git a/extension/app/containers/StateContainer.jsx b/src/app/containers/StateContainer.jsx
similarity index 100%
rename from extension/app/containers/StateContainer.jsx
rename to src/app/containers/StateContainer.jsx
diff --git a/extension/app/containers/TravelContainer.jsx b/src/app/containers/TravelContainer.jsx
similarity index 100%
rename from extension/app/containers/TravelContainer.jsx
rename to src/app/containers/TravelContainer.jsx
diff --git a/extension/app/index.js b/src/app/index.js
similarity index 100%
rename from extension/app/index.js
rename to src/app/index.js
diff --git a/extension/app/styles/styles.css b/src/app/styles/styles.css
similarity index 100%
rename from extension/app/styles/styles.css
rename to src/app/styles/styles.css
diff --git a/extension/background.js b/src/extension/background.js
similarity index 100%
rename from extension/background.js
rename to src/extension/background.js
diff --git a/extension/contentScript.js b/src/extension/contentScript.js
similarity index 93%
rename from extension/contentScript.js
rename to src/extension/contentScript.js
index fe5acefea..4279bf639 100644
--- a/extension/contentScript.js
+++ b/src/extension/contentScript.js
@@ -1,4 +1,4 @@
-console.log('contentScript injected');
+console.log('contentScript running');
 
 // listening for messages from npm package
 window.addEventListener('message', (msg) => {
diff --git a/extension/devtools.html b/src/extension/devtools.html
similarity index 100%
rename from extension/devtools.html
rename to src/extension/devtools.html
diff --git a/extension/devtools.js b/src/extension/devtools.js
similarity index 100%
rename from extension/devtools.js
rename to src/extension/devtools.js
diff --git a/extension/manifest.json b/src/extension/manifest.json
similarity index 100%
rename from extension/manifest.json
rename to src/extension/manifest.json
diff --git a/extension/panel.html b/src/extension/panel.html
similarity index 84%
rename from extension/panel.html
rename to src/extension/panel.html
index 26e1b6dbf..3b6e00c34 100644
--- a/extension/panel.html
+++ b/src/extension/panel.html
@@ -9,7 +9,7 @@
 
   <body>
     <div id="root"></div>
-    <link rel="stylesheet" type="text/css" href="./app/styles/panel.css" />
+    <link rel="stylesheet" type="text/css" href="./styles/panel.css" />
     <script type="text/javascript" src="panel.js"></script>
     <script type="text/javascript" src="dist/app.bundle.js"></script>
   </body>
diff --git a/extension/panel.js b/src/extension/panel.js
similarity index 100%
rename from extension/panel.js
rename to src/extension/panel.js
diff --git a/extension/app/styles/panel.css b/src/extension/styles/panel.css
similarity index 100%
rename from extension/app/styles/panel.css
rename to src/extension/styles/panel.css
diff --git a/src/extension/tree.js b/src/extension/tree.js
new file mode 100644
index 000000000..2abc7a1d5
--- /dev/null
+++ b/src/extension/tree.js
@@ -0,0 +1,7 @@
+module.exports = function Graph(snapshot, parent) {
+  this.parent = parent;
+  this.snapshot = snapshot;
+  this.children = [];
+  this.add = (snapshot) => {};
+  this.remove = () => {};
+};
diff --git a/webpack.config.js b/webpack.config.js
index e6e796426..c9b74a74b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,11 +3,11 @@ const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
 
 const config = {
   entry: {
-    app: './extension/app/index.js',
-    background: './extension/background.js',
+    app: './src/app/index.js',
+    background: './src/extension/background.js',
   },
   output: {
-    path: path.resolve(__dirname, 'extension/dist'),
+    path: path.resolve(__dirname, 'src/extension/dist'),
     filename: '[name].bundle.js',
   },
   module: {
@@ -27,10 +27,7 @@ const config = {
       },
       {
         test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader',
-        ],
+        use: ['style-loader', 'css-loader'],
       },
     ],
   },
@@ -39,12 +36,14 @@ const config = {
 
 module.exports = (env, argv) => {
   if (argv.mode === 'development') {
-    config.plugins.push(new ChromeExtensionReloader({
-      entries: {
-        contentScript: ['app'],
-        background: ['background'],
-      },
-    }));
+    config.plugins.push(
+      new ChromeExtensionReloader({
+        entries: {
+          contentScript: ['app'],
+          background: ['background'],
+        },
+      }),
+    );
   }
   return config;
 };