diff --git a/package-lock.json b/package-lock.json
index e0d5784..f931ba9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "react-bootstrap": "^2.6.0",
         "react-dom": "^18.2.0",
         "react-drag-drop-files": "^2.3.7",
+        "react-hot-toast": "^2.4.0",
         "react-scripts": "5.0.1",
         "workbox-core": "^6.5.4",
         "workbox-expiration": "^6.5.4",
@@ -11417,6 +11418,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.11.tgz",
+      "integrity": "sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -15467,6 +15476,8 @@
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
       "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -17996,6 +18007,21 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.0.tgz",
+      "integrity": "sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -29011,6 +29037,12 @@
         "slash": "^3.0.0"
       }
     },
+    "goober": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.11.tgz",
+      "integrity": "sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==",
+      "requires": {}
+    },
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -31864,7 +31896,9 @@
     "moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
-      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "optional": true,
+      "peer": true
     },
     "ms": {
       "version": "2.1.2",
@@ -33503,6 +33537,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-hot-toast": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.0.tgz",
+      "integrity": "sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==",
+      "requires": {
+        "goober": "^2.1.10"
+      }
+    },
     "react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
diff --git a/package.json b/package.json
index ad89907..36d123e 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "react-bootstrap": "^2.6.0",
     "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.7",
+    "react-hot-toast": "^2.4.0",
     "react-scripts": "5.0.1",
     "workbox-core": "^6.5.4",
     "workbox-expiration": "^6.5.4",
diff --git a/src/App.js b/src/App.js
index ee8d8e5..5508e4f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,8 @@ import NavigationBar from './NavigationBar';
 import AuthDialog from './AuthDialog';
 import UploadInterface from './UploadInterface';
 import ProjectForm from './ProjectForm';
+import { githubUpload } from './github-upload';
+import toast, { Toaster } from 'react-hot-toast';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
@@ -18,7 +20,7 @@ function App() {
   const [token, setToken] = useState(null);
   const [repository, setRepository] = useState(null);
   const [show, setShow] = useState(true);
-  const isAuthorized = token && repository;
+  const isAuthorized = token && repository && true;
 
   return (
     <>
@@ -33,12 +35,28 @@ function App() {
       <AuthDialog show={show} setShow={setShow} setToken={setToken} setRepository={setRepository} />
       <Stack direction={'row'}>
         <Item>
-          <UploadInterface isAuthorized={isAuthorized} />
+          <UploadInterface
+            isAuthorized={isAuthorized}
+            uploadFile={(file) => {
+              let loadId = toast.loading('Uploading Image...');
+              githubUpload(token, repository, file)
+                .then(() => {
+                  toast.dismiss(loadId);
+                  toast.success('Image uploaded successfully!');
+                })
+                .catch((e) => {
+                  toast.dismiss(loadId);
+                  toast.error('Image upload failed!');
+                  console.error(e);
+                });
+            }}
+          />
         </Item>
         <Item>
           <ProjectForm />
         </Item>
       </Stack>
+      <Toaster position="bottom-left" />
     </>
   );
 }
diff --git a/src/UploadInterface.js b/src/UploadInterface.js
index 1edbe47..222ab1d 100644
--- a/src/UploadInterface.js
+++ b/src/UploadInterface.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 const fileTypes = ["jpg", "jpeg", "png", "bmp", "gif"];
 
-function UploadInterface({ isAuthorized }) {
+function UploadInterface({ isAuthorized, uploadFile }) {
   const [image, setImage] = useState(null);
   const imgPreviewEl = useRef(null);
 
@@ -55,6 +55,9 @@ function UploadInterface({ isAuthorized }) {
               variant="success"
               className="mt-3"
               disabled={!(isAuthorized && image)}
+              onClick={() => {
+                uploadFile(image);
+              }}
             >
               Upload
             </Button>
@@ -66,7 +69,8 @@ function UploadInterface({ isAuthorized }) {
 }
 
 UploadInterface.propTypes = {
-  isAuthorized:PropTypes.bool
+  isAuthorized:PropTypes.bool,
+  uploadFile: PropTypes.func
 }
 
-export default UploadInterface
\ No newline at end of file
+export default UploadInterface
diff --git a/github-upload.js b/src/github-upload.js
similarity index 100%
rename from github-upload.js
rename to src/github-upload.js