diff --git a/app/components/timeline/MediaBin.tsx b/app/components/timeline/MediaBin.tsx
index 454fe966..4c821272 100644
--- a/app/components/timeline/MediaBin.tsx
+++ b/app/components/timeline/MediaBin.tsx
@@ -230,6 +230,29 @@ const AudioPreview = ({ src }: { src: string }) => {
   );
 };
 
+// Empty state component for when no media files are present
+const EmptyState = memo(({ onUploadClick }: { onUploadClick: () => void }) => {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-center">
+      <button
+        onClick={onUploadClick}
+        className="flex flex-col items-center gap-3 p-6 rounded-lg transition-colors hover:bg-accent/30 cursor-pointer border-2 border-dashed border-border/30 hover:border-primary/50"
+        title="Click to import media"
+      >
+        <Upload className="h-10 w-10 text-muted-foreground/50" />
+        <div>
+          <p className="text-xs text-muted-foreground font-medium">
+            No media files
+          </p>
+          <p className="text-xs text-muted-foreground/70 mt-0.5">
+            Import videos, images, or audio to get started
+          </p>
+        </div>
+      </button>
+    </div>
+  );
+});
+
 // This is required for the data router
 export function loader() {
   return null;
@@ -251,6 +274,9 @@ export default function MediaBin() {
   // Drag & Drop state for external file imports
   const [isDragOver, setIsDragOver] = useState(false);
 
+  // File input ref for click-to-upload
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
   // Arrange & sorting state
   const [arrangeMode, setArrangeMode] = useState<"default" | "group">(
     "default"
@@ -360,6 +386,28 @@ export default function MediaBin() {
     [onAddMedia]
   );
 
+  const handleUploadClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileInputChange = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(e.target.files || []);
+      for (const file of files) {
+        try {
+          await onAddMedia(file);
+        } catch (err) {
+          console.error("Failed to import file:", file.name, err);
+        }
+      }
+      // Reset input so same file can be selected again
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [onAddMedia]
+  );
+
   const getMediaIcon = (mediaType: string) => {
     switch (mediaType) {
       case "video":
@@ -711,13 +759,7 @@ export default function MediaBin() {
             ))}
 
             {defaultArrangedItems.length === 0 && (
-              <div className="flex flex-col items-center justify-center py-8 text-center">
-                <FileImage className="h-8 w-8 text-muted-foreground/50 mb-3" />
-                <p className="text-xs text-muted-foreground">No media files</p>
-                <p className="text-xs text-muted-foreground/70 mt-0.5">
-                  Import videos, images, or audio to get started
-                </p>
-              </div>
+              <EmptyState onUploadClick={handleUploadClick} />
             )}
           </>
         )}
@@ -884,13 +926,7 @@ export default function MediaBin() {
               ))}
 
             {counts.all === 0 && (
-              <div className="flex flex-col items-center justify-center py-8 text-center">
-                <FileImage className="h-8 w-8 text-muted-foreground/50 mb-3" />
-                <p className="text-xs text-muted-foreground">No media files</p>
-                <p className="text-xs text-muted-foreground/70 mt-0.5">
-                  Import videos, images, or audio to get started
-                </p>
-              </div>
+              <EmptyState onUploadClick={handleUploadClick} />
             )}
           </div>
         )}
@@ -1019,6 +1055,16 @@ export default function MediaBin() {
           </div>
         </div>
       )}
+
+      {/* Hidden file input for click-to-upload */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="video/*,image/*,audio/*"
+        multiple
+        className="hidden"
+        onChange={handleFileInputChange}
+      />
     </div>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6acb83ba..1ee5ee10 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2080,11 +2080,11 @@ packages:
     peerDependencies:
       ajv: ^8.8.2
 
-  ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+  ajv@6.14.0:
+    resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
 
-  ajv@8.17.1:
-    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+  ajv@8.18.0:
+    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
 
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
@@ -4958,7 +4958,7 @@ snapshots:
 
   '@eslint/eslintrc@3.3.1':
     dependencies:
-      ajv: 6.12.6
+      ajv: 6.14.0
       debug: 4.4.1
       espree: 10.4.0
       globals: 14.0.0
@@ -6272,27 +6272,27 @@ snapshots:
 
   acorn@8.15.0: {}
 
-  ajv-formats@2.1.1(ajv@8.17.1):
+  ajv-formats@2.1.1(ajv@8.18.0):
     optionalDependencies:
-      ajv: 8.17.1
+      ajv: 8.18.0
 
-  ajv-keywords@3.5.2(ajv@6.12.6):
+  ajv-keywords@3.5.2(ajv@6.14.0):
     dependencies:
-      ajv: 6.12.6
+      ajv: 6.14.0
 
-  ajv-keywords@5.1.0(ajv@8.17.1):
+  ajv-keywords@5.1.0(ajv@8.18.0):
     dependencies:
-      ajv: 8.17.1
+      ajv: 8.18.0
       fast-deep-equal: 3.1.3
 
-  ajv@6.12.6:
+  ajv@6.14.0:
     dependencies:
       fast-deep-equal: 3.1.3
       fast-json-stable-stringify: 2.1.0
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  ajv@8.17.1:
+  ajv@8.18.0:
     dependencies:
       fast-deep-equal: 3.1.3
       fast-uri: 3.0.6
@@ -6993,7 +6993,7 @@ snapshots:
       '@humanwhocodes/retry': 0.4.3
       '@types/estree': 1.0.8
       '@types/json-schema': 7.0.15
-      ajv: 6.12.6
+      ajv: 6.14.0
       chalk: 4.1.2
       cross-spawn: 7.0.6
       debug: 4.4.1
@@ -8276,15 +8276,15 @@ snapshots:
   schema-utils@3.3.0:
     dependencies:
       '@types/json-schema': 7.0.15
-      ajv: 6.12.6
-      ajv-keywords: 3.5.2(ajv@6.12.6)
+      ajv: 6.14.0
+      ajv-keywords: 3.5.2(ajv@6.14.0)
 
   schema-utils@4.3.3:
     dependencies:
       '@types/json-schema': 7.0.15
-      ajv: 8.17.1
-      ajv-formats: 2.1.1(ajv@8.17.1)
-      ajv-keywords: 5.1.0(ajv@8.17.1)
+      ajv: 8.18.0
+      ajv-formats: 2.1.1(ajv@8.18.0)
+      ajv-keywords: 5.1.0(ajv@8.18.0)
 
   semver@6.3.1: {}