diff --git a/packages/frontend/src/pages/avatar-decorations.vue b/packages/frontend/src/pages/avatar-decorations.vue
index 715f234493..291b1c8d40 100644
--- a/packages/frontend/src/pages/avatar-decorations.vue
+++ b/packages/frontend/src/pages/avatar-decorations.vue
@@ -13,6 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #caption>{{ avatarDecoration.description }}</template>
 
 				<div class="_gaps_m">
+					<MkButton rounded style="margin: 0 auto;" @click="selectImage(avatarDecoration, $event)">{{ i18n.ts.selectFile }}</MkButton>
 					<MkInput v-model="avatarDecoration.name">
 						<template #label>{{ i18n.ts.name }}</template>
 					</MkInput>
@@ -38,9 +39,7 @@ import { } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-import MkRadios from '@/components/MkRadios.vue';
-import MkInfo from '@/components/MkInfo.vue';
+import { selectFile } from '@/scripts/select-file.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -48,6 +47,13 @@ import MkFolder from '@/components/MkFolder.vue';
 
 let avatarDecorations: any[] = $ref([]);
 
+async function selectImage(decoration, ev) {
+	const file = await selectFile(ev.currentTarget ?? ev.target, null);
+	const candidate = file.name.replace(/\.(.+)$/, '');
+	decoration.name = candidate;
+	decoration.url = file.url;
+}
+
 function add() {
 	avatarDecorations.unshift({
 		_id: Math.random().toString(36),