diff --git a/components/UploadFile/UploadFile.jsx b/components/UploadFile/UploadFile.jsx
index e0405d5..5dd1a6a 100644
--- a/components/UploadFile/UploadFile.jsx
+++ b/components/UploadFile/UploadFile.jsx
@@ -12,6 +12,8 @@ export default function UploadFile({
 }) {
   const fileQuery = `${import.meta.env.VITE_BaseURL}download?what=knnquery`;
 
+  console.log(file);
+
   useEffect(() => {
     async function fetchDate() {
       const formData = new FormData();
@@ -23,8 +25,15 @@ export default function UploadFile({
       const img = await response.json();
       setImageData(img);
     }
-    if (file) fetchDate();
-  }, [file, fileQuery, setImageData, setType]);
+
+    if (file && file.type === "text/plain") {
+      fetchDate();
+    }
+    if (file && file.type !== "text/plain") {
+      alert("Please upload a spectrum file");
+      setFile(null);
+    }
+  }, [file, fileQuery, setFile, setImageData, setType]);
 
   return (
     <form>
diff --git a/src/App.css b/src/App.css
index 86b9027..4e0f128 100644
--- a/src/App.css
+++ b/src/App.css
@@ -178,7 +178,9 @@ h1 {
 
 .fileNameBtn {
   font-size: 13px;
-  background-color: #c9f2ff;
+  background-color: light-dark(#fff, #202020);
+  color: light-dark(#202020, #ccc);
+  border: 1px solid #00ace1;
   cursor: pointer;
   padding: 0.4rem 0.8rem;
   border-radius: 4px;
@@ -189,7 +191,8 @@ h1 {
 }
 
 .fileNameBtn:hover {
-  background-color: #adecff;
+  background-color: #00ace1;
+  color: #fff;
 }
 
 .closeBtn {