diff --git a/templates/widgets/course-teaser/course-teaser.hamlet b/templates/widgets/course-teaser/course-teaser.hamlet
index 33baf56ce..6aceaa93d 100644
--- a/templates/widgets/course-teaser/course-teaser.hamlet
+++ b/templates/widgets/course-teaser/course-teaser.hamlet
@@ -1,13 +1,13 @@
-<div .course :isRegistered:.course--registered #course-#{courseId} tabindex='1'>
-  <div .course-chevron>
-  <div .course-shorthand>_{courseShorthand}
-  <div .course-title>
+<div .course-teaser :isRegistered:.course-teaser--registered #course-#{courseId} tabindex='1'>
+  <div .course-teaser__chevron>
+  <div .course-teaser__shorthand>_{courseShorthand}
+  <div .course-teaser__title>
     <a href=@{AdminTestR}>_{courseTitle}
-  <div .course-registration>_{MsgRegistered}
-  <div .course-lecturer-label>_{MsgLecturerFor}
-  <div .course-lecturer-value>_{courseLecturer}
-  <div .course-duedate-label>_{MsgRegisterTo}
-  <div .course-duedate-value>_{courseRegisterTo}
-  <div .course-school-label>_{MsgCourseSchool}
-  <div .course-school-value>_{courseSchoolName}
-  <div .course-description>_{courseDescription}
+  <div .course-teaser__registration>_{MsgRegistered}
+  <div .course-teaser__lecturer-label>_{MsgLecturerFor}
+  <div .course-teaser__lecturer-value>_{courseLecturer}
+  <div .course-teaser__duedate-label>_{MsgRegisterTo}
+  <div .course-teaser__duedate-value>_{courseRegisterTo}
+  <div .course-teaser__school-label>_{MsgCourseSchool}
+  <div .course-teaser__school-value>_{courseSchoolName}
+  <div .course-teaser__description>_{courseDescription}
diff --git a/templates/widgets/course-teaser/course-teaser.lucius b/templates/widgets/course-teaser/course-teaser.lucius
index 08eb279cf..8dfa0c69a 100644
--- a/templates/widgets/course-teaser/course-teaser.lucius
+++ b/templates/widgets/course-teaser/course-teaser.lucius
@@ -1,14 +1,16 @@
 :root {
+  --color-grey-light: #efefef;
+  --color-grey-lighter: #f5f5f5;
+  --color-fontsec: #5b5861;
   --course-bg-color: var(--color-grey-lighter);
   --course-expanded-bg-color: var(--color-grey-light);
 }
 
-.course {
+.course-teaser {
   display: grid;
   grid-gap: 5px 7px;
-  grid-template-columns: 25px 60px 1fr 40px;
+  grid-template-columns: 120px 1fr 100px;
   padding: 10px;
-  font-size: 1.4rem;
   background-color: var(--course-bg-color);
   transition: background-color .1s ease-out;
   cursor: pointer;
@@ -17,16 +19,16 @@
     background-color: var(--course-expanded-bg-color);
   }
 
-  + .course {
+  + .course-teaser {
     margin-top: 10px;
   }
 }
 
-// chevron
-.course-chevron {
+/* chevron */
+.course-teaser__chevron {
   cursor: pointer;
   padding: 10px;
-  grid-column: 4;
+  grid-column: 3;
   grid-row: 1;
   justify-self: center;
   align-self: center;
@@ -46,96 +48,95 @@
 }
 
 
-// semester
-.course-semester {
-  grid-column: 2;
-  font-size: 1.8rem;
+/* semester */
+.course-teaser__semester {
+  grid-column: 1;
+  font-size: 1.2rem;
   align-self: flex-end;
   color: var(--color-fontsec);
   color: white;
 }
 
-// shorthand
-.course-shorthand {
-  grid-column: 1/3;
-  font-size: 1.8rem;
+/* shorthand */
+.course-teaser__shorthand {
+  grid-column: 1;
   justify-self: end;
-  font-weight: bold;
+  font-size: 1.2rem;
+  font-weight: 600;
 }
 
-// title
-.course-title {
-  grid-column: 3;
+/* title */
+.course-teaser__title {
+  grid-column: 2;
   grid-row: 1;
-  font-size: 1.6rem;
+  font-size: 1.2rem;
   align-self: baseline;
 }
 
-// registration
-.course-registration {
-  grid-column: 3;
+/* registration */
+.course-teaser__registration {
+  grid-column: 2;
   grid-row: 1;
   justify-self: end;
   align-self: baseline;
-  font-size: 16px;
   color: var(--color-fontsec);
 }
 
-// school
-.course-school-label {
-  grid-column: 3;
-  font-size: 1.4rem;
+/* school */
+.course-teaser__school-label {
+  grid-column: 2;
+  font-size: 0.9rem;
   align-self: flex-end;
   color: var(--color-fontsec);
 }
 
-// description
-.course-description {
-  grid-column-start: 3;
+/* description */
+.course-teaser__description {
+  grid-column: 2;
   color: var(--color-fontsec);
 }
 
-// subtitle
-.course-lecturer-label,
-.course-duedate-label,
-.course-school-label {
-  grid-column: 1/3;
+/* subtitle */
+.course-teaser__lecturer-label,
+.course-teaser__duedate-label,
+.course-teaser__school-label {
+  grid-column: 1;
   justify-self: end;
   color: var(--color-fontsec);
   font-style: italic;
 }
 
-// hidden in closed state
-.course-school-label,
-.course-school-value,
-.course-duedate-label,
-.course-duedate-value,
-.course-description,
-.course-registration {
+/* hidden in closed state */
+.course-teaser__school-label,
+.course-teaser__school-value,
+.course-teaser__duedate-label,
+.course-teaser__duedate-value,
+.course-teaser__description,
+.course-teaser__registration {
   display: none;
 }
 
-// registered courses
-.course--registered {
+/* registered courses */
+.course-teaser--registered {
 
-  .course-registration {
+  .course-teaser__registration {
       display: block;
     }
   }
 
-// expanded courses
-.course--expanded {
+/* expanded courses */
+.course-teaser--expanded {
   max-height: 1000px;
 
-  .course-chevron::before {
+  .course-teaser__chevron::before {
     transform: translateY(7px) rotate(225deg);
   }
 
-  .course-school-label,
-  .course-school-value,
-  .course-duedate-label,
-  .course-duedate-value,
-  .course-description {
+  .course-teaser__school-label,
+  .course-teaser__school-value,
+  .course-teaser__duedate-label,
+  .course-teaser__duedate-value,
+  .course-teaser__description {
     display: block;
   }
 }