diff --git a/.DS_Store b/.DS_Store
index 5ba5e0f5..d570e24c 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index d393753d..df9c7777 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -8,104 +8,95 @@ import FaIcon from 'components/shared/icons/faIcon'
 
 type Props = {
     problem: AssignmentProblem
-    handleChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+    handleChange?: (e : React.ChangeEvent<HTMLInputElement>) => void
     disabled?: boolean
 }
 
-const AssignmentProblemListItem = ({ problem, handleChange, disabled }: Props) => {
-    const [meta, setMeta] = useState<{ options: { [key: string]: string }, type: string }>()
+const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) => {
+    const [meta, setMeta] = useState<{options: {[key:string]: string}, type: string}>()
 
 
     const getMeta = () => {
         setMeta(problem.metadata)
     }
-
+    
     useEffect(() => {
         getMeta()
     }, [problem])
+    
 
-
-    if (!meta) {
+    if (!meta){
         return (
-            <div className={styles.problem}>
-                <div>File Input Problems are not done yet pending backend changes! :D</div>
-            </div>)
+        <div className={styles.problem}>
+            <div>File Input Problems are not done yet pending backend changes! :D</div>
+        </div>)
     }
 
-    const type = meta.type
+    const type = meta.type 
 
     if (type == "Text") {
         return (
-            <div key={problem.id} className={styles.problem}>
-                <h4 className={styles.problem_header}>{problem.problemName}</h4>
-                <input className={styles.textField}
-                    type='text'
-                    placeholder='Answer'
-                    onChange={handleChange ?? undefined}
-                    disabled={disabled ?? false}
-
-                    id={problem.problemName}
+        <div key={problem.id} className={styles.problem}>
+            <h4 className={styles.problem_header}>{problem.problemName}</h4>
+            <input className={styles.textField}
+                type='text'
+                placeholder='Answer'
+                onChange={handleChange ?? undefined}
+                disabled={disabled ?? false}
+                
+                id={problem.problemName}
                 />
-            </div>
-        )
-    }
-
-    else if (type == "MCQ-mult") {
+        </div>
+    )} 
+    
+    else if(type == "MCQ-mult") {
         const options = meta.options
-        if (!options) {
+        if (!options){
             return <div></div>
         }
         return (
             <div key={problem.id} className={styles.problem}>
                 <h4 className={styles.problem_header}>{problem.problemName}</h4>
-                {Object.keys(options).map((key: string) => (
-                    <label key={key} className={styles.mcqLabel} style={disabled ? { cursor: 'default' } : undefined}>
-                        <input id={problem.problemName}
-                            type='checkbox'
-                            value={key}
-                            onChange={handleChange}
-                            disabled={disabled ?? false} /> {options[key]}
-
+                {Object.keys(options).map((key : string) => (
+                    <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
+                        <input id={problem.problemName} 
+                        type='checkbox' 
+                        value={key}
+                        onChange={handleChange} 
+                        disabled={disabled ?? false}/> {options[key]}
+                        
                         <span className={styles.checkbox}>
-                            <FaIcon icon='check' className={styles.checkboxCheck} />
+                             <FaIcon icon='check' className={styles.checkboxCheck}/>
                         </span>{/* custom checkbox */}
                     </label>))}
             </div>)
-    }
-
-    else if (type == "MCQ-single") {
+    } 
+    
+    else if(type == "MCQ-single") {
         const options = meta.options
-        if (!options) {
+        if (!options){
             return <div></div>
         }
         return (
             <div key={problem.id} className={styles.problem}>
                 <h4 className={styles.problem_header}>{problem.problemName}</h4>
-                {Object.keys(options).map((key: string) => (
-                    <label key={key} className={styles.mcqLabel} style={disabled ? { cursor: 'default' } : undefined}>
-                        <input id={problem.problemName}
-                            type='radio'
-                            name={`${problem.id}_answer`}
-                            value={key}
-                            onChange={handleChange}
-                            disabled={disabled ?? false} /> {options[key]}
+                {Object.keys(options).map((key : string) => (
+                    <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
+                        <input id={problem.problemName} 
+                        type='radio' 
+                        name={`${problem.id}_answer`}
+                        value={key}
+                        onChange={handleChange} 
+                        disabled={disabled ?? false}/> {options[key]}
                         <span className={styles.radio}></span>{/* custom radio button */}
                     </label>))}
             </div>)
-    }
-
-    else if (type == "File") {
-        return (
-            <div key={problem.id} className={styles.problem}>
-                <h4 className={styles.problem_header}>{problem.problemName}</h4>
-            </div>
-        )
-    }
-
+    } 
+    
     else {
-        return (
+        return(
             <div>Unknown type, something is wrong on the backend!</div>)
-    }
+        }
 }
 
 
diff --git a/devU-client/src/components/pages/Attendence/InstructorAttendanceModal.tsx b/devU-client/src/components/pages/Attendence/InstructorAttendanceModal.tsx
index b52dc264..817ea0a9 100644
--- a/devU-client/src/components/pages/Attendence/InstructorAttendanceModal.tsx
+++ b/devU-client/src/components/pages/Attendence/InstructorAttendanceModal.tsx
@@ -124,4 +124,5 @@ const InstructorAttendanceModal: React.FC<Props> = ({ open, onClose, onSubmit, c
   );
 };
 
+
 export default InstructorAttendanceModal;
diff --git a/devU-client/src/components/pages/Attendence/InstructorAttendancePage.tsx b/devU-client/src/components/pages/Attendence/InstructorAttendancePage.tsx
index d55d72d5..a7102cef 100644
--- a/devU-client/src/components/pages/Attendence/InstructorAttendancePage.tsx
+++ b/devU-client/src/components/pages/Attendence/InstructorAttendancePage.tsx
@@ -20,6 +20,8 @@ interface AttendanceRecord {
   code: string;
   duration: string;
   description?: string;
+  id: string; // Required ID for records
+  isLocal?: boolean; // Flag to identify locally created records
 }
 
 const InstructorAttendancePage: React.FC<Props> = () => {
@@ -27,37 +29,101 @@ const InstructorAttendancePage: React.FC<Props> = () => {
   const [modalOpen, setModalOpen] = useState(false);
   const [courseInfo, setCourseInfo] = useState<CourseInfo | null>(null);
   const [attendanceRecords, setAttendanceRecords] = useState<AttendanceRecord[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
+  // Load course info
   useEffect(() => {
     if (!courseId) return;
 
+    setIsLoading(true);
     RequestService.get(`/api/courses/${courseId}`)
       .then(data => {
-        setCourseInfo({
+        const course = {
           id: data.id,
           number: data.number,
           name: data.name,
           semester: data.semester
-        });
+        };
+        setCourseInfo(course);
       })
-      .catch(err => console.error('Error fetching course info:', err));
+      .catch(err => {
+        console.error('Error fetching course info:', err);
+        setIsLoading(false);
+      });
   }, [courseId]);
 
+  // Load attendance records - combine API records and localStorage records
   useEffect(() => {
     if (!courseInfo?.id) return;
 
+    // First, get records from API
     RequestService.get(`/api/courses/${courseInfo.id}/attendance`)
-      .then(data => setAttendanceRecords(data))
-      .catch(err => console.error('Failed to load attendance:', err));
+      .then(apiRecords => {
+        // Make sure API records have IDs
+        const formattedApiRecords = apiRecords.map((record: any, index: number) => ({
+          ...record,
+          id: record.id || `api-${index}-${Date.now()}`
+        }));
+
+        // Then, get local records from localStorage
+        const localStorageKey = `attendance_${courseInfo.id}`;
+        const localRecordsString = localStorage.getItem(localStorageKey);
+        let localRecords: AttendanceRecord[] = [];
+        
+        if (localRecordsString) {
+          try {
+            localRecords = JSON.parse(localRecordsString);
+          } catch (e) {
+            console.error('Error parsing local attendance records:', e);
+            localStorage.removeItem(localStorageKey); // Clear invalid data
+          }
+        }
+
+        // Combine and set records
+        const allRecords = [...localRecords, ...formattedApiRecords];
+        setAttendanceRecords(allRecords);
+        setIsLoading(false);
+      })
+      .catch(err => {
+        console.error('Failed to load attendance from API:', err);
+        
+        // Still try to load local records on API failure
+        const localStorageKey = `attendance_${courseInfo.id}`;
+        const localRecordsString = localStorage.getItem(localStorageKey);
+        if (localRecordsString) {
+          try {
+            const localRecords = JSON.parse(localRecordsString);
+            setAttendanceRecords(localRecords);
+          } catch (e) {
+            console.error('Error parsing local attendance records:', e);
+          }
+        }
+        setIsLoading(false);
+      });
   }, [courseInfo]);
 
+  // Save local records to localStorage whenever they change
+  useEffect(() => {
+    if (!courseInfo?.id || attendanceRecords.length === 0) return;
+
+    // Filter out only local records
+    const localRecords = attendanceRecords.filter(record => record.isLocal === true);
+    if (localRecords.length === 0) return;
+
+    // Save to localStorage
+    const localStorageKey = `attendance_${courseInfo.id}`;
+    localStorage.setItem(localStorageKey, JSON.stringify(localRecords));
+  }, [attendanceRecords, courseInfo]);
+
   const saveToCsv = () => {
+    if (!attendanceRecords.length || !courseInfo) return;
+    
     const toCSV = [];
     let header = 'Course,Date,Code,Duration (min),Description';
     toCSV.push(header + '\n');
 
     attendanceRecords.forEach(record => {
-      const row = `${record.courseInfo.number}: ${record.courseInfo.name},${record.date},${record.code},${record.duration},${record.description || ''}`;
+      const row = `"${record.courseInfo.number}: ${record.courseInfo.name}","${record.date}","${record.code}","${record.duration}","${record.description || ''}"`;
       toCSV.push(row + '\n');
     });
 
@@ -69,14 +135,49 @@ const InstructorAttendancePage: React.FC<Props> = () => {
     const encodedUri = encodeURI(final);
     const link = document.createElement('a');
     link.setAttribute('href', encodedUri);
-    link.setAttribute('download', `${courseInfo?.number.replace(" ", '').toLowerCase()}_attendance.csv`);
+    link.setAttribute('download', `${courseInfo.number.replace(/\s+/g, '').toLowerCase()}_attendance.csv`);
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
   };
 
-  if (!courseInfo) {
-    return <PageWrapper><p className='info'>Loading course info...</p></PageWrapper>;
+  const handleAttendanceSubmit = (newSession: any) => {
+    if (!courseInfo) return;
+    
+    // Create a new record directly without a POST request
+    const newRecord: AttendanceRecord = {
+      id: `local-${Date.now()}`, // Generate a unique local ID
+      courseInfo: courseInfo,
+      date: newSession.date,
+      code: newSession.code,
+      duration: newSession.duration,
+      description: newSession.description,
+      isLocal: true // Mark as locally created
+    };
+    
+    // Add the new record to the beginning of the array
+    setAttendanceRecords(prev => [newRecord, ...prev]);
+    setModalOpen(false);
+    
+    // Save this record to localStorage immediately
+    const localStorageKey = `attendance_${courseInfo.id}`;
+    const existingRecordsString = localStorage.getItem(localStorageKey);
+    let existingRecords: AttendanceRecord[] = [];
+    
+    if (existingRecordsString) {
+      try {
+        existingRecords = JSON.parse(existingRecordsString);
+      } catch (e) {
+        console.error('Error parsing local attendance records:', e);
+      }
+    }
+    
+    localStorage.setItem(localStorageKey, JSON.stringify([newRecord, ...existingRecords]));
+    console.log('Attendance record created and saved locally:', newRecord);
+  };
+
+  if (isLoading || !courseInfo) {
+    return <PageWrapper><p style={{ padding: '2rem' }}>Loading course info...</p></PageWrapper>;
   }
 
   return (
@@ -98,33 +199,7 @@ const InstructorAttendancePage: React.FC<Props> = () => {
         <InstructorAttendanceModal
           open={modalOpen}
           onClose={() => setModalOpen(false)}
-          onSubmit={(newSession) => {
-            const payload = {
-              courseId: courseInfo.id,
-              date: newSession.date,
-              code: newSession.code,
-              duration: newSession.duration,
-              description: newSession.description
-            };
-          
-            console.log('Creating attendance with payload:', payload);
-
-            RequestService.post(`/api/attendance`, payload)
-    .then((savedSession) => {
-      setAttendanceRecords(prev => [
-        {
-          ...savedSession,
-          courseInfo
-        },
-        ...prev
-      ]);
-      setModalOpen(false);
-    })
-    .catch(err => {
-      console.error('Failed to save attendance:', err.response?.data || err.message || err);
-      alert('Could not create attendance. Please try again.');
-    });
-}}
+          onSubmit={handleAttendanceSubmit}
           courseInfo={courseInfo}
         />
 
@@ -143,8 +218,8 @@ const InstructorAttendancePage: React.FC<Props> = () => {
                 </tr>
               </thead>
               <tbody>
-                {attendanceRecords.map((entry, index) => (
-                  <tr key={`${entry.code}-${index}`}>
+                {attendanceRecords.map((entry) => (
+                  <tr key={entry.id}>
                     <td>{entry.courseInfo.number}: {entry.courseInfo.name}</td>
                     <td>{entry.date}</td>
                     <td>{entry.code}</td>
@@ -161,5 +236,4 @@ const InstructorAttendancePage: React.FC<Props> = () => {
   );
 };
 
-
-export default InstructorAttendancePage;
+export default InstructorAttendancePage;
\ No newline at end of file
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
index 5800bd6d..c1685a99 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -20,7 +20,7 @@ import { prettyPrintDateTime, fullWordPrintDate } from "../../../utils/date.util
 
 import { useLocation } from 'react-router-dom';
 import Scoreboard from '../assignments/scoreboard';
-import DragDropFile from 'components/utils/dragDropFile'
+// import DragDropFile from 'components/utils/dragDropFile'
 
 const AssignmentDetailPage = () => {
     const [setAlert] = useActionless(SET_ALERT)
@@ -38,7 +38,6 @@ const AssignmentDetailPage = () => {
     const [assignment, setAssignment] = useState<Assignment>()
     const [course, setCourse] = useState<Course>()
     const [notClickable, setNotClickable] = useState(true);
-    const [hasFileProblem, setHasFileProblem] = useState(false);
 
 
 
@@ -61,13 +60,8 @@ const AssignmentDetailPage = () => {
             const courses = await RequestService.get<Course>(`/api/courses/${courseId}`)
             setCourse(courses)
 
-            let assignmentProblemsReq = await RequestService.get<AssignmentProblem[]>(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems/`)
-
-            const hasFile = assignmentProblemsReq.some(problem => problem.metadata.type === "File")
-            setHasFileProblem(hasFile)
-
-            const filteredProblems = assignmentProblemsReq.filter(problem => problem.metadata.type !== "File")
-            setAssignmentProblems(filteredProblems)
+            const assignmentProblemsReq = await RequestService.get<AssignmentProblem[]>(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems/`)
+            setAssignmentProblems(assignmentProblemsReq)
 
             const submissionsReq = await RequestService.get<Submission[]>(`/api/course/${courseId}/assignment/${assignmentId}/submissions/`)
             submissionsReq.sort((a, b) => (Date.parse(b.createdAt ?? '') - Date.parse(a.createdAt ?? '')))
@@ -87,6 +81,10 @@ const AssignmentDetailPage = () => {
 
             // const containerAutograder = (await RequestService.get<ContainerAutoGrader[]>(`/api/course/${courseId}/assignment/${assignmentId}/container-auto-graders`)).pop() ?? null
             // setContainerAutograder(containerAutograder)
+
+        
+
+
         } catch (err: any) {
             setError(err)
             const message = "Submission past due date"//Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message
@@ -120,7 +118,7 @@ const AssignmentDetailPage = () => {
                     [key]: res
                 };
             });
-        }
+        } 
         else {
             setFormData(prevState => ({
                 ...prevState,
@@ -130,8 +128,8 @@ const AssignmentDetailPage = () => {
     };
 
 
-    const handleFileChange = (file: File) => {
-        setFile(file)
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setFile(e.target.files?.item(0))
     }
 
     const handleCheckboxChange = () => {
@@ -161,7 +159,7 @@ const AssignmentDetailPage = () => {
                 submission.append('courseId', courseId)
                 submission.append('content', JSON.stringify(contentField))
                 submission.append('files', file)
-
+                
 
                 response = await RequestService.postMultipart(`/api/course/${courseId}/assignment/${assignmentId}/submissions`, submission);
             } else {
@@ -193,14 +191,14 @@ const AssignmentDetailPage = () => {
         return false;
     };
 
-    // handleFileChange;
+    handleFileChange;
 
 
     return (
         <PageWrapper>
             <div className={styles.header}>
-                <h1 style={{ gridColumnStart: 2 }}>Submit Assignment</h1>
-                <button style={{ marginLeft: 'auto' }} className='btnPrimary' onClick={() => { history.push(`/course/${courseId}`) }}>Back to Course</button>
+                <h1 style={{gridColumnStart:2}}>Submit Assignment</h1> 
+                <button style={{marginLeft:'auto'}} className='btnPrimary' onClick={() => {history.push(`/course/${courseId}`)}}>Back to Course</button>
             </div>
 
             <div className={styles.details}>
@@ -243,15 +241,11 @@ const AssignmentDetailPage = () => {
             </div>
 
             <div className={styles.problems_section}>
-                {/* conditionally render file upload */}
-                {hasFileProblem && (
-                    <div className={styles.file_upload}>
-                        <h4 className={styles.problem_header}>File Upload:</h4>
-                        <DragDropFile handleFile={handleFileChange} />
-                        <span style={{margin: '15px 0', marginRight: '10px'}}>{file?.name}</span>
-                        {file && (<button className="btnDelete" onClick={() => setFile(null)}>Remove Files</button>)}
-                    </div>
-                )}
+
+                {/* <div className={styles.file_upload}>
+                    <h4 className={styles.problem_header}>File Upload:</h4>
+                    <DragDropFile handleFile={(e) => {console.log(e)}} />
+                </div> */}
 
                 <div className={styles.problems_list}>
                     <h2>Problems</h2>
@@ -277,29 +271,29 @@ const AssignmentDetailPage = () => {
                 </div>
             </div>
 
-
-            {submissions.length !== 0 &&
-                <div>
-                    <div className={styles.submissionsContainer}>
-                        {submissions.map((submission, index) => (
-                            <div className={styles.submissionCard} key={index} onClick={() => {
-                                history.push(`/course/${courseId}/assignment/${assignmentId}/submission/${submission.id}`)
-                            }}>
+            
+            {submissions.length !== 0 && 
+            <div>
+                <div className={styles.submissionsContainer}>
+                    {submissions.map((submission, index) => (
+                        <div className={styles.submissionCard} key={index} onClick={() => {
+                            history.push(`/course/${courseId}/assignment/${assignmentId}/submission/${submission.id}`)
+                        }}>
                                 <div>
                                     <div className={styles.submissionHeading}>{`Submission ${submissions.length - index}`}</div>
                                     <div className={styles.submissionTime}>{`Submitted at: ${submission.createdAt && prettyPrintDateTime(submission.createdAt)}`}</div>
                                 </div>
-                            </div>
-                        ))}
+                        </div>
+                    ))}
 
-                        {showScoreboard && (
-                            <div className={styles.scoreboardContainer}>
-                                <Scoreboard courseId={courseId} assignmentId={assignmentId} />
+                    {showScoreboard && (
+                        <div className={styles.scoreboardContainer}>
+                            <Scoreboard courseId={courseId} assignmentId={assignmentId} />
 
-                            </div>
-                        )}
-                    </div>
-                </div>}
+                        </div>
+                    )}
+                </div>
+            </div>}
 
         </PageWrapper>
     )
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
index 720864c7..1625a6f7 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -34,7 +34,6 @@ const AssignmentUpdatePage = () => {
 
   const [mcqProblemId, setMcqProblemId] = useState<number>()
   const [textProblemId, setTextProblemId] = useState<number>()
-  const [fileProblemId, setFileProblemId] = useState<number>()
 
   const [assignments, setAssignments] = useState<Assignment[]>([])
   const [categoryOptions, setAllCategoryOptions] = useState<Option<String>[]>([])
@@ -46,7 +45,7 @@ const AssignmentUpdatePage = () => {
 
   // Needs a custom observer to force an update when the css variables change
   // Custom observer will update the theme variables when the bodies classes change
-
+  
 
   const [formData, setFormData] = useState<Assignment>({
     courseId: parseInt(courseId),
@@ -64,20 +63,18 @@ const AssignmentUpdatePage = () => {
 
 
   // taken out of the design for the moment, should get incorporated later
-  /*const handleCheckbox = (e: React.ChangeEvent<HTMLInputElement>) => {setFormData(prevState => ({ ...prevState, disableHandins: e.target.checked }))}*/
-  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  /*const handleCheckbox = (e: React.ChangeEvent<HTMLInputElement>) => {setFormData(prevState => ({ ...prevState, disableHandins: e.target.checked }))}*/ 
+  const handleStartDateChange = (e : React.ChangeEvent<HTMLInputElement>) => {
     const newDate = new Date(e.target.value)
     setFormData(prevState => ({ ...prevState, startDate: isNaN(newDate.getTime()) ? "" : newDate.toISOString() }))
   }
-  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleEndDateChange = (e : React.ChangeEvent<HTMLInputElement>) => {
     const newDate = new Date(e.target.value)
-    setFormData(prevState => ({ ...prevState, endDate: isNaN(newDate.getTime()) ? "" : newDate.toISOString() }))
-  }
+    setFormData(prevState => ({ ...prevState, endDate: isNaN(newDate.getTime()) ? "" : newDate.toISOString() } )) }
 
-  const handleDueDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleDueDateChange = (e : React.ChangeEvent<HTMLInputElement>) => {
     const newDate = new Date(e.target.value)
-    setFormData(prevState => ({ ...prevState, dueDate: isNaN(newDate.getTime()) ? "" : newDate.toISOString() }))
-  }
+    setFormData(prevState => ({ ...prevState, dueDate: isNaN(newDate.getTime()) ? "" : newDate.toISOString() } ))}
 
   const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
@@ -91,7 +88,7 @@ const AssignmentUpdatePage = () => {
 
   const fetchAssignmentProblems = async () => {
     await RequestService.get(`/api/course/${courseId}/assignment/${currentAssignmentId}/assignment-problems`)
-      .then((res) => { setAssignmentProblems(res) })
+      .then((res) => { setAssignmentProblems(res)})
   }
   const fetchNcags = async () => {
     await RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders`)
@@ -99,9 +96,9 @@ const AssignmentUpdatePage = () => {
   }
   const fetchCags = async () => {
     await RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/container-auto-graders`)
-      .then((res) => { setContainerAutograders(res) })
+    .then((res) => { setContainerAutograders(res) })
   }
-
+  
 
 
 
@@ -113,15 +110,15 @@ const AssignmentUpdatePage = () => {
   useEffect(() => {
     const categories = [...new Set(assignments.map(a => a.categoryName))];
     const options = categories.map((category) => ({
-      value: category,
-      label: category
-    }));
-
+        value: category,
+        label: category
+      }));
+    
     setAllCategoryOptions(options);
-  }, [assignments])
-
+    }, [assignments])
 
 
+  
   const handleAssignmentUpdate = () => {
     const finalFormData = {
       courseId: formData.courseId,
@@ -172,7 +169,7 @@ const AssignmentUpdatePage = () => {
   }
 
 
-
+  
 
   const [textModal, setTextModal] = useState(false);
   const handleCloseTextModal = () => {
@@ -192,17 +189,17 @@ const AssignmentUpdatePage = () => {
     fetchAssignmentProblems()
     fetchNcags()
   }
-
+ 
   const [mcqEditModal, setMcqEditModal] = useState(false);
   const handleCloseEditMcqModal = async () => {
     setMcqEditModal(false)
-    fetchAssignmentProblems()
-  }
+     fetchAssignmentProblems()
+  }  
   const [textEditModal, setTextEditModal] = useState(false);
   const handleCloseTextEditModal = async () => {
     setTextEditModal(false)
-    fetchAssignmentProblems()
-  }
+   fetchAssignmentProblems()
+  }  
 
   const [containerAutoGraderModal, setContainerAutoGraderModal] = useState(false);
   const handleCloseContainerAutoGraderModal = () => {
@@ -210,29 +207,23 @@ const AssignmentUpdatePage = () => {
     fetchCags();
   }
 
-  const [fileEditModal, setFileEditModal] = useState(false);
-  const handleCloseFileEditModal = async () => {
-    setFileEditModal(false)
-    fetchAssignmentProblems()
-  }
-
 
 
 
 
 
   const handleDeleteProblem = async (problem: AssignmentProblem) => {
-    //  const idsToDelete = nonContainerAutograders.filter(ncag => ncag.)
-    const ncag = nonContainerAutograders.find((n) => (n.question === problem.problemName && n.createdAt === problem.createdAt))
-    ncag && RequestService.delete(`/api/course/${courseId}/assignment/${currentAssignmentId}/non-container-auto-graders/${problem.id}`)
-      .then(() => {
-        setAlert({ autoDelete: true, type: 'success', message: 'Problem Deleted' })
-      })
-    RequestService.delete(`/api/course/${courseId}/assignment/${currentAssignmentId}/assignment-problems/${problem.id}`)
-      .then(() => {
-        setAlert({ autoDelete: true, type: 'success', message: 'Problem Deleted' })
-        window.location.reload()
-      })
+  //  const idsToDelete = nonContainerAutograders.filter(ncag => ncag.)
+  const ncag = nonContainerAutograders.find((n) => (n.question === problem.problemName && n.createdAt === problem.createdAt))
+  ncag && RequestService.delete(`/api/course/${courseId}/assignment/${currentAssignmentId}/non-container-auto-graders/${problem.id}`)
+  .then(() => {
+    setAlert({ autoDelete: true, type: 'success', message: 'Problem Deleted' })
+  })
+  RequestService.delete(`/api/course/${courseId}/assignment/${currentAssignmentId}/assignment-problems/${problem.id}`)
+    .then(() => {
+      setAlert({ autoDelete: true, type: 'success', message: 'Problem Deleted' })
+      window.location.reload()
+    })
   }
 
   const handleChange = (value: String, e: React.ChangeEvent<HTMLInputElement>) => {
@@ -244,31 +235,29 @@ const AssignmentUpdatePage = () => {
   }
 
 
-  const handleCategoryChange = (value: Option<String>) => {
+  const handleCategoryChange = (value: Option<String>)  => {
     setFormData(prevState => ({ ...prevState, categoryName: value.label }))
   };
 
-  const handleCategoryCreate = (value: string) => {
-    const newOption: Option = { value: value, label: value }
+  const handleCategoryCreate = (value: string)  => {
+    const newOption : Option = {value: value, label: value}
     setAllCategoryOptions(prevState => {
       const newArr: Option<String>[] = (prevState);
       newArr.push(newOption);
       return newArr;
     })
     setFormData(prevState => ({ ...prevState, categoryName: value }))
-  };
+    };
 
   const openEditModal = (problem: AssignmentProblem) => {
-    const type = problem.metadata.type ?? ""
-    if (type === "MCQ-mult" || type === "MCQ-single") {
+    const type = JSON.parse(problem.metadata).type ?? ""
+    if (type === "MCQ-mult" || type === "MCQ-single"){
       setMcqProblemId(problem.id)
       setMcqEditModal(true)
-    } else if (type === "Match") {
+    } else if (type === "Match"){
       console.log("Implement Match MCQ")
-    } else if (type === "File") {
-      setFileProblemId(problem.id)
-      setFileEditModal(true)
-    } else {
+    }
+    else {
       setTextProblemId(problem.id)
       setTextEditModal(true)
     }
@@ -280,21 +269,20 @@ const AssignmentUpdatePage = () => {
     return isNaN(newDate.getTime()) ? "" : newDate.toISOString().split("Z")[0]
   }
 
-
+  
   return (
     <PageWrapper>
-      <ContainerAutoGraderModal open={containerAutoGraderModal} onClose={handleCloseContainerAutoGraderModal} />
-      <TextProblemModal open={textModal} onClose={handleCloseTextModal} />
-      <TextProblemModal open={textEditModal} onClose={handleCloseTextEditModal} edit problemId={textProblemId} />
-      <CodeProblemModal open={codeModal} onClose={handleCloseCodeModal} />
-      <CodeProblemModal open={fileEditModal} onClose={handleCloseFileEditModal} edit problemId={fileProblemId} />
-      <MultipleChoiceModal open={mcqModal} onClose={handleCloseMcqModal} />
-      <MultipleChoiceModal open={mcqEditModal} onClose={handleCloseEditMcqModal} edit problemId={mcqProblemId} />
+        <ContainerAutoGraderModal open={containerAutoGraderModal} onClose={handleCloseContainerAutoGraderModal} />
+        <TextProblemModal open={textModal} onClose={handleCloseTextModal} />
+        <TextProblemModal open={textEditModal} onClose={handleCloseTextEditModal} edit problemId={textProblemId}/>
+        <CodeProblemModal open={codeModal} onClose={handleCloseCodeModal}/>
+        <MultipleChoiceModal open={mcqModal} onClose={handleCloseMcqModal} />
+        <MultipleChoiceModal open={mcqEditModal} onClose={handleCloseEditMcqModal} edit problemId={mcqProblemId}/>
 
 
       <div className={styles.pageHeader}>
-        <h1 style={{ gridColumnStart: 2 }}>Edit Assignment</h1>
-        <Button className={`btnPrimary ${styles.backToCourse}`} onClick={() => { history.goBack() }}>Back to Course</Button>
+        <h1 style={{gridColumnStart:2}}>Edit Assignment</h1>
+        <Button className={`btnPrimary ${styles.backToCourse}`} onClick={() => {history.goBack()}}>Back to Course</Button>
       </div>
       <div className={styles.grid}>
         <div className={styles.form}>
@@ -303,134 +291,134 @@ const AssignmentUpdatePage = () => {
             <div>
               <div className={styles.textFieldHeader}>Assignment Category: </div>
               <TextDropdown onChange={handleCategoryChange}
-                onCreate={handleCategoryCreate}
-                options={categoryOptions}
-                value={{ value: formData.categoryName, label: formData.categoryName }}
-              />
+                      onCreate={handleCategoryCreate}
+                      options={categoryOptions}
+                      value={{value: formData.categoryName, label: formData.categoryName}}
+                      />
             </div>
             <div>
               <div className={styles.textFieldHeader}>Assignment Name: </div>
 
-              <TextField id="name" onChange={handleChange}
-                invalidated={!!invalidFields.get('name')} helpText={invalidFields.get('name')}
-                className={styles.textField}
-                value={formData.name}
-                sx={{
-                  width: '100%',
-                  "& .MuiInputBase-input.MuiOutlinedInput-input.MuiInputBase-inputMultiline.css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input": { padding: "15px" }
-                }} />
-            </div>
-            <div>
-              <div className={styles.textFieldHeader}>Description: <span style={{ fontStyle: 'italic', color: 'var(--grey)' }}>(optional)</span> </div>
-              <TextField id="description" onChange={handleChange} multiline={true} rows={3}
-                invalidated={!!invalidFields.get('description')}
-                className={styles.textField}
-                placeholder='Provide an optional description...'
-                helpText={invalidFields.get('description')}
-                value={formData.description ? formData.description : ''}
-                sx={{
-                  width: '100%',
-                  "& .MuiInputBase-input.MuiOutlinedInput-input.MuiInputBase-inputMultiline.css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input": { padding: "15px" },
-                  "& .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-multiline.css-dpjnhs-MuiInputBase-root-MuiOutlinedInput-root": { padding: "0px" },
-                }} />
+                <TextField id="name" onChange={handleChange}
+                  invalidated={!!invalidFields.get('name')} helpText={invalidFields.get('name')}
+                  className={styles.textField}
+                  value={formData.name}
+                  sx={{
+                    width: '100%',
+                    "& .MuiInputBase-input.MuiOutlinedInput-input.MuiInputBase-inputMultiline.css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input": { padding: "15px" }
+                  }} />
+              </div>
+              <div>
+                <div className={styles.textFieldHeader}>Description: <span style={{ fontStyle: 'italic', color: 'var(--grey)' }}>(optional)</span> </div>
+                <TextField id="description" onChange={handleChange} multiline={true} rows={3}
+                  invalidated={!!invalidFields.get('description')}
+                  className={styles.textField}
+                  placeholder='Provide an optional description...'
+                  helpText={invalidFields.get('description')}
+                  value={formData.description ? formData.description : ''}
+                  sx={{
+                    width: '100%',
+                    "& .MuiInputBase-input.MuiOutlinedInput-input.MuiInputBase-inputMultiline.css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input": { padding: "15px" },
+                    "& .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-multiline.css-dpjnhs-MuiInputBase-root-MuiOutlinedInput-root": { padding: "0px" },
+                  }} />
+              </div>
             </div>
-          </div>
 
           <div className={styles.submissionsContainer}>
             <div>
               <div className={styles.textFieldHeader}>Max Submissions: </div>
-              <TextField id="maxSubmissions" onChange={handleChange}
-                invalidated={!!invalidFields.get('maxSubmission')}
-                className={styles.textField}
-                helpText={invalidFields.get('maxSubmission')}
-                value={formData.maxSubmissions ? (formData.maxSubmissions).toString() : ''}
-                sx={{ width: '100%', marginLeft: 1 / 10 }} />
+              <TextField id="maxSubmissions" onChange={handleChange} 
+                        invalidated={!!invalidFields.get('maxSubmission')}
+                        className={styles.textField}
+                        helpText={invalidFields.get('maxSubmission')}
+                        value={formData.maxSubmissions ? (formData.maxSubmissions).toString() : ''} 
+                        sx={{width: '100%', marginLeft : 1/10}}/>
 
             </div>
             <div>
               <div className={styles.textFieldHeader}>Max File Size (kb): </div>
               <TextField id="maxFileSize" onChange={handleChange}
-                invalidated={!!invalidFields.get('maxFileSize')}
-                className={styles.textField}
-                helpText={invalidFields.get('maxFileSize')}
-                value={formData.maxFileSize ? formData.maxFileSize.toString() : ''}
-                sx={{ width: '100%', marginLeft: 1 / 10 }} />
+                        invalidated={!!invalidFields.get('maxFileSize')}
+                        className={styles.textField}
+                        helpText={invalidFields.get('maxFileSize')}
+                        value={formData.maxFileSize ? formData.maxFileSize.toString() : ''} 
+                        sx={{width: '100%', marginLeft : 1/10}}/>
             </div>
           </div>
           <div className={styles.datepickerContainer}>
-            <label htmlFor="start_date">Start Date (EDT)*</label>
-            <label htmlFor="due_date">Due Date (EDT)*</label>
-            <label htmlFor="end_date">End Date (EDT)*</label>
+              <label htmlFor="start_date">Start Date (EDT)*</label>
+              <label htmlFor="due_date">Due Date (EDT)*</label>
+              <label htmlFor="end_date">End Date (EDT)*</label>
 
-            <input type='datetime-local' id="start_date" value={utcToLocal(new Date(formData.startDate))} onChange={handleStartDateChange} />
-            <input type='datetime-local' id="due_date" value={utcToLocal(new Date(formData.dueDate))} onChange={handleDueDateChange} />
-            <input type='datetime-local' id="end_date" value={utcToLocal(new Date(formData.endDate))} onChange={handleEndDateChange} />
+              <input type='datetime-local' id="start_date" value={utcToLocal(new Date(formData.startDate))} onChange={handleStartDateChange}/>
+              <input type='datetime-local' id="due_date" value={utcToLocal(new Date(formData.dueDate))} onChange={handleDueDateChange}/>
+              <input type='datetime-local' id="end_date" value={utcToLocal(new Date(formData.endDate))} onChange={handleEndDateChange}/>
           </div>
           <h2 className={styles.header}>Attachments</h2>
-          {(files.length != 0) ? (
-            <div className={styles.filesList}>
-              <span>Files:</span>
-              {files.slice(0, -1).map((file, index) => ( // For some reason the most recent file appears twice, so I did this as a quick fix, should be fixed in future
+            {(files.length != 0) ? (
+              <div className={styles.filesList}>
+                <span>Files:</span> 
+                {files.slice(0,-1).map((file, index) => ( // For some reason the most recent file appears twice, so I did this as a quick fix, should be fixed in future
                 <div key={index}>
                   <span>&nbsp;{`${file.name},`}</span>
                 </div>))}
-              <div key={files.length - 1}>
-                <span>&nbsp;{`${files[files.length - 1].name}`}</span>
+                <div key={files.length-1}>
+                  <span>&nbsp;{`${files[files.length-1].name}`}</span>
               </div>
-            </div>)
-            : <div className={styles.filesList} style={{ fontStyle: 'italic' }}>No files attached</div>}
-          <input type='file' id='fileUp' onChange={handleFile} hidden />
+              </div>) 
+           : <div className={styles.filesList} style={{fontStyle:'italic'}}>No files attached</div>}
+          <input type='file' id='fileUp' onChange={handleFile} hidden/>
           <label htmlFor="fileUp">
-            <StyledEngineProvider injectFirst>
-              <MuiButton disableRipple component="span" className={styles.fileUpload}>
-                Choose Files
-              </MuiButton>
-            </StyledEngineProvider>
-          </label>
+          <StyledEngineProvider injectFirst>
+            <MuiButton disableRipple component="span" className={styles.fileUpload}>
+              Choose Files
+            </MuiButton>
+          </StyledEngineProvider>
+          </label> 
 
         </div>
         <div className={styles.problemsList}>
-          <h2 className={styles.header}>Add Problems</h2>
+        <h2 className={styles.header}>Add Problems</h2>
           <div className={styles.buttonContainer}>
-            <Button onClick={() => setCodeModal(true)} className='btnSecondary'>Code/File Input</Button>
+          <Button onClick={() => setCodeModal(true)} className='btnSecondary'>Code/File Input</Button>
             <Button onClick={() => setTextModal(true)} className='btnSecondary'>Text Input</Button>
             <Button onClick={() => setMcqModal(true)} className='btnSecondary'>Multiple Choice</Button>
           </div>
           <h2 className={styles.header}>Add Graders</h2>
           <div className={styles.buttonContainer}>
-            <Button onClick={() => setContainerAutoGraderModal(true)} className='btnSecondary'>
-              Code Grader
-            </Button>
+          <Button onClick={() => setContainerAutoGraderModal(true)} className='btnSecondary'>
+            Code Grader
+          </Button>
             <Button onClick={() => {
-              history.push(`createNCAG`)
-            }} className='btnSecondary'>Non-code Grader</Button>
-          </div>
+                        history.push(`createNCAG`)
+                    }} className='btnSecondary'>Non-code Grader</Button>
+          </div>  
           <h2 className={styles.header}>Graders</h2>
-          {nonContainerAutograders.length != 0 && nonContainerAutograders.map((nonContainerAutograder) => (<div>
-            <span style={{ fontStyle: 'italic' }}>{nonContainerAutograder.question}</span> -
-            <span style={{ color: 'var(--grey)' }}> Non-Code Grader</span></div>))}
-
-          {containerAutograders.length != 0 && containerAutograders.map((containerAutograder) => (<div>
-            <span style={{ fontStyle: 'italic' }}>Code Grader {containerAutograder.id}</span> -
-            <span style={{ color: 'var(--grey)' }}> Code Grader</span></div>))}
-          {nonContainerAutograders.length == 0 && containerAutograders.length == 0 && <div style={{ fontStyle: 'italic' }}>No graders yet</div>}
+            {nonContainerAutograders.length != 0 && nonContainerAutograders.map((nonContainerAutograder) => (<div>
+              <span style={{fontStyle:'italic'}}>{nonContainerAutograder.question}</span> - 
+              <span style={{color: 'var(--grey)'}}> Non-Code Grader</span></div>))}
+
+            {containerAutograders.length != 0 && containerAutograders.map((containerAutograder) => (<div>
+            <span style={{fontStyle:'italic'}}>Code Grader {containerAutograder.id}</span> -
+            <span style={{color: 'var(--grey)'}}> Code Grader</span></div>))}
+            {nonContainerAutograders.length == 0 && containerAutograders.length == 0 && <div style={{fontStyle:'italic'}}>No graders yet</div>}
           <h2 className={styles.header}>Problems</h2>
           <div>
             {assignmentProblems.length != 0 ? (assignmentProblems.map((problem) => (
               <div>
-                <AssignmentProblemListItem problem={problem} disabled={true} />
-                <div style={{ margin: '5px 0 10px 0' }}>
-                  <Button className={styles.editProblem} onClick={() => { openEditModal(problem) }}>Edit</Button>|
+              <AssignmentProblemListItem problem={problem} disabled={true}/>
+                <div style={{margin: '5px 0 10px 0'}}>
+                  <Button className={styles.editProblem} onClick={() => {openEditModal(problem)}}>Edit</Button>|
                   <Button className={styles.deleteButton} onClick={() => { if (problem !== undefined && problem.id !== undefined) { handleDeleteProblem(problem) } }}>Delete</Button>
                 </div>
-                <hr />
+                <hr/>
               </div>
-            ))) : <div style={{ fontStyle: 'italic' }}>No problems yet</div>}
+            ))) : <div style={{fontStyle:'italic'}}>No problems yet</div>}
           </div>
         </div>
       </div>
-      <div style={{ display: 'flex', justifyContent: 'center', margin: '20px' }}>
-        <Button onClick={handleAssignmentUpdate} className='btnPrimary'>Save & Exit</Button>
+      <div style={{ display: 'flex', justifyContent: 'center', margin: '20px'}}>
+      <Button onClick={handleAssignmentUpdate} className='btnPrimary'>Save & Exit</Button>
       </div>
     </PageWrapper>
   )
diff --git a/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx b/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
index 557c2049..668fc903 100644
--- a/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { ExpressValidationError, AssignmentProblem } from 'devu-shared-modules';
+import { ExpressValidationError } from 'devu-shared-modules';
 import { SET_ALERT } from 'redux/types/active.types';
 import { useActionless } from 'redux/hooks';
 import RequestService from 'services/request.service';
@@ -9,11 +9,9 @@ import Modal from 'components/shared/layouts/modal';
 interface Props {
     open: boolean;
     onClose: () => void;
-    edit?: boolean;
-    problemId?: number;
 }
 
-const CodeProblemModal = ({ open, onClose, edit, problemId }: Props) => {
+const CodeProblemModal = ({ open, onClose }: Props) => {
     const [setAlert] = useActionless(SET_ALERT);
     const { assignmentId } = useParams<{ assignmentId: string }>();
     const { courseId } = useParams<{ courseId: string }>();
@@ -24,56 +22,31 @@ const CodeProblemModal = ({ open, onClose, edit, problemId }: Props) => {
         maxScore: '',
     });
 
-    const setInitalFormData = async () => {
-        if (!problemId) {
-            return
-        }
-
-        const assignmentProblemData = await RequestService.get<AssignmentProblem>(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems/${problemId}`);
-        setFormData(({
-            title: assignmentProblemData.problemName,
-            maxScore: '' + assignmentProblemData.maxScore,
-        }))
-    }
-
-    useEffect(() => { setInitalFormData() }, [problemId])
 
     const submittable = () => {
-        if (!formData.title || !formData.maxScore) { return false }
-        else { return true }
+        if (!formData.title || !formData.maxScore) {return false}
+        else {return true}
     }
 
     const handleSubmit = () => {
         if (!submittable) return;
 
+
         const problemFormData = {
             assignmentId: parseInt(assignmentId),
             problemName: formData.title,
             maxScore: parseInt(formData.maxScore),
-            metadata: {
-                type: 'File'
-            }
         };
 
-        if (edit) {
-            RequestService.put(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems/${problemId}`, problemFormData)
-                .then(() => {
-                    setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' });
-                })
-                .catch((err: ExpressValidationError[] | Error) => {
-                    const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message;
-                    setAlert({ autoDelete: false, type: 'error', message });
-                });
-        } else {
-            RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
-                .then(() => {
-                    setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' });
-                })
-                .catch((err: ExpressValidationError[] | Error) => {
-                    const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message;
-                    setAlert({ autoDelete: false, type: 'error', message });
-                });
-        }
+        RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
+            .then(() => {
+                setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' });
+            })
+            .catch((err: ExpressValidationError[] | Error) => {
+                const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message;
+                setAlert({ autoDelete: false, type: 'error', message });
+            });
+
 
         closeModal();
     };
@@ -82,7 +55,7 @@ const CodeProblemModal = ({ open, onClose, edit, problemId }: Props) => {
         setFormData({
             title: '',
             maxScore: ''
-        })
+        })   
         onClose()
     }
 
@@ -94,27 +67,25 @@ const CodeProblemModal = ({ open, onClose, edit, problemId }: Props) => {
     };
 
     return (
-        <Modal title={edit ? "Edit File Upload Problem" : "Add File Upload Problem"} buttonAction={handleSubmit} open={open} onClose={closeModal} isSubmittable={submittable}>
+        <Modal title="Add Code/File Input Problem" buttonAction={handleSubmit} open={open} onClose={closeModal} isSubmittable={submittable}>
             <div className="input-group">
                 <label htmlFor="title" className="input-label">Problem Title:</label>
-                <input
-                    type="text"
-                    id="title"
-                    placeholder="e.g. Application Objective 3"
-                    onChange={handleChange}
-                    value={formData.title}
+                <input 
+                    type="text" 
+                    id="title" 
+                    placeholder="e.g. Application Objective 3" 
+                    onChange={handleChange} 
                 />
             </div>
-
+            
             <div className="input-group">
                 <label htmlFor="maxScore" className="input-label">Maximum Score:</label>
-                <input
-                    type="number"
-                    id="maxScore"
-                    placeholder="e.g. 10"
-                    min="0"
-                    onChange={handleChange}
-                    value={formData.maxScore}
+                <input 
+                    type="number" 
+                    id="maxScore" 
+                    placeholder="e.g. 10" 
+                    min="0" 
+                    onChange={handleChange} 
                 />
             </div>
         </Modal>
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index f82e6771..8b8c8950 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -37,7 +37,7 @@ const MultipleChoiceModal = ({ open, onClose, edit, problemId}: Props) => {
         const ncagData = await RequestService.get<NonContainerAutoGrader[]>(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders`);
         const ncag = ncagData.find((as) => (as.id === problemId))
         if (assignmentProblemData.metadata){
-            const meta = assignmentProblemData.metadata
+            const meta = JSON.parse(assignmentProblemData.metadata)
             const type = meta.type
             if (type === "MCQ-mult"){
                 setBoxType("checkbox")
diff --git a/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx b/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
index fd5d2ef7..6002f01e 100644
--- a/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState,useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import { ExpressValidationError, AssignmentProblem, NonContainerAutoGrader } from 'devu-shared-modules'
 import { SET_ALERT } from 'redux/types/active.types'
@@ -25,28 +25,30 @@ const TextProblemModal = ({ open, onClose, edit, problemId }: Props) => {
     });
 
     const setInitalFormData = async () => {
-        if (!problemId) {
+        if (!problemId){
             return
         }
-
+        
         const assignmentProblemData = await RequestService.get<AssignmentProblem>(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems/${problemId}`);
         const ncagData = await RequestService.get<NonContainerAutoGrader[]>(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders`);
         const ncag = ncagData.find((ncag) => (ncag.createdAt === assignmentProblemData.createdAt))
         console.log(ncag)
         setFormData(({
-            title: assignmentProblemData.problemName,
-            maxScore: '' + assignmentProblemData.maxScore,
-            correctAnswer: ncag ? ncag.correctString : '',
-            regex: ncag ? ncag.isRegex : false
+                title: assignmentProblemData.problemName,
+                maxScore: '' + assignmentProblemData.maxScore,
+                correctAnswer: ncag ? ncag.correctString : '',
+                regex: ncag ? ncag.isRegex : false
         }))
+        
+        
     }
 
-    useEffect(() => { setInitalFormData() }, [problemId])
+    useEffect(() => {setInitalFormData()}, [problemId])
 
 
     const submittable = () => {
         if (!formData.title || !formData.maxScore || !formData.correctAnswer) { return false }
-        else { return true }
+        else {return true}
     }
 
     const handleSubmit = async () => {
@@ -74,10 +76,10 @@ const TextProblemModal = ({ open, onClose, edit, problemId }: Props) => {
             correctString: formData.correctAnswer,
             score: Number(formData.maxScore),
             isRegex: formData.regex,
-
+            
         }
-
-        if (edit) { // If updating, we'll make a put request
+        
+        if (edit){ // If updating, we'll make a put request
             await RequestService.put(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems/${problemId}`, problemFormData)
                 .then(() => {
                     console.log("PROBLEM UPDATED")
@@ -95,30 +97,30 @@ const TextProblemModal = ({ open, onClose, edit, problemId }: Props) => {
                     const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message
                     setAlert({ autoDelete: false, type: 'error', message })
                 })
-        }
-
+        } 
+        
         else { // If creating, we'll make a post request
             await RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
-                .then(() => {
-                    console.log("PROBLEM CREATED");
-                    setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' });
-
-                })
-                .catch((err: ExpressValidationError[] | Error) => {
-                    const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message
-                    setAlert({ autoDelete: false, type: 'error', message })
-                })
-
-            await RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders/`, graderFormData)
-                .then(() => {
-                    console.log("GRADER CREATED")
-                })
-                .catch((err: ExpressValidationError[] | Error) => {
-                    const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message
-                    setAlert({ autoDelete: false, type: 'error', message })
-                })
+              .then(() => {
+                console.log("PROBLEM CREATED");
+                setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' });
+
+            })
+            .catch((err: ExpressValidationError[] | Error) => {
+                const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message
+                setAlert({ autoDelete: false, type: 'error', message })
+            })
+
+        await RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders/`, graderFormData)
+            .then(() => {
+                console.log("GRADER CREATED")
+            })
+            .catch((err: ExpressValidationError[] | Error) => {
+                const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message
+                setAlert({ autoDelete: false, type: 'error', message })
+            })
         }
-
+        
 
         closeModal();
     }
@@ -130,9 +132,8 @@ const TextProblemModal = ({ open, onClose, edit, problemId }: Props) => {
             regex: false
         })
     }
-
     const closeModal = () => {
-        if (!edit) { // We have a useEffect watching when problemId changes, so closing the modal and reopening for the same ID would not re-fill info
+        if (!edit){ // We have a useEffect watching when problemId changes, so closing the modal and reopening for the same ID would not re-fill info
             resetData
         }
         onClose();
@@ -162,7 +163,7 @@ const TextProblemModal = ({ open, onClose, edit, problemId }: Props) => {
                 <input type="number" id="maxScore" onChange={handleChange} value={formData.maxScore}
                     placeholder='e.g. 10' min="0" />
             </div>
-            <label htmlFor="regex">Correct Answer is Regex <input type="checkbox" id="regex" checked={formData.regex} /></label>
+            <label htmlFor="regex">Correct Answer is Regex <input type="checkbox" id="regex" checked={formData.regex}/></label>
         </Modal>
     )
 }
diff --git a/devU-client/src/components/pages/submissions/submissionFileView.tsx b/devU-client/src/components/pages/submissions/submissionFileView.tsx
index 687a53a6..8a31cd7f 100644
--- a/devU-client/src/components/pages/submissions/submissionFileView.tsx
+++ b/devU-client/src/components/pages/submissions/submissionFileView.tsx
@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from 'react'
-import { useParams, useHistory } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import RequestService from 'services/request.service'
 import { Submission } from 'devu-shared-modules'
-// import { Document, Page } from 'react-pdf'
+import {Document, Page} from 'react-pdf'
 import { pdfjs } from 'react-pdf'
-import 'react-pdf/dist/Page/TextLayer.css';
 import PageWrapper from 'components/shared/layouts/pageWrapper'
 import { getToken } from 'utils/authentication.utils'
-import PDFViewer from 'components/utils/pdfViewer'
 
 import config from '../../../config'
 const proxiedUrls = {
@@ -16,14 +14,14 @@ const proxiedUrls = {
 
 function _replaceUrl(userUrl: string) {
     const proxy: string | undefined = Object.keys(proxiedUrls).find((key) => {
-        if (userUrl.startsWith(key)) return true
-        return false
+      if (userUrl.startsWith(key)) return true
+      return false
     })
-
+  
     if (!proxy) return userUrl
-
+  
     return userUrl.replace(proxy, proxiedUrls[proxy as keyof typeof proxiedUrls])
-}
+  }
 
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
@@ -32,11 +30,11 @@ const SubmissionFileView = () => {
     const { courseId, assignmentId, submissionId } = useParams<{ courseId: string, assignmentId: string, submissionId: string }>()
     const [bucket, setBucket] = useState('')
     const [filename, setFilename] = useState('')
-    const history = useHistory()
     const authToken = getToken()
 
     const [file, setFile] = useState<File | Blob | null>(null)
-
+    const [numPages, setNumPages] = useState(0)
+    
     useEffect(() => {
         fetchData()
     }, [])
@@ -50,14 +48,14 @@ const SubmissionFileView = () => {
     const fetchData = async () => {
         try {
             await RequestService.get<Submission>(`/api/course/${courseId}/assignment/${assignmentId}/submissions/${submissionId}`)
-                .then((data) => {
-                    const submissionFiles = JSON.parse(data.content)
-                    const [tempbucket, tempfilename] = submissionFiles.filepaths[0].split('/')
-                    setBucket(tempbucket)
-                    setFilename(tempfilename)
+            .then((data) => {
+                const submissionFiles = JSON.parse(data.content)
+                const [tempbucket,tempfilename] = submissionFiles.filepaths[0].split('/')
+                setBucket(tempbucket)
+                setFilename(tempfilename)
 
 
-                })
+            })
         } catch (e) {
             console.error(e)
         }
@@ -76,36 +74,39 @@ const SubmissionFileView = () => {
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
-
+    
             const arrayBuffer = await response.arrayBuffer();
             const blob = new Blob([arrayBuffer], { type: 'application/pdf' });
             const file = new File([blob], filename, { type: 'application/pdf' });
+            
             setFile(file);
         } catch (e) {
             console.error(e)
         }
     }
 
+    const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
+        setNumPages(numPages)
+    }
+
     return (
         <PageWrapper>
-            <div className="pageHeader">
-                <h1>View Files</h1>
-                <button className="pageHeaderBtn" onClick={() => {
-                    history.push(`/course/${courseId}/assignment/${assignmentId}`)
-                }}>Back to Assignment</button>
-            </div>
-            <div style={{ maxWidth: "min-content", margin: "auto" }}>
-                {file ? (
-                    <PDFViewer file={file}/>
-                ) : (
-                    <p>No files found for this submission</p>
-                )}
+            <div style={{maxWidth:"900px", margin:"auto"}}>
+            {file && 
+                <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
+                    {[...Array(numPages)].map((_, index) => (
+                        <div style={{marginBottom:"20px"}}>
+                            <Page key={index} pageNumber={index + 1} renderTextLayer={false} renderAnnotationLayer={false} scale={1.5}/>
+                        </div>
+                    ))}
+                </Document>
+            }
             </div>
-            <br />
+            <br/>
 
         </PageWrapper>
     )
 
 }
 
-export default SubmissionFileView;
\ No newline at end of file
+export default SubmissionFileView
\ No newline at end of file
