diff --git a/src/App.scss b/src/App.scss
index d9d8101b7..c8bb61361 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -381,7 +381,6 @@ nav {
   font-size: 1em;
   font-family: sans-serif;
   font-family: var(--font);
-  height: 2em;
 
   &.-transparent {
     backdrop-filter: blur(0.125em) contrast(60%);
@@ -705,13 +704,8 @@ option {
   position: relative;
   display: inline-flex;
   vertical-align: middle;
-  min-height: 2em;
   align-items: end;
 
-  .input {
-    height: 2em;
-  }
-
   > *,
   > * .button-default {
     --_roundness-left: 0;
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 1f7d419e9..a547b98a5 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -13,8 +13,8 @@
       </label>
       <span class="setting-control btn-group">
         <Select
-          :name="uniqueId+index"
           :id="uniqueId+index"
+          :name="uniqueId+index"
           class="language-select"
           :model-value="controlledLanguage[index]"
           @update:model-value="val => setLanguageAt(index, val)"
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 63def257d..1ad84113a 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -44,6 +44,7 @@
             path=":pleroma.:instance.:instance_thumbnail"
           />
         </li>
+        <h4>{{ $t('admin_dash.instance.pwa.manifest') }}</H4>
         <li>
           <PWAManifestIconsSetting path=":pleroma.:manifest.:icons" />
         </li>
diff --git a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js
index 3e6ff23fa..9986f6f39 100644
--- a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js
+++ b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js
@@ -1,12 +1,69 @@
 import { clone } from 'lodash'
+import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
+
 import Setting from './setting.js'
+import Select from 'src/components/select/select.vue'
+import Attachment from 'src/components/attachment/attachment.vue'
+import MediaUpload from 'src/components/media_upload/media_upload.vue'
 
 export default {
   ...Setting,
+  components: {
+    ...Setting.components,
+    Select,
+    Attachment,
+    MediaUpload
+  },
+  computed: {
+    ...Setting.computed,
+    purposeOptions () {
+      return ['any','monochrome','maskable'].map(value => ({
+        value,
+        key: value,
+        label: this.$t('admin_dash.instance.pwa.icon.' + value)
+      }))
+    }
+  },
   methods: {
     ...Setting.methods,
-    optionPresent (option) {
-      return this.valueSet.has(option)
+    attachment (e) {
+      const path = e[':src']
+      if (!path) {
+        return {
+          mimetype: '',
+          url: ''
+        }
+      }
+      const url = path.includes('://') ? path : this.$store.state.instance.server + path
+
+      return {
+        mimetype: fileTypeExt(url),
+        url
+      }
+    },
+    setMediaFile ({ event, index }) {
+      this.update({
+        event: {
+          target: {
+            value: event.url
+          },
+        },
+        index,
+        eventType: 'edit',
+        field: ':src'
+      })
+    },
+    setPurpose ({ event, index }) {
+      this.update({
+        event: {
+          target: {
+            value: event
+          },
+        },
+        index,
+        eventType: 'edit',
+        field: ':purpose'
+      })
     },
     getValue ({ event, field, index, eventType }) {
       switch (eventType) {
@@ -27,7 +84,6 @@ export default {
           const post = this.visibleState.slice(index + 1)
           const item = clone(this.visibleState[index])
           const string = event.target.value
-          console.log(item)
 
           if (!string)  {
             delete item[field]
@@ -35,8 +91,6 @@ export default {
             item[field] = string
           }
 
-          console.log(item)
-
           return [...pre, item, ...post]
         }
       }
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 c98b582f9..d75eb44b0 100644
--- a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
+++ b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
@@ -7,6 +7,12 @@
       class="pwa-label setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -22,106 +28,130 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
-    <ul class="setting-list setting-control">
-      <li
-        v-for="(item, index) in visibleState"
-        :key="index"
-      >
-        <div class="setting-item">
-          <dl>
-            <dt><code>purpose</code></dt>
-            <dd>
-              <input
-                class="input string-input"
+    <div class="setting-control">
+      <ul class="item-list">
+        <li
+          v-if="visibleState.length === 0"
+          class="no_items"
+        >
+          {{ $t('admin_dash.instance.pwa.no_icons') }}
+          <button
+            v-if="visibleState.length === 0"
+            class="button-default add-button"
+            @click="e => update({ eventType: 'add' })"
+          >
+            <FAIcon icon="plus" />
+          </button>
+        </li>
+        <li
+          v-for="(item, index) in visibleState"
+          :key="index"
+        >
+          <div class="icon-element">
+            <div class="src-field">
+              <Attachment
+                class="src-attachment"
+                :compact="compact"
+                :attachment="attachment(item)"
+                size="small"
+                hide-description
+              />
+              <div class="src-url">
+                <label for="path">{{ $t('settings.url') }}</label>
+                <input
+                  :id="path"
+                  class="input string-input"
+                  :disabled="shouldBeDisabled"
+                  :value="item[':src']"
+                  @change="event => update({ event, index, eventType: 'edit', field: ':src' })"
+                >
+              </div>
+              <MediaUpload
+                ref="mediaUpload"
+                class="src-upload media-upload-icon"
                 :class="{ disabled: shouldBeDisabled }"
-                :value="item[':purpose']"
-                @change="e => update({ event: e, index, eventType: 'edit', field: ':purpose' })"
+                normal-button
+                :accept-types="acceptTypes"
+                @uploaded="event => setMediaFile({ event, index })"
+              />
+            </div>
+            <dl>
+              <dt>{{ $t('admin_dash.instance.pwa.icon.purpose') }}</dt>
+              <dd>
+                <Select
+                  :class="{ disabled: shouldBeDisabled }"
+                  :disabled="shouldBeDisabled"
+                  :model-value="item[':purpose']"
+                  @update:model-value="event => setPurpose({ event, index })"
+                >
+                  <option
+                    v-for="(purpose, index) in purposeOptions"
+                    :key="index"
+                    :value="purpose.value"
+                  >
+                    {{ purpose.label }}
+                  </option>
+                </Select>
+              </dd>
+              <dt><code>sizes</code>{{ $t('admin_dash.instance.pwa.optional') }}</dt>
+              <dd>
+                <input
+                  class="input string-input"
+                  :class="{ disabled: shouldBeDisabled }"
+                  :value="item[':sizes']"
+                  @change="e => update({ event: e, index, eventType: 'edit', field: ':sizes' })"
+                >
+              </dd>
+              <dt><code>type</code>{{ $t('admin_dash.instance.pwa.optional') }}</dt>
+              <dd>
+                <input
+                  class="input string-input"
+                  :class="{ disabled: shouldBeDisabled }"
+                  :value="item[':type']"
+                  @change="e => update({ event: e, index, eventType: 'edit', field: ':type' })"
+                >
+              </dd>
+            </dl>
+            <div class="buttons">
+              <button
+                v-if="index === visibleState.length - 1"
+                class="button-default add-button"
+                @click="e => update({ eventType: 'add' })"
               >
-            </dd>
-            <dt><code>sizes</code></dt>
-            <dd>
-              <input
-                class="input string-input"
-                :class="{ disabled: shouldBeDisabled }"
-                :value="item[':sizes']"
-                @change="e => update({ event: e, index, eventType: 'edit', field: ':sizes' })"
+                <FAIcon icon="plus" />
+              </button>
+              <button
+                class="button-default delete-button"
+                @click="e => update({ index, eventType: 'remove' })"
               >
-            </dd>
-            <dt><code>src</code></dt>
-            <dd>
-              <input
-                class="input string-input"
-                :class="{ disabled: shouldBeDisabled }"
-                :value="item[':src']"
-                @change="e => update({ event: e, index, eventType: 'edit', field: ':src' })"
-              >
-            </dd>
-            <dt><code>type</code></dt>
-            <dd>
-              <input
-                class="input string-input"
-                :class="{ disabled: shouldBeDisabled }"
-                :value="item[':type']"
-                @change="e => update({ event: e, index, eventType: 'edit', field: ':type' })"
-              >
-            </dd>
-          </dl>
-          <div class="buttons">
-            <button
-              v-if="index === visibleState.length - 1"
-              class="button-default add-button"
-              @click="e => update({ eventType: 'add' })"
-            >
-              <FAIcon icon="plus" />
-            </button>
-            <button
-              class="button-default delete-button"
-              @click="e => update({ index, eventType: 'remove' })"
-            >
-              <FAIcon icon="times" />
-            </button>
+                <FAIcon icon="times" />
+              </button>
+            </div>
           </div>
-        </div>
-      </li>
-    </ul>
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+        </li>
+      </ul>
+    </div>
     <DraftButtons />
   </div>
 </template>
 
 <script src="./pwa_manifest_icons_setting.js"></script>
 <style lang="scss">
-.PWAManifestIconsSetting {
+div.PWAManifestIconsSetting {
   &.setting-item {
     display: grid;
     grid-template-areas:
-      "label control"
-      "desc control"
-      ". draft";
+      "label"
+      "desc"
+      "control"
+      "draft";
     grid-template-rows: 2em auto 1fr;
+    grid-template-columns: 1fr;
   }
 
   .pwa-label.setting-label {
     align-self: end;
-
-  }
-
-  .setting-description {
-    text-align: right;
-    align-self: start;
-  }
-
-  .setting-list {
-    display: grid;
-    gap: 0.5em;
-  }
-
-  .setting-item {
-    display: inline-block;
+    text-align: left;
   }
 
   .buttons {
@@ -135,16 +165,22 @@
     }
   }
 
+  ul {
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 12em);
+    grid-gap: 2em;
+  }
+
   dl {
-    display: inline-grid;
-    grid-template-columns: auto auto;
-    gap: 0.5em;
+    display: grid;
+    grid-template-columns: 1fr;
+    margin-top: 0.5em;
+    gap: 0.25em;
     align-items: baseline;
 
     dt {
-      display: inline;
       font-weight: 800;
-      text-align: right;
 
       &::after {
         content: ':'
@@ -152,9 +188,38 @@
     }
 
     dd {
-      display: inline;
       margin: 0
     }
   }
+
+  .src-field {
+    display: grid;
+    grid-template-columns: auto;
+    justify-items: center;
+    gap: 0.5em;
+
+    .src-attachment {
+      width: 10em;
+      height: 10em;
+      display: block;
+      margin-bottom: 0.5em;
+    }
+
+    .src-upload {
+      display: block;
+      width: 100%;
+    }
+
+    .src-url {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25em;
+      width: 100%;
+
+      label {
+        display: block;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/settings_modal/helpers/rate_setting.vue b/src/components/settings_modal/helpers/rate_setting.vue
index 6849ee2c1..f6216223c 100644
--- a/src/components/settings_modal/helpers/rate_setting.vue
+++ b/src/components/settings_modal/helpers/rate_setting.vue
@@ -87,13 +87,13 @@
       </table>
       <Checkbox
         :model-value="isSeparate"
-        @update:model-value="event => update({ event: event ? 'join' : 'split',  eventType: 'toggleMode' })"
+        @update:model-value="event => update({ event: event ? 'join' : 'split', eventType: 'toggleMode' })"
       >
         {{ $t('admin_dash.rate_limit.separate') }}
       </Checkbox>
     </div>
-  <DraftButtons />
-</div>
+    <DraftButtons />
+  </div>
 </template>
 
 <script src="./rate_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index 4ed6227a1..cf68eaa14 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -161,7 +161,6 @@ export default {
       }
     },
     backendDescriptionDescription () {
-      console.log('LOL', this.description)
       if (this.description) return this.description
       if (this.realSource !== 'admin') return ''
       if (this.hideDescription) return null
diff --git a/src/components/settings_modal/helpers/tuple_setting.vue b/src/components/settings_modal/helpers/tuple_setting.vue
index 09e4aa9dd..e39e23344 100644
--- a/src/components/settings_modal/helpers/tuple_setting.vue
+++ b/src/components/settings_modal/helpers/tuple_setting.vue
@@ -1,7 +1,7 @@
 <template>
   <span
-    class="setting-item"
     v-if="matchesExpertLevel"
+    class="setting-item"
   >
     <label
       v-if="!hideLabel"
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index a26937bd7..53add37fa 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -208,10 +208,11 @@
       }
     }
 
+    /* stylelint-disable no-descending-specificity */
     .setting-item {
       grid-template-columns: 1fr min-content;
       column-gap: 0.5em;
-      padding: 1em 1em;
+      padding: 1em;
       align-items: center;
 
       .setting-label {
@@ -229,6 +230,8 @@
       }
     }
 
+
+
     .setting-list:not(.suboptions),
     .option-list {
       &.two-column {
diff --git a/src/components/settings_modal/tabs/composing_tab.vue b/src/components/settings_modal/tabs/composing_tab.vue
index c02a15421..f71d64600 100644
--- a/src/components/settings_modal/tabs/composing_tab.vue
+++ b/src/components/settings_modal/tabs/composing_tab.vue
@@ -4,7 +4,10 @@
       <h3>{{ $t('settings.general') }}</h3>
       <ul class="setting-list">
         <li>
-          <label class="setting-item " for="default-vis">
+          <label
+            class="setting-item "
+            for="default-vis"
+          >
             <span class="setting-label">
               <ProfileSettingIndicator :is-profile="true" />
               {{ $t('settings.default_vis') }}
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index a51b0e4b7..ff7498656 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -54,8 +54,8 @@
             </span>
             <Select
               id="onBlockDefaultActionLv1"
-              class="setting-control"
               v-model="onBlockDefaultActionLv1"
+              class="setting-control"
             >
               <option
                 v-for="option in muteBlockLv1Options"
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 285fe1b68..ceb073a48 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -142,7 +142,9 @@
         class="setting-list"
       >
         <li class="select-multiple">
-          <h4 class="label">{{ $t('settings.confirm_dialogs') }}</h4>
+          <h4 class="label">
+            {{ $t('settings.confirm_dialogs') }}
+          </h4>
           <ul class="option-list">
             <li>
               <BooleanSetting path="modalOnRepeat">
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index ea859b18a..d08f07b68 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -40,8 +40,8 @@
         <li>
           <h4> {{ $t('settings.notification_visibility') }}</h4>
           <p
-            class="sidenote"
             v-if="expertLevel > 0"
+            class="sidenote"
           >
             {{ $t('settings.notification_setting_filters_chrome_push') }}
           </p>
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index edab1c19d..80064daf8 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -13,8 +13,8 @@
         <li>
           <div class="setting-item">
             <Checkbox
-              class="setting-label setting-control custom-boolean-setting"
               v-model="locked"
+              class="setting-label setting-control custom-boolean-setting"
             >
               <ProfileSettingIndicator :is-profile="true" />
               {{ $t('settings.lock_account_description') }}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 934d5c53f..763d77d20 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1391,6 +1391,32 @@
       "always": "Always",
       "never": "Never"
     },
+    "instance": {
+      "instance": "Instance information",
+      "pwa": {
+        "manifest": "PWA Manifest",
+        "optional": "(optional)",
+        "no_icons": "No icons defined",
+        "icon": {
+          "purpose": "Icon purpose",
+          "any": "Any",
+          "monochrome": "Monochrome",
+          "maskable": "Maskable"
+        }
+      },
+      "branding": "Branding",
+      "access": "Instance access",
+      "rich_metadata": "Metadata",
+      "restrict": {
+        "header": "Restrict access for anonymous visitors",
+        "description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
+        "timelines": "Timelines access",
+        "profiles": "User profiles access",
+        "activities": "Statuses/activities access"
+      },
+      ":unauthenticated": "Unauthenticated",
+      ":all": "Everyone"
+    },
     "temp_overrides": {
       ":pleroma": {
         ":connections_pool": {