diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 372f64cb..562be920 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -20,6 +20,7 @@ import {
   setSelectedDocs,
 } from './preferences/preferenceSlice';
 import { useOutsideAlerter } from './hooks';
+import Upload from './upload/Upload';
 
 export default function Navigation({
   navState,
@@ -43,6 +44,9 @@ export default function Navigation({
   const [selectedDocsModalState, setSelectedDocsModalState] =
     useState<ActiveState>(isSelectedDocsSet ? 'INACTIVE' : 'ACTIVE');
 
+  const [uploadModalState, setUploadModalState] =
+    useState<ActiveState>('INACTIVE');
+
   const navRef = useRef(null);
   useOutsideAlerter(
     navRef,
@@ -128,7 +132,11 @@ export default function Navigation({
                 } mr-3 w-3 transition-all`}
               />
             </div>
-            <img className="hover:cursor-pointer" src={UploadIcon}></img>
+            <img
+              className="hover:cursor-pointer"
+              src={UploadIcon}
+              onClick={() => setUploadModalState('ACTIVE')}
+            ></img>
             {isDocsListOpen && (
               <div className="absolute top-12 left-0 right-6 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
                 {docs ? (
@@ -224,7 +232,10 @@ export default function Navigation({
         setModalState={setApiKeyModalState}
         isCancellable={isApiKeySet}
       />
-      {/* <Upload></Upload> */}
+      <Upload
+        modalState={uploadModalState}
+        setModalState={setUploadModalState}
+      ></Upload>
     </>
   );
 }
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 5fb1a6b2..88afa960 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -1,7 +1,14 @@
 import { useCallback, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
+import { ActiveState } from '../models/misc';
 
-export default function Upload() {
+export default function Upload({
+  modalState,
+  setModalState,
+}: {
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+}) {
   const [docName, setDocName] = useState('');
   const [files, setfiles] = useState<File[]>([]);
 
@@ -20,7 +27,11 @@ export default function Upload() {
     onDragLeave: doNothing,
   });
   return (
-    <article className="absolute z-30  h-screen w-screen  bg-gray-alpha">
+    <article
+      className={`${
+        modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+    >
       <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
         <p className="mb-7 text-xl text-jet">Upload New Documentation</p>
         <input
@@ -51,7 +62,16 @@ export default function Upload() {
           <button className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white">
             Train
           </button>
-          <button className="font-medium">Cancel</button>
+          <button
+            onClick={() => {
+              setDocName('');
+              setfiles([]);
+              setModalState('INACTIVE');
+            }}
+            className="font-medium"
+          >
+            Cancel
+          </button>
         </div>
       </article>
     </article>