diff --git a/README.md b/README.md
index 9c6e10c..b3bdb8b 100644
--- a/README.md
+++ b/README.md
@@ -246,11 +246,18 @@ However, I do plan on implementing this feature. Hopefully by the end of the yea
 
 ### Installing the current, github version
 
+Requirements: npm, yarn.
+
 1. Clone this repo
+2. run `yarn install`
+3. run `npm run watch:dev`
+
+TODO: see if #3 already loads the extension in FF
+
 2. Open up Firefox
 3. Go to `about:debugging`
 4. Add temporary addon
-5. Browse to wherever you saved it and select manifest.json
+5. Select `${ultrawidify_folder}/dist/manifest.json`
 
 
 # Edge-specific limitations (IMPORTANT!)
@@ -266,6 +273,8 @@ As a result, you'll have to download the extension and install it manually. This
 ![Feast on dem popup](https://user-images.githubusercontent.com/12505802/46113923-d1693180-c1df-11e8-82f0-ad64cbc57558.png)
 Unfortunate consequence of this is that you won't be able to enable this extension for sites other than Youtube and Netflix, but then again. Let's be honest. You're only using Edge for Netflix, so that's probably no big deal for you.
 
+**It's also worth noting that I'm not  actively maintaining the Edge fork, so it's a few versions behind.** 
+
 ## Installing Ultrawidify in M$ Edge
 
 1. Download the zip file from [here](https://github.com/xternal7/ultrawidify/tree/master/releases/edge)
diff --git a/src/common/components/shortcut-button.vue b/src/common/components/shortcut-button.vue
index 6b623ab..569e8f1 100644
--- a/src/common/components/shortcut-button.vue
+++ b/src/common/components/shortcut-button.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex flex-column">
-    <div class="flex w100">
+  <div class="flex flex-column flex-center">
+    <div class="flex flex-self-center">
       {{label}}
     </div>
-    <div class="flex w100 dark">
+    <div class="flex dark flex-self-center">
       <small>
         {{shortcut ? `(${shortcut})` : ''}}
       </small>
@@ -20,7 +20,10 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+.center-text {
+  text-align: center;
+}
 .dark {
   opacity: 50%;
 }
diff --git a/src/popup/App.vue b/src/popup/App.vue
index b95f8fb..54a8461 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -1,77 +1,79 @@
 <template>
-  <div>
+  <div class="popup">
     <div class="header">
       <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
     </div>
 
-     <!-- TABS/SIDEBAR -->
-    <div id="tablist" class="left-side">
-      <div class="menu-item"
-           :class="{'selected-tab': selectedTab === 'extension'}"
-           @click="selectTab('extension')"
-      >
-        <div class="">
-          Extension settings
+    <div class="flex flex-row">
+      <!-- TABS/SIDEBAR -->
+      <div id="tablist" class="flex flex-column flex-nogrow flex-noshrink">
+        <div class="menu-item"
+            :class="{'selected-tab': selectedTab === 'extension'}"
+            @click="selectTab('extension')"
+        >
+          <div class="">
+            Extension settings
+          </div>
+          <div class="">
+          </div>
         </div>
-        <div class="">
+        <div class="menu-item"
+            :class="{'selected-tab': selectedTab === 'site'}"
+            @click="selectTab('site')"
+        >
+          <div class="">
+            Site settings
+          </div>
+          <div class="">
+          </div>
         </div>
-      </div>
-      <div class="menu-item"
-           :class="{'selected-tab': selectedTab === 'site'}"
-           @click="selectTab('site')"
-      >
-        <div class="">
-          Site settings
+        <div class="menu-item"
+            :class="{'selected-tab': selectedTab === 'video'}"
+            @click="selectTab('video')"
+        >
+          <div class="">
+            Video settings
+          </div>
+          <div class="">
+          </div>
+          <div class="">
+            <div v-for="frame of activeFrames">
+            </div>
+          </div>
         </div>
+        <div class="menu-item"
+            :class="{'selected-tab': selectedTab === 'about'}"
+            @click="selectTab('about')"
+        >
         <div class="">
+            About
+          </div>
+          <div class="">
+          </div>
         </div>
-      </div>
-      <div class="menu-item"
-           :class="{'selected-tab': selectedTab === 'video'}"
-           @click="selectTab('video')"
-      >
-        <div class="">
-          Video settings
-        </div>
-        <div class="">
-        </div>
-        <div class="">
-          <div v-for="frame of activeFrames">
+        <div class="menu-item"
+            :class="{'selected-tab': selectedTab === 'beggathon'}"
+            @click="selectTab('beggathon')"
+        >
+          <div class="">
+            Donate
+          </div>
+          <div class="">
           </div>
         </div>
       </div>
-      <div class="menu-item"
-           :class="{'selected-tab': selectedTab === 'about'}"
-           @click="selectTab('about')"
-      >
-       <div class="">
-          About
-        </div>
-        <div class="">
-        </div>
-      </div>
-      <div class="menu-item"
-           :class="{'selected-tab': selectedTab === 'beggathon'}"
-           @click="selectTab('beggathon')"
-      >
-        <div class="">
-          Donate
-        </div>
-        <div class="">
-        </div>
-      </div>
-    </div>
 
-     <!-- PANELS/CONTENT -->
-    <div id="tab-content" class="right-side">
-      <VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
-                  class=""
-                  :settings="settings"
-                  :frame="selectedFrame"
-                  :zoom="currentZoom"
-                  @zoom-change="updateZoom($event)"
-      >
-      </VideoPanel>
+      <!-- PANELS/CONTENT -->
+      <div id="tab-content" class="flex-grow" style="max-width: 480px !important;">
+        <VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
+                    class=""
+                    :settings="settings"
+                    :frame="selectedFrame"
+                    :zoom="currentZoom"
+                    @zoom-change="updateZoom($event)"
+        >
+        </VideoPanel>
+      </div>
     </div>
   </div>
 </template>
@@ -82,13 +84,13 @@ import BrowserDetect from '../ext/conf/BrowserDetect';
 import Comms from '../ext/lib/comms/Comms';
 import VideoPanel from './panels/VideoPanel';
 import Settings from '../ext/lib/Settings';
+import ExecAction from './js/ExecAction.js';
 
 export default {
   data () {
     return {
       selectedTab: 'video',
       selectedFrame: '__all',
-      settings: {},
       activeFrames: [],
       port: BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'}),
       comms: new Comms(),
@@ -96,13 +98,14 @@ export default {
       frameStoreCount: 0,
       site: null,
       currentZoom: 1,
+      execAction: new ExecAction(),
+      settings: new Settings(undefined, () => this.updateConfig()),
     }
   },
   async created() {
-    const ns = new Settings(undefined, () => this.updateConfig());
-    await ns.init();
-    this.settings = ns;
+    this.settings.init();
     this.port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
+    this.execAction.setSettings(this.settings);
   },
   components: {
     VideoPanel,
@@ -113,6 +116,9 @@ export default {
     },
     selectFrame(frame) {
       this.selectedFrame = frame;
+    },
+    async updateConfig() {
+
     },
     processReceivedMessage(message, port) {
       if (Debug.debug) {
@@ -156,13 +162,18 @@ export default {
 
 <style lang="scss" scoped>
 html, body {
-  width: 780px !important;
+  width: 800px !important;
   max-width: 800px !important;
   padding: 0px;
   margin: 0px;
 }
 
+#tablist {
+  min-width: 275px;
+}
+
 .header {
+  overflow: hidden;
   background-color: #7f1416;
   color: #fff;
   margin: 0px;
@@ -247,4 +258,10 @@ html, body {
   content: "</>";
   padding-left: 0.33em;
 }
+
+.popup {
+  max-width: 780px;
+  // width: 800px;
+  height: 600px;
+}
 </style>
diff --git a/src/popup/panels/VideoPanel.vue b/src/popup/panels/VideoPanel.vue
index e728fb0..0135188 100644
--- a/src/popup/panels/VideoPanel.vue
+++ b/src/popup/panels/VideoPanel.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div v-if="true">
+  <div class="w100">
+    <div v-if="true" class="w100">
       <div class="label">Cropping mode:</div>
       <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
@@ -15,14 +15,16 @@
       </div>
     </div>
 
-    <div v-if="true">
+    <div v-if="true" class="w100">
       <div class="label">Zooming and panning</div>
-      <div class="row">
+      <div class="row w100"
+      >
         <!--
           min, max and value need to be implemented in js as this slider 
           should use logarithmic scale
         -->
-        <input id="_input_zoom_slider" class="w100"
+        <input id="_input_zoom_slider" 
+                class="w100"
                 type="range"
                 step="any"
                 min="-1"
@@ -30,11 +32,11 @@
                 :value="logarithmicZoom"
                 @input="changeZoom($event.target.value)"
                 />
-        <div style="overflow: auto">
-          <div class="inline-block float-left medium-small x-pad-1em">
+        <div style="overflow: auto" class="flex flex-row">
+          <div class="flex flex-grow medium-small x-pad-1em">
             Zoom: {{(zoom * 100).toFixed()}}%
           </div>
-          <div class="inline-block float-right medium-small">
+          <div class="flex flex-nogrow flex-noshrink medium-small">
             <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
           </div> 
         </div>
diff --git a/src/popup/popup.html b/src/popup/popup.html
index 0f6fd6b..7df2a2a 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -8,7 +8,7 @@
   <!-- Load some resources only in development environment -->
   <% } %>
 </head>
-<body>
+<body style="width: 800px; height: 600px; overflow-x: hidden">
   <div id="app">
 
   </div>
diff --git a/src/res/css/flex.css b/src/res/css/flex.css
index 7ba378d..4e73579 100644
--- a/src/res/css/flex.css
+++ b/src/res/css/flex.css
@@ -17,7 +17,29 @@
 .flex-grow {
   flex-grow: 1;
 }
+.flex-nogrow {
+  flex-grow: 0;
+}
+.flex-shrink {
+  flex-shrink: 1;
+}
+.flex-noshrink {
+  flex-shrink: 0;
+}
+
 
 .flex-wrap {
   flex-wrap: wrap;
 }
+
+.flex-center {
+  align-content: center;
+}
+
+.flex-cross-center {
+  justify-content: center;
+}
+
+.flex-self-center {
+  align-self: center;
+}
\ No newline at end of file