diff --git a/assets/css/custom.scss b/assets/css/custom.scss
index a8e32979..b23ee414 100644
--- a/assets/css/custom.scss
+++ b/assets/css/custom.scss
@@ -5,6 +5,17 @@ html,
   @apply h-full antialiased text-gray-700 bg-gray-50;
 }
 
+/* layout */
+
+/* resource list items */
+.link-grid {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: max-content;
+}
+
+/* links */
 .nav-link.nuxt-link-exact-active {
   @apply text-pink-600 font-bold relative;
 }
@@ -16,6 +27,11 @@ html,
   height: 4px;
 }
 
+a.regular-link:hover {
+  @apply underline;
+}
+
+/* transition fade animation */
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.5s;
@@ -24,6 +40,7 @@ html,
   opacity: 0;
 }
 
+/* faq and other sections */
 .title-with-lines {
   @apply w-full mb-8 text-xs font-bold tracking-wide uppercase flex flex-none;
 }
diff --git a/assets/icons/exclamation-circle.svg b/assets/icons/exclamation-circle.svg
new file mode 100644
index 00000000..27647c3b
--- /dev/null
+++ b/assets/icons/exclamation-circle.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-circle" class="svg-inline--fa fa-exclamation-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>
\ No newline at end of file
diff --git a/components/EventListItemResourceList.vue b/components/EventListItemResourceList.vue
index 71c2ef33..78143a37 100644
--- a/components/EventListItemResourceList.vue
+++ b/components/EventListItemResourceList.vue
@@ -28,12 +28,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="scss" scoped>
-.link-grid {
-  display: grid;
-  grid-gap: 1rem;
-  grid-template-columns: 1fr 1fr;
-  grid-auto-rows: max-content;
-}
-</style>
diff --git a/components/MilestoneListItem.vue b/components/MilestoneListItem.vue
new file mode 100644
index 00000000..737f8728
--- /dev/null
+++ b/components/MilestoneListItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <WrapperContentBox>
+    <article class="relative pt-8 lg:pt-0">
+      <header class="flex flex-col items-center mb-8">
+        <p class="mb-4 text-4xl font-bold text-center text-pink-600">
+          <!-- <TIcon icon="clipboard-list" class="inline-block" /> -->
+          <TIcon
+            :icon="
+              milestone.type === 'cutoff'
+                ? 'exclamation-circle'
+                : 'check-square'
+            "
+            class="inline-block"
+          />
+        </p>
+
+        <NuxtLink :to="`/milestone/${milestone.slug}`" class="title-link">
+          <h2
+            class="relative inline-block mb-1 text-2xl font-bold hover:underline"
+          >
+            {{ milestone.title }}
+            <div
+              class="absolute top-0 right-0 hidden pl-2 text-base text-blue-600 transform translate-x-full translate-y-1 icon"
+            >
+              <TIcon icon="link" class="inline-block" />
+            </div></h2
+        ></NuxtLink>
+        <ClientOnly>
+          <p class="text-lg text-center">
+            Due
+            {{
+              format(new Date(milestone.deadline), "MMMM do, 'at' h:mm aaaa")
+            }}
+          </p>
+        </ClientOnly>
+      </header>
+
+      <main class="space-y-8">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div class="prose" v-html="$md.render(milestone.description)" />
+        <template v-if="milestone.todos.length">
+          <p v-if="!alwaysShowTasks" class="text-center">
+            <button
+              v-if="showTasks"
+              class="px-2 py-1 text-sm font-semibold tracking-wide uppercase border-2 rounded-lg"
+              @click="toggleTasks"
+            >
+              <TIcon icon="eye-slash" class="inline-block" /> Hide tasks
+            </button>
+            <button
+              v-else
+              class="px-2 py-1 text-sm font-semibold tracking-wide uppercase border-2 rounded-lg"
+              @click="toggleTasks"
+            >
+              <TIcon icon="chevron-down" class="inline-block" /> Show tasks
+            </button>
+          </p>
+          <ul v-if="showTasks || alwaysShowTasks" class="space-y-8 text-lg">
+            <li
+              v-for="todo in milestone.todos"
+              :key="todo.name"
+              class="flex space-x-4"
+            >
+              <div>
+                <TIcon icon="check-square" class="text-2xl text-blue-600" />
+              </div>
+              <div>
+                <p>{{ todo.name }}</p>
+                <ul v-if="todo.resources" class="mt-4 link-grid">
+                  <li v-for="resource in todo.resources" :key="resource.title">
+                    <ResourceListItem :resource="resource" />
+                  </li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </template>
+      </main>
+    </article>
+  </WrapperContentBox>
+</template>
+
+<script>
+import { defineComponent, ref } from '@nuxtjs/composition-api'
+import { format } from 'date-fns'
+
+export default defineComponent({
+  props: {
+    milestone: {
+      type: Object,
+      required: true,
+    },
+    alwaysShowTasks: {
+      type: Boolean,
+    },
+  },
+  setup() {
+    const showTasks = ref(false)
+    const toggleTasks = () => (showTasks.value = !showTasks.value)
+    return {
+      showTasks,
+      toggleTasks,
+      format,
+    }
+  },
+})
+</script>
diff --git a/components/Milestones.vue b/components/Milestones.vue
index 93b35933..5e103ccb 100644
--- a/components/Milestones.vue
+++ b/components/Milestones.vue
@@ -8,89 +8,7 @@
         />
       </button>
     </div> -->
-    <WrapperContentBox v-if="currentMilestone">
-      <article class="relative pt-8 lg:pt-0">
-        <header class="flex flex-col items-center mb-8">
-          <p class="mb-4 text-4xl font-bold text-center text-pink-600">
-            <TIcon icon="clipboard-list" class="inline-block" />
-          </p>
-
-          <NuxtLink
-            :to="`/milestone/${currentMilestone.slug}`"
-            class="title-link"
-          >
-            <h2
-              class="relative inline-block mb-1 text-2xl font-bold hover:underline"
-            >
-              {{ currentMilestone.title }}
-              <div
-                class="absolute top-0 right-0 hidden pl-2 text-base text-blue-600 transform translate-x-full translate-y-1 icon"
-              >
-                <TIcon icon="link" class="inline-block" />
-              </div></h2
-          ></NuxtLink>
-          <ClientOnly>
-            <p class="text-lg text-center">
-              Due
-              {{
-                format(
-                  new Date(currentMilestone.deadline),
-                  "MMMM do, 'at' h:mm aaaa"
-                )
-              }}
-            </p>
-          </ClientOnly>
-        </header>
-
-        <main class="space-y-8">
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <div
-            class="prose text-center"
-            v-html="$md.render(currentMilestone.description)"
-          />
-          <template v-if="currentMilestone.todos.length">
-            <p class="text-center">
-              <button
-                v-if="showTasks"
-                class="px-2 py-1 text-sm font-semibold tracking-wide uppercase border-2 rounded-lg"
-                @click="toggleTasks"
-              >
-                <TIcon icon="eye-slash" class="inline-block" /> Hide tasks
-              </button>
-              <button
-                v-else
-                class="px-2 py-1 text-sm font-semibold tracking-wide uppercase border-2 rounded-lg"
-                @click="toggleTasks"
-              >
-                <TIcon icon="chevron-down" class="inline-block" /> Show tasks
-              </button>
-            </p>
-            <ul v-if="showTasks" class="space-y-8 text-lg">
-              <li
-                v-for="todo in currentMilestone.todos"
-                :key="todo.name"
-                class="flex space-x-4"
-              >
-                <div>
-                  <TIcon icon="check-square" class="text-2xl text-blue-600" />
-                </div>
-                <div>
-                  <p>{{ todo.name }}</p>
-                  <ul v-if="todo.resources" class="mt-4 link-grid">
-                    <li
-                      v-for="resource in todo.resources"
-                      :key="resource.title"
-                    >
-                      <ResourceListItem :resource="resource" />
-                    </li>
-                  </ul>
-                </div>
-              </li>
-            </ul>
-          </template>
-        </main>
-      </article>
-    </WrapperContentBox>
+    <MilestoneListItem v-if="currentMilestone" :milestone="currentMilestone" />
     <!-- <div>
       <button>
         <TIcon
@@ -103,8 +21,8 @@
 </template>
 
 <script>
-import { defineComponent, computed, ref } from '@nuxtjs/composition-api'
-import { isPast, isFuture, format } from 'date-fns'
+import { defineComponent, computed } from '@nuxtjs/composition-api'
+import { isPast, isFuture } from 'date-fns'
 
 export default defineComponent({
   props: {
@@ -114,8 +32,6 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const showTasks = ref(false)
-    const toggleTasks = () => (showTasks.value = !showTasks.value)
     const milestones = props.milestones.map((milestone) => ({
       ...milestone,
       deadline: new Date(milestone.deadline),
@@ -137,9 +53,6 @@ export default defineComponent({
       pastMilestones,
       futureMilestones,
       currentMilestone,
-      format,
-      showTasks,
-      toggleTasks,
     }
   },
 })
diff --git a/components/TimelineWeek.vue b/components/TimelineWeek.vue
index a1c68ef5..17f32034 100644
--- a/components/TimelineWeek.vue
+++ b/components/TimelineWeek.vue
@@ -24,54 +24,19 @@
     <!-- events  -->
     <div>
       <template v-if="week.events.length || week.milestones.length">
-        <ul
-          v-if="week.events.length"
-          class="mt-1 text-xs"
-          :class="{ 'opacity-75': weekStatus === 'past' }"
-        >
-          <li v-for="e in week.events" :key="e.slug" class="flex space-x-2">
-            <p>
-              <TIcon
-                icon="calendar-day"
-                class="inline-block text-xs mt-05"
-                :class="
-                  weekStatus === 'current' ? 'text-pink-600' : 'text-gray-300'
-                "
-              />
-            </p>
-            <div>
-              <p class="font-semibold">{{ e.name }}</p>
-              <p>
-                {{ format(new Date(e.date), 'MMM d') }}
-              </p>
-            </div>
-          </li>
-        </ul>
-        <ul
+        <TimelineWeekItems v-if="week.events.length" :events="week.events">
+          <template #event="{ event }">
+            <TimelineWeekEvent :event="event" :week-status="weekStatus" />
+          </template>
+        </TimelineWeekItems>
+        <TimelineWeekItems
           v-if="week.milestones.length"
-          class="mt-1 text-xs"
-          :class="{ 'opacity-75': weekStatus === 'past' }"
+          :events="week.milestones"
         >
-          <li
-            v-for="milestone in week.milestones"
-            :key="milestone.slug"
-            class="flex space-x-2"
-          >
-            <p>
-              <TIcon
-                icon="check-square"
-                class="inline-block text-xs mt-05"
-                :class="
-                  weekStatus === 'current' ? 'text-pink-600' : 'text-gray-300'
-                "
-              />
-            </p>
-            <div>
-              <p class="font-semibold">{{ milestone.title }}</p>
-              <p>Due {{ format(new Date(milestone.deadline), 'MMM d') }}</p>
-            </div>
-          </li>
-        </ul>
+          <template #event="{ event }">
+            <TimelineWeekMilestone :milestone="event" />
+          </template>
+        </TimelineWeekItems>
       </template>
       <p v-else class="text-xs italic text-gray-400">&mdash;</p>
     </div>
diff --git a/components/TimelineWeekEvent.vue b/components/TimelineWeekEvent.vue
new file mode 100644
index 00000000..1834a223
--- /dev/null
+++ b/components/TimelineWeekEvent.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="flex space-x-2">
+    <p>
+      <TIcon
+        icon="calendar-day"
+        class="inline-block text-xs mt-05"
+        :class="
+          weekStatus === 'current' && isFutureEvent
+            ? 'text-pink-600'
+            : 'text-gray-300'
+        "
+      />
+    </p>
+    <div>
+      <p class="font-semibold" :class="{ 'line-through': !isFutureEvent }">
+        <NuxtLink :to="`/event/${event.slug}`" class="regular-link">{{
+          event.name
+        }}</NuxtLink>
+      </p>
+      <p>
+        {{ format(new Date(event.date), 'MMM d') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent } from '@nuxtjs/composition-api'
+import { format, isToday, isFuture, parseISO } from 'date-fns'
+
+export default defineComponent({
+  props: {
+    event: {
+      type: Object,
+      required: true,
+    },
+    weekStatus: {
+      type: String,
+      default: 'current',
+    },
+  },
+  setup(props) {
+    const isFutureEvent = computed(
+      () =>
+        isFuture(parseISO(props.event.date)) ||
+        isToday(parseISO(props.event.date))
+    )
+    return { format, isFutureEvent }
+  },
+})
+</script>
+<style lang="scss" scoped>
+.mt-05 {
+  margin-top: 0.05rem;
+}
+</style>
diff --git a/components/TimelineWeekItems.vue b/components/TimelineWeekItems.vue
new file mode 100644
index 00000000..b2841033
--- /dev/null
+++ b/components/TimelineWeekItems.vue
@@ -0,0 +1,27 @@
+<template>
+  <ul class="mt-1 text-xs" :class="{ 'opacity-75': weekStatus === 'past' }">
+    <li v-for="e in events" :key="e.slug">
+      <slot name="event" :event="e" />
+    </li>
+  </ul>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    weekStatus: {
+      type: String,
+      default: 'current',
+    },
+    events: {
+      type: Array,
+      default: () => {},
+    },
+  },
+  setup() {
+    return {}
+  },
+})
+</script>
diff --git a/components/TimelineWeekMilestone.vue b/components/TimelineWeekMilestone.vue
new file mode 100644
index 00000000..8a17a98d
--- /dev/null
+++ b/components/TimelineWeekMilestone.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="flex space-x-2">
+    <p>
+      <TIcon
+        :icon="
+          milestone.type === 'cutoff' ? 'exclamation-circle' : 'check-square'
+        "
+        class="inline-block text-xs mt-05"
+        :class="isFutureMilestone ? 'text-pink-600' : 'text-gray-300'"
+      />
+    </p>
+    <div>
+      <p class="font-semibold" :class="{ 'line-through': !isFutureMilestone }">
+        <NuxtLink :to="`/milestone/${milestone.slug}`" class="regular-link">{{
+          milestone.title
+        }}</NuxtLink>
+      </p>
+      <p>Due {{ format(new Date(milestone.deadline), 'MMM d') }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed } from '@nuxtjs/composition-api'
+import { format, isToday, isFuture, parseISO } from 'date-fns'
+
+export default defineComponent({
+  props: {
+    milestone: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const isFutureMilestone = computed(
+      () =>
+        isFuture(parseISO(props.milestone.deadline)) ||
+        isToday(parseISO(props.milestone.deadline))
+    )
+    return { format, isFutureMilestone }
+  },
+})
+</script>
diff --git a/content/milestones/50-checkpoint.yaml b/content/milestones/50-checkpoint.yaml
new file mode 100644
index 00000000..f95e1139
--- /dev/null
+++ b/content/milestones/50-checkpoint.yaml
@@ -0,0 +1,7 @@
+---
+title: 50% Checkpoint
+deadline: 2021-04-25T22:59:59+01:00
+type: checkpoint
+description: |
+  You should aim to have completed around __50%__ of your learning material by this date. This is __not__ a cutting point, only a general recommendation to help you pace your studies.
+todos: []
diff --git a/content/milestones/75-checkpoint.yaml b/content/milestones/75-checkpoint.yaml
new file mode 100644
index 00000000..a3c32e8e
--- /dev/null
+++ b/content/milestones/75-checkpoint.yaml
@@ -0,0 +1,7 @@
+---
+title: 75% Checkpoint
+deadline: 2021-05-09T22:59:59+01:00
+type: checkpoint
+description: |
+  You should aim to have completed around __75%__ of your learning material by this date. This is __not__ a cutting point, only a general recommendation to help you pace your studies.
+todos: []
diff --git a/content/milestones/80-checkpoint-cutoff.yaml b/content/milestones/80-checkpoint-cutoff.yaml
new file mode 100644
index 00000000..e1233556
--- /dev/null
+++ b/content/milestones/80-checkpoint-cutoff.yaml
@@ -0,0 +1,7 @@
+---
+title: 80% Checkpoint
+deadline: 2021-05-18T22:59:59+01:00
+type: cutoff
+description: |
+  By now, you should have completed the minimum required of __80%__ of your learning material. __This is a cutting point__: if you fail to do so, you will be removed from the program.
+todos: []
diff --git a/content/milestones/hatching-phase.yaml b/content/milestones/hatching-phase.yaml
index 3149e6d1..fc181777 100644
--- a/content/milestones/hatching-phase.yaml
+++ b/content/milestones/hatching-phase.yaml
@@ -1,8 +1,9 @@
 ---
 title: Hatching Phase
 deadline: 2021-04-05T22:59:59+01:00
+type: cutoff
 description: |
-  You need to have finished at least **10h** of your track until the deadline, otherwise you will be removed from the program.
+  You need to have finished at least **10h** of your track until the deadline. __This is a cutting point__: if you fail to complete it, you will be removed from the program.
 todos:
   []
   # - name: Requirements to fullfill
diff --git a/content/milestones/track-personalization.yaml b/content/milestones/track-personalization.yaml
index 99474c80..582512d2 100644
--- a/content/milestones/track-personalization.yaml
+++ b/content/milestones/track-personalization.yaml
@@ -1,20 +1,16 @@
 ---
 title: Track Personalization
 deadline: 2021-03-19T23:59:59+01:00
+type: tasks
 description: |
-  Now it is the time to choose if you want to learn Data Science, Artificial Intelligence, Web Development or
-  User Experience Design.
+  Now it is the time to choose if you want to learn Data Science, Artificial Intelligence, Web Development or User Experience Design.
 
   We will post instructions how to choose your track in the Kick-Off Session.
 
-  Please complete the following steps to choose your track:
+  After we've received all of your choices, we will evaluate your answers in the track personalization survey. Then we will assign you to a track on edyoucated and you can start learning. Please allow some time between you completing the survey and the track assignment as this process involves some manual steps. We will send you a message on Slack as soon as you can access your track material on edyoucated.
 
-  1. Complete the track personalization survey.
+   Please complete the following tasks to personalize your track:
 
-  After we've received all of your choices, we will evaluate your answers in the track personalization survey.
-  Then we will assign you to a track on edyoucated and you can start learning. Please allow some time between
-  you completing the survey and the track assignment as this process involves some manual steps. We will send you a
-  message on Slack as soon as you can access your track material on edyoucated.
 todos:
   - name: Complete the track personalization survey
     resources:
diff --git a/package.json b/package.json
index 66b39948..ddd1a8a2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "radar",
   "description": "The TechLabs Berlin semester radar shows all the important semester information at a glance",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "private": true,
   "author": "Felix Seidel",
   "contributors": [
diff --git a/pages/milestone/_slug.vue b/pages/milestone/_slug.vue
index ceb9e97e..e5543972 100644
--- a/pages/milestone/_slug.vue
+++ b/pages/milestone/_slug.vue
@@ -8,52 +8,7 @@
       <WrapperContentBox v-if="$fetchState.pending"
         >Loading...</WrapperContentBox
       >
-      <WrapperContentBox v-else>
-        <article class="relative pt-8 lg:pt-0">
-          <header class="mb-8">
-            <p class="mb-4 text-4xl font-bold text-center text-pink-600">
-              <TIcon icon="clipboard-list" class="inline-block" />
-            </p>
-            <h2 class="text-2xl font-bold text-center">
-              {{ milestone[0].title }}
-            </h2>
-            <p class="mb-4 text-lg text-center">
-              Due
-              {{
-                format(
-                  new Date(milestone[0].deadline),
-                  "MMMM do, 'at' h:mm aaaa"
-                )
-              }}
-            </p>
-          </header>
-
-          <main v-if="milestone[0].todos.length" class="space-y-8">
-            <ul class="space-y-8 text-lg">
-              <li
-                v-for="todo in milestone[0].todos"
-                :key="todo.name"
-                class="flex space-x-4"
-              >
-                <div>
-                  <TIcon icon="check-square" class="text-2xl text-blue-600" />
-                </div>
-                <div>
-                  <p>{{ todo.name }}</p>
-                  <ul v-if="todo.resources" class="mt-4 link-grid">
-                    <li
-                      v-for="resource in todo.resources"
-                      :key="resource.title"
-                    >
-                      <ResourceListItem :resource="resource" />
-                    </li>
-                  </ul>
-                </div>
-              </li>
-            </ul>
-          </main>
-        </article>
-      </WrapperContentBox>
+      <MilestoneListItem v-else :milestone="milestone[0]" always-show-tasks />
     </div>
   </main>
 </template>
@@ -66,9 +21,10 @@ import {
   useRoute,
   ref,
 } from '@nuxtjs/composition-api'
-import { format } from 'date-fns'
+import MilestoneListItem from '~/components/MilestoneListItem.vue'
 
 export default defineComponent({
+  components: { MilestoneListItem },
   setup() {
     const { $content } = useContext()
     const route = useRoute()
@@ -83,7 +39,6 @@ export default defineComponent({
 
     return {
       milestone,
-      format,
     }
   },
 })