diff --git a/frontend/src/components/Error.jsx b/frontend/src/components/Error.jsx
new file mode 100644
index 0000000..710b6b5
--- /dev/null
+++ b/frontend/src/components/Error.jsx
@@ -0,0 +1,28 @@
+import "../index.css";
+
+/**
+ * Basic error modal
+ * @param error The error message
+ * @param clear Clear error function from parent
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function Error({error, clear}) {
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+            <div className="fixed inset-0 bg-black opacity-50 blur-lg"></div>
+            <div className="relative z-10 bg-white p-8 rounded-lg shadow-lg w-96 border-1 border-gray-400">
+                <h2 className="text-2xl font-semibold mb-4 text-red-600">An Error Occurred!</h2>
+                <p className="mb-4">{error}</p>
+                <div className="flex justify-end">
+                    <button
+                        onClick={clear}
+                        className="bg-red-500 hover:bg-red-600 text-white text-sm font-semibold py-1.5 px-3 rounded hover:cursor-pointer"
+                    >
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 9cc8d91..4072029 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -3,6 +3,7 @@ import {useNavigate} from "react-router-dom";
 import DirectoryList from "../components/DirectoryList.jsx";
 import PathDisplay from "../components/ PathDisplay.jsx";
 import Navbar from "../components/Navbar.jsx";
+import Error from "../components/Error.jsx";
 
 
 export default function Dashboard() {
@@ -11,6 +12,7 @@ export default function Dashboard() {
     const [showHidden, setShowHidden] = useState(false);
     const [selected, setSelected] = useState([]);
     const [files, setFiles] = useState([]);
+    const [error, setError] = useState(null);
     const navigate = useNavigate();
 
     useEffect(() => {
@@ -96,6 +98,11 @@ export default function Dashboard() {
      * Callback function for when the download button is clicked.
      */
     const downloadFiles = () => {
+        // Do not allow empty downloads
+        if (selected.length === 0) {
+            setError("Please select files/directories to download.");
+        }
+
         const download = async (paths) => {
             try {
                 const resp = await fetch("http://localhost:5000/v1/download", {
@@ -126,15 +133,27 @@ export default function Dashboard() {
         selected.forEach((file) => {
             targets.push(`/${path.join("/")}/${file}`);
         });
-        console.log(targets);
-        download(targets);
+
+        // TODO: Implement UI for errors
+        download(targets).catch((err) => {
+            setError(`Download error: ${err}.`)
+        });
     };
 
+    /**
+     * Clear the error in the error state.
+     */
+    const clearError = () => {
+        setError(null);
+    }
+
     return (
         <div className="w-full min-h-screen h-screen pb-8">
             <Navbar downloadFiles={downloadFiles}/>
             <div className="h-full w-full flex flex-col items-center justify-center pb-8">
 
+                {error && <Error error={error} clear={clearError}/>}
+
                 <PathDisplay path={path} updatePath={updatePath} backHome={backHome} backArrow={backArrow}/>
                 <div className="w-2/3 h-5/6 overflow-y-auto border-1 border-gray-300">
                     <DirectoryList dirs={files} showHidden={showHidden} appendPath={appendPath}