diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 8a3a5fd33..fcf03dd97 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -13,8 +13,8 @@
           <button
             class="button button-default"
             type="button"
-            @click="reloadEmoji"
             :title="$t('admin_dash.emoji.reload')"
+            @click="reloadEmoji"
           >
             <FAIcon icon="arrows-rotate" />
             {{ $t('admin_dash.emoji.reload_short') }}
@@ -62,8 +62,8 @@
             <template #trigger>
               <button
                 class="button button-default emoji-panel-additional-actions"
-                @click="$refs.additionalRemotePopover.showPopover"
                 :title="$t('admin_dash.emoji.import_pack')"
+                @click="$refs.additionalRemotePopover.showPopover"
               >
                 <FAIcon icon="folder-open" />
                 {{ $t('admin_dash.emoji.import_pack_short') }}
@@ -372,8 +372,9 @@
           </EmojiEditingPopover>
           <template v-if="!pack">
             <div
+              v-for="(_, i) in new Array(20)"
+              :key="i"
               class="placeholder"
-              v-for="_ in new Array(20)"
             />
           </template>
 
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 3dd4acba1..750a70165 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -42,8 +42,8 @@
         <ul class="cards-list">
           <li
             v-for="frontend in frontends"
-            class="frontend-card"
             :key="frontend.name"
+            class="frontend-card"
           >
             <h5>{{ frontend.name }}</h5>
             {{ ' ' }}
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index b8a478df5..400764079 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -163,7 +163,7 @@
         <li>
           <BooleanSetting
             :path="[':pleroma','Pleroma.Web.Metadata', ':unfurl_nsfw']"
-            />
+          />
         </li>
       </ul>
     </div>
diff --git a/src/components/settings_modal/admin_tabs/links_tab.vue b/src/components/settings_modal/admin_tabs/links_tab.vue
index e72ce1ae7..9c661b209 100644
--- a/src/components/settings_modal/admin_tabs/links_tab.vue
+++ b/src/components/settings_modal/admin_tabs/links_tab.vue
@@ -70,15 +70,15 @@
             :model-value="relIsPresent"
             @update:model-value="checkRel"
           >
-          <i18n-t
-            keypath="admin_dash.temp_overrides.:pleroma.Pleroma_DOT_Formatter.:attribute_toggle.label"
-            tag="span"
-            scope="global"
-          >
-            <template #attr>
-              <code>rel</code>
-            </template>
-          </i18n-t>
+            <i18n-t
+              keypath="admin_dash.temp_overrides.:pleroma.Pleroma_DOT_Formatter.:attribute_toggle.label"
+              tag="span"
+              scope="global"
+            >
+              <template #attr>
+                <code>rel</code>
+              </template>
+            </i18n-t>
           </Checkbox>
           <div class="setting-list suboptions weird-suboptions">
             <StringSetting
@@ -141,6 +141,6 @@
   </div>
 </template>
 
-<style lang="scss" src="./links_tab.scss"></style>
-
 <script src="./links_tab.js"></script>
+
+<style lang="scss" src="./links_tab.scss"></style>
diff --git a/src/components/settings_modal/admin_tabs/mailer_tab.vue b/src/components/settings_modal/admin_tabs/mailer_tab.vue
index df2456b4d..3830a51f9 100644
--- a/src/components/settings_modal/admin_tabs/mailer_tab.vue
+++ b/src/components/settings_modal/admin_tabs/mailer_tab.vue
@@ -15,7 +15,6 @@
             <h4>{{ $t('admin_dash.mailer.auth') }}</h4>
             <ul class="setting-list suboptions">
               <li v-if="adapterHasKey(':api_key')">
-
                 <!-- authentication info -->
                 <StringSetting
                   :path="[':pleroma','Pleroma.Emails.Mailer',':api_key']"
@@ -38,7 +37,8 @@
                 />
               </li>
               <li v-if="adapterHasKey(':username')">
-                <StringSetting :path="[':pleroma','Pleroma.Emails.Mailer',':username']"
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':username']"
                   :subgroup="adapter"
                 />
               </li>
@@ -137,7 +137,7 @@
                 <IntegerSetting
                   :path="[':pleroma','Pleroma.Emails.Mailer',':retries']"
                   :subgroup="adapter"
-                  />
+                />
               </li>
             </ul>
           </li>
diff --git a/src/components/settings_modal/admin_tabs/media_proxy_tab.vue b/src/components/settings_modal/admin_tabs/media_proxy_tab.vue
index b36269d8b..3aa22d56f 100644
--- a/src/components/settings_modal/admin_tabs/media_proxy_tab.vue
+++ b/src/components/settings_modal/admin_tabs/media_proxy_tab.vue
@@ -65,13 +65,13 @@
                     <StringSetting
                       :path="[':pleroma', 'Pleroma.Web.MediaProxy.Invalidation.Script', ':script_path']"
                       parent-path=":pleroma.:media_proxy.:invalidation.:enabled"
-                                   />
+                    />
                   </li>
                   <li>
                     <StringSetting
                       :path="[':pleroma', 'Pleroma.Web.MediaProxy.Invalidation.Script', ':url_format']"
                       parent-path=":pleroma.:media_proxy.:invalidation.:enabled"
-                                   />
+                    />
                   </li>
                 </template>
               </ul>
diff --git a/src/components/settings_modal/admin_tabs/registrations_tab.vue b/src/components/settings_modal/admin_tabs/registrations_tab.vue
index 5ccd68ea9..80b16cc69 100644
--- a/src/components/settings_modal/admin_tabs/registrations_tab.vue
+++ b/src/components/settings_modal/admin_tabs/registrations_tab.vue
@@ -33,7 +33,7 @@
           <BooleanSetting path=":pleroma.:instance.:account_approval_required" />
         </li>
         <li>
-        <h4>{{ $t('admin_dash.instance.captcha_header') }}</h4>
+          <h4>{{ $t('admin_dash.instance.captcha_header') }}</h4>
           <ul class="setting-list">
             <li>
               <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']" />
diff --git a/src/components/settings_modal/admin_tabs/uploads_tab.vue b/src/components/settings_modal/admin_tabs/uploads_tab.vue
index 1c3c9349f..74cbe7ce7 100644
--- a/src/components/settings_modal/admin_tabs/uploads_tab.vue
+++ b/src/components/settings_modal/admin_tabs/uploads_tab.vue
@@ -8,7 +8,7 @@
             :path="[':pleroma','Pleroma.Upload',':uploader']"
             :options="uploaders"
           />
-          <h4>{{ $t('admin_dash.uploads.uploader_settings')}}</h4>
+          <h4>{{ $t('admin_dash.uploads.uploader_settings') }}</h4>
           <ul class="setting-list suboptions">
             <template v-if="uploader === 'Pleroma.Uploaders.Local'">
               <li>
diff --git a/src/components/settings_modal/helpers/color_setting.vue b/src/components/settings_modal/helpers/color_setting.vue
index ffa5d77c8..de88d5bc4 100644
--- a/src/components/settings_modal/helpers/color_setting.vue
+++ b/src/components/settings_modal/helpers/color_setting.vue
@@ -44,6 +44,7 @@
   </label>
 </template>
 
+<script src="./color_setting.js"></script>
 <style lang="scss">
 .ColorSetting {
   .color-setting-input {
@@ -51,4 +52,3 @@
   }
 }
 </style>
-<script src="./color_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
index 3c21d6d0a..5d80928e8 100644
--- a/src/components/settings_modal/helpers/draft_buttons.vue
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -2,8 +2,8 @@
 <!-- TODO make it reusable -->
 <template>
   <span
-    class="DraftButtons"
     v-if="$parent.isDirty || $parent.canHardReset"
+    class="DraftButtons"
   >
     <Popover
       v-if="$parent.isDirty"
diff --git a/src/components/settings_modal/helpers/list_setting.vue b/src/components/settings_modal/helpers/list_setting.vue
index b34b18431..66581fc56 100644
--- a/src/components/settings_modal/helpers/list_setting.vue
+++ b/src/components/settings_modal/helpers/list_setting.vue
@@ -23,7 +23,10 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <ul class="setting-list">
-      <li v-for="item in builtinEntries">
+      <li
+        v-for="(item, i) in builtinEntries"
+        :key="i"
+      >
         <Checkbox
           :disabled="shouldBeDisabled"
           :model-value="optionPresent(item.value)"
@@ -32,7 +35,10 @@
           {{ item.label }}
         </Checkbox>
       </li>
-      <li v-for="(item, index) in extraEntries">
+      <li
+        v-for="(item, index) in extraEntries"
+        :key="index"
+      >
         <div class="btn-group">
           <input
             class="input string-input"
@@ -51,10 +57,10 @@
       <li v-if="showNew">
         <div class="btn-group">
           <input
+            v-model="newValue"
             class="input string-input"
             :class="{ disabled: shouldBeDisabled }"
             :disabled="shouldBeDisabled"
-            v-model="newValue"
           >
           <button
             class="button-default"
@@ -74,6 +80,7 @@
   </div>
 </template>
 
+<script src="./list_setting.js"></script>
 <style lang="scss">
 .ListSetting {
   .btn-group {
@@ -81,4 +88,3 @@
   }
 }
 </style>
-<script src="./list_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/list_tuple_setting.vue b/src/components/settings_modal/helpers/list_tuple_setting.vue
index 67430bcfa..eb2f6e16e 100644
--- a/src/components/settings_modal/helpers/list_tuple_setting.vue
+++ b/src/components/settings_modal/helpers/list_tuple_setting.vue
@@ -23,7 +23,10 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <ul class="setting-list">
-      <li v-for="(item, index) in visibleState">
+      <li
+        v-for="(item, index) in visibleState"
+        :key="index"
+      >
         <div class="btn-group">
           <input
             class="input string-input"
@@ -48,18 +51,18 @@
       <li>
         <div class="btn-group">
           <input
+            v-model="newValue[0]"
             class="input string-input"
             :class="{ disabled: shouldBeDisabled }"
             :disabled="shouldBeDisabled"
             :placeholder="backendDescriptionSuggestions[0][0]"
-            v-model="newValue[0]"
           >
           <input
+            v-model="newValue[1]"
             class="input string-input"
             :class="{ disabled: shouldBeDisabled }"
             :disabled="shouldBeDisabled"
             :placeholder="backendDescriptionSuggestions[0][1]"
-            v-model="newValue[1]"
           >
           <button
             class="button-default"
@@ -79,6 +82,7 @@
   </div>
 </template>
 
+<script src="./list_tuple_setting.js"></script>
 <style lang="scss">
 .ListTupleSetting {
   .btn-group {
@@ -107,4 +111,3 @@
   }
 }
 </style>
-<script src="./list_tuple_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/map_setting.vue b/src/components/settings_modal/helpers/map_setting.vue
index 01b6cbc0f..907c0b354 100644
--- a/src/components/settings_modal/helpers/map_setting.vue
+++ b/src/components/settings_modal/helpers/map_setting.vue
@@ -23,7 +23,10 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <ul class="setting-list">
-      <li v-for="item in displayState">
+      <li
+        v-for="(item, i) in displayState"
+        :key="i"
+      >
         <div class="btn-group">
           <input
             class="input string-input"
@@ -48,18 +51,18 @@
       <li v-if="allowNew">
         <div class="btn-group">
           <input
+            v-model="newValue[0]"
             class="input string-input"
             :class="{ disabled: shouldBeDisabled }"
             :disabled="shouldBeDisabled"
             :placeholder="backendDescriptionSuggestions[0][0]"
-            v-model="newValue[0]"
           >
           <input
+            v-model="newValue[1]"
             class="input string-input"
             :class="{ disabled: shouldBeDisabled }"
             :disabled="shouldBeDisabled"
             :placeholder="backendDescriptionSuggestions[0][1]"
-            v-model="newValue[1]"
           >
           <button
             class="button-default"
@@ -79,6 +82,7 @@
   </div>
 </template>
 
+<script src="./map_setting.js"></script>
 <style lang="scss">
 .ListSetting {
   .btn-group {
@@ -106,4 +110,3 @@
   }
 }
 </style>
-<script src="./map_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
index b076569cd..ab43a2c1a 100644
--- a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
+++ b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
@@ -23,7 +23,10 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <ul class="setting-list">
-      <li v-for="(item, index) in visibleState">
+      <li
+        v-for="(item, index) in visibleState"
+        :key="index"
+      >
         <div>
           <dl>
             <dt><code>purpose</code></dt>
@@ -90,6 +93,7 @@
   </div>
 </template>
 
+<script src="./pwa_manifest_icons_setting.js"></script>
 <style lang="scss">
 .PWAManifestIconsSetting {
   display: inline-block;
@@ -132,4 +136,3 @@
   }
 }
 </style>
-<script src="./pwa_manifest_icons_setting.js"></script>
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index d9303ce7b..815a6d4c5 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -161,13 +161,16 @@
             <div class="fun-monitor-neck button-default" />
             <div class="fun-monitor-display-bezel button-default">
               <div class="fun-monitor-display-screen input">
-              <img
-                v-if="backgroundPreview || user.background_image || instanceWallpaper"
-                class="fun-monitor-display-screen-image"
-                :src="backgroundPreview || user.background_image || instanceWallpaper"
-              />
-              <div v-else class="wallpaper" />
-              <div class="fun-monitor-display-screen-overlay input" />
+                <img
+                  v-if="backgroundPreview || user.background_image || instanceWallpaper"
+                  class="fun-monitor-display-screen-image"
+                  :src="backgroundPreview || user.background_image || instanceWallpaper"
+                >
+                <div
+                  v-else
+                  class="wallpaper"
+                />
+                <div class="fun-monitor-display-screen-overlay input" />
                 <div
                   v-if="backgroundUploading"
                   class="fun-monitor-display-uploading"
diff --git a/src/components/settings_modal/tabs/uploads_tab.vue b/src/components/settings_modal/tabs/uploads_tab.vue
index 70b768023..b11dc1381 100644
--- a/src/components/settings_modal/tabs/uploads_tab.vue
+++ b/src/components/settings_modal/tabs/uploads_tab.vue
@@ -7,7 +7,7 @@
           <ChoiceSetting
             :path="[':pleroma','Pleroma.Upload']"
             :option-label-map="adaptersLabels"
-           />
+          />
         </li>
         <h4>{{ $t('admin_dash.mailer.auth') }}</h4>
         <li>