diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 00000000..a76d8646
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,5 @@
+---
+name: 🐞 Bug report
+about: Report an issue
+labels: ['s: pending triage', 'c: bug']
+---
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
deleted file mode 100644
index a97f3365..00000000
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ /dev/null
@@ -1,56 +0,0 @@
-name: 🐞 Bug report
-description: Report an issue
-labels: ['s: pending triage', 'c: bug']
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to fill out this bug report!
-
-        If you are unsure whether your problem is a bug or not, you can check the following:
-
-        - use our [Discord community](https://chat.elk.zone)
-        - open a new [discussion](https://github.com/elk-zone/elk/discussions) and ask your question there
-
-  - type: checkboxes
-    id: checkboxes
-    attributes:
-      label: Pre-Checks
-      description: Before submitting the issue, please make sure you do the following
-      options:
-        # - label: Follow our [Code of Conduct](https://github.com/elk-zone/elk/blob/main/CODE_OF_CONDUCT.md).
-        #   required: true
-        # - label: Read the [Contributing Guidelines](https://github.com/elk-zone/elk/blob/main/CONTRIBUTING.md).
-        #   required: true
-        - label: Check that there isn't [already an issue](https://github.com/elk-zone/elk/issues) that reports the same bug to avoid creating a duplicate.
-          required: true
-        - label: Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/elk-zone/elk/discussions) or join our [Discord Chat Server](https://chat.elk.zone).
-          required: true
-        - label: Providing a screenshot or video to reproduce the issue or show visually what was meant.
-          required: true
-        - label: I am willing to provide a PR.
-
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: Describe the bug
-      description: A clear and concise description of what the bug is.
-      placeholder: I am doing ... What I expect is ... What actually happening is ...
-    validations:
-      required: true
-
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: Reproduction video or screenshot
-      description: |
-        A video or screenshot that visually shows the issue.
-        **Tip:** You can attach images or recordings files by clicking this area to highlight it and then dragging files in.
-
-  - type: textarea
-    id: additional-context
-    attributes:
-      label: Additional Context
-      description: |
-        Anything else relevant? Please tell us here, e.g. your used web browser and/or you are on desktop or mobile.
-        **Tip:** You can attach images or recordings files by clicking this area to highlight it and then dragging files in.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 00000000..1bf9f7fc
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,5 @@
+---
+name: 🚀 New feature proposal
+about: Propose a new feature
+labels: 's: pending triage'
+---
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
deleted file mode 100644
index 478c620f..00000000
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ /dev/null
@@ -1,35 +0,0 @@
-name: 🚀 New feature proposal
-description: Propose a new feature
-labels: ['s: pending triage'] # This will automatically assign the 's: pending triage' label
-body:
-  - type: markdown
-    attributes:
-      value: Thanks for your interest in the project and taking the time to fill out this feature report!
-
-  - type: textarea
-    id: feature-description
-    attributes:
-      label: Clear and concise description of the problem
-      description: 'As a user I want [goal / wish] so that [benefit]. If you intend to submit a PR for this issue, tell us in the description. Thanks!'
-    validations:
-      required: true
-
-  - type: textarea
-    id: suggested-solution
-    attributes:
-      label: Suggested solution
-      description: 'In section [xy] we could provide following feature...'
-    validations:
-      required: true
-
-  - type: textarea
-    id: alternative
-    attributes:
-      label: Alternative
-      description: Clear and concise description of any alternative solutions or features you've considered.
-
-  - type: textarea
-    id: additional-context
-    attributes:
-      label: Additional context
-      description: Any other context about the feature request here.
diff --git a/.github/ISSUE_TEMPLATE/freestyle.md b/.github/ISSUE_TEMPLATE/freestyle.md
deleted file mode 100644
index 642eec30..00000000
--- a/.github/ISSUE_TEMPLATE/freestyle.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-name: Freestyle Report
-about: Create a report to help us improve
-labels: 'pending triage' # This will automatically assign the 'pending triage' label
----
\ No newline at end of file
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
deleted file mode 100644
index 2189ced5..00000000
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ /dev/null
@@ -1,26 +0,0 @@
-<!-- Thank you for contributing! -->
-
-### Description
-
-<!-- Please insert your description here and provide especially info about the "what" this PR is solving -->
-
-### Additional context
-
-<!-- e.g. is there anything you'd like reviewers to focus on? -->
-
----
-
-### What is the purpose of this pull request? <!-- (put an "X" next to an item) -->
-
-- [ ] Bug fix
-- [ ] New Feature
-- [ ] Documentation update
-- [ ] Translations update
-- [ ] Other
-
-### Before submitting the PR, please make sure you do the following
-
-- [ ] Read the [Contributing Guidelines](https://github.com/elk-zone/elk/blob/main/CONTRIBUTING.md).
-- [ ] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
-- [ ] Provide related snapshots or videos.
-- [ ] Provide a description in this PR that addresses **what** the PR is solving, or reference the issue that it solves (e.g. `fixes #123`).
diff --git a/components/account/AccountHandle.vue b/components/account/AccountHandle.vue
index 63465d0a..c2a955c5 100644
--- a/components/account/AccountHandle.vue
+++ b/components/account/AccountHandle.vue
@@ -9,7 +9,7 @@ const serverName = $computed(() => getServerName(account))
 </script>
 
 <template>
-  <p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light dir="ltr">
+  <p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light leading-tight dir="ltr">
     <!-- fix: #274 only line-clamp-1 can be used here, using text-ellipsis is not valid -->
     <span text-secondary>{{ getShortHandle(account) }}</span>
     <span v-if="serverName" text-secondary-light>@{{ serverName }}</span>
diff --git a/components/account/AccountMoved.vue b/components/account/AccountMoved.vue
index 75160514..8260c49a 100644
--- a/components/account/AccountMoved.vue
+++ b/components/account/AccountMoved.vue
@@ -19,10 +19,8 @@ defineProps<{
       </NuxtLink>
       <div flex-auto />
       <div flex items-center>
-        <NuxtLink :to="getAccountRoute(account.moved as any)">
-          <button btn-solid h-fit>
-            {{ $t('account.go_to_profile') }}
-          </button>
+        <NuxtLink :to="getAccountRoute(account.moved as any)" btn-solid inline-block h-fit>
+          {{ $t('account.go_to_profile') }}
         </NuxtLink>
       </div>
     </div>
diff --git a/components/common/CommonPreviewPrompt.vue b/components/common/CommonPreviewPrompt.vue
new file mode 100644
index 00000000..d6df37db
--- /dev/null
+++ b/components/common/CommonPreviewPrompt.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const build = useBuildInfo()
+</script>
+
+<template>
+  <div
+    m-2 p5 bg-rose:10 relative
+    rounded-lg of-hidden
+    flex="~ col gap-3"
+  >
+    <h2 font-bold text-rose>
+      {{ $t('help.build_preview.title') }}
+    </h2>
+    <p>
+      <i18n-t keypath="help.build_preview.desc1">
+        <NuxtLink :href="`https://github.com/elk-zone/elk/commit/${build.commit}`" target="_blank" text-rose hover:underline>
+          <code>{{ build.commit.slice(0, 7) }}</code>
+        </NuxtLink>
+      </i18n-t>
+    </p>
+    <p>{{ $t('help.build_preview.desc2') }}</p>
+    <p font-bold>
+      {{ $t('help.build_preview.desc3') }}
+    </p>
+    <div i-ri-git-pull-request-line absolute text-10em bottom--10 inset-ie--10 text-rose op10 class="-z-1" />
+  </div>
+</template>
diff --git a/components/nav/NavLogo.vue b/components/nav/NavLogo.vue
index 4020caa6..74b6840c 100644
--- a/components/nav/NavLogo.vue
+++ b/components/nav/NavLogo.vue
@@ -29,9 +29,9 @@
 
 <style scoped>
 svg path.wood {
-    fill: var(--c-dark-primary-light);
+    fill: var(--c-text-secondary);
 }
 svg path.body {
-    fill: var(--c-primary);
+    fill: var(--c-text-base);
 }
 </style>
diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
index eb02443c..6d323e17 100644
--- a/components/nav/NavSideItem.vue
+++ b/components/nav/NavSideItem.vue
@@ -53,7 +53,7 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
     :tabindex="noUserDisable ? -1 : null"
     @click="$scrollToTop"
   >
-    <CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
+    <CommonTooltip :disabled="!isMediumOrLargeScreen" :content="text" placement="right">
       <div
         flex items-center gap4
         w-fit rounded-3
diff --git a/components/nav/NavTitle.vue b/components/nav/NavTitle.vue
index c4054796..8f2d4f9d 100644
--- a/components/nav/NavTitle.vue
+++ b/components/nav/NavTitle.vue
@@ -29,7 +29,7 @@ router.afterEach(() => {
     </NuxtLink>
     <div
       hidden xl:flex items-center me-8 mt-2
-      :class="{ 'pointer-events-none op40': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
+      :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
     >
       <NuxtLink
         :aria-label="$t('nav.back')"
diff --git a/components/publish/PublishButton.vue b/components/publish/PublishButton.vue
deleted file mode 100644
index e75c625a..00000000
--- a/components/publish/PublishButton.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup>
-const disabled = computed(() => !isHydrated.value || !currentUser.value)
-const disabledVisual = computed(() => isHydrated.value && !currentUser.value)
-</script>
-
-<template>
-  <button
-    flex="~ gap2 center"
-    w-9 h-9 py2
-    xl="w-auto h-auto"
-    rounded-3
-    cursor-pointer disabled:pointer-events-none
-    text-primary
-    border-1 border-primary
-    :class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
-    :disabled="disabled"
-    @click="openPublishDialog()"
-  >
-    <div i-ri:quill-pen-line />
-    <span hidden xl:block>{{ $t('action.compose') }}</span>
-  </button>
-</template>
diff --git a/components/publish/PublishEmojiPicker.client.vue b/components/publish/PublishEmojiPicker.client.vue
index 4312a36f..e75850ed 100644
--- a/components/publish/PublishEmojiPicker.client.vue
+++ b/components/publish/PublishEmojiPicker.client.vue
@@ -19,7 +19,7 @@ async function openEmojiPicker() {
     })
   }
   else {
-    const promise = import('@emoji-mart/data').then(r => r.default)
+    const promise = import('@emoji-mart/data/sets/14/twitter.json').then(r => r.default)
     const { Picker } = await import('emoji-mart')
     picker = new Picker({
       data: () => promise,
@@ -28,6 +28,7 @@ async function openEmojiPicker() {
           ? emit('select', native)
           : emit('selectCustom', { src, alt, 'data-emoji-id': name })
       },
+      set: 'twitter',
       theme: colorMode.value,
       custom: customEmojisData.value,
     })
diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
index 7d5519f7..c4e60a89 100644
--- a/components/status/StatusAttachment.vue
+++ b/components/status/StatusAttachment.vue
@@ -65,9 +65,11 @@ const video = ref<HTMLVideoElement | undefined>()
 const prefersReducedMotion = usePreferredReducedMotion()
 const isAudio = $computed(() => attachment.type === 'audio')
 
+const enableAutoplay = usePreferences('enableAutoplay')
+
 useIntersectionObserver(video, (entries) => {
   const ready = video.value?.dataset.ready === 'true'
-  if (prefersReducedMotion.value === 'reduce') {
+  if (prefersReducedMotion.value === 'reduce' || !enableAutoplay.value) {
     if (ready && !video.value?.paused)
       video.value?.pause()
 
diff --git a/composables/screen.ts b/composables/screen.ts
index 3797cea5..db0c2b2f 100644
--- a/composables/screen.ts
+++ b/composables/screen.ts
@@ -4,3 +4,4 @@ export const breakpoints = useBreakpoints(breakpointsTailwind)
 
 export const isSmallScreen = breakpoints.smallerOrEqual('md')
 export const isMediumScreen = breakpoints.smallerOrEqual('lg')
+export const isMediumOrLargeScreen = breakpoints.between('sm', 'xl')
diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index cd050316..68989690 100644
--- a/composables/settings/definition.ts
+++ b/composables/settings/definition.ts
@@ -8,6 +8,7 @@ export interface PreferencesSettings {
   hideFavoriteCount: boolean
   hideFollowerCount: boolean
   grayscaleMode: boolean
+  enableAutoplay: boolean
   experimentalVirtualScroller: boolean
   experimentalGitHubCards: boolean
   experimentalUserPicker: boolean
@@ -58,6 +59,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   hideFavoriteCount: false,
   hideFollowerCount: false,
   grayscaleMode: false,
+  enableAutoplay: true,
   experimentalVirtualScroller: true,
   experimentalGitHubCards: true,
   experimentalUserPicker: true,
diff --git a/layouts/default.vue b/layouts/default.vue
index 6f73ea45..be367ae0 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,7 +2,7 @@
 import { usePreferences } from '~/composables/settings'
 
 const route = useRoute()
-const userSettings = useUserSettings()
+const info = useBuildInfo()
 
 const wideLayout = computed(() => route.meta.wideLayout ?? false)
 
@@ -63,7 +63,9 @@ const isGrayscale = usePreferences('grayscaleMode')
         <div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
           <slot name="right">
             <div flex-auto />
+
             <PwaPrompt />
+            <LazyCommonPreviewPrompt v-if="info.env === 'preview'" />
             <NavFooter />
           </slot>
         </div>
diff --git a/locales/de-DE.json b/locales/de-DE.json
index 442a5642..3de1c601 100644
--- a/locales/de-DE.json
+++ b/locales/de-DE.json
@@ -330,6 +330,7 @@
     },
     "notifications_settings": "Benachrichtigungen",
     "preferences": {
+      "enable_autoplay": "Autoplay aktivieren",
       "github_cards": "GitHub Cards",
       "hide_boost_count": "Boost-Zähler ausblenden",
       "hide_favorite_count": "Favoritenzahl ausblenden",
diff --git a/locales/en-US.json b/locales/en-US.json
index f3ad3e51..b3c366e8 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -156,6 +156,12 @@
     "unsupported_file_format": "Unsupported file format"
   },
   "help": {
+    "build_preview": {
+      "desc1": "You are currently viewing a preview version of Elk from the community - {0}.",
+      "desc2": "It may contains unreviewed or even malicious changes.",
+      "desc3": "Don't log in with your real account.",
+      "title": "Preview deploy"
+    },
     "desc_highlight": "Expect some bugs and missing features here and there.",
     "desc_para1": "Thanks for your interest in trying out Elk, our work-in-progress Mastodon web client!",
     "desc_para2": "we are working hard on the development and improving it over time.",
@@ -360,6 +366,7 @@
     },
     "notifications_settings": "Notifications",
     "preferences": {
+      "enable_autoplay": "Enable Autoplay",
       "github_cards": "GitHub Cards",
       "grayscale_mode": "Grayscale mode",
       "hide_boost_count": "Hide boost count",
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index 0435c98d..3b818053 100644
--- a/locales/fr-FR.json
+++ b/locales/fr-FR.json
@@ -130,7 +130,7 @@
     },
     "show_reblogs": {
       "cancel": "Annuler",
-      "confirm": "Montrer",
+      "confirm": "Afficher",
       "title": "Voulez-vous vraiment afficher les partages de {0} ?"
     },
     "unfollow": {
@@ -158,6 +158,12 @@
     "unsupported_file_format": "Format de fichier non supporté"
   },
   "help": {
+    "build_preview": {
+      "desc1": "Vous consultez actuellement une version d'aperçu d'Elk de la communauté - {0}.",
+      "desc2": "Elle peut contenir des modifications non révisées voire même malveillantes.",
+      "desc3": "Ne vous connectez pas avec votre compte réel.",
+      "title": "Aperçu du déploiement"
+    },
     "desc_highlight": "Il est possible de rencontrer, par-ci par-là, quelques bugs et fonctionnalités manquantes.",
     "desc_para1": "Merci de l'intérêt pour Elk, notre client Mastodon en cours de développement !",
     "desc_para2": "Nous travaillons dur sur le développement et l'améliorons au fur et à mesure. Nous allons open-sourcer l'application une fois qu'elle sera prête pour un usage public.",
@@ -174,11 +180,15 @@
     "block_account": "Bloquer {0}",
     "block_domain": "Bloquer le domaine {0}",
     "copy_link_to_post": "Copier le lien du message",
+    "copy_original_link_to_post": "Copiez le lien d'origine vers ce message",
     "delete": "Supprimer",
     "delete_and_redraft": "Supprimer et réécrire",
+    "delete_confirm": {
+      "cancel": ""
+    },
     "direct_message_account": "Message direct à {0}",
     "edit": "Éditer",
-    "hide_reblogs": "Cacher les boosts de {0}",
+    "hide_reblogs": "Cacher les partages de {0}",
     "mention_account": "Mentionner {0}",
     "mute_account": "Mettre en sourdine {0}",
     "mute_conversation": "Message muet",
@@ -282,7 +292,8 @@
       "sponsors": "Donateur·ice·s",
       "sponsors_body_1": "Elk existe grâce aux généreux soutien de :",
       "sponsors_body_2": "Et toutes les personnes et sociétés soutenant l'équipe Elk et ses membres.",
-      "sponsors_body_3": "Si vous appréciez l'application, envisagez de nous soutenir :"
+      "sponsors_body_3": "Si vous appréciez l'application, envisagez de nous soutenir :",
+      "version": "Version"
     },
     "account_settings": {
       "description": "Modifiez les paramètres de votre compte dans l'interface de Mastodon",
@@ -360,6 +371,7 @@
     },
     "notifications_settings": "Notifications",
     "preferences": {
+      "enable_autoplay": "Activer la lecture automatique",
       "github_cards": "GitHub Cards",
       "grayscale_mode": "Mode niveaux de gris",
       "hide_boost_count": "Cacher les compteurs de partages",
diff --git a/locales/pt-PT.json b/locales/pt-PT.json
index bd0056c7..bb1f68e6 100644
--- a/locales/pt-PT.json
+++ b/locales/pt-PT.json
@@ -156,6 +156,12 @@
     "unsupported_file_format": "Formato de ficheiro não suportado"
   },
   "help": {
+    "build_preview": {
+      "desc1": "Está atualmente a visualizar uma versão prévia do Elk produzida pela comunidade - {0}.",
+      "desc2": "Pode conter alterações não revistas ou mesmo maliciosas.",
+      "desc3": "Não inicie sessão com a sua conta real.",
+      "title": "Produção de pré-visualização"
+    },
     "desc_highlight": "Espere alguns problemas e funcionalidades em falta.",
     "desc_para1": "Obrigado pelo seu interesse em experimentar o Elk, o nosso aplicativo web para o Mastodon, ainda em construção!",
     "desc_para2": "Estamos a trabalhar arduamente no seu desenvolvimento e melhoria ao longo do tempo.",
@@ -172,6 +178,7 @@
     "block_account": "Bloquear {0}",
     "block_domain": "Bloquear domínio {0}",
     "copy_link_to_post": "Copiar ligação para esta publicação",
+    "copy_original_link_to_post": "Copiar ligação original para esta publicação",
     "delete": "Eliminar",
     "delete_and_redraft": "Eliminar & re-editar",
     "direct_message_account": "Mensagem direta a {0}",
@@ -280,7 +287,8 @@
       "sponsors": "Patrocinadores",
       "sponsors_body_1": "O Elk é possível graças ao genoroso patrocinio e ajuda de:",
       "sponsors_body_2": "E todas as empresas e pessoas que apoiam a Equipa do Elk e os seus membros.",
-      "sponsors_body_3": "Se está a gostar de utilizar esta aplicação, considere apoiar-nos:"
+      "sponsors_body_3": "Se está a gostar de utilizar esta aplicação, considere apoiar-nos:",
+      "version": "Versão"
     },
     "account_settings": {
       "description": "Editar as configurações da sua conta na aplicação web do Mastodon",
@@ -358,6 +366,7 @@
     },
     "notifications_settings": "Notificações",
     "preferences": {
+      "enable_autoplay": "Habilitar Repodrução Automática",
       "github_cards": "Cartões do GitHub",
       "grayscale_mode": "Modo tons de cinza",
       "hide_boost_count": "Esconder contagem de partilhas",
diff --git a/package.json b/package.json
index 66eb83c8..0a3a3df0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": true,
   "packageManager": "pnpm@7.9.0",
   "license": "MIT",
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index e2ea0191..0ed9de73 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -39,6 +39,12 @@ const userSettings = useUserSettings()
     >
       {{ $t('settings.preferences.grayscale_mode') }}
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'enableAutoplay')"
+      @click="togglePreferences('enableAutoplay')"
+    >
+      {{ $t('settings.preferences.enable_autoplay') }}
+    </SettingsToggleItem>
     <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
       <div i-ri-flask-line />
       {{ $t('settings.preferences.title') }}
diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue
index aa11f3b5..a65f8acb 100644
--- a/pages/settings/profile/appearance.vue
+++ b/pages/settings/profile/appearance.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { mastodon } from 'masto'
+import { ofetch } from 'ofetch'
 import { useForm } from 'slimeform'
 import { parse } from 'ultrahtml'
+import type { Component } from 'vue'
 
 definePageMeta({
   middleware: 'auth',
@@ -15,6 +17,9 @@ useHeadFixed({
 
 const { client } = $(useMasto())
 
+const avatarInput = ref<any>()
+const headerInput = ref<any>()
+
 const account = $computed(() => currentUser.value?.account)
 
 const onlineSrc = $computed(() => ({
@@ -81,6 +86,15 @@ const refreshInfo = async () => {
     reset()
 }
 
+useDropZone(avatarInput, (files) => {
+  if (files?.[0])
+    form.avatar = files[0]
+})
+useDropZone(headerInput, (files) => {
+  if (files?.[0])
+    form.header = files[0]
+})
+
 onHydrated(refreshInfo)
 onReactivated(refreshInfo)
 </script>
@@ -98,6 +112,7 @@ onReactivated(refreshInfo)
         <!-- banner -->
         <div of-hidden bg="gray-500/20" aspect="3">
           <CommonInputImage
+            ref="headerInput"
             v-model="form.header"
             :original="onlineSrc.header"
             w-full h-full
@@ -108,6 +123,7 @@ onReactivated(refreshInfo)
         <!-- avatar -->
         <div px-4 flex="~ gap4">
           <CommonInputImage
+            ref="avatarInput"
             v-model="form.avatar"
             :original="onlineSrc.avatar"
             mt--10