diff --git a/src/main/system/system.ts b/src/main/system/system.ts
index c8d160d..afb1cad 100644
--- a/src/main/system/system.ts
+++ b/src/main/system/system.ts
@@ -25,7 +25,7 @@ const useSystem = memo(() => {
     await powerOffByDbus(interactive)
   }
 
-  const showOpenDialog = ipcHandle(async (ev, options: OpenDialogOptions) => {
+  const openFile = ipcHandle(async (ev, options: OpenDialogOptions) => {
     const result = await dialog.showOpenDialog(
       BrowserWindow.fromWebContents(ev.sender) ?? raiseError(() => new ReferenceError('Invalid window')),
       options
@@ -61,12 +61,12 @@ const useSystem = memo(() => {
   })
 
   ipcMain.handle('system:powerOff', ipcProxy(powerOff))
-  ipcMain.handle('system:showOpenDialog', showOpenDialog)
+  ipcMain.handle('system:openFile', openFile)
   ipcMain.handle('system:saveFile', saveFile)
 
   return {
     powerOff
-  } satisfies Omit<SystemApi, 'showOpenDialog' | 'saveFile'>
+  } satisfies Omit<SystemApi, 'openFile' | 'saveFile'>
 })
 
 export default useSystem
diff --git a/src/preload/api.d.ts b/src/preload/api.d.ts
index f2faf82..c99f3df 100644
--- a/src/preload/api.d.ts
+++ b/src/preload/api.d.ts
@@ -159,7 +159,7 @@ export interface SystemApi {
   /** Powers off the system. */
   readonly powerOff: (interactive?: boolean) => Promise<void>
   /** Shows the open file dialog. */
-  readonly showOpenDialog: (options: OpenDialogOptions) => Promise<File[] | null>
+  readonly openFile: (options: OpenDialogOptions) => Promise<File[] | null>
   /** Shows the save file dialog to save a file. */
   readonly saveFile: (file: File, options: SaveDialogOptions) => Promise<boolean>
 }
diff --git a/src/preload/plugins/system.ts b/src/preload/plugins/system.ts
index 0e8b72d..378e65e 100644
--- a/src/preload/plugins/system.ts
+++ b/src/preload/plugins/system.ts
@@ -10,9 +10,9 @@ type SaveFileMain = (file: FileData, options: SaveDialogOptions) => Promise<bool
 const useSystemApi = () => {
   const ipc = useIpc()
 
-  const showOpenDialogMain: ShowOpenDialogMain = ipc.useInvoke('system:showOpenDialog')
-  async function showOpenDialog(options: OpenDialogOptions) {
-    const files = await showOpenDialogMain(options)
+  const openFileMain: ShowOpenDialogMain = ipc.useInvoke('system:openFile')
+  async function openFile(options: OpenDialogOptions) {
+    const files = await openFileMain(options)
     if (files == null) return null
 
     return files.map(({ path, buffer, type }) => new File([buffer], basename(path), { type }))
@@ -31,7 +31,7 @@ const useSystemApi = () => {
 
   return {
     powerOff: ipc.useInvoke('system:powerOff'),
-    showOpenDialog,
+    openFile,
     saveFile
   } satisfies SystemApi
 }
diff --git a/src/renderer/components/FileUploadDialog.vue b/src/renderer/components/FileUploadDialog.vue
deleted file mode 100644
index a1c4589..0000000
--- a/src/renderer/components/FileUploadDialog.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<script setup lang="ts">
-import { mdiFile } from '@mdi/js'
-import fileIcon from '@mdi/svg/svg/file.svg'
-import is from '@sindresorhus/is'
-import { useObjectUrl, useVModel } from '@vueuse/core'
-import { ref, computed, watch, nextTick } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useElementScrollingBounds } from '../helpers/element'
-import { useButton } from '../helpers/utilities'
-import type { I18nSchema } from '../locales/locales'
-import type { ComponentPublicInstance } from 'vue'
-import { toArray } from '@/basics'
-
-interface Props {
-  // State
-  // eslint-disable-next-line vue/no-unused-properties -- useVModel
-  visible?: boolean
-  // Size and location
-  // File
-  accept?: string | undefined
-  icon?: string | undefined
-  unsetIcon?: string | undefined
-  lazySource?: string | undefined
-  // Popup data
-  title?: string | undefined
-  showConfirm?: boolean | string | undefined
-  showCancel?: boolean | string | undefined
-  modelValue?: File | undefined
-  mandatory?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  unsetIcon: mdiFile,
-  lazySource: fileIcon,
-  showConfirm: false,
-  showCancel: false
-})
-
-const emit = defineEmits<{
-  (on: 'update:model-value' | 'confirm', value: File | undefined): void
-  (on: 'update:visible', value: boolean): void
-}>()
-
-const { t } = useI18n<I18nSchema>()
-
-const confirmButton = useButton(
-  () => props.showConfirm,
-  () => t('common.confirm')
-)
-const cancelButton = useButton(
-  () => props.showCancel,
-  () => t('common.cancel')
-)
-
-const isVisible = useVModel(props, 'visible', emit)
-
-// eslint-disable-next-line vue/no-setup-props-reactivity-loss -- Watched and updated
-const innerValue = ref(props.modelValue != null ? [props.modelValue] : [])
-watch(
-  () => props.modelValue,
-  (value) => {
-    innerValue.value = value != null ? [value] : []
-  }
-)
-
-const current = computed(() => innerValue.value[0])
-const image = useObjectUrl(current)
-
-const onNewFile = async (files: File | File[]) => {
-  files = toArray(files)
-  // Confirm the dialog if the confirm button is not present.
-  if (confirmButton.value == null && is.nonEmptyArray(files)) {
-    await nextTick()
-    updateValue()
-  }
-}
-
-const updateValue = () => {
-  emit('update:model-value', current.value)
-  emit('confirm', current.value)
-  isVisible.value = false
-}
-
-const cancelChange = () => {
-  isVisible.value = false
-}
-
-const disableConfirm = computed(() => props.mandatory && !is.nonEmptyArray(innerValue.value))
-
-const body = ref<ComponentPublicInstance | null>(null)
-const scrolling = useElementScrollingBounds(body)
-const showDividers = computed(() => scrolling.value.client.height !== scrolling.value.scrolling.height)
-</script>
-
-<template>
-  <VCard>
-    <VCardText ref="body">
-      <div v-if="is.nonEmptyString(title)">{{ title }}</div>
-      <VFileInput
-        v-model="innerValue"
-        :accept="accept"
-        prepend-icon=""
-        :prepend-inner-icon="icon"
-        variant="outlined"
-        density="compact"
-        @update:model-value="onNewFile" />
-      <div class="d-flex justify-center">
-        <VCard
-          variant="outlined"
-          width="128"
-          height="128"
-          rounded="lg"
-          class="align-content-center bg-surface-lighten-1">
-          <VIcon v-if="image == null" size="128" :icon="unsetIcon" :cover="false" />
-          <VImg v-else width="128" max-height="128" :aspect-ratio="1" :src="image" :lazy-src="lazySource" />
-        </VCard>
-      </div>
-    </VCardText>
-    <VDivider v-if="showDividers" />
-    <VCardActions>
-      <VSpacer />
-      <VBtn v-if="cancelButton != null" class="text-none" @click="cancelChange">
-        {{ cancelButton }}
-      </VBtn>
-      <VBtn
-        v-if="confirmButton != null"
-        :disabled="disableConfirm"
-        class="text-none"
-        color="primary"
-        @click="updateValue">
-        {{ confirmButton }}
-      </VBtn>
-    </VCardActions>
-  </VCard>
-</template>
diff --git a/src/renderer/components/InputDialog.vue b/src/renderer/components/InputDialog.vue
index 73de101..2656421 100644
--- a/src/renderer/components/InputDialog.vue
+++ b/src/renderer/components/InputDialog.vue
@@ -50,7 +50,7 @@ const { t } = useI18n<I18nSchema>()
 const confirmLabel = computed(() => props.confirmButton ?? t('common.confirm'))
 const cancelLabel = computed(() => props.cancelButton ?? t('common.cancel'))
 
-const isVisible = useVModel(props, 'visible')
+const isVisible = useVModel(props, 'visible', emit, { passive: true, defaultValue: false })
 
 // HACK: Always use cancelChanges since updateValue will dismiss the dialog after updating the original.
 watch(isVisible, (value) => {
@@ -129,7 +129,7 @@ const disableConfirm = computed(() => props.mandatory && !is.nonEmptyString(inne
 
 <template>
   <VDialog v-model="isVisible" v-bind="dialogProps">
-    <template #activator="scope"><slot name="activator" v-bind="scope"></slot></template>
+    <template #activator="scope"><slot name="activator" v-bind="scope" /></template>
     <VCard>
       <VCardText>
         <div v-if="is.nonEmptyString(title)">{{ title }}</div>
diff --git a/src/renderer/components/OptionDialog.vue b/src/renderer/components/OptionDialog.vue
index 7bc0ca7..09e7d1b 100644
--- a/src/renderer/components/OptionDialog.vue
+++ b/src/renderer/components/OptionDialog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import is from '@sindresorhus/is'
+import { useVModel } from '@vueuse/core'
 import { get } from 'radash'
 import { watch, ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -15,10 +16,11 @@ interface Props {
   activatorProps?: object | undefined
   attach?: string | boolean | Element | undefined
   // State
+  // eslint-disable-next-line vue/no-unused-properties -- useVModel
+  visible?: boolean
   disabled?: boolean
   persistent?: boolean
   scrollable?: boolean
-  visible?: boolean
   // Size and location
   absolute?: boolean
   fullscreen?: boolean
@@ -64,21 +66,12 @@ const confirmLabel = computed(() => props.confirmButton ?? t('common.confirm'))
 const showCancel = computed(() => props.persistent || props.withCancel)
 const cancelLabel = computed(() => props.cancelButton ?? t('common.cancel'))
 
-// eslint-disable-next-line vue/no-setup-props-reactivity-loss -- Watched and updated.
-const isVisible = ref(props.visible)
-watch(
-  () => props.visible,
-  (value) => {
-    isVisible.value = value
-  }
-)
+const isVisible = useVModel(props, 'visible', emit, { passive: true, defaultValue: false })
+
 // HACK: Always use cancelChanges since updateValue will dismiss the dialog after updating the original.
 watch(isVisible, (value) => {
   if (!value) cancelChange()
 })
-watch(isVisible, (value) => {
-  if (value !== props.visible) emit('update:visible', value)
-})
 
 // eslint-disable-next-line vue/no-setup-props-reactivity-loss -- Watched and update.
 const innerValue = ref(props.multiple ? toArray(props.modelValue) : props.modelValue)
diff --git a/src/renderer/components/ReplacableImage.vue b/src/renderer/components/ReplacableImage.vue
new file mode 100644
index 0000000..49532d6
--- /dev/null
+++ b/src/renderer/components/ReplacableImage.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { mdiFileImagePlus, mdiVideoInputHdmi } from '@mdi/js'
+import videoInputHdmiIcon from '@mdi/svg/svg/video-input-hdmi.svg'
+import { useObjectUrl } from '@vueuse/core'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  image?: File | undefined
+}>()
+
+const emit = defineEmits<{
+  (on: 'update', file: File): void
+  (on: 'change', file: File): void
+}>()
+
+const { t } = useI18n()
+
+const file = computed(() => props.image)
+const url = useObjectUrl(file)
+
+async function selectImage() {
+  const results = await globalThis.services.system.openFile({
+    title: t('label.select'),
+    filters: [
+      { extensions: ['svg', 'png', 'gif', 'jpg', 'jpeg'], name: t('filter.all') },
+      { extensions: ['jpg', 'jpeg'], name: t('filter.jpg') },
+      { extensions: ['svg'], name: t('filter.svg') },
+      { extensions: ['png'], name: t('filter.png') },
+      { extensions: ['gif'], name: t('filter.gif') }
+    ]
+  })
+
+  const newFile = results?.at(0) ?? null
+  if (newFile != null) {
+    emit('update', newFile)
+    emit('change', newFile)
+  }
+}
+</script>
+
+<template>
+  <VHover v-slot="{ isHovering, props: hover }">
+    <VAvatar
+      id="replacableImage"
+      size="128"
+      v-bind="{ ...hover }"
+      color="surface-lighten-1"
+      rounded="lg"
+      tile
+      @click="selectImage">
+      <VImg v-if="url != null" width="128" :src="url" :lazy-src="videoInputHdmiIcon" :cover="false" />
+      <VIcon v-else :icon="mdiVideoInputHdmi" />
+      <VOverlay
+        class="align-center justify-center text-center"
+        :model-value="isHovering ?? false"
+        theme="light"
+        scrim="primary-darken-4"
+        contained>
+        <VIcon :icon="mdiFileImagePlus" />
+        <div>{{ t('action.select') }}</div>
+      </VOverlay>
+    </VAvatar>
+  </VHover>
+</template>
+
+<style lang="scss" scoped>
+#replacableImage {
+  cursor: pointer;
+}
+</style>
+
+<i18n lang="yaml">
+en:
+  action:
+    select: Select new image
+  label:
+    select: Select image
+  filter:
+    all: Support images
+    svg: SVG images
+    png: PNG images
+    gif: GIF images
+    jpg: JPEG Images
+</i18n>
diff --git a/src/renderer/modals/SourceDialog.vue b/src/renderer/modals/SourceDialog.vue
index c13321f..01a500c 100644
--- a/src/renderer/modals/SourceDialog.vue
+++ b/src/renderer/modals/SourceDialog.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { mdiCamera, mdiClose, mdiVideoInputHdmi } from '@mdi/js'
-import videoInputHdmiIcon from '@mdi/svg/svg/video-input-hdmi.svg'
-import { useObjectUrl, useVModel } from '@vueuse/core'
-import { computed, reactive, ref, watch } from 'vue'
+import { mdiClose } from '@mdi/js'
+import { useVModel } from '@vueuse/core'
+import { reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import ReplacableImage from '../components/ReplacableImage.vue'
 import { useRules, useValidation } from '../helpers/validation'
 import { useSources } from '../system/source'
 import { useDialogs, useSourceDialog } from './dialogs'
@@ -29,9 +29,7 @@ const { t } = useI18n<I18nSchema>()
 const sources = useSources()
 const source = ref<NewSource>(sources.blank())
 
-const files = ref<File[]>([])
-const file = computed(() => files.value[0])
-const image = useObjectUrl(file)
+const file = ref<File>()
 watch(file, (value) => {
   v$.image.$model = value?.name ?? null
 })
@@ -105,25 +103,8 @@ const { cardProps, isFullscreen } = useSourceDialog()
           :label="t('label.name')"
           :placeholder="t('placeholder.required')"
           v-bind="getStatus(v$.title)" />
-        <VFileInput
-          v-model="files"
-          :label="t('label.image')"
-          accept="image/*"
-          prepend-icon=""
-          :placeholder="t('placeholder.required')"
-          :prepend-inner-icon="mdiCamera"
-          v-bind="getStatus(v$.title)" />
         <div class="d-flex justify-center">
-          <VCard variant="outlined" max-width="128px" rounded="lg">
-            <VIcon v-if="image == null" size="128px" :icon="mdiVideoInputHdmi" />
-            <VImg
-              v-else
-              width="128px"
-              max-height="128px"
-              aspect-ratio="1/1"
-              :src="image"
-              :lazy-src="videoInputHdmiIcon" />
-          </VCard>
+          <ReplacableImage :image="file" @update="file = $event" />
         </div>
       </VForm>
     </VCardText>
diff --git a/src/renderer/pages/SettingsBackupPage.vue b/src/renderer/pages/SettingsBackupPage.vue
index 04a376c..940688c 100644
--- a/src/renderer/pages/SettingsBackupPage.vue
+++ b/src/renderer/pages/SettingsBackupPage.vue
@@ -41,7 +41,7 @@ async function exportToFile() {
 
 async function importFromFile() {
   try {
-    const files = await globalThis.services.system.showOpenDialog({
+    const files = await globalThis.services.system.openFile({
       title: t('label.import'),
       filters: kFilters,
       properties: ['openFile', 'dontAddToRecent']
diff --git a/src/renderer/pages/SourcePage.vue b/src/renderer/pages/SourcePage.vue
index 0beb22c..a8e8954 100644
--- a/src/renderer/pages/SourcePage.vue
+++ b/src/renderer/pages/SourcePage.vue
@@ -1,23 +1,11 @@
 <script setup lang="ts">
-import {
-  mdiArrowLeft,
-  mdiCamera,
-  mdiDelete,
-  mdiExport,
-  mdiFileImagePlus,
-  mdiImport,
-  mdiPlus,
-  mdiVideoInputHdmi,
-  mdiVolumeMedium
-} from '@mdi/js'
-import videoInputHdmiIcon from '@mdi/svg/svg/video-input-hdmi.svg'
-import { useObjectUrl } from '@vueuse/core'
+import { mdiArrowLeft, mdiDelete, mdiExport, mdiImport, mdiPlus, mdiVolumeMedium } from '@mdi/js'
 import { computed, ref, onBeforeMount } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import FileUploadDialog from '../components/FileUploadDialog.vue'
 import InputDialog from '../components/InputDialog.vue'
 import Page from '../components/Page.vue'
+import ReplacableImage from '../components/ReplacableImage.vue'
 import { toFiles } from '../helpers/attachment'
 import TieDialog from '../modals/TieDialog.vue'
 import { useDialogs, useTieDialog } from '../modals/dialogs'
@@ -57,7 +45,6 @@ const { track, wait, isBusy } = trackBusy()
 const sources = useSources()
 const source = ref<Source>()
 const file = ref<File>()
-const image = useObjectUrl(file)
 
 const loadSource = async () => {
   source.value = { ...(await sources.get(props.id)) }
@@ -88,6 +75,11 @@ const save = async () => {
   }
 }
 
+const updateImage = async (newFile: File) => {
+  file.value = newFile
+  await save()
+}
+
 onBeforeMount(track(loadSource))
 
 //
@@ -169,39 +161,7 @@ const { dialogProps: editorProps } = useTieDialog()
   <Page>
     <div class="overflow-y-auto px-6 py-3">
       <div class="d-flex justify-center mb-5">
-        <VHover v-slot="{ isHovering, props: hover }">
-          <VDialog max-width="320">
-            <template #default="{ isActive }">
-              <FileUploadDialog
-                v-model:visible="isActive.value"
-                v-model="file"
-                title="Source icon"
-                accept="image/*"
-                :icon="mdiCamera"
-                :unset-icon="mdiVideoInputHdmi"
-                :lazy-source="videoInputHdmiIcon"
-                :show-confirm="t('action.save')"
-                mandantory
-                :show-cancel="t('action.discard')"
-                @confirm="save" />
-            </template>
-            <template #activator="{ props: dialog }">
-              <VAvatar id="replacableImage" size="128" v-bind="{ ...hover, ...dialog }" color="surface-lighten-1">
-                <VImg v-if="image != null" width="128" :src="image" :lazy-src="videoInputHdmiIcon" :cover="false" />
-                <VIcon v-else :icon="mdiVideoInputHdmi" />
-                <VOverlay
-                  class="align-center justify-center text-center"
-                  :model-value="isHovering ?? false"
-                  theme="light"
-                  scrim="primary-darken-4"
-                  contained>
-                  <VIcon :icon="mdiFileImagePlus" />
-                  <div>Upload new image</div>
-                </VOverlay>
-              </VAvatar>
-            </template>
-          </VDialog>
-        </VHover>
+        <ReplacableImage :image="file" @update="updateImage" />
       </div>
       <VList v-if="source != null" bg-color="transparent" :disabled="isBusy">
         <InputDialog
@@ -299,9 +259,3 @@ en:
     confirmDeleteTie: Do you want to delete this tie?
     noTies: No ties, add some
 </i18n>
-
-<style lang="scss" scoped>
-#replacableImage {
-  cursor: pointer;
-}
-</style>