diff --git a/src/App.jsx b/src/App.jsx
index 3a19501..b20cd17 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -106,6 +106,11 @@ function App() {
 		}
 	}, [roster]);
 
+	const handleDrag = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	};
+
 	return (
 		<div
 			className="App"
@@ -141,6 +146,17 @@ function App() {
 						htmlFor="rosterUpload"
 						className={"rosterUpload " + (roster ? "rosterUploaded" : "")}
 						id="rosterUploadContainer"
+						onDrop={(e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+								e.target.files = e.dataTransfer.files;
+								handleFileSelect(e);
+							}
+						}}
+						onDragEnter={handleDrag}
+						onDragLeave={handleDrag}
+						onDragOver={handleDrag}
 					>
 						<div id="preloadContainer">
 							<span>Upload roster file (.ros, .rosz)</span>
diff --git a/src/assets/Demo0.png b/src/assets/Demo0.png
index 3a741bd..8c84bfb 100644
Binary files a/src/assets/Demo0.png and b/src/assets/Demo0.png differ
diff --git a/src/assets/Demo1.png b/src/assets/Demo1.png
index ef785a3..3f8516f 100644
Binary files a/src/assets/Demo1.png and b/src/assets/Demo1.png differ