diff --git a/changelog.d/zoomlag.skip b/changelog.d/zoomlag.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/App.scss b/src/App.scss
index 1b3133a7c..d56306c9e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -679,11 +679,6 @@ option {
   }
 }
 
-.btn-block {
-  display: block;
-  width: 100%;
-}
-
 .btn-group {
   position: relative;
   display: inline-flex;
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 65c4c9205..3ef92fd11 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -254,6 +254,7 @@ const getNodeInfo = async ({ store }) => {
       const data = await res.json()
       const metadata = data.metadata
       const features = metadata.features
+      console.log(features)
       store.dispatch('setInstanceOption', { name: 'name', value: metadata.nodeName })
       store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
       store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
@@ -274,6 +275,7 @@ const getNodeInfo = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
       store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') })
       store.dispatch('setInstanceOption', { name: 'groupActorAvailable', value: features.includes('pleroma:group_actors') })
+      store.dispatch('setInstanceOption', { name: 'blockExpiration', value: features.includes('pleroma:block_expiration') })
       store.dispatch('setInstanceOption', { name: 'localBubbleInstances', value: metadata.localBubbleInstances ?? [] })
 
       const uploadLimits = metadata.uploadLimits
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 9a63f57eb..f8ad0e11b 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -3,6 +3,7 @@ import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
 import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisV
@@ -27,15 +28,10 @@ const AccountActions = {
     ProgressButton,
     Popover,
     UserListMenu,
-    ConfirmModal
+    ConfirmModal,
+    UserTimedFilterModal
   },
   methods: {
-    showConfirmBlock () {
-      this.showingConfirmBlock = true
-    },
-    hideConfirmBlock () {
-      this.showingConfirmBlock = false
-    },
     showConfirmRemoveUserFromFollowers () {
       this.showingConfirmRemoveFollower = true
     },
@@ -49,10 +45,14 @@ const AccountActions = {
       this.$store.dispatch('hideReblogs', this.user.id)
     },
     blockUser () {
-      if (!this.shouldConfirmBlock) {
-        this.doBlockUser()
+      if (this.$refs.timedBlockDialog) {
+        this.$refs.timedBlockDialog.optionallyPrompt()
       } else {
-        this.showConfirmBlock()
+        if (!this.shouldConfirmBlock) {
+          this.doBlockUser()
+        } else {
+          this.showingConfirmBlock = true
+        }
       }
     },
     doBlockUser () {
@@ -91,6 +91,7 @@ const AccountActions = {
       return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
     },
     ...mapState({
+      blockExpirationSupported: state => state.instance.blockExpiration,
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
     })
   }
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index fd4837ee4..f3cca45d0 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -96,7 +96,8 @@
     </Popover>
     <teleport to="#modal">
       <confirm-modal
-        v-if="showingConfirmBlock"
+        v-if="showingConfirmBlock && !blockExpirationSupported"
+        ref="blockDialog"
         :title="$t('user_card.block_confirm_title')"
         :confirm-text="$t('user_card.block_confirm_accept_button')"
         :cancel-text="$t('user_card.block_confirm_cancel_button')"
@@ -137,6 +138,12 @@
           </template>
         </i18n-t>
       </confirm-modal>
+      <UserTimedFilterModal
+        v-if="blockExpirationSupported"
+        :is-mute="false"
+        :user="user"
+        ref="timedBlockDialog"
+      />
     </teleport>
   </div>
 </template>
diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
index 0bf4e37bc..360cfe740 100644
--- a/src/components/block_card/block_card.js
+++ b/src/components/block_card/block_card.js
@@ -1,12 +1,9 @@
+import { mapState } from 'vuex'
+
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
 const BlockCard = {
   props: ['userId'],
-  data () {
-    return {
-      progress: false
-    }
-  },
   computed: {
     user () {
       return this.$store.getters.findUser(this.userId)
@@ -16,7 +13,16 @@ const BlockCard = {
     },
     blocked () {
       return this.relationship.blocking
-    }
+    },
+    blockExpiry () {
+      console.log(this.user)
+      return this.user.block_expires_at == null
+        ? this.$t('user_card.block_expires_forever')
+        : this.$t('user_card.block_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
+    },
+    ...mapState({
+      blockExpirationSupported: state => state.instance.blockExpiration,
+    })
   },
   components: {
     BasicUserCard
@@ -24,15 +30,14 @@ const BlockCard = {
   methods: {
     unblockUser () {
       this.progress = true
-      this.$store.dispatch('unblockUser', this.user.id).then(() => {
-        this.progress = false
-      })
+      this.$store.dispatch('unblockUser', this.user.id)
     },
     blockUser () {
-      this.progress = true
-      this.$store.dispatch('blockUser', this.user.id).then(() => {
-        this.progress = false
-      })
+      if (this.blockExpirationSupported) {
+        this.$refs.timedBlockDialog.optionallyPrompt()
+      } else {
+        this.$store.dispatch('blockUser', this.user.id)
+      }
     }
   }
 }
diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
index b14ef8448..61aafb288 100644
--- a/src/components/block_card/block_card.vue
+++ b/src/components/block_card/block_card.vue
@@ -1,33 +1,32 @@
 <template>
   <basic-user-card :user="user">
     <div class="block-card-content-container">
+      <span v-if="blocked" class="alert neutral">
+        {{ blockExpiry }}
+      </span>
+      {{ ' ' }}
       <button
         v-if="blocked"
         class="btn button-default"
-        :disabled="progress"
         @click="unblockUser"
       >
-        <template v-if="progress">
-          {{ $t('user_card.unblock_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.unblock') }}
-        </template>
+        {{ $t('user_card.unblock') }}
       </button>
       <button
         v-else
         class="btn button-default"
-        :disabled="progress"
         @click="blockUser"
       >
-        <template v-if="progress">
-          {{ $t('user_card.block_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.block') }}
-        </template>
+        {{ $t('user_card.block') }}
       </button>
     </div>
+    <teleport to="#modal">
+      <UserTimedFilterModal
+        :user="user"
+        :is-mute="false"
+        ref="timedBlockDialog"
+      />
+    </teleport>
   </basic-user-card>
 </template>
 
diff --git a/src/components/component_preview/component_preview.js b/src/components/component_preview/component_preview.js
index c0a2aad72..9f830cd72 100644
--- a/src/components/component_preview/component_preview.js
+++ b/src/components/component_preview/component_preview.js
@@ -52,7 +52,7 @@ export default {
       this.$emit('update:shadow', { axis, value: Number(value) })
     },
     update () {
-      const sheet = createStyleSheet('style-component-preview')
+      const sheet = createStyleSheet('style-component-preview', 90)
 
       sheet.clear()
 
diff --git a/src/components/confirm_modal/mute_confirm.js b/src/components/confirm_modal/mute_confirm.js
index 1bef9f620..a279dc716 100644
--- a/src/components/confirm_modal/mute_confirm.js
+++ b/src/components/confirm_modal/mute_confirm.js
@@ -1,4 +1,3 @@
-import { unitToSeconds } from 'src/services/date_utils/date_utils.js'
 import { mapGetters } from 'vuex'
 
 import ConfirmModal from './confirm_modal.vue'
@@ -8,21 +7,13 @@ export default {
   props: ['type', 'user', 'status'],
   emits: ['hide', 'show', 'muted'],
   data: () => ({
-    showing: false,
-    muteExpiryAmount: 2,
-    muteExpiryUnit: 'hours'
+    showing: false
   }),
   components: {
     ConfirmModal,
     Select
   },
   computed: {
-    muteExpiryValue () {
-      unitToSeconds(this.muteExpiryUnit, this.muteExpiryAmount)
-    },
-    muteExpiryUnits () {
-      return ['minutes', 'hours', 'days']
-    },
     domain () {
       return this.user.fqn.split('@')[1]
     },
@@ -31,13 +22,8 @@ export default {
         return 'status.mute_domain_confirm'
       } else if (this.type === 'conversation') {
         return 'status.mute_conversation_confirm'
-      } else {
-        return 'user_card.mute_confirm'
       }
     },
-    userIsMuted () {
-      return this.$store.getters.relationship(this.user.id).muting
-    },
     conversationIsMuted () {
       return this.status.conversation_muted
     },
@@ -49,12 +35,9 @@ export default {
         case 'domain': {
           return this.mergedConfig.modalOnMuteDomain
         }
-        case 'conversation': {
+        default: { // conversation
           return this.mergedConfig.modalOnMuteConversation
         }
-        default: {
-          return this.mergedConfig.modalOnMute
-        }
       }
     },
     ...mapGetters(['mergedConfig'])
@@ -79,7 +62,7 @@ export default {
       switch (this.type) {
         case 'domain': {
           if (!this.domainIsMuted) {
-            this.$store.dispatch('muteDomain', { id: this.domain, expiresIn: this.muteExpiryValue })
+            this.$store.dispatch('muteDomain', { id: this.domain })
           } else {
             this.$store.dispatch('unmuteDomain', { id: this.domain })
           }
@@ -87,20 +70,12 @@ export default {
         }
         case 'conversation': {
           if (!this.conversationIsMuted) {
-            this.$store.dispatch('muteConversation', { id: this.status.id, expiresIn: this.muteExpiryValue })
+            this.$store.dispatch('muteConversation', { id: this.status.id })
           } else {
             this.$store.dispatch('unmuteConversation', { id: this.status.id })
           }
           break
         }
-        default: {
-          if (!this.userIsMuted) {
-            this.$store.dispatch('muteUser', { id: this.user.id, expiresIn: this.muteExpiryValue })
-          } else {
-            this.$store.dispatch('unmuteUser', { id: this.user.id })
-          }
-          break
-        }
       }
       this.$emit('muted')
       this.hide()
diff --git a/src/components/confirm_modal/mute_confirm.vue b/src/components/confirm_modal/mute_confirm.vue
index bf7ab338f..7c754b006 100644
--- a/src/components/confirm_modal/mute_confirm.vue
+++ b/src/components/confirm_modal/mute_confirm.vue
@@ -18,36 +18,6 @@
         <span v-text="user.screen_name_ui" />
       </template>
     </i18n-t>
-    <div
-      v-if="type !== 'domain'"
-      class="mute-expiry"
-    >
-      <p>
-        <label>
-          {{ $t('user_card.mute_duration_prompt') }}
-        </label>
-        <input
-          v-model="muteExpiryAmount"
-          type="number"
-          class="input expiry-amount hide-number-spinner"
-          :min="0"
-        >
-        {{ ' ' }}
-        <Select
-          v-model="muteExpiryUnit"
-          unstyled="true"
-          class="expiry-unit"
-        >
-          <option
-            v-for="unit in muteExpiryUnits"
-            :key="unit"
-            :value="unit"
-          >
-            {{ $t(`time.unit.${unit}_short`, ['']) }}
-          </option>
-        </Select>
-      </p>
-    </div>
   </confirm-modal>
 </template>
 
diff --git a/src/components/mute_card/mute_card.js b/src/components/mute_card/mute_card.js
index cbec0e9bb..3d655465f 100644
--- a/src/components/mute_card/mute_card.js
+++ b/src/components/mute_card/mute_card.js
@@ -1,12 +1,8 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
 
 const MuteCard = {
   props: ['userId'],
-  data () {
-    return {
-      progress: false
-    }
-  },
   computed: {
     user () {
       return this.$store.getters.findUser(this.userId)
@@ -16,23 +12,24 @@ const MuteCard = {
     },
     muted () {
       return this.relationship.muting
+    },
+    muteExpiry () {
+      return this.user.mute_expires_at == null
+        ? this.$t('user_card.mute_expires_forever')
+        : this.$t('user_card.mute_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
     }
   },
   components: {
-    BasicUserCard
+    BasicUserCard,
+    UserTimedFilterModal
   },
   methods: {
     unmuteUser () {
       this.progress = true
-      this.$store.dispatch('unmuteUser', this.userId).then(() => {
-        this.progress = false
-      })
+      this.$store.dispatch('unmuteUser', this.userId)
     },
     muteUser () {
-      this.progress = true
-      this.$store.dispatch('muteUser', this.userId).then(() => {
-        this.progress = false
-      })
+      this.$refs.timedMuteDialog.optionallyPrompt()
     }
   }
 }
diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue
index 97e91cbca..08f62da9a 100644
--- a/src/components/mute_card/mute_card.vue
+++ b/src/components/mute_card/mute_card.vue
@@ -1,33 +1,32 @@
 <template>
   <basic-user-card :user="user">
     <div class="mute-card-content-container">
+      <span v-if="muted" class="alert neutral">
+        {{ muteExpiry }}
+      </span>
+      {{ ' ' }}
       <button
         v-if="muted"
         class="btn button-default"
-        :disabled="progress"
         @click="unmuteUser"
       >
-        <template v-if="progress">
-          {{ $t('user_card.unmute_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.unmute') }}
-        </template>
+        {{ $t('user_card.unmute') }}
       </button>
       <button
         v-else
         class="btn button-default"
-        :disabled="progress"
         @click="muteUser"
       >
-        <template v-if="progress">
-          {{ $t('user_card.mute_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.mute') }}
-        </template>
+        {{ $t('user_card.mute') }}
       </button>
     </div>
+    <teleport to="#modal">
+      <UserTimedFilterModal
+        :user="user"
+        :is-mute="true"
+        ref="timedMuteDialog"
+      />
+    </teleport>
   </basic-user-card>
 </template>
 
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index e0f446a0e..838ac6d6c 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -412,11 +412,9 @@ const AppearanceTab = {
       }
 
 
-      const sheet = createStyleSheet('appearance-tab-previews')
+      const sheet = createStyleSheet('appearance-tab-previews', 90)
       sheet.addRule([
-        '#theme-preview-',
-        key,
-        ' {\n',
+        '#theme-preview-', key, ' {\n',
         getCssRules(theme3.eager).join('\n'),
         '\n}'
       ].join(''))
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 5ff137062..f78f6815c 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -107,7 +107,7 @@ const FilteringTab = {
     ...mapActions(useServerSideStorageStore, ['setPreference', 'unsetPreference', 'pushServerSideStorage']),
     getDatetimeLocal (timestamp) {
       const date = new Date(timestamp)
-      let fmt = new Intl.NumberFormat("en-US", {minimumIntegerDigits: 2})
+      const fmt = new Intl.NumberFormat("en-US", {minimumIntegerDigits: 2})
       const datetime = [
         date.getFullYear(),
         '-',
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index df28a23e3..7074a6d81 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -5,9 +5,12 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
 import UnitSetting from '../helpers/unit_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
+import Select from 'src/components/select/select.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
+
+import { mapState } from 'vuex'
 import { clearCache, cacheKey, emojiCacheKey } from 'src/services/sw/sw.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -56,6 +59,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.unsaved_post_action_${mode}`)
       })),
+      muteBlockLv1Options: ['ask', 'forever', 'temporarily'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`user_card.mute_block_${mode}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@@ -73,12 +81,47 @@ const GeneralTab = {
     UnitSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
-    ProfileSettingIndicator
+    ProfileSettingIndicator,
+    Select
   },
   computed: {
     postFormats () {
       return this.$store.state.instance.postFormats || []
     },
+    onMuteDefaultActionLv1: {
+      get () {
+        const value = this.$store.state.config.onMuteDefaultAction
+        if (value === 'ask' || value === 'forever') {
+          return value
+        } else {
+          return 'temporarily'
+        }
+      },
+      set (value) {
+        let realValue = value
+        if (value !== 'ask' && value !== 'forever') {
+          realValue = '14d'
+        }
+        this.$store.dispatch('setOption', { name: 'onMuteDefaultAction', value: realValue })
+      }
+    },
+    onBlockDefaultActionLv1: {
+      get () {
+        const value = this.$store.state.config.onBlockDefaultAction
+        if (value === 'ask' || value === 'forever') {
+          return value
+        } else {
+          return 'temporarily'
+        }
+      },
+      set (value) {
+        let realValue = value
+        if (value !== 'ask' && value !== 'forever') {
+          realValue = '14d'
+        }
+        this.$store.dispatch('setOption', { name: 'onBlockDefaultAction', value: realValue })
+      }
+    },
     postContentOptions () {
       return this.postFormats.map(format => ({
         key: format,
@@ -94,7 +137,10 @@ const GeneralTab = {
     },
     instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
     instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
-    ...SharedComputedObject()
+    ...SharedComputedObject(),
+    ...mapState({
+      blockExpirationSupported: state => state.instance.blockExpiration
+    })
   },
   methods: {
     changeDefaultScope (value) {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index b8da782fb..648d7ac84 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -69,6 +69,66 @@
             {{ $t('settings.user_popover_avatar_overlay') }}
           </BooleanSetting>
         </li>
+        <li>
+          {{ $t('user_card.default_mute_expiration') }}
+          <Select
+            id="onMuteDefaultActionLv1"
+            v-model="onMuteDefaultActionLv1"
+          >
+            <option
+              v-for="option in muteBlockLv1Options"
+              :key="option.key"
+              :value="option.value"
+            >
+              {{ option.label }}
+            </option>
+          </Select>
+          <ul
+            class="setting-list suboptions"
+            v-if="onMuteDefaultActionLv1 === 'temporarily'"
+          >
+            <li>
+              <UnitSetting
+                path="onMuteDefaultAction"
+                unit-set="time"
+                :units="['s', 'm', 'h', 'd']"
+                :min="0"
+              >
+                {{ $t('user_card.default_expiration_time') }}
+              </UnitSetting>
+            </li>
+          </ul>
+        </li>
+        <li v-if="blockExpirationSupported">
+          {{ $t('user_card.default_block_expiration') }}
+          <Select
+            id="onBlockDefaultActionLv1"
+            v-model="onBlockDefaultActionLv1"
+          >
+            <option
+              v-for="option in muteBlockLv1Options"
+              :key="option.key"
+              :value="option.value"
+            >
+              {{ option.label }}
+            </option>
+          </Select>
+          <ul
+            class="setting-list suboptions"
+            v-if="onBlockDefaultActionLv1 === 'temporarily'"
+          >
+            <li>
+              <UnitSetting
+                path="onBlockDefaultAction"
+                unit-set="time"
+                :units="['s', 'm', 'h', 'd']"
+                :min="0"
+              >
+                {{ $t('user_card.default_expiration_time') }}
+              </UnitSetting>
+            </li>
+          </ul>
+        </li>
         <li>
           <BooleanSetting
             path="alwaysShowNewPostButton"
@@ -107,15 +167,10 @@
               </BooleanSetting>
             </li>
             <li>
-              <BooleanSetting path="modalOnBlock">
+              <BooleanSetting v-if="!blockExpirationSupported" path="modalOnBlock">
                 {{ $t('settings.confirm_dialogs_block') }}
               </BooleanSetting>
             </li>
-            <li>
-              <BooleanSetting path="modalOnMute">
-                {{ $t('settings.confirm_dialogs_mute') }}
-              </BooleanSetting>
-            </li>
             <li>
               <BooleanSetting path="modalOnMuteConversation">
                 {{ $t('settings.confirm_dialogs_mute_conversation') }}
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 f92579bb2..5453da57b 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -695,7 +695,7 @@ export default {
         return
       }
 
-      const sheet = createStyleSheet('style-tab-overall-preview')
+      const sheet = createStyleSheet('style-tab-overall-preview', 90)
 
       sheet.clear()
       sheet.addRule([
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 70854e3bd..4b558471f 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -697,7 +697,7 @@ export default {
         liteMode: true
       })
 
-      const sheet = createStyleSheet('theme-tab-overall-preview')
+      const sheet = createStyleSheet('theme-tab-overall-preview', 90)
       const rule = getScopedVersion(
         getCssRules(theme3.eager),
         '&'
diff --git a/src/components/status_action_buttons/action_button_container.js b/src/components/status_action_buttons/action_button_container.js
index 313e3022f..a8f20800b 100644
--- a/src/components/status_action_buttons/action_button_container.js
+++ b/src/components/status_action_buttons/action_button_container.js
@@ -1,6 +1,7 @@
 import ActionButton from './action_button.vue'
 import Popover from 'src/components/popover/popover.vue'
 import MuteConfirm from 'src/components/confirm_modal/mute_confirm.vue'
+import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -19,7 +20,8 @@ export default {
   components: {
     ActionButton,
     Popover,
-    MuteConfirm
+    MuteConfirm,
+    UserTimedFilterModal
   },
   props: ['button', 'status'],
   emits: ['interacted'],
diff --git a/src/components/status_action_buttons/action_button_container.vue b/src/components/status_action_buttons/action_button_container.vue
index 931a40349..75f5010ee 100644
--- a/src/components/status_action_buttons/action_button_container.vue
+++ b/src/components/status_action_buttons/action_button_container.vue
@@ -94,11 +94,10 @@
         :status="status"
         :user="user"
       />
-      <MuteConfirm
-        ref="confirmUser"
-        type="user"
-        :status="status"
+      <UserTimedFilterModal
+        :is-mute="true"
         :user="user"
+        ref="confirmUser"
       />
     </teleport>
   </div>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 55c76225c..0c01d5ff4 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -8,7 +8,8 @@ import UserNote from '../user_note/user_note.vue'
 import Select from '../select/select.vue'
 import UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import MuteConfirm from '../confirm_modal/mute_confirm.vue'
+import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
+
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 import { usePostStatusStore } from 'src/stores/post_status'
@@ -48,6 +49,19 @@ export default {
     'onClose',
     'hasNoteEditor'
   ],
+  components: {
+    UserAvatar,
+    RemoteFollow,
+    ModerationTools,
+    AccountActions,
+    ProgressButton,
+    FollowButton,
+    Select,
+    RichContent,
+    UserLink,
+    UserNote,
+    UserTimedFilterModal
+  },
   data () {
     return {
       followRequestInProgress: false,
@@ -145,24 +159,21 @@ export default {
     supportsNote () {
       return 'note' in this.relationship
     },
+    muteExpiry () {
+      return this.user.mute_expires_at == null
+        ? this.$t('user_card.mute_expires_forever')
+        : this.$t('user_card.mute_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
+    },
+    blockExpiry () {
+      return this.user.block_expires_at == null
+        ? this.$t('user_card.block_expires_forever')
+        : this.$t('user_card.block_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
+    },
     ...mapGetters(['mergedConfig'])
   },
-  components: {
-    UserAvatar,
-    RemoteFollow,
-    ModerationTools,
-    AccountActions,
-    ProgressButton,
-    FollowButton,
-    Select,
-    RichContent,
-    UserLink,
-    UserNote,
-    MuteConfirm
-  },
   methods: {
     muteUser () {
-      this.$refs.confirmation.optionallyPrompt()
+      this.$refs.timedMuteDialog.optionallyPrompt()
     },
     unmuteUser () {
       this.$store.dispatch('unmuteUser', this.user.id)
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index d263be1c0..418bef08b 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -8,6 +8,11 @@
     --_still-image-label-visibility: hidden;
   }
 
+  .btn-mute, .btn-mention {
+    display: block;
+    width: 100%;
+  }
+
   .panel-heading {
     padding: 0.5em 0;
     text-align: center;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 36935424d..5e606d653 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -136,6 +136,18 @@
                   size="sm"
                 />
               </span>
+              <span
+                v-if="relationship.muting"
+                class="alert neutral user-role"
+              >
+                {{ muteExpiry }}
+              </span>
+              <span
+                v-if="relationship.blocking"
+                class="alert neutral user-role"
+              >
+                {{ blockExpiry }}
+              </span>
               <span
                 v-if="!mergedConfig.hideUserStats && !hideBio"
                 class="dailyAvg"
@@ -232,7 +244,7 @@
           <div>
             <button
               v-if="relationship.muting"
-              class="btn button-default btn-block toggled"
+              class="btn button-default btn-mute toggled"
               :disabled="user.deactivated"
               @click="unmuteUser"
             >
@@ -240,7 +252,7 @@
             </button>
             <button
               v-else
-              class="btn button-default btn-block"
+              class="btn button-default btn-mute"
               :disabled="user.deactivated"
               @click="muteUser"
             >
@@ -249,7 +261,7 @@
           </div>
           <div>
             <button
-              class="btn button-default btn-block"
+              class="btn button-default btn-mention"
               :disabled="user.deactivated"
               @click="mentionUser"
             >
@@ -314,10 +326,10 @@
       />
     </div>
     <teleport to="#modal">
-      <MuteConfirm
-        ref="confirmation"
-        type="user"
+      <UserTimedFilterModal
         :user="user"
+        :is-mute="true"
+        ref="timedMuteDialog"
       />
     </teleport>
   </div>
diff --git a/src/components/user_timed_filter_modal/user_timed_filter_modal.js b/src/components/user_timed_filter_modal/user_timed_filter_modal.js
new file mode 100644
index 000000000..305603cba
--- /dev/null
+++ b/src/components/user_timed_filter_modal/user_timed_filter_modal.js
@@ -0,0 +1,100 @@
+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Select from 'src/components/select/select.vue'
+import { durationStrToMs } from 'src/services/date_utils/date_utils.js'
+
+const UserTimedFilterModal = {
+  data () {
+    const action = this.isMute
+          ? this.$store.getters.mergedConfig.onMuteDefaultAction
+          : this.$store.getters.mergedConfig.onBlockDefaultAction
+    const doAsk = action === 'ask'
+    const defaultValues = {}
+
+    if (doAsk || action === 'forever') {
+      defaultValues.expiration = 14
+      defaultValues.expirationUnit = 'd'
+      if (action === 'forever') {
+        defaultValues.forever = true
+      }
+    } else {
+      const unit = action.replace(/[0-9,.]+/, '')
+      const value = action.replace(/[^0-9,.]+/, '')
+      defaultValues.expiration = value
+      defaultValues.expirationUnit = unit
+    }
+
+    return {
+      showing: false,
+      forever: false,
+      dontAskAgain: false,
+      ...defaultValues
+    }
+  },
+  components: {
+    ConfirmModal,
+    Select,
+    Checkbox
+  },
+  props: {
+    isMute: Boolean,
+    user: Object
+  },
+  computed: {
+    shouldConfirm () {
+      if (this.isMute) {
+        return this.$store.getters.mergedConfig.onMuteDefaultAction === 'ask'
+      } else {
+        return this.$store.getters.mergedConfig.onBlockDefaultAction === 'ask'
+      }
+    },
+    expiryString () {
+      return this.expiration.toString() + this.expirationUnit
+    },
+    expirySeconds () {
+      return Math.floor(durationStrToMs(this.expiryString) / 1000)
+    },
+    requestBody () {
+      const object = { id: this.user.id }
+      if (!this.forever) {
+        object.expiresIn = this.expirySeconds
+      }
+      return object
+    }
+  },
+  watch: {
+    expiration (newVal) {
+      if (newVal <= 0) {
+        this.expiration = 1
+      }
+    }
+  },
+  methods: {
+    optionallyPrompt () {
+      if (this.shouldConfirm) {
+        this.showing = true
+      } else {
+        this.accept()
+      }
+    },
+    accept () {
+      if (this.isMute) {
+        this.$store.dispatch('muteUser', this.requestBody)
+        if (this.dontAskAgain) {
+          this.$store.dispatch('setOption', { name: 'onMuteDefaultAction', value: this.expiryString })
+        }
+      } else {
+        this.$store.dispatch('blockUser', this.requestBody)
+        if (this.dontAskAgain) {
+          this.$store.dispatch('setOption', { name: 'onBlockDefaultAction', value: this.expiryString })
+        }
+      }
+      this.showing = false
+    },
+    cancel () {
+      this.showing = false
+    }
+  }
+}
+
+export default UserTimedFilterModal
diff --git a/src/components/user_timed_filter_modal/user_timed_filter_modal.scss b/src/components/user_timed_filter_modal/user_timed_filter_modal.scss
new file mode 100644
index 000000000..0fdb66eea
--- /dev/null
+++ b/src/components/user_timed_filter_modal/user_timed_filter_modal.scss
@@ -0,0 +1,9 @@
+.UserTimedFilterModal {
+  .input-dont-ask-again {
+    margin-left: 1em;
+  }
+
+  .input-expire-at {
+    margin-left: 0.25em;
+  }
+}
diff --git a/src/components/user_timed_filter_modal/user_timed_filter_modal.vue b/src/components/user_timed_filter_modal/user_timed_filter_modal.vue
new file mode 100644
index 000000000..37b4a057b
--- /dev/null
+++ b/src/components/user_timed_filter_modal/user_timed_filter_modal.vue
@@ -0,0 +1,61 @@
+<template>
+  <confirm-modal
+    v-if="showing"
+    :title="$t(isMute ? $t('user_card.mute') : $t('user_card.block'))"
+    :confirm-text="$t(isMute ? 'user_card.mute_confirm_accept_button' : 'user_card.block_confirm_accept_button')"
+    :cancel-text="$t(isMute ? 'user_card.mute_confirm_cancel_button' : 'user_card.block_confirm_cancel_button')"
+    @accepted="accept"
+    @cancelled="cancel"
+  >
+
+    <p>
+      {{ $t(isMute ? 'user_card.expire_mute_message' : 'user_card.expire_block_message', [user.screen_name]) }}
+    </p>
+    <p>
+    {{ $t('user_card.expire_in') }}
+      <input
+        id="userFilterExpires"
+        class="input input-expire-in"
+        :class="{ disabled: forever }"
+        v-model="expiration"
+        :disabled="forever"
+        min="1"
+        type="number"
+      >
+      <Select
+        id="userFilterExpiresUnit"
+        v-model="expirationUnit"
+        class="input unit-input unstyled"
+        :disabled="forever"
+      >
+        <option key="s" value="s"> {{ $t('time.unit.seconds_suffix') }} </option>
+        <option key="m" value="m"> {{ $t('time.unit.minutes_suffix') }} </option>
+        <option key="h" value="h"> {{ $t('time.unit.hours_suffix') }} </option>
+        <option key="d" value="d"> {{ $t('time.unit.days_suffix') }} </option>
+      </Select>
+
+      <br />
+      <Checkbox
+        id="forever"
+        v-model="forever"
+        name="forever"
+        class="input-forever"
+      >
+        {{ $t('user_card.mute_block_forever') }}
+      </Checkbox>
+    </p>
+
+    <Checkbox
+      id="dontAskAgain"
+      v-model="dontAskAgain"
+      name="dontAskAgain"
+      class="input-dont-ask-again"
+    >
+      {{ $t(isMute ? 'user_card.dont_ask_again_mute' : 'user_card.dont_ask_again_block') }}
+    </Checkbox>
+  </confirm-modal>
+</template>
+
+<script src="./user_timed_filter_modal.js"></script>
+
+<style lang="scss" src="./user_timed_filter_modal.scss" />
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 45c52ce67..43b5b12f4 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1233,18 +1233,25 @@
     "unit": {
       "days": "{0} day | {0} days",
       "days_short": "{0}d",
+      "days_suffix": "day(s)",
       "hours": "{0} hour | {0} hours",
       "hours_short": "{0}h",
+      "hours_suffix": "hour(s)",
       "minutes": "{0} minute | {0} minutes",
       "minutes_short": "{0}min",
+      "minutes_suffix": "minute(s)",
       "months": "{0} month | {0} months",
       "months_short": "{0}mo",
+      "months_suffix": "month(s)",
       "seconds": "{0} second | {0} seconds",
       "seconds_short": "{0}s",
+      "seconds_suffix": "second(s)",
       "weeks": "{0} week | {0} weeks",
       "weeks_short": "{0}w",
+      "weeks_suffix": "week(s)",
       "years": "{0} year | {0} years",
-      "years_short": "{0}y"
+      "years_short": "{0}y",
+      "years": "year(s)"
     },
     "in_future": "in {0}",
     "in_past": "{0} ago",
@@ -1398,6 +1405,21 @@
     "mute_confirm": "Do you really want to mute {user}?",
     "mute_confirm_accept_button": "Mute",
     "mute_confirm_cancel_button": "Do not mute",
+    "expire_in": "Expire in",
+    "expire_mute_message": "Are you sure you want to mute {0}?",
+    "expire_block_message": "Are you sure you want to block {0}?",
+    "dont_ask_again_mute": "Always mute users this way",
+    "dont_ask_again_block": "Always block users this way",
+    "mute_block_temporarily": "Temporarily",
+    "mute_block_forever": "Forever",
+    "mute_block_ask": "Ask",
+    "default_mute_expiration": "Always mute users",
+    "default_block_expiration": "Always block users",
+    "default_expiration_time": "Expire in",
+    "mute_expires_forever": "Muted forever",
+    "mute_expires_at": "Muted until {0}",
+    "block_expires_forever": "Blocked forever",
+    "block_expires_at": "Blocked until {0}",
     "mute_duration_prompt": "Mute this user for (0 for indefinite time):",
     "per_day": "per day",
     "remote_follow": "Remote follow",
diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js
index eb12d2df1..8ccf79e70 100644
--- a/src/modules/default_config_state.js
+++ b/src/modules/default_config_state.js
@@ -97,8 +97,11 @@ export const defaultState = {
   alwaysShowSubjectInput: undefined, // instance default
   postContentType: undefined, // instance default
   minimalScopesMode: undefined, // instance default
+
   // This hides statuses filtered via a word filter
   hideFilteredStatuses: undefined, // instance default
+
+  // Confirmations
   modalOnRepeat: undefined, // instance default
   modalOnUnfollow: undefined, // instance default
   modalOnBlock: undefined, // instance default
@@ -110,6 +113,11 @@ export const defaultState = {
   modalOnApproveFollow: undefined, // instance default
   modalOnDenyFollow: undefined, // instance default
   modalOnRemoveUserFromFollowers: undefined, // instance default
+
+  // Expiry confirmations/default actions
+  onMuteDefaultAction: 'ask',
+  onBlockDefaultAction: 'ask',
+
   modalMobileCenter: undefined,
   playVideosInModal: false,
   useOneClickNsfw: false,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index eff3d8870..93f81e4d8 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -164,6 +164,7 @@ const defaultState = {
   suggestionsWeb: '',
   quotingAvailable: false,
   groupActorAvailable: false,
+  blockExpiration: false,
   localBubbleInstances: [], // Akkoma
 
   // Html stuff
diff --git a/src/modules/users.js b/src/modules/users.js
index c59c04dff..d0098f05a 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -43,11 +43,20 @@ const getNotificationPermission = () => {
   return Promise.resolve(Notification.permission)
 }
 
-const blockUser = (store, id) => {
-  return store.rootState.api.backendInteractor.blockUser({ id })
+const blockUser = (store, args) => {
+  const id = args.id
+  const expiresIn = typeof args === 'object' ? args.expiresIn : 0
+
+  const predictedRelationship = store.state.relationships[id] || { id }
+  store.commit('updateUserRelationship', [predictedRelationship])
+  store.commit('addBlockId', id)
+
+  return store.rootState.api.backendInteractor.blockUser({ id, expiresIn })
     .then((relationship) => {
+      console.log(relationship)
       store.commit('updateUserRelationship', [relationship])
       store.commit('addBlockId', id)
+
       store.commit('removeStatus', { timeline: 'friends', userId: id })
       store.commit('removeStatus', { timeline: 'public', userId: id })
       store.commit('removeStatus', { timeline: 'publicAndExternal', userId: id })
@@ -74,7 +83,6 @@ const muteUser = (store, args) => {
   const expiresIn = typeof args === 'object' ? args.expiresIn : 0
 
   const predictedRelationship = store.state.relationships[id] || { id }
-  predictedRelationship.muting = true
   store.commit('updateUserRelationship', [predictedRelationship])
   store.commit('addMuteId', id)
 
@@ -360,20 +368,20 @@ const users = {
           return blocks
         })
     },
-    blockUser (store, id) {
-      return blockUser(store, id)
+    blockUser (store, data) {
+      return blockUser(store, data)
     },
-    unblockUser (store, id) {
-      return unblockUser(store, id)
+    unblockUser (store, data) {
+      return unblockUser(store, data)
     },
     removeUserFromFollowers (store, id) {
       return removeUserFromFollowers(store, id)
     },
-    blockUsers (store, ids = []) {
-      return Promise.all(ids.map(id => blockUser(store, id)))
+    blockUsers (store, data = []) {
+      return Promise.all(data.map(d => blockUser(store, d)))
     },
-    unblockUsers (store, ids = []) {
-      return Promise.all(ids.map(id => unblockUser(store, id)))
+    unblockUsers (store, data = []) {
+      return Promise.all(data.map(d => unblockUser(store, d)))
     },
     editUserNote (store, args) {
       return editUserNote(store, args)
@@ -396,8 +404,8 @@ const users = {
           return mutes
         })
     },
-    muteUser (store, id) {
-      return muteUser(store, id)
+    muteUser (store, data) {
+      return muteUser(store, data)
     },
     unmuteUser (store, id) {
       return unmuteUser(store, id)
@@ -408,11 +416,11 @@ const users = {
     showReblogs (store, id) {
       return showReblogs(store, id)
     },
-    muteUsers (store, ids = []) {
-      return Promise.all(ids.map(id => muteUser(store, id)))
+    muteUsers (store, data = []) {
+      return Promise.all(data.map(d => muteUser(store, d)))
     },
     unmuteUsers (store, ids = []) {
-      return Promise.all(ids.map(id => unmuteUser(store, id)))
+      return Promise.all(ids.map(d => unmuteUser(store, d)))
     },
     fetchDomainMutes (store) {
       return store.rootState.api.backendInteractor.fetchDomainMutes()
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 5022e330d..8e4be73eb 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -320,11 +320,18 @@ const unmuteConversation = ({ id, credentials }) => {
     .then((data) => parseStatus(data))
 }
 
-const blockUser = ({ id, credentials }) => {
-  return fetch(MASTODON_BLOCK_USER_URL(id), {
-    headers: authHeaders(credentials),
-    method: 'POST'
-  }).then((data) => data.json())
+const blockUser = ({ id, expiresIn, credentials }) => {
+  const payload = {}
+  if (expiresIn) {
+    payload.expires_in = expiresIn
+  }
+
+  return promisedRequest({
+    url: MASTODON_BLOCK_USER_URL(id),
+    credentials,
+    method: 'POST',
+    payload
+  })
 }
 
 const unblockUser = ({ id, credentials }) => {
@@ -1174,7 +1181,13 @@ const muteUser = ({ id, expiresIn, credentials }) => {
   if (expiresIn) {
     payload.expires_in = expiresIn
   }
-  return promisedRequest({ url: MASTODON_MUTE_USER_URL(id), credentials, method: 'POST', payload })
+
+  return promisedRequest({
+    url: MASTODON_MUTE_USER_URL(id),
+    credentials,
+    method: 'POST',
+    payload
+  })
 }
 
 const unmuteUser = ({ id, credentials }) => {
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 61eb5313f..28f1bc2aa 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -51,6 +51,8 @@ export const parseUser = (data) => {
     output.screen_name = data.acct
     output.fqn = data.fqn
     output.statusnet_profile_url = data.url
+    output.mute_expires_at = data.mute_expires_at
+    output.block_expires_at = data.block_expires_at
 
     // There's nothing else to get
     if (mastoShort) {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 6312d5b89..a8b7e43e5 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -10,11 +10,12 @@ const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
 
 const stylesheets = {}
 
-export const createStyleSheet = (id) => {
+export const createStyleSheet = (id, priority = 1000) => {
   if (stylesheets[id]) return stylesheets[id]
   const newStyleSheet = {
     rules: [],
     ready: false,
+    priority,
     clear () {
       this.rules = []
     },
@@ -40,16 +41,23 @@ export const adoptStyleSheets = throttle(() => {
     document.adoptedStyleSheets = Object
       .values(stylesheets)
       .filter(x => x.ready)
-      .map(x => {
+      .sort((a, b) => a.priority - b.priority)
+      .map(sheet => {
         const css = new CSSStyleSheet()
-        x.rules.forEach(r => css.insertRule(r, css.cssRules.length))
+        sheet.rules.forEach(r => css.insertRule(r))
         return css
       })
   } else {
     const holder = document.getElementById('custom-styles-holder')
 
+    for (let i = holder.sheet.cssRules.length - 1; i >= 0; --i) {
+      holder.sheet.deleteRule(i)
+    }
+
     Object
       .values(stylesheets)
+      .filter(x => x.ready)
+      .sort((a, b) => a.priority - b.priority)
       .forEach(sheet => {
         sheet.rules.forEach(r => holder.sheet.insertRule(r))
       })
@@ -115,8 +123,8 @@ export const tryLoadCache = async () => {
   if (!cache) return null
   try {
     if (cache.engineChecksum === getEngineChecksum()) {
-      const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
-      const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
+      const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
+      const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)
 
       cache.data[0].forEach(rule => eagerStyles.addRule(rule))
       cache.data[1].forEach(rule => lazyStyles.addRule(rule))
@@ -124,7 +132,8 @@ export const tryLoadCache = async () => {
       eagerStyles.ready = true
       lazyStyles.ready = true
 
-      adoptStyleSheets()
+      // Don't do this, we need to wait until config adopts its styles first
+      //adoptStyleSheets()
 
       console.info(`Loaded theme from cache`)
       return true
@@ -144,8 +153,8 @@ export const applyTheme = (
   onFinish = () => {},
   debug
 ) => {
-  const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
-  const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
+  const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
+  const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)
 
 
   const { lazyProcessFunc } = generateTheme(
@@ -165,7 +174,7 @@ export const applyTheme = (
         console.info('Eager part of theme finished, waiting for lazy part to finish to store cache')
       },
       onLazyFinished () {
-        eagerStyles.ready = true
+        lazyStyles.ready = true
         adoptStyleSheets()
         const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
         onFinish(cache)
@@ -235,7 +244,7 @@ export const applyConfig = (input) => {
     .filter(([, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 
-  const styleSheet = createStyleSheet('theme-holder')
+  const styleSheet = createStyleSheet('theme-holder', 30)
 
   styleSheet.addRule(`:root { ${rules} }`)