diff --git a/src/components/FileTable.vue b/src/components/FileTable.vue
index 7c1ad3d..b4e0f4c 100644
--- a/src/components/FileTable.vue
+++ b/src/components/FileTable.vue
@@ -133,6 +133,7 @@ export default {
             breadcrumbParts: [],
             isAddFilePopupVisible: false,
             newFileName: '',
+            isTransfering: false,
         };
     },
     async mounted() {
@@ -171,6 +172,7 @@ export default {
             return this.current_dir.split('/').filter(part => part);
         },
         async handleClickElem(file) {
+            if (this.isTransfering) return;
             if (file.type === 'directory') {
                 this.current_dir = this.current_dir === '/' ? '/' + file.basename : this.current_dir + '/' + file.basename;
                 this.breadcrumbParts = this.getBreadcrumbParts()
@@ -180,6 +182,7 @@ export default {
             }
         },
         async handleClickBreadcrumb(index) {
+            if (this.isTransfering) return;
             let dir = '/';
             if (index >= -1) {
                 dir = this.generateCrumbHref(index);
@@ -207,31 +210,78 @@ export default {
         },
         async onDrop(event) {
             event.preventDefault();
+            
             try {
+                const moveFilesOfFolder = async (folder) => {
+
+                    await this.createFolder(folder);
+
+                    for (const child of folder.children) {
+                        if (child.isDirectory) {
+                            await moveFilesOfFolder(child);
+                        } else {
+                            if (child.content && typeof child.content.arrayBuffer === 'function') {
+                                child.content = await child.content.arrayBuffer();
+                            }
+                            await this.moveFileToTarget(child);
+                        }
+                    }
+                };
+
+                this.isTransfering = true;
                 const file = this.file;
+                if (!file) return;
                 console.log('Fichier déposé :', file);
-                file.content = await file.content.arrayBuffer();
-                await this.moveFileToTarget(file);
+
+                if (file.isDirectory) {
+                    await moveFilesOfFolder(file);
+                } else {
+                    if (file.content && typeof file.content.arrayBuffer === 'function') {
+                        file.content = await file.content.arrayBuffer();
+                    }
+                    await this.moveFileToTarget(file);
+                }
+
+                this.isTransfering = false;
+
             } catch (error) {
-                console.error('Erreur lors du drag and drop :', error);
+                console.error('Erreur lors du drop :', error);
             }
         },
         async moveFileToTarget(file) {
             try {
                 const client = getClient();
-                const path = this.root_path + this.current_dir + file.name;
-                
+
+                // Assurez-vous que le chemin parent est correctement formaté
+                const parentPath = file.parentPath ? `${file.parentPath}/` : '';
+                const fullPath = `${this.root_path}${this.current_dir}${parentPath}${file.name}`;
+
                 if (ArrayBuffer.isView(file.content)) {
                     file.content = Buffer.from(file.content);
                 }
 
-                await client.putFileContents(path, file.content);
+                // Évitez les chemins incorrects en utilisant `path.normalize` si disponible
+                await client.putFileContents(fullPath, file.content);
 
                 // Recharge les fichiers après l'opération
                 await this.fetchFiles();
             } catch (error) {
                 console.error('Erreur lors du déplacement du fichier:', error);
             }
+        },
+        async createFolder(folder) {
+            try {
+                const client = getClient();
+
+                // Assurez-vous que le chemin parent est correctement formaté
+                const parentPath = folder.parentPath ? `${folder.parentPath}/` : '';
+                const fullPath = `${this.root_path}${this.current_dir}${parentPath}${folder.name}/`;
+
+                await client.createDirectory(fullPath);
+                await this.fetchFiles();
+            } catch (error) {
+                console.error('Erreur lors de la création du dossier :', error);
+            }
         }
     }
 };
diff --git a/src/components/WebContentViewer.vue b/src/components/WebContentViewer.vue
index f199463..726f199 100644
--- a/src/components/WebContentViewer.vue
+++ b/src/components/WebContentViewer.vue
@@ -32,7 +32,7 @@
                                     class="text-NcBlue w-6 h-6"
                                 />
                             </div>
-                            <span class="ml-2 truncate cursor-pointer">{{ file.fullPath }}</span>
+                            <span class="ml-2 truncate cursor-pointer">{{ file.name }}</span>
                         </div>
                     </div>
                     <div class="w-1/6 px-4 py-2 cursor-pointer">-</div>
@@ -56,7 +56,7 @@
                         </div>
                     </template>
                     <div class="w-4/6 flex items-center px-4 py-2 truncate cursor-pointer">
-                        {{ file.fullPath }}
+                        {{ file.name }}
                     </div>
                     <div class="w-2/6 py-2 cursor-pointer">
                         {{ formatFileSize(file.size) }}
@@ -69,9 +69,10 @@
 </template>
 
 <script>
-import JSZip from 'jszip';
+import JSZip, { files } from 'jszip';
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue';
 import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
+import path from 'path';
 
 export default {
     name: 'WebContentViewer',
@@ -156,11 +157,13 @@ export default {
 
                         if (!existing) {
                             existing = {
-                                name: partName,
+                                name: pathParts[i],
                                 isDirectory,
                                 size: isDirectory ? 0 : file._data.uncompressedSize,
                                 content: isDirectory ? null : '',  // Initialiser 'content' pour les fichiers
                                 children: isDirectory ? [] : null,
+                                //remove the name of the file from the path
+                                parentPath: pathParts.slice(0, i).join('/'),
                                 unzip: promise
                             };
                             currentLevel.push(existing);
@@ -206,9 +209,35 @@ export default {
         },
         async onDragStart(file) {
             console.log('Drag start', file);
-            await file.unzip;
-            this.$emit('file-upload', file); 
-        }
+
+            const getFilesFromFolder = (folder) => {
+                const files = [];
+                if (!folder.children || folder.children.length === 0) return files;
+
+                for (let i = 0; i < folder.children.length; i++) {
+                    const child = folder.children[i];
+                    if (child.isDirectory) {
+                        files.push(...getFilesFromFolder(child));
+                    } else {
+                        files.push(child);
+                    }
+                }
+                return files;
+            };
+
+            try {
+                if (file.isDirectory) {
+                    const files = getFilesFromFolder(file);
+                    const filesToUnzip = files.map(file => file.unzip);
+                    await Promise.all(filesToUnzip);
+                } else {
+                    await file.unzip;
+                }
+                this.$emit('file-upload', file);
+            } catch (error) {
+                console.error('Erreur lors du drag start :', error);
+            }
+        },
     },
 };
 </script>