diff --git a/src/App.css b/src/App.css
index 1cf7f5e..4cf6cb2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -27,16 +27,16 @@ body {
 
   /* Track */
   ::-webkit-scrollbar-track {
-    @apply bg-zinc-200 dark:bg-zinc-700 rounded-lg;
+    @apply bg-zinc-700 rounded-lg;
   }
 
   /* Handle */
   ::-webkit-scrollbar-thumb {
-    @apply bg-zinc-400 dark:bg-zinc-500 rounded-xl;
+    @apply bg-zinc-500 rounded-xl;
   }
 
   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
-    @apply bg-zinc-500 dark:bg-zinc-400 rounded-lg;
+    @apply bg-zinc-400 rounded-lg;
   }
 }
diff --git a/src/components/DragAndDrop.tsx b/src/components/DragAndDrop.tsx
index e96f591..76dc45a 100644
--- a/src/components/DragAndDrop.tsx
+++ b/src/components/DragAndDrop.tsx
@@ -13,20 +13,33 @@ interface DragAndDropProps {
   onFile: (path: string) => void;
 }
 
-type HoverState = "off" | "valid" | "invalid";
-
 export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
-  const [isHovering, setIsHovering] = useState<HoverState>("off");
+  const [hoverState, setIsHovering] = useState<
+    | {
+        state: "off" | "valid";
+      }
+    | {
+        state: "invalid";
+        detail: string;
+      }
+  >({ state: "off" });
 
-  async function isValid(paths: string[]): Promise<boolean> {
-    return paths.length === 1 && paths[0].endsWith(".zip") && exists(paths[0]);
+  async function isValid(
+    paths: string[]
+  ): Promise<{ valid: true } | { valid: false; detail: string }> {
+    if (paths.length !== 1) return { valid: false, detail: "Only one file" };
+    if (!paths[0].endsWith(".zip"))
+      return { valid: false, detail: "Not a .zip file" };
+    if (!(await exists(paths[0])))
+      return { valid: false, detail: "File does not exist" };
+    return { valid: true };
   }
 
   useEffect(() => {
     const unlistenDrop = listen<DragDropEvent & { type: "drop" }>(
       "tauri://drag-drop",
       async (event) => {
-        setIsHovering("off");
+        setIsHovering({ state: "off" });
         if (await isValid(event.payload.paths)) {
           onFile(event.payload.paths[0]);
         }
@@ -36,13 +49,14 @@ export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
     const unlistenEnter = listen<DragDropEvent & { type: "enter" }>(
       "tauri://drag-enter",
       async (event) => {
-        if (await isValid(event.payload.paths)) setIsHovering("valid");
-        else setIsHovering("invalid");
+        const result = await isValid(event.payload.paths);
+        if (result.valid) setIsHovering({ state: "valid" });
+        else setIsHovering({ state: "invalid", detail: result.detail });
       }
     ).then((fn) => fn);
 
     const unlistenLeave = listen("tauri://drag-leave", () => {
-      setIsHovering("off");
+      setIsHovering({ state: "off" });
     }).then((fn) => fn);
 
     return () => {
@@ -86,22 +100,29 @@ export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
         className={cn(
           "flex flex-col items-center justify-center w-full h-64 border-2  border-dashed rounded-lg cursor-pointer  bg-zinc-700 border-zinc-600",
           {
-            "hover:bg-zinc-800  hover:border-zinc-500": isHovering === "off",
-            "bg-zinc-800 border-zinc-500": isHovering === "valid",
+            "hover:bg-zinc-800  hover:border-zinc-500":
+              hoverState.state === "off",
+            "bg-zinc-800 border-zinc-500": hoverState.state === "valid",
             "bg-red-800/25 border-red-700/25 cursor-not-allowed":
-              isHovering === "invalid",
+              hoverState.state === "invalid",
           }
         )}
       >
         <div className="flex flex-col items-center justify-center pt-5 pb-6">
-          <FolderArrowDownIcon className="w-8 h-8 mb-4 text-zinc-500 dark:text-zinc-400" />
-          <p className="mb-2 text-sm text-zinc-500 dark:text-zinc-400">
-            <span className="font-semibold">Click to select</span> or drag and
-            drop a save file
-          </p>
-          <p className="text-xs text-zinc-500 dark:text-zinc-400">
-            <Monoblock>.zip</Monoblock> files only
-          </p>
+          <FolderArrowDownIcon className="w-8 h-8 mb-4 text-zinc-400" />
+          {hoverState.state !== "invalid" ? (
+            <>
+              <p className="mb-2 text-sm text-zinc-400">
+                <span className="font-semibold">Click to select</span> or drag
+                and drop a save file
+              </p>
+              <p className="text-xs text-zinc-400">
+                <Monoblock>.zip</Monoblock> files only
+              </p>
+            </>
+          ) : (
+            <p className="text-sm text-red-400">{hoverState.detail}</p>
+          )}
         </div>
       </label>
     </div>
diff --git a/src/views/SaveSelector.tsx b/src/views/SaveSelector.tsx
index 91374cf..a6d4ae7 100644
--- a/src/views/SaveSelector.tsx
+++ b/src/views/SaveSelector.tsx
@@ -21,30 +21,34 @@ export default function SaveSelector() {
     });
   }, []);
 
+  function Item({ file }: { file: SaveFile }) {
+    return (
+      <div
+        class="flex items-center justify-between p-1 hover:cursor-pointer bg-zinc-700 rounded hover:bg-zinc-600 group"
+        title={file.path}
+      >
+        <div className="flex justify-between text-zinc-400 w-full items-center text-sm">
+          <FolderIcon class="inline w-6 h-6 shrink-0 ml-0.5 mt-0.5 mr-1.5" />
+          <div className="grow font-medium text-zinc-200 truncate">
+            {file.name}
+          </div>
+          <div className="pl-1 shrink-0">{file.last_modified}</div>
+          <span className="text-zinc-300">,</span>
+          <div className="pl-1 shrink-0">{file.size}</div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       <DragAndDrop className="mr-1.5 bg-red-500!" onFile={() => {}} />
       <div className="mt-1 text-center select-none text-zinc-300 text-[0.85rem]">
         Or, select a save file from below
       </div>
-      <div className="mt-1.5 overflow-y-auto overflow-x-hidden pr-1.5 space-y-2">
+      <div className="mt-1.5 overflow-y-auto overflow-x-hidden pr-2 space-y-2">
         {saveFiles.map((file) => {
-          return (
-            <div
-              class="flex items-center justify-between p-1 hover:cursor-pointer bg-zinc-700 rounded hover:bg-zinc-600 group"
-              title={file.path}
-            >
-              <div className="flex justify-between text-zinc-400 w-full items-center text-sm">
-                <FolderIcon class="inline w-6 h-6 shrink-0 ml-0.5 mt-0.5 mr-1.5" />
-                <div className="grow font-medium text-zinc-200 truncate">
-                  {file.name}
-                </div>
-                <div className="pl-1 shrink-0">{file.last_modified}</div>
-                <span className="text-zinc-300">,</span>
-                <div className="pl-1 shrink-0">{file.size}</div>
-              </div>
-            </div>
-          );
+          return <Item file={file} />;
         })}
       </div>
     </>