diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index 06645e9..803f9e3 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -41,10 +41,9 @@ const ClassGroupStyled = styled.div<ClassGroupProps>`
   padding-bottom: 1px;
   :hover {
     cursor: pointer;
-    transition: 1s;
-    background-color: #8bc8fb;
   }
-  background-color:${({groupType})=>groupType === "CLASS" ? "purple" : "red"}
+    outline-offset: -5px;
+    outline:${({groupType})=>groupType === "CLASS" ? "2px solid #5642AA" : "2px solid #866DF7"};
 `;
 
 const ClassExandIconStyled = styled.img<ClassExandIconProps>`
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index a3680ea..9d62060 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -52,7 +52,7 @@ const Classes = styled.div<ClassesProps>`
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   margin-right: 5px;
   text-align: center;
-  background-color:${({groupType})=>groupType === "CLASS" ? "purple" : "red"}
+  background-color:${({groupType})=>groupType === "CLASS" ? "#5642AA" : "#866DF7"}
 `;
 
 interface SchedulerRowProps {