diff --git a/src/components/Klasse.vue b/src/components/Klasse.vue
new file mode 100644
index 0000000..5462f67
--- /dev/null
+++ b/src/components/Klasse.vue
@@ -0,0 +1,97 @@
+<template>
+  <span>
+    <v-chip
+      :class="cssClass"
+      v-if="id !== '' && typ === 'block'"
+    >
+      {{ (oberstufe) ? '' : stufe }}{{ zug }}
+    </v-chip>
+    <v-chip
+      :class="cssClass"
+      v-if="id !== '' && typ !== 'block'"
+    >
+      {{ (oberstufe) ? '' : stufe }}{{ zug }}
+    </v-chip>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Klasse',
+  props: {
+    id: String,
+    typ: String
+  },
+  computed: {
+    stufe () {
+      if (this.id === 'Q2') {
+        return 13
+      } else if (this.id === 'Q1') {
+        return 12
+      } else if (this.id === 'EF') {
+        return 11
+      } else {
+        return parseInt(this.id)
+      }
+    },
+
+    zug () {
+      if (this.id === 'Q2') {
+        return this.id
+      } else if (this.id === 'Q1') {
+        return this.id
+      } else if (this.id === 'EF') {
+        return this.id
+      } else {
+        return this.id.replace(/\d*(\w)/, '$1')
+      }
+    },
+
+    oberstufe () {
+      return this.stufe > 10
+    },
+
+    color () {
+      var clr = ''
+
+      if (this.stufe === 13) {
+        clr = 'purple lighten-3'
+      } else if (this.stufe === 12) {
+        clr = 'purple lighten-2'
+      } else if (this.stufe === 11) {
+        clr = 'purple lighten-1'
+      } else if (this.stufe === 10) {
+        clr = 'pink '
+      } else if (this.stufe === 9) {
+        clr = 'blue '
+      } else if (this.stufe === 8) {
+        clr =  'green '
+      } else if (this.stufe === 7) {
+        clr = 'amber '
+      } else if (this.stufe === 6) {
+        clr = 'orange '
+      } else if (this.stufe === 5) {
+        clr = 'red '
+      }
+
+      return clr
+    },
+
+    cssClass () {
+      var cls = this.color
+      
+      if (this.zug === 'A') {
+        cls =  cls + ' lighten-1'
+      } else if (this.zug === 'B') {
+        cls =  cls + ' lighten-2'
+      } else if (this.zug === 'C') {
+        cls =  cls + ' lighten-3'
+      } else if (this.zug === 'D') {
+        cls =  cls + ' lighten-4'
+      }
+
+      return cls
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Vertretungsplan.vue b/src/components/Vertretungsplan.vue
index 5b979f2..ff1f023 100644
--- a/src/components/Vertretungsplan.vue
+++ b/src/components/Vertretungsplan.vue
@@ -59,6 +59,11 @@
       <template v-slot:item.datum></template> 
       <template v-slot:header.datum></template> 
 
+      <!-- Darstellung der Klasse -->
+      <template v-slot:item.klassen="{ item }">
+        <Klasse v-for="(k, i) in klassen(item.klassen)" :key="i" :id="k" />
+      </template> 
+
       <!-- Darstellung der Vertretungsart -->
       <template v-slot:item.art_vertretung="{ item }">
         {{ vertretungsart(item.art_vertretung) }}
@@ -81,6 +86,8 @@
 </template>
 
 <script> 
+import Klasse from '@/components/Klasse.vue'
+
 var vertretungsarten = {
   'T': 'verlegt',
   'F': 'verlegt von',
@@ -96,8 +103,12 @@ var vertretungsarten = {
   'E': 'Klausur',
   '': 'Vertretung'      
 }
+
 export default {
   name: 'Vertretungsplan',
+  components: {
+    Klasse
+  },
   data() {
     return {
       vp: [],
@@ -221,6 +232,9 @@ export default {
     vertretungsart (code) {
       return vertretungsarten[code]
     },
+    klassen (klassenString) {
+      return klassenString.split('~')
+    }
   },
   created () {
     // Startdatum festlegen