diff --git a/src/App.js b/src/App.js
index 9fb4d32e5..36df2d84e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -149,13 +149,16 @@ export default {
     userBackground() {
       return this.currentUser.background_image
     },
+    foreignProfileBackground() {
+      return useMergedConfigStore().mergedConfig.allowForeignUserBackground && useInterfaceStore().foreignProfileBackground
+    },
     instanceBackground() {
       return useMergedConfigStore().mergedConfig.hideInstanceWallpaper
         ? null
         : this.instanceBackgroundUrl
     },
     background() {
-      return this.userBackground || this.instanceBackground
+      return this.foreignProfileBackground || this.userBackground || this.instanceBackground
     },
     bgStyle() {
       if (this.background) {
diff --git a/src/App.scss b/src/App.scss
index 41fea782b..952af5b47 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -50,7 +50,7 @@ body {
 // have a cursor/pointer to operate them
 @media (any-pointer: fine) {
   * {
-    scrollbar-color: var(--text) transparent;
+    scrollbar-color: var(--icon) transparent;
 
     &::-webkit-scrollbar {
       background: transparent;
@@ -130,7 +130,7 @@ body {
   }
   // Body should have background to scrollbar otherwise it will use white (body color?)
   html {
-    scrollbar-color: var(--text) var(--wallpaper);
+    scrollbar-color: var(--icon) var(--wallpaper);
     background: var(--wallpaper);
   }
 }
@@ -200,6 +200,7 @@ nav {
   background-color: var(--wallpaper);
   background-image: var(--body-background-image);
   background-position: 50%;
+  transition: background-image 1s;
 }
 
 .underlay {
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 1d19987ac..36b669622 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -129,6 +129,7 @@ const EmojiPicker = {
       hideCustomEmojiInPicker: false,
       // Lazy-load only after the first time `showing` becomes true.
       contentLoaded: false,
+      popoverShown: false,
       groupRefs: {},
       emojiRefs: {},
       filteredEmojiGroups: [],
@@ -176,6 +177,13 @@ const EmojiPicker = {
       const fullEmojiSize = emojiSizeReal + 2 * 0.2 * fontSizeMultiplier * 14
       this.emojiSize = fullEmojiSize
     },
+    togglePicker() {
+      if (this.popoverShown) {
+        this.hidePicker()
+      } else {
+        this.showPicker()
+      }
+    },
     showPicker() {
       this.$refs.popover.showPopover()
       this.$nextTick(() => {
@@ -194,10 +202,10 @@ const EmojiPicker = {
       }
     },
     onPopoverShown() {
-      this.$emit('show')
+      this.popoverShown = true
     },
     onPopoverClosed() {
-      this.$emit('close')
+      this.popoverShown = false
     },
     onStickerUploaded(e) {
       this.$emit('sticker-uploaded', e)
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index 6afd0be5c..78f71934b 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -11,8 +11,8 @@ import ModifiedIndicator from '../helpers/modified_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
-import { useInstanceStore } from 'src/stores/instance.js'
 import { useEmojiStore } from 'src/stores/emoji.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -176,21 +176,24 @@ const EmojiTab = {
     },
 
     refreshPackList() {
-      useEmojiStore().getAdminPacks(
-        this.remotePackInstance,
-        this.$store.state.api.backendInteractor.listEmojiPacks,
-      ).then((allPacks) => {
-        this.knownLocalPacks = allPacks
-        for (const name of Object.keys(this.knownLocalPacks)) {
-          this.sortPackFiles(name)
-        }
-      })
+      useEmojiStore()
+        .getAdminPacks(
+          this.remotePackInstance,
+          this.$store.state.api.backendInteractor.listEmojiPacks,
+        )
+        .then((allPacks) => {
+          this.knownLocalPacks = allPacks
+          for (const name of Object.keys(this.knownLocalPacks)) {
+            this.sortPackFiles(name)
+          }
+        })
     },
     listRemotePacks() {
-      useEmojiStore().getAdminPacks(
-        this.remotePackInstance,
-        this.$store.state.api.backendInteractor.listRemoteEmojiPacks,
-      )
+      useEmojiStore()
+        .getAdminPacks(
+          this.remotePackInstance,
+          this.$store.state.api.backendInteractor.listRemoteEmojiPacks,
+        )
         .then((allPacks) => {
           let inst = this.remotePackInstance
           if (!inst.startsWith('http')) {
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.scss b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
index f98d2d78f..67da9305b 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.scss
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
@@ -41,6 +41,7 @@
     .tab-slot-wrapper {
       flex: 1 1 auto;
       height: 100%;
+      padding: 0 1em;
       overflow-y: auto;
       display: grid;
       grid-template-columns: minmax(1em, 1fr) minmax(min-content, 45em) minmax(1em, 1fr);
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 313ed71b0..7d6e17244 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -38,6 +38,7 @@
 
   p {
     line-height: 1.5;
+    margin-left: 2em;
   }
 
   .sidenote {
@@ -49,6 +50,7 @@
   .setting-description {
     margin-top: 0.2em;
     margin-bottom: 0;
+    margin-left: 0;
     font-size: 80%;
   }
 
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index f0ccf71f3..1343a36d5 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -263,6 +263,11 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="allowForeignUserBackground">
+            {{ $t('settings.foreign_user_background') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="compactProfiles">
             {{ $t('settings.compact_profiles') }}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a9312c8e6..5cd2de3ab 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -169,7 +169,10 @@
               </div>
 
               <span class="heading-right">
-                <span class="pin" v-if="showPinned">
+                <span
+                  v-if="showPinned"
+                  class="pin"
+                >
                   <FAIcon
                     icon="thumbtack"
                     class="faint"
diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
index 73eab7d90..5f7942162 100644
--- a/src/components/status_action_buttons/action_button.js
+++ b/src/components/status_action_buttons/action_button.js
@@ -14,8 +14,8 @@ import {
 import {
   faBookmark,
   faCheck,
-  faChevronRight,
   faChevronDown,
+  faChevronRight,
   faExternalLinkAlt,
   faEyeSlash,
   faHistory,
@@ -131,6 +131,12 @@ export default {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
     },
+    onShowEmojiPicker() {
+      this.$emit('emojiPickerShown', true)
+    },
+    onHideEmojiPicker() {
+      this.$emit('emojiPickerShown', false)
+    },
     doActionWrap(
       button,
       close = () => {
@@ -142,7 +148,7 @@ export default {
       )
         return
       if (button.name === 'emoji') {
-        this.$refs.picker.showPicker()
+        this.$refs.picker.togglePicker()
       } else {
         this.animationState = true
         this.getComponent(button) === 'button' && this.doAction(button)
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
index 88a342314..043cd995d 100644
--- a/src/components/status_action_buttons/action_button.vue
+++ b/src/components/status_action_buttons/action_button.vue
@@ -72,9 +72,8 @@
     <Popover
       v-if="button.name === 'bookmark'"
       class="chevron-popover"
-      placement="bottom"
       :trigger="extra ? 'hover' : 'click'"
-      :placement="extra ? 'right' : 'top'"
+      :placement="extra ? 'right' : 'bottom'"
       :offset="extra ? { x: 10 } : { y: 10 }"
       :trigger-attrs="{ class: 'extra-button' }"
     >
@@ -101,6 +100,8 @@
       :hide-custom-emoji="hideCustomEmoji"
       class="emoji-picker-panel"
       @emoji="addReaction"
+      @show="onShowEmojiPicker"
+      @close="onHideEmojiPicker"
     />
   </div>
 </template>
diff --git a/src/components/status_action_buttons/action_button_container.js b/src/components/status_action_buttons/action_button_container.js
index 0f236b0a9..a5a070dde 100644
--- a/src/components/status_action_buttons/action_button_container.js
+++ b/src/components/status_action_buttons/action_button_container.js
@@ -20,6 +20,7 @@ export default {
     UserTimedFilterModal,
   },
   props: ['button', 'status'],
+  emits: ['emojiPickerShown'],
   mounted() {
     if (this.button.name === 'mute') {
       this.$store.dispatch('fetchDomainMutes')
diff --git a/src/components/status_action_buttons/action_button_container.vue b/src/components/status_action_buttons/action_button_container.vue
index 9c4e84c00..348b158a7 100644
--- a/src/components/status_action_buttons/action_button_container.vue
+++ b/src/components/status_action_buttons/action_button_container.vue
@@ -79,6 +79,7 @@
       :button="button"
       :status="status"
       v-bind="$attrs"
+      @emojiPickerShown="e => $emit('emojiPickerShown', e)"
     />
     <teleport to="#modal">
       <MuteConfirm
diff --git a/src/components/status_action_buttons/buttons_definitions.js b/src/components/status_action_buttons/buttons_definitions.js
index d4f3e698c..455da5460 100644
--- a/src/components/status_action_buttons/buttons_definitions.js
+++ b/src/components/status_action_buttons/buttons_definitions.js
@@ -98,7 +98,7 @@ export const BUTTONS = [
     label: 'tool_tip.add_reaction',
     icon: ['far', 'smile-beam'],
     interactive: () => true,
-    active: () => false,
+    active: ({ emojiPickerShown }) => emojiPickerShown,
     toggleable: true,
     anonLink: true,
   },
diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js
index 8bdd87277..05809bbe9 100644
--- a/src/components/status_action_buttons/status_action_buttons.js
+++ b/src/components/status_action_buttons/status_action_buttons.js
@@ -28,6 +28,7 @@ const StatusActionButtons = {
         /* no-op */
       },
       randomSeed: genRandomSeed(),
+      emojiPickerShown: false,
     }
   },
   components: {
@@ -56,6 +57,7 @@ const StatusActionButtons = {
       return {
         status: this.status,
         replying: this.replying,
+        emojiPickerShown: this.emojiPickerShown,
         emit: this.$emit,
         dispatch: this.$store.dispatch,
         state: this.$store.state,
@@ -107,6 +109,9 @@ const StatusActionButtons = {
     onExtraClose() {
       this.showPin = false
     },
+    onEmojiPickerShown(state) {
+      this.emojiPickerShown = state
+    },
     isPinned(button) {
       return this.pinnedItems.has(button.name)
     },
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index 3837e6ae5..7017a8cf0 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -20,6 +20,7 @@
           :get-component="getComponent"
           :close="() => { /* no-op */ }"
           :do-action="doAction"
+          @emojiPickerShown="onEmojiPickerShown"
         />
         <button
           v-if="showPin && currentUser"
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index a8a7d662a..ff35bde58 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -138,8 +138,6 @@
     align-items: start;
     flex-direction: row;
 
-    --emoji-size: calc(var(--emojiSize, 32px) / 2);
-
     & .body,
     & .attachments {
       max-height: 3.25em;
diff --git a/src/components/still-image/still-image-emoji-popover.js b/src/components/still-image/still-image-emoji-popover.js
index 74d6a002f..979a67b1e 100644
--- a/src/components/still-image/still-image-emoji-popover.js
+++ b/src/components/still-image/still-image-emoji-popover.js
@@ -1,11 +1,11 @@
 import Popover from 'components/popover/popover.vue'
 import SelectComponent from 'components/select/select.vue'
-
-import StillImage from './still-image.vue'
 import { mapState } from 'pinia'
 
-import { useInterfaceStore } from 'src/stores/interface'
+import StillImage from './still-image.vue'
+
 import { useEmojiStore } from 'src/stores/emoji'
+import { useInterfaceStore } from 'src/stores/interface'
 
 export default {
   components: { StillImage, Popover, SelectComponent },
@@ -28,7 +28,7 @@ export default {
     isUserAdmin() {
       return this.$store.state.users.currentUser?.rights.admin
     },
-    ...mapState(useEmojiStore, ['adminPacksLocal', 'adminPacksLocalLoading'])
+    ...mapState(useEmojiStore, ['adminPacksLocal', 'adminPacksLocalLoading']),
   },
   methods: {
     displayError(msg) {
@@ -64,9 +64,11 @@ export default {
     },
 
     fetchEmojiPacksIfAdmin() {
-      useEmojiStore().getAdminPacksLocal().then(() => {
-        this.$refs.emojiPopover.updateStyles()
-      })
+      useEmojiStore()
+        .getAdminPacksLocal()
+        .then(() => {
+          this.$refs.emojiPopover.updateStyles()
+        })
     },
   },
 }
diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
index 440fe7694..3d15f3ed4 100644
--- a/src/components/user_list_popover/user_list_popover.js
+++ b/src/components/user_list_popover/user_list_popover.js
@@ -3,8 +3,8 @@ import { defineAsyncComponent } from 'vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 
-import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -40,7 +40,7 @@ const UserListPopover = {
         useInstanceStore().restrictedNicknames,
       )
     },
-  }
+  },
 }
 
 export default UserListPopover
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 4e4ea41a5..02fa5a2d2 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -12,8 +12,8 @@
         <template v-if="users.length">
           <router-link
             v-for="(user) in usersCapped"
-            :to="generateProfileLink(user)"
             :key="user.id"
+            :to="generateProfileLink(user)"
             class="user-list-row"
           >
             <UserAvatar
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 17d69f49b..ed574d7bb 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -11,6 +11,7 @@ import Timeline from '../timeline/timeline.vue'
 import UserCard from '../user_card/user_card.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -56,9 +57,14 @@ const UserProfile = {
     const routeParams = this.$route.params
     this.load({ name: routeParams.name, id: routeParams.id })
     this.tab = get(this.$route, 'query.tab', defaultTabKey)
+    useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
+  },
+  updated() {
+    useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
   },
   unmounted() {
     this.stopFetching()
+    useInterfaceStore().setForeignProfileBackground(null)
   },
   computed: {
     timeline() {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 95f02507b..e03e21403 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -636,6 +636,7 @@
     "navbar_column_stretch": "Stretch navbar to columns width",
     "always_show_post_button": "Always show floating New Post button",
     "hide_wallpaper": "Hide instance wallpaper",
+    "foreign_user_background": "Allow other user's profiles to override wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js
index 208dc548b..61743c426 100644
--- a/src/modules/default_config_state.js
+++ b/src/modules/default_config_state.js
@@ -140,6 +140,10 @@ export const INSTANCE_DEFAULT_CONFIG_DEFINITIONS = {
     description: 'Hide Instance-specific panel',
     default: false,
   },
+  allowForeignUserBackground: {
+    description: 'Allow other user\'s profiles to override wallpaper',
+    default: true,
+  },
   hideInstanceWallpaper: {
     description: 'Hide Instance default background',
     default: false,
@@ -631,7 +635,7 @@ export const LOCAL_DEFAULT_CONFIG_DEFINITIONS = {
   },
   imageCompression: {
     description: 'Image compression (WebP/JPEG)',
-    default: true,
+    default: false,
   },
   alwaysUseJpeg: {
     description: 'Compress images using JPEG only',
diff --git a/src/stores/emoji.js b/src/stores/emoji.js
index b7f8262a6..e28143300 100644
--- a/src/stores/emoji.js
+++ b/src/stores/emoji.js
@@ -1,6 +1,6 @@
+import { merge } from 'lodash'
 import { defineStore } from 'pinia'
 
-import { merge } from 'lodash'
 import { useInstanceStore } from 'src/stores/instance.js'
 
 import { ensureFinalFallback } from 'src/i18n/languages.js'
@@ -187,7 +187,10 @@ export const useEmojiStore = defineStore('emoji', {
       const listFunction = backendInteractor.listEmojiPacks
 
       this.adminPacksLocalLoading = true
-      this.adminPacksLocal = await this.getAdminPacks(useInstanceStore().server, listFunction)
+      this.adminPacksLocal = await this.getAdminPacks(
+        useInstanceStore().server,
+        listFunction,
+      )
       this.adminPacksLocalLoading = false
     },
 
@@ -197,8 +200,6 @@ export const useEmojiStore = defineStore('emoji', {
       if (!currentUser.rights.admin) return
 
       const pageSize = 25
-      const allPacks = {}
-
 
       return await listFunction({
         instance,
@@ -222,25 +223,22 @@ export const useEmojiStore = defineStore('emoji', {
               })
                 .then((data) => data.json())
                 .then((pageData) => {
-                if (pageData.error !== undefined) {
-                  return Promise.reject(pageData.error)
-                }
+                  if (pageData.error !== undefined) {
+                    return Promise.reject(pageData.error)
+                  }
 
                   return pageData.packs
-                })
+                }),
             )
           }
 
-          return Promise
-            .all(promises)
-            .then((results) => {
-              return merge({}, ...results)
-            })
+          return Promise.all(promises).then((results) => {
+            return merge({}, ...results)
+          })
         })
         .then((allPacks) => {
           // Sort by key
-          return Object
-            .keys(allPacks)
+          return Object.keys(allPacks)
             .sort()
             .reduce((acc, key) => {
               if (key.length === 0) return acc
diff --git a/src/stores/interface.js b/src/stores/interface.js
index 111700fbb..01ff07533 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -60,6 +60,7 @@ export const useInterfaceStore = defineStore('interface', {
     globalNotices: [],
     layoutHeight: 0,
     lastTimeline: null,
+    foreignProfileBackground: null,
   }),
   actions: {
     setTemporaryChanges({ confirm, revert }) {
@@ -96,6 +97,9 @@ export const useInterfaceStore = defineStore('interface', {
         console.error(`${error}`)
       }
     },
+    setForeignProfileBackground(url) {
+      this.foreignProfileBackground = url
+    },
     settingsSaved({ success, error }) {
       if (success) {
         if (this.noticeClearTimeout) {