diff --git a/.electron-vue/dev-client.js b/.electron-vue/dev-client.js
index 2913ea4b..81f73ee1 100755
--- a/.electron-vue/dev-client.js
+++ b/.electron-vue/dev-client.js
@@ -1,40 +1,40 @@
-const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+// const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 
-hotClient.subscribe(event => {
-  /**
-   * Reload browser when HTMLWebpackPlugin emits a new index.html
-   *
-   * Currently disabled until jantimon/html-webpack-plugin#680 is resolved.
-   * https://github.com/SimulatedGREG/electron-vue/issues/437
-   * https://github.com/jantimon/html-webpack-plugin/issues/680
-   */
-  // if (event.action === 'reload') {
-  //   window.location.reload()
-  // }
+// hotClient.subscribe(event => {
+//   /**
+//    * Reload browser when HTMLWebpackPlugin emits a new index.html
+//    *
+//    * Currently disabled until jantimon/html-webpack-plugin#680 is resolved.
+//    * https://github.com/SimulatedGREG/electron-vue/issues/437
+//    * https://github.com/jantimon/html-webpack-plugin/issues/680
+//    */
+//   if (event.action === 'reload') {
+//     window.location.reload()
+//   }
 
-  /**
-   * Notify `mainWindow` when `main` process is compiling,
-   * giving notice for an expected reload of the `electron` process
-   */
-  if (event.action === 'compiling') {
-    document.body.innerHTML += `
-      <style>
-        #dev-client {
-          background: #4fc08d;
-          border-radius: 4px;
-          bottom: 20px;
-          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
-          color: #fff;
-          font-family: 'Source Sans Pro', sans-serif;
-          left: 20px;
-          padding: 8px 12px;
-          position: absolute;
-        }
-      </style>
+//   /**
+//    * Notify `mainWindow` when `main` process is compiling,
+//    * giving notice for an expected reload of the `electron` process
+//    */
+//   if (event.action === 'compiling') {
+//     document.body.innerHTML += `
+//       <style>
+//         #dev-client {
+//           background: #4fc08d;
+//           border-radius: 4px;
+//           bottom: 20px;
+//           box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+//           color: #fff;
+//           font-family: 'Source Sans Pro', sans-serif;
+//           left: 20px;
+//           padding: 8px 12px;
+//           position: absolute;
+//         }
+//       </style>
 
-      <div id="dev-client">
-        Compiling Main Process...
-      </div>
-    `
-  }
-})
+//       <div id="dev-client">
+//         Compiling Main Process...
+//       </div>
+//     `
+//   }
+// })
diff --git a/.electron-vue/dev-runner.js b/.electron-vue/dev-runner.js
index 95b2115e..703d68f1 100755
--- a/.electron-vue/dev-runner.js
+++ b/.electron-vue/dev-runner.js
@@ -11,7 +11,7 @@ const {
 } = require('child_process')
 const webpack = require('webpack')
 const WebpackDevServer = require('webpack-dev-server')
-const webpackHotMiddleware = require('webpack-hot-middleware')
+// const webpackHotMiddleware = require('webpack-hot-middleware')
 
 const mainConfig = require('./webpack.main.config')
 const rendererConfig = require('./webpack.renderer.config')
@@ -46,15 +46,16 @@ function startRenderer() {
   return new Promise((resolve, reject) => {
     rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
     rendererConfig.mode = 'development'
+    
     const compiler = webpack(rendererConfig)
-    hotMiddleware = webpackHotMiddleware(compiler, {
-      log: false,
-      heartbeat: 2500,
-      // logLevel: 'debug'
-    })
+
+    // hotMiddleware = webpackHotMiddleware(compiler, {
+    //   heartbeat: 2500,
+    //   logLevel: 'debug',
+    //   quiet: true
+    // })
 
     // Original
-    // Webpack 3
     // compiler.hooks.compilation.tap('compilation', compilation => {
     //   compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
     //     hotMiddleware.publish({
@@ -64,27 +65,34 @@ function startRenderer() {
     //   })
     // })
 
-    // Webpack 4
-    compiler.hooks.compilation.tap('html-webpack-plugin-after-emit', () => {
-      hotMiddleware.publish({
-        action: 'reload'
-      });
-    });
+    // compiler.hooks.compilation.tap('compilation', (compilation) => {
+    //   HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
+    //     'html-webpack-plugin',
+    //     (data, cb) => {
+    //       hotMiddleware.publish({
+    //         action: 'reload'
+    //       });
+
+    //       // Tell webpack to move on
+    //       cb()
+    //     }
+    //   )
+    // })
 
     compiler.hooks.done.tap('done', stats => {
       logStats('Renderer', stats)
     })
 
+    // Create a Webpack Dev Server
     const server = new WebpackDevServer(
       compiler, {
         contentBase: path.join(__dirname, '../'),
         quiet: true,
-        // logLevel: 'debug',
+        logLevel: 'debug',
+        hot: true,
+        port: 9080,
         before(app, ctx) {
-          app.use(hotMiddleware)
-          ctx.middleware.waitUntilValid(() => {
-            resolve()
-          })
+          resolve()
         }
       }
     )
@@ -101,9 +109,9 @@ function startMain() {
 
     compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
       logStats('Main', chalk.white.bold('compiling...'))
-      hotMiddleware.publish({
-        action: 'compiling'
-      })
+      // hotMiddleware.publish({
+      //   action: 'compiling'
+      // })
       done()
     })
 
diff --git a/.electron-vue/webpack.web.config.js b/.electron-vue/webpack.web.config.js
index d835504d..071a8798 100755
--- a/.electron-vue/webpack.web.config.js
+++ b/.electron-vue/webpack.web.config.js
@@ -35,14 +35,6 @@ let webConfig = {
         test: /\.scss$/,
         use: ['vue-style-loader', 'css-loader', 'sass-loader']
       },
-      {
-        test: /\.sass$/,
-        use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
-      },
-      {
-        test: /\.less$/,
-        use: ['vue-style-loader', 'css-loader', 'less-loader']
-      },
       {
         test: /\.css$/,
         use: ['vue-style-loader', 'css-loader']
@@ -64,9 +56,7 @@ let webConfig = {
           options: {
             extractCSS: true,
             loaders: {
-              sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
-              scss: 'vue-style-loader!css-loader!sass-loader',
-              less: 'vue-style-loader!css-loader!less-loader'
+              scss: 'vue-style-loader!css-loader!sass-loader'
             }
           }
         }
diff --git a/package.json b/package.json
index e08c3246..840e322b 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "reflex",
   "productName": "Reflex",
   "description": "Make responsive websites without the guesswork.",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "author": "Nick Wittwer",
   "license": "MIT",
   "main": "./dist/electron/main.js",
@@ -74,12 +74,15 @@
   },
   "dependencies": {
     "@simonwep/selection-js": "^1.2.0",
+    "babel-preset-minify": "^0.5.1",
     "browser-sync": "^2.26.7",
     "electron-debug": "^3.0.1",
+    "electron-is-dev": "^1.1.0",
     "electron-log": "^3.0.7",
     "electron-updater": "^4.1.2",
     "is-electron": "^2.2.0",
     "lodash.debounce": "^4.0.8",
+    "uuid": "^3.3.3",
     "vue": "^2.6.10",
     "vue-electron": "^1.0.6",
     "vue-router": "^3.1.2",
@@ -93,41 +96,41 @@
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@babel/runtime": "^7.5.5",
-    "@vue/cli": "^3.10.0",
+    "@vue/cli": "^3.11.0",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.2",
-    "babel-jest": "^24.8.0",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "babel-minify-webpack-plugin": "^0.3.1",
     "babel-plugin-require-context-hook": "^1.0.0",
     "browser-sync-webpack-plugin": "^2.2.2",
-    "cfonts": "^2.4.4",
+    "cfonts": "^2.4.5",
     "chalk": "^2.4.2",
     "copy-webpack-plugin": "^5.0.4",
     "cross-env": "^5.1.6",
     "css-loader": "^3.2.0",
-    "del": "^5.0.0",
+    "del": "^5.1.0",
     "devtron": "^1.4.0",
-    "electron": "^6.0.1",
+    "electron": "^6.0.4",
     "electron-builder": "^21.2.0",
     "electron-devtools-installer": "^2.2.4",
-    "eslint": "^6.1.0",
-    "eslint-config-standard": "^13.0.1",
+    "eslint": "^6.3.0",
+    "eslint-config-standard": "^14.1.0",
     "eslint-friendly-formatter": "^4.0.1",
-    "eslint-loader": "^2.2.1",
+    "eslint-loader": "^3.0.0",
     "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-node": "^9.2.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^5.2.3",
     "file-loader": "^4.2.0",
     "gulp": "^4.0.2",
     "gulp-hub": "^4.2.0",
     "gulp-notify": "^3.2.0",
     "gulp-replace": "^1.0.0",
-    "html-webpack-plugin": "^3.2.0",
-    "jest": "^24.8.0",
+    "html-webpack-plugin": "^4.0.0-beta.8",
+    "jest": "^24.9.0",
     "jest-vue-preprocessor": "^1.5.0",
     "mini-css-extract-plugin": "^0.8.0",
     "moment": "^2.24.0",
@@ -135,7 +138,7 @@
     "node-loader": "^0.6.0",
     "node-sass": "^4.12.0",
     "opn": "^6.0.0",
-    "sass-loader": "^7.2.0",
+    "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
     "url-loader": "^2.1.0",
     "vue-eslint-parser": "^6.0.4",
@@ -144,10 +147,10 @@
     "vue-loader": "^15.7.1",
     "vue-style-loader": "^4.1.0",
     "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.39.2",
-    "webpack-cli": "^3.3.6",
+    "webpack": "^4.39.3",
+    "webpack-cli": "^3.3.7",
     "webpack-dev-server": "^3.8.0",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^4.1.3"
+    "webpack-merge": "^4.2.2"
   }
 }
diff --git a/screenshot.png b/screenshot.png
index c0e4434a..bf15de33 100644
Binary files a/screenshot.png and b/screenshot.png differ
diff --git a/src/main/index.js b/src/main/index.js
index 7d9d8574..6467b29b 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -14,6 +14,7 @@ import {
   version
 } from '../../package.json'
 const log = require('electron-log')
+const isDev = require('electron-is-dev')
 
 // Set the version
 app.getVersion = () => version
@@ -27,7 +28,7 @@ if (process.env.NODE_ENV !== 'development') {
 }
 
 let mainWindow
-const winURL = process.env.NODE_ENV === 'development'
+const winURL = isDev
   ? `http://localhost:9080`
   : `file://${__dirname}/index.html`
 
diff --git a/src/main/menu.js b/src/main/menu.js
index e9e38f04..3ee13e54 100644
--- a/src/main/menu.js
+++ b/src/main/menu.js
@@ -3,6 +3,7 @@ const {
   Menu,
   shell
 } = require('electron')
+const isDev = require('electron-is-dev')
 
 export function setMenu(window) {
   const template = [{
@@ -120,38 +121,39 @@ export function setMenu(window) {
   }
   ]
 
-  // if (process.platform === 'darwin') {
-  template.unshift({
-    label: app.getName(),
-    submenu: [{
-      role: 'about'
-    },
-    {
-      type: 'separator'
-    },
-    {
-      role: 'services'
-    },
-    {
-      type: 'separator'
-    },
-    {
-      role: 'hide'
-    },
-    {
-      role: 'hideothers'
-    },
-    {
-      role: 'unhide'
-    },
-    {
-      type: 'separator'
-    },
-    {
-      role: 'quit'
-    }
-    ]
-  })
+  if (process.platform === 'darwin') {
+    template.unshift({
+      label: app.getName(),
+      submenu: [{
+        role: 'about'
+      },
+      {
+        type: 'separator'
+      },
+      {
+        role: 'services'
+      },
+      {
+        type: 'separator'
+      },
+      {
+        role: 'hide'
+      },
+      {
+        role: 'hideothers'
+      },
+      {
+        role: 'unhide'
+      },
+      {
+        type: 'separator'
+      },
+      {
+        role: 'quit'
+      }
+      ]
+    })
+  }
 
   // Edit menu
   template[1].submenu.push({
@@ -181,7 +183,19 @@ export function setMenu(window) {
     role: 'front'
   }
   ]
-  // }
+
+  // If in Dev mode, add menu
+  if (isDev) {
+    template.splice(4, 0, {
+      label: 'Developer',
+      submenu: [{
+        label: 'Show Canvas Debugger',
+        click() {
+          window.webContents.send('menu_show-developer-canvas-debugger')
+        }
+      }]
+    })
+  }
 
   const menu = Menu.buildFromTemplate(template)
   Menu.setApplicationMenu(menu)
diff --git a/src/renderer/components/Screens/Artboard.vue b/src/renderer/components/Screens/Artboard.vue
index 704d0c18..f1bb2cca 100644
--- a/src/renderer/components/Screens/Artboard.vue
+++ b/src/renderer/components/Screens/Artboard.vue
@@ -45,9 +45,8 @@ export default {
     WebPage
   },
   props: {
-    index: Number,
-    id: Number,
     title: String,
+    id: String,
     height: Number,
     width: Number,
     selectedItems: Array
@@ -59,18 +58,23 @@ export default {
       }
     };
   },
+
+  mounted() {
+    this.$nextTick(() => {
+      // Remove any leftover selected artboards
+      // @TODO: This should be done from VueX Store, or wiped before quitting
+      this.$store.dispatch("selectedArtboardsEmpty");
+    });
+  },
+
   computed: {
     ...mapState({
       url: state => state.history.currentPage.url,
       selectedArtboards: state => state.selectedArtboards
     }),
-    ...mapGetters(
-      ['isInteracting']
-    ),
+    ...mapGetters(["isInteracting"]),
     isSelected() {
-      const isSelected = this.selectedArtboards.filter(
-        item => item == this.id
-      );
+      const isSelected = this.selectedArtboards.filter(item => item == this.id);
       if (isSelected.length) {
         return true;
       } else {
@@ -94,13 +98,6 @@ export default {
       return false; // Otherwise, false
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      // Remove any leftover selected artboards
-      // @TODO: This should be done from VueX Store, or wiped before quitting
-      this.$store.dispatch("selectedArtboardsEmpty");
-    });
-  },
 
   methods: {
     // Limits the size of an artboard
@@ -242,20 +239,6 @@ export default {
           value: false
         });
       }
-    },
-
-    toggleSelectedState() {
-      // Change the state
-      this.state.isSelected = !this.state.isSelected;
-
-      // Update the VueX Store
-      if (this.state.isSelected === true) {
-        // Add to Store
-        this.$store.dispatch("selectedArtboardsAdd", this.index);
-      } else {
-        // Remove from Store
-        this.$store.dispatch("selectedArtboardsRemove", this.index);
-      }
     }
   }
 };
diff --git a/src/renderer/components/Screens/Artboards.vue b/src/renderer/components/Screens/Artboards.vue
index d95be9e8..2fe990b4 100644
--- a/src/renderer/components/Screens/Artboards.vue
+++ b/src/renderer/components/Screens/Artboards.vue
@@ -154,6 +154,7 @@ export default {
 
 
 <style lang="scss">
+// WARNING: UNSCOPED!
 .selection-area {
   border: 1px solid #cbcbcb;
   background: rgba(198, 198, 198, 0.3);
diff --git a/src/renderer/components/Screens/WebPage.vue b/src/renderer/components/Screens/WebPage.vue
index 1eb08773..045de76f 100644
--- a/src/renderer/components/Screens/WebPage.vue
+++ b/src/renderer/components/Screens/WebPage.vue
@@ -23,14 +23,16 @@ export default {
     this.$nextTick(() => {
       // Permament events
       const frame = vm.$refs.frame;
-      frame.addEventListener("will-navigate", this.willNavigate); // NOTE This listener is not removed upon loading! Needs to be removed if component is destroyed
+
+      // Bind event listeners
+      this.bindEventListers();
 
       // Load the <webview> the initial time
       this.loadSite();
 
       // Watch for History actions
       // TODO Better way to watch for VueX actions?
-      this.$store.subscribeAction((action, state) => {
+      this.unsubscribeAction = this.$store.subscribeAction((action, state) => {
         switch (action.type) {
           case "reload":
             this.reload();
@@ -50,10 +52,12 @@ export default {
       });
     });
   },
-  beforeDestroy() {
-    // Remove navigation event
-    const frame = this.$refs.frame;
-    frame.removeEventListener("will-navigate", this.willNavigate);
+  beforeDestroy() { 
+    // Unbind any listeners
+    this.unbindEventListeners();
+
+    // Unsubscribe from Store
+    this.unsubscribeAction()
   },
   watch: {
     url: {
@@ -73,9 +77,18 @@ export default {
     }
   },
   methods: {
+    bindEventListers() {
+      // Remove navigation event
+      const frame = this.$refs.frame;
+      frame.addEventListener("will-navigate", this.willNavigate);
+    },
+    unbindEventListeners() {
+      // Remove navigation event
+      const frame = this.$refs.frame;
+      frame.removeEventListener("will-navigate", this.willNavigate);
+    },
     reload() {
       // Reload the current page
-      // TODO This doesn't trigger the loading indicator
       this.loadSite({
         history: false
       });
@@ -129,6 +142,13 @@ export default {
       const vm = this;
       const frame = this.$refs.frame;
 
+      if (!frame) {
+        // The frame has been destroyed
+        // Remove event listeners
+        throw new Error("Frame listeners still active after component destroy.")
+        return false;
+      }
+
       // When loading of webview starts
       function loadstart() {
         vm.$emit("loadstart"); // Show loading spinner
diff --git a/src/renderer/components/Screenshot/capture.js b/src/renderer/components/Screenshot/capture.js
index 2df16a01..8ae8c700 100644
--- a/src/renderer/components/Screenshot/capture.js
+++ b/src/renderer/components/Screenshot/capture.js
@@ -2,10 +2,14 @@ import {
   clipboard,
   nativeImage,
   remote
+,
+  shell
 } from 'electron'
 
 import isElectron from 'is-electron'
 
+
+
 const {
   dialog
 } = isElectron() ? remote : {}
@@ -14,6 +18,11 @@ const path = require('path')
 const fs = require('fs')
 const moment = require('moment')
 
+function getWebview(id) {
+  // TODO add test here, selectors are brittle
+  return document.querySelector(`[artboard-id="${id}"] webview`)
+}
+
 export async function capture(id, title, screenshotPath) {
   async function saveScreenshot(screenshot) {
     if (!screenshotPath) {
@@ -57,13 +66,17 @@ export async function capture(id, title, screenshotPath) {
         new Notification('Screenshot saved', {
           body: filePath
         })
+
+        // Open in Finder
+        shell.openItem(filePath)
       }
     )
   }
 
   try {
     // Capture the <webview>
-    const webview = document.querySelectorAll('webview')[id]
+    // Loop through the selected Webviews
+    const webview = getWebview(id)
     webview.getWebContents().capturePage(image => {
       const PNG = image.toPNG()
       saveScreenshot(PNG)
@@ -101,7 +114,7 @@ export function captureMultiple(ids) {
         // None selected
       }
     } catch (err) {
-      console.log(err)
+      throw new Error(err)
     }
   }
   )
@@ -131,10 +144,8 @@ export async function captureAll(vm) {
 // Take a screenshot
 // Return the image (NativeImage)
 export async function screenshot(id) {
-  // Select by unique artboard-id data attribute value
-  const webview = document.querySelector(`[artboard-id="${id}"] webview`)
-
   try {
+    const webview = getWebview(id)
     return webview.getWebContents().capturePage(image => {
       return image
     })
diff --git a/src/renderer/components/Screenshot/index.vue b/src/renderer/components/Screenshot/index.vue
index 8eeb511f..adde3418 100644
--- a/src/renderer/components/Screenshot/index.vue
+++ b/src/renderer/components/Screenshot/index.vue
@@ -30,7 +30,6 @@
 <script>
 import * as capture from "./capture.js";
 import { mapState } from "vuex";
-import { shell } from "electron";
 
 export default {
   name: "Screenshots",
@@ -38,7 +37,6 @@ export default {
   data() {
     return {
       isScreenshotMode: false,
-      currentModal: 1,
       filePath: ""
     };
   },
@@ -57,36 +55,6 @@ export default {
   },
 
   methods: {
-    startScreenshot() {
-      const vm = this;
-
-      // Enable mode
-      this.isScreenshotMode = !this.isScreenshotMode;
-      this.currentModal = 1;
-
-      // Add event listener
-      const el = document.getElementsByClassName("artboard");
-      for (var i = 0; i < el.length; i++) {
-        el[i].addEventListener("click", vm.artboardSelected);
-      }
-
-      // Show modal 2 if any artboards were already selected
-      if (this.selectedArtboards.length > 0) {
-        this.currentModal = 2;
-      }
-    },
-
-    artboardSelected() {
-      // Show modal 2
-      this.currentModal = 2;
-
-      // Watch for user to unselect all artboards...
-      // if so, show the first modal again
-      if (this.selectedArtboards.length < 1) {
-        this.currentModal = 1;
-      }
-    },
-
     clearAllSelected() {
       this.$store.dispatch("selectedArtboardsEmpty");
     },
@@ -94,9 +62,6 @@ export default {
     async screenshotAll() {
       try {
         await capture.captureAll(this);
-
-        // Show the success modal
-        this.currentModal = 3;
       } catch (err) {
         throw new Error(err);
       }
@@ -105,9 +70,6 @@ export default {
     async screenshotSelected() {
       try {
         await capture.captureMultiple(this.selectedArtboards);
-
-        // Show the success modal
-        this.currentModal = 3;
       } catch (err) {
         throw new Error(err);
       }
@@ -116,14 +78,6 @@ export default {
     async copyToClipboard() {
       capture.copyToClipboard(this.selectedArtboards);
       // TODO Notify the user when the image has been saved to clipboard
-    },
-
-    showInFinder() {
-      try {
-        shell.showItemInFolder(this.filePath);
-      } catch (err) {
-        throw new Error(err);
-      }
     }
   }
 };
diff --git a/src/renderer/components/SidePanel/ScreensPanel.vue b/src/renderer/components/SidePanel/ScreensPanel.vue
index 03e039b0..964f7b7a 100644
--- a/src/renderer/components/SidePanel/ScreensPanel.vue
+++ b/src/renderer/components/SidePanel/ScreensPanel.vue
@@ -9,7 +9,6 @@
       <div>
         <Button role="primary" icon="plus" @click="add" class="artboard-tabs__button">New Screen</Button>
       </div>
-      <!-- <div class="artboard-tabs__button button button--primary" @click="add()">New Screen</div> -->
 
       <!-- Show a tip if there's no artboards -->
       <div v-if="!artboards.length" class="empty-state">
@@ -164,11 +163,6 @@ export default {
   flex-direction: column;
   width: 100%;
   height: 100%;
-  // overflow: auto;
-  // position: absolute;
-  // top: 0;
-  // left: 0;
-  // bottom: 0;
 
   .artboard-tabs__scroll {
     flex-grow: 1;
@@ -211,9 +205,7 @@ export default {
       height: 0;
       border-style: solid;
       border-width: 0px 6px 6px 6px;
-      // border-width: 6px 6px 0 6px;
       border-color: transparent transparent #535353 transparent;
-      // border-color: #535353 transparent transparent transparent;
     }
 
     .empty-state__text {
diff --git a/src/renderer/components/SidePanel/artboardEditable.vue b/src/renderer/components/SidePanel/artboardEditable.vue
index 7f026364..b2343773 100644
--- a/src/renderer/components/SidePanel/artboardEditable.vue
+++ b/src/renderer/components/SidePanel/artboardEditable.vue
@@ -1,11 +1,6 @@
 <template>
-  <draggable v-model="artboards">
-    <div
-      v-for="(artboard, index) in artboards"
-      :key="artboard.id"
-      v-bind="artboard"
-      class="artboard-tab"
-    >
+  <draggable v-model="artboards" :animation="150">
+    <div v-for="artboard in artboards" v-bind="artboard" :key="artboard.id" class="artboard-tab">
       <!-- Editing state -->
       <div v-if="editMode==true&&editID==artboard.id" class="editing">
         <div class="group">
@@ -52,9 +47,9 @@
       <div
         v-else
         class="artboard-tab__container"
-        @contextmenu="rightClickMenu($event, artboard.id)"
+        @contextmenu="rightClickMenu($event, artboard)"
       >
-        <div class="artboard-tab__container-left" @click="goToArtboard(index)">
+        <div class="artboard-tab__container-left" @click="goToArtboard(artboard.id)">
           <div>{{ artboard.title }}</div>
           <div>{{ artboard.width }} x {{ artboard.height }}</div>
         </div>
@@ -76,10 +71,7 @@
 import { remote } from "electron";
 import draggable from "vuedraggable";
 import isElectron from "is-electron";
-
-if (isElectron()) {
-  const { Menu, MenuItem } = remote;
-}
+const { Menu, MenuItem } = remote;
 
 export default {
   name: "artboardEditable",
@@ -140,24 +132,32 @@ export default {
     },
     goToArtboard(id) {
       // Find the artboard (DOM)
-      const artboard = document.getElementsByClassName("artboard")[id];
-
+      const artboard = this.getArtboard(id);
       // Move the panzoom container
-      document.$panzoom.scaleToFitEl(artboard);
+      document.$panzoom.panToElement(artboard);
     },
-    rightClickMenu(e, id) {
+    rightClickMenu(e, artboard) {
       // Open the DevTools for x screen ID
-      const artboard = document.getElementsByClassName("artboard")[id];
-      const artboardFrame = artboard.querySelector(".frame");
+      // TODO using brittle selectors
+      // const artboard = this.getArtboard(artboard.id);
+      const vm = this
+      const artboardFrame = this.getArtboard(artboard.id).querySelector("webview");
 
       if (artboardFrame) {
         if (isElectron()) {
           const menu = new Menu();
+          menu.append(
+            new MenuItem({
+              label: "Duplicate",
+              click() {
+                vm.$store.dispatch("duplicateArtboard", artboard);
+              }
+            })
+          );
           menu.append(
             new MenuItem({
               label: "Open DevTools",
               click() {
-                // console.log(element);
                 artboardFrame.openDevTools();
               }
             })
@@ -167,8 +167,11 @@ export default {
       } else {
         throw new Error("No frame near artboard");
       }
-
-      // const element = e.target.querySelector(".frame");
+    },
+    getArtboard(id) {
+      // TODO add test here, selectors are brittle
+      // This could probably be a Store action
+      return document.querySelector(`[artboard-id="${id}"]`);
     }
   }
 };
@@ -207,6 +210,8 @@ $artboard-tab-side-padding: 1rem;
       min-width: 5rem;
       white-space: nowrap;
       overflow: hidden;
+      cursor: pointer;
+
       & > * {
         text-overflow: ellipsis;
         overflow: hidden;
diff --git a/src/renderer/mixins/panzoom/index.js b/src/renderer/mixins/panzoom/index.js
index ffdf277a..569a224e 100644
--- a/src/renderer/mixins/panzoom/index.js
+++ b/src/renderer/mixins/panzoom/index.js
@@ -2,6 +2,7 @@
 // 'use strict';
 
 // import EventEmitter from 'events';
+import * as pan from "./pan"
 import {
   on,
   off
@@ -11,8 +12,8 @@ import kinetic from './kinetic'
 
 export class Panzoom {
   constructor(element, parent, options = {}) {
-    this.element = element
     this.parent = parent
+    this.element = element
     this.state = {
       isEnabled: false,
       isPanning: false,
@@ -352,8 +353,6 @@ export class Panzoom {
     return this.transformMatrix
   }
 
-
-
   /**
    * Emits an event
    * @param {String} event
@@ -478,4 +477,14 @@ export class Panzoom {
     this._emit('zoomOut', event)
     this._zoom('out')
   }
+
+
+  /**
+   * Set the canvas to x, y
+   * @param {*} x px value
+   * @param {*} y px value
+   */
+  panToElement(el) {
+    pan.panToElement(el)
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/mixins/panzoom/pan.js b/src/renderer/mixins/panzoom/pan.js
index be49ce30..f7257710 100644
--- a/src/renderer/mixins/panzoom/pan.js
+++ b/src/renderer/mixins/panzoom/pan.js
@@ -123,3 +123,102 @@ export function panXY(context, event) {
     end(event, context)
   }
 }
+
+export function panToElement(el) {
+  const context = document.$panzoom // The global Panzoom context
+  if (!context.state.isPanning) {
+    // Start
+    // start(event, context)
+
+    // DOM element references
+    const parent = context.parent // This is the total available height & width
+    const container = context.element // This is the total available height & width
+    const element = el // This is the element we want to center on
+
+    /**
+     * We need to move our translate() coordinates
+     * so that the element's center point aligns
+     * with the parent container's center point.
+     * And then set the scale so that we can see
+     * the element in the viewport.
+     *
+     * NOTE: All of this relies on the current scale
+     * applied to the element that has the
+     * CSS tranform on it (context.parent)
+     *
+     * NOTE: We're working with CSS transforms
+     * with the assumption that the x and y
+     * center is 0, 0 (transform-origin 50% 50%)
+     *
+     * We can do so by getting the current width of the
+     * parent element (considering current scale).
+     *
+     * We calculate the child element's placement by
+     * first getting the distance from the left of the
+     * parent container. This is the amount it will need
+     * to travel to line up with our X axis.
+     *
+     * Then we add on the width of the element itself.
+     *
+     * As well as the computed margin of the element.
+     *
+     * Then we subtract the two middlepoints, and that
+     * value becomes the new X coordinate.
+     */
+
+    /**
+     * Get the scale
+     * This is required
+     */
+    const scale = context.transformMatrix[0]
+
+    /**
+     * The parent center point
+     */
+    const viewportCenterX = (parent.offsetWidth / 2) * scale
+    const viewportCenterY = (parent.offsetHeight / 2) * scale
+
+    /**
+     * The width of the element's container
+     */
+    const containerWidth = (container.offsetWidth / 2) * scale
+    const containerHeight = (container.offsetHeight / 2) * scale
+
+    /**
+     * The element center point
+     */
+    const offsetLeft = element.offsetLeft
+    const offsetTop = element.offsetTop
+
+    const width = element.offsetWidth / 2
+    const height = element.offsetHeight / 2
+
+    const elementCenterX = (offsetLeft + width) * scale
+    const elementCenterY = (offsetTop + height) * scale
+
+    /**
+     * We've now calculated our two center points
+     * and can subtract to calculate the new
+     * X-axis position
+     *
+     * We'll get the difference between the viewport and the container,
+     * and then move to our artboard
+     */
+    // Update the matrix
+    const matrix = context.transformMatrix
+
+    // This part is pure magic
+    matrix[4] = ((viewportCenterX - containerWidth) - (viewportCenterX - elementCenterX)) * -1
+    matrix[5] = ((viewportCenterY - containerHeight) - (viewportCenterY - elementCenterY)) * -1
+
+    // Update context's matrix
+    // This sets the position
+    context.setTransform(matrix)
+
+    // Scale to fit the screen
+    context.scaleToFit()
+
+    // End
+    // end(event, context)
+  }
+}
diff --git a/src/renderer/store/index.js b/src/renderer/store/index.js
index c368251d..4336762b 100644
--- a/src/renderer/store/index.js
+++ b/src/renderer/store/index.js
@@ -6,13 +6,8 @@ import modules from './modules'
 
 Vue.use(Vuex)
 
-// Persisted State
-const vuexLocal = new VuexPersistence({
-  storage: window.localStorage
-})
-
 export default new Vuex.Store({
   modules,
-  plugins: [vuexLocal.plugin],
-  strict: process.env.NODE_ENV !== 'production'
+  strict: process.env.NODE_ENV !== 'production',
+  plugins: [new VuexPersistence().plugin]
 })
diff --git a/src/renderer/store/modules/artboards.js b/src/renderer/store/modules/artboards.js
index fe8a34a9..9e3224de 100644
--- a/src/renderer/store/modules/artboards.js
+++ b/src/renderer/store/modules/artboards.js
@@ -1,7 +1,23 @@
-import Vue from 'vue'
+const uuid = require('uuid/v1')
 
 // All artboards on the screen
-const state = []
+// const state = []
+const state = () => {
+  return []
+}
+
+/**
+ * Mock:
+ * state = [
+ *    { id: ~uuid~,
+ *      title: 'Mobile',
+ *      height: 300,
+ *      width: 400,
+ *      x: 0,
+ *      y: 0
+ *    }
+ * ]
+ */
 
 const mutations = {
   /**
@@ -10,35 +26,31 @@ const mutations = {
    * @param  {} artboard
    */
   addArtboard(state, artboard) {
-    const artboards = state
-    const artboardsCounter = state.length || 0
-
-    const uniqueID = () => {
-      function check(val) {
-        if (artboards.find(artboard => artboard.id === val)) {
-          return false // not unique
-        } else {
-          return true // it's unique
-        }
-      }
-
-      let increment = artboardsCounter // 0+
-
-      const val = increment++
-      const flag = check(val) // True or False
-
-      if (flag === true) {
-        return val
-      }
-    }
-
-    // Append a unique ID
-    artboard.id = uniqueID()
-
-    // Add to the array
+    artboard.id = uuid()
     state.push(artboard)
   },
 
+  /**
+   * Add an Artboard
+   * @param  {} state
+   * @param  {} artboard
+   */
+  duplicateArtboard(state, payload) {
+    const {
+      oldArtboard,
+      newArtboard
+    } = payload
+
+    // Copy the input artboard
+    // Insert a new one at the next index
+    const index = state.findIndex(obj => obj.id === oldArtboard.id)
+    const newIndex = index + 1
+
+    // Push into array at index,
+    // don't remove any, just insert this artboard
+    state.splice(newIndex, 0, newArtboard)
+  },
+
   /**
    * Remove an Artboard
    * @param  {} state
@@ -46,7 +58,7 @@ const mutations = {
    */
   removeArtboard(state, id) {
     const index = state.findIndex(obj => obj.id === id)
-    Vue.delete(state, index)
+    state.splice(index, 1)
   },
 
   /** Modify an Artboard by Index
@@ -59,7 +71,7 @@ const mutations = {
     const index = state.findIndex(obj => obj.id === id)
 
     // 2. Change just that artboard's content
-    Vue.set(state, index, artboard)
+    state[index] = artboard
   },
 
   /** Resize an Artboard
@@ -78,8 +90,11 @@ const mutations = {
     }
   },
 
-  setArtboardList(state, payload) {
-    state = payload
+  setArtboardList: (state, payload) => {
+    // TODO this is not reactive currently
+    if (state !== payload) {
+      state = payload
+    }
   }
 }
 
@@ -97,6 +112,22 @@ const actions = {
     for (const i in artboards) {
       commit('addArtboard', artboards[i])
     }
+  },
+  async duplicateArtboard({
+    commit
+  }, payload) {
+    const newId = uuid()
+
+    if (newId === payload.id) throw new Error('Failed to generate new ID')
+
+    // New object from payload
+    const newArtboard = JSON.parse(JSON.stringify(payload))
+    newArtboard.id = newId
+
+    commit('duplicateArtboard', {
+      oldArtboard: payload,
+      newArtboard: newArtboard
+    })
   }
 }
 
diff --git a/src/renderer/store/modules/dev.js b/src/renderer/store/modules/dev.js
new file mode 100644
index 00000000..1783820f
--- /dev/null
+++ b/src/renderer/store/modules/dev.js
@@ -0,0 +1,19 @@
+const state = {
+  showCanvasDebugger: false
+}
+
+const mutations = {
+  /** Toggle the Sidebar on/off
+   * @param  {} state
+   * @param  {Boolean} bool
+   */
+  toggleCanvasDebugger(state) {
+    state.showCanvasDebugger = !state.showCanvasDebugger
+    console.log('called')
+  }
+}
+
+export default {
+  state,
+  mutations
+}
diff --git a/src/renderer/store/modules/index.js b/src/renderer/store/modules/index.js
index 1adc5c66..b32ceee9 100644
--- a/src/renderer/store/modules/index.js
+++ b/src/renderer/store/modules/index.js
@@ -3,9 +3,8 @@
  * in a one-shot manner. There should not be any reason to edit this file.
  */
 
-import registerRequireContextHook from 'babel-plugin-require-context-hook/register'
-registerRequireContextHook()
- 
+require('babel-plugin-require-context-hook/register')()
+
 const files = require.context('.', false, /\.js$/)
 const modules = {}
 
diff --git a/src/renderer/store/modules/selectedArtboards.js b/src/renderer/store/modules/selectedArtboards.js
index df273ed8..6cd321fb 100644
--- a/src/renderer/store/modules/selectedArtboards.js
+++ b/src/renderer/store/modules/selectedArtboards.js
@@ -3,9 +3,6 @@ const state = [] // A list of selected artboards by index
 
 const mutations = {
   add: (state, payload) => {
-    // Make sure it's a number
-    payload = parseInt(payload, 10)
-
     // Only add new numbers
     if (state.includes(payload)) return false
 
diff --git a/src/renderer/views/MainView.vue b/src/renderer/views/MainView.vue
index b92afabd..0f3d6a81 100644
--- a/src/renderer/views/MainView.vue
+++ b/src/renderer/views/MainView.vue
@@ -4,22 +4,23 @@
     <div id="canvasContainer">
       <SidePanel />
       <Screenshots />
-      <div id="canvas" ref="canvas">
-        <Artboards ref="artboards" />
+      <div id="canvas" ref="canvas" :class="{ 'dev-visual-debugger': showCanvasDebugger }">
+        <Artboards ref="artboards" :class="{ 'dev-visual-debugger': showCanvasDebugger }" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import ToolBar from "@/components/ToolBar";
-import Artboards from "@/components/Screens/Artboards";
-import SidePanel from "@/components/SidePanel";
-import Screenshots from "@/components/Screenshot";
 import { mapState } from "vuex";
 import { Panzoom } from "../mixins/panzoom";
 import { ipcRenderer } from "electron";
 import isElectron from "is-electron";
+import ToolBar from "@/components/ToolBar";
+import Artboards from "@/components/Screens/Artboards";
+import SidePanel from "@/components/SidePanel";
+import Screenshots from "@/components/Screenshot";
+const isDev = require("electron-is-dev");
 
 export default {
   name: "MainView",
@@ -29,17 +30,23 @@ export default {
     ToolBar,
     Screenshots
   },
+  data() {
+    return {
+      isDev: isDev
+    };
+  },
   computed: {
+    ...mapState(["artboards"]),
     ...mapState({
-      artboards: state => state.artboards
+      showCanvasDebugger: state => state.dev.showCanvasDebugger
     })
   },
   mounted: function() {
     let vm = this;
 
-    vm.$nextTick(() => {
-      const contentEl = vm.$refs["artboards"].$el;
+    this.$nextTick(() => {
       const controllerEl = vm.$refs["canvas"];
+      const contentEl = vm.$refs["artboards"].$el;
 
       // Initialize Panzoom
       let instance = new Panzoom(contentEl, controllerEl, {
@@ -50,24 +57,30 @@ export default {
       // Listen for changes
       // Commit them to the Vuex store
       instance
+        // Start
         .on("zoomStart", () => {
           this.$store.commit("interactionSetState", {
             key: "isZooming",
             value: true
           });
         })
-        .on("zoomStop", () => {
-          this.$store.commit("interactionSetState", {
-            key: "isZooming",
-            value: false
-          });
-        })
         .on("panStart", () => {
           this.$store.commit("interactionSetState", {
             key: "isPanning",
             value: true
           });
         })
+        // Stop
+        /* Trigger a recalculation() event
+         ** This will tell Artboards to update their
+         ** x/y coordinates
+         */
+        .on("zoomStop", () => {
+          this.$store.commit("interactionSetState", {
+            key: "isZooming",
+            value: false
+          });
+        })
         .on("panStop", () => {
           this.$store.commit("interactionSetState", {
             key: "isPanning",
@@ -90,6 +103,10 @@ export default {
       ipcRenderer.on("menu_zoom-out", () => {
         document.$panzoom.zoomOut();
       });
+      
+      ipcRenderer.on("menu_show-developer-canvas-debugger", () => {
+        this.$store.commit("toggleCanvasDebugger");
+      });
     }
   }
 };
@@ -138,4 +155,43 @@ export default {
     }
   }
 }
+
+.dev-visual-debugger {
+  &:before,
+  &:after {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    content: "";
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  // Vertical line
+  &:before {
+    left: 50%;
+    border-left: 1px solid red;
+  }
+
+  // Horizonal line
+  &:after {
+    top: 50%;
+    border-top: 1px solid red;
+  }
+
+  // Nested debugger
+  .dev-visual-debugger {
+    // Vertical line
+    &:before {
+      left: 50%;
+      border-left: 1px solid green;
+    }
+
+    // Horizonal line
+    &:after {
+      top: 50%;
+      border-top: 1px solid green;
+    }
+  }
+}
 </style>