diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index a1cba33bc..057e6aa5c 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -115,6 +115,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  display: flex;
 
   .emoji-picker-icon {
     position: absolute;
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index ee487b09c..9d8ecd173 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -54,7 +54,7 @@
       type="file"
       class="input image-cropper-img-input"
       :accept="mimes"
-    >
+    />
   </div>
 </template>
 
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 33a7c5ed0..8f0f7862a 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -1,18 +1,4 @@
 .profile-tab {
-  // overriding global for better look
-  div.profile-edit {
-    margin: 0;
-
-    h2 {
-      margin-left: 1rem;
-    }
-
-    .user-card {
-      padding: 1.2em;
-      overflow: hidden;
-    }
-  }
-
   .bio {
     margin: 0;
   }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 6d458c7c8..7be01d689 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -1,14 +1,12 @@
 <template>
   <div class="profile-tab">
-    <div class="setting-item profile-edit">
-      <h2>{{ $t('settings.account_profile_edit') }}</h2>
-      <UserCard
-        :user-id="user.id"
-        :editable="true"
-        :switcher="false"
-        rounded="top"
-      />
-    </div>
+    <UserCard
+      :user-id="user.id"
+      :editable="true"
+      :switcher="false"
+      rounded="top"
+      >
+    </UserCard>
     <div class="setting-item">
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index e9c79aff1..e80ee91de 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,5 +1,4 @@
 import merge from 'lodash/merge'
-import isEqual from 'lodash/isEqual'
 import unescape from 'lodash/unescape'
 
 import ColorInput from 'src/components/color_input/color_input.vue'
@@ -117,7 +116,6 @@ export default {
       newShowRole: user.show_role,
 
       newFields: user.fields?.map(field => ({ name: field.name, value: field.value })),
-
       editingFields: false,
     }
   },
@@ -125,21 +123,6 @@ export default {
     this.$store.dispatch('fetchUserRelationship', this.user.id)
   },
   computed: {
-    somethingToSave () {
-      if (this.newName !== this.user.name_unescaped) return true
-      if (this.newBio !== unescape(this.user.description)) return true
-      if (this.newAvatar !== null) return true
-      if (this.newBanner !== null) return true
-      if (this.newActorType !== this.user.actor_type) return true
-      if (this.newBirthday !== this.user.birthday) return true
-      if (this.newShowBirthday !== this.user.show_birthday) return true
-      if (this.newShowRole !== this.user.show_role) return true
-      if (!isEqual(
-        this.newFields,
-        this.user.fields?.map(field => ({ name: field.name, value: field.value }))
-      )) return true
-      return false
-    },
     groupActorAvailable () {
       return this.$store.state.instance.groupActorAvailable
     },
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index c948480ba..913589725 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -1,22 +1,15 @@
 .user-card {
   position: relative;
   z-index: 1;
-  overflow: hidden;
 
   // editing headers
   h4 {
     line-height: 2;
     display: flex;
-  }
+    padding: 0 1.0em;
 
-  h3 {
-    padding-left: 0.6em;
-    margin-bottom: 0;
-
-    .button-default {
-      font-size: 1rem;
-      line-height: 2;
-      padding: 0 0.6em;
+    span {
+      flex: 1;
     }
   }
 
@@ -75,6 +68,17 @@
     --_still-image-label-visibility: hidden;
   }
 
+  .panel-heading {
+    text-align: center;
+    box-shadow: none;
+    background: transparent;
+    backdrop-filter: none;
+    flex-direction: column;
+    align-items: stretch;
+    // create new stacking context
+    position: relative;
+  }
+
   .personal-marks {
     margin: 0.6em;
     padding: 0.6em;
@@ -153,19 +157,13 @@
     border-style: solid;
     border-color: var(--border);
   }
-
-  .bottom-buttons {
-    display: flex;
-    gap: 0.5em;
-  }
 }
 
 .user-info {
   position: relative;
+  margin: 0.6em;
+  margin-bottom: 0;
   text-align: left;
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
 
   .user-identity {
     position: relative;
@@ -173,6 +171,7 @@
     min-height: 6em;
     display: flex;
     align-items: flex-end;
+    margin-bottom: 1em;
     container: user-card / inline-size;
 
     > * {
@@ -363,6 +362,52 @@
     }
   }
 
+  .highlighter {
+    margin: 5em;
+    align-items: baseline;
+    line-height: 22px;
+    flex-wrap: wrap;
+
+    .following {
+      flex: 1 0 auto;
+      margin: 0;
+      margin-bottom: 0.25em;
+      text-align: left;
+    }
+
+    .highlighter {
+      flex: 0 1 auto;
+      display: flex;
+      flex-wrap: wrap;
+      margin-right: -0.5em;
+      align-self: start;
+
+      .userHighlightCl {
+        padding: 2px 10px;
+        flex: 1 0 auto;
+      }
+
+      .userHighlightSel {
+        padding-top: 0;
+        padding-bottom: 0;
+        flex: 1 0 auto;
+      }
+
+      .userHighlightText {
+        width: 70px;
+        flex: 1 0 auto;
+      }
+
+      .userHighlightCl,
+      .userHighlightText,
+      .userHighlightSel {
+        vertical-align: top;
+        margin-right: 0.5em;
+        margin-bottom: 0.25em;
+      }
+    }
+  }
+
   .user-interactions {
     position: relative;
     display: flex;
@@ -370,7 +415,7 @@
     gap: 0.6em;
 
     > * {
-      flex: 0 0 8em;
+      flex: 0 0 10%;
     }
 
     .popover-trigger-button, .moderation-tools-button {
@@ -431,7 +476,6 @@
 
 .user-profile-fields {
   margin: 0 0.5em;
-  padding: 0 0.5em;
   display: flex;
   flex-direction: column;
 
@@ -440,6 +484,8 @@
   img {
     object-fit: contain;
     vertical-align: middle;
+    max-width: 100%;
+    max-height: 400px;
   }
 
   .user-profile-field-add,
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index d913cf96e..4fe2905ec 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -3,7 +3,10 @@
     class="user-card"
     :class="classes"
   >
-    <div class="user-card-inner">
+    <div
+      :class="onClose ? '' : 'panel-heading -flexible-height'"
+      class="user-card-inner"
+    >
       <div class="user-info">
         <div class="user-identity">
           <div
@@ -153,8 +156,8 @@
                 <button
                   v-if="editable"
                   class="button-unstyled edit-button"
-                  :title="$t('settings.toggle_edit')"
                   @click="editingName = !editingName"
+                  :title="$t('settings.toggle_edit')"
                 >
                   <FAIcon
                     class="icon"
@@ -293,6 +296,34 @@
               :user="user"
             />
           </template>
+          <button
+            v-if="editable"
+            :disabled="somethingToSave"
+            class="btn button-default reset-profile-button"
+            @click="resetState"
+          >
+            {{ $t('settings.reset') }}
+            <FAIcon
+              fixed-width
+              class="icon"
+              icon="clock-rotate-left"
+              :title="$t('user_card.edit_profile')"
+            />
+          </button>
+          <button
+            v-if="editable"
+            :disabled="somethingToSave"
+            class="btn button-default save-profile-button"
+            @click="updateProfile"
+          >
+            {{ $t('settings.save') }}
+            <FAIcon
+              fixed-width
+              class="icon"
+              icon="save"
+              :title="$t('user_card.edit_profile')"
+            />
+          </button>
         </div>
         <div
           v-if="!loggedIn && user.is_local"
@@ -302,6 +333,41 @@
         </div>
       </div>
     </div>
+    <template v-if="editable">
+      <h4>{{ $t('settings.user_preferences') }}</h4>
+      <p
+        v-if="role === 'admin' || role === 'moderator'"
+        class="user-card-setting"
+      >
+        <Checkbox v-model="newShowRole">
+          <template v-if="role === 'admin'">
+            {{ $t('settings.show_admin_badge') }}
+          </template>
+          <template v-if="role === 'moderator'">
+            {{ $t('settings.show_moderator_badge') }}
+          </template>
+        </Checkbox>
+      </p>
+      <p class="user-card-setting">
+        <label>
+          {{ $t('settings.actor_type') }}
+          <Select v-model="newActorType">
+            <option
+              v-for="option in availableActorTypes"
+              :key="option"
+              :value="option"
+            >
+              {{ $t('settings.actor_type_' + (option === 'Person' ? 'person_proper' : option)) }}
+            </option>
+          </Select>
+          <div v-if="groupActorAvailable">
+            <small>
+              {{ $t('settings.actor_type_description') }}
+            </small>
+          </div>
+        </label>
+      </p>
+    </template>
     <div
       v-if="!editable && loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
       class="personal-marks"
@@ -347,11 +413,10 @@
         />
       </div>
     </div>
-    <h3 v-if="editable">
+    <h4 v-if="editable">
       <span>
         {{ $t('settings.bio') }}
       </span>
-      {{ ' ' }}
       <button
         class="button-default"
         @click="editingBio = !editingBio"
@@ -362,7 +427,7 @@
           icon="pencil"
         />
       </button>
-    </h3>
+    </h4>
     <template v-if="!editable || !editingBio">
       <RichContent
         v-if="!hideBio"
@@ -391,11 +456,10 @@
         </template>
       </EmojiInput>
     </template>
-    <h3 v-if="editable">
+    <h4 v-if="editable">
       <span>
         {{ $t('settings.profile_fields.label') }}
       </span>
-      {{ ' ' }}
       <button
         class="button-default"
         @click="editingFields = !editingFields"
@@ -406,7 +470,7 @@
           icon="pencil"
         />
       </button>
-    </h3>
+    </h4>
     <template v-if="!editable || !editingFields">
       <div
         v-if="!hideBio && user.fields_html && user.fields_html.length > 0"
@@ -500,10 +564,7 @@
           class="user-profile-field-add add-field button-default -hover-highlight"
           @click="addField"
         >
-          <FAIcon
-            icon="plus"
-            class="icon"
-          />
+          <FAIcon icon="plus" class="icon" />
           <span class="label">
             {{ $t("settings.profile_fields.add_field") }}
           </span>
@@ -511,8 +572,8 @@
       </div>
     </template>
     <div
-      v-if="!hideBio"
       class="user-extras"
+      v-if="!hideBio"
     >
       <span
         v-if="!editable && !mergedConfig.hideUserStats"
@@ -586,71 +647,6 @@
         </div>
       </template>
     </div>
-    <template v-if="editable">
-      <h3>{{ $t('settings.profile_other') }}</h3>
-      <p
-        v-if="role === 'admin' || role === 'moderator'"
-        class="user-card-setting"
-      >
-        <Checkbox v-model="newShowRole">
-          <template v-if="role === 'admin'">
-            {{ $t('settings.show_admin_badge') }}
-          </template>
-          <template v-if="role === 'moderator'">
-            {{ $t('settings.show_moderator_badge') }}
-          </template>
-        </Checkbox>
-      </p>
-      <p class="user-card-setting">
-        <label>
-          {{ $t('settings.actor_type') }}
-          <Select v-model="newActorType">
-            <option
-              v-for="option in availableActorTypes"
-              :key="option"
-              :value="option"
-            >
-              {{ $t('settings.actor_type_' + (option === 'Person' ? 'person_proper' : option)) }}
-            </option>
-          </Select>
-          <div v-if="groupActorAvailable">
-            <small>
-              {{ $t('settings.actor_type_description') }}
-            </small>
-          </div>
-        </label>
-      </p>
-      <div class="bottom-buttons">
-        <button
-          v-if="editable"
-          :disabled="!somethingToSave"
-          class="btn button-default reset-profile-button"
-          @click="resetState"
-        >
-          {{ $t('settings.reset') }}
-          <FAIcon
-            fixed-width
-            class="icon"
-            icon="clock-rotate-left"
-            :title="$t('user_card.edit_profile')"
-          />
-        </button>
-        <button
-          v-if="editable"
-          :disabled="!somethingToSave"
-          class="btn button-default save-profile-button"
-          @click="updateProfile"
-        >
-          {{ $t('settings.save') }}
-          <FAIcon
-            fixed-width
-            class="icon"
-            icon="save"
-            :title="$t('user_card.edit_profile')"
-          />
-        </button>
-      </div>
-    </template>
     <teleport to="#modal">
       <UserTimedFilterModal
         ref="timedMuteDialog"
@@ -678,12 +674,12 @@
           id="pick-image"
           class="button-default btn"
           type="button"
-          @click="() => $refs.cropper.pickImage()"
+          @click="() => this.$refs.cropper.pickImage()"
         >
           {{ $t('settings.upload_picture') }}
         </button>
         <p class="visibility-notice">
-          {{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' ) }}
+          {{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' )}}
         </p>
         <template #footer>
           <button
@@ -691,26 +687,26 @@
             type="button"
             @click="editImage = false"
           >
-            {{ $t('image_cropper.cancel') }}
+            {{ this.$t('image_cropper.cancel') }}
           </button>
           <button
             :title="editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner')"
             class="button-default btn reset-button"
             @click="resetImage"
           >
-            {{ editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner' ) }}
+            {{ editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner' )}}
           </button>
           <button
             class="button-default btn"
             type="button"
-            @click="$refs.cropper.submit(false)"
+            @click="this.$refs.cropper.submit(false)"
           >
             {{ $t('image_cropper.save_without_cropping') }}
           </button>
           <button
             class="button-default btn"
             type="button"
-            @click="$refs.cropper.submit(true)"
+            @click="this.$refs.cropper.submit(true)"
           >
             {{ $t('image_cropper.save') }}
           </button>
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 783770dda..7ac4d429c 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -29,8 +29,6 @@
   }
 
   .user-info {
-    margin: 0.6em;
-
     .Avatar {
       width: 5em;
       width: calc(min(5em, 20cqw));
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index 10850ef70..9bff355e9 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -27,11 +27,7 @@
 /* popover styles load on-demand, so we need to override */
 /* stylelint-disable block-no-empty */
 .user-popover {
-  margin: 0;
-
-  .user-info {
-    margin: 1.2em;
-  }
+  margin-bottom: 0.6em;
 
   .user-identity {
     aspect-ratio: unset;
@@ -44,6 +40,7 @@
 
   &.popover {
     overflow: hidden;
+    padding: 0.6em;
   }
 }
 /* stylelint-enable block-no-empty */
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index e759c6752..749b828b8 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -129,6 +129,7 @@
 <style lang="scss">
 .user-profile {
   flex: 2;
+  flex-basis: 500px;
 
   // No sticky header on user profile
   --currentPanelStack: 0;
@@ -139,10 +140,6 @@
     align-items: center;
     padding: 2em;
   }
-
-  .user-info {
-    margin: 1.2em;
-  }
 }
 
 .user-profile-placeholder {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c38d18c36..f284cbedb 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -396,7 +396,7 @@
     "save": "Save changes",
     "reset": "Reset changes",
     "security": "Security",
-    "toggle_edit": "Edit",
+    "toggle_edit": "Toggle edit",
     "change_banner": "Change banner",
     "change_avatar": "Change avatar",
     "setting_changed": "Setting is different from default",
@@ -493,7 +493,7 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
-    "profile_other": "Other",
+    "user_preferences": "Profile settings",
     "email_language": "Language for receiving emails from the server",
     "block_export": "Block export",
     "block_export_button": "Export your blocks to a csv file",
@@ -664,7 +664,6 @@
       "label": "Birthday",
       "show_birthday": "Show my birthday"
     },
-    "account_profile_edit": "Edit Profile",
     "account_privacy": "Privacy",
     "use_contain_fit": "Don't crop the attachment in thumbnails",
     "name": "Name",