diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss
index 3ae2d520..912d4282 100644
--- a/devU-client/src/assets/global.scss
+++ b/devU-client/src/assets/global.scss
@@ -165,7 +165,7 @@
 
     background-color: var(--background);
     color: var(--text-color);
-
+    
     --background: white;
     --text-color: black;
     --text-color-secondary: #363636;
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index a2b811c8..29fe50fe 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -40,6 +40,7 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
     if (!meta || !meta.type){
         return (
         <div className={styles.problem}>
+            <span>Metadata missing, error!</span>
         </div>)
     }
 
diff --git a/devU-client/src/components/listItems/simpleAssignmentListItem.scss b/devU-client/src/components/listItems/simpleAssignmentListItem.scss
index 7716d36b..345ccbf2 100644
--- a/devU-client/src/components/listItems/simpleAssignmentListItem.scss
+++ b/devU-client/src/components/listItems/simpleAssignmentListItem.scss
@@ -49,14 +49,13 @@
   flex-direction: column;
 
 
-  border-radius: 0.6rem;
-  transition: background-color 0.2s linear;
+  transition: all 0.2s ease;
 
   // color: $primary;
 
   color: $text-color;
-  // &:hover,
-  // &:focus {
-  //   background: $list-simple-item-background-hover;
-  // }
+  &:hover,
+  &:focus {
+   background-color: $list-item-background-hover;
+  }
 }
\ No newline at end of file
diff --git a/devU-client/src/components/listItems/simpleAssignmentListItem.tsx b/devU-client/src/components/listItems/simpleAssignmentListItem.tsx
index 137d4489..8af9e05b 100644
--- a/devU-client/src/components/listItems/simpleAssignmentListItem.tsx
+++ b/devU-client/src/components/listItems/simpleAssignmentListItem.tsx
@@ -10,6 +10,7 @@ type Props = {
 }
 
 const SimpleAssignmentListItem = ({assignment}: Props) => (
+<div onClick={(e) => (e.stopPropagation())}> {/*Wrapped in div so that clicking this item does not propogate to course cards onClick and take you to course detail page */}
     <ListItemWrapper to={`/course/${assignment.courseId}/assignment/${assignment.id}`} tag={assignment.name}
                      className={styles.title} tagStyle={styles.tag} containerStyle={styles.container}>
         <div className={styles.subText}>{assignment.name}</div>
@@ -18,9 +19,8 @@ const SimpleAssignmentListItem = ({assignment}: Props) => (
             <span>&nbsp;|&nbsp;</span>
             <span style={{fontWeight:'700'}}>End:&nbsp;</span>{wordPrintDate(assignment.endDate)}
         </div>
-
-
     </ListItemWrapper>
+</div>
 )
 
 
diff --git a/devU-client/src/components/listItems/userCourseListItem.scss b/devU-client/src/components/listItems/userCourseListItem.scss
index 6e709717..9782d2c7 100644
--- a/devU-client/src/components/listItems/userCourseListItem.scss
+++ b/devU-client/src/components/listItems/userCourseListItem.scss
@@ -6,7 +6,6 @@
   font-weight: 600;
   margin: 0;
   padding: 15px;
-  /* Add padding to the text inside the name block */
   background: $primary;
   width: 100%;
   text-align: center;
@@ -33,12 +32,12 @@
   text-overflow: ellipsis;
   overflow-wrap: break-word;
   border-bottom: 1px solid #ddd;
-
 }
 
 .Buttons {
   display: flex;
   justify-content: center;
+  cursor: default;
   margin-top: auto;
   padding: 15px;
   gap: 20px;
diff --git a/devU-client/src/components/pages/courses/courseDetailPage.scss b/devU-client/src/components/pages/courses/courseDetailPage.scss
index 979f0e57..53437aa9 100644
--- a/devU-client/src/components/pages/courses/courseDetailPage.scss
+++ b/devU-client/src/components/pages/courses/courseDetailPage.scss
@@ -91,6 +91,8 @@
     margin-bottom: 20px;
 }
 
+
+
 .class_title{
     grid-column-start: 2;
     padding: 0 20px;
diff --git a/devU-client/src/components/pages/courses/courseDetailPage.tsx b/devU-client/src/components/pages/courses/courseDetailPage.tsx
index 0f5b9420..c0af9680 100644
--- a/devU-client/src/components/pages/courses/courseDetailPage.tsx
+++ b/devU-client/src/components/pages/courses/courseDetailPage.tsx
@@ -101,7 +101,7 @@ const CourseDetailPage = () => {
                                 </div>
                             </div>
                             <div>
-                                <h3>Course Links</h3>
+                                <h3 className={styles.meta_header}>Course Links</h3>
                                 <div className={styles.buttons_container}>
                                     <button className='btnSecondary' onClick={() => {
                                         role.isInstructor() ? history.push(`/course/${courseId}/gradebook/instructor`) : 
@@ -112,7 +112,7 @@ const CourseDetailPage = () => {
                                 <AddAssignmentModal open={openModal} onClose={handleCloseModal} />
                             </div>
                         </div>
-                        <div className={styles.subheader}><h3>Assignments</h3>
+                        <div className={styles.subheader}><h3 className={styles.meta_header}>Assignments</h3>
                             {role.isInstructor() &&(
                                 <button className='btnPrimary' id={styles.parallel_button} onClick={() => {
                                     setOpenModal(true)}}>Add Assignment
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
index 3735c575..112c39e5 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
+++ b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
@@ -1,8 +1,6 @@
 @import 'variables';
 
 
-
-
 h2 {
   text-align: center;
 }
@@ -16,6 +14,10 @@ p {
   padding: 0 100px;
 }
 
+.input {
+  font-size: 14px;
+}
+
 .flex {
   display: flex;
   justify-content: space-between;
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
index 104a955d..3f4580b5 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 // import { useHistory } from 'react-router-dom'
-import { ExpressValidationError } from 'devu-shared-modules'
+import { ExpressValidationError, Assignment } from 'devu-shared-modules'
 import 'react-datepicker/dist/react-datepicker.css'
 // import PageWrapper from 'components/shared/layouts/pageWrapper'
 
@@ -9,6 +9,8 @@ import { useActionless } from 'redux/hooks'
 // import TextField from 'components/shared/inputs/textField'
 // import Button from '../../../shared/inputs/button'
 // import DragDropFile from 'components/utils/dragDropFile'
+import { Option } from 'components/shared/inputs/dropdown'
+
 
 import { SET_ALERT } from 'redux/types/active.types'
 
@@ -17,6 +19,7 @@ import { useParams } from 'react-router-dom'
 
 import formStyles from './assignmentFormPage.scss'
 import Modal from 'components/shared/layouts/modal'
+import TextDropdown from 'components/shared/inputs/textDropDown'
 
 interface Props {
     open: boolean;
@@ -29,6 +32,8 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
     const [endDate, setEndDate] = useState('')
     const [dueDate, setDueDate] = useState('')
     const [startDate, setStartDate] = useState('')
+    const [categoryOptions, setAllCategoryOptions] = useState<Option<String>[]>([])
+    const [assignments, setAssignments] = useState<Assignment[]>([])
 
     const [formData, setFormData] = useState({
         courseId: courseId,
@@ -47,6 +52,20 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
         setFormData(prevState => ({ ...prevState, [key]: value }))
     }
 
+    const handleCategoryChange = (value: Option<String>)  => {
+        setFormData(prevState => ({ ...prevState, categoryName: value.label }))
+      };
+
+    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 handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => { setStartDate(e.target.value) }
     const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => { setEndDate(e.target.value) }
     const handleDueDateChange = (e: React.ChangeEvent<HTMLInputElement>) => { setDueDate(e.target.value) }
@@ -99,36 +118,54 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
             .finally(() => {
 
             })
-
     }
 
+    useEffect(() => {RequestService.get(`/api/course/${courseId}/assignments`).then((res) => { setAssignments(res) })}, [formData])
+
+
+    useEffect(() => {
+        const categories = [...new Set(assignments.map(a => a.categoryName))];
+        const options = categories.map((category) => ({
+            value: category,
+            label: category
+          }));
+        
+        setAllCategoryOptions(options);
+    }, [assignments])
 
     return (
         <Modal title="Add Assignment" buttonAction={handleSubmit} open={open} onClose={onClose}>
             <div className="input-group">
                 <label htmlFor="categoryName" className="input-label">Assignment Category:</label>
-                <input type="text" id="categoryName" onChange={handleChange}
-                placeholder='Type assignment category' />
+                <TextDropdown
+                onChange={handleCategoryChange}
+                onCreate={handleCategoryCreate}
+                options={categoryOptions}
+                custom={{control: () => ({border:'none', padding:'3px 0'}),
+                        placeholder: () => ({color: '#555555'}),
+                        input: () => ({fontSize: '14px'}),
+                        singleValue: () => ({fontSize: '14px'})}}
+                value={formData.categoryName ? {value: formData.categoryName, label: formData.categoryName} : undefined}/>
             </div>
             <div className="input-group">
                 <label htmlFor="name" className="input-label">Assignment Name:</label>
-                <input type="text" id="name" onChange={handleChange} 
+                <input type="text" id="name" onChange={handleChange} className={formStyles.input}
                 placeholder='e.g. PA3'/>
             </div>
             <div className="input-group">
                 <label htmlFor="description" className="input-label">Description: <span>(optional)</span></label>
-                <textarea rows={4} id="description" onChange={handleChange} 
+                <textarea rows={4} id="description" onChange={handleChange} className={formStyles.input}
                 placeholder='Provide an optional assignment description'/>
             </div>
             <div className='input-subgroup-2col'>
                 <div className="input-group">
                     <label htmlFor="maxSubmissions" className="input-label">Maximum Submissions:</label>
-                    <input type="number"  id="maxSubmissions" onChange={handleChange} 
+                    <input type="number"  id="maxSubmissions" onChange={handleChange} className={formStyles.input}
                     placeholder='e.g. 1' value={formData.maxSubmissions} min="0"/>
                 </div>
                 <div className="input-group">
                     <label htmlFor="maxFileSize" className="input-label">Maximum File Size (KB):</label>
-                    <input type="number" id="maxFileSize" onChange={handleChange} 
+                    <input type="number" id="maxFileSize" onChange={handleChange} className={formStyles.input}
                     placeholder='e.g. 100' value={formData.maxFileSize} min="0"/>
                 </div>
             </div>
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
index 25ba08f4..9a9660b4 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
@@ -39,8 +39,8 @@
 .textField {
     align-items: center;
     margin-bottom: 0;
-    background: none;
     border: 2px solid #ccc;
+    width: inherit;
 }
 
 .textFieldHeader{
@@ -155,7 +155,7 @@ input[type='datetime-local'] {
     font-weight: 700;
     font-size: 14px;
     color: #fff;
-    padding: 5px 15px;
+    padding: 3px 14px;
     font-style: normal;
     max-width: fit-content;
     transition: all 0.2s ease;
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
index 7173c189..a1f0ef92 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -15,8 +15,8 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import { getCssVariables } from 'utils/theme.utils'
 import { Button as MuiButton, StyledEngineProvider } from '@mui/material'
-/*import Dropdown, { Option } from 'components/shared/inputs/dropdown';*/
-//import Select from 'react-select/src/Select'
+import TextDropdown from 'components/shared/inputs/textDropDown'
+import { Option } from 'components/shared/inputs/dropdown'
 import ContainerAutoGraderModal from '../containers/containerAutoGraderModal';
 import TextProblemModal from './textProblemModal'
 import CodeProblemModal from './codeProblemModal'
@@ -40,8 +40,9 @@ const AssignmentUpdatePage = () => {
 
   
 
-  /*const [categories, setCategories] = useState<Category[]>([])
-  const [categoryOptions, setAllCategoryOptions] = useState<Option<Category>[]>([])*/
+  const [assignments, setAssignments] = useState<Assignment[]>([])
+  const [categoryOptions, setAllCategoryOptions] = useState<Option<String>[]>([])
+  const [currentCategory, setCurrentCategory] = useState<Option<String>>()
 
 
   const [invalidFields, setInvalidFields] = useState(new Map<string, string>())
@@ -87,23 +88,13 @@ const AssignmentUpdatePage = () => {
       setAssignmentProblemData(problem)
     }
   }
-  const handleCloseModal = () => {setOpenEditModal(false)}
+  const handleCloseEditModal = () => {
+    setOpenEditModal(false)
+  }
   useEffect(() => {
     if (assignmentProblemData.maxScore !== -1) { setOpenEditModal(true) }
   }, [assignmentProblemData])
 
-  const handleChange = (value: String, e: React.ChangeEvent<HTMLInputElement>) => {
-    const key = e.target.id
-    const newInvalidFields = removeClassFromField(invalidFields, key)
-    setInvalidFields(newInvalidFields)
-
-    setFormData(prevState => ({ ...prevState, [key]: value }))
-  }
-  const handleProblemChange = (value: String, e: React.ChangeEvent<HTMLInputElement>) => {
-    const key = e.target.id
-    setAssignmentProblemData(prevState => ({ ...prevState, [key]: value }))
-  }
-
   // 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>) => {setFormData(prevState => ({ ...prevState, startDate: e.target.value }))}
@@ -122,23 +113,32 @@ const AssignmentUpdatePage = () => {
   }
 
   const fetchAssignmentProblems = () => {
-    RequestService.get(`/api/course/${courseId}/assignment/${currentAssignmentId}/assignment-problems`)
-      .then((res) => { setAssignmentProblems(res) })
+    RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders`)
+    .then((res) => { setNonContainerAutograders(res) })
+     RequestService.get(`/api/course/${courseId}/assignment/${currentAssignmentId}/assignment-problems`)
+      .then((res) => { setAssignmentProblems(res)})
   }
-
-
+  
+  
 
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignments/${assignmentId}`).then((res) => { setFormData(res) })}, [])
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`).then((res) => { setAssignmentProblems(res) })}, [])
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders`).then((res) => { setNonContainerAutograders(res) })}, [])
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/container-auto-graders`).then((res) => { setContainerAutograders(res) })}, [])
+  useEffect(() => {RequestService.get(`/api/course/${courseId}/assignments`).then((res) => { setAssignments(res) })}, [formData])
 
-  
-  /*useEffect(() => {RequestService.get(`/api/course/${courseId}/categories/`).then((res) => { setCategories(res) }).finally(convertToOptions)}, [])
-  const convertToOptions = () => {
-    setAllCategoryOptions(categories.map((category) => ({label: category.name, value: category}))) 
-  }*/
+  useEffect(() => {
+    const categories = [...new Set(assignments.map(a => a.categoryName))];
+    const options = categories.map((category) => ({
+        value: category,
+        label: category
+      }));
+    
+    setAllCategoryOptions(options);
+    setCurrentCategory(categoryOptions.find((category) => (category.value === formData.categoryName)))
+}, [assignments])
 
+  
   const handleAssignmentUpdate = () => {
     const finalFormData = {
       courseId: formData.courseId,
@@ -203,48 +203,26 @@ const AssignmentUpdatePage = () => {
     })
   }
 
-  /*const handleAssignmentChange = (e: React.MouseEvent<HTMLHeadingElement>) => {
-    const assignmentDetails = assignmentsList.find((assignment) => assignment.id === parseInt(e.currentTarget.id))
-    if (assignmentDetails !== undefined && assignmentDetails.id !== undefined) {
-      setAssignmentProblems(allAssignmentProblems.get(assignmentDetails.id) || [])
-      setCurrentAssignmentId(assignmentDetails.id)
-    } 
-    if (assignmentDetails !== undefined) {
-      setFormData(assignmentDetails)
-    }
-  }*/
 
-  // const [addProblemForm, setAddProblemForm] = useState({
-  //   assignmentId: currentAssignmentId,
-  //   problemName: '',
-  //   maxScore: 0,
-  // })
+  
 
-  const [textModal, setTextModal] = useState(false)
-  const handleCloseTextModal = () => {setTextModal(false)}
+  const [textModal, setTextModal] = useState(false);
+  const handleCloseTextModal = () => {
+    setTextModal(false)
+    fetchAssignmentProblems()
+  }
   const [codeModal, setCodeModal] = useState(false);
-  const handleCloseCodeModal = () => {setCodeModal(false)};
+  const handleCloseCodeModal = () => {
+    setCodeModal(false)
+    fetchAssignmentProblems()
+  }  
   const [mcqModal, setMcqModal] = useState(false);
-  const handleCloseMcqModal = () => {setMcqModal(false)};
-
-
-  // const handleAddProblemChange = (value: String, e: React.ChangeEvent<HTMLInputElement>) => {
-  //   const key = e.target.id
-  //   setAddProblemForm(prevState => ({ ...prevState, [key]: value }))
-  // }
-  // const handleAddProblem = () => {
-  //   RequestService.post(`/api/course/${courseId}/assignment/${currentAssignmentId}/assignment-problems`, addProblemForm)
-  //     .then(() => {
-  //       setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' })
-  //       setAddProblemModal(false)
-  //       setAddProblemForm({
-  //         assignmentId: currentAssignmentId,
-  //         problemName: '',
-  //         maxScore: 0,
-  //       })
-  //       fetchAssignmentProblems()
-  //   })
-  // }
+  const handleCloseMcqModal = () => {
+    setMcqModal(false)
+    fetchAssignmentProblems()
+  }  
+
+
 
   const handleDeleteProblem = (problemId: number) => {
   //  const idsToDelete = nonContainerAutograders.filter(ncag => ncag.)
@@ -255,20 +233,50 @@ const AssignmentUpdatePage = () => {
     })
   }
 
+  const handleChange = (value: String, e: React.ChangeEvent<HTMLInputElement>) => {
+    const key = e.target.id
+    const newInvalidFields = removeClassFromField(invalidFields, key)
+    setInvalidFields(newInvalidFields)
+
+    setFormData(prevState => ({ ...prevState, [key]: value }))
+  }
+
+  const handleProblemChange = (value: String, e: React.ChangeEvent<HTMLInputElement>) => {
+    const key = e.target.id
+    setAssignmentProblemData(prevState => ({ ...prevState, [key]: value }))
+  }
+
+  const handleCategoryChange = (value: Option<String>)  => {
+    setFormData(prevState => ({ ...prevState, categoryName: value.label }))
+    setCurrentCategory(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 }))
+    setCurrentCategory(newOption)
+    };
+
   
   return (
     <>
       <ContainerAutoGraderModal open={containerAutoGraderModal} onClose={handleCloseContainerAutoGraderModal} />
 
-      <PageWrapper>
-      <Dialog open={openEditModal} onClose={handleCloseModal}>
+    <PageWrapper>
+
+      <Dialog open={openEditModal} onClose={handleCloseEditModal}>
         <DialogContent sx={{bgcolor:theme.listItemBackground}}>
         <h3 className={styles.header}>Edit Problem</h3>
           <TextField id="problemName" label={'Problem Name'} onChange={handleProblemChange} value={assignmentProblemData ? assignmentProblemData.problemName : ''}/>
           <TextField id="maxScore" label={'Max Score'} onChange={handleProblemChange} value={assignmentProblemData ? assignmentProblemData.maxScore.toString() : ''}/>
           <DialogActions>
             <Button onClick={handleProblemUpdate}>Save</Button>
-            <Button onClick={handleCloseModal}>Close</Button>
+            <Button onClick={handleCloseEditModal}>Close</Button>
           </DialogActions>
         </DialogContent>
       </Dialog>
@@ -288,12 +296,12 @@ const AssignmentUpdatePage = () => {
           <div className={styles.textFieldContainer}>
             <div>
               <div className={styles.textFieldHeader}>Assignment Category: </div>
-              <TextField id="categoryName" onChange={handleChange}
-                      invalidated={!!invalidFields.get('categoryName')}
-                      className={styles.textField}
-                      helpText={invalidFields.get('categoryName')}
-                      value={formData.categoryName} 
-                      sx={{width: '100%'}}/>
+              <TextDropdown onChange={handleCategoryChange}
+                      onCreate={handleCategoryCreate}
+                      options={categoryOptions}
+                      value={currentCategory}
+                      defaultOption={currentCategory}
+                      />
             </div>
             <div>
               <div className={styles.textFieldHeader}>Assignment Name: </div>
@@ -332,7 +340,7 @@ const AssignmentUpdatePage = () => {
                         sx={{width: '100%', marginLeft : 1/10}}/>
             </div>
             <div>
-              <div className={styles.textFieldHeader}>Max File Size: </div>
+              <div className={styles.textFieldHeader}>Max File Size (kb): </div>
               <TextField id="maxFileSize" onChange={handleChange}
                         invalidated={!!invalidFields.get('maxFileSize')}
                         className={styles.textField}
@@ -377,8 +385,8 @@ const AssignmentUpdatePage = () => {
         <h2 className={styles.header}>Add Problems</h2>
           <div className={styles.buttonContainer}>
           <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>
+            <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}>
@@ -413,7 +421,7 @@ const AssignmentUpdatePage = () => {
         </div>
       </div>
       <div style={{ display: 'flex', justifyContent: 'center', margin: '20px'}}>
-            <Button onClick={handleAssignmentUpdate} className='btnPrimary'>Save and Exit</Button>
+      <Button onClick={handleAssignmentUpdate} className='btnPrimary'>Save & Exit</Button>
       </div>
       </PageWrapper>
     </>
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index 25f8d841..7d2cdab9 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -78,8 +78,6 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
                 setAlert({ autoDelete: false, type: 'error', message })
             })
         
-        console.log(graderFormData)
-
         // close modal
         onClose();
     }
diff --git a/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx b/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
index b8f6faf7..e4a4a0d0 100644
--- a/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
@@ -27,7 +27,7 @@ const TextProblemModal = ({ open, onClose }: Props) => {
         else {return true}
     }
 
-    const handleSubmit = () => {
+    const handleSubmit = async () => {
         // early return if form not fully filled out
         if (!submittable) { return }
 
@@ -49,7 +49,7 @@ const TextProblemModal = ({ open, onClose }: Props) => {
             
         }
 
-        RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
+        await RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
             .then(() => {
                 console.log("PROBLEM CREATED");
                 setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' });
@@ -60,7 +60,7 @@ const TextProblemModal = ({ open, onClose }: Props) => {
                 setAlert({ autoDelete: false, type: 'error', message })
             })
 
-        RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders/`, graderFormData)
+        await RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders/`, graderFormData)
             .then(() => {
                 console.log("GRADER CREATED")
             })
diff --git a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.scss b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.scss
index ded1403d..8793090a 100644
--- a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.scss
+++ b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.scss
@@ -67,10 +67,10 @@
         width: 300px;
         border-radius: 20px;
         margin: 0;
+        border: 2px solid #ccc;
     }
     .dropdown{
         width: 300px;
-        border-radius: 20px;
         margin: 0;
     }
     .key{
diff --git a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx
index 6c07518d..e47a69c9 100644
--- a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx
+++ b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx
@@ -6,7 +6,6 @@ import PageWrapper from 'components/shared/layouts/pageWrapper'
 import LoadingOverlay from 'components/shared/loaders/loadingOverlay'
 import ErrorPage from '../errorPage/errorPage'
 import FaIcon from 'components/shared/icons/faIcon'
-import Select, {Styles, GroupTypeBase} from 'react-select'
 
 
 import RequestService from 'services/request.service'
@@ -15,44 +14,7 @@ import styles from './gradebookInstructorPage.scss'
 import { useParams, useHistory } from 'react-router-dom'
 
 import TextField from 'components/shared/inputs/textField'
-import { Option } from 'components/shared/inputs/dropdown'
-
-
-const customStyles: Partial<Styles<any, false, GroupTypeBase<any>>> = {
-    menu: (provided) => ({ ...provided, 
-        backgroundColor: 'var(--background)', 
-        border: '2px solid #ddd',
-        borderRadius: '10px'
-    }),
-    
-    input: (provided) => ({ ...provided, 
-        backgroundColor: 'var(--input-field-background)',
-        borderRadius: '20px',
-        color: 'var(--text-color)', 
-        }),
-
-    placeholder: (provided) => ({ ...provided,
-        fontStyle:'italic',
-        color: '#9c9c9c',
-        margin: '0'
-    }),
-    control: (provided) => ({ ...provided, 
-        backgroundColor: 'var(--input-field-background)', cursor: 'pointer',
-        borderRadius: '20px', padding: '10px',
-        border: 'none'}),
-
-    singleValue: (provided) => ({ ...provided, 
-        color: 'var(--text-color)', 
-    }),
-    
-    option: (provided) => ({
-      ...provided,
-      cursor: 'pointer',
-      color: 'var(--color)', 
-      background: 'none',
-      borderBottom: '1px solid #ddd'
-    }),
-  }
+import Dropdown, { Option } from 'components/shared/inputs/dropdown'
 
 type TableProps = {
     users: User[]
@@ -168,7 +130,6 @@ const GradebookInstructorPage = () => {
         
         setAllCategoryOptions(options);
     }
-        
         , [assignments])
 
     const fetchData = async () => {
@@ -214,7 +175,7 @@ const GradebookInstructorPage = () => {
 
     };
 
-    const handleCategoryChange = (value:Option)  => {
+    const handleCategoryChange = (value:Option<String>)  => {
         if(!value){
             setDisplayedAssignments(assignments)
             return;
@@ -262,17 +223,11 @@ const GradebookInstructorPage = () => {
                         id='name'
                         placeholder='Search students'
                     />
-                    <Select
+                    <Dropdown
                     className={styles.dropdown}
                     options={categoryOptions}
-                    styles={customStyles}
-                    components={{
-                        IndicatorSeparator: () => null
-                      }}
-                    placeholder="Assignment Category"
-                    isClearable={true}
-                    onChange={handleCategoryChange}
-                /> 
+                    onChange={handleCategoryChange}/>
+                    
             </div>
             <div className={styles.tableContainer}>
                 <GradebookTable
diff --git a/devU-client/src/components/pages/homePage/homePage.tsx b/devU-client/src/components/pages/homePage/homePage.tsx
index c4074bd6..545a70a7 100644
--- a/devU-client/src/components/pages/homePage/homePage.tsx
+++ b/devU-client/src/components/pages/homePage/homePage.tsx
@@ -29,6 +29,7 @@ const HomePage = () => {
 
     const handleCloseModal = () => {
         setOpenModal(false);
+        fetchData()
     };
 
     const fetchData = async () => {
diff --git a/devU-client/src/components/shared/inputs/dropdown.tsx b/devU-client/src/components/shared/inputs/dropdown.tsx
index 1c0379d4..ee4313ad 100644
--- a/devU-client/src/components/shared/inputs/dropdown.tsx
+++ b/devU-client/src/components/shared/inputs/dropdown.tsx
@@ -19,6 +19,7 @@ type Props = {
   search?: boolean
   className?: string
   label?: string
+  custom?: Partial<Styles<any, false, GroupTypeBase<any>>>
 }
 
 const Dropdown = ({
@@ -30,6 +31,7 @@ const Dropdown = ({
   defaultOption,
   className = '',
   label,
+  custom
 }: Props) => {
   const [theme, setTheme] = useState(getCssVariables())
 
@@ -43,21 +45,69 @@ const Dropdown = ({
     return () => observer.disconnect()
   })
 
-  const handleChange = (option: Option) => onChange(option.value)
+  const handleChange = (option: Option) => onChange(option)
 
-  const { textColor, background, primary } = theme
+  const { textColor, background } = theme
+
+  const mergeStyles = (
+    base: Partial<Styles<any, false, GroupTypeBase<any>>>,
+    override: Partial<Styles<any, false, GroupTypeBase<any>>>
+  ) => {
+    const merged: Partial<Styles<any, false, GroupTypeBase<any>>> = {}
+
+    Object.keys(base).forEach((key) => {
+      const styleKey = key as keyof Styles<any, false, GroupTypeBase<any>>
+      merged[styleKey] = (provided: any, state: any) => ({
+        ...base[styleKey]?.(provided, state), // Original styles
+        ...override[styleKey]?.(provided, state), // Override styles
+      })
+    })
+
+    return merged
+  }
 
   // Styling into this component isn't really possible with raw css alone due to its implementation
   // Because of this we're going to use their style apis
-  const customStyles: Partial<Styles<any, false, GroupTypeBase<any>>> = {
-    menu: (provided) => ({ ...provided, background }),
-    input: (provided) => ({ ...provided, background }),
-    control: (provided) => ({ ...provided, background, cursor: 'pointer' }),
-    singleValue: (provided) => ({ ...provided, color: textColor }),
+  const baseStyles: Partial<Styles<any, false, GroupTypeBase<any>>> = {
+    menu: (provided) => ({ ...provided, 
+        backgroundColor: background, 
+        boxShadow: 'none',
+        border: '2px solid #ccc',
+        borderRadius: '10px',
+    }),
+    
+    input: (provided) => ({ ...provided, 
+        backgroundColor: background, 
+        borderRadius: '20px',
+        color: textColor, 
+        }),
+
+    placeholder: (provided) => ({ ...provided,
+        fontStyle:'italic',
+        color: '#9c9c9c',
+        margin: '0'
+    }),
+    control: (provided) => ({ ...provided, 
+        backgroundColor: background, 
+        cursor: 'pointer',
+        border: '2px solid #ccc',
+        borderRadius: '20px', 
+        padding: '8px 2px',
+        }),
+
+    singleValue: (provided) => ({ ...provided, 
+        color: textColor,  
+    }),
+    
     option: (provided, state) => ({
       ...provided,
       cursor: 'pointer',
-      background: state.isSelected || state.isFocused ? primary : background,
+      color: textColor, 
+      borderBottom: '1px solid #ddd',
+      backgroundColor: state.isFocused ? 'var(--list-item-background-hover)' : background,
+      "&:last-of-type":{
+        borderBottom: 'none'
+      }
     }),
   }
 
@@ -66,13 +116,17 @@ const Dropdown = ({
       {!!label && <label>{label}</label>}
       <Select
         aria-label={label}
-        styles={customStyles}
+        styles={custom ? mergeStyles(baseStyles, custom) : baseStyles}
         options={options}
         onChange={handleChange}
         placeholder={placeholder}
         isDisabled={disabled}
         isSearchable={search}
+        components={
+          {IndicatorSeparator: () => null}
+        }
         defaultValue={defaultOption}
+        isClearable={true}
       />
     </div>
   )
diff --git a/devU-client/src/components/shared/inputs/textDropDown.scss b/devU-client/src/components/shared/inputs/textDropDown.scss
new file mode 100644
index 00000000..9f80d347
--- /dev/null
+++ b/devU-client/src/components/shared/inputs/textDropDown.scss
@@ -0,0 +1,7 @@
+.dropdown {
+    display: flex;
+    flex-direction: column;
+    transition: background-color 0.2s ease;
+    width: 100%;
+  }
+  
\ No newline at end of file
diff --git a/devU-client/src/components/shared/inputs/textDropDown.tsx b/devU-client/src/components/shared/inputs/textDropDown.tsx
new file mode 100644
index 00000000..9f16abcc
--- /dev/null
+++ b/devU-client/src/components/shared/inputs/textDropDown.tsx
@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react'
+import CreatableSelect from 'react-select/creatable'
+import { Styles, GroupTypeBase } from 'react-select'
+import { getCssVariables } from 'utils/theme.utils'
+
+
+import styles from './dropdown.scss'
+
+import { Option } from './dropdown'
+
+// This type needed since normal react-select does not allow for creating new options
+
+type Props = {
+  options: Option<any>[]
+  onChange: (value: any) => void
+  onCreate: (value: string) => void
+  defaultOption?: Option<any>
+  value?: Option<any>
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+  label?: string
+  custom?: Partial<Styles<any, false, GroupTypeBase<any>>>
+}
+
+const TextDropdown = ({
+  options,
+  onChange,
+  onCreate,
+  placeholder,
+  disabled,
+  defaultOption,
+  className = '',
+  label,
+  value,
+  custom,
+}: Props) => {
+
+  const handleChange = (option: Option<String>) => onChange(option)
+  const handleCreate = (input: string) => onCreate(input)
+
+  const [theme, setTheme] = useState(getCssVariables())
+  useEffect(() => {
+    const observer = new MutationObserver(() => setTheme(getCssVariables()))
+
+    observer.observe(document.body, { attributes: true })
+
+    return () => observer.disconnect()
+  })
+
+
+  const { textColor, background } = theme
+
+  const mergeStyles = (
+    base: Partial<Styles<any, false, GroupTypeBase<any>>>,
+    override: Partial<Styles<any, false, GroupTypeBase<any>>>
+  ) => {
+    const merged: Partial<Styles<any, false, GroupTypeBase<any>>> = {}
+
+    Object.keys(base).forEach((key) => {
+      const styleKey = key as keyof Styles<any, false, GroupTypeBase<any>>
+      merged[styleKey] = (provided: any, state: any) => ({
+        ...base[styleKey]?.(provided, state), // Original styles
+        ...override[styleKey]?.(provided, state), // Override styles
+      })
+    })
+
+    return merged
+  }
+
+
+
+  const baseStyles: Partial<Styles<any, false, GroupTypeBase<any>>> = {
+    ...custom,
+    menu: (provided) => ({ ...provided, 
+      backgroundColor: background, 
+      boxShadow: 'none',
+      border: '2px solid #ccc',
+      borderRadius: '10px'
+    }),
+
+    container: (provided) => ({ ...provided, 
+      width: '100%'
+    }),
+
+    input: (provided) => ({ ...provided, 
+        backgroundColor: background,
+        color: textColor, 
+        fontWeight: '500',
+        "input":{
+          fontFamily: 'inherit'
+        }
+        }),
+
+    placeholder: (provided) => ({ ...provided,
+        fontStyle:'italic',
+        color: '#9c9c9c',
+        margin: '0'
+    }),
+
+    control: (provided) => ({ ...provided, 
+        backgroundColor: background, 
+        cursor: 'pointer',
+        borderRadius: '10px', 
+        padding: '8px 2px',
+        border: '2px solid #ccc'}),
+
+    singleValue: (provided) => ({ ...provided, 
+        color: textColor, 
+    }),
+
+    option: (provided, state) => ({
+      ...provided,
+      cursor: 'pointer',
+      color: 'var(--color)', 
+      borderBottom: '1px solid #ccc',
+      backgroundColor: state.isFocused ? 'var(--list-item-background-hover)' : background,
+      "&:last-of-type":{
+        borderBottom: 'none'
+      }
+    }),
+  
+    
+  }
+
+  return (
+    <div className={`${styles.dropdown} ${className}`}>
+      {!!label && <label>{label}</label>}
+      <CreatableSelect 
+        aria-label={label}
+        styles={custom ? mergeStyles(baseStyles, custom) : baseStyles}
+        options={options}
+        onChange={handleChange}
+        onCreateOption={handleCreate}
+        placeholder={placeholder}
+        isDisabled={disabled}
+        value={value}
+        defaultValue={defaultOption}
+        components={{
+            IndicatorSeparator: () => null
+          }}
+      />
+    </div>
+   
+  )
+}
+
+export default TextDropdown
diff --git a/devU-client/src/components/shared/inputs/textField.scss b/devU-client/src/components/shared/inputs/textField.scss
index a9da6dcb..19a83c93 100644
--- a/devU-client/src/components/shared/inputs/textField.scss
+++ b/devU-client/src/components/shared/inputs/textField.scss
@@ -3,10 +3,11 @@
 .textField {
   display: flex;
   flex-direction: column;
-  background-color: $input-field-background;
+  background-color: $background;
   border-radius: 10px;
   margin-bottom: 30px;
   width: 100%;
+  transition: background-color 0.2s ease;
 }
 
 .input {
diff --git a/devU-client/src/components/shared/layouts/modal.tsx b/devU-client/src/components/shared/layouts/modal.tsx
index 1cfe1d46..65e046a4 100644
--- a/devU-client/src/components/shared/layouts/modal.tsx
+++ b/devU-client/src/components/shared/layouts/modal.tsx
@@ -35,7 +35,7 @@ const Modal = ({ title, children, buttonAction, open, onClose, isSubmittable }:
             }}>
             <div className='modal-header'>
                 <h3> {title} </h3>
-                <button onClick={onClose} aria-label='close' title='close'>✕</button>
+                <button onClick={onClose} aria-label='close' title='close' style={{fontWeight:'700px', background: 'none'}}>✕</button>
             </div>
             {children}
             <button onClick={buttonAction} disabled={isSubmittable ? !isSubmittable() : false} className='btnPrimary modalAction'>{title}</button>