diff --git a/devU-client/src/components/listItems/simpleAssignmentListItem.scss b/devU-client/src/components/listItems/simpleAssignmentListItem.scss
index d4cf36a..1cd22c0 100644
--- a/devU-client/src/components/listItems/simpleAssignmentListItem.scss
+++ b/devU-client/src/components/listItems/simpleAssignmentListItem.scss
@@ -7,7 +7,8 @@
   border-radius: 0.6rem;
   justify-content: space-between;
   transition: background-color 0.2s linear;
-  color:$primary;
+  // color:$primary;
+  color: $text-color;
 }
 
 .meta {
@@ -44,10 +45,11 @@
   border-radius: 0.6rem;
   transition: background-color 0.2s linear;
 
-  color: #52468A;
+  // color: $primary;
 
-  &:hover,
-  &:focus {
-    background: $list-simple-item-background-hover;
-  }
+  color: $text-color;
+  // &:hover,
+  // &:focus {
+  //   background: $list-simple-item-background-hover;
+  // }
 }
\ No newline at end of file
diff --git a/devU-client/src/components/listItems/userCourseListItem.scss b/devU-client/src/components/listItems/userCourseListItem.scss
index 2ebb8de..a2e5d25 100644
--- a/devU-client/src/components/listItems/userCourseListItem.scss
+++ b/devU-client/src/components/listItems/userCourseListItem.scss
@@ -3,20 +3,20 @@
 .name {
   font-size: 1.2rem;
   font-weight: 600;
-  margin: 0; 
-  padding: 30px; /* Add padding to the text inside the name block */
-  background: $primary; 
-  width: 100%; 
-  text-align: center; 
-  color: $text-color; 
-  border-radius: 5px 5px 0 0; 
+  margin: 0;
+  padding: 30px;
+  /* Add padding to the text inside the name block */
+  background: $primary;
+  width: 100%;
+  text-align: center;
+  color: #FFF;
+  border-radius: 20px 20px 0 0;
   box-sizing: border-box;
   text-overflow: ellipsis;
   overflow-wrap: break-word;
 }
 
-.No_assignments
-{ 
+.No_assignments {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -24,22 +24,26 @@
   flex-grow: 1;
   font-size: 12px;
   font-weight: 600;
-  border-radius:5px;
+  border-radius: 5px;
   padding: 30px;
   flex-wrap: wrap;
-  color:$primary;
+  // color: $primary;
+  color: $text-color;
   text-overflow: ellipsis;
   overflow-wrap: break-word;
 }
-.Buttons{
+
+.Buttons {
   display: flex;
   justify-content: space-around;
   margin-top: auto;
-  padding:10px;
+  padding: 10px;
 }
-.gradebook_button ,.coursepage_button {
+
+.gradebook_button,
+.coursepage_button {
   border: 0;
-  color: $primary; 
+  color: $text-color;
   background: none;
   font-weight: 600;
   margin-left: 15px;
@@ -93,10 +97,11 @@
   .subText {
     display: block;
   }
+
   .Buttons {
-    flex-direction: row; 
-    justify-content: space-between; 
+    flex-direction: row;
+    justify-content: space-between;
     padding: 10px;
-    margin-top: auto; 
-}
+    margin-top: auto;
+  }
 }
\ No newline at end of file
diff --git a/devU-client/src/components/listItems/userCourseListItem.tsx b/devU-client/src/components/listItems/userCourseListItem.tsx
index 18d5e66..a9090fd 100644
--- a/devU-client/src/components/listItems/userCourseListItem.tsx
+++ b/devU-client/src/components/listItems/userCourseListItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import {Assignment, Course} from 'devu-shared-modules'
-import {useHistory} from "react-router-dom";
+import { Assignment, Course } from 'devu-shared-modules'
+import { useHistory } from "react-router-dom";
 import ListItemWrapper from 'components/shared/layouts/listItemWrapper'
 
 //import {prettyPrintDate} from 'utils/date.utils'
@@ -18,30 +18,30 @@ type Props = {
 }
 
 
-const UserCourseListItem = ({course, assignments, past = false, instructor = false}: Props) => {
+const UserCourseListItem = ({ course, assignments, past = false, instructor = false }: Props) => {
     const history = useHistory()
-    return(
-    <ListItemWrapper  to={null} tag={course.number} containerStyle={styles.container}>
- 
-        <div className={styles.name}>{instructor ? (course.name + " " +  course.number + " (" + course.semester + ")" + " Instructor") : course.name.toUpperCase() + " " + course.number + " " + "(" + course.semester + ")" }</div>
-        <div className={styles.subText}>
-            {assignments && assignments.length > 0 ? (assignments.map((assignment) => (
-                <SimpleAssignmentListItem assignment={assignment} key={assignment.id}/>
-            ))) : ((past) ? <div></div> : <div className={styles.No_assignments}>No Assignments Due Yet</div>)} 
-            <div className={styles.Buttons}>
-            <button className={styles.gradebook_button} onClick={(e) => {
-             e.stopPropagation(); 
-             history.push(`/course/${course.id}/gradebook`);
-            }}>Gradebook</button>
-            <button className={styles.coursepage_button} onClick={(e) => {
-             e.stopPropagation(); 
-             history.push(`/course/${course.id}`);
-            }}>Coursepage</button>
-            </div>
+    return (
+        <ListItemWrapper to={null} tag={course.number} containerStyle={styles.container}>
+
+            <div className={styles.name}>{instructor ? (course.name + " " + course.number + " (" + course.semester + ")" + " Instructor") : course.name.toUpperCase() + " " + course.number + " " + "(" + course.semester + ")"}</div>
+            <div className={styles.subText}>
+                {assignments && assignments.length > 0 ? (assignments.map((assignment) => (
+                    <SimpleAssignmentListItem assignment={assignment} key={assignment.id} />
+                ))) : ((past) ? <div></div> : <div className={styles.No_assignments}>No Assignments Due Yet</div>)}
+                <div className={styles.Buttons}>
+                    <button className={styles.gradebook_button} onClick={(e) => {
+                        e.stopPropagation();
+                        history.push(`/course/${course.id}/gradebook`);
+                    }}>Gradebook</button>
+                    <button className={styles.coursepage_button} onClick={(e) => {
+                        e.stopPropagation();
+                        history.push(`/course/${course.id}`);
+                    }}>Coursepage</button>
+                </div>
             </div>
 
-    </ListItemWrapper>
+        </ListItemWrapper>
 
-);
+    );
 };
 export default UserCourseListItem
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
index 5d971aa..e3ca442 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
+++ b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
@@ -26,6 +26,7 @@ p {
   border-radius: 20px;
   padding: 30px;
   width: 50%;
+  height: fit-content;
 }
 
 .form>h2 {
diff --git a/devU-client/src/components/pages/homePage/homePage.scss b/devU-client/src/components/pages/homePage/homePage.scss
index da8e93f..5ca2b80 100644
--- a/devU-client/src/components/pages/homePage/homePage.scss
+++ b/devU-client/src/components/pages/homePage/homePage.scss
@@ -2,14 +2,14 @@
 
 
 
-.courses_heading{
+.courses_heading {
     text-align: left;
-    margin-left: 20px;
-    font-size: 30px;
-    font-weight: 550;
+    // margin-left: 20px;
+    // font-size: 30px;
+    // font-weight: 550;
     margin-bottom: 30px;
-    
 }
+
 // h1 {
 //     align-items:left;
 //     margin-left 20px;
@@ -19,67 +19,73 @@
 // }
 
 
-.no_courses {
-    margin-left: 20px;
-}
+// .no_courses {
+//     margin-left: 20px;
+// }
 
 
 
 .coursesContainer {
     display: flex;
     flex-direction: row;
-    gap: 20px; 
-    margin:20px;
+    gap: 20px;
+    // margin: 20px;
 }
+
 .courseCard {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: stretch;
-    width:400px;
-    padding: 0; 
-    background-color: #D9D9D9;
-    border-radius: 5px; 
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
-    overflow: hidden; 
+    width: 400px;
+    padding: 0;
+    background-color: $list-item-background;
+    border-radius: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
     margin-bottom: 20px;
-  }
-.create_course {
-    border:0; /* Primary button color */
-    color: $primary;
-    padding: 10px 20px; 
-    border-radius: 5px;
-    text-decoration: none;
-    font-weight: 600;
-    transition: background-color 0.3s ease;
-    margin:20px
 }
+
+// .create_course {
+//     border: 0;
+//     color: $primary;
+//     padding: 10px 20px;
+//     border-radius: 5px;
+//     text-decoration: none;
+//     font-weight: 600;
+//     transition: background-color 0.3s ease;
+//     margin: 20px
+// }
+
 .header {
     color: $text-color;
     display: block;
-    align-items: center;  
+    align-items: center;
 }
 
-
-.courses_heading::after {
-    content: '';
+#createCourseBtn {
     display: block;
-    margin-top: 10px; 
-    width: 100%;
-    height: 1px; 
-    font-weight: 600;
-    background-color: $text-color; 
-  }
+    margin-left: auto;
+}
 
+// .courses_heading::after {
+//     content: '';
+//     display: block;
+//     margin-top: 10px;
+//     width: 100%;
+//     height: 1px;
+//     font-weight: 600;
+//     background-color: $text-color;
+// }
 
 @media (max-width: 768px) {
     .coursesContainer {
-        flex-direction: column; 
-        align-items: center; 
+        flex-direction: column;
+        align-items: center;
     }
 
     .courseCard {
-        width: 100%; 
-        max-width: none; 
+        width: 100%;
+        max-width: none;
     }
-}
+}
\ No newline at end of file
diff --git a/devU-client/src/components/pages/homePage/homePage.tsx b/devU-client/src/components/pages/homePage/homePage.tsx
index 6d1a561..69a97ee 100644
--- a/devU-client/src/components/pages/homePage/homePage.tsx
+++ b/devU-client/src/components/pages/homePage/homePage.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
 
 import PageWrapper from 'components/shared/layouts/pageWrapper'
 import LoadingOverlay from 'components/shared/loaders/loadingOverlay'
@@ -6,17 +6,17 @@ import ErrorPage from '../errorPage/errorPage'
 import styles from './homePage.scss'
 import UserCourseListItem from "../../listItems/userCourseListItem";
 
-import {useAppSelector} from 'redux/hooks'
+import { useAppSelector } from 'redux/hooks'
 import RequestService from 'services/request.service'
-import {Assignment, Course} from 'devu-shared-modules'
-import {useHistory} from "react-router-dom";
+import { Assignment, Course } from 'devu-shared-modules'
+import { useHistory } from "react-router-dom";
 const HomePage = () => {
     const userId = useAppSelector((store) => store.user.id)
-    
+
     const [loading, setLoading] = useState(true)
     const [error, setError] = useState(null)
     const [enrollCourses, setEnrollCourses] = useState(new Array<Course>())
-    const [upcomingCourses,setupcomingCourses] = useState(new Array<Course>())
+    const [upcomingCourses, setupcomingCourses] = useState(new Array<Course>())
     const [pastCourses, setPastCourses] = useState(new Array<Course>())
     const [assignments, setAssignments] = useState(new Map<Course, Array<Assignment>>())
     const [instructorCourses, setInstructorCourses] = useState(new Array<Course>())
@@ -26,7 +26,7 @@ const HomePage = () => {
     }, [])
 
     const fetchData = async () => {
-        
+
         try {
             const assignmentMap = new Map<Course, Array<Assignment>>()
             const allCourses = await RequestService.get<{
@@ -39,14 +39,14 @@ const HomePage = () => {
             const upcomingCourses: Course[] = allCourses.upcomingCourses;
             const pastCourses: Course[] = allCourses.pastCourses;
             const instructorCourses: Course[] = allCourses.instructorCourses;
-            
+
             const assignmentPromises = enrolledCourses.map((course) => {
                 const assignments = RequestService.get<Assignment[]>(`/api/course/${course.id}/assignments/released`)
                 return Promise.all([course, assignments])
             })
             const assignmentResults = await Promise.all(assignmentPromises)
             assignmentResults.forEach(([course, assignments]) => assignmentMap.set(course, assignments))
-            
+
             const assignmentPromises_instructor = instructorCourses.map((course) => {
                 const assignments = RequestService.get<Assignment[]>(`/api/course/${course.id}/assignments/released`)
                 return Promise.all([course, assignments])
@@ -59,7 +59,7 @@ const HomePage = () => {
             setEnrollCourses(enrolledCourses)
             setInstructorCourses(instructorCourses)
             setupcomingCourses(upcomingCourses)
-           
+
         } catch (error: any) {
             setError(error)
         } finally {
@@ -72,87 +72,83 @@ const HomePage = () => {
     if (error) return <ErrorPage error={error} />
     const history = useHistory();
     const handleCourseClick = (courseId: any) => {
-                history.push(`/course/${courseId}`); // Assuming your course page route is '/course/:courseId'
-            }
-    return(
+        history.push(`/course/${courseId}`); // Assuming your course page route is '/course/:courseId'
+    }
+    return (
         <PageWrapper>
             <div className={styles.header}>
-                <div className={styles.smallLine}></div>
+                {/* <div className={styles.smallLine}></div> */}
                 <h1 className={styles.courses_title}>Courses</h1>
-                <button className = {styles.create_course} onClick={() => {
+                <button className='btnSecondary' id='createCoursBtn' onClick={() => {
                     history.push(`/addCoursesForm`)
-                    }}>Create Course
+                }}>Create Course
                 </button>
-                <div className={styles.largeLine}></div>
-            </div>
-            <div className={styles.header}>
-                <div className={styles.smallLine}></div>
-                <h2 className = {styles.courses_heading}>Current</h2>
-                <div className={styles.largeLine}></div>
+                {/* <div className={styles.largeLine}></div> */}
             </div>
+            {/* <div className={styles.header}> */}
+                {/* <div className={styles.smallLine}></div> */}
+                <h2 className={styles.courses_heading}>Current</h2>
+                {/* <div className={styles.largeLine}></div> */}
+            {/* </div> */}
             <div className={styles.coursesContainer}>
                 {instructorCourses.map((course) => (
-                     <div className={styles.courseCard} key={course.id}
-                         onClick={() => handleCourseClick(course.id)} style={{ cursor: 'pointer' }}>
-                         <UserCourseListItem course={course} assignments={assignments.get(course)} key={course.id}
-                                         instructor = {true}/>
-                                        </div>
+                    <div className={styles.courseCard} key={course.id}
+                        onClick={() => handleCourseClick(course.id)} style={{ cursor: 'pointer' }}>
+                        <UserCourseListItem course={course} assignments={assignments.get(course)} key={course.id}
+                            instructor={true} />
+                    </div>
                 ))}
             </div>
             <div className={styles.coursesContainer}>
                 {enrollCourses && enrollCourses.map((course) => (
                     <div className={styles.courseCard}
-                         key={course.id}
-                         onClick={() => handleCourseClick(course.id)} style={{ cursor: 'pointer' }}>
+                        key={course.id}
+                        onClick={() => handleCourseClick(course.id)} style={{ cursor: 'pointer' }}>
 
-                    <UserCourseListItem course={course} assignments={assignments.get(course)} key={course.id}/>
+                        <UserCourseListItem course={course} assignments={assignments.get(course)} key={course.id} />
                     </div>
                 ))}
                 {enrollCourses.length === 0 && instructorCourses.length == 0 && <h4 className={styles.no_courses}>You do not have current enrollment yet</h4>}
             </div>
-
-            <div className={styles.header}>
-                <div className={styles.smallLine}></div>
-                <h3 className = {styles.courses_heading}>Completed</h3>
-                <div className={styles.largeLine}></div>
-            </div>
-
-
+            {/* <div className={styles.header}> */}
+                {/* <div className={styles.smallLine}></div> */}
+                <h2 className={styles.courses_heading}>Completed</h2>
+                {/* <div className={styles.largeLine}></div> */}
+            {/* </div> */}
             <div className={styles.coursesContainer}>
                 {pastCourses && pastCourses.map((course) => (
-                    
                     <div className={styles.courseCard}
-                         key={course.id}
-                         onClick={() => handleCourseClick(course.id)} style={{ cursor: 'pointer' }}>
-                        <UserCourseListItem 
-                        course={course} 
-                        assignments={assignments.get(course)} 
-                        past={true} 
+                        key={course.id}
+                        onClick={() => handleCourseClick(course.id)} style={{ cursor: 'pointer' }}>
+                        <UserCourseListItem
+                            course={course}
+                            assignments={assignments.get(course)}
+                            past={true}
                         />
-                        </div>
+                    </div>
                 ))}
                 {pastCourses.length === 0 && <h4 className={styles.no_courses}>No completed courses</h4>}
             </div>
 
-            <div className={styles.header}>
-                <div className={styles.smallLine}></div>
-                <h2 className = {styles.courses_heading}>Upcoming</h2>
-                <div className={styles.largeLine}></div>
-                </div>
+            {/* <div className={styles.header}> */}
+                {/* <div className={styles.smallLine}></div> */}
+                <h2 className={styles.courses_heading}>Upcoming</h2>
+                {/* <div className={styles.largeLine}></div> */}
+            {/* </div> */}
 
-                <div className={styles.coursesContainer}>
+            <div className={styles.coursesContainer}>
                 {upcomingCourses && upcomingCourses.map((course) => (
                     <div className={styles.courseCard} key={course.id}
-                         onClick={() => handleCourseClick(course.id)} style={{ cursor: 'pointer' }}>
-                    <UserCourseListItem course={course} assignments={assignments.get(course)} key={course.id}/>
+                        onClick={() => handleCourseClick(course.id)} style={{ cursor: 'pointer' }}>
+                        <UserCourseListItem course={course} assignments={assignments.get(course)} key={course.id} />
                     </div>
                 ))}
 
                 {upcomingCourses.length === 0 && <h4 className={styles.no_courses}>No upcoming Courses</h4>}
-                </div>
-          
-           
-            
+            </div>
+
+
+
         </PageWrapper>
     )
 }