diff --git a/frontend/src/views/creators/CreatorLogoEditor.vue b/frontend/src/views/creators/CreatorLogoEditor.vue
index f72744c..2f199f9 100644
--- a/frontend/src/views/creators/CreatorLogoEditor.vue
+++ b/frontend/src/views/creators/CreatorLogoEditor.vue
@@ -4,30 +4,21 @@
       Logo
     </div>
 
-    <div class="card-content">
-      <div class="image-preview-container">
-        <img
-            :src="fileUrl || fallbackUrl"
-            alt="Aperçu du logo"
-            class="preview-image"
-        />
-      </div>
+    <div class="card-content flex flex-col items-center">
+      <img
+          :src="fileUrl || fallbackUrl"
+          alt="Aperçu du logo"
+          class="mb-5 transition duration-200 ease-in-out transform w-[200px] h-[200px]"
+      />
 
-      <div class="file-input-container">
-        <input
-            type="file"
-            ref="fileInput"
-            accept="image/*"
-            class="hidden"
-            @change="onFileSelected"
-        />
-        <button 
-            class="choose-file-button"
-            @click="triggerFileInput"
-        >
-          Choisir une image...
-        </button>
-      </div>
+      <v-file-input
+          v-model="selectedFile"
+          accept="image/*"
+          class="w-full"
+          label="Votre logo"
+          variant="outlined"
+          @change="onFileSelected"
+      ></v-file-input>
     </div>
 
     <div class="card-actions">
@@ -41,8 +32,10 @@
       </button>
     </div>
   </div>
+
 </template>
 
+
 <script setup>
 import {ref} from 'vue'
 import {useClient} from '@/plugins/api.js'
@@ -55,26 +48,18 @@ const props = defineProps({
 
 const emits = defineEmits(['closeRequested'])
 
-const fileInput = ref(null)
-const selectedFile = ref(null)
+const selectedFile = ref("")
 const fileUrl = ref(props.creator.images.logo)
-const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'
+const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png' // Chemin de votre image de secours
 
-const triggerFileInput = () => {
-  fileInput.value.click()
-}
-
-const onFileSelected = (event) => {
-  const file = event.target.files[0]
-  if (file) {
-    selectedFile.value = file
+const onFileSelected = () => {
+  if (selectedFile.value) {
     const reader = new FileReader()
-    reader.onload = (e) => {
-      fileUrl.value = e.target.result
+    reader.onload = (event) => {
+      fileUrl.value = event.target.result
     }
-    reader.readAsDataURL(file)
+    reader.readAsDataURL(selectedFile.value)
   } else {
-    selectedFile.value = null
     fileUrl.value = null
   }
 }
@@ -82,16 +67,15 @@ const onFileSelected = (event) => {
 const client = useClient()
 const publish = async () => {
   try {
-    const formData = new FormData()
+    const formData = new FormData();
     formData.append('file', selectedFile.value)
 
     const response = await client.post(
         `/api/creators/${props.creator.id}/logo`,
-        formData
-    )
+        formData)
 
-    props.creator.images.logo = `${response.data.blobUrl}?t=${Date.now()}`
-    emits('closeRequested')
+    props.creator.images.logo = `${response.data.blobUrl}?t=${Date.now()}`;
+    emits('closeRequested');
   } catch (error) {
     console.error(error)
   }
@@ -102,38 +86,3 @@ const cancel = () => {
 }
 </script>
 
-<style scoped>
-.image-preview-container {
-  @apply mb-5;
-  @apply w-full;
-  @apply flex;
-  @apply justify-center;
-  @apply items-center;
-  @apply overflow-hidden;
-  @apply rounded-lg;
-  @apply bg-gray-100;
-}
-
-.preview-image {
-  @apply w-[200px];
-  @apply h-[200px];
-  @apply object-cover;
-  @apply rounded-full;
-}
-
-.file-input-container {
-  @apply flex;
-  @apply justify-center;
-  @apply items-center;
-  @apply w-full;
-}
-
-.choose-file-button {
-  @apply px-4;
-  @apply py-2;
-  @apply primary;
-  @apply rounded-lg;
-  @apply cursor-pointer;
-}
-</style>
-