diff --git a/apps/stage-pocket/src/pages/devtools/background-removal.vue b/apps/stage-pocket/src/pages/devtools/background-removal.vue
index 66dbb3f14..f2e3c0c95 100644
--- a/apps/stage-pocket/src/pages/devtools/background-removal.vue
+++ b/apps/stage-pocket/src/pages/devtools/background-removal.vue
@@ -2,7 +2,7 @@
 import type { PreTrainedModel, Processor } from '@huggingface/transformers'
 
 import { AutoModel, AutoProcessor, env, RawImage } from '@huggingface/transformers'
-import { Button, Checkbox, InputFile } from '@proj-airi/ui'
+import { Button, Checkbox, InputFileCard } from '@proj-airi/ui'
 import { check } from 'gpuu/webgpu'
 import { computed, onMounted, ref, watch } from 'vue'
 
@@ -222,7 +222,7 @@ function hidePreview() {
     <!-- Main content -->
     <template v-else>
       <!-- File upload area -->
-      <InputFile v-model="imageFiles" accept="image/*" multiple w-full />
+      <InputFileCard v-model="imageFiles" accept="image/*" multiple w-full />
 
       <!-- Controls -->
       <div flex flex-wrap items-center justify-between gap-4>
diff --git a/apps/stage-web/src/pages/devtools/background-removal.vue b/apps/stage-web/src/pages/devtools/background-removal.vue
index 66dbb3f14..f2e3c0c95 100644
--- a/apps/stage-web/src/pages/devtools/background-removal.vue
+++ b/apps/stage-web/src/pages/devtools/background-removal.vue
@@ -2,7 +2,7 @@
 import type { PreTrainedModel, Processor } from '@huggingface/transformers'
 
 import { AutoModel, AutoProcessor, env, RawImage } from '@huggingface/transformers'
-import { Button, Checkbox, InputFile } from '@proj-airi/ui'
+import { Button, Checkbox, InputFileCard } from '@proj-airi/ui'
 import { check } from 'gpuu/webgpu'
 import { computed, onMounted, ref, watch } from 'vue'
 
@@ -222,7 +222,7 @@ function hidePreview() {
     <!-- Main content -->
     <template v-else>
       <!-- File upload area -->
-      <InputFile v-model="imageFiles" accept="image/*" multiple w-full />
+      <InputFileCard v-model="imageFiles" accept="image/*" multiple w-full />
 
       <!-- Controls -->
       <div flex flex-wrap items-center justify-between gap-4>
diff --git a/packages/stage-pages/src/pages/devtools/vibrant.vue b/packages/stage-pages/src/pages/devtools/vibrant.vue
index 1e135c737..856aa5738 100644
--- a/packages/stage-pages/src/pages/devtools/vibrant.vue
+++ b/packages/stage-pages/src/pages/devtools/vibrant.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { InputFile } from '@proj-airi/ui'
+import { InputFileCard } from '@proj-airi/ui'
 import { Vibrant } from 'node-vibrant/browser'
 import { ref, watch } from 'vue'
 
@@ -49,7 +49,7 @@ watch(files, (files) => {
       {{ colorsDebug }}
     </div>
     <div flex gap-2>
-      <InputFile v-model="files" h-60 w-full />
+      <InputFileCard v-model="files" h-60 w-full />
     </div>
     <div
       h-60
diff --git a/packages/stage-pages/src/pages/settings/airi-card/index.vue b/packages/stage-pages/src/pages/settings/airi-card/index.vue
index 26fa0d0ef..362af7854 100644
--- a/packages/stage-pages/src/pages/settings/airi-card/index.vue
+++ b/packages/stage-pages/src/pages/settings/airi-card/index.vue
@@ -3,7 +3,7 @@ import type { ccv3 } from '@proj-airi/ccc'
 
 import { Alert } from '@proj-airi/stage-ui/components'
 import { useAiriCardStore } from '@proj-airi/stage-ui/stores/modules/airi-card'
-import { InputFile } from '@proj-airi/ui'
+import { InputFileCard } from '@proj-airi/ui'
 import { ComboboxSelect } from '@proj-airi/ui/components/form'
 import { storeToRefs } from 'pinia'
 import { computed, ref, watch } from 'vue'
@@ -223,7 +223,7 @@ function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
       :class="{ 'grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 grid-auto-rows-[minmax(min-content,max-content)] grid-auto-flow-dense sm:grid-cols-[repeat(auto-fill,minmax(240px,1fr))] sm:gap-5 md:grid-cols-[repeat(auto-fill,minmax(220px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(250px,1fr))]': cards.size > 0 }"
     >
       <!-- Upload card -->
-      <InputFile v-model="inputFiles" accept="*.json">
+      <InputFileCard v-model="inputFiles" accept="*.json">
         <template #default="{ isDragging }">
           <template v-if="!isDragging">
             <div flex flex-col items-center>
@@ -245,7 +245,7 @@ function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
             </div>
           </template>
         </template>
-      </InputFile>
+      </InputFileCard>
 
       <!-- Create card -->
       <CardCreate @click="handleCardCreationDialog" />