diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
index c56e5517..b91004f7 100644
--- a/app/components/DragAndDrop.vue
+++ b/app/components/DragAndDrop.vue
@@ -1,106 +1,156 @@
 <script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+import { onMounted, onUnmounted, ref } from "vue";
+import DragAndDropInline from "./DragAndDrop/DragAndDropInline.vue";
+import DragAndDropOverlay from "./DragAndDrop/DragAndDropOverlay.vue";
 
-const { multiple, accept, loading, showExtensions } = defineProps({
+const {
+  multiple,
+  accept,
+  loading,
+  showExtensions,
+  fullscreen,
+  inline,
+  showOverlay,
+  texts = {
+    idle: "Click or drag and drop",
+    drop: "Drop files here",
+    loading: "Loading...",
+  },
+} = defineProps({
   multiple: { type: Boolean, default: false },
   accept: { type: String, default: "" },
   loading: { type: Boolean, default: false },
   showExtensions: { type: Boolean, default: true },
+  fullscreen: { type: Boolean, default: false },
+  inline: { type: Boolean, default: true },
+  showOverlay: { type: Boolean, default: true },
+  texts: { type: Object, default: undefined },
 });
 
 const emit = defineEmits(["files-selected"]);
 
 const isDragging = ref(false);
+const isInternalDrag = ref(false);
+const dragCounter = ref(0);
 const fileInput = ref(undefined);
 
 function triggerFileDialog() {
   fileInput.value?.click();
 }
 
-function handleDrop(event) {
+function onDragEnter(event) {
+  if (!isInternalDrag.value && event.dataTransfer.types.includes("Files")) {
+    dragCounter.value += 1;
+    isDragging.value = true;
+  }
+}
+
+function onDragLeave() {
+  dragCounter.value -= 1;
+  if (dragCounter.value <= 0) {
+    isDragging.value = false;
+    dragCounter.value = 0;
+  }
+}
+
+function onDragOver(event) {
+  if (!isInternalDrag.value && event.dataTransfer.types.includes("Files")) {
+    event.preventDefault();
+  }
+}
+
+function onDrop(event) {
+  event.preventDefault();
+  dragCounter.value = 0;
   isDragging.value = false;
   const files = [...event.dataTransfer.files];
-  emit("files-selected", files);
+  if (files.length > 0) {
+    emit("files-selected", files);
+  }
+}
+
+function onKeyDown(event) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    isDragging.value = false;
+    dragCounter.value = 0;
+  }
 }
 
 function handleFileSelect(event) {
   const files = [...event.target.files];
-  emit("files-selected", files);
+  if (files.length > 0) {
+    emit("files-selected", files);
+  }
   event.target.value = "";
 }
+
+function onInternalDragStart() {
+  isInternalDrag.value = true;
+}
+
+function onInternalDragEnd() {
+  isInternalDrag.value = false;
+}
+
+onMounted(() => {
+  globalThis.addEventListener("dragstart", onInternalDragStart);
+  globalThis.addEventListener("dragend", onInternalDragEnd);
+  globalThis.addEventListener("dragenter", onDragEnter);
+  globalThis.addEventListener("dragover", onDragOver);
+  globalThis.addEventListener("dragleave", onDragLeave);
+  globalThis.addEventListener("drop", onDrop);
+  globalThis.addEventListener("keydown", onKeyDown);
+});
+
+onUnmounted(() => {
+  globalThis.removeEventListener("dragstart", onInternalDragStart);
+  globalThis.removeEventListener("dragend", onInternalDragEnd);
+  globalThis.removeEventListener("dragenter", onDragEnter);
+  globalThis.removeEventListener("dragover", onDragOver);
+  globalThis.removeEventListener("dragleave", onDragLeave);
+  globalThis.removeEventListener("drop", onDrop);
+  globalThis.removeEventListener("keydown", onKeyDown);
+});
+
+defineExpose({ triggerFileDialog });
 </script>
 
 <template>
-  <v-hover v-slot="{ isHovering, props: hoverProps }">
-    <GlassCard
-      v-bind="hoverProps"
-      class="text-center cursor-pointer overflow-hidden border-opacity-10 border-white"
-      :class="{
-        'elevation-4': isHovering || isDragging,
-        'elevation-0': !(isHovering || isDragging),
-      }"
-      :style="{
-        position: 'relative',
-        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        background:
-          isHovering || isDragging
-            ? 'rgba(255, 255, 255, 0.08) !important'
-            : 'rgba(255, 255, 255, 0.03) !important',
-        transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
-        pointerEvents: loading ? 'none' : 'auto',
-        opacity: loading ? 0.6 : 1,
-      }"
-      variant="panel"
-      padding="pa-0"
-      @click="triggerFileDialog"
-      @dragover.prevent="isDragging = true"
-      @dragleave.prevent="isDragging = false"
-      @drop.prevent="handleDrop"
-    >
-      <v-card-text class="pa-8">
-        <v-sheet
-          class="mx-auto mb-6 d-flex align-center justify-center"
-          :color="isHovering || isDragging ? 'white' : 'rgba(255, 255, 255, 0.1)'"
-          rounded="circle"
-          width="80"
-          height="80"
-          style="transition: all 0.3s ease"
-        >
-          <v-icon
-            :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
-            size="40"
-            :color="isHovering || isDragging ? 'primary' : 'white'"
-            :class="{ rotating: loading }"
-          />
-        </v-sheet>
-
-        <v-card-title
-          class="text-h6 font-weight-bold justify-center pa-0 mb-1 text-white"
-          style="transition: color 0.3s ease"
-        >
-          {{
-            loading ? "Uploading..." : isDragging ? "Drop to upload" : "Click or Drag & Drop files"
-          }}
-        </v-card-title>
-
-        <v-card-subtitle v-if="showExtensions" class="text-body-2 pa-0">
-          {{ accept ? `(${accept} files)` : "All files allowed" }}
-        </v-card-subtitle>
-      </v-card-text>
-
-      <input
-        ref="fileInput"
-        type="file"
-        class="d-none"
-        :multiple="multiple"
-        :accept="accept"
-        @change="handleFileSelect"
-      />
-    </GlassCard>
-  </v-hover>
+  <DragAndDropInline
+    v-if="inline"
+    :is-dragging="isDragging"
+    :loading="loading"
+    :texts="texts"
+    :accept="accept"
+    :show-extensions="showExtensions"
+    @click="triggerFileDialog"
+  />
+
+  <DragAndDropOverlay
+    v-if="isDragging && showOverlay"
+    :is-dragging="isDragging"
+    :show-overlay="showOverlay"
+    :fullscreen="fullscreen"
+    :loading="loading"
+    :texts="texts"
+    :multiple="multiple"
+    :accept="accept"
+    :show-extensions="showExtensions"
+  />
+
+  <input
+    ref="fileInput"
+    type="file"
+    class="d-none"
+    :multiple="multiple"
+    :accept="accept"
+    @change="handleFileSelect"
+  />
 </template>
 
-<style scoped>
+<style>
 .rotating {
   animation: rotate 1s linear infinite;
 }
diff --git a/app/components/DragAndDrop/DragAndDropInline.vue b/app/components/DragAndDrop/DragAndDropInline.vue
new file mode 100644
index 00000000..082c0e0b
--- /dev/null
+++ b/app/components/DragAndDrop/DragAndDropInline.vue
@@ -0,0 +1,73 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+
+const { isDragging, loading, texts, accept, showExtensions } = defineProps({
+  isDragging: { type: Boolean, required: true },
+  loading: { type: Boolean, required: true },
+  texts: {
+    type: Object,
+    default: () => ({
+      idle: "Click or drag and drop",
+      drop: "Drop files here",
+      loading: "Loading...",
+    }),
+  },
+  accept: { type: String, default: "" },
+  showExtensions: { type: Boolean, required: true },
+});
+
+const emit = defineEmits(["click"]);
+</script>
+
+<template>
+  <v-hover v-slot="{ isHovering, props: hoverProps }">
+    <GlassCard
+      v-bind="hoverProps"
+      class="drag-card-inline text-center cursor-pointer transition-swing"
+      :class="{ 'dragging-active': isDragging, 'elevation-8': isHovering }"
+      variant="ui"
+      @click="emit('click')"
+    >
+      <v-sheet
+        class="mx-auto mb-4 d-flex align-center justify-center transition-swing"
+        :color="isHovering || isDragging ? 'primary' : 'rgba(255,255,255,0.05)'"
+        rounded="circle"
+        width="64"
+        height="64"
+      >
+        <v-icon
+          :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
+          size="32"
+          :color="isHovering || isDragging ? 'white' : 'primary'"
+          :class="{ rotating: loading }"
+        />
+      </v-sheet>
+
+      <v-card-text class="pa-0">
+        <v-sheet class="text-h6 font-weight-bold text-white d-block mb-1 bg-transparent">
+          {{ loading ? texts.loading : isDragging ? texts.drop : texts.idle }}
+        </v-sheet>
+        <v-sheet
+          v-if="accept && showExtensions"
+          class="text-body-2 text-white opacity-60 bg-transparent"
+        >
+          {{ accept }}
+        </v-sheet>
+      </v-card-text>
+    </GlassCard>
+  </v-hover>
+</template>
+
+<style scoped>
+.drag-card-inline {
+  border: 2px dashed rgba(255, 255, 255, 0.1) !important;
+  background: rgba(255, 255, 255, 0.03) !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.drag-card-inline:hover,
+.drag-card-inline.dragging-active {
+  border-color: rgba(var(--v-theme-primary), 0.4) !important;
+  background: rgba(var(--v-theme-primary), 0.05) !important;
+}
+</style>
diff --git a/app/components/DragAndDrop/DragAndDropOverlay.vue b/app/components/DragAndDrop/DragAndDropOverlay.vue
new file mode 100644
index 00000000..5d6ca179
--- /dev/null
+++ b/app/components/DragAndDrop/DragAndDropOverlay.vue
@@ -0,0 +1,162 @@
+<script setup>
+const { isDragging, showOverlay, fullscreen, loading, texts, multiple, accept, showExtensions } =
+  defineProps({
+    isDragging: { type: Boolean, required: true },
+    showOverlay: { type: Boolean, required: true },
+    fullscreen: { type: Boolean, required: true },
+    loading: { type: Boolean, required: true },
+    texts: {
+      type: Object,
+      default: () => ({
+        idle: "Click or drag and drop",
+        drop: "Drop files here",
+        loading: "Loading...",
+      }),
+    },
+    multiple: { type: Boolean, required: true },
+    accept: { type: String, default: "" },
+    showExtensions: { type: Boolean, required: true },
+  });
+</script>
+
+<template>
+  <Teleport to="body">
+    <v-fade-transition>
+      <v-overlay
+        v-if="isDragging && showOverlay"
+        :model-value="true"
+        :scrim="false"
+        class="drag-overlay"
+        content-class="w-100 h-100"
+        persistent
+      >
+        <v-container class="fill-height" :fluid="fullscreen">
+          <v-row align="center" justify="center">
+            <v-col
+              cols="12"
+              :md="fullscreen ? 12 : 8"
+              :lg="fullscreen ? 12 : 6"
+              class="text-center"
+            >
+              <v-sheet
+                class="mx-auto mb-8 pulse-animation d-flex align-center justify-center"
+                color="primary"
+                rounded="circle"
+                :width="fullscreen ? 140 : 120"
+                :height="fullscreen ? 140 : 120"
+              >
+                <v-icon icon="mdi-cloud-upload" :size="fullscreen ? 80 : 64" color="white" />
+              </v-sheet>
+
+              <v-sheet
+                class="font-weight-black mb-6 text-white text-glow d-block bg-transparent"
+                :class="fullscreen ? 'text-h2' : 'text-h3'"
+              >
+                {{
+                  loading ? texts.loading : fullscreen ? "Drop your files here" : "Drop your files"
+                }}
+              </v-sheet>
+
+              <v-sheet
+                class="text-white opacity-70 d-block mb-8 mx-auto bg-transparent"
+                :class="fullscreen ? 'text-h5' : 'text-h6'"
+                :style="fullscreen ? 'max-width:700px' : 'max-width:500px'"
+              >
+                {{
+                  multiple
+                    ? "Drag your files anywhere on the screen to import them."
+                    : "Drag your file anywhere on the screen to import it."
+                }}
+              </v-sheet>
+
+              <v-chip
+                v-if="accept && showExtensions"
+                color="white"
+                variant="outlined"
+                :size="fullscreen ? 'x-large' : 'large'"
+                class="px-8 glow-chip"
+              >
+                Accepted formats: {{ accept }}
+              </v-chip>
+
+              <v-sheet
+                class="text-white opacity-40 d-block mt-12 bg-transparent"
+                :class="fullscreen ? 'text-h6' : 'text-body-2'"
+              >
+                Press
+                <v-kbd class="escape-kbd mx-1">Esc</v-kbd>
+                to cancel
+              </v-sheet>
+            </v-col>
+          </v-row>
+        </v-container>
+
+        <v-sheet v-if="fullscreen" class="drag-frame-border" color="transparent" />
+      </v-overlay>
+    </v-fade-transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.drag-overlay :deep(.v-overlay__content) {
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(24px);
+}
+
+.drag-frame-border {
+  position: absolute;
+  inset: 32px;
+  border: 4px dashed rgba(255, 255, 255, 0.3);
+  border-radius: 32px;
+  pointer-events: none;
+  animation: border-glimmer 4s infinite ease-in-out;
+}
+
+.glow-chip {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border-color: rgba(255, 255, 255, 0.4) !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.escape-kbd {
+  padding: 6px 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.2);
+  font-weight: bold;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.text-glow {
+  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+}
+
+.pulse-animation {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0px rgba(var(--v-theme-primary), 0.4);
+  }
+  70% {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 20px rgba(var(--v-theme-primary), 0);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0px rgba(var(--v-theme-primary), 0);
+  }
+}
+
+@keyframes border-glimmer {
+  0%,
+  100% {
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+  50% {
+    border-color: rgba(var(--v-theme-primary), 0.4);
+  }
+}
+</style>
diff --git a/app/components/FileSelector.vue b/app/components/FileSelector.vue
index cfbfe039..bbbf593a 100644
--- a/app/components/FileSelector.vue
+++ b/app/components/FileSelector.vue
@@ -9,10 +9,11 @@ const schema = schemas.opengeodeweb_back.allowed_files;
 
 const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
 
-const { multiple, files, auto_upload } = defineProps({
+const { multiple, files, auto_upload, show_overlay } = defineProps({
   multiple: { type: Boolean, required: true },
   files: { type: Array, default: () => [] },
   auto_upload: { type: Boolean, default: true },
+  show_overlay: { type: Boolean, default: true },
 });
 
 const internal_files = ref(files);
@@ -63,6 +64,7 @@ await get_allowed_files();
       accept,
       files: internal_files,
       auto_upload: internal_auto_upload,
+      show_overlay,
     }"
     @files_uploaded="files_uploaded_event"
   />
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index 6438e574..9c46ccdc 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -1,15 +1,17 @@
 <script setup>
 import DragAndDrop from "@ogw_front/components/DragAndDrop";
+import GlassCard from "@ogw_front/components/GlassCard";
 import { useGeodeStore } from "@ogw_front/stores/geode";
 
 const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
-const { multiple, accept, files, auto_upload, mini } = defineProps({
+const { multiple, accept, files, auto_upload, mini, show_overlay } = defineProps({
   multiple: { type: Boolean, required: true },
   accept: { type: String, required: true },
   files: { type: Array, required: false, default: [] },
   auto_upload: { type: Boolean, required: false, default: false },
   mini: { type: Boolean, required: false, default: false },
+  show_overlay: { type: Boolean, required: false, default: true },
 });
 
 const geodeStore = useGeodeStore();
@@ -17,6 +19,7 @@ const geodeStore = useGeodeStore();
 const internal_files = ref(files);
 const loading = ref(false);
 const files_uploaded = ref(false);
+const dragAndDropRef = ref(undefined);
 
 const toggle_loading = useToggle(loading);
 
@@ -71,20 +74,53 @@ watch(internal_files, (value) => {
 
 <template>
   <DragAndDrop
+    v-if="!internal_files.length"
+    ref="dragAndDropRef"
     :multiple="multiple"
     :accept="accept"
     :loading="loading"
     :show-extensions="false"
+    :inline="true"
+    :show-overlay="show_overlay"
+    :texts="{
+      idle: 'Select files',
+      drop: 'Drop files here',
+      loading: 'Loading...',
+    }"
     @files-selected="processSelectedFiles"
   />
 
-  <v-card-text v-if="internal_files.length" class="mt-6">
+  <DragAndDrop
+    v-else
+    ref="dragAndDropRef"
+    :multiple="multiple"
+    :accept="accept"
+    :loading="loading"
+    :show-extensions="false"
+    :inline="false"
+    :show-overlay="show_overlay"
+    @files-selected="processSelectedFiles"
+  />
+
+  <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white"> Selected Files </span>
+      <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>
       <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
         {{ internal_files.length }}
       </v-chip>
+      <v-spacer />
+      <v-btn
+        v-if="multiple"
+        variant="text"
+        color="white"
+        size="small"
+        class="text-none opacity-60"
+        prepend-icon="mdi-plus"
+        @click="dragAndDropRef?.triggerFileDialog"
+      >
+        Add
+      </v-btn>
     </v-sheet>
 
     <v-sheet class="d-flex flex-wrap ga-2" color="transparent">
@@ -108,7 +144,7 @@ watch(internal_files, (value) => {
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-6 pa-0">
+  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-8 pa-0">
     <v-btn
       color="primary"
       variant="flat"
@@ -124,3 +160,20 @@ watch(internal_files, (value) => {
     </v-btn>
   </v-card-actions>
 </template>
+
+<style scoped>
+.border-dashed {
+  border: 2px dashed rgba(255, 255, 255, 0.1) !important;
+  transition: all 0.3s ease;
+}
+
+.border-dashed:hover {
+  border-color: rgba(var(--v-theme-primary), 0.4) !important;
+  background: rgba(var(--v-theme-primary), 0.02) !important;
+}
+
+.custom-upload-btn {
+  letter-spacing: 0.5px;
+  box-shadow: 0 4px 15px rgba(var(--v-theme-primary), 0.3);
+}
+</style>