diff --git a/devU-client/src/components/listItems/simpleAssignmentListItem.scss b/devU-client/src/components/listItems/simpleAssignmentListItem.scss
index 7863109..d4cf36a 100644
--- a/devU-client/src/components/listItems/simpleAssignmentListItem.scss
+++ b/devU-client/src/components/listItems/simpleAssignmentListItem.scss
@@ -4,14 +4,10 @@
   padding: 10px;
   display: flex;
   flex-direction: row;
-
   border-radius: 0.6rem;
-
   justify-content: space-between;
-
   transition: background-color 0.2s linear;
-
-
+  color:$primary;
 }
 
 .meta {
@@ -46,9 +42,6 @@
 
 
   border-radius: 0.6rem;
-
- 
-
   transition: background-color 0.2s linear;
 
   color: #52468A;
diff --git a/devU-client/src/components/listItems/userCourseListItem.scss b/devU-client/src/components/listItems/userCourseListItem.scss
index 12f854e..2ebb8de 100644
--- a/devU-client/src/components/listItems/userCourseListItem.scss
+++ b/devU-client/src/components/listItems/userCourseListItem.scss
@@ -4,13 +4,15 @@
   font-size: 1.2rem;
   font-weight: 600;
   margin: 0; 
-  padding: 15px; /* Add padding to the text inside the name block */
-  background: #b5acdd; /* Background color for the name area */
-  width: 100%; /* Make sure it spans the entire width of the card */
+  padding: 30px; /* Add padding to the text inside the name block */
+  background: $primary; 
+  width: 100%; 
   text-align: center; 
-  color: #52468a; 
+  color: $text-color; 
   border-radius: 5px 5px 0 0; 
   box-sizing: border-box;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
 }
 
 .No_assignments
@@ -23,23 +25,24 @@
   font-size: 12px;
   font-weight: 600;
   border-radius:5px;
-  padding: 10px;
+  padding: 30px;
   flex-wrap: wrap;
-  color:#52468A;
+  color:$primary;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
 }
 .Buttons{
   display: flex;
-  justify-content: space-between;
-  padding: 15px;
+  justify-content: space-around;
   margin-top: auto;
+  padding:10px;
 }
 .gradebook_button ,.coursepage_button {
   border: 0;
-  color: #52468A; 
+  color: $primary; 
   background: none;
   font-weight: 600;
   margin-left: 15px;
-  padding: 10px;
   cursor: pointer;
 }
 
@@ -51,7 +54,7 @@
 
 .subText {
   font-size: 1rem;
-  display: grid;
+  display: inline-block;
   justify-content: space-between;
   gap: 1.5rem;
   width: 100%;
@@ -81,12 +84,7 @@
   text-decoration: none;
 
   border-radius: 0.6rem;
-
-  padding: 5px;
-
   margin-bottom: 1rem;
-
-
   color: $text-color;
 
 }
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
index e5e580c..30e754b 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
@@ -20,13 +20,13 @@
 .line {
     border: none;
     height: 2px;
-    background-color: #ccc;
+    background-color: $list-item-background;
     width: 100%;
     margin-top: 10px;
 }
 
 .card {
-    background-color: #f9f9f9;
+    background-color: $list-item-background;
     border-radius: 8px;
     padding: 20px;
     width: 300px;
@@ -39,7 +39,7 @@
     font-size: 20px;
     font-weight: 550;
     margin-bottom: 15px;
-    color: #52468a;
+    color: $text-color;
 	text-align: center;
 }
 
@@ -64,8 +64,8 @@
 
 
 .buttons {
-    color: #52468a;
-    background-color: #f9f9f9; 
+    color: $primary;
+    background-color: $list-item-background;
     padding: 10px 20px;
 	border-radius:15px;
     cursor: pointer;
@@ -78,12 +78,12 @@
 
 
 .buttons:hover {
-    background-color: #888;
+    background-color: $list-item-background-hover;
 
 }
 
 .assignment_card {
-	background-color: #f9f9f9;
+	background-color: $list-item-background;
     border-radius: 8px;
     padding: 20px;
     width: 100%;
@@ -92,14 +92,14 @@
 }
 
 .accordion {
-    background-color: #f9f9f9;
+    background-color: $list-item-background;
     box-shadow: none;
     border: 1px solid #ddd;
     margin-bottom: 10px; 
 }
 
 .accordionDetails {
-    background-color: #f9f9f9; 
+    background-color:$list-item-background; 
     padding: 10px;
     border-top: 1px solid #ddd;
 }
@@ -112,7 +112,9 @@
     justify-content: center;
     align-items: center;
     margin-top: 20px; 
+    background-color: $list-item-background;
 }
+
 .textField {
 	margin-top: 10px;
     margin-bottom: 20px; 
@@ -120,6 +122,7 @@
 
 .submissionCard {
 	margin-bottom : 15px;
+    background-color: $list-item-background;
 }
 
 .fileInput {
@@ -128,7 +131,7 @@
 
 .due_date {
     font-size: 14px;
-    color: #888; 
+    color: $text-color; 
     margin-top: 5px; 
     margin-bottom: 15px; 
 }
@@ -137,6 +140,7 @@
 .submissionsContainer {
     display: flex;
     flex-direction: column;
+    padding: 30px;
     width: 100%; 
     margin-top: 20px;
 }
@@ -146,10 +150,11 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
-    background-color: #f9f9f9;
+    background-color: $list-item-background;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     transition: transform 0.2s ease; 
+    padding: 10px;
 }
 
 .submissionCard:hover {
@@ -157,16 +162,16 @@
 }
 
 .submissionHeading {
-    font-size: 16px;
-    font-weight: bold;
-    color: #52468a;
+    color: $primary;
+    padding: 10px;
 }
 
 
 .submissionTime {
     font-size: 14px;
-    color: #888; 
+    color: $text-color; 
     margin-top: 5px;
+    padding: 10px;
 }
 
 @media (max-width: 768px) {
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
index fa94baf..95f0614 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -8,9 +8,9 @@ import LoadingOverlay from 'components/shared/loaders/loadingOverlay'
 import {useActionless, useAppSelector} from 'redux/hooks'
 import {SET_ALERT} from 'redux/types/active.types'
 
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import {Accordion, AccordionDetails, AccordionSummary, CardActionArea, TextField, Typography} from '@mui/material'
+//import Card from '@mui/material/Card'
+//import CardContent from '@mui/material/CardContent'
+import {/*Accordion AccordionDetails, AccordionSummary*/ TextField, Typography} from '@mui/material'
 
 import Grid from '@mui/material/Unstable_Grid2'
 
@@ -187,8 +187,9 @@ const AssignmentDetailPage = () => {
             
 
             <Grid display='flex' justifyContent='center' alignItems='center'>
-            <Card className={styles.assignment_card}>
+            <div className={styles.assignment_card}>
             <Typography className={styles.assignment_description}>{assignment?.description}</Typography>
+            <Typography className={styles.filenames}>Attachments : {assignment?.attachmentsFilenames}</Typography>
             <hr className={styles.line} />
 
             {assignment?.dueDate && (
@@ -196,21 +197,21 @@ const AssignmentDetailPage = () => {
                 )}
             {assignmentProblems && assignmentProblems.length > 0 ? (
                 assignmentProblems.map((assignment, index) => (
-                    <Accordion className={styles.accordion} key={index}>
-                    <AccordionSummary>
-                        <Typography className={styles.accordionDetails}>{`Assignment Problem ${index + 1}`}</Typography>
-                    </AccordionSummary>
-                    <AccordionDetails className={styles.accordionDetails}>
+                    <div className={styles.accordion} key={index}>
+                    <div>
+                        <div className={styles.accordionDetails}>{`Assignment Problem ${index + 1}`}</div>
+                    </div>
+                    <div className={styles.accordionDetails}>
                         <Typography>{assignment.problemName}</Typography>
                         <TextField id={assignment.problemName} fullWidth className={styles.textField} variant='outlined' label='Answer' onChange={handleChange}></TextField>
-                    </AccordionDetails>
-                    </Accordion>
+                    </div>
+                    </div>
                 ))
             
                 ) : (
-                <CardContent>
+                <div>
                     <Typography>No Problems Exist</Typography>
-                </CardContent>
+                </div>
             )}
             
             {!(assignment?.disableHandins) && (<input type="file" className={styles.fileInput} onChange={handleFileChange} />)}
@@ -220,7 +221,7 @@ const AssignmentDetailPage = () => {
                 <button className={styles.buttons} onClick={handleSubmit}>Submit</button>
                 </div>
             ) : null}
-            </Card>
+            </div>
             </Grid>
             </div>
 
@@ -233,16 +234,16 @@ const AssignmentDetailPage = () => {
             <div>
             <div className={styles.submissionsContainer}>
             {submissions.map((submission, index) => (
-                <Card className={styles.submissionCard} key={index}>
-                    <CardActionArea onClick={() => {
+                <div className={styles.submissionCard} key={index}>
+                    <div onClick={() => {
                         history.push(`/course/${courseId}/assignment/${assignmentId}/submission/${submission.id}`)
                     }}>
-                    <CardContent>
-                    <Typography className={styles.submissionHeading}>{`Submission ${submissions.length - index}`}</Typography>
-                    <Typography className={styles.submissionTime}>{`Submitted at: ${submission.createdAt && prettyPrintDateTime(submission.createdAt)}`}</Typography>
-                     </CardContent>
-                    </CardActionArea>
-                </Card>
+                    <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>
             ))}
             </div>
             </div>
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
index 6f41b55..4ee90fa 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
+++ b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
@@ -9,12 +9,21 @@ p {
   text-align: center;
 }
 
+.pageWrapper {
+  padding:0px;
+}
+
+.flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .form {
     background-color: $list-item-background;
     grid-area: 1 / 1 / 2 / 2;
     border-radius: 10px;
     padding: 20px;
-    margin-left: auto; 
     margin-right: 0; 
   }
 
@@ -25,6 +34,9 @@ p {
     grid-column-gap: 10px;
     grid-row-gap: 0px; 
     width: 100%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
   }
 
 .header {
@@ -50,6 +62,8 @@ p {
   grid-column-gap: 10px;
   grid-row-gap: 10px; 
   width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 .dragDropFile {
@@ -58,7 +72,6 @@ p {
   background-color: $list-item-background;
   border-radius: 10px;
   margin-left: 0; 
-  margin-right: auto;
 }
 
 .dragDropFileComponent {
@@ -118,3 +131,57 @@ p {
     color: red;
   }
 }
+
+@media (max-width: 1000px) {
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 10px; 
+    margin-left: 20px;
+    margin-right: 20px;
+    width: 100%;
+  }
+
+  .form {
+    grid-area: 1 / 1 / 2 / 2;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  .dragDropFile {
+    grid-area: 2 / 1 / 3 / 2;
+    align-content: center;
+    text-align: center;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  .dragDropFileInput {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 550px) {
+  .datepickerContainer{
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 10px; 
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;  
+  }
+
+  .datepicker_start {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+  .datepicker_due {
+    grid-area: 2 / 1 / 3 / 2;
+  }
+  .datepicker_end {
+    grid-area: 3 / 1 / 4 / 2;
+  }
+}
\ No newline at end of file
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
index a83cc2e..9881fb5 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
@@ -1,16 +1,13 @@
-import React, {useState, useEffect} from 'react'
+import React, {useState} from 'react'
 import {ExpressValidationError} from 'devu-shared-modules'
 import 'react-datepicker/dist/react-datepicker.css'
 import PageWrapper from 'components/shared/layouts/pageWrapper'
-import { getCssVariables } from 'utils/theme.utils'
 
 import RequestService from 'services/request.service'
 import {useActionless} from 'redux/hooks'
 import TextField from 'components/shared/inputs/textField'
-import Button from '@mui/material/Button'
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+// import Button from '@mui/material/Button'
+import Button from '../../../shared/inputs/button'
 import DragDropFile from 'components/utils/dragDropFile'
 
 import {SET_ALERT} from 'redux/types/active.types'
@@ -19,11 +16,8 @@ import {applyMessageToErrorFields, removeClassFromField} from "../../../../utils
 import {useHistory, useParams} from 'react-router-dom'
 
 import formStyles from './assignmentFormPage.scss'
-import { Dayjs } from 'dayjs'
 
 const AssignmentCreatePage = () => {
-    const [theme, setTheme] = useState(getCssVariables())
-    const { textColor } = theme
     const [setAlert] = useActionless(SET_ALERT)
     const {courseId} = useParams<{ courseId: string }>()
     const history = useHistory()
@@ -37,21 +31,12 @@ const AssignmentCreatePage = () => {
         maxSubmissions: 0,
         disableHandins: false,
     })
-    const [endDate, setEndDate] = useState(new Date())
-    const [dueDate, setDueDate] = useState(new Date())
-    const [startDate, setStartDate] = useState(new Date())
+    const [endDate, setEndDate] = useState('')
+    const [dueDate, setDueDate] = useState('')
+    const [startDate, setStartDate] = useState('')
     const [invalidFields, setInvalidFields] = useState(new Map<string, string>())
     const [files, setFiles] = useState<Map<string,File>>(new Map())
 
-    useEffect(() => {
-        const observer = new MutationObserver(() => setTheme(getCssVariables()))
-    
-        observer.observe(document.body, { attributes: true })
-    
-        return () => observer.disconnect()
-      })
-
-
     const handleChange = (value: String, e : React.ChangeEvent<HTMLInputElement>) => {
         const key = e.target.id
 
@@ -65,32 +50,17 @@ const AssignmentCreatePage = () => {
         setFormData(prevState => ({...prevState,disableHandins : e.target.checked}))
     }
 
-    const handleStartDateChange = (date : Dayjs | null) => {
-        if(date){
-            const newDate = date.toDate()
-            setStartDate(newDate)
-        }
-    }
-    const handleEndDateChange = (date : Dayjs | null) => {
-        if(date){
-            const newDate = date.toDate()
-            setEndDate(newDate)
-        }
-    }
-    const handleDueDateChange = (date: Dayjs | null) => {
-        if(date){
-            const newDate = date.toDate()
-            setDueDate(newDate)
-        }
-    }
+    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)}
 
     const handleSubmit = () => {
         const finalFormData = {
             courseId: courseId,
             name: formData.name,
-            startDate : startDate.toISOString(),
-            dueDate: dueDate.toISOString(),
-            endDate : endDate.toISOString(),
+            startDate : startDate,
+            dueDate: dueDate,
+            endDate : endDate,
             categoryName: formData.categoryName,
             description: formData.description,
             maxFileSize: formData.maxFileSize,
@@ -152,8 +122,9 @@ const AssignmentCreatePage = () => {
     };
 
     return(
-        <PageWrapper>
+        <PageWrapper className={formStyles.pageWrapper}>
             <h2>Create Assignment</h2>
+            <div className={formStyles.flex}>
             <div className={formStyles.grid}>
                 <div className={formStyles.form}>
                     <h2>Assignment Information</h2>
@@ -174,7 +145,10 @@ const AssignmentCreatePage = () => {
                     <TextField id='description' className={formStyles.textArea} onChange={handleChange} label={"Description*"} multiline={true} rows={5}
                             invalidated={!!invalidFields.get("description")}
                             helpText={invalidFields.get("description")}
-                            sx={{width:1}}/>
+                            sx={{ 
+                                "& .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 className={formStyles.textFieldContainer}>
                         <TextField id='maxFileSize' className={formStyles.textField1} onChange={handleChange} label={"Max File Size*"}
@@ -190,73 +164,37 @@ const AssignmentCreatePage = () => {
 
                     <div className={formStyles.datepickerContainer}>
                         <div>
-                            <LocalizationProvider dateAdapter={AdapterDayjs}>
-                                <DatePicker label="Start Date*" onChange={handleStartDateChange} className={formStyles.datepicker_start}
-                                sx={{
-                                    width: 1,
-                                    "& .MuiOutlinedInput-input" : {
-                                        color: textColor
-                                      },
-                                      "& .MuiInputLabel-outlined" : {
-                                        color: textColor
-                                      },
-                                      "& .MuiOutlinedInput-notchedOutline" : {
-                                        borderColor: textColor
-                                      }
-                                    }}/>
-                            </LocalizationProvider>
-                        </div>
-                        <div>
-                            <LocalizationProvider dateAdapter={AdapterDayjs}>
-                                <DatePicker label="Due Date*" onChange={handleDueDateChange} className={formStyles.datepicker_due}
-                                sx={{
-                                    width: 1,
-                                    "& .MuiOutlinedInput-input" : {
-                                        color: textColor
-                                      },
-                                      "& .MuiInputLabel-outlined" : {
-                                        color: textColor
-                                      },
-                                      "& .MuiOutlinedInput-notchedOutline" : {
-                                        borderColor: textColor
-                                      }
-                                    }}/>
-                            </LocalizationProvider>
-                        </div>
-                        <div>
-                            <LocalizationProvider dateAdapter={AdapterDayjs}>
-                                <DatePicker label="End Date*" onChange={handleEndDateChange} className={formStyles.datepicker_end}
-                                sx={{
-                                    width: 1,
-                                    "& .MuiOutlinedInput-input" : {
-                                        color: textColor
-                                      },
-                                      "& .MuiInputLabel-outlined" : {
-                                        color: textColor
-                                      },
-                                      "& .MuiOutlinedInput-notchedOutline" : {
-                                        borderColor: textColor
-                                      }
-                                    }}/>
-                            </LocalizationProvider>
+                            <label htmlFor="start_date">Start Date *</label>
+                            <br/>
+                            <input type='date' id="start_date" onChange={handleStartDateChange}/>
+                            </div>
+                            <div>
+                            <label htmlFor="due_date">Due Date *</label>
+                            <br/>
+                            <input type='date' id="due_date" onChange={handleDueDateChange}/>
+                            </div>
+                            <div>
+                            <label htmlFor="end_date">End Date *</label>
+                            <br/>
+                            <input type='date' id="end_date" onChange={handleEndDateChange}/>
                         </div>
                     </div>
                     <br/>
                     <div style={{display: 'flex', justifyContent: 'center'}}>
-                        <label htmlFor='disableHandins'>Disable Handins</label>
+                        <label htmlFor='disableHandins'>Allow Container Autograde</label>
                         <input type='checkbox' id='disableHandins' checked={formData.disableHandins}
                             onChange={handleCheckbox} className={formStyles.submitBtn}/>
                     </div>
                     <br/>
                     <div style={{display: 'flex', justifyContent: 'center'}}>
-                        <Button variant='contained' onClick={handleSubmit} className={formStyles.submitBtn}>Create
+                        <Button onClick={handleSubmit} className={formStyles.submitBtn}>Create
                             assignment</Button>
                     </div>
                 </div>
                 <div className={formStyles.dragDropFile}>
                     {/*TODO: Whenever file uploads is available on backend, store the files + create Object URLs*/}
                     <h2>Attachments</h2>
-                    <p>Add up to 5 attachments with this assignment:</p>
+                    <p style={{textAlign:'center'}}>Add up to 5 attachments with this assignment:</p>
                     <p>Files Uploaded (click to delete) :</p>
                     <div className={formStyles.fileNameContainer}>
                         {Array.from(files.keys()).map((fileName) => {
@@ -274,11 +212,13 @@ const AssignmentCreatePage = () => {
                         })}
                     </div>
                     <div className={formStyles.dragDropFileComponent}>
-                        <DragDropFile handleFile={handleFile}/>
+                        <div className={formStyles.dragDropFileInput}>
+                            <DragDropFile handleFile={handleFile} className='formFileUploadWide'/>
+                        </div>
                     </div>
                 </div>
             </div>
-
+            </div>
         </PageWrapper>
     )
 }
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
index d1aa3c9..bf048d6 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
@@ -56,19 +56,38 @@ input[type='date'] {
 .problemsList, .assignmentsList {
     display: flex;
     flex-direction: column;
+    gap: 30px;
     align-items: center;
     width: 100%;
 }
 
-.assignment {
-    padding: 10px;
-    font-weight: bold;
+// .assignment {
+//     padding: 10px;
+//     font-weight: bold;
+//     cursor: pointer;
+//     :hover {
+//         padding: 10px;
+//         background-color: $list-item-background-hover;
+//         border-radius: 10px;
+//     }
+// }
+
+.pageWrapper {
+    padding:0px;
+  }
+
+.assignmentBtn {
+    background-color: transparent;
+    background-repeat: no-repeat;
+    border: none;
     cursor: pointer;
-    :hover {
-        padding: 10px;
-        background-color: $list-item-background-hover;
-        border-radius: 10px;
-    }
+    overflow: hidden;
+    outline: none;
+}
+
+.assignmentBtn:hover {
+    background-color: $list-item-background-hover;
+    border-radius: 10px;
 }
 
 .problem, .fileList{
@@ -80,6 +99,7 @@ input[type='date'] {
 
 .header {
     text-align: center;
+    color: $text-color;
 }
 
 .editProblem {
@@ -116,7 +136,7 @@ input[type='date'] {
         grid-template-columns: 1fr;
         grid-template-rows: repeat(3, 1fr);
         grid-column-gap: 0px;
-        grid-row-gap: 30px;
+        grid-row-gap: 10px;
         width: 100%;
         justify-content: center;
         align-items: center;
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
index f53a5f8..62a78db 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -14,6 +14,7 @@ import { applyMessageToErrorFields, removeClassFromField } from 'utils/textField
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
+import { getCssVariables } from 'utils/theme.utils'
 
 type UrlParams = { assignmentId: string }
 
@@ -30,6 +31,18 @@ const AssignmentUpdatePage = () => {
   const [files, setFiles] = useState<File[]>([])
   const history = useHistory()
 
+  const [theme, setTheme] = useState(getCssVariables())
+
+  // 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
+  useEffect(() => {
+    const observer = new MutationObserver(() => setTheme(getCssVariables()))
+
+    observer.observe(document.body, { attributes: true })
+
+    return () => observer.disconnect()
+  })
+
   const [formData, setFormData] = useState<Assignment>({
     courseId: parseInt(courseId),
     name: '',
@@ -218,11 +231,11 @@ const AssignmentUpdatePage = () => {
   
   return (
 
-    <PageWrapper>
+    <PageWrapper className={styles.pageWrapper}>
 
       <Dialog open={openModal} onClose={handleCloseModal}>
+        <DialogContent sx={{bgcolor:theme.listItemBackground}}>
         <h3 className={styles.header}>Edit Problem</h3>
-        <DialogContent>
           <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>
@@ -233,15 +246,15 @@ const AssignmentUpdatePage = () => {
       </Dialog>
 
       <Dialog open={addProblemModal} onClose={handleCloseAddProblemModal}>
-        <h3 className={styles.header}>Add Problem</h3>
-        <DialogContent>
+        <DialogContent sx={{bgcolor:theme.listItemBackground}}>
+          <h3 className={styles.header}>Add Problem</h3>
           <TextField id="problemName" label={'Problem Name'} onChange={handleAddProblemChange}/>
           <TextField id="maxScore" label={'Max Score'} onChange={handleAddProblemChange}/>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleAddProblem}>Add</Button>
-          <Button onClick={handleCloseAddProblemModal}>Close</Button>
+          <DialogActions>
+            <Button onClick={handleAddProblem}>Add</Button>
+            <Button onClick={handleCloseAddProblemModal}>Close</Button>
         </DialogActions>
+        </DialogContent>
       </Dialog>
 
       <h2>Edit Assignment</h2>
@@ -250,7 +263,7 @@ const AssignmentUpdatePage = () => {
           <h2 className={styles.header}>Assignments</h2>
           {assignmentsList.map((assignment) => (
             <div id={assignment.id ? assignment.id.toString() : ''} key={assignment.id} className={styles.assignment} onClick={handleAssignmentChange}>
-              <h3>{assignment.name}</h3>
+              <Button className={styles.assignmentBtn}>{assignment.name}</Button>
             </div>
           ))} 
         </div>
@@ -277,7 +290,10 @@ const AssignmentUpdatePage = () => {
                     className={styles.textField}
                     helpText={invalidFields.get('description')}
                     value={formData.description ? formData.description : ''} 
-                    sx={{width : 9/10, padding : "10px"}}/>
+                    sx={{width : 9/10, 
+                      "& .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 className={styles.textFieldContainer}>
             <TextField id="maxFileSize" onChange={handleChange} label={'Max File Size'}
diff --git a/devU-client/src/components/pages/forms/courses/coursesFormPage.scss b/devU-client/src/components/pages/forms/courses/coursesFormPage.scss
index 27d0cf5..3dc2c20 100644
--- a/devU-client/src/components/pages/forms/courses/coursesFormPage.scss
+++ b/devU-client/src/components/pages/forms/courses/coursesFormPage.scss
@@ -57,7 +57,6 @@
   display: block;
 
   animation-duration: 10ms;
-  padding: 16.5px 14px;
   border: 1px solid #bbbbbb;
   border-radius: 4px;
 }
diff --git a/devU-client/src/components/pages/homePage/homePage.scss b/devU-client/src/components/pages/homePage/homePage.scss
index 665af41..fbbae7e 100644
--- a/devU-client/src/components/pages/homePage/homePage.scss
+++ b/devU-client/src/components/pages/homePage/homePage.scss
@@ -2,29 +2,15 @@
 
 
 
-.courses_title {
-    text-align: left;
-    margin-left: 20px;
-    font-size: 30px;
-    font-weight: 550;
-    margin-bottom: 30px;
-}
-
 .courses_heading{
-    align-items:left;
+    text-align: left;
     margin-left: 20px;
     font-size: 30px;
     font-weight: 550;
     margin-bottom: 30px;
     
 }
-// h1 {
-//     align-items:left;
-//     margin-left: 20px;
-//     font-size: 30px;
-//     font-weight: 550;
-//     margin-bottom: 30px;
-// }
+
 
 .no_courses {
     margin-left: 20px;
@@ -43,7 +29,7 @@
     flex-direction: column;
     justify-content: space-between;
     align-items: stretch;
-    height: 100%;
+    width:400px;
     padding: 0; 
     background-color: #D9D9D9;
     border-radius: 5px; 
@@ -53,7 +39,7 @@
   }
 .create_course {
     border:0; /* Primary button color */
-    color: #52468a;
+    color: $primary;
     padding: 10px 20px; 
     border-radius: 5px;
     text-decoration: none;
diff --git a/devU-client/src/components/pages/homePage/homePage.tsx b/devU-client/src/components/pages/homePage/homePage.tsx
index 44218b2..0fe0eab 100644
--- a/devU-client/src/components/pages/homePage/homePage.tsx
+++ b/devU-client/src/components/pages/homePage/homePage.tsx
@@ -75,7 +75,7 @@ const HomePage = () => {
         <PageWrapper>
             <div className={styles.header}>
                 <div className={styles.smallLine}></div>
-                <h2 className={styles.courses_title}>Courses</h2>
+                <h1 className={styles.courses_title}>Courses</h1>
                 <button className = {styles.create_course} onClick={() => {
                     history.push(`/addCoursesForm`)
                     }}>Create Course
@@ -84,7 +84,7 @@ const HomePage = () => {
             </div>
             <div className={styles.header}>
                 <div className={styles.smallLine}></div>
-                <h3 className = {styles.courses_heading}>Current</h3>
+                <h2 className = {styles.courses_heading}>Current</h2>
                 <div className={styles.largeLine}></div>
             </div>
             <div className={styles.coursesContainer}>
@@ -101,7 +101,7 @@ const HomePage = () => {
                     <UserCourseListItem course={course} assignments={assignments.get(course)} key={course.id}/>
                     </div>
                 ))}
-                {enrollCourses.length === 0 && <h4 className={styles.no_courses}>You do not have current enrollment yet</h4>}
+                {enrollCourses.length === 0 && instructorCourses.length == 0 && <h4 className={styles.no_courses}>You do not have current enrollment yet</h4>}
             </div>
 
             <div className={styles.header}>
@@ -127,7 +127,7 @@ const HomePage = () => {
 
             <div className={styles.header}>
                 <div className={styles.smallLine}></div>
-                <h3 className = {styles.courses_heading}>Upcoming</h3>
+                <h2 className = {styles.courses_heading}>Upcoming</h2>
                 <div className={styles.largeLine}></div>
                 </div>
 
diff --git a/devU-client/src/components/pages/submissions/submissionDetailPage.scss b/devU-client/src/components/pages/submissions/submissionDetailPage.scss
index 3bdc792..7d5e4a5 100644
--- a/devU-client/src/components/pages/submissions/submissionDetailPage.scss
+++ b/devU-client/src/components/pages/submissions/submissionDetailPage.scss
@@ -19,11 +19,27 @@
     max-width: 250px;
     padding-right: 10px;
     overflow-y: auto;
+    background-color: $list-item-background;
+    border-radius: 30px;
   }
   
   .submissionCard {
+    margin-bottom: 15px;
     margin-bottom: 15px;
     cursor: pointer;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px; 
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
+    background-color: $list-item-background; 
+    transition: box-shadow 0.3s ease; 
+    padding: 10px;
+    margin: 10px;
+
+   
+    &:hover {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); 
+    }
+    
   }
   
   .submissionContent {
@@ -31,11 +47,11 @@
     max-height: 800px;
     overflow-y: auto;
     padding: 0 20px;
-    background-color: $background;
     border: 1px solid #ddd;
     color: $text-color;
     border-radius: 30px;
     padding:30px;
+    background-color: $list-item-background;
   }
   
   pre {
@@ -46,7 +62,7 @@
   }
   
   .feedbackContainer{
-    background-color: $background;
+    background-color: $list-item-background;
    
   }
 
@@ -102,7 +118,7 @@
       max-height: 400px;
       overflow-y: auto;
       padding: 10px;
-      background-color: $background;
+      background-color: $list-item-background;
       border-radius: 5px;
   }
 
@@ -118,12 +134,13 @@
   }
   
   .assignmentTable th {
-    background-color: $background; 
+    background-color: $list-item-background;
     font-weight: bold; 
+    color:$text-color;
   }
   
   .assignmentTable tr:nth-child(even) {
-    background-color: $background; 
+    background-color: $list-item-background; 
   }
   
   .sub_list{
diff --git a/devU-client/src/components/pages/submissions/submissionDetailPage.tsx b/devU-client/src/components/pages/submissions/submissionDetailPage.tsx
index 734f513..1bd9c87 100644
--- a/devU-client/src/components/pages/submissions/submissionDetailPage.tsx
+++ b/devU-client/src/components/pages/submissions/submissionDetailPage.tsx
@@ -11,9 +11,9 @@ import {useActionless} from 'redux/hooks'
 import {SET_ALERT} from 'redux/types/active.types'
 import styles from './submissionDetailPage.scss'
 import 'react-datepicker/dist/react-datepicker.css'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import {CardActionArea, Typography} from '@mui/material'
+//import Card from '@mui/material/Card'
+//import CardContent from '@mui/material/CardContent'
+import {CardActionArea} from '@mui/material'
 import {prettyPrintDateTime} from "../../../utils/date.utils";
 
 
@@ -134,15 +134,15 @@ const SubmissionDetailPage = () => {
            <div className={styles.submissionsContainer}>
                 <h2 className={styles.sub_list}>Submission List:</h2>
              {submissions.map((submission, index) => (
-            <Card className={styles.submissionCard} key={index}>
+            <div className={styles.submissionCard} key={index}>
             <CardActionArea onClick={() => 
            setSelectedSubmission(submission)}>
-            <CardContent>
-              <Typography className={styles.submissionHeading}>{`Submission ${submissions.length - index}`}</Typography>
-              <Typography className={styles.submissionTime}>{`Submitted at: ${submission.createdAt && prettyPrintDateTime(submission.createdAt)}`}</Typography>
-            </CardContent>
+            <div>
+              <div className={styles.submissionHeading}>{`Submission ${submissions.length - index}`}</div>
+              <div className={styles.submissionTime}>{`Submitted at: ${submission.createdAt && prettyPrintDateTime(submission.createdAt)}`}</div>
+            </div>
           </CardActionArea>
-        </Card>
+        </div>
       ))}
         </div>
             <div className={styles.submissionContent}>