diff --git a/package.json b/package.json
index fa08593f0..403a2b231 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
     "hash-sum": "^2.0.0",
     "js-cookie": "3.0.5",
     "localforage": "1.10.0",
-    "pako": "^2.1.0",
     "parse-link-header": "2.0.0",
     "phoenix": "1.7.7",
     "punycode.js": "2.3.0",
diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js
index fde8a50a6..5fb4701c3 100644
--- a/src/components/attachment/attachment.style.js
+++ b/src/components/attachment/attachment.style.js
@@ -1,7 +1,6 @@
 export default {
   name: 'Attachment',
   selector: '.Attachment',
-  notEditable: true,
   validInnerComponents: [
     'Border',
     'ButtonUnstyled',
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index be5dee448..9dd8d8683 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="PaletteEditor"
-    :class="{ '-compact': compact, '-apply': apply }"
-  >
+  <div class="PaletteEditor">
     <ColorInput
       v-for="key in paletteKeys"
       :key="key"
@@ -25,13 +22,6 @@
       <FAIcon icon="file-export" />
       {{ $t('settings.style.themes3.palette.export') }}
     </button>
-    <button
-      v-if="apply"
-      class="btn button-default palette-apply-button"
-      @click="applyPalette"
-    >
-      {{ $t('settings.style.themes3.palette.apply') }}
-    </button>
   </div>
 </template>
 
@@ -53,34 +43,12 @@ library.add(
   faFileExport
 )
 
-const paletteKeys = [
-  'bg',
-  'fg',
-  'text',
-  'link',
-  'accent',
-  'cRed',
-  'cBlue',
-  'cGreen',
-  'cOrange',
-  'wallpaper'
-]
-
-const props = defineProps(['modelValue', 'compact', 'apply'])
-const emit = defineEmits(['update:modelValue', 'applyPalette'])
-const getExportedObject = () => paletteKeys.reduce((acc, key) => {
-  const value = props.modelValue[key]
-  if (value == null) {
-    return acc
-  } else {
-    return { ...acc, [key]: props.modelValue[key] }
-  }
-}, {})
-
+const props = defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
 const paletteExporter = newExporter({
   filename: 'pleroma_palette',
   extension: 'json',
-  getExportedObject
+  getExportedObject: () => props.modelValue
 })
 const paletteImporter = newImporter({
   accept: '.json',
@@ -97,9 +65,18 @@ const importPalette = () => {
   paletteImporter.importData()
 }
 
-const applyPalette = (data) => {
-  emit('applyPalette', getExportedObject())
-}
+const paletteKeys = [
+  'bg',
+  'fg',
+  'text',
+  'link',
+  'accent',
+  'cRed',
+  'cBlue',
+  'cGreen',
+  'cOrange',
+  'wallpaper'
+]
 
 const fallback = (key) => {
   if (key === 'accent') {
@@ -141,33 +118,8 @@ const updatePalette = (paletteKey, value) => {
     grid-column: 3 / span 2;
   }
 
-  .palette-apply-button {
-    grid-column: 1 / span 2;
-  }
-
   .color-input.style-control {
     margin: 0;
   }
-
-  &.-compact {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(5, 1fr) auto;
-
-    .palette-import-button {
-      grid-column: 1;
-    }
-
-    .palette-export-button {
-      grid-column: 2;
-    }
-
-    &.-apply {
-      grid-template-rows: repeat(5, 1fr) auto auto;
-
-      .palette-apply-button {
-        grid-column: 1 / span 2;
-      }
-    }
-  }
 }
 </style>
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
index d9cd17aee..c83140003 100644
--- a/src/components/rich_content/rich_content.style.js
+++ b/src/components/rich_content/rich_content.style.js
@@ -1,7 +1,6 @@
 export default {
   name: 'RichContent',
   selector: '.RichContent',
-  notEditable: true,
   validInnerComponents: [
     'Text',
     'FunText',
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
index b7e258fda..74172c82c 100644
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -1,21 +1,6 @@
 .settings_tab-switcher {
   height: 100%;
 
-  h1 {
-    margin-bottom: 0.5em;
-    margin-top: 0.5em;
-  }
-
-  h4 {
-    margin-bottom: 0;
-    margin-top: 0.25em;
-  }
-
-  h5 {
-    margin-bottom: 0;
-    margin-top: 0.25em;
-  }
-
   .setting-item {
     border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index b4b401574..1e8f596f2 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -3,7 +3,6 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
 import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
-import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
 
 import FontControl from 'src/components/font_control/font_control.vue'
 
@@ -51,7 +50,6 @@ const AppearanceTab = {
         'cBlue',
         'cOrange'
       ],
-      userPalette: {},
       intersectionObserver: null,
       thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
         key: mode,
@@ -78,8 +76,7 @@ const AppearanceTab = {
     UnitSetting,
     ProfileSettingIndicator,
     FontControl,
-    Preview,
-    PaletteEditor
+    Preview
   },
   mounted () {
     const updateIndex = (resource) => {
@@ -108,7 +105,6 @@ const AppearanceTab = {
 
     updateIndex('palette').then(bundledPalettes => {
       bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
-        let palette
         if (Array.isArray(v)) {
           const [
             name,
@@ -121,15 +117,9 @@ const AppearanceTab = {
             cBlue = '#0000FF',
             cOrange = '#E3FF00'
           ] = v
-          palette = { key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
-          this.bundledPalettes.push()
+          this.bundledPalettes.push({ key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange })
         } else {
-          palette = { key, ...v }
-        }
-        this.bundledPalettes.push(palette)
-
-        if (this.isPaletteActive(key)) {
-          this.userPalette = palette
+          this.bundledPalettes.push({ key, ...v })
         }
       }))
     })
@@ -293,21 +283,30 @@ const AppearanceTab = {
       return key === palette
     },
     setStyle (name) {
+      this.$store.dispatch('resetThemeV2')
       this.$store.dispatch('setTheme', name)
+      this.$store.dispatch('applyTheme')
     },
     setTheme (name) {
+      this.$store.dispatch('resetThemeV3')
       this.$store.dispatch('setTheme', name)
+      this.$store.dispatch('applyTheme')
     },
-    setPalette (name, data) {
+    setPalette (name) {
+      this.$store.dispatch('resetThemeV2')
       this.$store.dispatch('setPalette', name)
-      this.userPalette = data
+      this.$store.dispatch('applyTheme')
     },
-    setPaletteCustom (data) {
-      this.$store.dispatch('setPaletteCustom', data)
-      this.userPalette = data
+    setPaletteCustom (p) {
+      this.$store.dispatch('resetThemeV2')
+      this.$store.dispatch('setPaletteCustom', p)
+      this.$store.dispatch('applyTheme')
     },
     resetTheming (name) {
+      this.$store.dispatch('resetThemeV2')
+      this.$store.dispatch('resetThemeV3')
       this.$store.dispatch('setStyle', 'stock')
+      this.$store.dispatch('applyTheme')
     },
     previewTheme (key, input) {
       let theme3
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
index ede4b3424..c78b4accc 100644
--- a/src/components/settings_modal/tabs/appearance_tab.scss
+++ b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -26,8 +26,7 @@
     grid-gap: 0.5em;
 
     h4,
-    .unsupported-theme-v2,
-    .userPalette {
+    .unsupported-theme-v2 {
       grid-column: 1 / span 2;
     }
   }
@@ -72,7 +71,6 @@
     border-radius: var(--roundness);
     border: 1px solid var(--border);
     padding: 0;
-    margin-bottom: 1em;
 
     .theme-preview {
       font-size: 1rem; // fix for firefox
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 6ec84eb28..1b43a690b 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -3,8 +3,17 @@
     class="appearance-tab"
     :label="$t('settings.general')"
   >
-    <div class="setting-item">
+    <div class="setting-item heading">
       <h2>{{ $t('settings.theme') }}</h2>
+      <button
+        class="btn button-default"
+        @click="importFile"
+      >
+        <FAIcon icon="folder-open" />
+        {{ $t('settings.style.themes3.editor.load_style') }}
+      </button>
+    </div>
+    <div class="setting-item">
       <ul
         ref="themeList"
         class="theme-list"
@@ -60,81 +69,60 @@
           </h4>
         </button>
       </ul>
-      <div class="import-file-container">
-      <button
-        class="btn button-default"
-        @click="importFile"
-      >
-        <FAIcon icon="folder-open" />
-        {{ $t('settings.style.themes3.editor.load_style') }}
-      </button>
-      </div>
-      <div class="setting-item">
-        <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
-        <div class="palettes">
-          <template v-if="customThemeVersion === 'v3'">
-            <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
-            <button
-              v-for="p in bundledPalettes"
-              :key="p.name"
-              class="btn button-default palette-entry"
-              :class="{ toggled: isPaletteActive(p.key) }"
-              @click="() => setPalette(p.key, p)"
-            >
-              <label>
-                {{ p.name }}
-              </label>
-              <span
-                v-for="c in palettesKeys"
-                :key="c"
-                class="palette-square"
-                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-              />
-            </button>
-            <h4 v-if="stylePalettes?.length > 0">
-              {{ $t('settings.style.themes3.palette.style') }}
-            </h4>
-            <button
-              v-for="p in stylePalettes || []"
-              :key="p.name"
-              class="btn button-default palette-entry"
-              :class="{ toggled: isPaletteActive(p.key) }"
-              @click="() => setPaletteCustom(p)"
-            >
-              <label>
-                {{ p.name }}
-              </label>
-              <span
-                v-for="c in palettesKeys"
-                :key="c"
-                class="palette-square"
-                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-              />
-            </button>
-            <h4>
-              {{ $t('settings.style.themes3.palette.user') }}
-            </h4>
-            <PaletteEditor
-              class="userPalette"
-              v-model="userPalette"
-              :compact="true"
-              :apply="true"
-              @applyPalette="data => setPaletteCustom(data)"
+      <h3>{{ $t('settings.style.themes3.palette.label') }}</h3>
+      <div class="palettes">
+        <template v-if="customThemeVersion === 'v3'">
+          <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
+          <button
+            v-for="p in bundledPalettes"
+            :key="p.name"
+            class="btn button-default palette-entry"
+            :class="{ toggled: isPaletteActive(p.key) }"
+            @click="() => setPalette(p.key)"
+          >
+            <label>
+              {{ p.name }}
+            </label>
+            <span
+              v-for="c in palettesKeys"
+              :key="c"
+              class="palette-square"
+              :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
             />
-          </template>
-          <template v-else-if="customThemeVersion === 'v2'">
-            <div class="alert neutral theme-notice unsupported-theme-v2">
-              {{ $t('settings.style.themes3.palette.v2_unsupported') }}
-            </div>
-          </template>
-        </div>
+          </button>
+          <h4 v-if="stylePalettes?.length > 0">
+            {{ $t('settings.style.themes3.palette.style') }}
+          </h4>
+          <button
+            v-for="p in stylePalettes || []"
+            :key="p.name"
+            class="btn button-default palette-entry"
+            :class="{ toggled: isPaletteActive(p.key) }"
+            @click="() => setPaletteCustom(p)"
+          >
+            <label>
+              {{ p.name }}
+            </label>
+            <span
+              v-for="c in palettesKeys"
+              :key="c"
+              class="palette-square"
+              :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+            />
+          </button>
+        </template>
+        <template v-else-if="customThemeVersion === 'v2'">
+          <div class="alert neutral theme-notice unsupported-theme-v2">
+            {{ $t('settings.style.themes3.palette.v2_unsupported') }}
+          </div>
+        </template>
       </div>
     </div>
+    <div class="alert neutral theme-notice">
+      {{ $t("settings.style.appearance_tab_note") }}
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.scale_and_layout') }}</h2>
-      <div class="alert neutral theme-notice">
-        {{ $t("settings.style.appearance_tab_note") }}
-      </div>
       <ul class="setting-list">
         <li>
           <UnitSetting
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index aa83fda2a..0f91eb27e 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -1,4 +1,4 @@
-import { ref, reactive, computed, watch, watchEffect, provide, getCurrentInstance } from 'vue'
+import { ref, reactive, computed, watch, watchEffect, provide } from 'vue'
 import { useStore } from 'vuex'
 import { get, set, unset, throttle } from 'lodash'
 
@@ -84,12 +84,6 @@ export default {
     // All rules that are made by editor
     const allEditedRules = reactive({})
 
-    exports.isActive = computed(() => {
-      const tabSwitcher = getCurrentInstance().parent.ctx
-      console.log('TABSW', tabSwitcher)
-      return tabSwitcher ? tabSwitcher.isActive('style') : false
-    })
-
     // ## Meta stuff
     exports.name = ref('')
     exports.author = ref('')
@@ -380,7 +374,7 @@ export default {
     exports.editedOpacity = getEditedElement(null, 'opacity')
     exports.isOpacityPresent = isElementPresent(null, 'opacity', 1)
     exports.editedRoundness = getEditedElement(null, 'roundness')
-    exports.isRoundnessPresent = isElementPresent(null, 'roundness', '0')
+    exports.isRoundnessPresent = isElementPresent(null, 'roundness', 0)
     exports.editedTextColor = getEditedElement('Text', 'textColor')
     exports.isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
     exports.editedTextAuto = getEditedElement('Text', 'textAuto')
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index a9c35c085..1f63e9c6b 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -48,42 +48,6 @@
     }
   }
 
-  .meta-preview {
-    display: grid;
-    grid-template:
-      "meta meta preview preview"
-      "meta meta preview preview"
-      "meta meta preview preview"
-      "meta meta preview preview";
-    grid-gap: 0.5em;
-    grid-template-columns: min-content min-content 6fr max-content;
-
-    ul.setting-list {
-      padding: 0;
-      margin: 0;
-      display: grid;
-      grid-template-rows: subgrid;
-      grid-area: meta;
-
-      > li {
-        margin: 0;
-      }
-
-      .meta-field {
-        margin: 0;
-
-        .setting-label {
-          display: inline-block;
-          margin-bottom: 0.5em;
-        }
-      }
-    }
-
-    #edited-style-preview {
-      grid-area: preview;
-    }
-  }
-
   .setting-item {
     padding-bottom: 0;
 
@@ -98,6 +62,65 @@
     &:not(:last-child) {
       margin-bottom: 0.5em;
     }
+
+    &.heading {
+      display: grid;
+      grid-template:
+        "meta meta preview preview"
+        "meta meta preview preview"
+        "meta meta preview preview"
+        "meta meta preview preview"
+        "new  new  preview preview"
+        "load save refresh apply";
+      grid-gap: 0.5em;
+      grid-template-columns: min-content min-content 6fr max-content;
+      grid-template-rows: repeat(4, min-content) repeat(2, 2em);
+
+      ul.setting-list {
+        padding: 0;
+        margin: 0;
+        display: grid;
+        grid-template-rows: subgrid;
+        grid-area: meta;
+
+        > li {
+          margin: 0;
+        }
+
+        .meta-field {
+          margin: 0;
+
+          .setting-label {
+            display: inline-block;
+            margin-bottom: 0.5em;
+          }
+        }
+      }
+
+      #edited-style-preview {
+        grid-area: preview;
+      }
+
+      .button-save {
+        grid-area: save;
+      }
+
+      .button-load {
+        grid-area: load;
+      }
+
+      .button-new {
+        grid-area: new;
+      }
+
+      .button-refresh {
+        grid-area: refresh;
+      }
+
+      .button-apply {
+        grid-area: apply;
+      }
+    }
   }
 
   .list-editor {
@@ -248,17 +271,3 @@
     }
   }
 }
-
-.extra-content {
-  .style-actions-container {
-    width: 100%;
-    display: flex;
-    justify-content: end;
-
-    .style-actions {
-      display: grid;
-      grid-template-columns: repeat(4, minmax(7em, 1fr));
-      grid-gap: 0.25em;
-    }
-  }
-}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index eabbb582f..f95c7aca3 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -4,75 +4,70 @@
 <template>
   <div class="StyleTab">
     <div class="setting-item heading">
-      <h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
-      <div class="meta-preview">
-        <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-        <component
-          :is="'style'"
-          v-html="overallPreviewCssRules"
-        />
-        <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-        <Preview id="edited-style-preview" />
-        <teleport
-          v-if="isActive"
-          to="#unscrolled-content"
-        >
-          <div class="style-actions-container">
-            <div class="style-actions">
-              <button
-                class="btn button-default button-new"
-                @click="clearTheme"
-              >
-                <FAIcon icon="arrows-rotate" />
-                {{ $t('settings.style.themes3.editor.reset_style') }}
-              </button>
-              <button
-                class="btn button-default button-load"
-                @click="importStyle"
-              >
-                <FAIcon icon="folder-open" />
-                {{ $t('settings.style.themes3.editor.load_style') }}
-              </button>
-              <button
-                class="btn button-default button-save"
-                @click="exportStyle"
-              >
-                <FAIcon icon="floppy-disk" />
-                {{ $t('settings.style.themes3.editor.save_style') }}
-              </button>
-              <button
-                class="btn button-default button-apply"
-                @click="applyStyle"
-              >
-                <FAIcon icon="check" />
-                {{ $t('settings.style.themes3.editor.apply_preview') }}
-              </button>
-            </div>
-          </div>
-        </teleport>
-        <ul class="setting-list style-metadata">
-          <li>
-            <StringSetting class="meta-field" v-model="name">
-              {{ $t('settings.style.themes3.editor.style_name') }}
-            </StringSetting>
-          </li>
-          <li>
-            <StringSetting class="meta-field" v-model="author">
-              {{ $t('settings.style.themes3.editor.style_author') }}
-            </StringSetting>
-          </li>
-          <li>
-            <StringSetting class="meta-field" v-model="license">
-              {{ $t('settings.style.themes3.editor.style_license') }}
-            </StringSetting>
-          </li>
-          <li>
-            <StringSetting class="meta-field" v-model="website">
-              {{ $t('settings.style.themes3.editor.style_website') }}
-            </StringSetting>
-          </li>
-        </ul>
-      </div>
+      <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+      <component
+        :is="'style'"
+        v-html="overallPreviewCssRules"
+      />
+      <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+      <Preview id="edited-style-preview" />
+      <button
+        class="btn button-default button-new"
+        @click="clearTheme"
+      >
+        <FAIcon icon="file" />
+        {{ $t('settings.style.themes3.editor.new_style') }}
+      </button>
+      <button
+        class="btn button-default button-load"
+        @click="importStyle"
+      >
+        <FAIcon icon="folder-open" />
+        {{ $t('settings.style.themes3.editor.load_style') }}
+      </button>
+      <button
+        class="btn button-default button-save"
+        @click="exportStyle"
+      >
+        <FAIcon icon="floppy-disk" />
+        {{ $t('settings.style.themes3.editor.save_style') }}
+      </button>
+      <button
+        class="btn button-default button-refresh"
+        @click="updateOverallPreview"
+      >
+        <FAIcon icon="arrows-rotate" />
+        {{ $t('settings.style.themes3.editor.refresh_preview') }}
+      </button>
+      <button
+        class="btn button-default button-apply"
+        @click="applyStyle"
+      >
+        <FAIcon icon="check" />
+        {{ $t('settings.style.themes3.editor.apply_preview') }}
+      </button>
+      <ul class="setting-list style-metadata">
+        <li>
+          <StringSetting class="meta-field" v-model="name">
+            {{ $t('settings.style.themes3.editor.style_name') }}
+          </StringSetting>
+        </li>
+        <li>
+          <StringSetting class="meta-field" v-model="author">
+            {{ $t('settings.style.themes3.editor.style_author') }}
+          </StringSetting>
+        </li>
+        <li>
+          <StringSetting class="meta-field" v-model="license">
+            {{ $t('settings.style.themes3.editor.style_license') }}
+          </StringSetting>
+        </li>
+        <li>
+          <StringSetting class="meta-field" v-model="website">
+            {{ $t('settings.style.themes3.editor.style_website') }}
+          </StringSetting>
+        </li>
+      </ul>
     </div>
     <tab-switcher>
       <div
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index d5fb80dc4..7bb5ccd14 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -145,8 +145,8 @@
           <input
             id="spread"
             :value="selected?.spread"
-            :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
             :disabled="disabled || !present || (separateInset && !selected?.inset)"
+            :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
             name="spread"
             class="input input-range"
             type="range"
@@ -158,7 +158,7 @@
             :value="selected?.spread"
             class="input input-number -small"
             :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
-            :disabled="disabled || !present || (separateInset && !selected?.inset)"
+            :disabled="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
             type="number"
             @input="e => updateProperty('spread', e.target.value)"
           >
diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
index 3d5bb2989..dff0315bd 100644
--- a/src/components/user_card/user_card.style.js
+++ b/src/components/user_card/user_card.style.js
@@ -1,7 +1,6 @@
 export default {
   name: 'UserCard',
   selector: '.user-card',
-  notEditable: true,
   validInnerComponents: [
     'Text',
     'Link',
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e77e56374..dd3877eea 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -759,9 +759,8 @@
         "palette": {
           "label": "Color schemes",
           "name_label": "Color scheme name",
-          "import": "Import palette",
-          "export": "Export palette",
-          "apply": "Apply palette",
+          "import": "Import",
+          "export": "Export",
           "bg": "Panel background",
           "fg": "Buttons etc.",
           "text": "Text",
@@ -774,13 +773,12 @@
           "wallpaper": "Wallpaper",
           "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
           "bundled": "Bundled palettes",
-          "style": "Palettes provided by selected style",
-          "user": "Custom palette"
+          "style": "Palettes provided by selected style"
         },
         "editor": {
           "title": "Style",
-          "reset_style": "Reset",
-          "load_style": "Open from file",
+          "new_style": "New",
+          "load_style": "Open",
           "save_style": "Save",
           "style_name": "Stylesheet name",
           "style_author": "Made by",
diff --git a/src/modules/interface.js b/src/modules/interface.js
index ec885dbab..57621b20e 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -230,7 +230,7 @@ const interfaceMod = {
 
       commit('setOption', { name: 'palette', value })
 
-      dispatch('applyTheme', { recompile: true })
+      dispatch('applyTheme')
     },
     setPaletteCustom ({ dispatch, commit }, value) {
       dispatch('resetThemeV3Palette')
@@ -238,7 +238,7 @@ const interfaceMod = {
 
       commit('setOption', { name: 'paletteCustomData', value })
 
-      dispatch('applyTheme', { recompile: true })
+      dispatch('applyTheme')
     },
     async fetchStylesIndex ({ commit, state }) {
       try {
@@ -257,7 +257,7 @@ const interfaceMod = {
 
       commit('setOption', { name: 'style', value })
 
-      dispatch('applyTheme', { recompile: true })
+      dispatch('applyTheme')
     },
     setStyleCustom ({ dispatch, commit }, value) {
       dispatch('resetThemeV3')
@@ -265,7 +265,7 @@ const interfaceMod = {
 
       commit('setOption', { name: 'styleCustomData', value })
 
-      dispatch('applyTheme', { recompile: true })
+      dispatch('applyTheme')
     },
     async fetchThemesIndex ({ commit, state }) {
       try {
@@ -285,7 +285,7 @@ const interfaceMod = {
 
       commit('setOption', { name: 'theme', value })
 
-      dispatch('applyTheme', { recompile: true })
+      dispatch('applyTheme')
     },
     setThemeCustom ({ dispatch, commit }, value) {
       dispatch('resetThemeV3')
@@ -295,7 +295,7 @@ const interfaceMod = {
       commit('setOption', { name: 'customTheme', value })
       commit('setOption', { name: 'customThemeSource', value })
 
-      dispatch('applyTheme', { recompile: true })
+      dispatch('applyTheme')
     },
     resetThemeV3 ({ dispatch, commit }) {
       commit('setOption', { name: 'style', value: null })
@@ -312,7 +312,7 @@ const interfaceMod = {
     },
     async applyTheme (
       { dispatch, commit, rootState, state },
-      { recompile = false } = {}
+      { recompile = true } = {}
     ) {
       // If we're not not forced to recompile try using
       // cache (tryLoadCache return true if load successful)
@@ -350,15 +350,15 @@ const interfaceMod = {
 
       let majorVersionUsed
 
-      console.debug(
-        `User V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`
+      console.log(
+        `USER V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`
       )
-      console.debug(
-        `User V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`
+      console.log(
+        `USER V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`
       )
 
-      console.debug(`Instance V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
-      console.debug('Instance V2 theme: ' + instanceThemeV2Name)
+      console.log(`INST V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
+      console.log('INST V2 theme: ' + instanceThemeV2Name)
 
       if (userPaletteName || userPaletteCustomData ||
           userStyleName || userStyleCustomData ||
@@ -446,7 +446,7 @@ const interfaceMod = {
         return result
       }
 
-      console.debug('Version used', majorVersionUsed)
+      console.log('VERSION', majorVersionUsed)
 
       if (majorVersionUsed === 'v3') {
         const palette = await getData(
@@ -471,7 +471,7 @@ const interfaceMod = {
           ] = paletteDataUsed
           paletteDataUsed = { name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
         }
-        console.debug('Palette data used', paletteDataUsed)
+        console.log(paletteDataUsed)
 
         const style = await getData(
           'style',
@@ -506,6 +506,7 @@ const interfaceMod = {
           directives: {}
         }
 
+        console.log('PALETTE', paletteDataUsed)
         Object
           .entries(paletteDataUsed)
           .filter(([k]) => k !== 'name')
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 3ccba9da8..73779cfbc 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -2,8 +2,6 @@ import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'
-import pako from 'pako'
-import localforage from 'localforage'
 
 // On platforms where this is not supported, it will return undefined
 // Otherwise it will return an array
@@ -89,15 +87,12 @@ export const generateTheme = (inputRuleset, callbacks, debug) => {
   return { lazyProcessFunc: processChunk }
 }
 
-export const tryLoadCache = async () => {
-  console.info('Trying to load compiled theme data from cache')
-  const data = await localforage.getItem('pleromafe-theme-cache')
-  if (!data) return null
+export const tryLoadCache = () => {
+  const json = localStorage.getItem('pleroma-fe-theme-cache')
+  if (!json) return null
   let cache
   try {
-    const decoded = new TextDecoder().decode(pako.inflate(data))
-    cache = JSON.parse(decoded)
-    console.info(`Loaded theme from cache, size=${cache}`)
+    cache = JSON.parse(json)
   } catch (e) {
     console.error('Failed to decode theme cache:', e)
     return false
@@ -141,10 +136,16 @@ export const applyTheme = (input, onFinish = (data) => {}, debug) => {
         adoptStyleSheets([eagerStyles, lazyStyles])
         const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
         onFinish(cache)
-        const compress = (js) => {
-          return pako.deflate(JSON.stringify(js))
+        try {
+          localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
+        } catch (e) {
+          localStorage.removeItem('pleroma-fe-theme-cache')
+          try {
+            localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
+          } catch (e) {
+            console.warn('cannot save cache!', e)
+          }
         }
-        localforage.setItem('pleromafe-theme-cache', compress(cache))
       }
     },
     debug
@@ -218,9 +219,8 @@ export const applyConfig = (input, i18n) => {
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
 
-  // TODO find a way to make this not apply to theme previews
   if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
-    styleSheet.insertRule(` *:not(.preview-block) {
+    styleSheet.insertRule(` * {
         --roundness: var(--forcedRoundness) !important;
     }`, 'index-max')
   }
diff --git a/yarn.lock b/yarn.lock
index 955cd1a3e..231e35d97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7201,11 +7201,6 @@ p-try@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
 
-pako@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
-  integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
-
 pako@~1.0.2:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"