diff --git a/package-lock.json b/package-lock.json
index fb7752b..a64ffbe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.27.0",
-        "recharts": "^2.12.7"
+        "recharts": "^2.12.7",
+        "uuid": "^11.0.1"
       },
       "devDependencies": {
         "@chromatic-com/storybook": "^1.9.0",
@@ -48,7 +49,7 @@
         "storybook": "^8.3.4",
         "typescript": "^5.5.3",
         "typescript-eslint": "^8.0.1",
-        "vite": "5.4.8"
+        "vite": "^5.4.8"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -1616,6 +1617,19 @@
         "storybook": "^8.3.4"
       }
     },
+    "node_modules/@storybook/addon-actions/node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@storybook/addon-backgrounds": {
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.3.4.tgz",
@@ -8659,17 +8673,15 @@
       }
     },
     "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "dev": true,
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.1.tgz",
+      "integrity": "sha512-wt9UB5EcLhnboy1UvA1mvGPXkIIrHSu+3FmUksARfdVw9tuPf3CH/CohxO0Su1ApoKAeT6BVzAJIvjTuQVSmuQ==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
       ],
-      "license": "MIT",
       "bin": {
-        "uuid": "dist/bin/uuid"
+        "uuid": "dist/esm/bin/uuid"
       }
     },
     "node_modules/vary": {
@@ -8709,7 +8721,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
       "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/package.json b/package.json
index daa013d..8e4a694 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "storybook": "^8.3.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "5.4.8"
+    "vite": "^5.4.8"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index fa86f4d..3b53668 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -10,6 +10,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
   const [showModal, setShowModal] = useState(false);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
 
   const handleFileChange = (files: File[]) => {
     if (files.length > 0) {
@@ -18,28 +19,40 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
   };
 
   const handleUpload = async () => {
+    setError(null);
+    setSuccess(null)
     if (selectedFiles.length > 0) {
-      const formData = new FormData();
-      selectedFiles.forEach((file) => {
-        formData.append('files', file);
-      });
-
       try {
-        const response = await fetch(uploadUrl, {
-          method: 'POST',
-          body: formData,
+        const formData = new FormData();
+        selectedFiles.forEach(file => {
+          formData.append('files', file);
         });
 
-        if (!response.ok) {
-          setError('Upload failed. Network response was not ok.');
-          return;  
-        }
+        try {
+            const response = await fetch(uploadUrl, {
+              method: 'POST',
+              body: formData,
+            });
 
-        const data = await response.json();
-        console.log('Upload successful:', data);
+            if (!response.ok) {
+              if (response.status === 503) {
+                const errorMsg = await response.text();
+                setError(`Failed to upload: ${errorMsg} \nTry again in a few minutes!`);
+              } else {
+                const errorMsg = await response.text();
+                setError(`Failed to upload: ${errorMsg}`);
+              }
+            } else {
+              const result = await response.json();
+              setSuccess('File uploaded successfully!');
+              console.log('Upload successful:', result);
+            }
+        } catch (error) {
+          console.error('Error uploading files:', error);
+          setError('An error occurred during file upload.');
+        }
         
         setSelectedFiles([]);
-        handleClose();
       } catch (error) {
         console.error('Upload failed:', error);
         setError('An error occurred while uploading. Please try again.');
@@ -57,6 +70,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
     setShowModal(false);
     setSelectedFiles([]);
     setError(null);
+    setSuccess(null)
   };
 
   return (
@@ -92,7 +106,11 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
         </div>
 
         <Button onClick={handleUpload} style={{ marginTop: 10 }}>Upload</Button>
-
+        {success && (
+          <Notification color="green" onClose={() => setSuccess(null)} style={{ marginTop: 10 }}>
+            {success}
+          </Notification>
+        )}
         {error && (
           <Notification color="red" onClose={() => setError(null)} style={{ marginTop: 10 }}>
             {error}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 2b028c8..54d8346 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -27,8 +27,7 @@ export default function Navbar() {
       />
       {links}
 
-      {/* Once POST API is out -- Currently WIP */}
-      <FileUpload uploadUrl="http://localhost:8080/api/v2/mcap/upload"/>
+      <FileUpload uploadUrl={`${import.meta.env.VITE_API_URL}/api/v2/mcaps/bulk_upload`}/>
 
       {/* Optionally render active link or other content here */}
       <h3 className="hytechName">{hytechName}</h3>