diff --git a/templates/widgets/course-teaser/course-teaser.hamlet b/templates/widgets/course-teaser/course-teaser.hamlet
new file mode 100644
index 000000000..76f8cdb9f
--- /dev/null
+++ b/templates/widgets/course-teaser/course-teaser.hamlet
@@ -0,0 +1,16 @@
+<div .course :isRegistered:.course--registered #course-#{courseId}>
+  <div .course-chevron>
+  <div .course-shorthand>_{courseShorthand}
+  <div .course-title>
+    <a href=@{AdminTestR}>_{courseTitle}
+  <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-registration>
+    <a .course-registration__register course-registration__item button href=@{AdminTestR}>_{MsgBtnRegister}
+    <a .course-registration__deregister course-registration__item href=@{AdminTestR}>_{MsgBtnDeregister}
+    <span .course-registration__registered course-registration__item>_{MsgRegistered}
+  <div .course-description>_{courseDescription}
diff --git a/templates/widgets/course-teaser/course-teaser.julius b/templates/widgets/course-teaser/course-teaser.julius
new file mode 100644
index 000000000..6350e0743
--- /dev/null
+++ b/templates/widgets/course-teaser/course-teaser.julius
@@ -0,0 +1,13 @@
+var COURSE_TEASER_EXPANDED_CLASS = 'course--expanded';
+var COURSE_TEASER_CHEVRON_CLASS = 'course-teaser';
+
+document.addEventListener('DOMContentLoaded', function() {
+  var courseTeaserId = #{String courseId};
+  var courseTeaser = document.querySelector('#course-' + courseTeaserId);
+  var courseTeaserChevron = courseTeaser.querySelector('.' + COURSE_TEASER_CHEVRON_CLASS);
+
+  courseTeaserChevron.addEventListener('click', function(event) {
+    event.preventDefault();
+    courseTeaser.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);
+  });
+});
diff --git a/templates/widgets/course-teaser/course-teaser.lucius b/templates/widgets/course-teaser/course-teaser.lucius
new file mode 100644
index 000000000..5ae58c8e3
--- /dev/null
+++ b/templates/widgets/course-teaser/course-teaser.lucius
@@ -0,0 +1,167 @@
+:root {
+  --course-bg-color: var(--color-grey-lighter);
+  --course-expanded-bg-color: var(--color-grey-light);
+}
+
+.course {
+  display: grid;
+  grid-gap: 5px 7px;
+  grid-template-columns: 25px 60px 1fr 100px;
+  padding: 10px;
+  font-size: 1.4rem;
+  background-color: var(--course-bg-color);
+  transition: background-color .1s ease-out;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--course-expanded-bg-color);
+  }
+
+  + .course {
+    margin-top: 10px;
+  }
+}
+
+// chevron
+.course-chevron {
+  cursor: pointer;
+  padding: 10px;
+  grid-column: 4;
+  grid-row: 1/3;
+  justify-self: center;
+  align-self: center;
+
+  &::before {
+    content: '';
+    display: block;
+    border-width: 0 3px 3px 0;
+    width: 8px;
+    height: 8px;
+    border-color: var(--color-fontsec);
+    border-style: solid;
+    transform: rotate(45deg);
+    transition: transform .2s ease-out;
+  }
+}
+
+
+// semester
+.course-semester {
+  grid-column: 2;
+  font-size: 1.8rem;
+  align-self: flex-end;
+  color: var(--color-fontsec);
+  color: white;
+}
+
+// shorthand
+.course-shorthand {
+  grid-column: 1/3;
+  font-size: 1.8rem;
+  justify-self: end;
+  font-weight: bold;
+}
+
+// title
+.course-title {
+  grid-column: 3;
+  font-size: 1.6rem;
+  align-self: flex-end;
+}
+
+// registration
+.course-registration {
+  grid-column: 4;
+  grid-row: 3/5;
+  justify-self: center;
+  align-self: flex-end;
+  font-size: 16px;
+  color: var(--color-fontsec);
+}
+
+.course-registration__item {
+  display: none;
+}
+
+// school
+.course-school-label {
+  grid-column: 3;
+  font-size: 1.4rem;
+  align-self: flex-end;
+  color: var(--color-fontsec);
+}
+
+// description
+.course-description {
+  grid-column-start: 3;
+  color: var(--color-fontsec);
+}
+
+// subtitle
+.course-lecturer-label,
+.course-duedate-label,
+.course-school-label {
+  grid-column: 1/3;
+  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 {
+  display: none;
+}
+
+// registered courses
+.course--registered {
+
+  .course-registration__registered {
+    display: block;
+  }
+
+  .course-registration__deregister {
+    display: none;
+  }
+
+  &:hover {
+
+    .course-registration__register,
+    .course-registration__registered {
+      display: none;
+    }
+
+    .course-registration__deregister {
+      display: block;
+    }
+  }
+}
+
+// expanded courses
+.course--expanded {
+  max-height: 1000px;
+
+  .course-chevron::before {
+    transform: translateY(7px) rotate(225deg);
+  }
+
+  .course-school-label,
+  .course-school-value,
+  .course-duedate-label,
+  .course-duedate-value,
+  .course-registration,
+  .course-registration__register,
+  .course-description {
+    display: block;
+  }
+
+  &.course--registered {
+    .course-registration__register {
+      display: none;
+    }
+  }
+}