diff --git a/src/common/interfaces/SettingsInterface.ts b/src/common/interfaces/SettingsInterface.ts
index 87a4aa3..31936b4 100644
--- a/src/common/interfaces/SettingsInterface.ts
+++ b/src/common/interfaces/SettingsInterface.ts
@@ -29,6 +29,7 @@ interface RestrictionsSettings {
   minAllowedWidth?: number;           // if player is less than this many px wide, ultrawidify will disable itself
   minAllowedHeight?: number;          // if player is less than this many px tall, ultrawidify will disable itself
   onlyAllowInFullscreen?: boolean;    // if enabled, ultrawidify will be disabled when not in full screen regardless of what previous two options say
+  onlyAllowAutodetectionInFullScreen?: boolean;  // if enabled, autodetection will only start once in full screen
 }
 
 export interface CommandInterface {
diff --git a/src/csui/PlayerUiBase.vue b/src/csui/PlayerUiBase.vue
index d154e8f..5d580bc 100644
--- a/src/csui/PlayerUiBase.vue
+++ b/src/csui/PlayerUiBase.vue
@@ -108,6 +108,11 @@
               :site="site"
             >
             </PlayerDetectionPanel>
+            <BaseExtensionSettings
+              v-if="selectedTab === 'extensionSettings'"
+              :settings="settings"
+              :site="site"
+            ></BaseExtensionSettings>
             <AutodetectionSettingsPanel
               v-if="selectedTab === 'autodetectionSettings'"
               :settings="settings"
@@ -131,6 +136,7 @@
 </template>
 
 <script>
+import BaseExtensionSettings from './src/PlayerUiPanels/BaseExtensionSettings.vue'
 import DebugPanel from './src/PlayerUiPanels/DebugPanel.vue'
 import VideoSettings from './src/PlayerUiPanels/VideoSettings.vue'
 import AutodetectionSettingsPanel from './src/PlayerUiPanels/AutodetectionSettingsPanel.vue'
@@ -150,7 +156,7 @@ export default {
     ResizerDebugPanel,
     VideoSettings,
     PlayerDetectionPanel,
-    AutodetectionSettingsPanel, DebugPanel
+    AutodetectionSettingsPanel, DebugPanel, BaseExtensionSettings
   },
   data() {
     return {
@@ -199,6 +205,7 @@ export default {
       tabs: [
         {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
         {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
+        {id: 'extensionSettings', label: 'Extension options', icon: 'cogs' },
         {id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
         {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
         {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
diff --git a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
new file mode 100644
index 0000000..38f052f
--- /dev/null
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="flex flex-column w-100">
+
+    <h2>Settings for {{site}}</h2>
+    <SiteExtensionSettings
+      :settings="settings"
+      :site="site"
+    ></SiteExtensionSettings>
+
+
+    <h2>Default settings</h2>
+    <div class="field">
+      <div class="label">Default crop:</div>
+      <div class="select">
+        <select>
+          <!-- todo: load crop options -->
+        </select>
+      </div>
+      <div class="hint">'Auto' option will enable autodetection. 'Reset' will disable extension until manually activated.</div>
+    </div>
+    <div class="field">
+      <div class="label">Default stretch:</div>
+      <div class="select">
+        <select>
+          <!-- todo: load stretch options -->
+        </select>
+      </div>
+    </div>
+    <div class="field">
+      <div class="label">Persist crop mode between videos</div>
+      <div class="select">
+        <select>
+          <!-- todo: load crop mode persistence -->
+        </select>
+      </div>
+    </div>
+
+    <div class="field">
+      <div class="label">Only enable extension in full screen</div>
+      <div class="select">
+        <select>
+
+        </select>
+      </div>
+    </div>
+    <div class="field">
+      <div class="label">Only enable autodetection in full screen</div>
+      <div class="select">
+        <select>
+
+        </select>
+      </div>
+    </div>
+
+    <SiteSettingsBasicTable
+      :settings="settings"
+    ></SiteSettingsBasicTable>
+
+  </div>
+</template>
+
+<script>
+import SiteSettingsBasicTable from './PanelComponents/ExtensionSettings/SiteSettingsBasicTable.vue'
+import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExtensionSettings.vue'
+
+export default {
+  data() {
+
+  },
+  mixins: [
+
+  ],
+  props: [
+    'settings',
+    'site',
+  ],
+  components: {
+    SiteExtensionSettings,
+    SiteSettingsBasicTable
+  },
+
+}
+</script>
+
+<style lang="scss" src="../../../res/css/flex.scss" scoped module></style>
+<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="../res-common/common.scss" scoped module></style>
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
new file mode 100644
index 0000000..98ea403
--- /dev/null
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <h3>Extension settings</h3>
+    <div class="field">
+      <div class="label">Default crop:</div>
+      <div class="select">
+        <select
+          v-model="siteDefaultCrop"
+          @click="setOption('defaultCrop', $event)"
+        >
+          <option
+            v-if="site !== '@global'"
+            :value="undefined"
+          >
+            Use default ({{defaultCrop}})
+          </option>
+          <option
+            v-for="(command, index) of settings?.active.commands.crop"
+            :key="index"
+            :value="JSON.stringify(command.arguments)"
+          >
+            {{command.label}}
+          </option>
+        </select>
+      </div>
+      <div class="hint">'Auto' option will enable autodetection. 'Reset' will disable extension until manually activated.</div>
+    </div>
+    <div class="field">
+      <div class="label">Default stretch:</div>
+      <div class="select">
+        <select
+          v-model="siteDefaultStretchMode"
+          @click="setOption('defaultStretch', $event)"
+        >
+          <option
+            v-if="site !== '@global'"
+            :value="undefined"
+          >
+            Use default ({{defaultStretch}})
+          </option>
+          <option
+            v-for="(command, index) of settings?.active.commands.stretch"
+            :key="index"
+            :value="JSON.stringify(command.arguments)"
+          >
+            {{command.label}}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div class="field">
+      <div class="label">Persist crop mode between videos</div>
+      <div class="select">
+        <select
+          v-model="siteDefaultCropModePersistence"
+          @click="setOption('cropModePersistence')"
+        >
+          <option
+            v-if="site !== '@global'"
+            :value="CropModePersistence.Default"
+          >
+            Use default ({{defaultCropPersistence}})
+          </option>
+          <option :value="CropModePersistence.Disabled">Disabled</option>
+          <option :value="CropModePersistence.UntilPageReload">Until page reload</option>
+          <option :value="CropModePersistence.CurrentSession">Current session</option>
+          <option :value="CropModePersistence.Forever">Always persist</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="field">
+      <div class="label">Disable extension when not in full screen</div>
+      <div class="select">
+        <select
+          v-model="siteDefaultFullScreenOnly"
+          @click="setOption('restrictions.onlyAllowInFullScreen', $event)"
+        >
+          <option :value="undefined">Use default ({{defaultFullScreenOnly}})</option>
+          <option :value="true">Yes</option>
+          <option :value="false">No</option>
+        </select>
+      </div>
+      <div class="hint">This option will disable entire extension (including user interface and keyboard shortcuts) while not in full screen. If you use theater mode, you will want to set this option to 'No'.</div>
+    </div>
+    <div class="field">
+      <div class="label">Disable autodetection when not in full screen</div>
+      <div class="select">
+        <select
+          v-model="siteDefaultAardFullScreenOnly"
+          @click="setOption('restrictions.onlyAllowInFullScreen', $event)"
+        >
+          <option :value="undefined">Use default ({{defaultAardFullScreenOnly}})</option>
+          <option :value="true">Yes</option>
+          <option :value="false">No</option>
+        </select>
+      </div>
+      <div class="hint">This option will disable autodetection while not in full screen. Other extension functionalities will keep functioning. If you want autodetection in theater mode, you will want to set this option to 'No'.</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CropModePersistence from './../../../../../common/enums/CropModePersistence.enum';
+
+export default {
+  data() {
+    return {
+      CropModePersistence: CropModePersistence,
+    }
+  },
+  mixins: [
+
+  ],
+  props: [
+    'settings',
+    'site',
+  ],
+  components: {
+
+  },
+  computed: {
+    siteDefaultCrop() {
+      return JSON.stringify(
+        this.settings?.getDefaultCrop(this.site) ?? {type: this.site === '@global' ? AspectRatioType.Automatic : AspectRatioType.Default}
+      );
+    },
+    siteDefaultStretch() {
+      return JSON.stringify(
+        this.settings?.getDefaultStretch(this.site) ?? {type: this.site === '@global' ? StretchMode.NoStretch : StretchMode.Default}
+      );
+    },
+    siteDefaultCropPersistence() {
+      return CropModePersistence.Default;
+      // this.settings?.getDefaultCropPersistence(this.site) ?? {type: this.site === '@global' ? CropModePersistence.Disabled : CropModePersistence.Default}
+    },
+    siteDefaultFullScreenOnly() {
+      return undefined;
+      // return this.settings.getDefaultRestriction(this.site, 'onlyAllowInFullscreen');
+    },
+    siteDefaultAardFullScreenOnly() {
+      return undefined;
+      // return this.settings.getDefaultRestriction(this.site, 'onlyAllowAutodetectionInFullscreen')
+    },
+    defaultCrop() {
+      return 'parse me';
+    },
+    defaultStretch() {
+      return 'parse me';
+    },
+    defaultCropPersistence() {
+      return 'parse me';
+    },
+    defaultFullScreenOnly() {
+      return 'parse me';
+    },
+    defaultAardFullScreenOnly() {
+      return 'parse me';
+    }
+  },
+  methods: {
+    getOption(option) {
+
+    },
+    setOption(option, $event) {
+      let commandArguments;
+
+      // if argument is json, parse json. Otherwise, pass the value as-is
+      try {
+        commandArguments = $event.target.value !== undefined ? JSON.parse($event.target.value) : undefined;
+      } catch(e) {
+        commandArguments = $event.target.value;
+      }
+
+      if (!this.settings.active.sites[this.site]) {
+        this.settings.active.sites[this.site] = this.settings.getDefaultSiteConfiguration();
+      }
+
+      const optionPath = option.split('.');
+      if (optionPath.length < 2) {
+        this.settings.active.sites[this.site][option] = commandArguments;
+      } else {
+        let currentOptionObject = this.settings.active.sites[this.site][optionPath[0]];
+        let i;
+        for (i = 1; i < optionPath.length - 1; i++) {
+          if (currentOptionObject[optionPath[i]] === undefined) {
+            currentOptionObject[optionPath[i]] = {};
+          }
+          currentOptionObject = currentOptionObject[optionPath[i]];
+        }
+        currentOptionObject[optionPath[optionPath.length - 1]] = commandArguments;
+      }
+
+      this.settings.saveWithoutReload();
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" src="../../../../../res/css/flex.scss" scoped></style>
+<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="../../../res-common/common.scss" scoped></style>
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteSettingsBasicTable.vue b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteSettingsBasicTable.vue
new file mode 100644
index 0000000..d8b92f2
--- /dev/null
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteSettingsBasicTable.vue
@@ -0,0 +1,40 @@
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>Site</th>
+        <th>Status</th>
+        <th>Crop</th>
+        <th>Persist crop</th>
+        <th>Stretch</th>
+        <th>FS only</th>
+        <th>AARD FS only</th>
+      </tr>
+    </thead>
+    <tbody>
+      <template v-for="site in settings.active.sites" :key="site">
+        <tr>
+          <!-- host -->                 <td>{{site}}</td>
+          <!-- official status? -->     <td>{{settings.active.sites[site].type}}</td>
+          <!-- enabled? -->             <td>todo: add</td>
+          <!-- full screen only? -->    <td>{{settings.active.sites[site].restrictions?.fullScreenOnly}}</td>
+          <!--  -->
+        </tr>
+      </template>
+    </tbody>
+  </table>
+</template>
+<script>
+export default {
+  data() {
+
+  },
+  props: [
+    'settings',
+  ],
+  components: {
+
+  },
+
+}
+</script>
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
index a1ee3b1..df23058 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
@@ -210,14 +210,14 @@ export default {
     EditShortcutButton,
   },
   computed: {
-    extensionDefaultCrop() {
+    extensionDefaultStretch() {
       return JSON.stringify(
-        this.settings?.active.crop?.default ?? {type: AspectRatioType.Automatic}
+        this.settings?.active.stretch?.default ?? {type: StretchMode.NoStretch}
       );
     },
-    siteDefaultCrop()  {
+    siteDefaultStretch() {
       return JSON.stringify(
-        this.settings?.getDefaultCrop(this.site) ?? {type: AspectRatioType.Automatic}
+        this.settings?.getDefaultStretch(this.site) ?? {type: StretchMode.NoStretch}
       );
     },
   },
diff --git a/src/csui/src/res-common/common.scss b/src/csui/src/res-common/common.scss
index 21b07b6..1ee4905 100644
--- a/src/csui/src/res-common/common.scss
+++ b/src/csui/src/res-common/common.scss
@@ -98,6 +98,7 @@ h1, h2, h3 {
     font-size: 0.8rem;
     opacity: 0.7;
     margin-top: 0.25rem;
+    width: 100%;
   }
   .select {
 
diff --git a/src/popup/App.vue b/src/popup/App.vue
index 0139784..9bd5e4f 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -27,7 +27,7 @@
       <div class="">
         side menu
       </div>
-      <div>
+      <div class="scrollable">
         <PopupVideoSettings
           :settings="settings"
           :eventBus="eventBus"
@@ -35,12 +35,12 @@
           :frame="selectedFrame"
         ></PopupVideoSettings>
       </div>
-      <pre>
+      <!-- <pre>
         ---- site:
         {{site}}
 
         ----
-      </pre>
+      </pre> -->
 
     </div>
   </div>
@@ -304,6 +304,10 @@ html {
   font-size: 1.27em;
 }
 
+.scrollable {
+  height: 100%;
+  overflow-y: auto;
+}
 
 .menu-item-inline-desc{
   font-size: 0.60em;
diff --git a/src/popup/panels/PopupVideoSettings.vue b/src/popup/panels/PopupVideoSettings.vue
index ea1d4c0..073cfa1 100644
--- a/src/popup/panels/PopupVideoSettings.vue
+++ b/src/popup/panels/PopupVideoSettings.vue
@@ -2,10 +2,11 @@
   <div class="flex flex-column" style="padding-bottom: 20px">
     <div class="flex flex-row">
       <mdicon name="crop" :size="32" />
-      <h1>Crop video:</h1>
+      <h3>Crop video:</h3>
     </div>
 
     <CropOptionsPanel
+      style="margin-top: -2rem"
       :settings="settings"
       :frame="frame"
       :exec="exec"
@@ -14,11 +15,57 @@
       :isEditing="false"
     >
     </CropOptionsPanel>
+
+    <div class="flex flex-row">
+      <mdicon name="crop" :size="32" />
+      <h3>Stretch video:</h3>
+    </div>
+
+    <StretchOptionsPanel
+      style="margin-top: -2rem"
+      :settings="settings"
+      :frame="frame"
+      :exec="exec"
+      :eventBus="eventBus"
+      :site="site"
+      :isEditing="false"
+    ></StretchOptionsPanel>
+
+    <div class="flex flex-row">
+      <mdicon name="crop" :size="32" />
+      <h3>Zoom:</h3>
+    </div>
+
+    <ZoomOptionsPanel
+      style="margin-top: -2rem"
+      :settings="settings"
+      :frame="frame"
+      :exec="exec"
+      :eventBus="eventBus"
+      :site="site"
+      :isEditing="false">
+    </ZoomOptionsPanel>
+
+    <div class="flex flex-row">
+      <mdicon name="crop" :size="32" />
+      <h3>Video alignment:</h3>
+    </div>
+
+    <div class="flex flex-row">
+      <alignment-options-control-component
+        :eventBus="eventBus"
+      >
+      </alignment-options-control-component>
+    </div>
+
+
   </div>
 
 </template>
 
 <script>
+import ZoomOptionsPanel from '../../csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue'
+import StretchOptionsPanel from '../../csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue'
 import CropOptionsPanel from '../../csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue'
 import ExecAction from '../../csui/src/ui-libs/ExecAction';
 
@@ -38,7 +85,7 @@ export default {
     'site'
   ],
   components: {
-    CropOptionsPanel
+    CropOptionsPanel, StretchOptionsPanel, ZoomOptionsPanel
   },
   created() {
     this.exec = new ExecAction(this.settings, window.location.hostname);