diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
index 5438737f..f8cbb639 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -3,7 +3,7 @@
 import { useDragDrop } from "@/hooks/use-drag-drop";
 import { processMediaFiles } from "@/lib/media-processing";
 import { useMediaStore, type MediaItem } from "@/stores/media-store";
-import { Image, Music, Plus, Upload, Video } from "lucide-react";
+import { Image, Loader2, Music, Plus, Upload, Video } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -203,9 +203,6 @@ export function MediaView() {
         className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`}
         {...dragProps}
       >
-        {/* Show overlay when dragging files over the panel */}
-        <DragOverlay isVisible={isDragOver} />
-
         <div className="p-3 pb-2">
           {/* Search and filter controls */}
           <div className="flex gap-2">
@@ -227,47 +224,45 @@ export function MediaView() {
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />
+            <Button
+              variant="outline"
+              size="lg"
+              onClick={handleFileSelect}
+              disabled={isProcessing}
+              className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"
+            >
+              {isProcessing ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Plus className="h-4 w-4" />
+              )}
+            </Button>
           </div>
         </div>
 
         <div className="flex-1 overflow-y-auto p-3 pt-0">
-          {/* Show message if no media, otherwise show media grid */}
-          {filteredMediaItems.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-8 text-center h-full">
-              <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
-                <Image className="h-8 w-8 text-muted-foreground" />
-              </div>
-              <p className="text-sm text-muted-foreground">
-                No media in project
-              </p>
-              <p className="text-xs text-muted-foreground/70 mt-1">
-                Drag files here or use the button below
-              </p>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleFileSelect}
-                disabled={isProcessing}
-                className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center mt-2"
-              >
-                {isProcessing ? (
-                  <>
-                    <Upload className="h-4 w-4 animate-spin" />
-                    <span className="hidden md:inline ml-2">{progress}%</span>
-                  </>
-                ) : (
-                  <>
-                    <Plus className="h-4 w-4" />
-                    <span
-                      className="hidden sm:inline ml-2"
-                      aria-label="Add file"
-                    >
-                      Add
-                    </span>
-                  </>
-                )}
-              </Button>
-            </div>
+          {(isDragOver || filteredMediaItems.length === 0) ? (
+            <DragOverlay
+              isVisible={true}
+              title={
+                isDragOver
+                  ? "Drop files here"
+                  : mediaItems.length === 0
+                    ? "No media in project"
+                    : "No media found"
+              }
+              description={
+                isDragOver
+                  ? "Release to add files"
+                  : mediaItems.length === 0
+                    ? "Drag and drop your images, videos, or audio files here to get started"
+                    : "No media matches your current search or filter. Try adjusting your filters or add new media."
+              }
+              isProcessing={isProcessing}
+              progress={progress}
+              onClick={handleFileSelect}
+              isEmptyState={filteredMediaItems.length === 0 && !isDragOver}
+            />
           ) : (
             <div
               className="grid gap-2"
diff --git a/apps/web/src/components/ui/drag-overlay.tsx b/apps/web/src/components/ui/drag-overlay.tsx
index ba6fe08f..eb190e89 100644
--- a/apps/web/src/components/ui/drag-overlay.tsx
+++ b/apps/web/src/components/ui/drag-overlay.tsx
@@ -1,25 +1,91 @@
-import { Upload } from "lucide-react";
+import { Upload, Plus, Image } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface DragOverlayProps {
   isVisible: boolean;
   title?: string;
   description?: string;
+  isProcessing?: boolean;
+  progress?: number;
+  onClick?: () => void;
+  isEmptyState?: boolean;
 }
 
 export function DragOverlay({
   isVisible,
   title = "Drop files here",
   description = "Images, videos, and audio files",
+  isProcessing = false,
+  progress = 0,
+  onClick,
+  isEmptyState = false,
 }: DragOverlayProps) {
   if (!isVisible) return null;
 
+  const handleClick = (e: React.MouseEvent) => {
+    if (isProcessing || !onClick) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onClick();
+  };
+
   return (
-    <div className="absolute inset-0 bg-accent/20 backdrop-blur-lg border-2 border-dashed border-accent flex items-center justify-center z-10 pointer-events-none">
-      <div className="text-center">
-        <Upload className="h-8 w-8 text-accent mx-auto mb-2" />
-        <p className="text-sm font-medium text-accent">{title}</p>
-        <p className="text-xs text-muted-foreground">{description}</p>
+    <div
+      className="flex flex-col items-center justify-center h-full min-h-[300px] text-center cursor-pointer rounded-lg border-2 border-dashed border-primary/30 hover:border-primary/50 hover:bg-primary/5 transition-all duration-200 p-8 z-10 bg-background/50 backdrop-blur-sm"
+      onClick={handleClick}
+    >
+      <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary/10 to-primary/20 flex items-center justify-center mb-6 border border-primary/20">
+        {isProcessing ? (
+          <Upload className="h-10 w-10 text-primary animate-spin" />
+        ) : isEmptyState ? (
+          <Image className="h-10 w-10 text-primary" />
+        ) : (
+          <Upload className="h-10 w-10 text-primary" />
+        )}
       </div>
+
+      <div className="space-y-2 mb-6">
+        <h3 className="text-lg font-medium text-foreground">
+          {isProcessing ? "Processing files..." : title}
+        </h3>
+        <p className="text-sm text-muted-foreground max-w-sm">
+          {isProcessing
+            ? `Processing your files (${progress}%)`
+            : description
+          }
+        </p>
+      </div>
+
+      {!isProcessing && (
+        <div className="flex flex-col items-center gap-3">
+          <Button
+            variant="default"
+            size="lg"
+            onClick={handleClick}
+            className="gap-2 px-6"
+          >
+            <Plus className="h-5 w-5" />
+            {isEmptyState ? "Choose Files" : "Browse Files"}
+          </Button>
+          <p className="text-xs text-muted-foreground/60">
+            {isEmptyState
+              ? "Supports images, videos, and audio files"
+              : "Or drop your files here"
+            }
+          </p>
+        </div>
+      )}
+
+      {isProcessing && (
+        <div className="w-full max-w-xs">
+          <div className="w-full bg-muted/50 rounded-full h-2">
+            <div
+              className="bg-primary h-2 rounded-full transition-all duration-300"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }