diff --git a/package.json b/package.json
index 6180df3..e4a009f 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.10.0",
+    "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "axios": "^0.19.2",
     "notistack": "^1.0.1",
diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index b402512..2ef1d43 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -6,12 +6,13 @@ import { coursesContext } from '../contexts/CoursesProvider';
 import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
 import { ReactComponent as Bin } from '../assets/bin.svg';
+import DeleteIcon from '@material-ui/icons/Delete';
 
 const CourseCardWrapper = styled.div`
   position: relative;
   display: flex;
   min-height: 40px;
-  background-color: rgb(100, 181, 246);
+  background-color: rgb(166, 226, 208);
   align-items: center;
   justify-content: center;
   flex-direction: column;
@@ -23,17 +24,17 @@ const CourseCardWrapper = styled.div`
 `;
 
 const TitleWrapper = styled.div`
+  font-size: 14px;
+  font-weight: 550;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px;
+  padding: 10px 10px 10px 2px;
 `;
 
-const BinIcon = styled(Bin)`
-  width: 20px;
-  height: 20px;
-  max-width: 20px;
-  min-width: 20px;
+const BinIcon = styled(DeleteIcon)`
+  max-width: 30px;
+  min-width: 30px;
   cursor: pointer;
   &:hover {
     fill: white;
@@ -57,7 +58,7 @@ const ClassGroupStyled = styled.div`
   }
   :last-child {
     border-radius: 0 0 10px 10px;
-}
+  }
 `;
 
 interface ExpandIconProps {
@@ -84,14 +85,14 @@ const TypeClass = styled.div`
   left: 5px;
   color: white;
 `;
-  
+
 const useStyles = makeStyles({
   expanded: {
     maxHeight: '244px',
     overflowY: 'auto',
     '&::-webkit-scrollbar': {
       width: '0.3em',
-      borderStyle:'none',
+      borderStyle: 'none',
     },
     '&::-webkit-scrollbar-track': {
       borderRadius: '10px',
diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx
index b87ec44..2260fec 100644
--- a/src/components/Rightbar.tsx
+++ b/src/components/Rightbar.tsx
@@ -10,14 +10,14 @@ const RightbarStyled = styled.div`
   padding-right: 15px;
   text-align: center;
   height: 100%;
-  width: 300px;
+  width: 350px;
   overflow-y: scroll;
   ::-webkit-scrollbar-track {
     border-radius: 10px;
   }
   ::-webkit-scrollbar {
     width: 5px;
-    border-style:none;
+    border-style: none;
   }
   ::-webkit-scrollbar-thumb {
     border-radius: 10px;
@@ -32,7 +32,7 @@ const SaveButton = styled.div`
   justify-content: center;
   align-items: center;
   user-select: none;
-  background-color: #417cab;
+  background-color: #244a7c;
   border-radius: 10px;
   cursor: pointer;
   height: 40px;
diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx
index aca9af7..684496c 100644
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -107,7 +107,7 @@ export const Scheduler = () => {
                     {value}
                   </TableCell>
                 ) : indexRow === 23 ? (
-                  <TableCell style={{ borderBottom: '2px soli  rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
+                  <TableCell style={{ borderBottom: '2px solid  rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
                     {value}
                   </TableCell>
                 ) : indexRow === 5 ? (
diff --git a/yarn.lock b/yarn.lock
index 9f68c62..a424b44 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1476,6 +1476,13 @@
     react-is "^16.8.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/icons@^4.9.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665"
+  integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
 "@material-ui/lab@^4.0.0-alpha.56":
   version "4.0.0-alpha.56"
   resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz#ff63080949b55b40625e056bbda05e130d216d34"
@@ -9407,14 +9414,13 @@ react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^16.13.1:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-pkg-up@^2.0.0:
   version "2.0.0"