diff --git a/src/popup/App.vue b/src/popup/App.vue
index e82e1af..10e06da 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -27,6 +27,14 @@
       <div class="">
         side menu
       </div>
+      <div>
+        <PopupVideoSettings
+          :settings="settings"
+          :eventBus="eventBus"
+          :site="site"
+          :frame="site.frame[0]"
+        ></PopupVideoSettings>
+      </div>
       <pre>
         ---- site:
         {{site}}
diff --git a/src/popup/js/ExecAction.ts b/src/popup/js/ExecAction.ts
deleted file mode 100644
index 0fefe5b..0000000
--- a/src/popup/js/ExecAction.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { browser } from '../../../node_modules/webextension-polyfill-ts/lib/index';
-import Settings from '../../ext/lib/Settings';
-
-class ExecAction {
-  settings: Settings;
-  site: any;
-
-  constructor(settings, site) {
-    this.settings = settings;
-    this.site = site;
-  }
-
-  setSettings(settings) {
-    this.settings = settings;
-  }
-  setSite(site) {
-    this.site = site;
-  }
-
-  async exec(action, scope, frame) {
-    for (var cmd of action.cmd) {
-      if (scope === 'page') {
-        const message = {
-          forwardToContentScript: true,
-          targetFrame: frame,
-          frame: frame,
-          cmd: cmd.action,
-          arg: cmd.arg,
-          customArg: cmd.customArg
-        }
-        browser.runtime.sendMessage(message);
-      } else {
-
-        // set-ar-persistence sends stuff to content scripts as well (!)
-        // it's important to do that BEFORE the save step
-        if (cmd.action === 'set-ar-persistence') {
-          // even when setting global defaults, we only send message to the current tab in
-          // order to avoid problems related to
-          const message = {
-            forwardToActive: true,
-            targetFrame: frame,
-            frame: frame,
-            cmd: cmd.action,
-            arg: cmd.arg,
-          }
-          // this hopefully delays settings.save() until current crops are saved on the site
-          // and thus avoid any fucky-wuckies
-          await browser.runtime.sendMessage(message);
-        }
-
-        let site = this.site;
-        if (scope === 'global') {
-          site = '@global';
-        } else if (!this.site) {
-          site = window.location.hostname;
-        }
-
-        if (scope === 'site' && !this.settings.active.sites[site]) {
-          this.settings.active.sites[site] = this.settings.getDefaultOption();
-        }
-
-        if (cmd.action === "set-stretch") {
-          this.settings.active.sites[site].stretch = cmd.arg;
-        } else if (cmd.action === "set-alignment") {
-          this.settings.active.sites[site].videoAlignment = cmd.arg;
-        } else if (cmd.action === "set-extension-mode") {
-          this.settings.active.sites[site].mode = cmd.arg;
-        } else if (cmd.action === "set-autoar-mode") {
-          this.settings.active.sites[site].autoar = cmd.arg;
-        } else if (cmd.action === 'set-keyboard') {
-          this.settings.active.sites[site].keyboardShortcutsEnabled = cmd.arg;
-        } else if (cmd.action === 'set-ar-persistence') {
-          this.settings.active.sites[site]['cropModePersistence'] = cmd.arg;
-          this.settings.saveWithoutReload();
-        }
-
-        if (cmd.action !== 'set-ar-persistence') {
-          this.settings.save();
-        }
-      }
-    }
-  }
-}
-
-export default ExecAction;
diff --git a/src/popup/panels/PopupVideoSettings.vue b/src/popup/panels/PopupVideoSettings.vue
index 4e5d8cd..ff40745 100644
--- a/src/popup/panels/PopupVideoSettings.vue
+++ b/src/popup/panels/PopupVideoSettings.vue
@@ -1,74 +1,50 @@
 <template>
-  <div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
-
-    <div v-if="settings" class="sub-panel">
-      <div class="flex flex-row">
-        <mdicon name="crop" :size="32" />
-        <h1>Crop video:</h1>
-      </div>
-      <div class="sub-panel-content flex flex-row flex-wrap">
-        <ShortcutButton
-          v-for="(command, index) of settings?.active.commands.crop"
-          class="flex b3 button"
-          :class="{active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command)}"
-          :key="index"
-          :label="command.label"
-          :shortcut="getKeyboardShortcutLabel(command)"
-          @click="editMode ? editAction(command, index, 'crop') : execAction(command)"
-        >
-        </ShortcutButton>
-
-        <!-- "Add new" button -->
-        <ShortcutButton
-          v-if="editMode"
-          class="button b3"
-          :class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
-          label="Add new"
-          @click="editAction(
-            {action: 'set-ar', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
-            null,
-            'crop'
-          )"
-        ></ShortcutButton>
-      </div>
-
-      <div class="edit-action-area">
-        <div class="field">
-          <div class="label">Default for this site</div>
-          <div class="select">
-            <select
-              :value="siteDefaultCrop"
-              @click="setDefaultCrop($event, 'site')"
-            >
-              <option
-                v-for="(command, index) of settings?.active.commands.crop"
-                :key="index"
-                :value="JSON.stringify(command.arguments)"
-              >
-                {{command.label}}
-              </option>
-            </select>
-          </div>
-        </div>
-        <div class="field">
-          <div class="label">Extension default</div>
-          <div class="select">
-            <select
-              :value="extensionDefaultCrop"
-              @click="setDefaultCrop($event, 'global')"
-            >
-              <option
-                v-for="(command, index) of settings?.active.commands.crop"
-                :key="index"
-                :value="JSON.stringify(command.arguments)"
-              >
-                {{command.label}}
-              </option>
-            </select>
-          </div>
-        </div>
-      </div>
+  <div class="flex flex-column" style="padding-bottom: 20px">
+    <div class="flex flex-row">
+      <mdicon name="crop" :size="32" />
+      <h1>Crop video:</h1>
     </div>
+
+    <CropOptionsPanel
+      :settings="settings"
+      :frame="frame"
+      :exec="exec"
+      :eventBus="eventBus"
+      :site="site"
+      :isEditing="false"
+    >
+    </CropOptionsPanel>
   </div>
 
 </template>
+
+<script>
+import ExecAction from '../../csui/src/ui-libs/ExecAction';
+
+export default {
+  data() {
+    return {
+      exec: null,
+    };
+  },
+  mixins: [
+
+  ],
+  props: [
+    'settings',
+    'frame',
+    'eventBus',
+    'site'
+  ],
+  created() {
+    this.exec = new ExecAction(this.settings, window.location.hostname);
+    this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)});
+  },
+  mounted() {
+    this.eventBus.sendToTunnel('get-ar');
+  },
+  methods: {
+
+  }
+}
+</script>