diff --git a/devU-client/src/components/misc/navbar.scss b/devU-client/src/components/misc/navbar.scss
index f490536..0c8cf19 100644
--- a/devU-client/src/components/misc/navbar.scss
+++ b/devU-client/src/components/misc/navbar.scss
@@ -1,6 +1,21 @@
 @import 'variables';
 
+.breadcrumbContainer {
+    display: flex;
+    align-items: center;
+}
+
 .link {
     text-decoration: none;
-    color: #52468A;
+    color: $text-color; /* Breadcrumb link color */
+    
+}
+
+.link:hover {
+    text-decoration: underline;
+}
+
+.separator {
+    color: #888; /* Separator color */
+    margin: 0 5px; /* Add spacing between breadcrumbs */
 }
\ No newline at end of file
diff --git a/devU-client/src/components/misc/navbar.tsx b/devU-client/src/components/misc/navbar.tsx
index cbc2407..bb766f3 100644
--- a/devU-client/src/components/misc/navbar.tsx
+++ b/devU-client/src/components/misc/navbar.tsx
@@ -81,16 +81,16 @@ const Navbar = ({breadcrumbs}: any) => {
     ]
 
     return (
-        <div>
+        <div className={styles.breadcrumbContainer}>
             {breadcrumbs.map(({breadcrumb, match}: any, index: number) => {
                 let url = match.url
-                if (excludedPaths.includes(match.params.path)) return <div key={index} ></div>
+                if (excludedPaths.includes(match.params.path)) return null
                 if (match.params.home) url = '/'
 
                 return (
                     <span key={match.url}>
                         <Link to={url} className={styles.link}> {breadcrumb} </Link>
-                        {index < (breadcrumbs.length - 1) ? ' > ' : ''}
+                        {index < (breadcrumbs.length - 1) && ( <span className={styles.separator}> &gt; </span> )}
                     </span>
                 )
             })}
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
index 7f46726..e5e580c 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
@@ -1,60 +1,121 @@
 @import 'variables';
 
+.wrap {
+	display:flex;
+	align-items: baseline;
+	gap:20px;
+	padding:20px;
+	justify-content:center;
+}
+
+
 .header {
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
+	color: $text-color;
 }
 
-.smallLine {
-    width: 50px; /* adjust this value to set the length of the small line */
-	border-top: 3px solid $text-color; /* adjust this value to set the color and thickness of the line */
-    margin-right: 10px; /* adjust this value to set the space between the line and the text */
+
+.line {
+    border: none;
+    height: 2px;
+    background-color: #ccc;
+    width: 100%;
+    margin-top: 10px;
 }
 
-.largeLine {
-    flex-grow: 1;
-	border-top: 3px solid $text-color; /* adjust this value to set the color and thickness of the line */
-    margin-left: 10px; /* adjust this value to set the space between the line and the text */
-    margin-right: 10px; /* add this line to create some space between the line and the button */
+.card {
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    padding: 20px;
+    width: 300px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	margin: 20px;
 }
 
-.buttons {
-	margin : 0 10px;
+
+.card_heading {
+    font-size: 20px;
+    font-weight: 550;
+    margin-bottom: 15px;
+    color: #52468a;
+	text-align: center;
 }
 
-.card {
-	width: 60%;
-	height: 50%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
+
+.options_buttons {
+    display: flex;
+    flex-direction: column; 
 	align-items: center;
-	padding-top: 20px;
+	justify-content: center;
+    gap: 10px; 
+    
 }
 
-.accordion {
-	width: 90%;
+.submit_container{
 	display: flex;
-	flex-direction: column;
-	margin-top: 10px;
-	margin-left: 10px;
-	margin-right: 10px;
-	background-color: $list-item-background;
-	color:$list-item-background
+    justify-content: flex-end;
+    align-items: flex-end; 
+    width: 100%; 
+    margin-top: auto; 
+ 
 }
 
-.accordionDetails {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	background-color: $list-item-background;
-	color:$text-color;
+
+.buttons {
+    color: #52468a;
+    background-color: #f9f9f9; 
+    padding: 10px 20px;
+	border-radius:15px;
+    cursor: pointer;
+    font-size: 15px;
+    border: none;
+    width: fit-content;
+	text-align: center;
+	margin-left: 20px;
+}
+
+
+.buttons:hover {
+    background-color: #888;
+
+}
+
+.assignment_card {
+	background-color: #f9f9f9;
+    border-radius: 8px;
+    padding: 20px;
+    width: 100%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	width:800px;
+}
+
+.accordion {
+    background-color: #f9f9f9;
+    box-shadow: none;
+    border: 1px solid #ddd;
+    margin-bottom: 10px; 
 }
 
+.accordionDetails {
+    background-color: #f9f9f9; 
+    padding: 10px;
+    border-top: 1px solid #ddd;
+}
+.typography {
+    font-size: 16px;
+    color: #333;
+}
+.gridContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px; 
+}
 .textField {
-	align-items: center;
-	justify-content: center;
+	margin-top: 10px;
+    margin-bottom: 20px; 
 }
 
 .submissionCard {
@@ -62,6 +123,60 @@
 }
 
 .fileInput {
-	margin-top: 10px;
-	margin-bottom: 10px;
+	margin-top: 20px;
+}
+
+.due_date {
+    font-size: 14px;
+    color: #888; 
+    margin-top: 5px; 
+    margin-bottom: 15px; 
+}
+
+
+.submissionsContainer {
+    display: flex;
+    flex-direction: column;
+    width: 100%; 
+    margin-top: 20px;
+}
+
+
+.submissionCard {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease; 
+}
+
+.submissionCard:hover {
+    transform: scale(1.02); 
 }
+
+.submissionHeading {
+    font-size: 16px;
+    font-weight: bold;
+    color: #52468a;
+}
+
+
+.submissionTime {
+    font-size: 14px;
+    color: #888; 
+    margin-top: 5px;
+}
+
+@media (max-width: 768px) {
+    .header {
+        flex-direction: column; 
+        align-items: center; 
+    }
+
+    .buttons {
+        width: 100%; 
+        max-width: none; 
+    }
+}
\ 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 f242055..2eb53ad 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -11,8 +11,7 @@ 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 Stack from '@mui/material/Stack'
-import Button from '@mui/material/Button'
+
 import Grid from '@mui/material/Unstable_Grid2'
 
 import styles from './assignmentDetailPage.scss'
@@ -143,28 +142,50 @@ const AssignmentDetailPage = () => {
     return(
         <PageWrapper>
             <div className={styles.header}>
-                <div className={styles.smallLine}></div>
-                <h1>{assignment?.name}</h1>
-                <div className={styles.largeLine}></div>
-                <Stack spacing={2} direction='row'>
-                    {role.isInstructor() && <Button variant='contained' className={styles.buttons} onClick={() => {
+                <h1 className = {styles.assignment_heading}>{assignment?.name}</h1>
+                <hr className= {styles.line}/> 
+                </div>
+                <div className = {styles.wrap}>
+               
+                {role.isInstructor() && (
+                    <>
+                    <div className={styles.card}>
+                <h2 className={styles.card_heading}>Options</h2>
+                <hr className = {styles.line} />
+                    <div className={styles.options_buttons}>
+                    {role.isInstructor() && <button className={styles.buttons} onClick={() => {
                         history.push(`/course/${courseId}/assignment/${assignmentId}/createNCAG`)
-                    }}>Add NCAG</Button>}
-                    {role.isInstructor() && <Button variant='contained' className={styles.buttons} onClick={() => {
+                    }}>Add NCAG</button>}
+                    <hr className = {styles.line} />
+                    {role.isInstructor() && <button  className={styles.buttons} onClick={() => {
                         history.push(`/course/${courseId}/assignment/${assignmentId}/createCAG`)
-                    }}>Add CAG</Button>}
-                    {role.isInstructor() && <Button variant='contained' className={styles.buttons} onClick={() => {
+                    }}>Add CAG</button>}
+                    <hr className = {styles.line} />
+                    {role.isInstructor() && <button className={styles.buttons} onClick={() => {
                         history.push(`/course/${courseId}/assignment/${assignmentId}/createProblem`)
-                    }}>Add Problem</Button>}
-                    {role.isInstructor() && <Button variant='contained' className={styles.buttons} onClick={() => {
+                    }}>Add Problem</button>}
+                    <hr className = {styles.line} />
+                    {role.isInstructor() && <button  className={styles.buttons} onClick={() => {
                         history.push(`/course/${courseId}/assignment/${assignmentId}/update`)
-                    }}>Edit Assignment</Button>}
-                </Stack>
-            </div>
+                    }}>Edit Assignment</button>}
+                   </div>
+                   </div>
+                   </>
+                    )}
+                
+                   
+              
+              
+            
 
-        
             <Grid display='flex' justifyContent='center' alignItems='center'>
-            <Card className={styles.card}>
+            <Card className={styles.assignment_card}>
+            <Typography className={styles.assignment_description}>{assignment?.description}</Typography>
+            <hr className={styles.line} />
+
+            {assignment?.dueDate && (
+                    <Typography className={styles.due_date}>{`Due Date: ${new Date(assignment.dueDate).toLocaleDateString()}`}</Typography>
+                )}
             {nonContainerAutograders && nonContainerAutograders.length > 0 ? (
                 nonContainerAutograders.map((nonContainer, index) => (
                     <Accordion className={styles.accordion} key={index}>
@@ -182,37 +203,41 @@ const AssignmentDetailPage = () => {
                     <Typography>No Problems Exist</Typography>
                 </CardContent>
             )}
-
+            
             {!(assignment?.disableHandins) && (<input type="file" className={styles.fileInput} onChange={handleFileChange} />)}
-
+           
             {assignmentProblems && assignmentProblems.length > 0 ? (
-                <Button variant='contained' style={{marginTop: 10, marginBottom: 10}} onClick={handleSubmit}>Submit</Button>
+                 <div className = {styles.submit_container}>
+                <button className={styles.buttons} onClick={handleSubmit}>Submit</button>
+                </div>
             ) : null}
             </Card>
             </Grid>
-
+            </div>
 
             <div className={styles.header}>
-                <div className={styles.smallLine}></div>
                 <h1>{`Submissions`}</h1>
-                <div className={styles.largeLine}></div>
+                <hr className = {styles.line}/>
             </div>
 
             {/**Submissions List */}
             <div>
+            <div className={styles.submissionsContainer}>
             {submissions.map((submission, index) => (
                 <Card className={styles.submissionCard} key={index}>
                     <CardActionArea onClick={() => {
                         history.push(`/course/${courseId}/assignment/${assignmentId}/submission/${submission.id}`)
                     }}>
-                        <CardContent>
-                            {`Submission ${submissions.length - index}`}
-                            <Typography>{`Submitted at: ${submission.createdAt && prettyPrintDateTime(submission.createdAt)}`}</Typography>
-                        </CardContent>
+                    <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>
+          
         </PageWrapper>
     )
 }
diff --git a/devU-client/src/components/pages/homePage/homePage.scss b/devU-client/src/components/pages/homePage/homePage.scss
index e84eab9..932d059 100644
--- a/devU-client/src/components/pages/homePage/homePage.scss
+++ b/devU-client/src/components/pages/homePage/homePage.scss
@@ -1,8 +1,8 @@
 @import 'variables';
 
 
-h2 {
-    align-items:left;
+.h2 {
+    text-align: left;
     margin-left: 20px;
     font-size: 30px;
     font-weight: 550;
@@ -17,6 +17,13 @@ h3 {
     margin-bottom: 30px;
     
 }
+h1 {
+    align-items:left;
+    margin-left: 20px;
+    font-size: 30px;
+    font-weight: 550;
+    margin-bottom: 30px;
+}
 
 h4 {
     margin-left: 20px;
diff --git a/devU-client/src/components/pages/homePage/homePage.tsx b/devU-client/src/components/pages/homePage/homePage.tsx
index 3f27e2f..4bb0a1d 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>Courses</h2>
+                <h2 className={styles.h2}>Courses</h2>
                 <button className = {styles.create_course} onClick={() => {
                     history.push(`/addCoursesForm`)
                     }}>Create Course