diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
index 87bb69f..2ef9225 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
@@ -132,11 +132,11 @@
       <div class="select">
         <select
           v-model="siteDefaultCrop"
-          @click="setOption('defaults.crop', $event)"
+          @change="setOption('defaults.crop', $event)"
         >
           <option
             v-if="!isDefaultConfiguration"
-            :value="undefined"
+            :value="JSON.stringify({useDefault: true})"
           >
             Use default ({{getCommandValue(settings?.active.commands.crop, siteSettings.data.defaults.crop)}})
           </option>
@@ -158,11 +158,11 @@
       <div class="select">
         <select
           v-model="siteDefaultStretch"
-          @click="setOption('defaults.stretch', $event)"
+          @change="setOption('defaults.stretch', $event)"
         >
           <option
             v-if="!isDefaultConfiguration"
-            :value="undefined"
+            :value="JSON.stringify({useDefault: true})"
           >
             Use default ({{getCommandValue(settings?.active.commands.stretch, siteSettings.data.defaults.stretch)}})
           </option>
@@ -183,11 +183,11 @@
       <div class="select">
         <select
           v-model="siteDefaultAlignment"
-          @click="setOption('defaults.alignment', $event)"
+          @change="setOption('defaults.alignment', $event)"
         >
           <option
             v-if="!isDefaultConfiguration"
-            :value="undefined"
+            :value="JSON.stringify({useDefault: true})"
           >
             Use default ({{getAlignmentLabel(siteSettings.data.defaults.alignment)}})
           </option>
@@ -268,13 +268,14 @@ export default {
       }
     },
     siteDefaultCrop() {
-      return this.siteSettings.raw?.defaults?.crop ? JSON.stringify(this.siteSettings.raw?.defaults?.crop) : undefined;
+      // console.log('Getting default site crop:', this.siteSettings.raw?.defaults?.crop ? 'yay' : '{useDefault}', this.siteSettings.raw?.defaults?.crop)
+      return this.siteSettings.raw?.defaults?.crop ? JSON.stringify(this.siteSettings.raw?.defaults?.crop) : JSON.stringify({useDefault: true});
     },
     siteDefaultStretch() {
-      return this.siteSettings.raw?.defaults?.stretch ? JSON.stringify(this.siteSettings.raw?.defaults?.stretch) : undefined;
+      return this.siteSettings.raw?.defaults?.stretch ? JSON.stringify(this.siteSettings.raw?.defaults?.stretch) : JSON.stringify({useDefault: true});
     },
     siteDefaultAlignment() {
-      return this.siteSettings.raw?.defaults?.alignment ? JSON.stringify(this.siteSettings.raw?.defaults?.alignment) : undefined;
+      return this.siteSettings.raw?.defaults?.alignment ? JSON.stringify(this.siteSettings.raw?.defaults?.alignment) : JSON.stringify({useDefault: true});
     },
     siteDefaultCropPersistence() {
       return this.siteSettings.raw?.persistCSA ?? undefined;
@@ -386,17 +387,24 @@ export default {
     getOption(option) {
 
     },
-    setOption(option, $event) {
+    async setOption(option, $event) {
+      const value = $event.target.value;
       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;
+        commandArguments = value !== undefined ? JSON.parse(value) : undefined;
       } catch(e) {
-        commandArguments = $event.target.value;
+        commandArguments = value;
       }
 
-      this.siteSettings.set(option, commandArguments);
+      if (commandArguments.useDefault) {
+        commandArguments = undefined;
+      }
+
+      // console.log('setting option', option, 'to cmd:', commandArguments, 'event data in:', value);
+      await this.siteSettings.set(option, commandArguments);
+      this.$nextTick( () => this.$forceUpdate() );
     },
     setExtensionMode(component, event) {
       const option = event.target.value;
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
index d293700..5b20083 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
@@ -120,7 +120,7 @@
       <div class="select">
         <select
           :value="siteDefaultCrop"
-          @click="setDefaultCrop($event, 'site')"
+          @change="setDefaultCrop($event, 'site')"
         >
           <option
             v-for="(command, index) of settings?.active.commands.crop"
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
index af23788..5c47f7f 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
@@ -134,7 +134,7 @@
         <div class="select">
           <select
             v-model="siteDefaultStretchMode"
-            @click="setDefaultStretchingMode($event, 'site')"
+            @change="setDefaultStretchingMode($event, 'site')"
           >
             <option
               v-for="(command, index) of settings?.active.commands.stretch"
diff --git a/src/ext/conf/ExtConfPatches.ts b/src/ext/conf/ExtConfPatches.ts
index 93ce055..df98788 100644
--- a/src/ext/conf/ExtConfPatches.ts
+++ b/src/ext/conf/ExtConfPatches.ts
@@ -273,6 +273,15 @@ const ExtensionConfPatch = [
       userOptions.sites['@global'].defaultType = 'unknown';
       userOptions.sites['@empty'].defaultType = 'modified';
     }
+  }, {
+    forVersion: '6.0.0',
+    updateFn: (userOptions: SettingsInterface, defaultOptions) => {
+      // remove custom CSS, as it is no longer needed
+      for (const site in userOptions.sites) {
+        for (const domOption in userOptions.sites[site].DOMConfig)
+        userOptions.sites[site].DOMConfig[domOption].customCss;
+      }
+    }
   }
 ];
 
diff --git a/src/ext/conf/ExtensionConf.ts b/src/ext/conf/ExtensionConf.ts
index 5a953af..02f4891 100644
--- a/src/ext/conf/ExtensionConf.ts
+++ b/src/ext/conf/ExtensionConf.ts
@@ -1445,7 +1445,7 @@ const ExtensionConf: SettingsInterface = {
       persistCSA: CropModePersistence.Disabled,
 
       defaults: {
-        crop: {type: AspectRatioType.Reset},  // does NOT override Aard
+        crop: {type: AspectRatioType.Automatic},
         stretch: StretchType.NoStretch,
         alignment: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Center},
       }
@@ -1561,7 +1561,7 @@ const ExtensionConf: SettingsInterface = {
               querySelectors: ".btm-media-client-element"
             }
           },
-          customCss: ".hudson-container { height: 100%; }"
+          // customCss: ".hudson-container { height: 100%; }"
         }
       }
     },
@@ -1584,32 +1584,6 @@ const ExtensionConf: SettingsInterface = {
       type: 'official',
       defaultType: 'official',
     },
-    // "streamable.com": {
-    //   enable: {
-    //     fullscreen: ExtensionMode.Default,
-    //     theater: ExtensionMode.Default,
-    //     normal: ExtensionMode.Default,
-    //   },
-    //   enableAard: {
-    //     fullscreen: ExtensionMode.Default,
-    //     theater: ExtensionMode.Default,
-    //     normal: ExtensionMode.Default,
-    //   },
-    //   enableKeyboard: {
-    //     fullscreen: ExtensionMode.Default,
-    //     theater: ExtensionMode.Default,
-    //     normal: ExtensionMode.Default
-    //   },
-    //   type: 'official',
-    //   type: 'defaultType',
-    //   activeDOMConfig: 'official',
-    //   DOMConfig: {
-    //     'official': {
-    //       type: 'official',
-    //       customCss: ".player {text-align: left}"
-    //     }
-    //   }
-    // },
     "vimeo.com": {
       enable: {
         fullscreen: ExtensionMode.Default,
@@ -1632,7 +1606,7 @@ const ExtensionConf: SettingsInterface = {
       DOMConfig: {
         'official': {
           type: 'official',
-          customCss: ".player_outro_area {\n  width: 100% !important;\n  display: flex !important;\n  justify-content: center !important;\n}\n\n.player_container, .player {\n  width: 100% !important; \n}",
+          // customCss: ".player_outro_area {\n  width: 100% !important;\n  display: flex !important;\n  justify-content: center !important;\n}\n\n.player_container, .player {\n  width: 100% !important; \n}",
           elements: {
             player: {
               manual: true,
@@ -1664,7 +1638,7 @@ const ExtensionConf: SettingsInterface = {
       DOMConfig: {
         'official': {
           type: 'official',
-          customCss:  'video {\n  width: 100% !important;\n  height: 100% !important;\n}',
+          // customCss:  'video {\n  width: 100% !important;\n  height: 100% !important;\n}',
           elements: {
             player: {
               manual: false,
@@ -1696,7 +1670,7 @@ const ExtensionConf: SettingsInterface = {
       DOMConfig: {
         'official': {
           type: 'official',
-          customCss:  'video {\n  width: 100% !important;\n  height: 100% !important;\n}',
+          // customCss:  'video {\n  width: 100% !important;\n  height: 100% !important;\n}',
           elements: {
             player: {
               manual: false,
@@ -1816,7 +1790,7 @@ const ExtensionConf: SettingsInterface = {
       DOMConfig: {
         'community': {
           type: 'community',
-          customCss: "body {\n  background-color: #000;\n}\n\n.application {\n  background-color: #000;\n}"
+          // customCss: "body {\n  background-color: #000;\n}\n\n.application {\n  background-color: #000;\n}"
         }
       }
     },
@@ -1872,7 +1846,7 @@ const ExtensionConf: SettingsInterface = {
       DOMConfig: {
         'community': {
           type: 'community',
-          customCss: ".shaka-video-container {\n  flex-direction: column !important;\n}"
+          // customCss: ".shaka-video-container {\n  flex-direction: column !important;\n}"
         }
       }
     },
diff --git a/src/ext/lib/settings/SiteSettings.ts b/src/ext/lib/settings/SiteSettings.ts
index edabe7f..2d932b6 100644
--- a/src/ext/lib/settings/SiteSettings.ts
+++ b/src/ext/lib/settings/SiteSettings.ts
@@ -324,7 +324,7 @@ export class SiteSettings {
       let iterated = '';
 
       for (i = 0; i < pathParts.length - 1; i++) {
-        iterated = `${iterated}.${pathParts[i]}`
+        iterated = `${iterated}.${pathParts[i]}`;
 
         if (!iterator[pathParts[i]]) { // some optional paths may still be undefined, even after cloning empty object
           iterator[pathParts[i]] = {};
@@ -341,6 +341,7 @@ export class SiteSettings {
         await this.settings.save();
       } else {
         await this.settings.saveWithoutReload();
+        this.compileSettingsObject();
       }
     }
   }